/* SkillPath UI System
   Child-friendly without looking childish: rounded geometry, calm bright color,
   simple line icons, generous whitespace, clear parent-facing information. */

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

:root {
  --ink: #20283f;
  --ink-2: #34405e;
  --muted: #6e768b;
  --purple: #6857df;
  --purple-dark: #5545c9;
  --purple-soft: #efedff;
  --orange: #ff8a5b;
  --yellow: #ffd66b;
  --mint: #cdeedb;
  --sky: #dcedff;
  --pink: #ffe3ea;
  --cream: #fff8eb;
  --line: #e7e9f1;
  --soft: #f7f8fc;
  --white: #fff;
  --dark: #24203d;
  --success: #247a4d;
  --success-bg: #e8f7ee;
  --warning: #a86218;
  --warning-bg: #fff3de;
  --danger: #9c4039;
  --danger-bg: #fff0ee;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(45, 40, 78, .10);
  --shadow-sm: 0 8px 24px rgba(45, 40, 78, .08)
}

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

b,
strong {
  font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 500;
  letter-spacing: -0.2px;
}

a {
  text-decoration: none;
  color: inherit
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit
}

button {
  cursor: pointer
}

.hidden {
  display: none !important
}

::selection {
  background: #ded8ff;
  color: #292052
}

/* Icons */
.ui-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor
}

.ui-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.btn .ui-icon,
.text-link .ui-icon,
.price-row a .ui-icon,
.category-link .ui-icon,
.feature-cta .ui-icon {
  width: 16px;
  height: 16px
}

/* Top navigation */
.site-header {
  height: 78px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 233, 241, .85)
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.brand-logo {
  height: 40px;
  width: auto;
  display: block
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 600
}

.main-nav a {
  position: relative;
  padding: 8px 0
}

.main-nav a:after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  background: var(--purple);
  border-radius: 99px;
  transition: .2s
}

.main-nav a:hover {
  color: var(--purple)
}

.main-nav a:hover:after {
  left: 0;
  right: 0
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px
}

.header-actions form {
  margin: 0
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1.5px solid #e2e4ee;
  border-radius: 12px;
  background: #ffffff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all .2s ease;
  box-shadow: 0 2px 6px rgba(32, 40, 63, .04)
}

.nav-toggle:hover {
  background: #f7f6ff;
  border-color: #d2cafc
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: #20283f;
  border-radius: 99px;
  transition: all .25s ease;
  display: block
}

.nav-toggle[aria-expanded="true"] {
  background: #f1efff;
  border-color: #c8bdfa
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
  background: var(--purple)
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
  background: var(--purple)
}

/* Buttons */
.btn {
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 11px 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 600;
  font-size: 13px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease
}

.btn:hover {
  transform: translateY(-1px)
}

.btn-primary {
  background: var(--purple);
  color: #fff;
  box-shadow: 0 9px 22px rgba(104, 87, 223, .22)
}

.btn-primary:hover {
  background: var(--purple-dark);
  box-shadow: 0 12px 28px rgba(104, 87, 223, .28)
}

.btn-soft {
  background: #f2f0ff;
  color: #5545c9;
  border-color: #e5e1ff
}

.btn-soft:hover {
  background: #eae6ff
}

.btn-ghost {
  background: #f5f6f8;
  color: var(--ink);
  border-color: #f0f1f4
}

.btn-ghost:hover {
  background: #eef0f5
}

.btn-white {
  background: #fff;
  color: var(--purple);
  border-color: #e6e2ff
}

.btn-lg {
  padding: 14px 20px;
  border-radius: 15px;
  font-size: 14px
}

.btn-sm {
  padding: 8px 14px;
  border-radius: 11px;
  font-size: 11px
}

.full {
  width: 100%
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--purple);
  font-size: 13px;
  font-weight: 600
}

/* Feedback */
.flash {
  position: fixed;
  right: 22px;
  top: 128px;
  z-index: 100;
  width: min(420px, calc(100vw - 40px));
  border-radius: 15px;
  padding: 13px 15px;
  box-shadow: var(--shadow-sm);
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.flash.success {
  background: #eefaf2;
  border: 1px solid #cdebd8;
  color: #236b45
}

.flash.error {
  background: #fff3f1;
  border: 1px solid #f1cfc9;
  color: #8a3e36;
  display: block
}

.flash ul {
  margin: 7px 0 0 18px;
  padding: 0
}

/* Hero */
.hero {
  min-height: 660px;
  padding: 76px 7% 72px;
  display: grid;
  grid-template-columns: 1.03fr .97fr;
  gap: 54px;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 90% 4%, #ece8ff 0, transparent 31%), radial-gradient(circle at 3% 88%, #ebf8f0 0, transparent 27%), #fff
}

.hero-copy {
  max-width: 680px
}

.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f1efff;
  border: 1px solid #e5e0ff;
  color: #5948cb;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dd29c;
  box-shadow: 0 0 0 3px #dff5e7
}

.hero h1 {
  font-family: "Fredoka", sans-serif;
  font-size: 58px;
  line-height: 1.04;
  letter-spacing: -1.7px;
  margin: 16px 0 20px;
  max-width: 700px
}

.hero h1 span {
  color: var(--purple)
}

.hero-copy>p {
  font-size: 18px;
  color: #5f687e;
  line-height: 1.72;
  max-width: 630px;
  margin: 0
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px
}

.hero-proof {
  display: flex;
  gap: 38px;
  margin-top: 40px
}

.hero-proof div {
  padding-left: 12px;
  border-left: 2px solid #e5e6ec
}

.hero-proof b,
.hero-proof span {
  display: block
}

.hero-proof b {
  font-family: "Fredoka";
  font-size: 23px
}

.hero-proof span {
  color: var(--muted);
  font-size: 10px;
  margin-top: 1px
}

.hero-stage {
  height: 480px;
  position: relative;
  display: grid;
  place-items: center
}

.hero-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(104, 87, 223, .18)
}

.orbit-a {
  width: 420px;
  height: 420px
}

.orbit-b {
  width: 318px;
  height: 318px;
  border-color: rgba(255, 138, 91, .22)
}

.hero-board {
  width: 370px;
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 28px;
  padding: 25px;
  box-shadow: 0 28px 70px rgba(49, 43, 89, .14);
  position: relative;
  z-index: 3;
  transform: rotate(1deg)
}

.board-top {
  display: flex;
  align-items: center;
  gap: 10px
}

.profile-mark {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  background: #ffd86e;
  display: grid;
  place-items: center;
  font-family: "Fredoka";
  font-weight: 600;
  font-size: 20px
}

.board-top small,
.board-top b {
  display: block
}

.board-top small {
  font-size: 9px;
  color: var(--muted)
}

.board-top b {
  font-size: 12px
}

.match-badge {
  margin-left: auto;
  background: #eaf8ef;
  color: #24794b;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 600
}

.board-question {
  font-family: "Fredoka";
  font-size: 21px;
  line-height: 1.25;
  margin: 22px 0 14px
}

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

.interest-choice {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px;
  display: grid;
  justify-items: center;
  gap: 7px;
  font-size: 9px;
  font-weight: 600;
  color: #596279
}

.interest-choice .ui-icon {
  width: 25px;
  height: 25px
}

.choice-art {
  background: #fff7ef
}

.choice-tech {
  background: #f2efff
}

.choice-growth {
  background: #f1faf4
}

.interest-choice.active {
  border-color: #a99cf2;
  box-shadow: 0 0 0 3px #f0edff;
  color: #5141c4
}

.board-path {
  margin-top: 17px;
  background: #f7f8fc;
  border-radius: 15px;
  padding: 13px
}

.path-head {
  display: flex;
  justify-content: space-between;
  font-size: 9px
}

.path-head span {
  color: var(--muted)
}

.path-track {
  display: flex;
  gap: 5px;
  margin: 10px 0 8px
}

.path-track i {
  height: 6px;
  flex: 1;
  background: #e0e2ea;
  border-radius: 99px
}

.path-track .done {
  background: #7bc995
}

.path-track .active {
  background: var(--purple)
}

.board-path small {
  font-size: 9px;
  color: #5f6880
}

.floating-note {
  position: absolute;
  z-index: 4;
  background: #fff;
  border: 1px solid #ececf3;
  border-radius: 15px;
  padding: 11px 13px;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 9px
}

.floating-note>.ui-icon {
  width: 27px;
  height: 27px;
  padding: 6px;
  border-radius: 9px;
  background: #f1efff;
  color: var(--purple)
}

.floating-note b,
.floating-note small {
  display: block
}

.floating-note b {
  font-size: 10px
}

.floating-note small {
  font-size: 8px;
  color: var(--muted);
  margin-top: 1px
}

.note-one {
  left: 0;
  top: 10%;
  transform: rotate(-4deg)
}

.note-two {
  right: -1%;
  top: 28%;
  transform: rotate(4deg)
}

.note-three {
  left: 5%;
  bottom: 10%;
  transform: rotate(3deg)
}

.note-three>.ui-icon {
  background: #eaf8ef;
  color: #24794b
}

/* Parent-child trust strip */
.trust-strip {
  padding: 23px 7%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--dark);
  color: #fff
}

.trust-strip>div {
  display: flex;
  align-items: center;
  gap: 14px
}

.trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
  display: grid;
  place-items: center;
  color: #d9d4ff
}

.trust-icon .ui-icon {
  width: 24px;
  height: 24px
}

.trust-strip p {
  font-size: 12px;
  line-height: 1.55;
  margin: 0;
  color: #d5d1e3
}

.trust-strip b {
  color: #fff;
  font-size: 13px
}

/* Shared sections */
.section {
  padding: 82px 7%
}

.section.compact {
  padding-top: 54px
}

.section-soft {
  background: var(--soft)
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 35px;
  margin-bottom: 36px
}

.section-head>div {
  max-width: 700px
}

.section-head>p {
  max-width: 450px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 13px;
  margin: 0
}

.eyebrow {
  display: inline-block;
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase
}

.section-head h2,
.center-head h2,
.value-copy h2 {
  font-family: "Fredoka";
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -.5px;
  margin: 8px 0 0
}

.center-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 36px
}

.center-head p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65
}

.center-head .eyebrow {
  margin-bottom: 3px
}

/* Categories */
.category-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px
}

.category-card {
  --category-accent: #f1efff;
  min-height: 190px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 22px;
  background: linear-gradient(145deg, var(--category-accent), #fff 80%);
  display: flex;
  flex-direction: column;
  transition: .22s
}

.category-card:before,
.category-card:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.category-card:before {
  width: 110px;
  height: 110px;
  right: -28px;
  top: -35px;
  background: rgba(255, 255, 255, .55)
}

.category-card:after {
  width: 45px;
  height: 45px;
  right: 62px;
  bottom: -18px;
  border: 10px solid rgba(255, 255, 255, .6)
}

.category-card:hover {
  transform: translateY(-5px);
  border-color: #dcddea;
  box-shadow: var(--shadow)
}

.category-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .78);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1
}

.category-icon .ui-icon {
  width: 28px;
  height: 28px;
  color: #4b4567
}

.category-copy {
  position: relative;
  z-index: 1;
  margin-top: 18px
}

.category-copy b,
.category-copy small {
  display: block
}

.category-copy b {
  font-family: "Fredoka";
  font-size: 20px
}

.category-copy small {
  color: #60687b;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 4px;
  max-width: 85%
}

.category-link {
  position: relative;
  z-index: 1;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #5548b8
}

/* Course cards and abstract art */
.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.course-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  transition: .22s;
  display: flex;
  flex-direction: column
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: #dedfe8
}

.course-cover {
  height: 205px;
  position: relative;
  overflow: hidden;
  background: #f3f3f7
}

.course-category {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 5;
  background: rgba(255, 255, 255, .91);
  backdrop-filter: blur(8px);
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  color: #4b5265;
  border: 1px solid rgba(255, 255, 255, .7)
}

.course-level-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 5;
  backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.course-level-badge.badge-beginner {
  background: rgba(236, 253, 245, 0.95);
  color: #065f46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.course-level-badge.badge-intermediate {
  background: rgba(254, 243, 199, 0.95);
  color: #92400e;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.course-level-badge.badge-expert {
  background: rgba(243, 232, 255, 0.95);
  color: #6b21a8;
  border: 1px solid rgba(147, 51, 234, 0.35);
}

.course-art {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, var(--course-accent), #fff);
  overflow: hidden
}

.art-shape {
  position: absolute;
  border-radius: 50%
}

.art-shape-a {
  width: 160px;
  height: 160px;
  right: -30px;
  top: -35px;
  background: rgba(255, 255, 255, .55)
}

.art-shape-b {
  width: 72px;
  height: 72px;
  left: 24px;
  bottom: -25px;
  border: 15px solid rgba(255, 255, 255, .68)
}

.art-grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .14;
  background-image: radial-gradient(#4e4867 1px, transparent 1px);
  background-size: 18px 18px
}

.art-icon {
  position: absolute;
  width: 78px;
  height: 78px;
  border-radius: 23px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%) rotate(-5deg);
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 35px rgba(48, 43, 76, .11)
}

.art-icon .ui-icon {
  width: 42px;
  height: 42px;
  color: #4b4466
}

.art-label {
  position: absolute;
  right: 17px;
  bottom: 14px;
  text-align: right;
  z-index: 2
}

.art-label span,
.art-label b {
  display: block
}

.art-label span {
  font-size: 7px;
  letter-spacing: 1.2px;
  color: #73798b;
  font-weight: 600
}

.art-label b {
  font-size: 9px;
  margin-top: 2px;
  color: #464c5f
}

.course-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.course-art.has-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 16, 38, 0) 50%, rgba(15, 12, 32, .62) 100%)
}

.course-art.has-photo .art-label span,
.course-art.has-photo .art-label b {
  color: #fff
}

.course-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.mentor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted)
}

.rating {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: #6b5a32;
  font-weight: 600
}

.rating .ui-icon {
  width: 13px;
  height: 13px;
  fill: #f5c85f;
  stroke: #c89b2f
}

.course-body h3 {
  font-family: "Fredoka";
  font-size: 21px;
  line-height: 1.2;
  margin: 9px 0 7px
}

.course-body>p {
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  min-height: 34px
}

.meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
  color: #656d80;
  font-size: 9px
}

.meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px
}

.meta .ui-icon {
  width: 13px;
  height: 13px;
  color: #858ca0
}

.price-row {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #eff0f4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.price-row b {
  font-size: 13px
}

.price-row small {
  font-size: 9px;
  color: var(--muted);
  margin-left: 2px
}

.price-row a {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--purple);
  font-weight: 600
}

/* Parent value section */
.parent-value-section {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 65px;
  align-items: center
}

.value-visual {
  min-height: 400px;
  position: relative;
  display: grid;
  place-items: center;
  background: #f1efff;
  border-radius: 34px;
  overflow: hidden
}

.value-card {
  position: relative;
  z-index: 2
}

.value-main {
  width: min(390px, 82%);
  background: #fff;
  border: 1px solid #e7e4fb;
  border-radius: 24px;
  padding: 25px;
  box-shadow: var(--shadow)
}

.value-main h3 {
  font-family: "Fredoka";
  font-size: 27px;
  line-height: 1.2;
  margin: 8px 0 20px
}

.value-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

.value-list span {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #f7f7fb;
  border-radius: 12px;
  padding: 10px;
  font-size: 10px;
  font-weight: 600
}

.value-list .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--purple)
}

.value-shape {
  position: absolute;
  border-radius: 50%
}

.shape-a {
  width: 180px;
  height: 180px;
  background: #ffd977;
  left: -60px;
  bottom: -50px
}

.shape-b {
  width: 120px;
  height: 120px;
  border: 25px solid #d1efdd;
  right: -30px;
  top: -30px
}

.value-copy>p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7
}

.check-list {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 10px
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 12px;
  font-weight: 600
}

.check-list .ui-icon {
  width: 20px;
  height: 20px;
  color: #2c8a56
}

/* Features */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.feature-grid article {
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 22px;
  background: #fff;
  transition: .2s
}

.feature-grid article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm)
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center
}

.feature-icon .ui-icon {
  width: 26px;
  height: 26px
}

.feature-grid h3 {
  font-family: "Fredoka";
  font-size: 18px;
  margin: 14px 0 6px
}

.feature-grid p {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0
}

.feature-grid .feature-wide {
  grid-column: span 3;
  background: var(--dark);
  color: #fff;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px
}

.feature-wide .feature-icon {
  background: rgba(255, 255, 255, .1);
  color: #d9d4ff
}

.feature-wide h3 {
  margin: 0 0 3px
}

.feature-wide p {
  color: #cbc7d8
}

.feature-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap
}

/* Steps */
.steps-section {
  padding: 82px 7%;
  background: #f9f9fc
}

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

.steps article {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 22px;
  position: relative;
  min-height: 210px
}

.steps article>b {
  position: absolute;
  right: 18px;
  top: 14px;
  font-family: "Fredoka";
  font-size: 27px;
  color: #dedbea
}

.step-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center
}

.step-icon .ui-icon {
  width: 26px;
  height: 26px
}

.steps h3 {
  font-family: "Fredoka";
  font-size: 18px;
  margin: 25px 0 7px
}

.steps p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0
}

/* CTA */
.cta {
  margin: 72px 7%;
  padding: 45px 48px;
  border-radius: 30px;
  background: linear-gradient(120deg, #6253db, #7b66e8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  position: relative;
  overflow: hidden
}

.cta:after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .08);
  right: 16%;
  top: -95px
}

.cta>div,
.cta>.btn {
  position: relative;
  z-index: 2
}

.cta-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: #ded9ff
}

.cta h2 {
  font-family: "Fredoka";
  font-size: 34px;
  line-height: 1.15;
  margin: 7px 0
}

.cta p {
  font-size: 12px;
  color: #ebe8ff;
  max-width: 650px;
  margin: 0
}

/* Footer */
.site-footer {
  padding: 52px 7%;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 38px;
  background: #fff;
  border-top: 1px solid var(--line)
}

.site-footer>div:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px
}

.site-footer strong {
  font-size: 11px;
  margin-bottom: 6px
}

.site-footer a,
.site-footer span {
  color: #737b8d
}

.footer-brand p {
  max-width: 380px;
  font-size: 11px;
  line-height: 1.65;
  color: var(--muted)
}

.footer-note {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #f4f3ff;
  color: #5d50bd !important;
  font-size: 9px;
  font-weight: 600
}

/* Public page hero */
.page-hero {
  padding: 70px 7% 55px;
  background: linear-gradient(135deg, #faf9ff, #f3f7ff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  overflow: hidden
}

.page-hero>div:first-child {
  max-width: 720px
}

.page-hero h1 {
  font-family: "Fredoka";
  font-size: 44px;
  line-height: 1.08;
  margin: 10px 0 12px
}

.page-hero p {
  color: var(--muted);
  line-height: 1.65;
  max-width: 650px;
  margin: 0
}

.page-hero-art {
  width: 180px;
  height: 130px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #e8e6f7;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  transform: rotate(3deg)
}

.page-hero-art>.ui-icon {
  width: 52px;
  height: 52px;
  color: var(--purple)
}

.page-hero-art span {
  position: absolute;
  border-radius: 50%
}

.page-hero-art span:nth-child(2) {
  width: 45px;
  height: 45px;
  background: #ffd76e;
  left: -20px;
  bottom: -10px
}

.page-hero-art span:nth-child(3) {
  width: 35px;
  height: 35px;
  border: 8px solid #ccefd9;
  right: -12px;
  top: -9px
}

/* Filters */
.filter-bar {
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(46, 43, 72, .04)
}

.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 190px;
  font-size: 9px;
  font-weight: 600;
  color: #697083
}

.filter-bar select,
.booking-form select,
.auth-card input,
.form-grid input,
.form-grid textarea,
.inline-form select,
.tool-form select,
.tool-form input {
  border: 1px solid #dfe2eb;
  background: #fff;
  border-radius: 11px;
  padding: 10px 11px;
  outline: none;
  font-size: 11px;
  transition: border .15s, box-shadow .15s
}

.filter-bar select:focus,
.booking-form select:focus,
.auth-card input:focus,
.form-grid input:focus,
.form-grid textarea:focus,
.inline-form select:focus,
.tool-form select:focus,
.tool-form input:focus {
  border-color: #a99df1;
  box-shadow: 0 0 0 3px #f0edff
}

.form-grid textarea {
  resize: vertical;
  font-family: inherit;
  width: 100%
}

.catalog-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 18px;
  font-size: 10px;
  color: var(--muted)
}

