:root {
   color-scheme: light;
   --bg: #F5FAFF;
   --surface: #FFFFFF;
   --surface-2: #EDF7FF;
   --text: #102C52;
   --muted: #6580A2;
   --border: #D7E8F8;
   --primary: #08AEEF;
   --primary-2: #0B4DBD;
   --primary-deep: #06358F;
   --sidebar: #062B72;
   --sidebar-text: #EAF8FF;
   --shadow: 0 12px 34px rgba(6, 53, 143, .10);
   --danger-bg: #FEE2E2;
   --danger: #991B1B;
   --ok-bg: #DCFCE7;
   --ok: #166534;
   --warning-bg: #FEF3C7;
   --warning: #92400E
}

html[data-theme="dark"] {
   color-scheme: dark;
   --bg: #06142C;
   --surface: #0B2146;
   --surface-2: #0E2E60;
   --text: #EAF7FF;
   --muted: #9CB7D9;
   --border: #194C8A;
   --primary: #19C2FF;
   --primary-2: #2D75E8;
   --primary-deep: #0B4DBD;
   --sidebar: #031A49;
   --sidebar-text: #EAF8FF;
   --shadow: 0 12px 34px rgba(0, 0, 0, .28);
   --danger-bg: #3B151B;
   --danger: #FECACA;
   --ok-bg: #0F3528;
   --ok: #BBF7D0;
   --warning-bg: #3B2D10;
   --warning: #FDE68A
}

* {
   box-sizing: border-box
}

html {
   background: var(--bg)
}

body {
   margin: 0;
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: var(--bg);
   color: var(--text);
   transition: background .2s, color .2s
}

a {
   color: inherit
}

.app {
   display: grid;
   grid-template-columns: 260px 1fr;
   min-height: 100vh
}

.side {
   background: linear-gradient(180deg, #062B72 0%, #073FAF 54%, #041D54 100%);
   color: var(--sidebar-text);
   padding: 22px 18px;
   position: sticky;
   top: 0;
   height: 100vh;
   overflow: auto
}

.brand {
   display: flex;
   gap: 10px;
   align-items: center;
   font-weight: 850;
   font-size: 20px;
   margin-bottom: 24px
}

.brand b {
   display: grid;
   place-items: center;
   width: 36px;
   height: 36px;
   border-radius: 12px;
   background: #19C2FF;
   color: #06358F
}

.nav-title {
   font-size: 10px;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #8290a5;
   margin: 20px 12px 7px;
   font-weight: 800
}

.nav a {
   display: flex;
   gap: 9px;
   padding: 10px 12px;
   border-radius: 10px;
   text-decoration: none;
   margin: 3px 0;
   color: #cbd5e1
}

.nav a:hover,
.nav a.active {
   background: rgba(8, 174, 239, .18);
   color: white;
   box-shadow: inset 3px 0 0 #19C2FF
}

.main {
   padding: 28px;
   min-width: 0
}

.top {
   display: flex;
   justify-content: space-between;
   gap: 18px;
   align-items: center;
   margin-bottom: 24px
}

.title h1 {
   margin: 0;
   font-size: 27px
}

.muted {
   color: var(--muted)
}

.grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 16px
}

.col-3 {
   grid-column: span 3
}

.col-4 {
   grid-column: span 4
}

.col-5 {
   grid-column: span 5
}

.col-6 {
   grid-column: span 6
}

.col-7 {
   grid-column: span 7
}

.col-8 {
   grid-column: span 8
}

.col-9 {
   grid-column: span 9
}

.col-12 {
   grid-column: span 12
}

.card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 17px;
   padding: 18px;
   box-shadow: var(--shadow)
}

.card h2,
.card h3 {
   margin-top: 0
}

.stat {
   font-size: 30px;
   font-weight: 850;
   margin-top: 8px
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
   border: 0;
   border-radius: 10px;
   padding: 10px 14px;
   text-decoration: none;
   font-weight: 750;
   cursor: pointer;
   font: inherit
}

.btn.primary {
   background: linear-gradient(135deg, #0B4DBD 0%, #08AEEF 100%);
   color: #fff;
   box-shadow: 0 9px 22px rgba(8, 174, 239, .18)
}

.btn.secondary {
   background: var(--surface-2);
   color: var(--text);
   border: 1px solid var(--border)
}

.btn.danger {
   background: var(--danger-bg);
   color: var(--danger)
}

.btn.warning {
   background: var(--warning-bg);
   color: var(--warning)
}

.btn.small {
   padding: 7px 10px;
   font-size: 13px
}

.row {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-wrap: wrap
}

.spread {
   justify-content: space-between
}

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

.form-grid .full {
   grid-column: 1/-1
}

label {
   display: block;
   font-size: 13px;
   font-weight: 700;
   color: var(--muted);
   margin-bottom: 11px
}

input,
select,
textarea {
   width: 100%;
   margin-top: 6px;
   padding: 10px 11px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface);
   color: var(--text);
   font: inherit;
   outline: none
}

input:focus,
select:focus,
textarea:focus {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)
}

textarea {
   min-height: 96px;
   resize: vertical
}

.table-wrap {
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 12px
}

table {
   width: 100%;
   border-collapse: collapse;
   min-width: 680px
}

th,
td {
   padding: 11px 10px;
   border-bottom: 1px solid var(--border);
   text-align: left;
   font-size: 14px;
   vertical-align: top
}

tr:last-child td {
   border-bottom: 0
}

th {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--muted);
   background: var(--surface-2)
}

.badge {
   display: inline-block;
   border-radius: 999px;
   padding: 5px 9px;
   font-size: 11px;
   font-weight: 850;
   background: var(--surface-2);
   border: 1px solid var(--border)
}

.badge.open,
.badge.present,
.badge.published,
.badge.paid,
.badge.active,
.badge.turned_in {
   background: var(--ok-bg);
   color: var(--ok)
}

.badge.late,
.badge.pending,
.badge.missing {
   background: var(--warning-bg);
   color: var(--warning)
}

.badge.absent,
.badge.cancelled,
.badge.failed,
.badge.expired,
.badge.closed {
   background: var(--danger-bg);
   color: var(--danger)
}

.badge.returned {
   background: #e0e7ff;
   color: #3730a3
}

.notice {
   padding: 12px 14px;
   border-radius: 12px;
   margin-bottom: 16px
}

.notice.ok {
   background: var(--ok-bg);
   color: var(--ok)
}

.notice.err {
   background: var(--danger-bg);
   color: var(--danger)
}

.notice.warn {
   background: var(--warning-bg);
   color: var(--warning)
}

.hero {
   background: linear-gradient(135deg, #06358F 0%, #0B4DBD 48%, #08AEEF 100%);
   color: white;
   padding: 26px;
   border-radius: 18px
}

.hero .muted {
   color: #DDF4FF
}

.kpi {
   font-size: 13px;
   color: var(--muted)
}

.actions {
   display: flex;
   gap: 6px;
   flex-wrap: wrap
}

.login-page {
   min-height: 100vh;
   display: grid;
   place-items: center;
   background: radial-gradient(circle at top left, color-mix(in srgb, var(--primary) 14%, var(--bg)), var(--bg) 52%);
   padding: 20px
}

.login {
   width: min(460px, 100%)
}

.codebox {
   background: var(--surface-2);
   border: 1px dashed var(--border);
   padding: 12px;
   border-radius: 10px;
   word-break: break-all
}

.mobile-toggle {
   display: none
}

.print-only {
   display: none
}

.theme-toggle {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   padding: 0;
   font-size: 18px
}

.qr-card {
   text-align: center
}

.qr-box {
   display: inline-flex;
   background: white;
   padding: 14px;
   border-radius: 18px;
   border: 1px solid #e5e7eb;
   margin: 8px auto 12px;
   min-width: 248px;
   min-height: 248px;
   align-items: center;
   justify-content: center
}

.qr-box img,
.qr-box canvas {
   max-width: 220px !important;
   max-height: 220px !important
}

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

.plan {
   position: relative;
   display: flex;
   flex-direction: column
}

.plan.popular {
   border: 2px solid var(--primary)
}

.plan-tag {
   position: absolute;
   top: 12px;
   right: 12px
}

.price {
   font-size: 34px;
   font-weight: 900;
   margin: 10px 0
}

.feature-list {
   padding-left: 19px;
   color: var(--muted);
   line-height: 1.8;
   flex: 1
}

.stream-item {
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 12px;
   padding: 15px 0;
   border-bottom: 1px solid var(--border)
}

.stream-item:last-child {
   border-bottom: 0
}

.avatar {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--surface-2);
   font-weight: 850
}

