*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#111827}button{cursor:pointer}.hidden{display:none!important}
.auth-body{min-height:100vh;overflow:hidden;position:relative;background:linear-gradient(#58a9ff,#9fd2ff 42%,#ddc4aa)}
.school-bg{position:absolute;inset:0}.school-bg:before{content:"";position:absolute;left:4%;right:4%;top:34%;height:28%;background:linear-gradient(#f7f4ee,#d7c6b5);border:5px solid #222;box-shadow:inset 0 -10px rgba(0,0,0,.07)}.school-bg:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(#c6ad94,#e2c1a4)}
.platform-title{position:relative;z-index:2;margin:44px 0 0 50px;font-size:clamp(48px,6vw,92px);color:#fff;font-weight:900;text-shadow:0 7px 14px #003cff,2px 2px 0 #073bff,-2px -2px 0 #073bff}
.auth-layout{position:relative;z-index:3;display:grid;grid-template-columns:minmax(360px,650px) 1fr;gap:30px;align-items:end;padding:18px 36px 28px}.auth-card{margin-left:auto;margin-right:auto;width:min(650px,100%);min-height:595px;border-radius:26px;background:rgba(255,255,255,.78);padding:30px 28px 22px;box-shadow:0 12px 30px rgba(0,0,0,.13);-webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);}.auth-card h2{text-align:center;margin:8px 0 26px;font-size:clamp(34px,3.5vw,54px);font-weight:500}.form-stack{display:flex;flex-direction:column;gap:28px;align-items:center}.form-stack input{width:min(430px,86%);border:4px solid #090909;border-radius:34px;background:#1224ff;color:white;padding:20px 24px;font-size:20px;font-weight:800;text-align:center;outline:0}.form-stack input::placeholder{color:#cbd2ff}.form-stack button{width:min(280px,55%);border:3px solid #090909;border-radius:34px;background:#1224ff;color:white;padding:15px 20px;font-size:22px;font-weight:900}.footer-text{text-align:center;margin:48px 0 4px;font-size:clamp(28px,2.4vw,40px);font-weight:700}.small-btn{display:block;margin:12px auto 0;border:0;background:transparent;color:#0b49e8;font-weight:800;font-size:16px}.message{text-align:center;margin:14px 0 0;min-height:24px;font-weight:800;color:#c5221f}.message.success{color:#137333}.founder-figure{min-height:650px;position:relative}.person-head{position:absolute;right:20%;bottom:58%;width:145px;height:145px;border-radius:50%;background:#ffd9b8;box-shadow:0 -28px 0 #1d1d1d inset}.person-body{position:absolute;right:7%;bottom:0;width:360px;height:520px;border-radius:180px 180px 0 0;background:linear-gradient(90deg,#111 0 38%,#f2d8a4 38% 58%,#111 58%)}.laptop{position:absolute;right:6%;bottom:50px;width:90px;height:210px;background:#222;border-radius:10px;transform:rotate(8deg)};

.dashboard-body{display:flex;background:#f6f8fc;min-height:100vh}.sidebar{width:250px;background:linear-gradient(180deg,#0638af 0%,#0c55f5 100%);color:#fff;padding:24px 15px;display:flex;flex-direction:column;gap:18px}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 16px}.brand-star{width:52px;height:52px;border-radius:17px;background:#f5b928;color:#0638af;display:grid;place-items:center;font-size:32px;transform:rotate(-12deg)}.brand strong{display:block;font-size:24px;line-height:1}.brand small{font-size:12px;letter-spacing:5px}.sidebar-nav{display:grid;gap:6px}.sidebar-nav a{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:12px;font-weight:700}.sidebar-nav a span{width:20px;text-align:center}.sidebar-nav a.active,.sidebar-nav a:hover{background:rgba(255,255,255,.15)}.side-card{margin-top:auto;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:16px}.crown{width:42px;height:42px;border-radius:50%;background:#f5b928;color:#0738a8;display:grid;place-items:center;margin-bottom:10px}.side-card p{font-size:13px;line-height:1.5;opacity:.9}.side-card button{width:100%;border:0;background:#f5b928;border-radius:10px;padding:12px;font-weight:900}
.dashboard-main{flex:1;padding:22px}.dash-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}.menu-btn{width:48px;height:48px;border:1px solid #e2e8f0;background:#fff;border-radius:50%;font-size:20px}.welcome{flex:1}.welcome h1{margin:0 0 6px;font-size:26px}.welcome p{margin:0;color:#64748b}.header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.profile{background:#fff;border:1px solid #e2e8f0;border-radius:13px;padding:12px 14px;display:flex;gap:10px;align-items:center}.profile>span{width:42px;height:42px;border-radius:50%;background:#eaf0ff;display:grid;place-items:center;font-weight:900}.profile small{display:block;color:#64748b}.logout-btn{border:0;background:#0f49ff;color:#fff;border-radius:13px;padding:13px 15px;font-weight:900}
.page-section{display:none}.active-section{display:block}.status-banner{display:flex;justify-content:space-between;align-items:center;gap:18px;background:#ecfdf3;border:1px solid #b7efc5;border-radius:18px;padding:20px;margin-bottom:18px}.status-banner strong{font-size:22px;color:#116b36}.status-banner p{margin:6px 0 0;color:#28553a}.active-pill{background:#12a150;color:white;padding:9px 14px;border-radius:999px;font-weight:900}
.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:18px}.stat-card{background:#fff;border:1px solid #e6ebf4;border-radius:16px;padding:18px;display:flex;gap:14px;align-items:center;box-shadow:0 4px 14px rgba(16,24,40,.04)}.stat-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:24px}.blue{background:#e9f1ff;color:#0f49ff}.green{background:#e9f8ef;color:#22a560}.purple{background:#efe9ff;color:#7544e8}.gold{background:#fff4d7;color:#b77b00}.stat-card span{font-size:14px;color:#64748b}.stat-card b{display:block;font-size:24px;margin:4px 0}.stat-card small{font-size:12px;color:#22a560}
.dashboard-grid{display:grid;grid-template-columns:1.35fr 1fr .85fr;gap:16px}.panel,.form-panel,.table-panel,.empty-state{background:#fff;border:1px solid #e6ebf4;border-radius:18px;padding:18px;box-shadow:0 4px 14px rgba(16,24,40,.04)}.panel-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:16px}.panel-title h3,.panel h3{margin:0}.panel-title span{border:1px solid #e2e8f0;border-radius:10px;background:#fff;padding:8px 10px;font-size:12px}.mini-status{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.mini-status div{display:grid;grid-template-columns:20px 1fr;align-items:center;background:#f8fbff;border-radius:12px;padding:10px}.mini-status small{color:#64748b}.mini-status b{grid-column:2;font-size:20px}.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px}.dot.blue{background:#0f49ff}.dot.green{background:#22a560}.dot.gold{background:#f5b928}.dot.red{background:#ef4444}.setup-message{margin-top:18px;background:#f8fbff;border:1px dashed #cad7eb;border-radius:14px;padding:20px}.build-list{display:grid;gap:10px}.build-list div{background:#f8fbff;border:1px solid #dce8ff;border-radius:14px;padding:13px;font-weight:900}.build-list span{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#0f49ff;color:white;margin-right:8px}.build-list .done span{background:#12a150}.action-list{display:grid;gap:11px}.action-list button{border:1px solid #e2e8f0;background:#fff;border-radius:12px;padding:13px 14px;text-align:left;font-weight:900;color:#0f49ff}.announcement{margin-top:18px;background:#fff8e8;border:1px solid #f0d18b;border-radius:16px;padding:18px;display:flex;align-items:center;gap:16px}.star-badge{width:50px;height:50px;border-radius:50%;background:#f5b928;display:grid;place-items:center;color:white;font-size:24px}.announcement div:nth-child(2){flex:1}.announcement p{margin:5px 0 0;color:#64748b}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-head h2{margin:0 0 5px}.section-head p{margin:0;color:#64748b}.form-panel{margin-bottom:18px}.form-panel h3{margin-top:0}.grid-form{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.grid-form input,.grid-form select{border:1px solid #d8e1ee;border-radius:12px;padding:13px;font-size:14px}.grid-form button{border:0;border-radius:12px;background:#0f49ff;color:#fff;font-weight:900;padding:13px}.inline-message{min-height:22px;margin-bottom:0;font-weight:800;color:#137333}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px}th{background:#f8fbff;color:#475569}.status-active{background:#ecfdf3;color:#137333;border-radius:999px;padding:5px 10px;font-weight:800}.status-disabled{background:#fff1f2;color:#b42318;border-radius:999px;padding:5px 10px;font-weight:800}.table-action{border:1px solid #d8e1ee;border-radius:10px;background:#fff;padding:8px 10px;color:#0f49ff;font-weight:800}.empty-state{text-align:center;padding:42px}.empty-state h2{margin-top:0}.empty-state p{color:#64748b}
@media(max-width:1200px){.stats-row{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr 1fr}.grid-form{grid-template-columns:repeat(2,1fr)}}@media(max-width:900px){.dashboard-body{display:block}.sidebar{width:100%}.dash-header{flex-direction:column}.header-actions{justify-content:flex-start}.auth-layout{grid-template-columns:1fr}.founder-figure{display:none}}@media(max-width:650px){.platform-title{font-size:44px;margin:24px 16px 0}.auth-layout{padding:12px}.auth-card{min-height:auto}.form-stack input{width:100%}.form-stack button{width:75%}.dashboard-main{padding:14px}.stats-row,.dashboard-grid,.mini-status,.grid-form{grid-template-columns:1fr}.announcement,.status-banner{flex-direction:column;align-items:flex-start}}


/* Founder login only fix */
.founder-login-only {
  justify-content: center;
}
.login-note {
  max-width: 440px;
  margin: 12px auto 0;
  text-align: center;
  color: #334155;
  font-weight: 700;
  line-height: 1.5;
}

/* Step 1C Admin Login + Admin Dashboard */
.admin-login-body{min-height:100vh;background:radial-gradient(circle at top left,rgba(244,183,42,.22),transparent 28%),linear-gradient(135deg,#eaf2ff 0%,#fff 45%,#dce9ff 100%);display:grid;place-items:center;padding:22px}
.admin-login-shell{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;gap:20px}
.admin-login-brand,.admin-login-card{background:rgba(255,255,255,.92);border:1px solid #dbe6f7;border-radius:24px;box-shadow:0 16px 35px rgba(16,24,40,.1);padding:34px}
.admin-login-brand{background:linear-gradient(135deg,#0638af,#0f58ff);color:#fff}
.brand-star.large{width:74px;height:74px;font-size:42px;margin-bottom:20px}
.admin-login-brand h1{margin:0 0 8px;font-size:42px}
.login-info-box{margin-top:42px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:18px;display:grid;gap:8px}
.admin-login-card h2{margin:0 0 10px;font-size:34px}.admin-login-card p{color:#64748b}
.admin-form{display:grid;gap:12px;margin-top:22px}.admin-form label{font-weight:800}.admin-form input{border:1px solid #d8e1ee;border-radius:13px;padding:14px;font-size:15px}.admin-form button{margin-top:8px;border:0;border-radius:13px;padding:14px;background:#0f49ff;color:white;font-weight:900;font-size:16px}
.back-link{display:inline-block;margin-top:14px;color:#0f49ff;text-decoration:none;font-weight:900}
.admin-dashboard-body{display:flex;min-height:100vh;background:#f6f8fc}.admin-sidebar{width:250px;min-width:250px;max-width:250px;background:linear-gradient(180deg,#0b2d75,#123fac);color:#fff;padding:24px 15px;display:flex;flex-direction:column;gap:18px;overflow:hidden}.admin-main{flex:1;padding:22px}
.admin-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.school-scope-card{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}.school-scope-card>div{background:#f8fbff;border:1px solid #dce8ff;border-radius:16px;padding:18px}.school-scope-card small{color:#64748b;font-weight:800}.school-scope-card h2{margin:8px 0 0}.locked{opacity:.65}.admin-future-grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.admin-login-shell{grid-template-columns:1fr}.admin-dashboard-body{display:block}.admin-sidebar{width:100%}.admin-info-grid,.school-scope-card,.admin-future-grid{grid-template-columns:1fr}}

/* Step 1D TeacherID + Teacher Login */
.admin-nav a:not(.locked){cursor:pointer}.admin-page-section{display:none}.active-admin-section{display:block}.logout-btn.secondary{background:#f4b72a;color:#0b2d75}.teacher-grid-form{grid-template-columns:repeat(6,1fr)}
.teacher-login-bg{background:radial-gradient(circle at top left,rgba(15,73,255,.18),transparent 28%),linear-gradient(135deg,#f4f8ff 0%,#fff 45%,#e8fff2 100%)}.teacher-brand{background:linear-gradient(135deg,#0b2d75,#139a61)}.teacher-sidebar{background:linear-gradient(180deg,#0b2d75,#139a61)}.teacher-dashboard-body .active-pill{background:#139a61}
@media(max-width:1200px){.teacher-grid-form{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.teacher-grid-form{grid-template-columns:1fr}}

/* Teacher Management UI Design V2 */
.admin-topbar{display:flex;align-items:center;gap:16px;margin-bottom:18px;background:#fff;border-bottom:1px solid #eef2f7;padding:12px 18px;border-radius:18px;box-shadow:0 4px 16px rgba(16,24,40,.04)}
.admin-dashboard-body .admin-sidebar-profile-menu{position:relative;margin-top:auto}
.admin-dashboard-body .admin-sidebar-profile-trigger{
  display:flex;align-items:center;gap:12px;width:100%;border:0;background:transparent;padding:0;
  cursor:pointer;font:inherit;color:#fff;text-align:left
}
.admin-dashboard-body .admin-user-card.admin-sidebar-profile-menu:not(.is-open){
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:none
}
.admin-dashboard-body .admin-user-card.admin-sidebar-profile-menu .admin-sidebar-profile-trigger{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#fff!important;
  border-radius:12px
}
.admin-dashboard-body .admin-sidebar-profile-menu.is-open{
  border-color:rgba(212,170,71,.35)!important;
  box-shadow:0 8px 18px rgba(212,170,71,.12)
}
.admin-dashboard-body .admin-sidebar-profile-menu.is-open .admin-sidebar-profile-trigger{
  background:linear-gradient(180deg,var(--bs-theme-gold) 0%,var(--bs-theme-gold-2) 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 18px rgba(212,170,71,.16)!important;
  border-radius:12px
}
.admin-dashboard-body .admin-sidebar-profile-copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;flex:1 1 auto
}
.admin-dashboard-body .admin-sidebar-profile-copy b{
  display:block;font-size:14px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px
}
.admin-dashboard-body .admin-sidebar-profile-copy small{
  display:block;font-size:12px;font-weight:700;color:rgba(255,255,255,.88);opacity:.9
}
.admin-dashboard-body .admin-sidebar-profile-chevron{
  flex:0 0 auto;font-size:12px;line-height:1;color:rgba(255,255,255,.85);transition:transform .2s ease
}
.admin-dashboard-body .admin-sidebar-profile-menu.is-open .admin-sidebar-profile-chevron{transform:rotate(180deg)}
.admin-dashboard-body .admin-sidebar-profile-dropdown{
  position:absolute;left:0;right:0;bottom:calc(100% + 8px);min-width:100%;
  background:#fff;border:1px solid rgba(255,255,255,.2);border-radius:12px;
  box-shadow:0 12px 32px rgba(15,23,42,.28);padding:6px;z-index:1400
}
.admin-dashboard-body .admin-sidebar-profile-dropdown[hidden]{display:none!important}
.admin-dashboard-body .admin-sidebar-profile-item{
  display:block;width:100%;text-align:left;border:0;background:transparent;padding:10px 12px;border-radius:8px;
  font-size:13px;font-weight:700;color:#0f172a;cursor:pointer;line-height:1.3
}
.admin-dashboard-body .admin-sidebar-profile-item:hover{background:#f1f5f9}
.admin-dashboard-body .admin-sidebar-profile-item-logout{color:#b91c1c}
.admin-dashboard-body .admin-sidebar-profile-item-logout:hover{background:#fef2f2}
/* Admin Dashboard only — independent sidebar nav + main content scroll */
.admin-dashboard-body.admin-module-dashboard{height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow:hidden}
.admin-module-dashboard .admin-sidebar{height:100%;max-height:100%;min-height:0;overflow:hidden;box-sizing:border-box}
.admin-module-dashboard .admin-sidebar-nav-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.admin-module-dashboard .admin-sidebar > .brand{flex:0 0 auto}
.admin-module-dashboard .admin-sidebar-profile-menu{flex:0 0 auto;margin-top:0}
.admin-module-dashboard .admin-main{flex:1 1 auto;min-width:0;min-height:0;height:100%;max-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;box-sizing:border-box}
@media(max-width:960px){
  .admin-dashboard-body.admin-module-dashboard{display:block;height:100vh;height:100dvh;min-height:0;max-height:100dvh;overflow-x:hidden;overflow-y:hidden;max-width:100vw}
  .admin-module-dashboard .admin-main{width:100%;max-width:100%;min-width:0;margin-left:0}
}
.admin-title{flex:1}.admin-title h1{margin:0;font-size:28px}.admin-title p{margin:4px 0 0;color:#64748b;font-size:16px}
.top-link-btn{border:1px solid #dbe7ff;background:#fff;color:#0f49ff;border-radius:12px;padding:12px 14px;font-weight:900}
.admin-user-card{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px}
.admin-user-icon{width:48px;height:48px;border-radius:50%;background:#fff;color:#0f49ff;display:grid;place-items:center;font-size:24px;overflow:hidden;flex:0 0 auto}
.admin-dashboard-body .admin-user-icon.has-admin-photo{background:#fff}
.admin-dashboard-body .admin-user-icon img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.admin-user-card small{display:block;opacity:.9;margin-top:3px}
.teacher-page-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}.teacher-form-card,.teacher-summary-card{background:#fff;border:1px solid #e6ebf4;border-radius:18px;box-shadow:0 5px 18px rgba(16,24,40,.06)}.teacher-form-card{padding:20px}.teacher-summary-card{padding:20px;position:sticky;top:16px}
.teacher-form-header{display:flex;gap:14px;align-items:center;border-bottom:1px solid #edf2f7;padding-bottom:16px;margin-bottom:16px}.teacher-header-icon{width:56px;height:56px;border-radius:16px;background:#e9f1ff;color:#0f49ff;display:grid;place-items:center;font-size:24px;font-weight:900}.teacher-form-header h2{margin:0;color:#0b49c9}.teacher-form-header p{margin:5px 0 0;color:#64748b}
.teacher-create-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}.field{display:flex;flex-direction:column;gap:7px}.field label,.field .field-label{font-weight:900;color:#172033}.field label b{color:#e11d48}.field input,.field select,.field textarea{border:1px solid #d8e1ee;border-radius:10px;padding:12px 13px;font-size:14px;background:#fff;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.field textarea{min-height:68px;resize:vertical}.field small{color:#64748b}.teacher-type-help{border:1px solid #d8e1ee;border-radius:12px;padding:8px;display:grid;gap:6px;background:#fff;margin-top:6px}.teacher-type-help div{padding:8px 10px;border-radius:9px;background:#f8fbff}.teacher-type-help span{display:block;color:#64748b;font-size:12px;margin-top:2px}.upload-box{border:2px dashed #c8d4e5;border-radius:13px;min-height:118px;display:grid;place-items:center;text-align:center;color:#64748b;padding:14px}.upload-box span{font-size:38px;color:#0f49ff}.upload-box p{margin:0;font-weight:800}.admin-teacher-create-hidden{display:none!important}
.admin-teacher-type-other-note{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f0d18b;color:#7a4d00;font-size:12.5px;font-weight:800;line-height:1.4}
#adminTeacherTeachingAssignmentsWrap{transition:opacity .15s ease}
#adminTeacherTeachingAssignmentsWrap.admin-teacher-field-hidden{display:none!important}
.admin-teacher-assignments-header{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.admin-teacher-assignments-list{display:grid;gap:10px}
.admin-teacher-assignment-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;padding:12px;border:1px solid #dbe7ff;border-radius:12px;background:#f8fbff}
.admin-teacher-assignment-row label{font-size:12px;font-weight:800;color:#475569;margin-bottom:4px;display:block}
.admin-teacher-assignment-row select{width:100%;border:1px solid #d8e1ee;border-radius:10px;padding:10px 11px;font-size:13px;background:#fff}
.admin-teacher-assignment-remove-btn{border:1px solid #fecaca;background:#fff;color:#b91c1c;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer;white-space:nowrap;height:42px}
.admin-teacher-assignment-remove-btn:hover{background:#fef2f2}
.admin-teacher-add-assignment-btn{border:1px dashed #93c5fd;background:#fff;color:#0f49ff;border-radius:12px;padding:11px 14px;font-weight:900;cursor:pointer;width:fit-content;margin-top:4px}
.admin-teacher-add-assignment-btn:hover{background:#eef4ff}
.admin-teacher-assignments-msg{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:12.5px;font-weight:800}
.admin-teacher-assignments-profile-table{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
.admin-teacher-assignments-profile-table th,.admin-teacher-assignments-profile-table td{border:1px solid #e2e8f0;padding:8px 10px;text-align:left}
.admin-teacher-assignments-profile-table th{background:#f8fafc;font-weight:800}
.admin-teacher-profile-assignments{grid-column:1/-1;margin-top:4px}
@media(max-width:900px){.admin-teacher-assignment-row{grid-template-columns:1fr 1fr}.admin-teacher-assignment-remove-btn{grid-column:1/-1;width:100%}}.admin-teacher-license-upload-box{cursor:pointer;position:relative;width:100%}.admin-teacher-license-upload-box.has-image{min-height:auto;padding:10px}.admin-teacher-license-preview img{max-width:100%;max-height:140px;border-radius:10px;object-fit:contain;display:block;margin:0 auto}.admin-teacher-license-clear-btn{margin-top:8px;border:1px solid #d8e1ee;background:#fff;color:#334155;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;width:fit-content}.admin-teacher-license-clear-btn:hover{background:#f8fbff}.teacher-actions{grid-column:1/-1;display:flex;gap:12px;border-top:1px solid #edf2f7;padding-top:16px}.teacher-actions button{border-radius:12px;padding:13px 18px;font-weight:900}.save-teacher-btn{border:0;background:#0f49ff;color:#fff}.reset-teacher-btn{border:1px solid #0f49ff;background:#fff;color:#0f49ff}.cancel-teacher-btn{border:1px solid #d8e1ee;background:#fff;color:#334155}
.summary-title{display:flex;align-items:center;justify-content:space-between}.summary-title h3{margin:0;color:#0b49c9}.summary-title span{width:42px;height:42px;border-radius:50%;border:1px solid #f4b72a;color:#f4b72a;display:grid;place-items:center;font-size:24px}.teacher-summary-card>p{color:#64748b;line-height:1.5}.summary-item{display:grid;grid-template-columns:52px 1fr 24px;gap:12px;align-items:center;padding:15px 0;border-bottom:1px solid #edf2f7}.summary-icon{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:23px}.blue-soft{background:#e9f1ff}.purple-soft{background:#f1e9ff}.green-soft{background:#e9f8ef}.orange-soft{background:#fff0e1}.teal-soft{background:#e5fbf8}.summary-item b{display:block}.summary-item small{color:#64748b;display:block;margin-top:3px}.check{color:#16a34a;font-weight:900;font-size:20px}.tip-box{margin-top:18px;background:#fff8e8;border:1px solid #f0d18b;border-radius:14px;padding:14px;color:#7a4d00}.tip-box p{margin:6px 0 0;color:#7a4d00}.teacher-table-panel{margin-top:18px}
.admin-teachers-list-shell{background:#fff;border:1px solid #e6ebf4;border-radius:20px;padding:20px 22px;box-shadow:0 8px 24px rgba(16,24,40,.06);overflow:hidden;max-width:100%}
.admin-teachers-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px;max-width:100%}
.admin-teacher-mini-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(15,73,255,.12);border-radius:20px;background:linear-gradient(180deg,#fff 0%,#f8fbff 48%,#fff 100%);box-shadow:0 14px 32px rgba(11,45,117,.10);box-sizing:border-box}
.admin-teacher-mini-card-photo img,
.admin-teacher-mini-card-photo-img,
.teacher-card-photo{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.admin-teacher-mini-card-add{border-style:dashed;cursor:pointer;min-height:320px}
@media(max-width:680px){.admin-teachers-card-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}}
.admin-job-letter-shell{max-width:100%;overflow:hidden}
.admin-job-letter-document{box-sizing:border-box}
@media(max-width:1100px){.teacher-page-layout{grid-template-columns:1fr}.teacher-summary-card{position:static}.teacher-create-form{grid-template-columns:1fr}}
@media(max-width:700px){.admin-topbar{align-items:flex-start;flex-direction:column}.teacher-actions{flex-direction:column}.teacher-actions button{width:100%}}

/* Auto ID + Locked ID Fields */
.locked-input{
  background:#f1f5f9!important;
  color:#0f49ff!important;
  font-weight:900!important;
  border:1px solid #cbd5e1!important;
  cursor:not-allowed;
}
.id-rule-note{
  margin:8px 0 0;
  color:#475569;
  font-weight:700;
  line-height:1.45;
}


/* Student Create Form V1 */
.student-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.student-form-card {
  background: #fff;
  border: 1px solid #e6ebf4;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(16,24,40,.06);
  padding: 20px;
}
.student-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px 18px;
}
.student-create-form .field-wide {
  grid-column: span 2;
}
.form-section-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #0b49c9;
  font-size: 18px;
  padding: 10px 0 4px;
  border-bottom: 1px solid #edf2f7;
}
.form-section-title span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #0f49ff;
  color: #fff;
  font-weight: 900;
}
.conditional-box {
  border: 1px solid #99e6e1;
  background: #ecfeff;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.conditional-box label {
  font-weight: 900;
  color: #0f3f75;
}
.conditional-box select {
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  padding: 12px 13px;
}
.conditional-box small {
  color: #0f766e;
}
.hidden {
  display: none !important;
}
@media(max-width: 1200px) {
  .student-create-layout {
    grid-template-columns: 1fr;
  }
  .student-create-form {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media(max-width: 700px) {
  .student-create-form {
    grid-template-columns: 1fr;
  }
  .student-create-form .field-wide {
    grid-column: auto;
  }
}

/* Admin Create Student — Colorful Step Form UI */
.admin-student-step-form-layout {
  display: block;
  max-width: 100%;
}
.admin-student-step-form-shell {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}
.admin-student-form-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: #fff;
  border-bottom: 1px solid #e8eef7;
}
.admin-student-form-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.admin-student-form-back-btn {
  border: 1px solid #dbe7ff;
  background: #f8fbff;
  color: #0b2d75;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.admin-student-form-back-btn:hover {
  background: #eef4ff;
  border-color: #93c5fd;
}
.admin-student-form-header-titles h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}
.admin-student-form-header-titles p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.admin-student-form-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-student-step-form-body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.admin-student-step-nav {
  position: sticky;
  top: 12px;
  padding: 20px 16px 24px;
  background: linear-gradient(180deg, #eef4ff 0%, #f5f3ff 100%);
  border-right: 1px solid #e2e8f0;
  min-height: 100%;
}
.admin-student-step-nav-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-student-step-nav-item {
  display: grid;
  grid-template-columns: 32px 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-student-step-nav-item:hover {
  background: #fff;
  border-color: #dbe7ff;
}
.admin-student-step-nav-item.is-active {
  background: #fff;
  border-color: #93c5fd;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.12);
}
.admin-student-step-nav-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #64748b;
  background: #e2e8f0;
}
.admin-student-step-nav-item.is-active .admin-student-step-nav-num {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
}
.admin-student-step-nav-icon {
  font-size: 16px;
  line-height: 1;
}
.admin-student-step-nav-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.admin-student-step-nav-text b {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
}
.admin-student-step-nav-text small {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.3;
}
.admin-student-step-nav-tip {
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #dbe7ff;
  font-size: 11px;
  line-height: 1.45;
  color: #475569;
}
.admin-student-step-nav-tip strong {
  display: block;
  margin-bottom: 4px;
  color: #1d4ed8;
  font-weight: 900;
}
.admin-student-step-nav-tip p {
  margin: 0;
  font-weight: 700;
}
.admin-student-step-form-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 24px 24px;
  min-width: 0;
}
.admin-student-form-section {
  background: #fff;
  border: 1px solid #e8eef7;
  border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  scroll-margin-top: 16px;
}
.admin-student-form-section.is-step-current {
  border-color: #bfdbfe;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}
.admin-student-form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf2f7;
}
.admin-student-form-section-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.admin-student-form-section--blue .admin-student-form-section-icon {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
}
.admin-student-form-section--fees .admin-student-form-section-icon {
  background: linear-gradient(135deg, #dcfce7, #ecfdf5);
}
.admin-student-form-section--violet .admin-student-form-section-icon {
  background: linear-gradient(135deg, #ede9fe, #f5f3ff);
}
.admin-student-form-section--indigo .admin-student-form-section-icon {
  background: linear-gradient(135deg, #e0e7ff, #eef2ff);
}
.admin-student-form-section--orange .admin-student-form-section-icon {
  background: linear-gradient(135deg, #ffedd5, #fff7ed);
}
.admin-student-form-section-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-student-form-section-head p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.admin-student-form-section-num {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: #0f49ff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.admin-student-form-section--fees .admin-student-form-section-num {
  background: #059669;
}
.admin-student-form-section--violet .admin-student-form-section-num {
  background: #7c3aed;
}
.admin-student-form-section--indigo .admin-student-form-section-num {
  background: #4f46e5;
}
.admin-student-form-section--orange .admin-student-form-section-num {
  background: #ea580c;
}
.admin-student-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.admin-student-form-grid .field-wide {
  grid-column: 1 / -1;
}
.admin-student-form-grid .field label,
.admin-student-form-grid .field .field-label,
.admin-student-step-form-main .field label,
.admin-student-step-form-main .field .field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
}
.admin-student-form-grid .field input,
.admin-student-form-grid .field select,
.admin-student-form-grid .field textarea,
.admin-student-step-form-main .field input,
.admin-student-step-form-main .field select,
.admin-student-step-form-main .field textarea {
  width: 100%;
  box-sizing: border-box;
}
.admin-student-fee-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-student-fee-card {
  border-radius: 14px;
  padding: 14px 16px;
  border: 1px solid transparent;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.admin-student-fee-card--class {
  background: linear-gradient(145deg, #ecfdf5, #f0fdf4);
  border-color: #bbf7d0;
}
.admin-student-fee-card--transport {
  background: linear-gradient(145deg, #eff6ff, #f0f9ff);
  border-color: #bfdbfe;
}
.admin-student-fee-card--hostel {
  background: linear-gradient(145deg, #f5f3ff, #faf5ff);
  border-color: #ddd6fe;
}
.admin-student-fee-card--lunch {
  background: linear-gradient(145deg, #fff7ed, #ffedd5);
  border-color: #fed7aa;
}
.admin-student-fee-card--total {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-color: #fcd34d;
  padding: 16px 20px;
}
.admin-student-fee-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.admin-student-fee-card-head label {
  margin: 0 !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}
.admin-student-fee-card-icon {
  font-size: 18px;
  line-height: 1;
}
.admin-student-fee-card-body label {
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.admin-student-fee-card-amount {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
}
.admin-student-fee-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-student-fee-total-label {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: #92400e;
}
.admin-student-fee-card--total small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
}
.admin-student-fee-total-input {
  min-width: 140px;
  max-width: 220px;
  text-align: right;
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #92400e !important;
  background: rgba(255, 255, 255, 0.65) !important;
  border: 1px solid #fcd34d !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
}
.admin-student-form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.admin-student-form-step-btn {
  border: 1px solid #dbe7ff;
  background: #f8fbff;
  color: #0b2d75;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.admin-student-form-step-btn:hover {
  background: #eef4ff;
}
.admin-student-form-step-btn--primary {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: transparent;
  color: #fff;
}
.admin-student-form-step-btn--primary:hover {
  filter: brightness(1.05);
}
.admin-student-form-message {
  margin: 0;
  padding: 12px 24px 16px;
}
.admin-student-step-form-main .student-parent-login-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  margin-top: 12px;
}
.admin-student-step-form-main .student-parent-login-fields .field-wide {
  grid-column: 1 / -1;
}
@media (max-width: 1100px) {
  .admin-student-step-form-body {
    grid-template-columns: 1fr;
  }
  .admin-student-step-nav {
    position: static;
    border-right: 0;
    border-bottom: 1px solid #e2e8f0;
    padding: 16px;
  }
  .admin-student-step-nav-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
  }
  .admin-student-step-nav-tip {
    margin-top: 12px;
  }
}
@media (max-width: 900px) {
  .admin-student-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-student-fee-cards-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .admin-student-form-page-header {
    padding: 16px;
  }
  .admin-student-form-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .admin-student-form-header-actions .save-teacher-btn,
  .admin-student-form-header-cancel {
    flex: 1 1 auto;
  }
  .admin-student-step-form-main {
    padding: 16px;
  }
  .admin-student-form-grid,
  .admin-student-step-form-main .student-parent-login-fields {
    grid-template-columns: 1fr;
  }
  .admin-student-form-grid .field-wide {
    grid-column: auto;
  }
  .admin-student-form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-student-form-footer button {
    width: 100%;
  }
  .admin-student-fee-total-row {
    flex-direction: column;
    align-items: stretch;
  }
  .admin-student-fee-total-input {
    max-width: none;
    width: 100%;
    text-align: left;
  }
}


/* Student Login + Dashboard V1 */
.student-login-bg {
  background: radial-gradient(circle at top left, rgba(15,73,255,.18), transparent 28%), linear-gradient(135deg,#f4f8ff 0%,#fff 45%,#eaf2ff 100%);
}
.student-brand {
  background: linear-gradient(135deg, #062a73, #0f49ff);
}
.student-sidebar {
  background: linear-gradient(180deg,#062a73,#0f49ff);
}
.student-dashboard-body .active-pill {
  background: #0f49ff;
}
.student-info-grid {
  grid-template-columns: repeat(4, 1fr);
}
.student-scope-card {
  grid-template-columns: repeat(4, 1fr);
}
.student-scope-card h2 {
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}
@media(max-width: 1100px) {
  .student-info-grid,
  .student-scope-card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 650px) {
  .student-info-grid,
  .student-scope-card {
    grid-template-columns: 1fr;
  }
}


/* Driver Teacher Create Form V1 */
.driver-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.driver-form-card {
  background: #fff;
  border: 1px solid #e6ebf4;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(16,24,40,.06);
  padding: 20px;
}
.driver-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px 18px;
}
.driver-create-form .field-wide {
  grid-column: span 2;
}
.driver-days {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 12px;
}
.driver-days label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}
@media(max-width: 1200px) {
  .driver-create-layout {
    grid-template-columns: 1fr;
  }
  .driver-create-form {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media(max-width: 700px) {
  .driver-create-form {
    grid-template-columns: 1fr;
  }
  .driver-create-form .field-wide {
    grid-column: auto;
  }
}


/* Driver Teacher Login + Dashboard V1 */
.driver-login-bg {
  background: radial-gradient(circle at top left, rgba(15,73,255,.18), transparent 28%), linear-gradient(135deg,#f4f8ff 0%,#fff 45%,#eef7ff 100%);
}
.driver-brand {
  background: linear-gradient(135deg, #062a73, #0f766e);
}
.driver-sidebar {
  background: linear-gradient(180deg,#062a73,#0f766e);
}
.driver-dashboard-body .active-pill {
  background: #0f766e;
}
.driver-info-grid {
  grid-template-columns: repeat(4, 1fr);
}
.driver-scope-card {
  grid-template-columns: repeat(4, 1fr);
}
.driver-scope-card h2 {
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}
@media(max-width: 1100px) {
  .driver-info-grid,
  .driver-scope-card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media(max-width: 650px) {
  .driver-info-grid,
  .driver-scope-card {
    grid-template-columns: 1fr;
  }
}


/* Class / Grade / Section Management V1 */
.class-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.class-form-card {
  background: #fff;
  border: 1px solid #e6ebf4;
  border-radius: 18px;
  box-shadow: 0 5px 18px rgba(16,24,40,.06);
  padding: 20px;
}
.class-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px 18px;
}
.class-create-form .field-wide {
  grid-column: span 2;
}
@media(max-width: 1200px) {
  .class-create-layout {
    grid-template-columns: 1fr;
  }
  .class-create-form {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}
@media(max-width: 700px) {
  .class-create-form {
    grid-template-columns: 1fr;
  }
  .class-create-form .field-wide {
    grid-column: auto;
  }
}


/* Class Teacher Multi Select V1 */
.class-create-form select[multiple] {
  min-height: 130px;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}
.class-create-form select[multiple] option {
  padding: 7px 8px;
  border-radius: 6px;
}
.class-create-form small {
  color: #64748b;
  font-weight: 700;
}

/* Teacher Dashboard Main UI / Feature Cards — TCH-2 */
.teacher-hero-banner {
  background: linear-gradient(135deg, #ecfdf3, #eef6ff);
}
.teacher-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}
.teacher-feature-card {
  background: #fff;
  border: 1px solid #e6ebf4;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 5px 18px rgba(16,24,40,.06);
  display: grid;
  gap: 12px;
  min-height: 220px;
}
.teacher-feature-card h3 {
  margin: 0 0 6px;
  color: #0b2d75;
  font-size: 18px;
}
.teacher-feature-card p {
  margin: 0;
  color: #64748b;
  line-height: 1.45;
  font-size: 14px;
}
.teacher-feature-card strong {
  font-size: 20px;
  color: #139a61;
}
.teacher-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #e9f8ef;
  color: #139a61;
  font-size: 24px;
  font-weight: 900;
}
.teacher-feature-btn {
  border: 1px solid #cfe4d8;
  border-radius: 12px;
  background: #fff;
  color: #139a61;
  font-weight: 900;
  padding: 11px 14px;
  justify-self: start;
}
.teacher-feature-btn:hover {
  background: #139a61;
  color: #fff;
}
.teacher-feature-notice {
  background: #fff8e8;
  border: 1px solid #f0d18b;
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 18px;
  color: #7a4d00;
}
.teacher-feature-notice strong {
  display: block;
  font-size: 18px;
  margin-bottom: 6px;
}
.teacher-feature-notice p {
  margin: 0;
  line-height: 1.5;
}
.teacher-next-state {
  background: #f8fbff;
}
@media(max-width:1200px){.teacher-feature-grid{grid-template-columns:repeat(2,minmax(190px,1fr))}}
@media(max-width:650px){.teacher-feature-grid{grid-template-columns:1fr}.teacher-feature-card{min-height:auto}}


/* Teacher Dashboard TCH-3 — My Classes Module */
.teacher-my-classes-panel{margin-top:18px}.teacher-my-classes-title{align-items:flex-start}.teacher-my-classes-title p{margin:5px 0 0;color:#64748b;font-size:14px}.teacher-my-classes-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto;gap:12px;margin:16px 0}.teacher-my-classes-toolbar input,.teacher-my-classes-toolbar select{border:1px solid #d8e1ee;border-radius:12px;padding:12px 13px;background:#fff;outline:none}.teacher-my-classes-toolbar input:focus,.teacher-my-classes-toolbar select:focus{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.teacher-my-classes-toolbar button{border:0;border-radius:12px;padding:12px 16px;background:#0b2d75;color:#fff;font-weight:900}.teacher-my-classes-summary{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-bottom:16px}.teacher-my-classes-summary div{border:1px solid #e6ebf4;border-radius:16px;background:#f8fbff;padding:14px}.teacher-my-classes-summary strong{display:block;font-size:24px;color:#0b2d75}.teacher-my-classes-summary span{display:block;margin-top:3px;color:#64748b;font-size:13px}.teacher-my-classes-table-wrap{overflow:auto;border:1px solid #e6ebf4;border-radius:16px;background:#fff}.teacher-my-classes-table{width:100%;border-collapse:collapse;min-width:820px}.teacher-my-classes-table th,.teacher-my-classes-table td{padding:13px 12px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px}.teacher-my-classes-table th{background:#f8fbff;color:#0b2d75;font-weight:900}.teacher-my-classes-table tr:last-child td{border-bottom:0}.teacher-role-pill{display:inline-block;border-radius:999px;background:#e9f1ff;color:#0b49c9;font-weight:900;padding:6px 10px;font-size:12px}@media(max-width:900px){.teacher-my-classes-toolbar{grid-template-columns:1fr}.teacher-my-classes-summary{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:560px){.teacher-my-classes-summary{grid-template-columns:1fr}}


/* Teacher Dashboard TCH-4 — Student Attendance Module */
.teacher-attendance-panel{margin-top:18px}.teacher-attendance-title{align-items:flex-start}.teacher-attendance-title p{margin:5px 0 0;color:#64748b;font-size:14px}.teacher-attendance-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto;gap:12px;margin:16px 0}.teacher-attendance-toolbar select,.teacher-attendance-toolbar input{border:1px solid #d8e1ee;border-radius:12px;padding:12px 13px;background:#fff;outline:none}.teacher-attendance-toolbar select:focus,.teacher-attendance-toolbar input:focus{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.teacher-attendance-toolbar button,.teacher-attendance-actions button{border:0;border-radius:12px;padding:12px 16px;background:#0b2d75;color:#fff;font-weight:900}.teacher-attendance-summary{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-bottom:16px}.teacher-attendance-summary div{border:1px solid #e6ebf4;border-radius:16px;background:#f8fbff;padding:14px}.teacher-attendance-summary strong{display:block;font-size:24px;color:#0b2d75}.teacher-attendance-summary span{display:block;margin-top:3px;color:#64748b;font-size:13px}.teacher-attendance-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.teacher-attendance-actions #teacherAttendanceSaveBtn{background:#0f49ff}.teacher-attendance-actions span{font-weight:800;color:#137333}.teacher-attendance-table-wrap{overflow:auto;border:1px solid #e6ebf4;border-radius:16px;background:#fff}.teacher-attendance-table{width:100%;border-collapse:collapse;min-width:760px}.teacher-attendance-table th,.teacher-attendance-table td{padding:13px 12px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px}.teacher-attendance-table th{background:#f8fbff;color:#0b2d75;font-weight:900}.teacher-attendance-table tr:last-child td{border-bottom:0}.teacher-attendance-table select,.teacher-attendance-table input{width:100%;border:1px solid #d8e1ee;border-radius:10px;padding:9px 10px;background:#fff}@media(max-width:900px){.teacher-attendance-toolbar{grid-template-columns:1fr}.teacher-attendance-summary{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:560px){.teacher-attendance-summary{grid-template-columns:1fr}.teacher-attendance-actions{align-items:stretch}.teacher-attendance-actions button{width:100%}}


/* Teacher Dashboard TCH-5 — Homework Module */
.teacher-homework-panel{margin-top:18px}.teacher-homework-title{align-items:flex-start}.teacher-homework-title p{margin:5px 0 0;color:#64748b;font-size:14px}.teacher-homework-form{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:12px;margin:16px 0;padding:16px;border:1px solid #e6ebf4;border-radius:18px;background:#f8fbff}.teacher-homework-form label{display:grid;gap:6px;color:#0b2d75;font-weight:900;font-size:13px}.teacher-homework-form input,.teacher-homework-form select,.teacher-homework-form textarea,.teacher-homework-toolbar input,.teacher-homework-toolbar select{border:1px solid #d8e1ee;border-radius:12px;padding:11px 12px;background:#fff;outline:none;font:inherit}.teacher-homework-form input:focus,.teacher-homework-form select:focus,.teacher-homework-form textarea:focus,.teacher-homework-toolbar input:focus,.teacher-homework-toolbar select:focus{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.teacher-homework-wide{grid-column:1/-1}.teacher-homework-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.teacher-homework-actions button,.teacher-homework-toolbar button,.teacher-homework-edit-btn{border:0;border-radius:12px;padding:11px 15px;background:#0b2d75;color:#fff;font-weight:900}.teacher-homework-actions #teacherHomeworkSaveBtn{background:#0f49ff}.teacher-homework-actions span{font-weight:800;color:#137333}.teacher-homework-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto;gap:12px;margin:16px 0}.teacher-homework-summary{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-bottom:16px}.teacher-homework-summary div{border:1px solid #e6ebf4;border-radius:16px;background:#fff;padding:14px}.teacher-homework-summary strong{display:block;font-size:24px;color:#0b2d75}.teacher-homework-summary span{display:block;margin-top:3px;color:#64748b;font-size:13px}.teacher-homework-table-wrap{overflow:auto;border:1px solid #e6ebf4;border-radius:16px;background:#fff}.teacher-homework-table{width:100%;border-collapse:collapse;min-width:920px}.teacher-homework-table th,.teacher-homework-table td{padding:13px 12px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px}.teacher-homework-table th{background:#f8fbff;color:#0b2d75;font-weight:900}.teacher-homework-table tr:last-child td{border-bottom:0}.teacher-homework-edit-btn{background:#139a61;padding:8px 12px}@media(max-width:1050px){.teacher-homework-form{grid-template-columns:repeat(2,minmax(150px,1fr))}.teacher-homework-toolbar{grid-template-columns:1fr}.teacher-homework-summary{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:560px){.teacher-homework-form,.teacher-homework-summary{grid-template-columns:1fr}.teacher-homework-actions{align-items:stretch}.teacher-homework-actions button{width:100%}}


/* Teacher Dashboard TCH-6 — Exam / Reports Module */
.teacher-exam-panel{margin-top:18px}.teacher-exam-title{align-items:flex-start}.teacher-exam-title p{margin:5px 0 0;color:#64748b;font-size:14px}.teacher-exam-form{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:12px;margin:16px 0;padding:16px;border:1px solid #e6ebf4;border-radius:18px;background:#f8fbff}.teacher-exam-form label{display:grid;gap:6px;color:#0b2d75;font-weight:900;font-size:13px}.teacher-exam-form input,.teacher-exam-form select,.teacher-exam-form textarea,.teacher-exam-toolbar input,.teacher-exam-toolbar select{border:1px solid #d8e1ee;border-radius:12px;padding:11px 12px;background:#fff;outline:none;font:inherit}.teacher-exam-form input:focus,.teacher-exam-form select:focus,.teacher-exam-form textarea:focus,.teacher-exam-toolbar input:focus,.teacher-exam-toolbar select:focus{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.teacher-exam-wide{grid-column:1/-1}.teacher-exam-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.teacher-exam-actions button,.teacher-exam-toolbar button,.teacher-exam-edit-btn{border:0;border-radius:12px;padding:11px 15px;background:#0b2d75;color:#fff;font-weight:900}.teacher-exam-actions #teacherExamSaveBtn{background:#0f49ff}.teacher-exam-actions span{font-weight:800;color:#137333}.teacher-exam-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 150px 170px auto;gap:12px;margin:16px 0}.teacher-exam-summary{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px;margin-bottom:16px}.teacher-exam-summary div{border:1px solid #e6ebf4;border-radius:16px;background:#fff;padding:14px}.teacher-exam-summary strong{display:block;font-size:24px;color:#0b2d75}.teacher-exam-summary span{display:block;margin-top:3px;color:#64748b;font-size:13px}.teacher-exam-table-wrap{overflow:auto;border:1px solid #e6ebf4;border-radius:16px;background:#fff}.teacher-exam-table{width:100%;border-collapse:collapse;min-width:1080px}.teacher-exam-table th,.teacher-exam-table td{padding:13px 12px;border-bottom:1px solid #edf2f7;text-align:left;font-size:14px}.teacher-exam-table th{background:#f8fbff;color:#0b2d75;font-weight:900}.teacher-exam-table tr:last-child td{border-bottom:0}.teacher-exam-edit-btn{background:#139a61;padding:8px 12px}@media(max-width:1200px){.teacher-exam-form{grid-template-columns:repeat(2,minmax(150px,1fr))}.teacher-exam-toolbar{grid-template-columns:1fr}.teacher-exam-summary{grid-template-columns:repeat(2,minmax(130px,1fr))}}@media(max-width:560px){.teacher-exam-form,.teacher-exam-summary{grid-template-columns:1fr}.teacher-exam-actions{align-items:stretch}.teacher-exam-actions button{width:100%}}


/* Teacher Dashboard TCH-7 — Messages / Video Class Link Integration */
.teacher-message-video-panel{margin-top:18px;border:1px solid #dbe7ff;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.teacher-message-video-title p{margin:5px 0 0;color:#64748b}
.teacher-integration-grid{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:16px}
.teacher-integration-card{border:1px solid #e2e8f0;border-radius:18px;background:#fff;padding:18px;display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:start;box-shadow:0 8px 18px rgba(16,24,40,.05)}
.teacher-integration-card h4{margin:0 0 6px;font-size:18px;color:#0f172a}
.teacher-integration-card p{margin:0 0 10px;color:#64748b;line-height:1.5}
.teacher-integration-card small{display:block;color:#475569;font-weight:800;line-height:1.5}
.teacher-integration-icon{width:48px;height:48px;border-radius:16px;background:#eef4ff;color:#0f49ff;display:grid;place-items:center;font-size:22px;font-weight:900}
.teacher-integration-card button{grid-column:1/-1;border:0;border-radius:14px;background:#0f49ff;color:#fff;font-weight:900;padding:12px 14px;cursor:pointer}
.teacher-video-select-label{display:grid;gap:7px;font-weight:900;color:#334155;margin:10px 0}
.teacher-video-select-label select{border:1px solid #d8e1ee;border-radius:12px;padding:12px;background:#fff;font-weight:800;color:#0f172a}
.teacher-integration-status{margin-top:14px;border:1px dashed #cbd5e1;background:#fff;border-radius:14px;padding:13px 15px;font-weight:900;color:#475569}
.teacher-integration-status.is-ok{border-color:#bbf7d0;background:#f0fdf4;color:#15803d}
.teacher-integration-status.is-warning{border-color:#fecaca;background:#fff1f2;color:#b42318}
.teacher-optional-label{font-weight:600;color:#94a3b8;font-size:0.78rem}
.teacher-online-join-status{display:block;margin-top:0.35rem;color:#15803d;font-weight:700}
.teacher-online-join-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0.45rem}
.teacher-online-join-actions button{flex:1 1 auto;min-width:140px}
.teacher-btn-primary{background:#16a34a!important}
.teacher-btn-secondary{background:#0ea5e9!important}
.teacher-btn-danger{background:#dc2626!important}
.teacher-integration-card input[type="text"],.teacher-integration-card input[type="datetime-local"]{grid-column:1/-1;width:100%;margin-top:0.25rem;padding:0.45rem 0.55rem;border:1px solid #cbd5e1;border-radius:10px;font:inherit}
@media(max-width:800px){.teacher-integration-grid{grid-template-columns:1fr}.teacher-integration-card{grid-template-columns:44px 1fr}}


/* Teacher Dashboard TCH-8 — Teacher Profile / School Info Polish */
.teacher-profile-polish-panel,.teacher-school-info-panel,.teacher-work-details-panel{margin-top:18px;border:1px solid #e2e8f0;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.teacher-profile-polish-title,.teacher-school-info-title{align-items:flex-start}.teacher-profile-polish-title p,.teacher-school-info-title p{margin:5px 0 0;color:#64748b;font-size:14px}.teacher-profile-polish-title span,.teacher-school-info-title span{background:#eef4ff;color:#0f49ff;border:1px solid #dbe7ff;border-radius:999px;padding:8px 12px;font-weight:900}
.teacher-profile-polish-grid{display:grid;grid-template-columns:minmax(260px,1.1fr) minmax(260px,.9fr);gap:16px}.teacher-profile-hero-card,.teacher-profile-detail-card{border:1px solid #e2e8f0;border-radius:20px;background:#fff;overflow:hidden;box-shadow:0 10px 22px rgba(16,24,40,.05)}.teacher-profile-cover{height:86px;background:linear-gradient(135deg,#0f49ff,#7c3aed,#ec4899)}.teacher-profile-main-row{display:flex;gap:14px;align-items:center;padding:0 18px 14px}.teacher-profile-avatar-large{width:76px;height:76px;border-radius:24px;background:#fff;color:#0f49ff;border:4px solid #fff;box-shadow:0 10px 22px rgba(15,73,255,.18);display:grid;place-items:center;font-size:32px;font-weight:1000;margin-top:-34px}.teacher-profile-main-row h2{margin:0;color:#0f172a;font-size:24px}.teacher-profile-main-row p{margin:5px 0 0;color:#64748b;font-weight:800}.teacher-profile-chip-row{display:flex;gap:8px;flex-wrap:wrap;padding:0 18px 18px}.teacher-profile-chip-row span{border:1px solid #dbe7ff;background:#f8fbff;color:#0b2d75;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:900}.teacher-profile-detail-card{padding:18px}.teacher-profile-detail-card h4{margin:0 0 12px;color:#0f172a;font-size:18px}.teacher-profile-detail-list,.teacher-school-info-grid,.teacher-work-details-grid{display:grid;grid-template-columns:repeat(2,minmax(160px,1fr));gap:12px}.teacher-profile-detail-list div,.teacher-school-info-grid div,.teacher-work-details-grid div{border:1px solid #e6ebf4;border-radius:16px;background:#fff;padding:13px}.teacher-profile-detail-list small,.teacher-school-info-grid small,.teacher-work-details-grid small{display:block;color:#64748b;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.02em}.teacher-profile-detail-list strong,.teacher-school-info-grid strong,.teacher-work-details-grid strong{display:block;margin-top:6px;color:#0f172a;font-size:15px;line-height:1.35;word-break:break-word}.teacher-school-info-wide{grid-column:1/-1}.teacher-work-details-panel .panel-title span{background:#f1f5f9;color:#475569;border-radius:999px;padding:8px 12px;font-weight:900}
@media(max-width:900px){.teacher-profile-polish-grid{grid-template-columns:1fr}.teacher-profile-detail-list,.teacher-school-info-grid,.teacher-work-details-grid{grid-template-columns:1fr}.teacher-profile-main-row{align-items:flex-start}.teacher-profile-main-row h2{font-size:21px}}


/* TCH-9 — Teacher Final UI Clean + Mobile Responsive Check */
.teacher-dashboard-body{
  overflow-x:hidden;
}
.teacher-dashboard-body .dashboard-main{
  max-width:1280px;
  width:100%;
  margin:0 auto;
}
.teacher-dashboard-body .panel,
.teacher-dashboard-body .status-banner,
.teacher-dashboard-body .setup-card,
.teacher-feature-card,
.teacher-profile-hero-card,
.teacher-profile-detail-card,
.teacher-integration-card{
  box-sizing:border-box;
}
.teacher-dashboard-body table th,
.teacher-dashboard-body table td{
  vertical-align:top;
}
.teacher-dashboard-body .teacher-my-classes-table-wrap,
.teacher-dashboard-body .teacher-attendance-table-wrap,
.teacher-dashboard-body .teacher-homework-table-wrap,
.teacher-dashboard-body .teacher-exam-table-wrap{
  -webkit-overflow-scrolling:touch;
}
.teacher-dashboard-body .teacher-my-classes-table-wrap::after,
.teacher-dashboard-body .teacher-attendance-table-wrap::after,
.teacher-dashboard-body .teacher-homework-table-wrap::after,
.teacher-dashboard-body .teacher-exam-table-wrap::after{
  content:'Swipe table left/right on mobile';
  display:none;
  padding:10px 12px;
  color:#64748b;
  font-size:12px;
  font-weight:800;
  background:#f8fbff;
  border-top:1px solid #edf2f7;
}
.teacher-dashboard-body input,
.teacher-dashboard-body select,
.teacher-dashboard-body textarea,
.teacher-dashboard-body button{
  max-width:100%;
}
.teacher-dashboard-body button{
  touch-action:manipulation;
}
.teacher-dashboard-body .teacher-feature-btn,
.teacher-dashboard-body .teacher-homework-edit-btn,
.teacher-dashboard-body .teacher-exam-edit-btn{
  min-height:40px;
}
.teacher-dashboard-body .teacher-profile-detail-list strong,
.teacher-dashboard-body .teacher-school-info-grid strong,
.teacher-dashboard-body .teacher-work-details-grid strong,
.teacher-dashboard-body .teacher-integration-card small{
  overflow-wrap:anywhere;
}

@media(max-width:1024px){
  .teacher-dashboard-body .admin-topbar{
    gap:14px;
  }
  .teacher-dashboard-body .profile{
    max-width:100%;
  }
  .teacher-feature-grid,
  .teacher-integration-grid,
  .teacher-profile-polish-grid{
    gap:14px;
  }
}

@media(max-width:760px){
  body:not(.bs-mobile-module-drawer-enabled).teacher-dashboard-body .admin-sidebar{
    position:static;
    width:100%;
    min-height:auto;
    padding:14px;
  }
  body:not(.bs-mobile-module-drawer-enabled).teacher-dashboard-body .admin-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body:not(.bs-mobile-module-drawer-enabled).teacher-dashboard-body .admin-nav a{
    margin:0;
    padding:11px 12px;
    min-height:44px;
    justify-content:flex-start;
    border-radius:14px;
  }
  .teacher-dashboard-body .admin-dashboard-main,
  .teacher-dashboard-body .dashboard-main{
    padding:14px;
  }
  .teacher-dashboard-body .admin-topbar,
  .teacher-dashboard-body .panel-title,
  .teacher-profile-polish-title,
  .teacher-school-info-title,
  .teacher-message-video-title,
  .teacher-my-classes-title,
  .teacher-attendance-title,
  .teacher-homework-title,
  .teacher-exam-title{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .teacher-dashboard-body .header-actions,
  .teacher-dashboard-body .teacher-homework-actions,
  .teacher-dashboard-body .teacher-exam-actions,
  .teacher-dashboard-body .teacher-attendance-actions{
    width:100%;
    align-items:stretch;
  }
  .teacher-dashboard-body .header-actions .logout-btn,
  .teacher-dashboard-body .teacher-homework-actions button,
  .teacher-dashboard-body .teacher-exam-actions button,
  .teacher-dashboard-body .teacher-attendance-actions button,
  .teacher-dashboard-body .teacher-integration-card button{
    width:100%;
  }
  .teacher-dashboard-body .teacher-my-classes-toolbar,
  .teacher-dashboard-body .teacher-attendance-toolbar,
  .teacher-dashboard-body .teacher-homework-toolbar,
  .teacher-dashboard-body .teacher-exam-toolbar{
    grid-template-columns:1fr;
  }
  .teacher-dashboard-body .teacher-feature-card,
  .teacher-dashboard-body .teacher-integration-card,
  .teacher-dashboard-body .teacher-profile-detail-card,
  .teacher-dashboard-body .teacher-profile-hero-card,
  .teacher-dashboard-body .teacher-school-info-panel,
  .teacher-dashboard-body .teacher-work-details-panel{
    border-radius:16px;
  }
  .teacher-dashboard-body .teacher-profile-main-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .teacher-dashboard-body .teacher-profile-avatar-large{
    margin-top:-36px;
  }
  .teacher-dashboard-body .teacher-my-classes-table-wrap::after,
  .teacher-dashboard-body .teacher-attendance-table-wrap::after,
  .teacher-dashboard-body .teacher-homework-table-wrap::after,
  .teacher-dashboard-body .teacher-exam-table-wrap::after{
    display:block;
  }
}

@media(max-width:480px){
  .teacher-dashboard-body .admin-nav{
    grid-template-columns:1fr;
  }
  .teacher-dashboard-body .welcome h1,
  .teacher-dashboard-body .teacher-profile-main-row h2{
    font-size:20px;
    line-height:1.25;
  }
  .teacher-dashboard-body .status-banner,
  .teacher-dashboard-body .panel,
  .teacher-feature-card,
  .teacher-integration-card,
  .teacher-profile-detail-card{
    padding:14px;
  }
  .teacher-feature-grid,
  .teacher-homework-summary,
  .teacher-exam-summary,
  .teacher-attendance-summary,
  .teacher-my-classes-summary{
    grid-template-columns:1fr!important;
  }
  .teacher-dashboard-body .teacher-feature-icon,
  .teacher-dashboard-body .teacher-integration-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:20px;
  }
  .teacher-dashboard-body .teacher-integration-card{
    grid-template-columns:42px 1fr;
  }
  .teacher-dashboard-body .teacher-profile-cover{
    height:72px;
  }
  .teacher-dashboard-body .teacher-profile-avatar-large{
    width:68px;
    height:68px;
    border-radius:22px;
    font-size:28px;
  }
}


/* Student Dashboard STD-1 — SchoolID Isolation / Foundation Check */
.student-foundation-panel {
  border: 1px solid rgba(37, 99, 235, 0.12);
}

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

.student-foundation-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.student-foundation-card small {
  display: block;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 8px;
}

.student-foundation-card strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.student-foundation-card p,
.student-foundation-note {
  color: #64748b;
  line-height: 1.5;
}

.student-foundation-note {
  margin-top: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  padding: 14px 16px;
}

.student-sidebar .sidebar-nav a:not(.locked) {
  cursor: pointer;
}

@media (max-width: 760px) {
  .student-foundation-grid {
    grid-template-columns: 1fr;
  }

  .student-foundation-card {
    padding: 14px;
  }
}
/* End Student Dashboard STD-1 */


/* Student Dashboard STD-2 — Main UI / Feature Cards */
.student-feature-panel {
  border: 1px solid rgba(37, 99, 235, 0.12);
}

.student-feature-title {
  align-items: center;
  gap: 12px;
}

.student-feature-refresh {
  border: none;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  cursor: pointer;
  background: #eff6ff;
  color: #1d4ed8;
}

.student-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.student-feature-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: start;
  min-height: 140px;
  padding: 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.student-feature-card:hover,
.student-feature-card:focus {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.24);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
  outline: none;
}

.student-feature-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: #f8fafc;
  font-size: 24px;
}

.student-feature-card small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 6px;
}

.student-feature-card strong {
  display: block;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.student-feature-card p {
  margin: 8px 0 0;
  color: #64748b;
  line-height: 1.45;
  font-size: 13px;
}

.student-feature-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed rgba(15, 23, 42, 0.14);
  color: #475569;
  line-height: 1.5;
}

.student-dashboard-body .sidebar-nav a[data-student-feature-link] {
  cursor: pointer;
}

@media (max-width: 1100px) {
  .student-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .student-feature-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .student-feature-refresh {
    width: 100%;
  }

  .student-feature-grid {
    grid-template-columns: 1fr;
  }

  .student-feature-card {
    min-height: auto;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .student-feature-card {
    grid-template-columns: 44px 1fr;
    padding: 14px;
  }

  .student-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 20px;
  }

  .student-feature-card strong {
    font-size: 19px;
  }
}
/* End Student Dashboard STD-2 */


/* Student Dashboard STD-3 — Student My Class Module */
.student-my-class-panel {
  border: 1px solid rgba(99, 102, 241, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-my-class-title {
  align-items: center;
}

.student-my-class-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.student-my-class-card,
.student-my-class-detail-grid > div {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.student-my-class-card.good {
  border-color: rgba(34, 197, 94, 0.22);
}

.student-my-class-card small,
.student-my-class-detail-grid small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
}

.student-my-class-card strong,
.student-my-class-detail-grid strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  word-break: break-word;
}

.student-my-class-card p {
  color: #64748b;
  font-size: 13px;
  margin: 8px 0 0;
  line-height: 1.45;
}

.student-my-class-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.student-my-class-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  margin-top: 14px;
}

.student-my-class-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.student-my-class-table th,
.student-my-class-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 14px;
}

.student-my-class-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.student-my-class-notice {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .student-my-class-summary,
  .student-my-class-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .student-my-class-summary,
  .student-my-class-detail-grid {
    grid-template-columns: 1fr;
  }
  .student-my-class-table th,
  .student-my-class-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* End Student Dashboard STD-3 */

/* Student Dashboard STD-4 — Student Attendance View Module */
.student-attendance-panel {
  border: 1px solid rgba(37, 99, 235, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-attendance-title {
  align-items: center;
}

.student-attendance-refresh,
.student-attendance-toolbar input,
.student-attendance-toolbar select {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  background: #ffffff;
}

.student-attendance-refresh {
  padding: 10px 14px;
  font-weight: 800;
  color: #1d4ed8;
  cursor: pointer;
}

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

.student-attendance-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.student-attendance-card.good {
  border-color: rgba(34, 197, 94, 0.22);
}

.student-attendance-card.warn {
  border-color: rgba(245, 158, 11, 0.24);
}

.student-attendance-card small,
.student-attendance-toolbar span {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 6px;
}

.student-attendance-card strong {
  display: block;
  color: #0f172a;
  font-size: 20px;
  word-break: break-word;
}

.student-attendance-card p {
  color: #64748b;
  font-size: 13px;
  margin: 8px 0 0;
  line-height: 1.45;
}

.student-attendance-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(240px, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.student-attendance-toolbar input,
.student-attendance-toolbar select {
  width: 100%;
  padding: 11px 12px;
  font-size: 14px;
  color: #0f172a;
}

.student-attendance-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  background: #ffffff;
  margin-top: 14px;
}

.student-attendance-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
}

.student-attendance-table th,
.student-attendance-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 14px;
  vertical-align: top;
}

.student-attendance-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.student-attendance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e0f2fe;
  color: #075985;
}

.student-attendance-badge.status-present {
  background: #dcfce7;
  color: #166534;
}

.student-attendance-badge.status-absent {
  background: #fee2e2;
  color: #991b1b;
}

.student-attendance-badge.status-late {
  background: #fef3c7;
  color: #92400e;
}

.student-attendance-badge.status-excused {
  background: #ede9fe;
  color: #5b21b6;
}

.student-attendance-notice {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .student-attendance-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .student-attendance-summary,
  .student-attendance-toolbar {
    grid-template-columns: 1fr;
  }
  .student-attendance-table th,
  .student-attendance-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* End Student Dashboard STD-4 */

/* Student Dashboard STD-5 — Student Homework View Module */
.student-homework-panel {
  border: 1px solid rgba(14, 165, 233, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-homework-title {
  align-items: center;
  gap: 14px;
}

.student-homework-refresh {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  color: #075985;
  background: #e0f2fe;
  cursor: pointer;
}

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

.student-homework-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.student-homework-card small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 8px;
}

.student-homework-card strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.15;
}

.student-homework-card p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.student-homework-card.good {
  border-color: rgba(34, 197, 94, 0.22);
  background: #f0fdf4;
}

.student-homework-card.warn {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.student-homework-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 12px;
  margin: 14px 0;
}

.student-homework-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.student-homework-toolbar select,
.student-homework-toolbar input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  background: #ffffff;
  color: #0f172a;
}

.student-homework-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: #ffffff;
}

.student-homework-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.student-homework-table th,
.student-homework-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 14px;
  vertical-align: top;
}

.student-homework-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.student-homework-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e0f2fe;
  color: #075985;
}

.student-homework-badge.status-assigned,
.student-homework-badge.status-published {
  background: #dcfce7;
  color: #166534;
}

.student-homework-badge.status-draft {
  background: #fef3c7;
  color: #92400e;
}

.student-homework-badge.status-completed {
  background: #ede9fe;
  color: #5b21b6;
}

.student-homework-notice {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .student-homework-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .student-homework-summary,
  .student-homework-toolbar {
    grid-template-columns: 1fr;
  }
  .student-homework-table th,
  .student-homework-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* End Student Dashboard STD-5 */



/* Student Dashboard STD-6 — Student Results / Reports View Module */
.student-results-panel {
  border: 1px solid rgba(99, 102, 241, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
}

.student-results-title {
  align-items: center;
  gap: 14px;
}

.student-results-refresh {
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  color: #3730a3;
  background: #e0e7ff;
  cursor: pointer;
}

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

.student-results-card {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.student-results-card small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 8px;
}

.student-results-card strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.15;
}

.student-results-card p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.45;
  margin: 8px 0 0;
}

.student-results-card.good {
  border-color: rgba(34, 197, 94, 0.22);
  background: #f0fdf4;
}

.student-results-card.warn {
  border-color: rgba(245, 158, 11, 0.24);
  background: #fffbeb;
}

.student-results-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(160px, 220px) 1fr;
  gap: 12px;
  margin: 14px 0;
}

.student-results-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #334155;
  font-weight: 800;
  font-size: 13px;
}

.student-results-toolbar select,
.student-results-toolbar input {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  background: #ffffff;
  color: #0f172a;
}

.student-results-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 18px;
  background: #ffffff;
}

.student-results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.student-results-table th,
.student-results-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  color: #334155;
  font-size: 14px;
  vertical-align: top;
}

.student-results-table th {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 800;
}

.student-results-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  background: #e0e7ff;
  color: #3730a3;
}

.student-results-badge.type-exam,
.student-results-badge.status-published {
  background: #dcfce7;
  color: #166534;
}

.student-results-badge.type-report {
  background: #e0f2fe;
  color: #075985;
}

.student-results-badge.status-draft {
  background: #fef3c7;
  color: #92400e;
}

.student-results-badge.status-archived {
  background: #f1f5f9;
  color: #475569;
}

.student-results-notice {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 16px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .student-results-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .student-results-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .student-results-toolbar label:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .student-results-summary,
  .student-results-toolbar {
    grid-template-columns: 1fr;
  }
  .student-results-toolbar label:last-child {
    grid-column: auto;
  }
  .student-results-table th,
  .student-results-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}
/* End Student Dashboard STD-6 */


/* Student Dashboard STD-7 — Messages / Online Class Link Integration */
.student-message-video-panel{border:1px solid #dbeafe;background:linear-gradient(135deg,#fff,#eff6ff)}
.student-message-video-title{align-items:flex-start}.student-message-video-title span{display:block;color:#2563eb;font-weight:800;margin-top:4px}
.student-message-video-refresh{border:0;border-radius:12px;background:#0f49ff;color:#fff;font-weight:900;padding:10px 14px}
.student-message-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.student-message-video-card{background:#fff;border:1px solid #dbeafe;border-radius:18px;padding:16px;display:grid;grid-template-columns:56px 1fr;gap:14px;box-shadow:0 8px 22px rgba(15,73,255,.07)}
.student-message-video-icon{width:54px;height:54px;border-radius:18px;background:#eaf1ff;display:grid;place-items:center;font-size:26px}
.student-message-video-card small{display:block;color:#64748b;font-weight:800}.student-message-video-card strong{display:block;font-size:24px;margin:4px 0;color:#111827}.student-message-video-card p{margin:4px 0 12px;color:#475569;line-height:1.45}.student-message-video-card button{border:0;border-radius:12px;background:#0f49ff;color:#fff;font-weight:900;padding:11px 14px}
.student-message-video-context{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.student-message-video-context div{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:13px}.student-message-video-context small{display:block;color:#64748b;font-weight:800}.student-message-video-context strong{display:block;margin-top:5px;overflow-wrap:anywhere;color:#0f172a}
.student-message-video-notice{margin-top:14px;border:1px dashed #93c5fd;background:#eff6ff;border-radius:14px;padding:13px;color:#1e3a8a;font-weight:800;line-height:1.45}
@media(max-width:800px){.student-message-video-grid,.student-message-video-context{grid-template-columns:1fr}.student-message-video-card{grid-template-columns:48px 1fr}.student-message-video-icon{width:46px;height:46px;border-radius:15px}.student-message-video-card strong{font-size:20px}.student-message-video-card button,.student-message-video-refresh{width:100%}}
/* End Student Dashboard STD-7 */


/* Student Dashboard STD-8 — Student Profile / School Info Polish */
.student-profile-polish-panel,
.student-school-info-panel,
.student-family-info-panel,
.student-service-info-panel {
  margin-top: 18px;
  border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.student-profile-polish-title,
.student-school-info-title,
.student-family-info-title,
.student-service-info-title {
  align-items: flex-start;
  gap: 12px;
}

.student-profile-polish-title p,
.student-school-info-title p,
.student-family-info-title p,
.student-service-info-title p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.student-profile-polish-title span,
.student-school-info-title span,
.student-family-info-title span,
.student-service-info-title span {
  background: #eef4ff;
  color: #0f49ff;
  border: 1px solid #dbe7ff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
}

.student-profile-polish-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(260px, .95fr);
  gap: 16px;
}

.student-profile-hero-card,
.student-profile-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(16, 24, 40, .05);
}

.student-profile-cover {
  height: 86px;
  background: linear-gradient(135deg, #0f49ff, #06b6d4, #22c55e);
}

.student-profile-main-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 18px 14px;
}

.student-profile-avatar-large {
  width: 76px;
  height: 76px;
  border-radius: 24px;
  background: #ffffff;
  color: #0f49ff;
  border: 4px solid #ffffff;
  box-shadow: 0 10px 22px rgba(15, 73, 255, .18);
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 1000;
  margin-top: -34px;
}

.student-profile-main-row h2 {
  margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.student-profile-main-row p {
  margin: 5px 0 0;
  color: #64748b;
  font-weight: 800;
}

.student-profile-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 18px 18px;
}

.student-profile-chip-row span {
  border: 1px solid #dbe7ff;
  background: #f8fbff;
  color: #0b2d75;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
}

.student-profile-detail-card {
  padding: 18px;
}

.student-profile-detail-card h4 {
  margin: 0 0 12px;
  color: #0f172a;
  font-size: 18px;
}

.student-profile-detail-list,
.student-school-info-grid,
.student-family-info-grid,
.student-service-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
}

.student-profile-detail-list div,
.student-school-info-grid div,
.student-family-info-grid div,
.student-service-info-grid div {
  border: 1px solid #e6ebf4;
  border-radius: 16px;
  background: #ffffff;
  padding: 13px;
}

.student-profile-detail-list small,
.student-school-info-grid small,
.student-family-info-grid small,
.student-service-info-grid small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.student-profile-detail-list strong,
.student-school-info-grid strong,
.student-family-info-grid strong,
.student-service-info-grid strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.student-info-wide {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .student-profile-polish-grid,
  .student-profile-detail-list,
  .student-school-info-grid,
  .student-family-info-grid,
  .student-service-info-grid {
    grid-template-columns: 1fr;
  }
  .student-profile-main-row {
    align-items: flex-start;
  }
  .student-profile-main-row h2 {
    font-size: 21px;
  }
}

@media (max-width: 560px) {
  .student-profile-polish-title,
  .student-school-info-title,
  .student-family-info-title,
  .student-service-info-title {
    flex-direction: column;
  }
  .student-profile-main-row {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 0;
  }
  .student-profile-avatar-large {
    width: 66px;
    height: 66px;
    border-radius: 20px;
    font-size: 28px;
  }
}
/* End Student Dashboard STD-8 */


/* Student Dashboard STD-9 — Final UI Clean + Mobile Responsive Check */
.student-dashboard-shell,
.student-dashboard-main,
.student-panel,
.student-feature-card,
.student-profile-hero-card,
.student-profile-detail-card,
.student-school-info-panel,
.student-family-info-panel,
.student-service-info-panel {
  min-width: 0;
}

.student-final-mobile-note {
  display: none;
  margin: 10px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.student-dashboard-grid,
.student-feature-grid,
.student-summary-grid,
.student-profile-polish-grid,
.student-message-video-grid {
  align-items: stretch;
}

.student-feature-card,
.student-summary-card,
.student-profile-detail-card,
.student-profile-hero-card,
.student-message-video-card,
.student-school-info-panel,
.student-family-info-panel,
.student-service-info-panel {
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.student-dashboard-main table,
.student-dashboard-main th,
.student-dashboard-main td {
  vertical-align: top;
}

.student-dashboard-main .table-wrap,
.student-table-wrap,
.student-attendance-table-wrap,
.student-homework-table-wrap,
.student-results-table-wrap,
.student-classmates-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.student-dashboard-main table {
  min-width: 760px;
}

.student-dashboard-main input,
.student-dashboard-main select,
.student-dashboard-main textarea,
.student-dashboard-main button {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .student-dashboard-shell {
    display: block;
  }
  .student-dashboard-sidebar {
    position: static;
    width: 100%;
    max-width: none;
    margin-bottom: 16px;
  }
  .student-sidebar-links,
  .student-dashboard-nav,
  .student-feature-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .student-dashboard-main {
    width: 100%;
    padding-inline: 16px;
  }
  .student-feature-grid,
  .student-summary-grid,
  .student-message-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .student-dashboard-main {
    padding-inline: 12px;
  }
  .student-dashboard-header,
  .student-panel-header,
  .student-profile-polish-title,
  .student-school-info-title,
  .student-family-info-title,
  .student-service-info-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .student-sidebar-links,
  .student-dashboard-nav,
  .student-feature-shortcuts,
  .student-feature-grid,
  .student-summary-grid,
  .student-message-video-grid,
  .student-profile-detail-list,
  .student-school-info-grid,
  .student-family-info-grid,
  .student-service-info-grid {
    grid-template-columns: 1fr;
  }
  .student-profile-main-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .student-profile-chip-row,
  .student-card-actions,
  .student-filter-row,
  .student-form-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .student-profile-chip-row span,
  .student-card-actions button,
  .student-filter-row input,
  .student-filter-row select,
  .student-form-actions button {
    width: 100%;
  }
  .student-final-mobile-note {
    display: block;
  }
}

@media (max-width: 420px) {
  .student-dashboard-main {
    padding-inline: 10px;
  }
  .student-feature-card,
  .student-summary-card,
  .student-profile-detail-card,
  .student-profile-hero-card,
  .student-school-info-panel,
  .student-family-info-panel,
  .student-service-info-panel {
    border-radius: 18px;
    padding: 14px;
  }
  .student-profile-cover {
    min-height: 86px;
  }
  .student-profile-avatar-large {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  .student-dashboard-main table {
    min-width: 680px;
    font-size: 12px;
  }
}
/* End Student Dashboard STD-9 */


/* STD-11 — Student Dashboard section isolation (student-dashboard only) */
.student-dashboard-body.student-section-isolated .student-dashboard-section {
  display: none !important;
}

.student-dashboard-body.student-section-isolated .student-dashboard-section.student-section-visible {
  display: block !important;
}

.student-dashboard-body.student-section-isolated .admin-info-grid.student-dashboard-section.student-section-visible {
  display: grid !important;
}

.student-dashboard-body.student-section-isolated #studentModulesWrapper[hidden] {
  display: none !important;
}

.student-dashboard-body.student-section-isolated #studentModulesWrapper:not([hidden]) {
  display: grid;
  gap: 22px;
}

.student-dashboard-body.student-section-isolated .student-dashboard-empty {
  display: none !important;
}

.student-dashboard-body.student-section-isolated #studentMessageVideoPanel[data-integration-focus="messages"] [data-student-integration-part]:not([data-student-integration-part="messages"]) {
  display: none !important;
}

.student-dashboard-body.student-section-isolated #studentMessageVideoPanel[data-integration-focus="online-class"] [data-student-integration-part]:not([data-student-integration-part="online-class"]) {
  display: none !important;
}
/* End STD-11 */


/* DTH-1 — Driver Teacher Dashboard SchoolID Isolation / Foundation Check */
.driver-foundation-panel {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(239,246,255,0.92));
}

.driver-foundation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.driver-foundation-grid article {
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  overflow-wrap: anywhere;
}

.driver-foundation-grid small {
  display: block;
  color: #64748b;
  font-weight: 700;
  margin-bottom: 6px;
}

.driver-foundation-grid strong {
  display: block;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.2;
}

.driver-foundation-grid p,
.driver-foundation-note {
  color: #64748b;
  line-height: 1.5;
}

.driver-foundation-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.08);
}

@media (max-width: 1024px) {
  .driver-foundation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .driver-foundation-grid {
    grid-template-columns: 1fr;
  }
  .driver-foundation-grid article {
    padding: 14px;
  }
}
/* End DTH-1 */


/* DTH-2 — Driver Teacher Dashboard Main UI / Feature Cards */
.driver-feature-panel {
  border: 1px solid rgba(37, 99, 235, 0.12);
}
.driver-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.driver-feature-card {
  border: 1px solid #e5e7eb;
  background: #ffffff;
  border-radius: 18px;
  padding: 16px;
  min-height: 132px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.driver-feature-card:hover,
.driver-feature-card:focus {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
  outline: none;
}
.driver-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: #eff6ff;
  margin-bottom: 12px;
  font-size: 24px;
}
.driver-feature-card strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
  margin-bottom: 6px;
}
.driver-feature-card small {
  display: block;
  color: #64748b;
  line-height: 1.4;
}
.driver-feature-notice {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  color: #475569;
  border: 1px dashed #cbd5e1;
}
.driver-sidebar .sidebar-nav a:not(.locked) {
  cursor: pointer;
}
@media (max-width: 1024px) {
  .driver-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .driver-feature-grid {
    grid-template-columns: 1fr;
  }
  .driver-feature-card {
    min-height: auto;
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 12px;
    align-items: center;
  }
  .driver-feature-icon {
    margin-bottom: 0;
  }
  .driver-feature-card strong,
  .driver-feature-card small {
    grid-column: 2;
  }
}

/* DTH-3 — Driver Teacher Assigned Students View Module */
.driver-assigned-students-panel {
  border: 1px solid rgba(14, 165, 233, 0.14);
}
.driver-assigned-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}
.driver-assigned-summary-grid article {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.driver-assigned-summary-grid small {
  display: block;
  color: #64748b;
  margin-bottom: 6px;
}
.driver-assigned-summary-grid strong {
  display: block;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.1;
}
.driver-assigned-summary-grid p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
}
.driver-assigned-toolbar {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 14px 0;
}
.driver-assigned-toolbar label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-weight: 700;
  font-size: 13px;
}
.driver-assigned-toolbar input,
.driver-assigned-toolbar select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: #ffffff;
  color: #0f172a;
}
.driver-assigned-toolbar button {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  background: #2563eb;
  color: #ffffff;
  cursor: pointer;
}
.driver-assigned-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  border: 1px dashed #cbd5e1;
}
.driver-assigned-table-wrap table th,
.driver-assigned-table-wrap table td {
  white-space: normal;
  vertical-align: top;
}
@media (max-width: 900px) {
  .driver-assigned-summary-grid,
  .driver-assigned-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .driver-assigned-toolbar button {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .driver-assigned-summary-grid,
  .driver-assigned-toolbar {
    grid-template-columns: 1fr;
  }
  .driver-assigned-table-wrap {
    overflow-x: auto;
  }
  .driver-assigned-table-wrap table {
    min-width: 820px;
  }
}


/* DTH-4 — Driver Teacher Pickup / Drop-off View Module */
.driver-pickdrop-panel {
  border: 1px solid rgba(20, 184, 166, 0.18);
}

.driver-pickdrop-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.driver-pickdrop-summary-grid article {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.driver-pickdrop-summary-grid small {
  color: #64748b;
  font-weight: 700;
}

.driver-pickdrop-summary-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: #0f172a;
}

.driver-pickdrop-summary-grid p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.driver-pickdrop-toolbar {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0;
}

.driver-pickdrop-toolbar label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-weight: 800;
  font-size: 13px;
}

.driver-pickdrop-toolbar input,
.driver-pickdrop-toolbar select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  background: #ffffff;
}

.driver-pickdrop-toolbar button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.driver-pickdrop-note {
  margin: 8px 0 12px;
  color: #64748b;
  font-size: 13px;
}

.driver-pickdrop-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.driver-pickdrop-status-badge {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: #e2e8f0;
  color: #334155;
}

.driver-pickdrop-status-badge.is-picked { background: #dcfce7; color: #166534; }
.driver-pickdrop-status-badge.is-school { background: #dbeafe; color: #1d4ed8; }
.driver-pickdrop-status-badge.is-dropped { background: #ccfbf1; color: #0f766e; }
.driver-pickdrop-status-badge.is-missed { background: #fee2e2; color: #b91c1c; }
.driver-pickdrop-status-badge.is-wait-drop { background: #ffedd5; color: #c2410c; }
.driver-pickdrop-status-badge.is-waiting { background: #f1f5f9; color: #475569; }

.driver-pickdrop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 220px;
}

.driver-pickdrop-actions button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
  background: #fff;
  cursor: pointer;
}

.driver-pickdrop-notif-note {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.transport-lt-student-status-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.transport-lt-student-status-summary article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
}

.transport-lt-student-status-summary small {
  color: #64748b;
  font-weight: 800;
}

.transport-lt-student-status-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  color: #0f172a;
}

.driver-pickdrop-table-wrap table th,
.driver-pickdrop-table-wrap table td {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .driver-pickdrop-summary-grid,
  .driver-pickdrop-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .driver-pickdrop-toolbar button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .driver-pickdrop-summary-grid,
  .driver-pickdrop-toolbar {
    grid-template-columns: 1fr;
  }
  .driver-pickdrop-table-wrap {
    overflow-x: auto;
  }
  .driver-pickdrop-table-wrap table {
    min-width: 980px;
  }
}


/* Step 2 — Admin / Founder Transport Live Tracking */
.transport-live-tracking-panel,
#founderTransportLiveTrackingPanel {
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.transport-lt-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.transport-lt-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.transport-lt-hero h2 {
  margin: 0;
  font-size: 24px;
  color: #08295c;
  font-weight: 900;
}

.transport-lt-hero p {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}

.transport-lt-scope-badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid #dbe7ff;
}

.transport-lt-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

.transport-lt-filter {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}

.transport-lt-filter input,
.transport-lt-filter select {
  padding: 10px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 10px;
  font-weight: 700;
}

.transport-lt-refresh-btn {
  border: 0;
  border-radius: 12px;
  padding: 11px 16px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.transport-lt-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.transport-lt-summary article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.transport-lt-summary small {
  color: #64748b;
  font-weight: 800;
}

.transport-lt-summary strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  color: #0f172a;
}

.transport-lt-map-panel {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #ffffff);
  border: 1px solid #dbe7ff;
}

.transport-lt-map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.transport-lt-map-placeholder {
  margin: 0 0 10px;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}

.transport-lt-map-coords {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.transport-lt-map-coords small {
  color: #94a3b8;
  font-weight: 800;
}

.transport-lt-map-coords strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
}

.transport-lt-maps-link {
  display: inline-flex;
  margin-top: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #0d9488;
  color: #fff !important;
  font-weight: 900;
  text-decoration: none;
}

.transport-lt-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}

.transport-lt-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1100px;
}

.transport-lt-table th,
.transport-lt-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.transport-lt-table th {
  background: #f8fafc;
  color: #08295c;
  font-weight: 900;
}

.transport-lt-status {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.transport-lt-status.is-on-route { background: #dcfce7; color: #166534; }
.transport-lt-status.is-picking { background: #dbeafe; color: #1d4ed8; }
.transport-lt-status.is-dropping { background: #ffedd5; color: #c2410c; }
.transport-lt-status.is-completed { background: #f1f5f9; color: #475569; }
.transport-lt-status.is-not-started { background: #e2e8f0; color: #334155; }
.transport-lt-status.is-unknown { background: #f8fafc; color: #64748b; }

.transport-lt-freshness {
  display: inline-flex;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.transport-lt-freshness.is-live { background: #16a34a; color: #fff; }
.transport-lt-freshness.is-stale { background: #fee2e2; color: #b91c1c; }
.transport-lt-freshness.is-updated { background: #e0f2fe; color: #0369a1; }

.transport-lt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.transport-lt-actions button {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}

.transport-lt-actions a {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}

.transport-lt-empty {
  text-align: center;
  padding: 20px;
  color: #64748b;
  font-weight: 800;
}

.transport-lt-detail-dialog {
  border: none;
  border-radius: 16px;
  padding: 0;
  max-width: 720px;
  width: min(720px, 96vw);
}

.transport-lt-detail-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}

.transport-lt-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
}

.transport-lt-detail-head h3 {
  margin: 0;
  color: #08295c;
}

.transport-lt-detail-body {
  padding: 16px 18px 20px;
}

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

.transport-lt-detail-grid article {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
}

.transport-lt-detail-grid small {
  color: #64748b;
  font-weight: 800;
}

.transport-lt-detail-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
}

.transport-lt-eta-card {
  grid-column: 1 / -1;
  background: linear-gradient(145deg, #eff6ff, #f8fafc) !important;
  border-color: #bfdbfe !important;
}

.transport-lt-eta-card p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.transport-rh-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.transport-rh-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.transport-rh-hero h2 {
  margin: 0;
  font-size: 24px;
  color: #08295c;
  font-weight: 900;
}

.transport-rh-hero p {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}

.transport-rh-print-btn,
.transport-rh-filters button {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.transport-rh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.transport-rh-filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}

.transport-rh-filters input {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  min-width: 140px;
}

.transport-rh-table-wrap {
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}

.transport-rh-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.transport-rh-table-wrap th,
.transport-rh-table-wrap td {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}

.transport-rh-view-btn {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  background: #2563eb;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  cursor: pointer;
}

.transport-rh-detail-dialog {
  border: 0;
  border-radius: 16px;
  padding: 16px;
  max-width: 520px;
  width: calc(100% - 24px);
}

.ps-tt-eta-card p {
  margin: 4px 0 0;
}

.transport-rh-table-wrap th {
  background: #f8fafc;
  color: #475569;
  font-weight: 900;
}

@media (max-width: 1100px) {
  .transport-lt-filters,
  .transport-lt-summary,
  .transport-lt-map-coords {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .transport-lt-filters,
  .transport-lt-summary,
  .transport-lt-map-coords,
  .transport-lt-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Step 3 — Parent / Student Transport Tracking */
.ps-transport-tracking-panel {
  border: 1px solid rgba(37, 99, 235, 0.16);
}

.ps-tt-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-tt-hero {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ps-tt-hero h2 {
  margin: 0;
  font-size: 24px;
  color: #08295c;
  font-weight: 900;
}

.ps-tt-hero p {
  margin: 6px 0 0;
  color: #64748b;
  font-weight: 700;
  font-size: 13px;
}

.ps-tt-refresh-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.ps-tt-alert {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: 800;
  font-size: 13px;
}

.ps-tt-alert.is-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ps-tt-alert.is-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

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

.ps-tt-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.ps-tt-card small {
  display: block;
  color: #64748b;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ps-tt-card strong {
  display: block;
  margin-top: 6px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.ps-tt-card p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.ps-tt-card-wide {
  grid-column: 1 / -1;
}

.ps-tt-progress {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.ps-tt-progress span {
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  padding: 8px 4px;
  border-radius: 10px;
  background: #f1f5f9;
}

.ps-tt-progress span.is-active {
  background: #2563eb;
  color: #fff;
}

.ps-tt-progress span.is-done {
  background: #dbeafe;
  color: #1d4ed8;
}

.ps-tt-progress-route {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.ps-tt-progress-route span {
  font-size: 9px;
}

.ps-tt-status-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #e2e8f0;
  color: #334155;
}

.ps-tt-status-badge.is-live {
  background: #dcfce7;
  color: #166534;
}

.ps-tt-status-badge.is-stale {
  background: #ffedd5;
  color: #c2410c;
}

.ps-tt-status-badge.is-route-on {
  background: #dbeafe;
  color: #1d4ed8;
}

.ps-tt-map-panel {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f8fbff, #ffffff);
  border: 1px solid #dbe7ff;
}

.ps-tt-map-placeholder {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.ps-tt-map-coords {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.ps-tt-map-coords div small {
  color: #64748b;
  font-weight: 800;
  font-size: 11px;
}

.ps-tt-map-coords div strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  word-break: break-all;
}

.ps-tt-maps-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: #0d9488;
  color: #fff !important;
  font-weight: 900;
  text-decoration: none;
}

.ps-tt-notif-list,
.ps-tt-history-list {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

.ps-tt-notif-list p,
.ps-tt-history-list p {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.ps-tt-notif-list p small,
.ps-tt-history-list p small {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-weight: 700;
}

@media (max-width: 900px) {
  .ps-tt-grid,
  .ps-tt-map-coords,
  .ps-tt-progress {
    grid-template-columns: 1fr 1fr;
  }
  .ps-tt-progress {
    grid-template-columns: 1fr;
  }
  .ps-tt-progress-route {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ps-tt-grid,
  .ps-tt-map-coords {
    grid-template-columns: 1fr;
  }
  .ps-tt-refresh-btn {
    width: 100%;
  }
}

/* Step 1 — Driver Teacher Route Operations / GPS */
.driver-route-ops-panel {
  border: 1px solid rgba(13, 148, 136, 0.22);
}

.driver-route-ops-empty {
  padding: 24px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  text-align: center;
}

.driver-route-ops-empty strong {
  display: block;
  font-size: 16px;
  color: #0f172a;
}

.driver-route-ops-empty p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 13px;
}

.driver-route-ops-today-card {
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 100%);
  border: 1px solid #99f6e4;
  margin-bottom: 16px;
}

.driver-route-ops-today-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.driver-route-ops-today-head small {
  color: #0f766e;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

.driver-route-ops-today-head h4 {
  margin: 6px 0 8px;
  font-size: 22px;
  color: #0f172a;
}

.driver-route-ops-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  font-size: 13px;
  color: #475569;
}

.driver-route-ops-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
}

.driver-route-ops-status-badge.is-on-route {
  background: #dcfce7;
  color: #166534;
}

.driver-route-ops-status-badge.is-picking {
  background: #dbeafe;
  color: #1d4ed8;
}

.driver-route-ops-status-badge.is-dropping {
  background: #ffedd5;
  color: #c2410c;
}

.driver-route-ops-status-badge.is-completed {
  background: #f1f5f9;
  color: #475569;
}

.driver-route-ops-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.driver-route-ops-stats-grid article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px;
}

.driver-route-ops-stats-grid small {
  color: #64748b;
  font-weight: 700;
  font-size: 11px;
}

.driver-route-ops-stats-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  color: #0f172a;
}

.driver-route-ops-progress-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.driver-route-ops-progress-track span {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  padding: 8px 4px;
  border-radius: 10px;
  background: #f1f5f9;
}

.driver-route-ops-progress-track span.is-active {
  background: #0d9488;
  color: #fff;
}

.driver-route-ops-progress-track span.is-done {
  background: #ccfbf1;
  color: #0f766e;
}

.driver-route-ops-map-note {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.driver-route-ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.driver-route-ops-actions button {
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
}

.driver-route-ops-actions button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.driver-route-ops-btn-start {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}

.driver-route-ops-btn-end {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

.driver-route-ops-status-select-wrap {
  display: grid;
  gap: 6px;
  max-width: 280px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}

.driver-route-ops-status-select-wrap select {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d8e1ee;
  font-weight: 700;
}

.driver-route-ops-live-panel {
  padding: 16px;
  border-radius: 16px;
  background: #0f172a;
  color: #e2e8f0;
  margin-bottom: 12px;
}

.driver-route-ops-live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.driver-route-ops-live-pill {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: #334155;
  color: #cbd5e1;
}

.driver-route-ops-live-pill.is-live {
  background: #16a34a;
  color: #fff;
}

.driver-route-ops-live-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.driver-route-ops-live-grid small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}

.driver-route-ops-live-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #f8fafc;
  word-break: break-all;
}

.driver-route-ops-message {
  min-height: 20px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
}

.driver-tracking-stability-panel {
  margin: 0 0 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(145deg, #eff6ff, #f8fafc);
}

.driver-tracking-stability-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.driver-tracking-stability-head strong {
  font-size: 15px;
  color: #0f172a;
}

.driver-tracking-active-indicator {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
}

.driver-tracking-status-message {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #dbeafe;
  font-size: 13px;
  font-weight: 800;
  color: #1e40af;
}

.driver-tracking-background-note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  font-size: 12px;
  font-weight: 700;
  color: #92400e;
  line-height: 1.45;
}

.driver-tracking-stability-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.driver-tracking-stability-grid article {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
}

.driver-tracking-stability-grid small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.driver-tracking-stability-grid strong {
  display: block;
  margin-top: 4px;
  color: #0f172a;
  font-size: 13px;
}

.driver-tracking-privacy-note {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
  color: #0d9488;
}

.driver-tracking-notes {
  margin: 0 0 12px;
  padding-left: 18px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.driver-tracking-notes li {
  margin-bottom: 4px;
}

.driver-pwa-install-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.driver-pwa-install-btn {
  align-self: flex-start;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.driver-pwa-install-help {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

@media (max-width: 900px) {
  .driver-tracking-stability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .driver-tracking-stability-grid {
    grid-template-columns: 1fr;
  }
}

.driver-route-ops-message.is-error {
  color: #b91c1c;
}

.driver-route-ops-stops-title {
  margin-top: 8px;
}

.driver-route-ops-stops-title h4 {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 900px) {
  .driver-route-ops-stats-grid,
  .driver-route-ops-live-grid,
  .driver-route-ops-progress-track {
    grid-template-columns: 1fr 1fr;
  }
  .driver-route-ops-progress-track {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .driver-route-ops-stats-grid,
  .driver-route-ops-live-grid {
    grid-template-columns: 1fr;
  }
  .driver-route-ops-actions button {
    width: 100%;
  }
}

/* DTH-5 — Driver Teacher Routes View Module */
.driver-routes-panel {
  border: 1px solid rgba(37, 99, 235, 0.18);
}

.driver-routes-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.driver-routes-summary-grid article {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.driver-routes-summary-grid small {
  color: #64748b;
  font-weight: 700;
}

.driver-routes-summary-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: #0f172a;
}

.driver-routes-summary-grid p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
}

.driver-routes-toolbar {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 12px;
  align-items: end;
  margin: 16px 0;
}

.driver-routes-toolbar label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-weight: 800;
  font-size: 13px;
}

.driver-routes-toolbar input,
.driver-routes-toolbar select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  background: #ffffff;
}

.driver-routes-toolbar button {
  border: 0;
  border-radius: 14px;
  padding: 12px 16px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.driver-routes-note {
  margin: 8px 0 12px;
  color: #64748b;
  font-size: 13px;
}

.driver-routes-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.driver-routes-table-wrap table th,
.driver-routes-table-wrap table td {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .driver-routes-summary-grid,
  .driver-routes-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .driver-routes-toolbar button {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .driver-routes-summary-grid,
  .driver-routes-toolbar {
    grid-template-columns: 1fr;
  }
  .driver-routes-table-wrap {
    overflow-x: auto;
  }
  .driver-routes-table-wrap table {
    min-width: 920px;
  }
}


/* DTH-6 — Driver Teacher Messages / Reports / Emergency Link Integration */
.driver-integration-panel {
  border: 1px solid rgba(14, 165, 233, 0.22);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.driver-integration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

.driver-integration-grid article {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.driver-integration-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #eff6ff;
  margin-bottom: 10px;
}

.driver-integration-grid small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 4px;
}

.driver-integration-grid strong {
  display: block;
  color: #0f172a;
  font-size: 17px;
}

.driver-integration-grid p {
  color: #64748b;
  font-size: 13px;
  line-height: 1.5;
  min-height: 40px;
}

.driver-integration-grid button {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
}

.driver-integration-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.driver-integration-summary div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px;
}

.driver-integration-summary small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 4px;
}

.driver-integration-summary strong {
  color: #0f172a;
  word-break: break-word;
}

.driver-integration-notice {
  border-radius: 16px;
  background: #eff6ff;
  color: #1e3a8a;
  padding: 12px 14px;
  font-weight: 700;
  font-size: 13px;
}

@media (max-width: 900px) {
  .driver-integration-grid,
  .driver-integration-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .driver-integration-grid,
  .driver-integration-summary {
    grid-template-columns: 1fr;
  }
}
/* End DTH-6 */


/* DTH-7 — Driver Teacher Profile / School Info Polish */
.driver-profile-polish-panel,
.driver-school-info-polish-panel,
.driver-transport-polish-panel {
  border: 1px solid rgba(37, 99, 235, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.driver-profile-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 24px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  margin-bottom: 16px;
}

.driver-profile-avatar {
  width: 78px;
  height: 78px;
  border-radius: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.22);
}

.driver-profile-main small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 4px;
}

.driver-profile-main h2 {
  margin: 0;
  color: #0f172a;
  font-size: 26px;
}

.driver-profile-main p {
  margin: 6px 0 10px;
  color: #475569;
  font-weight: 700;
}

.driver-profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.driver-profile-badges span,
.driver-school-scope-note {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 11px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 12px;
  font-weight: 900;
}

.driver-profile-detail-grid,
.driver-school-info-grid,
.driver-transport-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.driver-profile-detail-grid article,
.driver-school-info-grid article,
.driver-transport-detail-grid article {
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
  min-width: 0;
}

.driver-profile-detail-grid small,
.driver-school-info-grid small,
.driver-transport-detail-grid small {
  display: block;
  color: #64748b;
  font-weight: 800;
  margin-bottom: 6px;
}

.driver-profile-detail-grid strong,
.driver-school-info-grid strong,
.driver-transport-detail-grid strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  word-break: break-word;
}

.driver-school-info-grid p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 13px;
  word-break: break-word;
}

.driver-profile-note,
.driver-school-scope-note {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .driver-profile-detail-grid,
  .driver-school-info-grid,
  .driver-transport-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .driver-profile-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .driver-profile-avatar {
    margin: 0 auto;
  }
  .driver-profile-badges {
    justify-content: center;
  }
  .driver-profile-detail-grid,
  .driver-school-info-grid,
  .driver-transport-detail-grid {
    grid-template-columns: 1fr;
  }
}
/* End DTH-7 */


/* DTH-8 — Driver Teacher Final UI Clean + Mobile Responsive Check */
.driver-dashboard-body,
.driver-dashboard-body * {
  box-sizing: border-box;
}

.driver-dashboard-body .admin-main,
.driver-dashboard-body .panel,
.driver-dashboard-body .status-banner,
.driver-dashboard-body .dash-header,
.driver-dashboard-body .admin-info-grid,
.driver-dashboard-body .driver-feature-grid,
.driver-dashboard-body .driver-foundation-grid,
.driver-dashboard-body .driver-assigned-summary-grid,
.driver-dashboard-body .driver-pickdrop-summary-grid,
.driver-dashboard-body .driver-routes-summary-grid,
.driver-dashboard-body .driver-integration-summary,
.driver-dashboard-body .driver-profile-detail-grid,
.driver-dashboard-body .driver-school-info-grid,
.driver-dashboard-body .driver-transport-detail-grid {
  min-width: 0;
}

.driver-dashboard-body .panel,
.driver-dashboard-body .status-banner,
.driver-dashboard-body .driver-feature-card,
.driver-dashboard-body .driver-foundation-grid article,
.driver-dashboard-body .driver-assigned-summary-grid article,
.driver-dashboard-body .driver-pickdrop-summary-grid article,
.driver-dashboard-body .driver-routes-summary-grid article,
.driver-dashboard-body .driver-integration-grid article,
.driver-dashboard-body .driver-profile-detail-grid article,
.driver-dashboard-body .driver-school-info-grid article,
.driver-dashboard-body .driver-transport-detail-grid article {
  overflow-wrap: anywhere;
  word-break: normal;
}

.driver-dashboard-body .driver-assigned-table-wrap,
.driver-dashboard-body .driver-pickdrop-table-wrap,
.driver-dashboard-body .driver-routes-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}

.driver-dashboard-body .driver-assigned-table-wrap::after,
.driver-dashboard-body .driver-pickdrop-table-wrap::after,
.driver-dashboard-body .driver-routes-table-wrap::after {
  content: "Swipe table left/right on mobile";
  display: none;
  margin-top: 8px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.driver-final-mobile-note {
  display: none;
  margin: 12px 0 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-weight: 800;
  line-height: 1.4;
}

.driver-dashboard-body .driver-assigned-toolbar button,
.driver-dashboard-body .driver-pickdrop-toolbar button,
.driver-dashboard-body .driver-routes-toolbar button,
.driver-dashboard-body .driver-integration-grid button,
.driver-dashboard-body .logout-btn {
  min-height: 42px;
}

@media (max-width: 1024px) {
  .driver-dashboard-body {
    overflow-x: hidden;
  }
  body:not(.bs-mobile-module-drawer-enabled).driver-dashboard-body .admin-sidebar,
  body:not(.bs-mobile-module-drawer-enabled).driver-dashboard-body .driver-sidebar {
    width: 100%;
    max-width: none;
  }
  body:not(.bs-mobile-module-drawer-enabled).driver-dashboard-body .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body:not(.bs-mobile-module-drawer-enabled).driver-dashboard-body .sidebar-nav a {
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
    line-height: 1.25;
  }
  .driver-dashboard-body .admin-main {
    width: 100%;
    padding-inline: 18px;
  }
  .driver-dashboard-body .dash-header,
  .driver-dashboard-body .status-banner {
    gap: 14px;
  }
}

@media (max-width: 760px) {
  .driver-dashboard-body .admin-main {
    padding: 14px;
  }
  .driver-dashboard-body .dash-header,
  .driver-dashboard-body .status-banner,
  .driver-dashboard-body .panel-title,
  .driver-dashboard-body .header-actions,
  .driver-dashboard-body .profile,
  .driver-dashboard-body .driver-profile-hero {
    align-items: flex-start;
  }
  .driver-dashboard-body .dash-header,
  .driver-dashboard-body .status-banner,
  .driver-dashboard-body .header-actions {
    flex-direction: column;
  }
  .driver-dashboard-body .header-actions,
  .driver-dashboard-body .logout-btn,
  .driver-dashboard-body .driver-assigned-toolbar button,
  .driver-dashboard-body .driver-pickdrop-toolbar button,
  .driver-dashboard-body .driver-routes-toolbar button,
  .driver-dashboard-body .driver-integration-grid button {
    width: 100%;
  }
  .driver-dashboard-body .welcome h1,
  .driver-dashboard-body .driver-profile-main h2 {
    font-size: 22px;
    line-height: 1.2;
  }
  .driver-dashboard-body .panel {
    padding: 16px;
    border-radius: 20px;
  }
  .driver-dashboard-body .driver-feature-card {
    grid-template-columns: 48px 1fr;
    padding: 14px;
  }
  .driver-dashboard-body .driver-feature-icon,
  .driver-dashboard-body .driver-integration-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    font-size: 22px;
  }
  .driver-dashboard-body .driver-profile-hero {
    padding: 14px;
    border-radius: 20px;
  }
  .driver-dashboard-body .driver-profile-avatar {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    font-size: 26px;
  }
  .driver-dashboard-body .driver-profile-badges,
  .driver-dashboard-body .driver-assigned-toolbar,
  .driver-dashboard-body .driver-pickdrop-toolbar,
  .driver-dashboard-body .driver-routes-toolbar {
    align-items: stretch;
  }
  .driver-dashboard-body .driver-profile-badges span,
  .driver-dashboard-body .driver-school-scope-note,
  .driver-dashboard-body input,
  .driver-dashboard-body select,
  .driver-dashboard-body button {
    max-width: 100%;
  }
  .driver-final-mobile-note,
  .driver-dashboard-body .driver-assigned-table-wrap::after,
  .driver-dashboard-body .driver-pickdrop-table-wrap::after,
  .driver-dashboard-body .driver-routes-table-wrap::after {
    display: block;
  }
}

@media (max-width: 460px) {
  .driver-dashboard-body .admin-main {
    padding-inline: 10px;
  }
  .driver-dashboard-body .sidebar-nav {
    grid-template-columns: 1fr;
  }
  .driver-dashboard-body .panel,
  .driver-dashboard-body .status-banner,
  .driver-dashboard-body .driver-feature-card,
  .driver-dashboard-body .driver-foundation-grid article,
  .driver-dashboard-body .driver-assigned-summary-grid article,
  .driver-dashboard-body .driver-pickdrop-summary-grid article,
  .driver-dashboard-body .driver-routes-summary-grid article,
  .driver-dashboard-body .driver-integration-grid article,
  .driver-dashboard-body .driver-profile-detail-grid article,
  .driver-dashboard-body .driver-school-info-grid article,
  .driver-dashboard-body .driver-transport-detail-grid article {
    border-radius: 16px;
    padding: 13px;
  }
  .driver-dashboard-body .driver-feature-card {
    grid-template-columns: 44px 1fr;
  }
  .driver-dashboard-body .driver-feature-icon {
    width: 40px;
    height: 40px;
  }
  .driver-dashboard-body table {
    font-size: 12px;
  }
  .driver-dashboard-body .driver-assigned-table-wrap table {
    min-width: 760px;
  }
  .driver-dashboard-body .driver-pickdrop-table-wrap table {
    min-width: 900px;
  }
  .driver-dashboard-body .driver-routes-table-wrap table {
    min-width: 840px;
  }
}

/* DTH-11 — Driver Teacher Dashboard section isolation (driver-dashboard only) */
.driver-dashboard-body.driver-section-isolated .driver-dashboard-section {
  display: none !important;
}

.driver-dashboard-body.driver-section-isolated .driver-dashboard-section.driver-section-visible {
  display: block !important;
}

.driver-dashboard-body.driver-section-isolated .admin-info-grid.driver-dashboard-section.driver-section-visible {
  display: grid !important;
}

.driver-dashboard-body.driver-section-isolated #driverModulesWrapper[hidden] {
  display: none !important;
}

.driver-dashboard-body.driver-section-isolated #driverModulesWrapper:not([hidden]) {
  display: grid;
  gap: 22px;
}

.driver-dashboard-body.driver-section-isolated .driver-dashboard-empty {
  display: none !important;
}

.driver-dashboard-body.driver-section-isolated #driverIntegrationSection[data-integration-focus="messages"] [data-driver-integration-part]:not([data-driver-integration-part="messages"]) {
  display: none !important;
}

.driver-dashboard-body.driver-section-isolated #driverIntegrationSection[data-integration-focus="reports"] [data-driver-integration-part]:not([data-driver-integration-part="reports"]) {
  display: none !important;
}

.driver-dashboard-body.driver-section-isolated #driverIntegrationSection[data-integration-focus="messages"] .driver-integration-summary,
.driver-dashboard-body.driver-section-isolated #driverIntegrationSection[data-integration-focus="reports"] .driver-integration-summary {
  display: grid;
}
/* End DTH-11 */

/* End DTH-8 */


/* TRP-1 — Transport SchoolID Isolation / Foundation Check */
.transport-dashboard-body{background:#f6f8fc}.transport-sidebar{background:linear-gradient(180deg,#0b2d75,#0f766e)}.transport-status-banner{border-left:5px solid #0f766e}.transport-foundation-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px}.transport-foundation-grid article,.transport-driver-card,.transport-empty-card{background:#fff;border:1px solid #e6ebf4;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(16,24,40,.05)}.transport-foundation-grid small,.transport-driver-card small{display:block;color:#64748b;font-weight:800;margin-bottom:6px}.transport-foundation-grid strong,.transport-driver-card strong{display:block;color:#0f172a;font-size:18px;word-break:break-word}.transport-foundation-grid p{margin:8px 0 0;color:#64748b}.transport-note{margin-top:14px;background:#ecfeff;border:1px solid #99e6e1;color:#0f766e;border-radius:14px;padding:12px 14px;font-weight:800}.transport-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) 220px auto;gap:10px;margin-bottom:14px}.transport-toolbar input,.transport-toolbar select{border:1px solid #d8e1ee;border-radius:12px;padding:12px;background:#fff;font-weight:700}.transport-toolbar button{border:0;border-radius:12px;padding:12px 16px;background:#0f49ff;color:#fff;font-weight:900}.transport-table-wrap{width:100%;overflow-x:auto;border:1px solid #e6ebf4;border-radius:16px;background:#fff}.transport-table{width:100%;min-width:880px;border-collapse:collapse}.transport-table th,.transport-table td{padding:13px 14px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top}.transport-table th{background:#f8fbff;color:#334155;font-size:13px;text-transform:uppercase;letter-spacing:.03em}.transport-empty-cell{text-align:center!important;color:#64748b;font-weight:800;padding:24px!important}.transport-status-pill{display:inline-block;border-radius:999px;background:#e9f8ef;color:#137a45;padding:5px 10px;font-weight:900;font-size:12px}.transport-driver-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:14px}.transport-driver-card{display:grid;gap:10px}.transport-driver-card>span{width:46px;height:46px;border-radius:14px;background:#e9f8ef;display:grid;place-items:center;font-size:24px}.transport-empty-card{color:#64748b;font-weight:800}.transport-main .panel{margin-top:18px}@media(max-width:1000px){.transport-foundation-grid,.transport-driver-grid{grid-template-columns:repeat(2,1fr)}.transport-toolbar{grid-template-columns:1fr}}@media(max-width:650px){.transport-foundation-grid,.transport-driver-grid{grid-template-columns:1fr}.transport-main{padding:14px}.transport-table-wrap:before{content:'Swipe table left/right on mobile';display:block;padding:10px 12px;color:#64748b;font-weight:800;background:#f8fbff;border-bottom:1px solid #e6ebf4}.transport-topbar{align-items:flex-start;flex-direction:column}}

/* TRP-2 — Transport Main UI / Route + Pickup-Dropoff Management */
.transport-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px}.transport-summary-grid article{background:#fff;border:1px solid #e6ebf4;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(16,24,40,.05)}.transport-summary-grid small{display:block;color:#64748b;font-weight:800;margin-bottom:6px}.transport-summary-grid strong{display:block;color:#0f172a;font-size:22px}.transport-summary-grid p{margin:8px 0 0;color:#64748b}.transport-form{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:12px;margin:0 0 16px;background:#f8fbff;border:1px solid #e6ebf4;border-radius:18px;padding:14px}.transport-form label{display:grid;gap:7px;color:#334155;font-weight:900;font-size:13px}.transport-form input,.transport-form select,.transport-form textarea{width:100%;border:1px solid #d8e1ee;border-radius:12px;padding:11px 12px;background:#fff;color:#0f172a;font-weight:700;outline:none}.transport-form textarea{resize:vertical}.transport-form-wide{grid-column:1/-1}.transport-form-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.transport-primary-btn,.transport-secondary-btn,.transport-mini-btn{border:0;border-radius:12px;font-weight:900;cursor:pointer}.transport-primary-btn{background:#0f49ff;color:#fff;padding:12px 18px}.transport-secondary-btn{background:#e8eef8;color:#334155;padding:12px 18px}.transport-mini-btn{background:#eef7ff;color:#0f49ff;padding:8px 12px}.transport-primary-btn:hover,.transport-mini-btn:hover{filter:brightness(.96)}.transport-secondary-btn:hover{background:#dde8f6}.transport-table td:last-child{white-space:nowrap}.transport-main .panel-title h3{line-height:1.2}.transport-dashboard-body .transport-nav a{scroll-margin-top:20px}@media(max-width:1000px){.transport-summary-grid{grid-template-columns:repeat(2,1fr)}.transport-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.transport-summary-grid,.transport-form{grid-template-columns:1fr}.transport-form-actions{flex-direction:column}.transport-primary-btn,.transport-secondary-btn{width:100%}.transport-table{min-width:980px}.transport-route-panel .transport-table{min-width:940px}.transport-pickdrop-panel .transport-table{min-width:1120px}.transport-main .panel-title{align-items:flex-start;gap:8px}.transport-summary-grid article,.transport-form{border-radius:15px;padding:13px}.transport-toolbar button{width:100%}}
/* End TRP-2 */


/* TRP-3 — Transport Driver Assignment / Student Assignment Link */
.transport-assignment-panel{border-top:4px solid #2563eb}.transport-assignment-summary{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:14px;margin:14px 0}.transport-assignment-summary article{background:#fff;border:1px solid #e6ebf4;border-radius:16px;padding:16px;box-shadow:0 5px 18px rgba(16,24,40,.05)}.transport-assignment-summary small{display:block;color:#64748b;font-weight:800;margin-bottom:6px}.transport-assignment-summary strong{display:block;color:#0f172a;font-size:22px}.transport-assignment-summary p{margin:8px 0 0;color:#64748b}.transport-assignment-table{min-width:1120px}.transport-assignment-form{background:#f7fbff}@media(max-width:1000px){.transport-assignment-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.transport-assignment-summary{grid-template-columns:1fr}.transport-assignment-table{min-width:1180px}.transport-assignment-summary article{border-radius:15px;padding:13px}}
/* End TRP-3 */


/* TRP-4 — Transport Student / Driver View Sync Check */
.transport-sync-panel {
  border: 1px solid rgba(37, 99, 235, 0.14);
  background: #ffffff;
}
.transport-sync-panel .transport-assignment-summary article {
  min-height: 120px;
}
#driverTransportSyncNote,
.student-transport-sync-note {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #475569;
}


/* TRP-5 — Transport Final UI Clean + Mobile Responsive */
.transport-final-ui-clean-trp5 .transport-main {
  max-width: 100%;
  overflow-x: hidden;
}
.transport-final-ui-clean-trp5 .transport-topbar,
.transport-final-ui-clean-trp5 .transport-status-banner,
.transport-final-ui-clean-trp5 .panel {
  box-sizing: border-box;
}
.transport-final-ui-clean-trp5 .transport-nav a {
  align-items: center;
  min-height: 44px;
  line-height: 1.25;
  white-space: normal;
}
.transport-final-ui-clean-trp5 .transport-topbar {
  gap: 14px;
}
.transport-final-ui-clean-trp5 .header-actions {
  flex-wrap: wrap;
  gap: 10px;
}
.transport-final-ui-clean-trp5 .transport-status-banner,
.transport-final-ui-clean-trp5 .transport-note,
.transport-final-ui-clean-trp5 .panel {
  overflow-wrap: anywhere;
}
.transport-final-ui-clean-trp5 .transport-foundation-grid,
.transport-final-ui-clean-trp5 .transport-summary-grid,
.transport-final-ui-clean-trp5 .transport-assignment-summary,
.transport-final-ui-clean-trp5 .transport-driver-grid {
  align-items: stretch;
}
.transport-final-ui-clean-trp5 .transport-foundation-grid article,
.transport-final-ui-clean-trp5 .transport-summary-grid article,
.transport-final-ui-clean-trp5 .transport-assignment-summary article,
.transport-final-ui-clean-trp5 .transport-driver-card,
.transport-final-ui-clean-trp5 .transport-empty-card {
  min-width: 0;
}
.transport-final-ui-clean-trp5 .transport-form input,
.transport-final-ui-clean-trp5 .transport-form select,
.transport-final-ui-clean-trp5 .transport-form textarea,
.transport-final-ui-clean-trp5 .transport-toolbar input,
.transport-final-ui-clean-trp5 .transport-toolbar select {
  min-width: 0;
  box-sizing: border-box;
}
.transport-final-ui-clean-trp5 .transport-table-wrap {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.transport-mobile-scroll-guide {
  display: none;
  padding: 10px 12px;
  color: #64748b;
  font-weight: 900;
  background: #f8fbff;
  border-bottom: 1px solid #e6ebf4;
}
.transport-final-ui-clean-trp5 .transport-table th,
.transport-final-ui-clean-trp5 .transport-table td {
  overflow-wrap: anywhere;
}
@media (max-width: 1100px) {
  .transport-final-ui-clean-trp5 .transport-foundation-grid,
  .transport-final-ui-clean-trp5 .transport-summary-grid,
  .transport-final-ui-clean-trp5 .transport-assignment-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transport-final-ui-clean-trp5 .transport-driver-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .transport-final-ui-clean-trp5 .transport-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .transport-final-ui-clean-trp5 .admin-sidebar.transport-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
    padding-bottom: 12px;
  }
  .transport-final-ui-clean-trp5 .transport-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .transport-final-ui-clean-trp5 .transport-nav a {
    margin: 0;
    border-radius: 14px;
    padding: 10px;
    font-size: 13px;
  }
  .transport-final-ui-clean-trp5 .admin-main.transport-main {
    margin-left: 0;
    padding: 14px;
  }
  .transport-final-ui-clean-trp5 .transport-topbar,
  .transport-final-ui-clean-trp5 .transport-status-banner,
  .transport-final-ui-clean-trp5 .panel-title,
  .transport-final-ui-clean-trp5 .header-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .transport-final-ui-clean-trp5 .transport-topbar .top-link-btn,
  .transport-final-ui-clean-trp5 .transport-toolbar button,
  .transport-final-ui-clean-trp5 .transport-primary-btn,
  .transport-final-ui-clean-trp5 .transport-secondary-btn {
    width: 100%;
  }
  .transport-final-ui-clean-trp5 .transport-toolbar,
  .transport-final-ui-clean-trp5 .transport-form,
  .transport-final-ui-clean-trp5 .transport-foundation-grid,
  .transport-final-ui-clean-trp5 .transport-summary-grid,
  .transport-final-ui-clean-trp5 .transport-assignment-summary,
  .transport-final-ui-clean-trp5 .transport-driver-grid {
    grid-template-columns: 1fr;
  }
  .transport-mobile-scroll-guide {
    display: block;
  }
  .transport-final-ui-clean-trp5 .transport-table {
    font-size: 12px;
  }
  .transport-final-ui-clean-trp5 .transport-table th,
  .transport-final-ui-clean-trp5 .transport-table td {
    padding: 10px 11px;
  }
  .transport-final-ui-clean-trp5 .transport-route-panel .transport-table {
    min-width: 960px;
  }
  .transport-final-ui-clean-trp5 .transport-pickdrop-panel .transport-table,
  .transport-final-ui-clean-trp5 .transport-assignment-table {
    min-width: 1160px;
  }
}
@media (max-width: 430px) {
  .transport-final-ui-clean-trp5 .transport-nav {
    grid-template-columns: 1fr;
  }
  .transport-final-ui-clean-trp5 .admin-main.transport-main {
    padding: 10px;
  }
  .transport-final-ui-clean-trp5 .panel,
  .transport-final-ui-clean-trp5 .transport-form,
  .transport-final-ui-clean-trp5 .transport-foundation-grid article,
  .transport-final-ui-clean-trp5 .transport-summary-grid article,
  .transport-final-ui-clean-trp5 .transport-assignment-summary article,
  .transport-final-ui-clean-trp5 .transport-driver-card {
    border-radius: 14px;
    padding: 12px;
  }
}
/* End TRP-5 */

/* MSG-1 — Message / Chat SchoolID Isolation + Current System Check */
.message-body.msg1-message-body{background:#f4f7fb;color:#102033;min-height:100vh}
.msg1-message-main{padding-bottom:34px}.msg1-message-sidebar button{width:100%;border:0;border-radius:14px;background:#0f49ff;color:#fff;font-weight:900;padding:12px;margin-top:14px;text-align:left;cursor:pointer}.msg1-message-topbar{align-items:center}.msg1-scope-panel{margin-bottom:16px}.msg1-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.msg1-summary-grid article{background:#f8fbff;border:1px solid #dce8ff;border-radius:16px;padding:14px;display:grid;gap:4px}.msg1-summary-grid small{color:#64748b;font-weight:800}.msg1-summary-grid strong{font-size:22px;color:#0f49ff}.msg1-notice{margin:14px 0 0;background:#eff6ff;border:1px solid #bfdbfe;border-radius:14px;padding:12px;color:#1d4ed8;font-weight:800}.msg1-message-layout{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.55fr);gap:16px}.msg1-filter-row{display:grid;grid-template-columns:1fr 150px;gap:10px;margin-bottom:12px}.msg1-filter-row input,.msg1-filter-row select,.msg1-send-form input{border:1px solid #d8e1ee;border-radius:13px;padding:12px 13px;font-size:14px;background:#fff}.msg1-contact-list{display:grid;gap:10px;max-height:560px;overflow:auto;padding-right:4px}.msg1-contact-card{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;width:100%;border:1px solid #e2e8f0;background:#fff;border-radius:16px;padding:12px;text-align:left;cursor:pointer}.msg1-contact-card.active{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.msg1-contact-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#0f49ff;color:#fff;font-weight:900}.msg1-contact-card strong{display:block}.msg1-contact-card small{display:block;color:#64748b;margin-top:3px;word-break:break-word}.msg1-unread-badge{min-width:24px;height:24px;border-radius:999px;background:#ef4444;color:#fff;display:grid;place-items:center;font-size:12px}.msg1-conversation-panel{display:flex;flex-direction:column;min-height:640px}.msg1-conversation-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid #edf2f7;padding-bottom:12px;margin-bottom:12px}.msg1-conversation-header small{color:#64748b;font-weight:800}.msg1-conversation-header h3{margin:3px 0}.msg1-conversation-header p{margin:0;color:#64748b}.msg1-conversation-header span{background:#ecfdf3;color:#047857;border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;white-space:nowrap}.msg1-message-list{flex:1;min-height:380px;max-height:520px;overflow:auto;background:#f8fbff;border:1px solid #e6edf7;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}.msg1-empty{text-align:center;color:#64748b;font-weight:800;padding:26px}.msg1-bubble-row{display:flex}.msg1-bubble-row.mine{justify-content:flex-end}.msg1-bubble-row.theirs{justify-content:flex-start}.msg1-bubble{max-width:min(520px,86%);border-radius:18px;padding:11px 13px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 3px 10px rgba(15,23,42,.04)}.msg1-bubble-row.mine .msg1-bubble{background:#0f49ff;color:#fff;border-color:#0f49ff}.msg1-bubble small{display:block;font-size:11px;opacity:.8;margin-bottom:4px}.msg1-bubble p{margin:0;white-space:pre-wrap;word-break:break-word}.msg1-send-form{display:grid;grid-template-columns:1fr 110px;gap:10px;margin-top:12px}.msg1-send-form button{border:0;border-radius:13px;background:#0f49ff;color:#fff;font-weight:900;padding:12px;cursor:pointer}
@media (max-width:900px){.msg1-message-layout{grid-template-columns:1fr}.msg1-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.msg1-conversation-panel{min-height:auto}.msg1-message-list{max-height:420px}}
@media (max-width:640px){.msg1-message-main{padding:14px}.msg1-filter-row,.msg1-send-form{grid-template-columns:1fr}.msg1-summary-grid{grid-template-columns:1fr}.msg1-conversation-header{display:grid}.msg1-contact-card{grid-template-columns:40px 1fr auto}.msg1-contact-avatar{width:40px;height:40px}.msg1-bubble{max-width:94%}}


/* MSG-2 — Message Main UI / Chat List + Contact Cards */
.msg2-chat-list-body .msg1-message-topbar {
  border-bottom: 1px solid #e5edf8;
  padding-bottom: 14px;
}
.msg2-chat-filter-row {
  grid-template-columns: minmax(180px, 1fr) 150px 150px;
}
.msg2-chat-list {
  max-height: 660px;
  padding: 2px 6px 2px 0;
}
.msg2-contact-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  border-color: #dfe8f5;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.msg2-contact-card:hover {
  transform: translateY(-1px);
  border-color: #0f49ff;
  box-shadow: 0 10px 24px rgba(15, 73, 255, .10);
}
.msg2-contact-card.has-unread {
  border-color: rgba(239, 68, 68, .38);
  background: linear-gradient(90deg, #fff7f7, #ffffff 42%);
}
.msg2-contact-avatar {
  width: 48px;
  height: 48px;
  box-shadow: 0 8px 18px rgba(15, 73, 255, .18);
}
.msg2-contact-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.msg2-contact-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.msg2-contact-title strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg2-contact-title em {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  color: #64748b;
  font-weight: 800;
}
.msg2-contact-meta b {
  color: #0f49ff;
}
.msg2-contact-preview {
  color: #475569;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg2-unread-badge {
  box-shadow: 0 6px 14px rgba(239, 68, 68, .22);
}
.msg2-read-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #cbd5e1;
}
@media (max-width: 900px) {
  .msg2-chat-filter-row {
    grid-template-columns: 1fr 1fr;
  }
  .msg2-chat-filter-row input {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .msg2-chat-filter-row {
    grid-template-columns: 1fr;
  }
  .msg2-contact-card {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    padding: 11px;
  }
  .msg2-contact-avatar {
    width: 42px;
    height: 42px;
  }
  .msg2-contact-title {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
  .msg2-contact-title strong,
  .msg2-contact-preview {
    white-space: normal;
  }
}
/* End MSG-2 */


/* MSG-3 — Direct Chat Room / Send-Receive UI */
.msg3-direct-chat-body .msg1-conversation-panel{position:relative;overflow:hidden}.msg3-chat-room-header{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;background:#fff;border:1px solid #e5edfb;border-radius:18px;padding:12px;margin-bottom:10px}.msg3-room-back{width:38px;height:38px;border:1px solid #dbe7fb;border-radius:999px;background:#fff;color:#0f49ff;font-size:20px;font-weight:900;cursor:pointer}.msg3-room-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#0f49ff;color:#fff;font-weight:900;overflow:hidden}.msg3-room-avatar-inner{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;background:#0f49ff;color:#fff;font-weight:900}.msg3-room-avatar-inner.has-image img,.msg2-contact-avatar.has-image img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.msg3-room-title-block{min-width:0}.msg3-room-title-block h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.msg3-room-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}.msg3-room-tools span{background:#f8fbff;border:1px solid #e2e8f0;border-radius:999px;padding:7px 10px;color:#475569;font-size:12px;font-weight:900}.msg3-message-thread{background:linear-gradient(180deg,#f8fbff 0%,#fff 100%)}.msg3-chat-bubble{position:relative}.msg3-send-form{grid-template-columns:1fr 104px;align-items:end}.msg3-send-form textarea{border:1px solid #d8e1ee;border-radius:13px;padding:12px 13px;font-size:14px;background:#fff;resize:vertical;min-height:46px;max-height:120px;font-family:inherit}.msg3-send-form textarea:disabled{background:#f1f5f9;color:#94a3b8}.msg3-send-hint{margin:6px 0 0;color:#64748b;font-size:12px;font-weight:800}.msg3-bubble-row.mine .msg3-chat-bubble{border-bottom-right-radius:6px}.msg3-bubble-row.theirs .msg3-chat-bubble{border-bottom-left-radius:6px}
@media (max-width:700px){.msg3-chat-room-header{grid-template-columns:auto auto 1fr}.msg3-chat-room-header #msg1ConversationStatus{grid-column:1/-1;width:max-content}.msg3-send-form{grid-template-columns:1fr}.msg3-send-form button{width:100%}.msg3-room-tools{display:grid;grid-template-columns:1fr}.msg3-room-title-block h3{white-space:normal}}

/* MSG-4 — Group / Class Chat Room UI */
.msg4-group-chat-body .msg1-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.msg4-group-chat-panel{margin-top:18px}.msg4-group-layout{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(0,1.55fr);gap:16px}.msg4-group-filter-row{grid-template-columns:1fr 150px}.msg4-group-list{display:grid;gap:10px;max-height:520px;overflow:auto;padding-right:4px}.msg4-group-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;border:1px solid #dfe8f5;background:#fff;border-radius:16px;padding:12px;text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}.msg4-group-card:hover{transform:translateY(-1px);border-color:#0f49ff;box-shadow:0 10px 24px rgba(15,73,255,.10)}.msg4-group-card.active{border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12)}.msg4-group-card.has-unread{border-color:rgba(239,68,68,.38);background:linear-gradient(90deg,#fff7f7,#fff 42%)}.msg4-group-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#eff6ff;border:1px solid #bfdbfe;color:#0f49ff;font-size:22px}.msg4-group-main{min-width:0;display:grid;gap:4px}.msg4-group-main span{display:flex;justify-content:space-between;gap:8px;align-items:center}.msg4-group-main strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg4-group-main em{font-style:normal;color:#64748b;font-size:11px;font-weight:800;white-space:nowrap}.msg4-group-main small{display:block;color:#64748b;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msg4-group-room{min-width:0}.msg4-group-room-header{grid-template-columns:auto auto 1fr auto}.msg4-group-avatar{font-size:21px}.msg4-room-tools{margin-bottom:10px}.msg4-group-thread{min-height:360px}.msg4-group-bubble{max-width:min(560px,88%)}.msg4-group-send-form textarea{border:1px solid #d8e1ee;border-radius:13px;padding:12px 13px;font-size:14px;background:#fff;resize:vertical;min-height:46px;max-height:120px;font-family:inherit}.msg4-group-send-form textarea:disabled{background:#f1f5f9;color:#94a3b8}.msg4-unread-badge{box-shadow:0 6px 14px rgba(239,68,68,.22)}
@media (max-width:980px){.msg4-group-chat-body .msg1-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.msg4-group-layout{grid-template-columns:1fr}.msg4-group-list{max-height:360px}.msg4-group-room-header{grid-template-columns:auto auto 1fr}.msg4-group-room-header #msg4GroupStatus{grid-column:1/-1;width:max-content}.msg4-room-tools{display:grid;grid-template-columns:1fr 1fr}}
@media (max-width:640px){.msg4-group-chat-body .msg1-summary-grid{grid-template-columns:1fr}.msg4-group-filter-row,.msg4-group-send-form{grid-template-columns:1fr}.msg4-group-card{grid-template-columns:42px minmax(0,1fr) auto;padding:11px}.msg4-group-icon{width:42px;height:42px;font-size:19px}.msg4-group-main span{align-items:flex-start;flex-direction:column;gap:2px}.msg4-group-main strong,.msg4-group-main small{white-space:normal}.msg4-room-tools{grid-template-columns:1fr}.msg4-group-bubble{max-width:94%}}
/* End MSG-4 */


/* MSG-5 — Message File / Image / Voice Input UI */
.msg5-attachment-input-body .msg1-send-form.msg5-send-form,
.msg5-attachment-input-body .msg4-group-send-form.msg5-send-form {
  grid-template-columns: 1fr 104px;
}
.msg5-attachment-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fbff;
}
.msg5-attachment-btn,
.msg5-clear-btn {
  border: 1px solid #dbe7fb;
  background: #fff;
  color: #0f49ff;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15,73,255,.06);
}
.msg5-clear-btn { color: #ef4444; }
.msg5-hidden-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.msg5-attachment-preview {
  min-width: 0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg5-attachment-chip {
  margin-top: 8px;
  display: inline-flex;
  max-width: 100%;
  border: 1px solid #dbe7fb;
  background: #fff;
  color: #0f49ff;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg5-attachment-guide-panel { margin-top: 18px; }
.msg5-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.msg5-guide-grid article {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 6px;
}
.msg5-guide-grid strong { color: #0f49ff; }
.msg5-guide-grid span { color: #64748b; font-size: 13px; font-weight: 700; }
@media (max-width: 700px) {
  .msg5-attachment-input-body .msg1-send-form.msg5-send-form,
  .msg5-attachment-input-body .msg4-group-send-form.msg5-send-form,
  .msg5-guide-grid { grid-template-columns: 1fr; }
  .msg5-attachment-toolbar { align-items: stretch; }
  .msg5-attachment-btn,
  .msg5-clear-btn { text-align: center; flex: 1 1 90px; }
  .msg5-attachment-preview { flex: 1 1 100%; white-space: normal; }
}
/* End MSG-5 */


/* MSG-6 — Message Mobile UI Clean + Responsive Check */
.msg6-mobile-clean-body,
.msg6-mobile-clean-body * {
  box-sizing: border-box;
}
.msg6-mobile-clean-body .msg1-message-main {
  min-width: 0;
}
.msg6-mobile-clean-body .panel,
.msg6-mobile-clean-body .msg1-conversation-panel,
.msg6-mobile-clean-body .msg4-group-chat-panel {
  overflow: hidden;
}
.msg6-mobile-clean-body .msg1-message-topbar,
.msg6-mobile-clean-body .panel-title,
.msg6-mobile-clean-body .teacher-profile-mini {
  min-width: 0;
}
.msg6-mobile-clean-body .msg1-message-topbar h1,
.msg6-mobile-clean-body .msg1-message-topbar p,
.msg6-mobile-clean-body .panel-title h3,
.msg6-mobile-clean-body .panel-title p,
.msg6-mobile-clean-body .teacher-profile-mini strong,
.msg6-mobile-clean-body .teacher-profile-mini span {
  overflow-wrap: anywhere;
}
.msg6-mobile-clean-body .msg1-contact-list,
.msg6-mobile-clean-body .msg4-group-list,
.msg6-mobile-clean-body .msg1-message-list,
.msg6-mobile-clean-body .msg4-group-thread {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.msg6-mobile-clean-body .msg1-contact-card,
.msg6-mobile-clean-body .msg4-group-card {
  min-width: 0;
}
.msg6-mobile-clean-body .msg1-bubble,
.msg6-mobile-clean-body .msg4-group-bubble,
.msg6-mobile-clean-body .msg3-chat-bubble {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.msg6-mobile-clean-body .msg1-bubble-row.mine,
.msg6-mobile-clean-body .msg3-bubble-row.mine {
  justify-content: flex-end;
}
.msg6-mobile-clean-body .msg1-bubble-row.theirs,
.msg6-mobile-clean-body .msg3-bubble-row.theirs {
  justify-content: flex-start;
}
.msg6-mobile-clean-body .msg5-attachment-toolbar {
  width: 100%;
}
.msg6-mobile-clean-body .msg5-attachment-btn,
.msg6-mobile-clean-body .msg5-clear-btn,
.msg6-mobile-clean-body .msg1-send-form button,
.msg6-mobile-clean-body .msg4-group-send-form button {
  min-height: 42px;
  touch-action: manipulation;
}
.msg6-mobile-clean-panel {
  margin-top: 18px;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.msg6-clean-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.msg6-clean-grid article {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 6px;
}
.msg6-clean-grid strong {
  color: #0f49ff;
}
.msg6-clean-grid span,
.msg6-mobile-note {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.msg6-mobile-note {
  margin: 14px 0 0;
  border: 1px dashed #93c5fd;
  background: #eff6ff;
  border-radius: 14px;
  padding: 12px;
  color: #1e3a8a;
  font-weight: 800;
}
@media (max-width: 980px) {
  .msg6-mobile-clean-body .msg1-message-main {
    padding: 16px;
  }
  .msg6-mobile-clean-body .msg1-message-layout,
  .msg6-mobile-clean-body .msg4-group-layout {
    grid-template-columns: 1fr;
  }
  .msg6-mobile-clean-body .msg1-contact-list,
  .msg6-mobile-clean-body .msg4-group-list {
    max-height: 430px;
  }
  .msg6-mobile-clean-body .msg1-conversation-panel,
  .msg6-mobile-clean-body .msg4-group-room {
    min-height: auto;
  }
  .msg6-clean-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .msg6-mobile-clean-body .msg1-message-sidebar {
    position: static;
    width: auto;
    min-height: auto;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .msg6-mobile-clean-body .msg1-message-sidebar .brand-chip,
  .msg6-mobile-clean-body .msg1-message-sidebar button {
    grid-column: 1 / -1;
  }
  .msg6-mobile-clean-body .msg1-message-sidebar a,
  .msg6-mobile-clean-body .msg1-message-sidebar button {
    margin: 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .msg6-mobile-clean-body .msg1-message-main {
    margin-left: 0;
    padding: 12px;
  }
  .msg6-mobile-clean-body .msg1-message-topbar,
  .msg6-mobile-clean-body .panel-title {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .msg6-mobile-clean-body .teacher-profile-mini {
    width: 100%;
  }
  .msg6-mobile-clean-body .msg1-summary-grid,
  .msg6-mobile-clean-body .msg4-group-chat-body .msg1-summary-grid {
    grid-template-columns: 1fr;
  }
  .msg6-mobile-clean-body .msg1-filter-row,
  .msg6-mobile-clean-body .msg2-chat-filter-row,
  .msg6-mobile-clean-body .msg4-group-filter-row,
  .msg6-mobile-clean-body .msg1-send-form,
  .msg6-mobile-clean-body .msg3-send-form,
  .msg6-mobile-clean-body .msg4-group-send-form,
  .msg6-mobile-clean-body .msg5-send-form {
    grid-template-columns: 1fr !important;
  }
  .msg6-mobile-clean-body .msg3-chat-room-header,
  .msg6-mobile-clean-body .msg4-group-room-header {
    grid-template-columns: auto 44px minmax(0, 1fr);
    gap: 8px;
  }
  .msg6-mobile-clean-body .msg3-chat-room-header > span,
  .msg6-mobile-clean-body .msg4-group-room-header > span {
    grid-column: 1 / -1;
    width: fit-content;
  }
  .msg6-mobile-clean-body .msg3-room-avatar,
  .msg6-mobile-clean-body .msg4-group-avatar {
    width: 44px;
    height: 44px;
  }
  .msg6-mobile-clean-body .msg3-room-tools,
  .msg6-mobile-clean-body .msg4-room-tools {
    display: grid;
    grid-template-columns: 1fr;
  }
  .msg6-mobile-clean-body .msg1-message-list,
  .msg6-mobile-clean-body .msg4-group-thread {
    max-height: 58vh;
    min-height: 300px;
    padding: 10px;
  }
  .msg6-mobile-clean-body .msg1-bubble,
  .msg6-mobile-clean-body .msg4-group-bubble,
  .msg6-mobile-clean-body .msg3-chat-bubble {
    max-width: 92%;
  }
  .msg6-mobile-clean-body .msg5-attachment-toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg6-mobile-clean-body .msg5-attachment-preview {
    grid-column: 1 / -1;
    white-space: normal;
  }
}
@media (max-width: 430px) {
  .msg6-mobile-clean-body .msg1-message-main {
    padding: 8px;
  }
  .msg6-mobile-clean-body .panel {
    padding: 12px;
    border-radius: 14px;
  }
  .msg6-mobile-clean-body .msg1-message-sidebar {
    grid-template-columns: 1fr;
  }
  .msg6-mobile-clean-body .msg1-contact-card,
  .msg6-mobile-clean-body .msg2-contact-card,
  .msg6-mobile-clean-body .msg4-group-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }
  .msg6-mobile-clean-body .msg1-unread-badge,
  .msg6-mobile-clean-body .msg2-read-dot,
  .msg6-mobile-clean-body .msg4-unread-badge {
    grid-column: 2;
    justify-self: start;
  }
  .msg6-mobile-clean-body .msg5-attachment-toolbar {
    grid-template-columns: 1fr;
  }
  .msg6-mobile-clean-body .msg1-bubble,
  .msg6-mobile-clean-body .msg4-group-bubble,
  .msg6-mobile-clean-body .msg3-chat-bubble {
    max-width: 96%;
  }
}
/* End MSG-6 */


/* MSG-7 — Message Video Class Integration */
.msg7-video-class-body .msg7-video-class-panel {
  border: 1px solid rgba(37, 99, 235, 0.14);
}
.msg7-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.msg7-video-grid article,
.msg7-video-launch-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.msg7-video-grid small {
  display: block;
  color: #64748b;
  font-size: 12px;
  margin-bottom: 4px;
}
.msg7-video-grid strong,
.msg7-room-box {
  color: #0f172a;
  overflow-wrap: anywhere;
}
.msg7-video-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 10px;
  margin: 12px 0 16px;
}
.msg7-video-controls input,
.msg7-video-controls select {
  width: 100%;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
}
.msg7-video-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
  gap: 14px;
  align-items: start;
}
.msg7-video-class-list {
  display: grid;
  gap: 10px;
  max-height: 420px;
  overflow: auto;
  padding-right: 4px;
}
.msg7-video-class-card {
  width: 100%;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  text-align: left;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 18px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
}
.msg7-video-class-card.active,
.msg7-video-class-card:hover {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.msg7-video-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #eff6ff;
}
.msg7-video-class-card strong,
.msg7-video-class-card small,
.msg7-video-class-card em {
  display: block;
  overflow-wrap: anywhere;
}
.msg7-video-class-card small {
  color: #64748b;
  margin-top: 3px;
}
.msg7-video-class-card em {
  color: #2563eb;
  font-size: 12px;
  margin-top: 5px;
  font-style: normal;
}
.msg7-video-launch-card h4 {
  margin: 0 0 6px;
  color: #0f172a;
}
.msg7-video-launch-card p {
  color: #64748b;
}
.msg7-room-box {
  background: #f8fafc;
  border: 1px dashed rgba(37, 99, 235, 0.35);
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
}
.msg7-video-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.msg7-video-actions button {
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
}
.msg7-video-actions button:first-child {
  background: #0f172a;
}
.msg7-video-note {
  font-size: 13px;
  margin-top: 10px;
}
@media (max-width: 820px) {
  .msg7-video-grid,
  .msg7-video-layout,
  .msg7-video-controls {
    grid-template-columns: 1fr;
  }
  .msg7-video-class-list {
    max-height: none;
  }
  .msg7-video-actions button {
    width: 100%;
  }
}

/* MSG STEP2 — Message Main UI Redesign / Professional Chat Layout */
.msg-ui-v2-body {
  margin: 0;
  min-height: 100vh;
  background: #f6f8fc;
  color: #102033;
  overflow-x: hidden;
}
.msg-ui-app {
  display: flex;
  min-height: 100vh;
}
.msg-ui-sidebar {
  width: 260px;
  min-width: 260px;
  background: linear-gradient(180deg, #0b2d75 0%, #123fac 100%);
  color: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  box-shadow: 4px 0 24px rgba(11, 45, 117, 0.12);
}
.msg-ui-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.msg-ui-brand-star {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 20px;
}
.msg-ui-brand strong {
  display: block;
  font-size: 18px;
  letter-spacing: 0.3px;
}
.msg-ui-brand small {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  opacity: 0.72;
  margin-top: 2px;
}
.msg-ui-nav {
  display: grid;
  gap: 8px;
  flex: 1;
}
.msg-ui-nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.msg-ui-nav-btn:hover,
.msg-ui-nav-btn.is-active {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.msg-ui-nav-btn.is-active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.msg-ui-nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.msg-ui-sidebar-foot {
  margin-top: auto;
}
.msg-ui-back-btn,
.msg-ui-btn {
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.msg-ui-back-btn {
  width: 100%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.msg-ui-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.msg-ui-shell {
  flex: 1;
  min-width: 0;
  padding: 20px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.msg-ui-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}
.msg-ui-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.msg-ui-menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid #dbe4f2;
  border-radius: 12px;
  background: #fff;
  color: #0b2d75;
  font-size: 18px;
  cursor: pointer;
}
.msg-ui-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.msg-ui-topbar h1 {
  margin: 0;
  font-size: 28px;
  color: #0b2d75;
}
.msg-ui-topbar p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-protected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf3;
  color: #047857;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.msg-ui-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.msg-ui-btn-secondary {
  background: #eef4ff;
  color: #0f49ff;
  padding: 10px 16px;
  border: 1px solid #dbe7ff;
}
.msg-ui-btn-primary {
  background: linear-gradient(135deg, #0f49ff, #6366f1);
  color: #fff;
  padding: 10px 16px;
}
.msg-ui-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f8fbff;
  border: 1px solid #e4edf9;
  border-radius: 14px;
}
.msg-ui-profile-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f49ff, #6366f1);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.msg-ui-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.msg-ui-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.msg-ui-stat-card small {
  display: block;
  color: #64748b;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.msg-ui-stat-card strong {
  display: block;
  font-size: 24px;
  color: #0f49ff;
  line-height: 1.1;
}
.msg-ui-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eef4ff;
  font-size: 18px;
  flex-shrink: 0;
}
.msg-ui-stat-meta {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.msg-ui-stat-meta strong {
  font-size: 16px;
}
.msg-ui-notice {
  margin: 0;
}
.msg-ui-view {
  display: none;
}
.msg-ui-view.is-active {
  display: block;
}
.msg-ui-panel {
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  padding: 18px;
}
.msg-ui-panel-head h3,
.msg-ui-panel .panel-title h3 {
  margin: 0 0 4px;
  color: #0b2d75;
  font-size: 20px;
}
.msg-ui-panel-head p,
.msg-ui-panel .panel-title p {
  margin: 0;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-chat-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.35fr) minmax(220px, 0.55fr);
  gap: 16px;
  align-items: stretch;
}
.msg-ui-chat-list-panel,
.msg-ui-chat-room-panel,
.msg-ui-info-panel {
  min-height: 680px;
  display: flex;
  flex-direction: column;
}
.msg-ui-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 120px;
  gap: 10px;
  margin-bottom: 14px;
}
.msg-ui-filters input,
.msg-ui-filters select,
.msg-ui-compose textarea {
  border: 1px solid #d8e1ee;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  background: #fff;
  font-family: inherit;
}
.msg-ui-contact-list,
.msg-ui-group-list {
  flex: 1;
  overflow: auto;
  display: grid;
  gap: 10px;
  align-content: start;
  max-height: none;
  padding-right: 4px;
}
.msg-ui-contact-card,
.msg-ui-group-card {
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.msg-ui-contact-card.active,
.msg-ui-group-card.active {
  border-color: #0f49ff !important;
  box-shadow: 0 0 0 3px rgba(15, 73, 255, 0.12) !important;
}
.msg-ui-contact-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
}
.msg-ui-role-badge,
.msg-ui-school-chip,
.msg-ui-protected-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.msg-ui-role-admin { background: #eef4ff; color: #1d4ed8; }
.msg-ui-role-teacher { background: #ecfdf3; color: #047857; }
.msg-ui-role-student { background: #fef3c7; color: #b45309; }
.msg-ui-role-parent { background: #fae8ff; color: #7e22ce; }
.msg-ui-role-driver { background: #e0f2fe; color: #0369a1; }
.msg-ui-role-founder { background: #fee2e2; color: #b91c1c; }
.msg-ui-role-default { background: #f1f5f9; color: #475569; }
.msg-ui-school-chip { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.msg-ui-protected-chip { background: #ecfdf3; color: #047857; border: 1px solid #bbf7d0; }
.msg-ui-contact-preview {
  color: #475569 !important;
  font-weight: 700 !important;
}
.msg-ui-unread-badge {
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(239, 68, 68, 0.22);
}
.msg-ui-read-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbd5e1;
}
.msg-ui-room-header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}
.msg-ui-room-back {
  width: 40px;
  height: 40px;
  border: 1px solid #dbe7fb;
  border-radius: 999px;
  background: #fff;
  color: #0f49ff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: none;
}
.msg-ui-room-badge {
  background: #ecfdf3;
  color: #047857;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.msg-ui-room-badge-class {
  background: #eef4ff;
  color: #1d4ed8;
}
.msg-ui-room-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.msg-ui-room-meta span {
  background: #f8fbff;
  border: 1px solid #e4edf9;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
}
.msg-ui-thread {
  flex: 1;
  min-height: 360px;
  max-height: none;
  overflow: auto;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
  border: 1px solid #e6edf7;
  border-radius: 18px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-ui-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 40px 20px !important;
  text-align: center;
}
.msg-ui-empty-icon {
  font-size: 34px;
  opacity: 0.85;
}
.msg-ui-empty strong {
  color: #0b2d75;
  font-size: 16px;
}
.msg-ui-empty p {
  margin: 0;
  color: #64748b;
  font-weight: 600;
  max-width: 280px;
}
.msg-ui-bubble-row.mine { justify-content: flex-end; }
.msg-ui-bubble-row.theirs { justify-content: flex-start; }
.msg-ui-bubble {
  max-width: min(520px, 86%);
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.msg-ui-bubble-row.mine .msg-ui-bubble {
  background: linear-gradient(135deg, #0f49ff, #6366f1);
  color: #fff;
  border-color: transparent;
}
.msg-ui-bubble-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 6px;
}
.msg-ui-bubble-head strong {
  font-size: 12px;
}
.msg-ui-bubble-time {
  font-size: 10px;
  opacity: 0.78;
  white-space: nowrap;
}
.msg-ui-bubble-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
}
.msg-ui-bubble-text a.msg-ui-bubble-link,
.bs-fcw-bubble a.msg-ui-bubble-link,
.bs-fcw-image-caption a.msg-ui-bubble-link {
  color: #0f49ff;
  text-decoration: underline;
  font-weight: 800;
  word-break: break-all;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(15, 73, 255, 0.25);
}
.msg1-bubble-row.mine .msg-ui-bubble-text a.msg-ui-bubble-link,
.msg-ui-bubble-row.mine .msg-ui-bubble-text a.msg-ui-bubble-link,
.bs-fcw-bubble-row.is-mine .msg-ui-bubble-link,
.bs-fcw-bubble-row.is-mine .bs-fcw-image-caption a.msg-ui-bubble-link {
  color: #dbeafe;
}
body.bs-msg-apk-mode a.msg-ui-bubble-link,
.bs-msg-apk-mode a.msg-ui-bubble-link {
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 2;
  padding: 2px 0;
  text-underline-offset: 2px;
}
body.bs-msg-apk-mode .bs-fcw-bubble a.msg-ui-bubble-link,
body.bs-msg-apk-mode .msg-ui-bubble-text a.msg-ui-bubble-link {
  display: inline;
  min-height: 22px;
}
.msg-ui-bubble-status {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  opacity: 0.72;
  font-weight: 700;
}
.msg-ui-compose {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}
.msg-ui-attach-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f8fbff;
  border: 1px solid #e4edf9;
  border-radius: 14px;
}
.msg-ui-attach-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid #dbe7fb;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 16px;
}
.msg-ui-attach-clear {
  border: 0;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}
.msg-ui-compose-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.msg-ui-send-btn {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f49ff, #6366f1);
  color: #fff;
  font-weight: 900;
  padding: 12px 22px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 73, 255, 0.24);
}
.msg-ui-compose-hint {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}
.msg-ui-info-panel h4 {
  margin: 0 0 14px;
  color: #0b2d75;
}
.msg-ui-info-list {
  margin: 0;
  display: grid;
  gap: 12px;
}
.msg-ui-info-list div {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf2f7;
}
.msg-ui-info-list dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #64748b;
  font-weight: 800;
}
.msg-ui-info-list dd {
  margin: 0;
  color: #0b2d75;
  font-weight: 800;
  word-break: break-word;
}
.msg-ui-info-tip {
  margin-top: 16px;
  padding: 14px;
  border-radius: 16px;
  background: #eef4ff;
  border: 1px solid #dbe7ff;
}
.msg-ui-info-tip strong {
  display: block;
  color: #0b2d75;
  margin-bottom: 6px;
}
.msg-ui-info-tip p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 600;
}
.msg-ui-group-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.4fr);
  gap: 16px;
}
.msg-ui-group-room {
  min-height: 620px;
  display: flex;
  flex-direction: column;
}
.msg-ui-video-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  gap: 16px;
}
.msg-ui-video-launch {
  border: 1px solid #e4eaf4;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}
.msg-ui-video-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.msg-ui-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 35;
}
.msg-ui-v2-body .teacher-main,
.msg-ui-v2-body .msg1-message-main {
  margin: 0;
  padding: 0;
  width: auto;
}
.msg-ui-v2-body .msg1-message-sidebar,
.msg-ui-v2-body .teacher-sidebar.msg1-message-sidebar {
  display: none;
}

@media (max-width: 1180px) {
  .msg-ui-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .msg-ui-chat-workspace {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.25fr);
  }
  .msg-ui-info-panel {
    display: none;
  }
}

@media (max-width: 900px) {
  .msg-ui-menu-btn {
    display: grid;
    place-items: center;
  }
  .msg-ui-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
  }
  .msg-ui-sidebar.is-open {
    transform: translateX(0);
  }
  .msg-ui-shell {
    padding: 14px;
  }
  .msg-ui-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-ui-chat-workspace,
  .msg-ui-group-workspace,
  .msg-ui-video-workspace {
    grid-template-columns: 1fr;
  }
  .msg-ui-chat-list-panel,
  .msg-ui-chat-room-panel,
  .msg-ui-group-room {
    min-height: auto;
  }
  .msg-ui-room-back {
    display: grid;
    place-items: center;
  }
  .msg-ui-chat-room-panel {
    display: none;
  }
  .msg-ui-group-room {
    display: none;
  }
  .msg-ui-mobile-chat-open .msg-ui-chat-list-panel {
    display: none;
  }
  .msg-ui-mobile-chat-open .msg-ui-chat-room-panel {
    display: flex;
  }
  .msg-ui-mobile-group-open .msg-ui-group-list-col {
    display: none;
  }
  .msg-ui-mobile-group-open .msg-ui-group-room {
    display: flex;
  }
  .msg-ui-topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .msg-ui-topbar-actions {
    justify-content: space-between;
  }
  .msg-ui-filters {
    grid-template-columns: 1fr;
  }
  .msg-ui-compose-row {
    grid-template-columns: 1fr;
  }
  .msg-ui-send-btn {
    width: 100%;
  }
  .msg-ui-bubble {
    max-width: 92%;
  }
}

@media (max-width: 520px) {
  .msg-ui-stats {
    grid-template-columns: 1fr;
  }
  .msg-ui-topbar h1 {
    font-size: 22px;
  }
  .msg-ui-profile span {
    display: none;
  }
}
/* End MSG STEP2 */

/* MSG STEP3 — UI Polish + Mobile Clean + Chat Room Final Layout */
.msg-ui-v3-body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.msg-ui-v3-body .msg-ui-sidebar {
  width: 248px;
  min-width: 248px;
  padding: 18px 14px;
  gap: 14px;
}
.msg-ui-v3-body .msg-ui-brand {
  padding: 6px 8px 14px;
  margin-bottom: 2px;
}
.msg-ui-v3-body .msg-ui-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  font-size: 18px;
  flex-shrink: 0;
}
.msg-ui-v3-body .msg-ui-brand-text strong {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}
.msg-ui-v3-body .msg-ui-brand-text small {
  font-size: 11px;
  letter-spacing: 0.6px;
  opacity: 0.78;
  text-transform: uppercase;
}
.msg-ui-v3-body .msg-ui-nav {
  gap: 6px;
  padding-top: 4px;
}
.msg-ui-v3-body .msg-ui-nav-btn {
  padding: 11px 12px;
  border-radius: 12px;
  position: relative;
}
.msg-ui-v3-body .msg-ui-nav-btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.22);
}
.msg-ui-v3-body .msg-ui-nav-btn.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: #93c5fd;
}
.msg-ui-v3-body .msg-ui-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}
.msg-ui-v3-body .msg-ui-sidebar-foot {
  padding-top: 8px;
}
.msg-ui-v3-body .msg-ui-shell {
  gap: 14px;
  padding: 16px 18px 24px;
}
.msg-ui-v3-body .msg-ui-topbar {
  padding: 14px 18px;
  border-radius: 18px;
}
.msg-ui-v3-body .msg-ui-topbar h1 {
  font-size: 24px;
}
.msg-ui-v3-body .msg-ui-protected-badge {
  font-size: 11px;
  padding: 5px 10px;
}
.msg-ui-v3-body .msg-ui-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.msg-ui-v3-body .msg-ui-stat-card {
  min-height: 76px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.msg-ui-v3-body .msg-ui-stat-card strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.msg-ui-v3-body .msg-ui-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  font-size: 17px;
}
.msg-ui-v3-body .msg-ui-stat-role strong,
.msg-ui-v3-body .msg-ui-stat-school strong {
  font-size: 15px;
}
.msg-ui-v3-body .msg-ui-notice {
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 13px;
}
.msg-ui-v3-body .msg-ui-chat-workspace {
  grid-template-columns: minmax(0, 30%) minmax(0, 50%) minmax(0, 20%);
  gap: 14px;
  align-items: stretch;
}
.msg-ui-v3-body .msg-ui-chat-list-panel,
.msg-ui-v3-body .msg-ui-chat-room-panel {
  min-height: 640px;
  max-height: calc(100vh - 280px);
}
.msg-ui-v3-body .msg-ui-info-panel {
  min-height: 640px;
  max-height: calc(100vh - 280px);
  padding: 16px;
  max-width: 100%;
}
.msg-ui-v3-body .msg-ui-info-panel h4 {
  font-size: 15px;
  margin-bottom: 12px;
}
.msg-ui-v3-body .msg-ui-info-protected {
  color: #047857;
  font-weight: 800;
}
.msg-ui-v3-body .msg-ui-info-tip {
  padding: 12px;
  border-radius: 14px;
}
.msg-ui-v3-body .msg-ui-info-tip strong {
  font-size: 13px;
}
.msg-ui-v3-body .msg-ui-panel {
  padding: 16px;
  border-radius: 18px;
}
.msg-ui-v3-body .msg-ui-panel-head {
  margin-bottom: 12px;
}
.msg-ui-v3-body .msg-ui-filters {
  grid-template-columns: minmax(0, 1fr) 128px 108px;
  gap: 8px;
}
.msg-ui-v3-body .msg-ui-contact-card,
.msg-ui-v3-body .msg-ui-group-card {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 11px 12px !important;
}
.msg-ui-v3-body .msg-ui-contact-card.active {
  border-color: #0f49ff !important;
  background: linear-gradient(90deg, #f0f6ff, #fff 55%) !important;
  box-shadow: 0 0 0 2px rgba(15, 73, 255, 0.14) !important;
}
.msg-ui-v3-body .msg-ui-contact-avatar,
.msg-ui-v3-body .msg2-contact-avatar {
  width: 48px;
  height: 48px;
  font-size: 16px;
}
.msg-ui-v3-body .msg-ui-contact-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.msg-ui-v3-body .msg-ui-contact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #0b2d75;
}
.msg-ui-v3-body .msg-ui-contact-time {
  flex-shrink: 0;
  font-style: normal;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
}
.msg-ui-v3-body .msg-ui-contact-badges {
  margin: 3px 0 4px;
  gap: 4px;
}
.msg-ui-v3-body .msg-ui-school-chip {
  font-size: 9px;
}
.msg-ui-v3-body .msg-ui-protected-chip {
  font-size: 9px;
}
.msg-ui-v3-body .msg-ui-contact-preview {
  display: block;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ui-v3-body .msg-ui-contact-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
}
.msg-ui-v3-body .msg-ui-room-header {
  gap: 10px;
  padding-bottom: 10px;
}
.msg-ui-v3-body .msg-ui-room-badge {
  font-size: 10px;
  padding: 6px 10px;
}
.msg-ui-v3-body .msg-ui-room-title h3 {
  font-size: 17px;
  margin: 2px 0;
}
.msg-ui-v3-body .msg-ui-room-title p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.msg-ui-v3-body .msg-ui-thread {
  background: #eef2f7;
  border-color: #e2e8f0;
  padding: 14px 12px;
  border-radius: 16px;
  min-height: 340px;
}
.msg-ui-v3-body .msg-ui-bubble-row {
  display: flex;
  margin-bottom: 4px;
}
.msg-ui-v3-body .msg-ui-bubble-wrap {
  max-width: min(78%, 420px);
  display: grid;
  gap: 4px;
}
.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble-wrap {
  margin-left: auto;
}
.msg-ui-v3-body .msg-ui-bubble {
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  border-radius: 18px 18px 18px 4px;
  background: linear-gradient(135deg, #0f49ff, #4f46e5);
  color: #fff;
}
.msg-ui-v3-body .msg-ui-bubble-row.theirs .msg-ui-bubble {
  background: #fff;
  color: #102033;
  border: 1px solid #e2e8f0;
}
.msg-ui-v3-body .msg-ui-bubble-text {
  font-size: 14px;
  line-height: 1.45;
}
.msg-ui-v3-body .msg-ui-bubble-sender {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #475569;
  margin-bottom: 4px;
}
.msg-ui-v3-body .msg-ui-bubble-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 700;
}
.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble-foot {
  justify-content: flex-end;
}
.msg-ui-v3-body .msg-ui-compose-box {
  border: 1px solid #e4eaf4;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.msg-ui-v3-body .msg-ui-attach-bar {
  border: 0;
  border-bottom: 1px solid #edf2f7;
  border-radius: 0;
  background: #f8fafc;
  padding: 8px 10px;
  gap: 8px;
}
.msg-ui-v3-body .msg-ui-attach-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.msg-ui-v3-body .msg-ui-attach-btn {
  width: auto;
  min-width: 52px;
  height: auto;
  padding: 6px 8px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}
.msg-ui-v3-body .msg-ui-attach-btn small {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  line-height: 1;
}
.msg-ui-v3-body .msg-ui-attach-clear {
  padding: 6px 10px;
  font-size: 11px;
  border-radius: 8px;
}
.msg-ui-v3-body .msg-ui-attach-clear.is-muted {
  opacity: 0.35;
  pointer-events: none;
}
.msg-ui-v3-body .msg-ui-attach-bar:not(.is-empty) .msg-ui-attach-clear.is-muted {
  opacity: 1;
  pointer-events: auto;
}
.msg-ui-v3-body .msg5-attachment-preview {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: #475569;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ui-v3-body .msg-ui-compose-row {
  padding: 10px;
  gap: 8px;
  align-items: flex-end;
}
.msg-ui-v3-body .msg-ui-compose-row textarea {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
}
.msg-ui-v3-body .msg-ui-send-btn {
  min-width: 88px;
  min-height: 44px;
  border-radius: 12px;
}
.msg-ui-v3-body .msg-ui-compose-hint {
  font-size: 11px;
  margin-top: 6px;
}
.msg-ui-v3-body .msg-ui-group-workspace {
  grid-template-columns: minmax(0, 32%) minmax(0, 68%);
  gap: 14px;
}
.msg-ui-v3-body .msg-ui-mobile-session {
  display: none;
  margin-top: 12px;
  padding: 14px;
  border-radius: 16px;
}
.msg-ui-v3-body .msg-ui-mobile-session-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.msg-ui-v3-body .msg-ui-mobile-session-grid small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.msg-ui-v3-body .msg-ui-mobile-session-grid strong {
  color: #0b2d75;
  font-size: 14px;
}
.msg-ui-v3-body .msg-ui-mobile-session-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v3-body .msg-ui-video-launch {
  border-radius: 16px;
}
.msg-ui-v3-body .msg7-video-class-card {
  border-radius: 14px;
}

@media (min-width: 1367px) {
  .msg-ui-v3-body .msg-ui-shell {
    max-width: 1600px;
    margin: 0 auto;
  }
}

@media (max-width: 1180px) {
  .msg-ui-v3-body .msg-ui-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .msg-ui-v3-body .msg-ui-chat-workspace {
    grid-template-columns: minmax(0, 36%) minmax(0, 64%);
  }
}

@media (max-width: 1024px) {
  .msg-ui-v3-body .msg-ui-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .msg-ui-v3-body .msg-ui-stat-role,
  .msg-ui-v3-body .msg-ui-stat-school {
    grid-column: span 1;
  }
  .msg-ui-v3-body .msg-ui-chat-workspace {
    grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  }
  .msg-ui-v3-body .msg-ui-filters {
    grid-template-columns: 1fr 1fr;
  }
  .msg-ui-v3-body .msg-ui-filters input {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .msg-ui-v3-body .msg-ui-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-ui-v3-body .msg-ui-info-panel {
    display: none !important;
  }
  .msg-ui-v3-body .msg-ui-mobile-session {
    display: block;
  }
  .msg-ui-v3-body .msg-ui-chat-workspace {
    grid-template-columns: 1fr;
  }
  .msg-ui-v3-body .msg-ui-bubble-wrap {
    max-width: 88%;
  }
  .msg-ui-v3-body .msg-ui-topbar-actions .msg-ui-profile span {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
}

@media (max-width: 430px) {
  .msg-ui-v3-body .msg-ui-stats {
    grid-template-columns: 1fr 1fr;
  }
  .msg-ui-v3-body .msg-ui-stat-role,
  .msg-ui-v3-body .msg-ui-stat-school {
    grid-column: span 1;
  }
  .msg-ui-v3-body .msg-ui-topbar h1 {
    font-size: 20px;
  }
  .msg-ui-v3-body .msg-ui-protected-badge {
    display: none;
  }
  .msg-ui-v3-body .msg-ui-contact-card,
  .msg-ui-v3-body .msg-ui-group-card {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
  }
  .msg-ui-v3-body .msg-ui-attach-btn small {
    display: none;
  }
  .msg-ui-v3-body .msg-ui-attach-btn {
    min-width: 40px;
    padding: 8px;
  }
  .msg-ui-v3-body .msg-ui-bubble-wrap {
    max-width: 92%;
  }
}
/* End MSG STEP3 */

/* MSG STEP4 — Sidebar Empty Space Fix + Final Desktop/Mobile Alignment */
.msg-ui-v4-body .msg-ui-app {
  width: 100%;
  max-width: none;
  align-items: stretch;
}
.msg-ui-v4-body .msg-ui-sidebar {
  width: 252px;
  min-width: 252px;
  max-width: 252px;
  height: 100vh;
  height: 100dvh;
  padding: 16px 14px;
  gap: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink: 0;
  overflow: hidden;
}
.msg-ui-v4-body .msg-ui-sidebar-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-ui-v4-body .msg-ui-nav {
  flex: 0 0 auto;
  display: grid;
  gap: 6px;
  align-content: start;
  padding-top: 0;
}
.msg-ui-v4-body .msg-ui-nav-btn {
  min-height: 44px;
}
.msg-ui-v4-body .msg-ui-nav-label {
  line-height: 1.25;
}
.msg-ui-v4-body .msg-ui-sidebar-scope {
  flex: 0 0 auto;
  margin-top: 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  gap: 4px;
}
.msg-ui-v4-body .msg-ui-sidebar-scope small {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.72;
  font-weight: 800;
}
.msg-ui-v4-body .msg-ui-sidebar-scope strong {
  font-size: 14px;
  font-weight: 800;
  word-break: break-word;
}
.msg-ui-v4-body .msg-ui-sidebar-guard {
  font-size: 10px;
  font-weight: 700;
  color: #bbf7d0;
  margin-top: 2px;
}
.msg-ui-v4-body .msg-ui-sidebar-foot {
  margin-top: auto;
  flex: 0 0 auto;
  padding-top: 14px;
  width: 100%;
}
.msg-ui-v4-body .msg-ui-shell {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 16px 20px 20px;
  box-sizing: border-box;
}
.msg-ui-v4-body .msg-ui-view.is-active {
  width: 100%;
  min-width: 0;
}
.msg-ui-v4-body .msg-ui-stats {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 10px;
}
.msg-ui-v4-body .msg-ui-stat-card {
  min-height: 72px;
  height: 100%;
}
.msg-ui-v4-body .msg-ui-chat-workspace {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(280px, 0.9fr) minmax(520px, 1.5fr) minmax(240px, 0.65fr);
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 250px);
  min-height: calc(100dvh - 250px);
}
.msg-ui-v4-body .msg-ui-chat-list-panel,
.msg-ui-v4-body .msg-ui-chat-room-panel {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 250px);
  min-height: calc(100dvh - 250px);
  max-height: calc(100vh - 220px);
  max-height: calc(100dvh - 220px);
  min-width: 0;
  overflow: hidden;
}
.msg-ui-v4-body .msg-ui-panel-head,
.msg-ui-v4-body .msg-ui-filters {
  flex: 0 0 auto;
}
.msg-ui-v4-body .msg-ui-contact-list,
.msg-ui-v4-body .msg-ui-group-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.msg-ui-v4-body .msg-ui-chat-room-panel .msg-ui-room-header,
.msg-ui-v4-body .msg-ui-chat-room-panel .msg-ui-room-meta {
  flex: 0 0 auto;
}
.msg-ui-v4-body .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 260px;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.msg-ui-v4-body .msg-ui-compose,
.msg-ui-v4-body .msg-ui-compose-hint {
  flex: 0 0 auto;
}
.msg-ui-v4-body .msg-ui-compose {
  margin-top: 12px;
}
.msg-ui-v4-body .msg-ui-info-panel {
  min-height: auto;
  height: auto;
  max-height: calc(100vh - 250px);
  max-height: calc(100dvh - 250px);
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.msg-ui-v4-body .msg-ui-info-list {
  flex: 0 0 auto;
}
.msg-ui-v4-body .msg-ui-info-tip {
  margin-top: auto;
}
.msg-ui-v4-body .msg-ui-group-workspace {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.35fr);
  gap: 16px;
  min-height: calc(100vh - 250px);
  min-height: calc(100dvh - 250px);
}
.msg-ui-v4-body .msg-ui-group-list-col,
.msg-ui-v4-body .msg-ui-group-room {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 320px);
  min-height: calc(100dvh - 320px);
  max-height: calc(100vh - 280px);
  max-height: calc(100dvh - 280px);
  min-width: 0;
  overflow: hidden;
}
.msg-ui-v4-body .msg-ui-group-room .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 240px;
}
.msg-ui-v4-body .msg-ui-video-workspace {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 16px;
}

@media (min-width: 1367px) {
  .msg-ui-v4-body .msg-ui-shell {
    max-width: none;
    margin: 0;
    padding: 18px 24px 24px;
  }
  .msg-ui-v4-body .msg-ui-chat-workspace {
    grid-template-columns: minmax(300px, 0.88fr) minmax(560px, 1.55fr) minmax(250px, 0.62fr);
  }
}

@media (min-width: 1920px) {
  .msg-ui-v4-body .msg-ui-shell {
    padding: 20px 28px 28px;
  }
  .msg-ui-v4-body .msg-ui-chat-workspace {
    grid-template-columns: minmax(320px, 0.85fr) minmax(640px, 1.6fr) minmax(260px, 0.6fr);
  }
}

@media (max-width: 1180px) {
  .msg-ui-v4-body .msg-ui-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .msg-ui-v4-body .msg-ui-stat-role,
  .msg-ui-v4-body .msg-ui-stat-school {
    grid-column: span 1;
  }
  .msg-ui-v4-body .msg-ui-chat-workspace {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.35fr);
  }
  .msg-ui-v4-body .msg-ui-info-panel {
    display: none;
  }
}

@media (max-width: 1024px) {
  .msg-ui-v4-body .msg-ui-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .msg-ui-v4-body .msg-ui-chat-workspace,
  .msg-ui-v4-body .msg-ui-group-workspace {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto;
  }
  .msg-ui-v4-body .msg-ui-chat-list-panel,
  .msg-ui-v4-body .msg-ui-chat-room-panel,
  .msg-ui-v4-body .msg-ui-group-list-col,
  .msg-ui-v4-body .msg-ui-group-room {
    min-height: auto;
    max-height: none;
  }
  .msg-ui-v4-body .msg-ui-contact-list,
  .msg-ui-v4-body .msg-ui-group-list {
    max-height: 360px;
  }
  .msg-ui-v4-body .msg-ui-thread {
    min-height: 300px;
    max-height: 52vh;
  }
  .msg-ui-v4-body .msg-ui-sidebar-scope {
    display: none;
  }
}

@media (max-width: 768px) {
  .msg-ui-v4-body .msg-ui-shell {
    padding: 12px 14px 16px;
  }
  .msg-ui-v4-body .msg-ui-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-ui-v4-body .msg-ui-contact-list,
  .msg-ui-v4-body .msg-ui-group-list {
    max-height: none;
  }
  .msg-ui-v4-body .msg-ui-thread {
    max-height: none;
    min-height: 280px;
  }
}

@media (max-width: 430px) {
  .msg-ui-v4-body .msg-ui-shell {
    padding: 10px 10px 14px;
  }
  .msg-ui-v4-body .msg-ui-stats {
    grid-template-columns: 1fr 1fr;
  }
  .msg-ui-v4-body .msg-ui-topbar,
  .msg-ui-v4-body .msg-ui-panel,
  .msg-ui-v4-body .msg-ui-compose-box {
    max-width: 100%;
  }
  .msg-ui-v4-body .msg-ui-attach-actions {
    flex-wrap: wrap;
  }
}
/* End MSG STEP4 */

/* MSG STEP5 — Group / Class Chat UI Final + Video Class Link Polish */
.msg-ui-v5-body .msg-ui-tab-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
}
.msg-ui-v5-body .msg-ui-tab-header h2 {
  margin: 0;
  font-size: 22px;
  color: #0b2d75;
}
.msg-ui-v5-body .msg-ui-tab-header p {
  margin: 4px 0 0;
  color: #64748b;
  font-weight: 600;
  font-size: 13px;
}
.msg-ui-v5-body .msg-ui-video-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.msg-ui-v5-body #msgUiViewGroups .msg4-group-layout,
.msg-ui-v5-body .msg-ui-group-workspace {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(480px, 1.45fr) minmax(220px, 0.62fr);
  gap: 14px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.msg-ui-v5-body .msg-ui-group-list-col,
.msg-ui-v5-body .msg-ui-group-room,
.msg-ui-v5-body .msg-ui-group-info {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 300px);
  min-height: calc(100dvh - 300px);
  max-height: calc(100vh - 260px);
  max-height: calc(100dvh - 260px);
  min-width: 0;
  overflow: hidden;
}
.msg-ui-v5-body .msg-ui-group-list-head h3,
.msg-ui-v5-body .msg-ui-video-list-head h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: #0b2d75;
}
.msg-ui-v5-body .msg-ui-group-list-head p,
.msg-ui-v5-body .msg-ui-video-list-head p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}
.msg-ui-v5-body .msg-ui-group-meta-line {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}
.msg-ui-v5-body .msg-ui-group-card.msg-ui-contact-card {
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
}
.msg-ui-v5-body .msg-ui-group-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #eef4ff;
  font-size: 20px;
}
.msg-ui-v5-body .msg-ui-group-info,
.msg-ui-v5-body .msg6-class-tools {
  padding: 16px;
  align-self: stretch;
}
.msg-ui-v5-body .msg-ui-group-info h4 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #0b2d75;
}
.msg-ui-v5-body .msg-ui-video-workspace {
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.msg-ui-v5-body .msg-ui-video-list-col {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  max-height: calc(100vh - 320px);
  max-height: calc(100dvh - 320px);
  min-width: 0;
  overflow: hidden;
}
.msg-ui-v5-body .msg-ui-video-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.msg-ui-v5-body .msg-ui-video-class-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.msg-ui-v5-body .msg-ui-video-class-card:hover,
.msg-ui-v5-body .msg-ui-video-class-card.active {
  border-color: #0f49ff;
  box-shadow: 0 0 0 2px rgba(15, 73, 255, 0.12);
}
.msg-ui-v5-body .msg-ui-video-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #eef4ff;
  font-size: 18px;
}
.msg-ui-v5-body .msg-ui-video-card-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.msg-ui-v5-body .msg-ui-video-card-main small,
.msg-ui-v5-body .msg-ui-video-card-main em {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-style: normal;
  font-weight: 600;
  word-break: break-word;
}
.msg-ui-v5-body .msg-ui-video-card-main em {
  color: #0f49ff;
  font-weight: 700;
}
.msg-ui-v5-body .msg-ui-video-launch {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 420px;
}
.msg-ui-v5-body .msg-ui-video-context {
  margin: 0;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid #e4edf9;
  border-radius: 14px;
}
.msg-ui-v5-body .msg-ui-video-session-cards {
  margin-bottom: 12px;
}
.msg-ui-v5-body .msg-ui-video-filters {
  margin-bottom: 12px;
}
.msg-ui-v5-body .msg-ui-video-actions .msg-ui-btn {
  min-height: 44px;
}

@media (max-width: 1180px) {
  .msg-ui-v5-body #msgUiViewGroups .msg4-group-layout,
  .msg-ui-v5-body .msg-ui-group-workspace {
    grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.35fr);
  }
  .msg-ui-v5-body .msg-ui-group-info,
  .msg-ui-v5-body .msg6-class-tools {
    display: none;
  }
  .msg-ui-v5-body .msg-ui-video-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .msg-ui-v5-body #msgUiViewGroups .msg4-group-layout,
  .msg-ui-v5-body .msg-ui-group-workspace {
    grid-template-columns: 1fr;
    min-height: auto;
    max-height: none;
  }
  .msg-ui-v5-body .msg-ui-group-list-col,
  .msg-ui-v5-body .msg-ui-group-room {
    min-height: auto;
    max-height: none;
  }
  .msg-ui-v5-body .msg-ui-group-list {
    max-height: 360px;
  }
  .msg-ui-v5-body .msg-ui-group-room .msg-ui-thread {
    min-height: 300px;
    max-height: 52vh;
  }
  .msg-ui-v5-body .msg-ui-video-list-col {
    max-height: 360px;
  }
}

@media (max-width: 768px) {
  .msg-ui-v5-body .msg-ui-tab-header {
    flex-direction: column;
    align-items: stretch;
  }
  .msg-ui-v5-body .msg-ui-video-tab-actions {
    width: 100%;
  }
  .msg-ui-v5-body .msg-ui-video-tab-actions .msg-ui-btn {
    flex: 1 1 auto;
    min-width: 0;
  }
  .msg-ui-v5-body .msg-ui-mobile-group-open .msg-ui-group-list-col {
    display: none;
  }
  .msg-ui-v5-body .msg-ui-mobile-group-open .msg-ui-group-room {
    display: flex;
  }
  .msg-ui-v5-body .msg-ui-group-room {
    display: none;
  }
}

@media (max-width: 430px) {
  .msg-ui-v5-body .msg-ui-video-actions {
    flex-direction: column;
  }
  .msg-ui-v5-body .msg-ui-video-actions .msg-ui-btn {
    width: 100%;
  }
  .msg-ui-v5-body .msg-ui-video-card-main .msg-ui-contact-top {
    flex-wrap: wrap;
  }
}
/* End MSG STEP5 */


/* MSG STEP5 Direct UI Fix — search width, contact scroll, compose alignment */
.msg-ui-v5-body #msgUiViewMessages .msg-ui-direct-filters,
.msg-ui-v5-body #msgUiViewMessages .msg-ui-filters.msg1-filter-row,
.msg-ui-v5-body #msgUiViewMessages .msg2-chat-filter-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(122px, 138px) minmax(112px, 128px) !important;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
  margin-bottom: 12px;
  align-items: center;
}
.msg-ui-v5-body #msgUiViewMessages #msg1ContactSearchInput {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
  grid-column: auto;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-direct-filters select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-chat-list-panel {
  min-width: min(100%, 300px);
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-list,
.msg-ui-v5-body #msgUiViewMessages .msg1-contact-list,
.msg-ui-v5-body #msgUiViewMessages .msg2-chat-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.55) transparent;
  padding: 4px 4px 4px 2px;
  gap: 10px;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-list::-webkit-scrollbar,
.msg-ui-v5-body #msgUiViewMessages .msg1-contact-list::-webkit-scrollbar {
  width: 6px;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-list::-webkit-scrollbar-thumb,
.msg-ui-v5-body #msgUiViewMessages .msg1-contact-list::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 999px;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-card {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: flex-start !important;
  padding: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  text-align: left;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-main {
  min-width: 0;
  overflow: hidden;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-badges {
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px 0 6px;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-preview {
  display: block;
  white-space: normal !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
  word-break: break-word;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-side {
  align-self: center;
  padding-top: 4px;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-card.active {
  border-color: #0f49ff !important;
  background: linear-gradient(90deg, #f0f6ff 0%, #fff 48%) !important;
}
.msg-ui-v5-body #msgUiViewMessages .msg1-send-form,
.msg-ui-v5-body #msgUiViewMessages .msg-ui-compose {
  display: block !important;
  grid-template-columns: none !important;
  margin-top: 12px;
  width: 100%;
  min-width: 0;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-compose-box {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-attach-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-attach-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.msg-ui-v5-body #msgUiViewMessages .msg5-attachment-preview {
  flex: 1 1 160px;
  min-width: 0;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-compose-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px;
  align-items: end;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-compose-row textarea,
.msg-ui-v5-body #msgUiViewMessages #msg1MessageInput {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  resize: vertical;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-send-btn {
  min-width: 88px;
  width: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
.msg-ui-v5-body #msgUiViewMessages .msg-ui-chat-room-panel.msg-ui-mobile-chat-open,
.msg-ui-v5-body.msg-ui-mobile-chat-open #msgUiViewMessages .msg-ui-chat-room-panel {
  display: flex !important;
}

@media (max-width: 1024px) {
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-direct-filters,
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-filters.msg1-filter-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .msg-ui-v5-body #msgUiViewMessages #msg1ContactSearchInput {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-direct-filters,
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-filters.msg1-filter-row {
    grid-template-columns: 1fr !important;
  }
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-compose-row {
    grid-template-columns: 1fr !important;
  }
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-send-btn {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-card {
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    padding: 10px !important;
  }
  .msg-ui-v5-body #msgUiViewMessages .msg-ui-attach-btn small {
    display: none;
  }
}
/* End MSG STEP5 Direct UI Fix */


/* VC-1 — Video Class Real Integration / Foundation Check */
.video-class-body {
  margin: 0;
  min-height: 100vh;
  background: #f6f7fb;
  color: #172033;
  font-family: Arial, sans-serif;
}
.video-class-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 24px 0 36px;
}
.video-class-topbar,
.video-class-status-card,
.video-class-panel,
.video-class-test-panel {
  background: #ffffff;
  border: 1px solid #e4e8f1;
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(20, 36, 68, 0.08);
}
.video-class-topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 22px;
  margin-bottom: 18px;
}
.video-class-topbar h1,
.video-class-panel h2,
.video-class-test-panel h2 {
  margin: 4px 0;
  color: #10223f;
}
.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  font-weight: 800;
  color: #5d6b84;
}
.video-class-actions,
.video-class-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.video-class-actions button,
.video-class-action-row button {
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  cursor: pointer;
  background: #eef3ff;
  color: #17386f;
  font-weight: 800;
}
.video-class-action-row button:first-child {
  background: #1f6fff;
  color: #fff;
}
.video-class-status-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  margin-bottom: 18px;
}
.video-class-status-card div {
  background: #f8faff;
  border-radius: 16px;
  padding: 14px;
  min-width: 0;
}
.video-class-status-card small,
.video-class-details dt {
  display: block;
  color: #68758f;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.video-class-status-card strong,
.video-class-details dd {
  display: block;
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}
.video-class-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  gap: 18px;
  align-items: start;
}
.video-class-panel {
  padding: 20px;
}
.panel-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.video-class-pill {
  border-radius: 999px;
  background: #eef8f1;
  color: #196c35;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.vc1-blocked .video-class-pill {
  background: #fff3f3;
  color: #b42318;
}
.video-room-box {
  min-height: 320px;
  border-radius: 24px;
  background: linear-gradient(135deg, #172033, #2b4f88);
  margin: 18px 0;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
}
.video-room-placeholder {
  text-align: center;
  padding: 28px;
  max-width: 540px;
}
.video-room-placeholder span {
  display: inline-grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 28px;
  background: rgba(255,255,255,0.16);
  font-size: 38px;
  margin-bottom: 14px;
}
.video-room-placeholder h3,
.video-room-placeholder p {
  overflow-wrap: anywhere;
}
.video-class-notice {
  margin: 14px 0 0;
  border-radius: 14px;
  padding: 12px;
  background: #fff9e8;
  color: #7a4a00;
  font-weight: 700;
}
.video-class-notice.ok {
  background: #eef8f1;
  color: #196c35;
}
.video-class-notice.blocked {
  background: #fff3f3;
  color: #b42318;
}
.video-class-details dl {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}
.video-class-details div {
  background: #f8faff;
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.video-class-test-panel {
  margin-top: 18px;
  padding: 18px;
}
.video-class-test-panel pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #101828;
  color: #e6edf8;
  border-radius: 16px;
  padding: 14px;
  max-height: 260px;
  overflow: auto;
}
@media (max-width: 820px) {
  .video-class-shell { width: min(100% - 18px, 1180px); padding-top: 10px; }
  .video-class-topbar { flex-direction: column; align-items: stretch; border-radius: 18px; padding: 16px; }
  .video-class-actions button, .video-class-action-row button { width: 100%; }
  .video-class-status-card { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 18px; }
  .video-class-grid { grid-template-columns: 1fr; }
  .panel-title-row { flex-direction: column; }
  .video-room-box { min-height: 240px; border-radius: 18px; }
}
@media (max-width: 520px) {
  .video-class-status-card { grid-template-columns: 1fr; }
  .video-class-panel, .video-class-test-panel { padding: 14px; border-radius: 18px; }
}


/* VC-2 — Jitsi / Own Server Room Join Integration */
.video-class-shell[data-vc2-jitsi-own-server-integration="true"] .vc2-server-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(46, 91, 255, 0.16);
  background: #f7faff;
  border-radius: 16px;
  margin: 14px 0;
  overflow-wrap: anywhere;
}
.video-class-shell[data-vc2-jitsi-own-server-integration="true"] .vc2-server-strip span {
  color: #667085;
  font-weight: 700;
}
.video-class-shell[data-vc2-jitsi-own-server-integration="true"] .vc2-server-strip strong {
  color: #173a8a;
}
.vc2-video-room-box {
  position: relative;
  min-height: 520px;
}
.vc2-jitsi-frame-wrap {
  position: absolute;
  inset: 0;
  background: #0b1220;
  border-radius: inherit;
  overflow: hidden;
}
.vc2-jitsi-frame {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  background: #0b1220;
}
.vc2-video-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.video-class-action-row .danger,
.vc2-video-action-row .danger {
  background: #fff1f3;
  color: #b42318;
  border-color: rgba(180, 35, 24, 0.28);
}
.video-class-details dd {
  word-break: break-word;
  overflow-wrap: anywhere;
}
body.vc2-ready #vcGuardPill {
  background: #eef8f1;
  color: #196c35;
}
body.vc2-blocked #vcGuardPill {
  background: #fff3f3;
  color: #b42318;
}
@media (max-width: 820px) {
  .video-class-shell[data-vc2-jitsi-own-server-integration="true"] .vc2-server-strip {
    align-items: flex-start;
    flex-direction: column;
  }
  .vc2-video-room-box,
  .vc2-jitsi-frame {
    min-height: 420px;
  }
  .vc2-video-action-row button {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .vc2-video-room-box,
  .vc2-jitsi-frame {
    min-height: 360px;
  }
}


/* VC-3 — Role-based Class Time Control */
.video-class-shell[data-vc3-role-time-control="true"] .vc3-time-pill {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
body.vc3-time-open .vc3-time-pill {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
body.vc3-time-closed .vc3-time-pill {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.vc3-time-control-card {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #dbeafe;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.vc3-time-control-card small {
  display: block;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vc3-time-control-card strong {
  display: block;
  margin-top: 5px;
  color: #0f172a;
  font-size: 18px;
  line-height: 1.35;
}
.vc3-time-control-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}
.vc3-time-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.vc3-time-grid span {
  display: block;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  min-width: 0;
}
.vc3-time-grid b {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 14px;
  word-break: break-word;
}
body.vc3-time-closed #vcJoinRoomBtn,
body.vc3-time-closed #vcOpenNewTabBtn,
#vcJoinRoomBtn:disabled,
#vcOpenNewTabBtn:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.2);
}
body.vc3-time-open #vcTimeStatusView {
  color: #166534;
}
body.vc3-time-closed #vcTimeStatusView {
  color: #991b1b;
}
@media (max-width: 760px) {
  .vc3-time-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vc3-time-control-card {
    border-radius: 18px;
    padding: 14px;
  }
}
@media (max-width: 480px) {
  .vc3-time-grid {
    grid-template-columns: 1fr;
  }
}


/* VC-4 — End / Back Behavior + Return to Message */
.video-class-shell[data-vc4-return-behavior="true"] .vc4-return-control-card {
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #fcd34d;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.vc4-return-control-card small {
  display: block;
  color: #854d0e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vc4-return-control-card strong {
  display: block;
  margin-top: 5px;
  color: #111827;
  font-size: 18px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vc4-return-control-card p {
  margin: 8px 0 0;
  color: #713f12;
  font-size: 13px;
  line-height: 1.45;
}
.vc4-return-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.vc4-return-grid span {
  display: block;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  min-width: 0;
}
.vc4-return-grid b {
  display: block;
  margin-top: 4px;
  color: #111827;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.video-class-action-row .strong-danger,
.vc2-video-action-row .strong-danger {
  background: #b42318;
  color: #ffffff;
}
body.vc4-video-class-body .video-class-action-row button {
  min-height: 42px;
}
@media (max-width: 760px) {
  .vc4-return-grid {
    grid-template-columns: 1fr;
  }
  .video-class-shell[data-vc4-return-behavior="true"] .vc4-return-control-card {
    border-radius: 18px;
    padding: 14px;
  }
}


/* VR-STEP1 — Video Room UI Layout Foundation */
.vr-step1-body {
  background: #eef2f8;
}
.vr-step1-shell {
  width: min(1320px, calc(100% - 24px));
  padding-bottom: 40px;
}
.vr-step1-header {
  align-items: flex-start;
  margin-bottom: 14px;
}
.vr-step1-header-subtitle {
  margin: 6px 0 0;
  color: #5d6b84;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  max-width: 640px;
}
.vr-step1-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.vr-step1-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.vr-step1-pill-shield {
  background: #e0f2fe;
  color: #075985;
  border: 1px solid #bae6fd;
}
.vr-step1-pill-live {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}
body.vc2-ready .vr-step1-pill-live,
body.vc3-time-open .vr-step1-pill-live,
.vr-step1-pill-live.is-live {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
.vr-step1-context-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e4e8f1;
  box-shadow: 0 10px 28px rgba(20, 36, 68, 0.06);
}
.vr-step1-context-item {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #edf2f7;
}
.vr-step1-context-item small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}
.vr-step1-context-item strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  color: #0f2744;
  overflow-wrap: anywhere;
}
.vr-step1-context-fallback {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
.vr-step1-context-item strong:not(:empty) + .vr-step1-context-fallback {
  display: none;
}
.vr-step1-status-legacy {
  margin-bottom: 14px;
}
.vr-step1-classroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 14px;
  align-items: stretch;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 22px 48px rgba(8, 18, 40, 0.35);
  margin-bottom: 14px;
}
.vr-step1-classroom-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vr-step1-teacher-panel,
.vr-step1-lesson-panel,
.vr-step1-side-panel {
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 27, 52, 0.72);
  color: #e8eef8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vr-step1-teacher-panel {
  padding: 14px 16px;
}
.vr-step1-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.vr-step1-panel-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
}
.vr-step1-badge-live,
.vr-step1-count-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(239, 68, 68, 0.2);
  color: #fecaca;
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.vr-step1-teacher-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 120px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.55);
  border: 1px dashed rgba(148, 163, 184, 0.35);
}
.vr-step1-placeholder-icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.18);
  font-size: 28px;
  margin-bottom: 8px;
}
.vr-step1-teacher-placeholder p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  max-width: 280px;
}
.vr-step1-lesson-panel {
  padding: 16px;
  flex: 1;
  min-height: 0;
}
.vr-step1-lesson-panel .eyebrow {
  color: #93c5fd;
}
.vr-step1-lesson-panel h2,
.vr-step1-lesson-panel h3 {
  color: #f8fafc;
}
.vr-step1-lesson-note {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.45;
}
.vr-step1-lesson-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.vc-step1-legacy-controls {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.vr-step1-shell .vc-step1-legacy-controls .vc2-server-strip,
.vr-step1-shell .vc-step1-legacy-controls .vc3-time-control-card,
.vr-step1-shell .vc-step1-legacy-controls .vc4-return-control-card {
  margin: 0;
  background: rgba(255, 255, 255, 0.96);
  color: #172033;
}
.vr-step1-shell .vc-step1-legacy-controls .vc4-return-control-card p,
.vr-step1-shell .vc-step1-legacy-controls .vc3-time-control-card strong {
  color: inherit;
}
.vr-step1-embed-zone,
.video-room-main-stage.vr-step3-jitsi-stage {
  margin: 0 0 12px;
  padding: 0;
  min-height: min(62vh, 520px);
  border: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}
.video-room-embed-shell {
  position: relative;
  width: 100%;
  min-height: min(56vh, 480px);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1220 0%, #152a4a 55%, #0f1f3d 100%);
  border: 1px solid rgba(96, 165, 250, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 20px 44px rgba(0, 0, 0, 0.32);
}
.video-room-main-stage.is-embed-live .video-room-embed-shell {
  border-color: rgba(74, 222, 128, 0.45);
}
.video-room-placeholder,
.video-room-embed-loading,
.video-room-embed-error,
.video-room-fallback-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  overflow-y: auto;
  pointer-events: none;
}
.video-room-placeholder,
.video-room-fallback-panel.video-room-placeholder {
  pointer-events: auto;
}
.video-room-fallback-panel[hidden] {
  display: none !important;
}
.video-room-placeholder-icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 34px;
  margin-bottom: 12px;
}
.video-room-main-stage .video-room-placeholder p,
.video-room-main-stage .video-room-placeholder h3 {
  color: #e2e8f0;
  margin: 6px 0;
  overflow-wrap: break-word;
}
.video-room-fallback-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: min(92%, 520px);
  line-height: 1.5;
}
.video-room-fallback-icon,
.video-room-fallback-alert-icon {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 34px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.video-room-fallback-alert-icon {
  background: rgba(127, 29, 29, 0.28);
  font-size: 30px;
}
.video-room-fallback-title {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #f8fafc;
  line-height: 1.35;
  max-width: 100%;
}
.video-room-fallback-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.55;
  max-width: 100%;
}
.video-room-fallback-subtitle strong {
  color: #dbeafe;
  font-weight: 900;
}
.video-room-fallback-room-block {
  width: 100%;
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.video-room-fallback-room-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}
.video-room-fallback-room-name {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #bfdbfe;
  line-height: 1.55;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
}
.video-room-fallback-instruction {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 100%;
}
.video-room-fallback-error .video-room-fallback-title {
  color: #fecaca;
}
.video-room-embed-loading .video-room-fallback-title,
.video-room-embed-loading p {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #dbeafe;
  max-width: 100%;
  line-height: 1.45;
}
.video-room-embed-shell[data-embed-state="error"] #vcRoomPlaceholder,
.video-room-embed-shell[data-embed-state="loading"] #vcRoomPlaceholder,
.video-room-embed-shell[data-embed-state="live"] #vcRoomPlaceholder,
.video-room-embed-shell[data-embed-state="idle"] #vcJitsiEmbedError,
.video-room-embed-shell[data-embed-state="loading"] #vcJitsiEmbedError,
.video-room-embed-shell[data-embed-state="live"] #vcJitsiEmbedError {
  display: none !important;
}
.video-room-embed-spinner {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid rgba(148, 163, 184, 0.35);
  border-top-color: #60a5fa;
  animation: vrJitsiEmbedSpin 0.9s linear infinite;
}
@keyframes vrJitsiEmbedSpin {
  to { transform: rotate(360deg); }
}
.video-room-jitsi-frame-wrap,
.vr-step3-jitsi-stage .vc2-jitsi-frame-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  background: #0b1220;
  min-height: 0;
}
.video-room-jitsi-frame-wrap .vc2-jitsi-frame,
.vr-step3-jitsi-stage .vc2-jitsi-frame {
  width: 100%;
  height: 100%;
  min-height: min(56vh, 480px);
  border: 0;
  display: block;
  border-radius: inherit;
  background: #0b1220;
}
body.vr-jitsi-embed-live .vr-step1-lesson-note#vrLessonEmbedNote {
  color: #86efac;
}
.vc-step3-legacy-controls-wrap {
  margin-bottom: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.vc-step3-legacy-controls-wrap .vc-legacy-controls-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  text-align: left;
  cursor: pointer;
}
.vc-step3-legacy-controls-wrap .vc-legacy-controls-toggle:hover,
.vc-step3-legacy-controls-wrap .vc-legacy-controls-toggle:focus-visible {
  color: #cbd5e1;
  background: rgba(148, 163, 184, 0.08);
  outline: none;
}
.vc-step3-legacy-controls-wrap .vc-step1-legacy-controls {
  padding: 0 12px 12px;
}
.vr-step1-primary-actions {
  margin-top: 12px;
}
.vr-step1-primary-actions button {
  background: #1f6fff;
  color: #fff;
}
.vr-step1-primary-actions button.danger {
  background: rgba(254, 226, 226, 0.95);
  color: #b42318;
}
.vr-step1-primary-actions button.strong-danger {
  background: #b42318;
  color: #fff;
}
.vr-step1-lesson-panel .video-class-notice {
  margin-top: 10px;
}
.vr-step1-toolbar,
.vr-step4-teaching-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(8, 16, 34, 0.82);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.vr-step4-toolbar-wrap {
  position: relative;
  margin-top: 12px;
  width: 100%;
  min-width: 0;
}
.vr-step4-toolbar-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  max-width: min(92vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.35);
  color: #dbeafe;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.vr-step4-toolbar-toast.is-ok {
  border-color: rgba(74, 222, 128, 0.35);
  color: #bbf7d0;
}
.vr-step4-toolbar-toast.is-info {
  border-color: rgba(96, 165, 250, 0.35);
}
.vr-step1-tool-btn,
.vr-step4-tool-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 64px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 14px;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  background: rgba(30, 41, 59, 0.72);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.vr-step4-tool-btn:hover,
.vr-step4-tool-btn:focus-visible {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(96, 165, 250, 0.45);
  outline: none;
}
.vr-step4-tool-btn.is-active,
.vr-step4-tool-btn.is-raised {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.55);
  color: #bfdbfe;
}
.vr-step4-tool-icon {
  font-size: 18px;
  line-height: 1;
}
.vr-step4-tool-label {
  font-size: 10px;
  letter-spacing: 0.02em;
}
.vr-step4-tool-more-wrap {
  position: relative;
}
.vr-step4-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 6;
  min-width: 180px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.vr-step4-more-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  color: #e2e8f0;
  background: transparent;
  cursor: pointer;
}
.vr-step4-more-item:hover,
.vr-step4-more-item:focus-visible {
  background: rgba(51, 65, 85, 0.75);
  outline: none;
}
.vr-step1-tool-leave,
.vr-step4-tool-leave {
  margin-left: auto;
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.35);
}
.vr-step4-tool-leave:hover,
.vr-step4-tool-leave:focus-visible {
  background: rgba(153, 27, 27, 0.55);
  border-color: rgba(248, 113, 113, 0.65);
}
.vr-step4-panel-highlight {
  outline: 2px solid rgba(96, 165, 250, 0.65);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}
.vr-step1-classroom-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vr-step1-side-panel {
  padding: 14px;
  flex: 1;
  min-height: 0;
}
.vr-step1-side-search input,
.vr-step1-chat-input-wrap input,
.vr-step5-participants-search input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(8, 16, 34, 0.45);
  color: #e2e8f0;
}
.vr-step5-participants-search input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.vr-step5-participants-search input::placeholder {
  color: #64748b;
}
.vr-step1-empty-state {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.45;
}
.vr-step1-participant-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.vr-step1-meeting-info {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.vr-step1-info-card {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e4e8f1;
  box-shadow: 0 8px 22px rgba(20, 36, 68, 0.06);
  min-width: 0;
}
.vr-step1-info-card small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}
.vr-step1-info-card strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: #0f2744;
  overflow-wrap: anywhere;
}
.vr-step1-legacy-grid {
  display: block;
  margin-bottom: 14px;
}
.vr-step1-launch-details {
  width: 100%;
}
.vr-step1-audit-panel {
  margin-top: 0;
}
.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;
}
@media (max-width: 1100px) {
  .vr-step1-classroom {
    grid-template-columns: 1fr;
  }
  .vr-step1-classroom-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .vr-step1-side-panel {
    flex: 1 1 240px;
  }
  .vr-step1-meeting-info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vr-step1-context-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .vr-step1-header {
    flex-direction: column;
  }
  .vr-step1-header-actions {
    width: 100%;
  }
  .vr-step1-header-actions button {
    width: 100%;
  }
  .vr-step1-context-strip,
  .vr-step1-meeting-info,
  .vr-step1-status-legacy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vr-step1-classroom-sidebar {
    flex-direction: column;
  }
  .video-room-embed-shell,
  .video-room-jitsi-frame-wrap .vc2-jitsi-frame,
  .vr-step3-jitsi-stage .vc2-jitsi-frame {
    min-height: 280px;
  }
  .video-room-main-stage.vr-step3-jitsi-stage {
    min-height: 300px;
  }
  .vr-step1-toolbar,
  .vr-step4-teaching-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    border-radius: 20px;
    padding-bottom: 8px;
  }
  .vr-step4-tool-btn {
    flex: 0 0 auto;
    min-width: 58px;
  }
  .vr-step1-tool-leave,
  .vr-step4-tool-leave {
    margin-left: 0;
    position: sticky;
    right: 0;
  }
  .vr-step4-toolbar-toast {
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .vr-step1-context-strip,
  .vr-step1-meeting-info,
  .vr-step1-status-legacy {
    grid-template-columns: 1fr;
  }
}


/* VR-STEP2 — Meeting Context Display */
.vr-step2-meeting-title {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 900;
  color: #17386f;
  line-height: 1.35;
  max-width: 720px;
}
.vr-step1-pill-status {
  background: #eef2ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}
.vr-step2-school-mismatch {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 14px;
  font-weight: 800;
}
.vr-step2-context-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.vr-step2-context-wide {
  grid-column: span 2;
}
.vr-step2-teacher-label {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: #dbeafe;
}
.vr-step2-lesson-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.vr-step2-lesson-meta span {
  display: block;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(8, 16, 34, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.22);
  min-width: 0;
}
.vr-step2-lesson-meta small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.vr-step2-lesson-meta strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #f8fafc;
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .vr-step2-context-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vr-step2-context-wide { grid-column: span 2; }
  .vr-step2-lesson-meta { grid-template-columns: 1fr; }
}


/* VR-STEP4 — Teaching Toolbar */
.vr-step4-teaching-toolbar {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}


/* VR-STEP5 — Participants Panel */
.vr-step5-participants-panel {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  max-height: min(52vh, 420px);
}
.vr-step5-participants-panel.is-blocked .vr-step5-participants-search,
.vr-step5-participants-panel.is-blocked .vr-step5-participant-list {
  display: none;
}
.vr-step5-participants-head {
  align-items: flex-start;
  gap: 10px;
}
.vr-step5-participants-title-wrap h2 {
  margin: 0;
}
.vr-participants-heading-btn {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.vr-participants-heading-btn.is-host-control:hover,
.vr-participants-heading-btn.is-host-control:focus-visible {
  color: #bfdbfe;
  outline: none;
}
.vr-participants-heading-btn.is-readonly {
  cursor: default;
}
.vr-waiting-room-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(120, 53, 15, 0.35);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}
.vr-waiting-room-notice.is-rejected {
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.vr-participants-section-heading {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #93c5fd;
}
.vr-participant-join-status {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.vr-participant-join-status.is-waiting {
  background: rgba(120, 53, 15, 0.35);
  color: #fde68a;
}
.vr-participant-join-status.is-accepted {
  background: rgba(20, 83, 45, 0.35);
  color: #bbf7d0;
}
.vr-join-requests-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: grid;
  place-items: center;
  padding: 16px;
}
.vr-join-requests-modal[hidden] {
  display: none !important;
}
.vr-join-requests-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.72);
  cursor: pointer;
}
.vr-join-requests-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  max-height: min(80vh, 560px);
  overflow: auto;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, #111b31 0%, #0a1220 100%);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
}
.vr-join-requests-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.35);
}
.vr-join-requests-modal-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}
.vr-join-requests-modal-close {
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.vr-join-requests-modal-empty {
  margin: 0;
  padding: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.vr-join-requests-modal-list {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: grid;
  gap: 8px;
}
.vr-join-request-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(71, 85, 105, 0.35);
}
.vr-join-request-item.is-waiting {
  border-color: rgba(251, 191, 36, 0.35);
}
.vr-join-request-item.is-accepted {
  border-color: rgba(74, 222, 128, 0.28);
}
.vr-join-request-item.is-rejected {
  opacity: 0.82;
}
.vr-join-request-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.25);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 800;
}
.vr-join-request-body {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.vr-join-request-name {
  font-size: 12px;
  color: #f8fafc;
}
.vr-join-request-meta,
.vr-join-request-time,
.vr-join-request-status {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
}
.vr-join-request-status {
  color: #fde68a;
}
.vr-join-request-item.is-accepted .vr-join-request-status {
  color: #bbf7d0;
}
.vr-join-request-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.vr-join-request-accept-btn,
.vr-join-request-reject-btn {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.vr-join-request-accept-btn {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.35);
  color: #bbf7d0;
}
.vr-join-request-reject-btn {
  background: rgba(127, 29, 29, 0.25);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
body.vr-join-requests-modal-open {
  overflow: hidden;
}

/* VR-JOIN-PANEL-LEFT-SIDEBAR — inline join requests inside Participants panel */
body.vr-ref-ui .vr-participants-join-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.vr-ref-ui .vr-participants-join-panel.is-focused {
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45);
  border-radius: 10px;
}
body.vr-ref-ui .vr-participants-join-empty {
  margin: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  text-align: center;
}
body.vr-ref-ui .vr-participants-join-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(34vh, 280px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.42) rgba(8, 16, 34, 0.35);
  padding: 4px 2px 6px;
}
body.vr-ref-ui .vr-participants-join-scroll::-webkit-scrollbar {
  width: 7px;
}
body.vr-ref-ui .vr-participants-join-scroll::-webkit-scrollbar-track {
  background: rgba(8, 16, 34, 0.35);
  border-radius: 999px;
}
body.vr-ref-ui .vr-participants-join-scroll::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.42);
  border-radius: 999px;
}
body.vr-ref-ui .vr-participants-join-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(147, 197, 253, 0.55);
}
body.vr-ref-ui .vr-participants-join-section + .vr-participants-join-section {
  margin-top: 8px;
}
body.vr-ref-ui .vr-participants-join-section-title {
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
}
body.vr-ref-ui .vr-participants-join-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.vr-ref-ui .vr-join-request-panel-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "avatar body"
    "actions actions";
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
body.vr-ref-ui .vr-join-request-panel-card.is-waiting {
  border-color: rgba(251, 191, 36, 0.45);
}
body.vr-ref-ui .vr-join-request-panel-card.is-accepted {
  border-color: rgba(74, 222, 128, 0.35);
}
body.vr-ref-ui .vr-join-request-panel-card.is-rejected {
  border-color: rgba(248, 113, 113, 0.35);
  opacity: 0.88;
}
body.vr-ref-ui .vr-join-request-avatar-wrap {
  grid-area: avatar;
  flex-shrink: 0;
}
body.vr-ref-ui .vr-join-request-avatar-img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-body {
  grid-area: body;
  min-width: 0;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  overflow-wrap: anywhere;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-role,
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-school,
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-group,
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-time {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-status {
  display: inline-flex;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.75);
}
body.vr-ref-ui .vr-join-request-panel-card.is-waiting .vr-join-request-status {
  color: #fde68a;
  background: rgba(120, 53, 15, 0.55);
}
body.vr-ref-ui .vr-join-request-panel-card.is-accepted .vr-join-request-status {
  color: #bbf7d0;
  background: rgba(20, 83, 45, 0.55);
}
body.vr-ref-ui .vr-join-request-panel-card.is-rejected .vr-join-request-status {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.55);
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
  width: 100%;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-accept-btn,
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-reject-btn {
  flex: 1 1 0;
  min-height: 30px;
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-accept-btn {
  color: #052e16;
  background: #4ade80;
  border: 1px solid #22c55e;
}
body.vr-ref-ui .vr-join-request-panel-card .vr-join-request-reject-btn {
  color: #fef2f2;
  background: rgba(127, 29, 29, 0.72);
  border: 1px solid rgba(248, 113, 113, 0.55);
}
body.vr-ref-ui #vrParticipantsPanel.vr-participants-has-join-scope,
body.vr-ref-ui .vr-participants-clean-panel.vr-participants-has-join-scope {
  max-height: min(46vh, 380px);
}
@media (max-width: 768px) {
  body.vr-ref-ui .vr-participants-join-scroll {
    max-height: min(42vh, 320px);
  }
}

.vr-step5-school-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.vr-step5-count-pill {
  flex-shrink: 0;
}
.vr-step5-participants-blocked,
.vr-step5-host-empty {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}
.vr-step5-participants-blocked {
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.vr-step5-host-empty {
  background: rgba(30, 58, 95, 0.55);
  border: 1px solid rgba(96, 165, 250, 0.25);
  color: #bfdbfe;
}
.vr-step5-empty-state {
  color: #94a3b8;
}
.vr-step5-participant-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  max-height: min(36vh, 300px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vr-step5-participant-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
.vr-step5-participant-row.is-host {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(6, 78, 59, 0.22);
}
.vr-step5-participant-row.is-you {
  border-color: rgba(96, 165, 250, 0.45);
}
.vr-step5-participant-avatar {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e3a5f, #0f2744);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.03em;
}
.vr-step5-participant-main {
  min-width: 0;
}
.vr-step5-participant-name-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.vr-step5-participant-name {
  font-size: 13px;
  font-weight: 900;
  color: #f8fafc;
  overflow-wrap: anywhere;
}
.vr-step5-role-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, 0.28);
}
.vr-step5-participant-row.is-host .vr-step5-role-pill {
  background: rgba(16, 185, 129, 0.18);
  color: #86efac;
  border-color: rgba(74, 222, 128, 0.3);
}
.vr-step5-participant-meta {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.vr-step5-participant-media {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vr-step5-media-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.22);
  opacity: 0.72;
}
.vr-step5-media-mic {
  filter: grayscale(0.35);
}
.vr-step5-media-cam.is-off {
  opacity: 0.45;
}
@media (max-width: 1100px) {
  .vr-step5-participants-panel {
    max-height: none;
  }
  .vr-step5-participant-list {
    max-height: 260px;
  }
}
@media (max-width: 720px) {
  .vr-step5-participant-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }
}


/* VR-STEP6 — Class Chat Panel */
.vr-step6-class-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  max-height: min(52vh, 420px);
  overflow: hidden;
}
.vr-step6-class-chat-panel.is-blocked .vr-step6-chat-messages,
.vr-step6-class-chat-panel.is-blocked .vr-step6-chat-compose,
.vr-step6-class-chat-panel.is-blocked .vr-step6-chat-helper {
  display: none;
}
.vr-step6-chat-title-wrap h2 {
  margin: 0;
}
.vr-step6-chat-scope-label {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: #93c5fd;
  letter-spacing: 0.02em;
}
.vr-step6-chat-context {
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 800;
  color: #dbeafe;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.vr-step6-chat-school-label {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  overflow-wrap: anywhere;
}
.vr-step6-chat-blocked {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.vr-step6-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
.vr-step6-chat-empty {
  margin: 0;
  padding: 18px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.45;
}
.vr-step6-chat-bubble-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vr-step6-chat-bubble {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.72);
}
.vr-step6-chat-bubble.is-viewer {
  margin-left: auto;
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(96, 165, 250, 0.4);
}
.vr-step6-chat-bubble.is-other {
  margin-right: auto;
}
.vr-step6-chat-bubble-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.vr-step6-chat-sender {
  font-size: 11px;
  font-weight: 900;
  color: #e2e8f0;
}
.vr-step6-chat-role-pill {
  display: inline-flex;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(59, 130, 246, 0.2);
  color: #bfdbfe;
  border: 1px solid rgba(96, 165, 250, 0.28);
}
.vr-step6-chat-time {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}
.vr-step6-chat-bubble-text {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.vr-step6-chat-helper {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  line-height: 1.4;
}
.vr-step6-chat-compose {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  margin-top: 8px;
}
.vr-step6-chat-compose.is-disabled .vr-step6-chat-input-wrap input {
  opacity: 0.65;
  cursor: not-allowed;
}
.vr-step6-chat-input-wrap {
  margin-top: 0;
}
.vr-step6-chat-send-btn {
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 900;
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.28);
  cursor: pointer;
  white-space: nowrap;
}
.vr-step6-chat-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(51, 65, 85, 0.55);
  border-color: rgba(148, 163, 184, 0.25);
  color: #94a3b8;
}
@media (max-width: 1100px) {
  .vr-step6-class-chat-panel {
    max-height: none;
  }
  .vr-step6-chat-messages {
    max-height: 220px;
  }
}
@media (max-width: 720px) {
  .vr-step6-chat-compose {
    grid-template-columns: 1fr;
  }
  .vr-step6-chat-send-btn {
    width: 100%;
  }
}


/* BrightStar debug UI — hidden unless window.BRIGHTSTAR_DEBUG_MODE === true */
.bs-debug-ui {
  display: none !important;
}
body.bs-debug-mode-on .bs-debug-ui {
  display: block !important;
}
body.bs-debug-mode-on details.bs-debug-ui,
body.bs-debug-mode-on .vc-step3-legacy-controls-wrap.bs-debug-ui {
  display: block !important;
}

/* VR-STEP7 — Meeting Info Cards + Action Buttons */
.vr-step1-meeting-info.vr-step7-meeting-info {
  display: block;
  grid-template-columns: none;
  margin-bottom: 14px;
}
.vr-step7-meeting-info {
  margin-bottom: 14px;
}
.vr-step7-meeting-info-head {
  margin-bottom: 12px;
}
.vr-step7-meeting-info-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  color: #0f2744;
}
.vr-step7-meeting-info-head p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.vr-step7-meeting-info.is-blocked .vr-step7-info-card strong {
  color: #94a3b8;
}
.vr-step7-meeting-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  width: 100%;
}
.vr-step7-info-card {
  min-width: 0;
}
.vr-step7-info-card small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.04em;
}
.vr-step7-info-card strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #0f2744;
  white-space: normal;
  writing-mode: horizontal-tb;
  word-break: break-word;
  overflow-wrap: break-word;
}
.vr-step7-action-bar-wrap {
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, #0b1220 0%, #152a4a 55%, #0f1f3d 100%);
  border: 1px solid rgba(96, 165, 250, 0.28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.vr-step7-action-bar-wrap.is-blocked .vr-step7-action-bar button:not(#vrActionBackMeetingsBtn) {
  opacity: 0.45;
  pointer-events: none;
}
.vr-step7-actions-blocked {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
.vr-step7-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.vr-step7-btn {
  border-radius: 12px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.vr-step7-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.vr-step7-btn-primary {
  color: #eff6ff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}
.vr-step7-btn-primary:hover:not(:disabled),
.vr-step7-btn-primary:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
  outline: none;
}
.vr-step7-btn-danger {
  color: #fecaca;
  background: rgba(127, 29, 29, 0.55);
  border-color: rgba(248, 113, 113, 0.45);
}
.vr-step7-btn-danger:hover:not(:disabled),
.vr-step7-btn-danger:focus-visible:not(:disabled) {
  background: rgba(153, 27, 27, 0.72);
  outline: none;
}
.vr-step7-btn-secondary {
  color: #dbeafe;
  background: rgba(30, 58, 95, 0.72);
  border-color: rgba(96, 165, 250, 0.35);
}
.vr-step7-btn-secondary:hover:not(:disabled),
.vr-step7-btn-secondary:focus-visible:not(:disabled) {
  background: rgba(37, 99, 235, 0.28);
  outline: none;
}
.vr-step7-btn-neutral {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.72);
  border-color: rgba(148, 163, 184, 0.35);
}
.vr-step7-btn-neutral:hover:not(:disabled),
.vr-step7-btn-neutral:focus-visible:not(:disabled) {
  background: rgba(71, 85, 105, 0.85);
  outline: none;
}
.vr-step7-action-hint {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.45;
}
body.vr-meeting-view-ended .vr-step4-teaching-toolbar .vr-step4-tool-btn:not(#vrToolLeaveBtn) {
  opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 1100px) {
  .vr-step7-meeting-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media (max-width: 720px) {
  .vr-step7-meeting-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .vr-step7-action-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .vr-step7-btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .vr-step7-meeting-info-grid {
    grid-template-columns: 1fr;
  }
  .vr-step7-info-card strong {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}


/* VR-STEP8 — Final Responsive Access Protection */
.video-class-body.vr-step8-body,
.vr-step8-shell {
  overflow-x: hidden;
  max-width: 100%;
}
.vr-step8-role-pill {
  background: rgba(59, 130, 246, 0.14);
  color: #1d4ed8;
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.vr-step8-access-warning {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.vr-step8-meeting-ended {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(30, 58, 95, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #dbeafe;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.vr-step8-access-denied {
  margin-bottom: 14px;
}
.vr-step8-access-denied-card {
  padding: 22px 20px;
  border-radius: 18px;
  background: linear-gradient(160deg, #1f2937 0%, #111827 100%);
  border: 1px solid rgba(248, 113, 113, 0.35);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
  text-align: center;
}
.vr-step8-access-denied-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  color: #fecaca;
}
.vr-step8-access-denied-card p {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
  line-height: 1.5;
}
.vr-step8-access-denied-details {
  font-size: 12px !important;
  color: #94a3b8 !important;
  overflow-wrap: anywhere;
}
body.vr-access-denied .vr-step1-status-legacy,
body.vr-access-denied .vr-step1-legacy-grid,
body.vr-access-denied .vr-step1-audit-panel {
  display: none;
}
body.vr-access-denied .vr-step1-header-actions #vcRefreshBtn {
  display: none;
}
.vr-step8-jitsi-blocked .video-room-embed-shell,
.vr-step8-jitsi-blocked .vc2-jitsi-frame-wrap {
  pointer-events: none;
  opacity: 0.55;
}
.vr-step8-classroom,
.vr-step8-classroom .video-room-jitsi-frame-wrap,
.vr-step8-classroom .vc2-jitsi-frame {
  max-width: 100%;
}
.vr-step1-shell .vc2-jitsi-frame,
.video-room-jitsi-frame-wrap .vc2-jitsi-frame {
  max-width: 100%;
}
body.vr-meeting-ended-state .vr-step4-teaching-toolbar .vr-step4-tool-btn:not(#vrToolLeaveBtn):not(#vrToolMaximizeBtn) {
  opacity: 0.55;
}
@media (max-width: 1100px) {
  .vr-step8-classroom {
    display: block;
  }
  .vr-step1-classroom-sidebar {
    margin-top: 12px;
  }
}
@media (max-width: 720px) {
  .vr-step1-header-badges {
    flex-wrap: wrap;
  }
  .vr-step8-access-denied-card {
    padding: 18px 14px;
  }
  .vr-step1-context-strip {
    overflow-x: hidden;
  }
  .vr-step1-info-card strong,
  .vr-step1-context-item strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .vr-step7-info-card strong {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    writing-mode: horizontal-tb;
  }
}
@media (max-width: 480px) {
  .vr-step1-header-actions button {
    min-height: 44px;
  }
  .vr-step7-btn,
  .vr-step4-tool-btn {
    min-height: 44px;
  }
}


/* VR-POLISH — Video Room UI Clean Polish (after Join fix) */
.vr-polish-body {
  background: linear-gradient(180deg, #e8eef6 0%, #eef2f8 140px, #eef2f8 100%);
}
.vr-polish-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 48px;
}
.vr-polish-shell > .vr-step1-header {
  margin-bottom: 0;
  padding: 18px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e4e8f1;
  box-shadow: 0 12px 28px rgba(20, 36, 68, 0.07);
}
.vr-polish-shell > .vr-step2-school-mismatch,
.vr-polish-shell > .vr-step8-access-warning,
.vr-polish-shell > .vr-step8-meeting-ended {
  margin: 0;
}
.vr-polish-shell > .vr-step1-context-strip {
  margin-bottom: 0;
}
.vr-polish-meeting-info {
  padding: 18px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e4e8f1;
  box-shadow: 0 10px 26px rgba(20, 36, 68, 0.06);
  margin-bottom: 0;
}
.vr-polish-meeting-info .vr-step7-meeting-info-head {
  margin-bottom: 14px;
}
.vr-polish-meeting-info .vr-step7-meeting-info-grid {
  gap: 14px;
}
.vr-polish-meeting-info .vr-step7-info-card {
  padding: 14px 16px;
}
.vr-polish-classroom {
  margin-bottom: 0;
  padding: 18px;
  gap: 16px;
}
.vr-polish-classroom-main {
  gap: 16px;
}
.vr-polish-classroom-main .vr-step1-teacher-panel {
  flex-shrink: 0;
}
.vr-polish-classroom-main .vr-step1-lesson-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vr-polish-classroom-main .vr-step3-jitsi-stage {
  flex: 1;
  min-height: min(52vh, 460px);
}
.vr-polish-classroom-sidebar {
  gap: 14px;
  align-self: start;
}
.vr-polish-classroom-sidebar .vr-step5-participants-panel,
.vr-polish-classroom-sidebar .vr-step6-class-chat-panel {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vr-polish-classroom-sidebar .vr-step5-participant-list,
.vr-polish-classroom-sidebar .vr-step6-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.vr-polish-classroom.vr-chat-hidden {
  align-items: start;
}
.vr-polish-classroom-sidebar.vr-sidebar-single-panel {
  align-self: start;
  min-height: 0;
  height: auto;
}
.vr-polish-classroom-sidebar.vr-sidebar-single-panel .vr-step5-participants-panel {
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(46vh, 380px);
  height: auto;
}
.vr-polish-classroom-sidebar.vr-sidebar-single-panel .vr-step5-participant-list {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(28vh, 220px);
}
.vr-polish-shell .vr-step4-toolbar-wrap {
  margin-top: 4px;
  width: 100%;
}
.vr-polish-shell .vr-step4-teaching-toolbar {
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  width: 100%;
}
.vr-polish-shell .vr-step4-tool-btn {
  flex: 1 1 72px;
  max-width: 88px;
  min-height: 64px;
}
.vr-polish-shell .vr-step4-tool-leave {
  flex: 0 0 auto;
  margin-left: auto;
  max-width: 96px;
}
.vr-polish-action-bar-wrap {
  margin-bottom: 0;
}
.vr-polish-shell .vr-step7-action-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.vr-polish-shell .vr-step7-btn {
  width: 100%;
  text-align: center;
}
.vr-polish-shell .vr-step1-primary-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.vr-polish-shell .vr-step1-primary-actions button {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
.vr-polish-notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  background: rgba(30, 58, 95, 0.35);
  border: 1px solid rgba(96, 165, 250, 0.28);
  color: #dbeafe;
}
.vr-polish-notice.ok {
  background: rgba(6, 78, 59, 0.28);
  border-color: rgba(74, 222, 128, 0.35);
  color: #86efac;
}
.vr-polish-notice.blocked {
  background: rgba(127, 29, 29, 0.32);
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
#vcNoticeView[hidden],
.vr-polish-notice:empty {
  display: none !important;
}
.vr-polish-shell .panel-title-row.vr-step1-lesson-head {
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 1024px) {
  .vr-polish-classroom-main .vr-step1-teacher-panel {
    max-height: 210px;
  }
  .vr-polish-classroom-main .vr-step1-teacher-placeholder {
    min-height: 88px;
    padding: 12px;
  }
}
@media (min-width: 1101px) {
  .vr-polish-classroom-sidebar:not(.vr-sidebar-single-panel) {
    min-height: 100%;
    align-self: stretch;
  }
}
@media (max-width: 1100px) {
  .vr-polish-classroom-sidebar:not(.vr-sidebar-single-panel) .vr-step5-participants-panel,
  .vr-polish-classroom-sidebar:not(.vr-sidebar-single-panel) .vr-step6-class-chat-panel {
    flex: 1 1 280px;
    min-height: 260px;
  }
  .vr-polish-classroom-sidebar.vr-sidebar-single-panel .vr-step5-participants-panel {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
  }
}
@media (max-width: 720px) {
  .vr-polish-shell {
    gap: 14px;
  }
  .vr-polish-meeting-info,
  .vr-polish-shell > .vr-step1-header {
    padding: 14px 16px;
  }
  .vr-polish-classroom {
    padding: 14px;
  }
  .vr-polish-shell .vr-step4-teaching-toolbar {
    justify-content: flex-start;
  }
  .vr-polish-shell .vr-step4-tool-btn {
    flex: 0 0 auto;
    min-width: 64px;
    max-width: none;
  }
  .vr-polish-shell .vr-step4-tool-leave {
    margin-left: 0;
  }
}

/* VR production UI — hide duplicate bottom actions + class chat placeholder */
.vr-polish-shell #vrStep7ActionBarWrap.bs-hidden-ui,
.vr-polish-shell #vrClassChatPanel.bs-hidden-ui {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.vr-polish-classroom-sidebar:has(#vrClassChatPanel.bs-hidden-ui) .vr-step5-participants-panel,
.vr-polish-classroom-sidebar:has(#vrClassChatPanel[hidden]) .vr-step5-participants-panel,
.vr-polish-classroom-sidebar.vr-sidebar-single-panel .vr-step5-participants-panel {
  flex: 0 0 auto;
  min-height: 0;
  max-height: min(46vh, 380px);
  height: auto;
}
.vr-polish-classroom:has(#vrClassChatPanel.bs-hidden-ui),
.vr-polish-classroom.vr-chat-hidden {
  align-items: start;
}
.vr-polish-classroom-sidebar:has(#vrClassChatPanel.bs-hidden-ui),
.vr-polish-classroom-sidebar.vr-sidebar-single-panel {
  align-self: start;
  min-height: 0;
  height: auto;
}
.vr-polish-classroom-main .vr-step3-jitsi-stage {
  min-height: min(44vh, 400px);
}
.vr-polish-shell > .vr-polish-meeting-info {
  margin-top: 2px;
}


/* VR-WIDTH-BALANCE — compact centered desktop layout + right panel cleanup */
.vr-width-balance-shell.video-class-shell,
.vr-width-balance-shell.vr-step1-shell,
.vr-width-balance-shell.vr-polish-shell {
  width: min(100% - 32px, 1200px);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.vr-width-balance-shell > .vr-step1-context-strip {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  padding: 14px 16px;
}
.vr-width-balance-shell .vr-polish-meeting-info {
  padding: 16px 18px;
}
.vr-width-balance-shell .vr-step7-meeting-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vr-width-balance-shell .vr-polish-classroom:not(.vr-chat-hidden) {
  grid-template-columns: minmax(240px, 272px) minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}
.vr-width-balance-shell .video-room-embed-shell {
  min-height: min(40vh, 360px);
}
.vr-width-balance-shell .vr-polish-classroom-main .vr-step3-jitsi-stage {
  min-height: min(40vh, 360px);
}
@media (min-width: 901px) {
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden,
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom:not(.vr-chat-hidden) {
    display: grid;
    grid-template-columns: minmax(252px, 272px) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    padding: 16px;
    min-height: clamp(560px, 66vh, 700px);
    background: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 18px 40px rgba(8, 18, 40, 0.28);
  }
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom:not(.vr-chat-hidden) .vr-polish-classroom-sidebar {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom:not(.vr-chat-hidden) .vr-polish-classroom-main {
    align-self: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-polish-classroom-main {
    grid-column: 2;
    min-width: 0;
    align-self: stretch;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.vr-ref-ui .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-polish-classroom-sidebar {
    grid-column: 1;
    width: 100%;
    max-width: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
  }
  .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-step5-participants-panel {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    height: auto;
    width: 100%;
  }
  .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-step5-participant-list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: min(32vh, 240px);
  }
}
@media (min-width: 1201px) {
  .vr-width-balance-shell > .vr-step1-context-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  .vr-width-balance-shell .vr-step7-meeting-info-grid {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }
  .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden {
    display: block;
    padding: 14px;
    background: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 22px 48px rgba(8, 18, 40, 0.35);
  }
  .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-polish-classroom-main {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .vr-width-balance-shell .vr-polish-classroom.vr-chat-hidden .vr-polish-classroom-sidebar {
    width: 100%;
    max-width: none;
    margin-top: 12px;
  }
}
@media (max-width: 720px) {
  .vr-width-balance-shell.video-class-shell,
  .vr-width-balance-shell.vr-step1-shell,
  .vr-width-balance-shell.vr-polish-shell {
    width: min(100% - 20px, 1200px);
  }
  .vr-width-balance-shell > .vr-step1-context-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vr-width-balance-shell .vr-step7-meeting-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .vr-width-balance-shell > .vr-step1-context-strip,
  .vr-width-balance-shell .vr-step7-meeting-info-grid {
    grid-template-columns: 1fr;
  }
}


/* VR-MOCKUP-UI — BrightStar Online Class Room visual layout */
body.vr-mockup-ui {
  background: #f3f5f9;
  font-family: "Segoe UI", Arial, sans-serif;
}
.vr-mockup-shell {
  gap: 14px;
  max-width: 1280px;
}
.vr-mockup-context-legacy,
.vr-mockup-info-legacy,
.vr-mockup-lesson-meta,
.vr-mockup-lesson-note,
.vr-mockup-lesson-eyebrow,
.vr-mockup-chat-legacy-meta,
.vr-mockup-chat-helper,
.vr-mockup-action-hint,
.vr-mockup-hidden-action {
  display: none !important;
}
.vr-mockup-topbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center;
  gap: 14px 18px;
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e9f2;
  box-shadow: 0 10px 24px rgba(20, 36, 68, 0.06);
}
.vr-mockup-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vr-mockup-brand-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  font-size: 20px;
}
.vr-mockup-brand-title {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1.1;
}
.vr-mockup-brand-sub {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
.vr-mockup-class-meta {
  min-width: 0;
}
.vr-mockup-grade-line {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #16a34a;
}
.vr-mockup-meeting-line {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
.vr-mockup-lang-btn,
.vr-mockup-meeting-info-btn {
  border: 1px solid #dbe3f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  background: #f8fafc;
  cursor: default;
}
.vr-mockup-meeting-info-btn {
  cursor: pointer;
  background: #fff;
}
.vr-mockup-live-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff7f7;
  border: 1px solid #fecaca;
}
.vr-mockup-live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
}
.vr-mockup-live-text {
  font-size: 12px;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 0.04em;
}
.vr-mockup-timer {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.vr-mockup-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.vr-mockup-profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.vr-mockup-profile strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
}
.vr-mockup-profile small {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}
.vr-mockup-classroom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #121a2b;
  border: 1px solid #24314a;
  box-shadow: 0 18px 40px rgba(8, 18, 40, 0.28);
  align-items: stretch;
}
.vr-mockup-stage-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px 12px;
}
.vr-mockup-topic-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 700;
}
.vr-mockup-topic-bar strong {
  color: #cbd5e1;
  font-weight: 800;
}
.vr-mockup-teacher-accent {
  color: #4ade80;
  font-weight: 900;
}
.vr-mockup-topic-sep {
  color: #64748b;
}
.vr-mockup-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.vr-mockup-teacher-video {
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 280px;
  background: #0b1220;
}
.vr-mockup-pin-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.85);
  color: #fff;
  cursor: default;
}
.vr-mockup-teacher-feed {
  min-height: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}
.vr-mockup-teacher-feed .vr-step1-placeholder-icon {
  width: 72px;
  height: 72px;
  font-size: 34px;
  margin-bottom: 0;
}
.vr-mockup-video-nameplate {
  position: absolute;
  left: 12px;
  bottom: 12px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
}
.vr-mockup-lesson-stage {
  position: relative;
  padding: 12px;
  min-height: 280px;
  background: #f8fafc;
  color: #0f172a;
}
.vr-mockup-presenting-badge {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 11px;
  font-weight: 900;
}
.vr-mockup-lesson-title {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: #0f2744;
}
.vr-mockup-lesson-stage .video-room-embed-shell {
  min-height: 220px;
  border-radius: 14px;
  border-color: #cbd5e1;
  background: linear-gradient(160deg, #0b1220 0%, #152a4a 55%, #0f1f3d 100%);
}
.vr-mockup-lesson-stage .vr-step3-jitsi-stage {
  min-height: 220px;
  margin-bottom: 8px;
}
.vr-mockup-annotate-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.88);
}
.vr-mockup-annotate-bar button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: rgba(51, 65, 85, 0.85);
  color: #e2e8f0;
  cursor: default;
}
.vr-mockup-annotate-stop {
  background: rgba(220, 38, 38, 0.85) !important;
}
.vr-mockup-primary-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.vr-mockup-primary-actions button {
  width: auto !important;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
}
.vr-mockup-toolbar-wrap {
  margin-top: 12px;
}
.vr-mockup-teaching-toolbar {
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(8, 16, 34, 0.92);
}
.vr-mockup-teaching-toolbar .vr-step4-tool-btn {
  min-width: 62px;
  max-width: 72px;
  min-height: 58px;
  border-radius: 14px;
  background: rgba(30, 41, 59, 0.9);
}
.vr-mockup-tool-active {
  background: rgba(22, 163, 74, 0.28) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
}
#vrToolCameraBtn.vr-mockup-tool-active {
  background: rgba(37, 99, 235, 0.28) !important;
  border-color: rgba(96, 165, 250, 0.45) !important;
}
.vr-mockup-tool-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 18px;
}
#vrToolPeopleBtn {
  position: relative;
}
.vr-mockup-leave-btn {
  min-width: 74px !important;
  max-width: 84px !important;
  background: rgba(220, 38, 38, 0.88) !important;
  border-color: rgba(248, 113, 113, 0.55) !important;
  color: #fff !important;
}
.vr-mockup-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-left: 1px solid #e2e8f0;
  min-height: 100%;
}
.vr-mockup-participants-panel,
.vr-mockup-chat-panel {
  flex: 1 1 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #0f172a;
  box-shadow: none;
  padding: 14px;
}
.vr-mockup-participants-panel {
  border-bottom: 1px solid #e2e8f0;
}
.vr-mockup-participants-panel h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}
.vr-mockup-participants-panel .vr-step5-school-label {
  color: #64748b;
}
.vr-mockup-participants-panel .vr-step5-participants-search input,
.vr-mockup-chat-panel .vr-step6-chat-input-wrap input {
  background: #f8fafc;
  color: #0f172a;
  border-color: #dbe3f0;
}
.vr-mockup-participants-panel .vr-step5-participant-list {
  max-height: 220px;
}
.vr-mockup-participants-panel .vr-step5-participant-row {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.vr-mockup-participants-panel .vr-step5-participant-name {
  color: #0f172a;
}
.vr-mockup-view-all-btn {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  cursor: default;
}
.vr-mockup-chat-panel h2 {
  color: #0f172a;
}
.vr-mockup-chat-messages {
  max-height: 180px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.vr-mockup-chat-compose {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.vr-step6-chat-clear-btn {
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  background: #fff;
  color: #64748b;
  cursor: default;
}
.vr-mockup-meeting-info-bar {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(20, 36, 68, 0.05);
}
.vr-mockup-info-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.vr-mockup-info-cell {
  position: relative;
  padding: 14px 16px;
  border-right: 1px solid #e8edf5;
  border-radius: 0;
  box-shadow: none;
  min-height: 88px;
}
.vr-mockup-info-cell:last-child {
  border-right: 0;
}
.vr-mockup-info-cell small {
  color: #64748b;
}
.vr-mockup-info-cell strong {
  color: #0f172a;
  padding-right: 28px;
  word-break: break-word;
}
.vr-mockup-copy-btn {
  position: absolute;
  right: 12px;
  bottom: 14px;
  width: 28px;
  height: 28px;
  border: 1px solid #dbe3f0;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}
.vr-mockup-footer-actions {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.vr-mockup-footer-actions[hidden] {
  display: block !important;
}
.vr-mockup-footer-btn-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vr-mockup-footer-btn {
  width: 100%;
  min-height: 52px;
  border-radius: 14px !important;
  border: 1px solid #dbe3f0 !important;
  background: #fff !important;
  color: #0f172a !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}
.vr-mockup-footer-danger {
  color: #dc2626 !important;
}
body.vr-mockup-ui #vrClassChatPanel.bs-hidden-ui,
body.vr-mockup-ui #vrClassChatPanel[hidden] {
  display: flex !important;
  visibility: visible !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 14px !important;
  border: 0 !important;
}
@media (max-width: 1100px) {
  .vr-mockup-topbar {
    grid-template-columns: 1fr 1fr;
  }
  .vr-mockup-classroom {
    grid-template-columns: 1fr;
  }
  .vr-mockup-sidebar {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }
  .vr-mockup-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vr-mockup-footer-btn-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .vr-mockup-stage-grid {
    grid-template-columns: 1fr;
  }
  .vr-mockup-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vr-mockup-footer-btn-row {
    grid-template-columns: 1fr;
  }
}


/* VR-REF-STEP1-2 — Reference layout foundation */
body.vr-ref-ui {
  background: #f3f5f9;
  overflow-x: hidden;
}
.vr-ref-shell {
  max-width: 1280px;
  gap: 14px;
}
.vr-ref-context-legacy {
  display: none !important;
}
.vr-ref-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center;
  gap: 12px 16px;
  padding: 12px 16px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5e9f2;
  box-shadow: 0 8px 22px rgba(20, 36, 68, 0.06);
}
.vr-ref-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vr-ref-brand-icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #10b981);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  overflow: hidden;
  flex-shrink: 0;
}
.vr-ref-brand-icon.has-school-logo {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.35);
  padding: 0;
}
.vr-ref-brand-icon .vr-ref-brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.vr-ref-brand-icon .vr-ref-brand-logo-fallback {
  display: none;
  font-size: 16px;
  font-weight: 900;
  color: #2563eb;
}
.vr-ref-brand-icon .vr-ref-brand-logo-img[hidden] + .vr-ref-brand-logo-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.vr-ref-brand-title {
  display: block;
  font-size: 17px;
  font-weight: 900;
  color: #2563eb;
  line-height: 1.1;
}
.vr-ref-brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.vr-ref-meeting-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vr-ref-grade-label {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #16a34a;
  line-height: 1.35;
  overflow-wrap: break-word;
}
.vr-ref-subject-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  max-width: 100%;
  overflow-wrap: break-word;
}
.vr-ref-live-cluster {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff7f7;
  border: 1px solid #fecaca;
  white-space: nowrap;
}
.vr-ref-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
}
.vr-ref-live-pill {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  color: #dc2626;
}
.vr-ref-timer {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.vr-ref-meeting-info-btn {
  border: 1px solid #dbe3f0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.vr-ref-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.vr-ref-profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.vr-ref-profile strong {
  display: block;
  font-size: 12px;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.vr-ref-profile small {
  display: block;
  font-size: 10px;
  color: #64748b;
  font-weight: 700;
}
.vr-ref-step2-grid,
.vr-ref-classroom {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  border-radius: 18px;
  overflow: hidden;
  max-width: 100%;
  background: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 40px rgba(8, 18, 40, 0.28);
}
#vrClassroomSection {
  position: relative;
}

/* VR-MAXIMIZE-MODAL — fullscreen overlay toggle for Online Class Room */
.bs-video-room-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  background: rgba(2, 6, 23, 0.78);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.bs-video-room-modal-overlay:not([hidden]) {
  display: block;
}
body.bs-video-room-maximized {
  overflow: hidden;
}
body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content {
  position: fixed;
  inset: 12px;
  z-index: 12001;
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px 14px;
  width: calc(100vw - 24px);
  height: calc(100vh - 24px);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: 0;
  padding: 14px;
  overflow: hidden;
  overscroll-behavior: contain;
  border-radius: 16px;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.48);
}
body.bs-video-room-maximized #vrVideoRoomMaximizeHeader:not([hidden]) {
  grid-column: 1 / -1;
  grid-row: 1;
}
body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-ref-sidebar,
body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-polish-classroom-sidebar {
  grid-column: 1;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}
body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-ref-main-stage,
body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-stage3a-teaching-stage {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
}
body.bs-video-room-maximized .vr-stage3a-board-grid {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
}
body.bs-video-room-maximized .vr-stage3a-teaching-stage {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.bs-video-room-modal-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding: 6px 10px 6px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.94));
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.bs-video-room-maximized .bs-video-room-modal-header:not([hidden]) {
  display: flex;
}
.bs-video-room-modal-header-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-video-room-modal-close {
  position: static;
  flex: 0 0 auto;
  display: none;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #e2e8f0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.28);
}
.bs-video-room-modal-close:hover,
.bs-video-room-modal-close:focus-visible {
  background: rgba(51, 65, 85, 0.96);
  border-color: rgba(191, 219, 254, 0.55);
  color: #f8fafc;
  outline: none;
}
body.bs-video-room-maximized .bs-video-room-modal-close:not([hidden]) {
  display: inline-grid;
  place-items: center;
}
.vr-stage3a-teaching-toolbar .bs-toolbar-maximize-button.is-active,
.vr-stage3a-teaching-toolbar .bs-toolbar-minimize-button.is-active {
  border-color: rgba(96, 165, 250, 0.55) !important;
  background: rgba(30, 58, 138, 0.42) !important;
  color: #dbeafe !important;
}
@media (max-width: 900px) {
  body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content {
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: 10px 8px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 8px;
  }
  body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-ref-sidebar,
  body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-polish-classroom-sidebar {
    grid-column: 1;
    grid-row: 2;
  }
  body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-ref-main-stage,
  body.bs-video-room-maximized #vrClassroomSection.bs-video-room-modal-content > .vr-stage3a-teaching-stage {
    grid-column: 1;
    grid-row: 3;
  }
}
.vr-ref-sidebar,
.vr-polish-classroom-sidebar.vr-ref-sidebar {
  grid-column: 1;
}
.vr-ref-main-stage,
.vr-polish-classroom-main {
  grid-column: 2;
}
.vr-ref-main-stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.vr-ref-stage-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 12px;
  min-width: 0;
}
.vr-ref-teacher-panel,
.vr-ref-lesson-panel {
  min-width: 0;
}
.vr-ref-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 360px;
  align-self: start;
}
.vr-ref-sidebar .vr-step5-participants-panel,
.vr-ref-sidebar .vr-ref-chat-panel {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none;
}
.vr-ref-sidebar.vr-sidebar-single-panel .vr-step5-participants-panel {
  flex: 1 1 auto;
}
.vr-ref-participants-panel .vr-step5-participant-list {
  max-height: min(34vh, 260px);
}
.vr-ref-toolbar-wrap {
  margin-top: 2px;
}
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden,
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) {
  align-items: stretch;
  grid-template-columns: minmax(252px, 272px) minmax(0, 1fr);
  gap: 12px;
  min-height: clamp(560px, 66vh, 700px);
  height: clamp(560px, 66vh, 700px);
  max-height: clamp(560px, 66vh, 700px);
  overflow: hidden;
}
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-ref-sidebar,
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-polish-classroom-sidebar {
  width: 100%;
  max-width: none;
}
body.vr-ref-ui .vr-width-balance-shell .vr-ref-classroom,
body.vr-ref-ui .vr-width-balance-shell .vr-ref-step2-grid {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  padding: 16px;
  background: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 18px 40px rgba(8, 18, 40, 0.28);
}
body.vr-ref-ui .vr-width-balance-shell .vr-ref-classroom.vr-chat-hidden,
body.vr-ref-ui .vr-width-balance-shell .vr-ref-step2-grid.vr-chat-hidden {
  grid-template-columns: minmax(252px, 272px) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) {
  .vr-ref-header {
    grid-template-columns: 1fr 1fr;
  }
  .vr-ref-step2-grid,
  .vr-ref-classroom {
    grid-template-columns: 1fr;
  }
  .vr-ref-sidebar,
  .vr-polish-classroom-sidebar {
    grid-column: auto;
    order: 2;
    max-width: none;
  }
  .vr-ref-main-stage,
  .vr-polish-classroom-main {
    grid-column: auto;
    order: 1;
  }
}
@media (max-width: 720px) {
  .vr-ref-header {
    grid-template-columns: 1fr;
  }
  .vr-ref-stage-grid {
    grid-template-columns: 1fr;
  }
}

/* VR-STAGE3A — Main Classroom Stage / Teaching Stage UI */
.vr-stage3a-teaching-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 14px 14px 34px;
  border-radius: 16px;
  background: linear-gradient(165deg, #0a1221 0%, #0f1c36 52%, #0b1528 100%);
  border: 1px solid rgba(100, 116, 139, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.vr-stage3a-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex: 0 0 auto;
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(8, 16, 34, 0.62);
  border: 1px solid rgba(148, 163, 184, 0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
color: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  overflow: visible;
  position: relative;
  z-index: 6;
}
.vr-stage3a-meta-item strong {
  color: #cbd5e1;
  font-weight: 800;
}
.vr-stage3a-meta-sep {
  color: rgba(148, 163, 184, 0.45);
  font-weight: 400;
  -webkit-user-select: none;user-select: none
}
.vr-stage3a-meta-spotlight-all {
  display: inline-flex;
  align-items: center;
}
.vr-spotlight-all-meta-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.42);
  background: rgba(37, 99, 235, 0.22);
  color: #bfdbfe;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.vr-spotlight-all-meta-chip:hover,
.vr-spotlight-all-meta-chip:focus-visible {
  background: rgba(37, 99, 235, 0.34);
  border-color: rgba(147, 197, 253, 0.55);
  color: #e0f2fe;
  outline: none;
}
.vr-spotlight-all-meta-chip.is-active {
  background: rgba(22, 163, 74, 0.92);
  border-color: rgba(134, 239, 172, 0.65);
  color: #ecfdf5;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.28), 0 8px 18px rgba(22, 163, 74, 0.24);
}
.vr-stage3a-meta-record-wrap {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.vr-record-meta-chip,
.bs-record-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(248, 113, 113, 0.55);
  background: rgba(185, 28, 28, 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}
.bs-record-bar-normal {
  background: rgba(185, 28, 28, 0.92);
  border-color: rgba(248, 113, 113, 0.62);
  color: #fff;
}
.bs-record-bar-active.bs-recording-green {
  background: rgba(22, 163, 74, 0.94);
  border-color: rgba(74, 222, 128, 0.68);
  color: #fff;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bs-record-bar-active.bs-recording-active {
  background: rgba(185, 28, 28, 0.96);
  border-color: rgba(248, 113, 113, 0.72);
  color: #fff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.bs-recording-timer {
  font-variant-numeric: tabular-nums;
}
.vr-record-meta-chip::after,
.vr-record-meta-chip .vr-record-meta-arrow,
.vr-record-meta-chip .vr-record-dropdown-arrow {
  display: none !important;
  content: none !important;
}
.vr-record-meta-chip.bs-record-bar-normal:hover,
.vr-record-meta-chip.bs-record-bar-normal:focus-visible {
  background: rgba(220, 38, 38, 0.96);
  border-color: rgba(252, 165, 165, 0.72);
  color: #fff;
  outline: none;
}
.vr-record-meta-chip.bs-record-bar-active.bs-recording-green:hover,
.vr-record-meta-chip.bs-record-bar-active.bs-recording-green:focus-visible {
  background: rgba(21, 128, 61, 0.96);
  border-color: rgba(134, 239, 172, 0.78);
  color: #fff;
  outline: none;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.vr-record-meta-chip.bs-record-bar-active.bs-recording-active:hover,
.vr-record-meta-chip.bs-record-bar-active.bs-recording-active:focus-visible {
  background: rgba(220, 38, 38, 0.98);
  border-color: rgba(252, 165, 165, 0.78);
  color: #fff;
  outline: none;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.vr-record-meta-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.45);
  flex-shrink: 0;
}
.vr-record-meta-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: min(280px, 78vw);
  padding: 10px;
  border-radius: 12px;
  background: rgba(8, 16, 34, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.vr-record-meta-menu[hidden] {
  display: none !important;
}
.vr-record-meta-menu-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: 0.02em;
}
.vr-record-meta-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin: 0 0 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(30, 41, 59, 0.55);
  color: #f8fafc;
  text-align: left;
  cursor: pointer;
}
.vr-record-meta-option:hover,
.vr-record-meta-option:focus-visible {
  background: rgba(37, 99, 235, 0.22);
  border-color: rgba(96, 165, 250, 0.38);
  outline: none;
}
.vr-record-meta-option-title {
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}
.vr-record-meta-option-desc {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.3;
}
.vr-record-meta-cancel {
  width: 100%;
  margin-top: 2px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #93c5fd;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
.vr-record-meta-cancel:hover,
.vr-record-meta-cancel:focus-visible {
  color: #bfdbfe;
  outline: none;
  text-decoration: underline;
}
.vr-record-meta-chip.bs-recording-green .vr-record-meta-dot.is-pulsing {
  animation: vr-record-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes vr-record-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}
#vrClassroomSection.vr-record-highlight-whole,
#vrClassroomSection.recording-target-whole-room,
#vrClassroomSection.bs-recording-target-whole-room.bs-recording-red-outline {
  outline: 3px solid rgba(239, 68, 68, 0.88);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35), 0 0 12px rgba(239, 68, 68, 0.22);
}
.vr-stage3a-lesson-board.vr-record-highlight-protected,
.vr-stage3a-lesson-board.recording-target-protected-room,
.vr-stage3a-lesson-board.bs-recording-target-protected-room.bs-recording-red-outline {
  outline: 3px solid rgba(239, 68, 68, 0.88);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35), 0 0 12px rgba(239, 68, 68, 0.22);
}
body.vr-record-protected-room-active .vr-stage3a-meta-row {
  display: none !important;
}
body.vr-record-protected-room-active #vrParticipantsPanel,
body.vr-record-protected-room-active #vrClassChatPanel,
body.vr-record-protected-room-active #vrSpotlightVideoCard,
body.vr-record-protected-room-active #vrTeachingToolbarWrap,
body.vr-record-protected-room-active .vr-protected-board-floating-toolbar,
body.vr-record-protected-room-active .vr-ref-sidebar,
body.vr-record-protected-room-active .vr-polish-classroom-sidebar {
  display: none !important;
}
body.vr-record-protected-room-active .vr-ref-main-stage,
body.vr-record-protected-room-active .vr-stage3a-teaching-stage {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}
body.vr-record-protected-room-active .vr-stage3a-board-grid {
  grid-template-columns: minmax(0, 1fr);
}
body.vr-record-protected-room-active .vr-stage3a-teaching-stage {
  position: relative;
}
.vr-protected-recording-overlay-bar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(127, 29, 29, 0.94);
  border: 1px solid rgba(248, 113, 113, 0.55);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.28);
}
.vr-protected-recording-overlay-bar[hidden] {
  display: none !important;
}
.vr-protected-recording-overlay-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: vr-record-dot-pulse 1.2s ease-in-out infinite;
}
.vr-protected-recording-overlay-label {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vr-protected-recording-overlay-stop {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}
.vr-protected-recording-overlay-stop:hover,
.vr-protected-recording-overlay-stop:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: none;
}
body.vr-record-all-join-active #vrClassroomSection.vr-record-highlight-whole .vr-stage3a-meta-row,
body.recording-active .vr-stage3a-meta-record-wrap {
  position: relative;
  z-index: 1;
}
@media (max-width: 720px) {
  .vr-stage3a-meta-record-wrap {
    justify-content: center;
  }
  .vr-record-meta-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}
.vr-step4-tool-record.is-recording-active {
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(127, 29, 29, 0.55);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35), 0 0 10px rgba(239, 68, 68, 0.28);
}
.vr-tool-record-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.vr-tool-record-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.45);
  flex-shrink: 0;
}
.vr-tool-record-dot.is-pulsing {
  animation: vr-record-dot-pulse 1.2s ease-in-out infinite;
}
.vr-step4-tool-record.is-recording-active .vr-step4-tool-label {
  color: #fecaca;
  font-variant-numeric: tabular-nums;
}
.vr-recording-save-modal {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  padding: 16px;
}
.vr-recording-save-modal[hidden] {
  display: none !important;
}
.vr-recording-save-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(2, 6, 23, 0.72);
  cursor: pointer;
}
.vr-recording-save-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(180deg, #111b31 0%, #0a1220 100%);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.55);
  padding: 0 0 16px;
}
.vr-recording-save-modal-head {
  padding: 14px 16px 8px;
  border-bottom: 1px solid rgba(71, 85, 105, 0.35);
}
.vr-recording-save-modal-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
}
.vr-recording-save-modal-text {
  margin: 0;
  padding: 14px 16px 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #cbd5e1;
}
.vr-recording-save-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px 0;
}
.vr-recording-save-btn {
  flex: 1 1 140px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.vr-recording-save-btn-primary {
  background: rgba(22, 163, 74, 0.94);
  border-color: rgba(74, 222, 128, 0.55);
  color: #fff;
}
.vr-recording-save-btn-secondary {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(100, 116, 139, 0.45);
  color: #e2e8f0;
}
body.vr-recording-save-modal-open {
  overflow: hidden;
}
body.vr-recording-mode-modal-open {
  overflow: hidden;
}
.vr-recording-mode-modal-card {
  width: min(100%, 520px);
}
.vr-recording-mode-options {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.vr-recording-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.85);
  background: rgba(248, 250, 252, 0.96);
  cursor: pointer;
}
.vr-recording-mode-option:has(input:checked) {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(254, 242, 242, 0.95);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.35);
}
.vr-recording-mode-option input {
  margin-top: 3px;
  flex-shrink: 0;
}
.vr-recording-mode-option-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vr-recording-mode-option-title {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
}
.vr-recording-mode-option-desc {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  line-height: 1.35;
}
.vr-recording-mode-option-detail {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.45;
}
body.vr-transfer-owner-modal-open {
  overflow: hidden;
}
.vr-transfer-owner-modal-card {
  width: min(100%, 640px);
  max-height: min(88vh, 760px);
  overflow: auto;
}
.vr-transfer-owner-sections {
  display: grid;
  gap: 14px;
  margin: 0 0 14px;
}
.vr-transfer-owner-section-title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #334155;
  text-transform: uppercase;
}
.vr-transfer-owner-list {
  display: grid;
  gap: 8px;
}
.vr-transfer-owner-empty {
  color: #b45309;
  font-weight: 700;
}
.vr-transfer-owner-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(248, 250, 252, 0.98);
  text-align: left;
  cursor: pointer;
}
.vr-transfer-owner-card:hover,
.vr-transfer-owner-card:focus-visible {
  border-color: rgba(59, 130, 246, 0.45);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.vr-transfer-owner-card.is-selected {
  border-color: rgba(22, 163, 74, 0.55);
  background: rgba(240, 253, 244, 0.98);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.28);
}
.vr-transfer-owner-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  background: #e2e8f0;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}
.vr-transfer-owner-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vr-transfer-owner-card-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.vr-transfer-owner-card-name {
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
}
.vr-transfer-owner-card-role,
.vr-transfer-owner-card-meta,
.vr-transfer-owner-card-status {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  line-height: 1.35;
}
.vr-transfer-owner-card-status {
  color: #15803d;
}
.vr-transfer-owner-card-action {
  font-size: 11px;
  font-weight: 900;
  color: #1d4ed8;
  white-space: nowrap;
}
.vr-transfer-owner-actions {
  flex-wrap: wrap;
}
body.vr-online-class-exit-modal-open,
body.bs-ovc-owner-exit-modal-open {
  overflow: hidden;
}
.vr-recording-save-btn-danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}
.vr-recording-save-btn-danger:hover:not(:disabled),
.vr-recording-save-btn-danger:focus-visible:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
}
body.bs-ovc-ui1-shell .vr-online-class-exit-modal .vr-recording-save-modal-card,
body.bs-ovc-ui1-shell .bs-ovc-owner-exit-modal .vr-recording-save-modal-card {
  max-width: min(100%, 360px);
  margin: 0 auto;
  border-radius: 18px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
body.bs-ovc-ui1-shell .bs-ovc-owner-exit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.bs-ovc-ui1-shell .bs-ovc-exit-modal-card .vr-recording-save-modal-text {
  font-size: 0.9rem;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .vr-recording-save-modal-actions {
    flex-direction: column;
  }
  .vr-recording-save-btn {
    flex-basis: auto;
    width: 100%;
  }
}
.vr-stage3a-teacher-accent {
  color: #4ade80;
  font-weight: 900;
}
.vr-stage3a-board-grid {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(420px, 1.25fr);
  gap: 12px;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
  height: clamp(300px, 42vh, 420px);
  max-height: 420px;
}
.vr-stage3a-teacher-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #0b1324;
  border: 1px solid rgba(71, 85, 105, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  min-height: 0;
}
.vr-stage3a-pin-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: not-allowed;
  opacity: 0.92;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}
.vr-stage3a-teacher-feed {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 36px 14px 44px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #111b31 0%, #0a1220 100%);
}
/* VR-SPOTLIGHT — Current Group Selected Participant Spotlight Video Area */
.vr-spotlight-video-card .vr-spotlight-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #bfdbfe;
  background: rgba(37, 99, 235, 0.28);
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.vr-spotlight-feed {
  position: relative;
  overflow: hidden;
}
.vr-spotlight-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0a1220;
  z-index: 1;
}
.vr-spotlight-feed.has-live-preview {
  padding: 0;
  display: block;
}
.vr-spotlight-feed.has-live-preview .vr-spotlight-avatar-wrap,
.vr-spotlight-feed.has-live-preview .vr-spotlight-camera-off,
.vr-spotlight-feed.has-live-preview .vr-spotlight-preview-note {
  display: none;
}
.vr-step4-tool-btn.is-muted {
  opacity: 0.78;
  background: rgba(30, 41, 59, 0.55);
  border-color: rgba(100, 116, 139, 0.35);
  color: #94a3b8;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-btn.is-active {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(74, 222, 128, 0.45);
  color: #bbf7d0;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-btn.is-active .vr-step4-tool-icon {
  position: relative;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-btn.is-active .vr-step4-tool-icon::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.85);
}
.vr-spotlight-avatar-wrap {
  display: grid;
  place-items: center;
}
.vr-spotlight-avatar,
.vr-spotlight-avatar-img {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(145deg, rgba(30, 58, 95, 0.95), rgba(15, 39, 68, 0.95));
  color: #e2e8f0;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}
.vr-spotlight-camera-off,
.vr-spotlight-preview-note {
  margin: 10px 0 0;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  line-height: 1.35;
  max-width: 92%;
}
.vr-spotlight-meta {
  flex: 0 0 auto;
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(71, 85, 105, 0.35);
  background: rgba(8, 16, 34, 0.55);
}
.vr-spotlight-name {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vr-spotlight-role {
  margin: 2px 0 0;
  font-size: 10px;
  font-weight: 600;
  color: #93c5fd;
  line-height: 1.2;
}
.vr-spotlight-media {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.vr-spotlight-media-icon {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  border-radius: 6px;
}
.vr-spotlight-mic.is-on { color: #4ade80; }
.vr-spotlight-mic.is-off { color: #f87171; }
.vr-spotlight-cam.is-on { color: #60a5fa; }
.vr-spotlight-cam.is-off { color: #94a3b8; }
body.vr-ref-ui .vr-participant-clean-row.is-spotlight-clickable {
  cursor: pointer;
}
body.vr-ref-ui .vr-participant-clean-row.is-spotlight-clickable:hover {
  background: rgba(37, 99, 235, 0.08);
}
body.vr-ref-ui .vr-participant-clean-row.is-spotlight-selected {
  background: rgba(37, 99, 235, 0.14);
  box-shadow: inset 3px 0 0 #60a5fa;
}
body.vr-ref-ui .vr-participant-clean-row.is-spotlight-selected.is-you {
  background: rgba(37, 99, 235, 0.18);
}
.vr-stage3a-teacher-feed .vr-step1-placeholder-icon {
  width: 64px;
  height: 64px;
  font-size: 30px;
  margin-bottom: 0;
  background: rgba(37, 99, 235, 0.18);
}
.vr-stage3a-nameplate {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 20px);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr-stage3a-nameplate::after {
  content: '🎤';
  flex-shrink: 0;
  font-size: 11px;
  filter: hue-rotate(70deg) saturate(1.4);
}
.vr-stage3a-lesson-board {
  position: relative;
  display: block;
  height: 100%;
  max-height: 100%;
  padding: 0;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-radius: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #0f172a;
}
.vr-stage3a-presenting-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.95);
  border: 1px solid rgba(134, 239, 172, 0.45);
  color: #ecfdf5;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
}
.vr-stage3a-presenting-badge::before {
  content: '🖥️';
  font-size: 12px;
}
.vr-stage3a-board-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 40px 14px 46px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.vr-stage3a-board-head {
  flex: 0 0 auto;
  margin-bottom: 6px;
  min-width: 0;
}
.vr-stage3a-board-title {
  margin: 0 0 2px;
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vr-stage3a-board-subject {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  line-height: 1.35;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vr-stage3a-board-room-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 8px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  min-width: 0;
}

/* VR-LESSON-BOARD-HIDE-ROOM — hide Protected Room card, expand class room area */
body.vr-ref-ui .vr-stage3a-lesson-board .vr-lesson-board-room-card,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-room-line.bs-hidden-ui {
  display: none !important;
}
body.vr-ref-ui .vr-stage3a-lesson-board.vr-protected-board-layout,
body.vr-ref-ui .vr-stage3a-lesson-board {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-surface,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-board-surface {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
/* VR-PROTECTED-ROOM-FULL-AREA — board canvas fills boundary; title floats as overlay */
body.vr-ref-ui .vr-stage3a-lesson-board.vr-protected-board-layout .vr-protected-board-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(165deg, #e3e9f0 0%, #d8e0ea 46%, #e6ebf2 100%);
  border: 1px solid rgba(148, 163, 184, 0.34);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 8px 20px rgba(15, 23, 42, 0.1);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-board-canvas,
body.vr-ref-ui .vr-stage3a-lesson-board.vr-protected-board-layout .vr-stage3a-video-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-radius: 14px;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-board-title-overlay,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-board-top-zone,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-top-zone {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  flex: none;
  width: auto;
  max-width: min(74%, 300px);
  min-width: 0;
  margin: 0;
  padding: 3px 6px 4px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
pointer-events: none;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-protected-room-pdf-open .vr-protected-board-title-overlay {
  opacity: 0;
  visibility: hidden;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-protected-room-pdf-open .vr-protected-board-floating-toolbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-spotlight-all-view-active .vr-protected-board-title-overlay,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-spotlight-all-view-active .vr-protected-board-floating-toolbar,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-spotlight-all-view-active .video-room-embed-shell {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-presenting-badge {
  position: static;
  top: auto;
  left: auto;
  margin: 0 0 2px;
  padding: 2px 6px;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  box-shadow: 0 3px 8px rgba(22, 163, 74, 0.22);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-presenting-badge::before {
  font-size: 8px;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-head {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  min-width: 0;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-title,
body.vr-ref-ui .vr-stage3a-lesson-board #vcRoomTitle {
  margin: 0 0 1px;
  padding-right: 2px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: #f8fafc;
  -webkit-line-clamp: 1;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-board-subject,
body.vr-ref-ui .vr-stage3a-lesson-board #vrStageBoardSubject {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.25;
  color: #cbd5e1;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}
.vr-classroom-view-mode-status {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.85);
  background: rgba(255, 255, 255, 0.88);
}
.vr-live-class-view-maximize-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.vr-live-class-view-maximize-btn:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}
.vr-live-class-view-maximize-btn.is-active {
  color: #1d4ed8;
  border-color: rgba(59, 130, 246, 0.55);
  background: rgba(239, 246, 255, 0.95);
}
.vr-live-class-view-maximize-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.vr-live-class-view-maximize-icon {
  font-size: 13px;
  line-height: 1;
}
.vr-live-class-view-maximize-label {
  font-size: 11px;
  font-weight: 800;
}
.vr-live-class-view-maximize-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12999;
  background: rgba(2, 6, 23, 0.72);
  display: none;
}
.vr-live-class-view-maximize-backdrop:not([hidden]) {
  display: block;
}
body.bs-live-class-view-maximized {
  overflow: hidden;
}
body.bs-live-class-view-maximized #vcRoomBox.bs-live-class-view-maximized {
  position: fixed;
  inset: 0;
  z-index: 13000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
body.bs-live-class-view-maximized #vcRoomBox.bs-live-class-view-maximized .vr-protected-room-content-stage {
  flex: 1 1 auto;
  min-height: 0;
}
body.bs-live-class-view-maximized #vcRoomBox.bs-live-class-view-maximized #vrProtectedRoomContentScroll {
  overflow: hidden;
}
body.bs-live-class-view-maximized #vcRoomBox.bs-live-class-view-maximized .vr-protected-spotlight-all-view:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
}
.vr-classroom-view-mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #0f172a;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
}
.vr-classroom-view-mode-status.is-mode-spotlight .vr-classroom-view-mode-badge {
  color: #1e3a8a;
  background: rgba(219, 234, 254, 0.95);
  border-color: rgba(147, 197, 253, 0.8);
}
.vr-classroom-view-mode-status.is-mode-pdf .vr-classroom-view-mode-badge {
  color: #78350f;
  background: rgba(254, 243, 199, 0.95);
  border-color: rgba(251, 191, 36, 0.55);
}
.vr-classroom-view-mode-status.is-mode-screen-share .vr-classroom-view-mode-badge {
  color: #14532d;
  background: rgba(220, 252, 231, 0.95);
  border-color: rgba(74, 222, 128, 0.45);
}
.vr-main-board-screen-share-remote {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #334155 100%);
}
.vr-main-board-screen-share-remote:not([hidden]) {
  display: flex;
}
.vr-main-board-screen-share-remote-inner {
  max-width: 320px;
  text-align: center;
  color: #e2e8f0;
}
.vr-main-board-screen-share-remote-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}
.vr-main-board-screen-share-remote-title {
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}
.vr-main-board-screen-share-remote-note {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.92);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-scroll {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-scroll::-webkit-scrollbar {
  width: 10px;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-scroll::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.58);
  border-radius: 999px;
  border: 2px solid rgba(226, 232, 240, 0.35);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.72);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-room-content-zoom-wrap {
  width: 100%;
  min-height: 0;
  transform-origin: top center;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-spotlight-all-view-active .vr-protected-room-content-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-embed-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-fallback-panel,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .vc2-jitsi-frame-wrap {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-embed-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  border-radius: 14px;
}
body.vr-ref-ui .vr-stage3a-lesson-board.vr-protected-board-layout .vr-stage3a-video-stage .video-room-embed-shell {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  background: linear-gradient(160deg, #edf1f5 0%, #e3e9f0 52%, #eef2f6 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-fallback-panel {
  display: grid;
  place-items: center;
  align-content: center;
  padding: 52px 16px 68px;
  min-height: 0;
  height: 100%;
  height: 100%;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-fallback-stack {
  gap: 10px;
  max-height: 100%;
  overflow: hidden;
  justify-content: center;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-fallback-title {
  display: block;
  margin: 0;
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 700;
  color: rgba(148, 163, 184, 0.62);
  text-align: center;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-fallback-icon {
  width: 68px;
  height: 68px;
  font-size: 30px;
  border-radius: 16px;
  opacity: 0.5;
}
.vr-stage3a-board-room-line small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.vr-stage3a-board-room-line strong {
  font-size: 13px;
  font-weight: 900;
  color: #1e293b;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vr-stage3a-video-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.vr-stage3a-video-stage.video-room-main-stage.vr-step3-jitsi-stage {
  min-height: 0 !important;
}
.vr-stage3a-video-stage .video-room-embed-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: linear-gradient(160deg, #edf1f5 0%, #e3e9f0 52%, #eef2f6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.vr-stage3a-video-stage .video-room-fallback-panel {
  overflow: hidden;
  padding: 20px 16px;
}
.vr-stage3a-video-stage .video-room-fallback-stack {
  max-width: 100%;
  gap: 6px;
}
.vr-stage3a-video-stage .video-room-fallback-title {
  color: #1e293b;
  font-size: 14px;
  margin: 0;
}
.vr-stage3a-video-stage .video-room-fallback-subtitle {
  display: none;
}
.vr-stage3a-video-stage .video-room-fallback-room-block {
  display: none;
}
.vr-stage3a-video-stage .video-room-fallback-icon {
  width: 52px;
  height: 52px;
  font-size: 24px;
  border-radius: 14px;
  margin-bottom: 0;
}
.vr-stage3a-video-stage .video-room-fallback-room-name {
  color: #0f172a;
  font-size: 12px;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vr-stage3a-annotate-bar,
.vr-protected-board-floating-toolbar {
  position: absolute;
  right: 50%;
  bottom: 22px;
  left: auto;
  transform: translateX(50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(44, 44, 46, 0.94);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
pointer-events: auto;
}
.vr-stage3a-annotate-bar .vr-board-tool-btn,
.vr-protected-board-floating-toolbar .vr-board-tool-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #e2e8f0;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.vr-stage3a-annotate-bar .vr-board-tool-btn:hover:not(:disabled),
.vr-protected-board-floating-toolbar .vr-board-tool-btn:hover:not(:disabled) {
  background: rgba(71, 85, 105, 0.55);
}
.vr-stage3a-annotate-bar .vr-board-tool-btn.is-active,
.vr-protected-board-floating-toolbar .vr-board-tool-btn.is-active {
  background: rgba(59, 130, 246, 0.22);
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.35);
}
.vr-stage3a-annotate-bar .vr-board-tool-btn.is-tool-muted,
.vr-protected-board-floating-toolbar .vr-board-tool-btn.is-tool-muted,
.vr-stage3a-annotate-bar .vr-board-tool-btn:disabled,
.vr-protected-board-floating-toolbar .vr-board-tool-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.vr-board-tool-icon {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  line-height: 0;
}
.vr-board-tool-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  pointer-events: none;
}
.vr-board-tool-zoom {
  width: 28px !important;
  height: 28px !important;
}
.vr-board-tool-zoom-glyph {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: #e2e8f0;
}
.vr-board-tool-zoom-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #cbd5e1;
  -webkit-user-select: none;user-select: none
}
.vr-board-tool-icon-text {
  width: 18px;
  height: 18px;
}
.vr-board-tool-btn-stop,
.vr-stage3a-annotate-stop {
  background: rgba(220, 38, 38, 0.92) !important;
  border-radius: 8px !important;
}
.vr-board-tool-btn-stop:hover:not(:disabled),
.vr-stage3a-annotate-stop:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.96) !important;
}

/* VR-PDF-UPLOAD-VIEWER — Protected Online Class Room local PDF preview */
.video-room-embed-shell.vr-pdf-viewer-active {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: inset 0 0 0 1px rgba(203, 213, 225, 0.65);
  contain: none;
}
.video-room-embed-shell.vr-pdf-viewer-active #vcRoomPlaceholder,
.video-room-embed-shell.vr-pdf-viewer-active #vcJitsiEmbedLoading,
.video-room-embed-shell.vr-pdf-viewer-active #vcJitsiEmbedError,
.video-room-embed-shell.vr-pdf-viewer-active #vcJitsiFrameWrap {
  display: none !important;
}
.vr-protected-pdf-viewer {
  display: none;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background: #ffffff;
  border-radius: 0 0 12px 12px;
}
.video-room-embed-shell.vr-pdf-viewer-active .vr-protected-pdf-viewer {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  height: 100%;
  max-height: 100%;
}
.vr-protected-pdf-viewer.is-open,
.video-room-embed-shell.vr-pdf-viewer-active .vr-protected-pdf-viewer:not([hidden]) {
  display: flex !important;
}
.vr-protected-pdf-viewer.is-empty .vr-protected-pdf-viewer-actions .vr-protected-pdf-btn:not(.vr-protected-pdf-btn-close) {
  opacity: 0.45;
  pointer-events: none;
}
.vr-protected-pdf-viewer.is-empty .vr-protected-pdf-viewer-name {
  color: #64748b;
}
.vr-protected-pdf-viewer-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding: 6px 8px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  min-width: 0;
}
.vr-protected-pdf-viewer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  flex: 1 1 180px;
}
.vr-protected-pdf-viewer-name {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  max-width: min(240px, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr-protected-pdf-viewer-page {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}
.vr-protected-pdf-viewer-page-note {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.3;
}
.vr-protected-pdf-viewer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
}
.vr-protected-pdf-btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
}
.vr-protected-pdf-btn:hover:not(:disabled) {
  background: #e2e8f0;
  border-color: #94a3b8;
}
.vr-protected-pdf-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.vr-protected-pdf-btn-close {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}
.vr-protected-pdf-btn-close:hover:not(:disabled) {
  background: #fecaca;
}
.vr-protected-pdf-zoom-label {
  min-width: 38px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  color: #334155;
}
.vr-protected-pdf-viewer-body,
.bs-classroom-pdf-view,
.vr-protected-pdf-viewer-body.bs-classroom-pdf-view {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: inherit;
}
.vr-protected-pdf-viewer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  padding: 8px 8px 12px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
}
.vr-protected-pdf-viewer-scroll::-webkit-scrollbar {
  width: 8px;
}
.vr-protected-pdf-viewer-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 999px;
}
.vr-protected-pdf-viewer-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}
.vr-protected-pdf-viewer-scroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.vr-protected-pdf-viewer-zoom-wrap {
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  transform-origin: top center;
  position: relative;
}
.vr-protected-pdf-viewer-zoom-wrap.has-pdf-preview {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
}
.vr-protected-pdf-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  margin: 0;
  padding: 18px 16px;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}
.vr-protected-pdf-viewer-zoom-wrap.has-pdf-preview .vr-protected-pdf-empty {
  display: none;
}
.vr-protected-pdf-embed,
.vr-protected-pdf-object {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  flex: 1 1 auto;
}
.vr-protected-pdf-frame,
.bs-online-class-pdf-frame,
.bs-classroom-pdf-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  border: 0;
  border-radius: inherit;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  flex: 1 1 auto;
}
.vr-protected-pdf-object {
  display: none;
}
.vr-protected-pdf-frame-fallback {
  display: none;
}
.vr-protected-pdf-viewer-zoom-wrap.use-embed-primary .vr-protected-pdf-embed {
  display: block;
}
.vr-protected-pdf-viewer-zoom-wrap.use-embed-primary .vr-protected-pdf-frame-fallback,
.vr-protected-pdf-viewer-zoom-wrap.use-embed-primary .vr-protected-pdf-object {
  display: none;
}
.vr-protected-pdf-viewer-zoom-wrap.use-iframe-fallback .vr-protected-pdf-embed,
.vr-protected-pdf-viewer-zoom-wrap.use-iframe-fallback .vr-protected-pdf-object {
  display: none;
}
.vr-protected-pdf-viewer-zoom-wrap.use-iframe-fallback .vr-protected-pdf-frame-fallback {
  display: block;
}
.vr-protected-pdf-viewer-zoom-wrap.use-object-fallback .vr-protected-pdf-embed,
.vr-protected-pdf-viewer-zoom-wrap.use-object-fallback .vr-protected-pdf-frame-fallback {
  display: none;
}
.vr-protected-pdf-viewer-zoom-wrap.use-object-fallback .vr-protected-pdf-object {
  display: block;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-protected-room-pdf-open {
  overflow: hidden;
  min-height: 0;
  max-height: 100%;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage.vr-protected-room-pdf-open .vr-protected-room-content-stage {
  min-height: min(52vh, 480px);
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-video-stage .video-room-embed-shell.vr-pdf-viewer-active {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  height: 100%;
  overflow: hidden;
}

/* VR-SPOTLIGHT-ALL-PROTECTED-ROOM — toggle participants grid inside Protected Room */
.vr-protected-spotlight-all-view {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 55%, #f1f5f9 100%);
  border: 1px solid #dbe3f0;
}
body.vr-ref-ui .vr-stage3a-video-stage.vr-spotlight-all-view-active .vr-protected-spotlight-all-view {
  display: flex;
}
.vr-protected-spotlight-all-head {
  flex: 0 0 auto;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(203, 213, 225, 0.85);
  background: rgba(255, 255, 255, 0.82);
}
.vr-protected-spotlight-all-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
}
.vr-protected-spotlight-all-meta-line {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  line-height: 1.35;
}
.vr-protected-spotlight-all-total {
  color: #1d4ed8;
}
.vr-protected-spotlight-all-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}
.vr-protected-spotlight-all-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  min-width: 0;
}
@media (max-width: 640px) {
  .vr-protected-spotlight-all-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
  }
  .vr-protected-spotlight-all-scroll {
    max-height: min(56vh, 420px);
  }
}
.vr-protected-spotlight-all-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.vr-protected-spotlight-all-media-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 96px;
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 55%, #334155 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vr-protected-spotlight-all-media-stage.is-cam-off {
  background: linear-gradient(160deg, #e2e8f0 0%, #f1f5f9 100%);
}
.vr-protected-spotlight-all-live-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  box-sizing: border-box;
}
.vr-protected-spotlight-all-live-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(220, 38, 38, 0.92);
  border: 1px solid rgba(254, 202, 202, 0.45);
}
.vr-protected-spotlight-all-live-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.vr-protected-spotlight-all-live-watermark {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
  opacity: 0.72;
}
.vr-protected-spotlight-all-live-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.vr-protected-spotlight-all-live-note {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: rgba(226, 232, 240, 0.92);
  overflow-wrap: anywhere;
}
.vr-protected-spotlight-all-cam-off-badge {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  color: #475569;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(203, 213, 225, 0.9);
}
.vr-protected-spotlight-all-avatar {
  flex-shrink: 0;
  transform: scale(1.15);
}
.vr-protected-spotlight-all-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  min-width: 0;
  text-align: center;
  padding: 8px 8px 10px;
  box-sizing: border-box;
}
.vr-protected-spotlight-all-card-name {
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vr-protected-spotlight-all-card-role {
  font-size: 10px;
  font-weight: 800;
  color: #334155;
  line-height: 1.25;
}
.vr-protected-spotlight-all-card-detail {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.vr-protected-spotlight-all-card-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.vr-protected-spotlight-all-media-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
}
.vr-protected-spotlight-all-media-icon.is-on {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(220, 252, 231, 0.95);
}
.vr-protected-spotlight-all-media-icon.is-off {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(241, 245, 249, 0.95);
  opacity: 0.88;
}
.vr-protected-spotlight-all-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.2;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
}
.vr-protected-spotlight-all-status-pill.is-on {
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(220, 252, 231, 0.9);
  color: #166534;
}
.vr-protected-spotlight-all-status-pill.is-off {
  border-color: rgba(148, 163, 184, 0.55);
  background: rgba(241, 245, 249, 0.95);
  color: #64748b;
}
.vr-protected-spotlight-all-empty {
  margin: 0;
  padding: 24px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

/* STEP 4.1G — Spotlight View owner + selected accounts */
.vr-spotlight-section-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #93c5fd;
}
.vr-spotlight-owner-section,
.vr-spotlight-selected-section,
.vr-spotlight-owner-select-section {
  margin-bottom: 14px;
}
.vr-spotlight-owner-card-wrap {
  max-width: 320px;
}
.vr-spotlight-selected-grid {
  margin-top: 4px;
}
.vr-spotlight-selected-empty {
  margin-top: 8px;
}
.vr-protected-spotlight-all-card.is-owner-card {
  border-color: rgba(167, 139, 250, 0.45);
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.18);
}
.vr-protected-spotlight-all-card.is-spotlight-selected-card {
  border-color: rgba(74, 222, 128, 0.35);
}
.vr-protected-spotlight-all-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.vr-protected-spotlight-all-status-pill.is-owner {
  color: #ede9fe;
  background: rgba(91, 33, 182, 0.55);
  border-color: rgba(167, 139, 250, 0.45);
}
.vr-protected-spotlight-all-status-pill.is-spotlight {
  color: #dcfce7;
  background: rgba(22, 101, 52, 0.55);
  border-color: rgba(74, 222, 128, 0.45);
}
.vr-spotlight-select-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.vr-spotlight-select-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #e2e8f0;
  cursor: pointer;
}
.vr-spotlight-select-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
}
.vr-spotlight-select-text {
  line-height: 1.35;
}
body.vr-ref-ui .vr-stage3a-teaching-toolbar #vrToolPdfUploadBtn {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(120, 53, 15, 0.28);
}
.vr-stage3a-lesson-legacy {
  display: none !important;
}
.vr-stage3a-lesson-board .video-class-action-row,
.vr-stage3a-lesson-board .video-class-notice,
.vr-stage3a-lesson-board .vc-step3-legacy-controls-wrap {
  display: none !important;
}
.vr-stage3a-toolbar-wrap {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 2px;
  padding-bottom: 12px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
/* Online Class Control Bar / Bottom Teaching Toolbar — compact icon view */
.vr-stage3a-teaching-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-evenly;
  gap: 4px 3px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.vr-stage3a-teaching-toolbar .vr-step4-tool-btn {
  flex: 1 1 52px;
  max-width: 68px;
  min-width: 0;
  min-height: 46px;
  padding: 4px 5px;
  gap: 1px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.82);
}
.vr-stage3a-teaching-toolbar .vr-step4-tool-icon {
  font-size: 14px;
  line-height: 1;
}
.vr-stage3a-teaching-toolbar .vr-step4-tool-label {
  font-size: 9px;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.vr-stage3a-teaching-toolbar #vrToolMicBtn {
  position: relative;
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(6, 78, 59, 0.35);
}
.vr-stage3a-teaching-toolbar #vrToolMicBtn::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.65);
}
.vr-stage3a-teaching-toolbar #vrToolCameraBtn {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(30, 58, 138, 0.32);
}
.vr-stage3a-teaching-toolbar #vrToolShareBtn {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(6, 78, 59, 0.28);
}
.vr-stage3a-teaching-toolbar #vrToolShareBtn.is-active,
body.vr-ref-ui .vr-teacher-column-toolbar #vrToolShareBtn.is-active {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(74, 222, 128, 0.55);
  color: #bbf7d0;
}
.vr-main-board-screen-share {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: #020617;
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.vr-main-board-screen-share-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: inherit;
}
.video-room-embed-shell.vr-main-board-screen-share-active,
#vcRoomBox.vr-main-board-screen-share-active .video-room-embed-shell {
  min-height: 100%;
}
#vcRoomBox.vr-main-board-screen-share-active .video-room-placeholder,
#vcRoomBox.vr-main-board-screen-share-active .video-room-fallback-panel:not(.vr-main-board-screen-share) {
  display: none !important;
}
#vrProtectedBoardTitleOverlay.is-screen-sharing-active .vr-stage3a-presenting-badge {
  display: inline-flex;
}
#vcRoomBox.vr-main-board-screen-share-active .vr-stage3a-board-title,
#vcRoomBox.vr-main-board-screen-share-active .vr-stage3a-board-subject {
  opacity: 0.45;
}
.vr-stage3a-teaching-toolbar #vrToolPeopleBtn {
  position: relative;
}
.vr-stage3a-teaching-toolbar .vr-stage3a-tool-badge {
  position: absolute;
  top: 4px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-weight: 900;
  color: #fff;
  background: #2563eb;
  border: 1px solid rgba(191, 219, 254, 0.5);
  line-height: 1;
}
.vr-stage3a-leave-btn {
  flex: 0 0 auto !important;
  max-width: 72px !important;
  margin-left: 3px;
  border-color: rgba(248, 113, 113, 0.55) !important;
  background: rgba(185, 28, 28, 0.88) !important;
  color: #fff !important;
}
.vr-stage3a-leave-btn:hover,
.vr-stage3a-leave-btn:focus-visible {
  background: rgba(220, 38, 38, 0.95) !important;
  border-color: rgba(252, 165, 165, 0.65) !important;
}
.vr-stage3a-toolbar-wrap .vr-step4-toolbar-toast {
  white-space: normal;
  text-align: center;
  max-width: min(92vw, 480px);
}

/* VR-COMPACT-TOOLBAR — Bottom Teaching Toolbar fits teacher-column yellow area */
body.vr-ref-ui .vr-stage3a-teacher-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
body.vr-ref-ui .vr-stage3a-teacher-column .vr-stage3a-teacher-card {
  flex: 1 1 auto;
  min-height: 0;
}
body.vr-ref-ui .vr-teacher-column-toolbar.vr-compact-bottom-toolbar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding: 0 0 4px;
  overflow: visible;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  padding: 7px 8px;
  border-radius: 12px;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar .vr-step4-tool-btn {
  flex: 0 0 calc((100% - 24px) / 5);
  width: auto;
  min-width: 52px;
  max-width: 62px;
  min-height: 54px;
  padding: 4px 3px;
  gap: 2px;
  border-radius: 10px;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar .vr-step4-tool-icon {
  font-size: 12px;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar .vr-step4-tool-label {
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-leave-btn {
  flex: 0 0 calc((100% - 24px) / 5) !important;
  width: auto !important;
  min-width: 52px !important;
  max-width: 62px !important;
  min-height: 54px !important;
  margin-left: 0;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-more-wrap {
  flex: 0 0 calc((100% - 24px) / 5);
  max-width: 62px;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-more-wrap .vr-step4-tool-btn {
  width: 100%;
  max-width: 100%;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-tool-badge {
  top: 3px;
  right: 3px;
  min-width: 13px;
  height: 13px;
  font-size: 8px;
}
body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-toolbar-toast {
  max-width: 100%;
  font-size: 11px;
}
body.vr-ref-ui .vr-stage3a-teaching-stage {
  padding-bottom: 14px;
}

body.vr-ref-ui .vr-polish-classroom-main .vr-stage3a-teacher-card {
  max-height: 100%;
}
body.vr-ref-ui .vr-stage3a-board-grid.vr-ref-stage-grid {
  grid-template-columns: minmax(300px, 0.75fr) minmax(420px, 1.25fr);
}
body.vr-ref-ui .vr-stage3a-lesson-board.vr-step1-lesson-panel {
  flex: none;
  display: block;
  height: 100%;
}
body.vr-ref-ui .vr-stage3a-teacher-card.vr-step1-teacher-panel {
  flex: none;
  max-height: 100%;
}
body.vr-ref-ui .vr-stage3a-teacher-column .vr-stage3a-teacher-card.vr-step1-teacher-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
body.vr-ref-ui .vr-stage3a-teacher-column .vr-stage3a-toolbar-wrap {
  overflow: visible;
}
body.vr-ref-ui .vr-polish-classroom-main .vr-stage3a-video-stage.vr-step3-jitsi-stage {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}
.vr-stage3a-outside-actions {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* VR-ROOM-HEIGHT — extend whole classroom room downward */
body.vr-ref-ui .vr-ref-main-stage.vr-polish-classroom-main {
  align-self: stretch;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body.vr-ref-ui .vr-stage3a-teaching-stage {
  flex: 1 1 auto;
  min-height: 0;
}
body.vr-ref-ui .vr-stage3a-board-grid {
  flex: 1 1 auto;
  height: auto;
  min-height: clamp(400px, 52vh, 540px);
  max-height: none;
  align-items: stretch;
}
body.vr-ref-ui .vr-stage3a-lesson-board.vr-protected-board-layout {
  align-self: stretch;
}
body.vr-ref-ui .vr-stage3a-lesson-board .vr-protected-board-floating-toolbar,
body.vr-ref-ui .vr-stage3a-lesson-board .vr-stage3a-annotate-bar {
  right: 50%;
  bottom: 26px;
  transform: translateX(50%);
}
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-ref-sidebar,
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-polish-classroom-sidebar {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-step5-participants-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.vr-ref-ui .vr-ref-classroom.vr-chat-hidden .vr-step5-participant-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 140px;
}

/* VR-LEFT-CHAT — Class Chat Box in left bottom empty panel */
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-ref-sidebar,
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-polish-classroom-sidebar {
  align-self: stretch;
  max-width: none;
  width: 100%;
  min-height: 0;
  height: 100%;
  gap: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-step5-participants-panel,
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-participants-clean-panel,
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) #vrParticipantsPanel {
  flex: 0 1 auto;
  min-height: 0;
  max-height: min(36vh, 300px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-step5-participant-list,
body.vr-ref-ui .vr-ref-classroom:not(.vr-chat-hidden) .vr-participants-clean-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.34) transparent;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box .vr-step6-chat-room-label {
  margin: 6px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box .vr-step6-chat-school-label {
  display: none;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box .vr-step6-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  margin-top: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box .vr-step6-chat-helper {
  flex: 0 0 auto;
  margin-top: 6px;
  font-size: 10px;
  color: #64748b;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box .vr-step6-chat-compose {
  flex: 0 0 auto;
  margin-top: 8px;
}
body.vr-ref-ui #vrClassChatPanel.vr-left-bottom-chat-box.is-blocked .vr-step6-chat-school-label {
  display: block;
}

/* VR-CLASS-CHAT-POLISH — Class Chat Box professional dark glass UI */
body.vr-ref-ui #vrClassChatPanel.vr-class-chat-polish-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.62);
  border: 1px solid rgba(96, 165, 250, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 22px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-title-icon {
  font-size: 13px;
  line-height: 1;
  opacity: 0.92;
}
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-scope-label {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.02em;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-room-pill-wrap.bs-hidden-ui,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-room-pill-hidden,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-room-pill-wrap[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-room-pill-wrap {
  margin-top: 8px;
  min-width: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-room-pill {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.28);
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-head {
  flex: 0 0 auto;
  margin-bottom: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-messages {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 6px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(6, 12, 28, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.18);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
  display: flex;
  flex-direction: column;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-empty-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: 1 1 auto;
  min-height: 88px;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.42);
  border: 1px dashed rgba(148, 163, 184, 0.22);
  text-align: center;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-empty-card[hidden] {
  display: none !important;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-empty-icon {
  font-size: 16px;
  line-height: 1;
  opacity: 0.5;
}
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-empty {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-empty-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
  line-height: 1.35;
  max-width: 200px;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-message-list,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 88%;
  min-width: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item.is-self {
  align-self: flex-end;
  align-items: flex-end;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item.is-other {
  align-self: flex-start;
  align-items: flex-start;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  min-width: 0;
  padding: 0 2px;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-sender {
  font-size: 11px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-role {
  font-size: 9px;
  font-weight: 600;
  color: #93c5fd;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble {
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  min-width: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble.is-self {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.55), rgba(22, 163, 74, 0.42));
  border-color: rgba(96, 165, 250, 0.42);
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble.is-other {
  background: rgba(30, 41, 59, 0.82);
  border-color: rgba(148, 163, 184, 0.28);
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-text {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #f8fafc;
  line-height: 1.45;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  min-width: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item.is-self .vr-class-chat-bubble-foot {
  justify-content: flex-end;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item.is-other .vr-class-chat-bubble-foot {
  justify-content: flex-start;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-time {
  font-size: 9px;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.72);
  line-height: 1.2;
  white-space: nowrap;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-status {
  font-size: 9px;
  font-weight: 600;
  color: #93c5fd;
  line-height: 1.2;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-helper {
  flex: 0 0 auto;
  flex-shrink: 0;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.35;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-compose {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input-wrap {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input-wrap::before,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input-wrap::after {
  display: none !important;
  content: none !important;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input-wrap input,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  margin-top: 0 !important;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-left: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input::placeholder {
  color: #94a3b8;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input:focus,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input:focus-visible {
  outline: none;
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.14);
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-input:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(100, 116, 139, 0.28);
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-send-btn {
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid rgba(74, 222, 128, 0.42);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.82), rgba(22, 163, 74, 0.78));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-send-btn:hover:not(:disabled),
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-send-btn:focus-visible:not(:disabled) {
  filter: brightness(1.06);
  outline: none;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-send-btn:disabled {
  opacity: 1;
  cursor: not-allowed;
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(100, 116, 139, 0.34);
  color: #94a3b8;
  box-shadow: none;
}
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-compose.is-disabled .vr-class-chat-polish-input-wrap input,
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-compose.is-disabled .vr-class-chat-polish-input {
  opacity: 1;
}
@media (max-width: 720px) {
  body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-compose {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-compose.is-editing {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-send-btn {
    padding: 9px 12px;
  }
}

body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-compose.is-editing {
  grid-template-columns: minmax(0, 1fr) auto auto;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-edit-cancel-btn {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-edit-cancel-btn:hover,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-edit-cancel-btn:focus-visible {
  border-color: rgba(148, 163, 184, 0.5);
  outline: none;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item {
  position: relative;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-menu-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.55);
  color: #94a3b8;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item:hover .vr-class-chat-bubble-menu-btn,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-item:focus-within .vr-class-chat-bubble-menu-btn {
  opacity: 1;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-edited {
  font-size: 10px;
  font-style: italic;
  color: #94a3b8;
  opacity: 0.9;
}
.vr-class-chat-action-menu {
  position: fixed;
  z-index: 12050;
  min-width: 120px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.96);
  box-shadow: 0 10px 28px rgba(2, 6, 23, 0.45);
}
.vr-class-chat-action-menu[hidden] {
  display: none !important;
}
.vr-class-chat-action-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e2e8f0;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.vr-class-chat-action-item:hover,
.vr-class-chat-action-item:focus-visible {
  background: rgba(51, 65, 85, 0.72);
  outline: none;
}
.vr-class-chat-action-item[hidden] {
  display: none !important;
}

/* VR-CLASS-CHAT-SCROLL — fixed chat box height + internal message list scroll */
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-bubble-list,
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-message-list {
  flex: 0 0 auto;
  min-height: 0;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-messages::-webkit-scrollbar,
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-messages::-webkit-scrollbar {
  width: 6px;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-messages::-webkit-scrollbar-track,
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-messages::-webkit-scrollbar-thumb,
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-messages::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.45);
  border-radius: 999px;
}
body.vr-ref-ui #vrClassChatPanel .vr-class-chat-polish-messages::-webkit-scrollbar-thumb:hover,
body.vr-ref-ui #vrClassChatPanel .vr-step6-chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.55);
}

/* VR-PARTICIPANTS-CLEAN — Participants Panel clean reference list (dark theme) */
body.vr-ref-ui .vr-participants-clean-panel {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.18);
  padding: 0;
  overflow: hidden;
}
body.vr-ref-ui .vr-participants-clean-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  padding: 12px;
  border-radius: 14px;
  background: rgba(8, 16, 34, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
body.vr-ref-ui .vr-participants-clean-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
}
body.vr-ref-ui .vr-participants-clean-panel .vr-step5-title-count {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
}
body.vr-ref-ui .vr-participants-clean-panel .vr-step5-school-label {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #93c5fd;
  letter-spacing: 0.01em;
}
body.vr-ref-ui .vr-participants-clean-search {
  position: relative;
  display: block;
  margin-top: 8px;
}
body.vr-ref-ui .vr-participants-clean-search .vr-participants-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.55;
  pointer-events: none;
}
body.vr-ref-ui .vr-participants-clean-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border-radius: 999px;
  background: rgba(8, 16, 34, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.28);
  color: #e2e8f0;
  min-height: 36px;
  font-size: 12px;
  box-sizing: border-box;
}
body.vr-ref-ui .vr-participants-clean-search input::placeholder {
  color: #64748b;
}
body.vr-ref-ui .vr-participants-clean-search .vr-participants-search-icon {
  opacity: 0.7;
  color: #94a3b8;
}
body.vr-ref-ui .vr-participants-clean-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  overflow: hidden;
  padding: 6px 4px 2px;
  border-radius: 12px;
  background: rgba(8, 16, 34, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
}
body.vr-ref-ui .vr-participants-clean-empty {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
}
body.vr-ref-ui .vr-participants-clean-list {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.34) transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.vr-ref-ui .vr-participants-clean-list > .vr-step5-participant-list-item {
  list-style: none;
}
body.vr-ref-ui .vr-participants-clean-list > .vr-step5-participant-list-item:not(:last-child) .vr-participant-clean-row {
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
body.vr-ref-ui .vr-participant-clean-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 8px 2px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
body.vr-ref-ui button.vr-participant-clean-row {
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
body.vr-ref-ui .vr-participant-clean-row.is-you {
  background: rgba(37, 99, 235, 0.12);
}
body.vr-ref-ui .vr-participant-clean-avatar-wrap {
  position: relative;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}
body.vr-ref-ui .vr-participant-clean-avatar,
body.vr-ref-ui .vr-participant-clean-avatar-img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
body.vr-ref-ui .vr-participant-clean-avatar {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(30, 58, 95, 0.95), rgba(15, 39, 68, 0.95));
  color: #e2e8f0;
  font-size: 11px;
  font-weight: 800;
}
body.vr-ref-ui .vr-participant-clean-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid rgba(8, 16, 34, 0.95);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35);
}
body.vr-ref-ui .vr-participant-clean-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.vr-ref-ui .vr-participant-clean-name {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.vr-ref-ui .vr-participant-clean-role {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.vr-ref-ui .vr-participant-clean-host {
  flex: 0 1 auto;
  flex-shrink: 1;
  max-width: 56px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0.01em;
  color: #86efac;
  background: rgba(6, 78, 59, 0.35);
  border: 1px solid rgba(74, 222, 128, 0.35);
  line-height: 1.25;
  white-space: nowrap;
}
body.vr-ref-ui .vr-participant-clean-media {
  flex: 0 0 auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-left: auto;
  align-self: center;
}
body.vr-ref-ui .vr-participant-media-control-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 34px;
  max-width: 44px;
}
body.vr-ref-ui .vr-participant-media-status-label {
  display: block;
  width: 100%;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
}
body.vr-ref-ui .vr-participant-media-status-label.is-on {
  color: #93c5fd;
}
body.vr-ref-ui .vr-participant-media-status-label.is-off {
  color: #64748b;
}
body.vr-ref-ui .vr-participant-media-control-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.9));
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
body.vr-ref-ui .vr-participant-media-control-btn .vr-participant-media-icon-svg,
body.vr-ref-ui .vr-participant-media-control-btn .vr-participant-media-icon-svg svg {
  width: 16px;
  height: 16px;
  display: block;
}
body.vr-ref-ui .vr-participant-media-control-btn.is-on {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.52);
  background: linear-gradient(145deg, rgba(37, 99, 235, 0.34), rgba(15, 23, 42, 0.92));
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 3px 10px rgba(37, 99, 235, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.vr-ref-ui .vr-participant-media-control-btn.is-off {
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.34);
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.92));
}
body.vr-ref-ui .vr-participant-media-control-btn.is-self-control:not(:disabled):hover,
body.vr-ref-ui .vr-participant-media-control-btn.is-self-control:not(:disabled):focus-visible {
  transform: translateY(-1px);
  outline: none;
  border-color: rgba(125, 211, 252, 0.55);
}
body.vr-ref-ui .vr-participant-media-control-btn.is-readonly,
body.vr-ref-ui .vr-participant-media-control-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  border-style: dashed;
  border-color: rgba(100, 116, 139, 0.28);
  color: #64748b;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: none;
  filter: grayscale(0.25);
}
body.vr-ref-ui .vr-participant-media-control-btn.is-host-control:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.42);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.12), 0 3px 10px rgba(37, 99, 235, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
body.vr-ref-ui .vr-participant-media-control-btn.is-host-control:not(:disabled):hover,
body.vr-ref-ui .vr-participant-media-control-btn.is-host-control:not(:disabled):focus-visible {
  border-color: rgba(125, 211, 252, 0.58);
}
body.vr-ref-ui .vr-participant-media-control-btn.is-host-limited:not(:disabled) {
  opacity: 0.82;
  border-color: rgba(100, 116, 139, 0.34);
  cursor: pointer;
}
body.vr-ref-ui .vr-participant-media-control-btn.is-host-limited:not(:disabled):hover,
body.vr-ref-ui .vr-participant-media-control-btn.is-host-limited:not(:disabled):focus-visible {
  border-color: rgba(148, 163, 184, 0.48);
}
body.vr-ref-ui .vr-participant-clean-media-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: transparent;
  border: 0;
  display: inline-grid;
  place-items: center;
  opacity: 1;
}
body.vr-ref-ui .vr-participant-clean-media .vr-step5-media-mic.is-on {
  color: #60a5fa;
}
body.vr-ref-ui .vr-participant-clean-media .vr-step5-media-mic.is-off {
  color: #94a3b8;
}
body.vr-ref-ui .vr-participant-clean-media .vr-step5-media-cam.is-on {
  color: #60a5fa;
}
body.vr-ref-ui .vr-participant-clean-media .vr-step5-media-cam.is-off {
  color: #94a3b8;
  opacity: 0.9;
}
#vcJitsiFrameWrap iframe,
.vc2-jitsi-frame-wrap iframe {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
  display: block;
  background: #0b1220;
}
@media (max-width: 720px) {
  body.vr-ref-ui .vr-participant-clean-row {
    min-height: 60px;
    gap: 6px;
  }
  body.vr-ref-ui .vr-participant-media-control-btn {
    width: 40px;
    height: 40px;
  }
  body.vr-ref-ui .vr-participant-media-control-btn .vr-participant-media-icon-svg,
  body.vr-ref-ui .vr-participant-media-control-btn .vr-participant-media-icon-svg svg {
    width: 18px;
    height: 18px;
  }
  body.vr-ref-ui .vr-participant-media-control-item {
    min-width: 40px;
    max-width: 48px;
  }
  body.vr-ref-ui .vr-participant-media-status-label {
    font-size: 8px;
  }
  body.vr-ref-ui .vr-participant-clean-media {
    gap: 4px;
  }
}
body.vr-ref-ui .vr-participants-clean-view-all {
  flex: 0 0 auto;
  margin: 8px auto 2px;
  border: 0;
  background: transparent;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  padding: 4px 0 0;
  width: 100%;
}
body.vr-ref-ui .vr-participants-clean-view-all:hover,
body.vr-ref-ui .vr-participants-clean-view-all:focus-visible {
  color: #bfdbfe;
  outline: none;
  text-decoration: underline;
}
body.vr-ref-ui .vr-participants-clean-panel .vr-step5-participants-blocked,
body.vr-ref-ui .vr-participants-clean-panel .vr-step5-host-empty {
  margin-top: 8px;
  font-size: 11px;
}
body.vr-ref-ui .vr-participants-clean-panel .vr-participant-clean-row.vr-step5-participant-row {
  display: flex;
  grid-template-columns: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.vr-ref-ui .vr-participants-clean-panel .vr-participant-clean-row.is-host {
  background: transparent;
  border: 0;
}

/* VR-STAGE3B — Stage bottom spacing + action row layout */
body.vr-ref-ui .vr-ref-classroom {
  margin-bottom: 8px;
  padding-bottom: 18px;
}
body.vr-ref-ui .vr-stage3b-bottom-zone,
body.vr-ref-ui .vr-stage3a-outside-actions {
  margin-top: 26px;
  margin-bottom: 18px;
  padding-top: 0;
  gap: 12px;
}
body.vr-ref-ui .vr-stage3b-action-row,
body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  width: 100%;
}
body.vr-ref-ui .vr-stage3b-action-row button,
body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions button {
  flex: 1 1 150px;
  min-width: 140px;
  max-width: 100%;
  width: auto;
  min-height: 42px;
  border-radius: 12px;
  font-weight: 800;
}
body.vr-ref-ui .vr-stage3b-action-toast {
  margin: 4px auto 0;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  max-width: min(100%, 680px);
  overflow-wrap: anywhere;
  word-break: break-word;
  background: rgba(6, 78, 59, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.32);
  color: #047857;
}
body.vr-ref-ui .vr-stage3b-action-toast.is-error {
  background: rgba(127, 29, 29, 0.07);
  border-color: rgba(248, 113, 113, 0.35);
  color: #b91c1c;
}
body.vr-ref-ui .vr-stage3b-action-toast[hidden] {
  display: none !important;
}
body.vr-ref-ui:not(.bs-debug-mode-on) .vr-stage3b-bottom-zone #vcNoticeView {
  display: none !important;
}
body.vr-ref-ui .vr-stage3b-bottom-zone .vr-polish-notice {
  margin: 0;
}
/* VR-MEETING-FOOTER — Meeting Information Strip + Action Buttons Row */
.vr-meeting-footer-zone {
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 24px;
  overflow-x: hidden;
}
body.vr-ref-ui .vr-meeting-footer-zone {
  margin-top: 26px;
  gap: 16px;
}
body.vr-ref-ui .vr-meeting-info-strip,
body.vr-ref-ui #vrMeetingInfoSection.vr-polish-meeting-info,
body.vr-ref-ui .vr-polish-meeting-info {
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(11, 21, 48, 0.94) 0%, rgba(18, 38, 79, 0.9) 48%, rgba(15, 31, 61, 0.92) 100%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  box-shadow: 0 14px 32px rgba(8, 18, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.vr-ref-ui .vr-meeting-info-strip-head {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.vr-ref-ui .vr-meeting-info-strip-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
body.vr-ref-ui .vr-meeting-info-strip-cell {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  background: rgba(15, 31, 61, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.vr-ref-ui .vr-meeting-info-strip-cell small {
  display: block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: #94a3b8;
}
body.vr-ref-ui .vr-meeting-info-strip-cell strong {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  color: #f1f5f9;
  white-space: normal;
  writing-mode: horizontal-tb;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.vr-ref-ui .vr-meeting-info-strip-value-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  min-width: 0;
}
body.vr-ref-ui .vr-meeting-info-strip-value-row strong {
  flex: 1 1 auto;
  margin-top: 0;
  min-width: 0;
}
body.vr-ref-ui .vr-meeting-info-copy-btn {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(96, 165, 250, 0.28);
  border-radius: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: #cbd5e1;
  background: rgba(30, 58, 95, 0.65);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
body.vr-ref-ui .vr-meeting-info-copy-btn:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-info-copy-btn:focus-visible:not(:disabled) {
  background: rgba(37, 99, 235, 0.28);
  border-color: rgba(147, 197, 253, 0.45);
  color: #eff6ff;
  outline: none;
}
body.vr-ref-ui .vr-meeting-info-copy-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
body.vr-ref-ui .vr-meeting-info-strip-cell-room strong {
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.vr-ref-ui .vr-meeting-action-row-wrap {
  margin: 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(11, 18, 32, 0.94) 0%, rgba(21, 42, 74, 0.9) 55%, rgba(15, 31, 61, 0.92) 100%);
  border: 1px solid rgba(96, 165, 250, 0.24);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow-x: hidden;
}
body.vr-ref-ui .vr-meeting-action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
}
body.vr-ref-ui .vr-meeting-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  width: 100%;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
body.vr-ref-ui .vr-meeting-action-btn:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-action-btn:focus-visible:not(:disabled) {
  outline: none;
  transform: translateY(-1px);
}
body.vr-ref-ui .vr-meeting-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
body.vr-ref-ui .vr-meeting-action-icon {
  font-size: 16px;
  line-height: 1;
}
body.vr-ref-ui .vr-meeting-action-btn-open {
  color: #eff6ff;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  border-color: rgba(147, 197, 253, 0.45);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
body.vr-ref-ui .vr-meeting-action-btn-open:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-action-btn-open:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, #1e40af, #1d4ed8);
}
body.vr-ref-ui .vr-meeting-action-btn-end {
  color: #fff;
  background: linear-gradient(135deg, rgba(185, 28, 28, 0.94), rgba(153, 27, 27, 0.9));
  border-color: rgba(248, 113, 113, 0.42);
  box-shadow: 0 8px 20px rgba(127, 29, 29, 0.28);
}
body.vr-ref-ui .vr-meeting-action-btn-end:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-action-btn-end:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, rgba(153, 27, 27, 0.98), rgba(127, 29, 29, 0.95));
}
body.vr-ref-ui .vr-meeting-action-btn-leave {
  color: #fecdd3;
  background: rgba(30, 58, 95, 0.72);
  border-color: rgba(248, 113, 113, 0.35);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}
body.vr-ref-ui .vr-meeting-action-btn-leave:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-action-btn-leave:focus-visible:not(:disabled) {
  background: rgba(127, 29, 29, 0.42);
  border-color: rgba(248, 113, 113, 0.48);
}
body.vr-ref-ui .vr-meeting-action-btn-back {
  color: #e2e8f0;
  background: rgba(51, 65, 85, 0.72);
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}
body.vr-ref-ui .vr-meeting-action-btn-back:hover:not(:disabled),
body.vr-ref-ui .vr-meeting-action-btn-back:focus-visible:not(:disabled) {
  background: rgba(71, 85, 105, 0.88);
  border-color: rgba(191, 219, 254, 0.35);
}
body.vr-ref-ui .vr-meeting-footer-toast {
  margin: 10px 0 0;
  color: #cbd5e1;
}
body.vr-ref-ui .vr-step7-actions-blocked {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(127, 29, 29, 0.35);
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #fecaca;
}
body.vr-ref-ui .vr-step7-action-hint {
  display: none;
}
body.vr-ref-ui .vr-join-flow-preserve-btn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.vr-ref-ui .vr-legacy-outside-actions {
  display: none !important;
}
@media (max-width: 1100px) {
  body.vr-ref-ui .vr-meeting-info-strip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  body.vr-ref-ui .vr-meeting-info-strip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body.vr-ref-ui .vr-meeting-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  body.vr-ref-ui .vr-meeting-info-strip-grid {
    grid-template-columns: 1fr;
  }
  body.vr-ref-ui .vr-meeting-action-row {
    grid-template-columns: 1fr;
  }
}

body.vr-ref-ui .vr-polish-shell > .vr-polish-meeting-info,
body.vr-ref-ui #vrMeetingInfoSection.vr-polish-meeting-info {
  margin-top: 0;
}
@media (min-width: 1024px) {
  body.vr-ref-ui .vr-stage3b-action-row,
  body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions {
    flex-wrap: nowrap;
    justify-content: stretch;
  }
  body.vr-ref-ui .vr-stage3b-action-row button,
  body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions button {
    flex: 1 1 0;
    min-width: 0;
  }
}
@media (max-width: 1023px) {
  body.vr-ref-ui .vr-stage3b-action-row button,
  body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions button {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 132px;
  }
}
@media (max-width: 720px) {
  body.vr-ref-ui .vr-stage3b-bottom-zone,
  body.vr-ref-ui .vr-stage3a-outside-actions {
    margin-top: 18px;
    margin-bottom: 14px;
  }
  body.vr-ref-ui .vr-stage3b-action-row button,
  body.vr-ref-ui .vr-stage3a-outside-actions .vr-step1-primary-actions button {
    flex: 1 1 calc(50% - 8px);
    min-width: 128px;
  }
  body.vr-ref-ui #vrMeetingInfoSection.vr-polish-meeting-info {
    margin-top: 22px;
  }
}
@media (max-width: 1100px) {
  .vr-stage3a-board-grid {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
  }
  .vr-stage3a-teacher-card {
    height: clamp(200px, 30vh, 260px);
    max-height: 260px;
  }
  .vr-stage3a-lesson-board,
  .vr-stage3a-board-surface {
    height: clamp(280px, 38vh, 360px);
    max-height: 360px;
  }
}
@media (max-width: 720px) {
  .vr-stage3a-teaching-stage {
    padding: 12px;
    gap: 12px;
  }
  .vr-stage3a-meta-row {
    font-size: 12px;
    gap: 8px 10px;
  }
  .vr-stage3a-teaching-toolbar {
    justify-content: flex-start;
    gap: 6px;
    padding: 6px 8px;
  }
  .vr-stage3a-teaching-toolbar .vr-step4-tool-btn {
    flex: 0 0 auto;
    min-width: 50px;
    max-width: none;
    min-height: 44px;
  }
  .vr-stage3a-teaching-toolbar .vr-step4-tool-icon {
    font-size: 13px;
  }
  .vr-stage3a-leave-btn {
    margin-left: 0;
  }
  body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar {
    gap: 5px;
    padding: 6px 6px;
  }
  body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-teaching-toolbar .vr-step4-tool-btn,
  body.vr-ref-ui .vr-teacher-column-toolbar .vr-stage3a-leave-btn {
    flex: 0 0 calc((100% - 15px) / 4) !important;
    min-width: 48px !important;
    max-width: none !important;
    min-height: 50px !important;
  }
  body.vr-ref-ui .vr-teacher-column-toolbar .vr-step4-tool-more-wrap {
    flex: 0 0 calc((100% - 15px) / 4);
    max-width: none;
  }
}


/* Parent Dashboard PAR-1 — SchoolID + StudentID Isolation / Foundation */
.parent-dashboard-body .parent-sidebar .brand small { letter-spacing: 0.08em; }
.parent-side-card { border: 1px solid rgba(37, 99, 235, 0.16); background: rgba(37, 99, 235, 0.06); }
.parent-status-banner { border-left: 5px solid #2563eb; }
.parent-info-grid .setup-card strong { word-break: break-word; }
.parent-panel-title { gap: 12px; align-items: center; }
.parent-action-btn { border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 800; cursor: pointer; background: #2563eb; color: #fff; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22); }
.parent-action-btn.secondary { background: #0f172a; }
.parent-child-profile-card { display: flex; gap: 16px; align-items: center; padding: 18px; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 22px; background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(236,72,153,0.06)); margin-bottom: 18px; }
.parent-child-avatar { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #2563eb, #ec4899); box-shadow: 0 12px 24px rgba(37,99,235,0.22); flex: 0 0 auto; }
.parent-child-profile-card small { color: #64748b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.parent-child-profile-card h2 { margin: 4px 0; color: #0f172a; }
.parent-child-profile-card p { margin: 0; color: #475569; }
.parent-detail-grid, .parent-rule-grid, .parent-preview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.parent-detail-grid article, .parent-rule-card, .parent-preview-grid article { padding: 16px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 18px; background: #fff; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05); min-width: 0; }
.parent-detail-grid small, .parent-rule-card small { display: block; color: #64748b; font-weight: 800; margin-bottom: 6px; }
.parent-detail-grid strong, .parent-rule-card strong { color: #0f172a; word-break: break-word; }
.parent-rule-card.good { border-color: rgba(34, 197, 94, 0.24); background: rgba(34, 197, 94, 0.05); }
.parent-rule-card.warn { border-color: rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.06); }
.parent-notice { margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(37,99,235,0.08); color: #1e3a8a; font-weight: 700; }
.parent-audit-output { margin-top: 16px; padding: 16px; border-radius: 16px; background: #0f172a; color: #dbeafe; overflow-x: auto; font-size: 12px; line-height: 1.5; }
.parent-preview-grid article span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: rgba(37,99,235,0.10); color: #2563eb; font-weight: 900; margin-bottom: 8px; }
.parent-preview-grid article strong { display: block; color: #0f172a; margin-bottom: 6px; }
.parent-preview-grid article p { color: #64748b; margin: 0; }

@media (max-width: 980px) {
  .parent-detail-grid, .parent-rule-grid, .parent-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .parent-dashboard-body .dash-header { align-items: stretch; }
  .parent-child-profile-card { align-items: flex-start; }
  .parent-detail-grid, .parent-rule-grid, .parent-preview-grid { grid-template-columns: 1fr; }
  .parent-action-btn { width: 100%; }
  .parent-panel-title { align-items: stretch; }
}


/* Parent Dashboard PAR-2 — Main UI / Feature Cards */
.parent-feature-cards-panel { border: 1px solid rgba(37, 99, 235, 0.14); }
.parent-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.parent-feature-card { text-align: left; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 20px; background: #ffffff; padding: 16px; cursor: pointer; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-width: 0; color: inherit; }
.parent-feature-card:hover { transform: translateY(-2px); border-color: rgba(37, 99, 235, 0.36); box-shadow: 0 16px 32px rgba(37, 99, 235, 0.12); }
.parent-feature-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 16px; background: rgba(37, 99, 235, 0.10); margin-bottom: 10px; font-size: 21px; }
.parent-feature-card small { display: block; color: #64748b; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin-bottom: 5px; }
.parent-feature-card strong { display: block; color: #0f172a; font-size: 20px; line-height: 1.2; word-break: break-word; }
.parent-feature-card em { display: block; margin-top: 6px; color: #64748b; font-style: normal; font-weight: 700; font-size: 12px; word-break: break-word; }
.parent-feature-card[data-parent-feature="messages"] .parent-feature-icon,
.parent-feature-card[data-parent-feature="online-class"] .parent-feature-icon { background: rgba(236, 72, 153, 0.10); }
.parent-feature-card[data-parent-feature="transport"] .parent-feature-icon { background: rgba(245, 158, 11, 0.13); }
.parent-feature-card[data-parent-feature="attendance"] .parent-feature-icon { background: rgba(34, 197, 94, 0.12); }
@media (max-width: 1100px) {
  .parent-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .parent-feature-grid { grid-template-columns: 1fr; }
  .parent-feature-card { border-radius: 18px; padding: 14px; }
  .parent-feature-card strong { font-size: 18px; }
}


/* Parent Dashboard PAR-3 — Child Profile / Class View */
.parent-child-class-panel { border: 1px solid rgba(37, 99, 235, 0.14); }
.parent-class-overview-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.parent-class-card { min-width: 0; padding: 16px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 20px; background: #fff; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06); }
.parent-class-card.primary { background: linear-gradient(135deg, rgba(37,99,235,0.09), rgba(236,72,153,0.07)); border-color: rgba(37,99,235,0.22); }
.parent-class-card small { display: block; color: #64748b; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin-bottom: 6px; }
.parent-class-card strong { display: block; color: #0f172a; font-size: 20px; line-height: 1.2; word-break: break-word; }
.parent-class-card p { margin: 7px 0 0; color: #64748b; font-weight: 700; font-size: 12px; word-break: break-word; }
.parent-table-wrap { width: 100%; overflow-x: auto; border-radius: 18px; border: 1px solid rgba(148, 163, 184, 0.22); background: #fff; margin-top: 16px; }
.parent-classmates-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.parent-classmates-table th, .parent-classmates-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.16); color: #334155; }
.parent-classmates-table th { background: rgba(37,99,235,0.06); color: #0f172a; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.parent-status-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; background: rgba(34,197,94,0.10); color: #166534; font-weight: 800; font-size: 12px; }
@media (max-width: 1100px) {
  .parent-class-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .parent-class-overview-grid { grid-template-columns: 1fr; }
  .parent-table-wrap::before { content: 'Swipe table left/right on mobile'; display: block; padding: 10px 12px; color: #64748b; font-size: 12px; font-weight: 800; background: rgba(37,99,235,0.06); }
  .parent-class-card { border-radius: 18px; padding: 14px; }
}


/* Parent Dashboard PAR-4 — Attendance / Homework / Results View */
.parent-academic-view-panel { border: 1px solid rgba(37, 99, 235, 0.14); }
.parent-academic-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.parent-academic-card { min-width: 0; padding: 16px; border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 20px; background: #fff; box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06); }
.parent-academic-card.good { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.22); }
.parent-academic-card.warn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.28); }
.parent-academic-card small { display: block; color: #64748b; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; margin-bottom: 6px; }
.parent-academic-card strong { display: block; color: #0f172a; font-size: 22px; line-height: 1.2; word-break: break-word; }
.parent-academic-card p { margin: 7px 0 0; color: #64748b; font-weight: 700; font-size: 12px; word-break: break-word; }
.parent-filter-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 12px; margin: 14px 0 16px; }
.parent-filter-row label { display: grid; gap: 6px; font-weight: 800; color: #334155; }
.parent-filter-row span { font-size: 12px; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.parent-filter-row select, .parent-filter-row input { width: 100%; border: 1px solid rgba(148,163,184,0.36); border-radius: 14px; padding: 11px 12px; outline: none; background: #fff; color: #0f172a; font-weight: 700; }
.parent-filter-row select:focus, .parent-filter-row input:focus { border-color: rgba(37,99,235,0.65); box-shadow: 0 0 0 3px rgba(37,99,235,0.10); }
.parent-academic-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.parent-academic-table th, .parent-academic-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid rgba(148, 163, 184, 0.16); color: #334155; vertical-align: top; }
.parent-academic-table th { background: rgba(37,99,235,0.06); color: #0f172a; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.parent-record-type { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px; background: rgba(37,99,235,0.10); color: #1d4ed8; font-weight: 900; font-size: 12px; }
.parent-record-type.attendance { background: rgba(34,197,94,0.11); color: #166534; }
.parent-record-type.homework { background: rgba(245,158,11,0.13); color: #92400e; }
.parent-record-type.results { background: rgba(236,72,153,0.11); color: #9d174d; }
@media (max-width: 1100px) {
  .parent-academic-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parent-filter-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .parent-academic-summary-grid { grid-template-columns: 1fr; }
  .parent-academic-table-wrap::before { content: 'Swipe table left/right on mobile'; display: block; padding: 10px 12px; color: #64748b; font-size: 12px; font-weight: 800; background: rgba(37,99,235,0.06); }
  .parent-academic-card { border-radius: 18px; padding: 14px; }
}


/* PAR-5 Parent Transport View */
.parent-transport-view-panel[data-par5-transport-view="true"] {
  border: 1px solid rgba(14, 165, 233, 0.18);
}
.parent-transport-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.parent-transport-card {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.parent-transport-card small { color: #64748b; font-weight: 700; }
.parent-transport-card strong { display: block; margin-top: 6px; font-size: 1.15rem; color: #0f172a; }
.parent-transport-card p { margin: 6px 0 0; color: #64748b; font-size: 0.85rem; }
.parent-transport-card.good { border-color: rgba(34, 197, 94, 0.28); }
.parent-transport-card.warn { border-color: rgba(245, 158, 11, 0.32); }
.parent-transport-table-wrap { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.parent-transport-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.parent-transport-table th, .parent-transport-table td { padding: 12px; border-bottom: 1px solid rgba(148, 163, 184, 0.22); text-align: left; vertical-align: top; }
.parent-transport-table th { color: #475569; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.parent-transport-table td small { display: block; color: #64748b; margin-top: 3px; }
.parent-status-chip { display: inline-flex; align-items: center; border-radius: 999px; background: #eef6ff; color: #0369a1; padding: 5px 10px; font-weight: 800; font-size: 0.78rem; }
@media (max-width: 900px) {
  .parent-transport-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .parent-transport-summary-grid { grid-template-columns: 1fr; }
  .parent-transport-table-wrap::before { content: "Swipe table left/right on mobile"; display: block; color: #64748b; font-size: 0.78rem; margin-bottom: 8px; }
}


/* PAR-6 Parent Messages / Notices View */
.parent-messages-notices-panel[data-par6-messages-notices-view="true"] {
  border: 1px solid rgba(37, 99, 235, 0.14);
  scroll-margin-top: 18px;
}
.parent-message-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.parent-message-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
}
.parent-message-card.good { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.22); }
.parent-message-card.warn { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.28); }
.parent-message-card small { display:block; color:#64748b; font-weight:900; text-transform:uppercase; letter-spacing:.06em; font-size:11px; margin-bottom:6px; }
.parent-message-card strong { display:block; color:#0f172a; font-size:22px; line-height:1.2; word-break:break-word; }
.parent-message-card p { margin:7px 0 0; color:#64748b; font-weight:700; font-size:12px; word-break:break-word; }
.parent-messages-table-wrap { margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.parent-messages-table { width:100%; min-width:900px; border-collapse:collapse; }
.parent-messages-table th, .parent-messages-table td { padding:12px 14px; border-bottom:1px solid rgba(148,163,184,0.18); text-align:left; vertical-align:top; color:#334155; }
.parent-messages-table th { background:rgba(37,99,235,0.06); color:#0f172a; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
.parent-messages-table td small { display:block; margin-top:4px; color:#64748b; font-weight:700; }
.parent-message-kind { display:inline-flex; align-items:center; justify-content:center; min-width:72px; padding:5px 9px; border-radius:999px; background:rgba(37,99,235,0.10); color:#1d4ed8; font-size:11px; font-weight:900; }
.parent-message-kind.notice { background:rgba(245,158,11,0.13); color:#92400e; }
.parent-message-kind.group { background:rgba(236,72,153,0.12); color:#be185d; }
.parent-message-kind.direct { background:rgba(34,197,94,0.12); color:#15803d; }
@media (max-width: 900px) {
  .parent-message-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .parent-message-summary-grid { grid-template-columns: 1fr; }
  .parent-messages-table-wrap::before { content: "Swipe table left/right on mobile"; display:block; color:#64748b; font-size:0.78rem; margin-bottom:8px; }
  .parent-message-card { border-radius:18px; padding:14px; }
}


/* PAR-7 — Parent Final UI Clean + Mobile Responsive */
.parent-dashboard-body[data-par7-final-ui-clean="true"],
.parent-dashboard-body {
  overflow-x: hidden;
}
.parent-main {
  min-width: 0;
}
.parent-main .panel,
.parent-status-banner,
.parent-info-grid,
.parent-feature-cards-panel,
.parent-linked-child-panel,
.parent-child-class-panel,
.parent-academic-view-panel,
.parent-transport-view-panel,
.parent-messages-notices-panel,
.parent-isolation-panel,
.parent-preview-panel {
  max-width: 100%;
  box-sizing: border-box;
}
.parent-panel-title,
.parent-header,
.parent-profile-chip,
.parent-feature-card,
.parent-child-profile-card,
.parent-class-card,
.parent-academic-card,
.parent-transport-card,
.parent-message-card,
.parent-rule-card,
.parent-preview-grid article {
  min-width: 0;
}
.parent-panel-title {
  gap: 12px;
  align-items: flex-start;
}
.parent-panel-title h3,
.parent-panel-title span,
.parent-feature-card strong,
.parent-feature-card small,
.parent-child-profile-card strong,
.parent-detail-grid strong,
.parent-class-card strong,
.parent-academic-card strong,
.parent-transport-card strong,
.parent-message-card strong,
.parent-rule-card strong,
.parent-preview-grid strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.parent-action-btn,
.parent-filter-row select,
.parent-filter-row input,
.parent-feature-card {
  touch-action: manipulation;
}
.parent-table-wrap,
.parent-academic-table-wrap,
.parent-transport-table-wrap,
.parent-messages-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
.parent-table-wrap table,
.parent-academic-table,
.parent-transport-table,
.parent-messages-table,
.parent-classmates-table {
  max-width: none;
}
.parent-audit-output {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
@media (max-width: 1180px) {
  .parent-main { padding: 22px; }
  .parent-feature-grid,
  .parent-info-grid,
  .parent-class-overview-grid,
  .parent-academic-summary-grid,
  .parent-transport-summary-grid,
  .parent-message-summary-grid,
  .parent-preview-grid,
  .parent-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  body:not(.bs-mobile-module-drawer-enabled).parent-dashboard-body {
    display: block;
  }
  body:not(.bs-mobile-module-drawer-enabled) .parent-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: 16px;
  }
  body:not(.bs-mobile-module-drawer-enabled) .parent-sidebar .brand,
  body:not(.bs-mobile-module-drawer-enabled) .parent-side-card {
    margin-bottom: 12px;
  }
  body:not(.bs-mobile-module-drawer-enabled) .parent-sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  body:not(.bs-mobile-module-drawer-enabled) .parent-sidebar-nav a {
    margin: 0;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
  }
  .parent-main {
    padding: 18px;
  }
  .parent-header {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .parent-header .header-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .parent-profile-chip {
    justify-content: flex-start;
  }
  .parent-panel-title {
    display: grid;
    grid-template-columns: 1fr;
  }
  .parent-panel-title .parent-action-btn,
  .parent-panel-title button {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .parent-sidebar-nav,
  .parent-feature-grid,
  .parent-info-grid,
  .parent-class-overview-grid,
  .parent-academic-summary-grid,
  .parent-transport-summary-grid,
  .parent-message-summary-grid,
  .parent-preview-grid,
  .parent-rule-grid,
  .parent-detail-grid,
  .parent-par3-detail-grid,
  .parent-filter-row {
    grid-template-columns: 1fr !important;
  }
  .parent-main {
    padding: 14px;
  }
  .parent-status-banner,
  .parent-main .panel {
    border-radius: 20px;
    padding: 16px;
  }
  .parent-header .header-actions {
    grid-template-columns: 1fr;
  }
  .parent-profile-chip,
  .parent-header .logout-btn,
  .parent-action-btn {
    width: 100%;
  }
  .parent-feature-card {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 14px;
    border-radius: 18px;
  }
  .parent-feature-icon,
  .parent-child-avatar {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  .parent-child-profile-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .parent-table-wrap::before,
  .parent-academic-table-wrap::before,
  .parent-transport-table-wrap::before,
  .parent-messages-table-wrap::before {
    content: "Swipe table left/right on mobile";
    display: block;
    padding: 10px 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    background: rgba(37, 99, 235, 0.06);
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  }
  .parent-academic-table th,
  .parent-academic-table td,
  .parent-transport-table th,
  .parent-transport-table td,
  .parent-messages-table th,
  .parent-messages-table td,
  .parent-classmates-table th,
  .parent-classmates-table td {
    padding: 10px;
    font-size: 13px;
  }
}
@media (max-width: 420px) {
  .parent-main {
    padding: 10px;
  }
  .parent-status-banner,
  .parent-main .panel {
    padding: 14px;
    border-radius: 18px;
  }
  .parent-feature-card,
  .parent-academic-card,
  .parent-transport-card,
  .parent-message-card,
  .parent-class-card,
  .parent-rule-card {
    padding: 13px;
  }
  .parent-panel-title h3 {
    font-size: 1rem;
  }
}


/* PAR-11 — Parent Dashboard section isolation (parent-dashboard only) */
.parent-dashboard-body.parent-section-isolated .parent-dashboard-section {
  display: none !important;
}

.parent-dashboard-body.parent-section-isolated .parent-dashboard-section.parent-section-visible {
  display: block !important;
}

.parent-dashboard-body.parent-section-isolated .admin-info-grid.parent-dashboard-section.parent-section-visible {
  display: grid !important;
}

.parent-dashboard-body.parent-section-isolated #parentModulesWrapper[hidden] {
  display: none !important;
}

.parent-dashboard-body.parent-section-isolated #parentModulesWrapper:not([hidden]) {
  display: grid;
  gap: 22px;
}

.parent-dashboard-body.parent-section-isolated .parent-internal-hidden {
  display: none !important;
}

.parent-dashboard-body.parent-section-isolated #parentAcademicViewPanel[data-academic-focus] .panel-title span {
  text-transform: capitalize;
}
/* End PAR-11 */


/* WS-2 — Login Entry Integration / Role Entry Link Check */
.brightstar-role-entry-body {
  background: radial-gradient(circle at top left, rgba(15,73,255,.18), transparent 28%), linear-gradient(135deg, #f7fbff 0%, #ffffff 48%, #eef6ff 100%);
}
.brightstar-role-entry-shell {
  align-items: stretch;
}
.brightstar-role-entry-brand {
  background: linear-gradient(135deg, #0b2d75, #0f49ff);
}
.brightstar-role-entry-card h2 {
  margin-bottom: 8px;
}
.brightstar-role-entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.brightstar-role-entry-btn {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
  align-items: center;
  text-decoration: none;
  border: 1px solid #dbe7ff;
  background: #fff;
  border-radius: 16px;
  padding: 15px;
  color: #0b2d75;
  box-shadow: 0 8px 20px rgba(16,24,40,.06);
}
.brightstar-role-entry-btn:hover {
  border-color: #0f49ff;
  box-shadow: 0 10px 24px rgba(15,73,255,.14);
  transform: translateY(-1px);
}
.brightstar-role-entry-btn span {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #e9f1ff;
}
.brightstar-role-entry-btn b {
  font-size: 15px;
}
.brightstar-role-entry-btn small {
  color: #64748b;
  font-weight: 700;
}
.brightstar-role-entry-note {
  margin-top: 18px;
  padding: 12px;
  border-radius: 14px;
  background: #f8fbff;
  border: 1px solid #dbe7ff;
  color: #475569;
  font-weight: 800;
}
.parent-login-bg {
  background: radial-gradient(circle at top left, rgba(22,163,74,.18), transparent 28%), linear-gradient(135deg, #f4fff8 0%, #ffffff 45%, #eef6ff 100%);
}
.parent-brand {
  background: linear-gradient(135deg, #0b2d75, #16a34a);
}
@media(max-width:650px){
  .brightstar-role-entry-grid { grid-template-columns: 1fr; }
  .brightstar-role-entry-btn { grid-template-columns: 38px 1fr; }
}

/* WS10 THEME OVERRIDE — founder dashboard dark navy + gold palette
   Scope: visual palette only. No layout logic / IDs / JS behavior changed. */
:root{
  --bs-theme-navy:#051b4d;
  --bs-theme-navy-2:#072863;
  --bs-theme-navy-3:#0b3478;
  --bs-theme-gold:#d4aa47;
  --bs-theme-gold-2:#b88418;
  --bs-theme-gold-soft:#fff5da;
  --bs-theme-ink:#10223f;
  --bs-theme-muted:#60708a;
  --bs-theme-line:#e6ebf4;
  --bs-theme-bg:#f5f7fb;
  --bs-theme-card:#ffffff;
  --bs-theme-shadow:0 10px 24px rgba(15,23,42,.06);
}

body,
.dashboard-body,
.admin-dashboard-body,
.transport-dashboard-body,
.message-body,
.video-class-body{
  background:var(--bs-theme-bg) !important;
  color:var(--bs-theme-ink);
}

/* Main left navigation / shell */
.sidebar,
.admin-sidebar,
.teacher-sidebar,
.student-sidebar,
.driver-sidebar,
.transport-sidebar,
.parent-sidebar{
  background:linear-gradient(180deg,var(--bs-theme-navy) 0%, var(--bs-theme-navy-2) 100%) !important;
  color:#fff !important;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.05);
}
.brand,
.brand strong,
.brand small,
.admin-user-card,
.admin-user-card small,
.side-card,
.side-card p,
.parent-profile-chip,
.parent-profile-chip small{
  color:#fff !important;
}
.brand-star,
.crown{
  background:linear-gradient(180deg,var(--bs-theme-gold) 0%, var(--bs-theme-gold-2) 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(212,170,71,.28);
}
.side-card,
.admin-user-card,
.parent-profile-chip{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(212,170,71,.22) !important;
}
.side-card button,
.sidebar .side-card button,
.admin-user-card button:not(.admin-sidebar-profile-trigger),
.parent-action-btn.secondary,
.logout-btn.secondary{
  background:linear-gradient(180deg,var(--bs-theme-gold) 0%, var(--bs-theme-gold-2) 100%) !important;
  color:#fff !important;
  border:none !important;
  box-shadow:0 8px 18px rgba(212,170,71,.20);
}
.sidebar-nav a,
.admin-nav a,
.parent-sidebar-nav a,
.transport-nav a{
  color:rgba(255,255,255,.92) !important;
}
.sidebar-nav a.active,
.sidebar-nav a:hover,
.admin-nav a.active,
.admin-nav a:hover,
.parent-sidebar-nav a.active,
.parent-sidebar-nav a:hover,
.transport-nav a.active,
.transport-nav a:hover,
.driver-dashboard-body .sidebar-nav a:hover,
.driver-dashboard-body .sidebar-nav a.active,
.student-dashboard-body .sidebar-nav a:hover,
.student-dashboard-body .sidebar-nav a.active,
.teacher-dashboard-body .sidebar-nav a:hover,
.teacher-dashboard-body .sidebar-nav a.active{
  background:linear-gradient(180deg,var(--bs-theme-gold) 0%, var(--bs-theme-gold-2) 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(212,170,71,.16);
}

/* Shared cards / panels */
.profile,
.panel,
.form-panel,
.table-panel,
.empty-state,
.stat-card,
.teacher-form-card,
.teacher-summary-card,
.student-form-card,
.driver-form-card,
.transport-foundation-grid article,
.transport-driver-card,
.transport-empty-card,
.parent-child-profile-card,
.parent-class-card,
.parent-feature-card,
.parent-academic-card,
.parent-transport-card,
.parent-message-card,
.parent-rule-card,
.parent-main .panel,
.video-class-topbar,
.video-class-status-card,
.video-class-panel,
.video-class-test-panel,
.msg1-summary-grid article,
.msg1-contact-card,
.msg1-message-list,
.msg1-bubble,
.msg4-group-list-panel,
.msg4-group-room,
.msg7-room-box,
.msg7-video-class-list,
.msg7-video-class-panel,
.founder-summary-section,
.founder-schools-section,
.founder-admins-section,
.founder-subscription-section,
.founder-branding-section,
.founder-video-section,
.founder-transport-section,
.founder-reports-section,
.founder-schools-table-wrap,
.founder-admins-table-wrap,
.founder-school-detail-box,
.founder-admin-detail-box,
.founder-payment-card,
.founder-plan-card,
.founder-overview-card,
.founder-summary-card{
  background:var(--bs-theme-card) !important;
  border:1px solid var(--bs-theme-line) !important;
  box-shadow:var(--bs-theme-shadow) !important;
}

.founder-school-list-row-hint{
  margin:0 0 10px;
  font-size:13px;
  font-weight:700;
  color:#475569;
}

#founderAllSchoolsManagementSection .founder-schools-table tbody tr.founder-school-row,
.founder-schools-table tbody tr.founder-school-row{
  cursor:pointer;
}

#founderAllSchoolsManagementSection .founder-schools-table tbody tr.founder-school-row:hover,
.founder-schools-table tbody tr.founder-school-row:hover{
  background:rgba(37,99,235,.06);
}

#founderAllSchoolsManagementSection .founder-schools-table tbody tr.founder-school-row.is-selected,
.founder-schools-table tbody tr.founder-school-row.is-selected{
  background:rgba(37,99,235,.12);
  box-shadow:inset 4px 0 0 #1d4ed8;
}

.dash-header,
.admin-topbar,
.transport-topbar,
.parent-header,
.video-class-topbar,
.msg1-message-topbar,
.msg3-chat-room-header,
.msg4-group-room-header{
  color:var(--bs-theme-ink);
}
.welcome h1,
.admin-title h1,
.section-head h2,
.panel-title h3,
.panel h3,
.video-class-topbar h1,
.video-class-panel h2,
.video-class-test-panel h2,
.parent-panel-title h3,
.founder-summary-header h2,
.founder-schools-header h2,
.founder-admins-header h2{
  color:var(--bs-theme-navy) !important;
}
.welcome p,
.admin-title p,
.section-head p,
.profile small,
.parent-notice,
.announcement p,
.msg1-empty,
.msg1-contact-card small,
.msg2-contact-preview,
.video-class-notice,
.inline-message,
.login-note,
small,
.eyebrow{
  color:var(--bs-theme-muted);
}

/* Buttons / interactive accents */
.logout-btn,
.grid-form button,
.table-action,
.transport-toolbar button,
.transport-primary-btn,
.transport-form-actions button,
.top-link-btn,
.action-list button,
.build-list span,
.msg1-message-sidebar button,
.msg1-send-form button,
.video-class-action-row button:first-child,
.bs-ann-btn,
.bs-hero-btn,
.parent-action-btn,
.save-teacher-btn,
.reset-teacher-btn,
.founder-summary-refresh-btn,
.founder-school-action-row button.primary,
.founder-school-detail-header button,
.founder-admin-action-row button.primary,
.founder-admin-detail-header button,
.asm8-export-btn,
.asm8-print-btn{
  background:linear-gradient(180deg,var(--bs-theme-navy-2) 0%, var(--bs-theme-navy) 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.top-link-btn,
.action-list button,
.table-action,
.reset-teacher-btn{
  background:#fff !important;
  color:var(--bs-theme-navy) !important;
  border:1px solid rgba(5,27,77,.14) !important;
}
.top-link-btn:hover,
.action-list button:hover,
.table-action:hover,
.reset-teacher-btn:hover{
  border-color:var(--bs-theme-gold) !important;
  color:var(--bs-theme-gold-2) !important;
}

/* Status / pills */
.active-pill,
.transport-status-pill,
.status-active,
.founder-school-status-badge.active,
.founder-admin-status-badge.active{
  background:#eef8ef !important;
  color:#137333 !important;
}
.status-banner,
.transport-status-banner,
.teacher-hero-banner,
.parent-status-banner,
.founder-status-banner,
.announcement{
  background:linear-gradient(135deg,#fffaf0 0%, #ffffff 100%) !important;
  border:1px solid rgba(212,170,71,.35) !important;
}
.status-banner strong,
.announcement strong,
.transport-status-banner strong{
  color:var(--bs-theme-navy) !important;
}
.star-badge,
.announcement .star-badge,
.founder-summary-card .summary-icon,
.form-section-title span,
.summary-title span{
  background:var(--bs-theme-gold-soft) !important;
  color:var(--bs-theme-gold-2) !important;
  border-color:rgba(212,170,71,.35) !important;
}

/* Tables / stat surfaces */
th,
.transport-table th,
.founder-schools-table th,
.founder-admins-table th,
.asm9-table th{
  background:#f8fafc !important;
  color:#334155 !important;
}
.school-scope-card>div,
.setup-message,
.build-list div,
.transport-note,
.msg1-notice,
.conditional-box,
.tip-box,
.parent-notice,
.driver-feature-notice,
.driver-assigned-note,
.driver-pickdrop-note,
.driver-routes-note,
.driver-school-scope-note,
.founder-school-detail-box,
.founder-admin-detail-box{
  background:#fbfcfe !important;
  border-color:#e5ebf5 !important;
}
.stat-icon.blue,
.blue-soft,
.msg1-contact-avatar,
.profile>span,
.admin-user-icon,
.parent-feature-icon,
.parent-child-avatar,
.driver-feature-icon,
.driver-integration-icon,
.transport-driver-card>span{
  background:#eef3ff !important;
  color:var(--bs-theme-navy-3) !important;
}
.stat-icon.gold,
.gold,
.orange-soft{
  background:var(--bs-theme-gold-soft) !important;
  color:var(--bs-theme-gold-2) !important;
}
.stat-card b,
.summary-item b,
.transport-foundation-grid strong,
.transport-driver-card strong,
.parent-academic-card strong,
.parent-transport-card strong,
.parent-message-card strong,
.driver-profile-main h2,
.driver-profile-main h3,
.msg1-summary-grid strong,
.video-class-status-card strong,
.founder-summary-card strong{
  color:var(--bs-theme-navy) !important;
}

/* Message / video specific polish */
.msg1-conversation-header span,
.video-class-pill,
.video-class-pill.vc3-time-pill{
  background:var(--bs-theme-gold-soft) !important;
  color:var(--bs-theme-gold-2) !important;
}
.msg1-bubble-row.mine .msg1-bubble{
  background:linear-gradient(180deg,var(--bs-theme-navy-2) 0%, var(--bs-theme-navy) 100%) !important;
  border-color:var(--bs-theme-navy) !important;
  color:#fff !important;
}
.video-class-actions button,
.video-class-action-row button{
  background:#fff !important;
  color:var(--bs-theme-navy) !important;
  border:1px solid rgba(5,27,77,.12) !important;
}
.video-class-action-row button:first-child{
  background:linear-gradient(180deg,var(--bs-theme-navy-2) 0%, var(--bs-theme-navy) 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
}

/* Login surface alignment */
.admin-login-panel,
.bs-founder-card,
.bs-role-card,
.brightstar-role-entry-card,
.auth-card{
  box-shadow:0 18px 36px rgba(15,23,42,.10) !important;
  border:1px solid rgba(5,27,77,.08) !important;
}
.admin-login-top,
.bs-founder-header,
.bs-role-header,
.brightstar-role-entry-brand,
.parent-brand,
.teacher-brand,
.student-brand,
.driver-brand{
  background:linear-gradient(135deg,var(--bs-theme-navy-2) 0%, #0f3d95 52%, var(--bs-theme-gold-2) 100%) !important;
}
.admin-login-form button,
.bs-founder-submit,
.parent-login-submit,
.brightstar-role-entry-btn:hover{
  background:linear-gradient(180deg,var(--bs-theme-navy-2) 0%, var(--bs-theme-navy) 100%) !important;
}

/* Mobile keeps same structure; only palette changed */

/* Founder Dashboard — dark navy sidebar + gold active + clean white cards (Task 2) */
.bs-founder-body{
  --fd-navy-dark:#061b3f;
  --fd-navy:#08295c;
  --fd-navy-mid:#0b2f66;
  --fd-gold:#c9972b;
  --fd-gold-light:#d4a83a;
  --fd-gold-deep:#b8860b;
  --fd-ink:#0b1f3a;
  --fd-muted:#102a4c;
  --fd-bg:#f7f8fb;
  --fd-card:#ffffff;
  --fd-line:#e6ebf4;
  --fd-shadow:0 14px 40px rgba(6,27,63,.08);
  background:var(--fd-bg) !important;
  color:var(--fd-ink);
}
.bs-founder-body .bs-founder-app{
  background:var(--fd-bg);
}
.bs-founder-body .bs-sidebar{
  background:linear-gradient(180deg,var(--fd-navy-dark) 0%,var(--fd-navy) 52%,var(--fd-navy-mid) 100%) !important;
  color:#fff !important;
  box-shadow:inset -1px 0 0 rgba(212,168,58,.12);
}
.bs-founder-body .bs-side-link{
  color:#fff !important;
}
.bs-founder-body .bs-side-link:hover{
  background:rgba(255,255,255,.1) !important;
  color:#fff !important;
}
.bs-founder-body .bs-side-link.active{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold)) !important;
  color:#fff !important;
  box-shadow:0 6px 18px rgba(184,134,11,.32) !important;
}
.bs-founder-body .bs-upgrade-btn{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold-deep)) !important;
  color:#fff !important;
}
.bs-founder-body .bs-main{
  background:var(--fd-bg);
}
.bs-founder-body .bs-welcome h1,
.bs-founder-body .bs-panel-title,
.bs-founder-body .bs-panel h3,
.bs-founder-body .founder-summary-header h2,
.bs-founder-body .founder-schools-header h2,
.bs-founder-body .founder-admins-header h2,
.bs-founder-body .founder-ts-header h2,
.bs-founder-body .founder-dt-header h2,
.bs-founder-body .founder-att-header h2,
.bs-founder-body .founder-sub-header h2,
.bs-founder-body .founder-report-header h2,
.bs-founder-body .founder-sec-header h2,
.bs-founder-body .bs-brand-picker-header h2,
.bs-founder-body .founder-audit-header h2{
  color:var(--fd-ink) !important;
}
.bs-founder-body .bs-welcome p,
.bs-founder-body .founder-summary-header p,
.bs-founder-body .founder-schools-header p{
  color:var(--fd-muted) !important;
}
.bs-founder-body .bs-stat-card,
.bs-founder-body .bs-panel,
.bs-founder-body .founder-summary-section,
.bs-founder-body .founder-schools-section,
.bs-founder-body .founder-admins-section,
.bs-founder-body .founder-summary-card,
.bs-founder-body .founder-schools-table-wrap,
.bs-founder-body .bs-brand-picker-section,
.bs-founder-body .bs-menu-round,
.bs-founder-body .bs-date-range,
.bs-founder-body .bs-notification,
.bs-founder-body .bs-profile{
  background:var(--fd-card) !important;
  border-color:var(--fd-line) !important;
  box-shadow:var(--fd-shadow) !important;
}
.bs-founder-body .bs-stat-icon.blue,
.bs-founder-body .bs-panel-title span,
.bs-founder-body .bs-kpi-dot,
.bs-founder-body .bs-list-logo{
  background:#eef2f8 !important;
  color:var(--fd-navy) !important;
}
.bs-founder-body .bs-stat-icon.yellow,
.bs-founder-body .founder-summary-card .summary-icon{
  background:#fff8e8 !important;
  color:var(--fd-gold-deep) !important;
}
.bs-founder-body .bs-manage-btn,
.bs-founder-body .bs-brand-picker-save,
.bs-founder-body .founder-summary-refresh-btn{
  font-weight:900;
}
.bs-founder-body .bs-manage-btn,
.bs-founder-body .bs-brand-picker-save{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold-deep)) !important;
  color:#fff !important;
  border:none !important;
}
.bs-founder-body .founder-summary-refresh-btn,
.bs-founder-body .founder-school-action-row button.primary,
.bs-founder-body .founder-admin-action-row button.primary,
.bs-founder-body .founder-sub-action-row button.primary{
  background:linear-gradient(135deg,var(--fd-navy),var(--fd-navy-dark)) !important;
  color:#fff !important;
  border:none !important;
}
.bs-founder-body .bs-announcement,
.bs-founder-body .bs-subscription-card{
  border-color:rgba(201,151,43,.35) !important;
}
.bs-founder-body .bs-ann-icon{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold-deep)) !important;
}
.bs-founder-body .bs-ann-btn{
  border-color:var(--fd-gold) !important;
  color:var(--fd-gold-deep) !important;
}
.bs-founder-body .asm2-detail-tabs button.active,
.bs-founder-body .asm7-quick-grid button:hover{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold)) !important;
  border-color:var(--fd-gold) !important;
  color:#fff !important;
}
.bs-founder-body .sidebar{
  background:linear-gradient(180deg,var(--fd-navy-dark),var(--fd-navy)) !important;
}
.bs-founder-body .sidebar-nav a.active,
.bs-founder-body .sidebar-nav a:hover{
  background:linear-gradient(135deg,var(--fd-gold-light),var(--fd-gold)) !important;
  color:#fff !important;
}

/* Role login pages — dark navy + gold premium (all role logins) */
body.admin-login-body{
  background:linear-gradient(180deg,#f7f8fb 0%,#ffffff 100%) !important;
  display:grid !important;
  place-items:center !important;
  overflow-x:hidden !important;
}
body.admin-login-body .admin-login-shell{
  width:min(100%,430px) !important;
  display:block !important;
  grid-template-columns:1fr !important;
  max-width:460px;
}
body.admin-login-body .admin-login-brand{
  display:none !important;
}
body.admin-login-body .admin-login-card{
  background:#fff !important;
  border:1px solid #e6ebf4 !important;
  box-shadow:0 18px 42px rgba(6,27,63,.1) !important;
}
body.admin-login-body .admin-form input{
  background:#fff !important;
  border-color:#d8dee8 !important;
}
body.admin-login-body .admin-form input:focus{
  border-color:#c9972b !important;
  box-shadow:0 0 0 4px rgba(201,151,43,.18) !important;
}
body.admin-login-body .admin-form button{
  background:linear-gradient(135deg,#08295c,#061b3f) !important;
  color:#fff !important;
}
body.admin-login-body .admin-form button:hover{
  border-color:#d4a83a !important;
}
body.admin-login-body .back-link{
  color:#08295c !important;
}
body.admin-login-body .back-link:hover{
  color:#b8860b !important;
}

/* Private founder login page */
body.bs-founder-entry-body{
  background:linear-gradient(180deg,#f7f8fb 0%,#ffffff 100%) !important;
  overflow-x:hidden;
}
body.bs-founder-entry-body .bs-founder-topbar{
  background:linear-gradient(125deg,#061b3f 0%,#08295c 52%,#0b2f66 100%) !important;
}
body.bs-founder-entry-body .bs-founder-login-header{
  background:linear-gradient(125deg,#061b3f 0%,#08295c 48%,#0b2f66 100%) !important;
}
body.bs-founder-entry-body .bs-founder-login-form button{
  background:linear-gradient(135deg,#08295c,#061b3f) !important;
}
body.bs-founder-entry-body .bs-founder-field input:focus{
  border-color:#c9972b !important;
  box-shadow:0 0 0 4px rgba(201,151,43,.18) !important;
}

/* STEP 2 — Admin Sidebar Logo Text Wrap UI Fix
   Scope: CSS only. Keeps Admin logic, login, storage keys, and dashboard JS unchanged. */
.admin-dashboard-body .admin-sidebar .brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  min-width:0 !important;
}
.admin-dashboard-body .admin-sidebar .brand > div:last-child{
  min-width:0 !important;
  flex:1 1 auto !important;
}
.admin-dashboard-body .admin-sidebar .brand-star{
  flex:0 0 52px !important;
}
.admin-dashboard-body .admin-sidebar .brand strong{
  display:block !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  font-size:22px !important;
  line-height:1.05 !important;
}
.admin-dashboard-body .admin-sidebar .brand small{
  display:block !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  letter-spacing:4px !important;
  font-size:11px !important;
  line-height:1.25 !important;
}
@media(max-width:360px){
  .admin-dashboard-body .admin-sidebar .brand strong{font-size:19px !important;}
  .admin-dashboard-body .admin-sidebar .brand small{font-size:10px !important;letter-spacing:3px !important;}
}

/* TCH-12 — Teacher Facebook Profile Style UI / Logic */
.teacher-facebook-profile-panel{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
.teacher-fb-profile-shell{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  color:#111827;
}
.teacher-fb-cover-wrap{
  position:relative;
  min-height:290px;
  border-radius:26px 26px 0 0;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}
.teacher-fb-cover{
  height:235px;
  background:
    radial-gradient(circle at 8% 24%, #1d4ed8 0 1.2%, transparent 1.3%),
    radial-gradient(circle at 18% 62%, #ef4444 0 1.7%, transparent 1.8%),
    radial-gradient(circle at 31% 30%, #fbbf24 0 1.3%, transparent 1.4%),
    radial-gradient(circle at 68% 74%, #facc15 0 2.8%, transparent 2.9%),
    linear-gradient(155deg, transparent 0 20%, #fff 20.4% 27%, transparent 27.4%),
    linear-gradient(170deg, transparent 0 42%, #ef4444 42.3% 45.6%, #facc15 45.8% 49%, #fff 49.2% 53%, #16a34a 53.2% 100%),
    linear-gradient(145deg, #1687ff 0 42%, #ffffff 42.5% 48%, #16a34a 48.5% 100%);
  background-size:cover;
  border:1px solid rgba(255,255,255,.8);
}
.teacher-fb-cover:after{
  content:'';
  position:absolute;
  left:-3%;
  right:-3%;
  top:72px;
  height:98px;
  background:repeating-linear-gradient(170deg, rgba(255,255,255,.22) 0 2px, transparent 2px 8px);
  opacity:.45;
  border-radius:50%;
  pointer-events:none;
}
.teacher-fb-cover-actions{
  position:absolute;
  right:22px;
  top:72px;
  display:grid;
  gap:12px;
  z-index:3;
}
.teacher-fb-action-btn,
.teacher-fb-settings-btn,
.teacher-fb-tabbar button,
.teacher-fb-side-menu button,
.teacher-fb-composer-actions button,
.teacher-fb-filter-actions button,
.teacher-fb-view-switch button,
.teacher-fb-view-more{
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  cursor:pointer;
}
.teacher-fb-action-btn{
  min-width:178px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:12px 16px;
  color:#15803d;
}
.teacher-fb-avatar-wrap{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:4;
}
.teacher-fb-avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  border:9px solid #fff;
  background:linear-gradient(135deg,#e0f2fe,#dbeafe);
  color:#0f49ff;
  display:grid;
  place-items:center;
  font-size:56px;
  font-weight:1000;
  box-shadow:0 16px 30px rgba(15,23,42,.22);
  overflow:hidden;
}
.teacher-fb-online-dot{
  position:absolute;
  right:15px;
  bottom:13px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#22c55e;
  border:5px solid #fff;
  box-shadow:0 8px 14px rgba(34,197,94,.24);
}
.teacher-fb-identity-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(226,232,240,.85);
  border-top:0;
  border-radius:0 0 26px 26px;
  padding:54px 24px 24px;
  text-align:center;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.teacher-fb-name-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.teacher-fb-stars{
  color:#f59e0b;
  font-size:34px;
  letter-spacing:5px;
  text-shadow:0 4px 7px rgba(245,158,11,.28);
  white-space:nowrap;
}
.teacher-fb-name-block h2{
  margin:0;
  font-size:46px;
  line-height:1.05;
  color:#111827;
  letter-spacing:-.04em;
  text-shadow:0 4px 8px rgba(15,23,42,.16);
}
.teacher-fb-name-block p{
  display:inline-flex;
  margin:12px 0 0;
  padding:10px 22px;
  border:1px solid rgba(34,197,94,.20);
  border-radius:999px;
  background:#fff;
  color:#16a34a;
  font-weight:1000;
  box-shadow:0 8px 14px rgba(15,23,42,.10);
}
.teacher-fb-pill-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:16px;
}
.teacher-fb-pill-row span{
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#f8fbff;
  color:#0b2d75;
  font-size:12px;
  font-weight:900;
  padding:8px 11px;
}
.teacher-fb-settings-btn{
  position:absolute;
  right:24px;
  bottom:22px;
  padding:13px 20px;
}
.teacher-fb-tabbar{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border:1px solid rgba(226,232,240,.85);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  overflow-x:auto;
}
.teacher-fb-tabbar button{
  min-height:46px;
  padding:0 18px;
  box-shadow:none;
  color:#475569;
  white-space:nowrap;
}
.teacher-fb-tabbar button.active{
  color:#0f49ff;
  border-color:#dbeafe;
  box-shadow:inset 0 -4px 0 #0f49ff;
}
.teacher-fb-tabbar .teacher-fb-more-btn{
  margin-left:auto;
  min-width:64px;
  font-size:22px;
  color:#0f172a;
  box-shadow:0 8px 16px rgba(15,23,42,.10);
}
.teacher-fb-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr) 270px;
  gap:18px;
  align-items:start;
  margin-top:18px;
}
.teacher-fb-left-column,
.teacher-fb-feed-column,
.teacher-fb-right-column{
  display:grid;
  gap:16px;
}
.teacher-fb-stats-card,
.teacher-fb-side-menu,
.teacher-fb-composer-card,
.teacher-fb-feed-filter-card,
.teacher-fb-post-card,
.teacher-fb-students-card,
.teacher-fb-about-card{
  border:1px solid rgba(226,232,240,.92);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.teacher-fb-stats-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:center;
  overflow:hidden;
}
.teacher-fb-stats-card div{
  padding:19px 10px;
}
.teacher-fb-stats-card div + div{
  border-left:1px solid #e5e7eb;
}
.teacher-fb-stats-card span{
  display:block;
  color:#334155;
  font-weight:900;
  font-size:14px;
}
.teacher-fb-stats-card strong{
  display:block;
  margin-top:8px;
  color:#0f49ff;
  font-size:24px;
  font-weight:1000;
}
.teacher-fb-side-menu{
  padding:10px;
  gap:8px;
  display:grid;
}
.teacher-fb-side-menu button{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  justify-content:flex-start;
  box-shadow:0 6px 12px rgba(15,23,42,.06);
}
.teacher-fb-side-menu span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.teacher-fb-art-card{
  min-height:130px;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(135deg,#e0f2fe,#fff7ed 45%,#dcfce7);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.teacher-fb-art-card span{
  position:absolute;
  bottom:-18px;
  width:70px;
  height:70px;
  border-radius:45% 55% 50% 50%;
  background:#22c55e;
}
.teacher-fb-art-card span:nth-child(1){left:10px;background:#22c55e}.teacher-fb-art-card span:nth-child(2){left:55px;background:#f97316}.teacher-fb-art-card span:nth-child(3){left:115px;background:#ef4444}.teacher-fb-art-card span:nth-child(4){right:12px;background:#0ea5e9}
.teacher-fb-composer-card{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:18px;
}
.teacher-fb-mini-avatar,
.teacher-fb-student-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#dbeafe,#f1f5f9);
  color:#0f49ff;
  display:grid;
  place-items:center;
  font-weight:1000;
  box-shadow:0 6px 12px rgba(15,23,42,.10);
  overflow:hidden;
}
.teacher-fb-composer-input{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  text-align:left;
  padding:0 18px;
  font-weight:800;
}
.teacher-fb-composer-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.teacher-fb-composer-actions button{
  min-height:56px;
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}
.teacher-fb-feed-filter-card{
  padding:18px;
  display:grid;
  gap:14px;
}
.teacher-fb-feed-filter-card h3{
  margin:0;
  color:#0f49ff;
  font-size:22px;
}
.teacher-fb-feed-filter-card p{
  margin:5px 0 0;
  color:#64748b;
  font-weight:700;
}
.teacher-fb-filter-actions,
.teacher-fb-view-switch{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.teacher-fb-filter-actions button,
.teacher-fb-view-switch button{
  padding:11px 16px;
  box-shadow:0 6px 12px rgba(15,23,42,.07);
}
.teacher-fb-view-switch button.active{
  color:#0f49ff;
  border-color:#bfdbfe;
}
.teacher-fb-feed-list{
  display:grid;
  gap:16px;
}
.teacher-fb-post-card{
  padding:18px;
}
.teacher-fb-post-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.teacher-fb-post-head strong{
  display:block;
  font-size:16px;
  color:#111827;
}
.teacher-fb-post-head small{
  display:block;
  color:#64748b;
  font-weight:800;
  margin-top:3px;
}
.teacher-fb-post-head button{
  margin-left:auto;
  border:0;
  background:transparent;
  font-size:22px;
  color:#64748b;
}
.teacher-fb-post-meta{
  margin-top:14px;
  color:#64748b;
  font-weight:800;
}
.teacher-fb-post-card h3{
  margin:8px 0 6px;
  color:#111827;
  font-size:20px;
}
.teacher-fb-post-card p{
  margin:0;
  color:#334155;
  line-height:1.55;
}
.teacher-fb-post-footer{
  display:flex;
  gap:18px;
  border-top:1px solid #e5e7eb;
  padding-top:12px;
  margin-top:14px;
  color:#64748b;
  font-weight:900;
}
.teacher-fb-students-card{
  padding:18px;
}
.teacher-fb-students-card h3{
  margin:0 0 14px;
  font-size:18px;
  color:#111827;
}
.teacher-fb-student-list{
  display:grid;
  gap:13px;
}
.teacher-fb-student-item{
  display:grid;
  grid-template-columns:42px 1fr 36px;
  gap:10px;
  align-items:center;
}
.teacher-fb-student-item strong,
.teacher-fb-student-item small{
  display:block;
}
.teacher-fb-student-item strong{
  color:#111827;
  font-size:14px;
}
.teacher-fb-student-item small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  margin-top:3px;
}
.teacher-fb-student-item button{
  width:36px;
  height:36px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-weight:1000;
  box-shadow:0 6px 12px rgba(15,23,42,.10);
}
.teacher-fb-view-more{
  margin-top:16px;
  width:100%;
  min-height:42px;
  color:#0f49ff;
}
.teacher-fb-empty-state{
  margin:0;
  color:#64748b;
  font-weight:800;
  line-height:1.45;
}
.teacher-fb-about-card{
  padding:18px;
}
.teacher-fb-about-card .teacher-profile-detail-list{
  grid-template-columns:1fr;
}
@media(max-width:1180px){
  .teacher-fb-layout{grid-template-columns:230px minmax(0,1fr)}
  .teacher-fb-right-column{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .teacher-fb-cover-wrap{min-height:260px}.teacher-fb-cover{height:210px}
  .teacher-fb-cover-actions{right:14px;top:18px}
  .teacher-fb-avatar{width:120px;height:120px;font-size:44px;border-width:7px}
  .teacher-fb-identity-card{padding-top:42px}
  .teacher-fb-name-block h2{font-size:34px}
  .teacher-fb-stars{font-size:24px;letter-spacing:2px}
  .teacher-fb-settings-btn{position:static;margin-top:14px}
  .teacher-fb-layout{grid-template-columns:1fr}
  .teacher-fb-right-column{grid-template-columns:1fr}
}
@media(max-width:560px){
  .teacher-fb-profile-shell{max-width:100%}
  .teacher-fb-cover-wrap,.teacher-fb-identity-card,.teacher-fb-tabbar,.teacher-fb-stats-card,.teacher-fb-side-menu,.teacher-fb-composer-card,.teacher-fb-feed-filter-card,.teacher-fb-post-card,.teacher-fb-students-card,.teacher-fb-about-card{border-radius:16px}
  .teacher-fb-cover-actions{position:static;padding:12px;background:#fff;grid-template-columns:1fr}
  .teacher-fb-action-btn{width:100%}
  .teacher-fb-cover-wrap{min-height:300px}
  .teacher-fb-name-row{gap:8px}
  .teacher-fb-name-block h2{font-size:28px}
  .teacher-fb-stars{font-size:20px}
  .teacher-fb-composer-card{grid-template-columns:40px 1fr;padding:14px}
  .teacher-fb-composer-actions{grid-template-columns:1fr}
  .teacher-fb-filter-actions,.teacher-fb-view-switch{display:grid;grid-template-columns:1fr}
  .teacher-fb-post-footer{justify-content:space-between;gap:8px;font-size:12px}
}


/* Student Facebook Profile Style UI — copied from Teacher profile layout with Student-specific class names. */
.student-fb-profile-shell{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  color:#111827;
}
.student-fb-cover-wrap{
  position:relative;
  min-height:290px;
  border-radius:26px 26px 0 0;
  overflow:hidden;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.10);
}
.student-fb-cover{
  height:235px;
  background:
    radial-gradient(circle at 8% 24%, #1d4ed8 0 1.2%, transparent 1.3%),
    radial-gradient(circle at 18% 62%, #ef4444 0 1.7%, transparent 1.8%),
    radial-gradient(circle at 31% 30%, #fbbf24 0 1.3%, transparent 1.4%),
    radial-gradient(circle at 68% 74%, #facc15 0 2.8%, transparent 2.9%),
    linear-gradient(155deg, transparent 0 20%, #fff 20.4% 27%, transparent 27.4%),
    linear-gradient(170deg, transparent 0 42%, #ef4444 42.3% 45.6%, #facc15 45.8% 49%, #fff 49.2% 53%, #16a34a 53.2% 100%),
    linear-gradient(145deg, #1687ff 0 42%, #ffffff 42.5% 48%, #16a34a 48.5% 100%);
  background-size:cover;
  border:1px solid rgba(255,255,255,.8);
}
.student-fb-cover:after{
  content:'';
  position:absolute;
  left:-3%;
  right:-3%;
  top:72px;
  height:98px;
  background:repeating-linear-gradient(170deg, rgba(255,255,255,.22) 0 2px, transparent 2px 8px);
  opacity:.45;
  border-radius:50%;
  pointer-events:none;
}
.student-fb-cover-actions{
  position:absolute;
  right:22px;
  top:72px;
  display:grid;
  gap:12px;
  z-index:3;
}
.student-fb-action-btn,
.student-fb-settings-btn,
.student-fb-tabbar button,
.student-fb-side-menu button,
.student-fb-composer-actions button,
.student-fb-filter-actions button,
.student-fb-view-switch button,
.student-fb-view-more{
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  color:#0f172a;
  font-weight:900;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(15,23,42,.10);
  cursor:pointer;
}
.student-fb-action-btn{
  min-width:178px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  padding:12px 16px;
  color:#15803d;
}
.student-fb-avatar-wrap{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:4;
}
.student-fb-avatar{
  width:150px;
  height:150px;
  border-radius:50%;
  border:9px solid #fff;
  background:linear-gradient(135deg,#e0f2fe,#dbeafe);
  color:#0f49ff;
  display:grid;
  place-items:center;
  font-size:56px;
  font-weight:1000;
  box-shadow:0 16px 30px rgba(15,23,42,.22);
  overflow:hidden;
}
.student-fb-online-dot{
  position:absolute;
  right:15px;
  bottom:13px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#22c55e;
  border:5px solid #fff;
  box-shadow:0 8px 14px rgba(34,197,94,.24);
}
.student-fb-identity-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(226,232,240,.85);
  border-top:0;
  border-radius:0 0 26px 26px;
  padding:54px 24px 24px;
  text-align:center;
  box-shadow:0 14px 34px rgba(15,23,42,.08);
}
.student-fb-name-row{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.student-fb-stars{
  color:#f59e0b;
  font-size:34px;
  letter-spacing:5px;
  text-shadow:0 4px 7px rgba(245,158,11,.28);
  white-space:nowrap;
}
.student-fb-name-block h2{
  margin:0;
  font-size:46px;
  line-height:1.05;
  color:#111827;
  letter-spacing:-.04em;
  text-shadow:0 4px 8px rgba(15,23,42,.16);
}
.student-fb-name-block p{
  display:inline-flex;
  margin:12px 0 0;
  padding:10px 22px;
  border:1px solid rgba(34,197,94,.20);
  border-radius:999px;
  background:#fff;
  color:#16a34a;
  font-weight:1000;
  box-shadow:0 8px 14px rgba(15,23,42,.10);
}
.student-fb-pill-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:16px;
}
.student-fb-pill-row span{
  border:1px solid #dbeafe;
  border-radius:999px;
  background:#f8fbff;
  color:#0b2d75;
  font-size:12px;
  font-weight:900;
  padding:8px 11px;
}
.student-fb-settings-btn{
  position:absolute;
  right:24px;
  bottom:22px;
  padding:13px 20px;
}
.student-fb-tabbar{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  border:1px solid rgba(226,232,240,.85);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
  overflow-x:auto;
}
.student-fb-tabbar button{
  min-height:46px;
  padding:0 18px;
  box-shadow:none;
  color:#475569;
  white-space:nowrap;
}
.student-fb-tabbar button.active{
  color:#0f49ff;
  border-color:#dbeafe;
  box-shadow:inset 0 -4px 0 #0f49ff;
}
.student-fb-tabbar .student-fb-more-btn{
  margin-left:auto;
  min-width:64px;
  font-size:22px;
  color:#0f172a;
  box-shadow:0 8px 16px rgba(15,23,42,.10);
}
.student-fb-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr) 270px;
  gap:18px;
  align-items:start;
  margin-top:18px;
}
.student-fb-left-column,
.student-fb-feed-column,
.student-fb-right-column{
  display:grid;
  gap:16px;
}
.student-fb-stats-card,
.student-fb-side-menu,
.student-fb-composer-card,
.student-fb-feed-filter-card,
.student-fb-post-card,
.student-fb-students-card,
.student-fb-about-card{
  border:1px solid rgba(226,232,240,.92);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.student-fb-stats-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:center;
  overflow:hidden;
}
.student-fb-stats-card div{
  padding:19px 10px;
}
.student-fb-stats-card div + div{
  border-left:1px solid #e5e7eb;
}
.student-fb-stats-card span{
  display:block;
  color:#334155;
  font-weight:900;
  font-size:14px;
}
.student-fb-stats-card strong{
  display:block;
  margin-top:8px;
  color:#0f49ff;
  font-size:24px;
  font-weight:1000;
}
.student-fb-side-menu{
  padding:10px;
  gap:8px;
  display:grid;
}
.student-fb-side-menu button{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  justify-content:flex-start;
  box-shadow:0 6px 12px rgba(15,23,42,.06);
}
.student-fb-side-menu span{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
}
.student-fb-art-card{
  min-height:130px;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(135deg,#e0f2fe,#fff7ed 45%,#dcfce7);
  box-shadow:0 10px 22px rgba(15,23,42,.08);
}
.student-fb-art-card span{
  position:absolute;
  bottom:-18px;
  width:70px;
  height:70px;
  border-radius:45% 55% 50% 50%;
  background:#22c55e;
}
.student-fb-art-card span:nth-child(1){left:10px;background:#22c55e}.student-fb-art-card span:nth-child(2){left:55px;background:#f97316}.student-fb-art-card span:nth-child(3){left:115px;background:#ef4444}.student-fb-art-card span:nth-child(4){right:12px;background:#0ea5e9}
.student-fb-composer-card{
  display:grid;
  grid-template-columns:46px 1fr;
  gap:12px;
  padding:18px;
}
.student-fb-mini-avatar,
.student-fb-student-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#dbeafe,#f1f5f9);
  color:#0f49ff;
  display:grid;
  place-items:center;
  font-weight:1000;
  box-shadow:0 6px 12px rgba(15,23,42,.10);
  overflow:hidden;
}
.student-fb-composer-input{
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:#f8fafc;
  color:#64748b;
  text-align:left;
  padding:0 18px;
  font-weight:800;
}
.student-fb-composer-actions{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.student-fb-composer-actions button{
  min-height:56px;
  box-shadow:0 8px 16px rgba(15,23,42,.08);
}
.student-fb-feed-filter-card{
  padding:18px;
  display:grid;
  gap:14px;
}
.student-fb-feed-filter-card h3{
  margin:0;
  color:#0f49ff;
  font-size:22px;
}
.student-fb-feed-filter-card p{
  margin:5px 0 0;
  color:#64748b;
  font-weight:700;
}
.student-fb-filter-actions,
.student-fb-view-switch{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.student-fb-filter-actions button,
.student-fb-view-switch button{
  padding:11px 16px;
  box-shadow:0 6px 12px rgba(15,23,42,.07);
}
.student-fb-view-switch button.active{
  color:#0f49ff;
  border-color:#bfdbfe;
}
.student-fb-feed-list{
  display:grid;
  gap:16px;
}
.student-fb-post-card{
  padding:18px;
}
.student-fb-post-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.student-fb-post-head strong{
  display:block;
  font-size:16px;
  color:#111827;
}
.student-fb-post-head small{
  display:block;
  color:#64748b;
  font-weight:800;
  margin-top:3px;
}
.student-fb-post-head button{
  margin-left:auto;
  border:0;
  background:transparent;
  font-size:22px;
  color:#64748b;
}
.student-fb-post-meta{
  margin-top:14px;
  color:#64748b;
  font-weight:800;
}
.student-fb-post-card h3{
  margin:8px 0 6px;
  color:#111827;
  font-size:20px;
}
.student-fb-post-card p{
  margin:0;
  color:#334155;
  line-height:1.55;
}
.student-fb-post-footer{
  display:flex;
  gap:18px;
  border-top:1px solid #e5e7eb;
  padding-top:12px;
  margin-top:14px;
  color:#64748b;
  font-weight:900;
}
.student-fb-students-card{
  padding:18px;
}
.student-fb-students-card h3{
  margin:0 0 14px;
  font-size:18px;
  color:#111827;
}
.student-fb-student-list{
  display:grid;
  gap:13px;
}
.student-fb-student-item{
  display:grid;
  grid-template-columns:42px 1fr 36px;
  gap:10px;
  align-items:center;
}
.student-fb-student-item strong,
.student-fb-student-item small{
  display:block;
}
.student-fb-student-item strong{
  color:#111827;
  font-size:14px;
}
.student-fb-student-item small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  margin-top:3px;
}
.student-fb-student-item button{
  width:36px;
  height:36px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  font-weight:1000;
  box-shadow:0 6px 12px rgba(15,23,42,.10);
}
.student-fb-view-more{
  margin-top:16px;
  width:100%;
  min-height:42px;
  color:#0f49ff;
}
.student-fb-empty-state{
  margin:0;
  color:#64748b;
  font-weight:800;
  line-height:1.45;
}
.student-fb-about-card{
  padding:18px;
}
.student-fb-about-card .student-profile-detail-list{
  grid-template-columns:1fr;
}
@media(max-width:1180px){
  .student-fb-layout{grid-template-columns:230px minmax(0,1fr)}
  .student-fb-right-column{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .student-fb-cover-wrap{min-height:260px}.student-fb-cover{height:210px}
  .student-fb-cover-actions{right:14px;top:18px}
  .student-fb-avatar{width:120px;height:120px;font-size:44px;border-width:7px}
  .student-fb-identity-card{padding-top:42px}
  .student-fb-name-block h2{font-size:34px}
  .student-fb-stars{font-size:24px;letter-spacing:2px}
  .student-fb-settings-btn{position:static;margin-top:14px}
  .student-fb-layout{grid-template-columns:1fr}
  .student-fb-right-column{grid-template-columns:1fr}
}
@media(max-width:560px){
  .student-fb-profile-shell{max-width:100%}
  .student-fb-cover-wrap,.student-fb-identity-card,.student-fb-tabbar,.student-fb-stats-card,.student-fb-side-menu,.student-fb-composer-card,.student-fb-feed-filter-card,.student-fb-post-card,.student-fb-students-card,.student-fb-about-card{border-radius:16px}
  .student-fb-cover-actions{position:static;padding:12px;background:#fff;grid-template-columns:1fr}
  .student-fb-action-btn{width:100%}
  .student-fb-cover-wrap{min-height:300px}
  .student-fb-name-row{gap:8px}
  .student-fb-name-block h2{font-size:28px}
  .student-fb-stars{font-size:20px}
  .student-fb-composer-card{grid-template-columns:40px 1fr;padding:14px}
  .student-fb-composer-actions{grid-template-columns:1fr}
  .student-fb-filter-actions,.student-fb-view-switch{display:grid;grid-template-columns:1fr}
  .student-fb-post-footer{justify-content:space-between;gap:8px;font-size:12px}
}

/* Driver Teacher Facebook Profile Style UI — DTH-10
   Scope: Driver Teacher My Profile only. Uses real saved Driver Teacher / SchoolID / assigned transport data. */
.driver-facebook-profile-panel{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.driver-fb-profile-shell{
  max-width:1180px;
  margin:0 auto;
  color:#0f172a;
}
.driver-fb-cover-wrap{
  position:relative;
  min-height:310px;
  border-radius:24px 24px 0 0;
  overflow:visible;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.driver-fb-cover{
  height:250px;
  border-radius:24px 24px 0 0;
  background:
    radial-gradient(circle at 18% 20%,#1d4ed8 0 1.1rem,transparent 1.2rem),
    radial-gradient(circle at 32% 46%,#ef4444 0 1.2rem,transparent 1.25rem),
    radial-gradient(circle at 68% 22%,#f59e0b 0 .75rem,transparent .8rem),
    radial-gradient(circle at 82% 66%,#facc15 0 1.3rem,transparent 1.35rem),
    linear-gradient(168deg,transparent 0 34%,rgba(255,255,255,.96) 34% 43%,transparent 43%),
    linear-gradient(160deg,#0b7cff 0 26%,#60a5fa 26% 34%,transparent 34%),
    linear-gradient(158deg,transparent 0 42%,#ef4444 42% 48%,#facc15 48% 53%,#22c55e 53% 100%);
  background-color:#f8fafc;
}
.driver-fb-cover-actions{
  position:absolute;
  right:22px;
  top:78px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:4;
}
.driver-fb-action-btn,
.driver-fb-settings-btn{
  border:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.92);
  color:#166534;
  font-weight:900;
  border-radius:16px;
  padding:12px 16px;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.driver-fb-avatar-wrap{
  position:absolute;
  left:50%;
  bottom:-55px;
  transform:translateX(-50%);
  width:132px;
  height:132px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
  display:grid;
  place-items:center;
  z-index:5;
}
.driver-fb-avatar{
  width:116px;
  height:116px;
  border-radius:50%;
  background:linear-gradient(135deg,#0f49ff,#22c55e);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:44px;
  font-weight:1000;
  border:4px solid #fff;
  background-repeat:no-repeat;
}
.driver-fb-online-dot{
  position:absolute;
  right:8px;
  bottom:18px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#22c55e;
  border:5px solid #fff;
}
.driver-fb-identity-card{
  position:relative;
  text-align:center;
  padding:74px 24px 22px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-top:0;
  border-radius:0 0 24px 24px;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  margin-bottom:10px;
}
.driver-fb-name-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.driver-fb-stars{
  color:#f59e0b;
  font-size:38px;
  letter-spacing:4px;
  text-shadow:0 4px 8px rgba(245,158,11,.24);
}
.driver-fb-name-block h2{
  margin:0;
  font-size:48px;
  line-height:1;
  color:#0f172a;
  text-shadow:0 6px 12px rgba(15,23,42,.16);
}
.driver-fb-name-block p{
  margin:12px auto 0;
  width:max-content;
  max-width:100%;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 14px rgba(15,23,42,.08);
  padding:9px 22px;
  color:#16a34a;
  font-weight:900;
}
.driver-fb-pill-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}
.driver-fb-pill-row span{
  border:1px solid #dbe7ff;
  background:#f8fbff;
  color:#0b2d75;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
}
.driver-fb-settings-btn{
  position:absolute;
  right:26px;
  bottom:18px;
  color:#0f172a;
}
.driver-fb-tabbar{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  padding:12px 16px;
  margin-bottom:16px;
  box-shadow:0 10px 22px rgba(15,23,42,.07);
  overflow-x:auto;
}
.driver-fb-tabbar button{
  border:0;
  background:transparent;
  border-radius:14px;
  padding:11px 16px;
  color:#334155;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
}
.driver-fb-tabbar button.active{
  color:#0f49ff;
  background:#eef4ff;
  box-shadow:inset 0 -3px 0 #0f49ff;
}
.driver-fb-more-btn{
  margin-left:auto;
  width:52px;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.driver-fb-layout{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 300px;
  gap:18px;
  align-items:start;
}
.driver-fb-left-column,
.driver-fb-feed-column,
.driver-fb-right-column{
  display:grid;
  gap:16px;
}
.driver-fb-stats-card,
.driver-fb-side-menu,
.driver-fb-composer-card,
.driver-fb-feed-filter-card,
.driver-fb-post-card,
.driver-fb-students-card,
.driver-fb-about-card{
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  border-radius:22px;
  box-shadow:0 12px 26px rgba(15,23,42,.07);
}
.driver-fb-stats-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:center;
  overflow:hidden;
}
.driver-fb-stats-card div{
  padding:18px 10px;
}
.driver-fb-stats-card div+div{border-left:1px solid #e2e8f0}
.driver-fb-stats-card span{display:block;color:#334155;font-weight:900;margin-bottom:8px}
.driver-fb-stats-card strong{font-size:24px;color:#0f49ff}
.driver-fb-side-menu{padding:12px;gap:9px;display:grid}
.driver-fb-side-menu button{
  border:1px solid #e6ebf4;
  background:#fff;
  border-radius:16px;
  padding:13px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  box-shadow:0 7px 14px rgba(15,23,42,.05);
  text-align:left;
}
.driver-fb-side-menu span{font-size:22px;width:30px;text-align:center}
.driver-fb-art-card{
  min-height:190px;
  border-radius:24px;
  background:
    radial-gradient(circle at 22% 82%,#16a34a 0 18px,transparent 19px),
    radial-gradient(circle at 74% 72%,#f97316 0 24px,transparent 25px),
    linear-gradient(160deg,transparent 0 58%,#22c55e 58% 100%),
    linear-gradient(145deg,#eff6ff,#ffffff 55%,#fef3c7);
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 12px 26px rgba(15,23,42,.07);
}
.driver-fb-composer-card{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:12px;
  padding:18px;
}
.driver-fb-mini-avatar,
.driver-fb-student-avatar{
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(135deg,#0f49ff,#22c55e);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:1000;
  background-repeat:no-repeat;
}
.driver-fb-composer-input{
  border:1px solid #e2e8f0;
  background:#f8fafc;
  color:#64748b;
  border-radius:18px;
  padding:0 18px;
  text-align:left;
  font-weight:800;
  cursor:pointer;
}
.driver-fb-composer-actions{
  grid-column:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.driver-fb-composer-actions button,
.driver-fb-filter-actions button,
.driver-fb-view-switch button,
.driver-fb-post-actions button,
.driver-fb-view-more{
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius:14px;
  padding:11px 13px;
  font-weight:900;
  color:#0f172a;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(15,23,42,.05);
}
.driver-fb-feed-filter-card{padding:18px;display:grid;gap:14px}
.driver-fb-feed-filter-card h3{margin:0;color:#0f49ff}
.driver-fb-feed-filter-card p{margin:4px 0 0;color:#64748b;font-weight:700}
.driver-fb-filter-actions,.driver-fb-view-switch,.driver-fb-post-actions{display:flex;gap:10px;flex-wrap:wrap}
.driver-fb-view-switch button.active{color:#0f49ff;box-shadow:inset 0 -3px 0 #0f49ff}
.driver-fb-feed-list{display:grid;gap:16px}
.driver-fb-post-card{padding:18px}
.driver-fb-post-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.driver-fb-post-head strong{display:block;color:#0f172a}
.driver-fb-post-head small{display:block;color:#64748b;font-weight:800}
.driver-fb-post-card p{color:#334155;line-height:1.55;margin:8px 0}
.driver-fb-students-card,.driver-fb-about-card{padding:18px}
.driver-fb-students-card h3,.driver-fb-about-card h4{margin:0 0 14px;color:#0f172a}
.driver-fb-student-list{display:grid;gap:12px}
.driver-fb-student-row{display:grid;grid-template-columns:42px 1fr 38px;gap:10px;align-items:center}
.driver-fb-student-row strong{display:block;color:#0f172a;font-size:14px}
.driver-fb-student-row small{display:block;color:#64748b;font-size:12px;font-weight:800}
.driver-fb-student-row button{border:0;background:#fff;border-radius:12px;box-shadow:0 6px 14px rgba(15,23,42,.12);font-size:20px;font-weight:900;cursor:pointer}
.driver-fb-empty-state{color:#64748b;font-weight:800;margin:0;line-height:1.45}
.driver-fb-view-more{width:100%;margin-top:14px;color:#0f49ff}
.driver-fb-about-grid{grid-template-columns:1fr !important;gap:10px !important}
.driver-fb-about-grid article{box-shadow:none !important}
.driver-profile-note{margin-top:14px;color:#64748b;font-weight:800;text-align:center}
@media(max-width:1100px){
  .driver-fb-layout{grid-template-columns:1fr}
  .driver-fb-right-column{grid-template-columns:1fr 1fr}
  .driver-fb-settings-btn{position:static;margin-top:14px}
}
@media(max-width:720px){
  .driver-fb-cover-wrap{min-height:245px}
  .driver-fb-cover{height:190px}
  .driver-fb-cover-actions{right:12px;top:18px}
  .driver-fb-action-btn{padding:9px 11px;font-size:12px}
  .driver-fb-avatar-wrap{width:104px;height:104px;bottom:-45px}
  .driver-fb-avatar{width:90px;height:90px;font-size:34px}
  .driver-fb-identity-card{padding-top:62px}
  .driver-fb-name-block h2{font-size:32px}
  .driver-fb-stars{font-size:26px}
  .driver-fb-right-column{grid-template-columns:1fr}
  .driver-fb-composer-card{grid-template-columns:1fr}
  .driver-fb-mini-avatar{display:none}
  .driver-fb-composer-actions{grid-column:1;grid-template-columns:1fr}
  .driver-fb-composer-input{min-height:52px}
}

/* Parent Facebook Profile Style UI — PAR-7
   Scope: Parent My Profile only. Uses real saved Parent / linked StudentID / same SchoolID data. */
.parent-facebook-profile-panel{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}
.parent-fb-profile-shell{
  max-width:1180px;
  margin:0 auto;
  color:#0f172a;
}
.parent-fb-cover-wrap{
  position:relative;
  min-height:310px;
  border-radius:24px 24px 0 0;
  overflow:visible;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.parent-fb-cover{
  height:250px;
  border-radius:24px 24px 0 0;
  background:
    radial-gradient(circle at 18% 20%,#1d4ed8 0 1.1rem,transparent 1.2rem),
    radial-gradient(circle at 32% 46%,#ef4444 0 1.2rem,transparent 1.25rem),
    radial-gradient(circle at 68% 22%,#f59e0b 0 .75rem,transparent .8rem),
    radial-gradient(circle at 82% 66%,#facc15 0 1.3rem,transparent 1.35rem),
    linear-gradient(168deg,transparent 0 34%,rgba(255,255,255,.96) 34% 43%,transparent 43%),
    linear-gradient(160deg,#0b7cff 0 26%,#60a5fa 26% 34%,transparent 34%),
    linear-gradient(158deg,transparent 0 42%,#ef4444 42% 48%,#facc15 48% 53%,#22c55e 53% 100%);
  background-color:#f8fafc;
}
.parent-fb-cover-actions{
  position:absolute;
  right:22px;
  top:78px;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:4;
}
.parent-fb-action-btn,
.parent-fb-settings-btn{
  border:1px solid rgba(226,232,240,.9);
  background:rgba(255,255,255,.92);
  color:#166534;
  font-weight:900;
  border-radius:16px;
  padding:12px 16px;
  box-shadow:0 10px 22px rgba(15,23,42,.12);
  display:inline-flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
}
.parent-fb-avatar-wrap{
  position:absolute;
  left:50%;
  bottom:-55px;
  transform:translateX(-50%);
  width:132px;
  height:132px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.16);
  display:grid;
  place-items:center;
  z-index:5;
}
.parent-fb-avatar{
  width:116px;
  height:116px;
  border-radius:50%;
  background:linear-gradient(135deg,#0f49ff,#22c55e);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:44px;
  font-weight:1000;
  border:4px solid #fff;
}
.parent-fb-online-dot{
  position:absolute;
  right:8px;
  bottom:18px;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#22c55e;
  border:5px solid #fff;
}
.parent-fb-identity-card{
  position:relative;
  text-align:center;
  padding:74px 24px 22px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  border-top:0;
  border-radius:0 0 24px 24px;
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.parent-fb-identity-card h3{
  margin:0;
  font-size:clamp(34px,5vw,58px);
  line-height:1;
  letter-spacing:-.04em;
  color:#0f172a;
  text-shadow:0 4px 10px rgba(15,23,42,.18);
}
.parent-fb-stars{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-bottom:10px;
  font-size:34px;
  filter:drop-shadow(0 4px 5px rgba(245,158,11,.35));
}
.parent-fb-role-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  padding:10px 32px;
  border-radius:999px;
  background:#fff;
  color:#16a34a;
  font-weight:900;
  box-shadow:0 8px 20px rgba(15,23,42,.12), inset 0 0 0 1px rgba(226,232,240,.9);
}
.parent-fb-meta-row{
  margin:16px auto 0;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  color:#64748b;
  font-size:13px;
}
.parent-fb-meta-row span{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:7px 12px;
}
.parent-fb-settings-btn{
  position:absolute;
  right:24px;
  bottom:24px;
  color:#0f172a;
}
.parent-fb-tabs{
  margin:10px 0 16px;
  background:#fff;
  border:1px solid rgba(226,232,240,.95);
  box-shadow:0 8px 22px rgba(15,23,42,.08);
  border-radius:18px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.parent-fb-tabs button{
  border:0;
  background:transparent;
  padding:12px 16px;
  border-radius:12px;
  font-weight:900;
  color:#334155;
}
.parent-fb-tabs button.active{
  color:#1663ff;
  background:#eef6ff;
  box-shadow:inset 0 -3px 0 #1663ff;
}
.parent-fb-more-btn{
  margin-left:auto;
  background:#fff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.parent-fb-grid{
  display:grid;
  grid-template-columns:280px minmax(0,1fr) 280px;
  gap:18px;
  align-items:start;
}
.parent-fb-left,
.parent-fb-center,
.parent-fb-right{
  display:grid;
  gap:14px;
}
.parent-fb-left button,
.parent-fb-side-card button,
.parent-fb-action-row button,
.parent-fb-toolbar-actions button,
.parent-fb-view-switch button{
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  border-radius:16px;
  padding:13px 16px;
  font-weight:900;
  text-align:left;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.parent-fb-stat-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  text-align:center;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
}
.parent-fb-stat-card article+article{border-left:1px solid #e2e8f0;}
.parent-fb-stat-card span{display:block;color:#475569;font-weight:800;font-size:13px;}
.parent-fb-stat-card strong{display:block;margin-top:6px;font-size:28px;color:#1663ff;}
.parent-fb-landscape{
  min-height:150px;
  border-radius:22px;
  background:
    radial-gradient(circle at 12% 70%,#22c55e 0 24px,transparent 25px),
    radial-gradient(circle at 28% 75%,#16a34a 0 20px,transparent 21px),
    linear-gradient(145deg,#f8fafc 0 46%,transparent 47%),
    linear-gradient(150deg,#38bdf8 0 28%,#facc15 28% 38%,#22c55e 38% 58%,#fb923c 58% 100%);
  box-shadow:inset 0 0 0 1px rgba(226,232,240,.9),0 8px 18px rgba(15,23,42,.08);
}
.parent-fb-composer,
.parent-fb-feed-toolbar,
.parent-fb-view-switch,
.parent-fb-post-card,
.parent-fb-side-card{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:20px;
  box-shadow:0 8px 18px rgba(15,23,42,.08);
  padding:18px;
}
.parent-fb-composer{
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  align-items:center;
}
.parent-fb-mini-avatar,
.parent-fb-child-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#0f49ff,#22c55e);
  color:#fff;
  font-weight:1000;
}
.parent-fb-composer-input{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:15px 18px;
  color:#64748b;
  font-weight:800;
}
.parent-fb-action-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.parent-fb-action-row button{text-align:center;}
.parent-fb-feed-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.parent-fb-feed-toolbar span{display:block;color:#64748b;font-size:13px;margin-top:3px;}
.parent-fb-toolbar-actions{display:flex;gap:10px;}
.parent-fb-view-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;}
.parent-fb-view-switch button{text-align:center;box-shadow:none;}
.parent-fb-view-switch button.active{color:#1663ff;box-shadow:inset 0 -3px 0 #1663ff;}
.parent-fb-post-head{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:12px;
  align-items:center;
}
.parent-fb-post-head small{display:block;color:#64748b;margin-top:3px;}
.parent-fb-post-tags{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
  color:#64748b;
  font-size:13px;
}
.parent-fb-post-tags span{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.parent-fb-post-card h4{margin:16px 0 8px;font-size:22px;}
.parent-fb-post-card p{margin:0 0 12px;color:#334155;line-height:1.55;}
.parent-fb-post-card a{color:#16a34a;font-weight:900;text-decoration:none;}
.parent-fb-post-footer{
  border-top:1px solid #e2e8f0;
  margin-top:14px;
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#64748b;
  font-size:13px;
  flex-wrap:wrap;
}
.parent-fb-child-card{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:12px;
  align-items:center;
  margin:12px 0;
}
.parent-fb-child-card small{display:block;color:#64748b;line-height:1.35;margin-top:3px;}
.parent-fb-side-card h4{margin:0 0 12px;}
.parent-fb-side-card p{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  margin:0;
  border-bottom:1px solid #e2e8f0;
  color:#64748b;
}
.parent-fb-side-card p:last-child{border-bottom:0;}
.parent-fb-side-card b{color:#0f172a;text-align:right;}
.parent-fb-side-card button{width:100%;text-align:center;color:#1663ff;}
@media (max-width:1100px){
  .parent-fb-grid{grid-template-columns:240px minmax(0,1fr);}
  .parent-fb-right{grid-column:1/-1;grid-template-columns:1fr 1fr;}
}
@media (max-width:780px){
  .parent-fb-cover{height:190px;}
  .parent-fb-cover-actions{top:18px;right:14px;}
  .parent-fb-identity-card{padding-top:70px;}
  .parent-fb-identity-card h3{font-size:36px;}
  .parent-fb-settings-btn{position:static;margin-top:14px;}
  .parent-fb-tabs{overflow-x:auto;}
  .parent-fb-grid{grid-template-columns:1fr;}
  .parent-fb-right{grid-template-columns:1fr;}
  .parent-fb-feed-toolbar,.parent-fb-post-footer{display:grid;}
}

/* Founder Final Working STEP13 — Final UI / Mobile / Desktop Safe Polish
   Scope: Founder dashboard only. Logic and role dashboards are untouched. */
.founder-dashboard-body,
body:has(.founder-final-shell),
body:has(.bs-side-link){
  overflow-x:hidden;
}

#founderLegacySections,
#founderDashboardOverview,
.foundation-dashboard,
.bs-dashboard-grid,
.bs-foundation-grid,
.bs-summary-grid,
.bs-control-grid{
  max-width:100%;
}

#founderLegacySections table,
.foundation-dashboard table,
.bs-table-wrap table,
.table-panel table{
  min-width:max-content;
}

.bs-table-wrap,
.table-panel,
.founder-table-scroll,
.foundation-table-scroll,
#founderLegacySections .table-panel{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.bs-side-link,
.sidebar-nav a{
  white-space:normal;
  line-height:1.25;
}

@media (max-width:1200px){
  .bs-dashboard-grid,
  .bs-foundation-grid,
  .bs-summary-grid,
  .bs-control-grid,
  .dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .dashboard-body{
    display:block;
  }
  .sidebar{
    width:100%;
    position:relative;
    max-height:none;
  }
  .sidebar-nav,
  .bs-sidebar-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .dashboard-main{
    width:100%;
    padding:16px;
  }
  .dash-header,
  .bs-page-header,
  .foundation-header{
    flex-direction:column;
    align-items:stretch;
  }
  .header-actions,
  .bs-header-actions{
    justify-content:flex-start;
  }
}

@media (max-width:650px){
  .sidebar-nav,
  .bs-sidebar-nav,
  .bs-dashboard-grid,
  .bs-foundation-grid,
  .bs-summary-grid,
  .bs-control-grid,
  .dashboard-grid,
  .stats-row,
  .grid-form{
    grid-template-columns:1fr;
  }
  .dashboard-main{
    padding:12px;
  }
  .panel,
  .form-panel,
  .table-panel,
  .empty-state,
  .foundation-card,
  .bs-card{
    border-radius:16px;
    padding:14px;
  }
  .profile,
  .header-actions,
  .bs-header-actions{
    width:100%;
  }
  .logout-btn,
  .header-actions button,
  .bs-header-actions button{
    min-height:44px;
  }
}


/* ADMIN FINAL STEP12 — Final UI / Mobile / Desktop safety */
.admin-final-step12-responsive-safety,
.admin-final-step12-responsive-safety *{
  box-sizing:border-box;
}
.admin-dashboard-body{
  overflow-x:hidden;
}
.admin-main,
.admin-page-section,
.admin-dashboard-content,
.admin-section,
.admin-panel,
.admin-card{
  max-width:100%;
}
.admin-page-section{
  overflow-wrap:anywhere;
}
.admin-page-section table,
.admin-page-section .table,
.admin-table,
.admin-live-table{
  width:100%;
  max-width:100%;
}
.admin-page-section .table-wrap,
.admin-page-section .admin-table-wrap,
.admin-page-section .table-responsive,
.admin-table-responsive{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.admin-page-section img,
.admin-page-section video,
.admin-page-section iframe{
  max-width:100%;
}
.admin-page-section input,
.admin-page-section select,
.admin-page-section textarea,
.admin-page-section button{
  max-width:100%;
}
.admin-page-section .admin-dash-hero,
.admin-page-section .admin-class-hero,
.admin-page-section .admin-step-panel,
.admin-page-section .admin-final-panel{
  max-width:100%;
}
@media (max-width: 1100px){
  .admin-main{
    padding-left:18px;
    padding-right:18px;
  }
  .admin-dash-hero,
  .admin-class-hero,
  .admin-final-hero{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width: 760px){
  .admin-dashboard-body{
    min-width:0;
  }
  .admin-sidebar,
  .sidebar,
  aside{
    max-width:100%;
  }
  .admin-main{
    width:100%;
    padding:14px;
  }
  .admin-page-section{
    padding-left:0;
    padding-right:0;
  }
  .admin-dash-hero,
  .admin-class-hero,
  .admin-final-hero,
  .admin-class-panel,
  .admin-step-panel,
  .admin-final-panel{
    border-radius:18px;
    padding:16px;
  }
  .admin-dash-hero h2,
  .admin-class-hero h2,
  .admin-final-hero h2{
    font-size:22px;
  }
  .admin-card-grid,
  .admin-dash-grid,
  .admin-class-grid,
  .admin-final-grid,
  .admin-stat-grid{
    grid-template-columns:1fr !important;
  }
  .admin-action-row,
  .admin-filter-row,
  .admin-toolbar,
  .admin-form-row{
    flex-direction:column;
    align-items:stretch;
  }
  .admin-action-row > *,
  .admin-filter-row > *,
  .admin-toolbar > *,
  .admin-form-row > *{
    width:100%;
  }
  .admin-page-section table{
    min-width:720px;
  }
}
@media (max-width: 480px){
  .admin-main{
    padding:10px;
  }
  .admin-dash-hero,
  .admin-class-hero,
  .admin-final-hero,
  .admin-class-panel,
  .admin-step-panel,
  .admin-final-panel{
    padding:14px;
    border-radius:16px;
  }
  .admin-page-section table{
    min-width:640px;
  }
}

/* ===== Founder Settings — desktop/mobile full-width display fix ===== */
body.bs-nav-settings #founderLegacySections > .dashboard-main,
body.bs-nav-settings #founderSettingsControlCenterSection,
body.bs-nav-settings #founderSettingsControlCenter{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

body.bs-nav-settings #founderLegacySections > .dashboard-main{
  display:block;
  padding:0;
}

#founderSettingsControlCenterSection.bs-set-single-feature .set32-panel.bs-set-panel-on,
#founderSettingsControlCenterSection.bs-set-single-feature .set32-header.bs-set-panel-on,
#founderSettingsControlCenterSection.bs-set-single-feature #founderSetFeatureHint{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

@media (min-width:981px){
  body.bs-nav-settings #founderSettingsControlCenterSection.bs-set-single-feature .set32-panel.bs-set-panel-on .set32-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.bs-nav-settings #founderSettingsControlCenterSection.bs-set-single-feature #setMgmtSchoolIdFormatView.bs-set-panel-on .set32-card-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body.bs-nav-settings #founderSettingsControlCenterSection:not(.bs-set-single-feature) .set32-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body.bs-nav-settings #founderSettingsControlCenterSection:not(.bs-set-single-feature) .set32-action-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:980px){
  body.bs-nav-settings .bs-main.asm-clean-main{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-grid,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-card-grid,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-form-grid,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-action-grid,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-summary-bar,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-detail-grid{
    grid-template-columns:1fr!important;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-header{
    flex-direction:column;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-toolbar{
    justify-content:stretch;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-toolbar input,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-toolbar select,
  body.bs-nav-settings #founderSettingsControlCenterSection .set32-toolbar button{
    width:100%;
    min-width:0;
    flex:1 1 100%;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-card{
    min-height:auto;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-card > div span{
    word-break:break-word;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100%;
  }

  body.bs-nav-settings #founderSettingsControlCenterSection .set32-table{
    min-width:640px;
  }

  body.bs-nav-settings #founderSetFeatureHint{
    font-size:12px;
    padding:10px 12px;
  }
}

@media (max-width:900px){
  body.bs-nav-settings .bs-founder-app{
    grid-template-columns:1fr;
  }

  body.bs-nav-settings .bs-sidebar{
    position:relative;
    height:auto;
  }
}

.admin-payment-bank-dialog{
  border:0;
  border-radius:18px;
  padding:0;
  max-width:640px;
  width:min(92vw,640px);
  box-shadow:0 24px 48px rgba(15,23,42,.2);
}
.admin-payment-bank-dialog::backdrop{
  background:rgba(15,23,42,.45);
}
.admin-payment-bank-dialog-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e2e8f0;
}
.admin-payment-bank-dialog-head h4{
  margin:0;
  color:#0f2a5f;
  font-weight:900;
}
.admin-payment-bank-dialog-body{
  padding:18px;
  color:#334155;
  font-weight:700;
  max-height:70vh;
  overflow:auto;
}
.admin-payment-bank-dialog-body img{
  max-width:100%;
  border-radius:12px;
  border:1px solid #e2e8f0;
}

/* Founder Admin List — dedicated print area (screen) */
#founderAdminPrintArea.founder-admin-print-area{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:normal;
}

#founderAdminPrintArea .founder-admin-print-meta{
  margin:0 0 8px;
  font-size:12px;
  color:#4b5563;
}

#founderAdminPrintArea .founder-admin-print-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

@media print{
  @page{
    size:A4 portrait;
    margin:10mm;
  }

  html,
  body{
    height:auto !important;
    min-height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#ffffff !important;
  }

  body.bs-admin-print-active *{
    visibility:hidden !important;
  }

  body.bs-admin-print-active #founderAdminPrintArea,
  body.bs-admin-print-active #founderAdminPrintArea *{
    visibility:visible !important;
  }

  body.bs-admin-print-active #founderAdminPrintArea{
    display:block !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:none !important;
    border:0 !important;
    height:auto !important;
    min-height:auto !important;
    page-break-after:avoid !important;
    break-after:avoid !important;
    clip:auto !important;
    overflow:visible !important;
  }

  #founderAdminPrintArea h1,
  #founderAdminPrintArea h2,
  #founderAdminPrintArea p{
    margin:0 0 6px 0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }

  #founderAdminPrintArea table{
    width:100% !important;
    border-collapse:collapse !important;
    table-layout:fixed !important;
    margin:0 !important;
  }

  #founderAdminPrintArea th,
  #founderAdminPrintArea td{
    border:1px solid #9ca3af !important;
    padding:3px 4px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
    white-space:normal !important;
    vertical-align:top !important;
  }

  #founderAdminPrintArea th{
    font-weight:700 !important;
    background:#f3f4f6 !important;
  }

  body.bs-admin-print-active #founderAdminPrintArea > *:last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    page-break-after:avoid !important;
    break-after:avoid !important;
  }

  body.bs-admin-print-active .bs-founder-app,
  body.bs-admin-print-active .bs-sidebar,
  body.bs-admin-print-active .bs-topbar,
  body.bs-admin-print-active #founderAdminAccountsManagementSection{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    page-break-before:avoid !important;
    page-break-after:avoid !important;
    break-before:avoid !important;
    break-after:avoid !important;
  }

  #founderAdminPrintArea thead{
    display:table-header-group !important;
  }

  #founderAdminPrintArea tbody{
    display:table-row-group !important;
  }

  #founderAdminPrintArea tr{
    display:table-row !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }

  #founderAdminPrintArea th,
  #founderAdminPrintArea td{
    display:table-cell !important;
  }
}

/* Founder Teacher List — dedicated card print area (screen) */
#founderTeacherPrintArea{
  display:none;
}

body.bs-teacher-card-print-active #founderTeacherPrintArea{
  display:block;
}

@media print{
  @page{
    size:A4 portrait;
    margin:10mm;
  }

  body.bs-teacher-card-print-active,
  body.bs-teacher-card-print-active html{
    height:auto !important;
    min-height:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:#ffffff !important;
  }

  body.bs-teacher-card-print-active *{
    visibility:hidden !important;
  }

  body.bs-teacher-card-print-active #founderTeacherPrintArea,
  body.bs-teacher-card-print-active #founderTeacherPrintArea *{
    visibility:visible !important;
  }

  body.bs-teacher-card-print-active > *:not(#founderTeacherPrintArea){
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    page-break-before:avoid !important;
    page-break-after:avoid !important;
    break-before:avoid !important;
    break-after:avoid !important;
  }

  body.bs-teacher-card-print-active .bs-founder-app,
  body.bs-teacher-card-print-active .bs-sidebar,
  body.bs-teacher-card-print-active .bs-topbar,
  body.bs-teacher-card-print-active #founderTeacherStudentOverviewSection,
  body.bs-teacher-card-print-active #teacherManagementControlCenterUiFoundation{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    overflow:hidden !important;
    margin:0 !important;
    padding:0 !important;
    page-break-before:avoid !important;
    page-break-after:avoid !important;
    break-before:avoid !important;
    break-after:avoid !important;
  }

  body.bs-teacher-card-print-active #founderTeacherPrintArea{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    left:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:auto !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:#ffffff !important;
    color:#111827 !important;
    box-shadow:none !important;
    border:0 !important;
    height:auto !important;
    min-height:0 !important;
    page-break-after:avoid !important;
    break-after:avoid !important;
    clip:auto !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }

  #founderTeacherPrintArea .teacher-print-report{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  #founderTeacherPrintArea .teacher-print-header{
    width:100% !important;
    margin:0 0 12px 0 !important;
    padding:0 0 10px 0 !important;
    border-bottom:1px solid #d1d5db !important;
    box-sizing:border-box !important;
  }

  #founderTeacherPrintArea .teacher-print-header h1{
    margin:0 !important;
    font-size:20px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    color:#111827 !important;
  }

  #founderTeacherPrintArea .teacher-print-header h2{
    margin:4px 0 0 0 !important;
    font-size:15px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    color:#1f2937 !important;
  }

  #founderTeacherPrintArea .teacher-print-header p{
    margin:6px 0 0 0 !important;
    font-size:11px !important;
    line-height:1.3 !important;
    color:#4b5563 !important;
  }

  #founderTeacherPrintArea .teacher-print-card-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
  }

  #founderTeacherPrintArea .teacher-print-card{
    border:1px solid #d1d5db !important;
    border-radius:10px !important;
    padding:10px 12px !important;
    background:#ffffff !important;
    box-shadow:none !important;
    break-inside:avoid !important;
    page-break-inside:avoid !important;
    box-sizing:border-box !important;
    min-width:0 !important;
    width:auto !important;
  }

  #founderTeacherPrintArea .teacher-print-card:only-child,
  #founderTeacherPrintArea .teacher-print-card:last-child:nth-child(odd){
    grid-column:1 / -1 !important;
  }

  #founderTeacherPrintArea .teacher-print-card:only-child{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:18px !important;
    row-gap:4px !important;
    padding:12px 14px !important;
  }

  #founderTeacherPrintArea .teacher-print-card:only-child .teacher-print-card-top{
    grid-column:1 / -1 !important;
    margin:0 0 8px 0 !important;
    padding:0 0 8px 0 !important;
  }

  #founderTeacherPrintArea .teacher-print-card-top{
    display:flex !important;
    justify-content:space-between !important;
    gap:6px !important;
    align-items:flex-start !important;
    margin:0 0 6px 0 !important;
    padding:0 0 5px 0 !important;
    border-bottom:1px solid #e5e7eb !important;
  }

  #founderTeacherPrintArea .teacher-print-card h3{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    color:#111827 !important;
  }

  #founderTeacherPrintArea .teacher-print-status{
    font-size:9px !important;
    line-height:1.1 !important;
    border:1px solid #9ca3af !important;
    border-radius:999px !important;
    padding:4px 8px !important;
    color:#111827 !important;
    white-space:nowrap !important;
    background:#f9fafb !important;
  }

  #founderTeacherPrintArea .teacher-print-card p{
    margin:0 0 4px 0 !important;
    font-size:10px !important;
    line-height:1.35 !important;
    color:#111827 !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }

  #founderTeacherPrintArea .teacher-print-card p:last-child{
    margin-bottom:0 !important;
  }

  #founderTeacherPrintArea .teacher-print-card strong{
    font-weight:700 !important;
  }

  #founderTeacherPrintArea > *:last-child,
  #founderTeacherPrintArea .teacher-print-report > *:last-child{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
    page-break-after:avoid !important;
    break-after:avoid !important;
  }
}

/* Founder Create Teacher form */
.founder-tch-create-form-wide{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.founder-tch-create-section{
  background:linear-gradient(145deg,#ffffff,#f8fbff);
  border:1px solid rgba(213,222,238,.95);
  border-radius:20px;
  padding:16px 18px;
  box-shadow:0 10px 24px rgba(8,41,92,.06);
}

.founder-tch-create-section h4{
  margin:0 0 12px;
  color:#0f2a5f;
  font-size:16px;
  font-weight:900;
}

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

.founder-tch-create-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:800;
  color:#475467;
}

.founder-tch-create-grid label b{
  color:#be123c;
}

.founder-tch-create-grid input,
.founder-tch-create-grid select,
.founder-tch-create-grid textarea{
  width:100%;
  border:1px solid #d0d5dd;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
  font:inherit;
  font-weight:700;
  color:#101828;
  box-sizing:border-box;
}

.founder-tch-create-grid textarea{
  resize:vertical;
  min-height:72px;
}

.founder-tch-create-span-2{
  grid-column:span 2;
}

.founder-tch-create-hint{
  font-size:11px;
  font-weight:700;
  color:#64748b;
}

.founder-tch-create-form-wide .locked-input{
  background:#eef6ff;
  color:#1d4ed8;
  cursor:not-allowed;
}

.founder-tch-create-type-help{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.founder-tch-create-type-help div{
  background:#f8fbff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:10px 12px;
}

.founder-tch-create-type-help strong{
  display:block;
  color:#0f172a;
  font-size:13px;
}

.founder-tch-create-type-help span{
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

.founder-tch-create-upload{
  border:2px dashed #cbd5e1;
  border-radius:16px;
  padding:18px;
  text-align:center;
  background:#f8fbff;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}

.founder-tch-create-upload:hover,
.founder-tch-create-upload.is-dragover{
  border-color:#2563eb;
  background:#eff6ff;
}

.founder-tch-create-upload-icon{
  display:block;
  font-size:28px;
  margin-bottom:6px;
}

.founder-tch-create-upload p{
  margin:0;
  font-weight:800;
  color:#0f172a;
}

.founder-tch-create-upload small{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-weight:700;
}

.founder-tch-create-photo-preview{
  display:block;
  max-width:120px;
  max-height:120px;
  margin:10px auto 0;
  border-radius:12px;
  object-fit:cover;
}

.founder-tch-create-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.founder-tch-create-secondary-btn{
  border:1px solid #cbd5e1;
  border-radius:14px;
  padding:11px 18px;
  min-height:44px;
  background:#fff;
  color:#0f2a5f;
  font-weight:800;
  cursor:pointer;
  font-family:inherit;
}

.founder-tch-create-secondary-btn:hover{
  background:#f8fafc;
}

.founder-tch-create-message{
  margin:0;
}

@media (max-width:900px){
  .founder-tch-create-grid,
  .founder-tch-create-type-help{
    grid-template-columns:1fr;
  }
  .founder-tch-create-span-2{
    grid-column:span 1;
  }
}

.bs-locked-id-field,
.founder-tch-create-form-wide .bs-locked-id-field{
  background:#eef2ff!important;
  color:#1d4ed8!important;
  font-weight:800!important;
  border:1px solid #c7d2fe!important;
  cursor:not-allowed!important;
}

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

.founder-tch-assignment-card{
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:12px 14px;
  background:#fff;
  box-shadow:0 4px 12px rgba(15,23,42,.04);
}

.founder-tch-assignment-card small{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  margin-bottom:4px;
}

.founder-tch-assignment-card strong{
  display:block;
  color:#0f172a;
  font-size:15px;
  line-height:1.35;
  word-break:break-word;
}

.founder-tch-assignment-empty{
  margin:0;
  padding:14px 16px;
  border-radius:14px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
  color:#64748b;
  font-weight:700;
}

.founder-tch-assignment-warning{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:#fffbeb;
  border:1px solid #fcd34d;
  color:#92400e;
  font-weight:700;
  font-size:13px;
}

@media (max-width:900px){
  .founder-tch-assignment-grid{
    grid-template-columns:1fr;
  }
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-form-card-neu,
body.bs-nav-teachers #tch22CreateTeacherView.founder-tch-form-card-neu,
body.bs-nav-teachers #tch22EditTeacherProfile.founder-tch-form-card-neu,
body.bs-nav-teachers #tch22LinkedSchoolView.founder-tch-form-card-neu,
body.bs-nav-teachers #tch22ChipClassAssignmentView,
body.bs-nav-teachers #tch22ChipSubjectAssignmentView{
  background:linear-gradient(145deg,#ffffff 0%,#f3f6fb 100%);
  border:1px solid rgba(255,255,255,.82);
  border-radius:22px;
  box-shadow:8px 8px 18px rgba(163,177,198,.34),-8px -8px 18px rgba(255,255,255,.95);
  padding:22px 24px;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-form-card-neu > h3,
body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-form-card-neu > .tch22-note{
  margin-top:0;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-form-card-neu > h3{
  color:#0f2a5f;
  font-size:20px;
  font-weight:900;
  margin-bottom:6px;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-section{
  background:linear-gradient(145deg,#ffffff,#f8fbff);
  border:1px solid rgba(226,232,240,.85);
  border-radius:18px;
  box-shadow:inset 2px 2px 6px rgba(163,177,198,.12),inset -2px -2px 6px rgba(255,255,255,.92);
  padding:16px 18px;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-section h4{
  display:flex;
  align-items:center;
  gap:8px;
  color:#1e3a8a;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0 0 12px;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-grid input,
body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-grid select,
body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-grid textarea{
  min-height:44px;
  border-radius:14px;
  border:1px solid #dbeafe;
  background:#fff;
  box-shadow:inset 1px 1px 3px rgba(163,177,198,.12);
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-actions{
  margin-top:4px;
  padding-top:18px;
  border-top:1px solid rgba(226,232,240,.9);
}

body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-create-actions .founder-summary-refresh-btn{
  border-radius:14px;
  min-height:46px;
  padding:0 22px;
  font-weight:800;
}

body.bs-nav-teachers #founderTchGroupCreateEdit .bs-teacher-edit-search-panel{
  border-radius:22px;
  box-shadow:8px 8px 18px rgba(163,177,198,.22),-6px -6px 16px rgba(255,255,255,.92);
}

@media (max-width:900px){
  body.bs-nav-teachers #founderTchGroupCreateEdit .founder-tch-form-card-neu{
    padding:16px;
  }
}

body.bs-nav-teachers #founderTchGroupClassSubject .founder-tch-csa-row{
  cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}

body.bs-nav-teachers #founderTchGroupClassSubject .founder-tch-csa-row:hover,
body.bs-nav-teachers #founderTchGroupClassSubject .founder-tch-csa-row:focus{
  background:rgba(219,234,254,.45);
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.25);
}

body.bs-nav-teachers #founderTchGroupClassSubject .founder-tch-csa-notice{
  margin:0 0 12px;
  padding:12px 14px;
  border-radius:14px;
  background:#f8fafc;
  border:1px dashed #cbd5e1;
}

body.bs-nav-teachers #founderTchGroupClassSubject .tch22-table-wrap{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

/* Founder Teacher List — Soft 3D / Neumorphism UI (Teacher Management > Teacher List only) */
body.bs-nav-teachers #founderTeacherStudentOverviewSection{
  --tch-neu-bg:#ecf0f6;
  --tch-neu-surface:#f3f6fb;
  --tch-neu-elev:8px 8px 18px rgba(163,177,198,.42), -8px -8px 18px rgba(255,255,255,.95);
  --tch-neu-elev-sm:5px 5px 12px rgba(163,177,198,.34), -5px -5px 12px rgba(255,255,255,.92);
  --tch-neu-hover:10px 12px 22px rgba(163,177,198,.48), -10px -10px 22px rgba(255,255,255,.98);
  --tch-neu-inset:inset 4px 4px 8px rgba(163,177,198,.28), inset -4px -4px 8px rgba(255,255,255,.92);
  background:linear-gradient(180deg,#eef2f8 0%,#f7f9fc 100%) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:var(--tch-neu-elev-sm) !important;
  border-radius:24px !important;
  overflow:hidden;
}

body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-header h2{
  color:#0f2a5f;
  font-weight:800;
}

body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-actions input,
body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-actions select{
  background:var(--tch-neu-surface);
  border:1px solid rgba(255,255,255,.65);
  border-radius:16px;
  box-shadow:var(--tch-neu-inset);
  color:#1e293b;
  min-height:44px;
}

body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-summary-refresh-btn{
  border:0;
  border-radius:14px;
  padding:11px 18px;
  min-height:44px;
  background:linear-gradient(135deg,#0f2a5f 0%,#2563eb 100%);
  color:#fff;
  font-weight:800;
  box-shadow:0 10px 22px rgba(37,99,235,.28);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-summary-refresh-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 26px rgba(37,99,235,.34);
}

body.bs-nav-teachers .tch-neu-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}

body.bs-nav-teachers .tch-neu-stat-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  border-radius:22px;
  background:var(--tch-neu-surface);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--tch-neu-elev-sm);
  min-width:0;
}

body.bs-nav-teachers .tch-neu-stat-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:22px;
  flex:0 0 auto;
  box-shadow:var(--tch-neu-elev-sm);
}

body.bs-nav-teachers .tch-neu-stat-icon.sky{background:linear-gradient(145deg,#e0f2fe,#f0f9ff)}
body.bs-nav-teachers .tch-neu-stat-icon.mint{background:linear-gradient(145deg,#dcfce7,#f0fdf4)}
body.bs-nav-teachers .tch-neu-stat-icon.rose{background:linear-gradient(145deg,#ffe4e6,#fff1f2)}

body.bs-nav-teachers .tch-neu-stat-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

body.bs-nav-teachers .tch-neu-stat-label{
  font-size:12px;
  font-weight:800;
  color:#64748b;
  letter-spacing:.01em;
}

body.bs-nav-teachers .tch-neu-stat-card strong{
  font-size:28px;
  line-height:1.1;
  color:#0f172a;
  font-weight:900;
}

body.bs-nav-teachers .tch-neu-stat-sub{
  font-size:11px;
  font-weight:700;
  color:#94a3b8;
  margin-top:2px;
}

body.bs-nav-teachers .tch-neu-table-shell{
  background:var(--tch-neu-surface);
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:var(--tch-neu-elev-sm);
  overflow:auto;
  max-width:100%;
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-table{
  min-width:860px;
  background:transparent;
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-table th{
  background:linear-gradient(180deg,#f8fbff,#eef4ff);
  color:#334155;
  font-size:12px;
  font-weight:900;
  padding:14px 16px;
  border-bottom:1px solid #e2e8f0;
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-table td{
  padding:13px 16px;
  border-bottom:1px solid #eef2f7;
  color:#475569;
  font-weight:700;
  font-size:13px;
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-table tbody tr{
  transition:background .16s ease;
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-table tbody tr:hover{
  background:rgba(219,234,254,.35);
}

body.bs-nav-teachers .tch-neu-table-shell .founder-ts-status-badge{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65);
}

body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-card{
  display:flex !important;
  align-items:flex-start;
  gap:12px;
  width:100%;
  min-height:0;
  padding:14px 16px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.72) !important;
  background:var(--tch-neu-surface) !important;
  box-shadow:var(--tch-neu-elev-sm);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:normal;
}

body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--tch-neu-hover);
}

body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-card.active{
  background:linear-gradient(145deg,#edf4ff,#ffffff) !important;
  color:inherit !important;
  box-shadow:var(--tch-neu-hover), inset 0 0 0 1px rgba(37,99,235,.18);
}

body.bs-nav-teachers .tch-neu-action-icon,
body.bs-nav-teachers .tch-neu-tool-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:20px;
  flex:0 0 auto;
  box-shadow:var(--tch-neu-elev-sm);
}

body.bs-nav-teachers .tch-neu-action-icon.blue{background:linear-gradient(145deg,#dbeafe,#eff6ff)}
body.bs-nav-teachers .tch-neu-action-icon.violet{background:linear-gradient(145deg,#ede9fe,#f5f3ff)}
body.bs-nav-teachers .tch-neu-action-icon.amber{background:linear-gradient(145deg,#fef3c7,#fffbeb)}
body.bs-nav-teachers .tch-neu-action-icon.gold{background:linear-gradient(145deg,#fde68a,#fff7ed)}
body.bs-nav-teachers .tch-neu-action-icon.mint{background:linear-gradient(145deg,#bbf7d0,#ecfdf5)}

body.bs-nav-teachers .tch-neu-action-body,
body.bs-nav-teachers .tch-neu-tool-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

body.bs-nav-teachers .tch-neu-action-body strong,
body.bs-nav-teachers .tch-neu-tool-body strong{
  display:block;
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}

body.bs-nav-teachers .tch-neu-action-body small,
body.bs-nav-teachers .tch-neu-tool-body small{
  display:block;
  color:#64748b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
}

body.bs-nav-teachers .tch-neu-action-hint{
  display:block;
  margin-top:4px;
  font-size:11px;
  font-weight:800;
  color:#2563eb;
}

body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-panel{
  background:var(--tch-neu-surface);
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:var(--tch-neu-elev-sm);
}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-profile-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-profile-card,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card{
  min-height:0;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(145deg,#ffffff,#f3f6fb);
  box-shadow:var(--tch-neu-elev-sm);
  align-items:flex-start;
}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card > span{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-size:18px;
  flex:0 0 auto;
  box-shadow:var(--tch-neu-elev-sm);
  background:linear-gradient(145deg,#eef6ff,#ffffff);
}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip.violet,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card:nth-child(2) > span{background:linear-gradient(145deg,#ede9fe,#f5f3ff)}
body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip.mint,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card:nth-child(5) > span{background:linear-gradient(145deg,#dcfce7,#f0fdf4)}
body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip.amber,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card:nth-child(4) > span{background:linear-gradient(145deg,#fef3c7,#fffbeb)}
body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip.rose,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card:nth-child(6) > span{background:linear-gradient(145deg,#ffe4e6,#fff1f2)}
body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-chip.blue,
body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card:nth-child(8) > span{background:linear-gradient(145deg,#dbeafe,#eff6ff)}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card strong{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}

body.bs-nav-teachers #tch22ViewTeacherProfile .tch22-card small{
  color:#64748b;
  font-size:12px;
  font-weight:700;
}

body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tools{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tool-btn{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:100%;
  min-height:0;
  padding:14px 16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.72);
  background:var(--tch-neu-surface);
  box-shadow:var(--tch-neu-elev-sm);
  color:inherit;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}

body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tool-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--tch-neu-hover);
}

body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tool-icon.mint{background:linear-gradient(145deg,#bbf7d0,#ecfdf5)}
body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tool-icon.gold{background:linear-gradient(145deg,#fde68a,#fff7ed)}

body.bs-nav-students .tch-neu-stat-icon,
body.bs-nav-students .tch-neu-stat-sub{
  display:none;
}

body.bs-nav-students .tch-neu-stat-card{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:14px;
  background:#f8fbff;
  border:1px solid #e6edf7;
  border-radius:16px;
  box-shadow:none;
}

body.bs-nav-students .tch-neu-stat-label{
  display:block;
  font-size:12px;
  font-weight:800;
  color:#64748b;
  order:2;
}

body.bs-nav-students .tch-neu-stat-card strong{
  font-size:26px;
  color:#0f172a;
  order:1;
}

@media (max-width:1100px){
  body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-profile-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:700px){
  body.bs-nav-teachers .tch-neu-summary{
    grid-template-columns:1fr;
  }
  body.bs-nav-teachers #founderTchGroupTeacherList .tch-neu-action-grid,
  body.bs-nav-teachers #tch22ExportPrintView .tch-neu-tools,
  body.bs-nav-teachers #tch22ViewTeacherProfile .tch-neu-profile-grid{
    grid-template-columns:1fr;
  }
  body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-actions{
    width:100%;
  }
  body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-actions input,
  body.bs-nav-teachers #founderTeacherStudentOverviewSection .founder-ts-actions select{
    width:100%;
    min-width:0;
  }
}

body.bs-nav-teachers #founderTchGroupLoginSchoolId .founder-tch-safety-summary{
  margin-bottom:12px;
}

body.bs-nav-teachers #founderTchGroupLoginSchoolId .founder-tch-safety-ok{
  margin:0 0 12px;
  padding:10px 14px;
  border-radius:12px;
  background:#ecfdf5;
  color:#047857;
  font-weight:600;
}

body.bs-nav-teachers #founderTchGroupLoginSchoolId .founder-tch-csa-row{
  cursor:pointer;
}

#founderParentPrintArea{
  display:none;
}

body.bs-parent-print-active #founderParentPrintArea{
  display:block!important;
  position:static!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}

@media print{
  body.bs-parent-print-active,
  body.bs-parent-print-active html{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    margin:0!important;
    padding:0!important;
    background:#fff!important;
  }

  body.bs-parent-print-active *{
    visibility:hidden!important;
  }

  body.bs-parent-print-active #founderParentPrintArea,
  body.bs-parent-print-active #founderParentPrintArea *{
    visibility:visible!important;
  }

  body.bs-parent-print-active > *:not(#founderParentPrintArea){
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    page-break-before:avoid!important;
    page-break-after:avoid!important;
  }

  body.bs-parent-print-active .bs-founder-app,
  body.bs-parent-print-active .bs-sidebar,
  body.bs-parent-print-active .bs-topbar,
  body.bs-parent-print-active #founderParentManagementSection,
  body.bs-parent-print-active #founderParentManagementControlCenterUiFoundation{
    display:none!important;
  }

  body.bs-parent-print-active #founderParentPrintArea{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    page-break-before:avoid!important;
    page-break-after:avoid!important;
  }

  #founderParentPrintArea .parent-print-report{
    width:100%;
    margin:0;
    padding:0;
    page-break-inside:avoid;
  }

  #founderParentPrintArea .parent-print-header{
    margin:0 0 10px;
    padding:0 0 8px;
    border-bottom:1px solid #cbd5e1;
    page-break-after:avoid;
  }

  #founderParentPrintArea .parent-print-header h1{
    margin:0;
    font-size:16px;
    font-weight:800;
    color:#0f172a;
  }

  #founderParentPrintArea .parent-print-header h2{
    margin:4px 0 0;
    font-size:13px;
    font-weight:700;
    color:#334155;
  }

  #founderParentPrintArea .parent-print-header p{
    margin:4px 0 0;
    font-size:10px;
    color:#64748b;
  }

  #founderParentPrintArea .parent-print-table{
    width:100%;
    border-collapse:collapse;
    font-size:9px;
    page-break-inside:auto;
  }

  #founderParentPrintArea .parent-print-table th,
  #founderParentPrintArea .parent-print-table td{
    border:1px solid #cbd5e1;
    padding:4px 5px;
    text-align:left;
    vertical-align:top;
    word-break:break-word;
  }

  #founderParentPrintArea .parent-print-table th{
    background:#f1f5f9;
    font-weight:700;
  }

  #founderParentPrintArea .parent-print-table tr{
    page-break-inside:avoid;
    page-break-after:auto;
  }

  #founderParentPrintArea > *:last-child,
  #founderParentPrintArea .parent-print-report > *:last-child{
    page-break-after:avoid!important;
  }

  @page{
    size:A4 portrait;
    margin:12mm;
  }
}

body.bs-nav-parents #founderParGroupParentList .founder-par-list-row{
  cursor:pointer;
}

body.bs-nav-parents #founderParGroupParentList .founder-par-list-row:hover td{
  background:rgba(59,130,246,0.06);
}

body.bs-nav-parents #founderParGroupParentList .founder-par-list-row-active td{
  background:rgba(59,130,246,0.12);
}

body.bs-nav-parents #founderParGroupParentList .founder-par-action-card,
body.bs-nav-parents #founderParGroupParentList .par-group-chip[data-bs-par-feature="print-parents"],
body.bs-nav-parents #founderParGroupParentList .par-group-chip[data-bs-par-feature="export-parents"],
body.bs-nav-parents #founderParGroupParentList .par-group-chip[data-bs-par-feature="parent-list"],
body.bs-nav-parents #founderParGroupParentList .par-group-chip[data-bs-par-feature="view-parent-profile"]{
  cursor:pointer;
}

body.bs-nav-parents #founderParGroupParentList .founder-par-action-card:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,0.08);
}

body.bs-nav-parents #founderParGroupCreateEdit .founder-par-form-card-neu{
  margin-bottom:16px;
}

body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-panel{
  margin:0 0 16px;
  padding:16px 18px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(148,163,184,0.25);
}

body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-row{
  display:grid;
  grid-template-columns:1fr minmax(220px,280px) auto;
  gap:10px;
  margin:12px 0;
}

body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-row input,
body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-row select,
body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-row button{
  min-height:42px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,0.35);
  padding:8px 12px;
}

body.bs-nav-parents #founderParGroupCreateEdit .bs-selected-parent-preview{
  margin:8px 0;
  color:#475569;
  font-size:14px;
}

body.bs-nav-parents #founderParGroupCreateEdit .founder-tch-create-section{
  margin-bottom:14px;
  padding:14px 16px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(148,163,184,0.2);
}

@media (max-width:900px){
  body.bs-nav-parents #founderParGroupCreateEdit .bs-parent-edit-search-row{
    grid-template-columns:1fr;
  }
}

body.bs-nav-parents .founder-par-status-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

body.bs-nav-parents .founder-par-status-btn{
  border:none;
  border-radius:8px;
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
  color:#fff;
}

body.bs-nav-parents .founder-par-status-btn.enable{ background:#16a34a; }
body.bs-nav-parents .founder-par-status-btn.disable{ background:#64748b; }
body.bs-nav-parents .founder-par-status-btn.suspend{ background:#d97706; }

body.bs-nav-parents .founder-par-safety-ok{
  color:#15803d;
  font-weight:600;
  margin:8px 0 12px;
}

body.bs-nav-parents .founder-par-status-summary .pmcc-info-card,
body.bs-nav-parents .founder-par-safety-summary .pmcc-info-card{
  min-height:72px;
}

body.bs-nav-drivers .founder-drv-list-row{ cursor:pointer; }
body.bs-nav-drivers .founder-drv-list-row-active td{ background:rgba(212,168,58,.12); }
body.bs-nav-drivers .founder-drv-status-actions{ display:flex; flex-wrap:wrap; gap:6px; }
body.bs-nav-drivers .founder-drv-status-btn{ border:none; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; color:#fff; }
body.bs-nav-drivers .founder-drv-status-btn.enable{ background:#16a34a; }
body.bs-nav-drivers .founder-drv-status-btn.disable{ background:#64748b; }
body.bs-nav-drivers .founder-drv-status-btn.suspend{ background:#d97706; }
body.bs-nav-drivers .founder-drv-safety-ok{ color:#15803d; font-weight:600; margin:8px 0 12px; }
body.bs-driver-print-active #founderDriverPrintArea{ display:block!important; }
body.bs-driver-print-active > *:not(#founderDriverPrintArea){ display:none!important; }
body.bs-driver-print-active #founderDriverPrintArea .driver-print-table{ width:100%; border-collapse:collapse; font-size:12px; }
body.bs-driver-print-active #founderDriverPrintArea .driver-print-table th,
body.bs-driver-print-active #founderDriverPrintArea .driver-print-table td{ border:1px solid #cbd5e1; padding:6px 8px; }
body.bs-nav-transport .founder-trn-list-row{ cursor:pointer; }
body.bs-nav-transport .founder-trn-list-row-active td{ background:rgba(212,168,58,.12); }
body.bs-nav-transport .founder-trn-status-actions{ display:flex; flex-wrap:wrap; gap:6px; }
body.bs-nav-transport .founder-trn-status-btn{ border:none; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; color:#fff; }
body.bs-nav-transport .founder-trn-status-btn.enable{ background:#16a34a; }
body.bs-nav-transport .founder-trn-status-btn.disable{ background:#64748b; }
body.bs-nav-transport .founder-trn-status-btn.suspend{ background:#d97706; }
body.bs-nav-transport .founder-trn-safety-ok{ color:#15803d; font-weight:600; margin:8px 0 12px; }
body.bs-transport-print-active #founderTransportPrintArea{ display:block!important; }
body.bs-transport-print-active > *:not(#founderTransportPrintArea){ display:none!important; }
body.bs-transport-print-active #founderTransportPrintArea .transport-print-table{ width:100%; border-collapse:collapse; font-size:12px; }
body.bs-transport-print-active #founderTransportPrintArea .transport-print-table th,
body.bs-transport-print-active #founderTransportPrintArea .transport-print-table td{ border:1px solid #cbd5e1; padding:6px 8px; }


/* BrightStar Founder Dashboard Cards Only UI Cleanup V1
   Hide-only rule for lower dashboard table/list preview panels.
   Do not delete markup, IDs, View All buttons, render targets, storage readers, or navigation logic. */
.bs-dashboard-main-hide-only {
  display: none !important;
}

/* Admin Dashboard — Assigned School compact table row (UI only) */
.admin-dashboard-body .admin-assigned-school-panel{
  padding:14px 16px;
}
.admin-dashboard-body .admin-assigned-school-panel-title{
  margin-bottom:10px;
}
.admin-dashboard-body .admin-assigned-school-scope-badge{
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  padding:4px 10px;
  font-size:11px;
  font-weight:800;
  color:#64748b;
  line-height:1.2;
}
.admin-dashboard-body .admin-assigned-school-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e6ebf4;
  border-radius:14px;
  background:linear-gradient(145deg,#ffffff,#f8fbff);
  box-shadow:0 4px 14px rgba(16,24,40,.05), inset 0 1px 0 rgba(255,255,255,.95);
}
.admin-dashboard-body .admin-assigned-school-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  table-layout:fixed;
}
.admin-dashboard-body .admin-assigned-school-table th,
.admin-dashboard-body .admin-assigned-school-table td{
  padding:9px 12px;
  text-align:left;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}
.admin-dashboard-body .admin-assigned-school-table thead th{
  background:linear-gradient(145deg,#f4f8ff,#fffaf1);
  color:#08295c;
  font-weight:900;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.admin-dashboard-body .admin-assigned-school-table tbody tr:last-child td{
  border-bottom:0;
}
.admin-dashboard-body .admin-assigned-school-table tbody tr:hover td{
  background:rgba(248,251,255,.9);
}
.admin-dashboard-body .admin-assigned-school-value{
  display:block;
  margin:0;
  color:#061b3f;
  font-size:14px;
  font-weight:900;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.admin-dashboard-body .admin-assigned-school-table th:nth-child(1),
.admin-dashboard-body .admin-assigned-school-table td:nth-child(1){width:18%}
.admin-dashboard-body .admin-assigned-school-table th:nth-child(2),
.admin-dashboard-body .admin-assigned-school-table td:nth-child(2){width:16%}
.admin-dashboard-body .admin-assigned-school-table th:nth-child(3),
.admin-dashboard-body .admin-assigned-school-table td:nth-child(3){width:24%}
.admin-dashboard-body .admin-assigned-school-table th:nth-child(4),
.admin-dashboard-body .admin-assigned-school-table td:nth-child(4){width:16%}
.admin-dashboard-body .admin-assigned-school-table th:nth-child(5),
.admin-dashboard-body .admin-assigned-school-table td:nth-child(5){width:26%}
@media(max-width:760px){
  .admin-dashboard-body .admin-assigned-school-panel{
    padding:12px 14px;
  }
  .admin-dashboard-body .admin-assigned-school-table{
    min-width:640px;
  }
  .admin-dashboard-body .admin-assigned-school-value{
    font-size:13px;
  }
}

/* Admin Dashboard — This Month summary badges */
.admin-dashboard-body .monthly-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.01em;
  border:1px solid transparent;
  box-shadow:0 6px 14px rgba(15,23,42,.06);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.admin-dashboard-body .monthly-badge-positive{
  color:#166534;
  background:linear-gradient(145deg,#ecfdf3,#dcfce7);
  border-color:#86efac;
}
.admin-dashboard-body .monthly-badge-negative{
  color:#991b1b;
  background:linear-gradient(145deg,#fef2f2,#fee2e2);
  border-color:#fca5a5;
}
.admin-dashboard-body .monthly-badge-neutral{
  color:#475467;
  background:linear-gradient(145deg,#f8fafc,#f1f5f9);
  border-color:#e2e8f0;
}

/* Admin Dashboard — top 5 summary card value right alignment (UI only) */
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card strong{
  text-align:right;
  justify-self:end;
}
@media(max-width:760px){
  .admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card strong{
    font-size:28px;
  }
  .admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money strong{
    font-size:22px;
  }
}

/* Admin Dashboard — today attendance summary row (3 cards) */
.admin-dashboard-body .admin-today-attendance-summary-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}
@media(max-width:1200px){
  .admin-dashboard-body .admin-today-attendance-summary-grid{
    grid-template-columns:1fr;
  }
}

/* Admin Dashboard — calendar mini grid */
.admin-dashboard-body .admin-enrollment-section{
  margin-bottom:18px;
}
.admin-dashboard-body .admin-mini-calendar-weekdays,
.admin-dashboard-body .admin-mini-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}

/* Admin Dashboard — School Monthly Estimated Fees */
.admin-dashboard-body .admin-monthly-fees-section{
  margin-bottom:18px;
}

/* Admin Dashboard — Settings / Security hub */
.admin-dashboard-body .admin-settings-hub{display:grid;gap:16px}
.admin-dashboard-body .admin-settings-hero{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid #e6ebf4;border-radius:18px;padding:18px 20px;
  box-shadow:0 4px 14px rgba(16,24,40,.04)
}
.admin-dashboard-body .admin-settings-hero h2{margin:0 0 6px;font-size:22px;color:#08295c}
.admin-dashboard-body .admin-settings-hero p{margin:0;color:#64748b;font-size:14px;font-weight:700}
.admin-dashboard-body .admin-settings-scope-badge{
  display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;
  background:#eef4ff;border:1px solid #c7d7fe;color:#1d4ed8;font-size:12px;font-weight:900
}
.admin-dashboard-body .admin-settings-card{
  background:#fff;border:1px solid #e6ebf4;border-radius:18px;padding:18px 20px;
  box-shadow:0 4px 14px rgba(16,24,40,.04)
}
.admin-dashboard-body .admin-settings-card h3{margin:0 0 6px;font-size:18px;color:#08295c}
.admin-dashboard-body .admin-settings-lead{margin:0 0 14px;color:#64748b;font-size:13px;font-weight:700;line-height:1.45}
.admin-dashboard-body .admin-settings-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px}
.admin-dashboard-body .admin-settings-dl div{
  background:#f8fbff;border:1px solid #e8eef8;border-radius:12px;padding:10px 12px
}
.admin-dashboard-body .admin-settings-dl dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:800;margin:0}
.admin-dashboard-body .admin-settings-dl dd{margin:4px 0 0;font-size:15px;font-weight:900;color:#0f172a}
.admin-dashboard-body .admin-settings-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.admin-dashboard-body .admin-settings-metric{
  background:linear-gradient(145deg,#f8fbff,#fff);border:1px solid #e8eef8;border-radius:14px;padding:12px 14px
}
.admin-dashboard-body .admin-settings-metric small{display:block;color:#64748b;font-weight:800;font-size:11px}
.admin-dashboard-body .admin-settings-metric strong{display:block;margin-top:4px;font-size:18px;color:#08295c}
.admin-dashboard-body .admin-settings-table-wrap{overflow-x:auto;border:1px solid #edf2f7;border-radius:12px}
.admin-dashboard-body .admin-settings-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-dashboard-body .admin-settings-table th,
.admin-dashboard-body .admin-settings-table td{padding:10px 12px;border-bottom:1px solid #edf2f7;text-align:left}
.admin-dashboard-body .admin-settings-table th{background:#f8fbff;color:#475569;font-weight:900}
.admin-dashboard-body .admin-settings-empty td{color:#64748b;font-weight:700;text-align:center}
.admin-dashboard-body .admin-settings-status{display:inline-block;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900}
.admin-dashboard-body .admin-settings-status.is-active{background:#ecfdf3;color:#137333}
.admin-dashboard-body .admin-settings-status.is-inactive{background:#fff1f2;color:#b42318}
.admin-dashboard-body .admin-settings-rules{display:grid;gap:12px}
.admin-dashboard-body .admin-settings-rule-block{
  background:#f8fbff;border:1px solid #e8eef8;border-radius:12px;padding:12px 14px
}
.admin-dashboard-body .admin-settings-rule-block h4{margin:0 0 6px;font-size:14px;color:#08295c}
.admin-dashboard-body .admin-settings-rule-block p{margin:0;color:#334155;font-size:13px;line-height:1.5;white-space:pre-wrap}
.admin-dashboard-body .admin-settings-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.admin-dashboard-body .admin-settings-option{
  border:1px solid #e8eef8;border-radius:12px;padding:12px 14px;background:#fff
}
.admin-dashboard-body .admin-settings-option b{display:block;color:#08295c;margin-top:4px}
.admin-dashboard-body .admin-settings-option small{color:#64748b;font-weight:800}
.admin-dashboard-body .admin-settings-note{
  margin:14px 0 0;padding:10px 12px;border-radius:10px;background:#fff8e6;border:1px solid #f5d78e;
  color:#7a5b00;font-size:12px;font-weight:700;line-height:1.45
}
.admin-dashboard-body #adminSettingsHubSection[data-admin-settings-pane="account-settings"] .admin-settings-hero{display:none}
.admin-dashboard-body .admin-account-settings-shell{
  border:1px solid #e8eef8;border-radius:22px;padding:24px 22px 26px;background:#fff;
  box-shadow:0 18px 38px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.95)
}
.admin-dashboard-body .admin-account-settings-head{margin:0 0 20px}
.admin-dashboard-body .admin-account-settings-title{margin:0 0 8px;font-size:24px;font-weight:950;color:#08295c;line-height:1.2}
.admin-dashboard-body .admin-account-settings-subtitle{margin:0;color:#64748b;font-size:14px;font-weight:700;line-height:1.45;max-width:720px}
.admin-dashboard-body .admin-account-settings-grid{display:grid;grid-template-columns:1fr;gap:14px}
.admin-dashboard-body .admin-account-settings-card{
  display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px 16px;align-items:center;
  border:1px solid #edf2f7;border-radius:18px;padding:16px 18px;background:linear-gradient(145deg,#fff,#f8fbff);
  box-shadow:0 10px 24px rgba(15,23,42,.06)
}
.admin-dashboard-body .admin-account-settings-icon{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:#f5f7ff;box-shadow:0 8px 18px rgba(15,23,42,.08)
}
.admin-dashboard-body .admin-account-settings-card-copy h3{margin:0 0 6px;font-size:17px;font-weight:950;color:#08295c}
.admin-dashboard-body .admin-account-settings-card-copy p{margin:0;color:#64748b;font-size:13px;font-weight:700;line-height:1.45}
.admin-dashboard-body .admin-account-settings-open-btn{
  border:0;border-radius:12px;padding:10px 16px;font-size:13px;font-weight:900;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#0f49ff,#2563eb);box-shadow:0 10px 22px rgba(37,99,235,.28);white-space:nowrap
}
.admin-dashboard-body .admin-account-settings-open-btn:hover{filter:brightness(1.05)}
.admin-dashboard-body .admin-account-settings-placeholder-card{
  border:1px dashed #cbd5e1;border-radius:18px;padding:28px 22px;text-align:center;background:#f8fafc
}
.admin-dashboard-body .admin-account-settings-placeholder-card h3{margin:0 0 8px;font-size:18px;color:#08295c}
.admin-dashboard-body .admin-account-settings-placeholder-card p{margin:0 0 16px;color:#64748b;font-size:14px;font-weight:700}
.admin-dashboard-body .admin-gcfp-panel{margin-top:8px}
.admin-dashboard-body .admin-gcfp-panel-inner{
  border:1px solid #e2e8f0;border-radius:18px;padding:20px 18px 24px;background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.06)
}
.admin-dashboard-body .admin-gcfp-back-btn{margin-bottom:14px}
.admin-dashboard-body .admin-gcfp-title{margin:0 0 6px;font-size:22px;font-weight:950;color:#08295c}
.admin-dashboard-body .admin-gcfp-subtitle{margin:0 0 8px;color:#64748b;font-size:14px;font-weight:700;line-height:1.45}
.admin-dashboard-body .admin-gcfp-scope{margin:0 0 12px;font-size:12px;font-weight:800;color:#0f766e}
.admin-dashboard-body .admin-gcfp-message{margin:0 0 14px;font-size:13px;font-weight:700;min-height:1.2em}
.admin-dashboard-body .admin-gcfp-message.is-success{color:#15803d}
.admin-dashboard-body .admin-gcfp-message.is-error{color:#b91c1c}
.admin-dashboard-body .admin-gcfp-section{margin-top:18px}
.admin-dashboard-body .admin-gcfp-section:first-of-type{margin-top:4px}
.admin-dashboard-body .admin-gcfp-section-title{margin:0 0 10px;font-size:16px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-gcfp-list{display:flex;flex-direction:column;gap:12px}
.admin-dashboard-body .admin-gcfp-row{
  display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px 14px;align-items:center;
  padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc
}
.admin-dashboard-body .admin-gcfp-row-preview{display:flex;align-items:center;justify-content:center}
.admin-dashboard-body .admin-gcfp-avatar-img,.admin-dashboard-body .admin-gcfp-avatar-default{
  width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #cbd5e1;background:#fff
}
.admin-dashboard-body .admin-gcfp-avatar-default{
  display:inline-flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#15803d;background:#ecfdf5
}
.admin-dashboard-body .admin-gcfp-row-copy{display:flex;flex-direction:column;gap:2px}
.admin-dashboard-body .admin-gcfp-row-copy strong{font-size:15px;color:#08295c}
.admin-dashboard-body .admin-gcfp-row-copy span,.admin-dashboard-body .admin-gcfp-row-copy small{font-size:12px;color:#64748b;font-weight:700}
.admin-dashboard-body .admin-gcfp-row-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.admin-dashboard-body .admin-gcfp-upload-btn,.admin-dashboard-body .admin-gcfp-remove-btn{
  cursor:pointer;border-radius:10px;padding:8px 12px;font-size:12px;font-weight:800;border:1px solid transparent
}
.admin-dashboard-body .admin-gcfp-upload-btn{background:#2563eb;color:#fff;border-color:#1d4ed8}
.admin-dashboard-body .admin-gcfp-remove-btn{background:#fff;color:#b91c1c;border-color:#fecaca}
.admin-dashboard-body .admin-gcfp-empty{margin:12px 0 0;color:#64748b;font-size:13px;font-weight:700}
.admin-dashboard-body .admin-msg-settings-panel{margin-top:8px}
.admin-dashboard-body .admin-msg-settings-panel-inner{
  border:1px solid #e2e8f0;border-radius:18px;padding:20px 18px 28px;background:#fff;
  box-shadow:0 10px 28px rgba(15,23,42,.06)
}
.admin-dashboard-body .admin-msg-settings-back-btn{margin-bottom:14px}
.admin-dashboard-body .admin-msg-settings-title{margin:0 0 6px;font-size:22px;font-weight:950;color:#08295c}
.admin-dashboard-body .admin-msg-settings-subtitle{margin:0 0 8px;color:#64748b;font-size:14px;font-weight:700;line-height:1.45;max-width:820px}
.admin-dashboard-body .admin-msg-settings-scope{margin:0 0 10px;font-size:12px;font-weight:800;color:#0f766e}
.admin-dashboard-body .admin-msg-settings-alert{margin:0 0 14px;padding:10px 12px;border-radius:10px;font-size:13px;font-weight:700}
.admin-dashboard-body .admin-msg-settings-alert.is-error{color:#b91c1c;background:#fef2f2;border:1px solid #fecaca}
.admin-dashboard-body .admin-msg-settings-section{margin-top:22px;padding-top:18px;border-top:1px solid #edf2f7}
.admin-dashboard-body .admin-msg-settings-section:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.admin-dashboard-body .admin-msg-settings-section-title{margin:0 0 10px;font-size:16px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-msg-settings-note{margin:0 0 12px;color:#64748b;font-size:13px;font-weight:700;line-height:1.45}
.admin-dashboard-body .admin-msg-settings-module-list{
  margin:0;padding:0 0 0 18px;display:grid;gap:6px;color:#334155;font-size:13px;font-weight:700
}
.admin-dashboard-body .admin-msg-settings-stat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px
}
.admin-dashboard-body .admin-msg-settings-stat-card{
  border:1px solid #e2e8f0;border-radius:14px;padding:12px 14px;background:linear-gradient(145deg,#fff,#f8fbff)
}
.admin-dashboard-body .admin-msg-settings-stat-card small{
  display:block;margin-bottom:4px;font-size:11px;font-weight:800;color:#64748b;text-transform:uppercase;letter-spacing:.04em
}
.admin-dashboard-body .admin-msg-settings-stat-card strong{display:block;font-size:18px;font-weight:950;color:#08295c;line-height:1.2}
.admin-dashboard-body .admin-msg-settings-table-wrap{overflow:auto;border:1px solid #e2e8f0;border-radius:14px;background:#fff}
.admin-dashboard-body .admin-msg-settings-table{width:100%;border-collapse:collapse;font-size:12px}
.admin-dashboard-body .admin-msg-settings-table th,.admin-dashboard-body .admin-msg-settings-table td{
  padding:10px 12px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top
}
.admin-dashboard-body .admin-msg-settings-table th{background:#f8fafc;color:#475569;font-weight:900;white-space:nowrap}
.admin-dashboard-body .admin-msg-settings-table td{color:#334155;font-weight:700}
.admin-dashboard-body .admin-msg-settings-empty{margin:10px 0 0;color:#64748b;font-size:13px;font-weight:700}
.admin-dashboard-body .admin-msg-settings-search-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px
}
.admin-dashboard-body .admin-msg-settings-search-field{display:flex;flex-direction:column;gap:6px}
.admin-dashboard-body .admin-msg-settings-search-field span{font-size:12px;font-weight:800;color:#475569}
.admin-dashboard-body .admin-msg-settings-search-field input{
  border:1px solid #cbd5e1;border-radius:10px;padding:10px 12px;font-size:13px;font-weight:700;color:#08295c;background:#fff
}
@media(max-width:720px){
  .admin-dashboard-body .admin-gcfp-row{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto}
  .admin-dashboard-body .admin-gcfp-row-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(min-width:760px){
  .admin-dashboard-body .admin-account-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .admin-dashboard-body .admin-account-settings-card{grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto}
  .admin-dashboard-body .admin-account-settings-open-btn{grid-column:1/-1;justify-self:start}
}
.admin-dashboard-body .admin-settings-logo-wrap{margin-top:14px}
.admin-dashboard-body .admin-settings-logo-label{display:block;font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;margin-bottom:6px}
.admin-dashboard-body .admin-settings-logo-placeholder{
  width:96px;height:96px;border-radius:14px;border:1px dashed #cbd5e1;background:#f8fafc;
  display:grid;place-items:center;overflow:hidden
}
.admin-dashboard-body .admin-settings-logo-placeholder img{width:100%;height:100%;object-fit:cover}
.admin-dashboard-body .admin-nav-sublink.admin-settings-nav-logout{color:#fecaca}
.admin-dashboard-body .admin-nav-sublink.admin-settings-nav-logout:hover{background:rgba(239,68,68,.18);color:#fff}
@media(max-width:900px){
  .admin-dashboard-body .admin-settings-dl,
  .admin-dashboard-body .admin-settings-options{grid-template-columns:1fr}
}

/* Admin Dashboard — Institute Profile (Update Profile) — polished UI */
.admin-dashboard-body #adminSettingsHubSection[data-admin-settings-pane="institute-profile"] .admin-settings-hero,
.admin-dashboard-body #adminSettingsHubSection[data-admin-settings-pane="fees-structure"] .admin-settings-hero{
  display:none;
}
.admin-dashboard-body .admin-institute-profile-pane{padding:0}
.admin-dashboard-body .admin-ip-shell{
  position:relative;padding:22px 22px 26px;border-radius:22px;overflow:hidden;
  background:
    radial-gradient(120% 80% at 0% 0%,rgba(15,73,255,.09),transparent 55%),
    radial-gradient(90% 70% at 100% 0%,rgba(245,183,40,.12),transparent 50%),
    linear-gradient(180deg,#ffffff 0%,#f5f8ff 100%);
  border:1px solid #e3ebfa;
  box-shadow:0 18px 40px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.85)
}
.admin-dashboard-body .admin-ip-shell::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#0b2d75,#0f49ff 45%,#f5b928);
  pointer-events:none
}
.admin-dashboard-body .admin-ip-breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:16px;position:relative;z-index:1
}
.admin-dashboard-body .admin-ip-crumb{
  padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.72);
  border:1px solid #e2e8f8;font-size:12px;font-weight:800;color:#64748b
}
.admin-dashboard-body .admin-ip-breadcrumb-sep{color:#94a3b8;font-weight:900;font-size:14px}
.admin-dashboard-body .admin-ip-breadcrumb-current{
  font-size:13px;font-weight:900;color:#0f49ff;letter-spacing:.01em
}
.admin-dashboard-body .admin-ip-page-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-bottom:18px;position:relative;z-index:1
}
.admin-dashboard-body .admin-ip-kicker{
  margin:0 0 4px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#0f49ff
}
.admin-dashboard-body .admin-ip-title{
  margin:0;font-size:clamp(26px,2.4vw,32px);line-height:1.15;
  background:linear-gradient(135deg,#061b3f 0%,#0f49ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent
}
.admin-dashboard-body .admin-ip-subtitle{
  margin:8px 0 0;max-width:52ch;font-size:14px;font-weight:600;color:#64748b;line-height:1.55
}
.admin-dashboard-body .admin-ip-legend{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.admin-dashboard-body .admin-ip-legend-pill{
  display:inline-flex;align-items:center;gap:4px;padding:7px 12px;border-radius:999px;
  font-size:12px;font-weight:800;border:1px solid transparent
}
.admin-dashboard-body .admin-ip-legend-required{
  color:#b42318;background:#fff5f5;border-color:#fecaca
}
.admin-dashboard-body .admin-ip-legend-required b{color:#b42318}
.admin-dashboard-body .admin-ip-legend-optional{
  color:#475569;background:#f8fafc;border-color:#e2e8f0
}
.admin-dashboard-body .admin-ip-req{color:#ef4444;font-weight:900}
.admin-dashboard-body .admin-ip-opt{color:#64748b;font-weight:700;font-size:12px}
.admin-dashboard-body .admin-ip-message{
  margin:0 0 16px;padding:12px 16px;border-radius:14px;font-size:13px;font-weight:800;
  position:relative;z-index:1;-webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);};
.admin-dashboard-body .admin-ip-message.is-error{
  background:rgba(255,241,242,.92);border:1px solid #fecdd3;color:#b42318;
  box-shadow:0 8px 20px rgba(239,68,68,.08)
}
.admin-dashboard-body .admin-ip-message.is-success{
  background:rgba(236,253,243,.92);border:1px solid #b7efc5;color:#137333;
  box-shadow:0 8px 20px rgba(34,197,94,.08)
}
.admin-dashboard-body .admin-ip-layout{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:20px;align-items:start;
  position:relative;z-index:1
}
.admin-dashboard-body .admin-ip-form{
  display:grid;gap:18px;padding:0;background:transparent;border:0;box-shadow:none
}
.admin-dashboard-body .admin-ip-form-section{
  background:rgba(255,255,255,.88);border:1px solid #e6ebf4;border-radius:20px;padding:18px 18px 20px;
  box-shadow:0 10px 28px rgba(15,23,42,.05)
}
.admin-dashboard-body .admin-ip-section-head{
  display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid #edf2f7
}
.admin-dashboard-body .admin-ip-section-icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:20px;flex-shrink:0;
  background:linear-gradient(145deg,#eef4ff,#fff);border:1px solid #dbeafe;box-shadow:0 4px 12px rgba(15,73,255,.1)
}
.admin-dashboard-body .admin-ip-section-head h3{margin:0 0 4px;font-size:16px;color:#08295c}
.admin-dashboard-body .admin-ip-section-head p{margin:0;font-size:12px;font-weight:700;color:#64748b;line-height:1.45}
.admin-dashboard-body .admin-ip-logo-field{border:0;margin:0;padding:0;min-width:0}
.admin-dashboard-body .admin-ip-logo-card{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px;border-radius:16px;
  background:linear-gradient(145deg,#f8fbff 0%,#fff 100%);border:1px dashed #c7d7fe
}
.admin-dashboard-body .admin-ip-logo-preview{
  width:120px;height:120px;border-radius:20px;flex-shrink:0;overflow:hidden;position:relative;
  display:grid;place-items:center;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(15,73,255,.18),0 12px 24px rgba(15,73,255,.12)
}
.admin-dashboard-body .admin-ip-logo-preview::after{
  content:"";position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(180deg,transparent 65%,rgba(6,27,63,.08));
  pointer-events:none
}
.admin-dashboard-body .admin-ip-logo-preview img{width:100%;height:100%;object-fit:cover;position:relative;z-index:0}
.admin-dashboard-body .admin-school-profile-logo-slot{
  display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:28px
}
.admin-dashboard-body .admin-school-profile-logo-slot img{
  width:36px;height:36px;border-radius:8px;object-fit:cover;vertical-align:middle
}

/* Admin Sidebar — school sidebar logo from Institute Profile */
.admin-dashboard-body .admin-sidebar .brand-star.has-school-logo{
  display:grid;place-items:center;padding:0;background:transparent;transform:none;
  width:52px;height:52px;min-width:52px;min-height:52px;border-radius:17px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.25)
}
.admin-dashboard-body .admin-sidebar .brand-star.has-school-logo img{
  width:100%;height:100%;object-fit:cover;display:block;border-radius:17px
}
/* Scrollable Sidebar Submenu — Custom Vertical Scrollbar (Admin Dashboard) */
.admin-dashboard-body .admin-nav-submenu.admin-scrollable-sidebar-submenu[hidden]{display:none!important}
.admin-dashboard-body .admin-nav-group.is-open .admin-nav-submenu:not([hidden]){display:block}
.admin-dashboard-body .admin-nav-group.is-open .admin-nav-submenu.admin-scrollable-sidebar-submenu:not([hidden]){
  display:block;max-height:min(280px,calc(100vh - 300px));overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:rgba(245,185,40,.92) rgba(255,255,255,.14)
}
.admin-dashboard-body .admin-nav-group.is-open .admin-nav-submenu.admin-scrollable-sidebar-submenu:not([hidden])::-webkit-scrollbar{width:8px}
.admin-dashboard-body .admin-nav-group.is-open .admin-nav-submenu.admin-scrollable-sidebar-submenu:not([hidden])::-webkit-scrollbar-track{
  background:rgba(255,255,255,.12);border-radius:8px;margin:4px 0
}
.admin-dashboard-body .admin-nav-group.is-open .admin-nav-submenu.admin-scrollable-sidebar-submenu:not([hidden])::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(245,185,40,.98),rgba(245,185,40,.72));
  border-radius:8px;border:1px solid rgba(255,255,255,.22);min-height:36px
}
.admin-dashboard-body .admin-sidebar #adminSidebarBrandName{
  display:block;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.admin-dashboard-body .admin-ip-logo-placeholder-text{
  font-size:11px;font-weight:900;color:#94a3b8;text-align:center;padding:10px;line-height:1.35;position:relative;z-index:0
}
.admin-dashboard-body .admin-ip-logo-actions{display:grid;gap:10px;align-content:center;min-width:180px}
.admin-dashboard-body .admin-ip-form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px
}
.admin-dashboard-body .admin-ip-field-span-2{grid-column:1/-1}
.admin-dashboard-body .admin-ip-field{display:grid;gap:7px}
.admin-dashboard-body .admin-ip-field>span{font-size:13px;font-weight:900;color:#334155}
.admin-dashboard-body .admin-ip-field input,
.admin-dashboard-body .admin-ip-field textarea{
  border:1px solid #dbe3f0;border-radius:14px;padding:13px 15px;font-size:14px;font-weight:600;
  color:#0f172a;background:linear-gradient(180deg,#fff,#fbfdff);outline:0;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease
}
.admin-dashboard-body .admin-ip-field input::placeholder,
.admin-dashboard-body .admin-ip-field textarea::placeholder{color:#94a3b8;font-weight:600}
.admin-dashboard-body .admin-ip-field input:hover,
.admin-dashboard-body .admin-ip-field textarea:hover{border-color:#b8c9e8}
.admin-dashboard-body .admin-ip-field input:focus,
.admin-dashboard-body .admin-ip-field textarea:focus{
  border-color:#0f49ff;box-shadow:0 0 0 4px rgba(15,73,255,.14);transform:translateY(-1px)
}
.admin-dashboard-body .admin-ip-field input.admin-ip-invalid,
.admin-dashboard-body .admin-ip-field textarea.admin-ip-invalid{
  border-color:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)
}
.admin-dashboard-body .admin-ip-field-hint{margin:0;font-size:11px;font-weight:700;color:#64748b;line-height:1.45}
.admin-dashboard-body .admin-ip-form-footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 18px;border-radius:18px;
  background:linear-gradient(135deg,rgba(6,27,63,.04),rgba(15,73,255,.06));
  border:1px solid #e2e8f8
}
.admin-dashboard-body .admin-ip-schoolid-note{
  margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:800;color:#64748b
}
.admin-dashboard-body .admin-ip-schoolid-note strong{
  color:#08295c;font-size:13px;padding:4px 10px;border-radius:8px;background:#fff;border:1px solid #e2e8f0
}
.admin-dashboard-body .admin-ip-lock-tag{
  padding:3px 8px;border-radius:999px;background:#fff8e6;border:1px solid #f5d78e;color:#9a6700;font-size:10px;font-weight:900
}
.admin-dashboard-body .admin-ip-btn-primary,
.admin-dashboard-body .admin-ip-btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:14px;padding:13px 22px;font-size:14px;font-weight:900;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,filter .2s ease
}
.admin-dashboard-body .admin-ip-btn-primary{
  color:#fff;background:linear-gradient(135deg,#0b2d75 0%,#0f49ff 55%,#3b82f6 100%);
  box-shadow:0 10px 24px rgba(15,73,255,.28)
}
.admin-dashboard-body .admin-ip-btn-primary:hover{
  transform:translateY(-2px);box-shadow:0 14px 28px rgba(15,73,255,.34);filter:brightness(1.03)
}
.admin-dashboard-body .admin-ip-btn-primary:active{transform:translateY(0)}
.admin-dashboard-body .admin-ip-btn-secondary{
  background:#fff;color:#1d4ed8;border:1px solid #c7d7fe;box-shadow:0 4px 14px rgba(15,73,255,.08)
}
.admin-dashboard-body .admin-ip-btn-secondary:hover{
  background:#eef4ff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,73,255,.12)
}
.admin-dashboard-body .admin-ip-preview-card{
  border-radius:22px;overflow:hidden;position:sticky;top:14px;
  border:1px solid #dce6f8;
  box-shadow:0 20px 44px rgba(15,23,42,.1),0 0 0 1px rgba(255,255,255,.6) inset;
  background:#fff
}
.admin-dashboard-body .admin-ip-preview-header{
  padding:18px 20px 16px;
  background:linear-gradient(135deg,#0b2d75 0%,#0f49ff 62%,#2563eb 100%);
  color:#fff
}
.admin-dashboard-body .admin-ip-preview-header p{margin:6px 0 0;font-size:12px;font-weight:700;opacity:.88}
.admin-dashboard-body .admin-ip-preview-badge{
  display:inline-flex;align-items:center;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
  font-size:11px;font-weight:900;letter-spacing:.04em;text-transform:uppercase
}
.admin-dashboard-body .admin-ip-preview-body{
  padding:20px 20px 22px;text-align:center;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)
}
.admin-dashboard-body .admin-ip-preview-logo-wrap{
  display:grid;place-items:center;margin-bottom:14px
}
.admin-dashboard-body .admin-ip-preview-logo{
  width:88px;height:88px;border-radius:22px;overflow:hidden;
  display:grid;place-items:center;font-size:36px;
  background:#fff;border:3px solid #fff;
  box-shadow:0 0 0 1px #e2e8f0,0 12px 28px rgba(15,73,255,.15)
}
.admin-dashboard-body .admin-ip-preview-logo img{width:100%;height:100%;object-fit:cover}
.admin-dashboard-body .admin-ip-preview-name{
  margin:0 0 6px;font-size:22px;line-height:1.25;color:#061b3f;letter-spacing:-.02em
}
.admin-dashboard-body .admin-ip-preview-target{
  margin:0 auto 16px;max-width:28ch;font-size:13px;font-weight:700;color:#64748b;line-height:1.5
}
.admin-dashboard-body .admin-ip-preview-divider{
  border:0;height:1px;margin:0 0 14px;
  background:linear-gradient(90deg,transparent,#dbe3f0,transparent)
}
.admin-dashboard-body .admin-ip-preview-dl{
  display:grid;gap:8px;margin:0;text-align:left
}
.admin-dashboard-body .admin-ip-preview-row{
  display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:10px;align-items:start;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.85);
  border:1px solid #edf2f7;transition:background .2s ease,border-color .2s ease
}
.admin-dashboard-body .admin-ip-preview-row:hover{
  background:#fff;border-color:#dbeafe
}
.admin-dashboard-body .admin-ip-preview-dl dt{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:#64748b;
  text-transform:uppercase;letter-spacing:.04em;margin:0
}
.admin-dashboard-body .admin-ip-preview-dl dt span{font-size:14px;text-transform:none}
.admin-dashboard-body .admin-ip-preview-dl dd{
  margin:0;font-size:14px;font-weight:800;color:#0f172a;word-break:break-word;line-height:1.45
}
.admin-dashboard-body .admin-institute-profile-pane .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
}
@keyframes adminIpFadeIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.admin-dashboard-body #adminSettingsHubSection[data-admin-settings-pane="institute-profile"] .admin-ip-shell{
  animation:adminIpFadeIn .45s ease both
}

/* Admin Dashboard — Admin Profile Photo & Cover (separate from institute logo) */
.admin-dashboard-body .admin-account-images-section{
  margin-top:22px;padding-top:22px;border-top:1px solid #e2e8f0
}
.admin-dashboard-body .admin-account-images-head{margin-bottom:16px}
.admin-dashboard-body .admin-account-images-head h3{
  margin:0 0 6px;font-size:20px;color:#08295c
}
.admin-dashboard-body .admin-account-images-subtitle{
  margin:0;font-size:13px;font-weight:700;color:#64748b;line-height:1.5;max-width:62ch
}
.admin-dashboard-body .admin-account-images-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px
}
.admin-dashboard-body .admin-account-image-card{
  background:rgba(255,255,255,.92);border:1px solid #e6ebf4;border-radius:20px;padding:18px 18px 20px;
  box-shadow:0 10px 28px rgba(15,23,42,.05);display:grid;gap:12px
}
.admin-dashboard-body .admin-account-image-card-head h4{margin:0 0 4px;font-size:16px;color:#08295c}
.admin-dashboard-body .admin-account-image-card-head p{margin:0;font-size:12px;font-weight:700;color:#64748b;line-height:1.45}
.admin-dashboard-body .admin-account-image-message{
  margin:0;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:800
}
.admin-dashboard-body .admin-account-image-message.is-success{background:#ecfdf3;border:1px solid #b7efc5;color:#137333}
.admin-dashboard-body .admin-account-image-message.is-error{background:#fff1f2;border:1px solid #fecdd3;color:#b42318}
.admin-dashboard-body .admin-account-image-preview{
  border-radius:16px;overflow:hidden;border:1px solid #e2e8f0;background:#f8fafc;
  display:grid;place-items:center;position:relative
}
.admin-dashboard-body .admin-account-image-preview--avatar{
  width:120px;height:120px;margin:0 auto;border-radius:50%;
  box-shadow:0 0 0 4px #fff,0 0 0 5px rgba(15,73,255,.15)
}
.admin-dashboard-body .admin-account-image-preview--avatar img{width:100%;height:100%;object-fit:cover}
.admin-dashboard-body .admin-account-image-preview--cover{
  width:100%;min-height:120px;background:linear-gradient(135deg,#0b2d75 0%,#3b82f6 48%,#f5b928 100%)
}
.admin-dashboard-body .admin-account-image-preview--cover.is-custom{background:#e2e8f0}
.admin-dashboard-body .admin-account-image-preview--cover img{width:100%;height:120px;object-fit:cover;display:block}
.admin-dashboard-body .admin-account-image-placeholder{
  width:100%;height:100%;display:grid;place-items:center;font-size:42px;font-weight:900;
  color:#0f49ff;background:linear-gradient(145deg,#eef4ff,#fff)
}
.admin-dashboard-body .admin-account-cover-placeholder{
  font-size:12px;font-weight:900;color:rgba(255,255,255,.92);letter-spacing:.04em;text-transform:uppercase
}
.admin-dashboard-body .admin-account-image-field{display:grid;gap:6px}
.admin-dashboard-body .admin-account-image-field>span{font-size:12px;font-weight:900;color:#334155}
.admin-dashboard-body .admin-account-image-field input[type="url"],
.admin-dashboard-body .admin-account-image-field input[type="file"]{
  border:1px solid #dbe3f0;border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;width:100%
}
.admin-dashboard-body .admin-account-image-field input[type="url"]:focus{
  border-color:#0f49ff;box-shadow:0 0 0 3px rgba(15,73,255,.12);outline:0
}
.admin-dashboard-body .admin-account-image-file-label input[type="file"]{
  padding:9px;background:#f8fbff;cursor:pointer
}
.admin-dashboard-body .admin-account-image-actions{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:4px
}
@media(max-width:900px){
  .admin-dashboard-body .admin-account-images-grid{grid-template-columns:1fr}
}

/* Admin Dashboard — Fees Structure selection */
.admin-dashboard-body .admin-fees-structure-shell .admin-fees-structure-options{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px
}
.admin-dashboard-body .admin-fees-structure-card{
  position:relative;display:block;width:100%;text-align:left;border:2px solid #e2e8f0;border-radius:18px;
  padding:22px 20px 20px;background:#fff;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 6px 18px rgba(15,23,42,.04)
}
.admin-dashboard-body .admin-fees-structure-card:hover{border-color:#b8c9e8;background:#fafcff}
.admin-dashboard-body .admin-fees-structure-card.is-selected{
  border-color:#0f49ff;background:linear-gradient(180deg,#f5f9ff 0%,#fff 100%);
  box-shadow:0 0 0 4px rgba(15,73,255,.12),0 10px 24px rgba(15,73,255,.1)
}
.admin-dashboard-body .admin-fees-structure-card h3{margin:0 0 10px;font-size:18px;color:#08295c;padding-right:36px}
.admin-dashboard-body .admin-fees-structure-card p{margin:0;font-size:13px;font-weight:600;color:#64748b;line-height:1.55}
.admin-dashboard-body .admin-fees-structure-check{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;
  background:#0f49ff;color:#fff;font-size:16px;font-weight:900;line-height:1;
  display:none;place-items:center;box-shadow:0 4px 12px rgba(15,73,255,.28)
}
.admin-dashboard-body .admin-fees-structure-card.is-selected .admin-fees-structure-check{display:grid}
.admin-dashboard-body .admin-fees-structure-block{
  margin-top:22px;padding-top:22px;border-top:1px solid #e3ebfa
}
.admin-dashboard-body .admin-fees-structure-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.admin-dashboard-body .admin-fees-structure-block-title{margin:0 0 6px;font-size:18px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-fees-structure-block-lead{margin:0 0 14px;font-size:13px;font-weight:600;color:#64748b;line-height:1.5}
.admin-dashboard-body .admin-fees-structure-actions{display:flex;justify-content:flex-start;margin-bottom:0}
.admin-dashboard-body .admin-fees-terms-options{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px
}
.admin-dashboard-body .admin-fees-terms-card{
  position:relative;text-align:left;padding:14px 14px 16px;border-radius:14px;border:2px solid #e3ebfa;background:#fff;cursor:pointer
}
.admin-dashboard-body .admin-fees-terms-card:hover{border-color:#b8c9e8;background:#fafcff}
.admin-dashboard-body .admin-fees-terms-card.is-selected{
  border-color:#0f49ff;background:linear-gradient(165deg,#f5f8ff,#fff);box-shadow:0 10px 24px rgba(15,73,255,.12)
}
.admin-dashboard-body .admin-fees-terms-card h4{margin:0 0 6px;font-size:15px;font-weight:900;color:#08295c;padding-right:28px}
.admin-dashboard-body .admin-fees-terms-card p{margin:0;font-size:12px;font-weight:600;color:#64748b;line-height:1.45}
.admin-dashboard-body .admin-fees-terms-check{
  position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;
  background:#0f49ff;color:#fff;font-size:13px;font-weight:900;line-height:1;display:none;place-items:center
}
.admin-dashboard-body .admin-fees-terms-card.is-selected .admin-fees-terms-check{display:grid}
.admin-dashboard-body .admin-fees-invoice-account-options{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:14px
}
.admin-dashboard-body .admin-fees-invoice-account-card{
  position:relative;text-align:left;padding:14px 16px 16px;border-radius:14px;border:2px solid #e3ebfa;background:#fff;cursor:pointer
}
.admin-dashboard-body .admin-fees-invoice-account-card:hover{border-color:#b8c9e8;background:#fafcff}
.admin-dashboard-body .admin-fees-invoice-account-card.is-selected{
  border-color:#0f49ff;background:linear-gradient(165deg,#f5f8ff,#fff);box-shadow:0 10px 24px rgba(15,73,255,.12)
}
.admin-dashboard-body .admin-fees-invoice-account-card h4{margin:0 0 8px;font-size:15px;font-weight:900;color:#08295c;padding-right:28px}
.admin-dashboard-body .admin-fees-invoice-account-card p{margin:0 0 8px;font-size:12px;font-weight:600;color:#64748b;line-height:1.45}
.admin-dashboard-body .admin-fees-invoice-example{display:block;font-size:11px;font-weight:700;color:#0b2d75;font-style:italic}
.admin-dashboard-body .admin-fees-invoice-account-card.is-selected .admin-fees-terms-check{display:grid}
.admin-dashboard-body .admin-fees-discount-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px
}
.admin-dashboard-body .admin-fees-discount-field{display:flex;flex-direction:column;gap:6px}
.admin-dashboard-body .admin-fees-discount-field>span{font-size:12px;font-weight:800;color:#64748b}
.admin-dashboard-body .admin-fees-rules-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-top:4px
}
.admin-dashboard-body .admin-fees-rules-field-span-2{grid-column:1/-1}
.admin-dashboard-body .admin-fees-rules-textarea{
  width:100%;min-height:72px;padding:10px 12px;border:1px solid #d5deef;border-radius:10px;
  font:inherit;font-size:13px;font-weight:600;color:#0f172a;resize:vertical;line-height:1.45
}
.admin-dashboard-body .admin-fees-rules-textarea:focus{
  outline:none;border-color:#3b6fd4;box-shadow:0 0 0 3px rgba(59,111,212,.15)
}
@media (max-width:900px){
  .admin-dashboard-body .admin-fees-rules-form{grid-template-columns:1fr}
  .admin-dashboard-body .admin-fees-rules-field-span-2{grid-column:auto}
}
.admin-dashboard-body .admin-fees-discount-select,
.admin-dashboard-body .admin-fees-discount-input{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #d5e0f2;background:#fff;
  font-size:13px;font-weight:600;color:#0f172a
}
.admin-dashboard-body .admin-fees-discount-input:disabled{background:#f1f5f9;color:#94a3b8}
.admin-dashboard-body .admin-fees-discount-hint{font-size:12px;font-weight:600;color:#64748b;line-height:1.4}
.admin-dashboard-body .admin-student-fee-assign-form{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px
}
.admin-dashboard-body .admin-student-fee-assign-span-2{grid-column:1/-1}
.admin-dashboard-body .admin-student-fee-final{font-weight:900;color:#08295c;background:#f0f7ff}
@media(max-width:800px){
  .admin-dashboard-body .admin-student-fee-assign-form{grid-template-columns:1fr}
  .admin-dashboard-body .admin-student-fee-assign-span-2{grid-column:auto}
}
.admin-dashboard-body .admin-monthly-fees-in-settings .admin-soft-panel{margin-top:8px;border:1px solid #e6ebf4;border-radius:16px}
.admin-dashboard-body .admin-monthly-fees-in-settings .admin-fees-structure-block-title{margin-bottom:4px}
.admin-dashboard-body .admin-fees-setup-preview{
  margin-top:8px;padding:20px 20px 22px;border-radius:18px;border:1px solid #dce6f5;
  background:linear-gradient(165deg,#f8fbff 0%,#fff 55%,#fffdf6 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)
}
.admin-dashboard-body .admin-fees-setup-preview-head{margin-bottom:18px}
.admin-dashboard-body .admin-fees-setup-preview-title{margin:0 0 6px;font-size:20px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-fees-setup-preview-subtitle{margin:0;font-size:13px;font-weight:600;color:#64748b;line-height:1.5}
.admin-dashboard-body .admin-fees-setup-preview-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px
}
.admin-dashboard-body .admin-fees-setup-preview-block{
  padding:14px 16px;border-radius:14px;border:1px solid #e3ebfa;background:#fff
}
.admin-dashboard-body .admin-fees-setup-preview-block-title{
  margin:0 0 12px;font-size:13px;font-weight:900;color:#0b2d75;text-transform:uppercase;letter-spacing:.04em
}
.admin-dashboard-body .admin-fees-setup-preview-dl{margin:0;display:grid;gap:10px}
.admin-dashboard-body .admin-fees-setup-preview-row{display:grid;grid-template-columns:minmax(0,42%) 1fr;gap:10px;align-items:baseline}
.admin-dashboard-body .admin-fees-setup-preview-row dt{margin:0;font-size:12px;font-weight:800;color:#64748b}
.admin-dashboard-body .admin-fees-setup-preview-row dd{margin:0;font-size:14px;font-weight:800;color:#0f172a}
.admin-dashboard-body .admin-fees-setup-status-badge{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:900
}
.admin-dashboard-body .admin-fees-setup-status-badge.is-saved{background:#dcfce7;color:#166534}
.admin-dashboard-body .admin-fees-setup-status-badge.is-not-saved{background:#fef3c7;color:#92400e}
.admin-dashboard-body .admin-fees-setup-category-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.admin-dashboard-body .admin-fees-setup-category-list li{
  display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:#f5f8ff
}
.admin-dashboard-body .admin-fees-setup-category-list li span{font-size:13px;font-weight:700;color:#475467}
.admin-dashboard-body .admin-fees-setup-category-list li b{font-size:13px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-fees-setup-category-list li b.is-unset{color:#94a3b8;font-weight:800}
.admin-dashboard-body .admin-fees-setup-next-steps{padding-top:4px}
.admin-dashboard-body .admin-fees-setup-next-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.admin-dashboard-body .admin-fees-setup-next-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:14px 12px;border-radius:14px;
  border:1px solid #d5e3f7;background:#fff;cursor:pointer;text-align:left;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}
.admin-dashboard-body .admin-fees-setup-next-card:hover{
  border-color:#93b4f7;box-shadow:0 8px 20px rgba(15,73,255,.1);transform:translateY(-1px)
}
.admin-dashboard-body .admin-fees-setup-next-icon{font-size:20px;line-height:1}
.admin-dashboard-body .admin-fees-setup-next-label{font-size:13px;font-weight:900;color:#08295c;line-height:1.35}
@media(max-width:800px){
  .admin-dashboard-body .admin-fees-structure-shell .admin-fees-structure-options{grid-template-columns:1fr}
  .admin-dashboard-body .admin-fees-discount-form{grid-template-columns:1fr}
  .admin-dashboard-body .admin-fees-terms-options{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-dashboard-body .admin-fees-invoice-account-options{grid-template-columns:1fr}
  .admin-dashboard-body .admin-fees-setup-preview-grid{grid-template-columns:1fr}
  .admin-dashboard-body .admin-fees-setup-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .admin-dashboard-body .admin-fees-setup-next-grid{grid-template-columns:1fr}
}
.admin-dashboard-body .admin-fees-particulars-pane{padding:0}
.admin-dashboard-body .admin-fees-particulars-table-wrap{margin-top:8px}
.admin-dashboard-body .admin-fees-particulars-table th{white-space:nowrap}
.admin-dashboard-body .admin-fees-particular-input,
.admin-dashboard-body .admin-fees-particular-select{
  width:100%;min-width:0;padding:8px 10px;border-radius:10px;border:1px solid #d5e0f2;
  background:#fff;font-size:13px;font-weight:600;color:#0f172a
}
.admin-dashboard-body .admin-fees-particular-amount{max-width:120px}
.admin-dashboard-body .admin-fees-particulars-actions{margin-top:18px;display:flex;justify-content:flex-start}
@media(max-width:1100px){
  .admin-dashboard-body .admin-ip-layout{grid-template-columns:1fr}
  .admin-dashboard-body .admin-ip-preview-card{position:static}
}
@media(max-width:720px){
  .admin-dashboard-body .admin-ip-shell{padding:16px}
  .admin-dashboard-body .admin-ip-form-grid{grid-template-columns:1fr}
  .admin-dashboard-body .admin-ip-field-span-2{grid-column:auto}
  .admin-dashboard-body .admin-ip-form-footer{flex-direction:column;align-items:stretch}
  .admin-dashboard-body .admin-ip-btn-primary{width:100%}
  .admin-dashboard-body .admin-ip-logo-card{justify-content:center;text-align:center}
  .admin-dashboard-body .admin-ip-logo-actions{min-width:0;width:100%}
  .admin-dashboard-body .admin-ip-preview-row{grid-template-columns:1fr;gap:4px}
}

.admin-dashboard-body .admin-marks-grading-shell .admin-marks-grading-block{margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f4}
.admin-dashboard-body .admin-marks-grading-shell .admin-marks-grading-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.admin-dashboard-body .admin-marks-grading-example-note{
  margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#f8fafc;border:1px dashed #cbd5e1;
  font-size:12px;font-weight:600;color:#64748b;line-height:1.5
}
.admin-dashboard-body .admin-marks-grading-schoolid{margin:0}
.admin-dashboard-body .admin-marks-grading-empty{
  margin:10px 0 0;font-size:13px;font-weight:700;color:#64748b;text-align:center
}
.admin-dashboard-body .admin-marks-grading-form-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin-bottom:14px
}
.admin-dashboard-body .admin-marks-grading-field-span-2{grid-column:1/-1}
.admin-dashboard-body .admin-marks-grading-form-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.admin-dashboard-body .admin-marks-grading-actions-cell{white-space:nowrap}
.admin-dashboard-body .admin-marks-grading-btn{padding:6px 10px;font-size:12px}
.admin-dashboard-body .admin-marks-grading-btn-danger{color:#b91c1c;border-color:#fecaca}
@media (max-width:900px){
  .admin-dashboard-body .admin-marks-grading-form-grid{grid-template-columns:1fr}
  .admin-dashboard-body .admin-marks-grading-field-span-2{grid-column:auto}
}

.admin-dashboard-body .admin-exam-marks-shell .admin-exam-marks-block{margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f4}
.admin-dashboard-body .admin-exam-marks-shell .admin-exam-marks-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.admin-dashboard-body .admin-exam-marks-table-wrap{overflow-x:auto}
.admin-dashboard-body .admin-exam-marks-table{min-width:960px}
.admin-dashboard-body .admin-exam-marks-view-modal{
  position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:20px
}
.admin-dashboard-body .admin-exam-marks-view-modal[hidden]{display:none!important}
.admin-dashboard-body .admin-exam-marks-view-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.45)
}
.admin-dashboard-body .admin-exam-marks-view-panel{
  position:relative;z-index:1;width:min(520px,100%);max-height:85vh;overflow:auto;
  background:#fff;border-radius:14px;border:1px solid #d5deef;box-shadow:0 20px 48px rgba(15,41,92,.18);padding:18px 20px
}
.admin-dashboard-body .admin-exam-marks-view-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px
}
.admin-dashboard-body .admin-exam-marks-view-head h3{margin:0;font-size:17px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-exam-marks-view-close{
  border:0;background:#f1f5f9;color:#334155;width:32px;height:32px;border-radius:8px;font-size:22px;line-height:1;cursor:pointer
}
.admin-dashboard-body .admin-exam-marks-view-close:hover{background:#e2e8f0}

.admin-dashboard-body .admin-report-card-shell .admin-report-card-block{margin-top:20px;padding-top:20px;border-top:1px solid #e2e8f4}
.admin-dashboard-body .admin-report-card-shell .admin-report-card-block:first-of-type{margin-top:0;padding-top:0;border-top:0}
.admin-dashboard-body .admin-report-card-filter-grid{margin-bottom:14px}
.admin-dashboard-body .admin-report-card-screen-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.admin-dashboard-body .admin-report-card-print-root{
  background:#fff;border:1px solid #d5deef;border-radius:12px;padding:22px 24px;color:#0f172a
}
.admin-dashboard-body .admin-report-card-print-head{text-align:center;margin-bottom:18px;border-bottom:2px solid #08295c;padding-bottom:14px}
.admin-dashboard-body .admin-report-card-school-name{margin:0 0 6px;font-size:22px;font-weight:900;color:#08295c}
.admin-dashboard-body .admin-report-card-school-meta{margin:0;font-size:12px;font-weight:600;color:#64748b}
.admin-dashboard-body .admin-report-card-doc-title{margin:12px 0 0;font-size:16px;font-weight:800;color:#0f49ff}
.admin-dashboard-body .admin-report-card-student-block,
.admin-dashboard-body .admin-report-card-results-block,
.admin-dashboard-body .admin-report-card-summary-block{margin-top:18px}
.admin-dashboard-body .admin-report-card-student-block h4,
.admin-dashboard-body .admin-report-card-results-block h4,
.admin-dashboard-body .admin-report-card-summary-block h4{
  margin:0 0 10px;font-size:14px;font-weight:900;color:#08295c;text-transform:uppercase;letter-spacing:.04em
}
.admin-dashboard-body .admin-report-card-dl,
.admin-dashboard-body .admin-report-card-summary-dl{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0
}
.admin-dashboard-body .admin-report-card-dl div,
.admin-dashboard-body .admin-report-card-summary-dl div{display:flex;flex-direction:column;gap:2px}
.admin-dashboard-body .admin-report-card-dl dt,
.admin-dashboard-body .admin-report-card-summary-dl dt{font-size:11px;font-weight:800;color:#64748b}
.admin-dashboard-body .admin-report-card-dl dd,
.admin-dashboard-body .admin-report-card-summary-dl dd{margin:0;font-size:13px;font-weight:700;color:#0f172a}
.admin-dashboard-body .admin-report-card-summary-remarks{grid-column:1/-1}
.admin-dashboard-body .admin-report-card-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-dashboard-body .admin-report-card-table th,
.admin-dashboard-body .admin-report-card-table td{
  border:1px solid #d5deef;padding:8px 10px;text-align:left
}
.admin-dashboard-body .admin-report-card-table th{background:#f5f8ff;font-weight:800;color:#08295c}
.admin-dashboard-body .admin-report-card-grade-warning{
  margin:12px 0 0;padding:10px 12px;border-radius:8px;background:#fff7ed;border:1px solid #fed7aa;
  font-size:12px;font-weight:700;color:#9a3412
}
@media (max-width:720px){
  .admin-dashboard-body .admin-report-card-dl,
  .admin-dashboard-body .admin-report-card-summary-dl{grid-template-columns:1fr}
}
@media print{
  body.admin-report-card-print-mode .admin-sidebar,
  body.admin-report-card-print-mode .admin-topbar,
  body.admin-report-card-print-mode .menu-btn,
  body.admin-report-card-print-mode .admin-user-card,
  body.admin-report-card-print-mode .admin-page-section:not(#adminSettingsHubSection),
  body.admin-report-card-print-mode .admin-settings-hero,
  body.admin-report-card-print-mode .admin-ip-breadcrumb,
  body.admin-report-card-print-mode .admin-ip-page-head,
  body.admin-report-card-print-mode #adminReportCardOverviewSection,
  body.admin-report-card-print-mode #adminReportCardFilterSection,
  body.admin-report-card-print-mode .admin-report-card-no-print,
  body.admin-report-card-print-mode #adminReportCardNoResults,
  body.admin-report-card-print-mode .admin-settings-scope-badge{display:none!important}
  body.admin-report-card-print-mode .admin-main,
  body.admin-report-card-print-mode .admin-settings-hub,
  body.admin-report-card-print-mode .admin-settings-pane,
  body.admin-report-card-print-mode #adminReportCardPreviewSection{
    display:block!important;width:100%!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important
  }
  body.admin-report-card-print-mode #adminReportCardPrintRoot{
    border:0!important;box-shadow:none!important;padding:0!important;margin:0!important
  }
  body.admin-report-card-print-mode .admin-report-card-grade-warning{
    border:1px solid #ccc!important;background:#fff!important;color:#000!important
  }
}


/* Driver Teacher Transport Dashboard UI Redesign */
.driver-transport-ui {
  background: #eef2f7;
}

.driver-transport-ui .driver-transport-main {
  background: #eef2f7;
}

.driver-transport-sidebar {
  background: linear-gradient(180deg, #0a1628 0%, #0f2744 48%, #123a5c 100%);
  width: 248px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.dts-sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  align-content: start;
}

.driver-transport-sidebar .dts-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.driver-transport-sidebar .dts-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-size: 22px;
}

.driver-transport-sidebar .dts-brand strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.driver-transport-sidebar .dts-brand small {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 700;
  font-size: 11px;
}

.dts-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

.dts-sidebar-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.dts-sidebar-profile-text b {
  display: block;
  color: #fff;
  font-size: 13px;
}

.dts-sidebar-profile-text small {
  color: rgba(255, 255, 255, 0.75);
  font-size: 11px;
  font-weight: 700;
}

.dts-online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  margin-left: 4px;
  vertical-align: middle;
}

.dts-sidebar-nav a {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  margin: 2px 10px;
}

.dts-sidebar-nav a.active,
.dts-sidebar-nav a:hover {
  background: rgba(37, 99, 235, 0.45);
  color: #fff;
}

.dts-nav-logout {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 20px);
  margin: 2px 10px 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.dts-nav-logout:hover {
  background: rgba(37, 99, 235, 0.45);
  color: #fff;
}

.driver-module-note {
  margin: 0 0 12px;
  color: #64748b;
  font-size: 13px;
}

.driver-module-empty {
  margin: 12px 0 0;
  color: #64748b;
  font-size: 13px;
}

.driver-vehicle-check-grid,
.driver-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.driver-vehicle-check-grid article,
.driver-settings-grid article {
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.driver-vehicle-check-grid small,
.driver-settings-grid small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.driver-vehicle-check-grid strong,
.driver-settings-grid strong {
  color: #0f172a;
  font-size: 15px;
}

.driver-vehicle-checklist h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: #0f172a;
}

.driver-vehicle-checklist ul {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  font-size: 13px;
}

.driver-vehicle-checklist li + li {
  margin-top: 4px;
}

.driver-notices-list {
  display: grid;
  gap: 10px;
}

.driver-notice-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.driver-notice-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
}

.driver-notice-card header strong {
  color: #0f172a;
  font-size: 14px;
}

.driver-notice-card header span {
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.driver-notice-card p {
  margin: 0;
  color: #334155;
  font-size: 13px;
  line-height: 1.45;
}

.driver-settings-actions {
  margin-top: 8px;
}

.driver-route-ops-detail-actions.is-route-active {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dts-nav-icon {
  width: 22px;
  display: inline-block;
}

.dts-help-card {
  margin: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(147, 197, 253, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dts-help-card strong {
  display: block;
  color: #fff;
  font-size: 13px;
  margin-bottom: 4px;
}

.dts-help-card p {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 700;
}

.dts-help-phone {
  color: #bfdbfe;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
}

.dts-sidebar-logout {
  margin: 8px 12px 0;
  width: calc(100% - 24px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 10px;
  font-weight: 800;
  cursor: pointer;
}

.driver-transport-ui .dtd-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  min-height: 48px;
  max-height: 52px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.driver-transport-ui .dtd-topbar .welcome {
  display: none;
}

.dtd-menu-toggle {
  border: 0;
  background: #f1f5f9;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
}

.dtd-topbar-title {
  flex: 1;
  min-width: 0;
}

.dtd-topbar-title h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
}

.dtd-topbar-date {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.dtd-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtd-notify-btn {
  position: relative;
  border: 0;
  background: #f1f5f9;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
}

.dtd-topbar-profile {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dtd-topbar-profile span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.dtd-logout-btn {
  padding: 8px 14px;
  font-size: 12px;
}

.driver-transport-dashboard {
  padding: 14px 18px 24px;
}

.dtd-summary-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.dtd-summary-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 68px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #e8edf5;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.dtd-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}

.dtd-card-route .dtd-summary-icon { background: #dbeafe; }
.dtd-card-students .dtd-summary-icon { background: #dcfce7; }
.dtd-card-picked .dtd-summary-icon { background: #fef3c7; }
.dtd-card-dropped .dtd-summary-icon { background: #ede9fe; }
.dtd-card-eta .dtd-summary-icon { background: #cffafe; }

.dtd-summary-card small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
}

.dtd-summary-card strong {
  display: block;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.dtd-summary-card p {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}

.dtd-live-route-panel {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e8edf5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  padding: 16px 16px 14px;
}

.dtd-live-route-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.dtd-live-route-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dtd-live-route-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}

.dtd-live-badge {
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  animation: dtd-live-pulse 2s ease-in-out infinite;
}

@keyframes dtd-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

.dtd-live-badge[hidden] {
  display: none !important;
}

.dtd-live-route-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.dtd-map-stage {
  position: relative;
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(145deg, #e8f1ff, #f8fbff);
  border: 1px solid #dbeafe;
}

.dtd-map-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.dtd-map-svg {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
}

.dtd-map-road {
  fill: none;
  stroke: #3b82f6;
  stroke-width: 6;
  stroke-linecap: round;
}

.dtd-map-stop {
  fill: #22c55e;
  stroke: #fff;
  stroke-width: 3;
}

.dtd-map-stop + text {
  fill: #fff;
  font-size: 12px;
  font-weight: 900;
}

.dtd-map-bus {
  fill: #2563eb;
  stroke: #fff;
  stroke-width: 3;
}

.dtd-map-school {
  fill: #ef4444;
  stroke: #fff;
  stroke-width: 3;
}

.dtd-map-stop-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.dtd-map-stop-chip {
  position: absolute;
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #cbd5e1;
  font-size: 10px;
  font-weight: 800;
  color: #334155;
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dtd-map-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}

.dtd-map-integration-note {
  position: absolute;
  left: 50%;
  bottom: 18%;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 800;
  color: #475569;
  z-index: 1;
  white-space: nowrap;
}

.dtd-map-float-card {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(220px, 42%);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  border: 1px solid #e2e8f0;
  display: grid;
  gap: 8px;
  z-index: 2;
}

.dtd-map-float-card small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
}

.dtd-map-float-card strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
}

.dtd-start-route-overlay {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3;
  border: 0;
  border-radius: 14px;
  padding: 12px 24px;
  background: #2563eb;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.35);
}

.dtd-start-route-overlay[hidden] {
  display: none !important;
}

.dtd-maps-link {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0d9488;
  color: #fff !important;
  font-weight: 800;
  font-size: 12px;
  text-decoration: none;
}

.dtd-dashboard-message {
  min-height: 18px;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f766e;
}

.dtd-dashboard-message.is-error {
  color: #b91c1c;
}

.dtd-action-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.dtd-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.dtd-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.dtd-action-btn span {
  font-size: 16px;
}

.dtd-btn-refresh { background: #16a34a; }
.dtd-btn-pickup { background: #f59e0b; color: #1f2937; }
.dtd-btn-dropoff { background: #7c3aed; }
.dtd-btn-end { background: #dc2626; }
.dtd-btn-start { background: #2563eb; }

.driver-route-ops-control-bridge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.driver-route-ops-detail-actions {
  margin-top: 14px;
}

.driver-dashboard-legacy-hidden {
  display: none !important;
}

body.driver-sidebar-collapsed .driver-transport-sidebar {
  transform: translateX(-100%);
}

@media (max-width: 1200px) {
  .dtd-summary-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dtd-summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dtd-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dtd-map-float-card {
    position: static;
    width: auto;
    margin: 10px;
  }
  .dtd-map-stage {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .dtd-summary-row:not(.dtd-summary-row--dashboard-hidden),
  .dtd-action-row {
    grid-template-columns: 1fr;
  }
  .driver-transport-ui .dtd-topbar {
    flex-wrap: wrap;
    min-height: auto;
    max-height: none;
  }
  .dtd-topbar-title h1 {
    font-size: 18px;
  }
  .driver-transport-dashboard.dtd-live-route-full-view .dtd-map-stage {
    min-height: clamp(280px, calc(100vh - 300px), 440px);
    height: clamp(280px, calc(100vh - 300px), 440px);
  }
}

/* Driver Teacher — compact layout, live-route full view, session button states */
.driver-transport-ui .driver-transport-main {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 8px);
  padding: 18px 20px;
  overflow-x: hidden;
}

.driver-transport-ui .driver-transport-main > .dtd-topbar {
  flex-shrink: 0;
  margin-bottom: 10px;
}

.driver-transport-sidebar {
  width: 240px;
  min-width: 240px;
  max-width: 240px;
}

.driver-transport-dashboard.dtd-live-route-full-view .dtd-summary-row--dashboard-hidden {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.driver-transport-dashboard.dtd-live-route-full-view {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.driver-transport-dashboard.dtd-live-route-full-view .dtd-live-route-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.driver-transport-dashboard.dtd-live-route-full-view .dtd-map-stage {
  min-height: clamp(380px, calc(100vh - 232px), 720px);
  height: clamp(380px, calc(100vh - 232px), 720px);
  max-height: none;
}

.dtd-map-completed-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #bbf7d0;
  color: #166534;
  font-size: 14px;
  font-weight: 900;
}

.dtd-map-stage.is-session-completed .dtd-start-route-overlay {
  display: none !important;
}

.dtd-action-row.is-session-completed {
  grid-template-columns: minmax(0, 1.05fr) repeat(4, minmax(0, 1fr));
}

.dtd-start-session-bar[hidden] {
  display: none !important;
}

/* Founder Dashboard — International UI Layout Cleanup V1 */
body.bs-founder-body.bs-nav-dashboard .fd7-dashboard-area {
  padding: 0 2px 20px !important;
  max-width: 100%;
  overflow-x: hidden;
}

body.bs-founder-body.bs-nav-dashboard .fd7-summary-grid,
body.bs-founder-body.bs-nav-dashboard .fd7-card-grid,
body.bs-founder-body.bs-nav-dashboard .fd7-finance-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 20px !important;
  margin: 0 0 20px !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-card {
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  min-height: 160px !important;
  max-width: none !important;
  width: 100% !important;
  padding: 24px !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-card-left {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-card-copy {
  min-width: 0;
  flex: 1 1 auto;
}

body.bs-founder-body.bs-nav-dashboard .fd7-card-title {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  white-space: normal !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-card-note {
  display: none !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-value {
  align-self: flex-start !important;
  margin-top: 14px !important;
  font-size: 28px !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  word-break: break-word !important;
  width: 100% !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-finance .fd7-value {
  font-size: 26px !important;
}

body.bs-founder-body.bs-nav-dashboard #fd7SoftwareSubscriptionProfitCard .fd7-card-title {
  font-size: 13px !important;
}

body.bs-founder-body.bs-nav-dashboard .fd7-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  flex-shrink: 0 !important;
}

body.bs-founder-body.bs-nav-dashboard .bs-lower-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-top: 18px !important;
  max-width: 100%;
}

body.bs-founder-body.bs-nav-dashboard .fd10-recent-table-panel,
body.bs-founder-body.bs-nav-dashboard .bs-lower-grid .bs-panel {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.bs-founder-body.bs-nav-dashboard .fd10-table-wrap {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
}

body.bs-founder-body.bs-nav-dashboard .fd10-table,
body.bs-founder-body.bs-nav-dashboard .bs-lower-grid .fd10-recent-table-panel .fd10-table {
  min-width: 520px !important;
  width: 100% !important;
  table-layout: fixed !important;
}

body.bs-founder-body.bs-nav-dashboard .fd10-table th,
body.bs-founder-body.bs-nav-dashboard .fd10-table td {
  padding: 10px 8px !important;
  font-size: 12px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.bs-founder-body.bs-nav-dashboard .bs-admin-overview-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

body.bs-founder-body.bs-nav-dashboard .bs-admin-donut-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 8px auto 12px;
}

body.bs-founder-body.bs-nav-dashboard .bs-admin-donut {
  margin: 0 auto !important;
  flex-shrink: 0;
}

body.bs-founder-body.bs-nav-dashboard .bs-admin-donut::after {
  content: none !important;
  display: none !important;
}

body.bs-founder-body.bs-nav-dashboard .bs-admin-donut-label {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  color: #1e293b;
  text-align: center;
  line-height: 1.2;
}

body.bs-founder-body.bs-nav-dashboard .bs-legend {
  display: grid !important;
  gap: 8px !important;
  font-size: 12px !important;
}

@media (max-width: 1100px) {
  body.bs-founder-body.bs-nav-dashboard .fd7-summary-grid,
  body.bs-founder-body.bs-nav-dashboard .fd7-card-grid,
  body.bs-founder-body.bs-nav-dashboard .fd7-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  body.bs-founder-body.bs-nav-dashboard .fd7-summary-grid,
  body.bs-founder-body.bs-nav-dashboard .fd7-card-grid,
  body.bs-founder-body.bs-nav-dashboard .fd7-finance-grid,
  body.bs-founder-body.bs-nav-dashboard .bs-lower-grid {
    grid-template-columns: 1fr !important;
  }

  body.bs-founder-body.bs-nav-dashboard .fd7-card {
    min-height: 148px !important;
  }

  body.bs-founder-body.bs-nav-dashboard .fd7-value {
    font-size: 24px !important;
  }
}

/* Admin Module — slight compact layout (admin-module-dashboard only; not Founder/Teacher/Parent/Student/Driver) */
.admin-dashboard-body.admin-module-dashboard{
  overflow-x:hidden;
}
.admin-module-dashboard .admin-main{
  padding:18px;
}
.admin-module-dashboard .admin-topbar{
  margin-bottom:16px;
  padding:10px 16px;
  border-radius:16px;
}
.admin-module-dashboard .admin-title h1{
  font-size:27px;
}
.admin-module-dashboard .admin-title p{
  font-size:14px;
}
.admin-module-dashboard .sidebar-nav.admin-nav a,
.admin-module-dashboard .admin-nav-parent{
  padding:11px 12px;
  font-size:15px;
}
.admin-module-dashboard .admin-nav-sublink{
  padding:8px 10px 8px 26px;
  font-size:14px;
}
.admin-module-dashboard .admin-dashboard-metric-grid{
  width:100%;
  max-width:100%;
}
.admin-module-dashboard .admin-metric-card{
  min-width:0;
  max-width:none;
  min-height:132px;
  padding:18px 16px 16px;
}
.admin-module-dashboard .admin-page-section{
  max-width:100%;
  overflow-x:hidden;
}

/* Admin Module — mobile compact UI (admin-module-dashboard only) */
@media (max-width: 760px) {
  .admin-module-dashboard .admin-main{
    padding:10px 12px;
    box-sizing:border-box;
  }
  .admin-module-dashboard .admin-topbar{
    flex-wrap:wrap;
    gap:8px;
    padding:8px 12px;
  }
  .admin-module-dashboard .admin-title h1{
    font-size:20px;
    line-height:1.2;
  }
  .admin-module-dashboard .admin-title p{
    font-size:12px;
  }
  .admin-module-dashboard .admin-dashboard-metric-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .admin-module-dashboard .admin-metric-card{
    min-height:118px;
    padding:14px 12px 12px;
    row-gap:10px;
    column-gap:12px;
  }
  .admin-module-dashboard .admin-metric-card .admin-metric-icon{
    width:40px;
    height:40px;
    font-size:20px;
  }
  .admin-module-dashboard .admin-page-section,
  .admin-module-dashboard .admin-att-panel,
  .admin-module-dashboard .admin-class-panel,
  .admin-module-dashboard .admin-student-panel,
  .admin-module-dashboard .admin-parent-panel,
  .admin-module-dashboard .admin-teachers-list-shell,
  .admin-module-dashboard .admin-staff-login-shell,
  .admin-module-dashboard .teacher-form-card{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .admin-module-dashboard table{
    min-width:560px;
  }
  .admin-module-dashboard .admin-att-table,
  .admin-module-dashboard .admin-class-table,
  .admin-module-dashboard .admin-staff-login-table,
  .admin-module-dashboard .admin-transport-table{
    min-width:520px;
  }
  .admin-module-dashboard .field input,
  .admin-module-dashboard .field select,
  .admin-module-dashboard .field textarea,
  .admin-module-dashboard .admin-teachers-search-input,
  .admin-module-dashboard .admin-filter-row input,
  .admin-module-dashboard .admin-filter-row select{
    max-width:100%;
    box-sizing:border-box;
  }
  .admin-module-dashboard .admin-teachers-toolbar,
  .admin-module-dashboard .admin-filter-row,
  .admin-module-dashboard .admin-action-row,
  .admin-module-dashboard .admin-toolbar,
  .admin-module-dashboard .admin-form-row,
  .admin-module-dashboard .admin-teachers-head-actions,
  .admin-module-dashboard .admin-class-actions-grid,
  .admin-module-dashboard .admin-att-actions-grid{
    flex-wrap:wrap;
    gap:8px;
  }
  .admin-module-dashboard .admin-teachers-toolbar > *,
  .admin-module-dashboard .admin-filter-row > *,
  .admin-module-dashboard .admin-action-row > *,
  .admin-module-dashboard .admin-toolbar > *{
    min-width:0;
    flex:1 1 auto;
  }
  .admin-module-dashboard .admin-btn,
  .admin-module-dashboard .admin-teachers-head-action-btn,
  .admin-module-dashboard .teacher-actions button,
  .admin-module-dashboard .admin-dashboard-basic-list-btn{
    white-space:normal;
    text-align:center;
    min-height:36px;
  }
  .admin-module-dashboard .admin-teachers-card-grid,
  .admin-module-dashboard .admin-student-card-grid,
  .admin-module-dashboard .admin-parent-card-grid{
    grid-template-columns:1fr !important;
    gap:12px;
  }
  .admin-module-dashboard .admin-sidebar{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .admin-module-dashboard .admin-sidebar-profile-menu{
    margin-top:8px;
  }
}
@media (max-width: 480px) {
  .admin-module-dashboard .admin-main{
    padding:8px 10px;
  }
  .admin-module-dashboard .admin-metric-card strong{
    font-size:26px !important;
  }
  .admin-module-dashboard .admin-metric-card.admin-metric-money strong{
    font-size:20px !important;
  }
  .admin-module-dashboard table{
    min-width:480px;
  }
}

/* Admin Fees subviews — enforce single visible pane */
.admin-dashboard-body #adminFeesStructureHost[hidden],
.admin-dashboard-body .admin-fees-subview[hidden],
.admin-dashboard-body #adminFeesCollectAdmissionPane[hidden],
.admin-dashboard-body #adminFeesMonthlyCollectionPane[hidden] {
  display: none !important;
}
.admin-dashboard-body #adminCollectAdmissionThaiTransferPanel[hidden] {
  display: none !important;
}
.admin-dashboard-body #adminFeesCollectAdmissionPane:not([hidden]) #adminCollectAdmissionQrImageWrap:not([hidden]) {
  display: flex;
}

/* Admin Collect Admission Fee UI */
.admin-collect-admission-fee {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.admin-collect-admission-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef4ff 0%, #f5f3ff 55%, #fff 100%);
  border: 1px solid #dbe7ff;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}
.admin-collect-admission-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  color: #0f172a;
}
.admin-collect-admission-head p {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
}
.admin-collect-admission-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-collect-admission-btn {
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
}
.admin-collect-admission-btn--ghost {
  background: #fff;
  border-color: #dbe7ff;
  color: #334155;
}
.admin-collect-admission-btn--ghost:hover {
  background: #f8fbff;
}
.admin-collect-admission-btn--primary {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}
.admin-collect-admission-btn--primary:hover {
  filter: brightness(1.04);
}
.admin-collect-admission-btn--block {
  width: 100%;
}
.admin-collect-admission-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-collect-admission-summary-card {
  border-radius: 16px;
  padding: 16px 18px;
  border: 1px solid #e8eef7;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.admin-collect-admission-summary-card small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-bottom: 6px;
}
.admin-collect-admission-summary-card strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}
.admin-collect-admission-summary-card span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
}
.admin-collect-admission-summary-card--student {
  background: linear-gradient(145deg, #eff6ff, #fff);
  border-color: #bfdbfe;
}
.admin-collect-admission-summary-card--due {
  background: linear-gradient(145deg, #fef3c7, #fff);
  border-color: #fcd34d;
}
.admin-collect-admission-summary-card--paid {
  background: linear-gradient(145deg, #ecfdf5, #fff);
  border-color: #86efac;
}
.admin-collect-admission-summary-card--date {
  background: linear-gradient(145deg, #f5f3ff, #fff);
  border-color: #ddd6fe;
}
.admin-collect-admission-message {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
}
.admin-collect-admission-message.is-success {
  background: #ecfdf5;
  border-color: #86efac;
  color: #166534;
}
.admin-collect-admission-message.is-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.admin-collect-admission-section {
  background: #fff;
  border: 1px solid #e8eef7;
  border-radius: 18px;
  padding: 18px 20px 20px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.admin-collect-admission-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf2f7;
}
.admin-collect-admission-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: linear-gradient(135deg, #eef4ff, #f5f3ff);
  flex-shrink: 0;
}
.admin-collect-admission-section-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
}
.admin-collect-admission-section-head p {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
}
.admin-collect-admission-student-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}
.admin-collect-admission-student-card {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f8fbff, #fff);
  border: 1px solid #dbe7ff;
}
.admin-collect-admission-student-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: #eef4ff;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 28px;
}
.admin-collect-admission-student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-collect-admission-photo-letter {
  font-size: 22px;
  font-weight: 900;
  color: #2563eb;
}
.admin-collect-admission-student-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.admin-collect-admission-student-details div {
  min-width: 0;
}
.admin-collect-admission-student-details dt {
  margin: 0 0 2px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
.admin-collect-admission-student-details dd {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  overflow-wrap: anywhere;
}
.admin-collect-admission-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-collect-admission-field--search {
  grid-column: 1 / -1;
}
.admin-collect-admission-field--wide {
  grid-column: 1 / -1;
}
.admin-collect-admission-field span {
  font-size: 12px;
  font-weight: 800;
  color: #475569;
}
.admin-collect-admission-field input,
.admin-collect-admission-field select,
.admin-collect-admission-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbe7ff;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: #fff;
}
.admin-collect-admission-fee-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-collect-admission-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-collect-admission-fee-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.admin-collect-admission-fee-table tbody td,
.admin-collect-admission-fee-table tfoot td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f7;
  vertical-align: middle;
}
.admin-collect-admission-fee-table tbody tr:nth-child(odd) {
  background: #fafbff;
}
.admin-collect-admission-fee-name {
  font-weight: 800;
  color: #0f172a;
}
.admin-collect-admission-fee-amount,
.admin-collect-admission-fee-remarks {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #dbe7ff;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
}
.admin-collect-admission-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.admin-collect-admission-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 18px;
  align-items: start;
}
.admin-collect-admission-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-collect-admission-summary-panel {
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}
.admin-collect-admission-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.admin-collect-admission-summary-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e8eef7;
}
.admin-collect-admission-summary-list span {
  font-size: 12px;
  font-weight: 800;
  color: #64748b;
}
.admin-collect-admission-summary-list strong {
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}
.admin-collect-admission-status.is-paid {
  color: #15803d;
}
.admin-collect-admission-status.is-partial {
  color: #b45309;
}
.admin-collect-admission-status.is-unpaid {
  color: #64748b;
}
.admin-collect-admission-summary-actions {
  margin-top: 14px;
}
.admin-collect-admission-recent-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-collect-admission-recent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-collect-admission-recent-table thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.admin-collect-admission-recent-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f7;
  font-weight: 700;
  color: #334155;
  vertical-align: middle;
}
.admin-collect-admission-empty-row td {
  text-align: center;
  color: #94a3b8;
  font-weight: 700;
  padding: 24px 12px !important;
}
.admin-collect-admission-view-btn {
  border: 1px solid #dbe7ff;
  background: #f8fbff;
  color: #1d4ed8;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.admin-collect-admission-view-btn:hover {
  background: #eef4ff;
}
.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;
}
@media (max-width: 1100px) {
  .admin-collect-admission-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-collect-admission-two-col {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .admin-collect-admission-summary-grid,
  .admin-collect-admission-student-panel,
  .admin-collect-admission-form-grid,
  .admin-collect-admission-student-details {
    grid-template-columns: 1fr;
  }
  .admin-collect-admission-head-actions {
    width: 100%;
  }
  .admin-collect-admission-head-actions .admin-collect-admission-btn {
    flex: 1 1 auto;
  }
  .admin-collect-admission-student-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Collect Admission Fee — Monthly Fee Collection UI parity */
#adminFeesCollectAdmissionPane.admin-monthly-fee-collection {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 0 28px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
#adminFeesCollectAdmissionPane #adminCollectAdmissionSaveBtn.admin-collect-admission-floating-save {
  display: none !important;
}
/* Collect Admission Fee — hide header chrome (Fees hero, breadcrumb, title, KPIs, tabs) */
#adminFeesSection:has(#adminFeesCollectAdmissionPane:not([hidden])) > .admin-transport-foundation > .admin-transport-hero {
  display: none !important;
}
#adminFeesCollectAdmissionPane:not([hidden]) > .admin-collect-admission-breadcrumb,
#adminFeesCollectAdmissionPane:not([hidden]) > .admin-collect-admission-page-head,
#adminFeesCollectAdmissionPane:not([hidden]) > .admin-monthly-fee-page-head,
#adminFeesCollectAdmissionPane:not([hidden]) > .admin-collect-admission-kpi-grid,
#adminFeesCollectAdmissionPane:not([hidden]) > .admin-collect-admission-tabs {
  display: none !important;
}
#adminFeesCollectAdmissionPane:not([hidden]) {
  padding-top: 0;
  gap: 12px;
}
/* Collect Admission — compact Search Student card */
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-monthly-fee-card-head {
  padding: 8px 14px;
  align-items: center;
  gap: 10px;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-monthly-fee-card-head-icon {
  width: 30px;
  height: 30px;
  font-size: 14px;
  border-radius: 9px;
  flex-shrink: 0;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-monthly-fee-card-head h3 {
  margin: 0 0 1px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-monthly-fee-card-head p {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  color: #64748b;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-monthly-fee-card-body {
  padding: 10px 14px 12px;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-mode {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 4px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-radio {
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-radio:has(input:checked) {
  background: #fff;
  color: #5b21b6;
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.12);
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search {
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, #faf5ff 0%, #fff 70%);
  border: 1px solid #ddd6fe;
  box-shadow: 0 4px 14px rgba(91, 33, 182, 0.06);
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search > span:first-of-type {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6d28d9;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-wrap {
  display: block;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-icon {
  left: 14px;
  font-size: 14px;
  opacity: 0.7;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search input::placeholder {
  color: #94a3b8;
  font-weight: 500;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14);
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-results {
  margin-top: 10px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e9d5ff;
  background: #faf5ff;
  box-shadow: 0 8px 20px rgba(91, 33, 182, 0.08);
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-empty {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 11px;
}

/* Collect Admission Fee — one blue family with soft color depth */
#adminFeesCollectAdmissionPane {
  --caf-accent: #1e40af;
  --caf-accent-mid: #2563eb;
  --caf-accent-light: #3b82f6;
  --caf-accent-hover: #1d4ed8;
  --caf-accent-soft: #eff6ff;
  --caf-accent-muted: #dbeafe;
  --caf-border: #cfe0f7;
  --caf-surface: #ffffff;
  --caf-surface-muted: #f8fafc;
  --caf-tint-search: #f0f6ff;
  --caf-tint-student: #eef4ff;
  --caf-tint-payment: #f1f5ff;
  --caf-tint-summary: #eff6ff;
  --caf-text: #0f172a;
  --caf-muted: #64748b;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card {
  border-color: var(--caf-border) !important;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.06) !important;
  overflow: hidden;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--search {
  border-left: 4px solid var(--caf-accent-light) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--student {
  border-left: 4px solid var(--caf-accent-mid) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--payment {
  border-left: 4px solid var(--caf-accent) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--summary {
  border-left: 4px solid #1e3a8a !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--search .admin-monthly-fee-card-head {
  background: linear-gradient(135deg, var(--caf-tint-search) 0%, var(--caf-surface) 100%) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--student .admin-monthly-fee-card-head {
  background: linear-gradient(135deg, var(--caf-tint-student) 0%, var(--caf-surface) 100%) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--payment .admin-monthly-fee-card-head {
  background: linear-gradient(135deg, var(--caf-tint-payment) 0%, var(--caf-surface) 100%) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-color-card--summary .admin-monthly-fee-card-head {
  background: linear-gradient(135deg, var(--caf-tint-summary) 0%, var(--caf-surface) 100%) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-card-head-icon {
  background: var(--caf-accent-muted) !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.12) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-card-head h3 {
  color: var(--caf-accent) !important;
  font-weight: 800 !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-card-head p {
  color: var(--caf-muted) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-radio:has(input:checked) {
  background: var(--caf-surface) !important;
  color: var(--caf-accent) !important;
  box-shadow: 0 1px 4px rgba(30, 64, 175, 0.12) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-mode {
  background: var(--caf-accent-soft) !important;
  border-color: var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search {
  background: linear-gradient(145deg, var(--caf-tint-search) 0%, var(--caf-surface) 85%) !important;
  border: 1px solid var(--caf-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search > span:first-of-type {
  color: var(--caf-accent) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search input {
  border-color: var(--caf-border) !important;
  background: var(--caf-surface) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-field--search input:focus {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-search-card .admin-collect-admission-search-results {
  border-color: var(--caf-border) !important;
  background: var(--caf-surface-muted) !important;
  box-shadow: none !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-search-result,
#adminFeesCollectAdmissionPane .admin-collect-admission-search-result {
  border-color: var(--caf-border) !important;
  background: var(--caf-surface) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-search-result:hover,
#adminFeesCollectAdmissionPane .admin-collect-admission-search-result:hover,
#adminFeesCollectAdmissionPane .admin-collect-admission-search-result:focus {
  border-color: #93c5fd !important;
  background: var(--caf-accent-soft) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-profile-card {
  background: linear-gradient(160deg, var(--caf-tint-student) 0%, var(--caf-surface) 100%) !important;
  border: 1px solid var(--caf-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-profile-label {
  color: var(--caf-accent-mid) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-photo,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-student-photo {
  background: linear-gradient(145deg, #93c5fd, var(--caf-accent-mid)) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-meta > div {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: var(--caf-border) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-card,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-breakdown-card {
  border-color: var(--caf-border) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-head {
  background: var(--caf-surface-muted) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-icon {
  background: var(--caf-accent-soft) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-tools {
  background: var(--caf-surface-muted) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-section-row td {
  background: var(--caf-accent-soft) !important;
  color: var(--caf-accent) !important;
  border-top-color: var(--caf-border) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight td {
  background: linear-gradient(135deg, var(--caf-accent-soft) 0%, var(--caf-accent-muted) 100%) !important;
  border-top: 2px solid var(--caf-accent-light) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-amount {
  color: var(--caf-accent) !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-paid {
  color: #166534 !important;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-balance {
  color: #b91c1c !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-mini-field {
  background: linear-gradient(145deg, var(--caf-tint-payment) 0%, var(--caf-surface) 100%) !important;
  border: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-field--amount-received {
  background: linear-gradient(145deg, var(--caf-accent-soft) 0%, var(--caf-surface) 100%) !important;
  border: 1px solid #bfdbfe !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-field--amount-received input {
  border-color: var(--caf-border) !important;
  color: var(--caf-text) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-amount-helper {
  color: var(--caf-muted) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-transfer-box {
  border: 1px solid var(--caf-border) !important;
  background: var(--caf-surface) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-panel-head {
  background: var(--caf-surface-muted) !important;
  border-bottom: 1px solid var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-panel-icon {
  background: var(--caf-surface) !important;
  box-shadow: none !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-qr-col {
  border-color: var(--caf-border) !important;
  background: var(--caf-surface-muted) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-due-block {
  background: var(--caf-accent-soft) !important;
  border: 1px solid #bfdbfe !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-due-amount {
  color: var(--caf-accent) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-details,
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-transfer-steps-box {
  background: var(--caf-surface-muted) !important;
  border-color: var(--caf-border) !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-btn--confirm,
#adminFeesCollectAdmissionPane .admin-collect-admission-btn--confirm {
  background: var(--caf-accent) !important;
  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.2) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-summary-due-highlight {
  background: linear-gradient(135deg, var(--caf-accent-soft) 0%, var(--caf-accent-muted) 100%) !important;
  border: 1px solid #93c5fd !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-summary-due-highlight span {
  color: var(--caf-muted) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-summary-due-highlight strong {
  color: var(--caf-accent) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-btn--save,
#adminFeesCollectAdmissionPane .admin-collect-admission-btn--save {
  background: linear-gradient(135deg, var(--caf-accent-mid) 0%, var(--caf-accent) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.28) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-btn--save:hover,
#adminFeesCollectAdmissionPane .admin-collect-admission-btn--save:hover {
  background: linear-gradient(135deg, var(--caf-accent-light) 0%, var(--caf-accent-hover) 100%) !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-btn--ghost,
#adminFeesCollectAdmissionPane .admin-collect-admission-btn--ghost {
  background: var(--caf-surface) !important;
  border: 1px solid var(--caf-border) !important;
  color: #334155 !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-status-pill.is-unpaid,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-badge.is-new,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-pill.is-unpaid {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #fecaca !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-status-pill.is-paid,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-badge.is-paid,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-pill.is-paid {
  background: #f0fdf4 !important;
  color: #166534 !important;
  border-color: #bbf7d0 !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-status-pill.is-partial,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-badge.is-partial,
#adminFeesCollectAdmissionPane .admin-collect-admission-status-pill.is-partial {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-due-label {
  color: #b91c1c !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-fee-paid {
  color: #166534 !important;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-fee-balance {
  color: #b91c1c !important;
}
#adminFeesCollectAdmissionPane .admin-monthly-fee-field input:focus,
#adminFeesCollectAdmissionPane .admin-monthly-fee-field select:focus,
#adminFeesCollectAdmissionPane .admin-monthly-fee-field textarea:focus,
#adminFeesCollectAdmissionPane .admin-collect-admission-field input:focus,
#adminFeesCollectAdmissionPane .admin-collect-admission-field select:focus,
#adminFeesCollectAdmissionPane .admin-collect-admission-field textarea:focus {
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
}

#adminFeesCollectAdmissionPane .admin-collect-admission-summary-card.admin-monthly-fee-color-card--summary {
  position: sticky;
  top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-tab-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-layout,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-student-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-profile-card {
  display: block;
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 45%, #fff 100%);
  border: 1px solid #a7f3d0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  min-width: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-profile-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #059669;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-photo,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-student-photo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(145deg, #6ee7b7, #34d399);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 900;
  margin: 0 auto 14px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.22);
  flex-shrink: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-photo img,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-student-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-profile-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-profile-top small {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-profile-name {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.25;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-meta > div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(167, 243, 208, 0.6);
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-meta dt {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-meta dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-card,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-breakdown-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  min-width: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dbeafe;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-head strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-breakdown-head span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eef2f7;
  background: #fafbfc;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-monthly-fee-warning {
  margin: 0 16px 12px;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-table-wrap,
#adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-fee-table-wrap {
  border: 0;
  border-radius: 0;
  overflow-x: auto;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-table {
  width: 100%;
  border-collapse: collapse;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight td {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-top: 2px solid #34d399 !important;
  font-weight: 900;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-amount {
  color: #047857;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-paid {
  color: #15803d;
}
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-fee-total-row.admin-monthly-fee-total-highlight .is-balance {
  color: #b91c1c;
}
#adminFeesCollectAdmissionPane .admin-collect-admission-payment-panel .admin-monthly-fee-thai-transfer-box {
  padding: 0;
  max-width: 100%;
}
.admin-dashboard-body #adminCollectAdmissionThaiTransferPanel[hidden] {
  display: none !important;
}
.admin-dashboard-body #adminCollectAdmissionReceiptView[hidden],
.admin-dashboard-body #adminMonthlyFeeReceiptView[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 900px) {
  #adminCollectAdmissionStudentSummaryCard .admin-monthly-fee-student-layout {
    grid-template-columns: 1fr;
  }
}

/* Collect Admission Fee — reference dashboard layout overrides */
.admin-collect-admission-fee { gap: 16px; padding: 4px 0 24px; }
.admin-collect-admission-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; font-weight: 700; color: #94a3b8; }
.admin-collect-admission-breadcrumb strong { color: #334155; font-weight: 800; }
.admin-collect-admission-page-head h2 { margin: 0; font-size: 28px; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
.admin-collect-admission-page-head p { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: #64748b; }
.admin-collect-admission-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.admin-collect-admission-kpi { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid #e8eef7; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.admin-collect-admission-kpi-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.admin-collect-admission-kpi--blue .admin-collect-admission-kpi-icon { background: #dbeafe; }
.admin-collect-admission-kpi--green .admin-collect-admission-kpi-icon { background: #dcfce7; }
.admin-collect-admission-kpi--orange .admin-collect-admission-kpi-icon { background: #ffedd5; }
.admin-collect-admission-kpi--purple .admin-collect-admission-kpi-icon { background: #ede9fe; }
.admin-collect-admission-kpi small { display: block; font-size: 11px; font-weight: 800; color: #64748b; margin-bottom: 4px; }
.admin-collect-admission-kpi strong { display: block; font-size: 24px; font-weight: 900; color: #0f172a; line-height: 1.15; }
.admin-collect-admission-kpi span { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #94a3b8; }
.admin-collect-admission-tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px; border-radius: 14px; background: #f8fafc; border: 1px solid #e8eef7; }
.admin-collect-admission-tab { border: 0; background: transparent; color: #64748b; border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 800; cursor: pointer; }
.admin-collect-admission-tab.is-active { background: #fff; color: #2563eb; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12); }
.admin-collect-admission-tab-panel { display: none; }
.admin-collect-admission-tab-panel.is-active { display: block; }
.admin-collect-admission-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.admin-collect-admission-main-col, .admin-collect-admission-side-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.admin-collect-admission-panel { background: #fff; border: 1px solid #e8eef7; border-radius: 18px; padding: 18px 20px 20px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05); }
.admin-collect-admission-panel-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; border-bottom: 0; padding-bottom: 0; }
.admin-collect-admission-panel-head--split { justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.admin-collect-admission-panel-head-left { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.admin-collect-admission-step { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; font-size: 13px; font-weight: 900; flex-shrink: 0; }
.admin-collect-admission-step.is-soft { background: #eef4ff; color: #2563eb; border-radius: 12px; width: 36px; height: 36px; }
.admin-collect-admission-panel-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.admin-collect-admission-due-label { margin: 0; font-size: 12px; font-weight: 800; color: #dc2626; }
.admin-collect-admission-search-mode { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-collect-admission-radio { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #334155; cursor: pointer; }
.admin-collect-admission-search-wrap { position: relative; display: block; }
.admin-collect-admission-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.admin-collect-admission-field--search input { padding-left: 38px; }
.admin-collect-admission-search-results { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 240px; overflow-y: auto; padding: 6px; border: 1px solid #dbe7ff; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }
.admin-collect-admission-search-result { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 1px solid #e8eef7; border-radius: 10px; padding: 10px 12px; background: #f8fbff; cursor: pointer; font: inherit; }
.admin-collect-admission-search-result:hover, .admin-collect-admission-search-result:focus { border-color: #93c5fd; background: #eff6ff; outline: none; }
.admin-collect-admission-search-result-name { font-size: 13px; font-weight: 900; color: #0f172a; }
.admin-collect-admission-search-result-meta { font-size: 11px; font-weight: 700; color: #64748b; }
.admin-collect-admission-search-empty { margin: 8px 0 0; font-size: 12px; font-weight: 800; color: #64748b; }
.admin-collect-admission-profile-card:not(.admin-monthly-fee-student-profile-card) { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 16px; background: linear-gradient(145deg, #f8fbff, #fff); border: 1px solid #dbe7ff; grid-column: 1 / -1; }
#adminCollectAdmissionStudentSummaryCard.admin-collect-admission-student-card,
#adminCollectAdmissionStudentSummaryCard .admin-collect-admission-student-card {
  display: block;
  grid-column: auto;
  align-items: stretch;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.admin-collect-admission-student-photo:not(#adminCollectAdmissionStudentPhoto) { width: 88px; height: 88px; border-radius: 16px; }
.admin-collect-admission-profile-body { flex: 1; min-width: 0; }
.admin-collect-admission-profile-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.admin-collect-admission-profile-top small { display: block; font-size: 10px; font-weight: 800; color: #64748b; text-transform: uppercase; }
.admin-collect-admission-profile-top strong { display: block; font-size: 13px; font-weight: 900; color: #0f172a; }
.admin-collect-admission-profile-body h4 { margin: 0 0 10px; font-size: 20px; font-weight: 900; color: #0f172a; }
.admin-collect-admission-profile-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.admin-collect-admission-profile-meta dt { margin: 0 0 2px; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; }
.admin-collect-admission-profile-meta dd { margin: 0; font-size: 13px; font-weight: 800; color: #334155; }
.admin-collect-admission-status-badge, .admin-collect-admission-status-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; border: 1px solid transparent; }
.admin-collect-admission-status-badge.is-new, .admin-collect-admission-status-pill.is-unpaid { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.admin-collect-admission-status-badge.is-paid, .admin-collect-admission-status-pill.is-paid { background: #ecfdf5; color: #15803d; border-color: #86efac; }
.admin-collect-admission-status-badge.is-partial, .admin-collect-admission-status-pill.is-partial { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.admin-collect-admission-fee-table-wrap { border: 1px solid #e8eef7; border-radius: 14px; }
.admin-collect-admission-fee-name-wrap { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.admin-collect-admission-fee-amount { max-width: 140px; }
.admin-collect-admission-fee-paid { color: #15803d; font-weight: 800; }
.admin-collect-admission-fee-balance { color: #dc2626; font-weight: 800; }
.admin-collect-admission-fee-section-row td { background: #eef4ff; color: #1e40af; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px; border-top: 1px solid #dbe7ff; }
.admin-collect-admission-fee-section-row:first-child td { border-top: 0; }
.admin-collect-admission-fee-empty-row td { color: #64748b; font-size: 12px; font-weight: 700; font-style: italic; }
.admin-collect-admission-monthly-fee-warning { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 12px; font-weight: 800; line-height: 1.45; }
.admin-collect-admission-fee-amount.is-auto-loaded { background: #f8fafc; color: #334155; }
.admin-collect-admission-fee-total-row td { background: #f8fafc; }
.admin-collect-admission-fee-total-row .is-amount { color: #2563eb; }
.admin-collect-admission-fee-total-row .is-paid { color: #15803d; }
.admin-collect-admission-fee-total-row .is-balance { color: #dc2626; }
.admin-collect-admission-summary-card:not(.admin-monthly-fee-color-card) { position: sticky; top: 12px; border: 0; box-shadow: none; padding: 0; background: transparent; }
.admin-collect-admission-summary-visual { text-align: center; padding: 16px 12px; border-radius: 14px; background: linear-gradient(180deg, #f8fbff, #fff); border: 1px dashed #dbe7ff; margin-bottom: 14px; }
.admin-collect-admission-wallet-icon { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.admin-collect-admission-summary-visual p { margin: 8px 0 0; font-size: 12px; font-weight: 700; color: #64748b; }
.admin-collect-admission-summary-list .is-balance { color: #dc2626; }
.admin-collect-admission-btn--save { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 8px 18px rgba(34, 197, 94, 0.22); }
.admin-collect-admission-btn--confirm { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; border: 0; border-radius: 12px; padding: 10px 16px; font-size: 13px; font-weight: 900; cursor: pointer; width: 100%; margin-top: 4px; }
.admin-collect-admission-thai-transfer-box { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid #bfdbfe; background: linear-gradient(145deg, #eff6ff, #fff); }
.admin-collect-admission-transfer-due-line { margin: 0; font-size: 13px; font-weight: 800; color: #334155; }
.admin-collect-admission-transfer-due-line strong { color: #1d4ed8; font-size: 18px; }
.admin-collect-admission-school-payment-info { font-size: 12px; font-weight: 700; color: #475467; line-height: 1.5; }
.admin-collect-admission-school-payment-info dl { margin: 0; display: grid; gap: 6px; }
.admin-collect-admission-school-payment-info dt { font-size: 10px; text-transform: uppercase; color: #94a3b8; }
.admin-collect-admission-school-payment-info dd { margin: 0; color: #0f172a; font-weight: 800; }
.admin-collect-admission-payment-warning { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 12px; font-weight: 800; line-height: 1.45; }
.admin-collect-admission-payment-instruction { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; color: #334155; font-size: 12px; font-weight: 700; line-height: 1.5; }
.admin-collect-admission-payment-instruction-text { display: block; margin-top: 4px; white-space: pre-wrap; font-weight: 600; }
.admin-dashboard-body .admin-payment-settings-form { max-width: 720px; }
.admin-dashboard-body .admin-payment-settings-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.admin-dashboard-body .admin-payment-qr-section { margin-top: 4px; }
.admin-dashboard-body .admin-payment-qr-upload-card { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.admin-dashboard-body .admin-payment-qr-preview-card { display: grid; gap: 8px; }
.admin-dashboard-body .admin-payment-qr-preview-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #64748b; }
.admin-dashboard-body .admin-payment-qr-preview {
  width: 220px; height: 220px; border-radius: 14px; border: 1px dashed #cbd5e1; background: #f8fafc;
  display: grid; place-items: center; overflow: hidden; flex-shrink: 0;
}
.admin-dashboard-body .admin-payment-qr-preview img { width: 100%; height: 100%; object-fit: contain; }
.admin-dashboard-body .admin-payment-qr-placeholder { font-size: 12px; font-weight: 700; color: #94a3b8; text-align: center; padding: 12px; }
.admin-dashboard-body .admin-payment-qr-actions { display: grid; gap: 10px; align-content: start; min-width: 220px; }
.admin-dashboard-body .admin-payment-qr-remove-btn { color: #b45309; border-color: #fdba74; }

/* Admin Payment Setting — Bank Slip Review Inbox (STEP 1 UI foundation) */
.admin-dashboard-body .admin-bank-slip-review-section { margin-top: 22px; max-width: 100%; }
.admin-dashboard-body .admin-bank-slip-review-card { max-width: none; margin-top: 0; }
.admin-dashboard-body .admin-bsr-message { margin: 0 0 14px; }
.admin-dashboard-body .admin-bsr-summary-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px;
}
.admin-dashboard-body .admin-bsr-summary-card {
  border-radius: 16px; padding: 14px 16px; border: 1px solid #e2e8f0;
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
}
.admin-dashboard-body .admin-bsr-summary-card small {
  display: block; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.03em; color: #64748b;
}
.admin-dashboard-body .admin-bsr-summary-card strong {
  display: block; margin-top: 6px; font-size: 24px; font-weight: 900; color: #0f172a; line-height: 1.1;
}
.admin-dashboard-body .admin-bsr-summary-card--pending { border-color: #fdba74; background: linear-gradient(180deg, #fffbeb, #fff7ed); }
.admin-dashboard-body .admin-bsr-summary-card--pending strong { color: #c2410c; }
.admin-dashboard-body .admin-bsr-summary-card--approved { border-color: #86efac; background: linear-gradient(180deg, #f0fdf4, #ecfdf5); }
.admin-dashboard-body .admin-bsr-summary-card--approved strong { color: #15803d; }
.admin-dashboard-body .admin-bsr-summary-card--rejected { border-color: #fecaca; background: linear-gradient(180deg, #fef2f2, #fff1f2); }
.admin-dashboard-body .admin-bsr-summary-card--rejected strong { color: #b91c1c; }
.admin-dashboard-body .admin-bsr-summary-card--today { border-color: #bfdbfe; background: linear-gradient(180deg, #eff6ff, #f0f9ff); }
.admin-dashboard-body .admin-bsr-summary-card--today strong { color: #1d4ed8; }
.admin-dashboard-body .admin-bsr-filter-card {
  border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px; margin-bottom: 16px;
  background: #fff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.admin-dashboard-body .admin-bsr-filter-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px;
}
.admin-dashboard-body .admin-bsr-field-search { grid-column: 1 / -1; }
.admin-dashboard-body .admin-bsr-filter-grid select {
  border: 1px solid #dbe3f0; border-radius: 14px; padding: 12px 14px; font-size: 14px;
  font-weight: 600; color: #0f172a; background: #fff; width: 100%;
}
.admin-dashboard-body .admin-bsr-list-panel {
  border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px 16px 16px;
  background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.admin-dashboard-body .admin-bsr-list-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.admin-dashboard-body .admin-bsr-list-head h4 { margin: 0; font-size: 15px; font-weight: 900; color: #0f172a; }
.admin-dashboard-body .admin-bsr-list-count { font-size: 12px; font-weight: 800; color: #64748b; }
.admin-dashboard-body .admin-bsr-empty {
  text-align: center; padding: 28px 18px; border-radius: 16px;
  border: 1px dashed #cbd5e1; background: linear-gradient(180deg, #f8fafc, #fff);
}
.admin-dashboard-body .admin-bsr-empty-icon { display: block; font-size: 28px; margin-bottom: 8px; }
.admin-dashboard-body .admin-bsr-empty strong { display: block; font-size: 15px; color: #0f172a; }
.admin-dashboard-body .admin-bsr-empty p { margin: 8px 0 0; font-size: 13px; font-weight: 700; color: #64748b; line-height: 1.45; }
.admin-dashboard-body .admin-bsr-list { display: grid; gap: 12px; }
.admin-dashboard-body .admin-bsr-slip-card {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  border: 1px solid #e2e8f0; border-radius: 16px; padding: 14px; background: linear-gradient(180deg, #fff, #f8fafc);
}
.admin-dashboard-body .admin-bsr-slip-preview {
  width: 88px; height: 88px; border-radius: 12px; border: 1px dashed #cbd5e1;
  background: #f1f5f9; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; color: #94a3b8; text-align: center; padding: 6px; overflow: hidden;
}
.admin-dashboard-body .admin-bsr-slip-preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.admin-dashboard-body .admin-bsr-slip-main { min-width: 0; display: grid; gap: 6px; }
.admin-dashboard-body .admin-bsr-slip-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-dashboard-body .admin-bsr-slip-title-row strong { font-size: 14px; font-weight: 900; color: #0f172a; }
.admin-dashboard-body .admin-bsr-status {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em;
}
.admin-dashboard-body .admin-bsr-status--pending { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.admin-dashboard-body .admin-bsr-status--approved { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.admin-dashboard-body .admin-bsr-status--rejected { background: #f1f5f9; color: #64748b; border: 1px solid #cbd5e1; }
.admin-dashboard-body .admin-bsr-slip-meta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;
  font-size: 12px; font-weight: 700; color: #475569;
}
.admin-dashboard-body .admin-bsr-slip-meta span b { color: #0f172a; font-weight: 900; }
.admin-dashboard-body .admin-bsr-slip-actions {
  display: grid; gap: 8px; align-content: start; min-width: 92px;
}
.admin-dashboard-body .admin-bsr-action-btn {
  border: 1px solid #dbe3f0; border-radius: 10px; background: #fff; color: #1e293b;
  font-size: 12px; font-weight: 800; padding: 8px 10px; cursor: pointer;
}
.admin-dashboard-body .admin-bsr-action-btn--approve { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.admin-dashboard-body .admin-bsr-action-btn--reject { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.admin-dashboard-body .admin-bsr-action-btn:hover { filter: brightness(0.98); }
.admin-dashboard-body .admin-bsr-slip-review-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #15803d;
}
.admin-dashboard-body .admin-bsr-slip-review-meta.is-rejected { color: #b91c1c; }
.admin-bsr-reject-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 12010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}
.admin-bsr-reject-modal-overlay[hidden] { display: none !important; }
.admin-bsr-reject-modal-card {
  width: min(96vw, 460px);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
}
.admin-bsr-reject-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.admin-bsr-reject-modal-head strong { font-size: 15px; color: #0f172a; }
.admin-bsr-reject-modal-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.admin-bsr-reject-modal-body p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}
.admin-bsr-reject-modal-body textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}
.admin-bsr-reject-error {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #b91c1c;
}
.admin-bsr-reject-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 14px 14px;
}
.admin-bsr-image-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.72);
}
.admin-bsr-image-preview-overlay[hidden] { display: none !important; }
.admin-bsr-image-preview-card {
  width: min(96vw, 720px);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.28);
}
.admin-bsr-image-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
.admin-bsr-image-preview-head strong { font-size: 15px; color: #0f172a; }
.admin-bsr-image-preview-close {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  background: #fff;
  color: #334155;
  cursor: pointer;
}
.admin-bsr-image-preview-body {
  padding: 12px;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
}
.admin-bsr-image-preview-body img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}
@media (max-width: 960px) {
  .admin-dashboard-body .admin-bsr-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-dashboard-body .admin-bsr-filter-grid { grid-template-columns: 1fr; }
  .admin-dashboard-body .admin-bsr-slip-card { grid-template-columns: 72px minmax(0, 1fr); }
  .admin-dashboard-body .admin-bsr-slip-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
}
.admin-collect-admission-thai-payment-card { background: #fff; border: 1px solid #bfdbfe; box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08); }
.admin-collect-admission-thai-title { margin: 0 0 12px; font-size: 16px; font-weight: 900; color: #1e3a8a; letter-spacing: -0.02em; }
.admin-collect-admission-thai-warning-host { margin-bottom: 10px; }
.admin-collect-admission-transfer-due-line--prominent { text-align: center; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; }
.admin-collect-admission-transfer-due-line--prominent strong { font-size: 22px; color: #1d4ed8; }
.admin-collect-admission-qr-wrap { margin: 0 auto 12px; max-width: 280px; }
.admin-collect-admission-qr-image { max-width: 260px; max-height: 260px; width: 100%; height: auto; border-radius: 10px; display: block; margin: 0 auto; }
.admin-collect-admission-thai-details { margin-top: 8px; }
.admin-collect-admission-payment-instruction-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; margin-bottom: 6px; }
.admin-dashboard-body .admin-ip-form-section--compact { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e2e8f0; }
.admin-collect-admission-qr-wrap { text-align: center; padding: 10px; border-radius: 12px; background: #fff; border: 1px dashed #93c5fd; }
.admin-collect-admission-qr-wrap img { max-width: 220px; max-height: 220px; width: 100%; height: auto; border-radius: 8px; }
.admin-collect-admission-qr-helper,
.admin-collect-admission-qr-static-warn { margin: 0; font-size: 12px; line-height: 1.5; }
.admin-collect-admission-qr-helper { color: #1d4ed8; font-weight: 600; }
.admin-collect-admission-qr-static-warn { color: #b45309; font-weight: 700; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 8px 10px; }
.admin-school-fee-payment-actions { white-space: nowrap; }
.admin-school-fee-payment-actions .admin-collect-admission-link-btn { font-size: 12px; padding: 0; }
.admin-school-fee-income-summary { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.admin-school-fee-income-report { margin-bottom: 20px; }
.admin-collect-admission-gateway-note { margin: 0; font-size: 11px; font-weight: 700; color: #64748b; line-height: 1.45; }
.admin-collect-admission-transfer-steps { margin: 0; padding-left: 18px; font-size: 11px; font-weight: 700; color: #475467; line-height: 1.45; }
.admin-collect-admission-transfer-confirmed { margin: 0; padding: 8px 10px; border-radius: 10px; background: #ecfdf5; border: 1px solid #86efac; color: #15803d; font-size: 12px; font-weight: 800; }
.admin-collect-admission-link-btn { border: 0; background: transparent; color: #2563eb; font-size: 13px; font-weight: 800; cursor: pointer; }
.admin-collect-admission-view-btn { border: 0; background: #f8fafc; color: #64748b; border-radius: 8px; width: 32px; height: 32px; padding: 0; font-size: 16px; }
.admin-collect-admission-hidden-util { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (max-width: 1100px) {
  .admin-collect-admission-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-collect-admission-workspace { grid-template-columns: 1fr; }
  .admin-collect-admission-summary-card { position: static; }
}
@media (max-width: 720px) {
  .admin-collect-admission-kpi-grid, .admin-collect-admission-profile-meta { grid-template-columns: 1fr; }
  .admin-collect-admission-profile-card { flex-direction: column; }
}

/* Monthly Fee Collection — hide Fees Management hero; top #adminPageTitle is the only page header */
#adminFeesSection:has(#adminFeesMonthlyCollectionPane:not([hidden])) > .admin-transport-foundation > .admin-transport-hero {
  display: none !important;
}
#adminFeesSection:has(#adminFeesMonthlyCollectionPane:not([hidden])) > .admin-transport-foundation {
  gap: 10px !important;
}

/* Monthly Fee Collection — compact spacing (pane only) */
#adminFeesMonthlyCollectionPane.admin-monthly-fee-collection {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
#adminFeesMonthlyCollectionPane > .admin-monthly-fee-breadcrumb,
#adminFeesMonthlyCollectionPane > .admin-monthly-fee-page-head {
  display: none !important;
}
#adminFeesMonthlyCollectionPane > .admin-monthly-fee-page-head .admin-monthly-fee-page-eyebrow {
  margin: 0 0 3px;
  font-size: 10px;
}
#adminFeesMonthlyCollectionPane > .admin-monthly-fee-page-head h2 {
  font-size: 22px;
  line-height: 1.15;
}
#adminFeesMonthlyCollectionPane > .admin-monthly-fee-page-head p {
  margin: 3px 0 0;
  font-size: 13px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-color-card {
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-card-head {
  padding: 9px 14px;
  gap: 8px;
  align-items: center;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-card-head h3 {
  margin: 0 0 2px;
  font-size: 15px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-card-head p {
  font-size: 11px;
  line-height: 1.35;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-card-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 17px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-card-body {
  padding: 10px 14px 12px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-filter-grid {
  grid-template-columns: minmax(128px, 156px) minmax(108px, 132px) minmax(148px, 196px) auto;
  gap: 8px 10px;
  justify-content: start;
  width: fit-content;
  max-width: 100%;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field {
  gap: 4px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field span {
  font-size: 11px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field input,
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field select,
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field textarea {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field--action {
  align-self: end;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-field--action .admin-monthly-fee-btn--filter {
  width: auto;
  min-width: 92px;
  min-height: 36px;
  padding: 7px 16px;
  font-size: 13px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-search-results {
  margin-top: 6px;
}
#adminFeesMonthlyCollectionPane .admin-monthly-fee-workspace {
  gap: 12px;
}
@media (max-width: 720px) {
  #adminFeesMonthlyCollectionPane .admin-monthly-fee-filter-grid {
    grid-template-columns: 1fr;
    width: 100%;
  }
  #adminFeesMonthlyCollectionPane .admin-monthly-fee-field--action .admin-monthly-fee-btn--filter {
    width: 100%;
  }
}

/* Admin Monthly Fee Collection — colorful SaaS cards */
.admin-monthly-fee-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 700; color: #94a3b8; }
.admin-monthly-fee-breadcrumb strong { color: #334155; }
.admin-monthly-fee-page-head--color { padding: 4px 0 2px; }
.admin-monthly-fee-page-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6366f1;
}
.admin-monthly-fee-page-head h2 { margin: 0; font-size: 26px; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
.admin-monthly-fee-page-head p { margin: 6px 0 0; font-size: 14px; color: #64748b; font-weight: 600; }
.admin-monthly-fee-panel { padding: 0; border: 0; background: transparent; box-shadow: none; }
.admin-monthly-fee-color-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e8eef7;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.admin-monthly-fee-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}
.admin-monthly-fee-card-head h3 { margin: 0 0 4px; font-size: 17px; font-weight: 900; color: #0f172a; letter-spacing: -0.02em; }
.admin-monthly-fee-card-head p { margin: 0; font-size: 12px; color: #64748b; font-weight: 600; line-height: 1.45; }
.admin-monthly-fee-card-head-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.admin-monthly-fee-card-body { padding: 16px 18px 18px; }
.admin-monthly-fee-color-card--filter .admin-monthly-fee-card-head { background: linear-gradient(135deg, #eef2ff 0%, #f5f8ff 100%); }
.admin-monthly-fee-color-card--filter .admin-monthly-fee-card-head-icon { background: #dbeafe; }
.admin-monthly-fee-color-card--search .admin-monthly-fee-card-head { background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%); }
.admin-monthly-fee-color-card--search .admin-monthly-fee-card-head-icon { background: #ede9fe; }
.admin-monthly-fee-color-card--student .admin-monthly-fee-card-head { background: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 100%); }
.admin-monthly-fee-color-card--student .admin-monthly-fee-card-head-icon { background: #ccfbf1; }
.admin-monthly-fee-color-card--summary .admin-monthly-fee-card-head { background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 100%); }
.admin-monthly-fee-color-card--summary .admin-monthly-fee-card-head-icon { background: #fde68a; }
.admin-monthly-fee-color-card--payment .admin-monthly-fee-card-head { background: linear-gradient(135deg, #ecfeff 0%, #f0f9ff 100%); }
.admin-monthly-fee-color-card--payment .admin-monthly-fee-card-head-icon { background: #a5f3fc; }
.admin-monthly-fee-color-card--history .admin-monthly-fee-card-head { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); }
.admin-monthly-fee-color-card--history .admin-monthly-fee-card-head-icon { background: #cbd5e1; color: #1e293b; }
.admin-monthly-fee-color-card--summary { position: sticky; top: 12px; }
.admin-monthly-fee-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: end; }
.admin-monthly-fee-field { display: flex; flex-direction: column; gap: 6px; }
.admin-monthly-fee-field span { font-size: 12px; font-weight: 800; color: #475467; }
.admin-monthly-fee-field input, .admin-monthly-fee-field select, .admin-monthly-fee-field textarea {
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-monthly-fee-field input:focus, .admin-monthly-fee-field select:focus, .admin-monthly-fee-field textarea:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.admin-monthly-fee-btn--filter {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}
.admin-monthly-fee-search-wrap { position: relative; display: block; }
.admin-monthly-fee-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); }
.admin-monthly-fee-field--search input { padding-left: 36px; width: 100%; }
.admin-monthly-fee-search-results { display: grid; gap: 6px; margin-top: 10px; max-height: 220px; overflow: auto; padding: 4px; }
.admin-monthly-fee-search-result {
  text-align: left;
  border: 1px solid #e9d5ff;
  border-radius: 12px;
  padding: 10px 12px;
  background: #faf5ff;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-monthly-fee-search-result:hover { background: #f3e8ff; border-color: #c4b5fd; }
.admin-monthly-fee-search-empty {
  margin: 10px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
}
.admin-monthly-fee-search-result-name { display: block; font-weight: 800; color: #0f172a; }
.admin-monthly-fee-search-result-meta { display: block; font-size: 11px; color: #64748b; margin-top: 2px; }
.admin-monthly-fee-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.admin-monthly-fee-student-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 16px; }
/* Student Fee Summary + Payment Information — premium card polish */
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-profile-card {
  padding: 18px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #ecfdf5 0%, #f0fdfa 45%, #fff 100%);
  border: 1px solid #a7f3d0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-profile-label {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #059669;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-photo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(145deg, #6ee7b7, #34d399);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 900;
  margin: 0 auto 14px;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.22);
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-meta {
  display: grid;
  gap: 10px;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-meta > div {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(167, 243, 208, 0.6);
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-meta dt {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-meta dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-breakdown-card {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-breakdown-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-breakdown-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dbeafe;
  display: grid;
  place-items: center;
  font-size: 16px;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-breakdown-head strong {
  display: block;
  font-size: 14px;
  font-weight: 900;
  color: #0f172a;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-breakdown-head span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-table tbody tr:nth-child(odd) td {
  background: #fafbfc;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-fee-table td.is-amount {
  font-weight: 800;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-row-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-row-tag.is-discount {
  background: #fef3c7;
  color: #b45309;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-row-tag.is-fine {
  background: #fee2e2;
  color: #b91c1c;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-inline-input {
  width: 100%;
  max-width: 160px;
  margin-left: auto;
  display: block;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-input--discount {
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #b45309;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-input--fine {
  border: 1px solid #fca5a5;
  background: #fef2f2;
  color: #b91c1c;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-total-highlight td {
  padding: 14px 16px !important;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-top: 2px solid #34d399 !important;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-total-highlight td:first-child {
  font-size: 14px;
  color: #065f46;
}
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-total-highlight strong {
  font-size: 20px;
  color: #047857;
  font-variant-numeric: tabular-nums;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-payment-quick-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-mini-field {
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f0f9ff, #fff);
  border: 1px solid #bae6fd;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-payment-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-panel-host {
  grid-column: 1 / -1;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-transfer-box {
  max-width: 100%;
  padding: 0;
  border-radius: 16px;
  border: 1px solid #7dd3fc;
  background: linear-gradient(145deg, #f0f9ff 0%, #fff 55%);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
  overflow: hidden;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #e0f2fe, #bae6fd);
  border-bottom: 1px solid #7dd3fc;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-panel-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-title {
  margin: 0;
  font-size: 15px;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-panel-body {
  padding: 16px;
  gap: 18px;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-qr-col {
  padding: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed #93c5fd;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-due-block {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid #93c5fd;
  padding: 12px 14px;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-due-amount {
  font-size: 24px;
  color: #1d4ed8;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-details {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-transfer-steps-box {
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-transfer-steps-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #475569;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-ref-field {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #cbd5e1;
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-btn--confirm {
  width: 100%;
  max-width: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-transfer-confirmed {
  padding: 10px 12px;
  border-radius: 10px;
  background: #ecfdf5;
  border: 1px solid #86efac;
}
@media (max-width: 900px) {
  #adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-student-layout {
    grid-template-columns: 1fr;
  }
  .admin-monthly-fee-payment-panel .admin-monthly-fee-payment-quick-fields,
  .admin-monthly-fee-payment-panel .admin-monthly-fee-payment-form-grid {
    grid-template-columns: 1fr;
  }
}
.admin-monthly-fee-student-photo img { width: 100%; height: 100%; object-fit: cover; }
.admin-monthly-fee-student-meta { display: grid; gap: 8px; font-size: 13px; }
.admin-monthly-fee-student-meta dt { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; }
.admin-monthly-fee-student-meta dd { margin: 0; font-weight: 800; color: #0f172a; }
.admin-monthly-fee-fee-table { width: 100%; border-collapse: collapse; }
.admin-monthly-fee-fee-table th, .admin-monthly-fee-fee-table td { padding: 10px 12px; border-bottom: 1px solid #eef2f7; font-size: 13px; }
.admin-monthly-fee-fee-table th { background: #f8fafc; text-align: left; font-weight: 900; color: #1e3a8a; }
.admin-monthly-fee-fee-table .is-amount-col, .admin-monthly-fee-fee-table .is-amount { text-align: right; }
.admin-monthly-fee-inline-input { max-width: 140px; margin-left: auto; display: block; }
.admin-monthly-fee-total-row td { font-weight: 900; }
.admin-monthly-fee-total-highlight td {
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  color: #065f46;
  border-bottom: 0 !important;
}
.admin-monthly-fee-total-highlight strong { font-size: 15px; }
#adminMonthlyFeeStudentSummaryCard .admin-monthly-fee-total-highlight strong { font-size: 20px; color: #047857; }
.admin-monthly-fee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-monthly-fee-field--wide { grid-column: 1 / -1; }
.admin-monthly-fee-field--amount-received {
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f0fdf4, #fff);
  border: 1px solid #86efac;
}
.admin-monthly-fee-field--amount-received input {
  font-size: 16px;
  font-weight: 800;
  color: #065f46;
  border-color: #86efac;
  max-width: 220px;
}
.admin-monthly-fee-amount-helper {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
}
.admin-monthly-fee-thai-transfer-box { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid #bfdbfe; background: linear-gradient(145deg, #eff6ff, #fff); max-width: 580px; }
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-transfer-box {
  padding: 0;
  max-width: 100%;
  border: 1px solid #7dd3fc;
  background: linear-gradient(145deg, #f0f9ff 0%, #fff 55%);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.12);
}
.admin-monthly-fee-payment-panel .admin-monthly-fee-thai-due-amount { font-size: 24px; color: #1d4ed8; }
.admin-dashboard-body #adminFeesMonthlyCollectionPane .admin-monthly-fee-payment-panel .admin-monthly-fee-btn--confirm {
  max-width: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb, #0ea5e9);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28);
}
.admin-monthly-fee-thai-payment-card { background: #fff; border: 1px solid #bfdbfe; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.07); }
.admin-monthly-fee-thai-title { margin: 0 0 8px; font-size: 15px; font-weight: 900; color: #1e3a8a; letter-spacing: -0.02em; }
.admin-monthly-fee-thai-warning-host { margin-bottom: 6px; }
.admin-monthly-fee-thai-panel-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; }
.admin-monthly-fee-thai-qr-col { display: flex; flex-direction: column; gap: 8px; align-items: center; min-width: 0; }
.admin-monthly-fee-thai-details-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.admin-monthly-fee-payment-warning { margin: 0; padding: 8px 10px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 11px; font-weight: 700; }
.admin-monthly-fee-qr-wrap { display: flex; justify-content: center; align-items: center; padding: 6px; margin: 0; max-width: 200px; width: 100%; border-radius: 12px; background: #fff; border: 1px dashed #93c5fd; box-sizing: border-box; }
.admin-monthly-fee-qr-wrap:not([hidden]) { display: flex; }
.admin-monthly-fee-qr-image { width: 200px; height: 200px; max-width: 200px; max-height: 200px; object-fit: contain; border-radius: 10px; border: 1px solid #dbe7ff; display: block; background: #fff; }
.admin-monthly-fee-qr-helper, .admin-monthly-fee-qr-static-warn { margin: 0; font-size: 11px; line-height: 1.45; color: #475569; font-weight: 600; text-align: center; }
.admin-monthly-fee-qr-static-warn { color: #b45309; }
.admin-monthly-fee-transfer-due-line { margin: 0; font-size: 13px; font-weight: 700; color: #334155; }
.admin-monthly-fee-thai-due-block { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #eff6ff; border: 1px solid #bfdbfe; }
.admin-monthly-fee-thai-due-label { font-size: 13px; font-weight: 800; color: #475569; }
.admin-monthly-fee-thai-due-amount { font-size: 22px; font-weight: 900; color: #1e3a8a; line-height: 1.2; }
.admin-monthly-fee-transfer-due-line--prominent { padding: 0; background: transparent; border: 0; }
.admin-monthly-fee-thai-details { display: grid; gap: 6px; margin-top: 0; font-size: 13px; }
.admin-dashboard-body #adminFeesMonthlyCollectionPane .admin-monthly-fee-btn--confirm { min-height: 42px; max-height: 46px; padding: 10px 16px; font-size: 14px; font-weight: 800; width: 100%; max-width: 280px; }
.admin-dashboard-body #adminFeesMonthlyCollectionPane .admin-monthly-fee-transfer-steps { margin: 0; padding-left: 18px; font-size: 11px; gap: 4px; }
.admin-dashboard-body #adminFeesMonthlyCollectionPane .admin-monthly-fee-gateway-note { font-size: 11px; line-height: 1.4; }
@media (max-width: 720px) {
  .admin-monthly-fee-thai-panel-body { grid-template-columns: 1fr; }
  .admin-monthly-fee-thai-qr-col { width: 100%; }
  .admin-monthly-fee-qr-wrap { max-width: 180px; }
  .admin-monthly-fee-qr-image { width: 180px; height: 180px; max-width: 180px; max-height: 180px; }
  .admin-monthly-fee-thai-transfer-box { max-width: 100%; }
}
.admin-monthly-fee-thai-details dt { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; }
.admin-monthly-fee-thai-details dd { margin: 0; font-weight: 800; color: #0f172a; }
.admin-monthly-fee-payment-instruction { margin: 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 12px; }
.admin-monthly-fee-payment-instruction-label { display: block; font-weight: 900; color: #1e3a8a; margin-bottom: 4px; }
.admin-monthly-fee-payment-instruction-text { display: block; color: #334155; font-weight: 600; }
.admin-monthly-fee-gateway-note { margin: 0; font-size: 11px; color: #64748b; font-weight: 600; }
.admin-monthly-fee-transfer-steps { margin: 0; padding-left: 20px; font-size: 12px; color: #475569; display: grid; gap: 6px; }
.admin-monthly-fee-transfer-confirmed { margin: 0; font-size: 12px; font-weight: 700; color: #15803d; }
.admin-monthly-fee-field--in-panel { margin-top: 4px; }
.admin-monthly-fee-field-hint { display: block; margin-top: 4px; font-size: 11px; color: #64748b; font-weight: 600; }
.admin-dashboard-body #adminFeesMonthlyCollectionPane #adminMonthlyFeeThaiTransferPanel[hidden] { display: none !important; }
.admin-monthly-fee-summary-due-highlight {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fdba74;
}
.admin-monthly-fee-summary-due-highlight span { font-size: 12px; font-weight: 800; color: #9a3412; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-monthly-fee-summary-due-highlight strong { font-size: 24px; font-weight: 900; color: #c2410c; line-height: 1.1; }
.admin-monthly-fee-summary-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.admin-monthly-fee-summary-list li { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: #334155; }
.admin-monthly-fee-summary-hint { margin: 0 0 12px; font-size: 12px; color: #64748b; font-weight: 600; line-height: 1.45; }
.admin-monthly-fee-status-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 900; margin-bottom: 10px; }
.admin-monthly-fee-status-pill.is-paid { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.admin-monthly-fee-status-pill.is-partial { background: #ffedd5; color: #c2410c; border: 1px solid #fdba74; }
.admin-monthly-fee-status-pill.is-unpaid { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
#adminFeesMonthlyCollectionPane .admin-monthly-fee-history-table .admin-monthly-fee-status-pill {
  margin-bottom: 0;
  font-size: 11px;
  padding: 4px 10px;
  white-space: nowrap;
}
.admin-monthly-fee-summary-actions { display: grid; gap: 8px; }
.admin-monthly-fee-btn { border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 800; cursor: pointer; border: 1px solid transparent; }
.admin-monthly-fee-btn--primary { background: linear-gradient(135deg, #2563eb, #6366f1); color: #fff; }
.admin-monthly-fee-btn--save { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.admin-monthly-fee-btn--ghost { background: #fff; border-color: #dbe7ff; color: #334155; }
.admin-monthly-fee-btn--confirm { background: #1d4ed8; color: #fff; }
.admin-monthly-fee-btn--block { width: 100%; }
.admin-monthly-fee-color-card--history .admin-monthly-fee-history-wrap {
  overflow-x: auto;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  margin: 0;
  padding: 0;
}
.admin-monthly-fee-history-table {
  width: max-content;
  min-width: 1080px;
  max-width: none;
  border-collapse: collapse;
}
.admin-monthly-fee-history-table th,
.admin-monthly-fee-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef2f7;
  font-size: 12px;
  white-space: nowrap;
  vertical-align: middle;
}
.admin-monthly-fee-history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #1e293b;
  color: #f8fafc;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-monthly-fee-history-table tbody tr:hover { background: #f8fafc; }
.admin-monthly-fee-empty-row td {
  text-align: center;
  padding: 24px 16px !important;
  color: #64748b;
  font-weight: 700;
  background: #f8fafc;
}
.admin-monthly-fee-link-btn {
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
  font-size: 11px;
  margin-right: 4px;
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.admin-monthly-fee-link-btn:hover { background: #dbeafe; }
.admin-monthly-fee-message { padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 700; }
.admin-monthly-fee-message.is-success { background: #ecfdf5; color: #15803d; border: 1px solid #86efac; }
.admin-monthly-fee-message.is-error { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.admin-monthly-fee-hidden-util { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.admin-monthly-fee-existing-record-panel {
  border: 1px solid #bfdbfe;
  background: linear-gradient(145deg, #eff6ff, #fff);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}
.admin-monthly-fee-existing-record-lead { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: #1d4ed8; }
.admin-monthly-fee-existing-record-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 14px; font-size: 13px; }
.admin-monthly-fee-existing-record-grid dt { font-size: 10px; font-weight: 800; text-transform: uppercase; color: #94a3b8; margin: 0; }
.admin-monthly-fee-existing-record-grid dd { margin: 2px 0 0; font-weight: 800; color: #0f172a; }
.admin-monthly-fee-existing-record-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-monthly-fee-receipt-view:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: #eef2f7;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.admin-monthly-fee-receipt-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px; background: #fff; border-bottom: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); }
.admin-monthly-fee-receipt-toolbar h2 { margin: 0 0 4px; font-size: 22px; font-weight: 900; color: #1e3a8a; }
.admin-monthly-fee-receipt-toolbar p { margin: 0; font-size: 13px; color: #64748b; }
.admin-monthly-fee-receipt-toolbar-left { display: flex; align-items: center; gap: 16px; }
.admin-monthly-fee-receipt-toolbar-actions { display: flex; gap: 8px; }
.admin-monthly-fee-receipt-stage { flex: 1; display: flex; justify-content: center; padding: 24px 16px 40px; }
.admin-monthly-fee-receipt-doc { width: 210mm; max-width: 100%; min-height: auto; background: #fff; border-radius: 4px; box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12); padding: 28px 32px; color: #0f172a; font-size: 13px; line-height: 1.45; }
.admin-monthly-fee-receipt-doc-header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 2px solid #1e3a8a; padding-bottom: 16px; margin-bottom: 18px; }
.admin-monthly-fee-receipt-doc-logo img { max-height: 64px; max-width: 140px; object-fit: contain; }
.admin-monthly-fee-receipt-doc-school { text-align: right; font-size: 12px; }
.admin-monthly-fee-receipt-doc-school strong { display: block; font-size: 18px; color: #1e3a8a; margin-bottom: 4px; }
.admin-monthly-fee-receipt-doc-title { text-align: center; margin: 0 0 16px; font-size: 22px; font-weight: 900; letter-spacing: 0.08em; color: #1e3a8a; }
.admin-monthly-fee-receipt-doc-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin-bottom: 16px; font-size: 12px; }
.admin-monthly-fee-receipt-doc-section { margin-bottom: 16px; }
.admin-monthly-fee-receipt-doc-section h4 { margin: 0 0 8px; font-size: 12px; font-weight: 900; text-transform: uppercase; color: #1e3a8a; letter-spacing: 0.04em; }
.admin-monthly-fee-receipt-doc-student { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; }
.admin-monthly-fee-receipt-doc-avatar { width: 72px; height: 72px; border-radius: 12px; background: #eff6ff; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: #1e3a8a; overflow: hidden; }
.admin-monthly-fee-receipt-doc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-monthly-fee-receipt-doc-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: 12px; }
.admin-monthly-fee-receipt-doc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.admin-monthly-fee-receipt-doc-table th, .admin-monthly-fee-receipt-doc-table td { border: 1px solid #e2e8f0; padding: 8px 10px; }
.admin-monthly-fee-receipt-doc-table th { background: #f8fafc; font-weight: 900; color: #1e3a8a; }
.admin-monthly-fee-receipt-doc-table .is-num { text-align: right; width: 90px; }
.admin-monthly-fee-receipt-doc-table .is-total td { font-weight: 900; background: #f8fafc; }
.admin-monthly-fee-receipt-doc-summary { display: grid; gap: 6px; max-width: 320px; margin-left: auto; font-size: 13px; font-weight: 700; }
.admin-monthly-fee-receipt-doc-summary div { display: flex; justify-content: space-between; gap: 12px; }
.admin-monthly-fee-receipt-doc-notes { margin-top: 16px; padding: 12px; border-radius: 10px; background: #f8fafc; font-size: 12px; color: #475569; }
.admin-monthly-fee-receipt-doc-sigs { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: 12px; }
.admin-monthly-fee-receipt-doc-sigs p { margin: 0 0 32px; font-weight: 700; }
.admin-monthly-fee-receipt-doc-seal { margin-top: 8px; font-size: 11px; color: #64748b; font-style: italic; }
.admin-monthly-fee-message.is-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.admin-monthly-fee-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.admin-fee-receipt-print-root {
  display: none !important;
}
/* Receipt print — #adminFeeReceiptPrintRoot only; one A4 portrait page for normal receipts */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }
  html.admin-fee-receipt-printing,
  html:has(body.admin-fee-receipt-printing),
  body.admin-fee-receipt-printing {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  body.admin-fee-receipt-printing.admin-dashboard-body,
  body.admin-fee-receipt-printing.admin-module-dashboard {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }
  body.admin-fee-receipt-printing > *:not(#adminFeeReceiptPrintRoot) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
  }
  body.admin-fee-receipt-printing #adminFeeReceiptPrintRoot {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    box-shadow: none !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    break-before: avoid-page !important;
    break-after: avoid-page !important;
  }
  body.admin-fee-receipt-printing #adminFeeReceiptPrintRoot * {
    visibility: visible !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc,
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc--print {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    color: #0f172a !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-before: avoid-page !important;
    break-after: avoid-page !important;
    break-inside: avoid-page !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-header {
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    gap: 12px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-logo img {
    max-height: 46px !important;
    max-width: 110px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-school strong {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-school {
    font-size: 10px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-title {
    margin: 0 0 10px !important;
    font-size: 16px !important;
    letter-spacing: 0.05em !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-meta {
    gap: 4px 12px !important;
    margin-bottom: 10px !important;
    font-size: 10px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-section {
    margin-bottom: 8px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-section h4 {
    margin-bottom: 4px !important;
    font-size: 10px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-student {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-avatar {
    width: 52px !important;
    height: 52px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-info-grid {
    gap: 3px 10px !important;
    font-size: 10px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-table {
    margin-top: 4px !important;
    font-size: 10px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-table th,
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-table td {
    padding: 4px 6px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-summary {
    gap: 4px !important;
    max-width: 280px !important;
    font-size: 11px !important;
    page-break-inside: auto !important;
    break-inside: auto !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-notes {
    margin-top: 8px !important;
    padding: 6px 8px !important;
    font-size: 10px !important;
    border-radius: 6px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-notes p {
    margin: 0 0 4px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-notes p:last-child {
    margin-bottom: 0 !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-sigs {
    margin-top: 10px !important;
    gap: 14px !important;
    font-size: 10px !important;
    page-break-before: avoid !important;
    page-break-inside: avoid !important;
    break-before: avoid-page !important;
    break-inside: avoid !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-sigs p {
    margin: 0 0 14px !important;
  }
  body.admin-fee-receipt-printing .admin-monthly-fee-receipt-doc-seal {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
    font-size: 10px !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
  }
  body.admin-fee-receipt-printing #adminFeeReceiptPrintRoot:empty {
    display: none !important;
    height: 0 !important;
  }
}
@media (max-width: 1100px) {
  .admin-monthly-fee-filter-grid, .admin-monthly-fee-workspace, .admin-monthly-fee-student-layout, .admin-monthly-fee-form-grid { grid-template-columns: 1fr; }
  .admin-monthly-fee-existing-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-monthly-fee-color-card--summary { position: static; }
  .admin-monthly-fee-field--action { justify-self: stretch; }
  .admin-monthly-fee-btn--filter { width: 100%; }
}

/* Admin — Monthly Payment Status (reference dashboard UI) */
#adminFeesSection:has(#adminFeesMonthlyPaymentStatusPane:not([hidden])) > .admin-transport-foundation > .admin-transport-hero {
  display: none !important;
}
#adminFeesMonthlyPaymentStatusPane > .admin-mps-page-head > div:first-child {
  display: none !important;
}
#adminFeesMonthlyPaymentStatusPane > .admin-mps-page-head {
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
#adminFeesMonthlyPaymentStatusPane.admin-monthly-payment-status {
  --mps-bg: #f4f7fe;
  --mps-text: #172b4d;
  --mps-muted: #6b778c;
  --mps-border: #dfe1e6;
  --mps-primary: #0052cc;
  --mps-green: #28a745;
  --mps-orange: #ff9800;
  --mps-red: #dc3545;
  --mps-purple: #6554c0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 24px;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  background: var(--mps-bg);
  color: var(--mps-text);
  font-size: 14px;
  line-height: 1.45;
}
#adminFeesMonthlyPaymentStatusPane .admin-mps-icon {
  flex-shrink: 0;
  display: block;
}
.admin-mps-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;
}
.admin-mps-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-mps-page-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--mps-text);
  letter-spacing: -0.01em;
}
.admin-mps-page-head p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--mps-muted);
  font-weight: 400;
}
.admin-mps-today-date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--mps-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--mps-muted);
}
.admin-mps-today-date .admin-mps-icon { color: #97a0af; }
.admin-mps-message {
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
}
.admin-mps-message.is-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.admin-mps-message.is-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #93c5fd; }
.admin-mps-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 14px;
}
.admin-mps-kpi-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--mps-border);
  border-top-width: 4px;
  box-shadow: 0 1px 3px rgba(23, 43, 77, 0.06);
  min-width: 0;
}
.admin-mps-kpi-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.admin-mps-kpi-card-icon svg { display: block; }
.admin-mps-kpi-card small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--mps-muted);
  margin-bottom: 4px;
}
.admin-mps-kpi-card strong {
  display: block;
  font-size: clamp(18px, 1.8vw, 28px);
  font-weight: 700;
  color: var(--mps-text);
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#adminMpsSummaryTotalCollected {
  white-space: nowrap;
  font-size: clamp(16px, 1.5vw, 24px);
}
.admin-mps-kpi-card em {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  color: var(--mps-muted);
}
.admin-mps-kpi-card--blue { border-top-color: #2684ff; background: linear-gradient(180deg, #f0f6ff 0%, #fff 42%); }
.admin-mps-kpi-card--blue .admin-mps-kpi-card-icon { background: #deebff; color: #0052cc; }
.admin-mps-kpi-card--green { border-top-color: var(--mps-green); background: linear-gradient(180deg, #f3fcf4 0%, #fff 42%); }
.admin-mps-kpi-card--green .admin-mps-kpi-card-icon { background: #e3fcef; color: var(--mps-green); }
.admin-mps-kpi-card--amber { border-top-color: var(--mps-orange); background: linear-gradient(180deg, #fff8f0 0%, #fff 42%); }
.admin-mps-kpi-card--amber .admin-mps-kpi-card-icon { background: #fff0e0; color: #e65100; }
.admin-mps-kpi-card--red { border-top-color: var(--mps-red); background: linear-gradient(180deg, #fff5f5 0%, #fff 42%); }
.admin-mps-kpi-card--red .admin-mps-kpi-card-icon { background: #ffebe6; color: var(--mps-red); }
.admin-mps-kpi-card--purple { border-top-color: var(--mps-purple); background: linear-gradient(180deg, #f5f3ff 0%, #fff 42%); }
.admin-mps-kpi-card--purple .admin-mps-kpi-card-icon { background: #eae6ff; color: var(--mps-purple); }
.admin-mps-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--mps-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(23, 43, 77, 0.06);
}
.admin-mps-filter-item select,
.admin-mps-filter-item input {
  border: 1px solid var(--mps-border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mps-text);
  background: #fff;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
}
.admin-mps-filter-item select {
  min-width: 120px;
  cursor: pointer;
  padding-right: 28px;
  -webkit-appearance: none;appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B778C' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.admin-mps-filter-item--search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 0 12px;
  border: 1px solid var(--mps-border);
  border-radius: 8px;
  background: #fff;
  height: 40px;
  box-sizing: border-box;
}
.admin-mps-filter-item--search input {
  flex: 1;
  width: 100%;
  border: 0;
  padding: 0;
  height: auto;
  background: transparent;
}
.admin-mps-filter-item--search input::placeholder { color: #97a0af; }
.admin-mps-search-icon { color: #97a0af; flex: 0 0 auto; }
.admin-mps-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 9px 14px;
  border: 1px solid var(--mps-primary);
  border-radius: 8px;
  background: #fff;
  color: var(--mps-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 40px;
  box-sizing: border-box;
}
.admin-mps-reset-btn:hover { background: #f0f6ff; }
.admin-mps-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 18px;
  align-items: start;
}
.admin-mps-main { min-width: 0; }
.admin-mps-panel {
  background: #fff;
  border: 1px solid var(--mps-border);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(23, 43, 77, 0.06);
  overflow: hidden;
}
.admin-mps-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px;
  border-bottom: 1px solid #ebecf0;
}
.admin-mps-panel-toolbar h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--mps-text);
}
.admin-mps-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-mps-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  height: 38px;
  box-sizing: border-box;
}
.admin-mps-btn--primary {
  border: 0;
  background: var(--mps-primary);
  color: #fff;
  box-shadow: none;
}
.admin-mps-btn--primary:hover { background: #0747a6; }
.admin-mps-btn--outline {
  border: 1px solid var(--mps-primary);
  background: #fff;
  color: var(--mps-primary);
}
.admin-mps-btn--outline:hover { background: #f0f6ff; }
.admin-mps-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-mps-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.admin-mps-table {
  width: max-content;
  min-width: 1120px;
  max-width: none;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 500;
}
.admin-mps-table th,
.admin-mps-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #ebecf0;
  text-align: left;
  color: var(--mps-text);
  vertical-align: middle;
}
.admin-mps-table th {
  background: #f4f5f7;
  color: var(--mps-muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: keep-all;
}
.admin-mps-table tbody tr:hover td { background: #fafbfc; }
.admin-mps-table .is-id {
  color: var(--mps-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  min-width: 108px;
}
.admin-mps-table .is-money { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.admin-mps-student-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.admin-mps-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: #deebff;
  color: var(--mps-primary);
  font-size: 12px;
  font-weight: 700;
}
.admin-mps-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-mps-student-name {
  font-weight: 600;
  color: var(--mps-text);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 120px;
  max-width: 220px;
}
.admin-mps-table th:nth-child(3),
.admin-mps-table td:nth-child(3),
.admin-mps-table th:nth-child(8),
.admin-mps-table td:nth-child(8) {
  white-space: nowrap;
}
.admin-mps-table th:nth-child(9),
.admin-mps-table td:nth-child(9) {
  min-width: 150px;
  white-space: nowrap;
}
.admin-mps-paid--partial { color: var(--mps-orange); font-weight: 600; }
.admin-mps-paid--unpaid { color: var(--mps-red); font-weight: 600; }
.admin-mps-balance--due { color: var(--mps-red); font-weight: 600; }
.admin-mps-balance--clear { color: var(--mps-text); font-weight: 500; }
.admin-mps-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.admin-mps-badge--paid { background: #e3fcef; color: #006644; }
.admin-mps-badge--partial { background: #fff0e0; color: #bf5000; }
.admin-mps-badge--unpaid { background: #ffebe6; color: #bf2600; }
.admin-mps-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.admin-mps-action-btn {
  border: 1px solid var(--mps-primary);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  color: var(--mps-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-mps-action-btn:hover:not(:disabled) { background: #f0f6ff; }
.admin-mps-action-btn:disabled { opacity: 0.45; cursor: not-allowed; color: #97a0af; border-color: #dfe1e6; }
.admin-mps-action-btn--collect {
  background: var(--mps-primary);
  color: #fff;
  border-color: var(--mps-primary);
}
.admin-mps-action-btn--collect:hover:not(:disabled) { background: #0747a6; }
.admin-mps-action-btn--collect .admin-mps-icon { stroke: #fff; }
.admin-mps-menu-wrap { position: relative; }
.admin-mps-menu-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--mps-muted);
  padding: 0;
}
.admin-mps-menu-btn:hover { background: #f4f5f7; color: var(--mps-text); }
.admin-mps-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 140px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 6px;
  display: none;
}
.admin-mps-menu-wrap.is-open .admin-mps-menu-panel { display: block; }
.admin-mps-menu-panel button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  border-radius: 6px;
  cursor: pointer;
}
.admin-mps-menu-panel button:hover:not(:disabled) { background: #f1f5f9; }
.admin-mps-menu-panel button:disabled { opacity: 0.45; cursor: not-allowed; }
.admin-mps-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid #ebecf0;
  font-size: 13px;
  font-weight: 400;
  color: var(--mps-muted);
}
.admin-mps-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-mps-page-nav {
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  color: #475467;
}
.admin-mps-page-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-mps-page-numbers { display: flex; gap: 4px; }
.admin-mps-page-num {
  min-width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #475467;
  cursor: pointer;
}
.admin-mps-page-num.is-active {
  background: var(--mps-primary);
  border-color: var(--mps-primary);
  color: #fff;
}
.admin-mps-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
}
.admin-mps-per-page select {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
}
.admin-mps-aside { display: flex; flex-direction: column; gap: 12px; }
.admin-mps-side-card,
.admin-mps-side-note {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.admin-mps-side-card h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mps-text);
}
.admin-mps-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.admin-mps-legend li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.admin-mps-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex: 0 0 auto;
}
.admin-mps-legend-dot--paid { background: var(--mps-green); }
.admin-mps-legend-dot--partial { background: var(--mps-orange); }
.admin-mps-legend-dot--unpaid { background: var(--mps-red); }
.admin-mps-legend strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--mps-text);
}
.admin-mps-legend span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--mps-muted);
  line-height: 1.45;
  margin-top: 2px;
}
.admin-mps-side-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #deebff;
  border-color: #b3d4ff;
}
.admin-mps-note-icon { color: var(--mps-primary); margin-top: 2px; flex-shrink: 0; }
.admin-mps-side-note strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--mps-primary);
  margin-bottom: 4px;
}
.admin-mps-side-note p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: #0747a6;
  line-height: 1.5;
}
@media (max-width: 1400px) {
  .admin-mps-kpi-row { grid-template-columns: repeat(3, minmax(170px, 1fr)); }
  .admin-mps-layout { grid-template-columns: 1fr; }
  .admin-mps-aside { flex-direction: row; flex-wrap: wrap; }
  .admin-mps-side-card,
  .admin-mps-side-note { flex: 1 1 220px; }
}
@media (max-width: 720px) {
  .admin-mps-kpi-row { grid-template-columns: 1fr; }
  .admin-mps-filter-bar { flex-direction: column; align-items: stretch; }
  .admin-mps-aside { flex-direction: column; }
}
.admin-mps-card--class-lists .admin-mps-card-head {
  flex-wrap: wrap;
  align-items: center;
}
.admin-mps-class-lists-global-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-mps-class-lists-host { display: grid; gap: 14px; }
.admin-mps-class-block {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #fafbfc;
}
.admin-mps-class-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}
.admin-mps-class-block-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  color: #1e1b4b;
}
.admin-mps-class-block-head span {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}
.admin-mps-class-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.admin-mps-class-list-col {
  padding: 12px 14px 14px;
  min-width: 0;
  background: #fff;
}
.admin-mps-class-list-col + .admin-mps-class-list-col {
  border-left: 1px solid #e2e8f0;
}
.admin-mps-class-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.admin-mps-class-list-head h5 {
  margin: 0;
  font-size: 12px;
  font-weight: 900;
  color: #334155;
}
.admin-mps-class-list-head--unpaid h5 { color: #b91c1c; }
.admin-mps-class-list-head--paid h5 { color: #166534; }
.admin-mps-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-weight: 700;
}
.admin-mps-mini-table th,
.admin-mps-mini-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  color: #475467;
}
.admin-mps-mini-table th {
  background: #f8fafc;
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
}
.admin-mps-mini-table .is-money { text-align: right; white-space: nowrap; }
.admin-mps-mini-empty {
  margin: 0;
  padding: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  background: #f8fafc;
  border-radius: 8px;
}
@media print {
  body.admin-mps-list-printing > *:not(.admin-mps-print-root) { display: none !important; }
  body.admin-mps-list-printing .admin-mps-print-root {
    display: block !important;
    position: static !important;
    padding: 16px;
  }
}
.admin-mps-print-root { display: none; }
.admin-mps-print-doc { font-family: system-ui, sans-serif; color: #0f172a; font-size: 12px; }
.admin-mps-print-doc h1 { margin: 0 0 6px; font-size: 18px; }
.admin-mps-print-doc .meta { margin: 0 0 14px; color: #64748b; font-weight: 600; }
.admin-mps-print-doc table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.admin-mps-print-doc th, .admin-mps-print-doc td { border: 1px solid #cbd5e1; padding: 6px 8px; text-align: left; }
.admin-mps-print-doc th { background: #f1f5f9; }
.admin-mps-print-class-title { margin: 18px 0 8px; font-size: 14px; font-weight: 900; }
@media (max-width: 900px) {
  .admin-mps-class-split { grid-template-columns: 1fr; }
  .admin-mps-class-list-col + .admin-mps-class-list-col {
    border-left: 0;
    border-top: 1px solid #e2e8f0;
  }
}

/* Admin — Academic Year Fee Billing Period */
.admin-billing-period-section .admin-billing-period-card {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.admin-billing-period-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-top: 12px;
}
.admin-billing-period-override {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.admin-billing-period-override input { width: auto; flex: 0 0 auto; }
.admin-billing-period-preview {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef2f7;
}
.admin-billing-period-preview h4 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
}
.admin-billing-period-months-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.admin-billing-period-months-list li {
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}
.admin-billing-period-months-list .admin-billing-period-empty {
  background: transparent;
  border: 0;
  font-weight: 600;
  color: #64748b;
  padding: 0;
}
.admin-billing-period-warning {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #9a3412;
  font-size: 12px;
  font-weight: 700;
}
.admin-billing-period-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.admin-billing-period-message.is-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.admin-billing-period-message.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.admin-fees-billing-period-preview-dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 12px 0;
}
.admin-fees-billing-period-preview-dl div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-fees-billing-period-preview-dl dt {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.admin-fees-billing-period-preview-dl dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.admin-fees-billing-preview-months {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: #475467;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .admin-billing-period-grid { grid-template-columns: 1fr; }
  .admin-fees-billing-period-preview-dl { grid-template-columns: 1fr; }
}

/* Admin — Payment History (Fees submenu) */
#adminFeesSection:has(#adminFeesPaymentHistoryPane:not([hidden])) > .admin-transport-foundation > .admin-transport-hero {
  display: none !important;
}
#adminFeesPaymentHistoryPane > .admin-ph-page-head {
  display: none !important;
}
#adminFeesPaymentHistoryPane.admin-payment-history {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 24px;
  background: #f4f7fe;
  color: #172b4d;
  font-size: 14px;
}
#adminFeesPaymentHistoryPane .admin-ph-icon { flex-shrink: 0; display: block; }
.admin-ph-page-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #172b4d;
}
.admin-ph-breadcrumb {
  margin: 6px 0 0;
  font-size: 13px;
  color: #6554c0;
  font-weight: 500;
}
.admin-ph-page-lead,
.admin-mps-page-lead,
.admin-monthly-fee-page-lead {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.45;
}
.admin-ph-filter-card,
.admin-ph-panel {
  background: #fff;
  border: 1px solid #dfe1e6;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(23, 43, 77, 0.06);
}
.admin-ph-filter-card { padding: 16px 18px; }
.admin-ph-filter-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.admin-ph-filter-card-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #172b4d;
}
.admin-ph-filter-card-head .admin-ph-icon { color: #0052cc; }
.admin-ph-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 14px;
}
.admin-ph-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.admin-ph-field span {
  font-size: 12px;
  font-weight: 600;
  color: #6b778c;
}
.admin-ph-field input,
.admin-ph-field select {
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #172b4d;
  background: #fff;
  height: 40px;
  box-sizing: border-box;
  width: 100%;
}
.admin-ph-field--search { grid-column: 1 / -1; }
.admin-ph-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  padding: 0 12px;
  height: 40px;
  box-sizing: border-box;
  background: #fff;
}
.admin-ph-search-wrap input {
  border: 0;
  padding: 0;
  height: auto;
  flex: 1;
}
.admin-ph-search-wrap .admin-ph-icon { color: #97a0af; }
.admin-ph-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid #ebecf0;
}
.admin-ph-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-ph-panel-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #172b4d;
}
.admin-ph-panel-title .admin-ph-icon { color: #6554c0; }
.admin-ph-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.admin-ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  height: 38px;
  box-sizing: border-box;
}
.admin-ph-btn--excel {
  border: 1px solid #36b37e;
  background: #fff;
  color: #00875a;
}
.admin-ph-btn--print {
  border: 1px solid #6554c0;
  background: #fff;
  color: #6554c0;
}
.admin-ph-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.admin-ph-table {
  width: max-content;
  min-width: 1320px;
  max-width: none;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 500;
}
.admin-ph-table th,
.admin-ph-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #ebecf0;
  text-align: left;
  vertical-align: middle;
  color: #172b4d;
}
.admin-ph-table th {
  background: #f4f5f7;
  font-size: 12px;
  font-weight: 600;
  color: #6b778c;
  white-space: nowrap;
  word-break: keep-all;
}
.admin-ph-table tbody tr:hover td { background: #fafbfc; }
.admin-ph-table .is-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.admin-ph-table .is-received { color: #00875a; }
.admin-ph-table .is-partial { color: #ff8b00; font-weight: 700; }
.admin-ph-method-dash { color: #97a0af; font-weight: 600; }
.admin-ph-action-muted { color: #c1c7d0; font-size: 13px; }
.admin-ph-table .is-date { white-space: nowrap; font-size: 12px; color: #42526e; }
.admin-ph-table .is-name { font-weight: 600; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.admin-ph-table td:nth-child(4) { white-space: nowrap; min-width: 96px; }
.admin-ph-receipt-link {
  border: 0;
  background: transparent;
  color: #0052cc;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.admin-ph-method-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-ph-method-badge--cash { background: #e3fcef; color: #006644; }
.admin-ph-method-badge--bank { background: #deebff; color: #0747a6; }
.admin-ph-method-badge--qr { background: #e6fcff; color: #008da6; }
.admin-ph-method-badge--default { background: #f4f5f7; color: #42526e; }
.admin-ph-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.admin-ph-status-badge--paid { background: #e3fcef; color: #006644; }
.admin-ph-status-badge--partial { background: #fff0e0; color: #bf5000; }
.admin-ph-status-badge--unpaid { background: #ffebe6; color: #bf2600; }
.admin-ph-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.admin-ph-action-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #deebff;
  border-radius: 50%;
  background: #fff;
  color: #6554c0;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.admin-ph-action-btn--print { color: #0052cc; border-color: #b3d4ff; }
.admin-ph-action-btn:hover { background: #f0f6ff; }
.admin-ph-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-top: 1px solid #ebecf0;
  font-size: 13px;
  color: #6b778c;
}
.admin-ph-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-ph-page-nav,
.admin-ph-page-num {
  min-width: 32px;
  height: 32px;
  border: 1px solid #dfe1e6;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: #42526e;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 8px;
}
.admin-ph-page-nav:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-ph-page-nav--text {
  min-width: auto;
  padding: 0 12px;
  font-size: 12px;
}
.admin-ph-page-num.is-active {
  background: #6554c0;
  border-color: #6554c0;
  color: #fff;
}
.admin-ph-page-ellipsis {
  padding: 0 4px;
  color: #97a0af;
  font-weight: 700;
}
.admin-ph-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  background: #deebff;
  border: 1px solid #b3d4ff;
  border-radius: 12px;
}
.admin-ph-note-icon { color: #0052cc; margin-top: 2px; }
.admin-ph-note strong {
  display: block;
  font-size: 13px;
  color: #0052cc;
  margin-bottom: 4px;
}
.admin-ph-note p {
  margin: 0;
  font-size: 12px;
  color: #0747a6;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .admin-ph-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .admin-ph-filter-grid { grid-template-columns: 1fr; }
}

/* Admin — Fee Ledger (stable layout — reverted from exact-match redesign) */
#adminFeesSection:has(#adminFeesLedgerPane:not([hidden])) > .admin-transport-foundation > .admin-transport-hero {
  display: none !important;
}
#adminFeesSection:has(#adminFeesLedgerPane:not([hidden])) > .admin-transport-foundation {
  background: #f4f7fe;
}
#adminFeesLedgerPane.admin-fee-ledger {
  --fl-primary: #5b4cdb;
  --fl-primary-hover: #4f46e5;
  --fl-soft: #f3f0ff;
  --fl-border: #e8ecf4;
  --fl-bg: #f4f7fe;
  --fl-text: #172b4d;
  --fl-muted: #6b778c;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0 24px;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-size: 14px;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
#adminFeesLedgerPane .admin-fl-icon { flex-shrink: 0; display: block; }
#adminFeesLedgerPane .is-purple { color: var(--fl-primary) !important; font-weight: 800; }
#adminFeesLedgerPane .is-green { color: #00875a !important; font-weight: 700; }
#adminFeesLedgerPane .is-red { color: #de350b !important; font-weight: 700; }
.admin-fl-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0 2px;
}
.admin-fl-page-head h2 { margin: 0; font-size: 28px; font-weight: 800; color: var(--fl-text); letter-spacing: -0.02em; }
.admin-fl-subtitle { margin: 8px 0 0; font-size: 14px; color: var(--fl-muted); max-width: 760px; line-height: 1.55; }
.admin-fl-breadcrumb { margin: 8px 0 0; font-size: 13px; color: #6554c0; font-weight: 600; }
.admin-fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-fl-btn--primary { background: var(--fl-primary); color: #fff; border-color: var(--fl-primary); box-shadow: 0 4px 12px rgba(91, 76, 219, 0.28); }
.admin-fl-btn--primary:hover { background: var(--fl-primary-hover); }
.admin-fl-btn--outline { background: #fff; color: var(--fl-primary); border-color: #c4b5fd; }
.admin-fl-btn--ghost { background: #fff; color: var(--fl-muted); border-color: var(--fl-border); }
.admin-fl-info-banner {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #deebff;
  border: 1px solid #b3d4ff;
  color: #0747a6;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.admin-fl-info-banner .admin-fl-icon { color: #0052cc; margin-top: 1px; }
.admin-fl-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.admin-fl-kpi-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(23, 43, 77, 0.06);
}
.admin-fl-kpi-card--accent {
  background: linear-gradient(135deg, #faf8ff 0%, #f3f0ff 100%);
  border-color: #ddd6fe;
}
.admin-fl-kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e8f0fe;
  color: #1a73e8;
  flex-shrink: 0;
}
.admin-fl-kpi-icon-wrap--indigo { background: #ede9fe; color: #5b4cdb; }
.admin-fl-kpi-icon-wrap--purple { background: #f3f0ff; color: #5b4cdb; }
.admin-fl-kpi-body { min-width: 0; }
.admin-fl-kpi-card small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--fl-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-fl-kpi-card strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--fl-text);
  line-height: 1.3;
}
.admin-fl-setup-card {
  background: #fff;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(23, 43, 77, 0.06);
}
.admin-fl-setup-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--fl-text); }
.admin-fl-setup-head p { margin: 6px 0 0; font-size: 13px; color: var(--fl-muted); }
.admin-fl-setup-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
}
.admin-fl-setup-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
}
.admin-fl-setup-field small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--fl-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-fl-setup-field strong { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--fl-text); }
.admin-fl-setup-months-box {
  min-width: 172px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(145deg, #f6f3ff 0%, #ede9fe 100%);
  border: 1px solid #ddd6fe;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.admin-fl-setup-months-box small {
  font-size: 11px;
  font-weight: 700;
  color: var(--fl-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-fl-setup-months-value {
  margin: 8px 0 0;
  font-size: 36px;
  font-weight: 800;
  color: var(--fl-primary);
  line-height: 1;
}
.admin-fl-setup-months-unit { font-size: 14px; font-weight: 700; color: var(--fl-primary); }
.admin-fl-timeline-card { padding: 20px 22px; }
.admin-fl-section-title,
.admin-fl-card-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--fl-text);
}
.admin-fl-month-cards-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 4px 16px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.admin-fl-month-card {
  flex: 0 0 118px;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  padding: 14px 12px 12px;
  text-align: center;
  background: #fff;
  box-shadow: 0 2px 8px rgba(23, 43, 77, 0.05);
}
.admin-fl-month-card--preview { min-height: 96px; display: flex; flex-direction: column; align-items: center; }
.admin-fl-month-card-num {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--fl-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 10px;
  box-shadow: 0 4px 10px rgba(91, 76, 219, 0.35);
}
.admin-fl-month-card strong { display: block; font-size: 14px; font-weight: 800; color: var(--fl-text); }
.admin-fl-month-card em {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  color: var(--fl-muted);
}
.admin-fl-timeline-rail-wrap { margin-top: 4px; padding: 0 4px; }
.admin-fl-timeline-rail {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
}
.admin-fl-rail-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fl-primary);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.15);
}
.admin-fl-rail-dot--end { box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.15); }
.admin-fl-rail-line {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, var(--fl-primary) 0%, #8b7cf8 55%, #c4b5fd 100%);
  border-radius: 999px;
}
.admin-fl-timeline-dates {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--fl-primary);
}
.admin-fl-filter-card,
.admin-fl-calc-card,
.admin-fl-preview-card,
.admin-fl-timeline-card,
.admin-fl-table-card,
.admin-fl-note-card {
  background: #fff;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.admin-fl-filter-card,
.admin-fl-calc-card,
.admin-fl-preview-card,
.admin-fl-timeline-card,
.admin-fl-table-card { padding: 18px 20px; }
.admin-fl-section-title { margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--fl-text); }
.admin-fl-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
}
.admin-fl-field { display: flex; flex-direction: column; gap: 6px; }
.admin-fl-field--search { grid-column: 1 / -1; }
.admin-fl-field > span { font-size: 12px; font-weight: 600; color: var(--fl-muted); }
.admin-fl-field select,
.admin-fl-field input {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fl-text);
  background: #fff;
}
.admin-fl-filter-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.admin-fl-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 16px;
  align-items: start;
}
.admin-fl-empty { margin: 0; font-size: 13px; color: var(--fl-muted); font-weight: 600; }
.admin-fl-student-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f2f7;
}
.admin-fl-student-info small { display: block; font-size: 11px; color: var(--fl-muted); font-weight: 600; }
.admin-fl-student-info strong { font-size: 13px; font-weight: 700; }
.admin-fl-breakdown-list,
.admin-fl-summary-lines {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin-fl-breakdown-list li,
.admin-fl-summary-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f4f5f7;
  font-size: 13px;
}
.admin-fl-summary-lines--total {
  margin-top: 6px;
  padding: 10px 12px !important;
  border-radius: 10px;
  background: var(--fl-soft);
  border-bottom: 0 !important;
}
.admin-fl-formula-box {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--fl-soft);
  border: 1px solid #ddd6fe;
  font-size: 12px;
  color: #403294;
  font-weight: 600;
  line-height: 1.5;
}
.admin-fl-formula-box p { margin: 0; }
.admin-fl-preview-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-fl-preview-dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.admin-fl-preview-dl dt { margin: 0; color: var(--fl-muted); font-weight: 600; }
.admin-fl-preview-dl dd { margin: 0; font-weight: 700; }
.admin-fl-preview-total-box {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--fl-soft);
  border: 1px solid #ddd6fe;
}
.admin-fl-preview-total-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fl-primary);
  text-transform: uppercase;
}
.admin-fl-preview-total { margin: 0; font-size: 28px; font-weight: 800; color: var(--fl-primary); }
.admin-fl-filter-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.admin-fl-filter-card-head h3 { margin: 0; font-size: 15px; font-weight: 800; }
.admin-fl-filter-card-head .admin-fl-icon { color: #5b4cdb; }
.admin-fl-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  padding: 0 12px;
  min-height: 40px;
  background: #fff;
}
.admin-fl-search-wrap input {
  border: 0;
  padding: 8px 0;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
}
.admin-fl-search-wrap .admin-fl-icon { color: #97a0af; }
.admin-fl-month-card-badge {
  display: inline-block;
  margin: 6px 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
}
.admin-fl-month-card-badge--paid { background: #e3fcef; color: #006644; }
.admin-fl-month-card-badge--partial { background: #fff0e0; color: #bf5000; }
.admin-fl-month-card-badge--unpaid { background: #f4f5f7; color: #6b778c; }
.admin-fl-month-card-meta { margin: 0; font-size: 11px; text-align: left; }
.admin-fl-month-card-meta div { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.admin-fl-month-card-meta dt { color: var(--fl-muted); font-weight: 600; }
.admin-fl-month-card-meta dd { margin: 0; font-weight: 700; }
.admin-fl-timeline-months-compact { display: none; }
.admin-fl-rail-arrow { color: var(--fl-primary); font-size: 20px; font-weight: 800; }
.admin-fl-note-card {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  background: #deebff;
  border: 1px solid #b3d4ff;
}
.admin-fl-note-icon { color: #0052cc; }
.admin-fl-note-card strong { display: block; color: #0052cc; margin-bottom: 4px; }
.admin-fl-note-card p { margin: 0; font-size: 12px; color: #0747a6; line-height: 1.55; }
.admin-fl-table-wrap { overflow-x: auto; }
.admin-fl-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 13px;
}
.admin-fl-table th,
.admin-fl-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: middle;
}
.admin-fl-table th { background: #f8fafc; font-size: 12px; color: var(--fl-muted); font-weight: 700; white-space: nowrap; }
.admin-fl-table .is-money { text-align: right; font-variant-numeric: tabular-nums; }
.admin-fl-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.admin-fl-status-badge--paid { background: #e3fcef; color: #006644; }
.admin-fl-status-badge--partial { background: #fff0e0; color: #bf5000; }
.admin-fl-status-badge--unpaid { background: #ffebe6; color: #bf2600; }
.admin-fl-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-fl-action-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #deebff;
  background: #fff;
  color: #0052cc;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.admin-fl-action-btn--collect { border-color: #c4b5fd; color: var(--fl-primary); }
@media (max-width: 1100px) {
  .admin-fl-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-fl-main-grid { grid-template-columns: 1fr; }
  .admin-fl-filter-grid { grid-template-columns: 1fr 1fr; }
  .admin-fl-setup-grid { grid-template-columns: 1fr; }
  .admin-fl-setup-fields { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .admin-fl-kpi-grid,
  .admin-fl-filter-grid,
  .admin-fl-student-info { grid-template-columns: 1fr; }
  .admin-fl-page-head h2 { font-size: 22px; }
}

/* Admin — Fee Ledger billing period form (layout) */
.admin-fl-billing-setup-shell.admin-fl-setup-card {
  background: #fff;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(23, 43, 77, 0.06);
}
.admin-fl-billing-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}
.admin-fl-billing-form-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}
.admin-fl-billing-form-fields .admin-fl-setup-hint {
  grid-column: 1 / -1;
  margin: 0;
}
.admin-fl-bp-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-fl-bp-field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--fl-muted);
}
.admin-fl-req {
  color: #de350b;
  font-style: normal;
  font-weight: 800;
}
.admin-fl-bp-input-wrap {
  position: relative;
  display: block;
}
.admin-fl-bp-input-wrap input {
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 12px;
  border: 1px solid #dfe1e6;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fl-text);
  background: #fff;
  box-sizing: border-box;
}
.admin-fl-bp-input-wrap input:focus {
  outline: none;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-fl-bp-field-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.admin-fl-billing-form-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.admin-fl-bp-save-btn {
  width: 100%;
  justify-content: center;
}
.admin-fl-bp-message {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
.admin-fl-bp-message.is-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
.admin-fl-bp-message.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.admin-fl-setup-warning {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.admin-fl-setup-warning .admin-fl-icon { color: #ea580c; flex-shrink: 0; margin-top: 1px; }
.admin-fl-setup-hint {
  margin: 14px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.5;
}
.admin-fl-setup-hint .admin-fl-icon { color: #6366f1; flex-shrink: 0; margin-top: 1px; }
.admin-fl-timeline-card--always { display: block !important; }
.admin-fl-timeline-card--ready .admin-fl-month-cards-scroll { min-height: 108px; }
.admin-fl-months-placeholder { text-align: center; padding: 20px 12px; }
.admin-fl-rail-arrow { color: var(--fl-primary); font-size: 20px; font-weight: 800; }
@media (max-width: 1100px) {
  .admin-fl-billing-form { grid-template-columns: 1fr; }
  .admin-fl-billing-form-fields { grid-template-columns: 1fr; }
}

/* Admin — Fees Management light UI (#adminFeesSection only) */
#adminFeesSection.admin-fees-management {
  --fees-bg: #f8fafc;
  --fees-surface: #ffffff;
  --fees-border: #e8edf2;
  --fees-text: #475569;
  --fees-heading: #1e293b;
  --fees-accent: #818cf8;
  --fees-accent-strong: #6366f1;
  --fees-radius: 12px;
  --fees-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  --fees-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.05);
}
#adminFeesSection .admin-fees-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--fees-bg);
  padding-bottom: 24px;
}
#adminFeesSection .admin-fees-hero,
#adminFeesSection .admin-fees-shell > .admin-transport-hero {
  background: var(--fees-surface);
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  padding: 18px 20px;
}
#adminFeesSection .admin-fees-hero h2,
#adminFeesSection .admin-fees-shell > .admin-transport-hero h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--fees-heading);
  letter-spacing: -0.02em;
}
#adminFeesSection .admin-fees-hero p,
#adminFeesSection .admin-fees-shell > .admin-transport-hero p {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fees-text);
}
#adminFeesSection .admin-transport-badge {
  padding: 8px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--fees-border);
  box-shadow: none;
}
#adminFeesSection .admin-fees-panel-card,
#adminFeesSection .admin-fees-subview .admin-transport-panel {
  background: var(--fees-surface);
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  padding: 18px 20px;
}
#adminFeesSection .admin-fees-panel-card h3,
#adminFeesSection .admin-fees-subview .admin-transport-panel h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-subview .admin-transport-table th {
  background: #f8fafc;
  font-weight: 700;
  font-size: 12px;
  color: #64748b;
}
#adminFeesSection .admin-fees-structure-card {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  padding: 18px 16px;
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#adminFeesSection .admin-fees-structure-card:hover {
  border-color: #cbd5e1;
  background: #fff;
}
#adminFeesSection .admin-fees-structure-card.is-selected {
  border-color: var(--fees-accent-strong);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), var(--fees-shadow);
}
#adminFeesSection .admin-fees-structure-card h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-terms-card,
#adminFeesSection .admin-fees-invoice-account-card {
  border: 1px solid var(--fees-border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-fees-terms-card.is-selected,
#adminFeesSection .admin-fees-invoice-account-card.is-selected {
  border-color: var(--fees-accent-strong);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
#adminFeesSection .admin-fees-setup-preview {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}

/* Fees Structure + setup sections — unified light palette (#adminFeesSection only) */
#adminFeesSection #adminFeesStructureHost,
#adminFeesSection .admin-fees-ui-unified {
  color: var(--fees-text);
}
#adminFeesSection .admin-fees-ui-unified.admin-ip-shell {
  background: var(--fees-surface);
  border: 1px solid var(--fees-border);
  border-radius: 14px;
  box-shadow: var(--fees-shadow);
  padding: 18px 20px 22px;
}
#adminFeesSection .admin-fees-ui-unified.admin-ip-shell::before {
  height: 2px;
  background: linear-gradient(90deg, var(--fees-accent-strong) 0%, #c7d2fe 100%);
}
#adminFeesSection .admin-fees-ui-unified .admin-ip-breadcrumb-current {
  color: var(--fees-accent-strong);
  font-weight: 700;
}
#adminFeesSection .admin-fees-ui-unified .admin-ip-crumb {
  background: #f8fafc;
  border-color: var(--fees-border);
  color: var(--fees-text);
  font-weight: 600;
}
#adminFeesSection .admin-fees-ui-unified .admin-ip-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fees-heading);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
#adminFeesSection .admin-fees-ui-unified .admin-ip-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--fees-text);
}
#adminFeesSection .admin-fees-structure-block {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-fees-structure-block:first-of-type {
  margin-top: 0;
  padding-top: 18px;
  border-top: none;
}
#adminFeesSection .admin-fees-structure-block-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-structure-block-lead {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fees-text);
  line-height: 1.5;
}
#adminFeesSection .admin-fees-structure-check,
#adminFeesSection .admin-fees-terms-check {
  background: var(--fees-accent-strong);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
}
#adminFeesSection .admin-fees-terms-card h4,
#adminFeesSection .admin-fees-invoice-account-card h4 {
  color: var(--fees-heading);
  font-weight: 800;
}
#adminFeesSection .admin-fees-invoice-example {
  color: var(--fees-accent-strong);
}
#adminFeesSection .admin-ip-btn-primary {
  color: #fff;
  background: var(--fees-accent-strong);
  border: 1px solid var(--fees-accent-strong);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22);
}
#adminFeesSection .admin-ip-btn-primary:hover {
  background: #4f46e5;
  transform: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
  filter: none;
}
#adminFeesSection .admin-ip-btn-secondary {
  background: #fff;
  color: var(--fees-accent-strong);
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-ip-btn-secondary:hover {
  background: #f5f3ff;
  transform: none;
}
#adminFeesSection .admin-ip-message.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  box-shadow: none;
}
#adminFeesSection .admin-ip-message.is-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  box-shadow: none;
}
#adminFeesSection .admin-fees-billing-period-preview-dl div {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--fees-border);
}
#adminFeesSection .admin-fees-billing-preview-months {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f5f3ff;
  border: 1px solid #e9e5ff;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-setup-preview-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-setup-preview-subtitle {
  color: var(--fees-text);
}
#adminFeesSection .admin-fees-setup-preview-block {
  border: 1px solid var(--fees-border);
  border-radius: 10px;
  background: #fafbfc;
  box-shadow: none;
}
#adminFeesSection .admin-fees-setup-preview-block-title {
  color: var(--fees-accent-strong);
  font-size: 12px;
  font-weight: 800;
}
#adminFeesSection .admin-fees-setup-preview-row dd {
  color: var(--fees-heading);
  font-weight: 700;
}
#adminFeesSection .admin-fees-setup-category-list li {
  background: #f8fafc;
  border: 1px solid var(--fees-border);
}
#adminFeesSection .admin-fees-setup-category-list li b {
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-setup-next-card {
  border: 1px solid var(--fees-border);
  border-radius: 10px;
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-fees-setup-next-card:hover {
  border-color: #c7d2fe;
  background: #fafaff;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
  transform: none;
}
#adminFeesSection .admin-fees-setup-next-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--fees-heading);
}
#adminFeesSection .admin-fees-discount-select,
#adminFeesSection .admin-fees-discount-input,
#adminFeesSection .admin-fees-rules-textarea,
#adminFeesSection .admin-fees-particular-input,
#adminFeesSection .admin-fees-particular-select {
  border: 1px solid var(--fees-border);
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
}
#adminFeesSection .admin-fees-discount-select:focus,
#adminFeesSection .admin-fees-discount-input:focus,
#adminFeesSection .admin-fees-rules-textarea:focus,
#adminFeesSection .admin-fees-particular-input:focus,
#adminFeesSection .admin-fees-particular-select:focus {
  outline: none;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
#adminFeesSection .admin-settings-table-wrap,
#adminFeesSection .admin-monthly-fees-table-wrap {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  overflow: hidden;
  background: var(--fees-surface);
}
#adminFeesSection .admin-settings-table th,
#adminFeesSection .admin-monthly-fees-table th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  font-size: 12px;
  border-bottom: 1px solid var(--fees-border);
}
#adminFeesSection .admin-settings-table td,
#adminFeesSection .admin-monthly-fees-table td {
  border-bottom: 1px solid #f1f5f9;
  color: var(--fees-text);
}
#adminFeesSection .admin-monthly-fees-summary .admin-fees-stat-card {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  padding: 14px 16px;
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-monthly-fees-summary .admin-fees-stat-card small {
  color: var(--fees-text);
  font-weight: 700;
  font-size: 11px;
}
#adminFeesSection .admin-monthly-fees-summary .admin-fees-stat-card strong {
  color: var(--fees-heading);
  font-size: 20px;
  font-weight: 800;
}
#adminFeesSection .admin-soft-panel.admin-fees-estimated-panel {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  background: var(--fees-surface);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-soft-panel .admin-panel-title h4 {
  color: var(--fees-heading);
  font-weight: 800;
}
#adminFeesSection .admin-soft-panel .admin-panel-title span {
  background: #f5f3ff;
  color: var(--fees-accent-strong);
  border: 1px solid #e9e5ff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
}
#adminFeesSection .admin-monthly-fees-toolbar input,
#adminFeesSection .admin-monthly-fees-toolbar select {
  border: 1px solid var(--fees-border);
  border-radius: 10px;
  font-weight: 600;
}
#adminFeesSection .admin-fees-more-btn {
  border: 1px solid #c7d2fe;
  background: #fff;
  color: var(--fees-accent-strong);
  border-radius: 10px;
  font-weight: 700;
}
#adminFeesSection .admin-fees-panel {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  padding: 14px 16px;
  background: #fafbfc;
  box-shadow: var(--fees-shadow);
}
#adminFeesSection .admin-fees-panel h4 {
  color: var(--fees-heading);
  font-weight: 800;
}
#adminFeesSection .admin-student-fee-final {
  background: #f5f3ff;
  color: var(--fees-accent-strong);
  border-color: #e9e5ff;
}
#adminFeesSection .admin-fees-status-badge.paid {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
#adminFeesSection .admin-fees-status-badge.pending {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}
#adminFeesSection .admin-fees-status-badge.partial {
  background: #fff7ed;
  color: #c2410c;
  border-color: #fed7aa;
}

#adminFeesSection .admin-collect-admission-head {
  background: var(--fees-surface);
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  padding: 16px 18px;
}
#adminFeesSection .admin-collect-admission-head h2 {
  font-size: 22px;
  font-weight: 800;
}
#adminFeesSection .admin-collect-admission-summary-card,
#adminFeesSection .admin-collect-admission-section {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  background: var(--fees-surface);
}
#adminFeesSection .admin-collect-admission-btn--primary {
  background: var(--fees-accent-strong);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}
#adminFeesSection .admin-monthly-fee-color-card {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow-md);
}
#adminFeesSection .admin-monthly-fee-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}
#adminFeesSection .admin-monthly-fee-card-head h3 {
  font-size: 15px;
  font-weight: 800;
}
#adminFeesSection .admin-monthly-fee-card-head-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  box-shadow: none;
}
#adminFeesSection .admin-monthly-fee-page-head h2 {
  font-size: 22px;
  font-weight: 800;
}
#adminFeesSection:has(#adminFeesPaymentHistoryPane:not([hidden])) > .admin-transport-foundation,
#adminFeesSection:has(#adminFeesLedgerPane:not([hidden])) > .admin-transport-foundation {
  background: var(--fees-bg);
}
#adminFeesSection #adminFeesPaymentHistoryPane.admin-payment-history {
  background: var(--fees-bg);
  gap: 16px;
}
#adminFeesSection .admin-ph-filter-card,
#adminFeesSection .admin-ph-panel {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  background: var(--fees-surface);
}
#adminFeesSection .admin-ph-page-head h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--fees-heading);
}
#adminFeesSection .admin-ph-note {
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  border-radius: var(--fees-radius);
}
#adminFeesSection #adminFeesLedgerPane.admin-fee-ledger {
  --fl-primary: var(--fees-accent-strong);
  --fl-primary-hover: #4f46e5;
  --fl-soft: #f5f3ff;
  --fl-border: var(--fees-border);
  --fl-bg: var(--fees-bg);
  --fl-text: var(--fees-heading);
  --fl-muted: #64748b;
  gap: 16px;
}
#adminFeesSection #adminFeesLedgerPane .admin-fl-btn--primary {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22);
}
#adminFeesSection #adminFeesLedgerPane .admin-fl-setup-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-timeline-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-calc-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-preview-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-filter-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-table-card,
#adminFeesSection #adminFeesLedgerPane .admin-fl-note-card {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
}
#adminFeesSection #adminFeesLedgerPane .admin-fl-setup-months-box {
  background: linear-gradient(145deg, #fafaff 0%, #f5f3ff 100%);
  border: 1px solid #e9e5ff;
  box-shadow: none;
}
#adminFeesSection #adminFeesMonthlyPaymentStatusPane.admin-monthly-payment-status {
  --mps-bg: var(--fees-bg);
  --mps-text: var(--fees-heading);
  --mps-muted: #64748b;
  --mps-border: var(--fees-border);
  --mps-primary: var(--fees-accent-strong);
  gap: 16px;
}
#adminFeesSection #adminFeesMonthlyPaymentStatusPane .admin-mps-filter-card,
#adminFeesSection #adminFeesMonthlyPaymentStatusPane .admin-mps-table-card,
#adminFeesSection #adminFeesMonthlyPaymentStatusPane .admin-mps-summary-card {
  border: 1px solid var(--fees-border);
  border-radius: var(--fees-radius);
  box-shadow: var(--fees-shadow);
  background: var(--fees-surface);
}
@media (max-width: 1100px) {
  #adminFeesSection .admin-fees-hero,
  #adminFeesSection .admin-fees-shell > .admin-transport-hero {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Admin — Announcements / Notices (working UI, scoped) */
#announcementsNoticesSection.admin-ann-management {
  --ann-bg: #f4f6fb;
  --ann-surface: #ffffff;
  --ann-border: #e5e9f2;
  --ann-text: #64748b;
  --ann-heading: #0f172a;
  --ann-accent: #6d28d9;
  --ann-accent-hover: #5b21b6;
  --ann-radius: 14px;
  --ann-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
#announcementsNoticesSection .admin-ann-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 28px;
  background: var(--ann-bg);
}
#announcementsNoticesSection .admin-ann-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
#announcementsNoticesSection .admin-ann-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}
#announcementsNoticesSection .admin-ann-topbar h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  color: var(--ann-heading);
  letter-spacing: -0.02em;
}
#announcementsNoticesSection .admin-ann-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
#announcementsNoticesSection .admin-ann-breadcrumb strong {
  color: var(--ann-accent);
}
#announcementsNoticesSection .admin-ann-btn {
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
#announcementsNoticesSection .admin-ann-btn--primary {
  background: var(--ann-accent);
  color: #fff;
  border-color: var(--ann-accent);
}
#announcementsNoticesSection .admin-ann-btn--primary:hover {
  background: var(--ann-accent-hover);
}
#announcementsNoticesSection .admin-ann-btn--outline {
  background: #fff;
  color: var(--ann-accent);
  border-color: #c4b5fd;
}
#announcementsNoticesSection .admin-ann-btn--ghost {
  background: #fff;
  color: var(--ann-text);
  border-color: var(--ann-border);
}
#announcementsNoticesSection .admin-ann-btn--new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 14px rgba(109, 40, 217, 0.25);
}
#announcementsNoticesSection .admin-ann-filter-card {
  background: var(--ann-surface);
  border: 1px solid var(--ann-border);
  border-radius: var(--ann-radius);
  box-shadow: var(--ann-shadow);
  padding: 16px 18px;
}
#announcementsNoticesSection .admin-ann-filter-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
#announcementsNoticesSection .admin-ann-filter-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#announcementsNoticesSection .admin-ann-filter-field > span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ann-text);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#announcementsNoticesSection .admin-ann-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--ann-border);
  border-radius: 10px;
  background: #fff;
  min-height: 42px;
}
#announcementsNoticesSection .admin-ann-search-wrap input {
  border: 0;
  flex: 1;
  min-height: 40px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  outline: none;
  background: transparent;
}
#announcementsNoticesSection .admin-ann-filter-field input,
#announcementsNoticesSection .admin-ann-filter-field select {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--ann-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--ann-heading);
  width: 100%;
  box-sizing: border-box;
}
#announcementsNoticesSection .admin-ann-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
#announcementsNoticesSection .admin-ann-stat-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
#announcementsNoticesSection .admin-ann-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--ann-surface);
  border: 1px solid var(--ann-border);
  border-radius: var(--ann-radius);
  box-shadow: var(--ann-shadow);
}
#announcementsNoticesSection .admin-ann-stat-icon {
  font-size: 22px;
  line-height: 1;
}
#announcementsNoticesSection .admin-ann-stat small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ann-heading);
}
#announcementsNoticesSection .admin-ann-stat--blue { border-left: 4px solid #3b82f6; }
#announcementsNoticesSection .admin-ann-stat--green { border-left: 4px solid #10b981; }
#announcementsNoticesSection .admin-ann-stat--orange { border-left: 4px solid #f59e0b; }
#announcementsNoticesSection .admin-ann-stat--purple { border-left: 4px solid #8b5cf6; }
#announcementsNoticesSection .admin-ann-stat--red { border-left: 4px solid #ef4444; }
#announcementsNoticesSection .admin-ann-table-card {
  background: var(--ann-surface);
  border: 1px solid var(--ann-border);
  border-radius: var(--ann-radius);
  box-shadow: var(--ann-shadow);
  overflow: hidden;
}
#announcementsNoticesSection .admin-ann-table-wrap {
  overflow-x: auto;
}
#announcementsNoticesSection .admin-ann-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 13px;
}
#announcementsNoticesSection .admin-ann-table th {
  background: #f8fafc;
  color: #64748b;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ann-border);
  white-space: nowrap;
}
#announcementsNoticesSection .admin-ann-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--ann-text);
  vertical-align: middle;
}
#announcementsNoticesSection .admin-ann-cell-title {
  font-weight: 700;
  color: var(--ann-heading);
}
#announcementsNoticesSection .admin-ann-cell-preview {
  max-width: 220px;
  color: #94a3b8;
  font-size: 12px;
}
#announcementsNoticesSection .admin-ann-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#announcementsNoticesSection .admin-ann-badge {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
#announcementsNoticesSection .admin-ann-badge--blue { background: #dbeafe; color: #1d4ed8; }
#announcementsNoticesSection .admin-ann-badge--green { background: #d1fae5; color: #047857; }
#announcementsNoticesSection .admin-ann-badge--purple { background: #ede9fe; color: #6d28d9; }
#announcementsNoticesSection .admin-ann-badge--teal { background: #ccfbf1; color: #0f766e; }
#announcementsNoticesSection .admin-ann-status {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
#announcementsNoticesSection .admin-ann-status--published { background: #d1fae5; color: #047857; }
#announcementsNoticesSection .admin-ann-status--draft { background: #ede9fe; color: #6d28d9; }
#announcementsNoticesSection .admin-ann-status--scheduled { background: #ffedd5; color: #c2410c; }
#announcementsNoticesSection .admin-ann-status--archived { background: #fee2e2; color: #b91c1c; }
#announcementsNoticesSection .admin-ann-status--expired { background: #f1f5f9; color: #64748b; }
#announcementsNoticesSection .admin-ann-table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--ann-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
#announcementsNoticesSection .admin-ann-page-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--ann-border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--ann-text);
  cursor: pointer;
}
#announcementsNoticesSection .admin-ann-page-btn.is-active {
  background: var(--ann-accent);
  border-color: var(--ann-accent);
  color: #fff;
}
#announcementsNoticesSection .admin-ann-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
#announcementsNoticesSection .admin-ann-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ann-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
#announcementsNoticesSection .admin-ann-icon-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
}
#announcementsNoticesSection .admin-ann-act {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid #c4b5fd;
  background: #fff;
  color: var(--ann-accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
#announcementsNoticesSection .admin-ann-readonly {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
}
#announcementsNoticesSection .admin-ann-topbar--create .admin-ann-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#announcementsNoticesSection .admin-ann-back-link {
  display: inline-block;
  margin-bottom: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ann-accent);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#announcementsNoticesSection .admin-ann-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  align-items: start;
}
#announcementsNoticesSection .admin-ann-form-section {
  background: var(--ann-surface);
  border: 1px solid var(--ann-border);
  border-radius: var(--ann-radius);
  box-shadow: var(--ann-shadow);
  padding: 18px 20px;
  margin-bottom: 16px;
}
#announcementsNoticesSection .admin-ann-form-section h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ann-heading);
  display: flex;
  align-items: center;
  gap: 10px;
}
#announcementsNoticesSection .admin-ann-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ann-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
#announcementsNoticesSection .admin-ann-form-grid,
#announcementsNoticesSection .admin-ann-recipient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
#announcementsNoticesSection .admin-ann-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#announcementsNoticesSection .admin-ann-field--span2 {
  grid-column: 1 / -1;
}
#announcementsNoticesSection .admin-ann-field > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-req {
  color: #de350b;
  font-style: normal;
}
#announcementsNoticesSection .admin-ann-field input,
#announcementsNoticesSection .admin-ann-field select,
#announcementsNoticesSection .admin-ann-field textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--ann-border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ann-heading);
  background: #fff;
  box-sizing: border-box;
}
#announcementsNoticesSection .admin-ann-field textarea {
  min-height: 140px;
  resize: vertical;
}
#announcementsNoticesSection .admin-ann-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--ann-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: #f8fafc;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}
#announcementsNoticesSection .admin-ann-field textarea.admin-ann-editor-body,
#announcementsNoticesSection .admin-ann-field textarea#adminAnnMessage {
  border-radius: 0 0 10px 10px;
  margin-top: 0;
}
#announcementsNoticesSection .admin-ann-word-count {
  display: block;
  text-align: right;
  margin-top: 6px;
  font-size: 11px;
  color: #94a3b8;
}
#announcementsNoticesSection .admin-ann-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}
#announcementsNoticesSection .admin-ann-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ann-heading);
  cursor: pointer;
}
#announcementsNoticesSection .admin-ann-schedule-fields.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
#announcementsNoticesSection .admin-ann-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#announcementsNoticesSection .admin-ann-template-card {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--ann-border);
  border-radius: 12px;
  background: #fafbfc;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#announcementsNoticesSection .admin-ann-template-card:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.1);
}
#announcementsNoticesSection .admin-ann-template-card strong {
  display: block;
  font-size: 14px;
  color: var(--ann-heading);
}
#announcementsNoticesSection .admin-ann-template-card span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-side-card {
  background: var(--ann-surface);
  border: 1px solid var(--ann-border);
  border-radius: var(--ann-radius);
  box-shadow: var(--ann-shadow);
  padding: 16px;
  margin-bottom: 14px;
}
#announcementsNoticesSection .admin-ann-side-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ann-heading);
}
#announcementsNoticesSection .admin-ann-audience-dl div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f1f5f9;
}
#announcementsNoticesSection .admin-ann-audience-total {
  margin: 12px 0 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-side-status {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 13px;
  font-weight: 800;
}
#announcementsNoticesSection .admin-ann-send-methods {
  list-style: none;
  margin: 0;
  padding: 0;
}
#announcementsNoticesSection .admin-ann-send-methods li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--ann-border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ann-text);
}
#announcementsNoticesSection .admin-ann-send-methods li.is-on {
  border-color: #86efac;
  background: #f0fdf4;
  color: #047857;
}
#announcementsNoticesSection .admin-ann-tips {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ann-text);
  line-height: 1.6;
}
#announcementsNoticesSection .admin-ann-footer-note {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding: 12px 16px;
  background: #eff6ff;
  border-radius: 10px;
  border: 1px solid #bfdbfe;
}
#announcementsNoticesSection .admin-ann-message {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}
#announcementsNoticesSection .admin-ann-message.is-success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}
#announcementsNoticesSection .admin-ann-message.is-error {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
@media (max-width: 1100px) {
  #announcementsNoticesSection .admin-ann-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #announcementsNoticesSection .admin-ann-filter-field--search {
    grid-column: 1 / -1;
  }
  #announcementsNoticesSection .admin-ann-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #announcementsNoticesSection .admin-ann-create-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  #announcementsNoticesSection .admin-ann-stat-row,
  #announcementsNoticesSection .admin-ann-form-grid,
  #announcementsNoticesSection .admin-ann-recipient-grid,
  #announcementsNoticesSection .admin-ann-template-grid {
    grid-template-columns: 1fr;
  }
  #announcementsNoticesSection .admin-ann-field--span2 {
    grid-column: auto;
  }
}

/* MSG-8 — Direct Call / Direct Video Call header actions */
.msg8-direct-call-body .msg3-chat-room-header,
.msg8-direct-call-body .msg-ui-room-header {
  grid-template-columns: auto auto minmax(0, 1fr) auto auto;
}
.msg8-room-actions,
.msg-ui-room-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  max-width: 100%;
}
.msg8-call-btn,
.msg-ui-room-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid #dbe7fb;
  border-radius: 999px;
  background: #f8fbff;
  color: #0f49ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.msg8-call-btn:hover:not(:disabled),
.msg-ui-room-action-btn:hover:not(:disabled) {
  background: #eef4ff;
  border-color: #b9cff9;
  box-shadow: 0 2px 8px rgba(15, 73, 255, 0.12);
}
.msg8-call-btn:focus-visible,
.msg-ui-room-action-btn:focus-visible {
  outline: 2px solid #0f49ff;
  outline-offset: 2px;
}
.msg8-call-btn:disabled,
.msg8-call-btn.is-disabled,
.msg-ui-room-action-btn:disabled,
.msg-ui-room-action-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.msg8-info-btn {
  color: #334155;
}
.msg8-direct-call-status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #0f49ff;
  padding: 2px 8px;
  border-radius: 8px;
  background: #eef4ff;
  border: 1px solid #dbe7fb;
  max-width: 100%;
  word-break: break-word;
}
.msg8-direct-call-status.ok {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.msg8-direct-call-status.blocked {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
@media (max-width: 768px) {
  .msg8-direct-call-body .msg3-chat-room-header,
  .msg8-direct-call-body .msg-ui-room-header {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 8px;
  }
  .msg8-room-actions,
  .msg-ui-room-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .msg8-room-actions::-webkit-scrollbar,
  .msg-ui-room-actions::-webkit-scrollbar {
    display: none;
  }
  .msg8-call-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .msg8-call-btn,
  .msg-ui-room-action-btn {
    min-width: 38px;
    padding: 6px 8px;
  }
  .msg8-direct-call-body .msg3-chat-room-header #msg1ConversationStatus,
  .msg8-direct-call-body .msg-ui-room-header #msg1ConversationStatus {
    grid-column: auto;
    width: auto;
    margin-left: auto;
  }
}
@media (max-width: 430px) {
  .msg8-call-btn,
  .msg-ui-room-action-btn {
    min-height: 32px;
    min-width: 34px;
    padding: 5px 7px;
  }
}

/* MSG UI v6 — Class / Group Chat mockup layout (Admin Message view) */
.msg-ui-v6-body #msgUiViewGroups .msg6-group-page-header {
  margin-bottom: 12px;
}
.msg-ui-v6-body .msg6-badge-green {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.msg-ui-v6-body .msg6-grade-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #0f49ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.msg-ui-v6-body .msg6-group-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  margin-bottom: 14px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  border: 1px solid #e4eaf4;
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}
.msg-ui-v6-body .msg6-group-hero-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #0f49ff, #4f46e5);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
}
.msg-ui-v6-body .msg6-group-hero-main h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #0b2d75;
}
.msg-ui-v6-body .msg6-group-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 0;
}
.msg-ui-v6-body .msg6-group-hero-meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 800;
}
.msg-ui-v6-body .msg6-group-hero-meta dd {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: #0b2d75;
}
.msg-ui-v6-body .msg6-group-hero-desc {
  margin: 12px 0 0;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.45;
}
.msg-ui-v6-body .msg6-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.msg-ui-v6-body .msg6-list-add-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #fff;
  color: #0f49ff;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.msg-ui-v6-body .msg6-chat-header {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
}
.msg-ui-v6-body .msg6-chat-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}
.msg-ui-v6-body .msg6-btn-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.msg-ui-v6-body .msg6-btn-schedule {
  min-height: 38px;
  font-size: 12px;
  font-weight: 800;
}
.msg-ui-v6-body .msg6-members-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 8px 4px 10px;
  margin-bottom: 6px;
  scrollbar-width: none;
}
.msg-ui-v6-body .msg6-members-row::-webkit-scrollbar {
  display: none;
}
.msg-ui-v6-body .msg6-member-chip {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 72px;
  max-width: 88px;
}
.msg-ui-v6-body .msg6-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef4ff;
  color: #0f49ff;
  font-weight: 900;
  font-size: 14px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.msg-ui-v6-body .msg6-member-chip strong {
  font-size: 10px;
  color: #0b2d75;
  text-align: center;
  line-height: 1.2;
  font-weight: 800;
  max-width: 88px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ui-v6-body .msg6-member-chip small {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
}
.msg-ui-v6-body .msg6-member-more {
  align-self: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}
.msg-ui-v6-body .msg6-room-chips {
  flex-wrap: wrap;
}
.msg-ui-v6-body .msg6-group-thread {
  background: #eef2f7;
  border-radius: 16px;
}
.msg-ui-v6-body .msg6-group-compose {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: end;
}
.msg-ui-v6-body .msg6-compose-plus {
  width: 40px;
  height: 40px;
  border: 1px solid #dbe7fb;
  border-radius: 12px;
  background: #fff;
  color: #0f49ff;
  font-size: 22px;
  font-weight: 900;
  cursor: default;
}
.msg-ui-v6-body .msg6-class-tools h4 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #0b2d75;
}
.msg-ui-v6-body .msg6-tool-cards {
  display: grid;
  gap: 8px;
}
.msg-ui-v6-body .msg6-tool-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.msg-ui-v6-body .msg6-tool-card:hover:not(:disabled) {
  border-color: #0f49ff;
  box-shadow: 0 4px 14px rgba(15, 73, 255, 0.1);
}
.msg-ui-v6-body .msg6-tool-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.msg-ui-v6-body .msg6-tool-card strong {
  display: block;
  font-size: 13px;
  color: #0b2d75;
}
.msg-ui-v6-body .msg6-tool-card small {
  display: block;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v6-body .msg6-tool-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.msg-ui-v6-body .msg6-tool-video .msg6-tool-icon { background: #eef4ff; }
.msg-ui-v6-body .msg6-tool-link .msg6-tool-icon { background: #ecfdf5; }
.msg-ui-v6-body .msg6-tool-notice .msg6-tool-icon { background: #f5f3ff; }
.msg-ui-v6-body .msg6-tool-files .msg6-tool-icon { background: #fff7ed; }
.msg-ui-v6-body .msg6-upcoming-card {
  margin-top: 14px;
  padding: 14px;
  background: linear-gradient(145deg, #eef6ff, #f8fbff);
  border: 1px solid #cfe0ff;
  border-radius: 16px;
}
.msg-ui-v6-body .msg6-upcoming-card small {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
}
.msg-ui-v6-body .msg6-upcoming-card strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 15px;
  color: #0b2d75;
}
.msg-ui-v6-body .msg6-upcoming-card p {
  margin: 0 0 10px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v6-body .msg6-tools-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}
.msg-ui-v6-body .msg6-group-footer-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px 18px;
  background: linear-gradient(90deg, #0f49ff, #2563eb);
  border: none;
  border-radius: 16px;
  color: #fff;
}
.msg-ui-v6-body .msg6-footer-shield {
  font-size: 22px;
  flex-shrink: 0;
}
.msg-ui-v6-body .msg6-group-footer-banner p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.msg-ui-v6-body #msgUiViewGroups .msg6-group-workspace {
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.5fr) minmax(240px, 0.72fr);
}
@media (max-width: 1180px) {
  .msg-ui-v6-body .msg6-group-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-ui-v6-body #msgUiViewGroups .msg6-group-workspace {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  }
  .msg-ui-v6-body .msg6-class-tools {
    display: none;
  }
}
@media (max-width: 768px) {
  .msg-ui-v6-body .msg6-chat-header {
    grid-template-columns: auto auto minmax(0, 1fr);
  }
  .msg-ui-v6-body .msg6-chat-header-actions,
  .msg-ui-v7-body .msg7-class-actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-start;
  }
  .msg-ui-v6-body .msg6-btn-zoom,
  .msg-ui-v6-body .msg6-btn-schedule,
  .msg-ui-v7-body .msg7-btn-video,
  .msg-ui-v7-body .msg7-btn-online,
  .msg-ui-v7-body .msg6-btn-schedule {
    flex: 1 1 auto;
    min-width: 0;
  }
  .msg-ui-v6-body .msg6-group-hero,
  .msg-ui-v7-body .msg6-group-hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
}

/* MSG UI v7 — Admin Unified Class + Group Chat (reference layout) */
.msg-ui-v7-body .msg-ui-sidebar {
  background: linear-gradient(180deg, #0b1f4d 0%, #0a1840 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.msg-ui-v7-body .msg-ui-brand-text strong,
.msg-ui-v7-body .msg-ui-nav-label,
.msg-ui-v7-body .msg-ui-sidebar-scope strong,
.msg-ui-v7-body .msg-ui-sidebar-scope small {
  color: #e8f0ff;
}
.msg-ui-v7-body .msg-ui-brand-text small {
  color: #94a3b8;
}
.msg-ui-v7-body .msg-ui-nav-btn {
  color: #cbd5e1;
}
.msg-ui-v7-body .msg-ui-nav-btn.is-active {
  background: rgba(15, 73, 255, 0.35);
  color: #fff;
  border-color: rgba(96, 165, 250, 0.5);
}
.msg-ui-v7-body .msg7-sidebar-guard-card {
  margin: 12px 14px 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(15, 73, 255, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.35);
}
.msg-ui-v7-body .msg7-sidebar-guard-card strong {
  display: block;
  color: #ecfdf5;
  font-size: 12px;
  margin-bottom: 4px;
}
.msg-ui-v7-body .msg7-sidebar-guard-card p {
  margin: 0;
  font-size: 11px;
  color: #bfdbfe;
  line-height: 1.4;
  font-weight: 600;
}
.msg-ui-v7-body .msg7-sidebar-guard-icon {
  font-size: 18px;
}
.msg-ui-v7-body .msg7-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 14px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.msg-ui-v7-body .msg7-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0f49ff;
  color: #fff;
  font-weight: 900;
}
.msg-ui-v7-body .msg7-sidebar-profile-text strong {
  display: block;
  color: #fff;
  font-size: 13px;
}
.msg-ui-v7-body .msg7-sidebar-profile-text small {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
}
.msg-ui-v7-body .msg-ui-back-btn {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-color: rgba(255, 255, 255, 0.15);
}
.msg-ui-v7-body .msg7-school-tag {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid #e2e8f0;
}
.msg-ui-v7-body .msg7-class-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.msg-ui-v7-body .msg7-btn-video,
.msg-ui-v7-body .msg7-btn-online {
  min-height: 38px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.msg-ui-v7-body .msg7-group-card.active {
  border-color: #0f49ff;
  background: linear-gradient(90deg, #eef4ff, #fff 50%);
}
.msg-ui-v7-body .msg7-group-icon {
  border-radius: 14px;
}
.msg-ui-v7-body .msg7-bubble-role {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.85;
  margin-left: 4px;
}
.msg-ui-v7-body #msgUiViewGroups .msg6-group-workspace {
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.5fr) minmax(240px, 0.72fr);
}
@media (max-width: 1180px) {
  .msg-ui-v7-body #msgUiViewGroups .msg6-group-workspace {
    grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.4fr);
  }
  .msg-ui-v7-body .msg6-class-tools {
    display: none;
  }
}
@media (max-width: 1024px) {
  .msg-ui-v7-body #msgUiViewGroups .msg6-group-workspace {
    grid-template-columns: 1fr;
  }
}

/* MSG STEP7 — Direct UI alignment: search width, header actions, compose bar */
.message-body #msgUiViewMessages .msg-ui-direct-filters,
.message-body #msgUiViewMessages .msg1-filter-row.msg-ui-filters,
.message-body #msgUiViewMessages .msg2-chat-filter-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(118px, 0.55fr) minmax(108px, 0.5fr) !important;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
  margin-bottom: 12px;
  align-items: stretch;
}
.message-body #msgUiViewMessages #msg1ContactSearchInput[type="search"],
.message-body #msgUiViewMessages #msg1ContactSearchInput {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box;
}
.message-body #msgUiViewMessages .msg-ui-direct-filters select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.message-body #msgUiViewMessages .msg-ui-chat-list-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.message-body #msgUiViewMessages .msg-ui-contact-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Direct chat room: flex column so thread scrolls and compose stays visible */
.message-body #msg1ConversationPanel.msg-ui-chat-room-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: min(72vh, 720px);
  max-height: calc(100dvh - 240px);
  overflow: hidden !important;
}
.message-body #msg1ConversationPanel .msg8-direct-header,
.message-body #msg1ConversationPanel .msg-ui-room-meta {
  flex: 0 0 auto;
}
.message-body #msg1ConversationPanel .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 140px;
  max-height: none !important;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
}
.message-body #msg1ConversationPanel .msg-ui-compose,
.message-body #msg1ConversationPanel .msg-ui-compose-hint {
  flex: 0 0 auto;
}
.message-body #msg1ConversationPanel .msg-ui-compose {
  display: block !important;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding-bottom: 2px;
  box-sizing: border-box;
}
.message-body #msg1ConversationPanel .msg-ui-compose-box {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #e4edf9;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}
.message-body #msg1ConversationPanel .msg-ui-attach-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid #eef2f7;
  border-radius: 0;
  margin: 0;
}
.message-body #msg1ConversationPanel .msg-ui-attach-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.message-body #msg1ConversationPanel .msg5-attachment-preview {
  flex: 1 1 120px;
  min-width: 0;
  font-size: 11px;
}
.message-body #msg1ConversationPanel .msg-ui-compose-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px;
  align-items: end;
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;
}
.message-body #msg1ConversationPanel #msg1MessageInput {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
  margin: 0;
}
.message-body #msg1ConversationPanel .msg-ui-send-btn {
  min-width: 84px;
  width: auto;
  flex-shrink: 0;
  align-self: end;
}

/* Direct header: user left, actions right, badge on own row */
.message-body #msg1ConversationPanel .msg8-direct-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  background: #fff;
  border: 1px solid #e5edfb;
  border-radius: 18px;
  padding: 12px;
  margin-bottom: 10px;
}
.message-body #msg1ConversationPanel .msg8-direct-header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.message-body #msg1ConversationPanel .msg8-direct-title {
  flex: 1 1 160px;
  min-width: 0;
}
.message-body #msg1ConversationPanel .msg8-direct-title h3 {
  margin: 2px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-body #msg1ConversationPanel .msg8-direct-title p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-body #msg1ConversationPanel .msg8-direct-header-row .msg8-room-actions {
  flex: 0 0 auto;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  max-width: 100%;
}
.message-body #msg1ConversationPanel .msg8-direct-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.message-body #msg1ConversationPanel .msg8-protected-badge {
  margin-left: auto;
  flex-shrink: 0;
}
.message-body #msg1ConversationPanel .msg8-call-btn {
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11px;
  white-space: nowrap;
}
.message-body #msg1ConversationPanel .msg8-call-btn-compact .msg8-call-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.message-body #msg1ConversationPanel .msg8-call-btn-compact {
  min-width: 34px;
  padding: 6px 8px;
}

/* Override legacy msg8 grid crowding */
.msg8-direct-call-body #msg1ConversationPanel .msg8-direct-header.msg3-chat-room-header {
  grid-template-columns: none;
  display: flex;
}

@media (max-width: 1024px) {
  .message-body #msgUiViewMessages .msg-ui-direct-filters,
  .message-body #msgUiViewMessages .msg1-filter-row.msg-ui-filters {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .message-body #msgUiViewMessages #msg1ContactSearchInput {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .message-body #msgUiViewMessages .msg-ui-direct-filters,
  .message-body #msgUiViewMessages .msg1-filter-row.msg-ui-filters {
    grid-template-columns: 1fr !important;
  }
  .message-body #msg1ConversationPanel .msg8-direct-header-row .msg8-room-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .message-body #msg1ConversationPanel .msg8-direct-title h3,
  .message-body #msg1ConversationPanel .msg8-direct-title p {
    white-space: normal;
  }
  .message-body #msg1ConversationPanel .msg8-call-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .message-body #msg1ConversationPanel .msg8-call-btn {
    min-width: 40px;
    padding: 6px 9px;
  }
  .message-body #msg1ConversationPanel .msg8-protected-badge {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .message-body #msgUiViewMessages,
  .message-body #msgUiViewMessages .msg-ui-chat-workspace {
    overflow-x: hidden;
    max-width: 100%;
  }
  .message-body #msg1ConversationPanel .msg-ui-compose-row {
    grid-template-columns: 1fr !important;
  }
  .message-body #msg1ConversationPanel .msg-ui-send-btn {
    width: 100%;
  }
}
/* End MSG STEP7 Direct UI alignment */

/* MSG STEP8 — Class / Grade Chat UI match reference */
.msg-ui-v8-body .msg-ui-sidebar {
  background: linear-gradient(180deg, #0a1931 0%, #071428 100%) !important;
}
.msg-ui-v8-body #msgUiViewGroups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.msg-ui-v8-body .msg8-group-page-header {
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
.msg-ui-v8-body .msg8-page-title-row {
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.msg-ui-v8-body .msg8-page-title-row h2 {
  margin: 0;
  font-size: 22px;
  color: #0b2d75;
}
.msg-ui-v8-body .msg8-badge-protected {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
}
.msg-ui-v8-body .msg8-grade-badge {
  background: #0f49ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}
.msg-ui-v8-body .msg8-group-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f0f6ff 0%, #fafcff 55%, #fff 100%);
  border: 1px solid #cfe0ff;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 73, 255, 0.08);
}
.msg-ui-v8-body .msg8-group-hero-icon-wrap {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.msg-ui-v8-body .msg8-group-hero-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #0f49ff, #4f46e5);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(15, 73, 255, 0.25);
}
.msg-ui-v8-body .msg8-hero-icon-label {
  font-size: 11px;
  font-weight: 800;
  color: #0f49ff;
}
.msg-ui-v8-body .msg8-group-hero-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0 0 12px;
}
.msg-ui-v8-body .msg8-group-hero-meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 800;
}
.msg-ui-v8-body .msg8-group-hero-meta dd {
  margin: 3px 0 0;
  font-size: 14px;
  font-weight: 800;
  color: #0b2d75;
}
.msg-ui-v8-body .msg8-group-hero-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  font-weight: 600;
}
.msg-ui-v8-body .msg8-group-workspace {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.55fr) minmax(250px, 0.72fr);
  gap: 14px;
  align-items: stretch;
  min-width: 0;
}
.msg-ui-v8-body .msg8-group-list-panel,
.msg-ui-v8-body .msg8-group-room,
.msg-ui-v8-body .msg8-class-tools {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 520px;
  max-height: calc(100dvh - 320px);
  overflow: hidden;
}
.msg-ui-v8-body .msg8-group-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.msg-ui-v8-body .msg8-group-card {
  border-radius: 14px !important;
}
.msg-ui-v8-body .msg8-group-card.active {
  border-color: #0f49ff !important;
  background: linear-gradient(90deg, #eef4ff, #fff 48%) !important;
  box-shadow: 0 0 0 2px rgba(15, 73, 255, 0.12) !important;
}
.msg-ui-v8-body .msg8-group-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 14px !important;
  font-size: 20px !important;
}
.msg-ui-v8-body .msg8-tone-grade1 .msg8-group-icon { background: #dbeafe; }
.msg-ui-v8-body .msg8-tone-grade2 .msg8-group-icon { background: #dcfce7; }
.msg-ui-v8-body .msg8-tone-grade3 .msg8-group-icon { background: #fef3c7; }
.msg-ui-v8-body .msg8-tone-science .msg8-group-icon { background: #ede9fe; }
.msg-ui-v8-body .msg8-tone-math .msg8-group-icon { background: #ffedd5; }
.msg-ui-v8-body .msg8-tone-announce .msg8-group-icon { background: #fce7f3; }
.msg-ui-v8-body .msg8-tone-group .msg8-group-icon,
.msg-ui-v8-body .msg8-tone-class .msg8-group-icon { background: #eef4ff; }
.msg-ui-v8-body .msg-ui-group-list-type {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin: 2px 0 4px;
}
.msg-ui-v8-body .msg8-group-room {
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 18px;
}
.msg-ui-v8-body .msg8-group-room-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #eef2f7;
  flex-shrink: 0;
}
.msg-ui-v8-body .msg8-group-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.msg-ui-v8-body .msg8-group-room-title {
  flex: 1 1 180px;
  min-width: 0;
}
.msg-ui-v8-body .msg8-group-room-title h3 {
  margin: 0;
  font-size: 17px;
  color: #0b2d75;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ui-v8-body .msg8-group-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.msg-ui-v8-body .msg8-btn-start-video {
  white-space: nowrap;
}
.msg-ui-v8-body .msg8-btn-open-online,
.msg-ui-v8-body .msg8-btn-schedule {
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dbe7fb;
  color: #0f49ff;
}
.msg-ui-v8-body .msg8-btn-more {
  width: 38px;
  height: 38px;
  border: 1px solid #dbe7fb;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}
.msg-ui-v8-body .msg8-room-protected {
  align-self: flex-start;
  margin-left: auto;
}
.msg-ui-v8-body .msg8-members-block {
  flex-shrink: 0;
  padding: 8px 14px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.msg-ui-v8-body .msg8-members-head strong {
  font-size: 13px;
  color: #0b2d75;
}
.msg-ui-v8-body .msg8-members-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 0 8px;
  scrollbar-width: none;
}
.msg-ui-v8-body .msg8-members-row::-webkit-scrollbar {
  display: none;
}
.msg-ui-v8-body .msg8-member-chip {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 72px;
  max-width: 92px;
}
.msg-ui-v8-body .msg8-member-avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eef4ff;
  color: #0f49ff;
  font-weight: 900;
  font-size: 14px;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.msg-ui-v8-body .msg8-member-online {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid #fff;
}
.msg-ui-v8-body .msg8-member-chip strong {
  font-size: 10px;
  color: #0b2d75;
  text-align: center;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ui-v8-body .msg8-member-chip small {
  font-size: 9px;
  color: #64748b;
  font-weight: 700;
}
.msg-ui-v8-body .msg8-member-more {
  align-self: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.msg-ui-v8-body .msg8-group-room .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 200px;
  overflow-y: auto;
  background: #eef2f7;
  margin: 0;
  border-radius: 0;
}
.msg-ui-v8-body .msg8-group-room .msg-ui-compose {
  flex-shrink: 0;
  margin: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid #eef2f7;
  background: #fff;
}
.msg-ui-v8-body .msg8-class-tools {
  padding: 16px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 18px;
}
.msg-ui-v8-body .msg8-class-tools h4 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #0b2d75;
}
.msg-ui-v8-body .msg8-tool-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  margin-bottom: 8px;
}
.msg-ui-v8-body .msg8-tool-card strong {
  display: block;
  font-size: 13px;
  color: #0b2d75;
}
.msg-ui-v8-body .msg8-tool-card small {
  display: block;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
  font-weight: 600;
}
.msg-ui-v8-body .msg8-tool-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.msg-ui-v8-body .msg8-tool-video .msg8-tool-icon { background: #eef4ff; }
.msg-ui-v8-body .msg8-tool-link .msg8-tool-icon { background: #ecfdf5; }
.msg-ui-v8-body .msg8-tool-notice .msg8-tool-icon { background: #f5f3ff; }
.msg-ui-v8-body .msg8-tool-files .msg8-tool-icon { background: #fff7ed; }
.msg-ui-v8-body .msg8-upcoming-card {
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(145deg, #eef6ff, #f8fbff);
  border: 1px solid #cfe0ff;
}
.msg-ui-v8-body .msg8-view-schedule-btn {
  width: 100%;
  margin-top: 4px;
}
.msg-ui-v8-body .msg8-group-footer-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, #eef6ff, #f8fbff);
  border: 1px solid #cfe0ff;
}
.msg-ui-v8-body .msg8-group-footer-banner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
  font-weight: 600;
}
.msg-ui-v8-body .msg4-group-filter-row {
  grid-template-columns: minmax(0, 1fr) 140px !important;
}

@media (max-width: 1180px) {
  .msg-ui-v8-body .msg8-group-workspace {
    grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.4fr);
  }
  .msg-ui-v8-body .msg8-class-tools {
    display: none;
  }
  .msg-ui-v8-body .msg8-group-hero-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1024px) {
  .msg-ui-v8-body .msg8-group-workspace {
    grid-template-columns: 1fr;
    max-height: none;
  }
  .msg-ui-v8-body .msg8-group-list-panel,
  .msg-ui-v8-body .msg8-group-room {
    min-height: auto;
    max-height: none;
  }
  .msg-ui-v8-body .msg8-class-tools {
    display: flex;
    max-height: none;
    min-height: auto;
  }
}
@media (max-width: 768px) {
  .msg-ui-v8-body .msg8-group-header-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
  .msg-ui-v8-body .msg8-group-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 430px) {
  .msg-ui-v8-body #msgUiViewGroups {
    overflow-x: hidden;
  }
  .msg-ui-v8-body .msg8-btn-start-video,
  .msg-ui-v8-body .msg8-btn-open-online,
  .msg-ui-v8-body .msg8-btn-schedule {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    padding: 8px 10px;
  }
}
/* End MSG STEP8 */

/* MSG STEP9 — Admin Video Class UI match reference */
.msg9-video-tab-active #msg1MessageSchoolScopePanel {
  display: none;
}
.msg-ui-v9-body.msg9-video-tab-active .msg-ui-nav-btn[data-msg-nav="video"] {
  background: linear-gradient(90deg, #0f49ff, #3b82f6);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 73, 255, 0.35);
}
.msg-ui-v9-body .msg9-video-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.msg-ui-v9-body .msg9-video-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
}
.msg-ui-v9-body .msg9-page-title-row h2 {
  margin: 0;
  font-size: 24px;
  color: #0b2d75;
  display: flex;
  align-items: center;
  gap: 8px;
}
.msg-ui-v9-body .msg9-badge-protected {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 10px;
  border-radius: 999px;
}
.msg-ui-v9-body .msg9-grade-badge {
  background: #0f49ff;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
}
.msg-ui-v9-body .msg9-video-subtitle {
  margin: 8px 0 0;
  font-size: 13px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v9-body .msg9-video-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.msg-ui-v9-body .msg9-stat-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  min-width: 0;
}
.msg-ui-v9-body .msg9-stat-card small {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 800;
}
.msg-ui-v9-body .msg9-stat-card strong {
  display: block;
  font-size: 18px;
  color: #0b2d75;
  margin-top: 2px;
}
.msg-ui-v9-body .msg9-stat-card em {
  font-size: 10px;
  color: #64748b;
  font-style: normal;
  font-weight: 700;
}
.msg-ui-v9-body .msg9-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.msg-ui-v9-body .msg9-stat-live .msg9-stat-icon { background: #ede9fe; }
.msg-ui-v9-body .msg9-stat-upcoming .msg9-stat-icon { background: #dcfce7; }
.msg-ui-v9-body .msg9-stat-participants .msg9-stat-icon { background: #ffedd5; }
.msg-ui-v9-body .msg9-stat-total .msg9-stat-icon { background: #dbeafe; }
.msg-ui-v9-body .msg9-stat-recordings .msg9-stat-icon { background: #fce7f3; }
.msg-ui-v9-body .msg9-stat-school .msg9-stat-icon { background: #f3e8ff; }
.msg-ui-v9-body .msg9-video-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
  gap: 14px;
  align-items: start;
}
.msg-ui-v9-body .msg9-video-center {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.msg-ui-v9-body .msg9-live-section,
.msg-ui-v9-body .msg9-upcoming-section {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
}
.msg-ui-v9-body .msg9-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.msg-ui-v9-body .msg9-section-head h3 {
  margin: 0;
  font-size: 17px;
  color: #0b2d75;
}
.msg-ui-v9-body .msg9-count-paren {
  font-weight: 700;
  color: #64748b;
}
.msg-ui-v9-body .msg9-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 10px;
  font-weight: 900;
}
.msg-ui-v9-body .msg9-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: msg9-pulse 1.2s ease-in-out infinite;
}
@keyframes msg9-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.msg-ui-v9-body .msg9-live-list {
  display: grid;
  gap: 12px;
}
.msg-ui-v9-body .msg9-live-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: linear-gradient(90deg, #fafcff, #fff);
}
.msg-ui-v9-body .msg9-live-card-main {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.msg-ui-v9-body .msg9-live-avatar,
.msg-ui-v9-body .msg9-table-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef4ff;
  color: #0f49ff;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.msg-ui-v9-body .msg9-live-card strong {
  display: block;
  color: #0b2d75;
  font-size: 15px;
}
.msg-ui-v9-body .msg9-live-teacher,
.msg-ui-v9-body .msg9-live-meta {
  display: block;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v9-body .msg9-live-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.msg-ui-v9-body .msg9-more-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #dbe7fb;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}
.msg-ui-v9-body .msg9-upcoming-table-wrap {
  overflow-x: auto;
}
.msg-ui-v9-body .msg9-upcoming-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.msg-ui-v9-body .msg9-upcoming-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  border-bottom: 1px solid #eef2f7;
}
.msg-ui-v9-body .msg9-upcoming-table td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-weight: 600;
  vertical-align: middle;
}
.msg-ui-v9-body .msg9-table-class,
.msg-ui-v9-body .msg9-table-teacher {
  display: flex;
  align-items: center;
  gap: 10px;
}
.msg-ui-v9-body .msg9-table-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #eef4ff;
  display: grid;
  place-items: center;
}
.msg-ui-v9-body .msg9-table-join {
  border: none;
  background: none;
  color: #0f49ff;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
}
.msg-ui-v9-body .msg9-upcoming-empty {
  margin: 12px 0 0;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
}
.msg-ui-v9-body .msg9-video-footer-note {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px dashed #cfe0ff;
}
.msg-ui-v9-body .msg9-video-footer-note p {
  margin: 0;
  font-size: 12px;
  color: #475569;
  font-weight: 700;
}
.msg-ui-v9-body .msg9-video-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.msg-ui-v9-body .msg9-quick-actions {
  display: grid;
  gap: 10px;
}
.msg-ui-v9-body .msg9-quick-btn {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: start;
  text-align: left;
  padding: 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #fff;
}
.msg-ui-v9-body .msg9-quick-btn span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.msg-ui-v9-body .msg9-quick-btn strong {
  display: block;
  font-size: 14px;
}
.msg-ui-v9-body .msg9-quick-btn small {
  display: block;
  font-size: 11px;
  opacity: 0.9;
  font-weight: 600;
}
.msg-ui-v9-body .msg9-quick-start { background: linear-gradient(135deg, #0f49ff, #3b82f6); }
.msg-ui-v9-body .msg9-quick-open { background: linear-gradient(135deg, #059669, #10b981); }
.msg-ui-v9-body .msg9-quick-schedule { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.msg-ui-v9-body .msg9-quick-recordings { background: linear-gradient(135deg, #ea580c, #f97316); }
.msg-ui-v9-body .msg9-today-panel {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e4eaf4;
  border-radius: 16px;
}
.msg-ui-v9-body .msg9-today-panel h4 {
  margin: 0 0 12px;
  font-size: 15px;
  color: #0b2d75;
}
.msg-ui-v9-body .msg9-today-timeline {
  display: grid;
  gap: 10px;
}
.msg-ui-v9-body .msg9-timeline-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}
.msg-ui-v9-body .msg9-timeline-item time {
  font-size: 12px;
  font-weight: 800;
  color: #0f49ff;
}
.msg-ui-v9-body .msg9-timeline-item.is-live strong {
  color: #0b2d75;
}
.msg-ui-v9-body .msg9-timeline-empty {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}
.msg-ui-v9-body .msg9-tip-box {
  display: flex;
  gap: 10px;
  padding: 14px;
  background: linear-gradient(135deg, #eef6ff, #f8fbff);
  border: 1px solid #cfe0ff;
  border-radius: 14px;
}
.msg-ui-v9-body .msg9-tip-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
  font-weight: 600;
}

@media (max-width: 1180px) {
  .msg-ui-v9-body .msg9-video-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .msg-ui-v9-body .msg9-video-main-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .msg-ui-v9-body .msg9-video-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-ui-v9-body .msg9-live-card {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 430px) {
  .msg-ui-v9-body #msgUiViewVideo {
    overflow-x: hidden;
  }
  .msg-ui-v9-body .msg9-video-stats {
    grid-template-columns: 1fr;
  }
  .msg-ui-v9-body .msg9-quick-btn {
    grid-template-columns: 36px 1fr;
  }
}
/* End MSG STEP9 */

/* MSG STU — Student Chat List UI (reference) */
.msg-stu-body .msg-stu-nav-default {
  display: none !important;
}
.msg-stu-body .msg-stu-sidebar-nav {
  display: grid !important;
  gap: 4px;
}
.msg-stu-body .msg-stu-sidebar-nav[hidden] {
  display: grid !important;
}
.msg-stu-body .msg-stu-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.msg-stu-body .msg-stu-nav-btn.is-active {
  background: linear-gradient(90deg, #15803d, #16a34a);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}
.msg-stu-body .msg-stu-nav-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 8px 0;
}
.msg-stu-body .msg-stu-guard-text-default {
  display: none;
}
.msg-stu-body .msg-stu-guard-text {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #94a3b8;
  font-weight: 600;
}
.msg-stu-body #msg1MessageSchoolScopePanel,
.msg-stu-body #msgUiInfoPanel,
.msg-stu-body .msg-stu-filters-default,
.msg-stu-body .msg-stu-list-head-default {
  display: none !important;
}
.msg-stu-body .msg-ui-topbar .msg-ui-title-row h1 {
  font-size: 0;
}
.msg-stu-body .msg-ui-topbar .msg-ui-title-row h1::after {
  content: 'Messages';
  font-size: 22px;
}
.msg-stu-body #msgUiViewMessages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg-stu-body .msg-stu-page-header {
  padding: 8px 4px 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
.msg-stu-body .msg-stu-page-header h2 {
  margin: 0;
  font-size: 28px;
  color: #0b2d75;
}
.msg-stu-body .msg-stu-page-header p {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}
.msg-stu-body .msg-stu-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.msg-stu-body .msg-stu-pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.msg-stu-body .msg-stu-pill.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.msg-stu-body .msg-stu-pill-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  background: #16a34a;
  vertical-align: middle;
}
.msg-stu-body .msg-stu-pill.is-active .msg-stu-pill-dot {
  background: #fff;
}
.msg-stu-body .msg-ui-chat-workspace {
  grid-template-columns: 1fr !important;
}
.msg-stu-body.msg-stu-chat-open .msg-ui-chat-workspace {
  grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.15fr) !important;
}
.msg-stu-body .msg-ui-chat-list-panel {
  border-radius: 16px;
  border: 1px solid #e8eef5;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.msg-stu-body .msg1-contact-list,
.msg-stu-body .msg2-chat-list {
  display: grid;
  gap: 10px;
  padding: 8px;
}
.msg-stu-body .msg-stu-chat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}
.msg-stu-body .msg-stu-chat-card:hover,
.msg-stu-body .msg-stu-chat-card.active {
  border-color: #bbf7d0;
  background: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}
.msg-stu-body .msg-stu-chat-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #16a34a;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.msg-stu-body .msg-stu-chat-icon {
  font-size: 22px;
}
.msg-stu-body .msg-stu-chat-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.msg-stu-body .msg-stu-chat-top strong {
  font-size: 15px;
  color: #0b2d75;
}
.msg-stu-body .msg-stu-role-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.msg-stu-body .msg-stu-badge-teacher,
.msg-stu-body .msg-stu-badge-parent {
  background: #ede9fe;
  color: #6d28d9;
}
.msg-stu-body .msg-stu-badge-class-teacher {
  background: #1e3a8a;
  color: #fff;
}
.msg-stu-body .msg-stu-badge-subject-teacher {
  background: #0ea5e9;
  color: #fff;
}
.msg-stu-body .msg-stu-badge-driver {
  background: #fef3c7;
  color: #92400e;
}
.msg-stu-body .msg-stu-badge-hostel-manager {
  background: #fce7f3;
  color: #9d174d;
}
.msg-stu-body .msg-stu-class-chip {
  font-size: 0.62rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}
.msg-stu-body .msg-stu-badge-admin,
.msg-stu-body .msg-stu-badge-zoom {
  background: #dcfce7;
  color: #166534;
}
.msg-stu-body .msg-stu-badge-group {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.msg-stu-body .msg-stu-chat-preview {
  display: block;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-stu-body .msg-stu-chat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.msg-stu-body .msg-stu-protected-chip {
  font-size: 10px;
  font-weight: 800;
  color: #047857;
  background: #ecfdf5;
  padding: 3px 8px;
  border-radius: 999px;
}
.msg-stu-body .msg-stu-schoolid-chip {
  font-size: 10px;
  font-weight: 800;
  color: #166534;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f0fdf4;
}
.msg-stu-body .msg-stu-chat-side {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 72px;
}
.msg-stu-body .msg-stu-chat-side time {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 700;
}
.msg-stu-body .msg-stu-unread-badge {
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.msg-stu-body .msg-stu-chevron {
  font-size: 18px;
  color: #94a3b8;
  font-weight: 900;
}
.msg-stu-body .msg-stu-list-footer {
  margin: 4px 12px 10px;
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
}
.msg-stu-body #msgUiViewMessages:not(.is-active) .msg-stu-page-header,
.msg-stu-body #msgUiViewMessages:not(.is-active) .msg-stu-filter-pills {
  display: none !important;
}
@media (max-width: 768px) {
  .msg-stu-body .msg-ui-conversation-panel,
  .msg-stu-body #msg1ConversationPanel {
    display: none;
  }
  .msg-stu-body.msg-stu-chat-open .msg-ui-conversation-panel,
  .msg-stu-body.msg-stu-chat-open #msg1ConversationPanel {
    display: flex;
  }
  .msg-stu-body.msg-stu-chat-open .msg-ui-chat-list-panel {
    display: none;
  }
}
@media (max-width: 430px) {
  .msg-stu-body #msgUiViewMessages {
    overflow-x: hidden;
  }
  .msg-stu-body .msg-stu-chat-card {
    grid-template-columns: auto 1fr;
  }
  .msg-stu-body .msg-stu-chat-side {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    justify-content: flex-end;
    display: flex;
    gap: 8px;
    width: 100%;
  }
}

/* Student Chat List — room panel green accents (message.html) */
.msg-stu-body .msg-stu-filter-pills .msg-stu-pill:focus-visible,
.msg-stu-body .msg-ui-filters input:focus,
.msg-stu-body .msg2-chat-filter-row input:focus,
.msg-stu-body #msg1MessageInput:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18) !important;
  outline: none;
}
.msg-stu-body .msg-stu-chat-avatar .msg-ui-contact-avatar,
.msg-stu-body .msg-stu-chat-avatar .msg2-contact-avatar,
.msg-stu-body .msg-stu-chat-avatar .msg1-contact-avatar,
.msg-stu-body .msg3-room-avatar,
.msg-stu-body .msg3-room-avatar-inner {
  background: #16a34a !important;
  color: #fff !important;
}
.msg-stu-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-stu-body.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-stu-body.msg-ui-v5-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: #16a34a !important;
  background-image: none !important;
  border-color: #15803d !important;
  color: #fff !important;
}
.msg-stu-body .msg-ui-bubble-row.mine .msg-ui-bubble-text,
.msg-stu-body .msg-ui-bubble-row.mine .msg-ui-bubble-head,
.msg-stu-body .msg-ui-bubble-row.mine .msg-ui-bubble-time {
  color: #fff !important;
}
.msg-stu-body .msg-ui-send-btn,
.msg-stu-body .msg1-send-form button,
.msg-stu-body #msg1SendForm .msg-ui-send-btn {
  background: #16a34a !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
.msg-stu-body .msg-ui-send-btn:hover:not(:disabled),
.msg-stu-body .msg1-send-form button:hover:not(:disabled) {
  background: #15803d !important;
}
.msg-stu-body .msg-ui-contact-card.active,
.msg-stu-body .msg2-contact-card.active {
  border-color: #bbf7d0 !important;
  background: linear-gradient(90deg, #f0fdf4 0%, #fff 48%) !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12) !important;
}
/* End MSG STU */

/* Role dashboard — Message Chat List shortcut */
.bs-dashboard-chat-shortcut {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 9000;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  min-height: 56px;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(30, 58, 138, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bs-dashboard-chat-shortcut:hover,
.bs-dashboard-chat-shortcut:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(30, 58, 138, 0.45);
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
.bs-dashboard-chat-shortcut-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.bs-dashboard-chat-shortcut-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
  max-width: 52px;
  text-align: center;
}
.bs-dashboard-chat-shortcut-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.bs-dashboard-chat-shortcut-badge[hidden] {
  display: none !important;
}
body.teacher-force-password-active .bs-dashboard-chat-shortcut,
body.student-force-password-active .bs-dashboard-chat-shortcut,
body.parent-force-password-active .bs-dashboard-chat-shortcut,
body.driver-force-password-active .bs-dashboard-chat-shortcut {
  pointer-events: none;
  opacity: 0.35;
}
@media (max-width: 768px) {
  .bs-dashboard-chat-shortcut {
    right: 14px;
    bottom: 18px;
    width: 52px;
    min-height: 52px;
  }
  .bs-dashboard-chat-shortcut-label {
    font-size: 0.5rem;
  }
}
@media (max-width: 430px) {
  .bs-dashboard-chat-shortcut {
    right: 12px;
    bottom: 14px;
    width: 48px;
    min-height: 48px;
    padding: 6px 4px;
  }
  .bs-dashboard-chat-shortcut-icon {
    font-size: 1.1rem;
  }
}
/* End role dashboard chat shortcut */

/* Admin Dashboard — floating Admin Chat List icon (green, Admin only) */
.bs-admin-floating-chat-icon {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9050;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.38);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bs-admin-floating-chat-icon:hover,
.bs-admin-floating-chat-icon:focus-visible {
  background: #15803d;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(21, 128, 61, 0.45);
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
}
.bs-admin-floating-chat-icon-symbol {
  font-size: 1.35rem;
  line-height: 1;
}
.bs-admin-floating-chat-icon-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.bs-admin-floating-chat-icon-badge[hidden] {
  display: none !important;
}
body.admin-force-password-active .bs-admin-floating-chat-icon {
  pointer-events: none;
  opacity: 0.35;
}
@media (max-width: 768px) {
  .bs-admin-floating-chat-icon {
    right: 18px;
    bottom: 18px;
    width: 52px;
    height: 52px;
  }
  .bs-admin-floating-chat-icon-symbol {
    font-size: 1.2rem;
  }
}
@media (max-width: 430px) {
  .bs-admin-floating-chat-icon {
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }
  .bs-admin-floating-chat-icon-symbol {
    font-size: 1.1rem;
  }
}

/* BrightStar Message — Chat List logo icon (all roles) */
.bs-chat-logo-fab.bs-dashboard-chat-shortcut,
.bs-chat-logo-fab.bs-admin-floating-chat-icon {
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #bbf7d0;
  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.22);
  color: inherit;
}
.bs-chat-logo-fab.bs-dashboard-chat-shortcut:hover,
.bs-chat-logo-fab.bs-dashboard-chat-shortcut:focus-visible,
.bs-chat-logo-fab.bs-admin-floating-chat-icon:hover,
.bs-chat-logo-fab.bs-admin-floating-chat-icon:focus-visible {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(22, 163, 74, 0.28);
  outline: 2px solid rgba(22, 163, 74, 0.35);
  outline-offset: 2px;
}
.bs-chat-logo-fab .bs-dashboard-chat-shortcut-label,
.bs-chat-logo-fab .bs-admin-floating-chat-icon-symbol {
  display: none !important;
}
.bs-chat-logo-fab-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}
.bs-chat-logo-img {
  width: 86%;
  height: 86%;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  display: block;
  margin: auto;
  pointer-events: none;
}
.bs-chat-logo-fallback {
  display: none;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #15803d;
  line-height: 1;
}
.is-logo-fallback .bs-chat-logo-img {
  display: none !important;
}
.is-logo-fallback .bs-chat-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-chat-logo-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(22, 163, 74, 0.12);
  flex-shrink: 0;
  overflow: hidden;
  vertical-align: middle;
}
.bs-chat-logo-menu .bs-chat-logo-img {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
}
.bs-chat-logo-menu .bs-chat-logo-fallback {
  font-size: 0.55rem;
}
.bs-chat-logo-module {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #bbf7d0;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.14);
  overflow: hidden;
  vertical-align: middle;
  margin-right: 8px;
}
.bs-chat-logo-module .bs-chat-logo-img {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
}
.msg-ui-brand-mark.bs-chat-logo-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #bbf7d0;
  overflow: hidden;
  padding: 0;
  font-size: 0;
}
.msg-ui-brand-mark.bs-chat-logo-brand .bs-chat-logo-img {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
}
.msg-ui-nav-btn .bs-chat-logo-menu {
  width: 28px;
  height: 28px;
}
.msg-ui-nav-btn .bs-chat-logo-menu .bs-chat-logo-img {
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}
@media (max-width: 768px) {
  .bs-chat-logo-fab.bs-dashboard-chat-shortcut,
  .bs-chat-logo-fab.bs-admin-floating-chat-icon {
    width: 52px;
    height: 52px;
    min-height: 52px;
  }
}
@media (max-width: 430px) {
  .bs-chat-logo-fab.bs-dashboard-chat-shortcut,
  .bs-chat-logo-fab.bs-admin-floating-chat-icon {
    width: 48px;
    height: 48px;
    min-height: 48px;
  }
  .bs-chat-logo-img {
    max-width: 40px;
    max-height: 40px;
  }
}
/* End Chat List logo icon */
/* End Admin floating chat icon */

/* Floating Messenger-style chat widget (role dashboards) */
.bs-fcw-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bs-fcw-overlay[hidden] {
  display: none !important;
}
body.bs-fcw-open {
  overflow: hidden;
}
.bs-fcw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.bs-fcw-panel {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  height: min(680px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
  overflow: hidden;
  pointer-events: auto;
}
.bs-fcw-overlay:not([hidden]) .bs-fcw-panel,
.bs-fcw-overlay:not([hidden]) .bs-fcw-panel button,
.bs-fcw-overlay:not([hidden]) .bs-fcw-panel input,
.bs-fcw-overlay:not([hidden]) .bs-fcw-panel textarea,
.bs-fcw-overlay:not([hidden]) .bs-fcw-panel select {
  pointer-events: auto;
}
.bs-fcw-panel.bs-fcw-is-minimized {
  height: auto;
  max-height: 56px;
  overflow: hidden;
}
.bs-fcw-panel.bs-fcw-is-minimized .bs-fcw-body,
.bs-fcw-panel.bs-fcw-is-minimized .bs-fcw-footer {
  display: none;
}
.bs-fcw-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  color: #fff;
  flex-shrink: 0;
}
.bs-fcw-topbar-main {
  flex: 1 1 auto;
  min-width: 0;
}
.bs-fcw-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-fcw-subtitle {
  margin: 4px 0 0;
  font-size: 0.72rem;
  opacity: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-fcw-topbar-actions {
  display: flex;
  gap: 6px;
}
.bs-fcw-icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.bs-fcw-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
}
.bs-fcw-list-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid #e8eef5;
  background: #f8fafc;
}
.bs-fcw-search-wrap {
  padding: 10px 12px 0;
  flex-shrink: 0;
}
.bs-fcw-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  font-size: 0.85rem;
}
.bs-fcw-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: linear-gradient(135deg, rgba(239, 246, 255, 0.96) 0%, rgba(245, 243, 255, 0.96) 52%, rgba(255, 247, 237, 0.96) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.bs-fcw-filters::-webkit-scrollbar {
  display: none;
}
.bs-fcw-filter-tab {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 34px;
  font-size: 0.74rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.82);
  color: #475569;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.bs-fcw-filter-tab:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(96, 165, 250, 0.45);
}
.bs-fcw-filter-tab.is-active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
  transform: translateY(-1px);
}
.bs-fcw-filter-tab--all.is-active {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
}
.bs-fcw-filter-tab--unread.is-active {
  background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.22);
}
.bs-fcw-filter-tab--groups.is-active {
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
  box-shadow: 0 8px 18px rgba(139, 92, 246, 0.24);
}
.bs-fcw-filter-tab--homework.is-active {
  background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
  box-shadow: 0 8px 18px rgba(245, 158, 11, 0.24);
}
.bs-fcw-filter-tab--slips.is-active,
.bs-fcw-filter-tab--bankSlip.is-active {
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
  box-shadow: 0 8px 18px rgba(6, 182, 212, 0.22);
}
.bs-fcw-filter-tab--transport.is-active {
  background: linear-gradient(135deg, #0369a1 0%, #38bdf8 100%);
  box-shadow: 0 8px 18px rgba(56, 189, 248, 0.22);
}
.bs-fcw-filter-tab--attendance.is-active {
  background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.22);
}
.bs-fcw-filter-tab--onlineClass.is-active {
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22);
}
.bs-fcw-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #93c5fd #eef4ff;
  padding: 0 8px 8px;
}
.bs-fcw-list::-webkit-scrollbar {
  width: 8px;
}
.bs-fcw-list::-webkit-scrollbar-track {
  background: #eef4ff;
  border-radius: 999px;
}
.bs-fcw-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd, #60a5fa);
  border-radius: 999px;
  border: 2px solid #eef4ff;
}
.bs-fcw-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
}
.bs-fcw-card {
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: start;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 6px;
  background: #fff;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.bs-fcw-card:hover {
  background: #eff6ff;
}
.bs-fcw-card.is-active {
  background: #dbeafe;
  border-color: #93c5fd;
}
.bs-fcw-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1e40af, #3b82f6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.bs-fcw-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.bs-fcw-card-top strong,
.bs-fcw-card-top .bs-contact-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  flex: 1 1 auto;
  min-width: 0;
}
.bs-fcw-card-top em {
  font-size: 0.68rem;
  color: #94a3b8;
  font-style: normal;
  flex: 0 0 auto;
}
.bs-fcw-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.bs-fcw-badge-role,
.bs-fcw-badge-school,
.bs-fcw-badge-protected,
.bs-school-badge,
.bs-protected-badge {
  font-size: 0.62rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 999px;
}
.bs-fcw-badge-role,
.bs-school-badge {
  background: #f1f5f9;
  color: #94a3b8;
}
.bs-fcw-badge-school {
  background: #f8fafc;
  color: #94a3b8;
}
.bs-fcw-badge-protected,
.bs-protected-badge {
  background: #f0fdf4;
  color: #86b39a;
}
.bs-fcw-card-preview,
.bs-contact-preview {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 400;
  color: #94a3b8;
  line-height: 1.35;
}
/* Unread chat row — bold/highlight only when unread exists */
.bs-fcw-card.is-unread,
.bs-chat-row.is-unread {
  background: #f8fbff;
  border-color: rgba(37, 99, 235, 0.12);
}
.bs-fcw-card.is-unread .bs-fcw-card-top strong,
.bs-fcw-card.is-unread .bs-contact-name,
.bs-chat-row.is-unread .bs-contact-name {
  font-weight: 800;
  color: #020617;
}
.bs-fcw-card.is-unread .bs-fcw-card-preview,
.bs-fcw-card.is-unread .bs-contact-preview,
.bs-chat-row.is-unread .bs-contact-preview {
  font-weight: 600;
  color: #334155;
}
.bs-fcw-card.is-unread .bs-fcw-badge-role,
.bs-fcw-card.is-unread .bs-school-badge,
.bs-chat-row.is-unread .bs-school-badge {
  background: #e0e7ff;
  color: #3730a3;
  font-weight: 600;
}
.bs-fcw-card.is-unread .bs-fcw-badge-school,
.bs-chat-row.is-unread .bs-fcw-badge-school {
  background: #e2e8f0;
  color: #334155;
  font-weight: 600;
}
.bs-fcw-card.is-unread .bs-fcw-badge-protected,
.bs-fcw-card.is-unread .bs-protected-badge,
.bs-chat-row.is-unread .bs-protected-badge {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
}
.bs-fcw-card.is-unread .bs-fcw-card-top em,
.bs-chat-row.is-unread .bs-fcw-card-top em {
  color: #64748b;
  font-weight: 600;
}
.bs-fcw-card-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 20px;
  text-align: center;
}
.bs-fcw-room-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}
.bs-fcw-room-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid #e8eef5;
  flex-shrink: 0;
}
.bs-fcw-back-btn {
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  background: #fff;
  padding: 6px 10px;
  cursor: pointer;
}
.bs-fcw-room-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1d4ed8;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}
.bs-fcw-room-meta {
  flex: 1;
  min-width: 0;
}
.bs-fcw-room-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bs-fcw-room-title-actions {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.bs-fcw-grade-group-header-meeting.is-visible {
  padding: 5px 11px;
  font-size: 0.68rem;
}
.bs-fcw-room-meta strong {
  display: block;
  font-size: 0.92rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.bs-fcw-room-meta small {
  color: #64748b;
  font-size: 0.72rem;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-fcw-room-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.bs-fcw-group-header-online-class {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(100%, 240px);
}
.bs-fcw-group-header-online-class.is-visible {
  display: inline-flex;
}
.bs-fcw-ovc-room-banner {
  display: none;
  width: 100%;
  padding: 10px 12px 0;
  box-sizing: border-box;
  max-width: 100%;
}
.bs-fcw-ovc-room-banner.is-visible {
  display: block;
}
.bs-fcw-ovc-no-active-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-ovc-no-active-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.bs-fcw-ovc-no-active-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.bs-fcw-ovc-no-active-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-ovc-no-active-group-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  margin: 0 0 4px;
  word-break: break-word;
}
.bs-fcw-ovc-no-active-status {
  margin: 0 0 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}
.bs-fcw-ovc-no-active-helper {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #64748b;
}
.bs-fcw-ovc-no-active-create-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.22);
}
.bs-fcw-ovc-no-active-create-btn:hover,
.bs-fcw-ovc-no-active-create-btn:focus-visible {
  filter: brightness(1.04);
}
.bs-fcw-ovc-owner-meeting-header {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-ovc-owner-meeting-group-name {
  display: block;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  margin: 0 0 10px;
  word-break: break-word;
}
.bs-fcw-ovc-owner-meeting-header .bs-fcw-ovc-no-active-create-btn {
  margin-top: 0;
}
.bs-fcw-ovc-join-highlight-card {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 55%, #bbf7d0 100%);
  border: 1px solid #6ee7b7;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.14);
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-ovc-join-highlight-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.bs-fcw-ovc-join-highlight-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #047857;
}
.bs-fcw-ovc-join-highlight-group {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
  margin: 0 0 4px;
  word-break: break-word;
}
.bs-fcw-ovc-join-highlight-host {
  margin: 0 0 10px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #334155;
}
.bs-fcw-ovc-join-highlight-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.22);
}
.bs-fcw-ovc-join-highlight-btn:hover,
.bs-fcw-ovc-join-highlight-btn:focus-visible {
  filter: brightness(1.04);
}
.bs-fcw-ovc-join-highlight-btn.is-busy,
.bs-fcw-ovc-join-highlight-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
.bs-fcw-ovc-active-card {
  background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 55%, #bbf7d0 100%);
  border: 1px solid #6ee7b7;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.14);
  padding: 12px 14px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-ovc-active-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.bs-fcw-ovc-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  background: #059669;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bs-fcw-ovc-active-meeting-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  color: #065f46;
  word-break: break-word;
}
.bs-fcw-ovc-active-meeting-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 10px;
  margin: 0 0 8px;
  padding: 0;
}
.bs-fcw-ovc-active-meeting-meta dt {
  margin: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #047857;
}
.bs-fcw-ovc-active-meeting-meta dd {
  margin: 0 0 4px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #064e3b;
  word-break: break-word;
}
.bs-fcw-ovc-active-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
}
.bs-fcw-ovc-active-join-btn,
.bs-fcw-ovc-active-end-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  min-height: 40px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-sizing: border-box;
}
.bs-fcw-ovc-active-join-btn {
  border: 0;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.24);
}
.bs-fcw-ovc-active-join-btn:hover,
.bs-fcw-ovc-active-join-btn:focus-visible {
  filter: brightness(1.04);
}
.bs-fcw-ovc-active-end-btn {
  border: 1.5px solid #dc2626;
  background: #ffffff;
  color: #dc2626;
}
.bs-fcw-ovc-active-end-btn:hover,
.bs-fcw-ovc-active-end-btn:focus-visible {
  background: #fef2f2;
}
.bs-fcw-ovc-room-header-active-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d1fae5;
  color: #047857;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.bs-ovc-joining-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 55%, #e8f2ff 100%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.bs-ovc-joining-loading-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}
.bs-ovc-joining-loading-overlay[hidden] {
  display: none !important;
}
.bs-ovc-joining-loading-card {
  width: min(100%, 360px);
  text-align: center;
  padding: 28px 22px 24px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.12);
  border: 1px solid #dbeafe;
}
.bs-ovc-joining-loading-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
}
.bs-ovc-joining-loading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  font-size: 1.8rem;
  line-height: 1;
}
.bs-ovc-joining-spinner {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid rgba(37, 99, 235, 0.14);
  border-top-color: #2563eb;
  animation: bs-ovc-joining-spin 0.9s linear infinite;
}
@keyframes bs-ovc-joining-spin {
  to { transform: rotate(360deg); }
}
.bs-ovc-joining-loading-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.bs-ovc-joining-loading-subtitle {
  margin: 0 0 8px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #475569;
}
.bs-ovc-joining-loading-hint {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
}
body.bs-ovc-joining-loading-open {
  overflow: hidden;
}
.bs-fcw-ovc-active-join-btn.is-busy,
.bs-fcw-ovc-active-join-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}
.bs-fcw-group-header-oc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.bs-fcw-group-header-oc-badge.is-live {
  background: #dcfce7;
  color: #15803d;
}
.bs-fcw-group-header-oc-badge.is-available {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-group-header-oc-badge.is-waiting {
  background: #fef3c7;
  color: #b45309;
}
.bs-fcw-group-header-oc-badge.is-ended {
  background: #fee2e2;
  color: #b91c1c;
}
.bs-fcw-group-header-oc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.bs-fcw-group-header-oc-btn:hover,
.bs-fcw-group-header-oc-btn:focus-visible {
  background: linear-gradient(135deg, #047857, #065f46);
}
.bs-fcw-group-header-oc-btn.is-action {
  pointer-events: auto;
  cursor: pointer;
}
.bs-fcw-group-header-oc-btn.is-join-label-only {
  pointer-events: none;
  cursor: default;
}
.bs-fcw-group-header-oc-btn.is-join-label-only:hover,
.bs-fcw-group-header-oc-btn.is-join-label-only:focus-visible {
  background: linear-gradient(135deg, #059669, #047857);
}
.bs-fcw-group-header-oc-status.is-disabled {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .bs-fcw-group-header-online-class {
    max-width: 100%;
    justify-content: flex-end;
  }
  .bs-fcw-group-header-oc-btn,
  .bs-fcw-group-header-oc-status.is-disabled {
    font-size: 0.68rem;
    padding: 6px 10px;
  }
}
.bs-group-join-status-active.bs-fcw-group-header-oc-btn,
.bs-fcw-group-header-online-class-inner.bs-group-join-status-active .bs-fcw-group-header-oc-btn,
.bs-fcw-group-list-join-status.bs-group-join-status-active {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #ffffff;
  border: 1px solid rgba(21, 128, 61, 0.85);
  box-shadow: 0 0 0 1px rgba(187, 247, 208, 0.45), 0 0 14px rgba(34, 197, 94, 0.45);
}
.bs-group-join-status-live.bs-fcw-group-header-oc-btn,
.bs-fcw-group-header-online-class-inner.bs-group-join-status-live .bs-fcw-group-header-oc-btn,
.bs-fcw-group-list-join-status.bs-group-join-status-live {
  animation: bs-group-join-live-glow 1.8s ease-in-out infinite;
}
.bs-group-join-status-ended.bs-fcw-group-header-oc-btn,
.bs-fcw-group-header-online-class-inner.bs-group-join-status-ended .bs-fcw-group-header-oc-btn,
.bs-fcw-group-list-join-status.bs-group-join-status-ended,
.bs-group-join-status-no-active.bs-fcw-group-header-oc-btn,
.bs-fcw-group-header-online-class-inner.bs-group-join-status-no-active .bs-fcw-group-header-oc-btn,
.bs-fcw-group-list-join-status.bs-group-join-status-no-active {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  border: 1px solid rgba(185, 28, 28, 0.85);
  box-shadow: 0 0 0 1px rgba(254, 202, 202, 0.35), 0 0 10px rgba(239, 68, 68, 0.28);
  cursor: default;
}
.bs-group-join-status-upcoming.bs-fcw-group-header-oc-btn,
.bs-fcw-group-header-online-class-inner.bs-group-join-status-upcoming .bs-fcw-group-header-oc-btn,
.bs-fcw-group-list-join-status.bs-group-join-status-upcoming {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
  border: 1px solid rgba(217, 119, 6, 0.85);
  box-shadow: 0 0 0 1px rgba(254, 243, 199, 0.45), 0 0 10px rgba(245, 158, 11, 0.28);
  cursor: default;
}
.bs-ovc-status-no-active {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}
.bs-ovc-status-upcoming {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.bs-ovc-status-active {
  background: #ecfdf5;
  color: #166534;
  border: 1px solid #86efac;
}
.bs-ovc-status-ended {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
.bs-fcw-group-header-oc-btn.is-unavailable {
  opacity: 0.96;
}
.bs-fcw-group-list-create-meeting {
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.bs-fcw-group-list-join-online {
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.bs-fcw-group-list-create-meeting.is-disabled {
  opacity: 0.58;
  cursor: not-allowed;
}
.bs-fcw-group-list-create-meeting .bs-fcw-create-meeting-icon {
  font-size: 0.72rem;
  line-height: 1;
}
.bs-fcw-group-list-join-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}
.bs-fcw-card-wrap--group-oc.is-ovc-meeting-active .bs-fcw-card,
.bs-fcw-card.is-ovc-meeting-active {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #ffffff 100%);
  border: 1.5px solid #34d399;
  box-shadow: 0 0 0 1px rgba(187, 247, 208, 0.55), 0 8px 20px rgba(16, 185, 129, 0.14);
}
.bs-fcw-card-wrap--group-oc.is-ovc-meeting-active .bs-fcw-card .bs-contact-name,
.bs-fcw-card.is-ovc-meeting-active .bs-contact-name {
  color: #065f46;
}
.bs-fcw-card-wrap--group-oc.is-ovc-meeting-active .bs-fcw-card-preview,
.bs-fcw-card.is-ovc-meeting-active .bs-fcw-card-preview {
  color: #047857;
}
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-card-wrap--group-oc.is-ovc-meeting-active .bs-fcw-card,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-card.is-ovc-meeting-active {
  background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(187, 247, 208, 0.65), 0 6px 18px rgba(34, 197, 94, 0.18) !important;
}
.bs-group-join-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}
.bs-group-join-status-active .bs-group-join-live-dot {
  background: #bbf7d0;
  box-shadow: 0 0 8px rgba(187, 247, 208, 0.95);
}
@keyframes bs-group-join-live-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(187, 247, 208, 0.45), 0 0 12px rgba(34, 197, 94, 0.35); }
  50% { box-shadow: 0 0 0 1px rgba(187, 247, 208, 0.65), 0 0 18px rgba(34, 197, 94, 0.55); }
}
.bs-fcw-thread-transport {
  background: #f8fafc;
}
.bs-fcw-student-transport-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.bs-fcw-student-transport-chat-room {
  gap: 16px;
}
.bs-fcw-student-transport-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bs-fcw-student-transport-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-student-transport-section-head h4,
.bs-fcw-student-transport-section-head h5,
.bs-fcw-student-transport-progress-wrap h5,
.bs-fcw-student-transport-updates h5 {
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: #0f172a;
}
.bs-fcw-student-transport-section-head p {
  margin: 2px 0 0;
  font-size: 0.68rem;
  color: #64748b;
}
.bs-fcw-student-transport-trip-wait-note {
  margin: 6px 0 0;
  font-size: 0.68rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 6px 8px;
}

.bs-fcw-driver-transport-student-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bs-fcw-driver-pickup-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  white-space: nowrap;
}
.bs-fcw-driver-pickup-step-badge.is-step-1 {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}
.bs-fcw-driver-pickup-step-badge.is-step-2 {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-pickup-step-badge.is-step-3 {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}
.bs-fcw-driver-pickup-step-badge.is-step-set {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-pickup-step-badge.is-not-set {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #94a3b8;
}
.bs-fcw-driver-pickup-step-row-actions {
  display: flex;
  gap: 4px;
  padding: 0 8px 6px 48px;
}
.bs-fcw-driver-pickup-step-mini {
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #334155;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-driver-pickup-step-mini.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-pickup-order-summary {
  margin: 0 8px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.bs-fcw-driver-pickup-order-summary-head {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  margin-bottom: 6px;
}
.bs-fcw-driver-pickup-order-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}
.bs-fcw-driver-pickup-order-group {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 6px;
  font-size: 0.62rem;
  line-height: 1.35;
}
.bs-fcw-driver-pickup-order-group strong {
  color: #334155;
}
.bs-fcw-driver-pickup-order-group span {
  color: #64748b;
}
.bs-fcw-driver-pickup-order-group.is-empty span {
  color: #94a3b8;
  font-style: italic;
}
.bs-fcw-driver-pickup-step-section {
  gap: 8px;
}
.bs-fcw-driver-pickup-step-selected,
.bs-fcw-driver-pickup-step-date,
.bs-fcw-driver-pickup-step-current {
  margin: 0;
  font-size: 0.72rem;
  color: #475569;
}
.bs-fcw-driver-pickup-step-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-driver-pickup-step-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-driver-pickup-step-btn.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-pickup-step-save-note {
  margin: 0;
  min-height: 1rem;
  font-size: 0.68rem;
  color: #15803d;
  font-weight: 700;
}
.bs-fcw-driver-pickup-step-select-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #334155;
}
.bs-fcw-driver-pickup-step-select {
  width: 100%;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #ffffff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 600;
}
.bs-fcw-driver-pickup-step-apply-btn {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-driver-pickup-start-btn {
  min-width: 52px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #16a34a;
  background: #ecfdf5;
  color: #15803d;
  font-size: 0.62rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.bs-fcw-driver-pickup-start-btn:disabled,
.bs-fcw-driver-pickup-start-disabled {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #94a3b8;
  font-size: 0.58rem;
  font-weight: 700;
  white-space: nowrap;
}
.bs-fcw-driver-pickup-start-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #86efac;
  background: #ecfdf5;
  color: #15803d;
  font-size: 0.58rem;
  font-weight: 800;
  white-space: nowrap;
}
.bs-fcw-driver-pickup-start-badge.is-started {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-pickup-start-badge.is-completed {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}
.bs-fcw-driver-pickup-start-inline {
  display: inline-flex;
  align-items: center;
}
.bs-fcw-driver-pickup-start-section {
  gap: 8px;
}
.bs-fcw-driver-pickup-start-note {
  margin: 0;
  font-size: 0.68rem;
  color: #64748b;
}
.bs-fcw-driver-pickup-order-start-section {
  gap: 10px;
}
.bs-fcw-driver-pickup-order-start-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.bs-fcw-driver-pickup-order-start-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
}
.bs-fcw-driver-pickup-order-start-row.is-empty {
  background: #f8fafc;
  border-style: dashed;
}
.bs-fcw-driver-pickup-order-start-step {
  font-size: 0.62rem;
  font-weight: 800;
  color: #334155;
}
.bs-fcw-driver-pickup-order-start-student strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
}
.bs-fcw-driver-pickup-order-start-student small {
  display: block;
  font-size: 0.58rem;
  color: #64748b;
}
.bs-fcw-student-pickup-step-status-section {
  gap: 10px;
}
.bs-fcw-student-pickup-step-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
  white-space: nowrap;
}
.bs-fcw-student-pickup-step-status-badge.is-started {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-student-pickup-step-status-badge.is-waiting {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}
.bs-fcw-student-pickup-step-status-list {
  display: grid;
  gap: 6px;
  margin: 0;
}
.bs-fcw-student-pickup-step-status-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px;
  font-size: 0.68rem;
  line-height: 1.4;
}
.bs-fcw-student-pickup-step-status-row dt {
  color: #475569;
  font-weight: 700;
}
.bs-fcw-student-pickup-step-status-row dd {
  margin: 0;
  color: #0f172a;
}
.bs-fcw-driver-transport-student-card .bs-fcw-card-top {
  flex-wrap: wrap;
}
.bs-fcw-driver-transport-step-order-name {
  font-size: 0.72rem;
  line-height: 1.35;
}

.bs-fcw-list-section-title.bs-fcw-driver-transport-list-title {
  padding: 10px 12px 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #475569;
}
.bs-fcw-driver-transport-list-empty {
  padding: 12px;
}
.bs-fcw-driver-transport-student-card {
  align-items: flex-start;
  text-align: left;
}
.bs-fcw-driver-transport-student-card .bs-fcw-card-main {
  gap: 3px;
}
.bs-fcw-driver-transport-student-card .bs-fcw-card-top {
  align-items: center;
  gap: 6px;
}
.bs-fcw-driver-transport-student-id,
.bs-fcw-driver-transport-student-grade {
  display: block;
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.3;
}
.bs-fcw-driver-transport-student-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  white-space: nowrap;
}
.bs-fcw-driver-transport-student-badge.is-pickup {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}
.bs-fcw-driver-transport-student-badge.is-dropoff {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-transport-student-badge.is-assigned {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.bs-fcw-driver-transport-student-detail {
  gap: 14px;
}
.bs-fcw-driver-transport-student-detail-list {
  margin: 0;
  padding: 0;
}
.bs-fcw-driver-transport-student-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
  font-size: 0.72rem;
}
.bs-fcw-driver-transport-student-detail-row dt {
  margin: 0;
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-driver-transport-student-detail-row dd {
  margin: 0;
  color: #0f172a;
  font-weight: 600;
}
.bs-fcw-driver-transport-student-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bs-fcw-driver-transport-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.bs-fcw-driver-transport-chat-room {
  gap: 16px;
}
.bs-fcw-driver-transport-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid #bae6fd;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bs-fcw-driver-transport-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-driver-transport-section-head h4,
.bs-fcw-driver-transport-section-head h5,
.bs-fcw-driver-transport-progress-wrap h5,
.bs-fcw-driver-transport-updates h5,
.bs-fcw-driver-transport-student-list-wrap h5 {
  margin: 0 0 8px;
  font-size: 0.84rem;
  color: #0f172a;
}
.bs-fcw-driver-transport-header h3 {
  margin: 0 0 4px;
  font-size: 0.92rem;
  color: #0f172a;
}
.bs-fcw-driver-transport-header p {
  margin: 0;
  font-size: 0.68rem;
  color: #64748b;
}
.bs-fcw-driver-transport-scope {
  margin-top: 4px !important;
  color: #0369a1 !important;
}
.bs-fcw-driver-transport-empty-note {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 0.72rem;
  color: #475569;
}
.bs-fcw-driver-transport-empty-note strong {
  font-weight: 700;
}
.bs-fcw-driver-transport-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-fcw-driver-transport-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #64748b;
  font-size: 0.62rem;
  font-weight: 800;
}
.bs-fcw-driver-transport-status-chip.is-waiting {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}
.bs-fcw-driver-transport-status-chip.is-active {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}
.bs-fcw-driver-transport-status-chip.is-complete {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-transport-status-chip.is-muted {
  opacity: 0.55;
}
.bs-fcw-driver-transport-status-chip.is-eta {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #6d28d9;
}
.bs-fcw-driver-transport-scope-note {
  margin: 0;
  font-size: 0.72rem;
  color: #334155;
  font-weight: 600;
}
.bs-fcw-driver-transport-progress-status {
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: #475569;
}
.bs-fcw-driver-transport-update-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  margin-bottom: 6px;
  font-size: 0.68rem;
}
.bs-fcw-driver-transport-update-item strong {
  display: block;
  color: #0f172a;
  margin-bottom: 2px;
}
.bs-fcw-driver-transport-update-item span {
  display: block;
  color: #475569;
}
.bs-fcw-driver-transport-update-item em {
  display: block;
  margin-top: 4px;
  color: #94a3b8;
  font-style: normal;
  font-size: 0.62rem;
}
.bs-fcw-driver-transport-student-table td strong {
  display: block;
}
.bs-fcw-driver-transport-student-table td small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.62rem;
}
.bs-fcw-driver-transport-map-marker-card span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: #334155;
}
.bs-fcw-driver-transport-map-shell {
  border: 1px solid #dbeafe;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #f0f9ff 0%, #ecfeff 100%);
}
.bs-fcw-driver-transport-map-canvas {
  position: relative;
  min-height: 280px;
  padding: 16px;
}
.bs-fcw-driver-transport-live-map.is-expanded .bs-fcw-driver-transport-map-canvas {
  min-height: 420px;
}
.bs-fcw-driver-transport-map-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.bs-fcw-driver-transport-map-route-line {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 48%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #2563eb, #ef4444);
  opacity: 0.45;
}
.bs-fcw-driver-transport-map-marker {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 42%;
}
.bs-fcw-driver-transport-map-marker.is-pickup {
  left: 8%;
  top: 18%;
}
.bs-fcw-driver-transport-map-marker.is-dropoff {
  right: 8%;
  bottom: 16%;
  flex-direction: row-reverse;
  text-align: right;
}
.bs-fcw-driver-transport-map-marker.is-vehicle {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  max-width: min(220px, 72%);
  text-align: center;
}
.bs-fcw-driver-transport-map-marker-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #16a34a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}
.bs-fcw-driver-transport-map-marker.is-vehicle .bs-fcw-driver-transport-map-marker-dot {
  background: #2563eb;
}
.bs-fcw-driver-transport-map-marker.is-dropoff .bs-fcw-driver-transport-map-marker-dot {
  background: #dc2626;
}
.bs-fcw-driver-transport-map-marker-card {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.bs-fcw-driver-transport-map-marker-card small {
  display: block;
  font-size: 0.58rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}
.bs-fcw-driver-transport-map-marker-card strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
  margin-top: 2px;
}
.bs-fcw-driver-transport-map-marker-card em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.35;
}
.bs-fcw-driver-transport-route-actions,
.bs-fcw-driver-transport-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-driver-transport-trip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.bs-fcw-driver-transport-trip-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  font-size: 0.62rem;
  font-weight: 800;
}
.bs-fcw-driver-transport-trip-badge.is-status {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-driver-transport-trip-badge.is-step {
  border-color: #86efac;
  background: #ecfdf5;
  color: #15803d;
}
.bs-fcw-driver-transport-trip-badge.is-updated {
  border-color: #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-driver-transport-step-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.bs-fcw-driver-transport-step-btn {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.bs-fcw-driver-transport-step-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-driver-transport-step-btn.is-current {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.15);
}
.bs-fcw-driver-transport-action-btn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-driver-transport-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bs-fcw-driver-transport-action-btn.is-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.bs-fcw-driver-transport-action-btn.is-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.bs-fcw-driver-transport-action-btn.is-secondary {
  background: #f8fafc;
}
.bs-fcw-driver-transport-student-empty {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 0.72rem;
  color: #475569;
  margin-bottom: 8px;
}
.bs-fcw-driver-transport-student-table-shell {
  overflow-x: auto;
}
.bs-fcw-driver-transport-student-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.68rem;
}
.bs-fcw-driver-transport-student-table th,
.bs-fcw-driver-transport-student-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}
.bs-fcw-driver-transport-student-table th {
  color: #475569;
  font-weight: 800;
  background: #f8fafc;
}
.bs-fcw-driver-transport-table-empty {
  color: #64748b;
  text-align: center;
}
.bs-fcw-driver-transport-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bs-fcw-driver-transport-progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bs-fcw-driver-transport-progress-step.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
}
.bs-fcw-driver-transport-progress-step.is-complete {
  border-color: #86efac;
  background: #f0fdf4;
}
.bs-fcw-driver-transport-progress-index {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.bs-fcw-driver-transport-progress-step.is-active .bs-fcw-driver-transport-progress-index {
  background: #2563eb;
  color: #ffffff;
}
.bs-fcw-driver-transport-progress-step.is-complete .bs-fcw-driver-transport-progress-index {
  background: #16a34a;
  color: #ffffff;
}
.bs-fcw-driver-transport-updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bs-fcw-driver-transport-update-empty {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  font-size: 0.72rem;
  color: #64748b;
}
.bs-fcw-driver-transport-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}
.bs-fcw-driver-transport-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dbeafe;
  background: #f8fafc;
  min-height: 88px;
}
.bs-fcw-driver-transport-summary-card small {
  font-size: 0.62rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.bs-fcw-driver-transport-summary-card strong {
  font-size: 0.72rem;
  color: #334155;
  font-weight: 600;
}
.bs-fcw-driver-transport-summary-icon {
  font-size: 1.1rem;
  line-height: 1;
}
body.driver-dashboard-body .bs-fcw-overlay .bs-fcw-filters {
  flex-wrap: nowrap;
}
body.driver-dashboard-body .bs-fcw-overlay .bs-fcw-filter-tab {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.62rem;
  padding: 6px 4px;
}
body.driver-dashboard-body .bs-fcw-overlay .bs-fcw-thread-driver-transport {
  overflow-y: auto;
}
.bs-fcw-student-transport-trip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-fcw-student-transport-trip-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.64rem;
  font-weight: 800;
}
.bs-fcw-student-transport-trip-badge.is-eta {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #15803d;
}
.bs-fcw-student-transport-trip-badge.is-active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.bs-fcw-student-transport-trip-badge.is-completed {
  background: #f0fdf4;
  border-color: #86efac;
  color: #15803d;
}
.bs-fcw-student-transport-trip-badge.is-step {
  background: #faf5ff;
  border-color: #d8b4fe;
  color: #7e22ce;
}
.bs-fcw-student-transport-trip-badge.is-started,
.bs-fcw-student-transport-trip-badge.is-updated {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
  font-weight: 700;
}
.bs-fcw-student-transport-trip-wait-note.is-completed {
  color: #15803d;
  font-weight: 700;
}
.bs-fcw-student-transport-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bs-fcw-student-transport-live-map .bs-fcw-student-transport-map-canvas {
  min-height: 280px;
}
.bs-fcw-student-transport-live-map.is-expanded .bs-fcw-student-transport-map-canvas {
  min-height: 420px;
}
.bs-fcw-student-transport-map-marker.is-vehicle {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  max-width: min(220px, 72%);
  text-align: center;
}
.bs-fcw-student-transport-map-marker.is-vehicle .bs-fcw-student-transport-map-marker-dot {
  background: #2563eb;
}
.bs-fcw-student-transport-map-marker-card em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.62rem;
  color: #64748b;
  line-height: 1.35;
}
.bs-fcw-student-transport-progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bs-fcw-student-transport-progress-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bs-fcw-student-transport-progress-step.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
}
.bs-fcw-student-transport-progress-step.is-complete {
  border-color: #86efac;
  background: #f0fdf4;
}
.bs-fcw-student-transport-progress-index {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #334155;
  font-size: 0.68rem;
  font-weight: 800;
  flex-shrink: 0;
}
.bs-fcw-student-transport-progress-step.is-active .bs-fcw-student-transport-progress-index {
  background: #2563eb;
  color: #ffffff;
}
.bs-fcw-student-transport-progress-step.is-complete .bs-fcw-student-transport-progress-index {
  background: #16a34a;
  color: #ffffff;
}
.bs-fcw-student-transport-progress-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #0f172a;
}
.bs-fcw-student-transport-updates-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.bs-fcw-student-transport-update-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bs-fcw-student-transport-update-item strong {
  display: block;
  font-size: 0.72rem;
  color: #0f172a;
}
.bs-fcw-student-transport-update-item span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: #475569;
}
.bs-fcw-student-transport-update-item em {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 0.64rem;
  color: #94a3b8;
}
.bs-fcw-student-transport-update-empty {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #64748b;
  font-size: 0.74rem;
}
.bs-fcw-student-transport-summary-section .bs-fcw-student-transport-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.bs-fcw-student-transport-header h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: #0f172a;
}
.bs-fcw-student-transport-header p {
  margin: 0;
  font-size: 0.72rem;
  color: #64748b;
}
.bs-fcw-student-transport-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bs-fcw-student-transport-summary-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #dbeafe;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  min-height: 72px;
}
.bs-fcw-student-transport-summary-icon {
  font-size: 1rem;
  line-height: 1;
}
.bs-fcw-student-transport-summary-card small {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-student-transport-summary-card strong {
  font-size: 0.82rem;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}
.bs-fcw-student-transport-map-shell {
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}
.bs-fcw-student-transport-map-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #eff6ff;
}
.bs-fcw-student-transport-map-head strong {
  font-size: 0.86rem;
  color: #0f172a;
}
.bs-fcw-student-transport-map-note {
  font-size: 0.64rem;
  color: #64748b;
}
.bs-fcw-student-transport-map-canvas {
  position: relative;
  min-height: 260px;
  background:
    linear-gradient(180deg, rgba(219, 234, 254, 0.35) 0%, rgba(248, 250, 252, 0.95) 100%),
    repeating-linear-gradient(0deg, rgba(148, 163, 184, 0.08) 0, rgba(148, 163, 184, 0.08) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.08) 0, rgba(148, 163, 184, 0.08) 1px, transparent 1px, transparent 24px);
}
.bs-fcw-student-transport-map-grid {
  position: absolute;
  inset: 0;
}
.bs-fcw-student-transport-map-marker {
  position: absolute;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: calc(50% - 16px);
}
.bs-fcw-student-transport-map-marker.is-pickup {
  left: 12px;
  top: 18px;
}
.bs-fcw-student-transport-map-marker.is-dropoff {
  right: 12px;
  bottom: 18px;
  flex-direction: row-reverse;
  text-align: right;
}
.bs-fcw-student-transport-map-marker-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
}
.bs-fcw-student-transport-map-marker.is-pickup .bs-fcw-student-transport-map-marker-dot {
  background: #16a34a;
}
.bs-fcw-student-transport-map-marker.is-dropoff .bs-fcw-student-transport-map-marker-dot {
  background: #dc2626;
}
.bs-fcw-student-transport-map-marker-card {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(203, 213, 225, 0.9);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.bs-fcw-student-transport-map-marker-card small {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-student-transport-map-marker-card strong {
  display: block;
  font-size: 0.74rem;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}
.bs-fcw-student-transport-map-route-line {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 46%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #16a34a 0%, #2563eb 55%, #dc2626 100%);
  opacity: 0.75;
}
.bs-fcw-student-transport-map-driver-card,
.bs-fcw-student-transport-map-status-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  min-width: 180px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #dbeafe;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
  text-align: center;
}
.bs-fcw-student-transport-map-driver-card {
  top: 38%;
}
.bs-fcw-student-transport-map-status-card {
  bottom: 12px;
}
.bs-fcw-student-transport-map-driver-card small,
.bs-fcw-student-transport-map-status-card small {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-student-transport-map-driver-card strong,
.bs-fcw-student-transport-map-status-card strong {
  display: block;
  font-size: 0.8rem;
  color: #0f172a;
}
.bs-fcw-student-transport-map-driver-card span {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  color: #475569;
}
.bs-fcw-student-transport-details {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
}
.bs-fcw-student-transport-details-title {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: #0f172a;
}
.bs-fcw-student-transport-details-list {
  margin: 0;
}
.bs-fcw-student-transport-details-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid #f1f5f9;
}
.bs-fcw-student-transport-details-row:first-child {
  border-top: 0;
}
.bs-fcw-student-transport-details-row dt {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.bs-fcw-student-transport-details-row dd {
  margin: 0;
  font-size: 0.76rem;
  color: #0f172a;
  word-break: break-word;
}
.bs-fcw-student-transport-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-student-transport-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-student-transport-action-btn.is-secondary {
  background: linear-gradient(135deg, #0f766e, #115e59);
}
.bs-fcw-student-transport-empty {
  text-align: center;
}
@media (max-width: 768px) {
  .bs-fcw-student-transport-summary-grid {
    grid-template-columns: 1fr;
  }
  .bs-fcw-student-transport-details-row {
    grid-template-columns: 1fr;
  }
}
.bs-fcw-call-btn {
  width: 36px;
  height: 36px;
  border: 1px solid #d8e1ee;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
.bs-fcw-call-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.bs-fcw-call-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  margin: 0 auto;
  color: #2563eb;
}
.bs-fcw-direct-call-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
}
.bs-fcw-direct-call-overlay[hidden] {
  display: none !important;
}
.bs-fcw-direct-call-card {
  width: min(100%, 360px);
  border-radius: 28px;
  padding: 18px 18px 16px;
  background: linear-gradient(165deg, #ffffff 0%, #f0f7ff 55%, #e8f1ff 100%);
  box-shadow:
    0 24px 60px rgba(37, 99, 235, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(147, 197, 253, 0.45);
}
.bs-fcw-direct-call-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.bs-fcw-direct-call-type {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1d4ed8;
}
.bs-fcw-direct-call-school {
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}
.bs-fcw-direct-call-body {
  text-align: center;
  padding: 8px 4px 12px;
}
.bs-fcw-direct-call-avatar-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.bs-fcw-direct-call-avatar,
.bs-fcw-direct-call-remote-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  box-shadow:
    0 14px 28px rgba(37, 99, 235, 0.28),
    inset 0 2px 8px rgba(255, 255, 255, 0.25);
}
.bs-fcw-direct-call-name {
  margin: 0;
  font-size: 1.25rem;
  color: #0f172a;
}
.bs-fcw-direct-call-meta {
  margin: 6px 0 0;
  font-size: 0.74rem;
  color: #64748b;
}
.bs-fcw-direct-call-status {
  margin: 10px 0 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563eb;
}
.bs-fcw-direct-call-stage {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: #0f172a;
  min-height: 140px;
  position: relative;
}
.bs-fcw-direct-call-overlay.is-audio .bs-fcw-direct-call-stage {
  min-height: 96px;
  background: linear-gradient(180deg, #dbeafe, #eff6ff);
}
.bs-fcw-direct-call-remote,
.bs-fcw-direct-call-remote-placeholder {
  position: relative;
  min-height: 140px;
  display: grid;
  place-items: center;
}
.bs-fcw-direct-call-remote-placeholder {
  gap: 8px;
  color: #cbd5e1;
  padding: 16px;
}
.bs-fcw-direct-call-remote-label {
  font-size: 0.72rem;
  font-weight: 600;
}
.bs-fcw-direct-call-jitsi {
  width: 100%;
  height: 220px;
  border: 0;
  background: #0f172a;
}
.bs-fcw-direct-call-overlay.is-audio .bs-fcw-direct-call-jitsi {
  height: 72px;
}
.bs-fcw-direct-call-local {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 72px;
  height: 96px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.72);
  border: 2px solid rgba(255, 255, 255, 0.35);
  display: grid;
  place-items: end center;
  padding-bottom: 6px;
}
.bs-fcw-direct-call-local-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
}
.bs-fcw-direct-call-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.bs-fcw-direct-call-ctrl {
  min-width: 68px;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px 8px;
  background: #fff;
  color: #1e3a8a;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
  cursor: pointer;
  display: grid;
  justify-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
}
.bs-fcw-direct-call-ctrl svg {
  width: 20px;
  height: 20px;
}
.bs-fcw-direct-call-ctrl.is-active {
  background: #dbeafe;
}
.bs-fcw-direct-call-ctrl.is-off {
  opacity: 0.72;
}
.bs-fcw-direct-call-end {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 10px 22px rgba(239, 68, 68, 0.35);
}
.bs-fcw-direct-call-end svg {
  color: #fff;
}
.bs-fcw-create-meeting-btn {
  display: none !important;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
  cursor: pointer;
  white-space: nowrap;
}
.bs-fcw-create-meeting-btn.is-visible,
.bs-fcw-create-meeting-btn:not([hidden]).is-visible {
  display: inline-flex !important;
}
.bs-fcw-create-meeting-btn[hidden] {
  display: none !important;
}
.bs-fcw-create-meeting-btn:hover,
.bs-fcw-create-meeting-btn:focus-visible {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.bs-fcw-create-meeting-btn.is-live {
  background: linear-gradient(135deg, #059669, #047857);
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.24);
}
.bs-fcw-create-meeting-btn.is-live:hover,
.bs-fcw-create-meeting-btn.is-live:focus-visible {
  background: linear-gradient(135deg, #047857, #065f46);
}
.bs-fcw-create-meeting-btn.is-disabled,
.bs-fcw-create-meeting-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
.bs-fcw-create-meeting-btn.bs-fcw-ovc-create-meeting-card-btn {
  display: none;
  align-items: stretch;
  width: calc(100% - 8px);
  max-width: 420px;
  margin: 0 4px 8px;
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
  overflow: hidden;
  white-space: normal;
}
.bs-fcw-create-meeting-btn.bs-fcw-ovc-create-meeting-card-btn.is-visible {
  display: inline-flex !important;
}
.bs-fcw-ovc-create-meeting-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  text-align: left;
}
.bs-fcw-ovc-create-meeting-card-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bs-fcw-ovc-create-meeting-card-kicker {
  font-size: 0.76rem;
  font-weight: 800;
  color: #fff;
}
.bs-fcw-ovc-group-name {
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bs-fcw-ovc-group-name-card .bs-fcw-ovc-create-meeting-card-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.bs-fcw-ovc-group-name-card-btn {
  display: none;
  align-items: stretch;
  width: calc(100% - 8px);
  max-width: 420px;
  margin: 0 4px 8px;
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
  overflow: hidden;
  border: 0;
  cursor: pointer;
  white-space: normal;
}
.bs-fcw-ovc-group-name-card-btn.is-visible,
.bs-fcw-group-header-online-class .bs-fcw-ovc-group-name-card-btn {
  display: inline-flex !important;
}
.bs-fcw-ovc-group-name-card-btn.is-disabled,
.bs-fcw-ovc-group-name-card-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}
.bs-fcw-ovc-create-meeting-card-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}
.bs-fcw-ovc-create-meeting-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.74rem;
  font-weight: 800;
  color: #fff;
}
.bs-fcw-ovc-start-meeting-modal .bs-fcw-ovc-start-kicker {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2563eb;
}
.bs-fcw-join-meeting-btn.is-visible {
  background: linear-gradient(135deg, #059669, #047857);
}
.bs-fcw-join-meeting-btn.is-visible:hover,
.bs-fcw-join-meeting-btn.is-visible:focus-visible {
  background: linear-gradient(135deg, #047857, #065f46);
}
.bs-fcw-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}
.bs-fcw-card-online-class {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0 12px 8px;
}
.bs-fcw-group-oc-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bs-fcw-group-oc-status.is-none {
  background: #f1f5f9;
  color: #64748b;
}
.bs-fcw-group-oc-status.is-available {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-group-oc-status.is-live {
  background: #dcfce7;
  color: #15803d;
}
.bs-fcw-group-oc-status.is-ended {
  background: #fee2e2;
  color: #b91c1c;
}
.bs-fcw-group-join-online-class-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.bs-fcw-group-join-online-class-btn:hover,
.bs-fcw-group-join-online-class-btn:focus-visible {
  background: linear-gradient(135deg, #047857, #065f46);
}
.bs-fcw-group-no-active-class {
  font-size: 0.72rem;
  color: #94a3b8;
  font-weight: 600;
}
@media (max-width: 768px) {
  .bs-fcw-card-online-class {
    padding-left: 8px;
    padding-right: 8px;
  }
  .bs-fcw-group-join-online-class-btn {
    width: 100%;
    justify-content: center;
  }
}
.bs-fcw-dt-all-shortcuts {
  display: grid;
  gap: 10px;
  padding: 10px 10px 6px;
  margin-bottom: 6px;
}
.bs-fcw-dt-all-shortcuts-head {
  padding: 0 4px 2px;
  color: #9d174d;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bs-fcw-dt-all-shortcuts-list {
  display: grid;
  gap: 10px;
}
.bs-fcw-dt-all-shortcut-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(244, 114, 182, 0.28);
  border-radius: 16px;
  background: linear-gradient(135deg, #fff1f7 0%, #ffe4ef 52%, #ffd6e8 100%);
  box-shadow: 0 10px 22px rgba(219, 39, 119, 0.12);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bs-fcw-dt-all-shortcut-card:hover,
.bs-fcw-dt-all-shortcut-card:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(219, 39, 119, 0.42);
  box-shadow: 0 14px 28px rgba(219, 39, 119, 0.16);
}
.bs-fcw-dt-all-shortcut-card.is-active {
  border-color: rgba(190, 24, 93, 0.72);
  box-shadow: 0 0 0 2px rgba(244, 114, 182, 0.28), 0 14px 28px rgba(219, 39, 119, 0.18);
}
.bs-fcw-dt-all-shortcut-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 1.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.bs-fcw-dt-all-shortcut-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.bs-fcw-dt-all-shortcut-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-dt-all-shortcut-title {
  color: #831843;
  font-size: 0.92rem;
  line-height: 1.25;
}
.bs-fcw-dt-all-shortcut-subtitle {
  color: #9d174d;
  font-size: 0.76rem;
  line-height: 1.35;
}
.bs-fcw-dt-all-shortcut-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.bs-fcw-dt-all-shortcut-badge,
.bs-fcw-dt-all-shortcut-members,
.bs-fcw-dt-all-shortcut-school {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}
.bs-fcw-dt-all-shortcut-badge {
  background: rgba(255, 255, 255, 0.78);
  color: #be185d;
}
.bs-fcw-dt-all-shortcut-members {
  background: rgba(255, 255, 255, 0.56);
  color: #9d174d;
}
.bs-fcw-dt-all-shortcut-school {
  background: rgba(190, 24, 93, 0.12);
  color: #831843;
}
.bs-fcw-dt-all-shortcut-preview {
  color: #9d174d;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-fcw-dt-all-shortcut-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #be185d;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.bs-fcw-dt-all-contacts-head {
  padding: 8px 14px 4px;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bs-fcw-parent-contact-section-head {
  margin-top: 4px;
}
.bs-fcw-parent-homework-panel.is-view-only .bs-fcw-parent-hw-head strong {
  display: block;
  font-size: 1.05rem;
}
.bs-fcw-parent-hw-subtitle {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 600;
}
.bs-fcw-parent-hw-child-context {
  display: grid;
  gap: 10px;
  padding: 0 4px 8px;
}
.bs-fcw-parent-hw-child-meta {
  display: grid;
  gap: 4px;
}
.bs-fcw-parent-hw-child-meta strong {
  font-size: 0.95rem;
}
.bs-fcw-parent-hw-child-meta span {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
}
.bs-fcw-parent-hw-child-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-parent-hw-child-chip {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-parent-hw-child-chip.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-parent-hw-child-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
}
.bs-fcw-parent-homework-post .bs-fcw-homework-post-menu-wrap {
  display: none !important;
}
.bs-fcw-parent-hw-scope-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 800;
}
.bs-fcw-parent-homework-post .bs-fcw-homework-post-thumb {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 10px;
}
.bs-fcw-parent-homework-post .bs-fcw-homework-post-attachment.is-photo {
  margin-top: 8px;
}
.bs-fcw-parent-transport-section-wrap {
  margin: 10px 8px 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.bs-fcw-parent-transport-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}
.bs-fcw-parent-transport-section-head strong {
  font-size: 0.92rem;
}
.bs-fcw-parent-transport-section-head span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 600;
}
.bs-fcw-parent-transport-child-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.bs-fcw-parent-transport-child-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-parent-transport-child-chip.is-active {
  border-color: #0d9488;
  background: #ecfdf5;
  color: #0f766e;
}
.bs-fcw-parent-transport-chip-badge {
  padding: 1px 6px;
  border-radius: 999px;
  background: #ccfbf1;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 800;
}
.bs-fcw-parent-transport-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.bs-fcw-parent-transport-child-meta {
  display: grid;
  gap: 4px;
}
.bs-fcw-parent-transport-child-meta span {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}
.bs-fcw-parent-transport-summary,
.bs-fcw-parent-transport-status-list {
  display: grid;
  gap: 6px;
  margin: 0;
}
.bs-fcw-parent-transport-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
  align-items: start;
}
.bs-fcw-parent-transport-row dt {
  margin: 0;
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 700;
}
.bs-fcw-parent-transport-row dd {
  margin: 0;
  color: #0f172a;
  font-size: 0.8rem;
  font-weight: 600;
}
.bs-fcw-parent-transport-step-status {
  padding: 10px;
  border-radius: 8px;
  background: #f1f5f9;
}
.bs-fcw-parent-transport-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bs-fcw-parent-transport-status-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-parent-transport-status-badge.is-started {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-parent-transport-map-placeholder {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  text-align: center;
}
.bs-fcw-parent-transport-map-placeholder p {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}
.bs-fcw-parent-transport-actions {
  display: flex;
  gap: 8px;
}
.bs-fcw-parent-transport-action-btn {
  border: 0;
  border-radius: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #0d9488, #0f766e);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-parent-transport-empty {
  margin-top: 4px;
}
.bs-fcw-thread-parent-transport {
  overflow-x: hidden;
}
.bs-fcw-parent-transport-tab-panel {
  padding: 10px 12px 14px;
}
.bs-fcw-parent-transport-tab-head {
  margin-bottom: 10px;
}
.bs-fcw-parent-transport-tab-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.bs-fcw-parent-transport-tab-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}
.bs-fcw-parent-transport-tab-panel .bs-fcw-parent-transport-section-wrap {
  margin: 0;
}
.bs-fcw-thread-parent-bank-slip {
  overflow-x: hidden;
}
.bs-fcw-parent-bank-slip-tab-panel {
  padding: 10px 12px 16px;
}
.bs-fcw-parent-bank-slip-panel {
  display: grid;
  gap: 14px;
}
.bs-fcw-parent-bank-slip-page-card {
  padding: 14px 16px;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.bs-fcw-parent-bank-slip-page-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bs-fcw-parent-bank-slip-page-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.bs-fcw-parent-bank-slip-page-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.bs-fcw-parent-bank-slip-page-copy strong {
  font-size: 1rem;
  color: #0f172a;
}
.bs-fcw-parent-bank-slip-page-copy span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.35;
}
.bs-fcw-parent-bank-slip-qr-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.bs-fcw-parent-bank-slip-qr-head {
  display: grid;
  gap: 4px;
  text-align: left;
}
.bs-fcw-parent-bank-slip-qr-head strong {
  font-size: 1rem;
  color: #0f172a;
}
.bs-fcw-parent-bank-slip-qr-head span {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.45;
}
.bs-fcw-parent-bank-slip-qr-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 0 auto;
}
.bs-fcw-parent-bank-slip-qr-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}
.bs-fcw-parent-bank-slip-qr-image-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 18px;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.1);
}
.bs-fcw-parent-bank-slip-qr-image-btn img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  width: clamp(260px, 78vw, 340px);
  height: auto;
  border-radius: 18px;
  object-fit: contain;
}
.bs-fcw-parent-bank-slip-qr-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
.bs-fcw-parent-bank-slip-qr-download-btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
  text-align: center;
}
.bs-fcw-parent-bank-slip-qr-download-btn:active {
  transform: translateY(1px);
}
.bs-fcw-parent-bank-slip-qr-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
  width: 100%;
  padding: 22px 14px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}
.bs-fcw-parent-bank-slip-qr-empty strong {
  font-size: 0.84rem;
  color: #475569;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-pay-details-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bs-fcw-parent-bank-slip-pay-details-title {
  font-size: 0.82rem;
  color: #0f172a;
  font-weight: 800;
}
.bs-fcw-parent-bank-slip-pay-details-body {
  display: grid;
  gap: 4px;
}
.bs-fcw-parent-bank-slip-pay-detail-line {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #334155;
  word-break: break-word;
}
.bs-fcw-parent-bank-slip-pay-detail-line span {
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-form-card {
  display: grid;
  gap: 0;
  border: 1px solid #e8eef7;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.bs-fcw-parent-bank-slip-form-head {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-bottom: 1px solid #e8eef7;
  background: #fff;
}
.bs-fcw-parent-bank-slip-form-head strong {
  font-size: 0.95rem;
  color: #0f172a;
}
.bs-fcw-parent-bank-slip-form-head span {
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.4;
}
.bs-fcw-parent-bank-slip-head {
  display: grid;
  gap: 4px;
}
.bs-fcw-parent-bank-slip-head strong {
  font-size: 0.95rem;
}
.bs-fcw-parent-bank-slip-head span {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 600;
}
.bs-fcw-parent-bank-slip-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.bs-fcw-parent-bank-slip-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.bs-fcw-parent-bank-slip-field > span {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-field input,
.bs-fcw-parent-bank-slip-field select,
.bs-fcw-parent-bank-slip-field textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.84rem;
  background: #fff;
}
.bs-fcw-parent-bank-slip-upload {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.bs-fcw-parent-bank-slip-upload > span {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-preview {
  display: grid;
  place-items: center;
  min-height: 150px;
  border: 2px dashed #cbd5e1;
  border-radius: 14px;
  background: #f8fafc;
  overflow: hidden;
  padding: 10px;
}
.bs-fcw-parent-bank-slip-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 8px;
}
.bs-fcw-parent-bank-slip-preview span {
  color: #94a3b8;
  font-size: 0.8rem;
  font-weight: 600;
}
.bs-fcw-parent-bank-slip-upload-btn {
  width: 100%;
  border: 1px solid #93c5fd;
  border-radius: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
  color: #1d4ed8;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-parent-bank-slip-submit {
  border: 0;
  border-radius: 12px;
  padding: 13px 16px;
  width: 100%;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}
.bs-fcw-parent-bank-slip-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.bs-fcw-parent-bank-slip-message {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-message.is-success {
  color: #0f766e;
}
.bs-fcw-parent-bank-slip-message.is-error {
  color: #b91c1c;
}
.bs-fcw-parent-bank-slip-history-wrap h4 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: #0f172a;
}
.bs-fcw-list.bs-fcw-admin-slips-main-list {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background: #f8fafc;
}
.bs-fcw-admin-slips-main-tab {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.bs-fcw-admin-slips-open-room-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #0f766e 0%, #115e59 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.22);
}
.bs-fcw-admin-slips-qr-card .bs-fcw-parent-bank-slip-qr-head span:last-child {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-list.bs-fcw-parent-bank-slip-main-list {
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  background: #f8fafc;
}
.bs-fcw-parent-bank-slip-main-tab {
  display: grid;
  gap: 12px;
  padding: 12px;
}
.bs-fcw-parent-bank-slip-submit-open-btn {
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.22);
}
.bs-fcw-parent-bank-slip-history-grade {
  margin: 0;
  color: #64748b;
  font-size: 0.76rem;
}
.bs-fcw-parent-bank-slip-preview-panel {
  display: grid;
  gap: 14px;
}
.bs-fcw-parent-bank-slip-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bs-fcw-parent-bank-slip-preview-head strong {
  font-size: 1rem;
  color: #0f172a;
}
.bs-fcw-parent-bank-slip-preview-details {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}
.bs-fcw-parent-bank-slip-preview-details p {
  margin: 0;
  font-size: 0.8rem;
  color: #334155;
}
.bs-fcw-parent-bank-slip-preview-details span {
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-parent-bank-slip-preview-image {
  display: flex;
  justify-content: center;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.bs-fcw-parent-bank-slip-preview-image img {
  max-width: 100%;
  border-radius: 10px;
}
.bs-fcw-parent-bank-slip-preview-reason,
.bs-fcw-parent-bank-slip-preview-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
}
.bs-fcw-parent-bank-slip-history {
  display: grid;
  gap: 10px;
}
.bs-fcw-parent-bank-slip-history-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #e8eef7;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.bs-fcw-parent-bank-slip-history-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  display: grid;
  place-items: center;
}
.bs-fcw-parent-bank-slip-history-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-fcw-parent-bank-slip-history-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-parent-bank-slip-history-main p,
.bs-fcw-parent-bank-slip-history-main small {
  margin: 2px 0 0;
  color: #64748b;
  font-size: 0.74rem;
}
.bs-fcw-parent-bank-slip-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: capitalize;
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-parent-bank-slip-status.is-approved {
  background: #dcfce7;
  color: #166534;
}
.bs-fcw-parent-bank-slip-status.is-rejected {
  background: #fee2e2;
  color: #b91c1c;
}
.bs-fcw-parent-bank-slip-status.is-pending {
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-parent-bank-slip-view-btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-parent-bank-slip-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  text-align: center;
  padding: 20px 12px;
  color: #64748b;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
}
.bs-fcw-panel.bs-fcw-parent-bank-slip-room .bs-fcw-compose,
.bs-fcw-panel.bs-fcw-admin-slips-room .bs-fcw-compose,
.bs-fcw-panel.bs-fcw-slip-review-room .bs-fcw-compose {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}
.bs-fcw-panel.bs-fcw-slip-review-room .bs-fcw-call-btn,
.bs-fcw-panel.bs-fcw-slip-review-room .bs-fcw-video-btn,
.bs-fcw-panel.bs-fcw-parent-bank-slip-room .bs-fcw-call-btn,
.bs-fcw-panel.bs-fcw-admin-slips-room .bs-fcw-call-btn {
  display: none !important;
}
.bs-fcw-thread-admin-slips {
  overflow-x: hidden;
}
.bs-fcw-admin-slips-tab-panel {
  padding: 10px 12px 16px;
}
.bs-fcw-admin-slips-panel {
  display: grid;
  gap: 12px;
}
.bs-fcw-admin-slips-head {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff 0%, #f8fafc 100%);
}
.bs-fcw-admin-slips-head strong {
  font-size: 1rem;
  color: #0f172a;
}
.bs-fcw-admin-slips-head span {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.4;
}
.bs-fcw-admin-slips-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-admin-slip-summary-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  color: #334155;
}
.bs-fcw-admin-slip-summary-chip.is-pending { border-color: #fdba74; background: #fff7ed; color: #c2410c; }
.bs-fcw-admin-slip-summary-chip.is-approved { border-color: #86efac; background: #f0fdf4; color: #15803d; }
.bs-fcw-admin-slip-summary-chip.is-rejected { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.bs-fcw-admin-slip-summary-chip.is-total { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.bs-fcw-admin-slip-list {
  display: grid;
  gap: 10px;
}
.bs-fcw-admin-slip-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.bs-fcw-admin-slip-actions {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 92px;
}
.bs-fcw-admin-slip-review-meta {
  margin: 0;
  font-size: 0.72rem;
  color: #15803d;
  font-weight: 700;
}
.bs-fcw-admin-slip-review-meta.is-rejected {
  color: #b91c1c;
}
.bs-fcw-admin-slip-approve-btn,
.bs-fcw-admin-slip-reject-btn,
.bs-fcw-admin-slip-view-btn {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-admin-slip-approve-btn {
  border-color: #86efac;
  background: #f0fdf4;
  color: #15803d;
}
.bs-fcw-admin-slip-reject-btn {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}
.bs-fcw-admin-slip-reject-modal {
  position: fixed;
  inset: 0;
  z-index: 100030;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bs-fcw-admin-slip-reject-modal[hidden] {
  display: none !important;
}
.bs-fcw-admin-slip-reject-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.bs-fcw-admin-slip-reject-card {
  position: relative;
  z-index: 1;
  width: min(96vw, 420px);
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
}
.bs-fcw-admin-slip-reject-card strong {
  font-size: 0.95rem;
  color: #0f172a;
}
.bs-fcw-admin-slip-reject-card p {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}
.bs-fcw-admin-slip-reject-card textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.84rem;
  resize: vertical;
}
.bs-fcw-admin-slip-reject-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bs-fcw-admin-slip-reject-cancel,
.bs-fcw-admin-slip-reject-confirm {
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-admin-slip-reject-cancel {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #334155;
}
.bs-fcw-admin-slip-reject-confirm {
  border: 0;
  background: #dc2626;
  color: #fff;
}
.bs-fcw-admin-slip-reject-error {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  color: #b91c1c;
}
.bs-fcw-parent-bank-slip-history-reason {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: #b91c1c;
  font-weight: 700;
}
.bs-fcw-admin-slip-thumb {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: grid;
  place-items: center;
}
.bs-fcw-admin-slip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-fcw-admin-slip-thumb span {
  font-size: 0.62rem;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
  padding: 4px;
}
.bs-fcw-admin-slip-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.bs-fcw-admin-slip-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-fcw-admin-slip-title-row strong {
  font-size: 0.88rem;
  color: #0f172a;
}
.bs-fcw-admin-slip-main p {
  margin: 0;
  font-size: 0.74rem;
  color: #64748b;
  line-height: 1.35;
}
.bs-fcw-admin-slip-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.bs-fcw-admin-slip-status.is-pending { background: #ffedd5; color: #c2410c; border-color: #fdba74; }
.bs-fcw-admin-slip-status.is-approved { background: #dcfce7; color: #15803d; border-color: #86efac; }
.bs-fcw-admin-slip-status.is-rejected { background: #f1f5f9; color: #64748b; border-color: #cbd5e1; }
.bs-fcw-admin-slip-empty {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
  padding: 16px 10px;
  color: #64748b;
}
@media (max-width: 520px) {
  .bs-fcw-admin-slip-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .bs-fcw-admin-slip-actions {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
  }
}
.bs-fcw-parent-all-tab-list {
  overflow-x: hidden;
}
.bs-fcw-parent-all-tab-list .bs-fcw-dt-all-shortcuts,
.bs-fcw-parent-all-tab-list .bs-fcw-parent-transport-section-wrap,
.bs-fcw-parent-all-tab-list .bs-fcw-parent-contacts-section-head,
.bs-fcw-parent-all-tab-list .bs-fcw-parent-contacts-empty {
  max-width: 100%;
}
.bs-fcw-parent-contacts-section-head {
  margin-top: 8px;
}
.bs-fcw-parent-contacts-empty {
  margin: 4px 8px 8px;
}
.bs-fcw-teacher-all-tab-list {
  overflow-x: hidden;
}
.bs-fcw-teacher-all-tab-list .bs-fcw-dt-all-shortcuts,
.bs-fcw-teacher-all-tab-list .bs-fcw-teacher-contacts-section-head,
.bs-fcw-teacher-all-tab-list .bs-fcw-teacher-contacts-empty {
  max-width: 100%;
}
.bs-fcw-teacher-contacts-section-head {
  margin-top: 8px;
}
.bs-fcw-teacher-contacts-section-empty {
  margin: 0 8px 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.08);
  color: #64748b;
  font-size: 0.85rem;
}
.bs-fcw-teacher-contacts-section-empty p {
  margin: 0;
}
.bs-fcw-teacher-contacts-empty {
  margin: 4px 8px 8px;
}
.bs-fcw-parent-transport-section-wrap.is-view-only::before {
  content: 'View only';
  display: inline-flex;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #0f766e;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: middle;
}
.bs-fcw-parent-homework-panel.is-view-only .bs-fcw-homework-review-notice {
  margin-top: 8px;
}
@media (max-width: 768px) {
  .bs-fcw-parent-all-tab-list .bs-fcw-dt-all-shortcut-title {
    font-size: 0.86rem;
  }
  .bs-fcw-parent-all-tab-list .bs-fcw-dt-all-shortcut-subtitle,
  .bs-fcw-parent-all-tab-list .bs-fcw-dt-all-shortcut-preview {
    word-break: break-word;
  }
  .bs-fcw-parent-transport-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .bs-fcw-parent-transport-section-wrap,
  .bs-fcw-parent-homework-panel {
    margin-left: 6px;
    margin-right: 6px;
  }
  .bs-fcw-parent-hw-child-chips,
  .bs-fcw-parent-transport-child-chips {
    gap: 6px;
  }
  .bs-fcw-dt-all-shortcuts {
    padding-left: 8px;
    padding-right: 8px;
  }
  .bs-fcw-dt-all-shortcut-card {
    grid-template-columns: 40px 1fr;
    padding: 11px 12px;
  }
  .bs-fcw-dt-all-shortcut-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
}
.bs-fcw-student-homework-step1 .bs-fcw-homework-empty {
  margin-top: 8px;
}
.bs-fcw-homework-fb-composer {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  margin: 0 0 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  text-align: left;
  font: inherit;
  color: inherit;
  flex-shrink: 0;
}
.bs-fcw-homework-fb-composer-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.bs-fcw-homework-fb-composer-name {
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 700;
}
.bs-fcw-homework-fb-composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bs-fcw-homework-fb-composer-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
}
.bs-fcw-homework-fb-composer-search::placeholder {
  color: #64748b;
  font-weight: 600;
}
.bs-fcw-homework-fb-composer-search:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
  background: #fff;
}
.bs-fcw-homework-fb-create-btn {
  flex: 0 0 auto;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.bs-fcw-homework-fb-create-btn:hover,
.bs-fcw-homework-fb-create-btn:focus-visible {
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  outline: none;
}
.bs-fcw-homework-fb-composer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #dbeafe, #f1f5f9);
  color: #0f49ff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  flex-shrink: 0;
}
.bs-fcw-homework-fb-composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-fcw-student-homework-grade-room .bs-fcw-homework-review-head {
  flex-shrink: 0;
}
.bs-fcw-student-homework-grade-room .bs-fcw-homework-review-feed {
  margin-top: 4px;
}
.bs-fcw-teacher-homework-tab-list .bs-fcw-teacher-homework-section-head {
  margin-top: 8px;
}
.bs-fcw-teacher-homework-tab-list .bs-fcw-teacher-homework-section-head:first-child {
  margin-top: 0;
}
.bs-fcw-teacher-homework-grade-room .bs-fcw-homework-review-head,
.bs-fcw-teacher-homework-all-room .bs-fcw-homework-review-head {
  flex-shrink: 0;
}
.bs-fcw-teacher-homework-grade-room .bs-fcw-homework-review-feed,
.bs-fcw-teacher-homework-all-room .bs-fcw-homework-review-feed {
  margin-top: 4px;
}
.bs-fcw-teacher-homework-panel.bs-fcw-homework-review-panel {
  padding: 14px;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
}
.bs-fcw-teacher-homework-composer {
  margin-bottom: 4px;
}
.bs-fcw-teacher-homework-composer.is-disabled {
  opacity: 0.92;
}
.bs-fcw-teacher-homework-composer-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-teacher-homework-composer-context {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 600;
}
.bs-fcw-homework-scope-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
}
.bs-fcw-homework-post-role {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.68rem;
  font-weight: 700;
  margin-right: 6px;
}
.bs-fcw-teacher-homework-create-form {
  display: grid;
  gap: 12px;
  margin: 10px 0 0;
  padding: 14px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  background: #f8fafc;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.bs-fcw-teacher-homework-create-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}
.bs-fcw-teacher-homework-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.bs-fcw-teacher-homework-field > span {
  font-size: 0.72rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bs-fcw-teacher-homework-field input,
.bs-fcw-teacher-homework-field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
  color: #0f172a;
}
.bs-fcw-teacher-homework-field input:focus,
.bs-fcw-teacher-homework-field textarea:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.bs-fcw-teacher-homework-wide {
  grid-column: 1 / -1;
}
.bs-fcw-teacher-homework-attach {
  grid-column: 1 / -1;
}
.bs-fcw-teacher-homework-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.bs-fcw-teacher-homework-create-disabled {
  margin: 4px 0 0;
  padding: 0;
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.45;
}
.bs-fcw-teacher-homework-post.is-my-post,
.bs-fcw-teacher-homework-panel .bs-fcw-student-homework-post.is-my-post {
  border-color: rgba(37, 99, 235, 0.18);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
@media (max-width: 720px) {
  .bs-fcw-teacher-homework-create-fields {
    grid-template-columns: 1fr;
  }
  .bs-fcw-teacher-homework-composer {
    grid-template-columns: 36px 1fr;
    gap: 10px;
    padding: 12px;
  }
  .bs-fcw-teacher-homework-panel .bs-fcw-homework-post-thumb {
    max-width: 100%;
  }
}
.bs-fcw-compose.bs-fcw-compose-grade-homework {
  padding: 8px 10px;
  border-top: 1px solid rgba(187, 247, 208, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}
.bs-fcw-grade-homework-compose {
  width: 100%;
  display: grid;
}
.bs-fcw-grade-homework-create-post-btn {
  width: 100%;
  min-height: 44px;
  max-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(134, 239, 172, 0.75);
  border-radius: 18px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.bs-fcw-grade-homework-create-post-btn:hover,
.bs-fcw-grade-homework-create-post-btn:focus-visible {
  border-color: rgba(34, 197, 94, 0.55);
  background: #f0fdf4;
  box-shadow: 0 6px 14px rgba(5, 150, 105, 0.12);
  outline: none;
}
.bs-fcw-grade-homework-create-post-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.18);
}
.bs-fcw-grade-homework-create-post-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 1px;
  align-content: center;
}
.bs-fcw-grade-homework-create-post-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #065f46;
  line-height: 1.2;
}
.bs-fcw-grade-homework-create-post-sub {
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose.bs-fcw-compose-grade-homework {
  padding: 8px 10px;
}
@media (max-width: 768px) {
  .bs-fcw-compose.bs-fcw-compose-grade-homework {
    padding: 7px 8px;
  }
  .bs-fcw-grade-homework-create-post-btn {
    min-height: 42px;
    max-height: 48px;
    padding: 7px 10px;
    border-radius: 16px;
    gap: 8px;
  }
  .bs-fcw-grade-homework-create-post-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    font-size: 0.92rem;
  }
  .bs-fcw-grade-homework-create-post-label {
    font-size: 0.78rem;
  }
  .bs-fcw-grade-homework-create-post-sub {
    font-size: 0.64rem;
  }
}
.bs-fcw-create-meeting-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.bs-fcw-thread.bs-fcw-thread-homework {
  padding: 0;
  background: #f8fafc;
  overflow-y: auto;
  overflow-x: hidden;
}
.bs-fcw-homework-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 14px;
}
.bs-fcw-homework-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.bs-fcw-homework-form-head {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bs-fcw-homework-form-head strong {
  color: #0f172a;
  font-size: 1rem;
}
.bs-fcw-homework-form-head span {
  color: #64748b;
  font-size: 0.75rem;
}
.bs-fcw-homework-field {
  display: grid;
  gap: 6px;
}
.bs-fcw-homework-field span {
  color: #0b2d75;
  font-size: 0.76rem;
  font-weight: 800;
}
.bs-fcw-homework-field input,
.bs-fcw-homework-field select,
.bs-fcw-homework-field textarea {
  width: 100%;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
  color: #0f172a;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.bs-fcw-homework-field input:focus,
.bs-fcw-homework-field select:focus,
.bs-fcw-homework-field textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.bs-fcw-homework-wide {
  grid-column: 1 / -1;
}
.bs-fcw-homework-attachment-name {
  color: #64748b;
  font-size: 0.72rem;
}
.bs-fcw-homework-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.bs-fcw-homework-save-btn,
.bs-fcw-homework-clear-btn,
.bs-fcw-homework-action-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-homework-save-btn {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}
.bs-fcw-homework-clear-btn {
  color: #0f172a;
  background: #eef2ff;
}
.bs-fcw-homework-action-btn {
  color: #1d4ed8;
  background: #eff6ff;
  padding: 8px 12px;
  font-size: 0.75rem;
}
.bs-fcw-homework-action-btn.is-danger {
  color: #b91c1c;
  background: #fef2f2;
}
.bs-fcw-homework-status {
  grid-column: 1 / -1;
  margin: 0;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 700;
}
.bs-fcw-homework-list-wrap {
  display: grid;
  gap: 10px;
}
.bs-fcw-homework-list-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: 0 4px;
}
.bs-fcw-homework-list-head strong {
  color: #0f172a;
  font-size: 0.92rem;
}
.bs-fcw-homework-list-head span {
  color: #64748b;
  font-size: 0.74rem;
}
.bs-fcw-homework-list {
  display: grid;
  gap: 10px;
}
.bs-fcw-homework-card {
  padding: 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}
.bs-fcw-homework-card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.bs-fcw-homework-card-top strong {
  color: #0f172a;
  font-size: 0.9rem;
}
.bs-fcw-homework-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: capitalize;
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-homework-status-badge.status-draft {
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-homework-status-badge.status-active,
.bs-fcw-homework-status-badge.status-assigned {
  background: #dcfce7;
  color: #166534;
}
.bs-fcw-homework-card p {
  margin: 0 0 6px;
  color: #334155;
  font-size: 0.78rem;
}
.bs-fcw-homework-card p span {
  display: inline-block;
  min-width: 88px;
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-homework-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.bs-fcw-homework-empty {
  padding: 18px;
}
.bs-fcw-homework-review-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 14px;
}
.bs-fcw-homework-review-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px 8px;
}
.bs-fcw-homework-review-head strong {
  color: #0f172a;
  font-size: 0.95rem;
}
.bs-fcw-homework-review-head span {
  color: #64748b;
  font-size: 0.74rem;
}
.bs-fcw-homework-review-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bs-fcw-admin-homework-feed-panel .bs-fcw-homework-post {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  padding: 10px;
}
.bs-fcw-admin-homework-post .bs-fcw-homework-post-title {
  margin: 0 0 6px;
  font-size: 0.92rem;
}
.bs-fcw-admin-homework-post .bs-fcw-homework-post-text {
  margin: 0 0 8px;
  color: #334155;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.bs-fcw-admin-homework-post .bs-fcw-homework-post-thumb {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 10px;
}
.bs-fcw-admin-homework-post .bs-fcw-homework-post-attachment.is-photo {
  margin-top: 8px;
}
.bs-fcw-admin-homework-post .bs-fcw-homework-post-attachment.is-photo {
  margin-top: 8px;
}
.bs-fcw-admin-homework-tab-list .bs-fcw-teacher-homework-section-head,
.bs-fcw-admin-homework-tab-list .bs-fcw-admin-homework-tab-head {
  margin-top: 8px;
}
.bs-fcw-admin-homework-tab-list .bs-fcw-teacher-homework-section-head:first-child,
.bs-fcw-admin-homework-tab-list .bs-fcw-admin-homework-tab-head:first-child {
  margin-top: 0;
}
.bs-fcw-admin-homework-panel.bs-fcw-homework-review-panel,
.bs-fcw-admin-homework-grade-room .bs-fcw-homework-review-head,
.bs-fcw-admin-homework-all-room .bs-fcw-homework-review-head {
  flex-shrink: 0;
}
.bs-fcw-admin-homework-panel.bs-fcw-homework-review-panel {
  padding: 14px;
  gap: 12px;
  min-height: 0;
  overflow-x: hidden;
}
.bs-fcw-admin-homework-grade-room .bs-fcw-homework-review-feed,
.bs-fcw-admin-homework-all-room .bs-fcw-homework-review-feed {
  margin-top: 4px;
}
.bs-fcw-admin-homework-post-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 0 12px 12px;
}
.bs-fcw-admin-homework-post-actions .bs-fcw-admin-hw-btn {
  border: 1px solid #dbeafe;
  background: #f8fafc;
  color: #1e3a8a;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  min-height: 30px;
}
.bs-fcw-admin-homework-post-actions .bs-fcw-admin-hw-btn.is-danger {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff5f5;
}
.bs-fcw-admin-homework-comment-form {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.bs-fcw-admin-homework-comment-form[hidden] {
  display: none !important;
}
.bs-fcw-admin-homework-comment-input {
  flex: 1;
  min-width: 0;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.82rem;
  background: #fff;
}
.bs-fcw-admin-homework-comment-save {
  border: none;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  color: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-admin-homework-comments {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.bs-fcw-admin-homework-comments-head {
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-admin-homework-comment-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.bs-fcw-admin-homework-comment-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.72rem;
  margin-bottom: 4px;
}
.bs-fcw-admin-homework-comment-text {
  margin: 0;
  font-size: 0.8rem;
  color: #334155;
  white-space: pre-wrap;
  word-break: break-word;
}
.bs-fcw-admin-groups-launcher-list {
  padding: 0 !important;
  background: transparent !important;
}
.bs-fcw-admin-groups-launcher {
  width: 100%;
}
.bs-fcw-admin-groups-launcher-head {
  margin-bottom: 12px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-admin-groups-title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.bs-fcw-admin-groups-sparkle {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.92rem;
  filter: saturate(1.2);
}
.bs-fcw-admin-calls-tab-list {
  padding-top: 2px !important;
}
.bs-fcw-admin-calls-tab-head {
  margin-bottom: 10px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}
.bs-fcw-badge-call {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid rgba(37, 99, 235, 0.18);
}
.bs-fcw-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 8px;
  padding: 2px 4px 14px;
  width: 100%;
}
.bs-fcw-launcher-grid-item {
  min-width: 0;
  width: 100%;
}
.bs-fcw-launcher-card {
  width: 100%;
  display: block;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.bs-fcw-launcher-card-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 142px;
  padding: 16px 8px 14px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(241, 245, 249, 0.98);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.09),
    0 4px 10px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.bs-fcw-launcher-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  flex-shrink: 0;
}
.bs-fcw-launcher-icon {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 4px 2px;
  cursor: pointer;
  position: relative;
}
.bs-fcw-launcher-icon-circle {
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  line-height: 1;
  background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 52%, #1d4ed8 100%);
  border: 1px solid rgba(37, 99, 235, 0.35);
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.28),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(29, 78, 216, 0.28);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  overflow: hidden;
}
.bs-fcw-launcher-icon-circle::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 16%;
  width: 42%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}
.bs-fcw-launcher-glyph {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18));
}
.bs-fcw-launcher-glyph-emoji {
  position: relative;
  z-index: 2;
  font-size: 1.75rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.2));
}
.bs-fcw-launcher-glyph-fallback {
  position: relative;
  z-index: 1;
  font-size: 1.45rem;
  line-height: 1;
  filter: brightness(0) invert(1);
}
.bs-fcw-launcher-card-surface.is-school-group .bs-fcw-launcher-icon-circle,
.bs-fcw-launcher-icon.is-school-group .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 52%, #1d4ed8 100%);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.28),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(29, 78, 216, 0.28);
}
.bs-fcw-launcher-card-surface.is-grade-group .bs-fcw-launcher-icon-circle,
.bs-fcw-launcher-card-surface.is-grade-tone-1 .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #4ade80 0%, #22c55e 52%, #15803d 100%);
  border-color: rgba(22, 163, 74, 0.35);
  box-shadow:
    0 14px 26px rgba(22, 163, 74, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(21, 128, 61, 0.24);
}
.bs-fcw-launcher-card-surface.is-grade-tone-2 .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #fb923c 0%, #f97316 52%, #c2410c 100%);
  border-color: rgba(234, 88, 12, 0.35);
  box-shadow:
    0 14px 26px rgba(234, 88, 12, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(194, 65, 12, 0.24);
}
.bs-fcw-launcher-card-surface.is-grade-tone-3 .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #a78bfa 0%, #8b5cf6 52%, #6d28d9 100%);
  border-color: rgba(109, 40, 217, 0.35);
  box-shadow:
    0 14px 26px rgba(109, 40, 217, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(109, 40, 217, 0.24);
}
.bs-fcw-launcher-card-surface.is-grade-tone-4 .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #2dd4bf 0%, #14b8a6 52%, #0f766e 100%);
  border-color: rgba(13, 148, 136, 0.35);
  box-shadow:
    0 14px 26px rgba(13, 148, 136, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(15, 118, 110, 0.24);
}
.bs-fcw-launcher-card-surface.is-grade-tone-5 .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 52%, #1e40af 100%);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(30, 64, 175, 0.24);
}
.bs-fcw-launcher-card-surface.is-teacher-group .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #fb7185 0%, #f43f5e 52%, #be123c 100%);
  border-color: rgba(225, 29, 72, 0.35);
  box-shadow:
    0 14px 26px rgba(244, 63, 94, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(190, 18, 60, 0.24);
}
.bs-fcw-launcher-card-surface.is-parent-group .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #fbbf24 0%, #f59e0b 52%, #d97706 100%);
  border-color: rgba(217, 119, 6, 0.35);
  box-shadow:
    0 14px 26px rgba(217, 119, 6, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(180, 83, 9, 0.24);
}
.bs-fcw-launcher-card-surface.is-driver-group .bs-fcw-launcher-icon-circle {
  background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 52%, #5b21b6 100%);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow:
    0 14px 26px rgba(124, 58, 237, 0.26),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(91, 33, 182, 0.24);
}
.bs-fcw-launcher-card:hover .bs-fcw-launcher-card-surface,
.bs-fcw-launcher-card:focus-visible .bs-fcw-launcher-card-surface,
.bs-fcw-launcher-icon:hover .bs-fcw-launcher-icon-circle,
.bs-fcw-launcher-icon:focus-visible .bs-fcw-launcher-icon-circle {
  transform: translateY(-2px);
  box-shadow:
    0 14px 26px rgba(15, 23, 42, 0.1),
    0 4px 10px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.bs-fcw-launcher-card.is-active .bs-fcw-launcher-card-surface {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12),
    0 12px 24px rgba(37, 99, 235, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}
.bs-fcw-launcher-icon.is-active .bs-fcw-launcher-icon-circle {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18), 0 12px 24px rgba(37, 99, 235, 0.18);
}
.bs-fcw-launcher-icon-label {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  word-break: break-word;
}
.bs-fcw-launcher-card-sub {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.2;
  word-break: break-word;
}
.bs-fcw-launcher-count-badge,
.bs-fcw-launcher-unread {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
  z-index: 2;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}
.bs-fcw-launcher-count-badge.is-badge-school,
.bs-fcw-launcher-unread.is-badge-school { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.bs-fcw-launcher-count-badge.is-badge-grade-1,
.bs-fcw-launcher-unread.is-badge-grade-1 { background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%); }
.bs-fcw-launcher-count-badge.is-badge-grade-2,
.bs-fcw-launcher-unread.is-badge-grade-2 { background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%); }
.bs-fcw-launcher-count-badge.is-badge-grade-3,
.bs-fcw-launcher-unread.is-badge-grade-3 { background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); }
.bs-fcw-launcher-count-badge.is-badge-grade-4,
.bs-fcw-launcher-unread.is-badge-grade-4 { background: linear-gradient(180deg, #2dd4bf 0%, #0d9488 100%); }
.bs-fcw-launcher-count-badge.is-badge-grade-5,
.bs-fcw-launcher-unread.is-badge-grade-5 { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.bs-fcw-launcher-count-badge.is-badge-teacher,
.bs-fcw-launcher-unread.is-badge-teacher { background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%); }
.bs-fcw-launcher-count-badge.is-badge-parent,
.bs-fcw-launcher-unread.is-badge-parent { background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%); }
.bs-fcw-launcher-count-badge.is-badge-driver,
.bs-fcw-launcher-unread.is-badge-driver { background: linear-gradient(180deg, #a78bfa 0%, #7c3aed 100%); }
.bs-fcw-launcher-unread {
  background: linear-gradient(180deg, #f87171 0%, #ef4444 100%);
}
.bs-fcw-launcher-school-crown {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
  z-index: 2;
}
.bs-fcw-filter-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}
.bs-fcw-admin-bottom-nav {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  border-radius: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 18px 36px rgba(15, 23, 42, 0.14),
    0 6px 14px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: visible;
}
.bs-fcw-admin-bottom-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  padding: 2px 2px 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 58px;
}
.bs-fcw-admin-bottom-nav-item.is-disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}
.bs-fcw-admin-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
.bs-fcw-admin-bottom-nav-icon-circle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #f8fafc 0%, #eef2f7 52%, #e2e8f0 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow:
    0 5px 12px rgba(15, 23, 42, 0.07),
    inset 0 2px 6px rgba(255, 255, 255, 0.92),
    inset 0 -4px 8px rgba(148, 163, 184, 0.14);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
  overflow: hidden;
}
.bs-fcw-admin-bottom-nav-icon-circle::before {
  content: '';
  position: absolute;
  top: 9%;
  left: 15%;
  width: 42%;
  height: 28%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 1;
}
.bs-fcw-admin-bottom-nav-glyph {
  position: relative;
  z-index: 2;
  font-size: 1.12rem;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.16));
}
.bs-fcw-admin-bottom-nav-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(145deg, #f87171 0%, #ef4444 52%, #dc2626 100%);
  color: #ffffff;
  font-size: 0.54rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 7px rgba(239, 68, 68, 0.32);
  z-index: 3;
}
.bs-fcw-admin-bottom-nav-label {
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.bs-fcw-admin-bottom-nav-item.is-active .bs-fcw-admin-bottom-nav-icon-circle,
.bs-fcw-admin-bottom-nav-icon-circle.is-active-circle {
  width: 48px;
  height: 48px;
  background: linear-gradient(145deg, #60a5fa 0%, #3b82f6 52%, #1d4ed8 100%);
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow:
    0 14px 26px rgba(37, 99, 235, 0.32),
    inset 0 3px 8px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px rgba(29, 78, 216, 0.28);
  transform: translateY(-8px);
}
.bs-fcw-admin-bottom-nav-item.is-active .bs-fcw-admin-bottom-nav-glyph {
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.22));
}
.bs-fcw-admin-bottom-nav-item.is-active .bs-fcw-admin-bottom-nav-label {
  color: #2563eb;
  font-weight: 800;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode {
  position: relative;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-list.bs-fcw-admin-bottom-nav-list,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-list.bs-fcw-sp-bottom-nav-list {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-list.bs-fcw-admin-bottom-nav-list.bs-fcw-admin-slips-main-list {
  padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-list.bs-fcw-sp-bottom-nav-list.bs-fcw-parent-bank-slip-main-list {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-thread,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-thread {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-list,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-list,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-thread,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-thread,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode.bs-fcw-parent-bank-slip-room .bs-fcw-thread,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode.bs-fcw-admin-slips-room .bs-fcw-thread,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode.bs-fcw-admin-slips-room .bs-fcw-thread {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
/* Admin APK — Slips QR list: beat message-apk-messenger list padding resets (104px / 12px). */
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-list.bs-fcw-admin-bottom-nav-list.bs-fcw-admin-slips-main-list,
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode.bs-fcw-mobile-list .bs-fcw-list.bs-fcw-admin-bottom-nav-list.bs-fcw-admin-slips-main-list {
  padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px));
}
body.bs-msg-apk-mode #bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-admin-slips-main-tab {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-admin-slips-main-tab,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-parent-bank-slip-main-tab,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-parent-bank-slip-tab-panel,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode .bs-fcw-admin-slips-tab-panel,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode .bs-fcw-admin-slips-tab-panel {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode.bs-fcw-sp-profile-tab-active .bs-fcw-sp-profile-landing,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-admin-bottom-nav-mode.bs-fcw-sp-profile-tab-active .bs-fcw-sp-profile-landing {
  padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-hide-bottom-nav-in-room #bsFcwAdminBottomNav,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-hide-bottom-nav-in-room #bsFcwStudentParentBottomNav,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-hide-bottom-nav-in-room #bsFcwTeacherBottomNav,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-hide-bottom-nav-in-room #bsFcwDriverTeacherBottomNav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (max-width: 420px) {
  .bs-fcw-launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 7px;
  }
  .bs-fcw-launcher-icon-circle {
    width: 64px;
    height: 64px;
  }
  .bs-fcw-launcher-glyph {
    width: 26px;
    height: 26px;
  }
  .bs-fcw-launcher-card-surface {
    min-height: 136px;
    padding: 15px 8px 13px;
    border-radius: 20px;
  }
  .bs-fcw-admin-bottom-nav-item.is-active .bs-fcw-admin-bottom-nav-icon-circle,
  .bs-fcw-admin-bottom-nav-icon-circle.is-active-circle {
    width: 46px;
    height: 46px;
    transform: translateY(-7px);
  }
}

/* Student/Parent APK — Profile landing + bottom nav */
.bs-fcw-sp-bottom-nav {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 24;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  padding: 10px 12px 12px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.98) 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.9);
}
.bs-fcw-sp-bottom-nav-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #64748b;
}
.bs-fcw-sp-bottom-nav-item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-sp-bottom-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bs-fcw-sp-bottom-nav-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #eef2ff 100%);
  box-shadow: 0 6px 14px rgba(99, 102, 241, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bs-fcw-sp-bottom-nav-glyph {
  font-size: 18px;
  line-height: 1;
}
.bs-fcw-sp-bottom-nav-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}
.bs-fcw-sp-bottom-nav-badge.is-incoming-call {
  animation: bs-fcw-sp-incoming-call-pulse 1.2s ease-in-out infinite;
}
.bs-fcw-sp-bottom-nav-badge.is-homework {
  background: #6366f1;
}
@keyframes bs-fcw-sp-incoming-call-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}
.bs-fcw-sp-bottom-nav-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.bs-fcw-sp-bottom-nav-item.is-active .bs-fcw-sp-bottom-nav-icon-circle,
.bs-fcw-sp-bottom-nav-icon-circle.is-active-circle {
  width: 48px;
  height: 48px;
  transform: translateY(-6px);
  background: linear-gradient(145deg, #c084fc 0%, #7c3aed 100%);
  box-shadow: 0 10px 22px rgba(124, 58, 237, 0.28);
}
.bs-fcw-sp-bottom-nav-item.is-active .bs-fcw-sp-bottom-nav-label {
  color: #7c3aed;
  font-weight: 800;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-bottom-nav-mode {
  position: relative;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-topbar,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-search-wrap,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-filters,
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-room-head {
  display: none !important;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-body {
  background: linear-gradient(180deg, #f5f3ff 0%, #eef2ff 38%, #f8fafc 100%);
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-list-pane.bs-fcw-sp-profile-list-pane {
  width: 100%;
  max-width: 100%;
  border-right: 0;
}
#bsFloatingChatOverlay .bs-fcw-panel.bs-fcw-sp-profile-tab-active .bs-fcw-list.bs-fcw-sp-bottom-nav-list {
  background: transparent;
}
.bs-fcw-sp-profile-landing {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 12px 22px;
}
.bs-fcw-sp-profile-hero {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  align-items: center;
  gap: 4px;
}
.bs-fcw-sp-profile-hero-deco {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-size: 24px;
  line-height: 1;
  opacity: 0.95;
}
.bs-fcw-sp-profile-hero-deco.is-right {
  justify-content: flex-end;
}
.bs-fcw-sp-profile-hero-deco.is-left {
  justify-content: flex-start;
}
.bs-fcw-sp-profile-hero-star {
  color: #f59e0b;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.08em;
}
.bs-fcw-sp-profile-hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.bs-fcw-sp-profile-hero-logo {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #ffffff 0%, #dbeafe 55%, #bfdbfe 100%);
  box-shadow: 0 10px 24px rgba(99, 102, 241, 0.18), inset 0 0 0 3px rgba(255, 255, 255, 0.95);
  overflow: hidden;
}
.bs-fcw-sp-profile-school-logo-img,
.bs-fcw-sp-profile-cert-school-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-fcw-sp-profile-school-logo-fallback,
.bs-fcw-sp-profile-cert-school-logo-fallback {
  font-size: 22px;
  font-weight: 900;
  color: #1d4ed8;
}
.bs-fcw-sp-profile-hero-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  color: #0f172a;
}
.bs-fcw-sp-profile-parent-note {
  margin: -4px 0 0;
  text-align: center;
  font-size: 12px;
  color: #64748b;
}
.bs-fcw-sp-profile-id-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  border-radius: 24px;
  padding: 14px;
  background: linear-gradient(145deg, #dbeafe 0%, #eff6ff 42%, #ffffff 100%);
  box-shadow: 0 14px 30px rgba(59, 130, 246, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.92);
}
.bs-fcw-sp-profile-id-photo {
  width: 108px;
  height: 132px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.75);
}
.bs-fcw-sp-profile-id-photo.has-photo {
  background: #e2e8f0;
}
.bs-fcw-sp-profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bs-fcw-sp-profile-photo-fallback {
  font-size: 38px;
  font-weight: 800;
  color: #f8fafc;
}
.bs-fcw-sp-profile-id-details {
  min-width: 0;
}
.bs-fcw-sp-profile-id-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
}
.bs-fcw-sp-profile-id-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bs-fcw-sp-profile-id-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.bs-fcw-sp-profile-id-row-icon {
  font-size: 12px;
  line-height: 1;
}
.bs-fcw-sp-profile-id-row-label {
  color: #475569;
  font-weight: 700;
}
.bs-fcw-sp-profile-id-row-value {
  color: #0f172a;
  font-weight: 800;
  text-align: right;
  word-break: break-word;
}
.bs-fcw-sp-profile-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bs-fcw-sp-profile-launcher-card {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  min-height: 148px;
  padding: 14px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
}
.bs-fcw-sp-profile-launcher-card.is-year {
  background: linear-gradient(160deg, #ddd6fe 0%, #a78bfa 55%, #8b5cf6 100%);
}
.bs-fcw-sp-profile-launcher-card.is-attendance {
  background: linear-gradient(160deg, #fde68a 0%, #fbbf24 55%, #f59e0b 100%);
}
.bs-fcw-sp-profile-launcher-card.is-acceptance {
  background: linear-gradient(160deg, #bbf7d0 0%, #4ade80 55%, #16a34a 100%);
}
.bs-fcw-sp-profile-launcher-icon-circle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
  font-size: 20px;
  z-index: 1;
}
.bs-fcw-sp-profile-launcher-title {
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  z-index: 1;
}
.bs-fcw-sp-profile-launcher-value {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  z-index: 1;
}
.bs-fcw-sp-profile-launcher-bg {
  position: absolute;
  right: -4px;
  bottom: -8px;
  font-size: 52px;
  opacity: 0.16;
  pointer-events: none;
}
.bs-fcw-sp-profile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bs-fcw-sp-profile-action-btn {
  border: 0;
  border-radius: 18px;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bs-fcw-sp-profile-action-icon {
  font-size: 16px;
  line-height: 1;
}
.bs-fcw-sp-profile-action-btn.is-results {
  background: linear-gradient(145deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow: 0 12px 22px rgba(124, 58, 237, 0.24);
}
.bs-fcw-sp-profile-action-btn.is-attendance {
  background: linear-gradient(145deg, #60a5fa 0%, #2563eb 100%);
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
}
.bs-fcw-sp-profile-certificate {
  border-radius: 18px;
  padding: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.bs-fcw-sp-profile-cert-shell-head h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.bs-fcw-sp-profile-cert-shell-rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, #b45309 0%, #d97706 50%, #b45309 100%);
  border-radius: 1px;
}
.bs-fcw-sp-profile-cert-preview {
  border-radius: 4px;
  padding: 10px;
  background: linear-gradient(180deg, #fffef9 0%, #faf8f2 100%);
  border: 1px solid #c4a574;
  margin-bottom: 12px;
  box-shadow: inset 0 0 0 1px rgba(196, 165, 116, 0.35);
}
.bs-fcw-sp-profile-cert-preview-inner {
  position: relative;
  border-radius: 2px;
  padding: 18px 14px 14px;
  background: #fff;
  text-align: center;
  min-height: 220px;
  overflow: hidden;
}
.bs-fcw-sp-profile-cert-frame-outer,
.bs-fcw-sp-profile-cert-frame-inner {
  position: absolute;
  pointer-events: none;
  border: 1px solid #b8860b;
  border-radius: 2px;
}
.bs-fcw-sp-profile-cert-frame-outer {
  inset: 6px;
  opacity: 0.55;
}
.bs-fcw-sp-profile-cert-frame-inner {
  inset: 10px;
  opacity: 0.35;
}
.bs-fcw-sp-profile-cert-body {
  position: relative;
  z-index: 1;
  padding: 0 4px 8px;
}
.bs-fcw-sp-profile-cert-preview-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}
.bs-fcw-sp-profile-cert-school-logo,
.bs-fcw-sp-profile-cert-school-logo-fallback {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.bs-fcw-sp-profile-cert-school-logo {
  object-fit: cover;
}
.bs-fcw-sp-profile-cert-school-logo-fallback {
  font-size: 14px;
  font-weight: 800;
  color: #1e3a8a;
}
.bs-fcw-sp-profile-cert-preview-school {
  font-size: 11px;
  font-weight: 700;
  color: #1e3a8a;
  text-align: center;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
  max-width: 100%;
}
.bs-fcw-sp-profile-cert-preview-kicker {
  margin: 0 0 8px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: #475569;
  letter-spacing: 0.03em;
  text-transform: none;
}
.bs-fcw-sp-profile-cert-preview-rule {
  display: block;
  width: 72px;
  height: 1px;
  margin: 0 auto 10px;
  background: linear-gradient(90deg, transparent, #94a3b8, transparent);
}
.bs-fcw-sp-profile-cert-preview-name {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}
.bs-fcw-sp-profile-cert-preview-grade {
  margin: 6px 0 12px;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bs-fcw-sp-profile-cert-preview-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 5px 14px;
  border-radius: 2px;
  border: 1px solid #86efac;
  background: #f0fdf4;
  color: #166534;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bs-fcw-sp-profile-cert-preview:not(.has-result) .bs-fcw-sp-profile-cert-preview-badge {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}
.bs-fcw-sp-profile-cert-footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.bs-fcw-sp-profile-cert-preview-seal {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-fcw-sp-profile-cert-seal-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid #b45309;
  background: radial-gradient(circle at 35% 30%, #fef3c7 0%, #fde68a 45%, #d97706 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(180, 83, 9, 0.25);
}
.bs-fcw-sp-profile-cert-seal-label {
  position: relative;
  z-index: 1;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #92400e;
  text-align: center;
  line-height: 1.1;
  max-width: 36px;
}
.bs-fcw-sp-profile-cert-preview-sign-block {
  position: static;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 4px;
  max-width: 58%;
  min-width: 0;
}
.bs-fcw-sp-profile-cert-preview-sign-img {
  width: 112px;
  max-width: 100%;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left bottom;
  display: block;
  background: transparent;
  mix-blend-mode: multiply;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.92;
}
.bs-fcw-sp-profile-cert-preview-sign {
  position: static;
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid #94a3b8;
  width: 100%;
  font-size: 9px;
  color: #475569;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.bs-fcw-sp-profile-cert-btn {
  width: 100%;
  border: 1px solid #4338ca;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #4f46e5 0%, #3730a3 100%);
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bs-fcw-sp-profile-cert-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  border-color: #a5b4fc;
}

@media (min-width: 520px) {
  .bs-fcw-launcher-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 10px;
  }
}
.bs-fcw-admin-transport-tab-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 10px 14px;
}
.bs-fcw-admin-transport-tab-head {
  margin: 4px 2px 8px;
}
.bs-fcw-admin-transport-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.bs-fcw-admin-transport-card.is-active {
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}
.bs-fcw-admin-transport-card-select {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.bs-fcw-admin-transport-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.bs-fcw-admin-transport-card-avatar,
.bs-fcw-admin-transport-detail-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #dbeafe, #eff6ff);
  color: #1d4ed8;
  font-size: 1.35rem;
  flex: 0 0 auto;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.bs-fcw-admin-transport-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-fcw-admin-transport-card-main,
.bs-fcw-admin-transport-detail-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.bs-fcw-admin-transport-card-main strong,
.bs-fcw-admin-transport-detail-title strong {
  font-size: 0.98rem;
  color: #0f172a;
}
.bs-fcw-admin-transport-card-main small,
.bs-fcw-admin-transport-detail-title small {
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
}
.bs-fcw-admin-transport-status-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 700;
}
.bs-fcw-admin-transport-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bs-fcw-admin-transport-card-time {
  color: #94a3b8;
  font-size: 0.74rem;
}
.bs-fcw-admin-transport-message-btn {
  align-self: flex-end;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}
.bs-fcw-admin-transport-detail-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.bs-fcw-admin-transport-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bs-fcw-admin-transport-detail-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.bs-fcw-admin-transport-info-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.bs-fcw-admin-transport-info-card small {
  display: block;
  color: #64748b;
  font-size: 0.74rem;
  margin-bottom: 2px;
}
.bs-fcw-admin-transport-info-card strong {
  color: #0f172a;
  font-size: 0.92rem;
}
.bs-fcw-admin-transport-info-icon {
  font-size: 1.2rem;
  line-height: 1;
}
.bs-fcw-thread-admin-transport {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}
.bs-fcw-admin-transport-overlay {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  overflow: hidden;
}
.bs-fcw-admin-transport-overlay[hidden] {
  display: none !important;
}
.bs-fcw-admin-transport-settings-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.bs-fcw-admin-transport-settings-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}
.bs-fcw-admin-transport-settings-head-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bs-fcw-admin-transport-settings-head-main strong {
  display: block;
  color: #0f172a;
  font-size: 1rem;
}
.bs-fcw-admin-transport-settings-head-main small {
  display: block;
  color: #64748b;
  font-size: 0.76rem;
  line-height: 1.35;
}
.bs-fcw-admin-transport-settings-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #dbeafe, #eff6ff);
  font-size: 1.2rem;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
}
.bs-fcw-admin-transport-settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-fcw-panel.bs-fcw-admin-transport-settings-open .bs-fcw-body {
  position: relative;
}
.bs-fcw-admin-transport-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 4px 4px;
}
.bs-fcw-admin-transport-action-chip {
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
}
.bs-fcw-admin-transport-action-chip.is-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  color: #fff;
}
.bs-fcw-admin-transport-map-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-fcw-admin-transport-map-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.bs-fcw-admin-transport-map-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 0.95rem;
}
.bs-fcw-admin-transport-map-head p {
  margin: 4px 0 0;
  color: #64748b;
  font-size: 0.76rem;
}
.bs-fcw-admin-transport-map-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-fcw-admin-transport-map-empty {
  padding: 18px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  background: #f8fafc;
  text-align: center;
}
.bs-fcw-admin-transport-map-empty-icon {
  display: block;
  font-size: 1.6rem;
  margin-bottom: 8px;
}
.bs-fcw-admin-transport-map-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #64748b;
  font-size: 0.76rem;
}
.bs-fcw-admin-transport-students-panel,
.bs-fcw-admin-transport-settings-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-fcw-admin-transport-students-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bs-fcw-admin-transport-students-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bs-fcw-admin-transport-student-card {
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.bs-fcw-admin-transport-student-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bs-fcw-admin-transport-student-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  color: #64748b;
  font-size: 0.76rem;
}
.bs-fcw-admin-transport-student-status {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  font-weight: 700;
}
.bs-fcw-admin-transport-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-homework-post {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.bs-fcw-homework-fb-post {
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 12px 8px;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-body {
  padding: 0 12px 10px;
  min-width: 0;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-media-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-stats {
  margin: 0;
  padding: 0 12px 10px;
  border-top: none;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-actions {
  border-top: 1px solid #e2e8f0;
  margin-top: 0;
}
.bs-fcw-homework-post-author-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
}
.bs-fcw-homework-post-author-line strong {
  color: #0f172a;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
}
.bs-fcw-homework-post-subline {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
}
.bs-fcw-homework-post-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  min-width: 0;
}
.bs-fcw-homework-post-menu-wrap {
  position: relative;
  flex-shrink: 0;
}
.bs-fcw-homework-post-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  align-self: flex-start;
}
.bs-fcw-homework-post-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(37, 99, 235, 0.28);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.bs-fcw-homework-post-edit-btn:hover,
.bs-fcw-homework-post-edit-btn:focus-visible {
  background: #dbeafe;
  border-color: rgba(37, 99, 235, 0.45);
  outline: none;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.12);
}
.bs-fcw-homework-post-menu-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #475569;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.bs-fcw-homework-post-menu-btn:hover,
.bs-fcw-homework-post-menu-btn:focus-visible {
  border-color: rgba(37, 99, 235, 0.35);
  background: #f8fafc;
  outline: none;
}
.bs-fcw-homework-post-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 152px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
  z-index: 6;
}
.bs-fcw-homework-post-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
}
.bs-fcw-homework-post-menu-item:hover,
.bs-fcw-homework-post-menu-item:focus-visible {
  background: #f1f5f9;
  outline: none;
}
.bs-fcw-homework-post-menu-item.is-danger {
  color: #dc2626;
}
.bs-fcw-homework-post-menu-item.is-danger:hover,
.bs-fcw-homework-post-menu-item.is-danger:focus-visible {
  background: #fef2f2;
}
.bs-fcw-homework-edit-current-attach {
  display: grid;
  gap: 6px;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.bs-fcw-homework-edit-current-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.bs-fcw-homework-edit-current-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}
.bs-fcw-homework-edited-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
}
.bs-fcw-homework-edit-readonly {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  font-size: 0.78rem;
}
.bs-fcw-homework-edit-readonly span {
  color: #64748b;
  font-weight: 700;
}
.bs-fcw-homework-edit-readonly strong {
  color: #0f172a;
  font-weight: 800;
}
.bs-fcw-homework-post-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  color: #1d4ed8;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.bs-fcw-homework-post-avatar.has-photo {
  padding: 0;
  background: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.35);
}
.bs-fcw-homework-post-avatar.has-photo img,
.bs-fcw-homework-post-avatar img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  display: block;
}
.bs-fcw-homework-post-avatar-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.9rem;
  line-height: 1;
}
.bs-fcw-homework-post-avatar.has-photo .bs-fcw-homework-post-avatar-letter {
  display: none !important;
}
.bs-fcw-homework-post-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.bs-fcw-homework-post-meta strong {
  display: inline;
  color: #0f172a;
  font-size: 0.88rem;
}
.bs-fcw-homework-post-meta small {
  color: #64748b;
  font-size: 0.72rem;
}
.bs-fcw-homework-post-body h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 0.9rem;
}
.bs-fcw-homework-post-subject,
.bs-fcw-homework-post-time,
.bs-fcw-homework-post-text {
  margin: 0 0 8px;
  color: #334155;
  font-size: 0.78rem;
  line-height: 1.45;
}
.bs-fcw-homework-post-stats {
  margin-top: 10px;
  padding: 10px 0 8px;
  border-top: 1px solid #e2e8f0;
}
.bs-fcw-homework-reaction-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bs-fcw-homework-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  min-height: 30px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
button.bs-fcw-homework-reaction-pill {
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}
button.bs-fcw-homework-reaction-pill:hover,
button.bs-fcw-homework-reaction-pill:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
  outline: none;
}
.bs-fcw-homework-reaction-pill.is-active {
  box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.28), 0 4px 12px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}
.bs-fcw-homework-reaction-pill-good.is-active {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 4px 12px rgba(16, 185, 129, 0.12);
}
.bs-fcw-homework-reaction-pill-okay.is-active {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35), 0 4px 12px rgba(59, 130, 246, 0.12);
}
.bs-fcw-homework-reaction-pill-poor.is-active {
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.35), 0 4px 12px rgba(249, 115, 22, 0.12);
}
.bs-fcw-homework-reaction-pill-comment {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(4, 120, 87, 0.22);
  color: #047857;
  margin-left: auto;
}
.bs-fcw-homework-reaction-pill-comment .bs-fcw-homework-icon-comment {
  color: #047857;
}
.bs-fcw-homework-reaction-pill-comment.is-active,
.bs-fcw-homework-reaction-pill-comment.is-open {
  box-shadow: 0 0 0 2px rgba(4, 120, 87, 0.35), 0 4px 12px rgba(4, 120, 87, 0.12);
}
.bs-fcw-homework-reaction-pill-good {
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: rgba(16, 185, 129, 0.22);
  color: #047857;
}
.bs-fcw-homework-reaction-pill-okay {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  border-color: rgba(59, 130, 246, 0.22);
  color: #1d4ed8;
}
.bs-fcw-homework-reaction-pill-poor {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
  border-color: rgba(249, 115, 22, 0.24);
  color: #c2410c;
}
.bs-fcw-homework-reaction-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}
.bs-fcw-homework-reaction-type-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.bs-fcw-homework-reaction-pill-label {
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}
.bs-fcw-homework-reaction-pill-count {
  min-width: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}
.bs-fcw-homework-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #64748b;
}
.bs-fcw-homework-reaction-stat {
  flex: 1 1 auto;
  min-width: 0;
}
.bs-fcw-homework-comment-stat {
  flex: 0 0 auto;
  margin-left: auto;
}
.bs-fcw-homework-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}
.bs-fcw-homework-icon-reaction {
  color: #ef4444;
}
.bs-fcw-homework-icon-comment {
  color: #64748b;
}
.bs-fcw-homework-stat-count {
  color: #475569;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
  min-width: 0.75rem;
}
.bs-fcw-homework-action-count {
  color: #475569;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  min-width: 0.75rem;
}
.bs-fcw-homework-post-actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 0;
}
.bs-fcw-homework-reaction-btn-wrap {
  position: relative;
  flex: 1 1 50%;
}
.bs-fcw-homework-interaction-btn {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 10px 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.bs-fcw-homework-interaction-btn.is-icon-only {
  padding: 10px 12px;
  min-height: 42px;
}
.bs-fcw-homework-action-icon {
  width: 20px;
  height: 20px;
}
.bs-fcw-homework-interaction-btn:hover,
.bs-fcw-homework-interaction-btn:focus-visible {
  background: #f0fdf4;
  color: #047857;
  outline: none;
}
.bs-fcw-homework-interaction-btn:hover .bs-fcw-homework-icon-reaction,
.bs-fcw-homework-interaction-btn:focus-visible .bs-fcw-homework-icon-reaction,
.bs-fcw-homework-interaction-btn.is-active .bs-fcw-homework-icon-reaction {
  color: #ef4444;
}
.bs-fcw-homework-interaction-btn:hover .bs-fcw-homework-icon-comment,
.bs-fcw-homework-interaction-btn:focus-visible .bs-fcw-homework-icon-comment {
  color: #047857;
}
.bs-fcw-homework-interaction-btn.is-active {
  color: #047857;
}
.bs-fcw-homework-reaction-btn-wrap .bs-fcw-homework-reaction-btn {
  border-right: 1px solid #e2e8f0;
}
.bs-fcw-homework-reaction-picker {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  z-index: 7;
}
.bs-fcw-homework-reaction-picker[hidden] {
  display: none !important;
}
.bs-fcw-homework-reaction-choice {
  border: none;
  border-radius: 999px;
  padding: 8px 14px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.bs-fcw-homework-reaction-choice:hover,
.bs-fcw-homework-reaction-choice:focus-visible {
  background: #dcfce7;
  color: #047857;
  outline: none;
}
.bs-fcw-homework-reaction-choice.is-active {
  background: #bbf7d0;
  color: #047857;
}
.bs-fcw-homework-comments {
  border-top: 1px solid #e2e8f0;
  padding: 10px 0 0;
  display: grid;
  gap: 8px;
}
.bs-fcw-homework-comments-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.bs-fcw-homework-comments-empty {
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 0 4px;
}
.bs-fcw-homework-comment-item {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.bs-fcw-homework-comment-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.bs-fcw-homework-comment-head strong {
  color: #0f172a;
  font-size: 0.74rem;
}
.bs-fcw-homework-comment-head small {
  color: #94a3b8;
  font-size: 0.66rem;
  white-space: nowrap;
}
.bs-fcw-homework-comment-text {
  margin: 0;
  color: #334155;
  font-size: 0.76rem;
  line-height: 1.45;
  word-break: break-word;
}
.bs-fcw-homework-comment-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-fcw-homework-comment-input {
  flex: 1 1 160px;
  min-width: 0;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  padding: 9px 14px;
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  color: #0f172a;
}
.bs-fcw-homework-comment-input:focus {
  outline: none;
  border-color: rgba(4, 120, 87, 0.45);
  box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}
.bs-fcw-homework-comment-send {
  border: none;
  border-radius: 999px;
  padding: 9px 14px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.bs-fcw-homework-comment-send:hover,
.bs-fcw-homework-comment-send:focus-visible {
  filter: brightness(1.05);
  outline: none;
}
.bs-fcw-homework-comment-notice {
  flex: 1 1 100%;
  margin: 0;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .bs-fcw-homework-reaction-summary {
    gap: 6px;
  }
  .bs-fcw-homework-reaction-pill {
    padding: 4px 8px 4px 4px;
    gap: 5px;
  }
  .bs-fcw-homework-reaction-pill-label {
    font-size: 0.68rem;
  }
  .bs-fcw-homework-reaction-pill-comment {
    margin-left: 0;
  }
  .bs-fcw-homework-reaction-picker {
    left: 0;
    transform: none;
  }
}
.bs-fcw-homework-attachment-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
}
.bs-fcw-homework-attachment-pill.is-photo {
  background: #ecfdf5;
  color: #047857;
}
.bs-fcw-homework-attachment-pill.is-video {
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-homework-attachment-pill.is-file {
  background: #f1f5f9;
  color: #334155;
}
.bs-fcw-homework-post-attachment {
  margin-top: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.bs-fcw-homework-post-attachment.is-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-attachment.is-photo {
  border-top: 1px solid #e2e8f0;
}
.bs-fcw-homework-post-image-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
}
.bs-fcw-homework-post-image-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}
.bs-fcw-homework-post-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 0;
  border: none;
  background: #f1f5f9;
}
.bs-fcw-homework-fb-post .bs-fcw-homework-post-thumb {
  border-radius: 0;
}
.bs-fcw-homework-post-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: #0f172a;
}
.bs-fcw-homework-post-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 8px;
  font-size: 0.72rem;
  color: #64748b;
}
.bs-fcw-homework-post-meta-item {
  display: inline-flex;
  align-items: center;
}
.bs-fcw-homework-post-attachment.is-photo.is-unavailable {
  margin-top: 8px;
}
.bs-fcw-homework-post-attachment.is-video {
  display: grid;
  gap: 6px;
  max-width: 100%;
}
.bs-fcw-homework-post-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 280px;
  border-radius: 0;
  border: none;
  background: #0f172a;
}
.bs-fcw-homework-post-attachment.is-file {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-fcw-homework-post-attach-name {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 600;
}
.bs-fcw-homework-review-box {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  display: grid;
  gap: 10px;
}
.bs-fcw-homework-review-field {
  display: grid;
  gap: 6px;
}
.bs-fcw-homework-review-field span {
  color: #0b2d75;
  font-size: 0.74rem;
  font-weight: 800;
}
.bs-fcw-homework-review-field textarea,
.bs-fcw-homework-review-field select,
.bs-fcw-homework-review-field input {
  width: 100%;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  font: inherit;
  color: #0f172a;
}
.bs-fcw-homework-save-review-btn {
  justify-self: start;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
  cursor: pointer;
}
.bs-fcw-homework-review-notice {
  margin: 0;
  padding: 0 4px;
  color: #047857;
  font-size: 0.78rem;
  font-weight: 700;
}
.bs-fcw-homework-status-badge.status-pending {
  background: #fef3c7;
  color: #92400e;
}
.bs-fcw-homework-status-badge.status-reviewed {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-homework-status-badge.status-needs-correction {
  background: #fee2e2;
  color: #b91c1c;
}
.bs-fcw-homework-status-badge.status-posted {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-homework-day-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 0.75rem;
}
.bs-fcw-homework-day-separator span {
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}
.bs-fcw-student-homework-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0.75rem 0 0.5rem;
}
.bs-fcw-homework-create-btn {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-weight: 600;
  padding: 0.55rem 1rem;
  cursor: pointer;
}
.bs-fcw-homework-my-post-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.14);
  color: #047857;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.bs-fcw-student-homework-post.is-my-post {
  border-color: rgba(5, 150, 105, 0.25);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), inset 0 0 0 1px rgba(5, 150, 105, 0.08);
}
.bs-fcw-student-homework-create-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
.bs-fcw-student-homework-create-modal[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.bs-fcw-student-homework-create-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.45);
  pointer-events: auto;
}
.bs-fcw-student-homework-create-card {
  position: relative;
  z-index: 2;
  width: min(92vw, 420px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}
.bs-fcw-homework-form-head-with-close {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-right: 36px;
  margin: -1rem -1rem 0;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
  background: linear-gradient(180deg, #fff 78%, rgba(255, 255, 255, 0));
}
.bs-fcw-homework-form-head-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.bs-fcw-student-homework-create-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 30;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(134, 239, 172, 0.75);
  border-radius: 50%;
  background: #f0fdf4;
  color: #047857;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.1);
}
.bs-fcw-student-homework-create-close:hover,
.bs-fcw-student-homework-create-close:focus-visible {
  background: #dcfce7;
  border-color: rgba(34, 197, 94, 0.55);
  outline: none;
}
.bs-fcw-homework-attachment-field {
  gap: 10px;
}
.bs-fcw-homework-attachment-field .bs-fcw-homework-attachment-chip.is-compact {
  align-self: flex-start;
}
.bs-fcw-homework-attachment-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bs-fcw-homework-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(134, 239, 172, 0.75);
  border-radius: 12px;
  background: #f8fafc;
  color: #065f46;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.06);
}
.bs-fcw-homework-attach-btn:hover,
.bs-fcw-homework-attach-btn:focus-visible {
  background: #f0fdf4;
  border-color: rgba(34, 197, 94, 0.55);
  outline: none;
}
.bs-fcw-homework-attach-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.bs-fcw-homework-attachment-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(134, 239, 172, 0.75);
  border-radius: 999px;
  background: #ecfdf5;
  color: #065f46;
  font-size: 0.74rem;
}
.bs-fcw-homework-attachment-chip.is-compact {
  display: inline-flex;
  width: auto;
  max-width: 100%;
  min-height: 0;
  margin-top: 6px;
  padding: 4px 8px;
  gap: 6px;
  border-radius: 8px;
  background: #f8fafc;
  border-color: #e2e8f0;
  box-shadow: none;
}
.bs-fcw-homework-attachment-chip.is-compact .bs-fcw-homework-attachment-chip-type {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.68rem;
  padding: 1px 6px;
  background: #eef2ff;
  color: #4338ca;
}
.bs-fcw-homework-attachment-chip.is-compact .bs-fcw-homework-attachment-chip-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}
.bs-fcw-homework-attachment-chip.is-compact .bs-fcw-homework-attachment-chip-remove {
  width: 20px;
  height: 20px;
  font-size: 0.72rem;
}
.bs-fcw-homework-attachment-chip-type {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.12);
  color: #047857;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.64rem;
}
.bs-fcw-homework-attachment-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.bs-fcw-homework-attachment-chip-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.06);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-homework-attachment-chip-remove:hover,
.bs-fcw-homework-attachment-chip-remove:focus-visible {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  outline: none;
}
@media (max-width: 768px) {
  .bs-fcw-homework-attachment-picker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bs-fcw-homework-attach-btn {
    justify-content: center;
    padding: 8px 6px;
    font-size: 0.72rem;
  }
}
.bs-fcw-homework-subject-empty,
.bs-fcw-homework-field-notice {
  margin: 6px 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
}
.bs-fcw-homework-subject-empty {
  color: #64748b;
  font-weight: 600;
}
.bs-fcw-homework-field-notice {
  color: #b45309;
  font-weight: 700;
}
.bs-fcw-homework-field select:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  background: #f8fafc;
}
.bs-fcw-homework-scope-field {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}
.bs-fcw-homework-scope-field-label {
  color: #0b2d75;
  font-size: 0.74rem;
  font-weight: 800;
}
.bs-fcw-homework-scope-select-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.bs-fcw-homework-scope-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #f8fafc;
  color: #1e3a8a;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-homework-scope-btn:hover,
.bs-fcw-homework-scope-btn:focus-visible {
  background: #eff6ff;
  border-color: #93c5fd;
  outline: none;
}
.bs-fcw-homework-scope-btn-caret {
  font-size: 0.72rem;
  opacity: 0.75;
}
.bs-fcw-homework-scope-menu {
  position: absolute;
  z-index: 12;
  left: 0;
  top: calc(100% + 4px);
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}
.bs-fcw-homework-scope-menu li {
  margin: 0;
}
.bs-fcw-homework-scope-menu button {
  width: 100%;
  display: block;
  text-align: left;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.bs-fcw-homework-scope-menu button:hover,
.bs-fcw-homework-scope-menu button:focus-visible {
  background: #f0fdf4;
  outline: none;
}
.bs-fcw-homework-clear-btn {
  pointer-events: auto;
}
.bs-fcw-homework-scope-menu button.is-active {
  background: #ecfdf5;
  color: #047857;
  font-weight: 800;
}
.bs-fcw-badge-teachers {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
.bs-fcw-badge-members {
  background: rgba(14, 116, 144, 0.12);
  color: #0e7490;
}
.bs-fcw-badge-class {
  background: rgba(79, 70, 229, 0.12);
  color: #4338ca;
}
.bs-fcw-badge-driver {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}
.bs-fcw-lesson-plan-review-panel .bs-fcw-lesson-plan-field {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #334155;
}
.bs-fcw-lesson-plan-review-panel .bs-fcw-lesson-plan-field span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.15rem;
}
.bs-fcw-lesson-plan-storage-note {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: #64748b;
}
.msg-admin-lesson-plan-teachers-badge {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
}
@media (max-width: 768px) {
  .bs-fcw-homework-form {
    grid-template-columns: 1fr;
  }
}
.bs-fcw-card-avatar-emoji,
.bs-fcw-room-avatar-emoji {
  font-size: 1.35rem;
  line-height: 1;
}
.bs-fcw-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #93c5fd #eef4ff;
  padding: 14px;
  background: #f8fafc;
}
.bs-fcw-thread::-webkit-scrollbar {
  width: 8px;
}
.bs-fcw-thread::-webkit-scrollbar-track {
  background: #eef4ff;
  border-radius: 999px;
}
.bs-fcw-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd, #60a5fa);
  border-radius: 999px;
  border: 2px solid #eef4ff;
}
.bs-fcw-thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
}
.bs-fcw-bubble-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  max-width: 78%;
}
.bs-fcw-bubble-row.is-mine {
  margin-left: auto;
  align-items: flex-end;
}
.bs-fcw-bubble-row.is-theirs {
  align-items: flex-start;
}
.bs-fcw-bubble-row.is-group {
  max-width: 92%;
}
.bs-fcw-bubble-group-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.bs-fcw-bubble-group-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}
.bs-fcw-bubble-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e4e6eb;
  color: #050505;
  font-size: 0.62rem;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.bs-fcw-bubble-avatar-spacer {
  width: 24px;
  min-width: 24px;
  flex-shrink: 0;
}
.bs-fcw-bubble-row.is-group.is-group-stack {
  margin-top: 1px;
}
.bs-fcw-bubble-row.is-group.is-group-stack .bs-fcw-bubble-group-col .bs-fcw-bubble {
  margin-top: 0;
}
.bs-fcw-bubble-avatar.has-image {
  padding: 0;
  background: #f1f5f9;
}
.bs-fcw-bubble-avatar.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.bs-fcw-bubble-sender-name {
  display: block;
  margin: 0 0 1px 4px;
  font-size: 0.66rem;
  font-weight: 700;
  color: #65676b;
  line-height: 1.15;
}
.bs-fcw-bubble-row.is-group .bs-fcw-bubble {
  background: #e4e6eb;
  border-color: #e4e6eb;
  color: #050505;
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: none;
}
.bs-fcw-bubble-row.is-group .bs-fcw-bubble-time {
  margin-left: 2px;
}
.bs-fcw-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.bs-fcw-bubble p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
  word-break: break-word;
}
.bs-fcw-bubble-time {
  font-size: 0.65rem;
  color: #94a3b8;
  margin-top: 4px;
}
/* Direct chat read receipt ticks (sender's own messages only) */
.bs-fcw-tick {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
  vertical-align: baseline;
  user-select: none;
}
.bs-fcw-tick.is-sent {
  color: #94a3b8;
}
.bs-fcw-tick.is-read {
  color: #2563eb;
}
.bs-fcw-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e8eef5;
  flex-shrink: 0;
  background: #fff;
}
.bs-fcw-compose[hidden],
#bsFcwComposeForm[data-fcw-all-student-homework-composer="1"] {
  display: none !important;
}
.bs-fcw-compose-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.bs-fcw-compose-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.bs-fcw-compose-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.bs-fcw-compose-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.bs-fcw-compose-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}
.bs-fcw-action-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #2563eb;
  background: linear-gradient(145deg, #ffffff, #eef4ff);
  box-shadow:
    3px 3px 8px rgba(148, 163, 184, 0.18),
    -2px -2px 6px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(147, 197, 253, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.bs-fcw-action-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.bs-fcw-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    4px 4px 10px rgba(37, 99, 235, 0.16),
    -2px -2px 6px rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(59, 130, 246, 0.45);
}
.bs-fcw-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-attachment-preview {
  width: 100%;
}
.bs-fcw-attachment-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: linear-gradient(145deg, #ffffff, #f8fbff);
  border: 1px solid rgba(147, 197, 253, 0.35);
  box-shadow:
    2px 2px 6px rgba(148, 163, 184, 0.12),
    -1px -1px 4px rgba(255, 255, 255, 0.95);
}
.bs-fcw-attachment-chip-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.bs-fcw-attachment-chip-copy {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
.bs-fcw-attachment-chip-copy strong {
  display: block;
  font-size: 0.82rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-fcw-attachment-chip-copy small {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-fcw-attachment-chip-clear {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #eff6ff;
  color: #64748b;
  cursor: pointer;
  flex-shrink: 0;
}
.bs-fcw-attachment-chip.is-voice {
  border-color: #bfdbfe;
  background: linear-gradient(135deg, #f8fbff, #eff6ff);
}
.bs-fcw-voice-preview-play {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 0.72rem;
}
.bs-fcw-voice-recorder {
  border: 1px solid #bfdbfe;
  border-radius: 18px;
  background: linear-gradient(165deg, #ffffff, #eff6ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 8px 20px rgba(37, 99, 235, 0.08);
  overflow: hidden;
}
.bs-fcw-voice-recorder[hidden] {
  display: none !important;
}
.bs-fcw-voice-recorder-inner {
  padding: 10px 12px 12px;
}
.bs-fcw-voice-recorder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bs-fcw-voice-recorder-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: 0.02em;
}
.bs-fcw-voice-recorder-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #eff6ff;
  color: #64748b;
  cursor: pointer;
}
.bs-fcw-voice-recorder-body {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 6px 0 8px;
}
.bs-fcw-voice-recorder-mic {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #3b82f6, #1d4ed8);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}
.bs-fcw-voice-recorder-mic svg {
  width: 24px;
  height: 24px;
}
.bs-fcw-voice-recorder-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 28px;
}
.bs-fcw-voice-recorder-wave i,
.bs-fcw-voice-wave i {
  display: block;
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: #93c5fd;
}
.bs-fcw-voice-recorder.is-recording .bs-fcw-voice-recorder-wave i {
  animation: bsFcwVoiceWavePulse 0.9s ease-in-out infinite alternate;
}
.bs-fcw-voice-recorder.is-recording .bs-fcw-voice-recorder-wave i:nth-child(2n) {
  animation-delay: 0.12s;
}
.bs-fcw-voice-recorder.is-recording .bs-fcw-voice-recorder-wave i:nth-child(3n) {
  animation-delay: 0.24s;
}
@keyframes bsFcwVoiceWavePulse {
  from { height: 8px; opacity: 0.55; }
  to { height: 24px; opacity: 1; }
}
.bs-fcw-voice-recorder-status {
  margin: 0;
  font-size: 0.74rem;
  color: #64748b;
}
.bs-fcw-voice-recorder-timer {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
.bs-fcw-voice-recorder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.bs-fcw-voice-rec-btn {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.74rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-voice-rec-btn.is-cancel {
  background: #f1f5f9;
  color: #475569;
}
.bs-fcw-voice-rec-btn.is-record,
.bs-fcw-voice-rec-btn.is-stop {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
}
.bs-fcw-voice-rec-btn.is-send {
  background: #16a34a;
  color: #fff;
}
.bs-fcw-voice-bubble {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: min(100%, 240px);
  padding: 10px 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #dbeafe;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.08);
}
.bs-fcw-bubble-row.is-mine .bs-fcw-voice-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
}
.bs-fcw-voice-play-btn {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.bs-fcw-bubble-row.is-theirs .bs-fcw-voice-play-btn {
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-voice-play-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-voice-play-btn.is-playing .bs-fcw-voice-play-icon {
  font-size: 0.62rem;
}
.bs-fcw-voice-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  flex: 1;
  min-width: 72px;
  height: 22px;
}
.bs-fcw-bubble-row.is-mine .bs-fcw-voice-wave i {
  background: rgba(255, 255, 255, 0.75);
}
.bs-fcw-voice-duration {
  font-size: 0.72rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.bs-fcw-voice-label {
  display: none;
}
.bs-fcw-voice-caption {
  display: none;
}
.bs-fcw-bubble-row.is-voice {
  align-items: flex-end;
}
.bs-fcw-bubble-row.is-image {
  align-items: flex-end;
}
.bs-fcw-bubble.bs-fcw-bubble-image {
  padding: 6px;
  max-width: min(100%, 320px);
}
.bs-fcw-bubble-row.is-mine .bs-fcw-bubble.bs-fcw-bubble-image {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.bs-fcw-image-bubble {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bs-fcw-image-thumb-btn {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
}
.bs-fcw-image-thumb {
  display: block;
  width: 100%;
  max-width: 280px;
  max-height: 280px;
  object-fit: cover;
  border-radius: 14px;
}
.bs-fcw-image-caption {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.bs-fcw-bubble-row.is-mine .bs-fcw-image-caption {
  color: rgba(255, 255, 255, 0.92);
}
.bs-fcw-bubble-row.is-theirs .bs-fcw-image-caption {
  color: #334155;
}
.bs-fcw-attachment-chip.is-image {
  align-items: center;
}
.bs-fcw-attachment-chip-thumb {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}
.bs-fcw-attachment-chip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-fcw-image-lightbox[hidden] {
  display: none !important;
}
.bs-fcw-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.bs-fcw-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(4px);
}
.bs-fcw-image-lightbox-toolbar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  left: max(12px, env(safe-area-inset-left, 0px));
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
.bs-fcw-image-lightbox-close,
.bs-fcw-image-lightbox-download {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  min-height: 44px;
}
.bs-fcw-image-lightbox-close {
  min-width: 44px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 1.1rem;
  line-height: 1;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.bs-fcw-image-lightbox-download {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}
.bs-fcw-image-lightbox-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(96vw, 920px);
  max-height: min(92vh, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
.bs-fcw-image-lightbox-img {
  max-width: min(96vw, 900px);
  max-height: calc(92vh - 96px);
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  background: #0f172a;
  pointer-events: auto;
}
.bs-fcw-image-lightbox-caption {
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.82rem;
  text-align: center;
}
body.bs-fcw-image-lightbox-open {
  overflow: hidden;
}
.bs-fcw-bubble-attachment {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
}
.bs-fcw-bubble-row.is-theirs .bs-fcw-bubble-attachment {
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-bubble-forward-tag {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #2563eb;
}
.bs-fcw-bubble-meta {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
}
.bs-fcw-bubble-row.is-mine .bs-fcw-bubble-meta {
  color: rgba(255, 255, 255, 0.82);
}
.bs-fcw-bubble-deleted p,
.bs-fcw-bubble-row.is-deleted .bs-fcw-bubble p,
.bs-message-bubble.is-deleted p {
  font-style: italic;
  color: #94a3b8;
}
.bs-fcw-bubble-row.is-deleted .bs-fcw-bubble,
.bs-fcw-bubble-row.is-deleted.is-mine .bs-fcw-bubble,
.bs-fcw-bubble-row.is-deleted.is-theirs .bs-fcw-bubble,
.bs-fcw-bubble-row.is-deleted .bs-message-bubble.is-deleted,
.bs-fcw-bubble-row.is-deleted .bs-fcw-bubble.bs-fcw-bubble-deleted {
  background: #f1f5f9;
  background-image: none;
  border: 1px dashed #cbd5e1;
  border-color: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
}
.bs-fcw-bubble-row.is-deleted .bs-fcw-bubble-time {
  color: #94a3b8;
}
/* Direct chat phone-call history records: centered pill, non-interactive */
.bs-fcw-bubble-row.bs-fcw-callrec-row {
  justify-content: center;
  align-items: center;
  margin: 8px 0;
}
.bs-fcw-callrec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 86%;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none;
  user-select: none;
}
.bs-fcw-callrec-pill .bs-fcw-callrec-icon {
  font-size: 0.85rem;
  line-height: 1;
}
.bs-fcw-callrec-pill .bs-fcw-callrec-time {
  color: #94a3b8;
  font-weight: 500;
  font-size: 0.68rem;
}
.bs-fcw-callrec-pill .bs-fcw-callrec-time::before {
  content: '•';
  margin-right: 6px;
  color: #cbd5e1;
}
.bs-fcw-callrec-pill[data-call-status='missed'],
.bs-fcw-callrec-pill[data-call-status='rejected'] {
  color: #b91c1c;
  background: #fef2f2;
  border-color: #fecaca;
}
.bs-fcw-edit-banner,
#bsFcwEditBanner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  border: 0 !important;
}
.bs-fcw-edit-banner-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1d4ed8;
}
.bs-fcw-edit-banner-cancel {
  border: 0;
  background: #fff;
  color: #64748b;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.bs-fcw-compose-edit-cancel {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.bs-fcw-compose-edit-cancel:hover {
  background: #e2e8f0;
  color: #334155;
}
.bs-fcw-compose-edit-cancel[hidden] {
  display: none !important;
}
.bs-fcw-action-btn-camera {
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.14);
}
.bs-fcw-action-btn-camera:hover:not(:disabled) {
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  color: #1e40af;
}
.bs-fcw-photo-compose-preview {
  position: relative;
  display: inline-block;
  max-width: 220px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(191, 219, 254, 0.9);
  background: #f8fbff;
}
.bs-fcw-photo-compose-preview img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}
.bs-fcw-photo-compose-clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.bs-fcw-photo-compose-meta {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}
.bs-fcw-camera-capture {
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 16px;
  background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}
.bs-fcw-camera-capture[hidden] {
  display: none !important;
}
.bs-fcw-camera-capture-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.bs-fcw-camera-capture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-camera-capture-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #1d4ed8;
}
.bs-fcw-camera-capture-close {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.bs-fcw-camera-capture-body {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  min-height: 180px;
}
.bs-fcw-camera-capture-video {
  display: block;
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  background: #0f172a;
}
.bs-fcw-camera-capture-status {
  margin: 0;
  padding: 8px 10px 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #475569;
  text-align: center;
}
.bs-fcw-camera-capture-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.bs-fcw-camera-capture-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-camera-capture-btn.is-cancel {
  background: #fff;
  color: #64748b;
  border: 1px solid #dbeafe;
}
.bs-fcw-camera-capture-btn.is-snap {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}
.bs-fcw-camera-capture-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.bs-fcw-photo-review {
  border: 1px solid rgba(191, 219, 254, 0.95);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.14);
  overflow: hidden;
}
.bs-fcw-photo-review[hidden] {
  display: none !important;
}
.bs-fcw-photo-review-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}
.bs-fcw-photo-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bs-fcw-photo-review-title {
  font-size: 0.86rem;
  color: #1d4ed8;
}
.bs-fcw-photo-review-effect-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef4ff;
}
.bs-fcw-photo-review-preview-wrap {
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  max-height: 320px;
}
.bs-fcw-photo-review-canvas {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: contain;
}
.bs-fcw-photo-review-controls {
  display: grid;
  gap: 8px;
}
.bs-fcw-photo-review-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-fcw-photo-effect-btn,
.bs-fcw-photo-tool-btn {
  border: 1px solid #dbeafe;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-photo-effect-btn.is-active,
.bs-fcw-photo-tool-btn.is-active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: transparent;
  color: #fff;
}
.bs-fcw-photo-review-slider {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}
.bs-fcw-photo-review-slider input[type="range"] {
  width: 100%;
  accent-color: #2563eb;
}
.bs-fcw-photo-review-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bs-fcw-photo-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.bs-fcw-photo-review-btn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-photo-review-btn.is-cancel,
.bs-fcw-photo-review-btn.is-retake {
  background: #fff;
  color: #64748b;
  border: 1px solid #dbeafe;
}
.bs-fcw-photo-review-btn.is-use {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}
.bs-fcw-photo-compose-effect {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.82);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 800;
}
.bs-fcw-image-bubble-unavailable .bs-fcw-image-unavailable-card {
  min-width: 180px;
  max-width: 280px;
  padding: 16px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  border: 1px dashed #cbd5e1;
  text-align: center;
}
.bs-fcw-image-unavailable-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 6px;
}
.bs-fcw-image-unavailable-text {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
  line-height: 1.35;
}
.bs-fcw-image-unavailable-name {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  color: #94a3b8;
  word-break: break-word;
}
.bs-fcw-msg-action-menu {
  position: fixed;
  z-index: 100010;
  min-width: 190px;
  padding: 6px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
}
.bs-fcw-msg-action-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
.bs-fcw-msg-action-btn:hover,
.bs-fcw-msg-action-btn:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
}
.bs-fcw-msg-action-btn.is-disabled,
.bs-fcw-msg-action-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-msg-action-icon {
  width: 22px;
  text-align: center;
  color: #2563eb;
}
.bs-fcw-msg-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 100011;
}
.bs-fcw-msg-action-sheet-backdrop,
.bs-fcw-msg-forward-backdrop,
.bs-fcw-msg-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
}
.bs-fcw-msg-action-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  box-shadow: 0 -10px 30px rgba(15, 23, 42, 0.16);
}
.bs-fcw-msg-action-sheet-head {
  padding: 4px 6px 10px;
  color: #64748b;
  font-size: 0.78rem;
}
.bs-fcw-msg-action-sheet-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bs-fcw-msg-action-sheet-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 78px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-msg-action-sheet-btn.is-disabled,
.bs-fcw-msg-action-sheet-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bs-fcw-msg-action-sheet-close {
  width: 100%;
  margin-top: 10px;
  border: 0;
  border-radius: 12px;
  padding: 12px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-msg-action-menu[hidden],
.bs-fcw-msg-action-sheet[hidden],
.bs-fcw-msg-forward-modal[hidden],
.bs-fcw-msg-delete-modal[hidden],
.bs-fcw-msg-toast[hidden] {
  display: none !important;
}
.bs-fcw-msg-forward-modal:not([hidden]),
.bs-fcw-msg-delete-modal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 100012;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bs-fcw-msg-forward-panel,
.bs-fcw-msg-delete-panel {
  position: relative;
  z-index: 1;
  width: min(320px, calc(100% - 32px));
  max-height: min(70vh, 520px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(226, 232, 240, 0.95);
}
.bs-fcw-msg-forward-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.bs-fcw-msg-delete-panel {
  padding: 16px;
}
.bs-fcw-msg-forward-sub {
  margin: 0;
  padding: 10px 16px 0;
  font-size: 0.74rem;
  color: #64748b;
}
.bs-fcw-msg-forward-list {
  padding: 12px 16px 16px;
  overflow: auto;
}
.bs-fcw-msg-forward-item {
  width: 100%;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.bs-fcw-msg-forward-item:hover,
.bs-fcw-msg-forward-item:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
}
.bs-fcw-msg-forward-item-name {
  display: block;
  font-weight: 700;
  color: #0f172a;
}
.bs-fcw-msg-forward-item small {
  display: block;
  margin-top: 2px;
  color: #64748b;
}
.bs-fcw-msg-forward-close {
  border: 0;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  font-size: 1rem;
}
.bs-fcw-msg-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.bs-fcw-msg-delete-cancel,
.bs-fcw-msg-delete-confirm {
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  font-weight: 700;
  cursor: pointer;
}
.bs-fcw-msg-delete-cancel {
  background: #f1f5f9;
  color: #475569;
}
.bs-fcw-msg-delete-confirm {
  background: #ef4444;
  color: #fff;
}
.bs-fcw-msg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 100013;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
}
.bs-fcw-plus-btn,
.bs-fcw-send-btn {
  border-radius: 10px;
  border: 1px solid #d8e1ee;
  background: #fff;
  font-weight: 800;
  cursor: pointer;
}
.bs-fcw-send-btn {
  width: 42px;
  height: 42px;
  min-width: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: #2563eb;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}
.bs-fcw-send-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
.bs-fcw-send-btn:disabled,
.bs-fcw-input:disabled {
  opacity: 0.5;
}
.bs-fcw-input {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 0.86rem;
}
.bs-fcw-notice {
  margin: 0;
  padding: 0 12px 8px;
  font-size: 0.72rem;
  color: #b45309;
  min-height: 1em;
  flex-shrink: 0;
}
.bs-fcw-footer {
  padding: 8px 12px;
  border-top: 1px solid #e8eef5;
  background: #f8fafc;
  text-align: center;
  flex-shrink: 0;
}
.bs-fcw-full-link {
  font-size: 0.75rem;
  font-weight: 800;
  color: #2563eb;
  text-decoration: none;
}
.bs-fcw-empty {
  padding: 24px 16px;
  text-align: center;
  color: #64748b;
}
.bs-fcw-empty strong {
  display: block;
  color: #0f172a;
  margin-bottom: 6px;
}
.bs-fcw-empty-room .bs-fcw-empty-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 8px;
}
@media (max-width: 768px) {
  .bs-fcw-overlay {
    padding: 0;
  }
  .bs-fcw-panel {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .bs-fcw-body {
    grid-template-columns: 1fr;
  }
  .bs-fcw-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .bs-fcw-filters::-webkit-scrollbar {
    display: none;
  }
  .bs-fcw-panel.bs-fcw-mobile-list .bs-fcw-room-pane {
    display: none;
  }
  .bs-fcw-panel.bs-fcw-mobile-room .bs-fcw-list-pane {
    display: none;
  }
  .bs-fcw-compose-row {
    gap: 6px;
  }
  .bs-fcw-action-btn {
    width: 34px;
    height: 34px;
  }
  .bs-fcw-send-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* Admin Quick Popup Chat — green theme (floating widget, Admin only) */
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-topbar {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%);
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-filter-tab:hover {
  border-color: #bbf7d0;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card:hover {
  background: #f0fdf4;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card.is-active {
  background: #dcfce7;
  border-color: #86efac;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card-avatar {
  background: linear-gradient(145deg, #15803d, #22c55e);
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-room-avatar {
  background: #16a34a;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #16a34a;
  border-color: #16a34a;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-bubble-row.is-deleted .bs-fcw-bubble,
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-bubble-row.is-deleted.is-mine .bs-fcw-bubble,
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-bubble-row.is-deleted.is-theirs .bs-fcw-bubble {
  background: #f1f5f9;
  background-image: none;
  border: 1px dashed #cbd5e1;
  border-color: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-send-btn {
  background: #16a34a;
  border-color: #16a34a;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-send-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-full-link {
  color: #15803d;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-search:focus {
  border-color: #86efac;
  outline: 2px solid rgba(22, 163, 74, 0.2);
  outline-offset: 0;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-badge-role {
  background: #f0fdf4;
  color: #94a3b8;
  font-weight: 500;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-badge-school {
  background: #f8fafc;
  color: #94a3b8;
  font-weight: 500;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-badge-protected {
  background: #f0fdf4;
  color: #86b39a;
  font-weight: 500;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card.is-unread .bs-fcw-badge-role {
  background: #dcfce7;
  color: #166534;
  font-weight: 600;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card.is-unread .bs-fcw-badge-school {
  background: #e2e8f0;
  color: #334155;
  font-weight: 600;
}
.bs-fcw-overlay.bs-fcw-theme-admin-green .bs-fcw-card.is-unread .bs-fcw-badge-protected {
  background: #bbf7d0;
  color: #14532d;
  font-weight: 600;
}
/* End Admin Quick Popup Chat green theme */

/* End floating chat widget */

.bs-fee-sync-correction {
  font-size: 0.875rem;
  line-height: 1.4;
}

.msg-admin-chat-list-body .msg-stu-page-header,
.msg-admin-chat-list-body .msg-stu-filter-pills,
.msg-admin-chat-list-body .msg-stu-list-footer {
  display: none !important;
}

.msg-admin-chat-list-body .msg-stu-sidebar-nav {
  display: none !important;
}

.msg-admin-chat-list-body .msg-stu-nav-default {
  display: none !important;
}

/* Admin Chat List RESTART STEP 2 — filters / tabs (layout unchanged) */
.msg-admin-restart-step2.msg-admin-chat-list-body .msg-admin-role-tabs {
  display: flex !important;
}
.msg-admin-restart-step2.msg-admin-chat-list-body .msg-admin-list-filter-row {
  display: flex !important;
}
.msg-admin-restart-step2.msg-admin-chat-list-body #msgAdminAllSection {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}

/* Admin Chat List RESTART STEP 2.5 — grade circle row under role tabs */
.msg-admin-restart-step2-5.msg-admin-chat-list-body #msgAdminGradeCircleSection {
  display: block !important;
}
.msg-admin-grade-circle-section {
  padding: 0.65rem 1rem 0.35rem;
  border-bottom: none;
  background: linear-gradient(180deg, rgba(240, 253, 244, 0.95), rgba(255, 255, 255, 0.98));
}
.msg-admin-grade-circle-section + .msg-admin-role-tabs {
  padding-top: 0.35rem;
  border-bottom: 1px solid rgba(34, 197, 94, 0.2);
}
.msg-admin-grade-circle-head {
  margin-bottom: 0.45rem;
}
.msg-admin-grade-circle-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #14532d;
  letter-spacing: 0.02em;
}
.msg-admin-grade-circle-subtitle {
  margin: 0.15rem 0 0;
  font-size: 0.72rem;
  color: #4b5563;
}
.msg-admin-grade-circle-active {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #15803d;
}
.msg-admin-grade-circle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  align-items: flex-start;
  justify-content: flex-start;
  padding-bottom: 0.35rem;
}
.msg-admin-grade-circle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 4.5rem;
  max-width: 7.25rem;
  padding: 4px 6px;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #14532d;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.msg-admin-grade-circle:hover {
  background: rgba(220, 252, 231, 0.55);
  border-radius: 18px;
  transform: translateY(-1px);
}
.msg-admin-grade-circle.is-active {
  background: #16a34a;
  border: none;
  border-radius: 18px;
  padding: 8px 12px;
  color: #fff;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.25);
}
.msg-admin-grade-circle-avatar-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.msg-admin-grade-circle-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(22, 163, 74, 0.35);
  background: #fff;
  overflow: hidden;
}
.msg-admin-grade-circle-avatar-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1rem;
  font-weight: 800;
  color: #15803d;
  background: rgba(220, 252, 231, 0.95);
  box-sizing: border-box;
}
.msg-admin-grade-circle.is-active .msg-admin-grade-circle-avatar {
  border-color: rgba(255, 255, 255, 0.55);
}
.msg-admin-grade-circle.is-active .msg-admin-grade-circle-avatar-default {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.msg-admin-grade-circle-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 110px;
  word-break: break-word;
}
.msg-admin-grade-circle.is-active .msg-admin-grade-circle-label {
  color: #fff;
}
.msg-admin-grade-circle-empty {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: #6b7280;
  font-style: italic;
}
.msg-admin-grade-circle.msg-admin-group-pill .msg-admin-grade-circle-label {
  max-width: 118px;
}
.msg-admin-grade-circle {
  position: relative;
}
.msg-admin-grade-circle-notify {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}
.msg-admin-grade-circle.is-active .msg-admin-grade-circle-notify {
  box-shadow: 0 0 0 2px #16a34a;
}
.msg-admin-grade-circle-row-wrap {
  position: relative;
}
.msg-admin-grade-pill.has-multiple-sections::after {
  content: none;
  display: none;
}
.msg-admin-grade-section-popup {
  position: fixed;
  z-index: 12050;
  min-width: 168px;
  max-width: min(280px, calc(100vw - 24px));
  max-height: min(320px, 55vh);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: none;
}
.msg-admin-grade-section-popup.is-open {
  pointer-events: auto;
}
.msg-admin-grade-section-popup-inner {
  background: #fff;
  border: 1px solid rgba(22, 163, 74, 0.22);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.18);
  padding: 0.65rem 0.55rem 0.55rem;
  overflow: hidden;
}
.msg-admin-grade-section-popup-kicker {
  margin: 0 0.45rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #15803d;
}
.msg-admin-grade-section-popup-title {
  margin: 0 0.45rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.msg-admin-grade-section-popup-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: min(240px, 42vh);
  overflow-y: auto;
  padding: 0 0.15rem 0.1rem;
}
.msg-admin-grade-section-popup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color: #0f172a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
}
.msg-admin-grade-section-popup-item:hover,
.msg-admin-grade-section-popup-item:focus-visible {
  background: #ecfdf5;
  border-color: #86efac;
  transform: translateY(-1px);
  outline: none;
}
.msg-admin-grade-section-popup-notify {
  flex-shrink: 0;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
}
body.msg-admin-grade-section-popup-open {
  overflow-x: hidden;
}
@media (max-width: 640px) {
  .msg-admin-grade-section-popup {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none;
    transform: none !important;
  }
  .msg-admin-grade-section-popup-inner {
    width: 100%;
  }
}

/* Admin — Online Join Class Meetings List (grade pill mode) */
.msg-admin-chat-list-body .msg-admin-join-meetings-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.85rem 1rem 1rem;
  overflow: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 40%);
}
.msg-admin-chat-list-body .msg-admin-join-meetings-panel[hidden] {
  display: none !important;
}
.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace {
  grid-template-columns: minmax(0, 1fr) !important;
}
.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace.is-join-meetings-view #msg1ContactPanel,
.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace.is-join-meetings-view #msg1ConversationPanel {
  display: none !important;
}
.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-workspace {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  min-height: var(--msg-admin-panel-h);
  max-height: var(--msg-admin-panel-h);
  height: var(--msg-admin-panel-h);
  border-radius: 0.9rem;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  border: 1px solid var(--msg-admin-accent-border, #bbf7d0);
  overflow: hidden;
}
.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-workspace[hidden] {
  display: none !important;
}
.msg-admin-join-meetings-head {
  margin: 0;
}
.msg-admin-join-meetings-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}
.msg-admin-join-meetings-subtitle,
.msg-admin-join-meetings-filter {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.4;
}
.msg-admin-join-meetings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  position: relative;
  z-index: 0;
}
.msg-admin-join-summary-card {
  margin: 0;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.msg-admin-join-summary-card span {
  display: block;
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.msg-admin-join-summary-card strong {
  display: block;
  margin-top: 0.2rem;
  font-size: 1.25rem;
  color: #0f172a;
}
.msg-admin-join-meetings-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.msg-admin-join-meeting-card {
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.msg-admin-join-meeting-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.msg-admin-join-meeting-card-head h4 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: #0f172a;
}
.msg-admin-join-meeting-live-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}
.msg-admin-join-meeting-status {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.msg-admin-join-meeting-status.is-live { background: #dcfce7; color: #15803d; }
.msg-admin-join-meeting-ended-label { font-size: 0.75rem; font-weight: 700; color: #64748b; }
.msg-admin-join-meeting-cancelled-label { font-size: 0.75rem; font-weight: 700; color: #b45309; }
.msg-admin-join-meetings-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.35rem 0 0.5rem;
}
.msg-admin-join-toolbar-hint { font-size: 0.78rem; color: #64748b; }
.msg-admin-join-toolbar-hint.is-active-limit-warning { color: #b45309; font-weight: 600; }
.msg-admin-join-meeting-btn.is-open-active { background: #0f49ff; border-color: #0f49ff; color: #fff; }
.msg-admin-join-meeting-btn.is-create { background: #16a34a; border-color: #16a34a; color: #fff; }
.msg-admin-join-meeting-btn.is-save { background: #0f49ff; border-color: #0f49ff; color: #fff; }
.msg-admin-join-meeting-btn.is-start { background: #16a34a; border-color: #16a34a; color: #fff; }
.msg-admin-join-meeting-btn.is-cancel { background: #fff; border-color: #f59e0b; color: #b45309; }
.msg-admin-join-meeting-btn.is-muted { background: #f8fafc; color: #475569; }
/* Admin — Create Meeting modal popup */
.msg-admin-join-meeting-modal {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}
.msg-admin-join-meeting-modal[hidden] {
  display: none !important;
}
.msg-admin-join-meeting-modal.is-open {
  display: flex;
}
.msg-admin-join-meeting-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.52);
  cursor: pointer;
}
.msg-admin-join-meeting-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(580px, 100%);
  max-height: min(92vh, 760px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
body.msg-admin-join-meeting-modal-open {
  overflow: hidden;
}
.msg-admin-join-meeting-modal .msg-admin-join-meeting-form {
  flex: none;
  margin: 0;
  padding: 1rem 1.1rem 1.05rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  overflow: visible;
}
.msg-admin-join-meeting-modal .msg-admin-join-meeting-form.is-open {
  border-color: #bbf7d0;
}
.msg-admin-join-meeting-form {
  flex: 0 0 auto;
  margin: 0.5rem 0 1rem;
  padding: 0.8rem 0.95rem 0.9rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  overflow: visible;
  position: relative;
  z-index: 1;
}
.msg-admin-join-meeting-form[hidden] {
  display: none !important;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.msg-admin-join-meeting-form.is-open {
  border-color: #bbf7d0;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.1);
}
.msg-admin-join-form-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.6rem;
  padding: 0;
}
.msg-admin-join-form-head-copy { min-width: 0; flex: 1; padding-top: 0.05rem; }
.msg-admin-join-meeting-form h4 {
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  overflow: visible;
}
.msg-admin-join-form-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #64748b;
  font-weight: 500;
}
.msg-admin-join-form-close-btn {
  flex-shrink: 0;
  align-self: flex-start;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-admin-join-form-close-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.msg-admin-join-form-label-text {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}
.msg-admin-join-meeting-btn.is-create.is-active {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
  filter: brightness(0.95);
}
#msgAdminJoinFormTarget {
  background: #f8fafc;
  color: #0f172a;
  font-weight: 600;
  cursor: default;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.msg-admin-join-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}
.msg-admin-join-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}
.msg-admin-join-form-grid input,
.msg-admin-join-form-grid select,
.msg-admin-join-form-grid textarea {
  font: inherit;
  font-size: 0.82rem;
  min-height: 2.15rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-sizing: border-box;
  width: 100%;
}
.msg-admin-join-form-grid textarea {
  min-height: 3.25rem;
  resize: vertical;
}
.msg-admin-join-form-full { grid-column: 1 / -1; }
.msg-admin-join-optional { font-weight: 600; color: #94a3b8; }
.msg-admin-join-form-notice {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #15803d;
}
.msg-admin-join-form-notice.is-error {
  color: #b91c1c;
}
.msg-admin-join-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.35rem;
  border-top: 1px solid #f1f5f9;
}
.msg-admin-join-origin {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #1d4ed8;
  vertical-align: middle;
}
.teacher-admin-join-notify {
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border: 1px solid #bbf7d0;
  border-radius: 14px;
  background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}
.teacher-admin-join-notify-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.teacher-admin-join-notify-head h4 { margin: 0; font-size: 1rem; color: #0f172a; }
.teacher-admin-join-notify-badge {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.25rem;
  text-align: center;
}
.teacher-admin-join-notify-hint { margin: 0 0 0.55rem; font-size: 0.8rem; color: #64748b; }
.teacher-admin-join-notify-list { display: flex; flex-direction: column; gap: 0.55rem; }
.teacher-admin-join-notify-empty { margin: 0; font-size: 0.82rem; color: #64748b; font-style: italic; }
.teacher-admin-join-card {
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}
.teacher-admin-join-card.is-live { border-color: #86efac; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.15); }
.teacher-admin-join-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.teacher-admin-join-status-pill {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
}
.teacher-admin-join-status-pill.is-live { background: #dcfce7; color: #15803d; }
.teacher-admin-join-origin { margin: 0.25rem 0; font-size: 0.75rem; font-weight: 700; color: #1d4ed8; }
.teacher-admin-join-meta, .teacher-admin-join-time { margin: 0.15rem 0; font-size: 0.8rem; color: #475569; }
.teacher-admin-join-btn { margin-top: 0.45rem; width: 100%; }
@media (max-width: 768px) {
  .msg-admin-join-form-grid { grid-template-columns: 1fr; }
}
.msg-admin-join-meeting-status.is-scheduled { background: #dbeafe; color: #1d4ed8; }
.msg-admin-join-meeting-status.is-ended { background: #f1f5f9; color: #475569; }
.msg-admin-join-meeting-status.is-cancelled { background: #fef3c7; color: #b45309; }
.msg-admin-join-meeting-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
  margin: 0;
  font-size: 0.78rem;
}
.msg-admin-join-meeting-meta dt {
  margin: 0;
  font-weight: 600;
  color: #94a3b8;
  font-size: 0.68rem;
  text-transform: uppercase;
}
.msg-admin-join-meeting-meta dd {
  margin: 0.1rem 0 0;
  color: #334155;
}
.msg-admin-join-meeting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.msg-admin-join-meeting-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.msg-admin-join-meeting-btn.is-join {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.msg-admin-join-meeting-btn.is-end:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.msg-admin-join-meetings-empty {
  margin: 0.5rem 0 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: #64748b;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 10px;
}
@media (max-width: 900px) {
  .msg-admin-join-meetings-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .msg-admin-join-meeting-meta {
    grid-template-columns: 1fr;
  }
}

/* Admin Chat List RESTART STEP 3 — direct contact room (grade UI stays hidden) */
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminGradeRoomTop,
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminGradeSummaryCard,
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminGradeMembersRow,
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminGradeListSection,
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminCommTools,
.msg-admin-restart-step3.msg-admin-mode-direct #msgAdminPinnedSection {
  display: none !important;
}
.msg-admin-restart-step3 #msgAdminStep1DetailPlaceholder,
.msg-admin-restart-step3 #msgAdminStep1ThreadPlaceholder {
  display: none !important;
}
.msg-admin-restart-step3 #msgAdminComposeTools {
  display: flex !important;
}
.msg-admin-restart-step3.msg-admin-chat-list-body #msgAdminRoomTop {
  display: flex !important;
}
.msg-admin-restart-step3 .msg-admin-chat-card.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: #22c55e;
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35);
}

/* Admin Chat List UI View — portal layout foundation */
.msg-admin-chat-list-body.msg-admin-chat-list-body {
  background: #f1f5f9;
}

.msg-admin-chat-list-body .msg-ui-app {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.msg-admin-chat-list-body .msg-ui-sidebar,
.msg-admin-chat-list-body .msg-ui-stats,
.msg-admin-chat-list-body .msg-ui-topbar,
.msg-admin-chat-list-body .msg-ui-info-panel,
.msg-admin-chat-list-body .msg-ui-mobile-session,
.msg-admin-chat-list-body .msg-stu-filters-default,
.msg-admin-chat-list-body .msg-ui-filters.msg1-filter-row,
.msg-admin-chat-list-body #msgAdminLegacyFilters,
.msg-admin-chat-list-body .msg-ui-panel-head.msg-stu-list-head-default,
.msg-admin-chat-list-body .msg-ui-room-header,
.msg-admin-chat-list-body .msg-ui-room-meta,
.msg-admin-chat-list-body .msg-ui-compose-hint,
.msg-admin-chat-list-body #msg5DirectAttachBar {
  display: none !important;
}

.msg-admin-chat-list-body .msg-admin-portal-sidebar {
  display: flex !important;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  width: 260px;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  padding: 1rem 0.75rem;
  gap: 0.75rem;
  z-index: 20;
  overflow-y: auto;
}

.msg-admin-portal-brand {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  padding: 0.25rem 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.msg-admin-portal-logo {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #2563eb;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.msg-admin-portal-brand strong { display: block; color: #f8fafc; font-size: 0.95rem; }
.msg-admin-portal-brand small { color: #94a3b8; font-size: 0.72rem; }

.msg-admin-portal-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.msg-admin-portal-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.82rem;
}
.msg-admin-portal-link:hover { background: rgba(148, 163, 184, 0.12); color: #f8fafc; }
.msg-admin-portal-link.is-active {
  background: #2563eb;
  color: #fff;
  font-weight: 600;
}

.msg-admin-portal-foot-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 0.75rem;
  padding: 0.75rem;
  font-size: 0.78rem;
}
.msg-admin-portal-foot-card strong { display: block; color: #f8fafc; margin-bottom: 0.35rem; }
.msg-admin-portal-foot-card p { margin: 0.35rem 0; color: #94a3b8; }
.msg-admin-portal-badge-active {
  display: inline-block;
  background: #16a34a;
  color: #fff;
  font-size: 0.65rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}
.msg-admin-portal-back {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: transparent;
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-size: 0.82rem;
}
.msg-admin-portal-back:hover { background: rgba(148, 163, 184, 0.15); }

.msg-admin-chat-list-body .msg-ui-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  background: #f8fafc;
}

.msg-admin-chat-list-body .msg-admin-portal-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.msg-admin-portal-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.msg-admin-portal-header-left h1 {
  margin: 0;
  font-size: 1.35rem;
  color: #0f172a;
}
.msg-admin-portal-header-left p {
  margin: 0.15rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
}
.msg-admin-portal-menu-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
}
.msg-admin-portal-header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}
.msg-admin-portal-global-search {
  min-width: 220px;
  flex: 1;
  max-width: 320px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}
.msg-admin-portal-notify {
  position: relative;
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 999px;
  width: 2.35rem;
  height: 2.35rem;
  cursor: pointer;
}
.msg-admin-portal-notify-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  min-width: 1rem;
  height: 1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-admin-portal-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.25rem 0.65rem 0.25rem 0.25rem;
  background: #fff;
}
.msg-admin-portal-profile-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}
.msg-admin-portal-profile strong { display: block; font-size: 0.82rem; color: #0f172a; }
.msg-admin-portal-profile small { color: #64748b; font-size: 0.72rem; }

.msg-admin-chat-list-body .msg-admin-role-tabs {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.msg-admin-chat-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.15rem;
}
.msg-admin-card-school {
  font-size: 0.68rem;
}
.msg-admin-role-tab {
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #334155;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.msg-admin-role-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.msg-admin-role-tab-count {
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  font-size: 0.72rem;
}
.msg-admin-role-tab.is-active .msg-admin-role-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.msg-admin-chat-list-body #msgUiViewMessages {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0.75rem;
}

.msg-admin-chat-list-body .msg-admin-chat-workspace {
  display: grid !important;
  grid-template-columns: minmax(280px, 38%) minmax(0, 62%);
  gap: 1rem;
  padding: 0.75rem 1.25rem 1rem;
  flex: 1;
  min-height: 0;
  align-items: stretch;
  align-content: start;
}
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace.is-join-meetings-view {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.msg-admin-chat-list-body .msg-admin-list-panel,
.msg-admin-chat-list-body .msg-admin-room-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 220px);
  max-height: calc(100vh - 220px);
  overflow: hidden;
}
.msg-admin-chat-list-body .msg-admin-all-section {
  overflow: hidden;
}

.msg-admin-chat-list-body .msg-admin-list-filter-row {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.msg-admin-list-filter-select {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.8rem;
  background: #fff;
  min-width: 110px;
}
.msg-admin-list-search {
  flex: 1 1 180px;
  min-width: 140px;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  font-size: 0.85rem;
}
.msg-admin-list-filter-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 0.5rem;
  width: 2.1rem;
  height: 2.1rem;
  cursor: pointer;
}

.msg-admin-chat-list-body .msg-admin-pinned-section,
.msg-admin-chat-list-body .msg-admin-all-section {
  display: flex !important;
  flex-direction: column;
  min-height: 0;
}
.msg-admin-chat-list-body .msg-admin-pinned-section {
  flex: 0 0 auto;
}
.msg-admin-chat-list-body .msg-admin-pinned-section.is-empty {
  flex: 0 0 auto;
  min-height: 0;
}
.msg-admin-chat-list-body .msg-admin-pinned-section.is-empty .msg-admin-pinned-list {
  min-height: 0;
  padding: 0 0.85rem 0.35rem;
}
.msg-admin-pinned-empty {
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  color: #94a3b8;
  font-style: italic;
}
.msg-admin-chat-list-body .msg-admin-all-section {
  flex: 1 1 auto;
  min-height: 0;
}
.msg-admin-chat-list-body .msg-admin-contact-list {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
}
.msg-admin-section-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem 0.35rem;
  color: #475569;
  font-size: 0.82rem;
}
.msg-admin-section-toggle {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
}
.msg-admin-pinned-list,
.msg-admin-chat-list-body .msg-ui-contact-list {
  overflow-y: auto;
  padding: 0 0.5rem 0.5rem;
  flex: 1;
  min-height: 0;
}

.msg-admin-chat-card,
.msg-admin-pinned-card {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.65rem 0.7rem;
  margin-bottom: 0.45rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: start;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.msg-admin-chat-card.active,
.msg-admin-pinned-card.active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 0 0 1px #bbf7d0;
}

.msg-admin-grade-group-pinned-wrap {
  margin-bottom: 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed #bbf7d0;
}
.msg-admin-grade-group-card,
.msg-admin-pinned-grade-group {
  width: 100%;
  text-align: left;
  border: 1px solid #86efac;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-radius: 0.9rem;
  padding: 0.7rem 0.75rem;
  margin-bottom: 0.5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.55rem;
  align-items: start;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.08);
}
.msg-admin-grade-group-card:hover,
.msg-admin-pinned-grade-group:hover {
  border-color: #4ade80;
  box-shadow: 0 3px 10px rgba(22, 163, 74, 0.12);
}
.msg-admin-grade-group-card.active,
.msg-admin-pinned-grade-group.active {
  background: #dcfce7;
  border-color: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}
.msg-admin-grade-group-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #16a34a;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
}
.msg-admin-grade-group-badge {
  background: #15803d !important;
  color: #fff !important;
}
.msg-admin-grade-group-kind {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #166534;
  background: #bbf7d0;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-left: 0.2rem;
}
.msg-admin-chat-card-avatar-wrap {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
}
.msg-admin-online-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid #fff;
}
.msg-admin-chat-card-main strong {
  display: block;
  color: #0f172a;
  font-size: 0.9rem;
}
.msg-admin-chat-card-sub {
  color: #64748b;
  font-size: 0.75rem;
}
.msg-admin-chat-card-preview {
  color: #64748b;
  font-size: 0.78rem;
  margin-top: 0.2rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-admin-chat-card-side {
  text-align: right;
  font-size: 0.72rem;
  color: #94a3b8;
}
.msg-admin-unread-pill {
  display: inline-flex;
  min-width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-size: 0.68rem;
  align-items: center;
  justify-content: center;
  margin-top: 0.25rem;
}

.msg-admin-chat-list-body .msg-admin-room-top {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f1f5f9;
}
.msg-admin-chat-list-body #msgAdminRoomTop[hidden] {
  display: flex !important;
}
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-contact-detail {
  display: none !important;
}
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection.is-profile-open .msg-admin-contact-detail.is-profile-open {
  display: block !important;
}
.msg-admin-chat-list-body .msg-admin-detail-grid {
  display: grid !important;
}
.msg-admin-room-top-left {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
}
.msg-admin-room-top-left h3 { margin: 0; font-size: 1.05rem; color: #0f172a; }
.msg-admin-room-top-left p { margin: 0.15rem 0 0; color: #64748b; font-size: 0.8rem; }
.msg-admin-room-online { color: #16a34a; font-size: 0.75rem; }
.msg-admin-room-top-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}
.msg-admin-room-action {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.msg-admin-room-action:disabled { opacity: 0.5; cursor: not-allowed; }

.msg-admin-chat-list-body .msg-admin-contact-detail {
  display: none !important;
  margin: 0 0.85rem 0.5rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: #f8fafc;
  max-height: min(220px, 32vh);
  overflow: hidden;
}
.msg-admin-chat-list-body .msg-admin-contact-detail.is-profile-open {
  display: block !important;
}
.msg-admin-chat-list-body .msg-admin-room-top-compact {
  padding: 0.55rem 0.85rem;
  min-height: 0;
  flex-shrink: 0;
}
.msg-admin-room-title-block { min-width: 0; flex: 1 1 auto; }
.msg-admin-room-name-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}
.msg-admin-room-name-row h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
  color: #0f172a;
}
.msg-admin-room-meta-line {
  margin: 0.12rem 0 0;
  color: #64748b;
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}
.msg-admin-room-role-badge {
  font-size: 0.68rem;
  padding: 0.1rem 0.45rem;
  line-height: 1.2;
}
.msg-admin-view-profile-btn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Admin Chat — Messenger / Telegram glass polish (header + composer) */
.msg-admin-chat-modern-polish .msg-admin-room-top-right.msg-admin-room-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass,
.msg-admin-chat-modern-polish .msg-admin-room-top-right .msg-admin-room-action {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-icon {
  font-size: 1.05rem;
  line-height: 1;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass:hover:not(:disabled),
.msg-admin-chat-modern-polish .msg-admin-room-action-glass:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
  border-color: #bbf7d0;
  background: rgba(255, 255, 255, 0.95);
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-audio:hover:not(:disabled) {
  border-color: #86efac;
  color: #15803d;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-video:hover:not(:disabled) {
  border-color: #93c5fd;
  color: #1d4ed8;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-profile-info:hover:not(:disabled),
.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-profile-info.is-active {
  border-color: #c4b5fd;
  color: #6d28d9;
  background: rgba(245, 243, 255, 0.95);
}
.msg-admin-chat-modern-polish .msg-admin-room-more-wrap {
  position: relative;
  display: inline-flex;
}
.msg-admin-chat-modern-polish .msg-admin-room-more-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 11.5rem;
  padding: 0.35rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.msg-admin-chat-modern-polish .msg-admin-room-more-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  color: #0f172a;
  cursor: pointer;
}
.msg-admin-chat-modern-polish .msg-admin-room-more-item:hover:not(:disabled) {
  background: rgba(240, 253, 244, 0.9);
  color: #15803d;
}
.msg-admin-chat-modern-polish .msg-admin-room-more-item.is-muted,
.msg-admin-chat-modern-polish .msg-admin-room-more-item:disabled {
  opacity: 0.55;
  cursor: default;
}
.msg-admin-chat-modern-polish .msg-admin-room-action-glass:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

.msg-admin-chat-modern-polish .msg-admin-composer-modern.msg-admin-compose,
.msg-admin-chat-modern-polish #msg1SendForm.msg-admin-composer-modern {
  border-top: 0;
  padding: 0 0.75rem 0.7rem;
  background: transparent;
}
.msg-admin-chat-modern-polish .msg-admin-compose-glass {
  padding: 0.45rem 0.5rem;
  border-radius: 18px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.07);
}
.msg-admin-chat-modern-polish .msg-admin-compose-row-modern {
  display: flex !important;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}
.msg-admin-chat-modern-polish .msg-admin-compose-tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  order: 1;
}
.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap {
  order: 2;
}
.msg-admin-chat-modern-polish .msg-admin-send-btn-modern {
  order: 3;
}
.msg-admin-chat-modern-polish .msg-admin-compose-tool,
.msg-admin-chat-modern-polish .msg-admin-compose-tools .msg-admin-compose-icon,
.msg-admin-chat-modern-polish .msg-admin-compose-tools button.msg-admin-compose-tool {
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  min-height: 2.625rem;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.msg-admin-chat-modern-polish .msg-admin-compose-tool-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
}
.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap textarea,
.msg-admin-chat-modern-polish .msg-admin-compose-row-modern textarea {
  width: 100%;
  min-height: 2.5rem;
  max-height: 6.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.62rem 1rem;
  background: #fff;
  font-size: 0.88rem;
  line-height: 1.35;
  resize: none;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}
.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap textarea:focus,
.msg-admin-chat-modern-polish .msg-admin-compose-row-modern textarea:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), inset 0 1px 2px rgba(15, 23, 42, 0.04);
  outline: none;
}
.msg-admin-chat-modern-polish .msg-admin-send-btn-modern {
  flex: 0 0 2.75rem !important;
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.msg-admin-chat-modern-polish .msg-admin-send-icon {
  font-size: 1.05rem;
  line-height: 1;
  transform: translateX(1px);
}
.msg-admin-chat-modern-polish .msg-admin-send-btn-modern:hover:not(:disabled) {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.4) !important;
}
.msg-admin-chat-modern-polish .msg-admin-compose-tool:hover:not(:disabled),
.msg-admin-chat-modern-polish .msg-admin-compose-tools .msg-admin-compose-icon:hover:not(:disabled) {
  border-color: #bbf7d0;
  background: rgba(240, 253, 244, 0.95);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
}
.msg-admin-chat-modern-polish .msg-admin-room-top-compact {
  align-items: center;
}
@media (max-width: 768px) {
  .msg-admin-chat-modern-polish .msg-admin-room-action-glass,
  .msg-admin-chat-modern-polish .msg-admin-room-top-right .msg-admin-room-action {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border-radius: 10px;
  }
  .msg-admin-chat-modern-polish .msg-admin-compose-tool,
  .msg-admin-chat-modern-polish .msg-admin-compose-tools .msg-admin-compose-icon {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
  }
  .msg-admin-chat-modern-polish .msg-admin-send-btn-modern {
    width: 2.5rem !important;
    min-width: 2.5rem !important;
    height: 2.5rem !important;
    min-height: 2.5rem !important;
  }
}
.msg-admin-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: nowrap;
}
.msg-admin-detail-head-left {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  flex-wrap: wrap;
}
.msg-admin-detail-close-btn {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
}
.msg-admin-detail-close-btn:hover { background: #f1f5f9; color: #0f172a; }
.msg-admin-detail-item-full { grid-column: 1 / -1; }
.msg-admin-detail-classes-scroll {
  max-height: 88px;
  overflow-y: auto;
  padding: 0.4rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  font-size: 0.72rem;
  line-height: 1.4;
  color: #334155;
  word-break: break-word;
}
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 0;
}
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg1-send-form,
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-compose {
  flex-shrink: 0;
}
.msg-admin-detail-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}
.msg-admin-detail-head strong {
  font-size: 0.95rem;
  color: #0f172a;
}
.msg-admin-detail-blocked {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 0.82rem;
}
.msg-admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
  margin: 0;
}
.msg-admin-detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.msg-admin-detail-label {
  display: block;
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  line-height: 1.2;
}
.msg-admin-detail-value {
  display: block;
  margin: 0;
  font-size: 0.86rem;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  word-break: break-word;
}
.msg-admin-detail-grid dt,
.msg-admin-detail-grid dd {
  margin: 0;
}

.msg-admin-chat-list-body .msg-admin-room-panel {
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.msg-admin-chat-list-body .msg-admin-room-top,
.msg-admin-chat-list-body .msg-admin-contact-detail {
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1.1rem 0.75rem;
  background: #f8fafc;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row {
  display: flex;
  margin-bottom: 0.7rem;
  padding: 0 0.15rem;
  max-width: 100%;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row.mine {
  justify-content: flex-end;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row.theirs {
  justify-content: flex-start;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-wrap {
  max-width: min(78%, 520px);
}
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble {
  background: #fff;
}

.msg-admin-chat-list-body .msg-ui-notice.msg1-notice.is-admin-ready-hidden,
.msg-admin-chat-list-body #msg1NoticeView.is-admin-ready-hidden {
  display: none !important;
}

.msg-admin-chat-list-body .msg-admin-compose,
.msg-admin-chat-list-body #msg1SendForm.msg-admin-compose {
  border-top: 1px solid #e2e8f0;
  padding: 0.65rem 0.85rem;
  background: #fff;
  flex-shrink: 0;
  display: block !important;
  grid-template-columns: none !important;
}
.msg-admin-chat-list-body .msg-admin-compose-box {
  display: block !important;
  width: 100%;
}
.msg-admin-chat-list-body .msg-admin-compose-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  grid-template-columns: none !important;
  padding: 0 !important;
}
.msg-admin-chat-list-body .msg-admin-compose-input-wrap {
  flex: 1 1 0%;
  min-width: 0;
  width: auto;
  max-width: none;
  order: 2;
}
.msg-admin-chat-list-body .msg-admin-compose-row textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  order: 0;
  display: block;
  box-sizing: border-box;
}
.msg-admin-chat-list-body .msg-admin-compose-tools {
  order: 1;
  flex: 0 0 auto;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-compose-row .msg-ui-send-btn,
.msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn,
.msg-admin-chat-list-body.message-body #msg1SendForm.msg-admin-compose button.msg-admin-send-btn {
  flex: 0 0 3.25rem !important;
  order: 3;
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  max-width: 4.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  max-height: 2.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  white-space: nowrap;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
}
.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button.msg-admin-send-btn {
  background: #16a34a !important;
  color: #fff !important;
  border: none !important;
}
.msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn:hover:not(:disabled),
.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button.msg-admin-send-btn:hover:not(:disabled) {
  background: #15803d !important;
}
.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-compose-row textarea,
.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-send-btn {
  opacity: 0.55;
}
.msg-admin-chat-list-body #msg5DirectAttachBar,
.msg-admin-chat-list-body .msg-admin-compose-box > .msg-ui-attach-bar {
  display: none !important;
}
.msg-admin-chat-list-body .is-admin-legacy-hidden,
.msg-admin-chat-list-body #msgAdminLegacyFilters {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.msg-admin-compose-tools {
  display: flex;
  gap: 0.25rem;
}
.msg-admin-compose-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.msg-admin-chat-list-body #msg1MessageInput {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  resize: none;
}
.msg-admin-send-btn {
  width: auto;
  min-width: 2.75rem;
  height: 2.5rem;
  border-radius: 999px;
  background: #16a34a !important;
  color: #fff !important;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-admin-chat-list-body .msg-admin-send-btn:hover:not(:disabled) {
  background: #15803d !important;
}

@media (max-width: 768px) {
  .msg-admin-chat-list-body .msg-ui-compose-row.msg-admin-compose-row,
  .msg-admin-chat-list-body .msg-admin-compose-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
  }
  .msg-admin-chat-list-body .msg-admin-compose-row .msg-ui-send-btn,
  .msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn,
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-send-btn {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 4.5rem !important;
    flex: 0 0 3.25rem !important;
  }
  .msg-admin-detail-grid { grid-template-columns: 1fr 1fr; }
}

.msg-admin-date-chip {
  display: inline-block;
  margin: 0.5rem auto 0.75rem;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 0.75rem;
  text-align: center;
  width: fit-content;
  clear: both;
}
.msg-admin-chat-list-body .msg1-bubble-row.theirs {
  display: flex;
  gap: 0.45rem;
  align-items: flex-end;
}
.msg-ui-bubble-avatar {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
}
.msg-ui-bubble-sender {
  display: block;
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.15rem;
}
.msg-admin-read-checks {
  color: #2563eb;
  font-size: 0.72rem;
}

.msg-admin-chat-list-body .msg1-conversation-panel.has-contact .msg-admin-contact-detail {
  display: none !important;
}
.msg-admin-chat-list-body .msg1-conversation-panel.has-contact.is-profile-open .msg-admin-contact-detail.is-profile-open {
  display: block !important;
}

@media (max-width: 900px) {
  .msg-admin-chat-list-body .msg-ui-app {
    grid-template-columns: 1fr;
  }
  .msg-admin-chat-list-body .msg-admin-portal-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
  }
  .msg-admin-chat-list-body .msg-admin-portal-sidebar.is-open {
    transform: translateX(0);
  }
  .msg-admin-chat-list-body .msg-admin-chat-workspace {
    grid-template-columns: 1fr;
  }
  .msg-admin-chat-list-body .msg-admin-room-panel {
    display: none;
  }
  .msg-admin-chat-list-body .msg-admin-chat-workspace.admin-room-open .msg-admin-list-panel {
    display: none;
  }
  .msg-admin-chat-list-body .msg-admin-chat-workspace.admin-room-open .msg-admin-room-panel {
    display: flex;
    max-height: none;
    min-height: calc(100vh - 180px);
  }
}

@media (max-width: 430px) {
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-send-btn,
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel button.msg-admin-send-btn {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 4.5rem !important;
    flex: 0 0 3.25rem !important;
  }
  .msg-admin-portal-global-search { min-width: 100%; max-width: none; }
  .msg-admin-detail-grid { grid-template-columns: 1fr 1fr; }
  .msg-admin-portal-header-right { width: 100%; }
  .msg-admin-list-filter-row {
    flex-direction: column;
    align-items: stretch;
  }
  .msg-admin-list-search {
    min-width: 100%;
  }
}

/* Admin compose — override v5/message-body grid that stacks send as full-width bar */
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-compose-row.msg-ui-compose-row,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-row.msg-ui-compose-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: 0.5rem !important;
  padding: 0 !important;
  width: 100%;
  box-sizing: border-box;
}
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-compose-tools,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-tools {
  flex: 0 0 auto;
  flex-shrink: 0;
  order: 1;
}
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-compose-input-wrap,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-input-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  order: 2;
}
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-compose-row textarea,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-row textarea,
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-compose-input-wrap textarea,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-input-wrap textarea {
  flex: 1 1 auto !important;
  order: 0;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  resize: none !important;
  box-sizing: border-box !important;
}
.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages #msg1ConversationPanel .msg-admin-send-btn.msg-ui-send-btn,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-send-btn.msg-ui-send-btn {
  flex: 0 0 3.25rem !important;
  order: 3;
  width: 3.25rem !important;
  min-width: 3.25rem !important;
  max-width: 4.5rem !important;
  height: 2.5rem !important;
  min-height: 2.5rem !important;
  align-self: center !important;
}

@media (max-width: 768px) {
  .msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-admin-compose-row.msg-ui-compose-row,
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-row.msg-ui-compose-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
  }
  .msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-ui-send-btn.msg-admin-send-btn,
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-send-btn.msg-admin-send-btn {
    width: 3.25rem !important;
    min-width: 3.25rem !important;
    max-width: 4.5rem !important;
    flex: 0 0 3.25rem !important;
  }
}

@media (max-width: 430px) {
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-compose-row.msg-admin-compose-row {
    display: flex !important;
    grid-template-columns: none !important;
  }
  .msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-ui-compose-row .msg-admin-send-btn,
  .msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-send-btn.msg-admin-send-btn {
    width: 3.25rem !important;
    max-width: 4.5rem !important;
  }
}

.msg-admin-chat-list-body .msg-admin-compose-hint,
.msg-admin-chat-list-body .msg3-send-hint {
  display: none;
}

/* Admin Chat List — Green theme accents (scoped; layout unchanged) */
.msg-admin-chat-list-body {
  --msg-admin-accent: #16a34a;
  --msg-admin-accent-dark: #15803d;
  --msg-admin-accent-deep: #166534;
  --msg-admin-accent-soft: #dcfce7;
  --msg-admin-accent-light: #f0fdf4;
  --msg-admin-accent-border: #bbf7d0;
}

.msg-admin-chat-list-body .msg-admin-portal-profile-avatar {
  background: #dcfce7;
  color: #166534;
}

.msg-admin-chat-list-body .msg-admin-list-search:focus,
.msg-admin-chat-list-body .msg-admin-list-filter-select:focus,
.msg-admin-chat-list-body .msg-admin-portal-global-search:focus,
.msg-admin-chat-list-body #msg1MessageInput:focus {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18) !important;
  outline: none;
}

.msg-admin-chat-list-body .msg-admin-compose-icon:hover:not(:disabled),
.msg-admin-chat-list-body .msg-admin-compose-icon:focus-visible:not(:disabled),
.msg-admin-chat-list-body .msg-admin-compose-icon.is-active {
  border-color: #16a34a;
  background: #f0fdf4;
  color: #15803d;
}

.msg-admin-chat-list-body .msg-admin-chat-card .msg-ui-contact-avatar,
.msg-admin-chat-list-body .msg-admin-pinned-card .msg-ui-contact-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.95rem;
  background: #16a34a !important;
  color: #fff !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22);
}
.msg-admin-chat-list-body .msg-admin-room-avatar,
.msg-admin-chat-list-body .msg-admin-room-avatar .msg3-room-avatar-inner,
.msg-admin-chat-list-body .msg3-room-avatar.msg-admin-room-avatar,
.msg-admin-chat-list-body .msg3-room-avatar-inner {
  background: #16a34a !important;
  color: #fff !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.22);
}

.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: #16a34a !important;
  background-image: none !important;
  border-color: #15803d !important;
  color: #fff !important;
}
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-text,
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-head,
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-head strong,
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-time {
  color: #fff !important;
}
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-foot {
  color: rgba(255, 255, 255, 0.82) !important;
}

.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-ui-contact-card.active,
.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-contact-card.active,
.msg-admin-chat-list-body .msg-ui-contact-card.active {
  border-color: #bbf7d0 !important;
  background: linear-gradient(90deg, #f0fdf4 0%, #fff 48%) !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12) !important;
}

.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button,
.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose .msg-ui-send-btn,
.msg-admin-chat-list-body .msg1-send-form button.msg-admin-send-btn {
  background: #16a34a !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button:hover:not(:disabled),
.msg-admin-chat-list-body .msg1-send-form button.msg-admin-send-btn:hover:not(:disabled) {
  background: #15803d !important;
}

.msg-admin-chat-list-body .msg-admin-role-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
}
.msg-admin-chat-list-body .msg-admin-role-tab.is-active:hover {
  background: #15803d;
  border-color: #15803d;
}

.msg-admin-chat-list-body .msg-admin-chat-card.active,
.msg-admin-chat-list-body .msg-admin-pinned-card.active {
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

.msg-admin-chat-list-body .msg-admin-unread-pill {
  background: #16a34a;
}

.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-ui-send-btn,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-send-btn.msg-ui-send-btn {
  background: #16a34a !important;
  background-image: none !important;
}

/* Student Chat List — Green theme (dashboard floating widget; Student only) */
.student-dashboard-body .bs-fcw-topbar {
  background: linear-gradient(135deg, #166534, #16a34a);
}
.student-dashboard-body .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.student-dashboard-body .bs-fcw-filter-tab:focus-visible,
.student-dashboard-body .bs-fcw-search:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}
.student-dashboard-body .bs-fcw-card:hover {
  background: #f0fdf4;
}
.student-dashboard-body .bs-fcw-card.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 0 0 1px #bbf7d0;
}
.student-dashboard-body .bs-fcw-card-avatar,
.student-dashboard-body .bs-fcw-room-avatar {
  background: #16a34a !important;
  background-image: none !important;
  color: #fff;
}
.student-dashboard-body .bs-fcw-badge-role {
  background: #dcfce7;
  color: #166534;
}
.student-dashboard-body .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.student-dashboard-body .bs-fcw-send-btn {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.student-dashboard-body .bs-fcw-send-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}
.student-dashboard-body .bs-fcw-full-link {
  color: #16a34a;
}
.student-dashboard-body .bs-fcw-full-link:hover {
  color: #15803d;
}

/* STUDENT-FLOATING-MESSAGE-MODAL-BOX — Admin pattern reuse for Student Dashboard */
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box {
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 13050;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-backdrop {
  background: rgba(15, 35, 75, 0.42);
  backdrop-filter: blur(3px);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-panel {
  width: min(960px, calc(100vw - 32px));
  max-width: 1000px;
  min-width: min(850px, 100%);
  height: min(680px, calc(85dvh - 48px));
  max-height: calc(85dvh - 32px);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid rgba(187, 247, 208, 0.95);
  border-radius: 22px;
  box-shadow:
    12px 12px 26px rgba(148, 163, 184, 0.24),
    -8px -8px 22px rgba(255, 255, 255, 0.92),
    0 28px 64px rgba(22, 101, 52, 0.18);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
  color: #0f172a;
  border-bottom: 1px solid rgba(187, 247, 208, 0.95);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.85);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-title {
  color: #14532d;
  font-weight: 900;
  letter-spacing: -0.01em;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-subtitle {
  color: #64748b;
  opacity: 1;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-icon-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #bbf7d0;
  box-shadow:
    3px 3px 8px rgba(148, 163, 184, 0.22),
    -2px -2px 6px rgba(255, 255, 255, 0.95);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-icon-btn:hover,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-icon-btn:focus-visible {
  background: #f0fdf4;
  color: #15803d;
  border-color: #86efac;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-list-pane {
  background: linear-gradient(180deg, #fbfffb 0%, #f0fdf4 100%);
  border-right: 1px solid rgba(187, 247, 208, 0.95);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-room-pane {
  background: #ffffff;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-search,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-input {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  box-shadow:
    inset 2px 2px 5px rgba(148, 163, 184, 0.12),
    inset -2px -2px 5px rgba(255, 255, 255, 0.95);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-filter-tab {
  flex: 1 1 0;
  min-width: 0;
  border: 1px solid #bbf7d0;
  background: #ffffff;
  color: #166534;
  padding: 4px 5px;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-filters {
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
  padding: 6px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-filters::-webkit-scrollbar {
  display: none;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card {
  background: #ffffff;
  border: 1px solid #dcfce7;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-active {
  background: #f0fdf4;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #bbf7d0;
}

/* STUDENT-MESSAGE-MODAL-COMPOSER — full-width input beside Send (Student modal only) */
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-room-pane {
  min-height: 0;
  overflow: hidden;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-room-head,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-notice {
  flex-shrink: 0;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-top: 1px solid rgba(187, 247, 208, 0.95);
  background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-stack {
  width: 100%;
  min-width: 0;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-left,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-left {
  gap: 6px;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-right {
  gap: 6px;
  justify-content: flex-end;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main .bs-fcw-input,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box #bsFcwMessageInput {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-send-btn {
  flex: 0 0 auto;
  width: 42px;
  min-width: 42px;
  height: 42px;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main .bs-fcw-input:focus,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box #bsFcwMessageInput:focus {
  outline: none;
  border-color: #86efac;
  box-shadow:
    inset 2px 2px 5px rgba(148, 163, 184, 0.12),
    inset -2px -2px 5px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(22, 163, 74, 0.16);
}

@media (max-width: 768px) {
  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose {
    padding: 8px 10px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-row {
    gap: 6px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-left {
    gap: 4px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-action-btn {
    width: 32px;
    height: 32px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-action-btn svg {
    width: 16px;
    height: 16px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-send-btn {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main .bs-fcw-input,
  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box #bsFcwMessageInput {
    padding: 9px 12px;
    font-size: 0.82rem;
  }
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-chat-row.is-unread {
  background: #f0fdf4;
  border-color: rgba(22, 163, 74, 0.22);
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread .bs-contact-name,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread .bs-fcw-card-top strong {
  font-weight: 800;
  color: #052e16;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread .bs-contact-preview,
body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread .bs-fcw-card-preview {
  font-weight: 600;
  color: #14532d;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-card.is-unread.is-active {
  background: #ecfdf5;
  border-color: #86efac;
  box-shadow: 0 0 0 1px #bbf7d0;
}

@media (max-width: 900px) {
  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-panel {
    width: calc(100vw - 16px);
    min-width: 0;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box {
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
  }
}

@media (max-width: 768px) {
  body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-panel {
    width: 100%;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: 16px 16px 0 0;
  }
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-student-homework-panel .bs-fcw-student-homework-detail {
  padding: 12px 14px 16px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: #14532d;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-student-homework-instructions {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

body.student-dashboard-body .bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-student-homework-instructions p {
  margin: 6px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Teacher Chat List — Green theme (dashboard floating widget; Teacher only) */
.teacher-dashboard-body .bs-fcw-topbar {
  background: linear-gradient(135deg, #166534, #16a34a);
}
.teacher-dashboard-body .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.teacher-dashboard-body .bs-fcw-filter-tab:focus-visible,
.teacher-dashboard-body .bs-fcw-search:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}
.teacher-dashboard-body .bs-fcw-card:hover {
  background: #f0fdf4;
}
.teacher-dashboard-body .bs-fcw-card.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 0 0 1px #bbf7d0;
}
.teacher-dashboard-body .bs-fcw-card-avatar,
.teacher-dashboard-body .bs-fcw-room-avatar {
  background: #16a34a !important;
  background-image: none !important;
  color: #fff;
}
.teacher-dashboard-body .bs-fcw-badge-role {
  background: #dcfce7;
  color: #166534;
}
.teacher-dashboard-body .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.teacher-dashboard-body .bs-fcw-send-btn {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.teacher-dashboard-body .bs-fcw-send-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}
.teacher-dashboard-body .bs-fcw-full-link {
  color: #16a34a;
}
.teacher-dashboard-body .bs-fcw-full-link:hover {
  color: #15803d;
}

/* Driver Teacher Chat List — Green theme (dashboard floating widget) */
.driver-dashboard-body .bs-fcw-topbar {
  background: linear-gradient(135deg, #166534, #16a34a);
}
.driver-dashboard-body .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.driver-dashboard-body .bs-fcw-filter-tab:focus-visible,
.driver-dashboard-body .bs-fcw-search:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}
.driver-dashboard-body .bs-fcw-card:hover {
  background: #f0fdf4;
}
.driver-dashboard-body .bs-fcw-card.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 0 0 1px #bbf7d0;
}
.driver-dashboard-body .bs-fcw-card-avatar,
.driver-dashboard-body .bs-fcw-room-avatar {
  background: #16a34a !important;
  background-image: none !important;
  color: #fff;
}
.driver-dashboard-body .bs-fcw-badge-role {
  background: #dcfce7;
  color: #166534;
}
.driver-dashboard-body .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.driver-dashboard-body .bs-fcw-send-btn {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.driver-dashboard-body .bs-fcw-send-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}
.driver-dashboard-body .bs-fcw-full-link {
  color: #16a34a;
}
.driver-dashboard-body .bs-fcw-full-link:hover {
  color: #15803d;
}

/* Parent Chat List — Green theme (dashboard floating widget; Parent only) */
.parent-dashboard-body .bs-fcw-topbar {
  background: linear-gradient(135deg, #166534, #16a34a);
}
.parent-dashboard-body .bs-fcw-filter-tab.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.parent-dashboard-body .bs-fcw-filter-tab:focus-visible,
.parent-dashboard-body .bs-fcw-search:focus {
  border-color: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
  outline: none;
}
.parent-dashboard-body .bs-fcw-card:hover {
  background: #f0fdf4;
}
.parent-dashboard-body .bs-fcw-card.is-active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: 0 0 0 1px #bbf7d0;
}
.parent-dashboard-body .bs-fcw-card-avatar,
.parent-dashboard-body .bs-fcw-room-avatar {
  background: #16a34a !important;
  background-image: none !important;
  color: #fff;
}
.parent-dashboard-body .bs-fcw-badge-role {
  background: #dcfce7;
  color: #166534;
}
.parent-dashboard-body .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}
.parent-dashboard-body .bs-fcw-send-btn {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.parent-dashboard-body .bs-fcw-send-btn:hover:not(:disabled) {
  background: #15803d;
  border-color: #15803d;
}
.parent-dashboard-body .bs-fcw-full-link {
  color: #16a34a;
}
.parent-dashboard-body .bs-fcw-full-link:hover {
  color: #15803d;
}

/* ============================================================
   Admin Chat List — STEP 5 Desktop spacing / layout polish
   (green theme + logic unchanged)
   ============================================================ */
.msg-admin-chat-list-body {
  --msg-admin-sidebar-w: 272px;
  --msg-admin-workspace-gap: 1.5rem;
  --msg-admin-list-col: 38%;
  --msg-admin-room-col: 62%;
  --msg-admin-panel-h: calc(100vh - 12.5rem);
  --msg-admin-accent: #16a34a;
  --msg-admin-accent-soft: #f0fdf4;
  --msg-admin-accent-border: #bbf7d0;
  overflow-x: hidden;
}

.msg-admin-chat-list-body .msg-ui-app {
  grid-template-columns: var(--msg-admin-sidebar-w) minmax(0, 1fr);
  align-items: stretch;
}

.msg-admin-chat-list-body .msg-admin-portal-sidebar {
  width: var(--msg-admin-sidebar-w);
  padding: 0.85rem 0.65rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.msg-admin-chat-list-body .msg-admin-portal-sidebar::-webkit-scrollbar {
  width: 6px;
}
.msg-admin-chat-list-body .msg-admin-portal-sidebar::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}
.msg-admin-chat-list-body .msg-admin-portal-logo {
  background: var(--msg-admin-accent);
}

.msg-admin-chat-list-body .msg-ui-shell {
  min-height: 100vh;
  overflow: hidden;
}

.msg-admin-chat-list-body .msg-admin-portal-header {
  padding: 0.7rem 1.35rem;
  gap: 0.75rem 1rem;
  flex-wrap: nowrap;
  min-height: 0;
}
.msg-admin-chat-list-body .msg-admin-portal-header-left h1 {
  font-size: 1.28rem;
  line-height: 1.2;
}
.msg-admin-chat-list-body .msg-admin-portal-header-left p {
  margin-top: 0.12rem;
  line-height: 1.35;
}
.msg-admin-chat-list-body .msg-admin-portal-header-right {
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.msg-admin-chat-list-body .msg-admin-portal-global-search {
  max-width: 300px;
}

.msg-admin-chat-list-body .msg-admin-role-tabs {
  padding: 0.55rem 1.35rem 0.35rem;
  gap: 0.45rem;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-role-tab {
  padding: 0.42rem 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-role-tab-count {
  line-height: 1.2;
}

.msg-admin-chat-list-body #msgUiViewMessages {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.5rem;
}

.msg-admin-chat-list-body .msg-admin-chat-workspace {
  grid-template-columns: minmax(280px, var(--msg-admin-list-col)) minmax(0, var(--msg-admin-room-col)) !important;
  gap: var(--msg-admin-workspace-gap) !important;
  padding: 0.65rem 1.35rem 1rem !important;
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

/* Online Join Class Meetings — full workspace width (one column) */
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace.is-join-meetings-view,
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg1-message-layout.is-join-meetings-view {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-workspace:not([hidden]) {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  flex: 1 1 100%;
  align-self: stretch;
}
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-summary,
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-list {
  width: 100%;
  max-width: 100%;
}

.msg-admin-chat-list-body .msg-admin-list-panel,
.msg-admin-chat-list-body .msg-admin-room-panel {
  min-height: var(--msg-admin-panel-h);
  max-height: var(--msg-admin-panel-h);
  height: var(--msg-admin-panel-h);
  border-radius: 0.9rem;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.msg-admin-chat-list-body .msg-admin-list-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.msg-admin-chat-list-body .msg-admin-list-filter-row {
  flex-shrink: 0;
  padding: 0.55rem 0.75rem 0.5rem;
  gap: 0.45rem;
  border-bottom: 1px solid #f1f5f9;
}

.msg-admin-chat-list-body .msg-admin-pinned-section {
  flex: 0 0 auto;
  margin: 0;
}
.msg-admin-chat-list-body .msg-admin-pinned-section.is-empty .msg-admin-section-head {
  padding-bottom: 0.2rem;
}
.msg-admin-chat-list-body .msg-admin-pinned-section.is-empty .msg-admin-pinned-list {
  padding: 0 0.75rem 0.25rem;
}
.msg-admin-chat-list-body .msg-admin-pinned-empty {
  padding: 0.15rem 0;
  line-height: 1.35;
}

.msg-admin-chat-list-body .msg-admin-all-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.msg-admin-chat-list-body .msg-admin-section-head {
  padding: 0.4rem 0.75rem 0.3rem;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-contact-list,
.msg-admin-chat-list-body .msg-admin-pinned-list {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  padding: 0 0.45rem 0.45rem;
}
.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar,
.msg-admin-chat-list-body .msg-admin-pinned-list::-webkit-scrollbar,
.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar {
  width: 6px;
}
.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-admin-pinned-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.msg-admin-chat-list-body .msg-admin-chat-card,
.msg-admin-chat-list-body .msg-admin-pinned-card {
  padding: 0.6rem 0.65rem;
  margin-bottom: 0.4rem;
  min-height: 4.1rem;
  align-items: center;
}

.msg-admin-chat-list-body .msg-admin-room-panel {
  display: flex !important;
  flex-direction: column;
  min-height: var(--msg-admin-panel-h);
  max-height: var(--msg-admin-panel-h);
  height: var(--msg-admin-panel-h);
  align-self: stretch;
}

.msg-admin-chat-list-body .msg-admin-room-panel #msg1ConversationPanel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex !important;
  flex-direction: column !important;
}

.msg-admin-chat-list-body .msg-admin-room-top {
  padding: 0.75rem 0.95rem;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-room-top-right {
  flex-shrink: 0;
}

.msg-admin-chat-list-body .msg-admin-contact-detail:not(.is-profile-open) {
  margin: 0;
  padding: 0;
  border: 0;
  max-height: 0;
}
.msg-admin-chat-list-body .msg-admin-contact-detail.is-profile-open {
  margin: 0 0.85rem 0.5rem;
  padding: 0.7rem 0.8rem;
  flex-shrink: 0;
}
.msg-admin-chat-list-body .msg-admin-detail-grid {
  gap: 0.65rem 1rem !important;
}
.msg-admin-chat-list-body .msg-admin-detail-value {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg-admin-chat-list-body .msg-ui-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0.85rem 1rem 0.65rem;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row {
  margin-bottom: 0.65rem;
  padding: 0 0.1rem;
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-wrap {
  max-width: min(76%, 500px);
}

.msg-admin-chat-list-body .msg-admin-compose,
.msg-admin-chat-list-body #msg1SendForm.msg-admin-compose {
  padding: 0.55rem 0.75rem;
  flex-shrink: 0;
}

.msg-admin-chat-list-body .msg-admin-read-checks {
  color: var(--msg-admin-accent);
}

@media (min-width: 1024px) {
  .msg-admin-chat-list-body .msg-admin-list-filter-row {
    display: grid !important;
    grid-template-columns: minmax(108px, 1fr) minmax(108px, 1fr) auto;
    align-items: center;
  }
  .msg-admin-chat-list-body .msg-admin-list-search {
    grid-column: 1 / -1;
    width: 100% !important;
    min-width: 0;
    flex: none !important;
  }
  .msg-admin-chat-list-body .msg-admin-list-filter-btn {
    justify-self: end;
  }
  .msg-admin-chat-list-body .msg-admin-role-tabs {
    flex-wrap: nowrap;
  }
}

@media (max-width: 1366px) and (min-width: 901px) {
  .msg-admin-chat-list-body {
    --msg-admin-panel-h: calc(100vh - 13rem);
  }
  .msg-admin-chat-list-body .msg-admin-chat-workspace {
    grid-template-columns: minmax(260px, 40%) minmax(0, 60%) !important;
    gap: 1.15rem !important;
  }
  .msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-chat-workspace.is-join-meetings-view {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
}

@media (max-width: 1024px) {
  .msg-admin-chat-list-body {
    --msg-admin-panel-h: auto;
  }
  .msg-admin-chat-list-body .msg-admin-list-panel,
  .msg-admin-chat-list-body .msg-admin-room-panel {
    min-height: min(520px, calc(100vh - 14rem));
    max-height: none;
    height: auto;
  }
  .msg-admin-chat-list-body .msg-admin-portal-header {
    flex-wrap: wrap;
  }
  .msg-admin-chat-list-body .msg-admin-role-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

@media (max-width: 900px) {
  .msg-admin-chat-list-body .msg-admin-chat-workspace {
    padding: 0.55rem 0.85rem 0.85rem !important;
  }
}

@media (max-width: 768px) {
  .msg-admin-chat-list-body .msg-admin-detail-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 430px) {
  .msg-admin-chat-list-body .msg-admin-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .msg-admin-chat-list-body .msg-admin-portal-global-search {
    min-width: 100%;
    max-width: none;
  }
}

/* ============================================================
   Admin Chat List — STEP 6 Communication Tools feature cards
   ============================================================ */
.msg-admin-chat-list-body {
  --msg-admin-panel-h: calc(100vh - 16.75rem);
}

.msg-admin-chat-list-body .msg-admin-comm-tools {
  margin: 0 1rem 0.65rem;
  padding: 0.65rem 0.75rem 0.5rem;
  background: #fff;
  border: 1px solid var(--msg-admin-accent-border, #bbf7d0);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.msg-admin-chat-list-body .msg-admin-comm-tools-head {
  margin-bottom: 0.55rem;
}

.msg-admin-chat-list-body .msg-admin-comm-tools-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

.msg-admin-chat-list-body .msg-admin-comm-tools-head p {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
}

.msg-admin-chat-list-body .msg-admin-feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
}

.msg-admin-chat-list-body .msg-admin-feature-card {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.55rem;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.msg-admin-chat-list-body .msg-admin-feature-card:hover {
  border-color: var(--msg-admin-accent-border, #bbf7d0);
  box-shadow: 0 4px 10px rgba(22, 163, 74, 0.1);
  transform: translateY(-1px);
}

.msg-admin-chat-list-body .msg-admin-feature-card.is-active,
.msg-admin-chat-list-body .msg-admin-feature-card:focus-visible {
  border-color: var(--msg-admin-accent, #16a34a);
  background: var(--msg-admin-accent-soft, #f0fdf4);
  outline: none;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}

.msg-admin-chat-list-body .msg-admin-feature-icon {
  flex: 0 0 2rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--msg-admin-accent-soft, #f0fdf4);
  border: 1px solid var(--msg-admin-accent-border, #bbf7d0);
  font-size: 0.95rem;
  line-height: 1;
}

.msg-admin-chat-list-body .msg-admin-feature-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.msg-admin-chat-list-body .msg-admin-feature-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.2;
}

.msg-admin-chat-list-body .msg-admin-feature-desc {
  font-size: 0.68rem;
  color: #64748b;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.msg-admin-chat-list-body .msg-admin-feature-badge {
  align-self: flex-start;
  margin-top: 0.1rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.msg-admin-chat-list-body .msg-admin-feature-badge.is-active-badge {
  background: #dcfce7;
  color: #166534;
}

.msg-admin-chat-list-body .msg-admin-feature-badge.is-ready-badge {
  background: #ecfdf5;
  color: #15803d;
}

.msg-admin-chat-list-body .msg-admin-feature-badge.is-next-badge {
  background: #f1f5f9;
  color: #475569;
}

.msg-admin-chat-list-body .msg-admin-feature-badge.is-requires-badge {
  background: #fff7ed;
  color: #9a3412;
}

.msg-admin-chat-list-body .msg-admin-feature-placeholder {
  margin-top: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: var(--msg-admin-accent-soft, #f0fdf4);
  border: 1px dashed var(--msg-admin-accent-border, #bbf7d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.msg-admin-chat-list-body .msg-admin-feature-placeholder p {
  margin: 0;
  font-size: 0.78rem;
  color: #166534;
  flex: 1 1 auto;
}

.msg-admin-chat-list-body .msg-admin-feature-placeholder-dismiss {
  flex: 0 0 auto;
  border: 1px solid var(--msg-admin-accent-border, #bbf7d0);
  background: #fff;
  color: #15803d;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

.msg-admin-chat-list-body #msgUiViewMessages {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 1366px) {
  .msg-admin-chat-list-body .msg-admin-feature-cards-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .msg-admin-chat-list-body .msg-admin-feature-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .msg-admin-chat-list-body {
    --msg-admin-panel-h: calc(100vh - 18rem);
  }
}

@media (max-width: 768px) {
  .msg-admin-chat-list-body .msg-admin-comm-tools {
    margin: 0 0.65rem 0.5rem;
  }
  .msg-admin-chat-list-body .msg-admin-feature-cards-grid {
    grid-template-columns: 1fr;
  }
  .msg-admin-chat-list-body {
    --msg-admin-panel-h: auto;
  }
}

/* Admin Chat List — STEP 7 Grade/Class list + room */
.msg-admin-chat-list-body.msg-admin-mode-grade-class .msg-admin-pinned-section,
.msg-admin-chat-list-body.msg-admin-mode-grade-class .msg-admin-all-section {
  display: none !important;
}

.msg-admin-chat-list-body .msg-admin-grade-list-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.msg-admin-chat-list-body .msg-admin-grade-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.35rem 0.15rem 0.5rem;
  scrollbar-width: thin;
}

.msg-admin-chat-list-body .msg-admin-grade-card {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  width: 100%;
  margin: 0 0 0.45rem;
  padding: 0.55rem 0.6rem;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.msg-admin-chat-list-body .msg-admin-grade-card:hover {
  border-color: var(--msg-admin-accent-border, #bbf7d0);
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.08);
}

.msg-admin-chat-list-body .msg-admin-grade-card.active {
  border-color: var(--msg-admin-accent, #16a34a);
  background: var(--msg-admin-accent-soft, #f0fdf4);
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.12);
}

.msg-admin-chat-list-body .msg-admin-grade-card-icon {
  flex: 0 0 2.1rem;
  font-size: 1.1rem;
  line-height: 1;
}

.msg-admin-chat-list-body .msg-admin-grade-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.msg-admin-chat-list-body .msg-admin-grade-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}

.msg-admin-chat-list-body .msg-admin-grade-protected-pill {
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
}

.msg-admin-chat-list-body .msg-admin-grade-card-meta {
  font-size: 0.72rem;
  color: #64748b;
}

.msg-admin-chat-list-body .msg-admin-grade-room-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem 0.55rem;
  border-bottom: 1px solid #e2e8f0;
}

.msg-admin-chat-list-body .msg-admin-grade-protected-badge {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}

.msg-admin-chat-list-body .msg-admin-grade-summary {
  margin: 0.5rem 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--msg-admin-accent-border, #bbf7d0);
  border-radius: 10px;
  background: #fff;
}

.msg-admin-chat-list-body .msg-admin-grade-summary-desc {
  margin: 0.5rem 0 0;
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
}

.msg-admin-chat-list-body .msg-admin-grade-members {
  margin: 0 1rem 0.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}

.msg-admin-chat-list-body .msg-admin-grade-members-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
}

.msg-admin-chat-list-body .msg-admin-grade-members-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.msg-admin-chat-list-body .msg-admin-grade-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.45rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #e2e8f0;
  max-width: 100%;
}

.msg-admin-chat-list-body .msg-admin-grade-member-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--msg-admin-accent-soft, #f0fdf4);
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.msg-admin-chat-list-body .msg-admin-grade-member-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.msg-admin-chat-list-body .msg-admin-grade-member-text strong {
  font-size: 0.72rem;
  line-height: 1.2;
}

.msg-admin-chat-list-body .msg-admin-grade-member-text small {
  font-size: 0.62rem;
  color: #64748b;
}

.msg-admin-chat-list-body .msg-admin-grade-members-empty {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}

.msg-admin-chat-list-body .msg-admin-mode-grade-class #msg1ConversationPanel.has-grade-selection .msg-ui-thread {
  flex: 1 1 auto;
}

/* ============================================================
   Admin Chat — Workspace Alignment + Composer Width Fix V1
   (layout/CSS only — no message logic)
   ============================================================ */
.msg-admin-chat-list-body .msg-admin-chat-workspace {
  align-items: stretch;
}

.msg-admin-chat-list-body .msg-admin-list-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.msg-admin-chat-list-body.message-body #msg1ConversationPanel.msg-ui-chat-room-panel {
  min-height: 0 !important;
  max-height: none !important;
}

.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-compose-row.msg-admin-compose-row,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-row-modern {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: 0.5rem !important;
  width: 100%;
  box-sizing: border-box;
}

.msg-admin-chat-list-body .msg-admin-compose-glass {
  width: 100%;
  box-sizing: border-box;
}

.msg-admin-chat-list-body .msg-admin-compose-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.msg-admin-chat-list-body .msg-admin-compose-tool,
.msg-admin-chat-list-body .msg-admin-compose-tools .msg-admin-compose-icon,
.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool {
  width: 2.625rem;
  height: 2.625rem;
  min-width: 2.625rem;
  min-height: 2.625rem;
  margin: 0;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #334155;
  font: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.msg-admin-chat-list-body .msg-admin-compose-tool:hover:not(:disabled),
.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool:hover:not(:disabled) {
  border-color: #bbf7d0;
  background: rgba(240, 253, 244, 0.96);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.12);
  transform: translateY(-1px);
}

.msg-admin-chat-list-body .msg-admin-compose-tool:active:not(:disabled),
.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
}

.msg-admin-chat-list-body .msg-admin-compose-tool-icon {
  font-size: 1.12rem;
  line-height: 1;
}

.msg-admin-chat-list-body .msg-admin-compose-input-wrap {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.msg-admin-chat-list-body .msg-admin-compose-input-wrap #msg1MessageInput,
.msg-admin-chat-list-body .msg-admin-compose-row #msg1MessageInput {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  resize: none !important;
}

.msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn-modern,
.msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn,
.msg-admin-chat-list-body .msg-admin-compose-row .msg-ui-send-btn {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin-left: 0;
}

.msg-admin-chat-list-body .msg-admin-compose,
.msg-admin-chat-list-body #msg1SendForm.msg-admin-composer-modern {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .msg-admin-chat-list-body .msg-admin-compose-tool,
  .msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool {
    width: 2.375rem;
    height: 2.375rem;
    min-width: 2.375rem;
    min-height: 2.375rem;
  }
  .msg-admin-chat-list-body .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }
  .msg-admin-chat-list-body .msg-admin-list-panel,
  .msg-admin-chat-list-body .msg-admin-room-panel {
    width: 100%;
    max-width: 100%;
  }
}

/* Admin My Profile + selected contact profile (Facebook-style, matches role dashboards) */
.admin-module-dashboard .admin-fb-page-toolbar {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
.admin-module-dashboard .admin-fb-page-title {
  margin: 0;
  font-size: 1.35rem;
  color: #0f172a;
}
.admin-module-dashboard .admin-fb-page-subtitle {
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.85rem;
}
.admin-module-dashboard .admin-fb-back-btn,
.admin-module-dashboard .admin-fb-edit-btn {
  border: 1px solid #e2e8f0;
  background: #fff;
  border-radius: 12px;
  padding: 0.5rem 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
.admin-module-dashboard .admin-fb-edit-btn {
  margin-left: auto;
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.admin-module-dashboard .admin-fb-role-pill {
  margin-left: auto;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  background: #eef2ff;
  color: #4338ca;
  font-size: 0.78rem;
  font-weight: 900;
}
.admin-module-dashboard .admin-fb-profile-body {
  padding: 0 0.25rem 1rem;
}
.admin-module-dashboard .admin-fb-profile-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.85rem 0;
}
.admin-module-dashboard .admin-fb-about-card h4 {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
}
.admin-module-dashboard .admin-fb-about-grid article {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
  background: #fff;
}
.admin-module-dashboard .admin-fb-about-grid small {
  display: block;
  color: #94a3b8;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-module-dashboard .admin-fb-about-grid strong {
  display: block;
  color: #0f172a;
  font-size: 0.86rem;
  margin-top: 0.15rem;
  word-break: break-word;
}
.admin-module-dashboard .admin-fb-post-card {
  margin-top: 0.5rem;
}
.admin-module-dashboard #adminSelectedProfileShell.teacher-facebook-profile-panel,
.admin-module-dashboard #adminSelectedProfileShell.student-facebook-profile-panel,
.admin-module-dashboard #adminSelectedProfileShell.parent-facebook-profile-panel,
.admin-module-dashboard #adminSelectedProfileShell.driver-facebook-profile-panel {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
@media (max-width: 1100px) {
  .admin-module-dashboard .admin-fb-profile-columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Admin Chat — hide old lower Class/Group + Video Class sections
   Hidden by Admin Chat UI cleanup request (Admin Chat List only)
   ============================================================ */
.bs-hidden-ui {
  display: none !important;
}

.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiViewGroups,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiViewVideo,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg4GroupHeroCard,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg4GroupChatPanel,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg4GroupFooterBanner,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg7VideoClassPanel,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgAdminGradeListSection,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgAdminGradeRoomTop,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgAdminGradeSummaryCard,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgAdminGradeMembersRow,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiInfoPanel,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiMobileSession,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiNavGroups,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiNavVideo,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections .bs-hidden-ui-admin-chat {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Override MSG STEP8/9 rules that force group/video views visible on v8/v9 body */
.msg-admin-chat-list-body.msg-ui-v8-body.msg-admin-hide-old-lower-sections #msgUiViewGroups,
.msg-admin-chat-list-body.msg-ui-v9-body.msg-admin-hide-old-lower-sections #msgUiViewVideo,
.msg-admin-chat-list-body.msg-ui-v9-body.msg-admin-hide-old-lower-sections .msg9-video-view {
  display: none !important;
}

.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg1ConversationPanel .msg8-direct-header,
.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msg1ConversationPanel .msg-admin-restart-excluded.msg8-direct-header {
  display: none !important;
}

.msg-admin-chat-list-body.msg-admin-hide-old-lower-sections #msgUiViewMessages {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* ============================================================
   VR-MSG-ADMIN-PREMIUM-NAVY — Online Join + Chat glass restyle
   Visual polish only — scoped to .msg-admin-chat-list-body
   Matches accepted Video Room Premium Dark Navy Glassmorphism
   ============================================================ */
.msg-admin-chat-list-body {
  --msg-navy-bg: linear-gradient(160deg, #0b1530 0%, #12264f 48%, #0f1f3d 100%);
  --msg-navy-panel: linear-gradient(160deg, rgba(11, 21, 48, 0.94) 0%, rgba(18, 38, 79, 0.9) 48%, rgba(15, 31, 61, 0.92) 100%);
  --msg-navy-glass: linear-gradient(160deg, rgba(11, 21, 48, 0.88) 0%, rgba(18, 38, 79, 0.82) 50%, rgba(15, 31, 61, 0.86) 100%);
  --msg-navy-glass-soft: linear-gradient(160deg, rgba(15, 31, 61, 0.72) 0%, rgba(18, 38, 79, 0.68) 100%);
  --msg-navy-border: rgba(96, 165, 250, 0.22);
  --msg-navy-border-soft: rgba(96, 165, 250, 0.14);
  --msg-navy-text: #f1f5f9;
  --msg-navy-muted: #94a3b8;
  --msg-navy-shadow: 0 14px 32px rgba(8, 18, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --msg-navy-shadow-soft: 0 8px 22px rgba(8, 18, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --msg-admin-accent-soft: rgba(34, 197, 94, 0.12);
  --msg-admin-accent-border: rgba(74, 222, 128, 0.28);
}

/* Page shell */
.msg-admin-chat-list-body.msg-admin-chat-list-body {
  background: var(--msg-navy-bg);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-ui-shell {
  background: transparent;
}
.msg-admin-chat-list-body .msg-admin-portal-sidebar {
  background: linear-gradient(180deg, #070f22 0%, #0f1f3d 55%, #12264f 100%);
  border-right: 1px solid var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-portal-link.is-active {
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.28);
}

/* Portal header */
.msg-admin-chat-list-body .msg-admin-portal-header {
  background: var(--msg-navy-panel);
  border-bottom: 1px solid var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-admin-portal-header-left h1 {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-portal-header-left p {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-portal-menu-btn,
.msg-admin-chat-list-body .msg-admin-portal-notify,
.msg-admin-chat-list-body .msg-admin-portal-profile {
  background: rgba(15, 31, 61, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-portal-global-search {
  background: rgba(11, 21, 48, 0.78);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-portal-global-search::placeholder {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-portal-profile strong {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-portal-profile small {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-portal-profile-avatar {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
}

/* Communication tools feature cards */
.msg-admin-chat-list-body .msg-admin-comm-tools {
  background: var(--msg-navy-glass);
  border-color: var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.msg-admin-chat-list-body .msg-admin-comm-tools-head h2 {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-comm-tools-head p {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-feature-card {
  background: rgba(11, 21, 48, 0.62);
  border-color: var(--msg-navy-border-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.msg-admin-chat-list-body .msg-admin-feature-card:hover {
  border-color: var(--msg-admin-accent-border);
  box-shadow: 0 6px 18px rgba(8, 18, 40, 0.28);
}
.msg-admin-chat-list-body .msg-admin-feature-card.is-active,
.msg-admin-chat-list-body .msg-admin-feature-card:focus-visible {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(74, 222, 128, 0.42);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
.msg-admin-chat-list-body .msg-admin-feature-icon {
  background: rgba(34, 197, 94, 0.14);
  border-color: var(--msg-admin-accent-border);
}
.msg-admin-chat-list-body .msg-admin-feature-title {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-feature-desc {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-feature-badge.is-active-badge {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}
.msg-admin-chat-list-body .msg-admin-feature-badge.is-ready-badge {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}
.msg-admin-chat-list-body .msg-admin-feature-badge.is-next-badge {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}
.msg-admin-chat-list-body .msg-admin-feature-badge.is-requires-badge {
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
}
.msg-admin-chat-list-body .msg-admin-feature-placeholder {
  background: rgba(22, 163, 74, 0.08);
  border-color: var(--msg-admin-accent-border);
}
.msg-admin-chat-list-body .msg-admin-feature-placeholder p {
  color: #86efac;
}
.msg-admin-chat-list-body .msg-admin-feature-placeholder-dismiss {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-admin-accent-border);
  color: #86efac;
}

/* Grade / class circle row */
.msg-admin-chat-list-body .msg-admin-grade-circle-section {
  background: transparent;
  border-bottom: 1px solid var(--msg-navy-border-soft);
  padding: 0.65rem 1.35rem 0.4rem;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-section + .msg-admin-role-tabs {
  border-bottom-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-grade-circle-title {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-grade-circle-subtitle,
.msg-admin-chat-list-body .msg-admin-grade-circle-active {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-grade-circle-active {
  color: #4ade80;
}
.msg-admin-chat-list-body .msg-admin-grade-circle {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-grade-circle:hover {
  background: rgba(96, 165, 250, 0.1);
  border-radius: 18px;
}
.msg-admin-chat-list-body .msg-admin-grade-circle.is-active {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.32);
}
.msg-admin-chat-list-body .msg-admin-grade-circle-avatar {
  border-color: var(--msg-navy-border);
  background: rgba(11, 21, 48, 0.72);
}
.msg-admin-chat-list-body .msg-admin-grade-circle.is-active .msg-admin-grade-circle-avatar {
  border-color: rgba(255, 255, 255, 0.35);
}
.msg-admin-chat-list-body .msg-admin-grade-circle-label {
  color: inherit;
}

/* Role tabs — premium pills */
.msg-admin-chat-list-body .msg-admin-role-tab {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.msg-admin-chat-list-body .msg-admin-role-tab:hover {
  border-color: var(--msg-navy-border);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-role-tab.is-active {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(74, 222, 128, 0.45);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}
.msg-admin-chat-list-body .msg-admin-role-tab-count {
  background: rgba(148, 163, 184, 0.14);
  color: var(--msg-navy-muted);
}

/* List + room glass panels */
.msg-admin-chat-list-body .msg-admin-list-panel,
.msg-admin-chat-list-body .msg-admin-room-panel {
  background: var(--msg-navy-panel);
  border-color: var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Filters + search */
.msg-admin-chat-list-body .msg-admin-list-filter-row {
  border-bottom-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-list-filter-select,
.msg-admin-chat-list-body .msg-admin-list-search,
.msg-admin-chat-list-body .msg-admin-list-filter-btn {
  background: rgba(11, 21, 48, 0.78);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-list-search::placeholder {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-list-filter-btn:hover {
  border-color: var(--msg-navy-border);
  background: rgba(18, 38, 79, 0.72);
}

/* Section headings */
.msg-admin-chat-list-body .msg-admin-section-head {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-section-toggle {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-pinned-empty {
  color: #64748b;
}

/* Contact cards */
.msg-admin-chat-list-body .msg-admin-chat-card,
.msg-admin-chat-list-body .msg-admin-pinned-card {
  background: var(--msg-navy-glass-soft);
  border-color: var(--msg-navy-border-soft);
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-admin-chat-card:hover,
.msg-admin-chat-list-body .msg-admin-pinned-card:hover {
  border-color: var(--msg-navy-border);
  background: rgba(18, 38, 79, 0.78);
}
.msg-admin-chat-list-body .msg-admin-chat-card.active,
.msg-admin-chat-list-body .msg-admin-pinned-card.active {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(74, 222, 128, 0.42);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.28), var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-admin-chat-card-main strong,
.msg-admin-chat-list-body .msg-admin-pinned-card strong {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-chat-card-sub,
.msg-admin-chat-list-body .msg-admin-chat-card-preview {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-chat-card-side {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-online-dot {
  border-color: rgba(11, 21, 48, 0.92);
}
.msg-admin-chat-list-body .msg-ui-role-badge,
.msg-admin-chat-list-body .msg-ui-school-chip,
.msg-admin-chat-list-body .msg-admin-room-role-badge {
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.22);
}
.msg-admin-chat-list-body .msg-admin-grade-group-card,
.msg-admin-chat-list-body .msg-admin-pinned-grade-group {
  background: rgba(22, 163, 74, 0.1);
  border-color: rgba(74, 222, 128, 0.32);
}
.msg-admin-chat-list-body .msg-admin-grade-group-card.active,
.msg-admin-chat-list-body .msg-admin-pinned-grade-group.active {
  background: rgba(22, 163, 74, 0.18);
  border-color: rgba(74, 222, 128, 0.48);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}
.msg-admin-chat-list-body .msg-admin-grade-group-kind {
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
}
.msg-admin-chat-list-body .msg-admin-grade-group-pinned-wrap {
  border-bottom-color: var(--msg-navy-border-soft);
}

/* Room header + actions */
.msg-admin-chat-list-body .msg-admin-room-top {
  border-bottom-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-room-top-left h3,
.msg-admin-chat-list-body .msg-admin-room-name-row h3 {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-room-top-left p,
.msg-admin-chat-list-body .msg-admin-room-meta-line {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-room-online {
  color: #4ade80;
}
.msg-admin-chat-list-body .msg-admin-room-action,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-top-right .msg-admin-room-action {
  background: rgba(11, 21, 48, 0.78);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-admin-room-action:hover:not(:disabled),
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass:hover:not(:disabled) {
  border-color: var(--msg-navy-border);
  background: rgba(18, 38, 79, 0.82);
  transform: translateY(-1px);
}
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-more-menu {
  background: rgba(11, 21, 48, 0.96);
  border-color: var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow);
}
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-more-item {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-more-item:hover:not(:disabled) {
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
}

/* Contact detail / profile strip */
.msg-admin-chat-list-body .msg-admin-contact-detail.is-profile-open {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-detail-head strong {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-detail-close-btn {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-detail-close-btn:hover {
  background: rgba(96, 165, 250, 0.1);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-detail-label {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-detail-value {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-detail-blocked {
  background: rgba(127, 29, 29, 0.18);
  color: #fca5a5;
}
.msg-admin-chat-list-body .msg-admin-detail-classes-scroll {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-muted);
}

/* Thread + bubbles */
.msg-admin-chat-list-body .msg-ui-thread {
  background: rgba(7, 15, 34, 0.42);
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(74, 222, 128, 0.35);
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.22);
}
.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble {
  background: rgba(15, 31, 61, 0.88);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-ui-bubble-sender {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-date-chip {
  background: rgba(96, 165, 250, 0.12);
  color: var(--msg-navy-muted);
  border: 1px solid var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-read-checks {
  color: #60a5fa;
}

/* Empty chat state */
.msg-admin-chat-list-body .msg-ui-empty {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-ui-empty strong {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-ui-empty p {
  color: var(--msg-navy-muted);
}

/* Composer */
.msg-admin-chat-list-body .msg-admin-compose,
.msg-admin-chat-list-body #msg1SendForm.msg-admin-compose,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-composer-modern.msg-admin-compose {
  background: transparent;
  border-top-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-compose-glass,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-compose-glass {
  background: rgba(11, 21, 48, 0.78);
  border-color: var(--msg-navy-border-soft);
  box-shadow: var(--msg-navy-shadow-soft);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.msg-admin-chat-list-body .msg-admin-compose-tool,
.msg-admin-chat-list-body .msg-admin-compose-tools .msg-admin-compose-icon,
.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-compose-tool {
  background: rgba(15, 31, 61, 0.82);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.msg-admin-chat-list-body .msg-admin-compose-tool:hover:not(:disabled),
.msg-admin-chat-list-body .msg-admin-compose-tools button.msg-admin-compose-tool:hover:not(:disabled),
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-compose-tool:hover:not(:disabled) {
  border-color: var(--msg-admin-accent-border);
  background: rgba(22, 163, 74, 0.12);
  box-shadow: 0 4px 12px rgba(8, 18, 40, 0.22);
}
.msg-admin-chat-list-body .msg-admin-compose-input-wrap textarea,
.msg-admin-chat-list-body .msg-admin-compose-row textarea,
.msg-admin-chat-list-body #msg1MessageInput,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap textarea {
  background: rgba(7, 15, 34, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-compose-input-wrap textarea::placeholder,
.msg-admin-chat-list-body #msg1MessageInput::placeholder {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-compose-input-wrap textarea:focus,
.msg-admin-chat-list-body #msg1MessageInput:focus,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-compose-input-wrap textarea:focus {
  border-color: rgba(74, 222, 128, 0.45);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
  outline: none;
}
.msg-admin-chat-list-body .msg-admin-compose-row .msg-ui-send-btn,
.msg-admin-chat-list-body .msg-admin-compose-row .msg-admin-send-btn,
.msg-admin-chat-list-body .msg-admin-send-btn-modern,
.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-send-btn-modern {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
}

/* Scrollbars */
.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-admin-pinned-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.28);
}
.msg-admin-chat-list-body .msg-admin-contact-list,
.msg-admin-chat-list-body .msg-admin-pinned-list,
.msg-admin-chat-list-body .msg-ui-thread {
  scrollbar-color: rgba(96, 165, 250, 0.28) transparent;
}

/* ============================================================
   Online Join Class Meetings — premium navy glass
   ============================================================ */
.msg-admin-chat-list-body.msg-admin-main-mode-join-meetings .msg-admin-join-meetings-workspace {
  background: var(--msg-navy-panel);
  border-color: var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.msg-admin-chat-list-body .msg-admin-join-meetings-panel {
  background: transparent;
}
.msg-admin-chat-list-body .msg-admin-join-meetings-title {
  color: var(--msg-navy-text);
  font-weight: 800;
}
.msg-admin-chat-list-body .msg-admin-join-meetings-subtitle,
.msg-admin-chat-list-body .msg-admin-join-meetings-filter,
.msg-admin-chat-list-body .msg-admin-join-toolbar-hint {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-join-summary-card {
  background: var(--msg-navy-glass-soft);
  border-color: var(--msg-navy-border-soft);
  box-shadow: var(--msg-navy-shadow-soft);
  min-height: 4.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.msg-admin-chat-list-body .msg-admin-join-summary-card span {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-join-summary-card strong {
  color: var(--msg-navy-text);
  font-size: 1.35rem;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-card {
  background: var(--msg-navy-glass-soft);
  border-color: var(--msg-navy-border-soft);
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-card-head h4 {
  color: var(--msg-navy-text);
  font-weight: 800;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-live-dot {
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.28);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-status.is-live {
  background: rgba(34, 197, 94, 0.18);
  color: #86efac;
  border: 1px solid rgba(74, 222, 128, 0.32);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-status.is-scheduled {
  background: rgba(96, 165, 250, 0.14);
  color: #93c5fd;
  border: 1px solid rgba(96, 165, 250, 0.24);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-status.is-ended {
  background: rgba(148, 163, 184, 0.12);
  color: var(--msg-navy-muted);
  border: 1px solid var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-status.is-cancelled {
  background: rgba(251, 146, 60, 0.14);
  color: #fdba74;
  border: 1px solid rgba(251, 146, 60, 0.28);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-ended-label {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-cancelled-label {
  color: #fdba74;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-meta dt {
  color: #64748b;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-meta dd {
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-create,
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-start {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(74, 222, 128, 0.42);
  color: #fff;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.3);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-join {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(74, 222, 128, 0.42);
  color: #fff;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-end:not(:disabled) {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  border-color: rgba(248, 113, 113, 0.42);
  color: #fff;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.28);
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-save {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
  border-color: rgba(96, 165, 250, 0.42);
  color: #fff;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-cancel {
  background: rgba(127, 29, 29, 0.12);
  border-color: rgba(251, 146, 60, 0.35);
  color: #fdba74;
}
.msg-admin-chat-list-body .msg-admin-join-meeting-btn.is-muted {
  background: rgba(15, 31, 61, 0.62);
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-join-meetings-empty {
  background: rgba(11, 21, 48, 0.55);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-join-origin {
  color: #93c5fd;
}

/* Create Meeting modal */
.msg-admin-join-meeting-modal-backdrop {
  background: rgba(7, 15, 34, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.msg-admin-join-meeting-modal .msg-admin-join-meeting-form,
.msg-admin-chat-list-body .msg-admin-join-meeting-form {
  background: var(--msg-navy-panel);
  border-color: var(--msg-navy-border);
  box-shadow: var(--msg-navy-shadow);
  color: var(--msg-navy-text);
}
.msg-admin-join-meeting-modal .msg-admin-join-meeting-form.is-open,
.msg-admin-chat-list-body .msg-admin-join-meeting-form.is-open {
  border-color: rgba(74, 222, 128, 0.35);
}
.msg-admin-join-meeting-modal .msg-admin-join-meeting-form h4,
.msg-admin-chat-list-body .msg-admin-join-meeting-form h4 {
  color: var(--msg-navy-text);
}
.msg-admin-join-meeting-modal .msg-admin-join-form-subtitle,
.msg-admin-chat-list-body .msg-admin-join-form-subtitle {
  color: var(--msg-navy-muted);
}
.msg-admin-join-meeting-modal .msg-admin-join-form-close-btn,
.msg-admin-chat-list-body .msg-admin-join-form-close-btn {
  background: rgba(11, 21, 48, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-muted);
}
.msg-admin-join-meeting-modal .msg-admin-join-form-label-text,
.msg-admin-join-meeting-modal .msg-admin-join-form-grid label,
.msg-admin-chat-list-body .msg-admin-join-form-label-text,
.msg-admin-chat-list-body .msg-admin-join-form-grid label {
  color: var(--msg-navy-muted);
}
.msg-admin-join-meeting-modal .msg-admin-join-form-grid input,
.msg-admin-join-meeting-modal .msg-admin-join-form-grid select,
.msg-admin-join-meeting-modal .msg-admin-join-form-grid textarea,
.msg-admin-chat-list-body .msg-admin-join-form-grid input,
.msg-admin-chat-list-body .msg-admin-join-form-grid select,
.msg-admin-chat-list-body .msg-admin-join-form-grid textarea {
  background: rgba(7, 15, 34, 0.72);
  border-color: var(--msg-navy-border-soft);
  color: var(--msg-navy-text);
}
.msg-admin-join-meeting-modal #msgAdminJoinFormTarget,
.msg-admin-chat-list-body #msgAdminJoinFormTarget {
  background: rgba(11, 21, 48, 0.62);
  color: var(--msg-navy-text);
}
.msg-admin-join-meeting-modal .msg-admin-join-form-actions,
.msg-admin-chat-list-body .msg-admin-join-form-actions {
  border-top-color: var(--msg-navy-border-soft);
}
.msg-admin-join-meeting-modal .msg-admin-join-optional,
.msg-admin-chat-list-body .msg-admin-join-optional {
  color: #64748b;
}

/* Grade list mode cards (same navy family) */
.msg-admin-chat-list-body .msg-admin-grade-card {
  background: var(--msg-navy-glass-soft);
  border-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-grade-card:hover {
  border-color: var(--msg-admin-accent-border);
}
.msg-admin-chat-list-body .msg-admin-grade-card.active {
  background: rgba(22, 163, 74, 0.14);
  border-color: rgba(74, 222, 128, 0.42);
}
.msg-admin-chat-list-body .msg-admin-grade-card-meta {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-grade-protected-pill,
.msg-admin-chat-list-body .msg-admin-grade-protected-badge {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  border-color: var(--msg-admin-accent-border);
}
.msg-admin-chat-list-body .msg-admin-grade-room-top {
  border-bottom-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-grade-summary,
.msg-admin-chat-list-body .msg-admin-grade-members {
  background: rgba(11, 21, 48, 0.62);
  border-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-grade-summary-desc,
.msg-admin-chat-list-body .msg-admin-grade-members-empty {
  color: var(--msg-navy-muted);
}
.msg-admin-chat-list-body .msg-admin-grade-member-chip {
  background: rgba(15, 31, 61, 0.72);
  border-color: var(--msg-navy-border-soft);
}
.msg-admin-chat-list-body .msg-admin-grade-member-text small {
  color: var(--msg-navy-muted);
}

/* ============================================================
   VR-REF-HEADER-NAVY-GLASS — top bar like reference image 2
   School name + Online Class Room | close (×) on dark glass bar
   ============================================================ */
body.vr-ref-ui {
  background: linear-gradient(160deg, #050a18 0%, #0b1530 48%, #0f1f3d 100%);
}
body.vr-ref-ui .vr-width-balance-shell.video-class-shell,
body.vr-ref-ui .vr-width-balance-shell.vr-ref-shell {
  padding-top: 18px;
}
body.vr-ref-ui .vr-ref-header-navy-glass,
body.vr-ref-ui .vr-ref-header.vr-ref-header-navy-glass,
body.vr-ref-ui header.vr-ref-header.vr-ref-header-navy-glass.video-class-topbar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px 10px 16px !important;
  margin: 0 0 14px;
  border-radius: 14px !important;
  background: linear-gradient(160deg, rgba(11, 21, 48, 0.94) 0%, rgba(18, 38, 79, 0.9) 48%, rgba(15, 31, 61, 0.92) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.22) !important;
  box-shadow: 0 14px 32px rgba(8, 18, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
box-sizing: border-box;
  color: #f1f5f9 !important;
  flex-direction: row !important;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0;
  align-items: center;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-icon {
  display: none;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-copy {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  min-width: 0;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-title {
  display: inline;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9 !important;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-sub {
  display: inline;
  font-size: 15px;
  font-weight: 700;
  color: #e2e8f0 !important;
  line-height: 1.35;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-meeting-context,
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-meeting-info-btn,
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-profile,
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-actions {
  display: none !important;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(127, 29, 29, 0.24) 0%, rgba(11, 21, 48, 0.78) 52%, rgba(15, 31, 61, 0.86) 100%);
  border: 1px solid rgba(248, 113, 113, 0.34);
  box-shadow: 0 6px 18px rgba(127, 29, 29, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
white-space: nowrap;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-live-dot {
  width: 8px;
  height: 8px;
  margin: 0;
  flex-shrink: 0;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.24), 0 0 10px rgba(239, 68, 68, 0.45);
  animation: vr-ref-live-pulse 1.6s ease-in-out infinite;
}
@keyframes vr-ref-live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(0.92); }
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-live-pill,
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-step1-pill-live {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
  background: rgba(220, 38, 38, 0.22) !important;
  border: 1px solid rgba(248, 113, 113, 0.38) !important;
  color: #fecaca !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-timer {
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding: 2px 0;
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-duration-limit {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #cbd5e1;
  padding: 2px 8px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 16, 34, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-timer + .vr-ref-duration-limit:not([hidden])::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 8px;
  background: rgba(148, 163, 184, 0.28);
}
body.vr-ref-ui .vr-ref-header-close-btn {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(11, 21, 48, 0.72);
  color: #94a3b8;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
body.vr-ref-ui .vr-ref-header-close-btn:hover,
body.vr-ref-ui .vr-ref-header-close-btn:focus-visible {
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.88);
  color: #f1f5f9;
  outline: none;
  transform: translateY(-1px);
}
body.vr-ref-ui .bs-video-room-modal-header:not([hidden]),
body.vr-ref-ui .vr-maximize-header-navy-glass:not([hidden]) {
  background: linear-gradient(160deg, rgba(11, 21, 48, 0.94) 0%, rgba(18, 38, 79, 0.9) 48%, rgba(15, 31, 61, 0.92) 100%);
  border-color: rgba(96, 165, 250, 0.22);
  box-shadow: 0 8px 22px rgba(8, 18, 40, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  padding: 8px 12px;
  min-height: 48px;
}
body.bs-video-room-maximized .vr-maximize-header-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  min-width: 0;
  flex: 1 1 auto;
}
body.vr-ref-ui .bs-video-room-modal-header-title {
  color: #f1f5f9;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.vr-ref-ui .vr-maximize-header-live-pill,
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-header-live-pill {
  display: inline-flex !important;
}
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-header-live-pill,
body.vr-ref-ui .vr-maximize-header-live-pill {
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(127, 29, 29, 0.24) 0%, rgba(11, 21, 48, 0.78) 52%, rgba(15, 31, 61, 0.86) 100%);
  border: 1px solid rgba(248, 113, 113, 0.34);
  box-shadow: 0 6px 18px rgba(127, 29, 29, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
white-space: nowrap;
}
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-header-live-pill .vr-ref-live-pill,
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-header-live-pill .vr-step1-pill-live,
body.vr-ref-ui .vr-maximize-header-live-pill .vr-ref-live-pill,
body.vr-ref-ui .vr-maximize-header-live-pill .vr-step1-pill-live {
  background: rgba(220, 38, 38, 0.22) !important;
  border: 1px solid rgba(248, 113, 113, 0.38) !important;
  color: #fecaca !important;
}
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-timer,
body.vr-ref-ui .vr-maximize-header-live-pill .vr-ref-timer {
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}
body.vr-ref-ui .vr-maximize-header-navy-glass .vr-ref-duration-limit,
body.vr-ref-ui .vr-maximize-header-live-pill .vr-ref-duration-limit {
  color: #cbd5e1;
  background: rgba(8, 16, 34, 0.55);
  border-radius: 999px;
  padding: 2px 8px;
}
body.vr-ref-ui .bs-video-room-modal-close:not([hidden]) {
  border-color: rgba(96, 165, 250, 0.28);
  background: rgba(11, 21, 48, 0.72);
  color: #94a3b8;
}
@media (max-width: 720px) {
  body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-title,
  body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-sub {
    font-size: 13px;
  }
  body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-brand-row {
    gap: 0.45rem 0.55rem;
  }
  body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill {
    padding: 5px 9px;
    gap: 6px;
  }
  body.vr-ref-ui .vr-ref-header-navy-glass .vr-ref-header-live-pill .vr-ref-duration-limit {
    display: none !important;
  }
  body.vr-ref-ui .vr-ref-header-close-btn {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* VR-PARTICIPANTS-SCROLLBAR-POLISH — dark navy glass scrollbar */
body.vr-ref-ui .vr-participants-clean-list,
body.vr-ref-ui .vr-participants-clean-body,
body.vr-ref-ui .vr-ref-classroom .vr-step5-participant-list,
body.vr-ref-ui .vr-ref-participants-panel .vr-step5-participant-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.38) rgba(8, 16, 34, 0.28);
}
body.vr-ref-ui .vr-participants-clean-list::-webkit-scrollbar,
body.vr-ref-ui .vr-participants-clean-body::-webkit-scrollbar,
body.vr-ref-ui .vr-ref-classroom .vr-step5-participant-list::-webkit-scrollbar,
body.vr-ref-ui .vr-ref-participants-panel .vr-step5-participant-list::-webkit-scrollbar {
  width: 6px;
}
body.vr-ref-ui .vr-participants-clean-list::-webkit-scrollbar-track,
body.vr-ref-ui .vr-participants-clean-body::-webkit-scrollbar-track,
body.vr-ref-ui .vr-ref-classroom .vr-step5-participant-list::-webkit-scrollbar-track,
body.vr-ref-ui .vr-ref-participants-panel .vr-step5-participant-list::-webkit-scrollbar-track {
  background: rgba(8, 16, 34, 0.42);
  border-radius: 999px;
  margin: 4px 0;
}
body.vr-ref-ui .vr-participants-clean-list::-webkit-scrollbar-thumb,
body.vr-ref-ui .vr-participants-clean-body::-webkit-scrollbar-thumb,
body.vr-ref-ui .vr-ref-classroom .vr-step5-participant-list::-webkit-scrollbar-thumb,
body.vr-ref-ui .vr-ref-participants-panel .vr-step5-participant-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.48) 0%, rgba(59, 130, 246, 0.34) 100%);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.2);
}
body.vr-ref-ui .vr-participants-clean-list::-webkit-scrollbar-thumb:hover,
body.vr-ref-ui .vr-participants-clean-body::-webkit-scrollbar-thumb:hover,
body.vr-ref-ui .vr-ref-classroom .vr-step5-participant-list::-webkit-scrollbar-thumb:hover,
body.vr-ref-ui .vr-ref-participants-panel .vr-step5-participant-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.58) 0%, rgba(96, 165, 250, 0.45) 100%);
}

/* ============================================================
   VR-MSG-ADMIN-COHERENT-POLISH-V2 — full-page navy glass harmony
   Fixes light/green overrides + white right panel empty state
   ============================================================ */

/* Beat older green-theme !important rules (active cards / avatars) */
.msg-admin-chat-list-body .msg-admin-chat-card.active,
.msg-admin-chat-list-body .msg-admin-pinned-card.active,
.msg-admin-chat-list-body .msg-ui-contact-card.active {
  background: rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.28), var(--msg-navy-shadow-soft) !important;
}
.msg-admin-chat-list-body .msg-admin-chat-card .msg-ui-contact-avatar,
.msg-admin-chat-list-body .msg-admin-pinned-card .msg-ui-contact-avatar {
  background: linear-gradient(160deg, rgba(22, 163, 74, 0.88) 0%, rgba(21, 128, 61, 0.96) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(134, 239, 172, 0.35) !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.22) !important;
}
.msg-admin-chat-list-body .msg-admin-room-avatar,
.msg-admin-chat-list-body .msg3-room-avatar.msg-admin-room-avatar {
  background: rgba(11, 21, 48, 0.82) !important;
  color: #cbd5e1 !important;
  border: 1px solid var(--msg-navy-border-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-room-avatar,
.msg-admin-chat-list-body #msg1ConversationPanel.has-contact .msg-admin-room-avatar {
  background: linear-gradient(160deg, rgba(22, 163, 74, 0.88) 0%, rgba(21, 128, 61, 0.96) 100%) !important;
  color: #fff !important;
  border-color: rgba(134, 239, 172, 0.35) !important;
}

/* Grade / class circle row — full navy (no light green strip) */
.msg-admin-chat-list-body .msg-admin-grade-circle-section {
  background: linear-gradient(180deg, rgba(7, 15, 34, 0.62) 0%, rgba(11, 21, 48, 0.42) 100%) !important;
  border-bottom: 1px solid var(--msg-navy-border-soft) !important;
  padding: 0.75rem 1.35rem 0.55rem !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-section + .msg-admin-role-tabs {
  border-bottom-color: var(--msg-navy-border-soft) !important;
  background: transparent;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-title {
  color: var(--msg-navy-text) !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-subtitle,
.msg-admin-chat-list-body .msg-admin-grade-circle-empty {
  color: var(--msg-navy-muted) !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-active {
  color: #86efac !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle {
  color: var(--msg-navy-muted) !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle:hover {
  background: rgba(96, 165, 250, 0.12) !important;
  border-radius: 18px !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle.is-active {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.28) !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-avatar,
.msg-admin-chat-list-body .msg-admin-grade-circle-avatar-default {
  background: linear-gradient(160deg, rgba(18, 38, 79, 0.92) 0%, rgba(11, 21, 48, 0.96) 100%) !important;
  border: 1px solid rgba(96, 165, 250, 0.28) !important;
  color: #86efac !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-label {
  color: inherit !important;
  font-size: 11px;
}
.msg-admin-chat-list-body .msg-admin-grade-circle-notify {
  box-shadow: 0 0 0 2px rgba(11, 21, 48, 0.92) !important;
}

/* Right chat panel — no white empty area */
.msg-admin-chat-list-body .panel,
.msg-admin-chat-list-body .msg-ui-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.msg-admin-chat-list-body.message-body #msg1ConversationPanel.msg-ui-chat-room-panel,
.msg-admin-chat-list-body #msg1ConversationPanel.msg-admin-room-panel {
  background: var(--msg-navy-panel) !important;
  border: 1px solid var(--msg-navy-border) !important;
  box-shadow: var(--msg-navy-shadow) !important;
  color: var(--msg-navy-text) !important;
}
.msg-admin-chat-list-body .msg-admin-step1-thread,
.msg-admin-chat-list-body #msg1MessageListView.msg-admin-step1-thread {
  background: rgba(7, 15, 34, 0.38) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.msg-admin-chat-list-body .msg-admin-step1-thread-placeholder.msg-ui-empty {
  background: linear-gradient(160deg, rgba(11, 21, 48, 0.78) 0%, rgba(18, 38, 79, 0.68) 100%) !important;
  border: 1px dashed rgba(96, 165, 250, 0.28) !important;
  border-radius: 16px !important;
  padding: 2.25rem 1.5rem !important;
  max-width: 380px;
  width: calc(100% - 2rem);
  margin: auto !important;
  box-shadow: var(--msg-navy-shadow-soft);
}
.msg-admin-chat-list-body .msg-ui-empty strong {
  color: var(--msg-navy-text) !important;
  font-size: 1rem;
}
.msg-admin-chat-list-body .msg-ui-empty p {
  color: var(--msg-navy-muted) !important;
  font-weight: 600;
  line-height: 1.45;
}
.msg-admin-chat-list-body .msg-ui-empty-icon {
  font-size: 2.35rem;
  opacity: 0.75;
}

/* Compose — beat message-body white compose-box */
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-compose-box,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-glass {
  background: rgba(11, 21, 48, 0.78) !important;
  border: 1px solid var(--msg-navy-border-soft) !important;
  box-shadow: var(--msg-navy-shadow-soft) !important;
}
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-compose-row,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-row-modern {
  background: transparent !important;
}
.msg-admin-chat-list-body.message-body #msg1ConversationPanel #msg1MessageInput,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-input-wrap textarea {
  background: rgba(7, 15, 34, 0.72) !important;
  color: var(--msg-navy-text) !important;
  border-color: var(--msg-navy-border-soft) !important;
}
.msg-admin-chat-list-body.message-body #msg1ConversationPanel #msg1MessageInput::placeholder,
.msg-admin-chat-list-body.message-body #msg1ConversationPanel textarea::placeholder {
  color: #64748b !important;
}

/* List + room panels equal premium glass */
.msg-admin-chat-list-body .msg-admin-list-panel,
.msg-admin-chat-list-body .msg-admin-room-panel {
  background: var(--msg-navy-panel) !important;
  border: 1px solid var(--msg-navy-border) !important;
  box-shadow: var(--msg-navy-shadow) !important;
}
.msg-admin-chat-list-body .msg-admin-chat-workspace {
  gap: 1.15rem !important;
}

/* Chat list scrollbars */
.msg-admin-chat-list-body .msg-admin-contact-list,
.msg-admin-chat-list-body .msg-admin-pinned-list,
.msg-admin-chat-list-body .msg-ui-thread {
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.35) rgba(8, 16, 34, 0.25);
}
.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar,
.msg-admin-chat-list-body .msg-admin-pinned-list::-webkit-scrollbar,
.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar {
  width: 6px;
}
.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-admin-pinned-list::-webkit-scrollbar-thumb,
.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.45) 0%, rgba(59, 130, 246, 0.32) 100%);
  border-radius: 999px;
}

/* ============================================================
   MSG-ADMIN-IOS-NEUMORPH — Clean White Blue Soft Neumorphism Chat
   Modern iOS-style Message / Chat (admin list view only)
   ============================================================ */
.msg-admin-chat-list-body.msg-admin-ios-neumorph-ui {
  --ios-chat-bg: #e8edf5;
  --ios-chat-surface: #ffffff;
  --ios-chat-blue: #0a84ff;
  --ios-chat-blue-dark: #0077ed;
  --ios-chat-blue-soft: #e8f2ff;
  --ios-chat-blue-muted: #d6e8ff;
  --ios-chat-ink: #1c1c1e;
  --ios-chat-muted: #8e8e93;
  --ios-chat-line: rgba(60, 60, 67, 0.1);
  --ios-neu-raised: 6px 6px 16px rgba(163, 177, 198, 0.32), -5px -5px 14px rgba(255, 255, 255, 0.96);
  --ios-neu-soft: 4px 4px 12px rgba(163, 177, 198, 0.22), -3px -3px 10px rgba(255, 255, 255, 0.98);
  --ios-neu-inset: inset 2px 2px 6px rgba(163, 177, 198, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.9);
  --msg-admin-list-col: 34%;
  --msg-admin-room-col: 66%;
  --msg-admin-accent: #0a84ff;
  --msg-admin-accent-soft: #e8f2ff;
  --msg-admin-accent-border: #b8d9ff;
  background: linear-gradient(180deg, #f2f5fa 0%, var(--ios-chat-bg) 100%) !important;
  color: var(--ios-chat-ink);
}

/* Shell + sidebar */
.msg-admin-ios-neumorph-ui .msg-ui-shell {
  background: transparent !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-sidebar {
  background: linear-gradient(180deg, #fafbfd 0%, #eef2f8 100%) !important;
  border-right: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-ink) !important;
  box-shadow: 4px 0 18px rgba(163, 177, 198, 0.12);
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-brand strong {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-brand small,
.msg-admin-ios-neumorph-ui .msg-admin-portal-link {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-link.is-active {
  background: var(--ios-chat-blue) !important;
  color: #fff !important;
  box-shadow: var(--ios-neu-soft);
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-foot-card {
  background: var(--ios-chat-surface) !important;
  border: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-soft);
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-logo {
  background: var(--ios-chat-blue) !important;
}

/* Header */
.msg-admin-ios-neumorph-ui .msg-admin-portal-header {
  background: var(--ios-chat-surface) !important;
  border-bottom: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-left h1 {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-left p {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-global-search,
.msg-admin-ios-neumorph-ui .msg-admin-portal-menu-btn,
.msg-admin-ios-neumorph-ui .msg-admin-portal-notify,
.msg-admin-ios-neumorph-ui .msg-admin-portal-profile {
  background: #f4f6fa !important;
  border: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-ink) !important;
  box-shadow: var(--ios-neu-inset);
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-profile-avatar {
  background: var(--ios-chat-blue-soft) !important;
  color: var(--ios-chat-blue) !important;
}

/* Feature cards row */
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools {
  background: var(--ios-chat-surface) !important;
  border: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-raised) !important;
  border-radius: 18px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools-head h2 {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools-head p {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-card {
  background: #f7f9fc !important;
  border: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-soft) !important;
  border-radius: 14px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-card.is-active {
  background: var(--ios-chat-blue-soft) !important;
  border-color: #9ecaff !important;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.14), var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-icon {
  background: var(--ios-chat-blue-soft) !important;
  border-color: #c5ddff !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-title {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-desc {
  color: var(--ios-chat-muted) !important;
}

/* Grade / class circles */
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-section {
  background: var(--ios-chat-surface) !important;
  border-bottom: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-soft);
  padding: 0.8rem 1.35rem 0.55rem !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-title {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-subtitle,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-empty {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-active {
  color: var(--ios-chat-blue) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle:hover {
  background: #f0f4fa !important;
  border-radius: 18px !important;
  box-shadow: var(--ios-neu-soft);
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle.is-active {
  background: var(--ios-chat-blue) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-avatar,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-avatar-default {
  background: #f4f7fc !important;
  border: 1px solid #d8e4f2 !important;
  color: var(--ios-chat-blue) !important;
  box-shadow: var(--ios-neu-inset) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle.is-active .msg-admin-grade-circle-avatar-default {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Role tabs */
.msg-admin-ios-neumorph-ui .msg-admin-role-tabs {
  padding: 0.55rem 1.35rem 0.65rem !important;
  background: transparent;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab {
  background: var(--ios-chat-surface) !important;
  border: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-muted) !important;
  box-shadow: var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab.is-active {
  background: var(--ios-chat-blue) !important;
  border-color: var(--ios-chat-blue) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab-count {
  background: rgba(0, 0, 0, 0.06) !important;
  color: inherit !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab.is-active .msg-admin-role-tab-count {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Wide two-column workspace */
.msg-admin-ios-neumorph-ui .msg-admin-chat-workspace {
  grid-template-columns: minmax(300px, var(--msg-admin-list-col)) minmax(0, var(--msg-admin-room-col)) !important;
  gap: 1.25rem !important;
  padding: 0.75rem 1.35rem 1.1rem !important;
}

/* List + room panels — soft neumorphic cards */
.msg-admin-ios-neumorph-ui .msg-admin-list-panel,
.msg-admin-ios-neumorph-ui .msg-admin-room-panel,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel.msg-ui-chat-room-panel,
.msg-admin-ios-neumorph-ui #msg1ConversationPanel.msg-admin-room-panel {
  background: var(--ios-chat-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 22px !important;
  box-shadow: var(--ios-neu-raised) !important;
  color: var(--ios-chat-ink) !important;
}

/* Filters */
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-row {
  border-bottom-color: var(--ios-chat-line) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-select,
.msg-admin-ios-neumorph-ui .msg-admin-list-search,
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-btn {
  background: #f4f6fa !important;
  border: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-ink) !important;
  border-radius: 12px !important;
  box-shadow: var(--ios-neu-inset);
}
.msg-admin-ios-neumorph-ui .msg-admin-list-search {
  border-radius: 999px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-section-head {
  color: var(--ios-chat-muted) !important;
  font-weight: 700;
}

/* Contact cards */
.msg-admin-ios-neumorph-ui .msg-admin-chat-card,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card,
.msg-admin-ios-neumorph-ui .msg-ui-contact-card {
  background: #f8fafd !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card:hover,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card:hover {
  background: #f2f6fc !important;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.26), -4px -4px 10px rgba(255, 255, 255, 0.98) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card.active,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card.active,
.msg-admin-ios-neumorph-ui .msg-ui-contact-card.active {
  background: linear-gradient(90deg, var(--ios-chat-blue-soft) 0%, #f5f9ff 68%) !important;
  border-color: #b8d9ff !important;
  box-shadow: inset 3px 0 0 var(--ios-chat-blue), var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card-main strong {
  color: var(--ios-chat-ink) !important;
  font-weight: 700;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card-sub,
.msg-admin-ios-neumorph-ui .msg-admin-chat-card-preview,
.msg-admin-ios-neumorph-ui .msg-admin-chat-card-side {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card .msg-ui-contact-avatar,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card .msg-ui-contact-avatar,
.msg-admin-ios-neumorph-ui .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui .msg3-room-avatar.msg-admin-room-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, var(--ios-chat-blue) 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-role-badge,
.msg-admin-ios-neumorph-ui .msg-ui-school-chip,
.msg-admin-ios-neumorph-ui .msg-admin-room-role-badge {
  background: var(--ios-chat-blue-soft) !important;
  color: var(--ios-chat-blue) !important;
  border: 1px solid #c5ddff !important;
  border-radius: 999px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-unread-pill {
  background: var(--ios-chat-blue) !important;
}

/* Room header */
.msg-admin-ios-neumorph-ui .msg-admin-room-top {
  border-bottom: 1px solid var(--ios-chat-line) !important;
  background: linear-gradient(180deg, #fff 0%, #fafcff 100%);
}
.msg-admin-ios-neumorph-ui .msg-admin-room-name-row h3,
.msg-admin-ios-neumorph-ui .msg-admin-room-top-left h3 {
  color: var(--ios-chat-ink) !important;
  font-weight: 700;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-meta-line,
.msg-admin-ios-neumorph-ui .msg-admin-room-top-left p {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-online {
  color: #34c759 !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-action,
.msg-admin-ios-neumorph-ui.msg-admin-chat-modern-polish .msg-admin-room-action-glass {
  background: #f4f6fa !important;
  border: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-ink) !important;
  box-shadow: var(--ios-neu-soft) !important;
  border-radius: 14px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-action:hover:not(:disabled) {
  background: var(--ios-chat-blue-soft) !important;
  border-color: #b8d9ff !important;
}

/* Thread + iOS bubbles */
.msg-admin-ios-neumorph-ui .msg-ui-thread,
.msg-admin-ios-neumorph-ui .msg-admin-step1-thread,
.msg-admin-ios-neumorph-ui #msg1MessageListView.msg-admin-step1-thread {
  background: linear-gradient(180deg, #f7f9fc 0%, #f2f5fa 100%) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-thread .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: linear-gradient(180deg, #3b9eff 0%, var(--ios-chat-blue) 100%) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-thread .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.theirs .msg-ui-bubble {
  background: #f2f2f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: var(--ios-chat-ink) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-bubble-sender {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-date-chip {
  background: #eef1f6 !important;
  color: var(--ios-chat-muted) !important;
  border: 1px solid var(--ios-chat-line) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-read-checks {
  color: var(--ios-chat-blue) !important;
}

/* Empty state */
.msg-admin-ios-neumorph-ui .msg-admin-step1-thread-placeholder.msg-ui-empty,
.msg-admin-ios-neumorph-ui .msg-ui-empty {
  background: var(--ios-chat-surface) !important;
  border: 1px dashed #c5d4e8 !important;
  border-radius: 20px !important;
  box-shadow: var(--ios-neu-soft) !important;
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-empty strong {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-empty p {
  color: var(--ios-chat-muted) !important;
}

/* Composer */
.msg-admin-ios-neumorph-ui .msg-admin-compose,
.msg-admin-ios-neumorph-ui #msg1SendForm.msg-admin-compose {
  background: transparent !important;
  border-top: 1px solid var(--ios-chat-line) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-compose-glass,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel .msg-ui-compose-box,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel .msg-admin-compose-glass {
  background: #f4f6fa !important;
  border: 1px solid var(--ios-chat-line) !important;
  border-radius: 22px !important;
  box-shadow: var(--ios-neu-inset) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-compose-tool,
.msg-admin-ios-neumorph-ui .msg-admin-compose-tools button.msg-admin-compose-tool {
  background: var(--ios-chat-surface) !important;
  border: 1px solid var(--ios-chat-line) !important;
  color: var(--ios-chat-ink) !important;
  box-shadow: var(--ios-neu-soft) !important;
  border-radius: 14px !important;
}
.msg-admin-ios-neumorph-ui #msg1MessageInput,
.msg-admin-ios-neumorph-ui .msg-admin-compose-input-wrap textarea {
  background: transparent !important;
  border: none !important;
  color: var(--ios-chat-ink) !important;
  box-shadow: none !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-send-btn-modern,
.msg-admin-ios-neumorph-ui .msg-admin-send-btn,
.msg-admin-ios-neumorph-ui .msg-ui-send-btn {
  background: linear-gradient(180deg, #3b9eff 0%, var(--ios-chat-blue) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.32) !important;
}

/* Contact detail strip */
.msg-admin-ios-neumorph-ui .msg-admin-contact-detail.is-profile-open {
  background: #f8fafd !important;
  border: 1px solid var(--ios-chat-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--ios-neu-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-detail-label {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-detail-value {
  color: var(--ios-chat-ink) !important;
}

/* Join meetings panel (same page) */
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-workspace,
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-panel {
  background: var(--ios-chat-surface) !important;
  border-color: var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-raised) !important;
  border-radius: 22px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-title {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-subtitle,
.msg-admin-ios-neumorph-ui .msg-admin-join-toolbar-hint {
  color: var(--ios-chat-muted) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-summary-card,
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-card {
  background: #f8fafd !important;
  border: 1px solid var(--ios-chat-line) !important;
  box-shadow: var(--ios-neu-soft) !important;
  border-radius: 16px !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-summary-card strong,
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-card-head h4 {
  color: var(--ios-chat-ink) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-create,
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-join,
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-start {
  background: var(--ios-chat-blue) !important;
  border-color: var(--ios-chat-blue) !important;
  color: #fff !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-end:not(:disabled) {
  background: #ff3b30 !important;
  border-color: #ff3b30 !important;
  color: #fff !important;
}

/* Scrollbars — light subtle */
.msg-admin-ios-neumorph-ui .msg-admin-contact-list,
.msg-admin-ios-neumorph-ui .msg-ui-thread {
  scrollbar-color: rgba(10, 132, 255, 0.35) rgba(0, 0, 0, 0.04);
}
.msg-admin-ios-neumorph-ui .msg-admin-contact-list::-webkit-scrollbar-thumb,
.msg-admin-ios-neumorph-ui .msg-ui-thread::-webkit-scrollbar-thumb {
  background: rgba(10, 132, 255, 0.35) !important;
}

@media (max-width: 1024px) {
  .msg-admin-ios-neumorph-ui .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
  }
}

/* IOS-NEUMORPH-FIX — Create Meeting modal + green/dark leftovers */
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-modal-backdrop {
  background: rgba(174, 184, 204, 0.42) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-modal .msg-admin-join-meeting-form,
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-form {
  background: #ffffff !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 24px rgba(163, 177, 198, 0.34), -6px -6px 18px rgba(255, 255, 255, 0.96) !important;
  color: #1c1c1e !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-modal .msg-admin-join-meeting-form.is-open,
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-form.is-open {
  border-color: #b8d9ff !important;
  box-shadow: 8px 8px 24px rgba(163, 177, 198, 0.34), 0 0 0 3px rgba(10, 132, 255, 0.12) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-modal .msg-admin-join-meeting-form h4,
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-form h4 {
  color: #1c1c1e !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-subtitle {
  color: #8e8e93 !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-close-btn {
  background: #f4f6fa !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  color: #8e8e93 !important;
  border-radius: 12px !important;
  box-shadow: inset 2px 2px 5px rgba(163, 177, 198, 0.16), inset -2px -2px 4px rgba(255, 255, 255, 0.9) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-label-text,
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid label {
  color: #636366 !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid input,
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid select,
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid textarea,
body.msg-admin-ios-neumorph-ui #msgAdminJoinFormTarget {
  background: #f4f6fa !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  color: #1c1c1e !important;
  border-radius: 12px !important;
  box-shadow: inset 2px 2px 6px rgba(163, 177, 198, 0.18), inset -2px -2px 5px rgba(255, 255, 255, 0.9) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid input:focus,
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid select:focus,
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-grid textarea:focus {
  border-color: #9ecaff !important;
  box-shadow: inset 2px 2px 6px rgba(163, 177, 198, 0.14), 0 0 0 3px rgba(10, 132, 255, 0.14) !important;
  outline: none;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-form-actions {
  border-top-color: rgba(60, 60, 67, 0.1) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn {
  background: #f4f6fa !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  color: #1c1c1e !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.95) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-save {
  background: #5ac8fa !important;
  border-color: #5ac8fa !important;
  color: #fff !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-start,
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-create {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.28) !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-btn.is-cancel {
  background: #fff !important;
  border-color: #d1d5db !important;
  color: #636366 !important;
}
body.msg-admin-ios-neumorph-ui .msg-admin-join-optional {
  color: #8e8e93 !important;
}

/* Beat leftover green send / avatar / dark compose (higher specificity) */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg3-room-avatar.msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-room-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button.msg-admin-send-btn,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose .msg-ui-send-btn,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-send-form button.msg-admin-send-btn,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-send-btn.msg-ui-send-btn,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-send-btn-modern,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body #msgUiViewMessages .msg-ui-send-btn {
  background: linear-gradient(180deg, #3b9eff 0%, #0a84ff 100%) !important;
  background-image: linear-gradient(180deg, #3b9eff 0%, #0a84ff 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(10, 132, 255, 0.32) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-send-form.msg-admin-compose button:hover:not(:disabled),
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-send-form button.msg-admin-send-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2b92f9 0%, #0077ed 100%) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-ui-compose-box,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-glass {
  background: #f4f6fa !important;
  border: 1px solid rgba(60, 60, 67, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: inset 2px 2px 6px rgba(163, 177, 198, 0.18), inset -2px -2px 5px rgba(255, 255, 255, 0.9) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel #msg1MessageInput,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel .msg-admin-compose-input-wrap textarea,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageInput {
  background: transparent !important;
  color: #1c1c1e !important;
  border: none !important;
  box-shadow: none !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.message-body #msg1ConversationPanel #msg1MessageInput::placeholder,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageInput::placeholder {
  color: #8e8e93 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: linear-gradient(180deg, #3b9eff 0%, #0a84ff 100%) !important;
  background-image: linear-gradient(180deg, #3b9eff 0%, #0a84ff 100%) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card .msg-ui-contact-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-card .msg-ui-contact-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.24) !important;
}

/* Grade Group Chat — iOS blue (beat green base + navy overrides) */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-pinned-wrap {
  border-bottom: 1px dashed #c5ddff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group {
  background: #f8fafd !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 12px rgba(163, 177, 198, 0.22), -3px -3px 10px rgba(255, 255, 255, 0.98) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card:hover,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group:hover {
  background: #f2f6fc !important;
  border-color: transparent !important;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.26), -4px -4px 10px rgba(255, 255, 255, 0.98) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card.active,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group.active {
  background: linear-gradient(90deg, #e8f2ff 0%, #f5f9ff 68%) !important;
  border-color: #b8d9ff !important;
  box-shadow: inset 3px 0 0 #0a84ff, 4px 4px 12px rgba(163, 177, 198, 0.22), -3px -3px 10px rgba(255, 255, 255, 0.98) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-avatar.msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msgAdminRoomAvatar .msg-admin-grade-group-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-badge,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-role-badge.msg-admin-grade-group-badge,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-role-badge.msg-admin-grade-group-badge {
  background: #e8f2ff !important;
  color: #0a84ff !important;
  border: 1px solid #c5ddff !important;
  border-radius: 999px !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-kind {
  background: #e8f2ff !important;
  color: #0a84ff !important;
  border: 1px solid #c5ddff !important;
  border-radius: 999px !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card .msg-admin-chat-card-main strong,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group .msg-admin-chat-card-main strong {
  color: #1c1c1e !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card .msg-admin-chat-card-sub,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card .msg-admin-chat-card-preview,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card .msg-admin-chat-card-side,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group .msg-admin-chat-card-sub,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group .msg-admin-chat-card-preview,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group .msg-admin-chat-card-side {
  color: #8e8e93 !important;
}

/* ============================================================
   MSG-ADMIN-3D-NEUMORPH-PREMIUM — Enterprise Chat Dashboard
   Premium 3D Soft Neumorphism · White + Blue · Floating cards
   ============================================================ */
.msg-admin-chat-list-body.msg-admin-ios-neumorph-ui {
  --neu3d-radius-xl: 28px;
  --neu3d-radius-lg: 24px;
  --neu3d-radius-md: 20px;
  --neu3d-radius-sm: 16px;
  --neu3d-blue-glow: rgba(10, 132, 255, 0.08);
  --neu3d-float:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 1px 0 0 rgba(255, 255, 255, 0.42),
    14px 18px 36px rgba(148, 163, 184, 0.28),
    -10px -12px 30px rgba(255, 255, 255, 0.96),
    0 32px 64px var(--neu3d-blue-glow);
  --neu3d-float-hover:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    18px 22px 44px rgba(148, 163, 184, 0.32),
    -12px -14px 34px rgba(255, 255, 255, 0.98),
    0 40px 72px rgba(10, 132, 255, 0.1);
  --neu3d-soft:
    8px 10px 22px rgba(148, 163, 184, 0.2),
    -6px -8px 18px rgba(255, 255, 255, 0.98),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  --neu3d-inset:
    inset 3px 4px 10px rgba(148, 163, 184, 0.22),
    inset -3px -3px 9px rgba(255, 255, 255, 0.96);
  --neu3d-glass-rim: 1px solid rgba(255, 255, 255, 0.92);
  --neu3d-glass-top: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.18) 38%, transparent 62%);
  --ios-neu-raised: var(--neu3d-float);
  --ios-neu-soft: var(--neu3d-soft);
  --ios-neu-inset: var(--neu3d-inset);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.012em;
  background:
    radial-gradient(ellipse 82% 52% at 10% -4%, rgba(10, 132, 255, 0.1), transparent 58%),
    radial-gradient(ellipse 72% 48% at 92% 6%, rgba(90, 200, 250, 0.08), transparent 54%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(10, 132, 255, 0.05), transparent 62%),
    linear-gradient(180deg, #f8fafd 0%, #edf2f8 46%, #e6ecf5 100%) !important;
}

/* Typography — enterprise messaging */
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-left h1,
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools-head h2,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-title,
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-title,
.msg-admin-ios-neumorph-ui .msg-admin-room-name-row h3,
.msg-admin-ios-neumorph-ui .msg-admin-room-top-left h3 {
  font-weight: 700 !important;
  letter-spacing: -0.028em !important;
  line-height: 1.2 !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-left p,
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools-head p,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-subtitle,
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-subtitle,
.msg-admin-ios-neumorph-ui .msg-admin-room-meta-line {
  font-weight: 500 !important;
  letter-spacing: -0.006em !important;
  line-height: 1.45 !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card-main strong,
.msg-admin-ios-neumorph-ui .msg-admin-feature-title {
  font-weight: 600 !important;
  letter-spacing: -0.018em !important;
}

/* Shell — layered dashboard canvas */
.msg-admin-ios-neumorph-ui .msg-ui-shell {
  background: transparent !important;
  position: relative;
}
.msg-admin-ios-neumorph-ui #msgUiViewMessages {
  padding: 0 1.1rem 1.35rem !important;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Sidebar — floating nav rail */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-portal-sidebar {
  background: linear-gradient(180deg, #fcfdff 0%, #f0f4fa 55%, #e9eef6 100%) !important;
  border-right: var(--neu3d-glass-rim) !important;
  box-shadow:
    8px 0 28px rgba(148, 163, 184, 0.14),
    inset -1px 0 0 rgba(255, 255, 255, 0.75) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-link {
  border-radius: 14px !important;
  font-weight: 600 !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-link:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: var(--neu3d-soft) !important;
  transform: translateX(2px);
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-link.is-active {
  box-shadow: 0 10px 24px rgba(10, 132, 255, 0.28), var(--neu3d-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-foot-card {
  border-radius: var(--neu3d-radius-md) !important;
  box-shadow: var(--neu3d-soft) !important;
  background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-logo {
  box-shadow: 0 8px 20px rgba(10, 132, 255, 0.32) !important;
}

/* Header — glass command bar */
.msg-admin-ios-neumorph-ui .msg-admin-portal-header {
  margin: 0.85rem 1.1rem 0 !important;
  border-radius: var(--neu3d-radius-lg) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
box-shadow: var(--neu3d-float) !important;
  position: relative;
  overflow: hidden;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--neu3d-glass-top);
  pointer-events: none;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-left,
.msg-admin-ios-neumorph-ui .msg-admin-portal-header-right {
  position: relative;
  z-index: 1;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-global-search {
  border-radius: 999px !important;
  font-weight: 500 !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-portal-profile {
  border-radius: var(--neu3d-radius-md) !important;
  box-shadow: var(--neu3d-soft) !important;
  background: linear-gradient(180deg, #fff 0%, #f4f7fc 100%) !important;
}

/* Communication tools — premium feature deck */
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools {
  border-radius: var(--neu3d-radius-xl) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
  box-shadow: var(--neu3d-float) !important;
  padding: 1.15rem 1.35rem 1.25rem !important;
  position: relative;
  overflow: hidden;
  transform: translateY(-1px);
}
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--neu3d-glass-top);
  pointer-events: none;
}
.msg-admin-ios-neumorph-ui .msg-admin-comm-tools-head,
.msg-admin-ios-neumorph-ui .msg-admin-feature-cards-grid {
  position: relative;
  z-index: 1;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-card {
  border-radius: var(--neu3d-radius-md) !important;
  box-shadow: var(--neu3d-soft) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--neu3d-float-hover) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-card.is-active {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.16), var(--neu3d-float) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-feature-icon {
  border-radius: 16px !important;
  box-shadow: var(--neu3d-inset) !important;
}

/* Grade / class filter deck */
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-section {
  border-radius: var(--neu3d-radius-xl) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
  box-shadow: var(--neu3d-float) !important;
  margin: 0 !important;
  padding: 1rem 1.35rem 0.85rem !important;
  position: relative;
  overflow: hidden;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-section::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--neu3d-glass-top);
  pointer-events: none;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-head,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-row-wrap,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-active {
  position: relative;
  z-index: 1;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle {
  border-radius: 20px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle:hover {
  transform: translateY(-2px);
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle.is-active {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(10, 132, 255, 0.32), var(--neu3d-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-avatar,
.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-avatar-default {
  border-radius: 50% !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-grade-section-popup-inner {
  border-radius: var(--neu3d-radius-lg) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #fff 0%, #f4f8ff 100%) !important;
  box-shadow: var(--neu3d-float) !important;
}

/* Role filter pills */
.msg-admin-ios-neumorph-ui .msg-admin-role-tabs {
  gap: 0.5rem !important;
  padding: 0.25rem 0 0.15rem !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab {
  border-radius: 999px !important;
  font-weight: 600 !important;
  padding: 0.48rem 1rem !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab:hover:not(.is-active) {
  transform: translateY(-1px);
  box-shadow: var(--neu3d-float-hover) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-role-tab.is-active {
  transform: translateY(-2px);
}

/* Chat workspace — dual floating panels */
.msg-admin-ios-neumorph-ui .msg-admin-chat-workspace {
  gap: 1.35rem !important;
  padding: 0.35rem 0 0.5rem !important;
  align-items: stretch;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-panel,
.msg-admin-ios-neumorph-ui .msg-admin-room-panel,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel.msg-ui-chat-room-panel,
.msg-admin-ios-neumorph-ui #msg1ConversationPanel.msg-admin-room-panel {
  border-radius: var(--neu3d-radius-xl) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  box-shadow: var(--neu3d-float) !important;
  transform: translateY(-2px);
  position: relative;
  overflow: hidden;
  min-height: 520px;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-panel::before,
.msg-admin-ios-neumorph-ui .msg-admin-room-panel::before,
.msg-admin-ios-neumorph-ui #msg1ConversationPanel.msg-admin-room-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--neu3d-glass-top);
  pointer-events: none;
  z-index: 0;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-panel > *,
.msg-admin-ios-neumorph-ui .msg-admin-room-panel > *,
.msg-admin-ios-neumorph-ui #msg1ConversationPanel.msg-admin-room-panel > * {
  position: relative;
  z-index: 1;
}

/* List filters — inset controls */
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-row {
  padding: 0.85rem 1rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(244, 248, 255, 0.5) 100%);
  border-bottom: 1px solid rgba(60, 60, 67, 0.06) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-select,
.msg-admin-ios-neumorph-ui .msg-admin-list-search,
.msg-admin-ios-neumorph-ui .msg-admin-list-filter-btn {
  border-radius: var(--neu3d-radius-sm) !important;
  font-weight: 500 !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-list-search {
  border-radius: 999px !important;
  box-shadow: var(--neu3d-inset) !important;
}

/* Contact + grade group cards — micro-float tiles */
.msg-admin-ios-neumorph-ui .msg-admin-chat-card,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card,
.msg-admin-ios-neumorph-ui .msg-ui-contact-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group {
  border-radius: var(--neu3d-radius-md) !important;
  box-shadow: var(--neu3d-soft) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card:hover,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card:hover,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card:hover,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu3d-float-hover) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-chat-card.active,
.msg-admin-ios-neumorph-ui .msg-admin-pinned-card.active,
.msg-admin-ios-neumorph-ui .msg-ui-contact-card.active,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card.active,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group.active {
  transform: translateY(-1px);
  box-shadow: inset 4px 0 0 #0a84ff, var(--neu3d-soft) !important;
}

/* Room header — glass action strip */
.msg-admin-ios-neumorph-ui .msg-admin-room-top {
  border-radius: var(--neu3d-radius-xl) var(--neu3d-radius-xl) 0 0 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.92) 100%) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
padding: 0.95rem 1.15rem !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-action,
.msg-admin-ios-neumorph-ui.msg-admin-chat-modern-polish .msg-admin-room-action-glass {
  border-radius: var(--neu3d-radius-sm) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-action:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--neu3d-float-hover) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-room-more-menu {
  border-radius: var(--neu3d-radius-md) !important;
  border: var(--neu3d-glass-rim) !important;
  box-shadow: var(--neu3d-float) !important;
  background: linear-gradient(180deg, #fff 0%, #f6f9fd 100%) !important;
}

/* Thread — recessed message canvas */
.msg-admin-ios-neumorph-ui .msg-ui-thread,
.msg-admin-ios-neumorph-ui .msg-admin-step1-thread,
.msg-admin-ios-neumorph-ui #msg1MessageListView.msg-admin-step1-thread {
  background:
    linear-gradient(180deg, #f1f5fb 0%, #e9eef6 100%) !important;
  box-shadow: var(--neu3d-inset) !important;
  border-radius: 0 0 var(--neu3d-radius-xl) var(--neu3d-radius-xl);
  margin: 0 0.65rem 0.65rem !important;
  padding: 1rem 0.85rem !important;
}

/* Message bubbles — iOS depth */
.msg-admin-ios-neumorph-ui .msg-ui-thread .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.mine .msg-ui-bubble {
  border-radius: 20px 20px 4px 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(10, 132, 255, 0.28) !important;
}
.msg-admin-ios-neumorph-ui .msg-ui-thread .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.theirs .msg-ui-bubble {
  border-radius: 22px 22px 22px 6px !important;
  background: linear-gradient(180deg, #f8f8fc 0%, #ececf2 100%) !important;
  box-shadow: var(--neu3d-soft) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-date-chip {
  border-radius: 999px !important;
  font-weight: 600 !important;
  box-shadow: var(--neu3d-soft) !important;
}

/* Empty state */
.msg-admin-ios-neumorph-ui .msg-admin-step1-thread-placeholder.msg-ui-empty,
.msg-admin-ios-neumorph-ui .msg-ui-empty {
  border-radius: var(--neu3d-radius-lg) !important;
  box-shadow: var(--neu3d-inset) !important;
  background: linear-gradient(180deg, #fafcff 0%, #f2f6fc 100%) !important;
}

/* Composer — floating dock */
.msg-admin-ios-neumorph-ui .msg-admin-compose,
.msg-admin-ios-neumorph-ui #msg1SendForm.msg-admin-compose {
  padding: 0.75rem 1rem 1rem !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(248, 251, 255, 0.95) 100%) !important;
  border-top: 1px solid rgba(60, 60, 67, 0.06) !important;
  border-radius: 0 0 var(--neu3d-radius-xl) var(--neu3d-radius-xl);
}
.msg-admin-ios-neumorph-ui .msg-admin-compose-glass,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel .msg-ui-compose-box,
.msg-admin-ios-neumorph-ui.message-body #msg1ConversationPanel .msg-admin-compose-glass {
  border-radius: 26px !important;
  box-shadow: var(--neu3d-inset) !important;
  background: linear-gradient(180deg, #f6f8fc 0%, #eef2f8 100%) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-compose-tool,
.msg-admin-ios-neumorph-ui .msg-admin-compose-tools button.msg-admin-compose-tool {
  border-radius: 50% !important;
  transition: transform 0.16s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-compose-tool:hover {
  transform: translateY(-2px);
}
.msg-admin-ios-neumorph-ui .msg-admin-send-btn-modern,
.msg-admin-ios-neumorph-ui .msg-admin-send-btn,
.msg-admin-ios-neumorph-ui .msg-ui-send-btn {
  border-radius: 50% !important;
  box-shadow: 0 10px 24px rgba(10, 132, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

/* Online Join Class Meetings panel */
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-panel,
.msg-admin-ios-neumorph-ui .msg-admin-join-meetings-workspace {
  border-radius: var(--neu3d-radius-xl) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%) !important;
  box-shadow: var(--neu3d-float) !important;
  padding: 1.15rem 1.35rem !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-summary-card,
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-card {
  border-radius: var(--neu3d-radius-md) !important;
  border: var(--neu3d-glass-rim) !important;
  background: linear-gradient(180deg, #fafcff 0%, #f2f7ff 100%) !important;
  box-shadow: var(--neu3d-soft) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu3d-float-hover) !important;
}
.msg-admin-ios-neumorph-ui .msg-admin-join-meeting-status.is-live {
  background: #e8f2ff !important;
  color: #0a84ff !important;
  border: 1px solid #c5ddff !important;
  border-radius: 999px !important;
}

/* Notice strip */
.msg-admin-ios-neumorph-ui .msg-ui-notice,
.msg-admin-ios-neumorph-ui .msg1-notice {
  border-radius: var(--neu3d-radius-md) !important;
  background: linear-gradient(90deg, #e8f2ff 0%, #f5f9ff 100%) !important;
  border: 1px solid #c5ddff !important;
  color: #0077ed !important;
  font-weight: 600 !important;
  box-shadow: var(--neu3d-soft) !important;
  margin: 0 1.1rem !important;
}

/* ============================================================
   IOS-NEUMORPH-ARROW-FIX — Room header avatar, actions, bubbles
   (beats leftover green rules at ~30287–30316, ~32652)
   ============================================================ */

/* ① Room header avatar — blue (not green) */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg3-room-avatar.msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msgAdminRoomAvatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel.has-contact .msg-admin-room-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-conversation-panel.has-contact .msg-admin-room-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.32) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-avatar .msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msgAdminRoomAvatar .msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel.has-admin-selection .msg-admin-room-avatar .msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel.has-contact .msg-admin-room-avatar .msg3-room-avatar-inner,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-conversation-panel.has-contact .msg-admin-room-avatar .msg3-room-avatar-inner {
  background: transparent !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 50% !important;
  width: 100% !important;
  height: 100% !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-avatar .msg3-room-avatar-inner.has-image img,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msgAdminRoomAvatar .msg3-room-avatar-inner.has-image img {
  border-radius: 50% !important;
  border: 2px solid #fff !important;
}

/* Room header role badge + online — blue enterprise */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-top-left .msg-ui-role-badge,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-role-badge {
  background: #e8f2ff !important;
  color: #0a84ff !important;
  border: 1px solid #c5ddff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-room-online {
  color: #0a84ff !important;
  font-weight: 600 !important;
}

/* ② Header action buttons — blue neumorphic (not green/pink emoji clash) */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-top-right.msg-admin-room-actions {
  gap: 0.55rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-top-right .msg-admin-room-action {
  width: 2.65rem !important;
  height: 2.65rem !important;
  min-width: 2.65rem !important;
  min-height: 2.65rem !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f0f5fc 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    6px 8px 18px rgba(148, 163, 184, 0.22),
    -4px -5px 14px rgba(255, 255, 255, 0.96) !important;
  color: #3a3a3c !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-icon {
  font-size: 1rem !important;
  line-height: 1 !important;
  filter: grayscale(0.15) saturate(0.75) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-audio {
  background: linear-gradient(180deg, #f5f9ff 0%, #e8f2ff 100%) !important;
  border-color: #c5ddff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-audio .msg-admin-room-action-icon {
  filter: grayscale(0.2) sepia(0.15) hue-rotate(185deg) saturate(1.1) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-video {
  background: linear-gradient(180deg, #f5f9ff 0%, #e8f2ff 100%) !important;
  border-color: #c5ddff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-video .msg-admin-room-action-icon {
  filter: grayscale(0.1) sepia(0.1) hue-rotate(195deg) saturate(1.05) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-profile-info,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-more {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass:hover:not(:disabled),
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass:focus-visible:not(:disabled) {
  transform: translateY(-2px) !important;
  border-color: #9ecaff !important;
  background: linear-gradient(180deg, #e8f2ff 0%, #d6e8ff 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    8px 10px 22px rgba(10, 132, 255, 0.18),
    -4px -5px 14px rgba(255, 255, 255, 0.98) !important;
  color: #0a84ff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-audio:hover:not(:disabled),
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-call-video:hover:not(:disabled),
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-profile-info:hover:not(:disabled),
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-profile-info.is-active,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-action-glass.is-more:hover:not(:disabled) {
  border-color: #9ecaff !important;
  color: #0a84ff !important;
  background: linear-gradient(180deg, #e8f2ff 0%, #d6e8ff 100%) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-admin-chat-modern-polish .msg-admin-room-more-item:hover:not(:disabled) {
  background: #e8f2ff !important;
  color: #0a84ff !important;
}

/* ③ Sent message bubbles + timestamps — iOS blue depth */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-ui-bubble-row.mine .msg-ui-bubble {
  background: linear-gradient(180deg, #4da3ff 0%, #0a84ff 55%, #0077ed 100%) !important;
  background-image: linear-gradient(180deg, #4da3ff 0%, #0a84ff 55%, #0077ed 100%) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  border-radius: 20px 20px 4px 20px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 8px 22px rgba(10, 132, 255, 0.3) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-text,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-head,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-head strong,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-time {
  color: #fff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-foot {
  color: #8e8e93 !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  margin-top: 0.28rem !important;
  text-align: right !important;
  padding-right: 0.15rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-admin-read-checks {
  color: #0a84ff !important;
  font-weight: 600 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-foot {
  color: #8e8e93 !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
}

/* ============================================================
   IOS-CHAT-LIST-COMPACT — smaller cards + aligned You: preview
   ============================================================ */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-contact-card {
  padding: 0.46rem 0.52rem 0.44rem !important;
  margin-bottom: 0.28rem !important;
  min-height: 0 !important;
  gap: 0.42rem !important;
  align-items: flex-start !important;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto !important;
  border-radius: 14px !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-card,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-grade-group {
  padding: 0.5rem 0.55rem !important;
  margin-bottom: 0.3rem !important;
  min-height: 0 !important;
  gap: 0.42rem !important;
  align-items: flex-start !important;
  grid-template-columns: 2.1rem minmax(0, 1fr) auto !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-avatar-wrap {
  width: 2.1rem !important;
  height: 2.1rem !important;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card .msg-ui-contact-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-card .msg-ui-contact-avatar {
  width: 2.1rem !important;
  height: 2.1rem !important;
  min-width: 2.1rem !important;
  min-height: 2.1rem !important;
  font-size: 0.78rem !important;
  box-shadow: 0 3px 8px rgba(10, 132, 255, 0.2) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-avatar {
  width: 2.1rem !important;
  height: 2.1rem !important;
  font-size: 0.95rem !important;
  border-radius: 0.62rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-main {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.06rem;
  min-width: 0;
  padding-top: 0.02rem;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-main strong {
  font-size: 0.8rem !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-badges {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.18rem !important;
  margin-top: 0 !important;
  overflow: hidden;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-badges .msg-ui-role-badge,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-badges .msg-ui-school-chip,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-group-kind {
  font-size: 0.58rem !important;
  padding: 0.06rem 0.34rem !important;
  line-height: 1.2 !important;
  flex-shrink: 0;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-sub {
  display: block;
  font-size: 0.64rem !important;
  line-height: 1.25 !important;
  color: #9ca3af !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-preview {
  display: block;
  font-size: 0.7rem !important;
  line-height: 1.3 !important;
  color: #8e8e93 !important;
  margin-top: 0.04rem !important;
  padding-top: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-preview-prefix {
  color: #636366;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 0.12rem;
  display: inline;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.22rem;
  padding-top: 0.04rem;
  min-width: 2.6rem;
  flex-shrink: 0;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card-side em {
  font-style: normal;
  font-size: 0.62rem !important;
  line-height: 1.2 !important;
  color: #aeaeb2 !important;
  font-weight: 500;
  white-space: nowrap;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-unread-pill {
  min-width: 1rem !important;
  height: 1rem !important;
  font-size: 0.58rem !important;
  line-height: 1 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-pinned-list,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-contact-list,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ContactListView,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-contact-list {
  padding: 0.35rem 0.42rem 0.42rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-section-head {
  font-size: 0.68rem !important;
  padding: 0.35rem 0.5rem 0.2rem !important;
  margin-bottom: 0 !important;
}

/* ============================================================
   IOS-GRADE-NOTI-GLOW + CHAT-BUBBLE-CORNERS
   ============================================================ */

/* Grade / group circle — soft red halo on notification dot */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-circle-notify {
  background: linear-gradient(180deg, #ff5149 0%, #ff3b30 100%) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
  min-width: 1.05rem !important;
  height: 1.05rem !important;
  line-height: 1.05rem !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  z-index: 3 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.95),
    0 0 0 3px rgba(255, 59, 48, 0.16),
    0 0 8px rgba(255, 59, 48, 0.52),
    0 0 14px rgba(255, 59, 48, 0.34),
    0 2px 6px rgba(255, 59, 48, 0.28) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-circle.is-active .msg-admin-grade-circle-notify {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.98),
    0 0 0 3px rgba(255, 59, 48, 0.2),
    0 0 9px rgba(255, 59, 48, 0.58),
    0 0 16px rgba(255, 59, 48, 0.38),
    0 2px 7px rgba(255, 59, 48, 0.32) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-circle-avatar-wrap,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-grade-circle-avatar {
  overflow: visible !important;
}

/* Chat room bubbles — rounded corners clip message text */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble {
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble-row.mine .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-ui-bubble-row.mine .msg-ui-bubble {
  border-radius: 20px 20px 4px 20px !important;
  padding: 0.65rem 0.9rem 0.62rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v3-body .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body.msg-ui-v5-body .msg-ui-bubble-row.theirs .msg-ui-bubble,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-ui-bubble-row.theirs .msg-ui-bubble {
  border-radius: 20px 20px 20px 4px !important;
  padding: 0.62rem 0.85rem 0.58rem !important;
  background: linear-gradient(180deg, #fafafc 0%, #ececf1 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  color: #1c1c1e !important;
  box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.16), -2px -2px 6px rgba(255, 255, 255, 0.95) !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-text,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-head,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-sender {
  border-radius: 0 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-text {
  color: #fff !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-text {
  color: #1c1c1e !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-wrap,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1ConversationPanel .msg-ui-bubble-wrap {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.18rem !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-wrap {
  align-items: flex-end !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-wrap {
  align-items: flex-start !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-foot,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-foot {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0 0.2rem !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-foot {
  justify-content: flex-end !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row .msg-ui-bubble-time,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row .msg-ui-bubble-status {
  font-size: 0.64rem !important;
  color: #aeaeb2 !important;
  opacity: 1 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row {
  margin-bottom: 0 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card.has-chat-preview .msg-admin-chat-card-sub {
  display: none !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card.has-chat-preview .msg-admin-chat-card-preview {
  margin-top: 0.08rem !important;
  color: #636366 !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-chat-card.has-chat-preview .msg-admin-preview-prefix {
  color: #48484a !important;
}

/* ============================================================
   MSG-CHAT-BUBBLE-LR-ALIGN — left/right edge bubble alignment
   Admin iOS neumorph chat room thread only
   ============================================================ */
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageListView.msg-ui-thread,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageListView.msg-admin-step1-thread,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-admin-step1-thread.msg-ui-thread {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 1rem 0 0.85rem !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageListView .msg-admin-date-chip {
  align-self: center;
  margin: 0.15rem auto 0.35rem !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body #msg1MessageListView .msg-ui-bubble-row,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-thread .msg-ui-bubble-row,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg1-bubble-row.msg-ui-bubble-row {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine {
  justify-content: flex-end !important;
  align-items: flex-end !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs {
  justify-content: flex-start !important;
  align-items: flex-end !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-wrap {
  max-width: 55% !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 1 auto !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-wrap {
  max-width: 55% !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  flex: 0 1 auto !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row .msg-ui-bubble {
  max-width: 100% !important;
  width: auto !important;
  box-sizing: border-box !important;
}
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-avatar,
.msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-admin-grade-bubble-avatar {
  flex: 0 0 auto !important;
  margin-right: 0.45rem !important;
  margin-left: 0 !important;
  align-self: flex-end !important;
}
@media (max-width: 768px) {
  .msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-wrap,
  .msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-wrap {
    max-width: 78% !important;
  }
  .msg-admin-ios-neumorph-ui.msg-admin-chat-list-body .msg-ui-bubble-row {
    padding: 0 16px !important;
  }
}

/* ============================================================
   ADMIN-DASHBOARD-EMBEDDED-CHAT — Messages / Groups inside Admin Dashboard
   Keeps dark admin sidebar; embeds iOS neumorph chat in content area only
   ============================================================ */
body.admin-dashboard-embedded-chat.admin-dashboard-body {
  overflow: hidden;
}
body.admin-dashboard-embedded-chat.admin-dashboard-body .admin-sidebar {
  display: flex !important;
}
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui.admin-module-dashboard.admin-dashboard-body {
  background: #f6f8fc !important;
}
/* Admin Dashboard — Messages / Groups launcher (floating modal is the only chat UI) */
body.admin-dashboard-messages-active #adminMessagesModalLauncherPanel {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: clamp(320px, calc(100vh - 14rem), 640px);
  padding: 1.5rem;
}
.admin-messages-modal-launcher-card {
  max-width: 520px;
  width: 100%;
  text-align: center;
  padding: 2rem 1.75rem;
  border-radius: 1.25rem;
  background: linear-gradient(145deg, #ffffff, #eef4ff);
  box-shadow: 8px 8px 18px rgba(163, 177, 198, 0.35), -8px -8px 18px rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.12);
}
.admin-messages-modal-launcher-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}
.admin-messages-modal-launcher-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.35rem;
  color: #0f172a;
}
.admin-messages-modal-launcher-card p {
  margin: 0 0 1.25rem;
  color: #475569;
  line-height: 1.5;
}
.admin-messages-modal-launcher-btn {
  min-width: 180px;
}
body.admin-dashboard-messages-active #adminEmbeddedChatListMount[hidden] {
  display: none !important;
}
/* Admin Dashboard — Messages / Groups section layout (before chat body classes apply) */
body.admin-dashboard-messages-active.admin-module-dashboard .admin-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
body.admin-dashboard-messages-active #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active #messagesGroupsSection:not([hidden]) {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}
body.admin-dashboard-messages-active #adminEmbeddedChatListMount {
  flex: 1 1 auto;
  min-height: 280px;
  display: flex !important;
  flex-direction: column;
}

body.admin-dashboard-embedded-chat.admin-module-dashboard .admin-main {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}
body.admin-dashboard-embedded-chat .admin-main {
  min-height: 0;
  overflow: hidden;
}
body.admin-dashboard-embedded-chat .admin-topbar {
  flex-shrink: 0;
}
body.admin-dashboard-embedded-chat #messagesGroupsSection.active-admin-section,
body.admin-dashboard-embedded-chat #messagesGroupsSection:not([hidden]) {
  padding: 0;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount {
  flex: 1 1 auto;
  min-height: 280px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(180deg, #f2f5fa 0%, #e8edf5 100%);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount .msg-admin-embedded-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent !important;
}
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell {
  min-height: 0 !important;
  height: 100%;
  max-height: 100%;
}
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-chat-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount .msg-admin-chat-workspace {
  flex: 1 1 auto;
  min-height: 220px;
  height: 100%;
  overflow: hidden;
  align-content: stretch;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount .msg-admin-list-panel,
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount .msg-admin-room-panel {
  height: auto !important;
  min-height: 220px !important;
  max-height: 100% !important;
  overflow: hidden;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount .msg-ui-contact-list,
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount #msg1MessageListView {
  overflow-y: auto;
  min-height: 0;
}
body.admin-dashboard-embedded-chat #msgAdminPortalSidebar,
body.admin-dashboard-embedded-chat #msgAdminPortalHeader,
body.admin-dashboard-embedded-chat #msgUiSidebar,
body.admin-dashboard-embedded-chat .msg-ui-topbar,
body.admin-dashboard-embedded-chat .msg-ui-stats {
  display: none !important;
}
body.admin-dashboard-embedded-chat .msg-ui-app {
  display: block !important;
  grid-template-columns: none !important;
  min-height: auto !important;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-fallback {
  padding: 1.25rem 1.5rem;
  color: #334155;
  font-weight: 700;
  background: #fff;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  margin: 1rem;
}
.admin-embedded-chat-loading {
  padding: 1.25rem 1.5rem;
  margin: 1rem;
  color: #334155;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}
body.admin-dashboard-embedded-chat .admin-embedded-chat-overview[hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat .admin-embedded-chat-mount {
    min-height: 240px;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-UI-LAYOUT-FIX — contact list + chat room inside Admin Dashboard
   UI only — no message logic changes
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
  --msg-admin-panel-h: 100%;
  --msg-admin-embedded-chat-h: clamp(420px, calc(100vh - 11.5rem), 920px);
}

body.admin-dashboard-embedded-chat .admin-embedded-chat-mount {
  min-height: var(--msg-admin-embedded-chat-h);
  max-height: var(--msg-admin-embedded-chat-h);
  height: var(--msg-admin-embedded-chat-h);
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-shell,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-embedded-shell,
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount #msgUiViewMessages {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: grid !important;
  grid-template-columns: minmax(280px, 38%) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  overflow: hidden;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel {
  min-width: 0;
  background: #f8fafd !important;
  border: 1px solid #d7e3f4 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-filter-row,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-section-head {
  flex-shrink: 0;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-all-section,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-pinned-section {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-pinned-list,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-list,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-contact-list,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg2-chat-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0.5rem 0.65rem !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-pinned-card,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-card,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-contact-card {
  position: relative !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  min-height: 72px !important;
  height: auto !important;
  margin: 0 !important;
  transform: none !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-pinned-card:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-card:hover {
  transform: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card-main strong,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-name {
  color: #1c1c1e !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card-preview,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card-sub,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-preview {
  color: #3a3a3c !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
  background: #fff !important;
  border: 1px solid #d7e3f4 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel #msg1ConversationPanel {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100% !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top {
  flex-shrink: 0;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  background: linear-gradient(180deg, #eef2f8 0%, #e4eaf3 100%) !important;
  margin: 0 0.55rem 0.45rem !important;
  padding: 0.85rem 0 0.75rem !important;
  border-radius: 0 0 16px 16px;
  box-shadow: inset 0 2px 8px rgba(15, 23, 42, 0.06) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble-row {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  padding: 0 14px !important;
  margin: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.mine,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble-row.mine {
  justify-content: flex-end !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.theirs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble-row.theirs {
  justify-content: flex-start !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-wrap,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble-row .msg-ui-bubble-wrap {
  max-width: 55% !important;
  width: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.mine .msg-ui-bubble-wrap {
  align-items: flex-end !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-wrap {
  align-items: flex-start !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble {
  max-width: 100% !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-text,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-row.theirs .msg-ui-bubble-sender {
  color: #1c1c1e !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-tools,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-send-form,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex-shrink: 0;
  margin-top: auto;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace {
    grid-template-columns: 1fr;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-wrap,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg1-bubble-row .msg-ui-bubble-wrap {
    max-width: 78% !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-GRADE-GROUP-ROW-VISIBILITY-FIX
   Groups / Grades / Classes row — no clip, wrap, role tab spacing
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-section,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection.msg-admin-grade-circle-section,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-section {
  height: auto !important;
  min-height: 168px !important;
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  padding: 1rem 1.15rem 22px !important;
  margin-bottom: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
  border: 1px solid #d7e3f4 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-head,
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-row-wrap,
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-active,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-row-wrap {
  overflow: visible !important;
  height: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui #msgAdminGradeCircleRow,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleRow,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px 28px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-bottom: 6px !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle {
  position: relative !important;
  flex-shrink: 0 !important;
  min-height: 72px !important;
  height: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle:hover,
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle.is-active {
  transform: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-title,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-title {
  color: #1c1c1e !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-subtitle,
body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-active,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-subtitle,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-active {
  color: #48484a !important;
}

body.admin-dashboard-embedded-chat.msg-admin-ios-neumorph-ui .msg-admin-grade-circle-section + .msg-admin-role-tabs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-grade-circle-section + .msg-admin-role-tabs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection + #msgAdminRoleTabs {
  margin-top: 18px !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.45rem !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 0 !important;
  clear: both !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminRoleTabs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-comm-tools {
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 220px !important;
  overflow: hidden !important;
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-HEIGHT-CLICK-SEND-FIX
   Expand chat list / room height, internal scroll, compose pinned
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
  --msg-admin-embedded-chat-h: clamp(620px, calc(100vh - 11.5rem), 920px);
}

body.admin-dashboard-messages-active #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active #messagesGroupsSection:not([hidden]) {
  min-height: clamp(620px, calc(100vh - 11.5rem), 920px);
}

body.admin-dashboard-messages-active #adminEmbeddedChatListMount,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  min-height: var(--msg-admin-embedded-chat-h) !important;
  height: 100% !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 280px !important;
  height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-list-panel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-room-panel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminListFilterRow,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection .msg-admin-section-head,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list {
  flex: 1 1 auto !important;
  min-height: 120px !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel.msg-admin-room-panel {
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-card {
  cursor: pointer !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card.active,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-card.active {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22), 0 10px 22px rgba(15, 23, 42, 0.1) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-card-main strong,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-contact-name,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-bubble-text {
  color: #1c1c1e !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-send-btn {
  opacity: 0.72;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
    --msg-admin-embedded-chat-h: clamp(560px, calc(100vh - 10rem), 920px);
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-FULL-HEIGHT-LAYOUT-FIX
   Stretch embedded chat mount + two-column grid to fill section
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat #messagesGroupsSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat #adminEmbeddedChatListMount,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount,
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount {
  flex: 1 1 auto !important;
  min-height: 720px !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminRoleTabs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-comm-tools {
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminRoleTabs,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection + #msgAdminRoleTabs {
  margin-top: 12px !important;
  margin-bottom: 24px !important;
  padding-bottom: 10px !important;
  position: relative !important;
  z-index: 2 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 620px !important;
  height: auto !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(620px, 1fr) !important;
  align-items: stretch !important;
  align-content: stretch !important;
  gap: 1rem !important;
  overflow: hidden !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel {
  min-height: 620px !important;
  height: 100% !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  align-self: stretch !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminListFilterRow,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection .msg-admin-section-head,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list {
  flex: 1 1 auto !important;
  min-height: 360px !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 auto !important;
  min-height: 420px !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel.msg-admin-room-panel {
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat #adminEmbeddedChatListMount,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
    min-height: 640px !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(520px, 1fr) !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
    min-height: 520px !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-BOTTOM-COMPOSER-BAR-UI
   Typing row + bottom action bar inside chat room panel
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  flex-shrink: 0 !important;
  margin: 0 0.65rem 0.85rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-embedded-composer-box,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-glass {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.65rem !important;
  padding: 0.75rem 0.85rem 0.7rem !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
  border: 1px solid #d7e3f4 !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-typing-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  order: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap textarea,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageInput {
  width: 100% !important;
  min-height: 2.75rem !important;
  max-height: 7.5rem !important;
  resize: vertical !important;
  border-radius: 14px !important;
  border: 1px solid #d7e3f4 !important;
  background: #fff !important;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.06) !important;
  padding: 0.65rem 0.85rem !important;
  color: #1c1c1e !important;
  font-size: 0.92rem !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap textarea:focus,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageInput:focus {
  outline: none !important;
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16), inset 0 2px 6px rgba(15, 23, 42, 0.05) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeBottomBar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  width: 100% !important;
  margin-top: 0.15rem !important;
  padding: 0.45rem 0.15rem 0.15rem !important;
  border-top: 1px solid rgba(215, 227, 244, 0.95) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-actions,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-end {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.45rem !important;
  flex: 0 0 auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-btn,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools .msg-admin-compose-tool,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools label.msg-admin-compose-icon {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  border-radius: 12px !important;
  border: 1px solid #dbe7ff !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%) !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #1d4ed8 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-btn:hover:not(:disabled),
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools .msg-admin-compose-tool:hover:not(:disabled),
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools label.msg-admin-compose-icon:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  background: linear-gradient(180deg, #ffffff 0%, #e8f0ff 100%) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-send,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-send-btn.msg-admin-compose-bottom-send {
  width: 2.75rem !important;
  min-width: 2.75rem !important;
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  max-width: 2.75rem !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  order: 0 !important;
  flex: 0 0 auto !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-send:hover:not(:disabled),
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-send-btn.msg-admin-compose-bottom-send:hover:not(:disabled) {
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.34) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-compose-bottom-btn,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled #msgAdminComposeTools .msg-admin-compose-tool,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled #msgAdminComposeTools label.msg-admin-compose-icon {
  opacity: 0.55 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-compose-bottom-send,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.is-compose-disabled .msg-admin-send-btn {
  opacity: 0.55 !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
    margin: 0 0.45rem 0.65rem !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-btn,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools .msg-admin-compose-tool {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    min-height: 2.15rem !important;
  }
}

/* ADMIN-EMBEDDED-CHAT-COMPOSER-SPACING-FIX — typing box ↔ bottom bar breathing room */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  margin: 0 0.7rem 1.15rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-embedded-composer-box,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-glass {
  gap: 1.05rem !important;
  padding: 0.95rem 0.95rem 1rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-typing-row {
  margin-bottom: 0.25rem !important;
  padding-bottom: 0.2rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap {
  padding-bottom: 0.15rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap textarea,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageInput {
  min-height: 3.1rem !important;
  padding: 0.78rem 0.95rem 0.9rem !important;
  margin: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeBottomBar {
  margin-top: 0.75rem !important;
  padding: 0.7rem 0.2rem 0.3rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-end {
  gap: 0.55rem !important;
  padding-right: 0.1rem !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
    margin: 0 0.5rem 0.95rem !important;
  }
}

/* ADMIN-EMBEDDED-CHAT-COMPOSER-COMPACT-SIZE — smaller chat box footprint */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  margin: 0 0.65rem 0.85rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-embedded-composer-box,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-glass {
  gap: 0.55rem !important;
  padding: 0.55rem 0.75rem 0.6rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-typing-row {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap {
  padding-bottom: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-input-wrap textarea,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageInput {
  min-height: 2.35rem !important;
  height: 2.35rem !important;
  max-height: 4.75rem !important;
  padding: 0.48rem 0.72rem !important;
  font-size: 0.88rem !important;
  line-height: 1.35 !important;
  resize: vertical !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeBottomBar {
  margin-top: 0.45rem !important;
  padding: 0.42rem 0.1rem 0.12rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-actions,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools {
  gap: 0.35rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-btn,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools .msg-admin-compose-tool,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeTools label.msg-admin-compose-icon {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  border-radius: 10px !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-send,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-send-btn.msg-admin-compose-bottom-send {
  width: 2.35rem !important;
  min-width: 2.35rem !important;
  height: 2.35rem !important;
  min-height: 2.35rem !important;
  max-width: 2.35rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-compose-bottom-end {
  gap: 0.4rem !important;
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-BOTTOM-COMPOSER-BAR-POLISH
   + VERTICAL-SCROLLBAR-FIX (contact list + message thread)
   UI only — no message logic changes
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel.msg-admin-room-panel {
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  flex-shrink: 0 !important;
  margin: 12px 1.15rem 24px !important;
  padding: 0 !important;
  max-width: calc(100% - 2.3rem) !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-embedded-composer-box,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-glass {
  gap: 0.65rem !important;
  padding: 0.65rem 0.75rem 0.7rem !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(245, 249, 255, 0.94) 100%) !important;
  border: 1px solid rgba(210, 225, 245, 0.92) !important;
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm .msg-admin-compose-typing-row {
  margin: 0 !important;
  padding: 0 0 0.15rem !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminComposeBottomBar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-top: 0.55rem !important;
  padding: 12px 14px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(210, 225, 245, 0.92) !important;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -1px 0 rgba(210, 225, 245, 0.35) !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #7eb3ff #e8f0ff !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar-track,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-track,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar-track,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-track,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #eef4ff 0%, #e3ecfa 100%) !important;
  border-radius: 999px !important;
  margin: 4px 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar-thumb,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-thumb,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar-thumb,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-thumb,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 55%, #3b82f6 100%) !important;
  border-radius: 999px !important;
  border: 2px solid #e8f0ff !important;
  min-height: 36px !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel {
  overflow-x: hidden !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
    margin: 10px 0.75rem 20px !important;
    max-width: calc(100% - 1.5rem) !important;
  }
}

/* ============================================================
   ADMIN-MESSAGES-EMBEDDED-RIGHT-SIDE-SCROLLBAR-FIX
   Whole Messages / Groups embedded section — right-side vertical scroll
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
  --admin-messages-embedded-scroll-max-h: calc(100dvh - 5.75rem);
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: var(--admin-messages-embedded-scroll-max-h) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #7eb3ff #e8f0ff !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 0 0 auto !important;
  min-height: 720px !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar {
  width: 12px !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-track,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #eef4ff 0%, #e3ecfa 100%) !important;
  border-radius: 999px !important;
  margin: 6px 2px !important;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.12) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-thumb,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 55%, #3b82f6 100%) !important;
  border-radius: 999px !important;
  border: 2px solid #e8f0ff !important;
  min-height: 48px !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
    --admin-messages-embedded-scroll-max-h: calc(100dvh - 5.25rem);
  }
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar {
    width: 10px !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-PILL-COMPOSER-UI
   Single-row pill message input — attach / camera / emoji + send
   ============================================================ */
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill {
  flex-shrink: 0 !important;
  margin: 0 0.85rem 1rem !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  max-width: calc(100% - 1.7rem) !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-shell {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.55rem !important;
  width: 100% !important;
  min-height: 3.35rem !important;
  padding: 0.45rem 0.5rem 0.45rem 0.55rem !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(210, 225, 245, 0.95) !important;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex: 0 0 auto !important;
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-btn,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools .msg-admin-compose-tool,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools label.msg-admin-compose-icon {
  width: 2.35rem !important;
  height: 2.35rem !important;
  min-width: 2.35rem !important;
  min-height: 2.35rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeBottomBar {
  display: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-svg-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-svg-icon {
  width: 1.15rem !important;
  height: 1.15rem !important;
  color: #64748b !important;
  flex-shrink: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-plus .msg-admin-compose-svg-icon {
  width: 1.05rem !important;
  height: 1.05rem !important;
  color: #475569 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-btn:hover:not(:disabled) .msg-admin-compose-svg-icon,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools .msg-admin-compose-tool:hover:not(:disabled) .msg-admin-compose-svg-icon {
  color: #2563eb !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-send-svg-icon {
  width: 1.05rem !important;
  height: 1.05rem !important;
  color: #ffffff !important;
  transform: translateX(1px) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-tool-icon {
  font-size: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-input-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  order: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-input-wrap textarea,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msg1MessageInput {
  width: 100% !important;
  min-height: 2.2rem !important;
  max-height: 5rem !important;
  resize: none !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0.35rem 0.15rem !important;
  margin: 0 !important;
  color: #1e293b !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-input-wrap textarea::placeholder,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msg1MessageInput::placeholder {
  color: #94a3b8 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-input-wrap textarea:focus,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msg1MessageInput:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-send,
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-send-btn {
  flex: 0 0 2.65rem !important;
  width: 2.65rem !important;
  min-width: 2.65rem !important;
  height: 2.65rem !important;
  min-height: 2.65rem !important;
  order: 3 !important;
  border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-send-icon {
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-send:hover:not(:disabled),
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-send-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #3b82f6 0%, #2563eb 55%, #1d4ed8 100%) !important;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.42) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-btn:hover:not(:disabled),
body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools .msg-admin-compose-tool:hover:not(:disabled) {
  border-color: #bfdbfe !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.14) !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill.is-compose-disabled {
  opacity: 0.88 !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill {
    margin: 0 0.65rem 0.85rem !important;
    max-width: calc(100% - 1.3rem) !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-row {
    gap: 0.4rem !important;
    padding: 0.4rem 0.45rem !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-btn,
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill #msgAdminComposeTools .msg-admin-compose-tool {
    width: 2.15rem !important;
    height: 2.15rem !important;
    min-width: 2.15rem !important;
    min-height: 2.15rem !important;
  }
  body.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill .msg-admin-compose-pill-send {
    width: 2.45rem !important;
    height: 2.45rem !important;
    min-width: 2.45rem !important;
    min-height: 2.45rem !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-MESSENGER-PANEL-SCROLL
   Facebook Messenger-style internal scroll — Chat List + Chat Room
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminListFilterRow,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection .msg-admin-section-head,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex-shrink: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-admin-chat-card,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-ui-contact-card {
  flex-shrink: 0 !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-rows: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-STRETCH-PANEL-HEIGHT
   Stretch Chat List + Chat Room downward to fill dashboard area
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  align-self: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel .msg-ui-panel-head {
  display: none !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-SCROLL-AUTOSCROLL-SPACING-FIX
   Flex panel layout + hidden scroll + composer bottom spacing
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel .msg-ui-panel-head {
  display: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminListFilterRow,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection .msg-admin-section-head,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex-shrink: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection:not([hidden]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scrollbar-gutter: auto !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-admin-chat-card,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-ui-contact-card {
  flex-shrink: 0 !important;
  position: relative !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  margin: 0 0.85rem 1.35rem !important;
  padding-bottom: 0.15rem !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel > .msg-ui-room-header,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel > .msg-ui-room-meta {
  display: none !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill {
    margin: 0 0.65rem 1.15rem !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-PANEL-HEIGHT-PERFECT-FIX
   Fill viewport downward — Chat List + Chat Room flex height
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body.admin-module-dashboard.admin-dashboard-body {
  --msg-admin-embedded-chat-h: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body.admin-module-dashboard .admin-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body.admin-module-dashboard .admin-topbar {
  flex: 0 0 auto !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0.65rem 0.85rem 0.85rem !important;
  gap: 0.75rem !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-view:not(.is-active) {
  display: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages.msg-ui-view.is-active {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminRoleTabs,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-comm-tools,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-stu-filter-pills {
  flex: 0 0 auto !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
  align-content: stretch !important;
  align-self: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-list-panel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-panel {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-self: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel > [hidden],
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel > [hidden] {
  display: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminListFilterRow,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection .msg-admin-section-head,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-room-top,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminAllSection:not([hidden]) {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-admin-chat-card,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView .msg-ui-contact-card {
  flex-shrink: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-stack {
  margin: 0 0.85rem 1.35rem !important;
  padding-bottom: 0.15rem !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1SendForm.msg-admin-embedded-composer-pill {
    margin: 0 0.65rem 1.15rem !important;
  }
}

/* ============================================================
   ADMIN-EMBEDDED-CHAT-WORKSPACE-STRETCH-DOWN-FIX
   Grid row 3 = Chat List + Chat Room fill all space below tabs
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body.admin-module-dashboard .admin-main {
  padding-top: 12px !important;
  padding-bottom: 10px !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages.msg-ui-view.is-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  grid-auto-rows: auto !important;
  align-content: stretch !important;
  align-items: stretch !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  gap: 0.65rem !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminGradeCircleSection {
  grid-row: 1 !important;
  min-height: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msgAdminRoleTabs {
  grid-row: 2 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  grid-row: 3 !important;
  grid-column: 1 !important;
  flex: none !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  align-self: stretch !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    min-height: calc(100dvh - 18rem) !important;
  }
}

@media (min-width: 1101px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    min-height: calc(100dvh - 17.5rem) !important;
  }
}

/* Mount card fills admin-main so Chat List / Room stretch to screen bottom */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 1 1 0% !important;
  min-height: calc(100dvh - 7.75rem) !important;
  height: 100% !important;
  max-height: none !important;
}

body.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount,
body.admin-dashboard-embedded-chat .admin-embedded-chat-mount {
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
}

/* ============================================================
   ADMIN-MESSAGES-EMBEDDED-SECTION-RIGHT-SCROLLBAR-V2
   Whole Messages / Groups section — visible right-side vertical scroll
   ============================================================ */
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
  --admin-messages-embedded-scroll-max-h: calc(100dvh - 5.75rem);
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body.admin-module-dashboard .admin-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: var(--admin-messages-embedded-scroll-max-h) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
  scrollbar-width: thin !important;
  scrollbar-color: #7eb3ff #e8f0ff !important;
  box-sizing: border-box !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount {
  flex: 0 0 auto !important;
  min-height: calc(100dvh - 8rem) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount .msg-ui-shell,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages.msg-ui-view.is-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto minmax(520px, auto) !important;
  gap: 0.65rem !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
  grid-row: 3 !important;
  grid-column: 1 !important;
  min-height: calc(100dvh - 18rem) !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactPanel,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ConversationPanel {
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1ContactListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-contact-list,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #msg1MessageListView,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-ui-thread,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-step1-thread {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar {
  width: 12px !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-track,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #eef4ff 0%, #e3ecfa 100%) !important;
  border-radius: 999px !important;
  margin: 6px 2px !important;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.12) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-thumb,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 55%, #3b82f6 100%) !important;
  border-radius: 999px !important;
  border: 2px solid #e8f0ff !important;
  min-height: 48px !important;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.18) !important;
}

body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa 0%, #3b82f6 55%, #2563eb 100%) !important;
}

@media (max-width: 1100px) {
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body {
    --admin-messages-embedded-scroll-max-h: calc(100dvh - 5.25rem);
  }

  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .msg-admin-chat-workspace,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body .admin-embedded-chat-mount #msgUiViewMessages .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    min-height: calc(100dvh - 19rem) !important;
  }

  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection.active-admin-section::-webkit-scrollbar,
  body.admin-dashboard-messages-active.admin-dashboard-embedded-chat.msg-admin-chat-list-body #messagesGroupsSection:not([hidden])::-webkit-scrollbar {
    width: 10px !important;
  }
}

/* ADMIN-FLOATING-MESSAGE-LOGO-MODAL-BOX-FIX — compact modal popup from bottom-right logo */
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box {
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 13050;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-backdrop {
  background: rgba(15, 35, 75, 0.42);
  backdrop-filter: blur(3px);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-panel {
  width: min(960px, calc(100vw - 32px));
  max-width: 1000px;
  min-width: min(850px, 100%);
  height: min(680px, calc(85dvh - 48px));
  max-height: calc(85dvh - 32px);
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 22px;
  box-shadow:
    12px 12px 26px rgba(148, 163, 184, 0.24),
    -8px -8px 22px rgba(255, 255, 255, 0.92),
    0 28px 64px rgba(30, 58, 138, 0.2);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-topbar {
  background: linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
  color: #0f172a;
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.85);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-title {
  color: #0f172a;
  font-weight: 900;
  letter-spacing: -0.01em;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-subtitle {
  color: #64748b;
  opacity: 1;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-icon-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #dbeafe;
  box-shadow:
    3px 3px 8px rgba(148, 163, 184, 0.22),
    -2px -2px 6px rgba(255, 255, 255, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-icon-btn:hover,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-icon-btn:focus-visible {
  background: #eff6ff;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list-pane {
  background: linear-gradient(180deg, #fbfdff 0%, #f1f5f9 100%);
  border-right: 1px solid rgba(226, 232, 240, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-room-pane {
  background: #ffffff;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-search,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-input {
  background: #ffffff;
  border: 1px solid #dbeafe;
  box-shadow:
    inset 2px 2px 5px rgba(148, 163, 184, 0.12),
    inset -2px -2px 5px rgba(255, 255, 255, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-filter-tab {
  background: #ffffff;
  border: 1px solid #dbeafe;
  box-shadow:
    2px 2px 6px rgba(148, 163, 184, 0.16),
    -2px -2px 6px rgba(255, 255, 255, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-filter-tab.is-active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 16px;
  box-shadow:
    4px 4px 10px rgba(148, 163, 184, 0.14),
    -3px -3px 8px rgba(255, 255, 255, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-active {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  box-shadow:
    inset 0 0 0 1px rgba(37, 99, 235, 0.12),
    0 10px 20px rgba(37, 99, 235, 0.12);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-unread {
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  border-color: rgba(37, 99, 235, 0.18);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-unread.is-active {
  background: linear-gradient(180deg, #ffffff 0%, #e8f2ff 100%);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-badge-role,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-badge-school,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-badge-protected {
  font-weight: 500;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-unread .bs-fcw-badge-role,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-unread .bs-fcw-badge-school,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card.is-unread .bs-fcw-badge-protected {
  font-weight: 600;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card-avatar,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-room-avatar {
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  color: #1e3a8a;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.85),
    3px 3px 8px rgba(148, 163, 184, 0.18);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-theirs .bs-fcw-bubble {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow:
    3px 3px 8px rgba(148, 163, 184, 0.12),
    -2px -2px 6px rgba(255, 255, 255, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-deleted .bs-fcw-bubble,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-deleted.is-mine .bs-fcw-bubble,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-deleted.is-theirs .bs-fcw-bubble,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-deleted .bs-message-bubble.is-deleted {
  background: #f1f5f9;
  background-image: none;
  border: 1px dashed #cbd5e1;
  border-color: #cbd5e1;
  color: #94a3b8;
  box-shadow: none;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-bubble-row.is-deleted .bs-fcw-bubble p {
  color: #94a3b8;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-compose {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border-top: 1px solid rgba(226, 232, 240, 0.95);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-action-btn {
  background: linear-gradient(145deg, #ffffff, #eef4ff);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-action-btn-camera {
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  color: #1d4ed8;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box #bsFcwEditBanner,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-edit-banner {
  display: none !important;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-send-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: 0;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-footer,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box #bsFcwOpenFullLink[hidden] {
  display: none !important;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #7eb3ff #e8f0ff;
  -ms-overflow-style: auto;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list::-webkit-scrollbar,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: block;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list::-webkit-scrollbar-track,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread::-webkit-scrollbar-track {
  background: #e8f0ff;
  border-radius: 999px;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list::-webkit-scrollbar-thumb,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7eb3ff, #3b82f6);
  border-radius: 999px;
  border: 2px solid #e8f0ff;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list::-webkit-scrollbar-thumb:hover,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

/* ADMIN-MESSAGE-MODAL-INTERNAL-SCROLL — list + room scroll inside modal only */
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-topbar {
  flex-shrink: 0;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list-pane,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-room-pane {
  min-height: 0;
  overflow: hidden;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-search-wrap,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-filters,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-room-head,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-compose,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-notice {
  flex-shrink: 0;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-list,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread.bs-fcw-thread-homework,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread.bs-fcw-thread-meetings {
  overflow-y: auto;
  overflow-x: hidden;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-homework-review-panel,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-homework-panel {
  min-height: 0;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-empty-room {
  min-height: 0;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-empty-room strong {
  color: #334155;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-create-meeting-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  box-shadow:
    4px 4px 10px rgba(148, 163, 184, 0.18),
    -2px -2px 6px rgba(255, 255, 255, 0.95),
    0 8px 18px rgba(37, 99, 235, 0.22);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-card-avatar-emoji,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-room-avatar.bs-fcw-room-avatar-emoji {
  font-size: 1.45rem;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread-meetings {
  padding: 0;
  background: linear-gradient(180deg, #fbfdff 0%, #f8fafc 100%);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread-meetings .bs-fcw-join-meetings-panel {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 12px 14px 16px;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-thread-meetings .msg-admin-join-meetings-list {
  max-height: none;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-join-meeting-form-wrap {
  margin: 10px 0 14px;
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-join-meeting-form-wrap .bs-fcw-join-meeting-form {
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-join-meetings-panel,
body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-join-meetings-panel .msg-admin-join-meeting-btn {
  pointer-events: auto;
}

/* Floating modal open — keep embedded page join modal from blocking modal clicks (z-index 12050 > 9500) */
body.bs-fcw-open #msgAdminJoinMeetingModal,
body.bs-fcw-open .msg-admin-join-meeting-modal {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.admin-dashboard-body .bs-fcw-room-pane.bs-fcw-room-meetings-mode .bs-fcw-compose {
  display: none !important;
}

body.admin-dashboard-body .bs-fcw-room-pane.bs-fcw-room-meetings-mode .bs-fcw-thread-meetings .msg-admin-join-meeting-actions,
body.admin-dashboard-body .bs-fcw-room-pane.bs-fcw-room-meetings-mode .bs-fcw-thread-meetings .msg-admin-join-meeting-btn {
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

body.admin-dashboard-embedded-chat .msg-admin-shared-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

body.admin-dashboard-embedded-chat .msg-admin-shared-filter-tab {
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
}

body.admin-dashboard-embedded-chat .msg-admin-shared-filter-tab.is-active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
}

body.admin-dashboard-embedded-chat.msg-admin-embedded-homework-review #msg1SendForm {
  display: none !important;
}

@media (max-width: 900px) {
  body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-panel {
    width: calc(100vw - 16px);
    min-width: 0;
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box {
    align-items: flex-end;
    justify-content: center;
    padding: 8px;
  }
}

@media (max-width: 768px) {
  body.admin-dashboard-body .bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-panel {
    width: 100%;
    height: calc(100dvh - 8px);
    max-height: calc(100dvh - 8px);
    border-radius: 16px 16px 0 0;
  }
}

/* VIDEO-CLASS-RETURN-ADMIN-MESSAGES-CLICKABLE-FIX — restore interaction after video return */
body.admin-dashboard-messages-active #messagesGroupsSection.active-admin-section,
body.admin-dashboard-messages-active #messagesGroupsSection:not([hidden]),
body.admin-dashboard-messages-active #adminEmbeddedChatListMount,
body.admin-dashboard-messages-active .admin-embedded-chat-mount,
body.admin-dashboard-messages-active .admin-embedded-chat-mount .msg-admin-embedded-shell,
body.admin-dashboard-messages-active .admin-embedded-chat-mount .msg-admin-chat-workspace,
body.admin-dashboard-messages-active .admin-embedded-chat-mount #msg1ContactPanel,
body.admin-dashboard-messages-active .admin-embedded-chat-mount #msg1ConversationPanel {
  pointer-events: auto !important;
}

body.admin-dashboard-messages-active.msg-admin-join-meeting-modal-open #adminEmbeddedChatListMount .msg-admin-join-meeting-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* Online Class Room — Meeting Owner role permission UI (student join-only controls) */
body.vr-student-safe-controls-only #vrActionEndMeetingBtn,
body.vr-student-safe-controls-only #vrSpotlightAllMetaBtn,
body.vr-student-safe-controls-only #vrRecordMetaBtn,
body.vr-student-safe-controls-only #vrToolRecordBtn,
body.vr-student-safe-controls-only #vrToolPdfUploadBtn,
body.vr-student-safe-controls-only #vrToolShareBtn,
body.vr-student-safe-controls-only #vrToolWhiteboardBtn,
body.vr-student-safe-controls-only #vcEndRoomBtn,
body.vr-online-class-join-only-role #vrActionEndMeetingBtn {
  display: none !important;
}
body.vr-student-safe-controls-only #vrToolEndClassBtn,
body.vr-online-class-join-only-role #vrToolEndClassBtn {
  display: none !important;
}

/* OVC in-class video room — owner vs member mobile polish (O4 + M4) */
body.vr-ovc-phone-room.vr-ref-ui {
  background: #0b1220;
}
body.vr-ovc-phone-room.vr-ref-ui .video-class-shell,
body.vr-ovc-phone-room.vr-ref-ui .vr-ref-classroom-grid {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
}
body.vr-ovc-phone-room .vr-ref-header {
  background: rgba(15, 23, 42, 0.94);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body.vr-ovc-phone-room .vr-ref-brand-title {
  font-size: 0.92rem;
  line-height: 1.2;
}
body.vr-ovc-phone-room .vr-ref-brand-sub {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
body.vr-ovc-phone-room .vr-ref-header-participant-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.16);
  color: #6ee7b7;
  font-size: 0.62rem;
  font-weight: 800;
}
body.vr-ovc-phone-room .video-room-main-stage,
body.vr-ovc-phone-room .vr-protected-board-surface,
body.vr-ovc-phone-room .video-room-embed-shell {
  border-radius: 16px;
  overflow: hidden;
  background: #020617;
}
body.vr-ovc-phone-room .vr-step4-teaching-toolbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 8px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background: rgba(15, 23, 42, 0.96);
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.28);
  overflow-x: auto;
  flex-wrap: nowrap;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}
body.vr-ovc-phone-room .vr-step4-tool-btn {
  min-width: 58px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.92);
  color: #e2e8f0;
}
body.vr-ovc-phone-room .vr-step4-tool-leave,
body.vr-ovc-member-room .vr-step4-tool-leave,
body.vr-ovc-member-room .vr-meeting-action-btn-leave {
  background: rgba(220, 38, 38, 0.14) !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}
body.vr-ovc-owner-room .vr-step4-tool-end-class,
body.vr-ovc-owner-room .vr-meeting-action-btn-end {
  background: rgba(220, 38, 38, 0.18) !important;
  border: 1px solid rgba(248, 113, 113, 0.5) !important;
  color: #fecaca !important;
}
body.vr-ovc-member-room #vrToolEndClassBtn,
body.vr-ovc-member-room #vrActionEndMeetingBtn {
  display: none !important;
}
body.vr-ovc-owner-room #vrToolRaiseHandBtn {
  display: none !important;
}
body.vr-ovc-phone-room .vr-meeting-action-row-wrap {
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
body.vr-ovc-phone-room .vr-participants-list-item,
body.vr-ovc-phone-room .vr-spotlight-card {
  border-radius: 14px;
}

/* OVC UI1 — mobile classroom shell layout (phone-first foundation) */
body.bs-ovc-ui1-shell {
  --bs-ovc-blue: #2563eb;
  --bs-ovc-blue-soft: #dbeafe;
  --bs-ovc-green: #10b981;
  --bs-ovc-green-soft: #d1fae5;
  --bs-ovc-red: #dc2626;
  --bs-ovc-red-soft: #fee2e2;
  --bs-ovc-surface: #ffffff;
  --bs-ovc-page-bg: #f1f5f9;
  --bs-ovc-text: #0f172a;
  --bs-ovc-muted: #64748b;
  overflow-x: hidden;
  background: var(--bs-ovc-page-bg) !important;
}
body.bs-ovc-ui1-shell .video-class-shell,
body.bs-ovc-ui1-shell .vr-ref-classroom-grid {
  background: var(--bs-ovc-page-bg) !important;
}
body.bs-ovc-ui1-shell.vr-ovc-phone-room.vr-ref-ui,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.vr-ref-ui .video-class-shell,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.vr-ref-ui .vr-ref-classroom-grid {
  background: var(--bs-ovc-page-bg) !important;
}
body.bs-ovc-ui1-shell .vr-ref-header,
body.bs-ovc-ui1-shell header.video-class-topbar,
body.bs-ovc-ui1-shell #vrSchoolMismatchBanner,
body.bs-ovc-ui1-shell #vrAccessWarningBanner,
body.bs-ovc-ui1-shell #vrMeetingEndedBanner,
body.bs-ovc-ui1-shell #vrAccessDeniedPanel {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-header-zone {
  background: transparent;
  border-radius: 0;
  padding: 0 0 10px;
  box-shadow: none;
  margin-bottom: 8px;
}
body.bs-ovc-ui1-shell .bs-ovc-schoolid-subtitle {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-shell-status-notice {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-live-badge.bs-ovc-status-active {
  background: var(--bs-ovc-green-soft);
  color: #047857;
}
body.bs-ovc-ui1-shell .bs-ovc-status-timer {
  color: var(--bs-ovc-red);
  font-weight: 800;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid-empty[hidden] {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-main-stage {
  position: fixed !important;
  left: -10000px !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
body.bs-ovc-ui1-shell .bs-ovc-main-stage-legacy-mount,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-step1-classroom,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-stage3a-board-grid,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-ref-main-stage {
  min-height: 0 !important;
  height: auto !important;
}
body.bs-ovc-ui1-shell.vr-jitsi-embed-loading .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel,
body.bs-ovc-ui1-shell.vr-jitsi-embed-live .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel,
body.bs-ovc-ui1-shell.vr-jitsi-embed-error .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel {
  display: block !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount #vcRoomBox,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .video-room-embed-shell {
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-danger .bs-ovc-control-icon {
  background: #047857;
  color: #fff;
  border-color: #047857;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.32);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-danger .bs-ovc-control-label {
  color: #065f46;
  font-weight: 600;
}
body.bs-ovc-ui1-shell #vcStatusCard,
body.bs-ovc-ui1-shell #vrContextStrip,
body.bs-ovc-ui1-shell #vrStageOutsideActions,
body.bs-ovc-ui1-shell .video-class-grid,
body.bs-ovc-ui1-shell .video-class-test-panel {
  display: none !important;
}
body.bs-ovc-ui1-shell #vrMeetingInfoSection,
body.bs-ovc-ui1-shell #vrStep7ActionHint {
  display: none !important;
}
body.bs-ovc-ui1-shell #vrMeetingFooterZone {
  display: none !important;
}
body.bs-ovc-ui1-shell #vrStep7ActionBarWrap {
  pointer-events: none;
}
body.bs-ovc-ui1-shell #vrStep7ActionBar {
  display: none;
}
body.bs-ovc-ui1-shell #vcJoinRoomBtn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}
body.bs-ovc-ui1-shell.vr-jitsi-embed-live #vcJoinRoomBtn,
body.bs-ovc-ui1-shell.vr-jitsi-embed-loading #vcJoinRoomBtn {
  display: none !important;
}
body.bs-ovc-ui1-shell .video-class-shell {
  min-height: 100dvh;
  max-width: 100%;
  overflow-x: hidden;
  padding: 0;
}
body.bs-ovc-ui1-shell #bsOvcClassroomShell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
}
body.bs-ovc-ui1-shell .bs-ovc-shell-scroll {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
  padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
}
body.bs-ovc-ui1-shell .bs-ovc-header-zone {
  background: var(--bs-ovc-surface);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  margin-bottom: 12px;
}
body.bs-ovc-ui1-shell .bs-ovc-header-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.bs-ovc-ui1-shell .bs-ovc-header-title-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
body.bs-ovc-ui1-shell .bs-ovc-class-title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--bs-ovc-text);
  word-break: break-word;
}
body.bs-ovc-ui1-shell .bs-ovc-live-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bs-ovc-green-soft);
  color: #047857;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.bs-ovc-ui1-shell .bs-ovc-host-subtitle {
  margin: 0;
  font-size: 0.78rem;
  color: var(--bs-ovc-text);
  font-weight: 600;
  line-height: 1.35;
}
body.bs-ovc-ui1-shell .bs-ovc-mini-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1.5px solid #34d399;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.1);
}
body.bs-ovc-ui1-shell .bs-ovc-mini-brand-icon-wrap {
  flex: 0 0 auto;
  order: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #059669;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.24);
}
body.bs-ovc-ui1-shell .bs-ovc-mini-brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.bs-ovc-ui1-shell .bs-ovc-mini-brand-icon {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
body.bs-ovc-ui1-shell .bs-ovc-mini-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
  order: 1;
}
body.bs-ovc-ui1-shell .bs-ovc-mini-school-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  word-break: break-word;
}
body.bs-ovc-ui1-shell .bs-ovc-mini-portal-label {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #059669;
}
body.bs-ovc-ui1-shell .bs-ovc-schoolid-subtitle {
  margin: 8px 0 0;
  font-size: 0.68rem;
  color: var(--bs-ovc-muted);
  line-height: 1.35;
}
body.bs-ovc-ui1-shell .bs-ovc-shell-status-notice {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.74rem;
  line-height: 1.4;
}
body.bs-ovc-ui1-shell .bs-ovc-live-badge.bs-ovc-status-active {
  background: var(--bs-ovc-green-soft);
  color: #047857;
}
body.bs-ovc-ui1-shell .bs-ovc-live-badge.bs-ovc-status-upcoming {
  background: #fef3c7;
  color: #b45309;
}
body.bs-ovc-ui1-shell .bs-ovc-live-badge.bs-ovc-status-ended,
body.bs-ovc-ui1-shell .bs-ovc-live-badge.bs-ovc-status-no-active {
  background: #f1f5f9;
  color: #64748b;
}
body.bs-ovc-ui1-shell .bs-ovc-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bs-ovc-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}
body.bs-ovc-ui1-shell .bs-ovc-status-timer {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--bs-ovc-text);
}
body.bs-ovc-ui1-shell .bs-ovc-status-timer[data-ovc-timer-unavailable="true"] {
  color: var(--bs-ovc-muted);
}
body.bs-ovc-ui1-shell .bs-ovc-status-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip.bs-ovc-status-active {
  background: var(--bs-ovc-green-soft);
  color: #047857;
}
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip.bs-ovc-status-upcoming {
  background: #fef3c7;
  color: #b45309;
}
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip.bs-ovc-status-ended,
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip.bs-ovc-status-no-active {
  background: #f1f5f9;
  color: #64748b;
}
body.bs-ovc-ui1-shell .bs-ovc-status-participants-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bs-ovc-blue-soft);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 700;
}
body.bs-ovc-ui1-shell .bs-ovc-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}
body.bs-ovc-ui1-shell .bs-ovc-status-meeting-chip.bs-ovc-status-active .bs-ovc-status-dot {
  background: var(--bs-ovc-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
body.bs-ovc-ui1-shell .bs-ovc-main-stage {
  position: relative;
  margin-bottom: 12px;
}
body.bs-ovc-ui1-shell .bs-ovc-main-stage-placeholder {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-video-stage {
  margin-bottom: 12px;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1220;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  margin-bottom: 10px;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 190px;
  max-height: 240px;
  background: linear-gradient(180deg, #111827 0%, #020617 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-avatar-wrap,
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-avatar {
  width: 56px;
  height: 56px;
}
body.bs-ovc-ui1-shell .bs-ovc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.bs-ovc-ui1-shell .bs-ovc-avatar-initials {
  font-size: 1.35rem;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: 0.04em;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-avatar .bs-ovc-avatar-initials {
  font-size: 1rem;
}
body.bs-ovc-ui1-shell .bs-ovc-host-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-indicators {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  gap: 6px;
}
body.bs-ovc-ui1-shell .bs-ovc-muted-icon,
body.bs-ovc-ui1-shell .bs-ovc-camera-off-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.72);
  font-size: 0.82rem;
  line-height: 1;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-camera-off,
body.bs-ovc-ui1-shell .bs-ovc-host-tile-live-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #cbd5e1;
  font-size: 0.68rem;
  font-weight: 600;
  z-index: 2;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-camera-off {
  bottom: 12px;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-live-hint {
  bottom: 36px;
}
body.bs-ovc-ui1-shell .bs-ovc-video-name-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 12px 10px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.88) 72%);
  color: #fff;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-name,
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-name {
  font-size: 0.74rem;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-role,
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-role {
  display: block;
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.86);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid {
  margin-bottom: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid-card {
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid-card[hidden] {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid-empty {
  margin: 0 0 10px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--bs-ovc-surface);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  text-align: center;
  font-size: 0.76rem;
  color: var(--bs-ovc-muted);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-grid-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
  min-height: 96px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #334155 0%, #0f172a 100%);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-media .bs-ovc-participant-tile-corner-icon {
  position: absolute;
  top: 6px;
  right: 6px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 18px 8px 8px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.88) 72%);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-overlay .bs-ovc-participant-tile-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-mic-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(220, 38, 38, 0.92);
  font-size: 0.58rem;
  line-height: 18px;
  text-align: center;
}
body.bs-ovc-ui1-shell .bs-ovc-overflow-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.84);
  min-height: 96px;
}
body.bs-ovc-ui1-shell .bs-ovc-overflow-tile-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.bs-ovc-ui1-shell .bs-ovc-overflow-count {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
}
body.bs-ovc-ui1-shell .bs-ovc-main-stage-legacy-mount {
  display: block;
}
body.bs-ovc-ui1-shell.vr-jitsi-embed-idle .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel,
body.bs-ovc-ui1-shell.vr-jitsi-embed-idle .bs-ovc-main-stage-legacy-mount #vcRoomBox {
  display: none !important;
}
body.bs-ovc-ui1-shell.vr-jitsi-embed-loading .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel,
body.bs-ovc-ui1-shell.vr-jitsi-embed-live .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel,
body.bs-ovc-ui1-shell.vr-jitsi-embed-error .bs-ovc-main-stage-legacy-mount .vr-step1-lesson-panel {
  display: block !important;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-step1-classroom {
  display: block;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-step1-classroom-sidebar,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-stage3a-teacher-column,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-stage3a-meta-row,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-student-pre-accept-notice,
body.bs-ovc-ui1-shell #vrClassChatCompose {
  display: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-stage3a-board-grid {
  display: block;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .vr-step1-lesson-panel {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount #vcRoomBox,
body.bs-ovc-ui1-shell .bs-ovc-legacy-classroom-mount .video-room-embed-shell {
  border-radius: 18px;
  overflow: hidden;
  min-height: 180px;
  background: #0f172a;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-card {
  background: var(--bs-ovc-surface);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-card-copy {
  flex: 1 1 auto;
  min-width: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--bs-ovc-text);
  line-height: 1.3;
  word-break: break-word;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-subtitle {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1d4ed8;
  line-height: 1.35;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-description {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--bs-ovc-muted);
  line-height: 1.45;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-active-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-active-badge.bs-ovc-status-active {
  background: var(--bs-ovc-green-soft);
  color: #047857;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-active-badge.bs-ovc-status-upcoming {
  background: #fef3c7;
  color: #b45309;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-active-badge.bs-ovc-status-ended,
body.bs-ovc-ui1-shell .bs-ovc-lesson-active-badge.bs-ovc-status-no-active {
  background: #f1f5f9;
  color: #64748b;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-times {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-times dt {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-ovc-muted);
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-times dd {
  margin: 2px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--bs-ovc-text);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
  border-top: 2px solid #34d399;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 24px rgba(16, 185, 129, 0.18);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar[hidden],
body.bs-ovc-ui1-shell #bsOvcToolbarOwner[hidden],
body.bs-ovc-ui1-shell #bsOvcToolbarMember[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar::-webkit-scrollbar {
  display: none;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 78px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #065f46;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn:disabled,
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.bs-ovc-control-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn:not(:disabled),
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn:not(:disabled) {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #6ee7b7;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.14);
  color: #047857;
  font-size: 1rem;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-icon-svg {
  display: block;
  width: 21px;
  height: 21px;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-label {
  font-size: 0.58rem;
  font-weight: 600;
  color: #065f46;
  text-align: center;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-label-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-has-chevron .bs-ovc-control-label {
  display: block;
  width: 100%;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-chevron {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 0.52rem;
  line-height: 1;
  color: #059669;
  margin-top: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-tile-media .bs-ovc-member-self-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #0f172a;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.is-loading {
  opacity: 0.65;
  pointer-events: none;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.is-loading .bs-ovc-control-icon {
  animation: bs-ovc-media-pulse 0.9s ease-in-out infinite;
}
@keyframes bs-ovc-media-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.is-active .bs-ovc-control-icon {
  background: #fff;
  color: #047857;
  border-color: #34d399;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.is-muted .bs-ovc-control-icon {
  background: #fff;
  color: #047857;
  border-color: #6ee7b7;
  box-shadow: 0 1px 4px rgba(16, 185, 129, 0.14);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn.is-raised .bs-ovc-control-icon {
  background: #ecfdf5;
  color: #059669;
  border-color: #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.22);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-danger .bs-ovc-control-icon {
  background: #047857;
  color: #fff;
  border-color: #047857;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(4, 120, 87, 0.32);
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-danger .bs-ovc-control-label {
  color: #065f46;
  font-weight: 600;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-has-badge {
  position: relative;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-badge {
  position: absolute;
  top: 0;
  right: calc(50% - 28px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #059669;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
  border: 1.5px solid #ecfdf5;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-placeholder {
  display: none;
}
body.bs-ovc-ui1-shell .bs-ovc-tool-circle {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bs-ovc-text);
  font: inherit;
  opacity: 0.72;
}
body.bs-ovc-ui1-shell .bs-ovc-tool-circle span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bs-ovc-surface);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
  font-size: 1rem;
}
body.bs-ovc-ui1-shell .bs-ovc-tool-circle small {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--bs-ovc-muted);
}
body.bs-ovc-ui1-shell .bs-ovc-tool-danger span {
  background: var(--bs-ovc-red-soft);
  color: var(--bs-ovc-red);
}
body.bs-ovc-ui1-shell .bs-ovc-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  pointer-events: none;
}
body.bs-ovc-ui1-shell.bs-ovc-drawer-open .bs-ovc-drawer-layer {
  pointer-events: auto;
}
body.bs-ovc-ui1-shell .bs-ovc-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.42);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
  cursor: pointer;
}
body.bs-ovc-ui1-shell.bs-ovc-drawer-open .bs-ovc-drawer-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}
body.bs-ovc-ui1-shell .bs-ovc-bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(78dvh, 640px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  max-width: 100%;
}
body.bs-ovc-ui1-shell.bs-ovc-drawer-open .bs-ovc-bottom-sheet:not([hidden]) {
  transform: translateY(0);
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  flex: 0 0 auto;
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--bs-ovc-text, #0f172a);
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.14);
  color: var(--bs-ovc-text, #0f172a);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
body.bs-ovc-ui1-shell .bs-ovc-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 16px;
}
body.bs-ovc-ui1-shell .bs-ovc-drawer-error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.12);
  color: #b91c1c;
  font-size: 0.82rem;
  font-weight: 600;
}
body.bs-ovc-ui1-shell .bs-ovc-section-label {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-ovc-muted, #64748b);
}
body.bs-ovc-ui1-shell .bs-ovc-host-section {
  margin-bottom: 14px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--bs-ovc-surface, #f8fafc);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.14);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(148, 163, 184, 0.18);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-avatar .bs-ovc-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-avatar .bs-ovc-avatar-initials {
  font-size: 0.82rem;
  font-weight: 800;
  color: #334155;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-name-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--bs-ovc-text, #0f172a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
body.bs-ovc-ui1-shell .bs-ovc-host-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.14);
  color: #15803d;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}
body.bs-ovc-ui1-shell .bs-ovc-role-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 700;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-status-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-status-icon {
  font-size: 0.82rem;
  line-height: 1;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icons {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #64748b;
  flex-shrink: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon.is-on {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(220, 252, 231, 0.92);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon.is-off {
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(254, 226, 226, 0.88);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon.is-readonly {
  cursor: default;
  pointer-events: none;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon.is-self-toggle {
  cursor: pointer;
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon.is-self-toggle:active {
  transform: scale(0.96);
}
body.bs-ovc-ui1-shell .bs-ovc-participant-media-icon .bs-ovc-control-icon-svg {
  width: 16px;
  height: 16px;
  display: block;
}
body.bs-ovc-ui1-shell .bs-ovc-participants-empty {
  margin: 12px 0 0;
  padding: 18px 14px;
  border-radius: 14px;
  text-align: center;
  background: rgba(148, 163, 184, 0.1);
  color: var(--bs-ovc-muted, #64748b);
  font-size: 0.86rem;
  font-weight: 600;
}
body.bs-ovc-ui1-shell .bs-ovc-chat-sheet-body {
  display: flex;
  flex-direction: column;
  min-height: 240px;
  padding: 0;
}
body.bs-ovc-ui1-shell .bs-ovc-chat-mount {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body.bs-ovc-ui1-shell .bs-ovc-chat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 24px 20px;
  text-align: center;
}
body.bs-ovc-ui1-shell .bs-ovc-chat-placeholder-icon {
  font-size: 2rem;
  line-height: 1;
}
body.bs-ovc-ui1-shell .bs-ovc-chat-placeholder-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--bs-ovc-muted, #64748b);
}
body.bs-ovc-ui1-shell #vrClassChatPanel.bs-ovc-drawer-chat-panel {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
body.bs-ovc-ui1-shell #vrClassChatPanel.bs-ovc-drawer-chat-panel .vr-class-chat-polish-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 16px 16px;
}
body.bs-ovc-ui1-shell #vrClassChatPanel.bs-ovc-drawer-chat-panel .vr-class-chat-polish-head {
  display: none;
}
body.bs-ovc-ui1-shell #vrClassChatPanel.bs-ovc-drawer-chat-panel .vr-class-chat-polish-messages {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: none;
}
body.bs-ovc-ui1-shell .bs-ovc-drawer-sheet {
  display: none;
}
@media (min-width: 769px) {
  body.bs-ovc-ui1-shell #bsOvcClassroomShell {
    display: none !important;
  }
}
@media (max-width: 414px) {
  body.bs-ovc-ui1-shell .bs-ovc-shell-scroll {
    padding-left: 14px;
    padding-right: 14px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-class-title {
    font-size: 1.08rem;
  }
}
  @media (max-width: 360px) {
  body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-btn {
    max-width: 58px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-icon {
    width: 42px;
    height: 42px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-icon-svg {
    width: 19px;
    height: 19px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone .bs-ovc-control-label {
    font-size: 0.54rem;
  }
  body.bs-ovc-ui1-shell .bs-ovc-tool-circle {
    min-width: 46px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-tool-circle span {
    width: 40px;
    height: 40px;
  }
  body.bs-ovc-ui1-shell .bs-ovc-lesson-times {
    grid-template-columns: 1fr;
  }
}

/* OVC UI7 — classroom role permission gate (owner vs member control prep) */
body.bs-ovc-perm-member #bsOvcToolbarOwner,
body.vr-ovc-member-room #bsOvcToolbarOwner,
body.bs-ovc-perm-owner #bsOvcToolbarMember,
body.vr-ovc-owner-room #bsOvcToolbarMember {
  display: none !important;
}

/* Phone APK Student — always show member bottom toolbar when not hidden */
body.bs-msg-apk-mode.bs-ovc-ui1-shell #bsOvcToolbarMember:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell #bsOvcToolbarMember:not([hidden]) .bs-ovc-control-btn:not([hidden]) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.bs-ovc-perm-member #bsOvcToolbarOwner,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcToolbarOwner {
  display: none !important;
}
body.bs-ovc-perm-member #bsOvcOwnerEndBtn,
body.bs-ovc-perm-member #bsOvcOwnerControlsBtn,
body.bs-ovc-perm-member #bsOvcOwnerShareBtn,
body[data-ovc-perm-role="member"] #bsOvcClassroomShell[data-ovc-can-end="false"] #bsOvcOwnerEndBtn,
body[data-ovc-perm-role="member"] #bsOvcClassroomShell[data-ovc-can-controls="false"] #bsOvcOwnerControlsBtn {
  display: none !important;
}
body.bs-ovc-perm-member #vrToolEndClassBtn,
body.bs-ovc-perm-member #vrActionEndMeetingBtn,
body.bs-ovc-perm-member #vrToolMoreWrap,
body.bs-ovc-perm-member #vrToolShareBtn,
body.bs-ovc-perm-member #vrSpotlightAllMetaBtn,
body.bs-ovc-perm-member #vrRecordMetaBtn,
body.bs-ovc-perm-member #vrToolRecordBtn,
body.bs-ovc-perm-member #vrToolPdfUploadBtn,
body.bs-ovc-perm-member #vrToolWhiteboardBtn {
  display: none !important;
}
body.bs-ovc-perm-owner #vrToolRaiseHandBtn {
  display: none !important;
}

/* Online Class Room — Meeting Owner role permission UI (student join-only controls) */
.vr-student-pre-accept-notice {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.28), rgba(15, 23, 42, 0.82));
  border: 1px solid rgba(96, 165, 250, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.bs-student-pre-accept-mode #vrStudentPreAcceptNotice:not([hidden]) {
  display: flex;
}
.vr-student-pre-accept-notice-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1.35;
}
.vr-student-pre-accept-notice-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}
.vr-student-pre-accept-notice-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fde68a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.bs-student-pre-accept-mode .vr-stage3a-meta-row,
body.bs-student-pre-accept-mode .vr-stage3a-board-grid,
body.bs-student-pre-accept-mode .vr-ref-sidebar,
body.bs-student-pre-accept-mode .vr-step4-toolbar-wrap {
  display: revert;
  visibility: visible;
}
body.bs-student-pre-accept-mode .vr-step4-teaching-toolbar .vr-step4-tool-btn:not(#vrToolLeaveBtn):not(#vrToolMaximizeBtn),
body.bs-student-pre-accept-mode #vrSpotlightAllMetaBtn,
body.bs-student-pre-accept-mode #vrRecordMetaBtn,
body.bs-student-pre-accept-mode #vrActionEndMeetingBtn {
  pointer-events: none !important;
  opacity: 0.42 !important;
}
body.bs-student-pre-accept-mode #vrToolMicBtn,
body.bs-student-pre-accept-mode #vrToolCameraBtn {
  pointer-events: none !important;
  opacity: 0.42 !important;
}
body.bs-student-pre-accept-mode #vrToolLeaveBtn,
body.bs-student-pre-accept-mode #vrToolMaximizeBtn,
body.bs-student-pre-accept-mode #vrLiveClassViewMaximizeBtn,
body.bs-student-pre-accept-mode #vrActionLeaveMeetingBtn {
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.bs-student-pre-accept-mode #vrClassChatInput,
body.bs-student-pre-accept-mode #vrClassChatSendBtn,
body.bs-student-pre-accept-mode #vrClassChatEditCancelBtn {
  pointer-events: none !important;
  opacity: 0.45 !important;
}
body.bs-student-pre-accept-mode #vrClassChatPanel,
body.bs-student-pre-accept-mode #vrParticipantsPanel,
body.bs-student-pre-accept-mode #vrClassroomSection {
  pointer-events: auto;
}
body.bs-student-pre-accept-mode .vr-participants-join-panel .vr-join-request-accept-btn,
body.bs-student-pre-accept-mode .vr-participants-join-panel .vr-join-request-reject-btn {
  pointer-events: none !important;
  opacity: 0.4 !important;
}
body.bs-student-accepted-mode #vrToolMicBtn,
body.bs-student-accepted-mode #vrToolCameraBtn,
body.bs-student-accepted-mode #vrToolPeopleBtn,
body.bs-student-accepted-mode #vrToolRaiseHandBtn {
  pointer-events: auto !important;
  opacity: 1 !important;
}
body.bs-student-accepted-mode #vrClassChatInput:not([disabled]),
body.bs-student-accepted-mode #vrClassChatSendBtn:not([disabled]) {
  pointer-events: auto !important;
  opacity: 1 !important;
}
@media (max-width: 720px) {
  .vr-student-pre-accept-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* STEP 4.1I — Student Leave button must stay clickable in waiting/joined states */
body.bs-online-class-student-mode #vrToolLeaveBtn,
body.bs-online-class-student-mode #vrActionLeaveMeetingBtn,
body.bs-online-class-join-only-mode #vrToolLeaveBtn,
body.bs-online-class-join-only-mode #vrActionLeaveMeetingBtn,
body.bs-student-pre-accept-mode #vrToolLeaveBtn,
body.bs-student-pre-accept-mode #vrActionLeaveMeetingBtn,
body.bs-student-pre-accept-mode #vrToolMaximizeBtn,
body.bs-student-pre-accept-mode #vrLiveClassViewMaximizeBtn,
body.vr-waiting-room-active #vrToolLeaveBtn,
body.vr-waiting-room-active #vrActionLeaveMeetingBtn {
  pointer-events: auto !important;
  opacity: 1;
}

/* Online Class Room — PDF Open shared view for accepted accounts */
.bs-protected-pdf-view,
.vr-protected-pdf-viewer.bs-protected-pdf-view {
  background: #ffffff;
}
.bs-protected-pdf-header,
.vr-protected-pdf-header {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 6px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}
.bs-protected-pdf-header-title {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}
.bs-protected-pdf-header-filename {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-protected-pdf-empty,
.vr-protected-pdf-empty.bs-protected-pdf-empty {
  color: #64748b;
  background: #ffffff;
}
.bs-protected-pdf-frame,
.vr-protected-pdf-viewer .bs-protected-pdf-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 0;
  background: #ffffff;
}
.bs-protected-pdf-view-open .vr-protected-pdf-viewer-body,
.bs-protected-pdf-view-open .bs-classroom-pdf-view {
  background: #ffffff;
}
@media (max-width: 768px) {
  .bs-protected-pdf-header-title {
    font-size: 12px;
  }
  .bs-protected-pdf-header-filename {
    font-size: 10px;
  }
  .bs-protected-pdf-frame,
  .vr-protected-pdf-viewer .bs-protected-pdf-frame {
    min-height: 320px;
  }
}

/* ==========================================================================
   STEP UI-2 — Shared Message UI CSS / Foundation Polish (cross-role)
   Layout and visual consistency only — no logic/permission changes.
   Applies to #bsFloatingChatOverlay floating widget for Admin, Student,
   Teacher, Parent, Driver Teacher (Founder when widget is loaded).
   ========================================================================== */

#bsFloatingChatOverlay.bs-fcw-overlay {
  --bs-fcw-list-width: minmax(260px, 340px);
  --bs-fcw-modal-max-width: 980px;
  --bs-fcw-modal-height: min(680px, calc(100dvh - 32px));
  --bs-fcw-card-radius: 12px;
  --bs-fcw-card-pad: 10px;
  --bs-fcw-compose-gap: 8px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-panel {
  width: min(var(--bs-fcw-modal-max-width), 100%);
  height: var(--bs-fcw-modal-height);
  max-height: calc(100dvh - 32px);
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-body {
  grid-template-columns: var(--bs-fcw-list-width) minmax(0, 1fr);
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-list-pane,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-room-pane {
  min-width: 0;
  min-height: 0;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-list,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-room-pane {
  display: flex;
  flex-direction: column;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-stack,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-row {
  width: 100%;
  min-width: 0;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-row {
  display: flex;
  align-items: center;
  gap: var(--bs-fcw-compose-gap);
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-left,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-right {
  flex: 0 0 auto;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-main {
  flex: 1 1 auto;
  min-width: 0;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-main .bs-fcw-input,
#bsFloatingChatOverlay.bs-fcw-overlay #bsFcwMessageInput {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-send-btn {
  flex: 0 0 auto;
}

/* Contact / group list cards — shared spacing */
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-card,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-chat-row {
  border-radius: var(--bs-fcw-card-radius);
  padding: var(--bs-fcw-card-pad);
  margin-bottom: 6px;
  gap: 10px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-card-main {
  min-width: 0;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-card-preview,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-contact-preview {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-card-unread {
  align-self: center;
  flex-shrink: 0;
}

/* Homework thread cards align with list card rhythm */
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-homework-post,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-student-homework-post {
  border-radius: var(--bs-fcw-card-radius);
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-homework-day-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 10px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-homework-day-separator::before,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-homework-day-separator::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e2e8f0;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-homework-day-separator span {
  flex: 0 0 auto;
  padding: 0 4px;
}

/* Message bubbles — consistent vertical rhythm */
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-bubble-row {
  margin-bottom: 10px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-bubble-row + .bs-fcw-bubble-row {
  margin-top: 0;
}

/* Empty states */
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty-room {
  padding: 28px 18px;
  line-height: 1.45;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty strong,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty-room strong {
  font-size: 0.92rem;
  margin-bottom: 8px;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty p,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-empty-room p {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
}

/* Role modal boxes — layout harmonization (accent themes preserved above) */
body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-compose-row,
body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-row,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-row {
  display: flex;
  align-items: center;
  gap: var(--bs-fcw-compose-gap, 8px);
}

body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-compose-main,
body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-main {
  flex: 1 1 auto;
  min-width: 0;
}

body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-compose-main .bs-fcw-input,
body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box #bsFcwMessageInput,
body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-compose-main .bs-fcw-input,
body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box #bsFcwMessageInput,
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-compose-main .bs-fcw-input,
#bsFloatingChatOverlay.bs-fcw-overlay #bsFcwMessageInput {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-panel,
  body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-panel,
  #bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-panel {
    min-width: 0;
    width: min(100%, calc(100vw - 16px));
  }
}

@media (max-width: 768px) {
  #bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  #bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-filters::-webkit-scrollbar {
    display: none;
  }

  body.student-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-student-message-modal-box .bs-fcw-panel,
  body.admin-dashboard-body #bsFloatingChatOverlay.bs-fcw-overlay.bs-admin-message-modal-box .bs-fcw-panel,
  #bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-panel {
    width: 100%;
    max-height: 100dvh;
    height: 100dvh;
    min-width: 0;
  }
}

/* STEP 3.5 Add-on — Student group Admin protected badge */
#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-badge-admin-protected {
  background: rgba(15, 73, 255, 0.12);
  color: #0b2d75;
  border: 1px solid rgba(15, 73, 255, 0.22);
  font-weight: 800;
}

#bsFloatingChatOverlay.bs-fcw-overlay .bs-fcw-badge-control-hint {
  background: rgba(46, 125, 50, 0.12);
  color: #1b5e20;
  border: 1px solid rgba(46, 125, 50, 0.22);
  font-weight: 700;
}

/* STEP 4.3 — Student Online Class view mode markers (state only; no layout changes yet) */
body.bs-online-class-student-mode,
#vrClassroomSection.bs-online-class-student-mode {
  /* reserved for later Student UI cleanup steps */
}

body.bs-online-class-join-only-mode,
#vrClassroomSection.bs-online-class-join-only-mode {
  /* reserved for join-only permission UI in later steps */
}

/* STEP 4.1D — Online Class join summary display */
.vr-participants-join-summary,
.vr-participants-owner-line {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #475569;
}
.vr-participants-join-summary {
  font-weight: 700;
}
.vr-participants-owner-line {
  color: #334155;
}

/* STEP 4.1E — Joined Accounts grouped list (Admin / Teacher / Student) */
.vr-joined-accounts-section {
  margin-bottom: 4px;
}
.vr-joined-accounts-root {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vr-joined-accounts-group + .vr-joined-accounts-group {
  margin-top: 2px;
}
.vr-joined-accounts-group-title {
  margin: 0 0 6px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.vr-joined-accounts-group.is-admins .vr-joined-accounts-group-title {
  color: #c4b5fd;
}
.vr-joined-accounts-group.is-teachers .vr-joined-accounts-group-title {
  color: #93c5fd;
}
.vr-joined-accounts-group.is-students .vr-joined-accounts-group-title {
  color: #86efac;
}
body.vr-ref-ui .vr-joined-account-card.is-owner {
  border-color: rgba(167, 139, 250, 0.45);
}
body.vr-ref-ui .vr-joined-account-status.is-owner {
  color: #ede9fe;
  background: rgba(91, 33, 182, 0.55);
}
body.vr-ref-ui .vr-joined-account-role {
  color: #cbd5e1;
  font-weight: 700;
}

/* Teacher floating message — Create Meeting modal (Admin-style, in-widget) */
.bs-fcw-teacher-create-meeting-modal {
  position: fixed;
  inset: 0;
  z-index: 13050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}
.bs-fcw-teacher-create-meeting-modal[hidden] {
  display: none !important;
}
.bs-fcw-teacher-create-meeting-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}
.bs-fcw-teacher-create-meeting-form {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  background: #fff;
}
body.bs-fcw-teacher-create-meeting-open {
  overflow: hidden;
}
#bsFloatingChatOverlay .bs-fcw-teacher-create-meeting-modal .msg-admin-join-meeting-btn {
  pointer-events: auto;
}
.bs-fcw-ovc-start-meeting-form .bs-fcw-ovc-start-form-head {
  padding-bottom: 8px;
}
.bs-fcw-ovc-start-meeting-form .bs-fcw-ovc-start-form-head h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
}
.bs-fcw-ovc-start-group-summary {
  margin: 0 16px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.bs-fcw-ovc-start-group-name {
  margin: 0 0 8px;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  word-break: break-word;
}
.bs-fcw-ovc-start-group-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.bs-fcw-ovc-start-group-meta dt {
  margin: 0 0 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-ovc-start-group-meta dd {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #334155;
  word-break: break-word;
}
.bs-fcw-ovc-start-form-fields label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #334155;
}
.bs-fcw-ovc-start-form-fields input[type="datetime-local"],
.bs-fcw-ovc-start-form-fields input[type="text"] {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  font-size: 0.86rem;
}
.bs-fcw-ovc-start-form-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
}
.bs-fcw-ovc-start-form-actions .bs-fcw-ovc-start-cancel-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}
.bs-fcw-ovc-start-form-actions .bs-fcw-ovc-start-submit-btn {
  background: linear-gradient(135deg, #2563eb 0%, #059669 100%);
  color: #ffffff;
  border: 0;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
}

/* Online Video Class — Active meeting control modal */
.bs-fcw-ovc-active-meeting-modal {
  position: fixed;
  inset: 0;
  z-index: 13060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
}
.bs-fcw-ovc-active-meeting-modal[hidden] {
  display: none !important;
}
.bs-fcw-ovc-active-meeting-form .bs-fcw-ovc-active-meeting-summary {
  display: grid;
  gap: 10px;
  padding: 0 16px 8px;
}
.bs-fcw-ovc-active-meeting-group {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #0f172a;
}
.bs-fcw-ovc-active-meeting-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.bs-fcw-ovc-active-meeting-times dt {
  margin: 0 0 2px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-ovc-active-meeting-times dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
}
.bs-fcw-ovc-active-status-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.bs-fcw-ovc-create-meeting-card-copy .bs-fcw-ovc-active-status-pill {
  margin-bottom: 4px;
}
.bs-fcw-ovc-active-meeting-actions {
  flex-wrap: wrap;
}
body.bs-fcw-ovc-active-meeting-open {
  overflow: hidden;
}
#bsFloatingChatOverlay .bs-fcw-ovc-active-meeting-modal .msg-admin-join-meeting-btn {
  pointer-events: auto;
}
#bsFloatingChatOverlay .bs-fcw-ovc-active-meeting-modal .msg-admin-join-meeting-btn.is-end:not(:disabled) {
  background: #fff;
  border: 1px solid #fca5a5;
  color: #b91c1c;
}

/* Online Video Class — Owner responsive shell (desktop panel + phone sheet) */
.bs-fcw-ovc-phone-steps {
  display: none;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  gap: 8px;
}
.bs-fcw-ovc-phone-steps li {
  flex: 1;
  padding: 6px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}
.bs-fcw-ovc-phone-steps li.is-current {
  background: #dbeafe;
  color: #1d4ed8;
}
.bs-fcw-ovc-desktop-owner-summary {
  display: none;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.bs-fcw-ovc-desktop-summary-kicker {
  margin: 0 0 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}
.bs-fcw-ovc-desktop-summary-note {
  margin: 0;
  font-size: 0.78rem;
  color: #475569;
  line-height: 1.45;
}
#bsFcwOvcActiveMeetingOwnerSummary {
  margin: 0 0 8px;
  font-size: 0.84rem;
  font-weight: 700;
  color: #0f172a;
}

/* Phone owner view — full-width bottom sheet */
body.bs-fcw-ovc-owner-phone-ui .bs-fcw-ovc-owner-phone-sheet:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 13070;
  display: flex !important;
  align-items: flex-end;
  justify-content: stretch;
  padding: 0;
}
body.bs-fcw-ovc-owner-phone-ui .bs-fcw-ovc-owner-phone-sheet .bs-fcw-teacher-create-meeting-backdrop {
  background: rgba(15, 23, 42, 0.5);
}
body.bs-fcw-ovc-owner-phone-ui .bs-fcw-ovc-owner-phone-sheet .bs-fcw-teacher-create-meeting-form {
  width: 100%;
  max-width: none;
  max-height: min(92vh, 760px);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.18);
}
body.bs-fcw-ovc-owner-phone-ui .bs-fcw-ovc-phone-steps {
  display: flex;
}
body.bs-fcw-ovc-owner-phone-ui .msg-admin-join-form-grid {
  grid-template-columns: 1fr !important;
}
body.bs-fcw-ovc-owner-phone-ui .msg-admin-join-form-actions {
  flex-direction: column;
  align-items: stretch;
}
body.bs-fcw-ovc-owner-phone-ui .msg-admin-join-form-actions .msg-admin-join-meeting-btn {
  width: 100%;
  min-height: 48px;
  font-size: 0.95rem;
}
body.bs-fcw-ovc-owner-phone-ui .bs-fcw-ovc-active-meeting-times {
  grid-template-columns: 1fr;
}

/* Desktop owner view — docked panel beside chat */
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-room-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(400px, 38%);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "head head"
    "thread panel"
    "compose panel"
    "notice panel";
  align-items: stretch;
  min-height: 0;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-room-head {
  grid-area: head;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-thread {
  grid-area: thread;
  min-height: 0;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-compose {
  grid-area: compose;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-notice {
  grid-area: notice;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-ovc-owner-desktop-docked:not([hidden]) {
  position: relative;
  inset: auto;
  z-index: 2;
  grid-area: panel;
  display: flex !important;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  pointer-events: auto;
  min-height: 0;
  border-left: 1px solid #e2e8f0;
  background: #f8fafc;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-ovc-owner-desktop-docked .bs-fcw-teacher-create-meeting-backdrop {
  display: none;
}
#bsFloatingChatOverlay.bs-fcw-ovc-owner-panel-open .bs-fcw-ovc-owner-desktop-docked .bs-fcw-teacher-create-meeting-form {
  width: 100%;
  max-width: none;
  max-height: none;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  overflow: auto;
}
body.bs-fcw-ovc-owner-desktop-ui .bs-fcw-ovc-start-meeting-form .msg-admin-join-form-grid,
body.bs-fcw-ovc-owner-desktop-ui .bs-fcw-ovc-active-meeting-form .bs-fcw-ovc-active-meeting-summary {
  padding-left: 16px;
  padding-right: 16px;
}
body.bs-fcw-ovc-owner-desktop-ui .bs-fcw-ovc-start-meeting-form .msg-admin-join-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.bs-fcw-ovc-owner-desktop-ui .bs-fcw-ovc-start-meeting-form .msg-admin-join-form-full {
  grid-column: 1 / -1;
}
body.bs-fcw-ovc-owner-desktop-ui .bs-fcw-ovc-desktop-owner-summary {
  display: block;
}
body.bs-fcw-ovc-owner-desktop-ui .msg-admin-join-form-actions {
  gap: 8px;
  padding: 0 16px 16px;
}
body.bs-fcw-ovc-owner-desktop-ui .msg-admin-join-form-actions .msg-admin-join-meeting-btn {
  min-height: 38px;
  font-size: 0.84rem;
}

/* Teacher Homework — compact create/search bar + modal (Student-style) */
.bs-fcw-teacher-homework-composer.bs-fcw-homework-fb-composer {
  margin-bottom: 4px;
}
.bs-fcw-teacher-homework-composer .bs-fcw-homework-fb-composer-name {
  margin-bottom: 2px;
}
.bs-fcw-teacher-homework-composer.is-disabled .bs-fcw-homework-fb-composer-row {
  display: none;
}
.bs-fcw-teacher-homework-create-modal {
  z-index: 12550;
}
.bs-fcw-teacher-homework-create-modal .bs-fcw-homework-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.bs-fcw-teacher-homework-create-open {
  overflow: hidden;
}
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-form,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-save-btn,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-clear-btn,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-attach-btn,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-scope-btn,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-student-homework-create-card,
#bsFloatingChatOverlay .bs-fcw-teacher-homework-create-modal .bs-fcw-homework-attachment-chip-remove {
  pointer-events: auto;
}
.bs-fcw-teacher-homework-create-modal .bs-fcw-homework-scope-btn.is-locked {
  cursor: default;
}
.bs-fcw-teacher-homework-create-modal .bs-fcw-homework-scope-field.is-single-option .bs-fcw-homework-scope-btn-caret {
  visibility: hidden;
}
@media (max-width: 720px) {
  .bs-fcw-teacher-homework-composer .bs-fcw-homework-fb-composer-row {
    flex-wrap: wrap;
  }
  .bs-fcw-teacher-homework-composer .bs-fcw-homework-fb-composer-search {
    min-width: 0;
    flex: 1 1 100%;
  }
  .bs-fcw-teacher-homework-composer .bs-fcw-homework-fb-create-btn {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
}

/* ADM-FIN-1 — Admin Finance / Cashbook */
#adminFinanceCashbookSection .admin-finance-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#adminFinanceCashbookSection .admin-finance-hero h2 {
  margin: 0 0 6px;
}
#adminFinanceCashbookSection .admin-finance-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
#adminFinanceCashbookSection .admin-finance-card strong.is-negative {
  color: #b42318;
}
#adminFinanceCashbookSection .admin-finance-sections-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
#adminFinanceCashbookSection[class*="admin-finance-view-"] .admin-finance-sections-stack [data-admin-finance-pane] {
  display: none !important;
}
#adminFinanceCashbookSection.admin-finance-view-add-income #finance-add-income-section,
#adminFinanceCashbookSection.admin-finance-view-add-expense #finance-add-expense-section,
#adminFinanceCashbookSection.admin-finance-view-cashbook-ledger #finance-cashbook-ledger-section {
  display: block !important;
}
#adminFinanceCashbookSection.admin-finance-view-add-income .admin-finance-hero,
#adminFinanceCashbookSection.admin-finance-view-add-income .admin-finance-summary-grid,
#adminFinanceCashbookSection.admin-finance-view-add-expense .admin-finance-hero,
#adminFinanceCashbookSection.admin-finance-view-add-expense .admin-finance-summary-grid {
  display: none !important;
}
#adminFinanceCashbookSection .admin-finance-section-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
#adminFinanceCashbookSection .admin-finance-section-card h3 {
  margin: 0 0 6px;
}
#adminFinanceCashbookSection .admin-finance-section-lead {
  margin: 0 0 14px;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.45;
}
#adminFinanceCashbookSection #finance-add-income-section,
#adminFinanceCashbookSection #finance-add-expense-section,
#adminFinanceCashbookSection #finance-cashbook-ledger-section {
  scroll-margin-top: 18px;
}
#adminFinanceCashbookSection .admin-finance-forms-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}
#adminFinanceCashbookSection .admin-finance-form-panel.admin-finance-pane-focus,
#adminFinanceCashbookSection .admin-finance-ledger-panel.admin-finance-pane-focus,
#adminFinanceCashbookSection .admin-finance-section-card.admin-finance-pane-focus {
  outline: 2px solid rgba(245, 185, 40, 0.55);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(245, 185, 40, 0.12);
  transition: outline-color 0.25s ease, box-shadow 0.25s ease;
}
#adminFinanceCashbookSection .admin-finance-form {
  display: grid;
  gap: 12px;
}
#adminFinanceCashbookSection .admin-finance-field {
  display: grid;
  gap: 6px;
  font-size: 0.92rem;
}
#adminFinanceCashbookSection .admin-finance-field span b {
  color: #b42318;
}
#adminFinanceCashbookSection .admin-finance-field input,
#adminFinanceCashbookSection .admin-finance-field select,
#adminFinanceCashbookSection .admin-finance-field textarea {
  width: 100%;
  border: 1px solid #d5dde8;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
#adminFinanceCashbookSection .admin-finance-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
#adminFinanceCashbookSection .admin-finance-ledger-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
#adminFinanceCashbookSection .admin-finance-ledger-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
#adminFinanceCashbookSection .admin-finance-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
#adminFinanceCashbookSection .admin-finance-field--search input {
  width: 100%;
}
#adminFinanceCashbookSection .admin-finance-message {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.92rem;
}
#adminFinanceCashbookSection .admin-finance-message.is-success {
  background: #ecfdf3;
  color: #027a48;
  border: 1px solid #abefc6;
}
#adminFinanceCashbookSection .admin-finance-message.is-error {
  background: #fef3f2;
  color: #b42318;
  border: 1px solid #fecdca;
}
#adminFinanceCashbookSection .admin-finance-table-wrap {
  overflow-x: auto;
}
#adminFinanceCashbookSection .admin-finance-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
#adminFinanceCashbookSection .admin-finance-type-pill.is-income {
  background: #ecfdf3;
  color: #027a48;
}
#adminFinanceCashbookSection .admin-finance-type-pill.is-expense {
  background: #fef3f2;
  color: #b42318;
}
#adminFinanceCashbookSection .admin-finance-amount.is-income {
  color: #027a48;
  font-weight: 600;
}
#adminFinanceCashbookSection .admin-finance-amount.is-expense {
  color: #b42318;
  font-weight: 600;
}
#adminDashboardBasicListModal .profit-ledger-revenue {
  color: #027a48;
  font-weight: 600;
}
#adminDashboardBasicListModal .profit-ledger-expense {
  color: #b42318;
  font-weight: 600;
}
#adminDashboardBasicListModal .profit-ledger-footer-row td {
  border-top: 2px solid #d0d5dd;
  background: #f9fafb;
  padding-top: 12px;
  padding-bottom: 12px;
}
#adminDashboardBasicListModal .profit-ledger-footer-label {
  font-weight: 700;
  color: #344054;
}
#adminDashboardBasicListModal .profit-ledger-footer-revenue {
  color: #027a48;
}
#adminDashboardBasicListModal .profit-ledger-footer-expense {
  color: #b42318;
}
#adminDashboardBasicListModal .profit-ledger-footer-profit {
  color: #101828;
  font-weight: 700;
}
#adminDashboardBasicListModal .admin-profit-detail-desc-main {
  display: block;
  font-weight: 500;
  color: #101828;
}
#adminDashboardBasicListModal .admin-profit-monthly-payment-breakdown,
.admin-profit-monthly-payment-breakdown {
  display: block;
  margin-top: 4px;
  font-size: 0.82em;
  color: #64748b;
  line-height: 1.35;
  font-weight: 400;
}
#adminFinanceCashbookSection .admin-finance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 900px) {
  #adminFinanceCashbookSection .admin-finance-sections-stack,
  #adminFinanceCashbookSection .admin-finance-forms-grid {
    gap: 14px;
  }
}
@media print {
  body.admin-finance-print-mode .admin-sidebar,
  body.admin-finance-print-mode .admin-topbar,
  body.admin-finance-print-mode .admin-finance-form-panel,
  body.admin-finance-print-mode .admin-finance-ledger-tools,
  body.admin-finance-print-mode .admin-finance-filter-grid,
  body.admin-finance-print-mode .admin-finance-actions {
    display: none !important;
  }
  body.admin-finance-print-mode .admin-page-section {
    display: block !important;
    visibility: visible !important;
  }
  body.admin-finance-print-mode #adminFinanceCashbookSection {
    display: block !important;
  }
}

/* ===== UI-COMPACT-1 — Professional compact module layout ===== */
.admin-dashboard-body .admin-title h1,
.teacher-dashboard-body .admin-title h1,
.student-dashboard-body .admin-title h1,
.parent-dashboard-body .admin-title h1,
.driver-dashboard-body .admin-title h1 {
  font-size: 22px;
  line-height: 1.2;
}
.admin-dashboard-body .admin-title p,
.teacher-dashboard-body .admin-title p,
.student-dashboard-body .admin-title p,
.parent-dashboard-body .admin-title p,
.driver-dashboard-body .admin-title p {
  font-size: 13px;
}
.admin-dashboard-body .admin-topbar,
.teacher-dashboard-body .admin-topbar,
.student-dashboard-body .admin-topbar,
.parent-dashboard-body .admin-topbar,
.driver-dashboard-body .admin-topbar {
  padding: 8px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  gap: 10px;
}
.admin-dashboard-body .admin-main,
.teacher-dashboard-body .admin-main,
.student-dashboard-body .admin-main,
.parent-dashboard-body .admin-main,
.driver-dashboard-body .admin-main,
.dashboard-body .dashboard-main {
  padding: 14px;
}
.admin-dashboard-body .admin-quick-card,
.admin-dashboard-body .admin-mini-card {
  padding: 10px 12px;
  border-radius: 12px;
  gap: 6px;
}
.admin-dashboard-body .admin-quick-card span {
  width: 38px;
  height: 38px;
  font-size: 18px;
  border-radius: 10px;
}
.admin-dashboard-body .admin-mini-card span {
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 10px;
}
.admin-dashboard-body .admin-mini-card b {
  font-size: 18px;
}
.admin-dashboard-body .teacher-form-card,
.admin-dashboard-body .teacher-summary-card,
.teacher-dashboard-body .teacher-form-card,
.teacher-dashboard-body .teacher-summary-card,
.student-dashboard-body .student-form-card,
.driver-dashboard-body .driver-form-card {
  padding: 14px 16px;
  border-radius: 14px;
}
.admin-dashboard-body .admin-teachers-list-shell {
  padding: 14px 16px;
  border-radius: 14px;
}
.admin-dashboard-body .field,
.teacher-dashboard-body .field,
.student-dashboard-body .field,
.parent-dashboard-body .field,
.driver-dashboard-body .field {
  gap: 5px;
}
.admin-dashboard-body .field input,
.admin-dashboard-body .field select,
.admin-dashboard-body .field textarea,
.teacher-dashboard-body .field input,
.teacher-dashboard-body .field select,
.teacher-dashboard-body .field textarea,
.student-dashboard-body .field input,
.student-dashboard-body .field select,
.student-dashboard-body .field textarea,
.parent-dashboard-body .field input,
.parent-dashboard-body .field select,
.parent-dashboard-body .field textarea,
.driver-dashboard-body .field input,
.driver-dashboard-body .field select,
.driver-dashboard-body .field textarea,
.admin-page-section input,
.admin-page-section select,
.admin-page-section textarea {
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
  min-height: 36px;
}
.admin-dashboard-body .teacher-actions button,
.admin-dashboard-body .logout-btn,
.teacher-dashboard-body .teacher-actions button,
.student-dashboard-body .logout-btn,
.parent-dashboard-body .logout-btn,
.driver-dashboard-body .logout-btn,
.admin-btn,
.admin-btn-primary,
.admin-btn-ghost {
  padding: 8px 12px;
  font-size: 13px;
  min-height: 36px;
  border-radius: 10px;
}
.admin-page-section th,
.admin-page-section td,
.admin-transport-table th,
.admin-transport-table td,
.admin-table th,
.admin-table td,
.teacher-dashboard-body th,
.teacher-dashboard-body td,
.student-dashboard-body th,
.student-dashboard-body td,
.parent-dashboard-body th,
.parent-dashboard-body td,
.driver-dashboard-body th,
.driver-dashboard-body td {
  padding: 8px 10px;
  font-size: 13px;
}
.dashboard-body .stat-card,
.dashboard-body .panel,
.dashboard-body .form-panel,
.dashboard-body .table-panel,
.founder-summary-card,
.founder-overview-card,
.founder-payment-card {
  padding: 14px;
  border-radius: 14px;
}
.dashboard-body .stat-card b,
.dashboard-body .mini-status b {
  font-size: 20px;
}
.dashboard-body .stat-icon {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border-radius: 12px;
}
.dashboard-body .welcome h1,
.dashboard-body .section-head h2 {
  font-size: 22px;
}
.dashboard-body .status-banner {
  padding: 14px;
  border-radius: 14px;
  margin-bottom: 14px;
}
.dashboard-body .status-banner strong {
  font-size: 18px;
}
.teacher-dashboard-body .teacher-homework-form,
.teacher-dashboard-body .teacher-exam-form,
.teacher-dashboard-body .teacher-my-classes-summary div,
.teacher-dashboard-body .teacher-attendance-summary div {
  padding: 12px;
  border-radius: 14px;
  gap: 10px;
}
.teacher-dashboard-body .teacher-my-classes-summary strong,
.teacher-dashboard-body .teacher-attendance-summary strong,
.teacher-dashboard-body .teacher-my-classes-summary div strong {
  font-size: 20px;
}
.teacher-dashboard-body .teacher-integration-card {
  padding: 14px;
  border-radius: 14px;
  grid-template-columns: 44px 1fr;
  gap: 10px;
}
.teacher-dashboard-body .teacher-integration-icon {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 12px;
}
#adminFinanceCashbookSection .admin-finance-shell {
  gap: 14px;
}
#adminFinanceCashbookSection .admin-finance-summary-grid {
  gap: 12px;
}
#adminFinanceCashbookSection .admin-finance-sections-stack,
#adminFinanceCashbookSection .admin-finance-forms-grid {
  gap: 12px;
}
#adminFinanceCashbookSection .admin-transport-card {
  padding: 12px;
  border-radius: 12px;
}
#adminFinanceCashbookSection .admin-transport-card .icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
  margin-bottom: 8px;
}
#adminFinanceCashbookSection .admin-transport-card strong {
  font-size: 20px;
}
#adminFinanceCashbookSection .admin-transport-hero,
#adminFinanceCashbookSection .admin-transport-panel {
  padding: 14px 16px;
  border-radius: 14px;
}
#adminFinanceCashbookSection .admin-transport-hero h2 {
  font-size: 18px;
}
#adminFinanceCashbookSection .admin-transport-panel h3 {
  font-size: 16px;
}
.bs-fcw-panel {
  width: min(920px, 100%);
  height: min(620px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  border-radius: 14px;
}
.bs-fcw-topbar {
  padding: 10px 12px;
  gap: 8px;
}
.bs-fcw-title {
  font-size: 0.95rem;
}
.bs-fcw-body {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
}
.bs-fcw-card {
  grid-template-columns: 38px 1fr auto;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  margin-bottom: 4px;
}
.bs-fcw-card-avatar {
  width: 38px;
  height: 38px;
  font-size: 0.82rem;
}
.bs-fcw-search-wrap {
  padding: 8px 10px 0;
}
.bs-fcw-search {
  padding: 7px 10px;
  font-size: 0.82rem;
}
.bs-fcw-filters {
  padding: 8px 10px;
  gap: 5px;
}
.bs-fcw-filter-tab {
  padding: 4px 9px;
  font-size: 0.68rem;
}
.bs-fcw-room-head {
  padding: 10px 12px;
}
.bs-fcw-room-avatar {
  width: 36px;
  height: 36px;
}
.bs-fcw-compose,
.bs-fcw-compose-form {
  padding: 8px 10px;
  gap: 8px;
}
.bs-fcw-compose input,
.bs-fcw-compose textarea,
#bsFcwMessageInput {
  font-size: 0.85rem;
  padding: 8px 10px;
  min-height: 36px;
}
.bs-fcw-send-btn,
.bs-fcw-compose-send,
#bsFcwSendBtn {
  min-height: 36px;
  padding: 8px 12px;
  font-size: 0.82rem;
}
.bs-fcw-homework-create-modal .bs-fcw-modal-card,
.bs-fcw-teacher-homework-create-modal .bs-fcw-modal-card {
  padding: 14px 16px;
  border-radius: 14px;
}
.bs-fcw-homework-create-modal h3,
.bs-fcw-teacher-homework-create-modal h3 {
  font-size: 1rem;
}
.bs-fcw-homework-form label,
.bs-fcw-teacher-homework-create-modal label {
  font-size: 0.82rem;
  gap: 4px;
}
.parent-main .panel,
.parent-feature-card,
.parent-transport-card,
.parent-homework-card {
  padding: 14px;
  border-radius: 14px;
}
.transport-foundation-grid article,
.transport-driver-card {
  padding: 14px;
  border-radius: 14px;
}
@media (max-width: 760px) {
  .admin-page-section table {
    min-width: 0;
  }
  .admin-module-dashboard .admin-main,
  .admin-dashboard-body .admin-main {
    padding: 10px;
  }
  .bs-fcw-body {
    grid-template-columns: 1fr;
  }
}

/* Admin module — slight readability bump (dashboard/module UI only; not login pages) */
.admin-dashboard-body {
  font-size: 15px;
}
.admin-dashboard-body .admin-main {
  font-size: 15px;
}
.admin-dashboard-body .admin-page-section {
  font-size: 15px;
}
.admin-dashboard-body .admin-teachers-search-input,
.admin-dashboard-body .admin-students-search-input,
.admin-dashboard-body .grid-form input,
.admin-dashboard-body .grid-form select,
.admin-dashboard-body .admin-form input,
.admin-dashboard-body .admin-form select,
.admin-dashboard-body .admin-form textarea {
  font-size: 15px;
}
.admin-dashboard-body th,
.admin-dashboard-body td,
.admin-dashboard-body .admin-teachers-card-empty,
.admin-dashboard-body .admin-students-card-empty,
.admin-dashboard-body .admin-parent-empty,
.admin-dashboard-body .admin-panel-title span,
.admin-dashboard-body .admin-soft-panel .admin-status-row span {
  font-size: 14px;
}
.admin-dashboard-body .admin-teacher-mini-card-details dt,
.admin-dashboard-body .admin-student-mini-card-details dt,
.admin-dashboard-body .admin-driver-mini-card-details dt,
.admin-dashboard-body .admin-parent-card small {
  font-size: 11px;
}
.admin-dashboard-body .admin-teacher-mini-card-details dd,
.admin-dashboard-body .admin-student-mini-card-details dd,
.admin-dashboard-body .admin-driver-mini-card-details dd {
  font-size: 13px;
}
.admin-dashboard-body .admin-teacher-mini-card-name,
.admin-dashboard-body .admin-student-mini-card-name {
  font-size: 18px;
}
.admin-dashboard-body #adminFeesCollectAdmissionPane .admin-collect-admission-fee-table,
.admin-dashboard-body #adminFeesCollectAdmissionPane .admin-monthly-fee-summary-card,
.admin-dashboard-body #adminFeesCollectAdmissionPane .admin-collect-admission-stat-card {
  font-size: 14px;
}
.admin-dashboard-body #adminFeesCollectAdmissionPane .admin-collect-admission-stat-card strong {
  font-size: 22px;
}
.admin-dashboard-body .admin-teacher-mini-card-photo-frame {
  position: relative;
  z-index: 2;
}

/* BrightStar — Mobile Module Drawer (Founder / Teacher / Student / Parent / Driver; phone only) */
.bs-mobile-module-drawer-backdrop,
.bs-mobile-module-drawer-close {
  display: none;
}
.bs-mobile-module-hamburger {
  display: none;
}
@media (max-width: 960px) {
  html,
  body.bs-mobile-module-drawer-enabled {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body.bs-mobile-module-drawer-open {
    overflow: hidden;
    touch-action: none;
  }
  .bs-mobile-module-hamburger {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 12px;
    border: 1px solid #dbe3ef;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
    cursor: pointer;
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
  }
  .bs-mobile-module-hamburger .bs-mobile-hamburger-lines {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 22px;
  }
  .bs-mobile-module-hamburger .bs-mobile-hamburger-lines span {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: #0f172a;
  }
  body.bs-founder-body .bs-menu-round.bs-mobile-module-hamburger,
  body.bs-founder-body #founderMobileHamburgerBtn {
    display: grid;
  }
  body.driver-dashboard-body #driverSidebarToggle.bs-mobile-module-hamburger,
  body.driver-dashboard-body .dtd-menu-toggle {
    display: grid;
  }
  .bs-mobile-module-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1185;
    background: rgba(15, 23, 42, 0.58);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }
  body.bs-mobile-module-drawer-open .bs-mobile-module-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.bs-mobile-module-drawer-enabled .bs-mobile-module-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1195;
    transform: translateX(-108%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.bs-mobile-module-drawer-open .bs-mobile-module-sidebar {
    transform: translateX(0);
  }
  .bs-mobile-module-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin: 0 8px 6px auto;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  body.bs-mobile-module-drawer-enabled.admin-dashboard-body {
    display: block;
    min-height: 100vh;
  }
  body.bs-mobile-module-drawer-enabled .admin-main,
  body.bs-mobile-module-drawer-enabled .eduteach-main,
  body.bs-mobile-module-drawer-enabled .parent-main,
  body.bs-mobile-module-drawer-enabled .driver-transport-main,
  body.bs-mobile-module-drawer-enabled .bs-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  body.bs-mobile-module-drawer-enabled.bs-founder-body .bs-founder-app {
    display: block;
  }
  body.bs-mobile-module-drawer-enabled .dash-header,
  body.bs-mobile-module-drawer-enabled .eduteach-header,
  body.bs-mobile-module-drawer-enabled .dtd-topbar,
  body.bs-mobile-module-drawer-enabled .bs-topbar {
    gap: 10px;
    flex-wrap: wrap;
    max-width: 100%;
  }
  body.bs-mobile-module-drawer-enabled .sidebar-nav a,
  body.bs-mobile-module-drawer-enabled .sidebar-nav button,
  body.bs-mobile-module-drawer-enabled .bs-side-link,
  body.bs-mobile-module-drawer-enabled .bs-side-sublink {
    min-height: 44px;
  }
  body.bs-mobile-module-drawer-enabled .panel,
  body.bs-mobile-module-drawer-enabled .admin-info-grid,
  body.bs-mobile-module-drawer-enabled .student-feature-grid,
  body.bs-mobile-module-drawer-enabled .parent-feature-grid,
  body.bs-mobile-module-drawer-enabled .dtd-summary-row {
    max-width: 100%;
    overflow-x: hidden;
  }
  body.bs-mobile-module-drawer-enabled table {
    max-width: 100%;
  }
  body.bs-mobile-module-drawer-enabled .admin-table-wrap,
  body.bs-mobile-module-drawer-enabled .tch22-table-wrap,
  body.bs-mobile-module-drawer-enabled .fd10-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}
@media (min-width: 961px) {
  .bs-mobile-module-hamburger,
  body.bs-founder-body .bs-menu-round.bs-mobile-module-hamburger {
    display: none !important;
  }
  .bs-mobile-module-drawer-backdrop,
  .bs-mobile-module-drawer-close {
    display: none !important;
  }
  body.driver-sidebar-collapsed .driver-transport-sidebar {
    transform: none;
  }
}

/* BrightStar — Mobile Drawer legacy sidebar overrides (all roles, phone/tablet <=960px) */
@media (max-width: 960px) {
  body.bs-mobile-module-drawer-enabled.admin-dashboard-body,
  body.bs-mobile-module-drawer-enabled.teacher-dashboard-body,
  body.bs-mobile-module-drawer-enabled.student-dashboard-body,
  body.bs-mobile-module-drawer-enabled.parent-dashboard-body,
  body.bs-mobile-module-drawer-enabled.driver-dashboard-body,
  body.bs-mobile-module-drawer-enabled.bs-founder-body {
    display: block !important;
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  body.bs-mobile-module-drawer-enabled .bs-mobile-module-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1195 !important;
    transform: translateX(-108%) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.bs-mobile-module-drawer-open .bs-mobile-module-sidebar {
    transform: translateX(0) !important;
  }
  body.bs-mobile-module-drawer-enabled.teacher-dashboard-body .admin-nav,
  body.bs-mobile-module-drawer-enabled.student-dashboard-body .sidebar-nav,
  body.bs-mobile-module-drawer-enabled.driver-dashboard-body .sidebar-nav,
  body.bs-mobile-module-drawer-enabled.parent-dashboard-body .parent-sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: unset !important;
    gap: 6px !important;
  }
  body.bs-mobile-module-drawer-enabled.teacher-dashboard-body .admin-sidebar,
  body.bs-mobile-module-drawer-enabled.student-dashboard-body .admin-sidebar,
  body.bs-mobile-module-drawer-enabled.parent-dashboard-body .parent-sidebar {
    position: fixed !important;
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-bottom: 0 !important;
  }
  body.bs-mobile-module-drawer-enabled.bs-founder-body .bs-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  body.bs-mobile-module-drawer-enabled.bs-founder-body .bs-founder-app {
    display: block !important;
    grid-template-columns: 1fr !important;
    min-height: 100vh;
  }
  body.bs-mobile-module-drawer-enabled.bs-founder-body .bs-main,
  body.bs-mobile-module-drawer-enabled .admin-main,
  body.bs-mobile-module-drawer-enabled .eduteach-main,
  body.bs-mobile-module-drawer-enabled .parent-main,
  body.bs-mobile-module-drawer-enabled .driver-transport-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
  }
  body.admin-dashboard-body.admin-module-dashboard {
    display: block !important;
    overflow-x: hidden !important;
    max-width: 100vw;
  }
  body.admin-dashboard-body.admin-module-dashboard .admin-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    flex: none !important;
  }
  body.admin-dashboard-body.admin-module-dashboard .admin-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(82vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1195 !important;
    transform: translateX(-108%) !important;
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  }
  body.admin-mobile-drawer-open.admin-dashboard-body.admin-module-dashboard .admin-sidebar {
    transform: translateX(0) !important;
  }
  body.bs-mobile-module-drawer-enabled .grid-form,
  body.bs-mobile-module-drawer-enabled .teacher-create-form,
  body.bs-mobile-module-drawer-enabled .teacher-grid-form,
  body.bs-mobile-module-drawer-enabled .teacher-page-layout,
  body.bs-mobile-module-drawer-enabled .admin-class-two,
  body.bs-mobile-module-drawer-enabled .admin-class-three,
  body.bs-mobile-module-drawer-enabled .admin-class-four,
  body.bs-mobile-module-drawer-enabled .admin-class-form-grid,
  body.bs-mobile-module-drawer-enabled .admin-att-two,
  body.bs-mobile-module-drawer-enabled .admin-att-three,
  body.bs-mobile-module-drawer-enabled .admin-att-four,
  body.bs-mobile-module-drawer-enabled .admin-staff-login-layout,
  body.bs-mobile-module-drawer-enabled .founder-admin-detail-content,
  body.bs-mobile-module-drawer-enabled .bs-stat-grid,
  body.bs-mobile-module-drawer-enabled .bs-lower-grid,
  body.bs-mobile-module-drawer-enabled .bs-dashboard-grid,
  body.bs-mobile-module-drawer-enabled .bs-revenue-main,
  body.admin-dashboard-body.admin-module-dashboard .admin-class-two,
  body.admin-dashboard-body.admin-module-dashboard .admin-class-three,
  body.admin-dashboard-body.admin-module-dashboard .admin-class-four,
  body.admin-dashboard-body.admin-module-dashboard .admin-class-form-grid,
  body.admin-dashboard-body.admin-module-dashboard .admin-att-two,
  body.admin-dashboard-body.admin-module-dashboard .admin-att-three,
  body.admin-dashboard-body.admin-module-dashboard .admin-att-four,
  body.admin-dashboard-body.admin-module-dashboard .admin-dashboard-metric-grid,
  body.admin-dashboard-body.admin-module-dashboard .admin-lower-grid,
  body.admin-dashboard-body.admin-module-dashboard .admin-mini-grid,
  body.admin-dashboard-body.admin-module-dashboard .teacher-create-form,
  body.admin-dashboard-body.admin-module-dashboard .admin-finance-filter-grid {
    grid-template-columns: 1fr !important;
  }
  body.bs-mobile-module-drawer-enabled .teacher-page-layout {
    display: block !important;
  }
  body.bs-mobile-module-drawer-enabled .panel,
  body.bs-mobile-module-drawer-enabled .teacher-form-card,
  body.bs-mobile-module-drawer-enabled .teacher-summary-card,
  body.bs-mobile-module-drawer-enabled .admin-soft-panel,
  body.bs-mobile-module-drawer-enabled .founder-admin-detail-box,
  body.admin-dashboard-body.admin-module-dashboard .panel,
  body.admin-dashboard-body.admin-module-dashboard .teacher-form-card,
  body.admin-dashboard-body.admin-module-dashboard .admin-soft-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.bs-mobile-module-drawer-enabled .field input,
  body.bs-mobile-module-drawer-enabled .field select,
  body.bs-mobile-module-drawer-enabled .field textarea,
  body.admin-dashboard-body.admin-module-dashboard .field input,
  body.admin-dashboard-body.admin-module-dashboard .field select,
  body.admin-dashboard-body.admin-module-dashboard .field textarea,
  body.bs-mobile-module-drawer-enabled .form-stack input,
  body.bs-mobile-module-drawer-enabled .form-stack select,
  body.bs-mobile-module-drawer-enabled .form-stack textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.bs-mobile-module-drawer-enabled .admin-table-wrap,
  body.bs-mobile-module-drawer-enabled .tch22-table-wrap,
  body.bs-mobile-module-drawer-enabled .fd10-table-wrap,
  body.bs-mobile-module-drawer-enabled .teacher-my-classes-table-wrap,
  body.bs-mobile-module-drawer-enabled .teacher-attendance-table-wrap,
  body.bs-mobile-module-drawer-enabled .parent-messages-table-wrap,
  body.admin-dashboard-body.admin-module-dashboard .admin-table-wrap,
  body.admin-dashboard-body.admin-module-dashboard .admin-rr-table-wrap,
  body.admin-dashboard-body.admin-module-dashboard .admin-assigned-school-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }
  body.bs-mobile-module-drawer-enabled .admin-page-section,
  body.bs-mobile-module-drawer-enabled .student-dashboard-section,
  body.bs-mobile-module-drawer-enabled .parent-dashboard-section,
  body.admin-dashboard-body.admin-module-dashboard .admin-page-section {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

/* Teacher Message — Attendance tab (responsive, contained in message modal) */
body.teacher-dashboard-body .bs-fcw-overlay .bs-fcw-panel {
  height: min(680px, 90vh);
  max-height: 90vh;
}
.bs-fcw-thread.bs-fcw-thread-attendance {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #f1f5f9;
}
.bs-fcw-thread.bs-fcw-thread-attendance > .bs-fcw-teacher-attendance-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  margin-top: 0;
}
.bs-fcw-teacher-attendance-panel.teacher-attendance-panel {
  margin-top: 0;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-toolbar.bs-fcw-tch-att-filters {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 12px;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-summary.bs-fcw-tch-att-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 12px;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-summary.bs-fcw-tch-att-stats div,
.bs-fcw-teacher-attendance-panel .teacher-attendance-summary.bs-fcw-tch-att-stats .bs-fcw-tch-att-stat {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions.bs-fcw-tch-att-footer {
  margin: 0;
  margin-top: 10px;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions.bs-fcw-tch-att-footer button {
  background: inherit;
  font-weight: inherit;
}
.bs-fcw-teacher-attendance-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.bs-fcw-tch-att-top {
  flex-shrink: 0;
  padding: 14px 14px 0;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-tch-att-header.teacher-attendance-title {
  margin: 0 0 12px;
}
.bs-fcw-tch-att-header.teacher-attendance-title h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.3;
}
.bs-fcw-tch-att-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-teacher-attendance-report-filters.bs-fcw-tch-att-filters {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.bs-fcw-tch-att-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: #475569;
}
.bs-fcw-tch-att-field span {
  line-height: 1.2;
}
.bs-fcw-tch-att-field select,
.bs-fcw-tch-att-field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #d8e1ee;
  padding: 10px 12px;
  font-size: 0.86rem;
  color: #0f172a;
}
.bs-fcw-tch-att-field select {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 12px;
  min-height: 44px;
  font-weight: 700;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.bs-fcw-tch-att-field input {
  border-radius: 10px;
  background: #fff;
}
.bs-fcw-room-attendance-mark #bsFcwComposeForm,
.bs-fcw-room-attendance-view #bsFcwComposeForm,
.bs-fcw-room-attendance-mode #bsFcwComposeForm,
.bs-fcw-panel.bs-fcw-attendance-room #bsFcwComposeForm,
#bsFcwComposeForm[data-fcw-attendance-mark-composer="1"] {
  display: none !important;
}
.bs-fcw-tch-att-pal-pick:not(.is-active) {
  background: #fff;
}
.bs-fcw-tch-att-field select:focus,
.bs-fcw-tch-att-field input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.bs-fcw-tch-att-filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  min-width: 0;
}
.bs-fcw-teacher-attendance-toolbar.bs-fcw-tch-att-filters .bs-fcw-tch-att-filter-actions {
  grid-column: 1 / -1;
}
.bs-fcw-tch-att-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-toolbar .bs-fcw-tch-att-btn,
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions .bs-fcw-tch-att-btn {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 800;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-toolbar .bs-fcw-tch-att-btn--ghost,
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions .bs-fcw-tch-att-btn--ghost {
  background: #fff;
  color: #0b2d75;
  border: 1px solid #d8e1ee;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions .bs-fcw-tch-att-btn--primary,
.bs-fcw-teacher-attendance-panel .teacher-attendance-toolbar .bs-fcw-tch-att-btn--primary {
  background: #0b2d75;
  color: #fff;
  border: 0;
}
.bs-fcw-tch-att-btn--primary {
  background: #0b2d75;
  color: #fff;
}
.bs-fcw-tch-att-btn--ghost {
  background: #fff;
  color: #0b2d75;
  border: 1px solid #d8e1ee;
}
.bs-fcw-tch-att-btn:hover {
  filter: brightness(0.97);
}
.bs-fcw-tch-att-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-tch-att-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 72px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  min-width: 0;
  overflow: hidden;
}
.bs-fcw-tch-att-stat small {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-fcw-tch-att-stat strong {
  color: #0b2d75;
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.1;
}
.bs-fcw-tch-att-table-region {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 14px;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: #93c5fd #eef4ff;
}
.bs-fcw-tch-att-table-region::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.bs-fcw-tch-att-table-region::-webkit-scrollbar-track {
  background: #eef4ff;
  border-radius: 999px;
}
.bs-fcw-tch-att-table-region::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #93c5fd, #60a5fa);
  border-radius: 999px;
}
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table th,
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #edf2f7;
  text-align: left;
  font-size: 0.82rem;
  vertical-align: middle;
  word-break: break-word;
}
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fbff;
  color: #0b2d75;
  font-weight: 900;
  white-space: nowrap;
}
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table tr:last-child td {
  border-bottom: 0;
}
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table select,
.bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid #d8e1ee;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  font-size: 0.82rem;
}
.bs-fcw-tch-att-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  border-top: 1px solid #e2e8f0;
  background: #fff;
  max-width: 100%;
  box-sizing: border-box;
}
.bs-fcw-tch-att-footer .bs-fcw-tch-att-btn--primary,
.bs-fcw-teacher-attendance-panel .teacher-attendance-actions .bs-fcw-tch-att-btn--primary {
  background: #0f49ff;
  color: #fff;
  border: 0;
}
.bs-fcw-teacher-attendance-save-status {
  flex: 1 1 auto;
  min-width: 0;
  color: #0b2d75;
  font-size: 0.82rem;
  font-weight: 700;
  word-break: break-word;
}
.bs-fcw-tch-att-field--search,
.bs-fcw-teacher-attendance-report-search {
  grid-column: span 2;
}
.bs-fcw-teacher-attendance-tab-list .bs-fcw-teacher-attendance-tab-head {
  margin-top: 0;
}
@media (max-width: 900px) {
  .bs-fcw-tch-att-filters {
    grid-template-columns: 1fr;
  }
  .bs-fcw-tch-att-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bs-fcw-tch-att-field--search,
  .bs-fcw-teacher-attendance-report-search {
    grid-column: span 1;
  }
  .bs-fcw-tch-att-filter-actions {
    width: 100%;
  }
  .bs-fcw-tch-att-filter-actions .bs-fcw-tch-att-btn {
    flex: 1 1 auto;
  }
}
@media (max-width: 560px) {
  .bs-fcw-tch-att-top {
    padding: 12px 12px 0;
  }
  .bs-fcw-tch-att-table-region {
    margin: 0 12px;
  }
  .bs-fcw-tch-att-footer {
    padding: 10px 12px;
  }
  .bs-fcw-tch-att-footer .bs-fcw-tch-att-btn {
    flex: 1 1 100%;
  }
  .bs-fcw-teacher-attendance-panel .bs-fcw-tch-att-table {
    min-width: 520px;
  }
}
.bs-fcw-tch-att-status-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.bs-fcw-tch-att-pick {
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.bs-fcw-tch-att-pick.is-active,
.bs-fcw-tch-att-pick[data-msg-tch-att-pick="present"].is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.bs-fcw-tch-att-pick[data-msg-tch-att-pick="absent"].is-active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.bs-fcw-tch-att-pick[data-msg-tch-att-pick="late"].is-active {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}
.bs-fcw-tch-att-pick[data-msg-tch-att-pick="excused"].is-active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.bs-fcw-tch-att-students-section {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  margin: 8px 14px 10px;
  overflow: hidden;
}
.bs-fcw-teacher-attendance-panel .teacher-attendance-summary.bs-fcw-tch-att-stats {
  flex-shrink: 0;
  margin: 0 14px 10px;
}
.bs-fcw-tch-att-students-head {
  flex-shrink: 0;
  margin: 0 0 8px;
}
.bs-fcw-tch-att-students-head h4 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 900;
  color: #0b2d75;
}
.bs-fcw-tch-att-student-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.bs-fcw-tch-att-student-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.bs-fcw-tch-att-student-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.bs-fcw-tch-att-student-card-text {
  min-width: 0;
  flex: 1 1 auto;
}
.bs-fcw-tch-att-student-grade {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #475569;
}
.bs-fcw-tch-att-student-loading,
.bs-fcw-tch-att-student-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
  padding: 18px 12px;
}
.bs-fcw-tch-att-pal-picks {
  justify-content: flex-start;
}
.bs-fcw-tch-att-pal-pick {
  min-width: 44px;
  min-height: 40px;
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.bs-fcw-tch-att-pal-pick.is-present.is-active {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.bs-fcw-tch-att-pal-pick.is-absent.is-active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.bs-fcw-tch-att-pal-pick.is-late.is-active {
  background: #d97706;
  border-color: #d97706;
  color: #fff;
}
.bs-fcw-tch-att-pal-pick.is-present:not(.is-active) {
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.35);
}
.bs-fcw-tch-att-pal-pick.is-absent:not(.is-active) {
  color: #b91c1c;
  border-color: rgba(220, 38, 38, 0.35);
}
.bs-fcw-tch-att-pal-pick.is-late:not(.is-active) {
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.35);
}

.bs-fcw-tch-att-report-list-section {
  flex: 1 1 auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  margin: 8px 14px 10px;
  overflow: hidden;
}
.bs-fcw-teacher-attendance-report-panel .teacher-attendance-summary.bs-fcw-tch-att-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bs-fcw-tch-att-report-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
}
.bs-fcw-tch-att-report-card {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}
.bs-fcw-tch-att-report-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bs-fcw-tch-att-report-card-text {
  min-width: 0;
  flex: 1 1 auto;
}
.bs-fcw-tch-att-report-badge {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.bs-fcw-tch-att-report-badge.is-present {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.35);
}
.bs-fcw-tch-att-report-badge.is-absent {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.bs-fcw-tch-att-report-badge.is-late {
  background: #ffedd5;
  color: #b45309;
  border: 1px solid rgba(217, 119, 6, 0.35);
}
.bs-fcw-tch-att-report-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
}
.bs-fcw-tch-att-report-date {
  color: #334155;
}
.bs-fcw-tch-att-report-teacher {
  color: #64748b;
}

.bs-fcw-tch-att-mark-table .bs-fcw-tch-att-student-row td {
  vertical-align: middle;
}
.bs-fcw-tch-att-photo-cell {
  width: 52px;
}
.bs-fcw-tch-att-student-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  flex-shrink: 0;
}
.bs-fcw-tch-att-student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bs-fcw-tch-att-student-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  font-weight: 900;
  color: #1d4ed8;
}
.bs-fcw-tch-att-student-cell {
  min-width: 120px;
}
.bs-fcw-tch-att-student-name {
  display: block;
  font-size: 0.92rem;
  line-height: 1.25;
}
.bs-fcw-tch-att-student-id {
  display: block;
  margin-top: 2px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
}
.bs-fcw-tch-att-grade-cell {
  font-size: 0.82rem;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}
.bs-fcw-tch-att-status-cell {
  min-width: 210px;
}
@media (max-width: 640px) {
  .bs-fcw-tch-att-mark-table {
    min-width: 0;
  }
  .bs-fcw-tch-att-mark-table thead {
    display: none;
  }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-student-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas:
      "photo student"
      "grade grade"
      "status status";
    gap: 8px 10px;
    padding: 12px 0;
    border-bottom: 1px solid #e8edf5;
  }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-student-row td {
    display: block;
    border: 0;
    padding: 0;
  }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-photo-cell { grid-area: photo; }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-student-cell { grid-area: student; }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-grade-cell { grid-area: grade; }
  .bs-fcw-tch-att-mark-table .bs-fcw-tch-att-status-cell { grid-area: status; }
}

/* BrightStar — Message Sound Setting UI */
.bs-msg-sound-cluster,
.bs-msg-sound-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.msg-ui-topbar-actions,
.msg-admin-portal-header-right,
.bs-fcw-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.bs-msg-sound-bell-btn,
.bs-msg-sound-btn {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  color: #0f172a;
  font-size: 18px;
  line-height: 1;
  position: relative;
}
.bs-msg-sound-btn {
  grid-auto-flow: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
}
.bs-msg-sound-btn-text {
  font-size: 13px;
}
.bs-msg-sound-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.bs-msg-sound-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1300;
  width: min(92vw, 280px);
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.bs-msg-sound-panel-head strong {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  color: #0f172a;
}
.bs-msg-sound-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  font-weight: 800;
  color: #334155;
}
.bs-msg-sound-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bs-msg-sound-toggle-wrap input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bs-msg-sound-toggle-ui {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  transition: background 0.2s ease;
}
.bs-msg-sound-toggle-ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}
.bs-msg-sound-toggle-wrap input:checked + .bs-msg-sound-toggle-ui {
  background: #0f49ff;
}
.bs-msg-sound-toggle-wrap input:checked + .bs-msg-sound-toggle-ui::after {
  transform: translateX(20px);
}
.bs-msg-sound-toggle-label {
  min-width: 28px;
  font-size: 12px;
  font-weight: 900;
  color: #64748b;
}
.bs-msg-sound-type-fieldset {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}
.bs-msg-sound-type-fieldset legend {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 900;
  color: #334155;
}
.bs-msg-sound-type-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  color: #0f172a;
  cursor: pointer;
}
.bs-msg-sound-type-option input {
  accent-color: #0f49ff;
}
.bs-msg-sound-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bs-msg-sound-test-btn,
.bs-msg-sound-save-btn {
  min-height: 40px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
}
.bs-msg-sound-test-btn {
  border: 1px solid #dbe3ef;
  background: #f8fafc;
  color: #0f172a;
}
.bs-msg-sound-save-btn {
  border: 0;
  background: #0f49ff;
  color: #fff;
}
@media (max-width: 640px) {
  .bs-msg-sound-btn-text {
    display: none;
  }
}

/* BrightStar — Unified Admin Message theme (all roles) + avatar photo display */
.msg-ui-contact-avatar.has-image img,
.msg-ui-bubble-avatar.has-image img,
.msg3-room-avatar-inner.has-image img,
.msg1-contact-avatar.has-image img,
.msg2-contact-avatar.has-image img,
.msg-stu-chat-avatar-inner.has-image img,
.msg-ui-profile-avatar-inner.has-image img,
.msg-admin-portal-avatar-inner.has-image img,
.bs-fcw-card-avatar.has-image img,
.bs-fcw-room-avatar .has-image img,
.bs-fcw-room-avatar-inner.has-image img,
[data-bs-msg-avatar].has-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.msg-ui-contact-avatar.has-image,
.msg-ui-bubble-avatar.has-image,
.msg3-room-avatar-inner.has-image,
.bs-fcw-card-avatar.has-image,
.bs-fcw-room-avatar-inner.has-image,
[data-bs-msg-avatar].has-image {
  overflow: hidden;
  padding: 0;
  line-height: 0;
  flex-shrink: 0;
}
.bs-fcw-card-avatar,
.bs-fcw-card-avatar.has-image,
[data-bs-msg-avatar].bs-fcw-card-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 56px;
  max-height: 56px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.bs-fcw-card-avatar.has-image img,
[data-bs-msg-avatar].bs-fcw-card-avatar.has-image img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}

/* Messenger-style compact chat list (All / Unread tabs) */
.bs-fcw-compact-chat-list {
  overflow-x: hidden;
}
.bs-fcw-compact-chat-list .bs-fcw-card {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  max-height: 72px;
  padding: 10px;
  margin-bottom: 4px;
  overflow: hidden;
}
.bs-fcw-compact-chat-list .bs-fcw-card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.bs-fcw-compact-chat-list .bs-fcw-card-top {
  gap: 6px;
}
.bs-fcw-compact-chat-list .bs-fcw-card-top strong,
.bs-fcw-compact-chat-list .bs-fcw-card-top .bs-contact-name {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bs-fcw-compact-chat-list .bs-fcw-card-top em {
  flex-shrink: 0;
}
.bs-fcw-compact-chat-list .bs-fcw-card-preview,
.bs-fcw-compact-chat-list .bs-contact-preview {
  display: block;
  margin: 0;
  font-size: 0.76rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.bs-fcw-compact-chat-list .bs-fcw-card-badges {
  display: none !important;
}
.bs-fcw-compact-chat-list .bs-fcw-card img:not([data-bs-msg-avatar-img]) {
  display: none !important;
}
.bs-fcw-compact-chat-list .bs-fcw-card-unread {
  align-self: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .bs-fcw-compact-chat-list .bs-fcw-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    min-height: 60px;
    max-height: 68px;
    padding: 8px;
  }
  .bs-fcw-compact-chat-list .bs-fcw-card-avatar,
  .bs-fcw-compact-chat-list .bs-fcw-card-avatar.has-image {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-width: 40px;
    max-height: 40px;
  }
}
.msg-admin-portal-avatar-inner,
.msg-ui-profile-avatar-inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* Full-page message UI — Admin blue neumorph for Teacher/Student/Parent/Driver */
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-topbar,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-message-topbar {
  margin: 0.85rem 1rem 0;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.92) 100%);
  box-shadow: 8px 10px 22px rgba(163, 177, 198, 0.22), -6px -6px 16px rgba(255, 255, 255, 0.96);
  padding: 14px 16px;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-stats,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-scope-panel {
  margin: 0.75rem 1rem 0;
  gap: 10px;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-stat-card,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-scope-panel article {
  border-radius: 16px;
  background: #f8fafd;
  border: 1px solid transparent;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.22), -4px -4px 10px rgba(255, 255, 255, 0.98);
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-contact-card,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-contact-card,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg2-contact-card,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-stu-chat-card {
  background: #f8fafd !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.22), -4px -4px 10px rgba(255, 255, 255, 0.98) !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-contact-card.active,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-contact-card.active,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-stu-chat-card.active {
  background: linear-gradient(90deg, #e8f2ff 0%, #f5f9ff 68%) !important;
  border-color: #b8d9ff !important;
  box-shadow: inset 3px 0 0 #0a84ff, 6px 6px 14px rgba(163, 177, 198, 0.18) !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-contact-avatar,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-contact-avatar,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-stu-chat-avatar,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg3-room-avatar {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.28) !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-filter-pill,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-stu-filter-pills button,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-admin-list-filter-row button {
  border-radius: 999px;
  border: 1px solid #dbe7fb;
  background: #fff;
  box-shadow: 4px 4px 10px rgba(163, 177, 198, 0.16), -3px -3px 8px rgba(255, 255, 255, 0.96);
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-filter-pill.is-active,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-stu-filter-pills button.active,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-admin-list-filter-row button.active {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #fff !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-bubble.is-mine,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-bubble.is-mine,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.is-mine .msg-ui-bubble {
  background: linear-gradient(135deg, #0a84ff 0%, #0066d6 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-bubble.is-theirs,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-bubble.is-theirs,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-bubble-row.is-theirs .msg-ui-bubble {
  background: #fff !important;
  border: 1px solid #e5edfb !important;
  box-shadow: 4px 4px 12px rgba(163, 177, 198, 0.14) !important;
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-compose,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-send-form,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg3-send-form {
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e5edfb;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.16);
}
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-btn-primary,
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-send-form button[type="submit"],
.msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg3-send-form button[type="submit"] {
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  color: #fff !important;
  border-radius: 12px;
}

/* Floating chat widget — Admin Message blue neumorph match (all roles) */
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-topbar {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #0a84ff 100%);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-list-pane {
  background: #f4f8fd;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-card {
  background: #f8fafd;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: 6px 6px 14px rgba(163, 177, 198, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.98);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-card:hover {
  background: #f2f6fc;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-card.is-active {
  background: linear-gradient(90deg, #e8f2ff 0%, #f5f9ff 68%);
  border-color: #b8d9ff;
  box-shadow: inset 3px 0 0 #0a84ff, 6px 6px 14px rgba(163, 177, 198, 0.16);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-filter-tab.is-active {
  background: #0a84ff;
  border-color: #0a84ff;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-card-avatar:not(.bs-fcw-card-avatar-emoji),
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-room-avatar:not(.bs-fcw-room-avatar-emoji) {
  background: linear-gradient(145deg, #64b5ff 0%, #0a84ff 100%);
  color: #fff;
  border: 2px solid #fff;
  box-shadow: 0 4px 12px rgba(10, 132, 255, 0.28);
  overflow: hidden;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-bubble-row.is-mine .bs-fcw-bubble {
  background: linear-gradient(135deg, #0a84ff 0%, #0066d6 100%);
  border-color: transparent;
  color: #fff;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-bubble-row.is-theirs .bs-fcw-bubble {
  background: #fff;
  border: 1px solid #e5edfb;
  box-shadow: 4px 4px 12px rgba(163, 177, 198, 0.12);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-compose {
  border-top: 1px solid #e5edfb;
  background: #fff;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-send-btn {
  background: #0a84ff;
  border-color: #0a84ff;
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-room-head {
  background: #fff;
  border-bottom: 1px solid #e5edfb;
  box-shadow: 0 4px 14px rgba(163, 177, 198, 0.1);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-search {
  border-radius: 999px;
  border-color: #dbe7fb;
  background: #fff;
  box-shadow: inset 2px 2px 6px rgba(163, 177, 198, 0.12);
}
.bs-fcw-overlay.bs-fcw-theme-msg-admin-match .bs-fcw-full-link {
  color: #0a84ff;
}
@media (max-width: 768px) {
  .msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg-ui-topbar,
  .msg-bs-unified-admin-theme.msg-admin-ios-neumorph-ui .msg1-message-topbar {
    margin: 0.65rem 0.75rem 0;
  }
}

/* BrightStar Mobile Message Full-Screen Single View — all roles (phone ≤960px) */
@media (max-width: 960px) {
  .message-body .msg-ui-chat-workspace,
  .message-body .msg-ui-group-workspace,
  .message-body .msg-admin-chat-workspace,
  .msg-admin-ios-neumorph-ui .msg-admin-chat-workspace {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .message-body .msg-ui-chat-list-panel,
  .message-body .msg-admin-list-panel {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .message-body .msg-ui-chat-room-panel,
  .message-body .msg-admin-room-panel,
  .message-body #msg1ConversationPanel.msg-admin-room-panel,
  .msg-admin-ios-neumorph-ui .msg-admin-room-panel,
  .msg-admin-ios-neumorph-ui #msg1ConversationPanel.msg-admin-room-panel {
    display: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .message-body .msg-ui-group-room {
    display: none !important;
  }

  .message-body.msg-ui-mobile-chat-open .msg-ui-chat-list-panel,
  .message-body.msg-ui-mobile-chat-open .msg-admin-list-panel,
  .message-body .msg-admin-chat-workspace.admin-room-open .msg-admin-list-panel {
    display: none !important;
  }

  .message-body.msg-ui-mobile-chat-open .msg-ui-chat-room-panel,
  .message-body.msg-ui-mobile-chat-open .msg-admin-room-panel,
  .message-body .msg-admin-chat-workspace.admin-room-open .msg-admin-room-panel,
  .message-body .msg-admin-chat-workspace.admin-room-open #msg1ConversationPanel,
  .msg-admin-ios-neumorph-ui .msg-admin-chat-workspace.admin-room-open .msg-admin-room-panel,
  .msg-admin-ios-neumorph-ui .msg-admin-chat-workspace.admin-room-open #msg1ConversationPanel {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100dvh - 7.5rem) !important;
    max-height: none !important;
    height: auto !important;
    flex: 1 1 auto !important;
  }

  .message-body.msg-ui-mobile-group-open .msg-ui-group-list-col {
    display: none !important;
  }

  .message-body.msg-ui-mobile-group-open .msg-ui-group-room {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    max-width: 100% !important;
    min-height: calc(100dvh - 7.5rem) !important;
  }

  .message-body.msg-ui-mobile-chat-open .msg-ui-room-back,
  .message-body.msg-ui-mobile-group-open .msg-ui-room-back,
  .message-body .msg-admin-chat-workspace.admin-room-open .msg-admin-room-back {
    display: grid !important;
    place-items: center;
    flex-shrink: 0;
  }

  .msg-admin-room-top-compact .msg-admin-room-top-left {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
  }

  .message-body .msg-admin-role-tabs,
  .message-body .msg-stu-filter-pills,
  .message-body .msg-ui-message-filter-tabs,
  .message-body .msg-ui-tab-row,
  .message-body .msg-ui-filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .message-body .msg-admin-role-tabs::-webkit-scrollbar,
  .message-body .msg-stu-filter-pills::-webkit-scrollbar {
    display: none;
  }

  .message-body #msgUiViewMessages,
  .message-body .msg-ui-shell,
  .message-body .msg-admin-portal-main,
  .message-body .msg-ui-app {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .message-body .msg-ui-compose-row,
  .message-body .msg-admin-compose-row,
  .message-body #msg1SendForm,
  .message-body .msg-admin-send-form,
  .message-body .msg-ui-group-compose {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }

  .message-body.msg-ui-mobile-chat-open .msg-ui-info-panel,
  .message-body.msg-ui-mobile-group-open .msg-ui-info-panel {
    display: none !important;
  }

  .msg-admin-ios-neumorph-ui .msg-admin-list-panel,
  .msg-admin-ios-neumorph-ui .msg-admin-room-panel {
    transform: none !important;
  }

  .msg-admin-chat-list-body .msg-admin-list-panel,
  .msg-admin-chat-list-body .msg-admin-room-panel {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 961px) {
  .message-body .msg-admin-room-back {
    display: none !important;
  }
}

@media (max-width: 960px) {
  .bs-fcw-overlay {
    padding: 0;
  }
  .bs-fcw-panel {
    width: 100%;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
  .bs-fcw-body {
    grid-template-columns: 1fr;
  }
  .bs-fcw-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .bs-fcw-filters::-webkit-scrollbar {
    display: none;
  }
  .bs-fcw-panel.bs-fcw-mobile-list .bs-fcw-room-pane {
    display: none !important;
  }
  .bs-fcw-panel.bs-fcw-mobile-room .bs-fcw-list-pane {
    display: none !important;
  }
  .bs-fcw-panel.bs-fcw-mobile-room .bs-fcw-room-pane {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    min-height: 0;
    flex: 1 1 auto;
  }
  .bs-fcw-compose {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}

/* BrightStar Direct Call Service — incoming + active call UI */
.bs-dcs-incoming {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.55);
  padding: 16px;
}
.bs-dcs-active {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  background: #f8fafc;
  padding: 0;
}
.bs-dcs-incoming[hidden],
.bs-dcs-active[hidden] {
  display: none !important;
}
.bs-dcs-incoming-card {
  width: min(100%, 420px);
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 24px 20px 20px;
  text-align: center;
}
.bs-dcs-active-card {
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  min-height: 100svh;
  max-width: none;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  padding: max(18px, env(safe-area-inset-top)) 20px 0;
  padding-bottom: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bs-dcs-incoming-type {
  margin: 0 0 12px;
  color: #0a84ff;
  font-weight: 800;
}
.bs-dcs-active-type {
  display: none !important;
}
.bs-dcs-active-head {
  flex-shrink: 0;
  text-align: center;
  padding: 0 8px 8px;
}
.bs-dcs-active-head .bs-dcs-active-avatar {
  width: 72px;
  height: 72px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0a84ff;
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
}
.bs-dcs-active-head #bsDcsActiveName {
  margin: 0;
  font-size: 1.28rem;
  font-weight: 850;
  line-height: 1.25;
  color: #0f172a;
}
.bs-dcs-active-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.bs-dcs-active-meta {
  margin: 0;
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 650;
}
.bs-dcs-active-duration {
  margin: 0;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.bs-dcs-active.is-video .bs-dcs-active-head .bs-dcs-active-avatar,
.bs-dcs-active.is-camera-on .bs-dcs-active-head .bs-dcs-active-avatar,
.bs-dcs-active.is-remote-video .bs-dcs-active-head .bs-dcs-active-avatar {
  display: none !important;
}
/* Voice-only: single centered avatar in header — hide duplicate remote stage box */
.bs-dcs-active.is-audio .bs-dcs-active-stage {
  display: none !important;
}
.bs-dcs-active.is-audio .bs-dcs-active-head {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 12px 8px 20px;
}
.bs-dcs-active.is-audio .bs-dcs-active-head .bs-dcs-active-avatar {
  width: clamp(96px, 28vw, 128px);
  height: clamp(96px, 28vw, 128px);
  margin: 0 auto 14px;
  font-size: clamp(1.4rem, 5vw, 1.8rem);
}
.bs-dcs-active.is-audio .bs-dcs-active-head #bsDcsActiveName {
  max-width: min(100%, 320px);
  overflow-wrap: anywhere;
}
.bs-dcs-active-stage {
  flex: 1 1 auto;
  margin: 8px 0 10px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-dcs-active-stage.is-video-active {
  flex: 1 1 auto;
  min-height: min(52vh, 420px);
  max-height: calc(100dvh - 210px);
  margin: 6px 0 12px;
}
.bs-dcs-remote {
  position: relative;
  width: min(100%, 400px);
  margin: 0 auto;
  min-height: min(52vh, 420px);
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #111827;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.bs-dcs-active.is-camera-on .bs-dcs-remote,
.bs-dcs-active.is-remote-video .bs-dcs-remote,
.bs-dcs-active.is-video:not(.is-audio) .bs-dcs-remote {
  min-height: min(52vh, 420px);
}
.bs-dcs-remote-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 20px;
  color: #94a3b8;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  z-index: 1;
}
.bs-dcs-active.is-video .bs-dcs-remote-placeholder,
.bs-dcs-active.is-camera-on .bs-dcs-remote-placeholder,
.bs-dcs-active.is-remote-video .bs-dcs-remote-placeholder {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #cbd5e1;
}
.bs-dcs-remote-avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0a84ff;
  color: #fff;
  font-weight: 900;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2);
}
.bs-dcs-remote-avatar img,
.bs-dcs-remote-avatar .bs-dcs-avatar-inner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.bs-dcs-remote-label {
  font-size: 0.78rem;
  font-weight: 650;
  opacity: 0.9;
}
.bs-dcs-active.is-remote-video .bs-dcs-remote-placeholder {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bs-dcs-local {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 88px;
  height: 118px;
  border-radius: 14px;
  overflow: hidden;
  background: #0f172a;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.32);
  z-index: 4;
}
.bs-dcs-incoming-avatar {
  width: 84px;
  height: 84px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0a84ff;
  color: #fff;
  font-weight: 900;
  font-size: 1.4rem;
}
.bs-dcs-incoming-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bs-dcs-incoming-meta {
  margin: 6px 0 0;
  color: #64748b;
  font-size: 0.9rem;
}
.bs-dcs-incoming-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.bs-dcs-btn {
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 800;
  cursor: pointer;
}
.bs-dcs-reject {
  background: #fee2e2;
  color: #b91c1c;
}
.bs-dcs-accept {
  background: #dcfce7;
  color: #15803d;
}
.bs-dcs-ctrl-camera.is-active .bs-dcs-ctrl-icon {
  background: linear-gradient(160deg, #4ade80 0%, #16a34a 100%);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.28);
}
.bs-dcs-ctrl-camera.is-active .bs-dcs-ctrl-icon svg {
  color: #fff;
}
.bs-dcs-ctrl-camera.is-active .bs-dcs-ctrl-label {
  color: #15803d;
}
.bs-dcs-jitsi {
  width: 100%;
  height: min(52vh, 360px);
  border: 0;
  border-radius: 16px;
  background: #0f172a;
}
.bs-dcs-controls-bar {
  flex-shrink: 0;
  margin-top: auto;
  padding: 10px 16px max(16px, env(safe-area-inset-bottom));
  background: #fff;
  border-top: 0;
  position: relative;
  z-index: 2;
}
.bs-dcs-controls {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(22px, 8vw, 36px);
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.bs-dcs-ctrl {
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #334155;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 0;
  min-width: 0;
  max-width: none;
  transition: transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
.bs-dcs-ctrl:active {
  transform: scale(0.94);
}
.bs-dcs-ctrl-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #eef2f7;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}
.bs-dcs-ctrl-icon svg {
  width: 20px;
  height: 20px;
  color: #475569;
}
.bs-dcs-ctrl-label {
  display: block;
  margin: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #64748b;
  line-height: 1.15;
}
.bs-dcs-ctrl.is-active {
  background: transparent;
  box-shadow: none;
}
.bs-dcs-ctrl.is-active .bs-dcs-ctrl-icon {
  background: linear-gradient(160deg, #60a5fa 0%, #3b82f6 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.28);
}
.bs-dcs-ctrl.is-active .bs-dcs-ctrl-icon svg {
  color: #fff;
}
.bs-dcs-ctrl.is-active .bs-dcs-ctrl-label {
  color: #2563eb;
}
.bs-dcs-ctrl-mute.is-muted .bs-dcs-ctrl-icon {
  background: #fee2e2;
  box-shadow: 0 2px 10px rgba(185, 28, 28, 0.18);
}
.bs-dcs-ctrl-mute.is-muted .bs-dcs-ctrl-icon svg {
  color: #b91c1c;
}
.bs-dcs-ctrl-mute.is-muted .bs-dcs-ctrl-label {
  color: #b91c1c;
}
.bs-dcs-ctrl.is-off {
  opacity: 0.78;
}
.bs-dcs-end {
  background: transparent;
  box-shadow: none;
}
.bs-dcs-end .bs-dcs-ctrl-icon {
  width: 54px;
  height: 54px;
  background: linear-gradient(160deg, #f87171 0%, #ef4444 55%, #dc2626 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.32);
}
.bs-dcs-end .bs-dcs-ctrl-icon svg,
.bs-dcs-end .bs-dcs-ctrl-label {
  color: #fff;
}
@media (max-width: 360px) {
  .bs-dcs-controls {
    gap: 18px;
    max-width: 280px;
  }
  .bs-dcs-ctrl-icon {
    width: 46px;
    height: 46px;
  }
  .bs-dcs-ctrl-icon svg {
    width: 18px;
    height: 18px;
  }
  .bs-dcs-end .bs-dcs-ctrl-icon {
    width: 50px;
    height: 50px;
  }
  .bs-dcs-ctrl-label {
    font-size: 0.58rem;
  }
}

/* ============================================================
   Admin Dashboard — Academic Year Total Profit / This Month Profit card UI fix
   Scoped ONLY to .admin-metric-money cards inside the top
   .admin-dashboard-metric-grid. Fixes currency value overflow,
   vertical/broken titles, and responsive font scaling.
   UI only — no Firebase/counts logic touched, other cards
   (Accounts/Students/Teachers) keep their original layout.
   ============================================================ */
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money{
  container-type:inline-size;
  /* Give the currency value its own full-width row so long
     THB amounts can never crush the title column. */
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:
    "icon title"
    "value value"
    "month month";
  column-gap:12px;
  row-gap:10px;
  align-items:center;
  overflow:hidden;
  box-sizing:border-box;
  padding:18px 14px 14px;
}
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money .admin-metric-icon{
  grid-area:icon;
  align-self:center;
}
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money small{
  grid-area:title;
  min-width:0;
  max-width:100%;
  align-self:center;
  justify-self:start;
  writing-mode:horizontal-tb; /* never render vertically */
  white-space:normal;
  word-break:keep-all;
  overflow:hidden;
  text-align:left;
  font-size:clamp(11px,5.8cqi,14px);
  line-height:1.15;
  max-height:2.4em;
}
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money strong{
  grid-area:value;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  justify-self:stretch;
  align-self:center;
  text-align:center;          /* currency value centered in the card */
  writing-mode:horizontal-tb;
  white-space:nowrap;
  word-break:keep-all;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:24px;                   /* fallback for older browsers */
  font-size:clamp(15px,11cqi,30px); /* fluid: scales with card width */
  line-height:1.15;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money .monthly-badge{
  grid-area:month;
  justify-self:center;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:calc(100% - 8px);
  min-width:0;
  margin:4px auto 0;
  padding:5px 11px;
  font-size:13px;
  line-height:1.25;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
/* Tablet/mobile — cards become full-width (single column), keep
   money values comfortably sized without overpowering the card. */
@media(max-width:760px){
  .admin-dashboard-body .admin-dashboard-metric-grid .admin-metric-card.admin-metric-money strong{
    font-size:22px;
    font-size:clamp(18px,7.5cqi,26px);
  }
}

/* ===================================================================
   Direct Chat room header avatar — fixed-size circle (FIX: oversized
   contact/school-logo image in the header top bar).
   Root cause: the inner avatar span had no fixed dimensions, so a
   photo / large school logo rendered at its natural size and blew up
   the header. The container is now a hard 44px square (phone-friendly),
   the inner span always fills it exactly, and the image covers the
   circle without stretching or overflowing. The initials/emoji
   fallback uses the exact same fixed size as a photo avatar.
   =================================================================== */
.bs-fcw-room-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  overflow: hidden;
}
.bs-fcw-room-avatar .bs-fcw-room-avatar-inner,
.bs-fcw-room-avatar .bs-fcw-room-avatar-inner.has-image,
.bs-fcw-room-avatar [data-bs-msg-avatar] {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.bs-fcw-room-avatar img,
.bs-fcw-room-avatar .bs-fcw-room-avatar-inner img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 50%;
}

/* Phone APK — video-class.html: boot hide legacy desktop OVC chrome; modern shell only */
html.bs-msg-apk-boot body.video-class-body .vr-ref-header,
html.bs-msg-apk-boot body.video-class-body header.video-class-topbar,
html.bs-msg-apk-boot body.video-class-body #vrContextStrip,
html.bs-msg-apk-boot body.video-class-body #vrMeetingFooterZone,
html.bs-msg-apk-boot body.video-class-body #vrStageOutsideActions,
html.bs-msg-apk-boot body.video-class-body #vcStatusCard,
html.bs-msg-apk-boot body.video-class-body #vrAccessDeniedPanel {
  display: none !important;
}
html.bs-msg-apk-boot body.video-class-body #bsOvcClassroomShell {
  display: flex !important;
  flex-direction: column;
  min-height: 100dvh;
}


/* BrightStar T3 Phone OVC protected room stability fix
   - Show owner Protected Room content inside the phone HOST card.
   - Hide the old embedded desktop classroom area on Phone APK to remove the broken/loading view.
   - Prevent Protected Room flicker while live state is refreshing. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-main-stage,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-main-stage-legacy-mount,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-legacy-classroom-mount,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #vrClassroomSection,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #vcRoomBox,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .video-room-embed-shell {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-teaching-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #020617 !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel[hidden] {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileAvatarWrap,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileCameraOff,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileLiveHint {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-pdf-wrap],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen-wrap],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-whiteboard-wrap] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel iframe,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel canvas {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  display: block !important;
  object-fit: contain !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-apk-ovc-teaching-panel [hidden] {
  display: none !important;
}

/* Broader Phone OVC selector fallback when APK mode class is not present yet. */
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-main-stage,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-main-stage-legacy-mount,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-legacy-classroom-mount,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #vrClassroomSection,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #vcRoomBox,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .video-room-embed-shell {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-teaching-panel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel[hidden] {
  display: none !important;
}
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileAvatarWrap,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileCameraOff,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileLiveHint {
  display: none !important;
}


/* BrightStar T5 Phone OVC mic/camera one-tap state colors */
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn.is-active .bs-ovc-control-icon,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn.is-active .bs-ovc-control-icon {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #22c55e !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.28) !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn.is-muted .bs-ovc-control-icon,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn.is-muted .bs-ovc-control-icon {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #ef4444 !important;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22) !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn.is-loading .bs-ovc-control-icon,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn.is-loading .bs-ovc-control-icon {
  opacity: 0.72 !important;
}

/* BrightStar T6 Phone OVC role-consistent member cards + local/remote preview */
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile [data-bs-covc-agora-remote-video],
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-agora-participant-remote-video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-agora-self-preview-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile [data-bs-covc-agora-remote-video] video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-agora-participant-remote-video video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-agora-self-preview-wrap video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-member-self-preview-video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile.is-camera-on .bs-ovc-participant-tile-avatar {
  z-index: 0;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile.is-camera-on [data-bs-covc-preview-wrap]:not([hidden]) ~ .bs-ovc-participant-tile-avatar,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile.is-camera-on [data-bs-covc-agora-remote-video]:not([hidden]) ~ .bs-ovc-participant-tile-avatar {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-participant-tile-overlay {
  z-index: 3 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn.is-active .bs-ovc-control-icon,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn.is-active .bs-ovc-control-icon {
  background: #dcfce7 !important;
  color: #047857 !important;
  border-color: #22c55e !important;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.28) !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberMicBtn.is-muted .bs-ovc-control-icon,
body.bs-msg-apk-mode.bs-ovc-ui1-shell .bs-ovc-bottom-toolbar-zone #bsOvcMemberCameraBtn.is-muted .bs-ovc-control-icon {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #ef4444 !important;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.22) !important;
}

/* BrightStar T7 Phone OVC UI refinement V16: landscape zoom + compact info card only */
body.bs-ovc-ui1-shell .bs-ovc-status-row {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 55%, #ecfdf5 100%);
  border: 1px solid rgba(16, 185, 129, 0.24);
  box-shadow: 0 10px 26px rgba(16, 185, 129, 0.13);
}
body.bs-ovc-ui1-shell .bs-ovc-status-timer {
  color: #065f46;
}
body.bs-ovc-ui1-shell .bs-ovc-phone-zoom-chip {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-size: 1rem !important;
  box-shadow: 0 8px 18px rgba(5, 150, 105, 0.22);
}
body.bs-ovc-ui1-shell .bs-ovc-lesson-card {
  background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 42%, #eff6ff 100%);
  border: 1px solid rgba(16, 185, 129, 0.18);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times > div {
  min-width: 0;
  padding: 8px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times > div:nth-child(1) {
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times > div:nth-child(2) {
  background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times > div:nth-child(3) {
  background: linear-gradient(135deg, #fef3c7 0%, #fff7ed 100%);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times > div:nth-child(4) {
  background: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 100%);
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times dt {
  font-size: 0.52rem;
  letter-spacing: 0.035em;
  color: #64748b;
}
body.bs-ovc-ui1-shell .bs-ovc-phone-profile-times dd {
  margin-top: 2px;
  font-size: 0.66rem;
  line-height: 1.2;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.bs-ovc-ui1-shell .bs-ovc-phone-landscape-close {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: 12px;
  z-index: 10001;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.88);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.28);
}
body.bs-phone-ovc-landscape-zoom .bs-ovc-phone-landscape-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage {
  position: fixed !important;
  z-index: 10000 !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 8px !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  background: #020617 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage #bsOvcVideoStage,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage #bsOvcHostTile,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage #bsOvcHostTileMedia,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage #vcRoomBox,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage .video-room-embed-shell,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage .vr-step1-lesson-panel,
body.bs-phone-ovc-landscape-zoom .bs-ovc-main-stage .vr-stage3a-board-grid {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  border-radius: 0 !important;
}
body.bs-phone-ovc-landscape-zoom .bs-ovc-bottom-toolbar-zone,
body.bs-phone-ovc-landscape-zoom .bs-ovc-header-card,
body.bs-phone-ovc-landscape-zoom .bs-ovc-status-row,
body.bs-phone-ovc-landscape-zoom .bs-ovc-lesson-card-zone,
body.bs-phone-ovc-landscape-zoom .bs-ovc-participant-grid-card {
  visibility: hidden !important;
}

/* BrightStar T8 Admin-only Phone OVC final fix: landscape zoom targets the Host/Protected Room card, not the old hidden desktop stage. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom {
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsOvcHostTile,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsOvcHostTile {
  position: fixed !important;
  z-index: 10000 !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsOvcHostTileMedia {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: block !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-header-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-status-row,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-participant-grid-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-lesson-card-zone,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-bottom-toolbar-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-header-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-status-row,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-participant-grid-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-lesson-card-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-bottom-toolbar-zone {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-phone-landscape-close,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom .bs-ovc-phone-landscape-close {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* BrightStar T12 Admin Phone OVC normal-landscape + host card / protected share display fix */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape {
  overflow: auto !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape #bsOvcHostTile,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape #bsOvcHostTile {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  border-radius: 22px !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-header-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-status-row,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-participant-grid-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-lesson-card-zone,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-bottom-toolbar-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-header-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-status-row,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-participant-grid-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-lesson-card-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-admin-normal-landscape .bs-ovc-bottom-toolbar-zone {
  visibility: visible !important;
  pointer-events: auto !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-grid-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-grid-card {
  max-height: 260px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-tile,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-tile {
  min-width: 0 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-host-badge,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-participant-host-badge {
  align-self: flex-start;
  display: inline-flex;
  margin-bottom: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: 0 6px 14px rgba(14,165,233,.22);
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-phone-zoom-chip,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-phone-zoom-chip {
  font-weight: 900 !important;
}



/* BrightStar T13 Phone OVC Protected Room Landscape Fullscreen + Host Cards V23 */
/* Scope: Phone APK OVC only. This does not touch Message APK chat UI/core. */

body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-phone-protected-zoom-chip,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-ovc-phone-protected-zoom-chip {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 30px rgba(16, 185, 129, 0.28) !important;
}

/* Phone member cards: 3 per row with scrolling when many join members exist */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner.bs-phone-ovc-card-scroll-grid-v23,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner.bs-phone-ovc-card-scroll-grid-v23 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-height: 228px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  -webkit-overflow-scrolling: touch !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner.bs-phone-ovc-card-scroll-grid-v23 .bs-ovc-participant-tile,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcParticipantGridInner.bs-phone-ovc-card-scroll-grid-v23 .bs-ovc-participant-tile {
  min-width: 0 !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
}

/* Protected room content should be the content shown in the main host stage */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 {
  background: #f8fafc !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 iframe,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 canvas,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 [data-bs-apk-ovc-teaching-screen],
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 iframe,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 canvas,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v23 [data-bs-apk-ovc-teaching-screen] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: contain !important;
  background: #f8fafc !important;
}

/* Fullscreen/landscape mode: only the Owner shared Protected Room becomes fullscreen. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen {
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsOvcHostTileMedia {
  position: fixed !important;
  z-index: 10000 !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  background: #020617 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel .bs-apk-ovc-protected-content-v23,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel .bs-apk-ovc-protected-content-v23 {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f8fafc !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-phone-landscape-close,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-phone-landscape-close {
  display: inline-flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10002 !important;
}

/* Hide non-protected room UI while protected content is fullscreen. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-header-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-status-row,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-participant-grid-card,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-lesson-card-zone,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-bottom-toolbar-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-header-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-status-row,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-participant-grid-card,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-lesson-card-zone,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen .bs-ovc-bottom-toolbar-zone {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (orientation: landscape) {
  body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsOvcHostTileMedia,
  body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsOvcHostTileMedia {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }
}



/* BrightStar T14 V25: Phone APK Protected Room is separate from Host camera card. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 {
  background: #f8fafc !important;
  z-index: 9 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 iframe,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 canvas,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 [data-bs-apk-ovc-teaching-screen],
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 iframe,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 canvas,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 [data-bs-apk-ovc-teaching-screen] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: contain !important;
  background: #f8fafc !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 {
  position: fixed !important;
  z-index: 10000 !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
@media (orientation: landscape) {
  body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25,
  body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }
}

/* BrightStar T14 V26: Phone APK Admin Protected Room wins over top Host camera. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsOvcHostTileMedia {
  position: relative !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > [data-bs-covc-host-remote-video],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > [data-bs-covc-host-remote-video],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > .bs-ovc-agora-host-remote-video,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > .bs-ovc-agora-host-remote-video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > [data-bs-covc-host-video-placeholder],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia > [data-bs-covc-host-video-placeholder] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-stage-v25 {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel[hidden],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel[hidden] {
  display: none !important;
}


/* BrightStar T17 Admin Phone APK OVC Zoom Only Final Patch V28
   Scope: Admin Phone APK protected zoom only. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-phone-admin-zoom-chip-v28,
body.bs-ovc-ui1-shell.vr-ovc-phone-room .bs-phone-admin-zoom-chip-v28 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  box-shadow: 0 16px 34px rgba(5, 150, 105, .28) !important;
  border: 0 !important;
}
#bsPhoneAdminProtectedZoomOverlay.bs-phone-admin-protected-zoom-overlay-v28 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  background: #020617 !important;
  overflow: hidden !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  touch-action: none !important;
}
#bsPhoneAdminProtectedZoomOverlay[hidden] { display: none !important; }
#bsPhoneAdminProtectedZoomContent.bs-phone-admin-protected-zoom-content-v28 {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#bsPhoneAdminProtectedZoomContent .bs-phone-admin-protected-zoom-panel-v28,
#bsPhoneAdminProtectedZoomContent .bs-phone-admin-protected-zoom-panel-v28.bs-apk-ovc-teaching-panel,
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  z-index: 1 !important;
}
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel > *,
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel iframe,
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel canvas,
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap],
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap],
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap],
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #f8fafc !important;
}
#bsPhoneAdminProtectedZoomClose.bs-phone-admin-protected-zoom-close-v28 {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  z-index: 2147483002 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #fff !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35) !important;
}
body.bs-phone-admin-protected-zoom-active-v28 {
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-phone-admin-protected-zoom-active-v28 .bs-ovc-header-card,
body.bs-phone-admin-protected-zoom-active-v28 .bs-ovc-status-row,
body.bs-phone-admin-protected-zoom-active-v28 .bs-ovc-participant-grid-card,
body.bs-phone-admin-protected-zoom-active-v28 .bs-ovc-lesson-card-zone,
body.bs-phone-admin-protected-zoom-active-v28 .bs-ovc-bottom-toolbar-zone {
  pointer-events: none !important;
}
@media (orientation: landscape) {
  #bsPhoneAdminProtectedZoomContent.bs-phone-admin-protected-zoom-content-v28 {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }
}

/* BrightStar T21 Admin Phone APK Protected Zoom White/Blank Guard V33
   Scope: Admin Phone APK protected zoom display stability only. */
body.bs-phone-admin-protected-zoom-active-v28,
html:has(body.bs-phone-admin-protected-zoom-active-v28) {
  overflow: hidden !important;
  background: #020617 !important;
}
#bsPhoneAdminProtectedZoomOverlay.bs-phone-admin-protected-zoom-overlay-v28 {
  background: #020617 !important;
}
#bsPhoneAdminProtectedZoomContent.bs-phone-admin-protected-zoom-content-v28 {
  background: #ffffff !important;
  isolation: isolate !important;
}
#bsPhoneAdminProtectedZoomContent .bs-phone-admin-protected-zoom-stable-v33,
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel.bs-phone-admin-protected-zoom-stable-v33 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
#bsPhoneAdminProtectedZoomContent .bs-phone-admin-protected-zoom-wrap-stable-v33,
#bsPhoneAdminProtectedZoomContent [data-bs-apk-ovc-teaching-whiteboard-wrap],
#bsPhoneAdminProtectedZoomContent [data-bs-apk-ovc-teaching-pdf-wrap],
#bsPhoneAdminProtectedZoomContent [data-bs-apk-ovc-teaching-screen-wrap] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
}
#bsPhoneAdminProtectedZoomContent canvas,
#bsPhoneAdminProtectedZoomContent iframe,
#bsPhoneAdminProtectedZoomContent object,
#bsPhoneAdminProtectedZoomContent embed,
#bsPhoneAdminProtectedZoomContent img,
#bsPhoneAdminProtectedZoomContent video {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  background: #ffffff !important;
}

/* BrightStar T18: Phone APK Protected Room board frame UI (visual only, no content inset). */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTile,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTile {
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia {
  padding: 0 !important;
  border-radius: 18px !important;
  border: 3px solid #0d9488 !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 14px 32px rgba(5, 150, 105, 0.22),
    0 4px 12px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-board-frame,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-board-frame {
  border-radius: 15px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.12) !important;
  overflow: hidden !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-board-frame [data-bs-apk-ovc-whiteboard-owner-cursor],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active #bsApkOvcTeachingPanel.bs-apk-ovc-protected-board-frame [data-bs-apk-ovc-whiteboard-owner-cursor] {
  z-index: 12 !important;
  pointer-events: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-landscape-zoom.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia {
  padding: 0 !important;
  border-radius: 14px !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-phone-ovc-protected-landscape-fullscreen.bs-apk-ovc-protected-host-active #bsOvcHostTileMedia {
  padding: 0 !important;
  border-radius: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}
#bsPhoneAdminProtectedZoomContent #bsApkOvcTeachingPanel.bs-apk-ovc-protected-board-frame {
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 3px #0d9488 !important;
  background: #ffffff !important;
}

/* BrightStar T22 Phone APK Owner screen share video render — white stage, not black placeholder */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active.bs-apk-ovc-screen-share-active .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-protected-host-active.bs-apk-ovc-screen-share-active .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]) {
  background: #ffffff !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active .bs-apk-ovc-teaching-panel [data-bs-apk-ovc-teaching-screen],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active video[data-bs-apk-ovc-teaching-screen],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active video[data-bs-apk-ovc-teaching-screen] {
  background: #ffffff !important;
  object-fit: contain !important;
}
#bsPhoneAdminProtectedZoomContent.bs-apk-ovc-screen-share-active [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
#bsPhoneAdminProtectedZoomContent.bs-apk-ovc-screen-share-active [data-bs-apk-ovc-teaching-screen],
#bsPhoneAdminProtectedZoomContent.bs-apk-ovc-screen-share-active video[data-bs-apk-ovc-teaching-screen] {
  background: #ffffff !important;
}
#bsPhoneAdminProtectedZoomContent video[data-bs-apk-ovc-teaching-screen] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* BrightStar T34 Student Phone APK OVC Protected Whiteboard Landscape Fullscreen V34
   Scope: Student Phone APK protected-room landscape zoom only. */
#bsPhoneStudentProtectedZoomOverlay.bs-phone-student-protected-zoom-overlay-v34 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482800 !important;
  background: #020617 !important;
  overflow: hidden !important;
  display: block !important;
  width: 100vw !important;
  height: 100vh !important;
  touch-action: none !important;
}
#bsPhoneStudentProtectedZoomOverlay[hidden] { display: none !important; }
#bsPhoneStudentProtectedZoomContent.bs-phone-student-protected-zoom-content-v34 {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  width: 100vh !important;
  height: 100vw !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  transform-origin: center center !important;
  background: #f8fafc !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#bsPhoneStudentProtectedZoomContent .bs-phone-student-protected-zoom-panel-v34,
#bsPhoneStudentProtectedZoomContent .bs-phone-student-protected-zoom-panel-v34.bs-apk-ovc-teaching-panel,
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  border-radius: 0 !important;
  transform: none !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  z-index: 1 !important;
}
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel > *,
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel iframe,
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel canvas,
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap],
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap],
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap],
#bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen] {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  background: #f8fafc !important;
}
#bsPhoneStudentProtectedZoomClose.bs-phone-student-protected-zoom-close-v34 {
  position: fixed !important;
  top: max(12px, env(safe-area-inset-top)) !important;
  right: max(12px, env(safe-area-inset-right)) !important;
  z-index: 2147482802 !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(15, 23, 42, .92) !important;
  color: #fff !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35) !important;
}
body.bs-phone-student-protected-zoom-active-v34 {
  overflow: hidden !important;
  background: #020617 !important;
}
body.bs-phone-student-protected-zoom-active-v34 .bs-ovc-header-card,
body.bs-phone-student-protected-zoom-active-v34 .bs-ovc-status-row,
body.bs-phone-student-protected-zoom-active-v34 .bs-ovc-participant-grid-card,
body.bs-phone-student-protected-zoom-active-v34 .bs-ovc-lesson-card-zone,
body.bs-phone-student-protected-zoom-active-v34 .bs-ovc-bottom-toolbar-zone {
  pointer-events: none !important;
}
@media (orientation: landscape) {
  #bsPhoneStudentProtectedZoomContent.bs-phone-student-protected-zoom-content-v34 {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
  }
}

/* BrightStar T35 Phone APK join-member protected room PDF/whiteboard mode layering */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap]:not([hidden]) {
  z-index: 4 !important;
  display: block !important;
  visibility: visible !important;
  background: #f8fafc !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-whiteboard-wrap]:not([hidden]) {
  z-index: 3 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap] iframe.bs-apk-ovc-teaching-pdf,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-pdf-wrap] iframe.bs-apk-ovc-teaching-pdf {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border: 0 !important;
  display: block !important;
  background: #f8fafc !important;
}

/* BrightStar T36 Phone APK join-member protected room screen-share layering */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]) {
  z-index: 5 !important;
  display: block !important;
  visibility: visible !important;
  background: #ffffff !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]) video,
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]) video,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen]:not([hidden]) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  background: #ffffff !important;
}
#bsPhoneStudentProtectedZoomContent [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
#bsPhoneStudentProtectedZoomContent [data-bs-apk-ovc-teaching-screen]:not([hidden]),
#bsPhoneStudentProtectedZoomContent video[data-bs-apk-ovc-teaching-screen]:not([hidden]) {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
  visibility: visible !important;
  object-fit: contain !important;
  background: #ffffff !important;
}
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent,
#bsPhoneStudentProtectedZoomContent.bs-apk-ovc-screen-share-zoom-active {
  background: #000000 !important;
}
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent #bsApkOvcTeachingPanel,
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent .bs-phone-student-protected-zoom-panel-v34 {
  background: #000000 !important;
}
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent [data-bs-apk-ovc-teaching-screen]:not([hidden]),
body.bs-phone-student-protected-zoom-active-v34.bs-apk-ovc-screen-share-active #bsPhoneStudentProtectedZoomContent video[data-bs-apk-ovc-teaching-screen]:not([hidden]) {
  background: #000000 !important;
}

#bsPhoneStudentProtectedZoomContent [id^="agora-video-player"] button,
#bsPhoneStudentProtectedZoomContent .agora_video_player button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
#bsPhoneStudentProtectedZoomContent [id^="agora-video-player"],
#bsPhoneStudentProtectedZoomContent .agora_video_player {
  background: transparent !important;
}
#bsPhoneStudentProtectedZoomContent [id^="agora-video-player"] video,
#bsPhoneStudentProtectedZoomContent .agora_video_player video,
#bsPhoneStudentProtectedZoomContent video[data-bs-apk-ovc-teaching-screen] {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
  -webkit-playsinline: true !important;
}

#bsApkOvcTeachingPanel [id^="agora-video-player"],
#bsApkOvcTeachingPanel .agora_video_player,
#bsPhoneStudentProtectedZoomContent [id^="agora-video-player"],
#bsPhoneStudentProtectedZoomContent .agora_video_player {
  background: transparent !important;
}
#bsApkOvcTeachingPanel [id^="agora-video-player"] video,
#bsApkOvcTeachingPanel .agora_video_player video,
#bsPhoneStudentProtectedZoomContent [id^="agora-video-player"] video,
#bsPhoneStudentProtectedZoomContent .agora_video_player video {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
  -webkit-playsinline: true !important;
}

/* BrightStar T52 OVC Participant Camera Tiles — host/member tile video visibility */
body.bs-ovc-ui1-shell .bs-ovc-host-tile-media [data-bs-covc-host-remote-video],
body.bs-ovc-ui1-shell .bs-ovc-participant-tile [data-bs-covc-agora-remote-video] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile-media [data-bs-covc-host-remote-video] video,
body.bs-ovc-ui1-shell .bs-ovc-participant-tile [data-bs-covc-agora-remote-video] video,
body.bs-ovc-ui1-shell .bs-ovc-participant-tile .bs-ovc-agora-participant-remote-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
body.bs-ovc-ui1-shell .bs-ovc-host-tile.is-camera-on #bsOvcHostTileAvatarWrap,
body.bs-ovc-ui1-shell .bs-ovc-host-tile.is-camera-on .bs-ovc-host-tile-avatar-wrap,
body.bs-ovc-ui1-shell .bs-ovc-host-tile[data-ovc-host-live="1"] #bsOvcHostTileAvatarWrap,
body.bs-ovc-ui1-shell .bs-ovc-host-tile-media[data-host-video-live="1"] #bsOvcHostTileAvatarWrap,
body.bs-ovc-ui1-shell .bs-ovc-host-tile.is-camera-on #bsOvcHostTileAvatarWrap[hidden],
body.bs-ovc-ui1-shell .bs-ovc-participant-tile.is-camera-on .bs-ovc-participant-tile-avatar[hidden] {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room:not(.bs-apk-ovc-protected-host-active):not(.bs-apk-ovc-screen-share-active) #bsOvcHostTileMedia > [data-bs-covc-host-remote-video],
body.bs-ovc-ui1-shell.vr-ovc-phone-room:not(.bs-apk-ovc-protected-host-active):not(.bs-apk-ovc-screen-share-active) #bsOvcHostTileMedia > [data-bs-covc-host-remote-video] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* BrightStar T51 Student Phone APK OVC — Screen Share ONLY (apply on T50 whiteboard base) */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia > [data-bs-covc-host-remote-video],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia > [data-bs-covc-host-remote-video],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia > [data-bs-covc-host-video-placeholder],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia > [data-bs-covc-host-video-placeholder],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileAvatarWrap,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileAvatarWrap,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia [id^="agora-video-player"],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsOvcHostTileMedia [id^="agora-video-player"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]),
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap]:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [id^="agora-video-player"],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [id^="agora-video-player"],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel .agora_video_player,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel .agora_video_player {
  background: transparent !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [id^="agora-video-player"] button,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel [id^="agora-video-player"] button,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel .agora_video_player button,
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel .agora_video_player button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel video[data-bs-apk-ovc-teaching-screen],
body.bs-ovc-ui1-shell.vr-ovc-phone-room.bs-apk-ovc-screen-share-active #bsApkOvcTeachingPanel video[data-bs-apk-ovc-teaching-screen] {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #000 !important;
  -webkit-playsinline: true !important;
}

/* BrightStar Phone OVC Join Member — compact status row only (V1.0.1 correction)
   Keeps logo/header + lesson detail card visible. Removes only the large Meeting Active panel.
   Scope: Phone APK join member only. Does not affect phone owner/admin or computer OVC. */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-shell-scroll {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcHeaderZone {
  order: 1;
  margin-bottom: 8px;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcShellMiniBrand {
  display: flex !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-status-row,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcStatusRow {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 0;
  margin-bottom: 8px;
  padding: 6px 10px;
  min-height: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(148, 163, 184, 0.22) !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcVideoStage {
  order: 3;
  margin-bottom: 8px;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcMainStageZone {
  order: 4;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcLessonCardZone {
  order: 5;
  display: block !important;
  margin-bottom: 12px;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcShellStatusNotice {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcShellStatusChips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex: 0 0 auto;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcShellTimer {
  font-size: 0.86rem;
  font-weight: 800;
  color: #0f172a;
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcShellMeetingActive {
  display: inline-flex !important;
  padding: 3px 8px;
  font-size: 0.6rem;
  font-weight: 700;
  white-space: nowrap;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-phone-zoom-chip,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-phone-student-zoom-chip-v34 {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: rgba(241, 245, 249, 0.95) !important;
  color: #047857 !important;
  border: 1px solid rgba(16, 185, 129, 0.28) !important;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-host-subtitle {
  font-size: 0.72rem;
  line-height: 1.3;
}

/* Phone Join Member — Protected Room / Host / Member separation (V1.0.1) */
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcVideoStage.bs-ovc-phone-member-separated-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone {
  position: relative;
  width: 100%;
  min-height: clamp(180px, 32vh, 280px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%);
  border: 2px solid #0f766e;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.14);
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone #bsApkOvcTeachingPanel {
  position: absolute !important;
  inset: 0 !important;
  z-index: 7 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  background: #020617 !important;
  box-shadow: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone #bsApkOvcTeachingPanel[hidden] {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomPlaceholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: #0f172a;
  z-index: 1;
  pointer-events: none;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone.bs-protected-room-active #bsOvcProtectedRoomPlaceholder {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-protected-room-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: 1.35rem;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-protected-room-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-protected-room-hint {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcHostTile {
  margin-bottom: 0;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcHostTileMedia {
  min-height: 120px;
  max-height: 160px;
  aspect-ratio: 16 / 9;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcHostTileMedia #bsApkOvcTeachingPanel {
  display: none !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-participant-tile-role {
  display: block;
  margin-top: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cbd5e1;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone.bs-protected-room-active #bsApkOvcTeachingPanel,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone.bs-protected-room-active #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen-wrap],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone.bs-protected-room-active #bsApkOvcTeachingPanel [data-bs-apk-ovc-teaching-screen],
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcProtectedRoomZone.bs-protected-room-active #bsApkOvcTeachingPanel video[data-bs-apk-ovc-teaching-screen] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room.bs-apk-ovc-screen-share-active #bsOvcProtectedRoomZone {
  background: #020617 !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room .bs-ovc-participant-grid-inner,
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room #bsOvcParticipantGridInner {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
body.bs-msg-apk-mode.bs-ovc-ui1-shell.vr-ovc-member-room.bs-phone-student-protected-zoom-active-v34 #bsPhoneStudentProtectedZoomOverlay {
  z-index: 10050 !important;
}