.catalog-summary b {
  font-size: 11px;
  color: var(--ink)
}

/* SkillPath Design System - Pagination */
.sp-pagination-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 16px 4px 6px;
  border-top: 1.5px solid #ece8fb;
  width: 100%;
}

.sp-pagination-wrapper.sp-simple-pagination {
  justify-content: center;
}

.sp-pagination-meta {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sp-pagination-meta b {
  color: var(--ink);
  font-weight: 700;
}

.sp-pagination-list {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.sp-page-item {
  display: inline-flex;
  align-items: center;
}

.sp-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  background: #ffffff;
  border: 1.5px solid #ece8fb;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 5px rgba(32, 28, 75, 0.03);
  cursor: pointer;
  user-select: none;
}

.sp-page-link svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
  flex-shrink: 0;
}

.sp-page-item:not(.disabled):not(.active) .sp-page-link:hover {
  background: #f5f3ff;
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(104, 87, 223, 0.16);
}

.sp-page-item:not(.disabled):not(.active) .sp-page-link:active {
  transform: translateY(0);
}

.sp-page-item.active .sp-page-link {
  background: linear-gradient(135deg, var(--purple) 0%, #4f39f6 100%);
  border-color: transparent;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(104, 87, 223, 0.35);
  transform: translateY(-1px);
  pointer-events: none;
}

.sp-page-item.disabled .sp-page-link {
  opacity: 0.45;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e2e8f0;
  color: var(--muted);
  pointer-events: none;
  box-shadow: none;
}

.sp-page-item.dots .sp-page-link,
.sp-page-dots {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  min-width: 20px !important;
  padding: 0 4px !important;
  cursor: default !important;
  pointer-events: none !important;
  font-size: 14px;
}

.admin-card .sp-pagination-wrapper,
.panel .sp-pagination-wrapper,
.table-card .sp-pagination-wrapper {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Fallback generic Laravel pagination styling */
.pagination {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  width: 100%;
}

.pagination nav,
.pagination .pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Generic Fallback for simple-pagination unstyled elements */
nav[role="navigation"] a[rel="prev"],
nav[role="navigation"] a[rel="next"],
nav[role="navigation"] span[aria-disabled="true"] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-decoration: none;
}

@media (max-width: 640px) {
  .sp-pagination-wrapper {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 0 0;
    text-align: center;
  }

  .sp-pagination-meta {
    order: 2;
    font-size: 11px;
  }

  .sp-pagination-list {
    order: 1;
    justify-content: center;
    gap: 4px;
  }

  .sp-page-link {
    height: 35px;
    min-width: 35px;
    padding: 0 9px;
    font-size: 11.5px;
    border-radius: 10px;
  }

  .sp-page-link svg {
    width: 13px;
    height: 13px;
  }
}

.wide-empty {
  grid-column: 1/-1
}

/* Course detail */
.course-detail {
  max-width: 1250px;
  margin: auto
}

.detail-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center
}

.detail-visual {
  min-height: 420px;
  border-radius: 30px;
  overflow: hidden;
  position: relative
}

.detail-visual .course-art {
  position: absolute
}

.detail-art .art-icon {
  width: 115px;
  height: 115px;
  border-radius: 30px
}

.detail-art .art-icon .ui-icon {
  width: 60px;
  height: 60px
}

.detail-art .art-label {
  right: 28px;
  bottom: 24px
}

.detail-copy h1 {
  font-family: "Fredoka";
  font-size: 43px;
  line-height: 1.08;
  margin: 8px 0 10px
}

.detail-copy .lead {
  font-size: 17px;
  color: #5f687e;
  margin-bottom: 18px
}

.detail-copy>p {
  line-height: 1.7;
  color: #5e667b;
  font-size: 13px
}

.meta-lg {
  margin: 14px 0 17px;
  font-size: 10px
}

.meta-lg span {
  background: #f6f7fa;
  border-radius: 10px;
  padding: 7px 9px
}

.mentor-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7f8fb;
  border: 1px solid #eef0f4;
  border-radius: 15px;
  padding: 12px;
  margin: 18px 0
}

.mentor-panel small,
.mentor-panel b {
  display: block
}

.mentor-panel small {
  font-size: 9px;
  color: var(--muted)
}

.mentor-panel b {
  font-size: 11px
}

.mentor-panel .rating {
  margin-left: auto
}

.mentor-avatar {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #ece8ff;
  display: grid;
  place-items: center;
  font-family: "Fredoka";
  font-weight: 600;
  color: #5648bd
}

.course-price {
  display: flex;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid #eff0f4;
  padding-top: 14px
}

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

.course-price b {
  font-family: "Fredoka";
  font-size: 27px
}

.course-price>span {
  font-size: 9px;
  color: var(--muted)
}

/* Course Package Tier Selection */
.course-packages-section {
  margin-top: 36px;
  padding: 32px;
  background: #ffffff;
  border: 1px solid #edf0f7;
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.packages-section-head {
  margin-bottom: 24px;
}

.packages-section-head h2 {
  font-family: "Fredoka";
  font-size: 24px;
  margin: 6px 0;
  color: var(--ink);
}

.packages-section-head p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 2px solid #e8ecf4;
  border-radius: 22px;
  padding: 24px 20px;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}

.package-card:hover {
  border-color: #c7d2fe;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(104, 87, 223, 0.08);
}

.package-card.selected {
  border-color: var(--purple);
  background: #fbfaff;
  box-shadow: 0 10px 30px rgba(104, 87, 223, 0.15);
}

.package-card.featured {
  border-color: #d8b4fe;
}

.package-card.selected.featured {
  border-color: var(--purple);
}

.package-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pkg-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.pkg-badge {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.2px;
}

.pkg-badge.normal {
  background: #f1f5f9;
  color: #475569;
}

.pkg-badge.popular {
  background: #fdf4ff;
  color: #c026d3;
  border: 1px solid #f5d0fe;
}

.pkg-badge.best_value {
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
}

.pkg-title {
  font-family: "Fredoka";
  font-size: 20px;
  color: var(--ink);
  margin: 4px 0 2px;
}

.pkg-duration-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  color: var(--muted);
}

.pkg-duration-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pkg-duration-meta .ui-icon {
  width: 14px;
  height: 14px;
  color: var(--purple);
}

.pkg-pricing {
  padding: 14px 0;
  border-top: 1px dashed #e2e8f0;
  border-bottom: 1px dashed #e2e8f0;
  margin-bottom: 16px;
}

.pkg-orig-price {
  font-size: 12px;
  color: #94a3b8;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.pkg-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: "Fredoka";
  font-size: 26px;
  color: var(--ink);
  line-height: 1.1;
}

.pkg-price .currency {
  font-size: 15px;
  font-weight: 500;
  color: #64748b;
}

.pkg-per-month {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

.pkg-savings-pill {
  display: inline-block;
  background: #dcfce7;
  color: #15803d;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  margin-top: 6px;
}

.pkg-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-grow: 1;
}

.pkg-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.4;
}

.pkg-features li .ui-icon {
  width: 14px;
  height: 14px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 1px;
}

.pkg-select-btn {
  margin-top: auto;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  transition: all 0.2s ease;
}

.package-card.selected .pkg-select-btn {
  background: var(--purple);
  border-color: var(--purple);
  color: #ffffff;
}

/* Booking Selected Package Info */
.booking-selected-pkg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1.5px solid #dcd8fc;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}

.booking-selected-pkg b {
  font-size: 13px;
  color: var(--purple);
  font-weight: 700;
  display: block;
}

.booking-selected-pkg small {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

.booking-selected-pkg .pkg-summary-price {
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}

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

.course-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 30px;
}

.course-benefits article {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #ffffff;
}

.course-benefits>.ui-icon,
.course-benefits article>.ui-icon {
  width: 24px;
  height: 24px;
  color: var(--purple);
  flex-shrink: 0;
}

.course-benefits b,
.course-benefits small {
  display: block;
}

.course-benefits b {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.course-benefits small {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.5;
}

.booking-panel {
  margin-top: 30px;
  background: #f7f8fc;
  border: 1px solid #eceef4;
  border-radius: 24px;
  padding: 28px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 30px;
  width: 100%;
  box-sizing: border-box;
}

.booking-panel h2 {
  font-family: "Fredoka", sans-serif;
  margin: 6px 0;
  font-size: 26px;
  line-height: 1.25;
}

.booking-panel p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.booking-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 15px;
  color: #6355bd;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}

.booking-note .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.booking-form {
  display: grid;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.booking-form label,
.auth-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  width: 100%;
  box-sizing: border-box;
}

.booking-form select,
.booking-form input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid #cbd5e1;
  background-color: #ffffff;
  color: var(--ink);
}

.booking-form button#btnAddToCart {
  width: 100%;
  padding: 13px 18px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  text-align: center;
}

.conflict-box {
  margin: 28px 0;
  background: #fff6f3;
  border: 1px solid #f2d1ca;
  border-radius: 19px;
  padding: 18px;
  color: #74372f
}

.conflict-title {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.conflict-title>span {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffe6e1;
  display: grid;
  place-items: center;
  color: #a14a40
}

.conflict-title>span .ui-icon {
  width: 21px;
  height: 21px
}

.conflict-box h3 {
  font-family: "Fredoka";
  margin: 0
}

.conflict-box p {
  font-size: 10px
}

.conflict-line {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #f1d9d4;
  padding: 9px 0;
  font-size: 10px
}

.alt-chip {
  display: inline-block;
  margin: 3px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  color: #6d514e;
  font-size: 9px
}

.muted-box {
  background: #fff;
  padding: 14px;
  border-radius: 13px;
  color: var(--muted);
  font-size: 11px
}

/* Auth */
.auth-wrap {
  min-height: 76vh;
  padding: 55px 6%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 10% 15%, #efecff, transparent 26%), #fafbfe
}

.auth-shell {
  width: min(940px, 100%);
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow)
}

.auth-side {
  padding: 40px;
  background: linear-gradient(145deg, #f0edff, #f8f7ff);
  position: relative;
  overflow: hidden
}

.auth-side:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #ffd977;
  left: -65px;
  bottom: -70px
}

.auth-side:before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  border: 20px solid #ccefd9;
  border-radius: 50%;
  right: -20px;
  top: -20px
}

.auth-side h2 {
  font-family: "Fredoka";
  font-size: 31px;
  line-height: 1.15;
  margin: 8px 0 12px;
  position: relative;
  z-index: 1
}

.auth-side>p {
  font-size: 12px;
  color: #626a7e;
  line-height: 1.65;
  position: relative;
  z-index: 1
}

.auth-side-list {
  display: grid;
  gap: 9px;
  margin-top: 25px;
  position: relative;
  z-index: 1
}

.auth-side-list span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(255, 255, 255, .67);
  padding: 10px;
  border-radius: 11px
}

.auth-side-list .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--purple)
}

.register-side {
  background: linear-gradient(145deg, #eef8f3, #f8fbf9)
}

.auth-card {
  padding: 38px
}

.auth-card h1 {
  font-family: "Fredoka";
  font-size: 31px;
  margin: 7px 0
}

.auth-card>p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6
}

.auth-card form {
  display: grid;
  gap: 12px;
  margin-top: 18px
}

.auth-card .check {
  flex-direction: row;
  align-items: center
}

.demo-box {
  margin-top: 17px;
  padding: 12px;
  border-radius: 12px;
  background: #f5f4ff
}

.demo-box b,
.demo-box small {
  display: block
}

.demo-box b {
  font-size: 10px
}

.demo-box small {
  font-size: 9px;
  margin-top: 3px;
  color: var(--muted)
}

.auth-card>p:last-child {
  margin-bottom: 0
}

/* Onboarding */
.onboarding-wrap {
  padding: 58px 7%;
  background: linear-gradient(180deg, #fbfaff, #fff)
}

.onboarding-panel {
  padding: 32px 36px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.onboarding-card {
  max-width: 980px;
  margin: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 31px;
  box-shadow: var(--shadow)
}

.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px
}

.onboarding-card h1 {
  font-family: "Fredoka";
  font-size: 39px;
  line-height: 1.1;
  margin: 8px 0
}

.onboarding-card .lead {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  max-width: 700px
}

.onboarding-visual {
  width: 120px;
  height: 100px;
  background: #f2efff;
  border-radius: 24px;
  display: grid;
  place-items: center;
  position: relative;
  color: var(--purple);
  flex: 0 0 auto
}

.onboarding-visual>.ui-icon {
  width: 45px;
  height: 45px
}

.onboarding-visual .dot {
  position: absolute;
  border-radius: 50%
}

.onboarding-visual .d1 {
  width: 26px;
  height: 26px;
  background: #ffd975;
  left: -10px;
  bottom: -6px
}

.onboarding-visual .d2 {
  width: 22px;
  height: 22px;
  border: 6px solid #cdeedb;
  right: -6px;
  top: -5px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 12px 0 28px
}

.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155
}

.form-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 8px 0 13px
}

.form-section-title>div {
  display: flex;
  align-items: center;
  gap: 9px
}

.form-section-title>div>span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center;
  font-family: "Fredoka";
  font-size: 11px
}

.form-section-title h3 {
  font-family: "Fredoka";
  margin: 0;
  font-size: 19px
}

.form-section-title>small {
  font-size: 9px;
  color: var(--muted)
}

.interest-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 30px
}

.interest-select label {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  min-height: 145px;
  transition: .18s;
  background: #fff
}

.interest-select label:hover {
  border-color: #cfc9f4;
  background: #fcfbff
}

.interest-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.interest-icon {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #f3f1ff;
  display: grid;
  place-items: center;
  color: var(--purple)
}

.interest-icon .ui-icon {
  width: 24px;
  height: 24px
}

.interest-select b,
.interest-select small {
  display: block
}

.interest-select b {
  font-family: "Fredoka";
  font-size: 15px;
  margin-top: 14px
}

.interest-select small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 3px
}

.select-indicator {
  position: absolute;
  width: 19px;
  height: 19px;
  border: 1.5px solid #d5d7e0;
  border-radius: 7px;
  right: 12px;
  top: 12px;
  background: #fff
}

.interest-select input:checked~.select-indicator {
  background: var(--purple);
  border-color: var(--purple)
}

.interest-select input:checked~.select-indicator:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  left: 5px;
  top: 5px
}

.interest-select label:has(input:checked) {
  border-color: #a99df1;
  background: #faf9ff;
  box-shadow: 0 0 0 3px #f1efff
}

.preference-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0 0 25px
}

.preference-list label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  cursor: pointer
}

.preference-list input {
  margin-top: 2px
}

.preference-list b,
.preference-list small {
  display: block
}

.preference-list b {
  font-size: 10px
}

.preference-list small {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px
}

/* Child Voice Audio & Input Component */
/* Child Voice Audio & Input Component */
.voice-input-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #fbfaff 0%, #f8faff 100%);
  border: 1.5px solid #e2ddf8;
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(104, 87, 223, 0.05);
  transition: all 0.25s ease;
}

.voice-input-card:focus-within {
  border-color: #6857df;
  box-shadow: 0 6px 24px rgba(104, 87, 223, 0.12);
}

.voice-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.voice-card-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 3px;
}

.voice-card-label .opt-badge {
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.voice-card-desc {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.voice-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-voice-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.btn-voice-pill .ui-icon svg {
  width: 14px;
  height: 14px;
}

.btn-voice-mic {
  background: linear-gradient(135deg, #6857df 0%, #4f46e5 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(104, 87, 223, 0.3);
}

.btn-voice-mic:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px rgba(104, 87, 223, 0.4);
  background: linear-gradient(135deg, #5b48db 0%, #4338ca 100%);
}

.btn-voice-mic.recording {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  animation: micPulseRed 1.5s infinite;
}

@keyframes micPulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.mic-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  opacity: 0.9;
}

.btn-voice-mic.recording .mic-dot {
  background: #ffffff;
  animation: blinkDot 0.8s infinite alternate;
}

@keyframes blinkDot {
  0% { opacity: 0.3; }
  100% { opacity: 1; }
}

.btn-voice-tts {
  background: #ffffff;
  color: #1e1b4b;
  border-color: #e2e8f0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.btn-voice-tts:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #6857df;
  transform: translateY(-1px);
}

.btn-voice-tts.speaking {
  background: #ecfdf5;
  color: #059669;
  border-color: #a7f3d0;
}

.btn-voice-reset {
  background: #ffffff;
  color: #94a3b8;
  border-color: #e2e8f0;
  padding: 7px 10px;
}

.btn-voice-reset:hover {
  color: #ef4444;
  border-color: #fecaca;
  background: #fff5f5;
}

/* Live Recording Visualizer Banner */
.voice-live-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
  border: 1px solid #fca5a5;
  border-radius: 12px;
  padding: 10px 16px;
  color: #991b1b;
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.voice-live-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dc2626;
  animation: blinkDot 0.8s infinite alternate;
}

.live-rec-status {
  font-size: 12px;
  font-weight: 700;
  color: #b91c1c;
}

.live-rec-timer {
  display: inline-block;
  background: rgba(220, 38, 38, 0.15);
  color: #991b1b;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.voice-live-waves {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}

.voice-live-waves span {
  display: inline-block;
  width: 3px;
  height: 6px;
  background: #ef4444;
  border-radius: 2px;
  animation: soundWave 0.9s ease-in-out infinite alternate;
}

.voice-live-waves span:nth-child(2) { animation-delay: 0.15s; height: 14px; }
.voice-live-waves span:nth-child(3) { animation-delay: 0.3s; height: 8px; }
.voice-live-waves span:nth-child(4) { animation-delay: 0.45s; height: 18px; }
.voice-live-waves span:nth-child(5) { animation-delay: 0.2s; height: 10px; }
.voice-live-waves span:nth-child(6) { animation-delay: 0.35s; height: 15px; }
.voice-live-waves span:nth-child(7) { animation-delay: 0.5s; height: 7px; }

@keyframes soundWave {
  0% { transform: scaleY(0.3); }
  100% { transform: scaleY(1.3); }
}

.btn-voice-stop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #dc2626;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-voice-stop:hover {
  background: #b91c1c;
  transform: scale(1.03);
}

/* Textarea Box with Visual State */
.voice-textarea-wrapper {
  position: relative;
  width: 100%;
}

.voice-textarea-control {
  width: 100%;
  min-height: 90px;
  padding: 12px 16px;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1e1b4b;
  background: #ffffff;
  transition: all 0.2s ease;
  box-sizing: border-box;
  resize: vertical;
}

.voice-textarea-control:focus {
  border-color: #6857df;
  outline: none;
  box-shadow: 0 0 0 3.5px rgba(104, 87, 223, 0.12);
}

.voice-textarea-wrapper.recording .voice-textarea-control {
  border-color: #f87171;
  background: #fffafa;
  box-shadow: 0 0 0 3.5px rgba(239, 68, 68, 0.12);
}

.voice-char-counter {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 4px;
  border-radius: 4px;
}

/* Quick Voice Idea Starter Chips */
.voice-quick-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.quick-chip-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.2px;
}

.quick-chips-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-voice-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.quick-voice-chip:hover {
  background: #f1efff;
  color: #6857df;
  border-color: #c7d2fe;
  transform: translateY(-1px);
}

.quick-voice-chip:active {
  transform: translateY(0);
}

/* Responsive adjustment for Mobile */
@media (max-width: 640px) {
  .voice-input-card {
    padding: 14px 15px;
    gap: 12px;
  }

  .voice-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .voice-card-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .btn-voice-mic {
    flex: 1;
    justify-content: center;
  }

  .voice-live-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .quick-chips-list {
    gap: 5px;
  }

  .quick-voice-chip {
    font-size: 11px;
    padding: 4px 10px;
  }
}

.onboarding-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding-top: 18px;
  border-top: 1px solid #eff0f4
}

.onboarding-submit p {
  font-size: 9px;
  color: var(--muted);
  max-width: 530px
}

.confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: #f7f8fb;
  border: 1px solid #eceef4;
  border-radius: 13px;
  padding: 13px;
  margin: 0 0 22px;
  font-size: 10px;
  font-weight: 600;
  color: #4a5164;
  cursor: pointer
}

.confirm-check input {
  margin-top: 2px
}

/* Dashboard */
.dashboard-page {
  padding: 36px 6% 60px;
  background: #f7f8fc;
  min-height: 38vh
}

.dash-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 23px
}

.dash-title h1 {
  font-family: "Fredoka";
  font-size: 35px;
  margin: 6px 0
}

.dash-title p {
  font-size: 11px;
  color: var(--muted);
  margin: 0
}

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