.assignment-card {
   border-left: 4px solid var(--primary)
}

.submission-file {
   display: inline-flex;
   gap: 8px;
   align-items: center;
   padding: 9px 11px;
   border: 1px solid var(--border);
   border-radius: 10px;
   text-decoration: none;
   background: var(--surface-2)
}

.divider {
   height: 1px;
   background: var(--border);
   margin: 18px 0
}

.progress {
   height: 8px;
   background: var(--surface-2);
   border-radius: 99px;
   overflow: hidden
}

.progress>span {
   display: block;
   height: 100%;
   background: var(--primary)
}

.side-user {
   margin-top: 28px;
   border-top: 1px solid #263248;
   padding-top: 18px
}

.side-user .email {
   font-size: 12px;
   color: #8fa0b7
}

.subscription-pill {
   font-size: 11px;
   padding: 6px 8px;
   background: rgba(8, 174, 239, .16);
   border: 1px solid rgba(25, 194, 255, .22);
   border-radius: 8px;
   margin-top: 8px;
   color: #DDF4FF
}

.swal2-popup {
   font-family: inherit !important;
   background: var(--surface) !important;
   color: var(--text) !important
}

.swal2-title,
.swal2-html-container {
   color: var(--text) !important
}

@media(max-width: 1000px) {
   .pricing {
      grid-template-columns: 1fr 1fr
   }

   .app {
      display: block
   }

   .side {
      position: fixed;
      z-index: 30;
      left: -280px;
      width: 260px;
      transition: .2s
   }

   .side.open {
      left: 0
   }

   .main {
      padding: 18px
   }

   .mobile-toggle {
      display: inline-flex
   }

   .col-3,
   .col-4,
   .col-5,
   .col-6,
   .col-7,
   .col-8,
   .col-9 {
      grid-column: span 12
   }

   .form-grid {
      grid-template-columns: 1fr
   }

   .top {
      align-items: flex-start
   }

   .title h1 {
      font-size: 23px
   }
}

@media(max-width: 640px) {
   .pricing {
      grid-template-columns: 1fr
   }

   .main {
      padding: 14px
   }

   .top {
      gap: 10px
   }

   .card {
      padding: 15px
   }

   .qr-box {
      min-width: 220px;
      min-height: 220px
   }

   .qr-box img,
   .qr-box canvas {
      max-width: 190px !important;
      max-height: 190px !important
   }

   .price {
      font-size: 30px
   }
}

@media print {

   .side,
   .top .actions,
   .no-print,
   .btn {
      display: none !important
   }

   .app {
      display: block
   }

   .main {
      padding: 0
   }

   .card {
      box-shadow: none
   }

   .print-only {
      display: block
   }
}

/* Legacy v2.1 - professional navigation & notifications */
.nav a {
   align-items: center;
   gap: 11px;
   position: relative;
   font-weight: 650
}

.nav a i {
   width: 20px;
   text-align: center;
   font-size: 16px;
   color: #91a4bc;
   transition: .18s
}

.nav a:hover i,
.nav a.active i {
   color: #19C2FF
}

.nav a.active:before {
   content: "";
   position: absolute;
   left: -18px;
   top: 9px;
   bottom: 9px;
   width: 3px;
   border-radius: 4px;
   background: #19C2FF
}

.side-user-head {
   display: flex;
   align-items: center;
   gap: 10px
}

.user-avatar {
   width: 36px;
   height: 36px;
   border-radius: 11px;
   display: grid;
   place-items: center;
   background: #073FAF;
   color: #B8ECFF
}

.subscription-pill {
   display: flex;
   align-items: center;
   gap: 6px
}

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

.notify-class-card {
   display: grid;
   grid-template-columns: 44px 1fr 20px;
   align-items: center;
   gap: 12px;
   padding: 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
   text-decoration: none;
   background: var(--surface);
   transition: .18s
}

.notify-class-card:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
   box-shadow: var(--shadow)
}

.notify-class-card small {
   display: block;
   margin-top: 4px;
   color: var(--muted)
}

.notify-class-icon {
   width: 44px;
   height: 44px;
   border-radius: 13px;
   display: grid;
   place-items: center;
   background: color-mix(in srgb, var(--primary) 12%, var(--surface));
   color: var(--primary);
   font-size: 19px
}

.contact-stat {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 11px 0;
   border-bottom: 1px solid var(--border)
}

.contact-stat span {
   display: flex;
   align-items: center;
   gap: 8px
}

.contact-stat:last-of-type {
   border-bottom: 0
}

.notify-big-icon {
   font-size: 30px;
   color: var(--primary);
   opacity: .8
}

.channel-picker {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px;
   margin-top: 8px
}

.channel-option {
   display: grid;
   grid-template-columns: auto 42px 1fr;
   gap: 10px;
   align-items: center;
   border: 1px solid var(--border);
   border-radius: 13px;
   padding: 12px;
   margin: 0;
   background: var(--surface-2);
   cursor: pointer
}

.channel-option input {
   width: auto;
   margin: 0
}

.channel-option small {
   display: block;
   margin-top: 2px;
   font-weight: 500;
   color: var(--muted)
}

.channel-icon {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   display: grid;
   place-items: center;
   background: #eaf2ff;
   color: #1d4ed8;
   font-size: 18px
}

.channel-icon.whatsapp {
   background: #dcfce7;
   color: #15803d
}

.error-detail {
   max-width: 420px;
   white-space: pre-wrap;
   font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--danger);
   background: var(--danger-bg);
   padding: 8px;
   border-radius: 8px
}

.switch-row {
   padding: 11px 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2);
   margin-bottom: 14px
}

.qr-card .actions,
.qr-card .row {
   row-gap: 8px
}

@media(max-width: 760px) {

   .notify-class-grid,
   .channel-picker {
      grid-template-columns: 1fr
   }

   .nav a {
      padding: 11px 12px
   }

   .notify-class-card {
      grid-template-columns: 42px 1fr 18px
   }
}

.publish-notify-box {
   border: 1px solid var(--border);
   background: var(--surface-2);
   padding: 12px;
   border-radius: 12px;
   margin: 4px 0 14px
}

.publish-notify-box label {
   margin: 7px 0
}

.contact-ok {
   display: inline-flex;
   gap: 6px;
   align-items: center;
   color: var(--text)
}

.contact-ok i {
   color: var(--primary)
}

.inline-edit {
   position: relative
}

.inline-edit summary {
   list-style: none
}

.inline-edit summary::-webkit-details-marker {
   display: none
}

.inline-edit-panel {
   position: absolute;
   right: 0;
   top: 40px;
   z-index: 20;
   width: 300px;
   padding: 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface);
   box-shadow: 0 18px 46px rgba(0, 0, 0, .18)
}

@media(max-width: 640px) {
   .inline-edit-panel {
      position: fixed;
      left: 14px;
      right: 14px;
      top: 90px;
      width: auto
   }
}

/* ============================================================
   Legacy v2.2 - mobile fixed header, profile photo & trial UI
   ============================================================ */
.user-avatar-photo {
   overflow: hidden;
   text-decoration: none;
   flex: 0 0 auto
}

.user-avatar-photo img,
.top-profile-link img,
.profile-photo-preview img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.user-avatar-photo span {
   font-size: 12px;
   font-weight: 900
}

.side-user-meta {
   min-width: 0
}

.side-user-name {
   font-weight: 800;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.top-profile-link {
   width: 42px;
   height: 42px;
   border-radius: 13px;
   overflow: hidden;
   display: grid;
   place-items: center;
   text-decoration: none;
   background: var(--surface-2);
   border: 1px solid var(--border);
   font-size: 12px;
   font-weight: 900;
   color: var(--text);
   flex: 0 0 auto
}

.top-profile-link:hover {
   border-color: color-mix(in srgb, var(--primary) 55%, var(--border))
}

.profile-photo-editor {
   display: grid;
   grid-template-columns: 116px 1fr;
   gap: 18px;
   align-items: center
}

.profile-photo-preview {
   width: 116px;
   height: 116px;
   border-radius: 24px;
   overflow: hidden;
   background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 18%, var(--surface-2)), var(--surface-2));
   border: 1px solid var(--border);
   display: grid;
   place-items: center;
   font-size: 30px;
   font-weight: 900;
   color: var(--primary)
}

