@import url("/vendor/icons/bootstrap-icons.min.css");
:root {
  --navy: #142c49;
  --ink: #193654;
  --muted: #718298;
  --blue: #2864ef;
  --bg: #f2f5fa;
  --line: #e6ecf4;
  --shadow: 0 4px 18px #19365406;
  --bs-primary: #2864ef;
  --bs-body-color: #193654;
  --bs-body-font-family: "Segoe UI", Arial, sans-serif;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
h1 {
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.7px;
}
h2 {
  font-size: 19px;
  font-weight: 700;
}
h3 {
  font-size: 17px;
  font-weight: 700;
}
a {
  text-decoration: none;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  font-size: 14px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #78a4ff;
  outline-offset: 3px;
}
.btn {
  font-size: 14px;
  font-weight: 600;
  padding: 10px 17px;
  border-radius: 9px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.btn-primary {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 3px 7px #2864ef15;
}
.btn-primary:hover {
  background: #1a51ce;
}
.btn-light,
.btn-outline-secondary {
  background: white;
  border: 1px solid #dce5f0;
  color: var(--ink);
}
.btn-light:hover {
  background: #f3f7ff;
  border-color: #b7cdf4;
}
.btn-sm {
  font-size: 13px;
  padding: 7px 12px;
}
.btn-link {
  box-shadow: none;
}
.muted,
.text-muted {
  color: var(--muted) !important;
}
.small {
  font-size: 13px;
}
.section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  font-weight: 600;
}
.form-control,
.form-select {
  border-color: #dce4ef;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  background-color: #fbfcfe;
}
.form-control:focus,
.form-select:focus {
  border-color: #8aafff;
  box-shadow: 0 0 0 3px #2864ef15;
}
.form-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 7px;
}
.card {
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: var(--shadow);
  background: white;
}
.card-body {
  padding: 22px;
}
.badge {
  font-size: 12px;
  font-weight: 550;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: normal;
}
.badge-green {
  background: #e5f7ef;
  color: #14825a;
}
.badge-amber {
  background: #fff3d9;
  color: #a56b06;
}
.badge-red {
  background: #ffeaee;
  color: #bb3955;
}
.badge-blue {
  background: #eaf1ff;
  color: #3265c9;
}
.badge-gray {
  background: #edf1f7;
  color: #66758b;
}
.badge-purple {
  background: #f0eaff;
  color: #7d55cc;
}
.initial-loading {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 20px;
}
.initial-loading span {
  margin: auto;
}
.icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 21px;
  background: #eaf1ff;
  color: var(--blue);
}
.icon-box.purple {
  background: #f1eaff;
  color: #9662df;
}
.icon-box.teal {
  background: #e4f7f1;
  color: #149b83;
}
.icon-box.rose {
  background: #ffedf1;
  color: #d86285;
}
.icon-box.amber {
  background: #fff5dd;
  color: #ca9621;
}
.icon-box.indigo {
  background: #eceeff;
  color: #6564da;
}
.sidebar {
  width: 238px;
  position: fixed;
  inset: 0 auto 0 0;
  background: linear-gradient(170deg, #102540, #1a3554);
  display: flex;
  flex-direction: column;
  color: #a5b7cc;
  z-index: 40;
  padding: 29px 18px 17px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}
.brand-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #317af3;
  box-shadow: 0 4px 12px #317af33b;
  display: grid;
  place-items: center;
  font-size: 23px;
  color: #fff;
}
.brand-title {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.4px;
}
.brand-sub {
  font-size: 11px;
  color: #98b0cf;
  margin-top: 2px;
}
.sidebar .section-label {
  margin: 42px 13px 15px;
  color: #748ba7;
  font-size: 10px;
}
.sidebar nav {
  display: grid;
  gap: 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 0;
  background: none;
  color: #a8bad0;
  padding: 12px 14px;
  border-radius: 8px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  transition: 0.15s;
}
.nav-item i {
  font-size: 18px;
}
.nav-item:hover {
  background: #ffffff0d;
  color: white;
}
.nav-item.active {
  color: white;
  background: #2864ef;
  box-shadow: 0 4px 15px #1253ea2b;
}
.nav-item .count {
  margin-left: auto;
  background: #ffffff20;
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 11px;
}
.sidebar-bottom {
  margin-top: auto;
}
.sidebar-note {
  border: 1px solid #ffffff15;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 21px;
  font-size: 12px;
  line-height: 1.6;
  color: #92aaca;
}
.sidebar-note strong {
  color: #dbe8fa;
  font-size: 13px;
  display: block;
  margin-bottom: 3px;
}
.user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff08;
  border: 1px solid #ffffff08;
  border-radius: 10px;
  padding: 12px;
  width: 100%;
  color: white;
  text-align: left;
}
.avatar {
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: #eaf1ff;
  color: #3970d2;
  flex-shrink: 0;
}
.user-block .avatar {
  background: #3b7ded;
  color: white;
}
.user-block strong {
  display: block;
  font-size: 13px;
}
.user-block small {
  font-size: 11px;
  color: #8da8c8;
}
.main-shell {
  margin-left: 238px;
  min-height: 100vh;
}
.topbar {
  height: 77px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  background: white;
  gap: 16px;
}
.breadcrumb-text {
  color: #93a0b4;
  font-size: 13px;
}
.breadcrumb-text strong {
  color: #39516c;
  font-weight: 500;
  margin-left: 12px;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 21px;
}
.topbar-date {
  font-size: 13px;
  color: #7a899e;
}
.notify {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: #647d98;
  background: white;
  position: relative;
}
.notify::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 8px;
  width: 5px;
  height: 5px;
  background: #f1a641;
  border-radius: 50%;
}
.content {
  max-width: 1600px;
  margin: auto;
  padding: 30px 34px 25px;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.page-heading h1 {
  margin-bottom: 7px;
}
.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #7086a1;
  margin-bottom: 9px;
  font-weight: 600;
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}
.stat {
  padding: 20px 21px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  gap: 8px;
}
.stat-label {
  font-size: 13px;
  color: #75869c;
}
.stat .icon-box {
  width: 34px;
  height: 34px;
  font-size: 17px;
  border-radius: 9px;
}
.stat-value {
  font-size: 28px;
  font-weight: 740;
  letter-spacing: -0.8px;
}
.stat-foot {
  font-size: 12px;
  color: #8293a9;
  margin-top: 6px;
}
.stat-foot .positive {
  color: #179a71;
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 21px;
}
.panel-heading h2 {
  margin: 0;
}
.panel-heading a,
.panel-heading button {
  font-size: 12px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr);
  gap: 21px;
  margin-bottom: 22px;
}
.chart-area {
  height: 218px;
  display: flex;
  gap: 18px;
  padding: 12px 4px 0;
}
.chart-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #a0adc0;
  font-size: 10px;
  padding-bottom: 26px;
}
.bar-chart {
  display: flex;
  align-items: end;
  justify-content: space-around;
  gap: 18px;
  flex: 1;
  border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #f0f3f8 calc(25% - 1px),
    #f0f3f8 25%
  );
  padding: 0 12px 26px;
  position: relative;
}
.bar-column {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  flex-direction: column;
  position: relative;
  max-width: 65px;
}
.bar {
  width: 100%;
  min-height: 3px;
  background: #4d83ee;
  border-radius: 5px 5px 0 0;
  position: relative;
}
.bar-column:nth-child(2n) .bar {
  background: #99b9f9;
}
.bar-value {
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: #587190;
}
.bar-label {
  position: absolute;
  bottom: -24px;
  font-size: 10px;
  color: #8493a8;
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chart-caption {
  font-size: 12px;
  color: #8394a9;
  margin: 18px 0 0;
}
.donut-layout {
  display: flex;
  align-items: center;
  gap: 27px;
  padding: 17px 0;
}
.donut {
  width: 153px;
  height: 153px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.donut-hole {
  width: 120px;
  height: 120px;
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-hole strong {
  font-size: 26px;
  letter-spacing: -1px;
}
.donut-hole span {
  font-size: 11px;
  color: #8b9bb0;
}
.legend {
  display: grid;
  gap: 15px;
}
.legend-row {
  font-size: 12px;
  color: #718399;
}
.legend-row strong {
  display: block;
  margin-left: 15px;
  margin-top: 3px;
  color: #244363;
  font-size: 16px;
}
.legend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 7px;
}
.panel-bottom {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #8191a7;
}
.table {
  font-size: 13px;
  margin-bottom: 0;
  --bs-table-color: var(--ink);
  --bs-table-border-color: #edf1f6;
}
.table thead th {
  color: #8b9bb0;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.6px;
  padding: 14px 17px;
  background: #fbfcff;
  border-bottom-width: 1px;
}
.table tbody td {
  padding: 16px 17px;
  vertical-align: middle;
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table .name {
  font-weight: 600;
  color: #294464;
}
.table .subline {
  display: block;
  font-size: 11px;
  color: #91a0b5;
  margin-top: 4px;
}
.table .avatar {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.table-wrap {
  overflow: auto;
  border-radius: 12px;
}
.table-card .panel-heading {
  padding: 22px 22px 0;
}
.attention-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.attention-row:last-child {
  border: 0;
}
.attention-row .avatar {
  background: #fff3df;
  color: #ba8c3c;
}
.attention-row .info {
  flex: 1;
  min-width: 0;
}
.attention-row strong {
  font-size: 13px;
  display: block;
}
.attention-row small {
  font-size: 11px;
  color: #8497ad;
}
.attention-row .amount {
  font-weight: 650;
  font-size: 13px;
  white-space: nowrap;
}
.attention-title {
  display: flex;
  gap: 8px;
  align-items: center;
}
.attention-title i {
  color: #cfa04b;
}
.footer {
  display: flex;
  justify-content: space-between;
  color: #98a7ba;
  font-size: 11px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #e6ebf4;
}
.portal-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(28px, calc((100vw - 1300px) / 2));
  background: #fff;
  border-bottom: 1px solid var(--line);
  gap: 25px;
}
.portal-header .brand {
  color: var(--ink);
}
.portal-header .brand-sub {
  color: #8a9db5;
}
.portal-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.portal-nav a {
  color: #73859c;
  padding: 11px 15px;
  font-size: 14px;
  border-radius: 8px;
}
.portal-nav a.active {
  background: #edf3ff;
  color: #2864ef;
  font-weight: 600;
}
.portal-content {
  max-width: 1360px;
  padding: 38px 30px;
  margin: auto;
}
.catalog-intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
  gap: 20px;
}
.catalog-intro h1 {
  font-size: 32px;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.catalog-intro p {
  color: #7b8da4;
  margin: 0;
}
.toolbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.search-field {
  position: relative;
  min-width: 230px;
  max-width: 390px;
  flex: 1;
}
.search-field i {
  position: absolute;
  top: 12px;
  left: 14px;
  color: #91a4bf;
}
.search-field input {
  padding-left: 40px;
  background: white;
}
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-pill {
  border: 1px solid #e1e7f0;
  border-radius: 7px;
  padding: 8px 13px;
  background: white;
  color: #7b8ca1;
  font-size: 12px;
}
.filter-pill.active {
  background: #e7efff;
  color: #2864ef;
  border-color: #cbdcff;
  font-weight: 600;
}
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.course-card {
  overflow: hidden;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 9px 22px #1936540c;
}
.course-art {
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  background: #edf3ff;
  color: #4d7cdb;
  border-bottom: 1px solid #e6edfa;
  position: relative;
}
.course-art > i {
  font-size: 42px;
  opacity: 0.8;
}
.course-art .subject-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  align-self: flex-end;
}
.course-art.purple {
  background: #f2edfd;
  color: #9364d3;
  border-color: #eae3f6;
}
.course-art.teal {
  background: #e8f6f3;
  color: #29a38d;
  border-color: #dbeee8;
}
.course-art.rose {
  background: #fcedf2;
  color: #cb658a;
  border-color: #f3e2e9;
}
.course-art.amber {
  background: #fcf4e4;
  color: #c19847;
  border-color: #f1e7d1;
}
.course-art.indigo {
  background: #edeffc;
  color: #737bd1;
  border-color: #e0e5f6;
}
.course-art .virtual {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 10px;
  background: #ffffffb3;
  padding: 4px 7px;
  border-radius: 5px;
}
.course-card .card-body {
  padding: 21px;
}
.course-code {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #97a6ba;
  margin-bottom: 7px;
}
.course-card h3 {
  font-size: 19px;
  margin-bottom: 9px;
}
.course-description {
  font-size: 13px;
  color: #8291a5;
  line-height: 1.65;
  min-height: 43px;
  margin-bottom: 18px;
}
.course-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7b8fa6;
  font-size: 12px;
  margin-top: 9px;
}
.course-meta i {
  color: #8da5c2;
}
.course-bottom {
  border-top: 1px solid var(--line);
  margin-top: 21px;
  padding-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.price {
  font-size: 22px;
  color: #2864ef;
  font-weight: 750;
  letter-spacing: -0.5px;
}
.price small {
  font-size: 10px;
  letter-spacing: 0;
  color: #92a2b7;
  font-weight: 400;
  display: block;
  margin-top: 1px;
}
.detail-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
}
.topic-list {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}
.topic-list li {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 11px;
  font-size: 14px;
}
.topic-list li span {
  font-size: 11px;
  background: #edf3ff;
  color: #477bce;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.soft-panel {
  padding: 22px;
  background: #f6f8fc;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.steps {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9caabd;
  font-size: 13px;
  margin-bottom: 30px;
}
.step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.step span {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #e9edf5;
  color: #8b9eb6;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.step.active {
  color: #3269d8;
  font-weight: 600;
}
.step.active span {
  background: #2864ef;
  color: white;
}
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 25px;
  align-items: start;
}
.order-summary {
  position: sticky;
  top: 25px;
}
.order-summary h2 {
  margin-bottom: 24px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 14px;
  margin: 18px 0;
}
.summary-total {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.summary-total strong {
  font-size: 25px;
  color: #2864ef;
}
.cart-course {
  display: flex;
  align-items: center;
  gap: 19px;
  padding: 23px;
  margin-bottom: 16px;
}
.cart-course .info {
  flex: 1;
}
.cart-course h3 {
  margin-bottom: 5px;
}
.cart-course .icon-box {
  width: 59px;
  height: 59px;
  font-size: 27px;
}
.notice {
  padding: 14px 17px;
  border-radius: 9px;
  background: #eef4ff;
  color: #637fa7;
  font-size: 13px;
  line-height: 1.6;
  display: flex;
  gap: 11px;
}
.notice.amber {
  background: #fff6e3;
  color: #a37b39;
}
.payment-option {
  padding: 25px;
  margin-bottom: 18px;
}
.payment-option h2 {
  display: flex;
  align-items: center;
  gap: 11px;
}
.payment-option h2 i {
  color: #487ddb;
}
.empty-state {
  text-align: center;
  padding: 60px 25px;
  background: white;
  border: 1px dashed #d9e3f1;
  border-radius: 12px;
}
.empty-state i {
  font-size: 35px;
  color: #94afcf;
  display: block;
  margin-bottom: 17px;
}
.empty-state p {
  color: #8a9bb0;
  font-size: 14px;
}
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 90% 90%, #2358c1 0, transparent 55%),
    linear-gradient(125deg, #112b49, #1d3e6c);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  background: white;
  border-radius: 19px;
  padding: 34px 38px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 80px #071c4530;
}
.auth-brand {
  text-align: center;
  margin-bottom: 27px;
}
.auth-brand .brand-icon {
  margin: 0 auto 17px;
  width: 57px;
  height: 57px;
  font-size: 31px;
  border-radius: 15px;
}
.auth-brand h1 {
  font-size: 25px;
  margin-bottom: 5px;
}
.auth-brand p {
  font-size: 12px;
  color: #92a3bc;
}
.auth-tabs {
  display: flex;
  background: #f2f5fb;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 23px;
}
.auth-tabs a {
  flex: 1;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  color: #8394aa;
  font-size: 13px;
}
.auth-tabs a.active {
  background: white;
  color: #2c5aa1;
  box-shadow: 0 2px 5px #17365d08;
  font-weight: 600;
}
.auth-card .form-label {
  font-size: 12px;
}
.auth-card .form-control {
  font-size: 13px;
  background: #f8fafd;
}
.auth-footer {
  color: #87a5cd;
  font-size: 11px;
  margin-top: 23px;
}
.demo-logins {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 17px;
  text-align: center;
}
.demo-logins p {
  color: #8fa2be;
  font-size: 11px;
  margin-bottom: 10px;
}
.demo-logins .btn {
  font-size: 11px;
  padding: 7px 10px;
}
.demo-label {
  font-size: 10px;
  padding: 4px 7px;
  border: 1px solid #e7d8b3;
  background: #fff9ee;
  border-radius: 5px;
  color: #ad8a43;
  white-space: nowrap;
}
.profile-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 22px;
}
.profile-banner {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px;
  background: #f6f8fc;
  border-radius: 11px;
  margin-bottom: 26px;
}
.profile-banner .avatar {
  width: 60px;
  height: 60px;
  font-size: 22px;
  background: #245bd1;
  color: white;
}
.profile-menu {
  padding: 14px;
  align-self: start;
}
.profile-menu a,
.profile-menu button {
  display: flex;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: 7px;
  gap: 12px;
  font-size: 13px;
  color: #7089a5;
}
.profile-menu .active {
  background: #edf4ff;
  color: #2864ef;
}
.review-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.review-summary span {
  font-size: 12px;
  color: #8a9bb1;
  display: block;
  margin-bottom: 4px;
}
.review-summary strong {
  font-size: 14px;
}
.chart-line {
  width: 100%;
  height: 190px;
}
.report-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.ranking-row {
  margin: 20px 0;
}
.ranking-title {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 9px;
}
.progress {
  height: 7px;
  background: #edf2fa;
  border-radius: 6px;
}
.progress-bar {
  background: #4a80ec;
  border-radius: 6px;
}
.mobile-menu {
  display: none;
}
.toast {
  background: white;
  box-shadow: 0 5px 30px #142c4920;
}
.text-error {
  color: #bc3652;
}
.form-error {
  border-radius: 7px;
  background: #fff0f2;
  color: #b34e61;
  padding: 11px 13px;
  font-size: 13px;
  margin-bottom: 16px;
}
.loading-line {
  padding: 50px;
  text-align: center;
  color: #899cb7;
}
.mobile-scrim {
  display: none;
}
.report-filter {
  display: flex;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
.report-filter label {
  font-size: 12px;
  color: #8a9bb1;
}
.report-filter input {
  width: 145px;
  font-size: 12px;
  padding: 8px;
}
.table-action {
  border: 1px solid #dbe7ff;
  background: #f5f8ff;
  color: #4a7ddb;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.demo-checkout {
  max-width: 520px;
  margin: 35px auto;
}
.method-list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
@media (min-width: 1500px) {
  .content {
    padding: 35px 45px;
  }
  .chart-area {
    height: 250px;
  }
  .stat {
    padding: 24px;
  }
  .course-art {
    height: 130px;
  }
}
@media (max-width: 1200px) {
  .sidebar {
    width: 211px;
    padding: 25px 13px;
  }
  .main-shell {
    margin-left: 211px;
  }
  .content {
    padding: 25px;
  }
  .topbar {
    padding: 0 25px;
  }
  .stats {
    gap: 12px;
  }
  .stat {
    padding: 16px;
  }
  .stat-value {
    font-size: 25px;
  }
  .dashboard-grid {
    grid-template-columns: 1.4fr 1fr;
  }
  .donut-layout {
    gap: 15px;
  }
  .donut {
    width: 123px;
    height: 123px;
  }
  .donut-hole {
    width: 96px;
    height: 96px;
  }
  .donut-hole strong {
    font-size: 23px;
  }
  .course-grid {
    gap: 16px;
  }
  .topbar-date {
    display: none;
  }
  .checkout-layout {
    grid-template-columns: 1fr 300px;
  }
}
@media (max-width: 980px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-panels {
    grid-template-columns: 1fr;
  }
  .checkout-layout {
    grid-template-columns: 1fr;
  }
  .order-summary {
    position: static;
  }
  .heading-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .portal-header {
    padding: 0 22px;
  }
  .portal-nav {
    gap: 2px;
  }
  .portal-nav a {
    padding: 9px;
    font-size: 13px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-menu {
    display: flex;
  }
  .profile-menu a,
  .profile-menu button {
    width: auto;
  }
  .page-heading {
    align-items: start;
  }
  .detail-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 700px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.2s;
    width: 238px;
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .mobile-scrim.show {
    display: block;
    position: fixed;
    inset: 0;
    background: #07162988;
    z-index: 39;
  }
  .main-shell {
    margin-left: 0;
  }
  .mobile-menu {
    display: inline-flex;
  }
  .topbar {
    height: 65px;
    padding: 0 18px;
  }
  .topbar-right {
    gap: 12px;
  }
  .breadcrumb-text {
    display: none;
  }
  .content {
    padding: 23px 17px;
  }
  .page-heading {
    flex-wrap: wrap;
    gap: 17px;
    margin-bottom: 23px;
  }
  h1 {
    font-size: 24px;
  }
  .heading-actions {
    justify-content: start;
    width: 100%;
  }
  .stats {
    gap: 11px;
  }
  .stat {
    padding: 15px;
  }
  .stat-label {
    font-size: 11px;
  }
  .stat-value {
    font-size: 24px;
  }
  .stat .icon-box {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  .stat-foot {
    font-size: 10px;
  }
  .stat-top {
    gap: 3px;
  }
  .card-body {
    padding: 18px;
  }
  .dashboard-grid {
    gap: 17px;
  }
  .footer {
    font-size: 10px;
    gap: 14px;
  }
  .portal-header {
    height: auto;
    min-height: 78px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 18px;
  }
  .portal-header .brand-title {
    font-size: 15px;
  }
  .portal-header .brand-sub {
    font-size: 10px;
  }
  .portal-header .brand-icon {
    width: 36px;
    height: 36px;
  }
  .portal-nav {
    width: 100%;
    justify-content: space-between;
    overflow: auto;
  }
  .portal-content {
    padding: 25px 17px;
  }
  .catalog-intro {
    display: block;
  }
  .catalog-intro h1 {
    font-size: 26px;
  }
  .catalog-intro .badge {
    margin-top: 17px;
  }
  .course-grid {
    grid-template-columns: 1fr;
  }
  .course-art {
    height: 95px;
  }
  .course-description {
    min-height: 0;
  }
  .filter-pills {
    gap: 6px;
  }
  .filter-pill {
    padding: 7px 10px;
  }
  .toolbar {
    gap: 14px;
  }
  .search-field {
    max-width: none;
    flex-basis: 100%;
  }
  .auth-card {
    padding: 28px 25px;
  }
  .cart-course {
    padding: 17px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .cart-course .icon-box {
    width: 45px;
    height: 45px;
  }
  .cart-course h3 {
    font-size: 15px;
  }
  .steps {
    font-size: 11px;
    gap: 7px;
  }
  .review-summary {
    grid-template-columns: 1fr;
  }
  .modal-body {
    padding: 20px;
  }
  .profile-menu {
    flex-wrap: wrap;
  }
  .report-filter {
    width: 100%;
  }
  .table {
    min-width: 570px;
  }
  .table-wrap {
    max-width: 100%;
  }
  .bar-chart {
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  .bar-label {
    font-size: 9px;
    max-width: 51px;
  }
  .donut-layout {
    justify-content: center;
  }
  .donut {
    width: 150px;
    height: 150px;
  }
  .donut-hole {
    width: 115px;
    height: 115px;
  }
}
@media print {
  .sidebar,
  .topbar,
  .portal-header,
  .heading-actions,
  .btn,
  .toolbar,
  .footer,
  .demo-label {
    display: none !important;
  }
  .main-shell {
    margin: 0;
  }
  .content,
  .portal-content {
    padding: 0;
  }
  .card,
  .stat {
    break-inside: avoid;
    box-shadow: none;
  }
  .table {
    font-size: 10px;
  }
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
  body {
    background: white;
  }
  .chart-area {
    height: 150px;
  }
}

.stats-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 700px) {
  .stats-three {
    grid-template-columns: 1fr;
  }
  .toast-container {
    max-width: 100%;
  }
}
/* Business identity: preserve the original supplied logo without altering it. */
.business-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px solid #ffffff35;
  background: #eee3ce;
}
.auth-brand .business-logo {
  width: 112px;
  height: 112px;
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: 0 5px 20px #071c4515;
}
.portal-header .business-logo {
  width: 54px;
  height: 54px;
}
.sidebar .brand {
  gap: 10px;
}
.sidebar .brand-title {
  font-size: 16px;
}
.google-button {
  background: #fff;
  color: #273446;
  border: 1px solid #cbd3df;
  min-height: 44px;
  box-shadow: none;
}
.google-button .bi-google {
  color: #4285f4;
  font-size: 19px;
}
.google-button:hover {
  background: #f3f6fb;
  border-color: #94a8c4;
  color: #1b2d46;
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin: 20px 0 14px;
}
.auth-divider:before,
.auth-divider:after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}
.appearance-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  margin: 0 0 26px;
}
.theme-options {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 180px;
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}
.theme-option:has(input:checked) {
  border-color: var(--blue);
  background: #2864ef09;
}
.theme-option:has(input:focus-visible) {
  outline: 3px solid #78a4ff;
  outline-offset: 3px;
}
.theme-option input {
  position: absolute;
  right: 13px;
  bottom: 15px;
  accent-color: var(--blue);
}
.theme-preview {
  height: 76px;
  border-radius: 7px;
  border: 1px solid #d8e0ec;
  display: grid;
  grid-template-columns: 23px 1fr;
  gap: 7px;
  padding: 8px;
  pointer-events: none;
}
.theme-preview span:first-child {
  grid-row: span 2;
  background: #193654;
  border-radius: 3px;
}
.theme-preview-light {
  background: #edf2fa;
}
.theme-preview-light span:not(:first-child) {
  background: #fff;
  border: 1px solid #dce4ee;
  border-radius: 3px;
}
.theme-preview-dark {
  background: #111d30;
  border-color: #3a4b66;
}
.theme-preview-dark span:first-child {
  background: #2c4e80;
}
.theme-preview-dark span:not(:first-child) {
  background: #293951;
  border-radius: 3px;
}
[data-bs-theme="dark"] {
  --navy: #0c182a;
  --ink: #e3ebf7;
  --muted: #a4b3ca;
  --blue: #729aff;
  --bg: #111d30;
  --line: #31415a;
  --shadow: 0 4px 18px #00000014;
  --bs-body-bg: #111d30;
  --bs-body-color: #e3ebf7;
  --bs-secondary-color: #a4b3ca;
  --bs-border-color: #31415a;
  --bs-tertiary-bg: #24334a;
}
[data-bs-theme="dark"] body {
  background: var(--bg);
  color: var(--ink);
}
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat,
[data-bs-theme="dark"] .topbar,
[data-bs-theme="dark"] .portal-header,
[data-bs-theme="dark"] .auth-card,
[data-bs-theme="dark"] .donut-hole,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .toast,
[data-bs-theme="dark"] .empty-state {
  background: #1b2a40;
  color: var(--ink);
  border-color: var(--line);
}
[data-bs-theme="dark"] .sidebar {
  background: linear-gradient(170deg, #0b1627, #15283e);
}
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .search-field input,
[data-bs-theme="dark"] .auth-card .form-control {
  background: #142237;
  border-color: #3a4b65;
  color: #e3ebf7;
}
[data-bs-theme="dark"] .form-control::placeholder {
  color: #97a8c0;
}
[data-bs-theme="dark"] .form-control[readonly] {
  background: #23334b;
}
[data-bs-theme="dark"] .btn-primary {
  background: #3469e2;
  border-color: #3469e2;
  color: #fff;
}
[data-bs-theme="dark"] .btn-primary:hover {
  background: #457aef;
}
[data-bs-theme="dark"] .btn-light,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .filter-pill,
[data-bs-theme="dark"] .notify,
[data-bs-theme="dark"] .google-button {
  background: #24364e;
  border-color: #40516b;
  color: #e0e8f5;
}
[data-bs-theme="dark"] .btn-light:hover,
[data-bs-theme="dark"] .google-button:hover {
  background: #304763;
}
[data-bs-theme="dark"] a {
  color: #94b4ff;
}
[data-bs-theme="dark"] a.btn-primary {
  color: #fff;
}
[data-bs-theme="dark"] .soft-panel,
[data-bs-theme="dark"] .profile-banner,
[data-bs-theme="dark"] .auth-tabs {
  background: #142237;
  border-color: var(--line);
}
[data-bs-theme="dark"] .auth-tabs a.active,
[data-bs-theme="dark"] .profile-menu .active,
[data-bs-theme="dark"] .portal-nav a.active,
[data-bs-theme="dark"] .filter-pill.active {
  background: #293f66;
  color: #aac4ff;
  border-color: #5877a7;
}
[data-bs-theme="dark"] .table {
  --bs-table-bg: #1b2a40;
  --bs-table-color: #e3ebf7;
  --bs-table-border-color: #31415a;
}
[data-bs-theme="dark"] .table thead th {
  background: #162338;
  color: #b7c6dc;
}
[data-bs-theme="dark"] .table .name {
  color: #e4edf9;
}
[data-bs-theme="dark"] .table-action {
  background: #243b60;
  color: #abc5ff;
  border-color: #46638e;
}
[data-bs-theme="dark"] .table .subline,
[data-bs-theme="dark"] .course-code,
[data-bs-theme="dark"] .course-description,
[data-bs-theme="dark"] .course-meta,
[data-bs-theme="dark"] .stat-label,
[data-bs-theme="dark"] .stat-foot,
[data-bs-theme="dark"] .page-heading p,
[data-bs-theme="dark"] .catalog-intro p,
[data-bs-theme="dark"] .legend-row,
[data-bs-theme="dark"] .topbar-date {
  color: #a7b8d0;
}
[data-bs-theme="dark"] .legend-row strong,
[data-bs-theme="dark"] .breadcrumb-text strong {
  color: #e4edf9;
}
[data-bs-theme="dark"] .course-art {
  background: #223b62;
  color: #a7c6ff;
  border-color: #354e71;
}
[data-bs-theme="dark"] .course-art.purple {
  background: #382e53;
  color: #d0b2fc;
}
[data-bs-theme="dark"] .course-art.teal {
  background: #203e40;
  color: #85dcca;
}
[data-bs-theme="dark"] .course-art.rose {
  background: #482e40;
  color: #efadca;
}
[data-bs-theme="dark"] .course-art.amber {
  background: #443d2e;
  color: #edcc88;
}
[data-bs-theme="dark"] .course-art.indigo {
  background: #2e3555;
  color: #b4bdff;
}
[data-bs-theme="dark"] .course-art .virtual {
  background: #101d306b;
  color: inherit;
}
[data-bs-theme="dark"] .icon-box,
[data-bs-theme="dark"] .avatar,
[data-bs-theme="dark"] .topic-list li span {
  background: #293f66;
  color: #a7c6ff;
}
[data-bs-theme="dark"] .icon-box.teal {
  background: #21483f;
  color: #8de0bc;
}
[data-bs-theme="dark"] .icon-box.amber {
  background: #4a3e28;
  color: #edcc88;
}
[data-bs-theme="dark"] .icon-box.purple {
  background: #3e315a;
  color: #d2b5ff;
}
[data-bs-theme="dark"] .icon-box.rose {
  background: #4a2e40;
  color: #efacc8;
}
[data-bs-theme="dark"] .notice {
  background: #253c5e;
  color: #bed1ee;
}
[data-bs-theme="dark"] .notice.amber,
[data-bs-theme="dark"] .badge-amber,
[data-bs-theme="dark"] .demo-label {
  background: #443923;
  color: #f0d197;
  border-color: #665333;
}
[data-bs-theme="dark"] .badge-green {
  background: #204737;
  color: #9be6c2;
}
[data-bs-theme="dark"] .badge-red,
[data-bs-theme="dark"] .form-error {
  background: #4f2a38;
  color: #ffb5c6;
}
[data-bs-theme="dark"] .badge-blue {
  background: #29416a;
  color: #b5ccff;
}
[data-bs-theme="dark"] .badge-gray {
  background: #2e3d54;
  color: #becce0;
}
[data-bs-theme="dark"] .badge-purple {
  background: #3e315a;
  color: #d2b5ff;
}
[data-bs-theme="dark"] .auth-page {
  background:
    radial-gradient(ellipse at 90% 90%, #173562, transparent 55%), #0b1525;
}
[data-bs-theme="dark"] .bar-chart {
  background: repeating-linear-gradient(
    to top,
    transparent 0,
    transparent calc(25% - 1px),
    #31415a calc(25% - 1px),
    #31415a 25%
  );
}
[data-bs-theme="dark"] .progress {
  background: #32435c;
}
[data-bs-theme="dark"] .chart-line polyline[fill="#edf3ff"] {
  fill: #253c5e;
}
[data-bs-theme="dark"] .chart-line path {
  stroke: #31415a;
}
[data-bs-theme="dark"] .footer {
  border-color: #31415a;
  color: #9bacc6;
}
@media (max-width: 700px) {
  .theme-option {
    width: calc(50% - 8px);
    min-width: 125px;
  }
  .portal-header .business-logo {
    width: 50px;
    height: 50px;
  }
}

.course-art.has-photo {
  position: relative;
  overflow: hidden;
}
.course-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-art.has-photo .subject-label {
  z-index: 1;
  background: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 5px 9px;
  border-radius: 6px;
}
.course-art.has-photo .virtual {
  z-index: 1;
}
.upload-preview {
  display: block;
  width: 100%;
  max-width: 480px;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}
.receipt-image {
  display: block;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
}

.module-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
.social-float {
  position: fixed;
  right: 20px;
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1030;
}
.social-link {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white !important;
  font-size: 24px;
  box-shadow: 0 5px 18px #14294730;
  position: relative;
  text-decoration: none;
  animation: social-arrive 0.65s ease-out both;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.social-link:hover,
.social-link:focus-visible {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 22px #14294750;
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.social-whatsapp {
  background: #128c4a;
}
.social-instagram {
  background: linear-gradient(35deg, #f9a33d, #d72975, #773dbb);
  animation-delay: 0.12s;
}
.social-facebook {
  background: #1877f2;
  animation-delay: 0.24s;
}
.social-link span {
  position: absolute;
  right: 62px;
  background: #122944;
  color: white;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.social-link:hover span,
.social-link:focus-visible span {
  opacity: 1;
}
@keyframes social-arrive {
  from {
    opacity: 0;
    translate: 24px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
body:has(.modal.show) .social-float {
  visibility: hidden;
}
#app main {
  padding-bottom: 100px;
}
@media (max-width: 600px) {
  .social-float {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    flex-direction: row;
    gap: 9px;
  }
  .social-link {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  .social-link span {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .social-link,
  .social-link span {
    animation: none;
    transition: none;
  }
  .social-link:hover,
  .social-link:focus-visible {
    transform: none;
  }
}

@media (min-width: 601px) {
  #app main {
    padding-right: 88px;
  }
}

.bank-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.bank-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--bs-border-color);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  min-width: 0;
}
.bank-choice:has(input:checked) {
  border-color: #2864ed;
  background: var(--bs-primary-bg-subtle);
}
.bank-choice img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  border-radius: 12px;
  background: white;
}
.bank-choice span {
  min-width: 0;
}
.bank-number {
  font-weight: 700;
  overflow-wrap: anywhere;
}
.bank-choice small {
  font-size: 12px;
}
.bank-choice input {
  accent-color: #2864ed;
}
#comment-code {
  font-weight: 700;
  letter-spacing: 0.04em;
}
@media (max-width: 650px) {
  .bank-grid {
    grid-template-columns: 1fr;
  }
}

.avatar.profile-photo {
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.profile-banner .profile-photo {
  width: 76px;
  height: 76px;
}

.account-menu{position:relative}.account-menu summary{list-style:none;cursor:pointer;border-radius:50%}.account-menu summary::-webkit-details-marker{display:none}.account-menu summary:focus-visible{outline:3px solid #397cff}.account-dropdown{position:absolute;right:0;top:48px;min-width:225px;padding:16px;background:var(--bs-body-bg);color:var(--bs-body-color);border:1px solid var(--bs-border-color);border-radius:14px;box-shadow:0 8px 25px #0002;z-index:200}.account-dropdown a,.account-dropdown button{display:block;text-align:left;padding:10px 0;background:none;border:0;color:inherit;width:100%}.account-dropdown button{color:#dc3545}