.dash-actions .btn {
  font-size: 10px
}

.dash-actions .ui-icon {
  width: 16px;
  height: 16px
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.stat-grid article {
  background: #ffffff;
  border: 1px solid #e9ebf2;
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(18, 14, 46, 0.02);
  min-height: 82px;
}

.stat-grid article:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(46, 43, 72, 0.06);
  border-color: #d8daf0;
}

.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center;
  flex: 0 0 44px;
}

.stat-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.stat-icon.tone-blue {
  background: #edf5ff;
  color: #2563eb;
}

.stat-icon.tone-green {
  background: #edfbf3;
  color: #059669;
}

.stat-icon.tone-orange {
  background: #fff4eb;
  color: #ea580c;
}

.stat-icon.tone-pink {
  background: #fdf2f8;
  color: #db2777;
}

.stat-grid article>div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stat-grid article>div>span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  line-height: 1.25;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-grid article>div>b,
.stat-grid b {
  display: block;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #1e1b4b;
  line-height: 1.15;
  margin: 1px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-grid article>div>small,
.stat-grid small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 15px;
  margin-top: 15px
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px
}

.panel-heading h2,
.panel h2 {
  font-family: "Fredoka";
  font-size: 20px;
  margin: 0
}

.panel-kicker {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 2px
}

.child-row,
.transaction-row,
.course-admin-row,
.credit-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #eff0f4;
  padding: 13px 0
}

.child-row:last-child,
.transaction-row:last-child,
.course-admin-row:last-child,
.credit-row:last-child {
  border: 0
}

.child-avatar {
  width: 47px;
  height: 47px;
  border-radius: 14px;
  background: #ece8ff;
  display: grid;
  place-items: center;
  font-family: "Fredoka";
  font-weight: 600;
  color: #5b4ebd;
  font-size: 17px
}

.child-row>div:nth-child(2),
.course-admin-row>div:nth-child(2) {
  flex: 1
}

.child-row h3,
.course-admin-row h3,
.credit-row h3 {
  margin: 0;
  font-family: "Fredoka";
  font-size: 15px
}

.child-row p,
.course-admin-row p,
.credit-row p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 9px
}

.mini-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.mini-tags span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1efff;
  color: var(--purple);
  font-size: 10px;
  font-weight: 600;
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  padding: 3.5px 9.5px;
  border-radius: 999px;
  background: #f1efff;
  color: var(--purple);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
  vertical-align: middle;
  box-sizing: border-box;
  text-decoration: none;
}

.status-chip .ui-icon {
  width: 12.5px;
  height: 12.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.status-chip .ui-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.5;
}

.transaction-row {
  justify-content: space-between
}

.transaction-row small,
.transaction-row b {
  display: block
}

.transaction-row b {
  font-size: 10px
}

.transaction-row small {
  font-size: 8px;
  color: var(--muted)
}

.transaction-row>div:last-child {
  text-align: right
}

.transaction-course {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 3px
}

.status-chip.paid,
.status-chip.active,
.status-chip.available,
.status-chip.confirmed {
  background: #eaf8ef;
  color: #15803d;
  border: 1px solid #c8ecd5;
}

.status-chip.pending,
.status-chip.pending_payment {
  background: #fef8ee;
  color: #b45309;
  border: 1px solid #fde68a;
}

.status-chip.failed,
.status-chip.cancelled,
.status-chip.rejected {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.status-chip.locked,
.status-chip.archived,
.status-chip.used,
.status-chip.expired {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.status-chip.recommended {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.status-chip.soft {
  background: #f3f0ff;
  color: var(--purple);
  border: 1px solid #e4defc;
}

.pay-link {
  border: 0;
  background: transparent;
  color: var(--purple);
  font-size: 8px;
  font-weight: 600;
  padding: 4px 0;
  cursor: pointer
}

.empty-state {
  padding: 20px;
  border-radius: 16px;
  background: #f8f8fc;
  border: 1.5px dashed #e2e8f0;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 14px;
}

.empty-state>.ui-icon {
  width: 28px;
  height: 28px;
  color: #9a93cc;
  flex-shrink: 0;
}

.empty-state b,
.empty-state span {
  display: block;
}

.empty-state b {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}

.empty-state span {
  font-size: 11.5px;
  margin-top: 2px;
  color: #64748b;
  line-height: 1.4;
}

.compact-empty {
  padding: 14px 16px;
}

/* Full Centered Empty State Cards (Empty Cart, Cancelled View, No Orders, etc.) */
.empty-state-full,
.empty-state.empty-state-full,
.empty-state.wide-empty,
.payment-cancelled-card,
.payment-cancelled-card .empty-state,
.cart-items-column .empty-state {
  display: flex !important;
  flex-direction: column !important;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 38px 24px !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-radius: 20px !important;
}

.empty-state-full .empty-state-icon-wrap,
.empty-state .empty-state-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #f1efff;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 6px;
  box-shadow: 0 4px 16px rgba(104, 87, 223, 0.12);
  flex-shrink: 0;
}

.empty-state-full .empty-state-icon-wrap.danger,
.empty-state .empty-state-icon-wrap.danger {
  background: #fef2f2;
  color: #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}

.empty-state-full .empty-state-icon-wrap .ui-icon,
.empty-state .empty-state-icon-wrap .ui-icon {
  width: 30px;
  height: 30px;
}

.empty-state-full h2,
.empty-state-full h3,
.empty-state.empty-state-full h2,
.empty-state.empty-state-full h3 {
  font-family: "Fredoka", sans-serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.3 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.empty-state-full p,
.empty-state.empty-state-full p {
  font-size: 13.5px !important;
  color: #64748b !important;
  max-width: 460px !important;
  margin: 0 auto 8px !important;
  line-height: 1.55 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}

.empty-state-full .empty-state-actions,
.empty-state.empty-state-full .empty-state-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.empty-state-actions .btn {
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 12px;
}

.learning-path-intro,
.info-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  border-radius: 17px;
  background: #f1efff;
  border: 1px solid #e2defc;
  margin-bottom: 14px
}

.path-intro-icon,
.info-banner>span {
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #fff;
  color: var(--purple);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.path-intro-icon .ui-icon,
.info-banner>span .ui-icon {
  width: 23px;
  height: 23px
}

.learning-path-intro b,
.info-banner b {
  font-size: 11px
}

.learning-path-intro p,
.info-banner p {
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0 0;
  line-height: 1.55
}

.certificate-banner {
  background: #fff8eb;
  border-color: #f3e1b7
}

.certificate-banner>span {
  color: #9c6b16
}

.path-list {
  display: grid;
  gap: 11px
}

.path-item {
  display: grid;
  grid-template-columns: 42px 65px 1fr auto;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px
}

.path-number {
  font-family: "Fredoka";
  font-size: 23px;
  color: #d1cedf
}

.path-visual,
.row-icon-vector {
  width: 62px;
  height: 62px;
  border-radius: 17px;
  background: linear-gradient(145deg, var(--path-accent, var(--row-accent, #eeeafe)), #fff);
  display: grid;
  place-items: center;
  color: #514a6b
}

.path-visual .ui-icon,
.row-icon-vector .ui-icon {
  width: 31px;
  height: 31px
}

.path-item h3 {
  font-family: "Fredoka";
  font-size: 15px;
  margin: 4px 0
}

.path-item p,
.path-item small {
  color: var(--muted);
  font-size: 9px
}

.credit-row {
  justify-content: space-between
}

.credit-row>div:nth-child(2) {
  flex: 1
}

.credit-code-mark {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.credit-code-mark .ui-icon {
  width: 24px;
  height: 24px
}

.credit-row small {
  font-size: 8px;
  color: var(--muted)
}

.inline-form {
  display: flex;
  gap: 7px;
  align-items: center
}

.inline-form select {
  min-width: 230px
}

.exam-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #eff0f4
}

.exam-row:last-child {
  border-bottom: 0
}

.exam-main {
  flex: 1
}

.exam-main h3 {
  font-family: "Fredoka";
  font-size: 15px;
  margin: 0
}

.exam-main p {
  font-size: 9px;
  color: var(--muted);
  margin: 4px 0
}

.exam-main small {
  font-size: 8px;
  color: var(--muted)
}

.exam-status {
  text-align: right
}

.exam-status small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 8px
}

.row-icon-vector {
  width: 48px;
  height: 48px;
  border-radius: 14px
}

.row-icon-vector .ui-icon {
  width: 25px;
  height: 25px
}

.mentor-principle,
.review-insight {
  position: relative;
  overflow: hidden
}

.principle-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center;
  margin-bottom: 13px
}

.principle-icon .ui-icon {
  width: 25px;
  height: 25px
}

.mentor-note,
.review-insight p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65
}

.mentor-tools {
  margin-top: 15px
}

.helper-badge {
  font-size: 8px;
  color: #5f55a6;
  background: #f4f2ff;
  border-radius: 999px;
  padding: 5px 7px;
  font-weight: 600
}

.tool-form {
  display: grid;
  grid-template-columns: 1.25fr .68fr 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eff0f4;
}

.tool-form.attendance-form {
  grid-template-columns: 1.4fr 1.1fr 1fr 1.3fr auto auto;
}

.tool-form.exam-form {
  grid-template-columns: 1.6fr 1fr 1.6fr auto;
}

.tool-form:last-child {
  border-bottom: 0;
}

.tool-form b,
.tool-form small {
  display: block;
}

.tool-form b {
  font-size: 11.5px;
}

.tool-form small {
  font-size: 9.5px;
  color: var(--muted);
}

.compact-check {
  font-size: 10px;
  white-space: nowrap;
}

.review-panel {
  margin-top: 15px
}

.review-form {
  border-top: 1px solid #eff0f4;
  padding: 16px 0
}

.review-form:first-of-type {
  padding-top: 10px
}

.review-form-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px
}

.review-form-head b {
  font-family: "Fredoka";
  font-size: 14px
}

.review-form-head small {
  color: var(--muted);
  font-size: 9px
}

.review-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px
}

.review-form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #596176
}

.review-form-grid select,
.review-form-grid textarea {
  border: 1px solid #dfe2eb;
  background: #fff;
  border-radius: 11px;
  padding: 9px 10px;
  outline: none;
  font-size: 11px;
  font-family: inherit;
  resize: vertical
}

.review-form-grid select:focus,
.review-form-grid textarea:focus {
  border-color: #a99df1;
  box-shadow: 0 0 0 3px #f0edff
}

.rating-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px
}

.rating-split article {
  background: #f7f8fb;
  border-radius: 14px;
  padding: 14px
}

.rating-label {
  font-size: 8px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase
}

.rating-split b {
  display: block;
  font-family: "Fredoka";
  font-size: 27px;
  margin: 4px 0 2px
}

.rating-split p {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.5
}

.rating-stars {
  display: flex;
  gap: 2px;
  color: #d4a535
}

.rating-stars .ui-icon {
  width: 12px;
  height: 12px;
  fill: #f4c85f
}

.admin-table-panel {
  margin-top: 15px
}

.table-wrap {
  overflow: auto
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9px
}

th,
td {
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #eff0f4;
  white-space: nowrap
}

th {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .4px
}

.exam-status a.status-chip {
  cursor: pointer;
  transition: .15s;
  border: 1px solid transparent
}

.exam-status a.status-chip:hover {
  border-color: currentColor;
  transform: translateY(-1px)
}

.exam-attempt-list {
  margin: 6px 0
}

.exam-feedback {
  display: block;
  margin-top: 4px;
  color: #8a6d2f;
  font-size: 8px;
  line-height: 1.5;
  max-width: 230px
}

.exam-status form {
  margin-top: 6px
}

/* ==========================================================================
   OFFICIAL CHILD-FRIENDLY CERTIFICATE DESIGN SYSTEM (A4 Landscape)
   ========================================================================== */
.certificate-page {
  padding: 30px 4% 60px;
  background: #f4f5fa;
}

.certificate-sheet {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0 40px;
  perspective: 1000px;
}

.certificate-wrapper {
  width: 100%;
  max-width: 1020px;
  position: relative;
}

.certificate-border {
  width: 100%;
  aspect-ratio: 1.414 / 1;
  background: #ffffff;
  background: radial-gradient(circle at center, #ffffff 0%, #fffdf8 70%, #fbf8ef 100%);
  border: 12px solid #201c4b;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(32, 28, 75, 0.16), 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 44px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* Inner Ornamental Borders */
.certificate-border:before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid #d4af37;
  border-radius: 6px;
  pointer-events: none;
}

.certificate-inner-frame {
  position: absolute;
  inset: 16px;
  border: 1px dashed rgba(212, 175, 55, 0.5);
  border-radius: 4px;
  pointer-events: none;
}

/* Guilloche Pattern Watermark */
.certificate-watermark {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(104, 87, 223, 0.025) 0%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.015) 0px, rgba(212, 175, 55, 0.015) 2px, transparent 2px, transparent 14px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.015) 0px, rgba(212, 175, 55, 0.015) 2px, transparent 2px, transparent 14px);
  pointer-events: none;
}

/* Corner Ornaments */
.cert-corner {
  position: absolute;
  width: 44px;
  height: 44px;
  color: #d4af37;
  pointer-events: none;
  z-index: 2;
}

.cert-corner-tl {
  top: 12px;
  left: 12px;
}

.cert-corner-tr {
  top: 12px;
  right: 12px;
  transform: scaleX(-1);
}

.cert-corner-bl {
  bottom: 12px;
  left: 12px;
  transform: scaleY(-1);
}

.cert-corner-br {
  bottom: 12px;
  right: 12px;
  transform: scale(-1);
}

/* Certificate Top Header */
.cert-header {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cert-brand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cert-brand-logo {
  height: 34px;
  width: auto;
  object-fit: contain;
}

.cert-ribbon-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d4af37 0%, #f59e0b 50%, #b45309 100%);
  color: #ffffff;
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(180, 83, 9, 0.25);
  margin-bottom: 10px;
}

.cert-main-title {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #1e1b4b;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(30, 27, 75, 0.1);
}

.cert-sub-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #d97706;
  text-transform: uppercase;
  margin-top: 4px;
}

.cert-header-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  margin: 10px auto 0;
}

.cert-header-divider .divider-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.cert-header-divider .divider-star {
  color: #d4af37;
  font-size: 12px;
}

/* Certificate Body & Child Name */
.cert-body {
  position: relative;
  z-index: 3;
  width: 100%;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cert-presentation-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5c6479;
  margin-bottom: 8px;
}

.cert-child-name-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 2px 0 10px;
}

.cert-child-name-box .star-accent {
  color: #f59e0b;
  font-size: 22px;
  animation: star-pulse 2s infinite ease-in-out;
}

@keyframes star-pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.cert-child-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-size: 38px;
  font-weight: 600;
  color: #5b36f5;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.1;
  position: relative;
  padding: 0 10px 6px;
  border-bottom: 2px solid #d4af37;
  background: linear-gradient(135deg, #4338ca 0%, #6857df 50%, #d946ef 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cert-description {
  max-width: 620px;
  font-size: 12.5px;
  color: #374151;
  line-height: 1.65;
  margin: 0 auto 10px;
}

.cert-course-highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f1efff;
  border: 1.5px solid #dcd7fa;
  border-radius: 999px;
  padding: 6px 18px;
  margin-bottom: 10px;
}

.cert-course-highlight strong {
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  color: #1e1b4b;
}

.cert-course-highlight .category-chip {
  background: #6857df;
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}

.cert-merit-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 12px;
  padding: 5px 16px;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
}

/* Certificate Footer & Signatures */
.cert-footer {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cert-signatures-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 24px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.cert-sign-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cert-sign-svg {
  height: 38px;
  width: 130px;
  margin-bottom: 4px;
  color: #1e1b4b;
}

.cert-sign-line {
  width: 160px;
  height: 1.5px;
  background: #201c4b;
  margin-bottom: 6px;
}

.cert-sign-name {
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1e1b4b;
}

.cert-sign-role {
  font-size: 9px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 2px;
}

/* Center Rosette Gold Medal */
.cert-seal-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cert-rosette-seal {
  width: 74px;
  height: 74px;
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(180, 83, 9, 0.35));
}

.cert-rosette-seal svg {
  width: 100%;
  height: 100%;
}

/* Certificate Meta & Security Serial */
.cert-meta-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(212, 175, 55, 0.35);
  padding-top: 10px;
  font-size: 9px;
  color: #6b7280;
}

.cert-serial-tag {
  font-family: "Courier New", monospace;
  font-weight: 600;
  color: #4b5563;
  letter-spacing: 0.5px;
}

.cert-auth-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #166534;
  font-weight: 600;
}