.profile-photo-fields {
   min-width: 0
}

.trial-admin-box {
   padding: 13px;
   border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
   border-radius: 13px;
   background: color-mix(in srgb, var(--primary) 6%, var(--surface));
   margin: 4px 0 12px
}

.badge.trial {
   background: #ede9fe;
   color: #6d28d9;
   border-color: #ddd6fe
}

.plan-badges {
   min-height: 30px;
   margin-bottom: 4px
}

.plan-actions {
   display: grid;
   gap: 9px;
   margin-top: 16px
}

.feature-list li {
   margin-bottom: 3px
}

.feature-list li i {
   color: var(--primary);
   margin-right: 3px
}

.btn:disabled {
   opacity: .55;
   cursor: not-allowed;
   filter: saturate(.55)
}

html[data-theme="dark"] .badge.trial {
   background: #2e2150;
   color: #ddd6fe;
   border-color: #4c367c
}

@media(max-width: 1000px) {
   .top {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 25;
      margin: 0;
      padding: 11px 16px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      align-items: center;
      min-height: 72px
   }

   .main {
      padding-top: 96px
   }

   .top-left {
      min-width: 0;
      flex-wrap: nowrap
   }

   .top .title {
      min-width: 0
   }

   .top .title h1 {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
   }

   .top-subtitle {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 52vw
   }

   .top-actions {
      flex-wrap: nowrap;
      margin-left: auto;
      max-width: 52vw;
      overflow-x: auto;
      scrollbar-width: none
   }

   .top-actions::-webkit-scrollbar {
      display: none
   }

   .top-actions .btn {
      white-space: nowrap;
      flex: 0 0 auto
   }
}

@media(max-width: 640px) {
   .main {
      padding: 88px 14px 14px
   }

   .top {
      min-height: 66px;
      padding: 9px 12px;
      gap: 8px
   }

   .top .title h1 {
      font-size: 18px;
      line-height: 1.15
   }

   .top-subtitle {
      display: none
   }

   .mobile-toggle,
   .theme-toggle,
   .top-profile-link {
      width: 40px;
      height: 40px;
      padding: 0
   }

   .profile-photo-editor {
      grid-template-columns: 1fr;
      text-align: center
   }

   .profile-photo-preview {
      margin: 0 auto
   }

   .profile-photo-fields {
      text-align: left
   }

   .side {
      z-index: 35
   }
}

.student-modal {
   width: min(520px, calc(100% - 28px));
   padding: 0;
   border: 0;
   border-radius: 18px;
   background: var(--surface);
   color: var(--text);
   box-shadow: 0 25px 90px rgba(0, 0, 0, .28)
}

.student-modal::backdrop {
   background: rgba(15, 23, 42, .62);
   backdrop-filter: blur(4px)
}

.student-modal form {
   margin: 0
}

.student-modal-header,
.student-modal-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 18px 20px;
   border-bottom: 1px solid var(--border)
}

.student-modal-footer {
   border-bottom: 0;
   border-top: 1px solid var(--border);
   justify-content: flex-end
}

.student-modal-header h3 {
   margin: 4px 0 0
}

.student-modal-body {
   padding: 20px
}

.modal-close {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   border: 1px solid var(--border);
   background: var(--surface-2);
   color: var(--text);
   cursor: pointer
}

.eyebrow {
   font-size: 10px;
   letter-spacing: .12em;
   font-weight: 850;
   color: var(--primary)
}

/* ============================================================
   Legacy v2.3 - multi-period billing discounts
============================================================ */
.discount-admin-box {
   padding: 14px;
   border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
   border-radius: 14px;
   background: color-mix(in srgb, var(--primary) 5%, var(--surface));
   margin: 8px 0 14px
}

.billing-direct-pay {
   margin-top: 10px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2)
}

.billing-direct-pay>summary {
   cursor: pointer;
   padding: 11px 12px;
   text-align: center;
   font-size: 13px;
   font-weight: 750;
   color: var(--muted);
   list-style: none
}

.billing-direct-pay>summary::-webkit-details-marker {
   display: none
}

.billing-direct-pay[open]>summary {
   border-bottom: 1px solid var(--border)
}

.billing-period-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
   margin-top: 10px
}

.billing-direct-pay .billing-period-grid {
   padding: 10px;
   margin-top: 0
}

.billing-period-card {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 6px;
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface);
   margin: 0
}

.billing-period-card.best-value {
   border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 9%, transparent)
}

.billing-period-title {
   gap: 6px
}

.discount-chip {
   display: inline-flex;
   padding: 4px 7px;
   border-radius: 999px;
   background: var(--ok-bg);
   color: var(--ok);
   font-size: 11px;
   font-weight: 900
}

.billing-normal-price {
   text-decoration: line-through;
   color: var(--muted);
   font-size: 13px
}

.billing-final-price {
   font-size: 20px;
   font-weight: 900;
   color: var(--text)
}

.billing-saving {
   font-size: 11px;
   line-height: 1.45;
   min-height: 31px
}

.billing-period-card .btn {
   width: 100%;
   margin-top: 3px
}

.best-value-label {
   position: absolute;
   top: -9px;
   right: 10px;
   background: var(--primary);
   color: #fff;
   border-radius: 999px;
   padding: 3px 7px;
   font-size: 9px;
   font-weight: 900;
   letter-spacing: .04em;
   text-transform: uppercase
}

.billing-summary-box {
   padding: 14px;
   border-radius: 14px;
   border: 1px solid var(--border);
   background: var(--surface-2);
   margin-bottom: 14px
}

.billing-summary-box .row {
   margin: 5px 0
}

.discount-text {
   color: var(--ok);
   font-weight: 800
}

.small-price {
   font-size: 11px;
   margin-top: 2px
}

.discount-preview-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 7px;
   margin-top: 10px
}

.discount-preview-grid>div {
   padding: 9px;
   border: 1px solid var(--border);
   border-radius: 10px;
   background: var(--surface);
   display: grid;
   gap: 2px
}

.discount-preview-grid span {
   font-size: 11px;
   color: var(--ok);
   font-weight: 850
}

.discount-preview-grid small {
   font-weight: 800
}

@media(max-width: 640px) {
   .billing-period-grid {
      grid-template-columns: 1fr
   }

   .discount-preview-grid {
      grid-template-columns: 1fr 1fr
   }

   .billing-final-price {
      font-size: 22px
   }
}

/* ============================================================
   Legacy v2.4 - Meeting reports, photos & PDF
============================================================ */
.report-meta-list {
   display: grid;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: 13px;
   overflow: hidden
}

.report-meta-list>div {
   display: grid;
   grid-template-columns: 105px 1fr;
   gap: 10px;
   padding: 10px 11px;
   border-bottom: 1px solid var(--border);
   font-size: 13px
}

.report-meta-list>div:last-child {
   border-bottom: 0
}

.report-meta-list span {
   color: var(--muted)
}

.report-meta-list strong {
   min-width: 0;
   overflow-wrap: anywhere
}

.report-attendance-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 7px
}

.report-attendance-grid>div {
   padding: 10px 5px;
   border: 1px solid var(--border);
   border-radius: 11px;
   text-align: center;
   background: var(--surface-2)
}

.report-attendance-grid b {
   display: block;
   font-size: 20px
}

.report-attendance-grid span {
   display: block;
   font-size: 10px;
   color: var(--muted);
   margin-top: 2px
}

.report-attendance-grid .ok b {
   color: var(--ok)
}

.report-attendance-grid .warning b {
   color: var(--warning)
}

.report-attendance-grid .danger b {
   color: var(--danger)
}

.report-journal-note {
   padding: 12px;
   border-radius: 12px;
   background: var(--surface-2);
   border: 1px solid var(--border);
   white-space: pre-wrap;
   line-height: 1.6;
   font-size: 13px
}

.report-form-heading {
   margin-bottom: 15px
}

.meeting-photo-section {
   margin-top: 18px;
   padding-top: 18px;
   border-top: 1px solid var(--border)
}

