/* Component styles from the supplied reference APK, retaining source order. */
.reference-ui .avatar {
width:46px;height:46px;border-radius:50%;background:#e2f0ff;display:grid;place-items:center;flex-shrink:0;overflow:hidden;color:#1767ef
}
.reference-ui .avatar.icon-avatar {
background:#edf4ff;color:#1a6fdf
}
.reference-ui .avatar img {
width:100%;height:100%;object-fit:cover
}
.reference-ui .card {
padding:16px;background:white;border-radius:18px;border:1.5px solid #e2e8f0;margin:0 0 12px;box-shadow:0 3px 14px rgba(18,52,94,.04)
}
.reference-ui .news-card {
padding:16px;margin-bottom:12px
}
.reference-ui .news-header-row {
display:flex;gap:10px;align-items:center;width:100%
}
.reference-ui .news-author-info {
flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px
}
.reference-ui .news-author-name {
display:block;font-size:14px;font-weight:700;color:#142237;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2
}
.reference-ui .news-author-sub {
display:block;color:#7d8da6;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2
}
.reference-ui .news-text {
margin:10px 0;line-height:1.5;color:#21334c;font-size:13.5px
}
.reference-ui .news-actions {
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid #f0f4f9;box-sizing:border-box;width:100%
}
.reference-ui .news-action-btn {
display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#5a7391;padding:8px 4px;border-radius:10px;background:#f3f7fd;width:100%;box-sizing:border-box;white-space:nowrap
}
.reference-ui .news-action-btn:active {
transform:scale(.96)
}
.reference-ui .news-action-btn.liked {
color:#e63956;background:#ffeef1
}
.reference-ui .news-action-btn svg {
width:16px;height:16px
}
.reference-ui .msg .avatar {
width:34px;height:34px;flex-shrink:0
}
.reference-ui .card {
border:1px solid #fff;background:linear-gradient(135deg,#ffffffc9,#ffffff66);box-shadow:0 7px 24px #487fb00b;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.reference-ui .card {
border-radius:24px
}
.reference-ui .nav {
background:#ffffffb8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid #ffffff;box-shadow:0 -6px 28px #32598a09;border-radius:25px 25px 0 0
}
.reference-ui .nav .plus {
background:linear-gradient(140deg,#37bbff,#1364f4);box-shadow:0 0 0 6px #ffffffc9,0 8px 24px #1779ff45
}
.reference-ui .nav .active .nav-icon-wrap {
animation:iconPop .38s ease
}
.reference-ui .screen-in main>.card {
animation:pageIn .45s both
}
.reference-ui .lesson-hero {
display:block!important;width:100%!important;text-align:left;isolation:isolate;padding:16px 18px!important;min-height:165px;border-radius:20px;margin-bottom:12px!important;background:linear-gradient(135deg,#0e3d8c 0%,#175ecf 60%,#1e70e9 100%)!important;border:1px solid rgba(255,255,255,.22);box-shadow:0 8px 24px rgba(14,61,140,.22);color:#fff!important;box-sizing:border-box!important
}
.reference-ui .lesson-hero>*:not(.subject-art) {
position:relative;z-index:1
}
.reference-ui .lesson-hero:after {
z-index:0
}
.reference-ui .subject-art {
position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0
}
.reference-ui .lesson-top {
display:flex;align-items:center;justify-content:space-between;gap:8px
}
.reference-ui .live-label {
display:flex;align-items:center;gap:7px;font-size:12px;color:#ecf6ff
}
.reference-ui .live-label i {
width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px #ffffff12
}
.reference-ui .lesson-hero h1 {
font-size:27px;letter-spacing:-.6px;margin:8px 0 10px;line-height:1.2
}
.reference-ui .lesson-location {
display:flex;gap:8px;align-items:center
}
.reference-ui .lesson-location>span {
display:flex;align-items:center;gap:5px;font-size:12px;padding:4px 8px;border-radius:8px;background:#103caa35;border:1px solid #ffffff28
}
.reference-ui .lesson-location svg {
width:13px;height:13px
}
.reference-ui .lesson-bottom {
display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.25)
}
.reference-ui .lesson-bottom>span:first-child {
display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600
}
.reference-ui .lesson-bottom svg {
width:16px;height:16px
}
.reference-ui .lesson-arrow {
display:grid;place-items:center;width:32px;height:32px;background:#ffffff;color:#0d47a1;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,0.22);flex-shrink:0
}
.reference-ui .lesson-next {
position:relative;isolation:isolate;overflow:hidden;align-items:center;display:flex;gap:12px!important;padding:14px 16px!important;border-radius:20px;margin-bottom:12px!important;background:#ffffff;border:1px solid #e2ecf8;box-shadow:0 3px 14px rgba(22,60,110,.03);color:#142237;box-sizing:border-box!important
}
.reference-ui .next-symbol {
position:relative;z-index:1;width:44px!important;height:44px!important;border:none;border-radius:13px!important;display:grid!important;place-items:center!important;align-self:center!important;background:#eef5ff;color:#1767ef;flex-shrink:0!important;margin:0!important
}
.reference-ui .next-symbol svg {
width:22px;height:22px
}
.reference-ui .next-copy {
position:relative;z-index:1;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;align-self:center!important;gap:3px!important;color:#142237;margin:0!important;padding:0!important
}
.reference-ui .next-badge-row {
display:flex;align-items:center;gap:5px!important;line-height:1;margin:0!important;padding:0!important
}
.reference-ui .next-badge {
font-size:11px!important;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#1767ef;line-height:1!important
}
.reference-ui .next-period {
font-size:11px;color:#758da8;line-height:1!important
}
.reference-ui .next-title {
font-size:16px;font-weight:700;color:#142237;line-height:1.2;margin:0!important;padding:0!important
}
.reference-ui .next-info-row {
display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px!important;color:#637c9a;margin:0!important;padding:0!important;line-height:1.3!important
}
.reference-ui .next-info-item {
display:inline-flex!important;align-items:center!important;gap:4px!important;white-space:nowrap!important;flex-shrink:0!important
}
.reference-ui .next-info-item svg,
.reference-ui .next-info-row svg {
width:13px;height:13px;color:#728ba8
}
.reference-ui .next-dot {
color:#a5b8cc;font-size:11px;flex-shrink:0
}
.reference-ui .next-chevron {
display:grid!important;place-items:center!important;align-self:center!important;width:26px!important;height:26px!important;margin:0 0 0 auto!important;color:#8ba2be;flex-shrink:0!important
}
.reference-ui .next-chevron svg {
display:block!important;margin:auto!important
}
.reference-ui .nav svg {
width:23px;height:23px;display:inline-block;vertical-align:middle
}
.reference-ui .avatar svg {
width:30px;height:30px
}
.reference-ui .lesson-number {
display:grid;place-items:center;border-radius:13px;width:39px;height:45px;background:#eaf4ff;color:#237de4;font-weight:bold
}
.reference-ui .lesson-detail-head {
position:relative;overflow:hidden;background:#edf7ff;border:1px solid white;padding:20px;border-radius:20px;margin-bottom:15px
}
.reference-ui .lesson-detail-head.math {
background:linear-gradient(115deg,#155ce8,#159ce8);color:white
}
.reference-ui .lesson-detail-head.math .eyebrow {
color:#d1ecff
}
.reference-ui .lesson-detail-head h2,
.reference-ui .lesson-detail-head .eyebrow {
position:relative;z-index:1
}
.reference-ui .lesson-detail-head h2 {
font-size:25px;margin:10px 0 15px
}
.reference-ui .lesson-demo-note {
text-align:center;color:#8fa0b5;font-size:10px;margin:16px 0 0
}
@media(max-width:360px){.reference-ui .lesson-hero h1 {
font-size:25px
}
.reference-ui .lesson-next {
gap:10px
}}
.reference-ui .clean-nav,
.reference-ui .nav {
flex: 0 0 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  width: 100% !important;
  position: sticky !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 0 6px calc(env(safe-area-inset-bottom, 0px)) !important;
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid #dce7f3 !important;
  box-shadow: 0 -4px 20px rgba(18, 48, 86, 0.06) !important;
  box-sizing: border-box !important;
}
.reference-ui .clean-nav button {
flex: 1 1 0 !important;
  width: 20% !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: #374b63 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  background: none !important;
  border: none !important;
}
.reference-ui .clean-nav .nav-icon-wrap {
width: 48px !important;
  height: 28px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto !important;
  transition: all .18s ease !important;
  background: transparent !important;
}
.reference-ui .clean-nav button.active .nav-icon-wrap {
background: #e0effe !important;
  color: #0d53c5 !important;
}
.reference-ui .clean-nav button.active {
color: #0d53c5 !important;
  font-weight: 700 !important;
}
.reference-ui .clean-nav .nav-label {
display: block !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.15px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  color: inherit !important;
}
.reference-ui .clean-nav svg {
width: 20px !important;
  height: 20px !important;
  display: block !important;
}
.reference-ui .header-title {
font-size: 22px !important;
  font-weight: 700 !important;
  color: #142237 !important;
  letter-spacing: -0.4px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  flex: 1 1 auto !important;
}
.reference-ui .header-actions {
display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.reference-ui .profile-header-btn .avatar {
width: 38px !important;
  height: 38px !important;
}
.reference-ui .news-actions {
display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid #eef3f8 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.reference-ui .news-action-btn {
display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #5a7391 !important;
  padding: 8px 4px !important;
  border-radius: 12px !important;
  background: #f4f7fb !important;
  border: 1px solid #e7edf5 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.reference-ui .news-action-btn:active {
transform: scale(.96) !important;
}
.reference-ui .news-action-btn.liked {
color: #e63956 !important;
  background: #ffeef1 !important;
  border-color: #ffd8df !important;
}
.reference-ui .news-action-btn svg {
width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.reference-ui .news-card {
padding: 18px !important;
  margin-bottom: 14px !important;
}
.reference-ui .card {
backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff
}
.reference-ui .card {
display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 16px !important;
  margin: 0 0 12px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 94, 0.04) !important;
  box-sizing: border-box !important;
}
.reference-ui .home-header {
flex: 0 0 60px !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  width: 100% !important;
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 16px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid #e2ecf7 !important;
  box-shadow: 0 2px 10px rgba(16, 40, 75, 0.04) !important;
  box-sizing: border-box !important;
}
.reference-ui .home-user-wrap {
display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.reference-ui .home-avatar {
width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: #e2f0fe !important;
  color: #1255be !important;
  border: 1px solid #cce2fc !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.reference-ui .home-user-text {
display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}
.reference-ui .home-greeting {
font-size: 15px !important;
  font-weight: 700 !important;
  color: #112641 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.2px !important;
}
.reference-ui .home-date-sub {
font-size: 11.5px !important;
  color: #4b6380 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.reference-ui .header-bell-btn {
position: relative !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 12px !important;
  background: #f0f5fc !important;
  color: #1d4ed8 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #dce8f6 !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  flex-shrink: 0 !important;
}
.reference-ui .header-bell-btn:active {
transform: scale(0.94) !important;
  background: #e4effe !important;
}
.reference-ui .bell-unread-dot {
position: absolute !important;
  top: 7px !important;
  right: 7px !important;
  width: 8px !important;
  height: 8px !important;
  background: #ef4444 !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
}
.reference-ui .lesson-hero {
display: block !important;
  width: 100% !important;
  text-align: left !important;
  padding: 13px 15px 11px !important;
  border-radius: 18px !important;
  margin: 2px 0 10px !important;
  background: linear-gradient(135deg, #0e3d8c 0%, #175ecf 60%, #1e70e9 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 6px 20px rgba(14, 61, 140, 0.18) !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.reference-ui .lesson-hero:active {
transform: scale(0.985) !important;
}
.reference-ui .lesson-top {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.reference-ui .live-label {
display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  padding: 3px 9px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #ffffff !important;
}
.reference-ui .live-label i {
width: 6px !important;
  height: 6px !important;
  background: #34d399 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 8px #34d399 !important;
  display: inline-block !important;
  animation: pulse-dot 1.8s infinite !important;
}
.reference-ui .live-time-chip {
display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(16, 185, 129, 0.2) !important;
  border: 1px solid rgba(52, 211, 153, 0.35) !important;
  color: #a7f3d0 !important;
  padding: 3px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}
.reference-ui .lesson-main-info {
margin: 4px 0 6px !important;
}
.reference-ui .lesson-main-info h1 {
font-size: 21px !important;
  font-weight: 800 !important;
  letter-spacing: -0.4px !important;
  margin: 0 0 2px !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
}
.reference-ui .lesson-topic {
font-size: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.reference-ui .lesson-progress-wrap {
margin: 6px 0 6px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  padding: 8px 10px !important;
}
.reference-ui .lesson-progress-bar {
width: 100% !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  margin-bottom: 6px !important;
}
.reference-ui .lesson-progress-fill {
height: 100% !important;
  background: linear-gradient(90deg, #38bdf8, #34d399) !important;
  border-radius: 4px !important;
}
.reference-ui .lesson-progress-labels {
display: flex !important;
  justify-content: space-between !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 500 !important;
}
.reference-ui .lesson-bottom {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
}
.reference-ui .lesson-teacher-line {
font-size: 12px !important;
  color: rgba(255, 255, 255, 0.94) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-weight: 500 !important;
}
.reference-ui .lesson-arrow {
display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #0d47a1 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
  flex-shrink: 0 !important;
  transition: transform .15s ease, background .15s ease !important;
}
.reference-ui .lesson-arrow:active {
transform: scale(0.92) !important;
  background: #f0f6ff !important;
}
.reference-ui .lesson-arrow svg {
width: 17px !important;
  height: 17px !important;
  stroke: #0d47a1 !important;
  color: #0d47a1 !important;
  stroke-width: 2.4 !important;
  display: block !important;
}
.reference-ui .lesson-progress-room {
display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}
.reference-ui .lesson-next {
display: flex !important;
  width: 100% !important;
  text-align: left !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 11px 14px !important;
  min-height: auto !important;
  border-radius: 16px !important;
  margin: 0 0 10px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  box-shadow: 0 3px 12px rgba(18, 52, 94, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
.reference-ui .next-symbol {
width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #eef5ff !important;
  color: #1767ef !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  flex-shrink: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.reference-ui .next-copy {
flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 3px !important;
  color: #0f172a !important;
  margin: 0 !important;
  padding: 0 !important;
}
.reference-ui .next-badge-row {
display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.reference-ui .next-badge {
font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  color: #1d4ed8 !important;
  line-height: 1 !important;
}
.reference-ui .next-period {
font-size: 11px !important;
  color: #334155 !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.reference-ui .next-title {
font-size: 16px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.reference-ui .next-info-row {
display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}
.reference-ui .next-info-chip {
display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.reference-ui .next-info-chip svg {
width: 13px !important;
  height: 13px !important;
  color: #2563eb !important;
  flex-shrink: 0 !important;
}
.reference-ui .next-chevron {
width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  margin: 0 0 0 auto !important;
  color: #8ba2be !important;
  flex-shrink: 0 !important;
  font-size: inherit !important;
}
.reference-ui .next-chevron svg {
display: block !important;
  margin: auto !important;
}
.reference-ui .home-section-header {
display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 16px 0 8px !important;
  padding: 0 2px !important;
}
.reference-ui .home-section-title-wrap {
display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.reference-ui .home-section-title-wrap h2 {
font-size: 16px !important;
  font-weight: 700 !important;
  color: #112641 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}
.reference-ui .home-count-badge {
font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  border: 1px solid #bfdbfe !important;
}
.reference-ui .home-count-badge.all-done {
background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #a7f3d0 !important;
}
.reference-ui .home-score-pill {
font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  background: #ecfdf5 !important;
  color: #047857 !important;
  border: 1px solid #a7f3d0 !important;
}
.reference-ui .section-link {
font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1767ef !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
}
.reference-ui .home-hw-list {
display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  margin-bottom: 14px !important;
}
.reference-ui .home-hw-item {
display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 13px 15px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: all .16s ease !important;
}
.reference-ui .home-hw-item:active {
transform: scale(0.985) !important;
}
.reference-ui .home-hw-item.done {
opacity: 0.7 !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
.reference-ui .home-hw-item.done .home-hw-subject,
.reference-ui .home-hw-item.done .home-hw-text {
text-decoration: line-through !important;
}
.reference-ui .home-hw-checkbox {
width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 7px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 2px !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  transition: all .16s ease !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.reference-ui .home-hw-checkbox:hover {
background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
.reference-ui .home-hw-item.done .home-hw-checkbox {
background: #1767ef !important;
  border-color: #1767ef !important;
  color: #ffffff !important;
}
.reference-ui .home-hw-item.done .home-hw-checkbox svg {
stroke-width: 2.5 !important;
  color: #ffffff !important;
}
.reference-ui .home-hw-content {
flex: 1 1 auto !important;
  min-width: 0 !important;
}
.reference-ui .home-hw-top {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 3px !important;
}
.reference-ui .home-hw-subject {
font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.reference-ui .hw-time-pill {
display: inline-flex !important;
  align-items: center !important;
  gap: 4.5px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}
.reference-ui .hw-time-pill svg {
width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
}
.reference-ui .hw-time-pill.urgent {
background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}
.reference-ui .hw-time-pill.urgent svg {
color: #dc2626 !important;
}
.reference-ui .hw-time-pill.warning {
background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}
.reference-ui .hw-time-pill.warning svg {
color: #b45309 !important;
}
.reference-ui .hw-time-pill.normal {
background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
}
.reference-ui .hw-time-pill.normal svg {
color: #64748b !important;
}
.reference-ui .home-hw-text {
font-size: 13.5px !important;
  color: #0f172a !important;
  font-weight: 500 !important;
  margin: 3px 0 0 !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.reference-ui .avatar-student {
background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25) !important;
  display: grid !important;
  place-items: center !important;
  letter-spacing: 0.5px !important;
  border-radius: 50% !important;
}
.reference-ui .profile-avatar.avatar-student {
width: 72px !important;
  height: 72px !important;
  font-size: 26px !important;
  margin: 0 auto 12px !important;
  border: 3px solid #eff6ff !important;
  box-shadow: 0 6px 20px rgba(29, 78, 216, 0.25) !important;
}
.reference-ui .bell-count-badge {
position: absolute !important;
  top: -3px !important;
  right: -3px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  background: #dc2626 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  border-radius: 9px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4) !important;
}
.reference-ui .school-news-card {
padding: 15px !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  margin: 0 0 14px !important;
  box-shadow: 0 4px 16px rgba(18, 52, 94, 0.04) !important;
  box-sizing: border-box !important;
}
.reference-ui .news-header-row {
display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
.reference-ui .news-author-info {
flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.reference-ui .news-author-top-line {
display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.reference-ui .news-author-name {
font-size: 14px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.reference-ui .news-role-chip {
font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
.reference-ui .news-author-sub {
font-size: 11.5px !important;
  color: #475569 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.reference-ui .news-article-title {
font-size: 15.5px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin: 8px 0 6px !important;
  letter-spacing: -0.3px !important;
}
.reference-ui .news-schedule-strip {
display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin: 6px 0 10px !important;
}
.reference-ui .news-schedule-chip {
display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #1e3a8a !important;
  line-height: 1.3 !important;
}
.reference-ui .news-schedule-chip svg {
color: #2563eb !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
}
.reference-ui .news-text {
font-size: 13px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
  margin: 6px 0 8px !important;
}
.reference-ui .news-media-box {
position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 6px 0 10px !important;
  border: 1px solid #e2e8f0 !important;
  max-height: 130px !important;
}
.reference-ui .news-photo {
width: 100% !important;
  height: 105px !important;
  max-height: 120px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
.reference-ui .news-photo-badge {
display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 5px 10px !important;
  font-size: 11px !important;
  color: #334155 !important;
  background: #f8fafc !important;
  border-top: 1px solid #e8f0f8 !important;
  font-weight: 600 !important;
}
.reference-ui .news-text {
font-size: 13.5px !important;
  color: #263c55 !important;
  line-height: 1.55 !important;
  margin: 6px 0 8px !important;
}
.reference-ui .news-media-box {
position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin: 6px 0 10px !important;
  border: 1px solid #e1e9f4 !important;
}
.reference-ui .news-photo {
width: 100% !important;
  max-height: 240px !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
.reference-ui .news-photo-badge {
display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 7px 12px !important;
  font-size: 11.5px !important;
  color: #3b5574 !important;
  background: #f6f9fd !important;
  border-top: 1px solid #e8f0f8 !important;
  font-weight: 500 !important;
}
.reference-ui .news-photo-badge svg {
color: #1d4ed8 !important;
}
.reference-ui .news-actions {
display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid #edf3fa !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.reference-ui .news-action-btn {
display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 9px 8px !important;
  border-radius: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  border: 1px solid transparent !important;
}
.reference-ui .news-action-btn:active {
transform: scale(0.96) !important;
}
.reference-ui .news-action-btn.like-btn {
background: #fff3f5 !important;
  color: #e11d48 !important;
  border-color: #ffe4e8 !important;
}
.reference-ui .news-action-btn.like-btn:hover {
background: #ffe4e8 !important;
}
.reference-ui .news-action-btn.like-btn.liked {
background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.3) !important;
}
.reference-ui .news-action-btn.comment-btn {
background: #eff6ff !important;
  color: #1d4ed8 !important;
  border-color: #dbeafe !important;
}
.reference-ui .news-action-btn.comment-btn:hover {
background: #dbeafe !important;
}
.reference-ui .news-action-btn.share-btn {
background: #f0fdf4 !important;
  color: #15803d !important;
  border-color: #dcfce7 !important;
}
.reference-ui .news-action-btn.share-btn:hover {
background: #dcfce7 !important;
}
.reference-ui .news-action-btn svg {
width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}
.reference-ui .nav button:active {
transform:scale(.97)
}
@media(max-width:350px){.reference-ui .clean-nav button {
font-size:9.5px
}
.reference-ui .news-action-btn {
font-size:11px!important;padding:6px 2px!important
}}
.reference-ui .card,
.reference-ui .news-card,
.reference-ui .school-news-card,
.reference-ui .home-hw-item {
border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 94, 0.03) !important;
}
.reference-ui .lesson-status-pill {
font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
}
.reference-ui .lesson-status-pill.current {
background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important;
}
.reference-ui .lesson-status-pill.done {
background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important;
}
.reference-ui .lesson-status-pill.upcoming {
background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important;
}
.reference-ui .lesson-status-pill.next {
background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important;
}
.dark .reference-ui .header-title,
.dark .reference-ui .settings-header b {
color: #f8fafc !important;
}
.dark .reference-ui .card,
.dark .reference-ui .lesson-next,
.dark .reference-ui .settings-card {
background: #1e293b !important;
  border-color: #334155 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
}
.dark .reference-ui .next-title,
.dark .reference-ui .news-author-name,
.dark .reference-ui .settings-section-head b,
.dark .reference-ui .about-app-text b {
color: #f8fafc !important;
}
.dark .reference-ui .news-author-sub,
.dark .reference-ui .settings-section-head small,
.dark .reference-ui .about-note-text {
color: #94a3b8 !important;
}
.dark .reference-ui nav.nav {
background: rgba(15, 23, 42, 0.96) !important;
  border-top: 1px solid #1e293b !important;
}
.dark .reference-ui nav.nav button {
color: #64748b !important;
}
.dark .reference-ui nav.nav button.active {
color: var(--chat-accent, #60a5fa) !important;
}
.dark .reference-ui .today-lesson-card.lesson-past-card {
opacity: 0.55 !important;
  background: #141e2e !important;
}
.dark .reference-ui .news-action-btn {
background: #0f172a !important;
  color: #94a3b8 !important;
}
.reference-ui .settings-main {
padding: 16px 16px 96px !important;
  box-sizing: border-box !important;
}
.reference-ui .settings-card {
background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 3px 12px rgba(18, 52, 94, 0.04) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.reference-ui .settings-section-head {
display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.reference-ui .settings-head-title-row {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.reference-ui .active-color-pill {
display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.dark .reference-ui .active-color-pill {
background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
.reference-ui .active-color-dot {
width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.reference-ui .settings-sec-icon {
width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.reference-ui .settings-section-head b {
display: block !important;
  font-size: 15px !important;
  color: #142237 !important;
  line-height: 1.2 !important;
}
.reference-ui .settings-section-head small {
display: block !important;
  color: #64748b !important;
  font-size: 12px !important;
  margin-top: 2px !important;
  line-height: 1.3 !important;
}
.reference-ui .theme-switch-grid {
display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.reference-ui .theme-choice-btn {
border: 2px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  background: #f8fafc !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: all .2s ease !important;
}
.reference-ui .theme-choice-btn.selected {
border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12) !important;
}
.dark .reference-ui .theme-choice-btn {
background: #0f172a !important;
  border-color: #334155 !important;
}
.dark .reference-ui .theme-choice-btn.selected {
border-color: #60a5fa !important;
  background: #1e293b !important;
  box-shadow: 0 4px 14px rgba(96, 165, 250, 0.2) !important;
}
.reference-ui .theme-preview-box {
border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 52px !important;
  box-sizing: border-box !important;
}
.reference-ui .theme-preview-box.light-preview {
background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}
.reference-ui .theme-preview-box.dark-preview {
background: #0f172a !important;
  border: 1px solid #334155 !important;
}
.reference-ui .theme-badge-icon {
width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
}
.reference-ui .theme-badge-icon.light-badge {
background: #fef3c7 !important; color: #d97706 !important;
}
.reference-ui .theme-badge-icon.dark-badge {
background: #312e81 !important; color: #a5b4fc !important;
}
.reference-ui .theme-mock-lines {
flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.reference-ui .mock-line {
height: 5px !important;
  border-radius: 3px !important;
  background: #cbd5e1 !important;
}
.reference-ui .dark-mock .mock-line {
background: #475569 !important;
}
.reference-ui .mock-line.w-full {
width: 100% !important;
}
.reference-ui .mock-line.w-half {
width: 55% !important;
}
.reference-ui .theme-btn-info {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.reference-ui .theme-btn-title {
font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #142237 !important;
}
.dark .reference-ui .theme-btn-title {
color: #f8fafc !important;
}
.reference-ui .theme-check-radio {
width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 2px solid #cbd5e1 !important;
  position: relative !important;
}
.reference-ui .theme-check-radio.active {
border-color: #2563eb !important;
  background: #2563eb !important;
}
.reference-ui .theme-check-radio.active::after {
content: '' !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}
.reference-ui .chat-colors-grid {
display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px 4px !important;
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 2px !important;
}
.reference-ui .chat-color-btn {
display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 4px 1px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: transform .15s ease !important;
}
.reference-ui .chat-color-btn:active {
transform: scale(0.93) !important;
}
.reference-ui .chat-color-btn.selected {
border: none !important;
  background: transparent !important;
}
.dark .reference-ui .chat-color-btn.selected {
border: none !important;
  background: transparent !important;
}
.reference-ui .color-swatch-circle {
width: 42px !important;
  height: 42px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16) !important;
  transition: all .18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  margin: 0 auto !important;
}
.reference-ui .color-swatch-circle svg {
width: 16px !important;
  height: 16px !important;
  stroke-width: 2.8 !important;
  color: #ffffff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
.reference-ui .chat-color-btn.selected .color-swatch-circle {
transform: scale(1.08) !important;
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 4.5px var(--chat-accent, #1767ef), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.dark .reference-ui .chat-color-btn.selected .color-swatch-circle {
box-shadow: 0 0 0 2.5px #1e293b, 0 0 0 4.5px var(--chat-accent, #60a5fa), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.reference-ui .color-name-text {
font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: 100% !important;
  letter-spacing: -0.2px !important;
  transition: color .15s ease !important;
}
.reference-ui .chat-color-btn.selected .color-name-text {
color: var(--chat-accent, #1767ef) !important;
  font-weight: 700 !important;
}
.dark .reference-ui .color-name-text {
color: #94a3b8 !important;
}
.dark .reference-ui .chat-color-btn.selected .color-name-text {
color: var(--chat-accent, #60a5fa) !important;
  font-weight: 700 !important;
}
@media (max-width: 360px){.reference-ui .color-swatch-circle {
width: 36px !important;
    height: 36px !important;
}
.reference-ui .color-name-text {
font-size: 10px !important;
}}
.reference-ui .chat-live-preview-box {
background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 12px !important;
  margin: 12px 0 16px !important;
}
.dark .reference-ui .chat-live-preview-box {
background: #0b1120 !important;
  border-color: #334155 !important;
}
.reference-ui .chat-preview-header {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  margin-bottom: 10px !important;
}
.dark .reference-ui .chat-preview-header {
border-bottom-color: #1e293b !important;
}
.reference-ui .chat-preview-user {
display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
}
.dark .reference-ui .chat-preview-user {
color: #cbd5e1 !important;
}
.reference-ui .chat-preview-dot {
width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
}
.reference-ui .chat-preview-messages {
display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}
.reference-ui .chat-preview-msg {
display: flex !important;
  width: 100% !important;
}
.reference-ui .chat-preview-msg.other {
justify-content: flex-start !important;
}
.reference-ui .chat-preview-msg.mine {
justify-content: flex-end !important;
}
.reference-ui .chat-preview-bubble {
padding: 8px 12px !important;
  border-radius: 14px !important;
  font-size: 12.5px !important;
  max-width: 80% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
  line-height: 1.35 !important;
}
.reference-ui .chat-preview-msg.other .chat-preview-bubble {
background: #ffffff !important;
  color: #1e293b !important;
  border-bottom-left-radius: 4px !important;
}
.dark .reference-ui .chat-preview-msg.other .chat-preview-bubble {
background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #334155 !important;
}
.reference-ui .chat-preview-msg.mine .chat-preview-bubble {
border-bottom-right-radius: 4px !important;
  transition: background .2s ease !important;
}
.reference-ui .chat-preview-bubble small {
display: block !important;
  text-align: right !important;
  font-size: 10px !important;
  margin-top: 3px !important;
  opacity: 0.75 !important;
}
.reference-ui .chat-preview-composer {
display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 6px 8px 6px 12px !important;
  border: 1px solid #e2e8f0 !important;
}
.dark .reference-ui .chat-preview-composer {
background: #1e293b !important;
  border-color: #334155 !important;
}
.reference-ui .about-icon-row {
display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 8px !important;
}
.reference-ui .about-app-badge {
width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  display: grid !important;
  place-items: center !important;
}
.dark .reference-ui .about-app-badge {
background: #0f172a !important;
  color: #60a5fa !important;
}
.reference-ui .about-app-text b {
display: block !important;
  font-size: 14.5px !important;
  color: #142237 !important;
}
.reference-ui .about-app-text small {
display: block !important;
  color: #64748b !important;
  font-size: 11.5px !important;
}
.reference-ui .about-note-text {
font-size: 12px !important;
  color: #64748b !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}
.reference-ui .card,
.reference-ui .news-card,
.reference-ui .school-news-card,
.reference-ui .home-hw-item {
border: 1.5px solid #e2e8f0 !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 10px rgba(18, 52, 94, 0.03) !important;
}
.reference-ui .home-hw-subject {
color: #1e293b !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
}
.reference-ui .home-hw-checkbox {
width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 7px !important;
  border: 1.5px solid #cbd5e1 !important;
  background: #ffffff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  color: #ffffff !important;
}
.reference-ui .home-hw-item.done .home-hw-checkbox {
background: #1767ef !important;
  border-color: #1767ef !important;
  color: #ffffff !important;
}
.reference-ui .hw-time-pill.urgent {
background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1.5px solid #fecaca !important;
  font-weight: 700 !important;
}
.reference-ui .hw-time-pill.warning {
background: #fffbeb !important;
  color: #b45309 !important;
  border: 1.5px solid #fde68a !important;
  font-weight: 700 !important;
}
.reference-ui .hw-time-pill.normal {
background: #f1f5f9 !important;
  color: #475569 !important;
  border: 1.5px solid #e2e8f0 !important;
  font-weight: 600 !important;
}
.reference-ui .today-lesson-card.lesson-past-card {
opacity: 0.62 !important;
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  box-shadow: none !important;
}
.reference-ui .today-lesson-card.lesson-past-card:hover,
.reference-ui .today-lesson-card.lesson-past-card:active {
opacity: 0.85 !important;
}
.reference-ui .today-lesson-card.lesson-past-card .today-lesson-num {
background: #f1f5f9 !important;
  color: #64748b !important;
}
.reference-ui .today-lesson-card.lesson-past-card .today-lesson-name {
color: #475569 !important;
}
.reference-ui .lesson-status-pill {
font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  line-height: 1.2 !important;
}
.reference-ui .lesson-status-pill.current {
background: #eff6ff !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important;
}
.reference-ui .lesson-status-pill.done {
background: #ecfdf5 !important; color: #047857 !important; border: 1px solid #a7f3d0 !important;
}
.reference-ui .lesson-status-pill.upcoming {
background: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0 !important;
}
.reference-ui .lesson-status-pill.next {
background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important;
}
.reference-ui .settings-main {
padding: 16px 16px 110px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.reference-ui .settings-card {
background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 18px 16px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 3px 12px rgba(18, 52, 94, 0.04) !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.reference-ui .settings-head-title-row {
display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.reference-ui .active-color-pill {
display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 20px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.dark .reference-ui .active-color-pill {
background: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
.reference-ui .active-color-dot {
width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.reference-ui .chat-colors-grid {
display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px 4px !important;
  margin-top: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 4px 2px !important;
}
.reference-ui .chat-color-btn {
display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  padding: 4px 1px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  border: none !important;
  background: transparent !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: transform .15s ease !important;
}
.reference-ui .chat-color-btn:active {
transform: scale(0.93) !important;
}
.reference-ui .chat-color-btn.selected {
border: none !important;
  background: transparent !important;
}
.dark .reference-ui .chat-color-btn.selected {
border: none !important;
  background: transparent !important;
}
.reference-ui .color-swatch-circle {
width: 42px !important;
  height: 42px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #ffffff !important;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.16) !important;
  transition: all .18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  position: relative !important;
  margin: 0 auto !important;
}
.reference-ui .color-swatch-circle svg {
width: 16px !important;
  height: 16px !important;
  stroke-width: 2.8 !important;
  color: #ffffff !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}
.reference-ui .chat-color-btn.selected .color-swatch-circle {
transform: scale(1.08) !important;
  box-shadow: 0 0 0 2.5px #ffffff, 0 0 0 4.5px var(--chat-accent, #1767ef), 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}
.dark .reference-ui .chat-color-btn.selected .color-swatch-circle {
box-shadow: 0 0 0 2.5px #1e293b, 0 0 0 4.5px var(--chat-accent, #60a5fa), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
.reference-ui .color-name-text {
font-size: 11px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  text-align: center !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  max-width: 100% !important;
  letter-spacing: -0.2px !important;
  transition: color .15s ease !important;
}
.reference-ui .chat-color-btn.selected .color-name-text {
color: var(--chat-accent, #1767ef) !important;
  font-weight: 700 !important;
}
.dark .reference-ui .color-name-text {
color: #94a3b8 !important;
}
.dark .reference-ui .chat-color-btn.selected .color-name-text {
color: var(--chat-accent, #60a5fa) !important;
  font-weight: 700 !important;
}
@media (max-width: 360px){.reference-ui .color-swatch-circle {
width: 36px !important;
    height: 36px !important;
}
.reference-ui .color-name-text {
font-size: 10px !important;
}}
/* Shared typography and the reference's stationary header/content/navigation frame. */
@font-face{font-family:SchoolRoboto;src:url('/fonts/Roboto.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:SchoolEmoji;src:url('/fonts/SchoolEmoji.ttf') format('truetype');font-weight:400;font-display:swap;unicode-range:U+1F389,U+1F44B,U+1F44D}
:root{font-family:SchoolRoboto,Arial,SchoolEmoji,sans-serif;color:#142237;background:#f7faff;--blue:#1767ef;--chat-a:#1767ef;--chat-b:#2563eb;--chat-solid:#1767ef;--chat-accent:var(--chat-solid)}
body{font-size:15px;-webkit-font-smoothing:antialiased}
.reference-ui{font-family:SchoolRoboto,Arial,SchoolEmoji,sans-serif}
.reference-ui .home-avatar{background:linear-gradient(135deg,#1d4ed8,#2563eb)!important;border:1px solid #dbeafe!important;color:#fff!important;box-shadow:0 2px 8px #1d4ed840!important;font-weight:700!important;font-size:13px!important}
.reference-ui .home-user-wrap{padding:0;text-align:left;background:none;border:0;justify-content:flex-start}
.reference-ui .home-user-text{flex:0 1 auto;text-align:left}
.reference-ui .home-greeting{margin:0;display:block}
.reference-ui .home-date-sub{margin:0;display:block}
.reference-ui .topbar .bell-count-badge{display:grid;place-items:center;min-width:18px;padding:0 4px;border:2px solid white;background:#dc2626;box-shadow:0 1px 5px #dc262655;top:-2px;right:-2px;color:white}
.reference-ui .page-header{background:var(--card);border-bottom:1px solid #e7edf6;gap:10px;justify-content:space-between}
.reference-ui .page-header h2{font-size:22px;font-weight:700;text-align:center;flex:1;margin:0;letter-spacing:-.6px}
.reference-ui .page-header .icon-btn{background:#f0f5fc;color:#2169b0;border-radius:12px;width:38px;height:38px;padding:0}
.reference-ui .settings-header [data-action=refresh]{visibility:hidden}
.reference-ui .lesson-hero{line-height:normal}
.reference-ui .lesson-main-info .lesson-topic{line-height:normal}
.reference-ui .lesson-progress-bar{display:block;appearance:none;border:0;accent-color:#34d399}
.reference-ui .lesson-progress-bar::-webkit-progress-bar{background:#ffffff38;border-radius:4px}
.reference-ui .lesson-progress-bar::-webkit-progress-value{background:linear-gradient(90deg,#38bdf8,#34d399);border-radius:4px}
.reference-ui .lesson-progress-bar::-moz-progress-bar{background:linear-gradient(90deg,#38bdf8,#34d399);border-radius:4px}
.reference-ui .lesson-progress-room{font-size:inherit;line-height:normal;min-height:0}
.reference-ui .hero-next{width:100%;text-align:left;padding-left:0;padding-right:0;padding-bottom:0;color:inherit;line-height:normal}
.reference-ui .lesson-hero .subject-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.reference-ui .lesson-hero>*:not(.subject-art){position:relative;z-index:1}
.reference-ui .hero-next>span.lesson-teacher-line{font-size:12px!important;font-weight:500!important}
.reference-ui .hero-next .lesson-arrow{box-shadow:0 4px 14px #00000038!important}
.reference-ui .section-link{background:transparent;border:0;min-height:0;line-height:normal;padding:1px 6px;border-radius:0}
.reference-ui .home-hw-item{margin:0;line-height:normal}
.reference-ui .home-hw-text{white-space:pre-wrap;overflow-wrap:anywhere}
.reference-ui .home-hw-top .meta-chip{white-space:nowrap;line-height:1.2;letter-spacing:0}
.reference-ui .homework-copy{flex:1;min-width:0}
.reference-ui .subject-mini{display:inline-grid;place-items:center;background:#eef5ff;color:#1767ef;width:36px;height:36px;border-radius:11px;flex-shrink:0}
.reference-ui .home-hw-content>.form-actions{margin-top:12px}
.reference-ui .news-author-top-line strong{margin:0}
.reference-ui .news-card .posttext{white-space:pre-wrap;overflow-wrap:anywhere}
.reference-ui .news-card .news-media-box{margin-bottom:10px}
.reference-ui .news-card .news-photo{border-radius:15px;max-height:none}
.reference-ui .post-actions .news-action-btn{margin:0;min-height:36px}
.reference-ui .news-card{scroll-margin-top:10px}
.reference-ui .more-button{padding:0;min-width:20px;min-height:26px;font-size:20px;background:transparent;color:#94a3b8}
.reference-ui .home-feed .empty{background:white;border:1px solid var(--line);border-radius:18px}
.reference-ui .settings-color-copy{flex:1;min-width:0}
.reference-ui .settings-sec-icon{background:#eff6ff;color:#2563eb}
.reference-ui .settings-sec-icon.palette-icon{background:#fdf2f8;color:#db2777}
.reference-ui .settings-section-head p{margin:0}
.reference-ui .chat-live-preview-box .mine-bubble{background:linear-gradient(135deg,var(--chat-a),var(--chat-b))!important;color:#fff!important}
.reference-ui .preview-composer-btn{background:var(--chat-solid)!important}
.reference-ui .color-choice{outline:0}
.reference-ui .settings-card h2{margin:0}
:root[data-chat-color=emerald]{--chat-a:#059669;--chat-b:#10b981;--chat-solid:#059669}
:root[data-chat-color=violet]{--chat-a:#7c3aed;--chat-b:#a855f7;--chat-solid:#7c3aed}
:root[data-chat-color=amber]{--chat-a:#d97706;--chat-b:#f59e0b;--chat-solid:#d97706}
:root[data-chat-color=ruby]{--chat-a:#e11d48;--chat-b:#fb4269;--chat-solid:#e11d48}
:root[data-chat-color=cyan]{--chat-a:#0891b2;--chat-b:#06b6d4;--chat-solid:#0891b2}
:root[data-chat-color=indigo]{--chat-a:#4338ca;--chat-b:#6366f1;--chat-solid:#4338ca}
:root[data-chat-color=pink]{--chat-a:#db2777;--chat-b:#ec4899;--chat-solid:#db2777}
:root[data-chat-color=sea]{--chat-a:#0d9488;--chat-b:#14b8a6;--chat-solid:#0d9488}
:root[data-chat-color=graphite]{--chat-a:#334155;--chat-b:#64748b;--chat-solid:#334155}
.reference-ui .color-blue{background:linear-gradient(135deg,#1767ef,#2563eb)}
.reference-ui .color-emerald{background:linear-gradient(135deg,#059669,#10b981)}
.reference-ui .color-violet{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.reference-ui .color-amber{background:linear-gradient(135deg,#d97706,#f59e0b)}
.reference-ui .color-ruby{background:linear-gradient(135deg,#e11d48,#fb4269)}
.reference-ui .color-cyan{background:linear-gradient(135deg,#0891b2,#06b6d4)}
.reference-ui .color-indigo{background:linear-gradient(135deg,#4338ca,#6366f1)}
.reference-ui .color-pink{background:linear-gradient(135deg,#db2777,#ec4899)}
.reference-ui .color-sea{background:linear-gradient(135deg,#0d9488,#14b8a6)}
.reference-ui .color-graphite{background:linear-gradient(135deg,#334155,#64748b)}
.reference-ui .message.mine{background:linear-gradient(135deg,var(--chat-a),var(--chat-b));color:white;border:0}
.reference-ui .message.mine strong,.reference-ui .message.mine small,.reference-ui .message.mine .actions button{color:#e0ecff}
.dark .reference-ui .workspace,.dark .reference-ui .content{background:#0f172a}
.dark .reference-ui .homework-copy small{color:#94a3b8}
@media(max-width:700px){
 html,body{height:100%;height:100dvh;margin:0;overflow:hidden}
 #app{height:100%;height:100dvh;overflow:hidden}
 .reference-ui.layout{height:100dvh;min-height:0;max-width:650px;margin:auto;display:flex;flex-direction:column;overflow:hidden;background:#f7faff}
 .reference-ui .content{min-height:0;flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden}
 .reference-ui .topbar{flex:0 0 60px;height:60px;min-height:60px;padding:0 16px;position:relative;top:auto;backdrop-filter:blur(20px)}
 .reference-ui .workspace{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;width:100%;max-width:100%;padding:14px 16px 32px;margin:0;scrollbar-gutter:stable;-webkit-overflow-scrolling:touch}
 .reference-ui .workspace::-webkit-scrollbar{width:5px}
 .reference-ui .workspace::-webkit-scrollbar-thumb{background:#cbd8e7;border-radius:5px}
 .reference-ui .workspace::-webkit-scrollbar-track{background:transparent}
 .reference-ui .home-header{position:relative!important}
 .reference-ui .mobile-nav{position:relative!important;flex:0 0 calc(60px + env(safe-area-inset-bottom,0px))!important;height:calc(60px + env(safe-area-inset-bottom,0px))!important;max-height:calc(60px + env(safe-area-inset-bottom,0px))!important;min-height:60px!important;bottom:auto!important;backdrop-filter:blur(20px);box-shadow:0 -4px 20px #1230560f!important}
 .reference-ui .mobile-nav button{font-weight:400!important}
 .reference-ui .mobile-nav .nav-label{font-weight:400!important}
 .reference-ui .mobile-nav button.active{font-weight:500!important}
 .reference-ui .mobile-nav .nav-icon-wrap{background:transparent}
 .reference-ui .mobile-nav button.active{background:transparent!important}
 .reference-ui .mobile-nav svg{width:23px;height:23px}
 .reference-ui .chat-layout{height:calc(100dvh - 202px)}
 .reference-ui .page-header h2{font-size:22px}
 .reference-ui .settings-main{padding:16px 16px 32px!important}
 .reference-ui .settings-card{margin-top:0}
 .reference-ui .field-grid{grid-template-columns:1fr 1fr}
 .reference-ui .next-badge-row{flex-wrap:nowrap}
 .reference-ui .next-badge,.reference-ui .next-period{white-space:nowrap;letter-spacing:0!important}
 .reference-ui .home-count-badge{font-weight:400!important}
 .reference-ui .section-link{font-weight:400!important}
 .reference-ui .next-info-chip{font-weight:400!important}
 .reference-ui .news-action-btn{font-weight:400!important}
 .reference-ui .news-schedule-chip{font-weight:400!important}
 .reference-ui .color-name-text{font-weight:400!important}
 .reference-ui .home-hw-top .hw-time-pill{font-weight:400!important}
}
@media(min-width:701px){.reference-ui .mobile-nav{display:none!important}.reference-ui .workspace{max-width:850px}.reference-ui .home-header{height:80px!important}.reference-ui .home-user-wrap{flex:1}.reference-ui .lesson-hero{padding:20px!important}.reference-ui .lesson-main-info h1{font-size:26px!important}.reference-ui .lesson-next{padding:16px!important}}
.sheet-overlay{z-index:100}.call-screen{z-index:150}#toast:not(:empty){z-index:200}
.reference-ui .lesson-main-info h1,.reference-ui .next-title,.reference-ui .news-article-title{font-weight:700!important}
.reference-ui .preview-composer-btn{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:white;flex-shrink:0}
.reference-ui .preview-composer-input{color:#94a3b8;font-size:12px}
.reference-ui .news-photo.school{min-height:140px;object-fit:cover}
.reference-ui .home-date-sub,.reference-ui .lesson-topic,.reference-ui .lesson-teacher-line,.reference-ui .lesson-progress-labels,.reference-ui .home-hw-text,.reference-ui .news-author-sub{font-weight:400!important}
@media(max-width:700px){
 .reference-ui .lesson-hero{margin-top:3px!important;padding-bottom:13px!important}
 .reference-ui .lesson-next{padding-bottom:12px!important;gap:13px!important}
 .reference-ui .next-info-chip{padding-left:6px!important;padding-right:6px!important}
 .reference-ui .home-user-wrap{gap:11.5px!important}
 .reference-ui .home-hw-item{padding-bottom:14px!important;gap:13.5px!important}
 .reference-ui .home-hw-top .hw-time-pill{padding-left:10px!important;padding-right:10px!important}
}
@media(max-width:360px){.reference-ui .next-badge-row{flex-wrap:wrap!important;gap:4px!important}.reference-ui .home-section-title-wrap{gap:5px!important}.reference-ui .section-link{font-size:11px!important}.reference-ui .home-hw-top{flex-wrap:wrap}}
.reference-ui .preview-composer-input{flex:1;min-width:0;text-align:left}
.reference-ui .chat-color-btn.selected .color-swatch-circle{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px #1767ef,0 4px 12px #0003!important}
.reference-ui .chat-color-btn.selected .color-name-text{color:#1767ef!important}
.dark .reference-ui .home-header,.dark .reference-ui .page-header{background:#1e293b!important;border-color:#334155!important}
.dark .reference-ui .home-greeting,.dark .reference-ui .home-section-title-wrap h2{color:#f8fafc!important}
.dark .reference-ui .home-date-sub{color:#94a3b8!important}
.dark .reference-ui .chat-color-btn.selected .color-swatch-circle{box-shadow:0 0 0 2.5px #1e293b,0 0 0 4.5px #60a5fa,0 4px 12px #0006!important}
@media(max-width:700px){.reference-ui .workspace,.reference-ui .settings-main{padding-bottom:110px!important}}

/* Welcome → role → sign in. Same palette and typography as the school screens. */
.onboarding.reference-ui{min-height:100dvh;display:grid;place-items:center;padding:28px 18px;background:linear-gradient(150deg,#eef4ff 0%,#f8faff 48%,#e9eeff 100%);position:relative;overflow:hidden;color:#14213a;font-family:SchoolRoboto,Arial,SchoolEmoji,sans-serif}
.onboarding .onboarding-glow{position:absolute;inset:-20%;background:radial-gradient(circle at 18% 20%,#c7d9ff88,transparent 35%),radial-gradient(circle at 80% 75%,#d9ccff88,transparent 32%);pointer-events:none;animation:school-glow 12s ease-in-out infinite alternate}
.onboarding .onboarding-panel{position:relative;width:100%;max-width:510px;padding:30px;background:#ffffffee;border:1px solid #fff;border-radius:30px;box-shadow:0 24px 80px #2b4e9620;z-index:1}
.onboarding .onboarding-brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:700;letter-spacing:-.3px}.onboarding-brand small{display:block;font-size:10px;color:#73829c;letter-spacing:2.3px;margin-top:4px}.onboarding .brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,#397bff,#7154e9);color:white;font-size:24px;box-shadow:0 6px 16px #476dee33}
.onboarding-progress{display:flex;justify-content:space-between;gap:5px;margin:27px 0 30px}.onboarding-progress>span{display:flex;align-items:center;gap:6px;font-size:11px;color:#8a95a8}.onboarding-progress i{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;font-size:11px;background:#edf1f7;font-style:normal}.onboarding-progress .current{color:#386bea}.onboarding-progress .current i{background:#e6eeff;color:#386bea}
.onboarding-content{animation:school-enter .35s ease both}.onboarding-content h1{font-size:29px;line-height:1.18;margin:12px 0;color:inherit;letter-spacing:-.6px}.onboarding-content .muted{font-size:14px;line-height:1.6;color:#718096}.onboarding-content .eyebrow{margin-top:24px;color:#5d79ba;font-size:11px;letter-spacing:1.4px}.onboarding-lead{font-size:23px;line-height:1.35;font-weight:500;margin:10px 0 15px;color:#31496f}
.welcome-symbol{width:106px;height:106px;display:grid;place-items:center;background:linear-gradient(140deg,#e4efff,#eee6ff);border:1px solid #fff;border-radius:29px;color:#4872ed;position:relative;margin:14px auto 24px;animation:school-float 4s ease-in-out infinite}.welcome-spark{position:absolute;right:-12px;top:1px;font-size:32px;color:#9a76f5;text-shadow:0 3px 15px #9a76f540}.welcome-features{display:flex;flex-wrap:wrap;gap:8px;margin:25px 0}.welcome-features span{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#54709d;background:#f1f5ff;border:1px solid #e7edfa;padding:9px 10px;border-radius:12px}
.onboarding .btn.primary{display:flex;justify-content:center;align-items:center;gap:12px;border:0;background:linear-gradient(110deg,#357cfa,#6261e9);color:#fff;border-radius:14px;padding:15px 20px;box-shadow:0 7px 18px #436df32b;font-size:15px;font-weight:600;transition:transform .18s,box-shadow .18s}.onboarding .btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px #436df33d}.onboarding .btn.primary:active{transform:translateY(0)}.onboarding-next,.onboarding .form-actions,.onboarding .form-actions>.btn{width:100%}.onboarding-footer{display:block;text-align:center;margin:28px 0 0;font-size:10px;letter-spacing:.3px;color:#9ba6b8}
.onboarding-back{display:flex;align-items:center;gap:7px;color:#647795;font-size:12px;padding:0;margin-bottom:20px;background:none;border:0;box-shadow:none}.role-options{display:grid;gap:10px;margin-top:22px}.role-option{width:100%;display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1px solid #e7ecf5;border-radius:16px;padding:14px;color:#263e64;cursor:pointer;transition:border-color .2s,transform .2s,background .2s;animation:school-enter .4s ease both}.role-option:nth-child(2){animation-delay:.04s}.role-option:nth-child(3){animation-delay:.08s}.role-option:nth-child(4){animation-delay:.12s}.role-option:nth-child(5){animation-delay:.16s}.role-option:hover,.role-option.chosen{border-color:#6391f8;background:#f4f7ff;transform:translateX(3px)}.role-option>span:nth-child(2){flex:1;min-width:0}.role-option strong{display:block;font-size:15px;font-weight:600}.role-option small{display:block;font-size:11px;line-height:1.4;margin-top:4px;color:#8490a6}.role-symbol{display:grid;place-items:center;flex-shrink:0;width:43px;height:43px;background:#edf3ff;border-radius:13px;color:#4d79ea}.selected-role{display:flex;align-items:center;gap:10px;color:#4475dc;font-size:15px;font-weight:600;margin-bottom:18px}.onboarding input{width:100%;padding:14px;background:#f8faff;border:1px solid #dfe7f4;border-radius:12px;color:inherit;font-family:inherit;font-size:15px}.onboarding label{font-size:12px;color:#60718e}.onboarding input:focus{outline:3px solid #4d82fa25;border-color:#6c98f5}.onboarding .form-error{font-size:12px;line-height:1.5}.login-help{font-size:12px;color:#8794aa;line-height:1.6;margin-top:16px}.onboarding button:focus-visible{outline:3px solid #91b3ff;outline-offset:3px}
.reference-ui .schedule-modes{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.reference-ui .schedule-modes .btn{flex:1;background:#fff;border:1px solid #e4eafa;color:#7384a0;white-space:normal}.reference-ui .schedule-modes .selected{background:#edf3ff;border-color:#b9cefc;color:#477aee}.reference-ui .schedule-note{color:#8793a9;font-size:12px;line-height:1.5;margin:0 0 16px}.reference-ui .lesson-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.reference-ui .lesson-actions .btn{font-size:10px;padding:6px 8px}.reference-ui .lesson-row{gap:9px}.reference-ui .lesson-row .grow{min-width:0}.reference-ui .lesson-row small{white-space:normal}
.reference-ui .workspace>.card,.reference-ui .workspace>.grid,.reference-ui .workspace>.lesson-hero{animation:school-enter .24s ease both}
html.dark .onboarding.reference-ui{background:linear-gradient(145deg,#101a31,#18233d);color:#e8efff}html.dark .onboarding-panel{background:#1b2941ed;border-color:#2b3b55;box-shadow:0 24px 80px #0004}html.dark .onboarding-glow{opacity:.15}html.dark .onboarding-lead{color:#bbcfff}html.dark .role-option{background:#20304b;border-color:#30425e;color:#e3edff}html.dark .role-option:hover{background:#2a3c5d}html.dark .role-symbol,html.dark .onboarding-progress i{background:#2c4163;color:#8cb4ff}html.dark .onboarding input{background:#16253f;border-color:#374d6d}html.dark .welcome-features span{background:#253b5d;border-color:#344c71;color:#b5c9f1}html.dark .reference-ui .schedule-modes .btn{background:#23354f;border-color:#354c6d;color:#bed2f4}html.dark .reference-ui .schedule-modes .selected{background:#32578c;color:#e0ecff}
@keyframes school-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}@keyframes school-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(2deg)}}@keyframes school-glow{from{transform:translate(-2%,0)}to{transform:translate(3%,3%)}}
@media(max-width:520px){.onboarding.reference-ui{padding:16px 12px;align-items:center}.onboarding .onboarding-panel{padding:25px 21px;border-radius:25px}.onboarding-progress{margin:24px 0}.onboarding-content h1{font-size:27px}.onboarding-lead{font-size:22px}.welcome-features{gap:6px}.welcome-features span{font-size:10px;padding:8px}.reference-ui .lesson-row{flex-wrap:wrap}.reference-ui .lesson-actions{margin-left:auto}.onboarding .role-options{gap:9px}.role-option{padding:12px}}
@media(prefers-reduced-motion:reduce){.onboarding *,.reference-ui .workspace>*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Professional UI refinements: hierarchy, search, staff workspace and small-screen access. */
.onboarding.reference-ui{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}.onboarding .onboarding-panel{margin:auto 0;flex-shrink:0}.onboarding .onboarding-glow{position:fixed;inset:0}
.reference-ui .staff-hub{margin:0 0 20px;padding:18px;background:linear-gradient(135deg,#fff,#f0f5ff);border:1px solid #e0e9fb;border-radius:22px;box-shadow:0 4px 16px #173c7910}.reference-ui .staff-hub h2{font-size:20px;margin:3px 0 0;color:#243a60}.reference-ui .staff-hub .eyebrow{font-size:10px;letter-spacing:1px;color:#7a8cb1}.reference-ui .hub-status{font-size:9px;color:#579681;display:flex;gap:5px;align-items:center;white-space:nowrap}.hub-status i{height:6px;width:6px;border-radius:50%;background:#40b58b;box-shadow:0 0 0 4px #40b58b15}.reference-ui .quick-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.reference-ui .quick-actions>button{display:flex;align-items:center;text-align:left;gap:8px;padding:12px 10px;border:1px solid #e5ecfa;border-radius:14px;background:#fff;box-shadow:0 2px 5px #325b9705;transition:transform .18s,border-color .18s}.reference-ui .quick-actions>button:hover{transform:translateY(-2px);border-color:#97b6f4}.reference-ui .quick-actions>button>span{width:32px;height:32px;border-radius:10px;background:#eef4ff;color:#5282e9;display:grid;place-items:center;flex-shrink:0}.reference-ui .quick-actions strong{font-size:11px;font-weight:600;flex:1;line-height:1.4}.reference-ui .quick-actions>button>svg{color:#9aabc7;flex-shrink:0}.reference-ui .search-card{padding:16px;background:#fdfefe}.reference-ui .search-card form{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;align-items:end;gap:8px}.reference-ui .search-card label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}.reference-ui .search-card .form-error:empty{display:none}.reference-ui .search-card .form-actions{margin:0}.reference-ui .search-card input,.reference-ui .search-card select{min-width:0;height:44px;background:#f8faff;border-radius:12px;font-size:12px}.reference-ui .search-card .btn{height:44px}.reference-ui .load-more{display:flex;margin:20px auto;min-width:160px}.contact-search{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.contact-search .label{flex-basis:100%;margin-bottom:-3px}.contact-search input{flex:1;min-width:100px}.member-option small{display:block;font-size:10px;margin-top:4px;color:var(--muted)}.member-option input{flex:0 0 auto}.session-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#edf4ff;color:#5a83d8;flex-shrink:0}.loading-state{display:flex;align-items:center;flex-direction:column;gap:10px;padding:70px 20px;color:#7e8ea7}.loading-state strong{font-size:14px;color:#4d658d}.loading-state small{font-size:11px}.loading-spinner{height:30px;width:30px;border:3px solid #e5edff;border-top-color:#5287f2;border-radius:50%;animation:school-spin .8s linear infinite}.connection-banner{display:none;position:fixed;left:0;right:0;top:0;padding:11px 16px;text-align:center;background:#b73248;color:white;font:12px SchoolRoboto,Arial,sans-serif;z-index:90}.is-offline .connection-banner{display:block}
html.dark .reference-ui .staff-hub{background:linear-gradient(135deg,#21324e,#1c2e4c);border-color:#344c72}html.dark .reference-ui .staff-hub h2{color:#e0eaff}html.dark .reference-ui .quick-actions>button{background:#253a58;border-color:#36516f;color:#dce9ff}html.dark .reference-ui .quick-actions>button>span{background:#2f4c75;color:#9abfff}html.dark .reference-ui .search-card{background:#22354f}html.dark .reference-ui .search-card input,html.dark .reference-ui .search-card select{background:#1b2a41;border-color:#3c5475;color:#e3eeff}
@keyframes school-spin{to{transform:rotate(360deg)}}@media(max-width:520px){.reference-ui .search-card form{grid-template-columns:minmax(0,1fr) auto}.reference-ui .search-card input{grid-column:1/-1}.reference-ui .search-card .form-error{grid-column:1/-1}.reference-ui .search-card select{width:100%}.reference-ui .staff-hub{padding:15px}.reference-ui .quick-actions>button{padding:10px 8px}.reference-ui .quick-actions strong{font-size:10px}.reference-ui .hub-status{font-size:8px}.reference-ui .section-head h1{font-size:22px}.reference-ui .section-head>.btn{flex-shrink:0}.onboarding .onboarding-panel{max-width:510px}}
@media(prefers-reduced-motion:reduce){.loading-spinner,.reference-ui .quick-actions>button{animation:none;transition:none}}

img.brand-mark{width:44px!important;height:44px!important;border-radius:50%!important;object-fit:cover;background:#fff!important;display:block;padding:0!important}