/* Responsive adjustments */
@media (max-width: 860px) {
  .certificate-border {
    aspect-ratio: auto;
    padding: 32px 20px;
    gap: 20px;
  }

  .cert-main-title {
    font-size: 22px;
    letter-spacing: 1.5px;
  }

  .cert-child-name {
    font-size: 28px;
  }

  .cert-signatures-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cert-seal-col {
    order: -1;
    margin-bottom: 8px;
  }

  .cert-meta-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ==========================================================================
   UNIFIED PRINT STYLES (INVOICE & CERTIFICATE EXCELLENCE)
   ========================================================================== */
@media print {

  /* 1. Global Reset & Print Adjustments */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 11pt !important;
    -webkit-font-smoothing: antialiased;
  }

  /* 2. Absolute Removal of Web Layout & Navigation */
  .no-print,
  .site-header,
  .site-footer,
  .site-footer-compact,
  .mobile-header-actions,
  .mobile-nav-backdrop,
  .mobile-nav-drawer,
  .mobile-bottom-nav,
  .dash-title,
  .dash-actions,
  .invoice-bottom-actions,
  .flash,
  .btn,
  .payment-toast,
  .admin-sidebar,
  .admin-header,
  .admin-mobile-header,
  .admin-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .dashboard-page,
  .payment-page-wrap,
  .certificate-page {
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    min-height: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  /* 3. Official Commercial Invoice (A4 Portrait) */
  .official-invoice-sheet {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px 20px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    background: #ffffff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    position: relative !important;
    box-sizing: border-box !important;
  }

  .invoice-header-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
  }

  .invoice-company-brand {
    max-width: 440px !important;
    text-align: left !important;
  }

  .company-brand-text h2 {
    font-size: 20px !important;
    color: #1e1b4b !important;
  }

  .invoice-doc-title-block {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: auto !important;
  }

  .invoice-main-title {
    font-size: 28px !important;
    color: #1e293b !important;
  }

  .invoice-status-pill.paid {
    display: inline-flex !important;
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
  }

  .invoice-meta-table {
    width: auto !important;
  }

  .invoice-meta-table td {
    padding: 2px 4px !important;
  }

  .invoice-stamp-watermark {
    position: absolute !important;
    top: 20px !important;
    right: 250px !important;
    display: flex !important;
    border: 2.5px dashed rgba(22, 163, 74, 0.4) !important;
    padding: 4px 14px !important;
  }

  .invoice-stamp-watermark span {
    font-size: 20px !important;
    color: rgba(22, 163, 74, 0.4) !important;
  }

  .invoice-stamp-watermark small {
    font-size: 8px !important;
    color: rgba(22, 163, 74, 0.35) !important;
  }

  .invoice-divider-line {
    margin: 16px 0 !important;
    border-top: 1px solid #cbd5e1 !important;
  }

  .invoice-parties-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
  }

  .invoice-table-wrap {
    overflow: visible !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .invoice-items-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
  }

  .invoice-items-table th {
    background: #f1f5f9 !important;
    color: #334155 !important;
    padding: 8px 10px !important;
    font-size: 10.5px !important;
    border-bottom: 2px solid #cbd5e1 !important;
  }

  .invoice-items-table td {
    padding: 9px 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    font-size: 11px !important;
  }

  .invoice-summary-container {
    display: grid !important;
    grid-template-columns: 1.15fr 0.85fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    margin-bottom: 16px !important;
  }

  .invoice-terbilang-box {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
  }

  .payment-verification-badge {
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    padding: 6px 10px !important;
    display: flex !important;
  }

  .invoice-totals-table-box {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
  }

  .invoice-totals-table td {
    padding: 8px 12px !important;
  }

  .invoice-totals-table .grand-total-row {
    background: #f8fafc !important;
    border-top: 1.5px solid #cbd5e1 !important;
  }

  .invoice-footer-section {
    display: grid !important;
    grid-template-columns: 1.3fr 0.7fr !important;
    gap: 16px !important;
    border-top: 1px dashed #cbd5e1 !important;
    padding-top: 14px !important;
    align-items: end !important;
  }

  .digital-stamp-badge {
    border: 2px solid #4f46e5 !important;
    background: #ffffff !important;
  }

  /* 4. Official Achievement Certificate (A4 Landscape) */
  .certificate-page {
    width: 297mm !important;
    height: 210mm !important;
    max-width: 297mm !important;
    max-height: 210mm !important;
    margin: 0 !important;
    padding: 6mm 8mm !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    page-break-before: avoid !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .certificate-sheet,
  .certificate-wrapper {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .certificate-border {
    width: 281mm !important;
    height: 198mm !important;
    max-width: 281mm !important;
    max-height: 198mm !important;
    border: 8px solid #201c4b !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    padding: 16px 36px 14px !important;
    background: #ffffff !important;
    background: radial-gradient(circle at center, #ffffff 0%, #fffdf8 70%, #fbf8ef 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
  }

  .certificate-border:before {
    inset: 5px !important;
    border: 1.5px solid #d4af37 !important;
    border-radius: 2px !important;
  }

  .certificate-inner-frame {
    inset: 9px !important;
    border: 1px dashed rgba(212, 175, 55, 0.4) !important;
  }

  .cert-corner {
    width: 32px !important;
    height: 32px !important;
  }
  .cert-corner-tl { top: 6px !important; left: 6px !important; }
  .cert-corner-tr { top: 6px !important; right: 6px !important; }
  .cert-corner-bl { bottom: 6px !important; left: 6px !important; }
  .cert-corner-br { bottom: 6px !important; right: 6px !important; }

  /* Header */
  .cert-header {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .cert-brand-bar {
    margin-bottom: 4px !important;
  }
  .cert-brand-logo {
    height: 26px !important;
  }
  .cert-ribbon-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #d4af37 !important;
    background: linear-gradient(135deg, #d4af37 0%, #f59e0b 50%, #b45309 100%) !important;
    color: #ffffff !important;
    padding: 2px 14px !important;
    border-radius: 999px !important;
    font-size: 7.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    border: 1px solid #b45309 !important;
    margin-bottom: 4px !important;
  }
  .cert-main-title {
    font-family: "Fredoka", "Nunito", sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #1e1b4b !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    line-height: 1.15 !important;
  }
  .cert-sub-title {
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: #d97706 !important;
    text-transform: uppercase !important;
    margin-top: 1px !important;
  }
  .cert-header-divider {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 220px !important;
    margin: 3px auto 0 !important;
  }
  .cert-header-divider .divider-line {
    flex: 1 !important;
    height: 1px !important;
    background: #d4af37 !important;
  }
  .cert-header-divider .divider-star {
    color: #d4af37 !important;
    font-size: 9px !important;
  }

  /* Body */
  .cert-body {
    margin: 2px 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .cert-presentation-text {
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
  }
  .cert-child-name-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 1px 0 3px !important;
  }
  .cert-child-name-box .star-accent {
    color: #f59e0b !important;
    font-size: 16px !important;
  }
  .cert-child-name {
    font-family: "Fredoka", "Nunito", sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
    -webkit-text-fill-color: #1e1b4b !important;
    background: none !important;
    padding: 0 14px 2px !important;
    border-bottom: 2px solid #d4af37 !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }
  .cert-description {
    max-width: 560px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #334155 !important;
    margin: 0 auto 4px !important;
  }
  .cert-course-highlight {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f1efff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 999px !important;
    padding: 2.5px 12px !important;
    margin-bottom: 3px !important;
  }
  .cert-course-highlight strong {
    font-family: "Fredoka", sans-serif !important;
    font-size: 12px !important;
    color: #1e1b4b !important;
  }
  .cert-course-highlight .category-chip {
    background: #6857df !important;
    color: #ffffff !important;
    font-size: 7.5px !important;
    font-weight: 700 !important;
    padding: 1.5px 6px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
  }
  .cert-merit-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 999px !important;
    padding: 2px 10px !important;
    font-size: 8.5px !important;
    color: #92400e !important;
    font-weight: 600 !important;
  }

  /* Footer */
  .cert-footer {
    width: 100% !important;
    gap: 3px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .cert-signatures-grid {
    display: grid !important;
    grid-template-columns: 1fr 80px 1fr !important;
    align-items: end !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
  }
  .cert-sign-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .cert-sign-svg {
    height: 24px !important;
    width: 95px !important;
    margin-bottom: 2px !important;
    color: #1e1b4b !important;
  }
  .cert-sign-line {
    width: 110px !important;
    height: 1.5px !important;
    background: #201c4b !important;
    margin-bottom: 2px !important;
  }
  .cert-sign-name {
    font-family: "Fredoka", sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
  }
  .cert-sign-role {
    font-size: 7px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-top: 1px !important;
  }
  .cert-seal-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .cert-rosette-seal {
    width: 50px !important;
    height: 50px !important;
  }
  .cert-meta-bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
    padding-top: 3px !important;
    font-size: 7.5px !important;
    color: #64748b !important;
  }
  .cert-serial-tag {
    font-weight: 500 !important;
    color: #475569 !important;
  }
  .cert-auth-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #15803d !important;
    font-weight: 600 !important;
  }
}

/* Wishlist / Cart / My Courses / Learn */
.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding: 22px
}

.cart-summary small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase
}

.cart-summary b {
  display: block;
  font-family: "Fredoka";
  font-size: 26px;
  margin-top: 3px
}

.my-course-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #eff0f4
}

.my-course-row:last-child {
  border: 0
}

.my-course-main {
  flex: 1
}

.my-course-main h3 {
  margin: 0;
  font-family: "Fredoka";
  font-size: 15px
}

.my-course-main p {
  margin: 3px 0;
  color: var(--muted);
  font-size: 9px
}

.my-course-main small {
  color: var(--muted);
  font-size: 8px
}

.progress-bar {
  height: 7px;
  border-radius: 99px;
  background: #eeecf7;
  margin: 7px 0 5px;
  overflow: hidden;
  max-width: 260px
}

.progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), #8f7ff0);
  border-radius: 99px
}

.module-list {
  display: grid;
  gap: 14px;
  margin-top: 15px
}

.module-card .module-desc {
  color: var(--muted);
  font-size: 10px;
  margin: 0 0 6px
}

.activity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #eff0f4
}

.activity-row:first-of-type {
  border-top: 0
}

.activity-row b {
  display: block;
  font-size: 11px
}

.activity-row small {
  color: var(--muted);
  font-size: 8px
}

.activity-row form {
  margin-left: auto
}

.activity-row button.status-chip {
  border: 0;
  cursor: pointer;
  font-family: inherit
}

.activity-type-mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.activity-type-mark .ui-icon {
  width: 18px;
  height: 18px
}

.activity-type-mark.latihan {
  background: var(--success-bg);
  color: var(--success)
}

.activity-type-mark.refleksi {
  background: var(--warning-bg);
  color: var(--warning)
}

.detail-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}

.wishlist-btn {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #9a93cc;
  cursor: pointer;
  flex: 0 0 auto;
  transition: .15s
}

.wishlist-btn:hover {
  border-color: #f3c7d3
}

.wishlist-btn.active {
  background: #ffe9ef;
  color: #e0577a;
  border-color: #f3c7d3
}

.wishlist-btn .ui-icon {
  width: 18px;
  height: 18px
}

/* Modern Parent Dashboard Hero Banner */
.parent-dashboard-hero {
  margin-bottom: 24px;
  padding: 32px 36px;
  border-radius: 24px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #7c3aed 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr;
  align-items: center;
  gap: 32px;
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.22), 0 2px 6px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.dashboard-hero-decor-circle-1 {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  right: -60px;
  top: -100px;
  pointer-events: none;
}

.dashboard-hero-decor-circle-2 {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.4) 0%, rgba(147, 51, 234, 0) 70%);
  left: -40px;
  bottom: -80px;
  pointer-events: none;
}

.dashboard-hero-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: fit-content;
}

.dashboard-hero-badge .ui-icon {
  width: 13px;
  height: 13px;
  color: #fde047;
}

.dashboard-hero-title {
  font-family: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.dashboard-hero-subtitle {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 6px 0;
  max-width: 540px;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
}

.dashboard-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-hero-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, sans-serif;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.btn-hero-action .ui-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.btn-hero-primary {
  background: #ffffff;
  color: #4338ca;
  border: 1.5px solid #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-hero-primary:hover {
  background: #f8faff;
  color: #3730a3;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.btn-hero-glass {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-hero-glass:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  color: #ffffff;
}

/* Quick Profile Card on Hero Right */
.dashboard-hero-right {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
}

.hero-quick-profile-card {
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.quick-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.quick-profile-avatar-wrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  color: #4338ca;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.quick-profile-avatar-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.quick-avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.quick-avatar-badge .ui-icon {
  width: 10px;
  height: 10px;
}

.quick-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-profile-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #e0e7ff;
}

.quick-profile-name {
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 2px 0 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quick-profile-edit-link {
  font-size: 11px;
  font-weight: 600;
  color: #c7d2fe;
  text-decoration: none;
  transition: color 0.2s ease;
}

.quick-profile-edit-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

.quick-children-section {
  padding-top: 12px;
}

.quick-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #e0e7ff;
  margin-bottom: 8px;
  display: block;
}

.quick-children-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.quick-child-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  text-decoration: none;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.quick-child-pill:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #ffffff;
  transform: translateY(-1px);
}

.child-pill-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  color: #4338ca;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
}

.child-pill-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.child-pill-name {
  font-weight: 700;
}

.child-pill-courses {
  font-size: 9.5px;
  opacity: 0.85;
  padding-left: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.quick-child-more {
  font-size: 10.5px;
  font-weight: 700;
  color: #e0e7ff;
  text-decoration: none;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 99px;
}

.quick-children-empty {
  padding-top: 10px;
  font-size: 11px;
  color: #e0e7ff;
}

.quick-children-empty p {
  margin: 0 0 6px 0;
}

.btn-quick-add {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.btn-quick-add:hover {
  background: rgba(255, 255, 255, 0.3);
}

@media (max-width: 960px) {
  .parent-dashboard-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .dashboard-hero-right {
    justify-content: stretch;
  }

  .hero-quick-profile-card {
    max-width: 100%;
  }
}

/* Process timeline */
.timeline {
  display: grid;
  gap: 10px;
  max-width: 900px;
  margin: auto
}

.timeline article {
  display: grid;
  grid-template-columns: 52px 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff
}

.timeline article>span {
  font-family: "Fredoka";
  font-size: 20px;
  color: #cbc7de
}

.timeline-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #f1efff;
  color: var(--purple);
  display: grid;
  place-items: center
}

.timeline-icon .ui-icon {
  width: 24px;
  height: 24px
}

.timeline h2 {
  font-family: "Fredoka";
  font-size: 18px;
  margin: 0 0 4px
}

.timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6
}

/* Responsive */
@media(max-width:1100px) {
  .hero {
    gap: 25px
  }

  .hero h1 {
    font-size: 50px
  }

  .hero-board {
    width: 340px
  }

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

  .course-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .feature-grid .feature-wide {
    grid-column: span 2
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .parent-value-section {
    gap: 35px
  }

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

  .tool-form>div {
    grid-column: 1/3
  }
}

@media(max-width:880px) {
  .hero {
    grid-template-columns: 1fr;
    padding-top: 55px
  }

  .hero h1 {
    font-size: 47px
  }

  .hero-stage {
    height: 440px
  }

  .trust-strip {
    grid-template-columns: 1fr
  }

  .parent-value-section {
    grid-template-columns: 1fr
  }

  .value-visual {
    min-height: 350px
  }

  .steps {
    grid-template-columns: repeat(2, 1fr)
  }

  .site-footer {
    grid-template-columns: 1.5fr 1fr 1fr
  }

  .site-footer>div:last-child {
    display: none
  }

  .detail-grid,
  .booking-panel,
  .dashboard-grid {
    grid-template-columns: 1fr
  }

  .detail-visual {
    min-height: 330px
  }

  .course-benefits {
    grid-template-columns: 1fr
  }

  .path-item {
    grid-template-columns: 42px 60px 1fr
  }

  .path-item>.btn {
    grid-column: 2/4
  }

  .interest-select {
    grid-template-columns: repeat(2, 1fr)
  }

  .auth-shell {
    grid-template-columns: 1fr
  }

  .auth-side {
    display: none
  }

  .page-hero-art {
    display: none
  }

  .credit-row {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .inline-form {
    width: 100%;
    margin-left: 58px
  }

  .inline-form select {
    flex: 1
  }

  .feature-grid .feature-wide {
    grid-template-columns: auto 1fr
  }

  .feature-cta {
    grid-column: 2
  }
}

@media(max-width:620px) {
  .header-actions .btn-ghost {
    display: none
  }

  .header-actions .btn {
    padding: 8px 13px;
    font-size: 11px;
    border-radius: 11px;
    white-space: nowrap
  }

  .brand-logo {
    height: 34px
  }

  .hero,
  .section,
  .steps-section {
    padding-left: 5%;
    padding-right: 5%
  }

  .hero {
    padding-top: 44px;
    padding-bottom: 52px
  }

  .hero h1 {
    font-size: 38px
  }

  .hero-copy>p {
    font-size: 14px
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr
  }

  .hero-actions .btn {
    width: 100%
  }

  .hero-proof {
    gap: 19px
  }

  .hero-stage {
    height: 390px
  }

  .hero-board {
    width: 310px;
    padding: 20px
  }

  .orbit-a {
    width: 350px;
    height: 350px
  }

  .orbit-b {
    width: 270px;
    height: 270px
  }

  .floating-note {
    padding: 9px
  }

  .note-one {
    left: -2%
  }

  .note-two {
    right: -2%
  }

  .note-three {
    left: 2%
  }

  .section {
    padding-top: 58px;
    padding-bottom: 58px
  }

  .section-head {
    display: block
  }

  .section-head h2,
  .center-head h2,
  .value-copy h2 {
    font-size: 31px
  }

  .section-head>p {
    margin-top: 10px
  }

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

  .category-card {
    min-height: 175px;
    padding: 17px
  }

  .category-copy small {
    max-width: 100%
  }

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

  .course-cover {
    height: 210px
  }

  .parent-value-section {
    gap: 28px
  }

  .value-visual {
    min-height: 315px
  }

  .value-main {
    width: 88%;
    padding: 19px
  }

  .value-main h3 {
    font-size: 22px
  }

  .value-list {
    grid-template-columns: 1fr 1fr
  }

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

  .feature-grid .feature-wide {
    grid-column: span 1;
    grid-template-columns: auto 1fr
  }

  .feature-wide .feature-cta {
    grid-column: 1/3
  }

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

  .cta {
    margin: 45px 5%;
    padding: 30px;
    display: block
  }

  .cta h2 {
    font-size: 28px
  }

  .cta .btn {
    margin-top: 18px;
    width: 100%
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
    padding: 42px 5%
  }

  .footer-brand {
    grid-column: 1/3
  }

  .page-hero {
    padding: 48px 5%
  }

  .page-hero h1 {
    font-size: 35px
  }

  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .filter-bar label {
    min-width: 0
  }

  .catalog-summary {
    display: block
  }

  .detail-copy h1 {
    font-size: 35px
  }

  .detail-visual {
    min-height: 270px
  }

  .course-price {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px
  }

  .onboarding-wrap {
    padding: 38px 4%
  }

  .onboarding-card,
  .onboarding-panel {
    padding: 20px 16px;
    border-radius: 18px;
  }

  .onboarding-header {
    display: block
  }

  .onboarding-visual {
    display: none
  }

  .onboarding-card h1 {
    font-size: 32px
  }

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

  .interest-select {
    grid-template-columns: 1fr 1fr
  }

  .preference-list {
    grid-template-columns: 1fr
  }

  .onboarding-submit {
    display: block
  }

  .onboarding-submit .btn {
    width: 100%;
    margin-top: 10px
  }

  .dashboard-page {
    padding: 34px 4%
  }

  .dash-title {
    display: block
  }

  .dash-title h1 {
    font-size: 30px
  }

  .dash-actions {
    margin-top: 14px
  }

  .parent-nav {
    padding: 10px 4%
  }

  .dashboard-hero {
    display: block;
    padding: 24px
  }

  .dashboard-hero-side {
    margin-top: 16px
  }

  .dashboard-hero h1 {
    font-size: 26px
  }

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

  .stat-grid article {
    display: block
  }

  .stat-icon {
    margin-bottom: 9px
  }

  .panel-heading {
    align-items: flex-start
  }

  .path-item {
    grid-template-columns: 38px 48px 1fr;
    padding: 11px;
    gap: 9px
  }

  .path-visual {
    width: 48px;
    height: 48px;
    border-radius: 13px
  }

  .path-visual .ui-icon {
    width: 24px;
    height: 24px
  }

  .path-item>.btn {
    grid-column: 2/4
  }

  .inline-form {
    display: grid;
    grid-template-columns: 1fr;
    margin-left: 0
  }

  .inline-form select {
    width: 100%;
    min-width: 0
  }

  .exam-row {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .exam-status {
    width: 100%;
    text-align: left;
    padding-left: 0;
    margin-top: 8px;
  }

  .tool-form,
  .tool-form.attendance-form,
  .tool-form.exam-form {
    grid-template-columns: 1fr !important;
    gap: 10px;
    padding: 14px 0;
  }

  .tool-form>div,
  .tool-form.attendance-form>div,
  .tool-form.exam-form>div {
    grid-column: auto;
    width: 100%;
  }

  .tool-form .btn,
  .tool-form.attendance-form .btn,
  .tool-form.exam-form .btn {
    width: 100%;
    justify-content: center;
  }

  .rating-split {
    grid-template-columns: 1fr
  }

  .auth-wrap {
    padding: 30px 4%
  }

  .auth-card {
    padding: 25px
  }

  .timeline article {
    grid-template-columns: 38px 42px 1fr;
    padding: 14px;
    gap: 9px
  }

  .timeline-icon {
    width: 40px;
    height: 40px
  }

  .timeline h2 {
    font-size: 15px
  }
}

@media(max-width:430px) {

  .category-grid,
  .steps,
  .stat-grid {
    grid-template-columns: 1fr
  }

  .interest-select {
    grid-template-columns: 1fr
  }

  .hero-stage {
    transform: scale(.92);
    margin-left: -4%;
    margin-right: -4%
  }

  .board-interests {
    grid-template-columns: repeat(3, 1fr)
  }

  .site-footer {
    grid-template-columns: 1fr
  }

  .footer-brand {
    grid-column: auto
  }

  .filter-bar {
    grid-template-columns: 1fr
  }

  .feature-grid .feature-wide {
    display: block
  }

  .feature-wide .feature-icon {
    margin-bottom: 13px
  }

  .feature-wide .feature-cta {
    margin-top: 14px
  }

  .value-list {
    grid-template-columns: 1fr
  }
}


/* ==========================================================================
   ROLE-BASED NAVIGATION & HEADER SYSTEM (Modern Segmented Capsule & Actions)
   ========================================================================== */

/* Central Segmented Capsule Navigation */
.main-nav-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 99px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.main-nav-pill-group a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #475569;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.main-nav-pill-group a:after {
  display: none !important;
}

.main-nav-pill-group a .ui-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #64748b;
  transition: all 0.2s ease;
}

/* Hover State */
.main-nav-pill-group a:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #4338ca;
  border-color: rgba(226, 232, 240, 0.8);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
  transform: translateY(-0.5px);
}

.main-nav-pill-group a:hover .ui-icon {
  color: #6366f1;
  transform: scale(1.1);
}

/* Active State */
.main-nav-pill-group a.active {
  background: #ffffff;
  color: #4338ca;
  font-weight: 700;
  border-color: rgba(99, 102, 241, 0.2);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.14), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.main-nav-pill-group a.active .ui-icon {
  color: #4f46e5;
}

/* Right Header Actions */
.parent-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.nav-action-icons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-action-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.nav-action-icon-btn .ui-icon {
  width: 17px;
  height: 17px;
  color: #64748b;
  transition: all 0.2s ease;
}

.nav-action-icon-btn:hover {
  background: #f8faff;
  border-color: #c7d2fe;
  color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.12);
}

.nav-action-icon-btn:hover .ui-icon {
  color: #6366f1;
  transform: scale(1.1);
}

.nav-action-icon-btn.active {
  background: #ede9fe;
  border-color: #818cf8;
  color: #4338ca;
}

.nav-action-icon-btn.active .ui-icon {
  color: #4338ca;
}

/* Action Badges */
.nav-action-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4.5px;
  background: linear-gradient(135deg, #ff3366 0%, #e11d48 100%);
  color: #ffffff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  line-height: 18px;
  text-align: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
  pointer-events: none;
}