.meeting-photo-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   margin: 13px 0
}

.meeting-photo-item {
   border: 1px solid var(--border);
   border-radius: 13px;
   overflow: hidden;
   background: var(--surface-2);
   min-width: 0
}

.meeting-photo-preview {
   display: block
}

.meeting-photo-item img {
   display: block;
   width: 100%;
   height: 145px;
   object-fit: cover;
   background: var(--surface-2)
}

.meeting-photo-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 8px;
   padding: 8px 9px
}

.meeting-photo-info small {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0
}

.meeting-photo-uploader {
   display: flex;
   flex-direction: column;
   gap: 4px;
   padding: 18px;
   border: 1.5px dashed color-mix(in srgb, var(--primary) 50%, var(--border));
   border-radius: 14px;
   background: color-mix(in srgb, var(--primary) 4%, var(--surface));
   cursor: pointer;
   margin-top: 12px
}

.meeting-photo-uploader>span {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 800;
   color: var(--primary)
}

.meeting-photo-uploader>small {
   color: var(--muted)
}

.meeting-photo-uploader input {
   margin-top: 8px;
   background: var(--surface)
}

.new-photo-preview .pending {
   border-style: dashed;
   border-color: color-mix(in srgb, var(--primary) 55%, var(--border))
}

.report-save-actions {
   margin-top: 18px;
   padding-top: 16px;
   border-top: 1px solid var(--border)
}

.meeting-report-info {
   display: flex;
   gap: 11px;
   align-items: flex-start;
   padding: 12px;
   border-radius: 13px;
   background: var(--surface-2);
   border: 1px solid var(--border)
}

.meeting-report-info>i {
   font-size: 22px;
   color: var(--primary)
}

.meeting-report-info small {
   display: block;
   color: var(--muted);
   line-height: 1.5;
   margin-top: 3px
}

.meeting-row-actions {
   flex-wrap: wrap
}

.empty-state {
   display: grid;
   place-items: center;
   text-align: center;
   gap: 5px;
   padding: 35px;
   color: var(--muted)
}

.empty-state>i {
   font-size: 30px;
   color: var(--primary)
}

.empty-state>b {
   color: var(--text)
}

@media(max-width: 900px) {

   .meeting-report-layout>.col-4,
   .meeting-report-layout>.col-8 {
      grid-column: span 12
   }

   .meeting-photo-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }

   .report-attendance-grid {
      grid-template-columns: repeat(5, 1fr)
   }
}

@media(max-width: 640px) {
   .meeting-photo-grid {
      grid-template-columns: 1fr 1fr
   }

   .meeting-photo-item img {
      height: 120px
   }

   .report-attendance-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .report-save-actions {
      align-items: stretch
   }

   .report-save-actions>.actions {
      width: 100%
   }

   .report-save-actions>.actions .btn {
      flex: 1
   }

   .report-meta-list>div {
      grid-template-columns: 90px 1fr
   }
}

/* ============================================================
   Legacy v2.5 - Teaching material PDF gallery
============================================================ */
.material-class-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px
}

.material-class-card {
   display: grid;
   grid-template-columns: 48px 1fr 20px;
   align-items: center;
   gap: 12px;
   padding: 15px;
   border: 1px solid var(--border);
   border-radius: 15px;
   text-decoration: none;
   background: var(--surface);
   transition: .18s
}

.material-class-card:hover {
   transform: translateY(-1px);
   border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
   box-shadow: var(--shadow)
}

.material-class-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   background: color-mix(in srgb, #dc2626 10%, var(--surface));
   color: #dc2626;
   font-size: 22px
}

.material-class-meta {
   min-width: 0
}

.material-class-meta>b {
   display: block;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.material-class-meta>small {
   display: block;
   color: var(--muted);
   margin-top: 3px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.material-check-row {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 10px;
   align-items: flex-start;
   padding: 11px 12px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2);
   cursor: pointer
}

.material-check-row input {
   width: auto;
   margin: 3px 0 0
}

.material-check-row b {
   display: block;
   color: var(--text)
}

.material-check-row small {
   display: block;
   margin-top: 2px;
   font-weight: 500;
   color: var(--muted)
}

.teaching-material-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 13px
}

.teaching-material-card {
   border: 1px solid var(--border);
   border-radius: 16px;
   overflow: hidden;
   background: var(--surface);
   min-width: 0;
   box-shadow: 0 5px 18px rgba(15, 23, 42, .04)
}

.teaching-material-cover {
   height: 92px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   background: linear-gradient(135deg, color-mix(in srgb, #dc2626 9%, var(--surface-2)), var(--surface-2));
   border-bottom: 1px solid var(--border)
}

.teaching-material-cover>i {
   font-size: 38px;
   color: #dc2626
}

.teaching-material-body {
   padding: 14px
}

.teaching-material-body h3 {
   font-size: 17px;
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.material-meta-line {
   font-size: 12px;
   margin-top: 5px
}

.material-description {
   font-size: 13px;
   line-height: 1.55;
   color: var(--muted);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   min-height: 40px
}

.material-metrics {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   font-size: 11px;
   color: var(--muted);
   padding: 9px 0;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border)
}

.material-url-label {
   margin-top: 10px
}

.material-url-row {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 6px;
   align-items: center
}

.material-url-row input {
   margin: 6px 0 0;
   font-size: 11px;
   background: var(--surface-2)
}

.material-url-row .btn {
   margin-top: 6px;
   height: 39px
}

.material-actions {
   margin-top: 12px
}

.material-empty {
   grid-column: 1/-1;
   border: 1px dashed var(--border);
   border-radius: 14px
}

.badge.draft {
   background: var(--surface-2);
   color: var(--muted)
}

@media(max-width: 900px) {

   .material-class-grid,
   .teaching-material-grid {
      grid-template-columns: 1fr
   }
}

@media(max-width: 640px) {
   .material-class-card {
      grid-template-columns: 42px 1fr 16px;
      padding: 12px
   }

   .material-class-icon {
      width: 42px;
      height: 42px
   }

   .material-actions .btn {
      flex: 1
   }

   .material-actions form {
      display: flex;
      flex: 1
   }

   .material-actions form .btn {
      width: 100%
   }
}

/* ============================================================
   Legacy v2.6 - Digital Teaching Assistant
============================================================ */
.smart-filter-card {
   margin-bottom: 16px
}

.smart-class-meta {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.smart-class-meta span {
   padding: 7px 10px;
   border: 1px solid var(--border);
   border-radius: 999px;
   background: var(--surface-2);
   font-size: 12px;
   color: var(--muted);
   font-weight: 750
}

.smart-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   display: grid;
   place-items: center;
   background: color-mix(in srgb, var(--primary) 12%, var(--surface));
   color: var(--primary);
   font-size: 22px
}

.smart-icon.warning {
   background: var(--warning-bg);
   color: var(--warning)
}

.smart-reminder-item {
   padding: 13px 0;
   border-bottom: 1px solid var(--border)
}

.smart-reminder-item:last-child {
   border-bottom: 0
}

.smart-reminder-count {
   font-size: 13px;
   color: var(--muted);
   margin: 9px 0
}

.smart-channel {
   font-size: 12px;
   margin: 0
}

.smart-channel input {
   width: auto;
   margin: 0
}

.risk-pill {
   display: inline-flex;
   align-items: center;
   border-radius: 999px;
   padding: 5px 9px;
   font-size: 11px;
   font-weight: 900;
   border: 1px solid var(--border)
}

.risk-pill.high {
   background: var(--danger-bg);
   color: var(--danger)
}

.risk-pill.medium {
   background: var(--warning-bg);
   color: var(--warning)
}

.risk-pill.low {
   background: var(--ok-bg);
   color: var(--ok)
}

.ai-capability-list {
   display: grid;
   gap: 10px
}

.ai-capability-list>div {
   display: grid;
   grid-template-columns: 38px 1fr;
   gap: 10px;
   align-items: start;
   padding: 11px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface-2)
}

.ai-capability-list>div>i {
   width: 38px;
   height: 38px;
   display: grid;
   place-items: center;
   border-radius: 10px;
   background: color-mix(in srgb, var(--primary) 12%, var(--surface));
   color: var(--primary);
   font-size: 18px
}

.ai-capability-list b,
.ai-capability-list small {
   display: block
}

.ai-capability-list small {
   margin-top: 3px;
   color: var(--muted);
   line-height: 1.45
}

.ai-review-box {
   padding: 10px;
   border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
   border-radius: 11px;
   background: color-mix(in srgb, var(--primary) 6%, var(--surface));
   margin-bottom: 8px;
   max-width: 420px
}

.ai-review-feedback {
   font-size: 12px;
   line-height: 1.55;
   white-space: pre-wrap;
   margin: 7px 0;
   color: var(--text)
}

.ai-context-editor {
   margin-top: 10px;
   border: 1px solid var(--border);
   border-radius: 11px;
   background: var(--surface-2)
}

.ai-context-editor>summary {
   cursor: pointer;
   padding: 9px 10px;
   font-size: 12px;
   font-weight: 800;
   color: var(--primary);
   list-style: none
}

.ai-context-editor>summary::-webkit-details-marker {
   display: none
}

.ai-context-editor form {
   padding: 0 10px 10px
}

.ai-context-editor textarea {
   background: var(--surface);
   font-size: 12px
}

.public-ai-body {
   min-height: 100vh;
   background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 8%, var(--bg)), var(--bg));
   padding: 32px 16px
}

.public-ai-shell {
   width: min(760px, 100%);
   margin: 0 auto
}

.public-ai-head {
   display: flex;
   gap: 14px;
   align-items: center;
   margin-bottom: 18px
}

.public-ai-head h1 {
   margin: 2px 0 3px;
   font-size: 28px
}

.public-ai-head p {
   margin: 0;
   color: var(--muted)
}

.public-ai-logo {
   width: 56px;
   height: 56px;
   border-radius: 17px;
   display: grid;
   place-items: center;
   background: var(--primary);
   color: white;
   font-size: 25px;
   box-shadow: var(--shadow)
}

.public-ai-chat {
   display: grid;
   gap: 10px;
   margin: 16px 0
}

.ai-chat-question,
.ai-chat-answer {
   padding: 14px 16px;
   border-radius: 16px;
   border: 1px solid var(--border)
}

.ai-chat-question {
   background: var(--surface-2);
   margin-left: 40px
}

.ai-chat-question p {
   margin: 5px 0 0
}

.ai-chat-answer {
   background: var(--surface);
   box-shadow: var(--shadow);
   margin-right: 40px
}

.ai-chat-answer .row i {
   color: var(--primary)
}

.ai-answer-text {
   white-space: pre-wrap;
   line-height: 1.7;
   margin-top: 8px
}

.public-ai-foot {
   text-align: center;
   color: var(--muted);
   font-size: 12px;
   padding: 18px 0
}

.btn[disabled] {
   opacity: .55;
   cursor: not-allowed;
   pointer-events: none
}

@media(max-width: 900px) {
   .smart-overview-grid>.col-4 {
      grid-column: span 12
   }

   .smart-filter-card .spread {
      align-items: stretch
   }

   .smart-class-meta {
      width: 100%
   }
}

@media(max-width: 640px) {
   .ai-chat-question {
      margin-left: 10px
   }

   .ai-chat-answer {
      margin-right: 10px
   }

   .public-ai-body {
      padding: 18px 12px
   }

   .public-ai-head h1 {
      font-size: 22px
   }
}

/* ViaEdu v3.3 - royal blue + cyan education system */
.brand-lockup {
   margin-bottom: 22px;
   text-decoration: none;
   color: white;
   gap: 11px
}

.brand-lockup .brand-mark {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: #fff;
   display: grid;
   place-items: center;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, .14)
}

.brand-lockup .brand-mark img {
   width: 42px;
   height: 42px;
   object-fit: contain
}

.brand-lockup strong {
   display: block;
   font-size: 21px;
   line-height: 1
}

.brand-lockup small {
   display: block;
   margin-top: 5px;
   color: #9FE8FF;
   font-size: 10px;
   letter-spacing: .08em;
   text-transform: uppercase
}

.top-profile-link {
   width: 42px;
   height: 42px;
   border-radius: 13px;
   display: grid;
   place-items: center;
   text-decoration: none;
   background: var(--surface-2);
   border: 1px solid var(--border);
   overflow: hidden;
   font-weight: 900;
   color: var(--primary-2)
}

.top-profile-link img,
.user-avatar-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.feature-card {
   position: relative;
   overflow: hidden
}

.feature-card:after {
   content: "";
   position: absolute;
   width: 90px;
   height: 90px;
   border-radius: 50%;
   right: -35px;
   top: -35px;
   background: color-mix(in srgb, var(--primary) 9%, transparent)
}

.icon-box {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   border-radius: 13px;
   background: color-mix(in srgb, var(--primary) 14%, var(--surface));
   color: var(--primary-2);
   font-size: 20px
}

.section-tabs {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.metric-bar {
   height: 9px;
   border-radius: 99px;
   background: var(--surface-2);
   overflow: hidden
}

.metric-bar>span {
   display: block;
   height: 100%;
   background: linear-gradient(90deg, var(--primary), var(--primary-2));
   border-radius: inherit
}

.risk-good {
   color: #166534
}

.risk-attention {
   color: #92400e
}

.risk-high {
   color: #991b1b
}

.certificate-paper {
   background: white;
   color: #102C52;
   border: 10px solid #DDF4FF;
   outline: 2px solid #08AEEF;
   outline-offset: -6px;
   padding: 46px;
   text-align: center;
   min-height: 520px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.certificate-logo {
   width: 92px;
   height: 92px;
   object-fit: contain;
   margin: 0 auto 10px
}

.certificate-paper h1 {
   font-size: 38px;
   margin: 5px 0;
   color: #06358F
}

.certificate-name {
   font-size: 30px;
   font-weight: 900;
   margin: 18px 0 6px
}

.public-shell {
   width: min(920px, calc(100% - 28px));
   margin: 32px auto
}

.public-brand {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 18px;
   font-weight: 900;
   font-size: 20px
}

.public-brand img {
   width: 46px;
   height: 46px;
   object-fit: contain;
   background: #fff;
   border-radius: 12px
}

.soft-callout {
   padding: 14px 16px;
   border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
   background: color-mix(in srgb, var(--primary) 7%, var(--surface));
   border-radius: 14px
}

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

.check-card {
   padding: 12px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2)
}

.lo-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 5px 9px;
   border-radius: 999px;
   background: #DDF4FF;
   color: #06358F;
   font-size: 11px;
   font-weight: 800
}

.role-choice {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 8px
}

.role-choice label {
   margin: 0
}

.role-choice input {
   display: none
}

.role-choice span {
   display: flex;
   gap: 8px;
   align-items: center;
   padding: 11px;
   border: 1px solid var(--border);
   border-radius: 12px;
   background: var(--surface);
   cursor: pointer;
   color: var(--text)
}

.role-choice input:checked+span {
   border-color: var(--primary);
   background: color-mix(in srgb, var(--primary) 12%, var(--surface));
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 15%, transparent)
}

@media(max-width: 760px) {

   .check-grid,
   .role-choice {
      grid-template-columns: 1fr 1fr
   }

   .certificate-paper {
      padding: 28px 18px
   }

   .certificate-paper h1 {
      font-size: 30px
   }

   .certificate-name {
      font-size: 24px
   }
}

@media(max-width: 480px) {
   .role-choice {
      grid-template-columns: 1fr
   }

   .brand-lockup small {
      display: none
   }
}

/* ViaEdu v3.3 brand lockup */
.viaedu-logo-full {
   display: block;
   width: 178px;
   max-width: 100%;
   height: auto;
   object-fit: contain
}

.side .viaedu-logo-full {
   width: 188px;
   filter: drop-shadow(0 7px 18px rgba(0, 0, 0, .12))
}

.brand-lockup.viaedu-full-lockup {
   display: block;
   margin-bottom: 24px
}

.login .viaedu-logo-full {
   width: 210px
}

.public-brand img {
   box-shadow: 0 7px 18px rgba(6, 53, 143, .10)
}

@media(max-width: 480px) {
   .side .viaedu-logo-full {
      width: 170px
   }

   .login .viaedu-logo-full {
      width: 180px
   }
}