@keyframes badgePulseGlow {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
  }

  50% {
    transform: scale(1.14);
    box-shadow: 0 0 12px rgba(225, 29, 72, 0.65);
  }
}

.pulse-badge {
  animation: badgePulseGlow 2.2s infinite ease-in-out;
}

.nav-action-icon-btn.has-pending {
  border-color: #fca5a5;
  background: #fff5f5;
}

.nav-action-icon-btn.has-pending .ui-icon {
  color: #e11d48;
}

/* Divider between actions & profile */
.nav-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
  margin: 0 2px;
}

/* Profile Pill Container */
.header-profile.parent-profile-pill,
.header-profile.mentor-profile-pill,
.header-profile.admin-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 3px 12px 3px 4px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 99px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  width: auto;
  height: auto;
}

.header-profile.parent-profile-pill:hover,
.header-profile.mentor-profile-pill:hover,
.header-profile.admin-profile-pill:hover {
  border-color: #c7d2fe;
  background: #f8faff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

.avatar-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-family: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
  border: 1.5px solid #ffffff;
}

.avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-profile-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}

.header-profile-text .user-name {
  font-size: 12px;
  font-weight: 700;
  color: #1e293b;
  font-family: "Nunito", sans-serif;
  white-space: nowrap;
}

.header-profile-text .role-chip {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 4px;
  line-height: 1.1;
  margin-top: 1px;
}

.role-chip.parent {
  background: #eef2ff;
  color: #4f46e5;
}

.role-chip.mentor {
  background: #ecfdf5;
  color: #059669;
}

.role-chip.admin {
  background: #fef2f2;
  color: #dc2626;
}

/* Logout Button in Header */
.btn-ghost-logout {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  font-family: "Nunito", sans-serif;
  color: #64748b;
  background: transparent;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  line-height: 1;
}

.btn-ghost-logout .ui-icon {
  width: 13.5px;
  height: 13.5px;
  color: #94a3b8;
  transition: color 0.2s ease;
}

.btn-ghost-logout:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
  transform: translateY(-1px);
}

.btn-ghost-logout:hover .ui-icon {
  color: #ef4444;
}

/* Guest Actions */
.guest-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-parent-register {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 11px !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
}

.btn-parent-register:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35) !important;
}

.hero-action-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.profile-hero-avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none
}

.profile-hero-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.child-avatar {
  overflow: hidden
}

.child-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* Family profile */
.profile-page {
  padding: 36px 6% 70px;
  background: #f7f8fc;
  min-height: 60vh
}

.profile-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px
}

.profile-header h1 {
  font-family: "Fredoka";
  font-size: 34px;
  margin: 6px 0
}

.profile-header p {
  margin: 0;
  color: var(--muted);
  font-size: 11px
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 15px
}

.profile-card,
.profile-summary-card {
  padding: 22px
}

.profile-single {
  max-width: 640px
}

.profile-form {
  display: grid;
  gap: 15px
}

.profile-form>label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #596176
}

.profile-form textarea {
  border: 1px solid #dfe2eb;
  background: #fff;
  border-radius: 11px;
  padding: 10px 11px;
  outline: none;
  font-size: 11px;
  font-family: inherit;
  resize: vertical;
  width: 100%;
  transition: border .15s, box-shadow .15s
}

.profile-form textarea:focus {
  border-color: #a99df1;
  box-shadow: 0 0 0 3px #f0edff
}

.notes-field textarea {
  min-height: 78px
}

.profile-photo-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 15px;
  background: #faf9ff;
  border: 1px solid #ece8fb
}

.profile-photo {
  width: 64px;
  height: 64px;
  border-radius: 17px;
  background: #ece8ff;
  color: #5b4ebd;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  font-family: "Fredoka";
  font-size: 23px;
  font-weight: 600
}

.profile-photo.large {
  width: 76px;
  height: 76px
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.profile-photo-block b,
.profile-photo-block small {
  display: block
}

.profile-photo-block b {
  font-size: 11px
}

.profile-photo-block small {
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0 8px
}

.file-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: max-content;
  background: #fff;
  border: 1px solid #e3dff6;
  border-radius: 10px;
  padding: 7px 10px;
  color: var(--purple);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer
}

.file-button input {
  display: none
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap
}

.family-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line)
}

.summary-avatar {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: #ece8ff;
  color: #5b4ebd;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "Fredoka";
  font-size: 19px;
  font-weight: 600
}

.summary-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.family-summary h2 {
  font-family: "Fredoka";
  font-size: 19px;
  margin: 0
}

.family-summary p {
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0
}

.summary-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px
}

.summary-stats div {
  padding: 12px;
  border-radius: 13px;
  background: #f8f8fb;
  text-align: center
}

.summary-stats b,
.summary-stats span {
  display: block
}

.summary-stats b {
  font-family: "Fredoka";
  font-size: 21px
}

.summary-stats span {
  font-size: 8px;
  color: var(--muted);
  margin-top: 2px
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin: 30px 0 12px
}

.section-heading h2 {
  font-family: "Fredoka";
  font-size: 22px;
  margin: 2px 0
}

.section-heading p {
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0 0
}

.section-note {
  font-size: 9px;
  color: var(--muted)
}

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

.child-profile-card {
  padding: 20px
}

.child-profile-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--line)
}

.child-profile-heading h2 {
  font-family: "Fredoka";
  font-size: 19px;
  margin: 2px 0
}

.child-profile-heading p {
  font-size: 9px;
  color: var(--muted);
  margin: 2px 0
}

.photo-input-row {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap
}

.photo-input-row small {
  font-size: 8px;
  color: var(--muted)
}

.form-section-title.compact {
  margin-top: 0;
  margin-bottom: 0
}

.profile-interest-list {
  display: flex;
  gap: 7px;
  flex-wrap: wrap
}

.profile-interest-list label {
  display: inline-flex;
  align-items: center
}

.profile-interest-list input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.profile-interest-list span {
  display: block;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: #6b7083;
  font-size: 9px;
  font-weight: 600;
  cursor: pointer
}

.profile-interest-list input:checked+span {
  background: #f1efff;
  border-color: #d9d3ff;
  color: var(--purple)
}

.preferences span {
  background: #fafafa
}

.empty-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px
}

.empty-profile>.ui-icon {
  width: 30px;
  height: 30px;
  color: var(--purple)
}

.empty-profile h3 {
  font-family: "Fredoka";
  margin: 0;
  font-size: 17px
}

.empty-profile p {
  margin: 3px 0 0;
  font-size: 9px;
  color: var(--muted)
}

@media(max-width:1150px) {
  .main-nav-pill-group a {
    padding: 6px 10px;
    font-size: 11px;
    gap: 4px;
  }

  .main-nav-pill-group a .ui-icon {
    width: 14px;
    height: 14px;
  }

  .header-profile-text .user-name {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   RESPONSIVE NAVIGATION & MOBILE DRAWER SYSTEM
   ========================================================================== */

/* Body Lock when Navigation is open */
body.mobile-nav-locked,
body.admin-sidebar-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* Mobile Quick Actions in Header (Default Hidden on Desktop) */
.mobile-header-actions {
  display: none;
}

.mobile-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #475569;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

.mobile-action-btn .ui-icon {
  width: 18px;
  height: 18px;
  color: #64748b;
  transition: all 0.2s ease;
}

.mobile-action-btn:hover,
.mobile-action-btn:active {
  background: #f8faff;
  border-color: #c7d2fe;
  color: #4f46e5;
  transform: translateY(-1px);
}

.mobile-action-btn:hover .ui-icon {
  color: #6366f1;
}

.mobile-action-btn.active {
  background: #ede9fe;
  border-color: #818cf8;
  color: #4338ca;
}

.mobile-action-btn.active .ui-icon {
  color: #4338ca;
}

.mobile-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4.5px;
  background: linear-gradient(135deg, #ff3366 0%, #e11d48 100%);
  color: #ffffff;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  font-family: "Nunito", sans-serif;
  line-height: 18px;
  text-align: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.35);
  pointer-events: none;
}

.mobile-avatar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.avatar-ring.sm {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid #e0dcfc;
  overflow: hidden;
  background: #ede9fe;
  color: #6857df;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(104, 87, 223, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.avatar-ring.sm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-avatar-pill:hover .avatar-ring.sm {
  transform: scale(1.06);
  border-color: #6857df;
}

.mobile-login-btn {
  height: 38px;
  padding: 0 14px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Off-Canvas Mobile Drawer Backdrop */
.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.28s;
}

.mobile-nav-backdrop.open {
  opacity: 1;
  visibility: visible;
}

/* Off-Canvas Mobile Drawer Panel */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 88vw;
  max-width: 380px;
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -8px 0 36px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mobile-nav-drawer.open {
  transform: translateX(0);
}

.mobile-drawer-header {
  height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f1f5f9;
  background: #fafafa;
  flex-shrink: 0;
}

.drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-logo.sm {
  height: 30px;
  width: auto;
}

.drawer-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #ede9fe;
  color: #6857df;
  padding: 3px 8px;
  border-radius: 6px;
}

.mobile-drawer-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-drawer-close:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #ef4444;
  transform: rotate(90deg);
}

.mobile-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer-body::-webkit-scrollbar {
  width: 5px;
}

.mobile-drawer-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

/* User Card in Mobile Drawer */
.mobile-user-card {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  flex-shrink: 0;
}

.mobile-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--purple);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(104, 87, 223, 0.3);
}

.mobile-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-user-details {
  flex: 1;
  min-width: 0;
}

.mobile-user-name {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.mobile-user-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.mobile-user-email {
  font-size: 11px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-profile-link {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  flex-shrink: 0;
  transition: all 0.2s ease;
  text-decoration: none;
}

.mobile-profile-link:hover {
  background: #ede9fe;
  border-color: #c8bdfa;
  transform: scale(1.06);
}

/* Sections & Links in Drawer */
.mobile-nav-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-section-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0 8px;
  margin-bottom: 2px;
  font-family: "Nunito", sans-serif;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
  font-family: "Nunito", sans-serif;
}

.mobile-nav-links a .nav-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.mobile-nav-links a .nav-icon-wrap .ui-icon {
  width: 16px;
  height: 16px;
}

.mobile-nav-links a:hover {
  background: #f8fafc;
  color: var(--purple);
}

.mobile-nav-links a:hover .nav-icon-wrap {
  background: #ede9fe;
  color: var(--purple);
}

.mobile-nav-links a.active {
  background: #ede9fe;
  color: #6857df;
  font-weight: 700;
}

.mobile-nav-links a.active .nav-icon-wrap {
  background: #6857df;
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(104, 87, 223, 0.35);
}

.mobile-link-badge {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  white-space: nowrap;
}

.mobile-link-badge.warning {
  background: #fee2e2;
  color: #dc2626;
  font-weight: 800;
}

/* Drawer Footer */
.mobile-drawer-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.mobile-logout-form {
  margin: 0;
}

.btn-mobile-logout {
  width: 100%;
  border: 1.5px solid #fee2e2;
  background: #fff5f5;
  color: #dc2626;
  font-weight: 700;
  font-size: 13.5px;
  padding: 11px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-mobile-logout:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  transform: translateY(-1px);
}

.guest-footer .btn-block {
  width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.mobile-drawer-bottom-info {
  text-align: center;
  font-size: 10.5px;
  color: #94a3b8;
  font-weight: 500;
  padding-top: 4px;
}

/* ==========================================================================
   BREAKPOINTS: DESKTOP VS MOBILE HEADER
   ========================================================================== */

@media(max-width:960px) {
  .site-header {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 4% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  .desktop-nav,
  .desktop-actions,
  .main-nav-pill-group.desktop-nav,
  .header-actions.desktop-actions {
    display: none !important;
  }

  .mobile-header-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  .site-header .nav-toggle {
    display: inline-flex !important;
  }

  .profile-grid,
  .children-profile-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width:480px) {
  .site-header {
    padding: 0 14px !important;
  }

  .brand-logo {
    height: 32px !important;
  }

  .mobile-header-actions {
    gap: 6px;
  }

  .mobile-action-btn {
    width: 36px;
    height: 36px;
  }

  .avatar-ring.sm {
    width: 34px;
    height: 34px;
  }

  .nav-toggle {
    width: 38px;
    height: 38px;
  }

  .mobile-nav-drawer {
    width: 92vw;
  }
}

.profile-page {
  padding: 30px 4% 55px
}

.profile-header {
  display: block
}

.profile-header h1 {
  font-size: 29px
}

.profile-header .btn {
  margin-top: 14px
}

.hero-action-group {
  display: grid
}

.hero-action-group .btn {
  width: 100%
}

.section-heading {
  display: block
}

.section-note {
  display: block;
  margin-top: 5px
}
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 15px;
  align-items: start
}

.checkout-course {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eff0f4
}

.checkout-course:last-child {
  border-bottom: 0
}

.checkout-course-art {
  height: 100px;
  border-radius: 16px;
  overflow: hidden;
  background: #f1efff;
  position: relative
}

.checkout-course-art .course-art {
  height: 100%;
  min-height: 100%;
  border-radius: 0
}

.checkout-course-main h3 {
  font-family: "Fredoka";
  font-size: 16px;
  margin: 4px 0
}

.checkout-course-main p {
  font-size: 9px;
  color: var(--muted);
  margin: 3px 0
}

.checkout-course-main small {
  display: block;
  font-size: 8px;
  color: var(--muted);
  margin-bottom: 7px
}

.checkout-course>strong {
  font-family: "Fredoka";
  font-size: 15px;
  white-space: nowrap
}

.checkout-summary {
  position: sticky;
  top: 18px
}

.checkout-summary h2 {
  margin: 3px 0 18px
}

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  font-size: 10px
}

.summary-line span {
  color: var(--muted)
}

.summary-total {
  border-top: 1px solid var(--line);
  margin-top: 7px;
  padding-top: 16px;
  font-size: 13px
}

.summary-total b {
  font-family: "Fredoka";
  font-size: 22px
}

.checkout-submit {
  width: 100%;
  margin-top: 14px
}

.checkout-note {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.5
}

.checkout-note .ui-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto
}

.cart-summary .btn {
  white-space: nowrap
}

.cart-remove {
  font-size: 11px;
  color: var(--danger)
}

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

  .checkout-summary {
    position: static
  }

  .checkout-course {
    grid-template-columns: 80px 1fr
  }

  .checkout-course>strong {
    grid-column: 2
  }

  .checkout-course-art {
    height: 80px
  }

  .checkout-course-main {
    min-width: 0
  }
}

@media(max-width:560px) {
  .checkout-course {
    grid-template-columns: 1fr
  }

  .checkout-course-art {
    height: 150px
  }

  .checkout-course>strong {
    grid-column: auto
  }

  .cart-summary {
    align-items: flex-start;
    gap: 12px;
    flex-direction: column
  }

  .cart-summary .btn {
    width: 100%
  }
}

/* Mentor profile & student detail */
.profile-summary-card .summary-tags {
  margin-top: 14px
}

.student-profile-panel .mini-tags {
  margin-top: 12px
}

.student-profile-panel .mentor-note {
  margin-top: 14px;
  background: #f7f8fb;
  border-radius: 12px;
  padding: 11px
}

.student-certificate-banner {
  margin-top: 14px
}

/* Suara Anak: child voice on course recommendations */
.path-item-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px
}

.path-item-card .path-item {
  border: 0;
  border-radius: 0
}

.child-voice-block {
  border-top: 1px solid #eff0f4;
  padding: 5px 14px 14px
}

.child-voice-block summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  font-size: 10px;
  font-weight: 600;
  color: #5545c9
}

.child-voice-block summary::-webkit-details-marker {
  display: none
}

.child-voice-block summary .status-chip {
  margin-left: 2px
}

.child-voice-hint {
  font-size: 9px;
  color: var(--muted);
  margin: 0 0 8px
}

.child-voice-body form {
  display: grid;
  gap: 8px
}

.child-voice-body textarea {
  border: 1px solid #dfe2eb;
  border-radius: 11px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 11px;
  resize: vertical;
  outline: none;
  transition: border .15s, box-shadow .15s
}

.child-voice-body textarea:focus {
  border-color: #a99df1;
  box-shadow: 0 0 0 3px #f0edff
}

.child-voice-body button {
  justify-self: start
}

/* Compact footer for the parent app area */
.site-footer-compact {
  padding: 26px 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--line)
}

.site-footer-compact .brand-logo {
  height: 28px
}

.site-footer-compact p {
  max-width: 520px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  margin: 0
}

.site-footer-compact span {
  font-size: 9px;
  color: #9aa0b2
}

/* Mentor directory */
.mentor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

@media(max-width:1100px) {
  .mentor-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

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

/* Mentor flip card */
.mentor-flip {
  display: block;
  height: 360px;
  perspective: 1400px
}

.mentor-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .6s cubic-bezier(.4, .1, .2, 1);
  transform-style: preserve-3d
}

.mentor-flip:hover .mentor-flip-inner,
.mentor-flip:focus-within .mentor-flip-inner {
  transform: rotateY(180deg)
}

.mentor-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column
}

.mentor-flip-front {
  background: linear-gradient(165deg, var(--flip-accent, #EAE5FF), #fff 88%);
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, .05)
}

.mentor-flip-name {
  margin-top: 14px
}

.mentor-flip-name h3 {
  font-family: "Fredoka";
  font-size: 19px;
  margin: 0 0 8px;
  color: #2c2743
}

.mentor-flip-tag {
  display: inline-block;
  background: rgba(255, 255, 255, .8);
  color: #4b4567;
  font-size: 9px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 999px
}

.mentor-flip-photo {
  flex: 1;
  margin-top: 14px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .45);
  display: grid;
  place-items: center
}

.mentor-flip-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mentor-flip-photo .ui-icon {
  width: 44%;
  height: 44%;
  color: rgba(44, 39, 67, .4)
}

.mentor-flip-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  color: rgba(44, 39, 67, .6);
  font-size: 8px;
  font-weight: 600
}

.mentor-flip-hint .ui-icon {
  width: 12px;
  height: 12px
}

.mentor-flip-back {
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
  transform: rotateY(180deg)
}

.mentor-flip-back h3 {
  font-family: "Fredoka";
  font-size: 18px;
  margin: 0 0 4px
}

.mentor-flip-headline {
  display: block;
  color: var(--purple);
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 10px
}

.mentor-flip-bio {
  flex: 1;
  color: #5b6274;
  font-size: 11px;
  line-height: 1.65;
  margin: 0;
  overflow: hidden
}

.mentor-flip-back .mini-tags {
  margin: 12px 0
}

.mentor-flip-back .btn {
  align-self: flex-start
}

/* Mentor Verified Badges & Indicators */
.mentor-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: help;
  position: relative;
  transition: transform 0.2s ease, color 0.2s ease;
}

.mentor-verified-badge:hover {
  transform: scale(1.15);
  color: #1d4ed8;
}

.mentor-verified-badge .ui-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mentor-verified-badge svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
}

.mentor-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2.5px 8px;
  border-radius: 999px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.08);
  vertical-align: middle;
  flex-shrink: 0;
}

.mentor-verified-pill .ui-icon {
  width: 13px;
  height: 13px;
  color: #2563eb;
  display: inline-flex;
}

.mentor-verified-pill svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2.2;
}

.mentor-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tcc-mentor-author {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mrc-mentor-title-row {
  display: flex;
  align-items: center;
  gap: 5px;
}

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

@media(max-width:620px) {
  .mentor-flip {
    height: 320px
  }
}

/* Mentor detail */
.mentor-show-section {
  padding-top: 36px !important;
  padding-bottom: 72px !important;
}

.mentor-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--mentor-accent, #EAE5FF), #fff 80%);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.04);
  margin-bottom: 44px;
}

.mentor-hero-photo {
  width: 156px;
  height: 156px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .5);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.mentor-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mentor-hero-photo .ui-icon {
  width: 44%;
  height: 44%;
  color: rgba(44, 39, 67, .4);
}

.mentor-hero-copy {
  flex: 1;
}

.mentor-hero-copy .eyebrow {
  margin-bottom: 2px;
}

.mentor-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}

.mentor-name-row h1,
.mentor-hero-copy h1 {
  font-family: "Fredoka";
  font-size: 32px;
  margin: 0;
  color: #2c2743;
  line-height: 1.2;
}

.mentor-hero-headline {
  color: #4b4567;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 8px;
}

.mentor-bio {
  color: #5b6274;
  font-size: 12.5px;
  line-height: 1.65;
  margin: 0 0 14px;
  max-width: 620px;
}

.mentor-courses-section {
  margin-top: 0;
}

@media(max-width:700px) {
  .mentor-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px;
    gap: 20px;
    margin-bottom: 32px;
  }

  .mentor-hero-photo {
    width: 130px;
    height: 130px;
  }

  .mentor-name-row {
    justify-content: center;
  }

  .mentor-hero .mini-tags {
    justify-content: center;
  }
}

/* Nav badge */
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #ff3366;
  background: linear-gradient(135deg, #ff2d55 0%, #e11d48 100%);
  color: #ffffff !important;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  margin-left: 6px;
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.45);
  border: 1.5px solid #ffffff;
  vertical-align: middle;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.status-chip.failed,
.status-chip.locked {
  background: #fee2e2;
  color: #991b1b
}

.status-chip.paid {
  background: #dcfce7;
  color: #166534
}

/* ==========================================================================
   ADMIN PANEL LAYOUT & DASHBOARD DESIGN (SkillPath Administration)
   ========================================================================== */
.admin-layout {
  display: flex;
  min-height: 100vh;
  background: #f6f7fc;
  color: #1a163a;
  font-family: "Nunito", sans-serif;
}

/* Sidebar */
.admin-sidebar {
  width: 255px;
  min-width: 255px;
  background: #0d0b24;
  color: #a5a0c8;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 50;
  padding: 16px 14px 14px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

.admin-sidebar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 6px 14px;
  text-decoration: none;
}

.admin-brand-icon {
  width: 32px;
  height: 32px;
  background: #5b36f5;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 3px 10px rgba(91, 54, 245, 0.4);
  flex-shrink: 0;
}

.admin-brand-text h2 {
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
}

.admin-brand-text span {
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: #7b75a6;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

.admin-sidebar-section {
  margin-top: 8px;
  transition: all 0.25s ease;
}

.admin-sidebar-section:first-of-type {
  margin-top: 0;
}

.admin-sidebar-kicker-btn {
  width: 100%;
  background: transparent;
  border: none;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: #7b75a6;
  text-transform: uppercase;
  padding: 4px 6px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.2s ease;
  user-select: none;
  margin-bottom: 2px;
}

.admin-sidebar-kicker-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.admin-sidebar-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #6b6499;
}

.admin-sidebar-kicker-btn:hover .admin-sidebar-chevron {
  color: #ffffff;
}

.admin-sidebar-section.collapsed .admin-sidebar-chevron {
  transform: rotate(-90deg);
}

.admin-sidebar-collapse {
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  max-height: 500px;
  opacity: 1;
}

.admin-sidebar-section.collapsed .admin-sidebar-collapse {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.admin-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6.5px 11px;
  border-radius: 9px;
  color: #a59fc9;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s ease;
}

.admin-nav a .ui-icon {
  width: 16px;
  height: 16px;
  color: #7a73a3;
  transition: color 0.18s ease;
}

.admin-nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

.admin-nav a:hover .ui-icon {
  color: #ffffff;
}

.admin-nav a.active {
  background: #5b36f5;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(91, 54, 245, 0.35);
}

.admin-nav a.active .ui-icon {
  color: #ffffff;
}

.admin-sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #7a73a3;
  text-decoration: none;
  padding: 2px 8px;
  transition: color 0.18s ease;
}

.admin-back-link .ui-icon {
  width: 14px;
  height: 14px;
}

.admin-back-link:hover {
  color: #ffffff;
}

.admin-user-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: background 0.18s ease;
}

.admin-user-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

.admin-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #2a2254;
  color: #ded7ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-user-info b {
  font-size: 11.5px;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.admin-user-info small {
  font-size: 9.5px;
  color: #726c99;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.admin-logout-btn {
  background: none;
  border: none;
  color: #7a73a3;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.18s ease;
}

.admin-logout-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.admin-logout-btn:hover {
  color: #ff7b7b;
}

/* Topbar */
.admin-main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.admin-topbar {
  height: 68px;
  background: #ffffff;
  border-bottom: 1px solid #ebebf3;
  padding: 0 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 40;
}

.admin-topbar-left h3 {
  font-size: 14.5px;
  font-weight: 600;
  color: #171337;
  margin: 0;
  line-height: 1.2;
}

.admin-topbar-left p {
  font-size: 11.5px;
  color: #8c87ad;
  margin: 2px 0 0;
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eefaf2;
  color: #15803d;
  border: 1px solid #d4f3de;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }

  70% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Main Content Area */
.admin-content {
  padding: 36px;
  flex: 1;
}

.admin-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-header-copy .eyebrow {
  color: #5b36f5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.admin-header-copy h1 {
  font-family: "Fredoka", sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: #120e2e;
  margin: 4px 0 6px;
  letter-spacing: -0.5px;
}

.admin-header-copy p {
  font-size: 13.5px;
  color: #6e6894;
  margin: 0;
  max-width: 650px;
}

.admin-action-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-admin-white {
  background: #ffffff;
  color: #1e1940;
  border: 1px solid #dfdfea;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  transition: all 0.18s ease;
}

.btn-admin-white:hover {
  background: #fbfbfd;
  border-color: #cfcfe0;
  transform: translateY(-1px);
}

.btn-admin-primary {
  background: #5b36f5;
  color: #ffffff;
  border: 1px solid transparent;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 20px rgba(91, 54, 245, 0.28);
  text-decoration: none;
  transition: all 0.18s ease;
}

.btn-admin-primary:hover {
  background: #4d28e0;
  box-shadow: 0 10px 24px rgba(91, 54, 245, 0.35);
  transform: translateY(-1px);
}

/* Stat Grid */
.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.admin-stat-card {
  background: #ffffff;
  border: 1px solid #eaebf4;
  border-radius: 18px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(18, 14, 46, 0.025);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(18, 14, 46, 0.05);
}

.admin-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-stat-icon .ui-icon {
  width: 24px;
  height: 24px;
}

.tone-purple-admin {
  background: #f1efff;
  color: #5b36f5;
}

.tone-blue-admin {
  background: #eaf3ff;
  color: #2563eb;
}

.tone-green-admin {
  background: #eafaf1;
  color: #16a34a;
}

.tone-orange-admin {
  background: #fff5e8;
  color: #d97706;
}

.admin-stat-data {
  display: flex;
  flex-direction: column;
}

.admin-stat-data span.label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a84ab;
}

.admin-stat-data b.value {
  font-family: "Fredoka", sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #120e2e;
  line-height: 1.15;
  margin: 3px 0 2px;
}

.admin-stat-data small.desc {
  font-size: 11.5px;
  color: #8a84ab;
}

/* Middle Section */
.admin-dashboard-row-mid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

.admin-panel {
  background: #ffffff;
  border: 1px solid #eaebf4;
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(18, 14, 46, 0.025);
  display: flex;
  flex-direction: column;
}

.admin-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.admin-panel-head .kicker {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a84ab;
  display: block;
}

.admin-panel-head h2 {
  font-family: "Fredoka", sans-serif;
  font-size: 21px;
  font-weight: 600;
  color: #120e2e;
  margin: 2px 0 0;
}

.admin-panel-link {
  font-size: 12px;
  font-weight: 600;
  color: #5b36f5;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.admin-panel-link:hover {
  text-decoration: underline;
}

/* Bar Chart */
.chart-bar-wrap {
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 10px 10px 0;
  gap: 16px;
  margin-top: auto;
}

.chart-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar-val {
  font-size: 10.5px;
  font-weight: 600;
  color: #8f8aa9;
  margin-bottom: 8px;
  white-space: nowrap;
}

.chart-bar-pillar {
  width: 44px;
  background: #6857df;
  border-radius: 8px 8px 4px 4px;
  transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
  position: relative;
  min-height: 8px;
}

.chart-bar-pillar:hover {
  background: #5443cf;
}

.chart-bar-month {
  font-size: 12px;
  font-weight: 600;
  color: #7a7499;
  margin-top: 10px;
}

/* Quality Score */
.quality-score-meters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.quality-meter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quality-meter-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.quality-meter-info b {
  font-size: 13px;
  font-weight: 600;
  color: #171337;
  display: block;
}

.quality-meter-info small {
  font-size: 11px;
  color: #8a84ab;
}

.quality-meter-score {
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #120e2e;
}

.meter-track {
  height: 7px;
  background: #f0eef8;
  border-radius: 99px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: #6857df;
  border-radius: 99px;
}

.admin-mini-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
}

.admin-mini-kpi {
  background: #f8f9fd;
  border: 1px solid #eaedf6;
  border-radius: 14px;
  padding: 14px 16px;
}

.admin-mini-kpi b {
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #120e2e;
  display: block;
}

.admin-mini-kpi span {
  font-size: 11.5px;
  color: #7b759c;
  display: block;
  margin-top: 2px;
}

/* Bottom Section */
.admin-dashboard-row-bottom {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  margin-top: 22px;
}

/* Admin Table */
.admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}

.admin-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #8a84ab;
  border-bottom: 1px solid #eaebf4;
}

.admin-table td {
  padding: 14px;
  border-bottom: 1px solid #f1f2f8;
  color: #282348;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background: #fafbfe;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.status-pill.paid {
  background: #eafaf1;
  color: #166534;
}

.status-pill.pending {
  background: #fff8eb;
  color: #b45309;
}

.status-pill.cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Student progress items */
.student-progress-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.student-progress-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8f9fd;
  border: 1px solid #eaedf6;
  gap: 14px;
}

.student-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.student-avatar-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #f1efff;
  color: #5b36f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}

.student-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.student-card-info h4 {
  font-size: 13px;
  font-weight: 600;
  color: #171337;
  margin: 0 0 2px;
}

.student-card-info p {
  font-size: 11px;
  color: #7b759c;
  margin: 0;
}

.student-progress-track {
  text-align: right;
}

.student-progress-track b {
  font-size: 13px;
  font-weight: 600;
  color: #171337;
  display: block;
}

.student-progress-track small {
  font-size: 10.5px;
  color: #d97706;
  font-weight: 600;
}

/* Modal Form Styles */
.admin-card {
  background: #ffffff;
  border: 1px solid #eaebf4;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(18, 14, 46, 0.025);
  margin-bottom: 24px;
}

.admin-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.admin-search-input {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #dfdfea;
  border-radius: 12px;
  padding: 8px 14px;
  gap: 8px;
  min-width: 280px;
}

.admin-search-input input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100%;
}

.admin-filter-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f1f2f8;
  padding: 4px;
  border-radius: 12px;
}

.admin-filter-tab {
  padding: 6px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  color: #68628b;
  text-decoration: none;
  transition: all 0.15s ease;
}

.admin-filter-tab.active {
  background: #ffffff;
  color: #171337;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1180px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-dashboard-row-mid,
  .admin-dashboard-row-bottom {
    grid-template-columns: 1fr;
  }
}

/* Admin Mobile Sidebar & Topbar Styles */
.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

.admin-sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.admin-sidebar-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.admin-sidebar-header-row .admin-brand {
  margin-bottom: 0;
}

.admin-sidebar-mobile-close {
  display: none;
}

.admin-sidebar-toggle {
  display: none;
}

@media (max-width: 820px) {
  .admin-layout {
    grid-template-columns: 1fr !important;
  }

  .admin-sidebar-backdrop {
    display: block;
  }

  .admin-sidebar-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .admin-sidebar-mobile-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
  }

  .admin-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 290px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 8px 0 36px rgba(0, 0, 0, 0.4);
    display: flex !important;
    flex-direction: column;
    overflow-y: auto;
  }

  .admin-sidebar.open {
    transform: translateX(0) !important;
  }

  .admin-topbar {
    padding: 12px 18px;
  }

  .admin-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .admin-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #334155;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  .admin-sidebar-toggle:hover {
    background: #f1f5f9;
    color: var(--purple);
    border-color: #c7d2fe;
  }

  .admin-content {
    padding: 18px 14px;
  }

  .admin-stat-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PARENT CHECKOUT, PAYMENT GATEWAY, INVOICE & ORDERS STYLES
   ========================================================================== */

/* Universal Thumbnail Containment */
.cart-item-thumb-box,
.order-thumb-box,
.checkout-thumb-box,
.multi-course-thumb {
  width: 120px;
  height: 95px;
  flex-shrink: 0;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 14px;
  background: #f1efff;
}

.multi-course-thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
}

.cart-item-thumb-box .course-art,
.order-thumb-box .course-art,
.checkout-thumb-box .course-art,
.multi-course-thumb .course-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  border-radius: inherit !important;
}

.cart-item-thumb-box .course-photo,
.order-thumb-box .course-photo,
.checkout-thumb-box .course-photo,
.multi-course-thumb .course-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.multi-course-thumb .art-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

.multi-course-thumb .art-icon .ui-icon {
  width: 16px !important;
  height: 16px !important;
}

.multi-course-thumb .art-label,
.order-thumb-box .art-label,
.cart-item-thumb-box .art-label,
.checkout-thumb-box .art-label {
  display: none !important;
}

/* Conflict Alert Banner */
.conflict-alert-banner {
  background: #fff8eb;
  border: 1.5px solid #f6d396;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}

.conflict-alert-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fdf0d5;
  color: #b45309;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.conflict-alert-copy h4 {
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  color: #92400e;
  margin: 0 0 4px;
}

.conflict-alert-copy p {
  margin: 0;
  font-size: 12px;
  color: #78350f;
  line-height: 1.5;
}

/* ==========================================================================
   CART PAGE LAYOUT
   ========================================================================== */
.cart-page-wrap .cart-layout-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: flex-start;
}

.cart-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 14px;
}

.cart-item-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px;
  border: 1.5px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(32, 40, 63, 0.04);
  transition: all 0.2s ease;
}

.cart-item-card:hover {
  border-color: #dcd7fa;
  box-shadow: 0 6px 20px rgba(104, 87, 223, 0.07);
}

.cart-item-card.item-conflict {
  border-color: #fbd38d;
  background: #fffdf9;
}

.cart-item-details {
  flex: 1;
  min-width: 0;
}

.cart-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.cart-item-head h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  margin: 4px 0 6px;
  color: var(--ink);
}

.cart-item-price {
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--purple);
  white-space: nowrap;
}

.cart-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 10px;
}

.meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f4f5f9;
  font-size: 11px;
  font-weight: 600;
  color: #4a5568;
}

.meta-pill .ui-icon {
  width: 14px;
  height: 14px;
}

.meta-pill.child-pill {
  background: #eef2ff;
  color: #4338ca;
}

.category-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1efff;
  color: var(--purple);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.item-conflict-warning {
  padding: 8px 12px;
  border-radius: 8px;
  background: #fef3c7;
  color: #b45309;
  font-size: 11px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cart-item-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f1f3f7;
}

.text-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--purple);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-remove-item {
  background: none;
  border: 0;
  color: #ef4444;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.btn-remove-item:hover {
  background: #fee2e2;
}

/* Cart Summary */
.cart-summary-panel {
  position: sticky;
  top: 96px;
}

.cart-trust-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--muted);
  border: 1px solid #edf0f5;
}

.cart-trust-note .ui-icon {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
}

/* ==========================================================================
   CHECKOUT PAGE LAYOUT
   ========================================================================== */
.checkout-page-wrap .checkout-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: flex-start;
}

.checkout-main-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.checkout-items-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.checkout-course-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 18px;
  border: 1.5px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(32, 40, 63, 0.04);
}

.checkout-course-card.item-conflict {
  border-color: #fbd38d;
  background: #fffdf9;
}

.checkout-course-body {
  flex: 1;
  min-width: 0;
}

.checkout-course-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.checkout-course-header h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  margin: 4px 0 6px;
  color: var(--ink);
}

.checkout-course-price {
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--purple);
  white-space: nowrap;
}

.checkout-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.item-conflict-box {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff4e5;
  color: #b45309;
  font-size: 11px;
}

.item-conflict-box ul {
  margin: 4px 0 0;
  padding-left: 16px;
}

/* ==========================================================================
   Payment Methods Selection (Premium Modern Fintech Styling)
   ========================================================================== */
.payment-method-panel {
  padding: 24px;
}

.panel-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

.pm-groups-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.pm-group-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pm-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 2px;
}

.pm-group-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #f3f0ff;
  color: var(--purple);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pm-group-icon .ui-icon {
  width: 15px;
  height: 15px;
}

.pm-group-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.2px;
}

.pm-group-subtitle {
  font-size: 11px;
  color: #64748b;
  display: block;
}

.pm-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pm-cards-grid.single-col {
  grid-template-columns: 1fr;
}

.pm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.pm-card:hover {
  border-color: #cbd5e1;
  background: #fafafa;
  transform: translateY(-1px);
}

.pm-card.selected {
  border-color: var(--purple);
  background: #faf8ff;
  box-shadow: 0 4px 16px rgba(109, 40, 217, 0.08);
  transform: translateY(-1px);
}

.pm-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pm-card-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Brand Logos / Badges */
.pm-brand-badge {
  width: 62px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.pm-brand-bca {
  background: #005baa;
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.5px;
}

.pm-brand-mandiri {
  background: #002d62;
  color: #ffb703;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  text-transform: lowercase;
  font-size: 12px;
}

.pm-brand-bri {
  background: #00529c;
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
  letter-spacing: 0.5px;
}

.pm-brand-bni {
  background: #006666;
  color: #ffffff;
  position: relative;
  letter-spacing: 0.5px;
}

.pm-brand-bni span::after {
  content: '46';
  font-size: 9px;
  color: #f97316;
  font-weight: 800;
  margin-left: 1px;
}

.pm-brand-qris {
  background: #ffffff;
  border: 1.5px solid #fecdd3;
  color: #e11d48;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.pm-brand-manual {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pm-brand-demo {
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
}

.pm-card-info {
  flex: 1;
  min-width: 0;
}

.pm-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pm-title {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.pm-status-pill {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  line-height: 1.2;
}

.pm-status-pill.auto {
  background: #ecfdf5;
  color: #059669;
}

.pm-status-pill.instant {
  background: #eff6ff;
  color: #2563eb;
}

.pm-status-pill.manual {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.pm-status-pill.demo {
  background: #f5f3ff;
  color: #7c3aed;
}

.pm-desc {
  margin: 3px 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.35;
  white-space: normal;
}

.pm-sub-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.ewallet-mini-pill {
  font-size: 9.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

/* Radio checkmark circle */
.pm-card-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pm-radio-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  display: grid;
  place-items: center;
  transition: all 0.2s ease;
  background: #ffffff;
  color: transparent;
}

.pm-check-svg {
  width: 11px;
  height: 11px;
  stroke-width: 3;
}

.pm-card.selected .pm-radio-indicator {
  border-color: var(--purple);
  background: var(--purple);
  color: #ffffff;
  transform: scale(1.05);
}

/* Form Controls Global Fallback */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.form-control {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}

/* Parent Notes Panel */
.parent-notes-panel {
  padding: 24px;
}

.notes-field-wrap {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.notes-quick-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-tag-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.quick-chip {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: inherit;
}

.quick-chip:hover,
.quick-chip:active {
  background: #ede9fe;
  border-color: #c4b5fd;
  color: var(--purple);
  transform: translateY(-1px);
}

.notes-textarea-container {
  width: 100%;
}

.notes-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  background: #ffffff;
  min-height: 95px;
  transition: all 0.2s ease;
}

.notes-textarea::placeholder {
  color: #94a3b8;
  font-size: 12.5px;
}

.notes-textarea:focus {
  border-color: var(--purple);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}

.notes-footer-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.4;
}

.notes-footer-hint .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--purple);
  flex-shrink: 0;
}

/* Checkout Summary Sidebar */
.checkout-summary-card {
  position: sticky;
  top: 96px;
}

.voucher-box {
  margin: 16px 0 14px;
}

.voucher-box label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  display: block;
  margin-bottom: 6px;
}

.voucher-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.voucher-input-group input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  outline: none;
  background: #ffffff;
  transition: all 0.2s ease;
}

.voucher-input-group input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.10);
}

.voucher-input-group .btn {
  flex-shrink: 0;
  padding: 10px 18px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 12px;
}

.voucher-hint {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 6px;
}

.summary-divider {
  border: 0;
  border-top: 1px solid #edf0f5;
  margin: 14px 0;
}

.checkout-submit-btn {
  width: 100%;
  margin-top: 18px;
  margin-bottom: 6px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 14px;
  justify-content: center;
  gap: 8px;
}

.checkout-security-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #edf0f5;
}

.checkout-security-box .ui-icon {
  width: 20px;
  height: 20px;
  color: #10b981;
  flex-shrink: 0;
}