/* ============================================================
   ViaEdu v3.3 - Help Center, public training, QR pass & certificate studio
============================================================ */
.viaedu-sidebar-brand {
   position: relative;
   margin: 2px 4px 24px;
   padding: 15px 14px;
   border-radius: 20px;
   background: linear-gradient(145deg, rgba(8, 174, 239, .34), rgb(255 255 255 / 52%) 48%, rgba(3, 26, 73, .86));
   border: 1px solid rgba(255, 255, 255, .13);
   box-shadow: 0 16px 38px rgba(0, 18, 72, .28), inset 0 1px 0 rgba(255, 255, 255, .12);
   overflow: hidden
}

.viaedu-sidebar-brand:before {
   content: "";
   position: absolute;
   inset: -50% 18% auto -30%;
   height: 170px;
   background: radial-gradient(circle, rgba(37, 211, 255, .42), transparent 68%);
   pointer-events: none
}

.viaedu-sidebar-brand:after {
   content: "";
   position: absolute;
   width: 110px;
   height: 110px;
   right: -38px;
   bottom: -52px;
   border-radius: 50%;
   background: rgba(8, 174, 239, .14);
   border: 1px solid rgba(255, 255, 255, .08);
   pointer-events: none
}

.viaedu-sidebar-brand .viaedu-logo-full {
   position: relative;
   z-index: 1;
   width: 194px;
   filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .20))
}

.page-help-btn span {
   display: inline
}

.page-help-modal {
   position: fixed;
   inset: 0;
   z-index: 1000;
   pointer-events: none;
   opacity: 0;
   transition: opacity .2s
}

.page-help-modal.open {
   pointer-events: auto;
   opacity: 1
}

.page-help-backdrop {
   position: absolute;
   inset: 0;
   border: 0;
   background: rgba(2, 12, 35, .55);
   backdrop-filter: blur(4px);
   cursor: pointer
}

.page-help-panel {
   position: absolute;
   right: 0;
   top: 0;
   height: 100%;
   width: min(460px, 92vw);
   padding: 26px;
   background: var(--surface);
   box-shadow: -22px 0 60px rgba(1, 17, 50, .25);
   overflow: auto;
   transform: translateX(102%);
   transition: transform .25s ease
}

.page-help-modal.open .page-help-panel {
   transform: translateX(0)
}

.page-help-icon,
.guide-detail-icon {
   width: 52px;
   height: 52px;
   border-radius: 16px;
   display: grid;
   place-items: center;
   background: linear-gradient(135deg, var(--primary-2), var(--primary));
   color: white;
   font-size: 24px;
   box-shadow: 0 10px 24px rgba(8, 174, 239, .22)
}

.page-help-panel h2 {
   margin: 12px 0 6px;
   font-size: 29px
}

.page-help-steps {
   display: grid;
   gap: 10px;
   margin: 20px 0
}

.page-help-steps>div {
   display: grid;
   grid-template-columns: 32px 1fr;
   gap: 10px;
   align-items: start
}

.page-help-steps b,
.guide-step>b {
   width: 30px;
   height: 30px;
   border-radius: 10px;
   background: color-mix(in srgb, var(--primary) 14%, var(--surface));
   color: var(--primary-2);
   display: grid;
   place-items: center
}

.page-help-steps span {
   line-height: 1.55
}

.modal-open {
   overflow: hidden
}

.guide-hero {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 30px;
   align-items: center;
   background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 10%, var(--surface)), color-mix(in srgb, var(--primary) 8%, var(--surface)));
   overflow: hidden
}

.guide-kicker {
   font-size: 12px;
   font-weight: 900;
   letter-spacing: .1em;
   color: var(--primary-2)
}

.guide-hero h2 {
   font-size: 32px;
   margin: 8px 0
}

.guide-search {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface);
   box-shadow: var(--shadow)
}

.guide-search input {
   margin: 0;
   border: 0;
   box-shadow: none;
   padding: 8px 4px;
   background: transparent
}

.guide-section {
   margin-top: 28px
}

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

.guide-card {
   display: grid;
   grid-template-columns: 46px 1fr;
   gap: 13px;
   padding: 18px;
   border: 1px solid var(--border);
   border-radius: 17px;
   background: var(--surface);
   text-decoration: none;
   box-shadow: 0 8px 24px rgba(6, 53, 143, .05);
   transition: .18s
}

.guide-card:hover {
   transform: translateY(-2px);
   border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
   box-shadow: 0 14px 30px rgba(6, 53, 143, .09)
}

.guide-icon {
   width: 46px;
   height: 46px;
   border-radius: 14px;
   background: color-mix(in srgb, var(--primary) 13%, var(--surface));
   color: var(--primary-2);
   display: grid;
   place-items: center;
   font-size: 20px
}

.guide-card h4 {
   margin: 0 0 5px;
   font-size: 16px
}

.guide-card p {
   margin: 0;
   color: var(--muted);
   font-size: 13px;
   line-height: 1.5
}

.guide-card span {
   display: inline-block;
   margin-top: 9px;
   color: var(--primary-2);
   font-size: 12px;
   font-weight: 850
}

.guide-detail h2 {
   font-size: 32px;
   margin: 12px 0 5px
}

.guide-steps {
   display: grid;
   gap: 12px;
   margin-top: 24px
}

.guide-step {
   display: grid;
   grid-template-columns: 34px 1fr;
   gap: 12px;
   padding: 13px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2)
}

.guide-step p {
   margin: 3px 0 0;
   line-height: 1.55
}

.global-loading {
   position: fixed;
   inset: 0;
   z-index: 1500;
   background: rgba(3, 19, 53, .64);
   backdrop-filter: blur(5px);
   display: grid;
   place-items: center;
   padding: 20px
}

.global-loading[hidden] {
   display: none
}

.loading-card {
   width: min(380px, 100%);
   padding: 30px;
   text-align: center;
   border-radius: 22px;
   background: var(--surface);
   box-shadow: 0 28px 80px rgba(0, 0, 0, .28)
}

.loading-card b {
   display: block;
   font-size: 18px;
   margin: 14px 0 5px
}

.loading-card p {
   margin: 0;
   color: var(--muted)
}

.loading-spinner {
   display: inline-block;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 4px solid color-mix(in srgb, var(--primary) 18%, var(--border));
   border-top-color: var(--primary);
   animation: viaedu-spin .8s linear infinite
}

@keyframes viaedu-spin {
   to {
      transform: rotate(360deg)
   }
}