.checkout-security-box b {
  display: block;
  font-size: 11px;
  color: var(--ink);
}

.checkout-security-box p {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* ==========================================================================
   ORDERS PAGE STYLES (PARENT)
   ========================================================================== */
.orders-page-wrap .orders-filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.orders-tabs {
  display: flex;
  gap: 6px;
  background: #edf0f7;
  padding: 4px;
  border-radius: 14px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border: 1px solid #e2e8f0;
}

.orders-tabs::-webkit-scrollbar {
  display: none;
}

.order-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.order-tab:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.6);
}

.order-tab.active {
  background: #ffffff;
  color: var(--purple);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 99px;
  background: #e2e8f0;
  font-size: 10px;
  font-weight: 700;
  color: #475569;
}

.tab-badge.warning {
  background: #fef3c7;
  color: #d97706;
}

.tab-badge.success {
  background: #dcfce7;
  color: #16a34a;
}

.orders-search-form {
  min-width: 280px;
}

@media (max-width: 768px) {
  .orders-page-wrap .orders-filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .orders-tabs {
    width: 100%;
    box-sizing: border-box;
  }

  .orders-search-form {
    width: 100%;
    min-width: 0;
  }

  .orders-search-form .search-input-wrap {
    width: 100%;
  }

  .orders-search-form .search-input-wrap input {
    width: 100%;
    box-sizing: border-box;
  }
}

.orders-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.order-card {
  padding: 0;
  overflow: hidden;
  border: 1.5px solid #edf0f5;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(32, 40, 63, 0.04);
}

.order-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #edf0f5;
  font-size: 11.5px;
  gap: 12px;
  flex-wrap: wrap;
}

.order-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.invoice-tag {
  font-family: 'Plus Jakarta Sans', monospace, -apple-system;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  letter-spacing: 0.2px;
}

.invoice-tag .ui-icon {
  width: 14.5px;
  height: 14.5px;
  color: var(--purple);
  flex-shrink: 0;
}

.order-date {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
}

.order-method-badge {
  padding: 2.5px 7.5px;
  border-radius: 6px;
  background: #f1efff;
  color: var(--purple);
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #e2ddfa;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
}

.order-header-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.order-card-body {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
}

.order-course-info {
  flex: 1;
  min-width: 0;
}

.order-course-info h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  margin: 3px 0 6px;
  color: var(--ink);
}

.order-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #4a5568;
}

.order-meta-item .ui-icon {
  width: 14px;
  height: 14px;
}

.order-price-box {
  text-align: right;
  flex-shrink: 0;
}

.order-price-box small {
  display: block;
  font-size: 10px;
  color: var(--muted);
}

.order-price-box strong {
  font-family: "Fredoka", sans-serif;
  font-size: 19px;
  color: var(--purple);
}

.order-bundle-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #ede9fe, #e0e7ff);
  color: #6366f1;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
}

.order-bundle-pill .ui-icon {
  width: 13px;
  height: 13px;
}

.multi-course-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.multi-course-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  transition: all 0.2s ease;
}

.multi-course-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.multi-course-thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  flex-shrink: 0;
  background: #f1efff;
}

.multi-course-thumb .course-art,
.multi-course-thumb .course-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

.multi-course-detail {
  flex: 1;
  min-width: 0;
}

.multi-course-detail h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 2px 0 4px 0;
}

.multi-course-price {
  text-align: right;
  flex-shrink: 0;
}

.multi-course-price b {
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  color: var(--purple);
  font-weight: 700;
}

.payment-courses-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.payment-course-brief-item {
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 10px;
}

.payment-course-brief-item .course-brief-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.payment-course-brief-item h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.payment-course-brief-item .price-mini {
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple);
}

.payment-course-brief-item .course-brief-sub {
  font-size: 11px;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.payment-course-brief-item .course-brief-sub .ui-icon {
  width: 12px;
  height: 12px;
}

.receipt-item-row.multi-item {
  border-bottom: 1px dashed #e2e8f0;
  padding-bottom: 14px;
  margin-bottom: 14px;
}

.receipt-item-row.multi-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.order-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #fafbfc;
  border-top: 1px solid #edf0f5;
}

.order-footer-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ==========================================================================
   PAYMENT GATEWAY PAGE & INVOICE
   ========================================================================== */
.payment-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
}

.payment-countdown-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 60%, #4338ca 100%);
  color: #ffffff;
  padding: 22px 28px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(30, 27, 75, 0.12);
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-countdown-banner::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.countdown-banner-left {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.countdown-banner-left h2 {
  font-family: "Fredoka", sans-serif;
  font-size: 21px;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.3;
}

.countdown-banner-left p {
  margin: 0;
  font-size: 12.5px;
  color: #c7d2fe;
  line-height: 1.5;
}

.invoice-pill-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.invoice-pill-row .status-chip.pending {
  background: rgba(245, 158, 11, 0.22);
  color: #fde68a;
  border: 1px solid rgba(245, 158, 11, 0.45);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 10px;
}

.invoice-number-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e0e7ff;
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}

.invoice-number-chip .ui-icon {
  width: 12px;
  height: 12px;
}

.bundle-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(99, 102, 241, 0.35);
  border: 1px solid rgba(165, 180, 252, 0.4);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
}

.bundle-count-chip .ui-icon {
  width: 12px;
  height: 12px;
  color: #fbbf24;
}

.countdown-banner-right {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  padding: 14px 20px;
  text-align: center;
  flex-shrink: 0;
  z-index: 1;
  min-width: 180px;
}

.countdown-digits-box {
  background: rgba(15, 23, 42, 0.45);
  border-radius: 10px;
  padding: 5px 12px;
  margin-bottom: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  color: #a5b4fc;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.countdown-caption .ui-icon {
  width: 12px;
  height: 12px;
}

.countdown-val {
  font-family: "Fredoka", monospace;
  font-size: 25px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1.5px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.3);
}

.countdown-deadline {
  display: block;
  font-size: 10.5px;
  color: #cbd5e1;
}

/* Main Payment Card Panel */
.payment-box-card {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Method Header Bar */
.method-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}

.method-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.method-brand-pill {
  width: 56px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.method-brand-pill.bca {
  background: linear-gradient(135deg, #005baa, #003366);
}

.method-brand-pill.mandiri {
  background: linear-gradient(135deg, #002d62, #e5a900);
}

.method-brand-pill.bri {
  background: linear-gradient(135deg, #00529b, #0284c7);
}

.method-brand-pill.bni {
  background: linear-gradient(135deg, #f15a24, #c2410c);
}

.method-brand-pill.qris {
  background: linear-gradient(135deg, #dc2626, #991b1b);
}

.method-brand-pill.manual {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.method-header-info h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 3px 0;
}

.method-header-info p {
  margin: 0;
  font-size: 11.5px;
  color: #64748b;
}

.verified-merchant-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  border-radius: 99px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.verified-merchant-badge .ui-icon {
  width: 14px;
  height: 14px;
}

/* Payment Details Card (VA & Amount) */
.payment-details-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.detail-row.highlight-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.2s ease;
}

.detail-row.highlight-box:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.detail-row.amount-box {
  background: #fbfbfe;
  border-color: #ddd6fe;
}

.detail-label-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detail-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-label .ui-icon {
  width: 14px;
  height: 14px;
  color: #6366f1;
}

.detail-sub {
  font-size: 11px;
  color: #94a3b8;
}

.detail-value-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.detail-code-large {
  font-family: "Fredoka", monospace;
  font-size: 24px;
  font-weight: 700;
  color: #1e1b4b;
  letter-spacing: 2px;
}

.detail-amount-large {
  font-family: "Fredoka", sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--purple);
}

.btn-copy-interactive {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1efff;
  color: #6366f1;
  border: 1px solid #dcd6fe;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-copy-interactive .ui-icon {
  width: 14px;
  height: 14px;
}

.btn-copy-interactive:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.25);
}

.btn-copy-interactive:active {
  transform: translateY(0);
}

.detail-row.info-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 12px 18px;
}

.info-cell small {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.info-cell strong {
  font-size: 12px;
  color: #1e293b;
}

.badge-status-pending {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
}

/* Action Banner CTA */
.payment-action-card {
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1.5px solid #ddd6fe;
  border-radius: 18px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.action-card-text {
  display: flex;
  align-items: center;
  gap: 14px;
}

.action-pulse-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #7c3aed;
  color: #ffffff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.3);
}

.action-pulse-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.action-card-text h4 {
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  color: #1e1b4b;
  margin: 0 0 3px 0;
}

.action-card-text p {
  margin: 0;
  font-size: 11.5px;
  color: #6d28d9;
}

.btn-pay-now {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35);
  font-size: 14px;
  padding: 12px 24px;
  white-space: nowrap;
}

/* Payment Guide Section & Accordions */
.payment-guide-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 14px 0;
}

.payment-guide-section h4 .ui-icon {
  width: 18px;
  height: 18px;
  color: #6366f1;
}

.guide-accordion-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guide-accordion {
  border: 1.5px solid #edf0f5;
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.2s ease;
}

.guide-accordion[open] {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.guide-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #f8fafc;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 13px;
  color: #1e293b;
  user-select: none;
  transition: background 0.2s ease;
}

.guide-accordion summary::-webkit-details-marker {
  display: none;
}

.guide-accordion summary:hover {
  background: #f1f5f9;
}

.guide-sum-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-sum-title .ui-icon {
  width: 16px;
  height: 16px;
  color: #6366f1;
}

.guide-chevron .ui-icon {
  width: 14px;
  height: 14px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.guide-accordion[open] .guide-chevron .ui-icon {
  transform: rotate(90deg);
  color: #6366f1;
}

.guide-body {
  padding: 16px 20px 18px 24px;
  font-size: 12px;
  color: #475569;
  line-height: 1.7;
  border-top: 1px solid #edf0f5;
  background: #ffffff;
}

.guide-body ol {
  margin: 0;
  padding-left: 20px;
}

.guide-body li {
  margin-bottom: 6px;
}

.guide-body li:last-child {
  margin-bottom: 0;
}

.code-badge {
  background: #f1efff;
  color: #4338ca;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid #dcd6fe;
}

/* Cancel Bar */
.payment-cancel-bar {
  padding-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.payment-grid {
  display: grid;
  grid-template-columns: 1.32fr 0.68fr;
  gap: 24px;
  align-items: flex-start;
}

.payment-main-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Payment Summary Sidebar */
.payment-summary-sidebar {
  position: relative;
  height: auto;
  background: #ffffff;
  border: 1.5px solid #edf0f5;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 6px 24px rgba(32, 40, 63, 0.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.summary-header h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Fredoka", sans-serif;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

.summary-header h3 .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--purple);
}

.summary-header .order-bundle-pill {
  white-space: nowrap;
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 99px;
  background: #f1efff;
  color: #6366f1;
  font-weight: 700;
  border: 1px solid #e0dbfc;
}

.summary-method-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.method-mini-pill {
  font-weight: 800;
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 6px;
  color: #ffffff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.method-mini-pill.bca {
  background: linear-gradient(135deg, #005baa, #003366);
}

.method-mini-pill.mandiri {
  background: linear-gradient(135deg, #002d62, #c89300);
}

.method-mini-pill.bri {
  background: linear-gradient(135deg, #00529b, #0284c7);
}

.method-mini-pill.bni {
  background: linear-gradient(135deg, #f15a24, #c2410c);
}

.method-mini-pill.qris {
  background: linear-gradient(135deg, #dc2626, #991b1b);
}

.method-mini-pill.manual {
  background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.method-mini-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.method-mini-info strong {
  font-size: 11.5px;
  color: #1e293b;
}

.method-mini-info span {
  font-size: 10px;
  color: #64748b;
}

.payment-courses-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}

.summary-course-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #ffffff;
  border: 1.5px solid #edf2f7;
  border-radius: 14px;
  padding: 12px;
  transition: all 0.2s ease;
}

.summary-course-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.summary-course-thumb {
  width: 48px !important;
  height: 48px !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  background: #f3f4f6;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.summary-course-thumb .course-art,
.summary-course-thumb .course-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

.summary-course-thumb .art-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
}

.summary-course-thumb .art-icon .ui-icon {
  width: 12px !important;
  height: 12px !important;
}

.summary-course-thumb .art-label {
  display: none !important;
}

.summary-course-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-course-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.summary-course-title-row h4 {
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.summary-course-title-row .course-item-price {
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  color: var(--purple);
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.summary-course-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.summary-chip .ui-icon {
  width: 10px;
  height: 10px;
}

.summary-chip.child {
  background: #f1f5f9;
  color: #475569;
}

.summary-chip.package {
  background: #f3e8ff;
  color: #7e22ce;
}

.summary-chip.schedule {
  background: #fef3c7;
  color: #92400e;
}

.summary-calc-box {
  background: #f8fafc;
  border: 1.5px solid #eef2f6;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
}

.summary-line strong {
  color: #1e293b;
  font-weight: 700;
}

.summary-line.discount-line {
  color: #16a34a;
}

.summary-divider {
  border: 0;
  border-top: 1px dashed #cbd5e1;
  margin: 4px 0;
}

.summary-total-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 4px;
}

.total-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1e293b;
}

.total-sub {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  margin-top: 1px;
}

.total-price-large {
  font-family: "Fredoka", sans-serif;
  font-size: 23px;
  color: var(--purple);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.payment-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.payment-trust-badge .ui-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #16a34a;
}

.payment-trust-badge strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
}

.payment-trust-badge span {
  display: block;
  font-size: 10px;
  color: #15803d;
  margin-top: 1px;
}

.payment-help-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  font-size: 11px;
  color: #64748b;
}

.payment-help-box .ui-icon {
  width: 16px;
  height: 16px;
  color: #6366f1;
  flex-shrink: 0;
}

.payment-help-box strong {
  color: #334155;
}

/* QRIS Custom Box */
.qris-instruction-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.qris-card-center {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  text-align: center;
}

.qris-badge-tag {
  display: inline-block;
  background: #dc2626;
  color: #ffffff;
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 6px;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.qris-frame-box {
  margin: 16px auto;
  display: inline-block;
  padding: 14px;
  border: 2.5px solid #1e293b;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.qris-supported-wallets {
  margin-top: 14px;
}

.qris-supported-wallets span {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-bottom: 6px;
}

.wallet-pills-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.w-pill {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
}

/* Interactive Toast Notification */
.payment-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e1b4b;
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 99999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.payment-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ==========================================================================
   OFFICIAL COMMERCIAL INVOICE / FAKTUR RESMI (A4 COMPLIANT)
   ========================================================================== */
.official-invoice-sheet {
  max-width: 860px;
  margin: 0 auto 36px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 44px 48px;
  box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #1e293b;
}

/* Watermark Stamp */
.invoice-stamp-watermark {
  position: absolute;
  top: 180px;
  right: 60px;
  border: 4px dashed rgba(22, 163, 74, 0.22);
  border-radius: 12px;
  padding: 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.invoice-stamp-watermark span {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
  color: rgba(22, 163, 74, 0.25);
  font-family: "Fredoka", "Arial Black", sans-serif;
  line-height: 1;
}

.invoice-stamp-watermark small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(22, 163, 74, 0.22);
}

/* 1. Header Row */
.invoice-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  z-index: 2;
}

.invoice-company-brand {
  max-width: 440px;
}

.company-logo-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.company-logo-badge .logo-symbol {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}

.company-brand-text h2 {
  font-family: "Fredoka", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.company-brand-text span {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
}

.company-address-block p {
  margin: 2px 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
}

.invoice-doc-title-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.invoice-main-title {
  font-family: "Fredoka", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #1e293b;
  margin: 0 0 6px 0;
  line-height: 1;
}

.invoice-status-pill.paid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #15803d;
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.invoice-status-pill .ui-icon {
  width: 13px;
  height: 13px;
}

.invoice-meta-table {
  border-collapse: collapse;
  font-size: 12px;
}

.invoice-meta-table td {
  padding: 2px 4px;
  vertical-align: middle;
}

.invoice-meta-table .meta-label {
  color: #64748b;
  font-size: 11.5px;
  text-align: left;
}

.invoice-meta-table .meta-separator {
  color: #94a3b8;
  padding: 0 4px;
}

.invoice-meta-table .meta-val {
  color: #1e293b;
  font-size: 12px;
  text-align: right;
  font-weight: 600;
}

.invoice-divider-line {
  height: 2px;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  margin: 22px 0 24px;
}

/* 2. Customer & Billing Parties */
.invoice-parties-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
}

.party-card .party-caption {
  display: block;
  font-size: 10px;
  font-weight: 800;
  color: #6366f1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.party-card .party-name {
  font-family: "Fredoka", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.party-card .party-detail {
  font-size: 12px;
  line-height: 1.5;
  color: #475569;
  margin: 2px 0;
}

/* 3. Items Table */
.invoice-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
}

.invoice-items-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 12.5px;
}

.invoice-items-table thead {
  background: #f1f5f9;
  border-bottom: 1.5px solid #cbd5e1;
}

.invoice-items-table th {
  padding: 12px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #334155;
}

.invoice-items-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
}

.invoice-items-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.invoice-items-table tbody tr:last-child {
  border-bottom: none;
}

.invoice-items-table td {
  padding: 14px 14px;
  vertical-align: top;
}

.invoice-items-table .row-num {
  font-weight: 700;
  color: #64748b;
  font-size: 12px;
}

.item-course-title {
  font-family: "Fredoka", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.item-meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
}

.meta-tag.student {
  background: #ede9fe;
  color: #5b21b6;
}

.meta-tag.cat {
  background: #f1f5f9;
  color: #475569;
}

.meta-tag .ui-icon {
  width: 12px;
  height: 12px;
}

.schedule-detail-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
}

.schedule-detail-text .sched-day {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #1e293b;
  font-weight: 600;
}

.schedule-detail-text .loc-text {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #64748b;
  margin-top: 2px;
}

.schedule-detail-text .ui-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.package-pill {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.session-count-text {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 3px;
}

.item-price-val {
  font-family: "Fredoka", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}

/* 4. Financial Calculations & Summary */
.invoice-summary-container {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.invoice-terbilang-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
}

.terbilang-title {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #64748b;
  margin-bottom: 4px;
}

.terbilang-text {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  margin: 0 0 12px 0;
}

.payment-verification-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.payment-verification-badge .ui-icon {
  width: 20px;
  height: 20px;
  color: #16a34a;
  flex-shrink: 0;
}

.payment-verification-badge strong {
  display: block;
  font-size: 11.5px;
  color: #15803d;
}

.payment-verification-badge small {
  font-size: 10px;
  color: #64748b;
  font-family: monospace;
}

.invoice-totals-table-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
}

.invoice-totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.invoice-totals-table td {
  padding: 9px 14px;
}

.invoice-totals-table .tot-label {
  color: #64748b;
}

.invoice-totals-table .tot-val {
  text-align: right;
  font-weight: 600;
  color: #1e293b;
}

.invoice-totals-table .discount-row td {
  color: #16a34a;
  background: #f0fdf4;
}

.invoice-totals-table .grand-total-row {
  background: #f8fafc;
  border-top: 2px solid #cbd5e1;
}