.public-registration-body {
   background: radial-gradient(circle at 8% 2%, rgba(8, 174, 239, .15), transparent 30%), linear-gradient(180deg, #f7fcff, #eef7ff);
   min-height: 100vh
}

.registration-shell {
   max-width: 980px
}

.registration-hero {
   display: flex;
   justify-content: space-between;
   gap: 22px;
   align-items: flex-end;
   padding: 30px;
   border-radius: 24px;
   background: linear-gradient(135deg, #06358F, #0B4DBD 55%, #08AEEF);
   color: white;
   box-shadow: 0 20px 52px rgba(11, 77, 189, .20)
}

.registration-hero h1 {
   font-size: 38px;
   margin: 12px 0 4px
}

.registration-hero p {
   margin: 2px 0;
   color: #DDF4FF
}

.registration-type-badge {
   display: inline-flex;
   gap: 7px;
   align-items: center;
   padding: 7px 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .14);
   border: 1px solid rgba(255, 255, 255, .2);
   font-size: 11px;
   font-weight: 900;
   letter-spacing: .05em
}

.registration-price {
   min-width: 180px;
   padding: 16px 18px;
   border-radius: 17px;
   background: rgba(255, 255, 255, .13);
   border: 1px solid rgba(255, 255, 255, .18);
   text-align: right
}

.registration-price small,
.registration-price b {
   display: block
}

.registration-price b {
   font-size: 25px
}

.registration-price.free b {
   color: #B9FFEF
}

.registration-description {
   margin-top: 16px
}

.registration-grid {
   margin-top: 16px
}

.registration-side {
   align-self: start
}

.registration-benefit {
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 11px;
   padding: 12px 0;
   border-bottom: 1px solid var(--border)
}

.registration-benefit>i {
   width: 42px;
   height: 42px;
   border-radius: 13px;
   display: grid;
   place-items: center;
   background: #DDF4FF;
   color: #06358F;
   font-size: 18px
}

.registration-benefit b,
.registration-benefit span {
   display: block
}

.registration-benefit span {
   font-size: 12px;
   color: var(--muted);
   margin-top: 2px
}

.payment-box {
   padding: 16px;
   border: 1px solid #B9E9FF;
   border-radius: 15px;
   background: #F1FAFF;
   margin: 10px 0 14px
}

.payment-account-grid,
.payment-summary {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 9px
}

.payment-account-grid>div,
.payment-summary>div {
   padding: 10px;
   border: 1px solid var(--border);
   border-radius: 11px;
   background: var(--surface)
}

.payment-account-grid small,
.payment-account-grid b,
.payment-summary small,
.payment-summary b {
   display: block
}

.registration-submit {
   min-height: 50px;
   margin-top: 4px
}

.required {
   color: #dc2626
}

.check-line {
   display: flex !important;
   gap: 9px;
   align-items: center;
   padding: 9px 0
}

.check-line input {
   width: auto;
   margin: 0
}

.registration-kpis {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 10px;
   margin-top: 20px
}

.registration-kpis>div {
   padding: 14px;
   border-radius: 14px;
   background: var(--surface-2);
   border: 1px solid var(--border)
}

.registration-kpis small,
.registration-kpis b {
   display: block
}

.registration-kpis b {
   font-size: 22px;
   color: var(--primary-2)
}

.inline-payment-form {
   display: grid;
   gap: 6px;
   min-width: 210px
}

.inline-payment-form select,
.inline-payment-form input {
   margin: 0;
   padding: 8px;
   font-size: 12px
}

.participant-pass-body {
   background: radial-gradient(circle at 50% 0, rgba(8, 174, 239, .18), transparent 36%), #EEF7FF;
   min-height: 100vh;
   padding: 24px 12px
}

.participant-pass-shell {
   width: min(720px, 100%);
   margin: auto
}

.participant-ticket {
   overflow: hidden;
   border-radius: 26px;
   background: white;
   border: 1px solid #D7E8F8;
   box-shadow: 0 24px 70px rgba(6, 53, 143, .15)
}

.ticket-head {
   padding: 23px 26px;
   background: linear-gradient(135deg, #06358F, #0B4DBD 58%, #08AEEF);
   color: white
}

.ticket-head span,
.ticket-head b,
.ticket-head small {
   display: block
}

.ticket-head span {
   font-size: 11px;
   letter-spacing: .13em;
   font-weight: 900;
   color: #B8ECFF
}

.ticket-head b {
   font-size: 24px;
   margin-top: 6px
}

.ticket-head small {
   color: #E1F6FF;
   margin-top: 3px
}

.ticket-body {
   display: grid;
   grid-template-columns: 1fr 270px;
   gap: 20px;
   padding: 28px;
   align-items: center
}

.ticket-person small {
   color: var(--muted)
}

.ticket-person h1 {
   font-size: 31px;
   margin: 4px 0
}

.participant-code {
   display: inline-flex;
   padding: 8px 12px;
   border-radius: 10px;
   background: #E9F7FF;
   color: #06358F;
   font-weight: 900;
   letter-spacing: .05em
}

.ticket-status {
   display: flex;
   gap: 8px;
   align-items: center;
   flex-wrap: wrap;
   margin-top: 15px
}

.participant-qr {
   width: 250px;
   height: 250px;
   padding: 9px;
   background: white;
   border: 1px solid #D7E8F8;
   border-radius: 16px;
   margin: auto
}

.participant-qr img,
.participant-qr canvas {
   width: 100% !important;
   height: 100% !important
}

.qr-caption {
   display: block;
   text-align: center;
   color: #6580A2;
   margin-top: 8px
}

.ticket-foot {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   padding: 14px 26px;
   background: #F3F9FF;
   border-top: 1px dashed #BFDDF3;
   color: #6580A2;
   font-size: 12px
}

.pass-actions {
   display: flex;
   justify-content: center;
   margin-top: 16px
}

.qr-scanner-card {
   overflow: hidden
}

.scanner-video-wrap {
   position: relative;
   overflow: hidden;
   border-radius: 18px;
   background: #03132F;
   aspect-ratio: 4/3;
   margin: 14px 0
}

.scanner-video-wrap video {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.scanner-frame {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 52%;
   aspect-ratio: 1;
   transform: translate(-50%, -50%);
   border: 3px solid #21D4FF;
   border-radius: 22px;
   box-shadow: 0 0 0 999px rgba(0, 8, 28, .34)
}

.scanner-frame:before,
.scanner-frame:after {
   content: "";
   position: absolute;
   left: 10%;
   right: 10%;
   height: 2px;
   background: #21D4FF;
   box-shadow: 0 0 10px #21D4FF
}

.scanner-frame:before {
   top: 12%
}

.scanner-frame:after {
   bottom: 12%
}

.scanner-result {
   margin-top: 18px;
   padding: 20px;
   border: 1px dashed var(--border);
   border-radius: 16px;
   display: grid;
   place-items: center;
   text-align: center;
   gap: 5px;
   background: var(--surface-2)
}

.scanner-result>i {
   font-size: 30px
}

.scanner-result span {
   color: var(--muted);
   font-size: 13px
}

.scanner-result.success {
   background: var(--ok-bg);
   color: var(--ok);
   border-style: solid
}

.scanner-result.error {
   background: var(--danger-bg);
   color: var(--danger);
   border-style: solid
}

.scanner-result.loading {
   border-style: solid
}

.certificate-bg-preview {
   height: 180px;
   border-radius: 14px;
   background-size: cover;
   background-position: center;
   border: 1px solid var(--border);
   margin: 10px 0
}

.certificate-mini-preview {
   position: relative;
   aspect-ratio: 297/210;
   border-radius: 16px;
   overflow: hidden;
   background: linear-gradient(135deg, #F8FCFF, #DDF4FF);
   border: 1px solid #A9DFF8;
   background-size: cover;
   background-position: center;
   color: #102C52;
   box-shadow: 0 12px 30px rgba(6, 53, 143, .10)
}

.certificate-mini-preview.has-bg:after,
.certificate-with-bg:after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(255, 255, 255, .05);
   pointer-events: none
}

.cert-overlay-title {
   position: absolute;
   top: 12%;
   left: 5%;
   right: 5%;
   text-align: center;
   font-size: 24px;
   font-weight: 950;
   letter-spacing: .14em
}

.cert-overlay-sub {
   position: absolute;
   top: 26%;
   left: 5%;
   right: 5%;
   text-align: center;
   font-size: 12px
}

.cert-overlay-name {
   position: absolute;
   left: 8%;
   right: 8%;
   text-align: center;
   font-size: 25px;
   font-weight: 950;
   transform: translateY(-50%)
}

.cert-overlay-body {
   position: absolute;
   left: 16%;
   right: 16%;
   text-align: center;
   font-size: 11px;
   transform: translateY(-50%)
}

.cert-overlay-number {
   position: absolute;
   left: 8%;
   right: 8%;
   text-align: center;
   font-size: 9px;
   transform: translateY(-50%)
}

.certificate-public-body {
   background: #edf7ff
}

.certificate-public-shell {
   max-width: 1180px
}

.certificate-custom {
   position: relative;
   aspect-ratio: 297/210;
   width: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   border-radius: 12px;
   box-shadow: 0 20px 55px rgba(6, 53, 143, .14);
   color: #102C52
}

.certificate-default-bg {
   background: radial-gradient(circle at 15% 12%, rgba(8, 174, 239, .14), transparent 28%), linear-gradient(135deg, #fff, #eef9ff);
   border: 12px solid #DDF4FF;
   outline: 2px solid #08AEEF;
   outline-offset: -8px
}

.certificate-overlay-heading {
   position: absolute;
   top: 10%;
   left: 6%;
   right: 6%;
   text-align: center;
   font-size: clamp(22px, 4.2vw, 52px);
   font-weight: 950;
   letter-spacing: .14em;
   color: #06358F
}

.certificate-overlay-subheading {
   position: absolute;
   top: 26%;
   left: 8%;
   right: 8%;
   text-align: center;
   font-size: clamp(12px, 1.7vw, 22px)
}

.certificate-overlay-name {
   position: absolute;
   left: 8%;
   right: 8%;
   transform: translateY(-50%);
   text-align: center;
   font-size: clamp(27px, 4vw, 58px);
   font-weight: 950;
   color: #0B4DBD;
   text-shadow: 0 1px 1px rgba(255, 255, 255, .8)
}

.certificate-overlay-body {
   position: absolute;
   left: 14%;
   right: 14%;
   transform: translateY(-50%);
   text-align: center;
   font-size: clamp(11px, 1.35vw, 19px);
   line-height: 1.55
}

.certificate-custom-data {
   display: flex;
   gap: 12px;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 9px;
   font-size: .85em
}

.certificate-custom-data span {
   padding: 4px 8px;
   border-radius: 999px;
   background: rgba(255, 255, 255, .65)
}

.certificate-overlay-number {
   position: absolute;
   left: 8%;
   right: 8%;
   transform: translateY(-50%);
   text-align: center;
   font-size: clamp(10px, 1.1vw, 15px);
   font-weight: 750
}

.certificate-overlay-signer {
   position: absolute;
   bottom: 10%;
   right: 9%;
   width: 28%;
   text-align: center
}

.certificate-overlay-signer b,
.certificate-overlay-signer span {
   display: block
}

.certificate-overlay-signer b {
   font-size: clamp(11px, 1.3vw, 18px)
}

.certificate-overlay-signer span {
   font-size: clamp(8px, 1vw, 13px);
   margin-top: 3px
}

.certificate-overlay-footer {
   position: absolute;
   bottom: 3%;
   left: 8%;
   right: 8%;
   text-align: center;
   font-size: clamp(7px, .85vw, 11px);
   opacity: .8
}

@media(max-width: 1000px) {
   .guide-grid {
      grid-template-columns: 1fr 1fr
   }

   .guide-hero {
      grid-template-columns: 1fr
   }

   .registration-hero {
      align-items: flex-start
   }

   .ticket-body {
      grid-template-columns: 1fr
   }

   .participant-qr {
      width: 230px;
      height: 230px
   }
}

@media(max-width: 700px) {
   .page-help-btn span {
      display: none
   }

   .guide-grid {
      grid-template-columns: 1fr
   }

   .registration-hero {
      flex-direction: column
   }

   .registration-price {
      text-align: left;
      width: 100%
   }

   .payment-account-grid,
   .payment-summary,
   .registration-kpis {
      grid-template-columns: 1fr
   }

   .ticket-body {
      padding: 20px
   }

   .ticket-foot {
      flex-direction: column
   }

   .certificate-public-shell {
      width: 100%;
      margin: 10px auto
   }

   .certificate-custom {
      border-radius: 0
   }

   .viaedu-sidebar-brand {
      margin-left: 0;
      margin-right: 0
   }

   .viaedu-sidebar-brand .viaedu-logo-full {
      width: 176px
   }
}

@media print {
   .participant-pass-body {
      padding: 0;
      background: white
   }

   .participant-pass-shell {
      width: 100%
   }

   .pass-actions,
   .public-brand,
   .notice {
      display: none !important
   }

   .participant-ticket {
      box-shadow: none
   }
}

/* ViaEdu package access */
.nav a.plan-locked {
   opacity: .62;
   border-style: dashed
}

.nav a.plan-locked>i:last-child {
   margin-left: auto;
   font-size: 11px
}

.nav a .badge {
   margin-left: auto;
   font-size: 9px;
   padding: 3px 6px
}

/* Dashboard activity line chart */
.dashboard-line-chart {
   position: relative;
   width: 100%;
   height: 310px;
   margin-top: 16px;
   padding: 4px 0 0
}

.dashboard-line-chart canvas {
   display: block;
   width: 100%;
   height: 100%
}

.dashboard-chart-legend {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center;
   color: var(--muted);
   font-size: 13px;
   font-weight: 700
}

.dashboard-chart-legend span {
   display: inline-flex;
   align-items: center;
   gap: 7px
}

.dashboard-chart-legend i {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius: 999px
}

@media(max-width:640px) {
   .dashboard-line-chart {
      height: 270px
   }

   .dashboard-chart-legend {
      width: 100%;
      gap: 10px 14px
   }
}

/* System banner settings */
.system-banner-toggle {
   display: inline-flex !important;
   align-items: center;
   gap: 9px;
   margin: 0 !important;
   padding: 10px 14px;
   border: 1px solid var(--border);
   border-radius: 13px;
   background: var(--surface-2);
   font-weight: 800 !important
}

.system-banner-toggle input {
   width: auto !important;
   margin: 0 !important
}

.system-banner-settings {
   align-items: start
}

.system-banner-preview {
   min-height: 280px;
   border-radius: 20px;
   padding: 32px;
   display: flex;
   align-items: center;
   overflow: hidden;
   background: linear-gradient(135deg, #061C4F, #0B4DBD 58%, #08AEEF);
   background-size: cover;
   background-position: center;
   color: #fff;
   box-shadow: 0 18px 45px rgba(7, 54, 142, .15)
}

.system-banner-preview>div {
   max-width: 690px
}

.system-banner-preview h2 {
   font-size: clamp(28px, 4vw, 48px);
   line-height: 1.08;
   margin: 14px 0 10px;
   letter-spacing: -.035em;
   color: #fff
}

.system-banner-preview p {
   font-size: 16px;
   line-height: 1.65;
   color: #e2f5ff;
   margin: 0 0 18px
}

.system-banner-preview .btn {
   pointer-events: none
}

@media(max-width:720px) {
   .system-banner-preview {
      padding: 24px;
      min-height: 250px
   }

   .system-banner-preview h2 {
      font-size: 30px
   }
}

/* ViaEdu institution / multi-teacher accounts */
.account-mode-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 12px;
   margin: 8px 0 18px
}

.account-mode-card {
   margin: 0 !important;
   cursor: pointer
}

.account-mode-card>input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.account-mode-card-body {
   display: flex;
   min-height: 132px;
   flex-direction: column;
   align-items: flex-start;
   gap: 7px;
   padding: 18px;
   border: 1px solid var(--border);
   border-radius: 18px;
   background: var(--surface);
   transition: .18s ease
}

.account-mode-card-body>i {
   font-size: 25px;
   color: var(--primary)
}

.account-mode-card-body>b {
   font-size: 17px
}

.account-mode-card-body small {
   color: var(--muted);
   line-height: 1.5
}

.account-mode-card>input:checked+.account-mode-card-body {
   border-color: var(--primary);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 13%, transparent);
   background: color-mix(in srgb, var(--primary) 5%, var(--surface))
}

/* .institution-register-fields {
   display: none
} */

.institution-hero {
   background: linear-gradient(135deg, #071b4f, #0b4dbd 60%, #08aeef)
}

.institution-price-preview {
   display: grid;
   gap: 7px;
   margin: 4px 0 14px;
   padding: 13px 14px;
   border: 1px solid var(--border);
   border-radius: 14px;
   background: var(--surface-2)
}

.institution-price-preview>div {
   display: flex;
   justify-content: space-between;
   gap: 12px;
   font-size: 13px
}

.institution-price-preview .total {
   padding-top: 8px;
   border-top: 1px solid var(--border);
   font-size: 15px
}

.subscription-card-mini {
   display: grid;
   gap: 6px;
   padding: 14px;
   border: 1px solid var(--border);
   border-radius: 15px;
   background: var(--surface-2)
}

.subscription-card-mini>b {
   font-size: 19px
}

.subscription-card-mini>span:last-child {
   color: var(--muted);
   font-size: 13px
}

.institution-activity-list {
   display: grid;
   gap: 9px
}

.institution-activity-item {
   display: flex;
   gap: 12px;
   padding: 11px 0;
   border-bottom: 1px solid var(--border)
}

.institution-activity-item>i {
   display: grid;
   place-items: center;
   flex: 0 0 36px;
   height: 36px;
   border-radius: 11px;
   background: var(--surface-2);
   color: var(--primary);
   font-size: 16px
}

.institution-activity-item>div {
   display: grid;
   gap: 3px
}

.institution-activity-item span {
   color: var(--muted);
   font-size: 12px
}

.institution-money {
   font-size: clamp(22px, 2.5vw, 34px) !important;
   letter-spacing: -.04em
}

.side-user .muted i {
   margin-right: 4px
}

@media(max-width:700px) {
   .account-mode-grid {
      grid-template-columns: 1fr
   }

   .account-mode-card-body {
      min-height: auto
   }

   .institution-price-preview {
      margin-bottom: 16px
   }
}