.invoice-totals-table .grand-total-row .tot-label {
  font-family: "Fredoka", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.invoice-totals-table .grand-total-row .tot-val {
  font-family: "Fredoka", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #4f46e5;
}

/* 5. Terms & Legal / Digital Stamp */
.invoice-footer-section {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 24px;
  padding-top: 18px;
  border-top: 1px dashed #cbd5e1;
  align-items: end;
}

.invoice-terms-notes h4 {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.invoice-terms-notes ol {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.6;
  color: #64748b;
}

.invoice-signature-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sig-city-date {
  font-size: 11.5px;
  color: #475569;
  margin: 0 0 6px 0;
}

.digital-stamp-badge {
  width: 140px;
  height: 60px;
  border: 2px solid #4f46e5;
  border-radius: 8px;
  padding: 4px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  background: rgba(79, 70, 229, 0.03);
}

.stamp-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.stamp-org {
  font-size: 7.5px;
  font-weight: 800;
  color: #4f46e5;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.stamp-status {
  font-size: 10px;
  font-weight: 900;
  color: #16a34a;
  letter-spacing: 0.5px;
  margin: 1px 0;
}

.stamp-dept {
  font-size: 7px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.4px;
}

.sig-name {
  font-family: "Fredoka", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.sig-sub {
  font-size: 9.5px;
  color: #94a3b8;
}

/* 6. Interactive Actions Bottom Bar */
.invoice-bottom-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* ==========================================================================
   RESPONSIVE & PRINT MEDIA QUERIES
   ========================================================================== */
@media (max-width: 960px) {

  .checkout-page-wrap .checkout-grid,
  .payment-grid,
  .cart-page-wrap .cart-layout-grid {
    grid-template-columns: 1fr;
  }

  .checkout-summary-card,
  .payment-summary-aside,
  .cart-summary-panel {
    position: static;
  }

  .payment-methods-grid {
    grid-template-columns: 1fr;
  }

  .official-invoice-sheet {
    padding: 28px 24px;
  }

  .invoice-summary-container,
  .invoice-footer-section {
    grid-template-columns: 1fr;
  }

  .invoice-signature-block {
    text-align: left;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {

  .cart-item-card,
  .checkout-course-card,
  .order-card-body {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
    gap: 12px;
  }

  .cart-item-thumb-box,
  .checkout-thumb-box,
  .order-thumb-box {
    width: 100%;
    height: 140px;
  }

  .cart-item-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .cart-item-price {
    text-align: left !important;
    margin-top: 4px;
  }

  .cart-item-meta {
    flex-wrap: wrap;
    gap: 6px;
  }

  .cart-item-actions {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
    margin-top: 10px;
  }

  .multi-course-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
  }

  .multi-course-thumb {
    width: 100% !important;
    height: 100px !important;
  }

  .multi-course-price {
    text-align: left;
    margin-top: 6px;
    width: 100%;
    border-top: 1px dashed #e2e8f0;
    padding-top: 8px;
  }

  .order-card-header {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
  }

  .order-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
  }

  .order-header-right {
    flex-shrink: 0;
    margin-left: auto;
  }

  .invoice-tag {
    font-size: 11.5px;
  }

  .order-date {
    font-size: 10.5px;
  }

  .order-price-box {
    text-align: left;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px dashed #e2e8f0;
    width: 100%;
  }

  .order-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
  }

  .order-footer-actions {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .order-footer-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  /* Payment Page & Instructions on Mobile */
  .payment-countdown-banner {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 16px;
    gap: 14px;
    border-radius: 18px;
  }

  .countdown-banner-left h2 {
    font-size: 18px;
    margin: 4px 0 4px;
  }

  .countdown-banner-left p {
    font-size: 11.5px;
    line-height: 1.45;
  }

  .countdown-banner-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 14px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }

  .countdown-caption {
    font-size: 10px;
    margin-bottom: 0;
  }

  .countdown-digits-box {
    margin-bottom: 0;
    padding: 4px 10px;
  }

  .countdown-val {
    font-size: 20px;
  }

  .countdown-deadline {
    font-size: 10px;
  }

  .invoice-pill-row {
    flex-wrap: wrap;
    gap: 6px;
  }

  .payment-box-card {
    padding: 16px 14px;
    border-radius: 18px;
    gap: 16px;
  }

  .method-header-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
  }

  .method-header-left {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .method-brand-pill {
    width: 48px;
    height: 36px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .method-header-info h3 {
    font-size: 15px;
    margin: 0 0 2px;
  }

  .method-header-info p {
    font-size: 11px;
  }

  .verified-merchant-badge {
    align-self: flex-start;
    font-size: 10px;
    padding: 3px 10px;
  }

  .payment-details-card {
    padding: 12px 10px;
    gap: 10px;
    border-radius: 14px;
  }

  .detail-row.highlight-box {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 12px;
  }

  .detail-label-group {
    width: 100%;
  }

  .detail-label {
    font-size: 10.5px;
    letter-spacing: 0.3px;
  }

  .detail-sub {
    font-size: 10.5px;
  }

  .detail-value-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .detail-code-large {
    font-size: 18px;
    letter-spacing: 1px;
    word-break: break-all;
    line-height: 1.2;
  }

  .detail-amount-large {
    font-size: 20px;
    line-height: 1.2;
  }

  .btn-copy-interactive {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .detail-row.info-row {
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 8px;
    border-radius: 12px;
  }

  .info-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #f1f5f9;
    padding-bottom: 6px;
  }

  .info-cell:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .info-cell small {
    margin-bottom: 0;
    font-size: 10.5px;
  }

  .info-cell strong {
    font-size: 11.5px;
    text-align: right;
  }

  .payment-action-card {
    flex-direction: column;
    align-items: stretch;
    padding: 16px 14px;
    gap: 14px;
    border-radius: 16px;
  }

  .action-card-text {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .action-pulse-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .action-pulse-icon .ui-icon {
    width: 18px;
    height: 18px;
  }

  .action-card-text h4 {
    font-size: 14.5px;
    margin: 0 0 2px 0;
  }

  .action-card-text p {
    font-size: 11px;
  }

  .btn-pay-now {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 13px 16px;
    font-size: 13px;
    border-radius: 12px;
    white-space: normal;
  }

  .payment-guide-section {
    margin-top: 4px;
  }

  .payment-guide-section h4 {
    font-size: 14.5px;
    margin-bottom: 10px;
    gap: 6px;
  }

  .guide-accordion {
    border-radius: 12px;
  }

  .guide-accordion summary {
    padding: 12px 14px;
    font-size: 12px;
  }

  .guide-sum-title {
    font-size: 12px;
    gap: 6px;
  }

  .guide-body {
    padding: 12px 14px 14px 14px;
    font-size: 11.5px;
    line-height: 1.6;
  }

  .guide-body ol {
    padding-left: 18px;
    margin: 0;
  }

  .guide-body li {
    margin-bottom: 6px;
  }

  .code-badge {
    font-size: 11px;
    padding: 2px 6px;
    word-break: break-all;
    display: inline-block;
  }

  .qris-card-center {
    padding: 16px 12px;
    border-radius: 14px;
  }

  .qris-badge-tag {
    font-size: 15px;
    padding: 2px 12px;
  }

  .qris-frame-box {
    padding: 8px;
    margin: 8px auto 12px;
    max-width: 200px;
  }

  .qris-frame-box svg {
    width: 100%;
    max-width: 160px;
    height: auto;
  }

  .wallet-pills-row {
    gap: 4px;
  }

  .w-pill {
    font-size: 9.5px;
    padding: 2px 8px;
  }

  .payment-toast {
    left: 16px;
    right: 16px;
    bottom: 16px;
    justify-content: center;
    text-align: center;
  }

  .payment-summary-sidebar {
    padding: 16px 14px;
    border-radius: 18px;
    gap: 12px;
  }

  .summary-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
  }

  .summary-header h3 {
    font-size: 15px;
  }

  .summary-method-banner {
    padding: 10px 12px;
    border-radius: 12px;
    gap: 10px;
  }

  .summary-course-card {
    padding: 10px;
    border-radius: 12px;
    gap: 10px;
  }

  .summary-course-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }

  .summary-course-title-row h4 {
    font-size: 12px;
  }

  .course-item-price {
    font-size: 12.5px;
  }

  .summary-course-chips {
    gap: 4px;
  }

  .summary-chip {
    font-size: 9px;
    padding: 2px 6px;
  }

  /* Payment Method Cards on Mobile - 1 Column with spacious horizontal row */
  .pm-cards-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pm-card {
    padding: 13px 15px !important;
    border-radius: 14px !important;
  }

  .pm-brand-badge {
    width: 60px !important;
    height: 38px !important;
    font-size: 12.5px !important;
  }

  .pm-title {
    font-size: 13.5px !important;
  }

  .pm-desc {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* Empty States on Mobile */
  .empty-state-full,
  .payment-cancelled-card,
  .payment-cancelled-card .empty-state,
  .cart-items-column .empty-state {
    padding: 32px 18px !important;
  }

  .empty-state-actions,
  .empty-state-full .empty-state-actions,
  .empty-state.empty-state-full .empty-state-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .empty-state-actions .btn,
  .empty-state-full .empty-state-actions .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .booking-panel {
    padding: 18px 14px !important;
    border-radius: 18px;
    gap: 16px;
  }

  /* Official Invoice Sheet on Mobile */
  .official-invoice-sheet {
    padding: 18px 14px !important;
    border-radius: 16px !important;
    margin: 0 0 24px !important;
  }

  .invoice-stamp-watermark {
    display: none !important;
  }

  .invoice-header-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .invoice-company-brand,
  .invoice-doc-title-block {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .invoice-meta-table {
    width: 100% !important;
  }

  .invoice-meta-table td {
    padding: 3px 0 !important;
  }

  .invoice-parties-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 14px 14px !important;
  }

  .invoice-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 12px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
  }

  .invoice-items-table {
    min-width: 540px !important;
    width: 100% !important;
  }

  .invoice-items-table th,
  .invoice-items-table td {
    padding: 10px 10px !important;
  }

  .invoice-summary-container,
  .invoice-footer-section {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .invoice-bottom-actions {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .invoice-bottom-actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Layout & safe spacing */
  .checkout-container {
    padding-bottom: 36px;
  }
}

/* ==========================================================================
   SKILLPATH AVATAR CROPPER MODAL STYLES
   ========================================================================== */
body.sp-crop-modal-open {
  overflow: hidden !important;
}

.sp-crop-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
}

.sp-crop-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.sp-crop-dialog {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  width: 100%;
  max-width: 660px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.94) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sp-crop-backdrop.active .sp-crop-dialog {
  transform: scale(1) translateY(0);
}

.sp-crop-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f1f2f8;
}

.sp-crop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1efff;
  color: #6857df;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.sp-crop-header-text h3 {
  font-family: "Fredoka", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #120e2e;
  margin: 0 0 4px;
}

.sp-crop-header-text p {
  font-size: 13px;
  color: #7b759c;
  margin: 0;
  line-height: 1.4;
}

.sp-crop-close {
  background: #f4f5f9;
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
  margin-left: 12px;
}

.sp-crop-close:hover {
  background: #fee2e2;
  color: #ef4444;
  transform: rotate(90deg);
}

.sp-crop-body {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 20px;
  padding: 20px 24px;
  overflow-y: auto;
  align-items: center;
}

.sp-crop-canvas-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sp-crop-viewport-wrap {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  background: #f8fafc;
}

.sp-crop-canvas {
  width: 340px;
  height: 340px;
  display: block;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.sp-crop-guide-hint {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  white-space: nowrap;
}

.sp-crop-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-crop-preview-card {
  background: #f8f9fd;
  border: 1px solid #eaedf6;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sp-crop-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #8a84ab;
  margin-bottom: 10px;
}

.sp-crop-preview-avatar-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.sp-crop-preview-ring {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #6857df, #f43f5e);
  box-shadow: 0 6px 18px rgba(104, 87, 223, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sp-crop-preview-canvas {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: block;
  background: #ffffff;
}

.sp-crop-preview-sub {
  font-size: 11px;
  color: #8f8aa9;
}

.sp-crop-control-group {
  background: #ffffff;
  border: 1px solid #eaedf6;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-crop-control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sp-crop-control-label {
  font-size: 12px;
  font-weight: 600;
  color: #282348;
}

.sp-crop-val-label {
  font-size: 11px;
  font-weight: 700;
  color: #6857df;
  background: #f1efff;
  padding: 2px 7px;
  border-radius: 6px;
}

.sp-crop-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sp-crop-btn-icon {
  background: #f1f2f8;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sp-crop-btn-icon:hover {
  background: #6857df;
  color: #ffffff;
}

.sp-crop-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 99px;
  background: #e2e8f0;
  outline: none;
}

.sp-crop-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6857df;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(104, 87, 223, 0.4);
  transition: transform 0.1s ease;
}

.sp-crop-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.sp-crop-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #6857df;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(104, 87, 223, 0.4);
}

.sp-crop-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}

.sp-crop-btn-tool {
  background: #f8f9fd;
  border: 1px solid #e2e8f0;
  border-radius: 99px;
  padding: 7px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.sp-crop-btn-tool:hover {
  background: #f1efff;
  border-color: #c7d2fe;
  color: #6857df;
}

.sp-crop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 20px;
  border-top: 1px solid #f1f2f8;
  background: #fafbfe;
  gap: 16px;
  flex-wrap: wrap;
}

.sp-crop-footer-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
}

.sp-crop-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sp-crop-btn-cancel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.sp-crop-btn-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.sp-crop-btn-apply {
  background: linear-gradient(135deg, #6857df, #5443cf);
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  box-shadow: 0 4px 14px rgba(104, 87, 223, 0.35);
  transition: all 0.2s ease;
}

.sp-crop-btn-apply:hover {
  background: linear-gradient(135deg, #5b49d6, #4333b8);
  box-shadow: 0 6px 18px rgba(104, 87, 223, 0.45);
  transform: translateY(-1px);
}

@keyframes spAvatarPulseAnim {
  0% {
    transform: scale(0.94);
    box-shadow: 0 0 0 0 rgba(104, 87, 223, 0.6);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 10px rgba(104, 87, 223, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(104, 87, 223, 0);
  }
}

.sp-avatar-pulse {
  animation: spAvatarPulseAnim 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 680px) {
  .sp-crop-dialog {
    max-height: 96vh;
    border-radius: 20px;
  }

  .sp-crop-body {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 14px;
  }

  .sp-crop-viewport-wrap,
  .sp-crop-canvas {
    width: 280px;
    height: 280px;
  }

  .sp-crop-preview-card {
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 14px;
  }

  .sp-crop-preview-ring {
    width: 60px;
    height: 60px;
    padding: 2px;
  }

  .sp-crop-preview-canvas {
    width: 56px;
    height: 56px;
  }

  .sp-crop-footer {
    padding: 12px 16px;
    flex-direction: column-reverse;
  }

  .sp-crop-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .sp-crop-footer-hint {
    font-size: 10.5px;
  }
}

/* ==========================================================================
   Separated Platform & Mentor Reviews Design System
   ========================================================================== */

.review-section-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.review-section-panel {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 4px 20px -4px rgba(24, 39, 75, 0.06);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.review-section-panel:hover {
  box-shadow: 0 8px 30px -4px rgba(24, 39, 75, 0.09);
  border-color: rgba(203, 213, 225, 0.9);
}

.review-panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.review-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #6366f1;
  margin-bottom: 4px;
}

.review-panel-title {
  font-size: 20px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0 0 6px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-panel-desc {
  font-size: 13.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
  max-width: 680px;
}

.badge-review-limit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.badge-review-limit.badge-active {
  background: #eef2ff;
  color: #4f46e5;
  border-color: #c7d2fe;
}

.badge-review-limit.badge-success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}

/* Platform Review Card & Showcase */
.platform-review-showcase {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.platform-showcase-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.platform-showcase-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.platform-showcase-stars {
  display: inline-flex;
  gap: 3px;
}

.platform-showcase-score {
  font-size: 16px;
  font-weight: 800;
  color: #1e293b;
  margin-left: 4px;
}

.platform-showcase-quote {
  font-size: 14.5px;
  line-height: 1.6;
  color: #334155;
  background: #ffffff;
  border-left: 4px solid #4f46e5;
  padding: 12px 16px;
  border-radius: 0 10px 10px 0;
  margin: 0;
  font-style: italic;
}

.platform-showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed #cbd5e1;
}

.platform-showcase-date {
  font-size: 12px;
  color: #64748b;
}

/* Review Interactive Form */
.review-form-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 24px;
}

.interactive-star-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.star-picker-label {
  font-size: 12.5px;
  font-weight: 700;
  color: #334155;
}

.star-rating-options {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.star-option-item {
  position: relative;
}

.star-option-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.star-option-item label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.star-option-item label:hover {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #b45309;
}

.star-option-item input[type="radio"]:checked + label {
  border-color: #f59e0b;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.review-textarea-custom {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  font-family: inherit;
  background: #ffffff;
  color: #1e293b;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.review-textarea-custom:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Mentor Reviews Grid */
.mentor-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
}

.mentor-review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.mentor-review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.mrc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 12px;
}

.mrc-course-title {
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px;
  line-height: 1.35;
}

.mrc-child-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.mrc-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.mrc-status-pill.status-reviewed {
  background: #ecfdf5;
  color: #059669;
}

.mrc-status-pill.status-pending {
  background: #fff7ed;
  color: #c2410c;
}

.mrc-mentor-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f8fafc;
  padding: 10px 12px;
  border-radius: 12px;
}

.mrc-mentor-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #e0e7ff;
  color: #4338ca;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.mrc-mentor-info h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 2px;
}

.mrc-mentor-info p {
  font-size: 11.5px;
  color: #64748b;
  margin: 0;
}

.mrc-showcase-box {
  background: #fdfefe;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mrc-showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mrc-quote {
  font-size: 13px;
  color: #334155;
  font-style: italic;
  margin: 0;
  line-height: 1.45;
}

/* Empty State Modern */
.review-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px;
  background: #f8fafc;
  border-radius: 16px;
  border: 1.5px dashed #cbd5e1;
}

.review-empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef2ff;
  color: #6366f1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.review-empty-icon svg {
  width: 26px;
  height: 26px;
}

.review-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 6px;
}

.review-empty-desc {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 16px;
  max-width: 480px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .review-section-panel {
    padding: 18px 16px;
    border-radius: 16px;
  }

  .mentor-review-grid {
    grid-template-columns: 1fr;
  }

  .star-rating-options {
    gap: 6px;
  }

  .star-option-item label {
    padding: 6px 10px;
    font-size: 11.5px;
  }
}

/* ==========================================================================
   Today's Schedule Notification & Reminder System
   ========================================================================== */

.schedule-reminder-banner {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 40%, #f5f3ff 100%);
  border-radius: 20px;
  border: 1.5px solid rgba(168, 85, 247, 0.32);
  box-shadow: 0 10px 30px -5px rgba(147, 51, 234, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 24px 28px;
  margin-top: 0;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.reminder-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reminder-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reminder-icon-bubble {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #9333ea 0%, #6366f1 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35);
  flex-shrink: 0;
}

.reminder-icon-bubble svg {
  width: 22px;
  height: 22px;
}

.reminder-header-titles h2 {
  font-size: 18px;
  font-weight: 800;
  color: #1e1b4b;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.reminder-header-titles p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.reminder-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reminder-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e9d5ff;
  color: #7e22ce;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(147, 51, 234, 0.05);
}

.reminder-count-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.pulse-radar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: pulseRadar 1.6s infinite cubic-bezier(0.66, 0, 0, 1);
  display: inline-block;
  vertical-align: middle;
}

@keyframes pulseRadar {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* Today Classes Grid */
.today-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.today-class-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e9d5ff;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 4px 16px -2px rgba(147, 51, 234, 0.06);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.today-class-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -2px rgba(147, 51, 234, 0.12);
  border-color: #d8b4fe;
}

.tcc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px dashed #f3e8ff;
  padding-bottom: 10px;
}

.tcc-child-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tcc-child-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3e8ff;
  color: #7e22ce;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  overflow: hidden;
}

.tcc-child-name {
  font-size: 13px;
  font-weight: 700;
  color: #1e1b4b;
}

.tcc-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tcc-status-badge.status-ongoing {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.tcc-status-badge.status-upcoming {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
}

.tcc-status-badge.status-finished {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.tcc-main-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tcc-course-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.tcc-details-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #faf5ff;
  padding: 10px 14px;
  border-radius: 12px;
  margin-top: 4px;
}

.tcc-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #4b5563;
}

.tcc-detail-item strong {
  color: #1f2937;
  font-weight: 600;
}

.tcc-detail-item svg {
  width: 14px;
  height: 14px;
  color: #9333ea;
  flex-shrink: 0;
}

.tcc-mentor-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}

.tcc-mentor-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #ede9fe;
  color: #6b21a8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}

.tcc-mentor-name {
  font-size: 12px;
  color: #374151;
}

.tcc-mentor-name b {
  color: #111827;
  display: block;
}

.tcc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f3e8ff;
  flex-wrap: wrap;
}

/* Quiet State (No Classes Today) */
.schedule-reminder-quiet {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 50%, #f8fafc 100%);
  border-radius: 18px;
  border: 1px solid #e9d5ff;
  padding: 16px 22px;
  margin-top: 0;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.05);
  flex-wrap: wrap;
}

.srq-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.srq-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f3e8ff;
  color: #7e22ce;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.srq-icon svg {
  width: 20px;
  height: 20px;
}

.srq-content h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
  margin: 0 0 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.srq-content p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

.srq-content b {
  color: #334155;
}

@media (max-width: 768px) {
  .schedule-reminder-banner {
    padding: 18px 16px;
    border-radius: 16px;
    margin-bottom: 20px;
  }

  .today-classes-grid {
    grid-template-columns: 1fr;
  }

  .reminder-banner-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .schedule-reminder-quiet {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }
}