/* MedExHub shared CSS bundle. Page-scoped to prevent conflicts. */

/* ===== Dashboard(8).html | html.page-dashboard-8 ===== */
html.page-dashboard-8{
      --ink: #173047;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #145fe6;
      --blue-dark: #2a5a9c;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #eafff5;
      --pink: #ef4f8f;
      --purple: #6557ff;
      --rose: #c83c72;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --line-strong: #b8d9d3;
      --panel: rgba(255, 255, 255, 0.86);
      --danger: #bc3f4b;
      --danger-dark: #9a353f;
      --success: #2e7d59;
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --radius-xl: 28px;
      --bg: #f6f9ff;
      --shadow: 0 22px 60px rgba(33, 84, 170, 0.12);
      --container: 1380px;
}
html.page-dashboard-8 *{box-sizing: border-box;}
html.page-dashboard-8 body{margin: 0;
      font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 7% 10%, rgba(40, 120, 242, 0.12), transparent 30%),
        radial-gradient(circle at 88% 3%, rgba(40, 181, 122, 0.12), transparent 28%),
        radial-gradient(circle at 78% 82%, rgba(239, 79, 143, 0.08), transparent 34%),
        var(--bg);
      min-height: 100vh;}
html.page-dashboard-8 a{color: inherit;
      text-decoration: none;}
html.page-dashboard-8 .page-shell{min-height: 100vh;
      position: relative;
      overflow: hidden;}
html.page-dashboard-8 .page-shell::before,
html.page-dashboard-8 .page-shell::after{content: "";
      position: fixed;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      filter: blur(10px);
      opacity: 0.45;
      pointer-events: none;
      z-index: 0;}
html.page-dashboard-8 .page-shell::before{top: 94px;
      right: -170px;
      background: linear-gradient(135deg, rgba(40, 120, 242, 0.14), rgba(40, 181, 122, 0.1));}
html.page-dashboard-8 .page-shell::after{left: -180px;
      bottom: 80px;
      background: linear-gradient(135deg, rgba(239, 79, 143, 0.12), rgba(101, 87, 255, 0.1));}
html.page-dashboard-8 .topbar{position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(232, 237, 245, 0.85);}
html.page-dashboard-8 .topbar-inner{width: min(1700px, calc(100% - 72px));
      margin: 0 auto;
      height: 92px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;}
html.page-dashboard-8 .brand{display: flex;
      align-items: center;
      gap: 12px;
      min-width: 220px;}
html.page-dashboard-8 .brand-mark{width: 54px;
      height: 54px;
      position: relative;
      border-radius: 17px;
      background: #fff;
      box-shadow: 0 14px 32px rgba(40, 120, 242, 0.14);
      display: grid;
      place-items: center;
      overflow: hidden;}
html.page-dashboard-8 .brand-mark span{position: absolute;
      width: 13px;
      height: 40px;
      border-radius: 999px;
      transform-origin: center;}
html.page-dashboard-8 .brand-mark span:nth-child(1){background: var(--blue); transform: rotate(45deg) translate(-6px, -8px);}
html.page-dashboard-8 .brand-mark span:nth-child(2){background: var(--green); transform: rotate(-45deg) translate(7px, -7px);}
html.page-dashboard-8 .brand-mark span:nth-child(3){background: var(--pink); transform: rotate(45deg) translate(8px, 8px);}
html.page-dashboard-8 .brand-mark span:nth-child(4){background: #f7c948; transform: rotate(-45deg) translate(-7px, 8px);}
html.page-dashboard-8 .brand strong{display: block;
      font-size: 18px;
      color: #1f8b4c;
      line-height: 1.1;
      letter-spacing: -0.02em;}
html.page-dashboard-8 .brand small{display: block;
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
      margin-top: 3px;}
html.page-dashboard-8 .main-nav{display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 3vw, 48px);
      font-weight: 600;
      color: #202d44;
      flex: 1;}
html.page-dashboard-8 .main-nav a{position: relative;
      padding: 14px 2px;
      transition: color 0.2s ease;}
html.page-dashboard-8 .main-nav a::after{content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 6px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--green), var(--blue));
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.2s ease;}
html.page-dashboard-8 .main-nav a:hover,
html.page-dashboard-8 .main-nav a.active{color: var(--blue);}
html.page-dashboard-8 .main-nav a:hover::after,
html.page-dashboard-8 .main-nav a.active::after{transform: scaleX(1);}
html.page-dashboard-8 .top-actions{display: flex;
      gap: 14px;
      min-width: 280px;
      justify-content: flex-end;}
html.page-dashboard-8 .btn{border: 0;
      border-radius: 999px;
      height: 48px;
      padding: 0 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;}
html.page-dashboard-8 .btn:hover{transform: translateY(-2px);}
html.page-dashboard-8 .btn-primary{color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      box-shadow: 0 14px 28px rgba(40, 120, 242, 0.28);}
html.page-dashboard-8 .btn-ghost{color: var(--blue);
      background: var(--blue-soft);
      box-shadow: inset 0 0 0 1px rgba(40, 120, 242, 0.14);}
html.page-dashboard-8 .hero-strip{position: relative;
      z-index: 1;
      width: min(1700px, calc(100% - 72px));
      margin: 28px auto 0;
      min-height: 118px;
      border-radius: var(--radius-xl);
      background:
        linear-gradient(135deg, rgba(40, 120, 242, 0.98), rgba(33, 185, 134, 0.94)),
        radial-gradient(circle at 25% 0%, rgba(255, 255, 255, 0.28), transparent 28%);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 26px 34px;
      color: #fff;}
html.page-dashboard-8 .hero-strip::before{content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,0.14) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
      opacity: 0.45;}
html.page-dashboard-8 .hero-copy,
html.page-dashboard-8 .hero-meta{position: relative;
      z-index: 1;}
html.page-dashboard-8 .hero-copy p{margin: 0 0 8px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      font-size: 12px;
      opacity: 0.8;}
html.page-dashboard-8 .hero-copy h1{margin: 0;
      font-size: clamp(28px, 3vw, 44px);
      letter-spacing: -0.055em;
      line-height: 1.02;}
html.page-dashboard-8 .hero-copy h1 span{color: #dfffea;}
html.page-dashboard-8 .hero-meta{display: flex;
      gap: 16px;
      align-items: center;}
html.page-dashboard-8 .metric-pill{min-width: 138px;
      padding: 14px 18px;
      border-radius: 20px;
      background: rgba(255,255,255,0.16);
      border: 1px solid rgba(255,255,255,0.22);
      backdrop-filter: blur(12px);}
html.page-dashboard-8 .metric-pill strong{display: block;
      font-size: 24px;
      line-height: 1;}
html.page-dashboard-8 .metric-pill span{display: block;
      margin-top: 5px;
      font-size: 12px;
      font-weight: 700;
      opacity: 0.82;}
html.page-dashboard-8 .dashboard-layout{position: relative;
      z-index: 1;
      width: min(1700px, calc(100% - 72px));
      margin: 28px auto 56px;
      display: grid;
      grid-template-columns: 304px minmax(0, 1fr);
      gap: 32px;
      align-items: start;}
html.page-dashboard-8 .sidebar{position: sticky;
      top: 120px;
      background: var(--panel);
      border: 1px solid rgba(232, 237, 245, 0.96);
      border-radius: var(--radius-xl);
      box-shadow: 0 20px 48px rgba(15, 37, 73, 0.08);
      overflow: hidden;
      backdrop-filter: blur(16px);}
html.page-dashboard-8 .sidebar-user{padding: 22px;
      background: linear-gradient(135deg, var(--blue-soft), var(--green-soft));
      display: flex;
      align-items: center;
      gap: 14px;
      border-radius: var(--radius-xl);
      border-bottom: 1px solid rgba(232, 237, 245, 0.9);}
html.page-dashboard-8 .avatar{width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(135deg, var(--blue), var(--green));
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 14px 24px rgba(40, 120, 242, 0.2);}
html.page-dashboard-8 .sidebar-user strong{display: block;
      font-size: 15px;
      letter-spacing: -0.02em;}
html.page-dashboard-8 .sidebar-user span{display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;}
html.page-dashboard-8 .side-menu{list-style: none;
      padding: 10px;
      margin: 0;}
html.page-dashboard-8 .side-menu li + li{margin-top: 5px;}
html.page-dashboard-8 .side-link{display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 14px;
      border-radius: 17px;
      color: #344054;
      font-weight: 700;
      transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;}
html.page-dashboard-8 .side-link svg{width: 19px;
      height: 19px;
      flex: 0 0 19px;}
html.page-dashboard-8 .side-link .chev{margin-left: auto;
      opacity: 0.45;}
html.page-dashboard-8 .side-link:hover{background: #f7faff;
      color: var(--blue);
      transform: translateX(2px);}
html.page-dashboard-8 .side-link.active{color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      box-shadow: 0 14px 28px rgba(40, 120, 242, 0.22);}
html.page-dashboard-8 .support-card{margin: 12px 20px 22px;
      border-radius: 22px;
      padding: 20px;
      background: linear-gradient(135deg, rgba(40, 181, 122, 0.12), rgba(40, 120, 242, 0.12));
      border: 1px solid rgba(40, 120, 242, 0.08);}
html.page-dashboard-8 .support-card strong{display: block;
      letter-spacing: -0.02em;
      margin-bottom: 8px;}
html.page-dashboard-8 .support-card p{color: var(--muted);
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.5;}
html.page-dashboard-8 .support-card button{width: 100%;
      height: 42px;
      border: 0;
      border-radius: 999px;
      background: #fff;
      color: var(--blue);
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 22px rgba(15, 37, 73, 0.08);}



html.page-dashboard-8 .doctor-illustration{position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 152px;}
html.page-dashboard-8 .badge{position: absolute;
      right: 15px;
      bottom: 15px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 13px 9px 12px;
      border-radius: 999px;
      color: #fff;
      background: linear-gradient(135deg, var(--blue), var(--blue-2));
      font-size: 12px;
      font-weight: 900;
      box-shadow: 0 12px 26px rgba(40, 120, 242, 0.32);}
html.page-dashboard-8 .badge.green{background: linear-gradient(135deg, var(--green), #19a99d);
      box-shadow: 0 12px 26px rgba(40, 181, 122, 0.28);}
html.page-dashboard-8 .badge.pink{background: linear-gradient(135deg, var(--pink), var(--purple));
      box-shadow: 0 12px 26px rgba(239, 79, 143, 0.26);}
html.page-dashboard-8 .badge::before{content: "";
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 8px solid rgba(255,255,255,0.95);}
html.page-dashboard-8 .exam-body{padding: 22px;}
html.page-dashboard-8 .exam-body h3{margin: 0;
      min-height: 58px;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.035em;}
html.page-dashboard-8 .exam-body p{margin: 10px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.55;}
html.page-dashboard-8 .progress-wrap{margin-top: 18px;}
html.page-dashboard-8 .progress-top{display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 9px;
      color: #344054;
      font-size: 12px;
      font-weight: 800;}
html.page-dashboard-8 .progress-line{height: 9px;
      border-radius: 999px;
      background: #edf2f8;
      overflow: hidden;}
html.page-dashboard-8 .progress-line span{display: block;
      height: 100%;
      width: var(--progress, 65%);
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), var(--green));}
html.page-dashboard-8 .exam-footer{margin: 22px -22px -22px;
      padding: 16px 22px;
      border-top: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      background: linear-gradient(180deg, rgba(248,251,255,0.2), rgba(248,251,255,0.88));}
html.page-dashboard-8 .days{font-size: 14px;
      font-weight: 900;
      color: #344054;}
html.page-dashboard-8 .start-btn{border: 0;
      background: var(--blue-soft);
      color: var(--blue);
      font-weight: 900;
      border-radius: 999px;
      padding: 9px 14px;
      cursor: pointer;
      transition: background 0.18s ease;}
html.page-dashboard-8 .start-btn:hover{background: #dcecff;}
html.page-dashboard-8 .bottom-note{margin-top: 26px;
      border: 1px dashed rgba(40, 120, 242, 0.3);
      background: rgba(255, 255, 255, 0.66);
      border-radius: 22px;
      padding: 18px 20px;
      color: var(--muted);
      line-height: 1.6;
      display: flex;
      gap: 14px;
      align-items: flex-start;}
html.page-dashboard-8 .bottom-note strong{color: var(--ink);}
html.page-dashboard-8 .note-dot{flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--green), var(--blue));
      font-weight: 900;}
@media (max-width: 1440px){
html.page-dashboard-8 .exam-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 1160px){
html.page-dashboard-8 .topbar-inner,
html.page-dashboard-8 .hero-strip,
html.page-dashboard-8 .dashboard-layout{width: min(100% - 36px, 1100px);}
html.page-dashboard-8 .topbar-inner{height: auto;
        padding: 16px 0;
        flex-wrap: wrap;}
html.page-dashboard-8 .main-nav{order: 3;
        flex-basis: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;}
html.page-dashboard-8 .top-actions{min-width: 0;}
html.page-dashboard-8 .dashboard-layout{grid-template-columns: 1fr;}
html.page-dashboard-8 .sidebar{position: relative;
        top: 0;}
html.page-dashboard-8 .side-menu{display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));}
html.page-dashboard-8 .support-card{display: none;}
}
@media (max-width: 860px){
html.page-dashboard-8 .hero-strip{align-items: flex-start;
        flex-direction: column;}
html.page-dashboard-8 .hero-meta,
html.page-dashboard-8 .quick-row{width: 100%;
        grid-template-columns: 1fr;
        flex-wrap: wrap;}
html.page-dashboard-8 .metric-pill{flex: 1;}
html.page-dashboard-8 .content-head{align-items: stretch;
        flex-direction: column;}
html.page-dashboard-8 .head-actions,
html.page-dashboard-8 .search-box{width: 100%;}
html.page-dashboard-8 .exam-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
html.page-dashboard-8 .side-menu{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 620px){
html.page-dashboard-8 .topbar-inner,
html.page-dashboard-8 .hero-strip,
html.page-dashboard-8 .dashboard-layout{width: min(100% - 24px, 580px);}
html.page-dashboard-8 .brand{min-width: 0;}
html.page-dashboard-8 .brand small{display: none;}
html.page-dashboard-8 .top-actions .btn{padding: 0 18px;}
html.page-dashboard-8 .hero-strip{padding: 24px;}
html.page-dashboard-8 .hero-meta{flex-direction: column;}
html.page-dashboard-8 .metric-pill{width: 100%;}
html.page-dashboard-8 .exam-grid,
html.page-dashboard-8 .side-menu{grid-template-columns: 1fr;}
}
/* Landing-page aligned dashboard refinements */
html.page-dashboard-8 .brand{min-width: 220px;
      gap: 0;}
html.page-dashboard-8 .brand-logo{width: 174px;
      height: auto;
      display: block;
      object-fit: contain;
      filter: drop-shadow(0 10px 18px rgba(18, 65, 145, 0.08));}
html.page-dashboard-8 .hero-strip{background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,0.34), transparent 26%),
        linear-gradient(135deg, #1f77ed 0%, #21b986 100%);
      border: 1px solid rgba(255, 255, 255, 0.42);}
html.page-dashboard-8 .sidebar,
html.page-dashboard-8 .quick-card,
html.page-dashboard-8 .exam-card,
html.page-dashboard-8 .bottom-note{border-radius: 30px;}
html.page-dashboard-8 .sidebar{background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,252,255,0.90));
      border: 1px solid rgba(212, 229, 245, 0.92);
      box-shadow: 0 22px 54px rgba(22, 74, 146, 0.10);}
html.page-dashboard-8 .sidebar-user{background:
        radial-gradient(circle at 16% 8%, rgba(255,255,255,0.95), transparent 30%),
        linear-gradient(135deg, rgba(40,120,242,0.13), rgba(40,181,122,0.14));}
html.page-dashboard-8 .side-link{border: 1px solid transparent;
      background: rgba(255,255,255,0.54);}
html.page-dashboard-8 .side-link:hover{background: linear-gradient(135deg, rgba(40,120,242,0.09), rgba(40,181,122,0.08));
      border-color: rgba(40,120,242,0.12);}
html.page-dashboard-8 .side-link.active{background: linear-gradient(135deg, #3778c2, #20b986);
      border-color: rgba(255,255,255,0.28);}
html.page-dashboard-8 .support-card{background:
        radial-gradient(circle at 14% 8%, rgba(255,255,255,0.96), transparent 34%),
        linear-gradient(135deg, rgba(40,120,242,0.12), rgba(40,181,122,0.14));
      border: 1px solid rgba(40,120,242,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);}

html.page-dashboard-8 .quick-icon{border-radius: 20px;
      box-shadow: 0 16px 32px rgba(40, 120, 242, 0.20);}
html.page-dashboard-8 .exam-card{padding: 12px;
      min-height: 402px;
      background:
        radial-gradient(circle at 10% 4%, rgba(255,255,255,0.96), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,252,255,0.92));
      border: 1px solid rgba(204, 224, 246, 0.92);
      box-shadow: 0 24px 58px rgba(21, 75, 151, 0.11);}
html.page-dashboard-8 .exam-card::before{content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(40,120,242,0.12), rgba(40,181,122,0.10));
      opacity: 0.6;
      mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
      mask-size: 100% 4px, 4px 100%;
      mask-repeat: no-repeat;
      mask-position: 0 0, 0 0;
      -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
      -webkit-mask-size: 100% 4px, 4px 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-position: 0 0, 0 0;}
html.page-dashboard-8 .exam-card:nth-child(2n){background:
        radial-gradient(circle at 10% 4%, rgba(255,255,255,0.96), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(242,255,249,0.92));}
html.page-dashboard-8 .exam-card:nth-child(3n){background:
        radial-gradient(circle at 10% 4%, rgba(255,255,255,0.96), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(245,247,255,0.94));}
html.page-dashboard-8 .exam-visual{height: 162px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.74);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), 0 14px 30px rgba(22,74,146,0.08);
      background:
        radial-gradient(circle at 15% 18%, rgba(255,255,255,0.96), transparent 28%),
        linear-gradient(135deg, #e5f1ff, #f8fcff 42%, #e2fbef);}
html.page-dashboard-8 .exam-body{padding: 22px 10px 10px;}
html.page-dashboard-8 .exam-body h3{color: #15233d;}
html.page-dashboard-8 .exam-footer{margin: 20px -10px -10px;
      border-radius: 0 0 22px 22px;
      background: rgba(255,255,255,0.58);
      border-top: 1px solid rgba(216,226,238,0.88);}
html.page-dashboard-8 .start-btn{background: linear-gradient(135deg, rgba(40,120,242,0.14), rgba(40,181,122,0.12));
      border: 1px solid rgba(40,120,242,0.12);}
html.page-dashboard-8 .bottom-note{background:
        radial-gradient(circle at 5% 8%, rgba(255,255,255,0.96), transparent 24%),
        linear-gradient(135deg, rgba(40,120,242,0.08), rgba(40,181,122,0.08));
      border: 1px solid rgba(40,120,242,0.16);
      box-shadow: 0 18px 42px rgba(21, 75, 151, 0.08);}
@media (max-width: 620px){
html.page-dashboard-8 .brand-logo{width: 146px;}
}
/* === Preview 10 landing-page alignment overrides === */
html.page-dashboard-8{--ink: #173047;
      --muted: #496276;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #1d6585;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #e8f7f4;
      --pink: #c83c72;
      --purple: #3778c2;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --panel: rgba(255, 255, 255, 0.96);
      --bg: #f6faf9;
      --shadow: 0 22px 60px rgba(20, 68, 66, 0.14);
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-xl: 30px;
      --radius-lg: 20px;
      --radius-md: 16px;
      --dashboard-max: 1500px;}
html.page-dashboard-8 body{color: var(--ink);
      background:
        radial-gradient(circle at 82% 17%, rgba(55,120,194,.13), transparent 30%),
        radial-gradient(circle at 6% 86%, rgba(20,125,112,.10), transparent 28%),
        linear-gradient(135deg, #f6fbfa 0%, #ffffff 55%, #f1f7ff 100%);
      background-attachment: fixed;}
html.page-dashboard-8 .page-shell{background:
        radial-gradient(circle at 95% 18%, rgba(20,125,112,.055), transparent 24%),
        radial-gradient(circle at 2% 70%, rgba(55,120,194,.06), transparent 24%);}
html.page-dashboard-8 .page-shell::before,
html.page-dashboard-8 .page-shell::after{filter: none;
      opacity: 1;
      background: transparent;
      border: 1px solid rgba(20,125,112,.11);
      box-shadow: 0 0 0 55px rgba(20,125,112,.035), 0 0 0 110px rgba(20,125,112,.025);}
html.page-dashboard-8 .page-shell::before{right: -160px;
      top: 145px;}
html.page-dashboard-8 .page-shell::after{left: -180px;
      bottom: 35px;
      border-color: rgba(55,120,194,.10);
      box-shadow: 0 0 0 55px rgba(55,120,194,.025), 0 0 0 105px rgba(55,120,194,.018);}
html.page-dashboard-8 .topbar{background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,232,229,.85);
      box-shadow: none;}
html.page-dashboard-8 .topbar-inner,
html.page-dashboard-8 .hero-strip,
html.page-dashboard-8 .dashboard-layout{width: min(var(--dashboard-max), calc(100% - 72px));}
html.page-dashboard-8 .topbar-inner{min-height: 78px;}
html.page-dashboard-8 .brand img{width: 205px;
      max-width: 100%;
      height: auto;
      display: block;
      background: transparent;
      box-shadow: none;
      border-radius: 0;}
html.page-dashboard-8 .main-nav{color: #355269;
      font-weight: 650;}
html.page-dashboard-8 .main-nav a:hover,
html.page-dashboard-8 .main-nav a.active{color: var(--primary);}
html.page-dashboard-8 .main-nav a::after{background: linear-gradient(90deg, var(--primary), var(--blue));}
html.page-dashboard-8 .btn{border-radius: 12px;
      min-height: 44px;
      height: 46px;
      padding: 0 22px;
      font-weight: 750;
      letter-spacing: 0;}
html.page-dashboard-8 .btn-primary{color: #fff;
      background: var(--primary);
      box-shadow: 0 8px 18px rgba(20,125,112,.22);}
html.page-dashboard-8 .btn-primary:hover{background: var(--primary-dark);
      box-shadow: 0 12px 25px rgba(20,125,112,.28);}
html.page-dashboard-8 .btn-ghost{color: var(--primary-dark);
      background: #fff;
      box-shadow: inset 0 0 0 1px #b7dbd4;}
html.page-dashboard-8 .btn-ghost:hover{background: var(--primary-soft);}
html.page-dashboard-8 .hero-strip{margin-top: 34px;
      min-height: 176px;
      padding: 38px 42px;
      color: var(--ink);
      border: 1px solid rgba(220,232,229,.95);
      border-radius: 30px;
      background:
        radial-gradient(circle at 82% 17%, rgba(55,120,194,.13), transparent 30%),
        radial-gradient(circle at 6% 86%, rgba(20,125,112,.10), transparent 28%),
        linear-gradient(135deg, #f6fbfa 0%, #ffffff 55%, #f1f7ff 100%);
      box-shadow: var(--shadow-md);}
html.page-dashboard-8 .hero-strip::before{background-image: none;
      width: 300px;
      height: 300px;
      inset: auto -120px -150px auto;
      border: 1px solid rgba(20,125,112,.12);
      border-radius: 50%;
      background: transparent;
      box-shadow: 0 0 0 55px rgba(20,125,112,.035), 0 0 0 110px rgba(20,125,112,.025);
      opacity: 1;
      mask-image: none;}
html.page-dashboard-8 .hero-copy p{display: inline-flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 16px;
      padding: 8px 12px;
      border-radius: 999px;
      color: var(--primary-dark);
      background: var(--primary-soft);
      border: 1px solid #cfeae5;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .01em;
      text-transform: none;
      opacity: 1;}
html.page-dashboard-8 .hero-copy p::before{content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--primary);
      box-shadow: 0 0 0 4px rgba(20,125,112,.14);}
html.page-dashboard-8 .hero-copy h1{color: #153347;
      max-width: 760px;
      letter-spacing: -.046em;}
html.page-dashboard-8 .hero-copy h1 span{color: var(--primary);
      position: relative;
      z-index: 1;
      white-space: nowrap;}
html.page-dashboard-8 .hero-copy h1 span::after{content: "";
      position: absolute;
      left: 2px;
      right: 3px;
      bottom: 3px;
      height: 6px;
      border-radius: 99px;
      background: rgba(220,174,42,.42);
      z-index: -1;}
html.page-dashboard-8 .hero-meta{gap: 14px;}
html.page-dashboard-8 .metric-pill{min-width: 142px;
      border-radius: 16px;
      background: rgba(255,255,255,.82);
      border: 1px solid #dce8e5;
      color: var(--ink);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(10px);}
html.page-dashboard-8 .metric-pill strong{color: var(--primary-dark);}
html.page-dashboard-8 .metric-pill span{color: var(--ink-soft);
      opacity: 1;}
html.page-dashboard-8 .dashboard-layout{margin-top: 30px;
      gap: 30px;
      grid-template-columns: 304px minmax(0, 1fr);}
html.page-dashboard-8 .sidebar{background: rgba(255,255,255,.97);
      border: 1px solid #dce8e5;
      border-radius: 26px;
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(12px);}
html.page-dashboard-8 .sidebar-user{background: linear-gradient(135deg, #eff9f6, #eef6ff);
      border-bottom: 1px solid #e5eeeb;}
html.page-dashboard-8 .avatar,
html.page-dashboard-8 .quick-icon,
html.page-dashboard-8 .note-dot{background: linear-gradient(145deg, var(--primary), var(--blue));
      box-shadow: 0 10px 22px rgba(20,125,112,.18);}
html.page-dashboard-8 .sidebar-user span,
html.page-dashboard-8 .support-card p,
html.page-dashboard-8 .content-head p,
html.page-dashboard-8 .quick-card span,
html.page-dashboard-8 .exam-body p,
html.page-dashboard-8 .bottom-note{color: var(--ink-soft);}
html.page-dashboard-8 .side-link{border-radius: 14px;
      color: #425d70;}
html.page-dashboard-8 .side-link:hover{background: var(--primary-soft);
      color: var(--primary-dark);}
html.page-dashboard-8 .side-link.active{background: var(--primary);
      color: #fff;
      box-shadow: 0 12px 24px rgba(20,125,112,.22);}
html.page-dashboard-8 .support-card{border-radius: 18px;
      background:
        radial-gradient(circle at 90% 0%, rgba(55,120,194,.12), transparent 34%),
        linear-gradient(135deg, #eff9f6, #eef6ff);
      border: 1px solid #dbeae7;}
html.page-dashboard-8 .support-card button{color: var(--primary-dark);
      border: 1px solid #cfe8e3;
      box-shadow: 0 8px 18px rgba(20,125,112,.10);}

html.page-dashboard-8 .eyebrow{color: var(--primary);}
html.page-dashboard-8 .eyebrow::before{background: var(--primary);
      box-shadow: 0 0 0 6px rgba(20,125,112,.14);}
html.page-dashboard-8 .content-head h2{color: #153347;}
html.page-dashboard-8 .search-box,
html.page-dashboard-8 .quick-card,
html.page-dashboard-8 .exam-card,
html.page-dashboard-8 .bottom-note{background: #fff;
      border: 1px solid #dce8e5;
      box-shadow: 0 6px 25px rgba(28,75,73,.045);}
html.page-dashboard-8 .search-box{background: rgba(255,255,255,.94);
      box-shadow: var(--shadow-sm);}
html.page-dashboard-8 .quick-card{position: relative;
      overflow: hidden;
      border-radius: 20px;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;}
html.page-dashboard-8 .quick-card::after,
html.page-dashboard-8 .exam-card::after{content: "";
      position: absolute;
      width: 118px;
      height: 118px;
      right: -54px;
      top: -54px;
      border-radius: 50%;
      background: var(--primary-soft);
      pointer-events: none;
      z-index: 0;}
html.page-dashboard-8 .quick-card > *,
html.page-dashboard-8 .exam-card > *{position: relative;
      z-index: 1;}
html.page-dashboard-8 .quick-card:hover,
html.page-dashboard-8 .exam-card:hover{transform: translateY(-5px);
      border-color: #b9d9d3;
      box-shadow: var(--shadow-sm);}
html.page-dashboard-8 .quick-icon{color: #fff;
      border-radius: 15px;}
html.page-dashboard-8 .quick-icon.green{background: #e9f7ef;
      color: #2b805c;
      box-shadow: none;}
html.page-dashboard-8 .quick-icon.pink{background: #fff3d8;
      color: #b38012;
      box-shadow: none;}
html.page-dashboard-8 .exam-grid{gap: 20px;}
html.page-dashboard-8 .exam-card{border-radius: 20px;
      min-height: 390px;}
html.page-dashboard-8 .exam-visual{background:
        radial-gradient(circle at 78% 18%, rgba(55,120,194,.14), transparent 28%),
        radial-gradient(circle at 16% 78%, rgba(20,125,112,.12), transparent 30%),
        linear-gradient(135deg, #eff9f6 0%, #ffffff 48%, #eef6ff 100%);
      border-bottom: 1px solid #e7eeec;}
html.page-dashboard-8 .exam-visual::before{background-image:
        linear-gradient(90deg, rgba(20,125,112,.065) 1px, transparent 1px),
        linear-gradient(rgba(55,120,194,.06) 1px, transparent 1px);
      background-size: 28px 28px;
      opacity: .75;}
html.page-dashboard-8 .badge{background: var(--primary);
      box-shadow: 0 10px 22px rgba(20,125,112,.24);}
html.page-dashboard-8 .badge.green{background: var(--blue);
      box-shadow: 0 10px 22px rgba(55,120,194,.20);}
html.page-dashboard-8 .badge.pink{background: var(--pink);
      box-shadow: 0 10px 22px rgba(200,60,114,.18);}
html.page-dashboard-8 .progress-line{background: #d8e7e4;}
html.page-dashboard-8 .progress-line span{background: linear-gradient(90deg, var(--primary), #52a89b);}
html.page-dashboard-8 .exam-footer{border-top: 1px solid #e7eeec;
      background: linear-gradient(180deg, rgba(246,250,249,.25), rgba(246,250,249,.94));}
html.page-dashboard-8 .days{color: #153347;}
html.page-dashboard-8 .start-btn{background: var(--primary-soft);
      color: var(--primary-dark);
      border: 1px solid #cae8e1;}
html.page-dashboard-8 .start-btn:hover{background: #dff3ef;}
html.page-dashboard-8 .bottom-note{border-style: solid;
      border-radius: 20px;
      background: #fff;}
@media (max-width: 1160px){
html.page-dashboard-8 .topbar-inner,
html.page-dashboard-8 .hero-strip,
html.page-dashboard-8 .dashboard-layout{width: min(100% - 36px, 1100px);}

}
@media (max-width: 620px){
html.page-dashboard-8 .topbar-inner,
html.page-dashboard-8 .hero-strip,
html.page-dashboard-8 .dashboard-layout{width: min(100% - 24px, 580px);}
html.page-dashboard-8 .brand img{width: 170px;}
html.page-dashboard-8 .hero-strip{border-radius: 22px; padding: 28px 22px;}

}
/* === End Preview 10 landing-page alignment overrides === */
/* === Background removal override === */
html.page-dashboard-8 body{background: #ffffff !important;
      background-attachment: scroll !important;}
html.page-dashboard-8 .page-shell{background: #ffffff !important;}
html.page-dashboard-8 .page-shell::before,
html.page-dashboard-8 .page-shell::after{display: none !important;
      content: none !important;}
/* Final dashboard text cleanup */
html.page-dashboard-8 .hero-copy h1{font-size: clamp(20px, 2vw, 30px) !important;
      line-height: 1.16 !important;
      letter-spacing: -0.025em !important;
      max-width: 520px !important;}
html.page-dashboard-8 .hero-copy h1 span::after{display: none !important;}
html.page-dashboard-8 .content-head h2{margin-bottom: 0 !important;}
/* Final exam-card cleanup: remove tile pictures and refine compact text */
html.page-dashboard-8 .hero-copy h1{font-size: clamp(17px, 1.45vw, 23px) !important;
      line-height: 1.36 !important;
      letter-spacing: -0.012em !important;
      font-weight: 800 !important;
      max-width: 760px !important;}
html.page-dashboard-8 .exam-card{min-height: auto !important;
      overflow: hidden !important;}
html.page-dashboard-8 .exam-visual,
html.page-dashboard-8 .doctor-illustration{display: none !important;}
html.page-dashboard-8 .exam-body{padding: 24px 22px 0 !important;}
html.page-dashboard-8 .exam-body h3{min-height: 0 !important;
      margin-bottom: 10px !important;}
html.page-dashboard-8 .exam-footer{margin: 22px -22px 0 !important;}
/* Tile icons */
html.page-dashboard-8 .exam-card{display: block;}
html.page-dashboard-8 .exam-body{position: relative;}
html.page-dashboard-8 .exam-icon{width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      margin-bottom: 14px;
      border: 1px solid rgba(20,125,112,.12);
      box-shadow: 0 10px 22px rgba(16, 48, 66, 0.08);
      background: linear-gradient(135deg, #eef8f6 0%, #ffffff 100%);
      color: #147d70;}
html.page-dashboard-8 .exam-icon svg{width: 24px;
      height: 24px;
      stroke: currentColor;}
html.page-dashboard-8 .exam-icon.blue{color: #3778c2;
      border-color: rgba(55,120,194,.15);
      background: linear-gradient(135deg, #eef5ff 0%, #ffffff 100%);}
html.page-dashboard-8 .exam-icon.green{color: #14856c;
      border-color: rgba(20,133,108,.15);
      background: linear-gradient(135deg, #edf9f5 0%, #ffffff 100%);}
html.page-dashboard-8 .exam-icon.pink{color: #c74a7f;
      border-color: rgba(199,74,127,.14);
      background: linear-gradient(135deg, #fff1f6 0%, #ffffff 100%);}
html.page-dashboard-8 .exam-icon.gold{color: #c68c2f;
      border-color: rgba(198,140,47,.16);
      background: linear-gradient(135deg, #fff8ea 0%, #ffffff 100%);}
html.page-dashboard-8 .exam-icon.purple{color: #7c5cc6;
      border-color: rgba(124,92,198,.16);
      background: linear-gradient(135deg, #f4f1ff 0%, #ffffff 100%);}
html.page-dashboard-8 .exam-icon.cyan{color: #1688a0;
      border-color: rgba(22,136,160,.16);
      background: linear-gradient(135deg, #eefbff 0%, #ffffff 100%);}
/* Reference-style exam tiles */

html.page-dashboard-8 .access-label{display: block !important;
      margin-bottom: 5px !important;
      color: #8297a1 !important;
      font-size: 11px !important;
      font-weight: 650 !important;}
html.page-dashboard-8 .tile-footer strong{display: block !important;
      color: #173047 !important;
      font-size: 22px !important;
      line-height: 1 !important;
      letter-spacing: -0.035em !important;
      font-weight: 900 !important;}
html.page-dashboard-8 .tile-footer small{color: #6f828b !important;
      font-size: 12px !important;
      letter-spacing: normal !important;
      font-weight: 800 !important;}
html.page-dashboard-8 .details-link{display: inline-flex !important;
      align-items: center !important;
      gap: 9px !important;
      color: #147d70 !important;
      font-size: 15px !important;
      font-weight: 850 !important;
      white-space: nowrap !important;}
html.page-dashboard-8 .details-link span{font-size: 20px !important;
      line-height: 1 !important;
      transition: transform .2s ease !important;}
html.page-dashboard-8 .exam-card:hover .details-link span{transform: translateX(3px) !important;}
html.page-dashboard-8 .progress-wrap,
html.page-dashboard-8 .exam-footer,
html.page-dashboard-8 .days,
html.page-dashboard-8 .start-btn{display: none !important;}
html.page-dashboard-8 .tile-footer{display: flex !important;}
@media (max-width: 1100px){
html.page-dashboard-8 .exam-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
}
@media (max-width: 680px){
html.page-dashboard-8 .exam-grid{grid-template-columns: 1fr !important;}
html.page-dashboard-8 .exam-card{min-height: 310px !important;}
html.page-dashboard-8 .exam-body h3{font-size: 22px !important;}
}
/* Final cleanup: pricing removed; align Start action */
html.page-dashboard-8 .tile-footer{justify-content: flex-end !important;
      align-items: center !important;}

/* ===== Dashboard1(1).html | html.page-dashboard-1-1 ===== */
html.page-dashboard-1-1{
      --ink: #173047;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #145fe6;
      --blue-dark: #2a5a9c;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #eafff5;
      --pink: #ef4f8f;
      --purple: #6557ff;
      --rose: #c83c72;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --line-strong: #b8d9d3;
      --panel: rgba(255, 255, 255, 0.86);
      --danger: #bc3f4b;
      --danger-dark: #9a353f;
      --success: #2e7d59;
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --radius-xl: 28px;
      --bg: #f6f9ff;
      --shadow: 0 22px 60px rgba(33, 84, 170, 0.12);
      --container: 1380px;
}
html.page-dashboard-1-1 *{box-sizing: border-box;}
html.page-dashboard-1-1{scroll-behavior: smooth;}
html.page-dashboard-1-1 body{margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 84% 12%, rgba(55,120,194,.12), transparent 30%),
        radial-gradient(circle at 3% 92%, rgba(20,125,112,.10), transparent 30%),
        linear-gradient(135deg, #f6fbfa 0%, #ffffff 53%, #f1f7ff 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      min-height: 100vh;}
html.page-dashboard-1-1 button,
html.page-dashboard-1-1 input,
html.page-dashboard-1-1 select{font: inherit;}
html.page-dashboard-1-1 a{color: inherit; text-decoration: none;}
html.page-dashboard-1-1 .container{width: min(calc(100% - 40px), var(--container)); margin-inline: auto;}
html.page-dashboard-1-1 .topbar{background: #103f48; color: rgba(255,255,255,.88); font-size: 13px;}
html.page-dashboard-1-1 .topbar-inner{min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
html.page-dashboard-1-1 .topbar strong{color: #fff; font-weight: 800;}
html.page-dashboard-1-1 .topbar-links{display: flex; align-items: center; gap: 18px;}
html.page-dashboard-1-1 .topbar a:hover{color: #fff;}
html.page-dashboard-1-1 header{position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,232,229,.9);}
html.page-dashboard-1-1 .nav-shell{min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;}
html.page-dashboard-1-1 .brand{display: flex; align-items: center; flex: 0 0 auto;}
html.page-dashboard-1-1 .brand img{width: 178px; max-width: 42vw; height: auto; display: block;}
html.page-dashboard-1-1 .nav{display: flex; align-items: center; gap: 30px; margin-left: auto;}
html.page-dashboard-1-1 .nav a{color: #355269; font-size: 15px; font-weight: 650; transition: color .2s ease;}
html.page-dashboard-1-1 .nav a:hover,
html.page-dashboard-1-1 .nav a.active{color: var(--primary);}
html.page-dashboard-1-1 .header-actions{display: flex; align-items: center; gap: 10px;}
html.page-dashboard-1-1 .btn{border: 0;
      border-radius: 12px;
      min-height: 44px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 750;
      font-size: 14px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border .2s ease;}
html.page-dashboard-1-1 .btn:hover{transform: translateY(-1px);}
html.page-dashboard-1-1 .btn-primary{background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(20,125,112,.22);}
html.page-dashboard-1-1 .btn-primary:hover{background: var(--primary-dark); box-shadow: 0 12px 25px rgba(20,125,112,.28);}
html.page-dashboard-1-1 .btn-secondary{background: #fff; color: var(--ink); border: 1px solid var(--line);}
html.page-dashboard-1-1 .btn-secondary:hover{background: #f9fcfb; border-color: #b9d4ce;}
html.page-dashboard-1-1 .page-shell{width: min(calc(100% - 48px), var(--container));
      margin: 54px auto 52px;
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 30px;
      align-items: start;}
html.page-dashboard-1-1 .sidebar{position: sticky;
      top: 104px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(220,232,229,.95);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      overflow: hidden;}
html.page-dashboard-1-1 .sidebar-head{padding: 18px 20px;
      background: linear-gradient(135deg, #eff9f6, #eef6ff);
      border-bottom: 1px solid var(--line);}
html.page-dashboard-1-1 .sidebar-head strong{display: block; font-size: 14px; letter-spacing: -.01em;}
html.page-dashboard-1-1 .sidebar-head span{display: block; margin-top: 4px; color: #6d8794; font-size: 12px;}
html.page-dashboard-1-1 .side-item{min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      border-bottom: 1px solid #e7efed;
      color: #355269;
      font-weight: 700;
      position: relative;
      transition: background .18s ease, color .18s ease;}
html.page-dashboard-1-1 .side-item:last-child{border-bottom: 0;}
html.page-dashboard-1-1 .side-icon{width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--primary-soft);
      flex: none;}
html.page-dashboard-1-1 .side-icon svg{width: 15px; height: 15px;}
html.page-dashboard-1-1 .side-item .chevron{margin-left: auto; color: #8aa0aa; font-size: 18px; line-height: 1;}
html.page-dashboard-1-1 .side-item:hover{background: #f7fbfa; color: var(--primary-dark);}
html.page-dashboard-1-1 .side-item.active{color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      box-shadow: inset 4px 0 0 rgba(255,255,255,.35);}
html.page-dashboard-1-1 .side-item.active .side-icon{color: #fff; background: rgba(255,255,255,.18);}
html.page-dashboard-1-1 .side-item.active .chevron{color: #fff;}
html.page-dashboard-1-1 .content{min-width: 0;}
html.page-dashboard-1-1 .dashboard-card{position: relative;
      overflow: hidden;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(199,220,216,.86);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);}
html.page-dashboard-1-1 .dashboard-card::before{content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -115px;
      top: -145px;
      border-radius: 50%;
      background: rgba(20,125,112,.06);
      box-shadow: 0 0 0 58px rgba(55,120,194,.035);
      pointer-events: none;}
html.page-dashboard-1-1 .title-row{position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 20px;
      padding: 28px 30px 20px;
      border-bottom: 1px solid var(--line);
      background:
        radial-gradient(circle at 95% 20%, rgba(55,120,194,.10), transparent 28%),
        linear-gradient(135deg, rgba(232,247,244,.72), rgba(237,245,255,.70));}
html.page-dashboard-1-1 .title-kicker{display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-dark);
      background: rgba(255,255,255,.78);
      border: 1px solid #cfeae5;
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 12px;}
html.page-dashboard-1-1 .title-kicker::before{content: ""; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 4px rgba(20,125,112,.14);}
html.page-dashboard-1-1 h1{margin: 0;
      color: #153347;
      font-size: clamp(25px, 2.45vw, 34px);
      font-weight: 850;
      letter-spacing: -0.04em;
      line-height: 1.1;}
html.page-dashboard-1-1 .title-subtitle{margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55;}
html.page-dashboard-1-1 .db-actions{display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end;}
html.page-dashboard-1-1 .db-btn{border: 0;
      background: var(--success);
      color: #fff;
      border-radius: 12px;
      min-height: 42px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 21px rgba(46,125,89,.19);}
html.page-dashboard-1-1 .db-btn:hover{background: #236b4b;}
html.page-dashboard-1-1 .card-body{padding: 26px 30px 30px; position: relative; z-index: 1;}
html.page-dashboard-1-1 .summary-strip{display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;}
html.page-dashboard-1-1 .summary-card{border: 1px solid #e4edeb;
      border-radius: 18px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(28,75,73,.045);}
html.page-dashboard-1-1 .summary-card span{display: block; color: #7e959e; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 850;}
html.page-dashboard-1-1 .summary-card strong{display: block; margin-top: 6px; font-size: 20px; letter-spacing: -.02em;}

html.page-dashboard-1-1 select,
html.page-dashboard-1-1 input[type="search"]{height: 36px;
      border: 1px solid #d8e6e2;
      border-radius: 10px;
      background: #fff;
      color: #303846;
      font-size: 14px;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease;}
html.page-dashboard-1-1 select{padding: 0 9px;}
html.page-dashboard-1-1 input[type="search"]{width: 220px; padding: 0 11px;}
html.page-dashboard-1-1 select:focus,
html.page-dashboard-1-1 input[type="search"]:focus{border-color: #a9d5cd; box-shadow: 0 0 0 4px rgba(20,125,112,.10);}

html.page-dashboard-1-1 .type-pill{display: inline-flex;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid #dce8e5;
      color: #355269;
      background: #f8faf9;
      font-weight: 700;
      font-size: 13px;}
html.page-dashboard-1-1 .type-pill.exam{background: var(--blue-soft); border-color: #d8e8fb; color: #285f91;}
html.page-dashboard-1-1 .type-pill.revision{background: var(--primary-soft); border-color: #cfeae5; color: var(--primary-dark);}
html.page-dashboard-1-1 .start-btn{border: 0;
      background: linear-gradient(135deg, var(--primary), #1aa9b8);
      color: white;
      min-height: 36px;
      min-width: 72px;
      padding: 0 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 7px 16px rgba(20,125,112,.18);}
html.page-dashboard-1-1 .start-btn.revision{background: linear-gradient(135deg, var(--blue), var(--primary));}
html.page-dashboard-1-1 .start-btn:hover{filter: brightness(.97); transform: translateY(-1px);}

html.page-dashboard-1-1 .pagination{display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;}
html.page-dashboard-1-1 .page-link{height: 36px;
      min-width: 35px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-left: 0;
      color: var(--primary-dark);
      background: #fff;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;}
html.page-dashboard-1-1 .page-link:first-child{border-left: 1px solid var(--line); border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: #6f7f89;}
html.page-dashboard-1-1 .page-link:last-child{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
html.page-dashboard-1-1 .page-link.active{background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,112,.12); z-index: 1;}
html.page-dashboard-1-1 .page-link.ellipsis{color: #747b86;}
@media (max-width: 1080px){
html.page-dashboard-1-1 .nav{gap: 20px;}
html.page-dashboard-1-1 .page-shell{grid-template-columns: 1fr; width: min(100% - 32px, 1100px); margin-top: 32px;}
html.page-dashboard-1-1 .sidebar{position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
html.page-dashboard-1-1 .sidebar-head{display: none;}
html.page-dashboard-1-1 .side-item{border-right: 1px solid #e7efed;}
}
@media (max-width: 860px){
html.page-dashboard-1-1 .topbar{display: none;}
html.page-dashboard-1-1 .nav-shell{min-height: auto; padding-block: 14px; flex-wrap: wrap;}
html.page-dashboard-1-1 .nav{order: 3; width: 100%; margin: 0; justify-content: center; flex-wrap: wrap; gap: 18px;}
html.page-dashboard-1-1 .header-actions{margin-left: auto;}
html.page-dashboard-1-1 .summary-strip{grid-template-columns: 1fr;}
}
@media (max-width: 680px){
html.page-dashboard-1-1 .brand img{width: 150px;}
html.page-dashboard-1-1 .header-actions{width: 100%;}
html.page-dashboard-1-1 .header-actions .btn{flex: 1; min-width: 0;}
html.page-dashboard-1-1 .sidebar{grid-template-columns: 1fr;}
html.page-dashboard-1-1 .side-item{border-right: 0;}
html.page-dashboard-1-1 .title-row{align-items: stretch; flex-direction: column; padding: 22px;}
html.page-dashboard-1-1 .db-actions{justify-content: flex-start;}
html.page-dashboard-1-1 .card-body{padding: 20px;}
html.page-dashboard-1-1 input[type="search"]{width: 100%;}
}
@media (prefers-reduced-motion: reduce){
html.page-dashboard-1-1 *,
html.page-dashboard-1-1 *::before,
html.page-dashboard-1-1 *::after{scroll-behavior: auto !important; transition: none !important; animation: none !important;}
}
/* Dashboard sidebar imported for My Exam Log */
html.page-dashboard-1-1{--muted: var(--ink-soft);
      --blue-2: #145fe6;
      --panel: rgba(255, 255, 255, 0.86);}
html.page-dashboard-1-1 .page-shell{grid-template-columns: 304px minmax(0, 1fr);}
html.page-dashboard-1-1 .sidebar{position: sticky;
      top: 104px;
      background: rgba(255,255,255,.97);
      border: 1px solid #dce8e5;
      border-radius: 26px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      backdrop-filter: blur(12px);}
html.page-dashboard-1-1 .sidebar-user{padding: 22px;
      background: linear-gradient(135deg, #eff9f6, #eef6ff);
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid #e5eeeb;}
html.page-dashboard-1-1 .avatar{width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(145deg, var(--primary), var(--blue));
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(20,125,112,.18);
      flex: 0 0 46px;}
html.page-dashboard-1-1 .sidebar-user strong{display: block;
      font-size: 15px;
      letter-spacing: -0.02em;}
html.page-dashboard-1-1 .sidebar-user span{display: block;
      margin-top: 4px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 700;}
html.page-dashboard-1-1 .side-menu{list-style: none;
      padding: 10px;
      margin: 0;}
html.page-dashboard-1-1 .side-menu li + li{margin-top: 5px;}
html.page-dashboard-1-1 .side-link{display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 14px;
      border-radius: 14px;
      color: #425d70;
      font-weight: 700;
      transition: background .18s ease, color .18s ease, transform .18s ease;}
html.page-dashboard-1-1 .side-link svg{width: 19px;
      height: 19px;
      flex: 0 0 19px;}
html.page-dashboard-1-1 .side-link .chev{margin-left: auto;
      opacity: .45;}
html.page-dashboard-1-1 .side-link:hover{background: var(--primary-soft);
      color: var(--primary-dark);
      transform: translateX(2px);}
html.page-dashboard-1-1 .side-link.active{color: #fff;
      background: var(--primary);
      box-shadow: 0 12px 24px rgba(20,125,112,.22);}
html.page-dashboard-1-1 .support-card{margin: 12px 20px 22px;
      border-radius: 18px;
      padding: 20px;
      background:
        radial-gradient(circle at 90% 0%, rgba(55,120,194,.12), transparent 34%),
        linear-gradient(135deg, #eff9f6, #eef6ff);
      border: 1px solid #dbeae7;}
html.page-dashboard-1-1 .support-card strong{display: block;
      letter-spacing: -0.02em;
      margin-bottom: 8px;}
html.page-dashboard-1-1 .support-card p{color: var(--ink-soft);
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.5;}
html.page-dashboard-1-1 .support-card button{width: 100%;
      height: 42px;
      border-radius: 999px;
      background: #fff;
      color: var(--primary-dark);
      font-weight: 800;
      cursor: pointer;
      border: 1px solid #cfe8e3;
      box-shadow: 0 8px 18px rgba(20,125,112,.10);}
@media (max-width: 1080px){
html.page-dashboard-1-1 .page-shell{grid-template-columns: 1fr;}
html.page-dashboard-1-1 .sidebar{position: relative;
        top: 0;
        display: block;}
html.page-dashboard-1-1 .side-menu{display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));}
html.page-dashboard-1-1 .side-menu li + li{margin-top: 0;}
html.page-dashboard-1-1 .support-card{display: none;}
}
@media (max-width: 860px){
html.page-dashboard-1-1 .side-menu{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 680px){
html.page-dashboard-1-1 .side-menu{grid-template-columns: 1fr;}
}
/* My Exam setup tile replacing the Exam Dashboard table; curriculum panel placed on the left */






@media (max-width: 1180px){


}
@media (max-width: 760px){

html.page-dashboard-1-1 .option-row,
html.page-dashboard-1-1 .setup-panel.compact .option-row{grid-template-columns: 1fr;}
}
@media (max-width: 680px){
html.page-dashboard-1-1 .setup-panel,
html.page-dashboard-1-1 .curriculum-panel{border-radius: 18px;}
html.page-dashboard-1-1 .setup-panel{min-height: 0;
        padding: 18px;}
html.page-dashboard-1-1 .tree-row.child{padding-left: 24px;}
}
/* Alternative CSS for the right-side exam option tiles */


@media (max-width: 1180px){
html.page-dashboard-1-1 .exam-builder-grid{grid-template-columns: 1fr;}

}
@media (max-width: 760px){

html.page-dashboard-1-1 .option-row,
html.page-dashboard-1-1 .setup-panel.compact .option-row{display: grid;
        grid-template-columns: 1fr;}
html.page-dashboard-1-1 .option-label{flex-basis: auto;}
}
/* Matching modern card style for Select Curriculum */




@media (max-width: 760px){
html.page-dashboard-1-1 .curriculum-note,


html.page-dashboard-1-1 .tree-row.child{margin-left: 12px;}
}
/* ACEM Primary Exam open / close control */



/* ===== index(10).html | html.page-index-10 ===== */
html.page-index-10{
       --ink: #173047;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #145fe6;
      --blue-dark: #2a5a9c;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #eafff5;
      --pink: #ef4f8f;
      --purple: #6557ff;
      --rose: #c83c72;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --line-strong: #b8d9d3;
      --panel: rgba(255, 255, 255, 0.86);
      --danger: #bc3f4b;
      --danger-dark: #9a353f;
      --success: #2e7d59;
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --radius-xl: 28px;
      --bg: #f6f9ff;
      --shadow: 0 22px 60px rgba(33, 84, 170, 0.12);
      --container: 1380px;
}
html.page-index-10 *{box-sizing: border-box;}
html.page-index-10{scroll-behavior: smooth;}
html.page-index-10 body{margin: 0;
      color: var(--ink);
      

background:
        radial-gradient(circle at 84% 12%, rgba(55,120,194,.12), transparent 30%),
        radial-gradient(circle at 3% 92%, rgba(20,125,112,.10), transparent 30%),
        linear-gradient(135deg, #f6fbfa 0%, #ffffff 53%, #f1f7ff 100%);

      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      min-height: 100vh;}
html.page-index-10 button,
html.page-index-10 input,
html.page-index-10 select{font: inherit;}
html.page-index-10 button,
html.page-index-10 input{font: inherit;}
html.page-index-10 a{color: inherit; text-decoration: none;}
html.page-index-10 img{max-width: 100%; display: block;}
html.page-index-10 .container{width: min(calc(100% - 40px), var(--container));
        margin-inline: auto;}


html.page-index-10 .btn{border: 0;
        border-radius: 12px;
        min-height: 44px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-weight: 750;
        font-size: 14px;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease, background .2s ease;}
html.page-index-10 .btn:hover{transform: translateY(-1px);}
html.page-index-10 .btn-primary{background: var(--primary);
        color: #fff;
        box-shadow: 0 8px 18px rgba(20,125,112,.22);}
html.page-index-10 .btn-primary:hover{background: var(--primary-dark); box-shadow: 0 12px 25px rgba(20,125,112,.28);}
html.page-index-10 .btn-secondary{background: white; color: var(--ink); border: 1px solid var(--line);}
html.page-index-10 .btn-secondary:hover{border-color: #b9d4ce; background: #f9fcfb;}
html.page-index-10 .btn-light{background: white; color: var(--primary-dark);}
html.page-index-10 .btn-ghost{background: transparent; color: var(--primary); border: 1px solid #b7dbd4;}
html.page-index-10 .btn-sm{min-height: 38px; padding: 0 14px;}


html.page-index-10 .hero{position: relative;
        overflow: hidden;
        padding: 76px 0 72px;
        background:
            radial-gradient(circle at 82% 17%, rgba(55,120,194,.13), transparent 30%),
            radial-gradient(circle at 6% 86%, rgba(20,125,112,.10), transparent 28%),
            linear-gradient(135deg, #f6fbfa 0%, #ffffff 55%, #f1f7ff 100%);}
html.page-index-10 .hero::before{content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid rgba(20,125,112,.12);
        border-radius: 50%;
        right: -120px;
        bottom: -150px;
        box-shadow: 0 0 0 55px rgba(20,125,112,.035), 0 0 0 110px rgba(20,125,112,.025);}
html.page-index-10 .hero-grid{position: relative;
        display: grid;
        grid-template-columns: 1.04fr .96fr;
        align-items: center;
        gap: 64px;}
html.page-index-10 .eyebrow{display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--primary-dark);
        background: var(--primary-soft);
        border: 1px solid #cfeae5;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .01em;}
html.page-index-10 .eyebrow-dot{width: 8px;
        height: 8px;
        background: var(--primary);
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(20,125,112,.14);}
html.page-index-10 h1{margin: 22px 0 18px;
        max-width: 690px;
        font-size: clamp(44px, 5vw, 68px);
        line-height: 1.04;
        letter-spacing: -.046em;
        color: #153347;}
html.page-index-10 .accent-word{color: var(--primary); position: relative; white-space: nowrap;}
html.page-index-10 .accent-word::after{content: "";
        position: absolute;
        height: 6px;
        left: 2px;
        right: 3px;
        bottom: 3px;
        border-radius: 99px;
        background: rgba(220,174,42,.42);
        z-index: -1;}
html.page-index-10 .hero-copy{margin: 0;
        max-width: 620px;
        color: var(--ink-soft);
        font-size: 18px;
        line-height: 1.72;}
html.page-index-10 .hero-actions{display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px;}
html.page-index-10 .hero-actions .btn{min-height: 51px; padding-inline: 22px; font-size: 15px;}
html.page-index-10 .hero-points{display: flex;
        flex-wrap: wrap;
        gap: 18px 26px;
        margin-top: 30px;
        color: #425d70;
        font-size: 14px;
        font-weight: 650;}
html.page-index-10 .hero-point{display: flex; align-items: center; gap: 8px;}
html.page-index-10 .hero-point svg{width: 18px; color: var(--primary);}
html.page-index-10 .dashboard-wrap{position: relative; min-height: 550px;}
html.page-index-10 .dashboard-card{position: absolute;
        inset: 20px 6px auto 36px;
        background: rgba(255,255,255,.97);
        border: 1px solid rgba(199,220,216,.84);
        border-radius: 26px;
        box-shadow: var(--shadow-md);
        overflow: hidden;}
html.page-index-10 .dash-top{min-height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        border-bottom: 1px solid #e8efed;}
html.page-index-10 .dash-top-left{display: flex; align-items: center; gap: 12px;}
html.page-index-10 .mini-mark{width: 34px;
        height: 34px;
        border-radius: 11px;
        background: linear-gradient(145deg, var(--primary), var(--blue));
        color: white;
        display: grid;
        place-items: center;
        font-weight: 850;}
html.page-index-10 .dash-title{font-size: 14px; font-weight: 800;}
html.page-index-10 .dash-sub{font-size: 11px; color: #75909d; margin-top: 2px;}
html.page-index-10 .avatar{width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #e3eef6;
        display: grid;
        place-items: center;
        color: #45677b;
        font-size: 12px;
        font-weight: 800;}
html.page-index-10 .dash-body{display: grid; grid-template-columns: 104px 1fr; min-height: 380px;}
html.page-index-10 .side-nav{background: #f5f9f8; border-right: 1px solid #e5eeeb; padding: 17px 12px;}
html.page-index-10 .side-dot{height: 38px;
        border-radius: 10px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 10px;
        color: #708b94;
        font-size: 10px;
        font-weight: 750;}
html.page-index-10 .side-dot.active{background: #dff3ef; color: var(--primary-dark);}
html.page-index-10 .side-dot svg{width: 14px;}
html.page-index-10 .dash-content{padding: 22px; background: #fff;}
html.page-index-10 .dash-heading{display: flex; justify-content: space-between; align-items: flex-start; gap: 14px;}
html.page-index-10 .dash-heading h3{margin: 0; font-size: 20px; letter-spacing: -.02em;}
html.page-index-10 .dash-heading p{margin: 5px 0 0; color: #6d8794; font-size: 12px;}
html.page-index-10 .status-pill{background: #e8f7f0; color: #287555; padding: 7px 10px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap;}
html.page-index-10 .progress-card{margin-top: 20px;
        background: linear-gradient(135deg, #eff9f6, #eef6ff);
        border: 1px solid #dbeae7;
        border-radius: 16px;
        padding: 16px;}
html.page-index-10 .progress-row{display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 750;}
html.page-index-10 .progress-row strong{font-size: 15px; color: var(--primary-dark);}
html.page-index-10 .progress-track{height: 8px; background: #d8e7e4; border-radius: 999px; margin-top: 11px; overflow: hidden;}
html.page-index-10 .progress-fill{width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), #52a89b);}
html.page-index-10 .metric-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px;}
html.page-index-10 .metric{border: 1px solid #e4edeb; border-radius: 13px; padding: 12px;}
html.page-index-10 .metric-label{font-size: 9px; color: #7e959e; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;}
html.page-index-10 .metric-value{font-size: 18px; font-weight: 850; margin-top: 5px;}
html.page-index-10 .subject-list{margin-top: 17px; display: grid; gap: 9px;}
html.page-index-10 .subject-row{display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid #e8efed; border-radius: 12px;}
html.page-index-10 .subject-icon{width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: #edf7f4; color: var(--primary);}
html.page-index-10 .subject-icon svg{width: 15px;}
html.page-index-10 .subject-name{font-size: 11px; font-weight: 750;}
html.page-index-10 .subject-info{color: #7d939e; font-size: 9px; margin-top: 2px;}
html.page-index-10 .subject-score{font-size: 11px; font-weight: 800; color: var(--success);}
html.page-index-10 .floating-stat{position: absolute;
        z-index: 5;
        background: white;
        border: 1px solid #d9e8e5;
        box-shadow: var(--shadow-sm);
        border-radius: 16px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;}
html.page-index-10 .floating-stat.one{left: -10px; bottom: 34px;}
html.page-index-10 .floating-stat.two{right: -17px; top: 0;}
html.page-index-10 .float-icon{width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;}
html.page-index-10 .float-icon.green{background: #e9f7ef; color: #2b805c;}
html.page-index-10 .float-icon.blue{background: #eaf3ff; color: #3778c2;}
html.page-index-10 .float-icon svg{width: 20px;}
html.page-index-10 .float-label{color: #77909a; font-size: 10px;}
html.page-index-10 .float-value{margin-top: 2px; font-size: 14px; font-weight: 850;}
html.page-index-10 .proof-strip{border-top: 1px solid #e7efed; border-bottom: 1px solid #e7efed; background: #fff;}
html.page-index-10 .proof-grid{display: grid; grid-template-columns: repeat(4, 1fr);}
html.page-index-10 .proof-item{padding: 24px 28px; display: flex; align-items: center; gap: 14px; border-right: 1px solid #e7efed;}
html.page-index-10 .proof-item:last-child{border-right: 0;}
html.page-index-10 .proof-icon{width: 41px; height: 41px; flex: 0 0 auto; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary);}
html.page-index-10 .proof-icon svg{width: 20px;}
html.page-index-10 .proof-value{font-size: 19px; font-weight: 850; letter-spacing: -.02em;}
html.page-index-10 .proof-label{margin-top: 3px; font-size: 12px; color: #748c98;}
html.page-index-10 section{padding: 90px 0;}
html.page-index-10 .section-soft{background: var(--surface-soft);}
html.page-index-10 .section-head{display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 36px;}
html.page-index-10 .section-kicker{color: var(--primary); font-size: 13px; text-transform: uppercase; letter-spacing: .11em; font-weight: 850;}
html.page-index-10 .section-title{margin: 10px 0 0; font-size: clamp(32px, 4vw, 47px); letter-spacing: -.04em; line-height: 1.12;}
html.page-index-10 .section-copy{max-width: 580px; color: var(--ink-soft); line-height: 1.7; margin: 14px 0 0; font-size: 16px;}
html.page-index-10 .filter-bar{display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px;}
html.page-index-10 .filter-btn{border: 1px solid #d8e6e2;
        background: white;
        color: #567080;
        border-radius: 999px;
        padding: 9px 15px;
        font-size: 13px;
        font-weight: 750;
        cursor: pointer;
        transition: all .18s ease;}
html.page-index-10 .filter-btn:hover{border-color: #a9d5cd; color: var(--primary);}
html.page-index-10 .filter-btn.active{background: var(--primary); border-color: var(--primary); color: white;}
html.page-index-10 .exam-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
html.page-index-10 .exam-card{position: relative;
        background: white;
        border: 1px solid #dce8e5;
        border-radius: var(--radius-md);
        padding: 24px;
        box-shadow: 0 6px 25px rgba(28,75,73,.045);
        transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
        overflow: hidden;}
html.page-index-10 .exam-card::after{content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        right: -54px;
        top: -54px;
        border-radius: 50%;
        background: var(--card-soft, #edf7f4);}
html.page-index-10 .exam-card:hover{transform: translateY(-5px); box-shadow: var(--shadow-sm); border-color: #b9d9d3;}
html.page-index-10 .exam-card.hidden{display: none;}
html.page-index-10 .card-top{display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; position: relative; z-index: 2;}
html.page-index-10 .exam-icon{width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--card-soft, #edf7f4); color: var(--card-color, var(--primary));}
html.page-index-10 .exam-icon svg{width: 25px;}
html.page-index-10 .tag{border: 1px solid #dce7e4; border-radius: 999px; padding: 6px 9px; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; background: rgba(255,255,255,.8);}
html.page-index-10 .exam-card h3{margin: 20px 0 9px; font-size: 21px; letter-spacing: -.025em;}
html.page-index-10 .exam-card p{color: #617986; font-size: 14px; line-height: 1.65; min-height: 68px; margin: 0;}
html.page-index-10 .exam-meta{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;}
html.page-index-10 .meta-pill{padding: 7px 9px; border-radius: 9px; background: #f4f8f7; color: #58717d; font-size: 11px; font-weight: 750;}
html.page-index-10 .card-bottom{display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px;padding-bottom: 20px; margin-top: 20px; border-top: 1px solid #e7eeec;}
html.page-index-10 .price-label{color: #78909a; font-size: 10px;}
html.page-index-10 .price{font-size: 19px; font-weight: 850; margin-top: 2px;}
html.page-index-10 .price span{font-size: 11px; color: #7e949c; font-weight: 650;}
html.page-index-10 .arrow-link{display: inline-flex; align-items: center; gap: 7px; color: var(--primary); font-size: 13px; font-weight: 800;}
html.page-index-10 .arrow-link svg{width: 16px; transition: transform .2s ease;}
html.page-index-10 .exam-card:hover .arrow-link svg{transform: translateX(3px);}
html.page-index-10 .feature-layout{display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: center;}
html.page-index-10 .feature-visual{position: relative;
        min-height: 530px;
        border-radius: 30px;
        background:
            linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
            linear-gradient(145deg, #0f756c, #285f91);
        overflow: hidden;
        box-shadow: var(--shadow-md);}
html.page-index-10 .feature-visual::before{content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255,255,255,.08);
        right: -130px;
        top: -120px;
        box-shadow: 0 0 0 80px rgba(255,255,255,.035);}
html.page-index-10 .visual-card{position: absolute;
        background: rgba(255,255,255,.97);
        border: 1px solid rgba(255,255,255,.55);
        border-radius: 20px;
        box-shadow: 0 22px 45px rgba(4,38,54,.17);}
html.page-index-10 .visual-card.main{width: 79%; left: 10.5%; top: 68px; padding: 23px;}
html.page-index-10 .visual-label{font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); font-weight: 850;}
html.page-index-10 .visual-card h3{margin: 9px 0 10px; font-size: 21px;}
html.page-index-10 .mini-question{color: #566f7d; font-size: 13px; line-height: 1.55;}
html.page-index-10 .mini-option{margin-top: 10px; padding: 10px 12px; border: 1px solid #e1eae8; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-size: 11px;}
html.page-index-10 .mini-option.selected{border-color: #80c0b3; background: #eef8f5; color: var(--primary-dark); font-weight: 750;}
html.page-index-10 .mini-radio{width: 15px; height: 15px; border-radius: 50%; border: 1px solid #b8cfca; position: relative; flex: 0 0 auto;}
html.page-index-10 .mini-option.selected .mini-radio::after{content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary);}
html.page-index-10 .visual-card.score{right: 18px; bottom: 48px; width: 178px; padding: 16px;}
html.page-index-10 .score-circle{width: 55px; height: 55px; border-radius: 50%; background: conic-gradient(var(--primary) 0 82%, #e1ece9 82%); display: grid; place-items: center; margin-bottom: 11px;}
html.page-index-10 .score-circle::after{content: "82%"; width: 43px; height: 43px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 850;}
html.page-index-10 .visual-card.note{left: 18px; bottom: 48px; width: 190px; padding: 15px;}
html.page-index-10 .note-row{display: flex; gap: 10px; align-items: center;}
html.page-index-10 .note-icon{width: 35px; height: 35px; border-radius: 11px; background: #fff3d8; color: #b38012; display: grid; place-items: center;}
html.page-index-10 .note-icon svg{width: 18px;}
html.page-index-10 .note-title{font-size: 12px; font-weight: 850;}
html.page-index-10 .note-text{font-size: 9px; color: #768d96; margin-top: 3px;}
html.page-index-10 .features-list{display: grid; gap: 14px; margin-top: 30px;}
html.page-index-10 .feature-item{display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 17px; border: 1px solid #e0ebe8; border-radius: 16px; background: white; transition: border .2s ease, transform .2s ease;}
html.page-index-10 .feature-item:hover{border-color: #badbd5; transform: translateX(3px);}
html.page-index-10 .feature-item-icon{width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary);}
html.page-index-10 .feature-item-icon svg{width: 22px;}
html.page-index-10 .feature-item h3{margin: 1px 0 6px; font-size: 16px;}
html.page-index-10 .feature-item p{margin: 0; color: #637b87; font-size: 13px; line-height: 1.55;}
html.page-index-10 .question-section{background: #0f3f48; color: white; position: relative; overflow: hidden;}
html.page-index-10 .question-section::before,
html.page-index-10 .question-section::after{content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.08);}
html.page-index-10 .question-section::before{width: 420px; height: 420px; right: -150px; top: -200px; box-shadow: 0 0 0 70px rgba(255,255,255,.025);}
html.page-index-10 .question-section::after{width: 240px; height: 240px; left: -100px; bottom: -100px;}
html.page-index-10 .question-layout{position: relative; display: grid; grid-template-columns: .82fr 1.18fr; gap: 68px; align-items: center;}
html.page-index-10 .question-section .section-kicker{color: #7fd8c8;}
html.page-index-10 .question-section .section-title{color: white;}
html.page-index-10 .question-section .section-copy{color: rgba(255,255,255,.70);}
html.page-index-10 .question-benefits{display: grid; gap: 12px; margin-top: 27px;}
html.page-index-10 .question-benefit{display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.82); font-size: 14px;}
html.page-index-10 .question-benefit svg{width: 18px; color: #79d1c1;}
html.page-index-10 .question-card{background: white; color: var(--ink); border-radius: 25px; box-shadow: 0 30px 70px rgba(0,0,0,.22); padding: 28px;}
html.page-index-10 .question-card-head{display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-bottom: 19px; border-bottom: 1px solid #e6eeec;}
html.page-index-10 .q-counter{display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #68818c; font-weight: 750;}
html.page-index-10 .q-number{width: 30px; height: 30px; border-radius: 10px; background: var(--primary); color: white; display: grid; place-items: center; font-size: 12px;}
html.page-index-10 .timer{display: flex; align-items: center; gap: 7px; color: #6a828d; font-size: 12px;}
html.page-index-10 .timer svg{width: 17px;}
html.page-index-10 .question-text{margin: 24px 0 20px; font-size: 18px; line-height: 1.55; font-weight: 750; letter-spacing: -.012em;}
html.page-index-10 .answers{display: grid; gap: 10px;}
html.page-index-10 .answer{width: 100%;
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 11px;
        align-items: center;
        text-align: left;
        border: 1px solid #dfe9e7;
        background: white;
        border-radius: 13px;
        padding: 11px 13px;
        color: #45606f;
        cursor: pointer;
        transition: border .18s ease, background .18s ease, transform .18s ease;}
html.page-index-10 .answer:hover{border-color: #a8d2ca; transform: translateX(2px);}
html.page-index-10 .answer-letter{width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #f0f6f5; font-size: 12px; font-weight: 850;}
html.page-index-10 .answer.correct{border-color: #76b99a; background: #edf8f2; color: #276b4d;}
html.page-index-10 .answer.correct .answer-letter{background: #d7efdf; color: #267351;}
html.page-index-10 .answer.wrong{border-color: #d8949a; background: #fff2f3; color: #9b3f49;}
html.page-index-10 .answer.wrong .answer-letter{background: #f8dfe2; color: #a13b47;}
html.page-index-10 .feedback{display: none; margin-top: 16px; border-radius: 13px; padding: 14px 16px; background: #eff8f5; border-left: 4px solid var(--primary); color: #45636d; font-size: 13px; line-height: 1.6;}
html.page-index-10 .feedback.show{display: block; animation: reveal .24s ease;}
@keyframes reveal{
from{opacity: 0; transform: translateY(5px);}
to{opacity: 1; transform: none;}
}
html.page-index-10 .feedback strong{color: var(--primary-dark);}
html.page-index-10 .question-actions{margin-top: 18px; display: flex; justify-content: space-between; gap: 12px; align-items: center;}
html.page-index-10 .explain-note{color: #82969e; font-size: 11px;}
html.page-index-10 .steps-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px; counter-reset: steps;}
html.page-index-10 .step-card{position: relative; border: 1px solid #dfeae7; background: white; border-radius: 20px; padding: 27px; counter-increment: steps;}
html.page-index-10 .step-card::before{content: "0" counter(steps); font-size: 12px; font-weight: 850; letter-spacing: .09em; color: var(--primary);}
html.page-index-10 .step-card h3{margin: 28px 0 10px; font-size: 20px;}
html.page-index-10 .step-card p{margin: 0; color: #647c88; line-height: 1.65; font-size: 14px;}
html.page-index-10 .step-line{position: absolute; height: 1px; background: #b8d9d3; width: 23px; top: 35px; right: -23px;}
html.page-index-10 .step-card:last-child .step-line{display: none;}
html.page-index-10 .cta-wrap{position: relative;
        overflow: hidden;
        background: linear-gradient(120deg, #147d70, #1d6585);
        border-radius: 30px;
        padding: 55px 58px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        box-shadow: 0 24px 60px rgba(20,94,104,.18);}
html.page-index-10 .cta-wrap::before{content:""; position:absolute; width:300px; height:300px; border-radius:50%; background:rgba(255,255,255,.06); right:-90px; top:-170px; box-shadow:0 0 0 65px rgba(255,255,255,.035);}
html.page-index-10 .cta-content{position: relative;}
html.page-index-10 .cta-wrap h2{margin: 0; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.04em;}
html.page-index-10 .cta-wrap p{margin: 13px 0 0; color: rgba(255,255,255,.78); max-width: 660px; line-height: 1.65;}
html.page-index-10 .cta-actions{position: relative; display: flex; gap: 10px; flex: 0 0 auto;}

@media (max-width: 1080px){
html.page-index-10 .hero-grid{gap: 36px;}
html.page-index-10 .dashboard-card{left: 10px;}
html.page-index-10 .proof-item{padding-inline: 18px;}
html.page-index-10 .exam-grid{grid-template-columns: repeat(2, 1fr);}
html.page-index-10 .feature-layout,
html.page-index-10 .question-layout{gap: 42px;}
}
@media (max-width: 880px){

html.page-index-10 .hero{padding-top: 52px;}
html.page-index-10 .hero-grid{grid-template-columns: 1fr;}
html.page-index-10 .hero-copy,
html.page-index-10 h1{max-width: 780px;}
html.page-index-10 .dashboard-wrap{width: min(100%, 610px); margin: 5px auto 0;}
html.page-index-10 .proof-grid{grid-template-columns: repeat(2, 1fr);}
html.page-index-10 .proof-item:nth-child(2){border-right: 0;}
html.page-index-10 .proof-item:nth-child(-n/**/+2){border-bottom: 1px solid #e7efed;}
html.page-index-10 .feature-layout,
html.page-index-10 .question-layout{grid-template-columns: 1fr;}
html.page-index-10 .feature-visual{order: 2; max-width: 620px; width: 100%; margin-inline: auto;}
html.page-index-10 .question-card{max-width: 660px; width: 100%; margin-inline: auto;}
html.page-index-10 .steps-grid{grid-template-columns: 1fr;}
html.page-index-10 .step-line{width: 1px; height: 21px; top: auto; bottom: -21px; left: 38px;}
html.page-index-10 .cta-wrap{align-items: flex-start; flex-direction: column;}

}
@media (max-width: 620px){
html.page-index-10 .container{width: min(calc(100% - 28px), var(--container));}
html.page-index-10 .hero{padding: 44px 0 52px;}
html.page-index-10 h1{font-size: 41px;}
html.page-index-10 .hero-copy{font-size: 16px;}
html.page-index-10 .hero-actions{flex-direction: column;}
html.page-index-10 .hero-actions .btn{width: 100%;}
html.page-index-10 .dashboard-wrap{min-height: 455px;}
html.page-index-10 .dashboard-card{inset: 15px 0 auto;}
html.page-index-10 .dash-body{grid-template-columns: 76px 1fr; min-height: 335px;}
html.page-index-10 .side-nav{padding: 12px 8px;}
html.page-index-10 .side-dot{font-size: 0; justify-content: center; padding: 0;}
html.page-index-10 .side-dot svg{width: 17px;}
html.page-index-10 .dash-content{padding: 15px;}
html.page-index-10 .metric-grid{grid-template-columns: 1fr;}
html.page-index-10 .metric:nth-child(n/**/+2){display: none;}
html.page-index-10 .floating-stat.two{right: 2px;}
html.page-index-10 .floating-stat.one{left: -3px; bottom: 0;}
html.page-index-10 .proof-grid{grid-template-columns: 1fr;}
html.page-index-10 .proof-item{border-right: 0; border-bottom: 1px solid #e7efed;}
html.page-index-10 .proof-item:last-child{border-bottom: 0;}
html.page-index-10 section{padding: 68px 0;}
html.page-index-10 .section-head{display: block;}
html.page-index-10 .exam-grid{grid-template-columns: 1fr;}
html.page-index-10 .feature-visual{min-height: 470px;}
html.page-index-10 .visual-card.main{width: 88%; left: 6%; top: 42px;}
html.page-index-10 .visual-card.note{left: 9px; bottom: 24px;}
html.page-index-10 .visual-card.score{right: 9px; bottom: 24px;}
html.page-index-10 .question-card{padding: 20px;}
html.page-index-10 .question-text{font-size: 16px;}
html.page-index-10 .answer{grid-template-columns: 30px 1fr; padding: 10px;}
html.page-index-10 .answer-letter{width: 29px; height: 29px;}
html.page-index-10 .question-actions{align-items: stretch; flex-direction: column-reverse;}
html.page-index-10 .cta-wrap{padding: 38px 26px; border-radius: 22px;}
html.page-index-10 .cta-actions{width: 100%; flex-direction: column;}
html.page-index-10 .cta-actions .btn{width: 100%;}

html.page-index-10 .footer-bottom{align-items: flex-start; flex-direction: column;}
}
@media (prefers-reduced-motion: reduce){
html.page-index-10 *,
html.page-index-10 *::before,
html.page-index-10 *::after{scroll-behavior: auto !important; transition: none !important; animation: none !important;}
}
/* MCQ examination-mode preview, adapted to the first file theme */
html.page-index-10 .exam-mode-showcase{grid-template-columns: .78fr 1.22fr;
        gap: 50px;}
html.page-index-10 .exam-mode-copy{min-width: 0;}
html.page-index-10 .exam-mode-note{margin-top: 24px;
        padding: 16px 18px;
        border: 1px solid rgba(127,216,200,.28);
        border-radius: 16px;
        background: rgba(255,255,255,.075);
        color: rgba(255,255,255,.78);
        font-size: 13px;
        line-height: 1.6;}
html.page-index-10 .exam-mode-note strong{color: #fff;}
html.page-index-10 .exam-demo-shell{overflow: hidden;
        border: 1px solid rgba(255,255,255,.26);
        border-radius: 27px;
        background:
            radial-gradient(circle at 8% 0%, rgba(20,125,112,.16), transparent 28%),
            radial-gradient(circle at 100% 13%, rgba(55,120,194,.12), transparent 26%),
            linear-gradient(180deg, #f8fbff 0%, #f4f9f8 62%, #ffffff 100%);
        box-shadow: 0 30px 72px rgba(0,0,0,.26);
        color: var(--ink);}

html.page-index-10 .exam-demo-brand{display: flex; align-items: center; gap: 12px;}
html.page-index-10 .exam-demo-mark{width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 14px;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--blue));
        box-shadow: 0 10px 22px rgba(20,125,112,.22);
        font-weight: 900;}
html.page-index-10 .exam-demo-title{font-size: 15px; font-weight: 850;}
html.page-index-10 .exam-demo-subtitle{margin-top: 3px; color: #718a95; font-size: 11px; font-weight: 650;}
html.page-index-10 .exam-demo-status{display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 11px;
        border: 1px solid #cae8e1;
        border-radius: 999px;
        color: var(--primary-dark);
        background: var(--primary-soft);
        font-size: 11px;
        font-weight: 850;}
html.page-index-10 .exam-demo-status span{width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--success);
        box-shadow: 0 0 0 4px rgba(46,125,89,.14);}
html.page-index-10 .exam-demo-grid{display: grid;
        grid-template-columns: minmax(0, 1fr) 270px;
        gap: 20px;
        padding: 20px;}
html.page-index-10 .exam-demo-label{display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
        margin-bottom: 13px;
        padding-bottom: 11px;
        border-bottom: 2px solid rgba(20,125,112,.58);
        color: #78909a;
        font-size: 12px;
        font-weight: 750;}
html.page-index-10 .exam-demo-badge{display: inline-flex;
        align-items: center;
        padding: 7px 11px;
        border-radius: 999px;
        color: var(--primary-dark);
        background: var(--primary-soft);
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .03em;
        text-transform: uppercase;}
html.page-index-10 .exam-demo-question-card{position: relative;
        overflow: hidden;
        margin-bottom: 14px;
        padding: 19px 20px 20px;
        border: 1px solid rgba(220,232,229,.95);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        box-shadow: var(--shadow-sm);}
html.page-index-10 .exam-demo-question-card::before{content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 5px;
        background: linear-gradient(180deg, var(--primary), var(--blue));}
html.page-index-10 .exam-demo-question-card p{margin: 0;
        color: #28475a;
        font-size: 13px;
        line-height: 1.64;}
html.page-index-10 .exam-demo-answers{display: grid; gap: 10px;}
html.page-index-10 .exam-demo-answer{position: relative;
        display: grid;
        grid-template-columns: 39px minmax(0,1fr) 22px;
        align-items: center;
        gap: 12px;
        min-height: 70px;
        width: 100%;
        padding: 13px 15px;
        border: 2px solid transparent;
        border-radius: 15px;
        background: rgba(255,255,255,.97);
        box-shadow: 0 4px 14px rgba(24,70,68,.065);
        color: var(--ink);
        text-align: left;
        cursor: pointer;
        transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;}
html.page-index-10 .exam-demo-answer:hover:not(:disabled){transform: translateY(-2px);
        border-color: #acd5ce;
        box-shadow: 0 14px 30px rgba(20,68,66,.11);}
html.page-index-10 .exam-demo-answer.selected{border-color: var(--primary);
        background: linear-gradient(90deg, #e8f7f4 0%, #fbfffe 100%);}
html.page-index-10 .exam-demo-answer.correct{border-color: #76b99a; background: #edf8f2;}
html.page-index-10 .exam-demo-answer.incorrect{border-color: #d8949a; background: #fff2f3;}
html.page-index-10 .exam-demo-letter{width: 38px;
        height: 38px;
        display: grid;
        place-items: center;
        border: 1px solid #dce8e5;
        border-radius: 12px;
        color: #55707c;
        background: #f4f8f7;
        font-weight: 900;}
html.page-index-10 .exam-demo-answer.selected .exam-demo-letter,
html.page-index-10 .exam-demo-answer.correct .exam-demo-letter{color: #fff;
        border-color: var(--primary);
        background: var(--primary);
        box-shadow: 0 8px 16px rgba(20,125,112,.20);}
html.page-index-10 .exam-demo-answer.incorrect .exam-demo-letter{color: #9b3f49;
        border-color: #f2c5c9;
        background: #f8dfe2;
        box-shadow: none;}
html.page-index-10 .exam-demo-answer strong{display: block; font-size: 13px; font-weight: 700;}
html.page-index-10 .exam-demo-answer small{display: block; margin-top: 3px; color: #728b96; font-size: 11px;}
html.page-index-10 .exam-demo-radio{position: relative;
        width: 20px;
        height: 20px;
        border: 2px solid #a8bbc3;
        border-radius: 50%;
        background: white;}
html.page-index-10 .exam-demo-answer.selected .exam-demo-radio{border-color: var(--primary);}
html.page-index-10 .exam-demo-answer.selected .exam-demo-radio::after{content: "";
        position: absolute;
        inset: 4px;
        border-radius: 50%;
        background: var(--primary);}
html.page-index-10 .exam-demo-feedback{display: none;
        margin-top: 13px;
        padding: 13px 15px;
        border-radius: 14px;
        font-size: 13px;
        line-height: 1.55;}
html.page-index-10 .exam-demo-feedback.show{display: block; animation: reveal .24s ease;}
html.page-index-10 .exam-demo-feedback.success{color: #14532d; border: 1px solid #9dddba; background: #f0fbf4;}
html.page-index-10 .exam-demo-feedback.error{color: #7f1d1d; border: 1px solid #f4b9bd; background: #fff2f3;}
html.page-index-10 .exam-demo-actions{display: flex; flex-wrap: wrap; gap: 9px; margin-top: 15px;}
html.page-index-10 .exam-demo-actions .btn-secondary{background: #f6f2ff; color: #5b21b6; border-color: #d8ccff;}
html.page-index-10 .exam-demo-discussion-btn[hidden]{display: none !important;}
html.page-index-10 .exam-demo-discussion{margin-top: 15px;
        padding: 14px;
        border: 1px solid #ddd6fe;
        border-radius: 16px;
        background: #fbfaff;
        color: #334155;
        animation: reveal .22s ease;}
html.page-index-10 .exam-demo-discussion-head{display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 10px;}
html.page-index-10 .exam-demo-discussion-head strong{display: block; color: #4c1d95; font-size: 13px;}
html.page-index-10 .exam-demo-discussion-head span{display: block; margin-top: 3px; color: #6b7280; font-size: 11px;}
html.page-index-10 .exam-demo-paid-pill{padding: 5px 8px;
        border-radius: 999px;
        color: #5b21b6 !important;
        background: #ede9fe;
        font-size: 10px !important;
        font-weight: 850;
        text-transform: uppercase;}
html.page-index-10 .exam-demo-post{display: grid;
        grid-template-columns: 34px 1fr;
        gap: 10px;
        padding: 10px;
        border: 1px solid #e6e3fb;
        border-radius: 12px;
        background: white;}
html.page-index-10 .exam-demo-post + .exam-demo-post{margin-top: 8px;}
html.page-index-10 .exam-demo-post p{margin: 0; color: #475569; font-size: 12px; line-height: 1.5;}
html.page-index-10 .exam-demo-votes{display: grid; justify-items: center; color: #8b5cf6; font-size: 10px;}
html.page-index-10 .exam-demo-votes strong{color: #475569; font-size: 12px;}
html.page-index-10 .exam-demo-sidebar{display: grid; gap: 12px; align-content: start;}
html.page-index-10 .exam-demo-side-card{padding: 15px;
        border: 1px solid rgba(220,232,229,.95);
        border-radius: 18px;
        background: rgba(255,255,255,.96);
        box-shadow: var(--shadow-sm);}
html.page-index-10 .exam-demo-side-card h3{display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 0 13px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e5eeeb;
        font-size: 13px;}
html.page-index-10 .exam-demo-side-card h3 span{width: 28px;
        height: 28px;
        display: grid;
        place-items: center;
        border-radius: 9px;
        color: var(--primary);
        background: var(--primary-soft);}
html.page-index-10 .exam-demo-timer-row{display: flex; align-items: center; justify-content: space-between; gap: 14px;}
html.page-index-10 .exam-demo-timer-row small{display: block; color: #78909a; font-size: 10px;}
html.page-index-10 .exam-demo-timer-row strong{display: block; margin-top: 3px; font-variant-numeric: tabular-nums; font-size: 25px; letter-spacing: .02em;}
html.page-index-10 .exam-demo-ring{position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: conic-gradient(var(--primary) 0 72%, #dcebe8 72% 100%);}
html.page-index-10 .exam-demo-ring::after{content: ""; position: absolute; inset: 8px; border-radius: 50%; background: white;}
html.page-index-10 .exam-demo-progress-row{display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center;}
html.page-index-10 .exam-demo-donut{position: relative;
        width: 86px;
        height: 86px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: conic-gradient(var(--success) 0 72deg, #e2e8f0 72deg 360deg);
        text-align: center;}
html.page-index-10 .exam-demo-donut::before{content:""; position:absolute; inset: 9px; border-radius:50%; background:#fff; box-shadow: inset 0 0 0 1px #eef4f2;}
html.page-index-10 .exam-demo-donut strong,
html.page-index-10 .exam-demo-donut small{position: relative; z-index: 1; display: block;}
html.page-index-10 .exam-demo-donut strong{font-size: 18px; line-height: 1;}
html.page-index-10 .exam-demo-donut small{color: #78909a; font-size: 9px; margin-top: -16px;}
html.page-index-10 .exam-demo-stats{display: grid; gap: 7px; font-size: 11px; color: #637b87;}
html.page-index-10 .exam-demo-stats span{display: flex; align-items: center; justify-content: space-between; gap: 8px;}
html.page-index-10 .exam-demo-stats i{width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; display: inline-block;}
html.page-index-10 .exam-demo-stats i.green{background: var(--success);}
html.page-index-10 .exam-demo-stats i.amber{background: var(--gold);}
html.page-index-10 .exam-demo-stats i.grey{background: #cbd5e1;}
html.page-index-10 .exam-demo-nav{display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;}
html.page-index-10 .exam-demo-nav button{height: 35px;
        border: 1px solid #dce8e5;
        border-radius: 10px;
        background: #f8faf9;
        color: #647c88;
        font-size: 11px;
        font-weight: 850;}
html.page-index-10 .exam-demo-nav button.done{color: white; border-color: var(--success); background: var(--success);}
html.page-index-10 .exam-demo-nav button.current{color: white; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,112,.14);}
@media (max-width: 1080px){
html.page-index-10 .exam-mode-showcase{grid-template-columns: 1fr;}
html.page-index-10 .exam-demo-shell{max-width: 780px; margin-inline: auto;}
}
@media (max-width: 760px){
html.page-index-10 .exam-demo-grid{grid-template-columns: 1fr;}
html.page-index-10 .exam-demo-sidebar{grid-template-columns: 1fr;}
html.page-index-10 .exam-demo-status{display: none;}
}
@media (max-width: 520px){
html.page-index-10 .exam-demo-shell{border-radius: 20px;}
html.page-index-10 .exam-demo-grid,
html.page-index-10 .exam-demo-answer{grid-template-columns: 35px minmax(0,1fr) 20px; padding: 11px;}
html.page-index-10 .exam-demo-answer small{display: none;}
html.page-index-10 .exam-demo-actions .btn{width: 100%;}
html.page-index-10 .exam-demo-progress-row{grid-template-columns: 1fr;}
}

/* ===== login(7).html | html.page-login-7 ===== */
html.page-login-7{
      --ink: #173047;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #145fe6;
      --blue-dark: #2a5a9c;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #eafff5;
      --pink: #ef4f8f;
      --purple: #6557ff;
      --rose: #c83c72;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --line-strong: #b8d9d3;
      --panel: rgba(255, 255, 255, 0.86);
      --danger: #bc3f4b;
      --danger-dark: #9a353f;
      --success: #2e7d59;
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --radius-xl: 28px;
      --bg: #f6f9ff;
      --shadow: 0 22px 60px rgba(33, 84, 170, 0.12);
      --container: 1380px;
}
html.page-login-7 *{box-sizing: border-box;}
html.page-login-7{scroll-behavior: smooth;}
html.page-login-7 body{margin: 0;
      min-width: 320px;
      min-height: 100vh;
      color: var(--ink);
      background:
        radial-gradient(circle at 84% 12%, rgba(55, 120, 194, .12), transparent 30%),
        radial-gradient(circle at 3% 92%, rgba(20, 125, 112, .10), transparent 30%),
        linear-gradient(135deg, #f6fbfa 0%, #ffffff 53%, #f1f7ff 100%);
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;}
html.page-login-7 a{color: inherit; text-decoration: none;}
html.page-login-7 button,
html.page-login-7 input{font: inherit;}
html.page-login-7 .container{width: min(calc(100% - 40px), var(--container));
      margin-inline: auto;}


html.page-login-7 .button{min-height: 44px;
      padding: 0 18px;
      border: 0;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-size: 14px;
      font-weight: 750;
      line-height: 1;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;}
html.page-login-7 .button:hover{transform: translateY(-1px);}
html.page-login-7 .button-primary{color: #fff;
      background: var(--primary);
      border: 1px solid var(--primary);
      box-shadow: 0 8px 18px rgba(20, 125, 112, .22);}
html.page-login-7 .button-primary:hover,
html.page-login-7 .button-primary:focus-visible{background: var(--primary-dark);
      border-color: var(--primary-dark);
      box-shadow: 0 12px 25px rgba(20, 125, 112, .28);}
html.page-login-7 .button-secondary{color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);}
html.page-login-7 .button-secondary:hover,
html.page-login-7 .button-secondary:focus-visible{color: var(--primary-dark);
      background: #f9fcfb;
      border-color: #b9d4ce;}
html.page-login-7 main{min-height: calc(100vh - 114px);}
html.page-login-7 .page-hero{position: relative;
      overflow: hidden;
      min-height: 230px;
      display: grid;
      place-items: center;
      color: #fff;
      background:
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .17), transparent 25%),
        radial-gradient(circle at 12% 110%, rgba(255, 255, 255, .10), transparent 35%),
        linear-gradient(135deg, #103f48 0%, var(--primary) 52%, var(--blue) 100%);}
html.page-login-7 .page-hero::before,
html.page-login-7 .page-hero::after{content: "";
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .11);
      pointer-events: none;}
html.page-login-7 .page-hero::before{width: 250px;
      height: 250px;
      top: -150px;
      right: 11%;
      box-shadow: 0 0 0 48px rgba(255, 255, 255, .035);}
html.page-login-7 .page-hero::after{width: 180px;
      height: 180px;
      bottom: -125px;
      left: 8%;
      box-shadow: 0 0 0 38px rgba(255, 255, 255, .025);}
html.page-login-7 .hero-content{position: relative;
      z-index: 1;
      padding: 42px 20px;
      text-align: center;}
html.page-login-7 .hero-kicker{display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 13px;
      padding: 7px 11px;
      border: 1px solid rgba(255, 255, 255, .25);
      border-radius: 999px;
      background: rgba(255, 255, 255, .10);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;}
html.page-login-7 .hero-kicker::before{content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(255, 255, 255, .14);}
html.page-login-7 .hero-content h1{margin: 0;
      font-size: clamp(38px, 4vw, 54px);
      line-height: 1.08;
      font-weight: 850;
      letter-spacing: -.045em;}
html.page-login-7 .breadcrumbs{margin-top: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(255, 255, 255, .86);
      font-size: 14px;
      font-weight: 650;}
html.page-login-7 .breadcrumbs a:hover,
html.page-login-7 .breadcrumbs a:focus-visible{color: #fff; text-decoration: underline;}
html.page-login-7 .signin-section{padding: 58px 20px 80px;}
html.page-login-7 .signin-card{position: relative;
      overflow: hidden;
      width: min(560px, 100%);
      margin: 0 auto;
      padding: 38px;
      border: 1px solid rgba(199, 220, 216, .86);
      border-radius: 30px;
      background: rgba(255, 255, 255, .96);
      box-shadow: var(--shadow-md);}
html.page-login-7 .signin-card::before{content: "";
      position: absolute;
      width: 220px;
      height: 220px;
      top: -135px;
      right: -95px;
      border-radius: 50%;
      background: rgba(20, 125, 112, .06);
      box-shadow: 0 0 0 48px rgba(55, 120, 194, .035);
      pointer-events: none;}
html.page-login-7 .signin-heading{position: relative;
      z-index: 1;
      margin-bottom: 28px;
      text-align: center;}
html.page-login-7 .signin-icon{width: 54px;
      height: 54px;
      margin: 0 auto 15px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      box-shadow: 0 12px 25px rgba(20, 125, 112, .22);}
html.page-login-7 .signin-icon svg{width: 25px; height: 25px;}
html.page-login-7 .signin-card h2{margin: 0;
      color: #153347;
      font-size: 29px;
      line-height: 1.2;
      font-weight: 850;
      letter-spacing: -.035em;}
html.page-login-7 .signin-subtitle{margin: 9px 0 0;
      color: var(--ink-soft);
      font-size: 14px;
      line-height: 1.55;}
html.page-login-7 .signin-form{position: relative;
      z-index: 1;
      display: grid;
      gap: 18px;}
html.page-login-7 .form-field{display: grid; gap: 8px;}
html.page-login-7 .form-field label{color: #355269;
      font-size: 13px;
      font-weight: 800;}
html.page-login-7 .input-shell{position: relative;}
html.page-login-7 .input-shell svg{position: absolute;
      top: 50%;
      left: 16px;
      width: 19px;
      height: 19px;
      transform: translateY(-50%);
      fill: none;
      stroke: #73909a;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;}
html.page-login-7 .signin-form input{width: 100%;
      height: 56px;
      padding: 0 17px 0 48px;
      border: 1px solid var(--line);
      border-radius: 14px;
      outline: none;
      color: var(--ink);
      background: #f8fbfa;
      font-size: 15px;
      transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;}
html.page-login-7 .signin-form input::placeholder{color: #7e919a; opacity: 1;}
html.page-login-7 .signin-form input:focus{border-color: #8bc9bf;
      background: #fff;
      box-shadow: 0 0 0 4px rgba(20, 125, 112, .10);}
html.page-login-7 .submit-button{width: 100%;
      min-height: 52px;
      margin-top: 4px;
      border-radius: 14px;
      font-size: 15px;}
html.page-login-7 :focus-visible{outline: 3px solid rgba(20, 125, 112, .26);
      outline-offset: 3px;}
@media (max-width: 980px){
html.page-login-7 .topbar-inner{min-height: 48px;}
html.page-login-7 .announcement-text{max-width: 55%;}
html.page-login-7 .navbar{padding-block: 14px; flex-wrap: wrap;}
html.page-login-7 .primary-nav{order: 3; width: 100%; margin: 0; justify-content: center; flex-wrap: wrap; gap: 20px;}
html.page-login-7 .nav-actions{margin-left: auto;}
}
@media (max-width: 680px){
html.page-login-7 .container{width: min(calc(100% - 28px), var(--container));}
html.page-login-7 .topbar-inner{padding-block: 10px; flex-direction: column; align-items: flex-start; gap: 7px;}
html.page-login-7 .announcement-text{max-width: none; text-align: left;}
html.page-login-7 .brand img{width: 150px;}
html.page-login-7 .nav-actions{display: flex; align-items: center; gap: 10px;}
html.page-login-7 .nav-actions .button{flex: 1; min-width: 0;}
html.page-login-7 .primary-nav{justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;}
html.page-login-7 .page-hero{min-height: 195px;}
html.page-login-7 .hero-content{padding-block: 34px;}
html.page-login-7 .signin-section{padding: 36px 14px 56px;}
html.page-login-7 .signin-card{padding: 28px 20px; border-radius: 23px;}
}
@media (prefers-reduced-motion: reduce){
html.page-login-7 *,
html.page-login-7 *::before,
html.page-login-7 *::after{scroll-behavior: auto !important; transition: none !important;}
}

/* ===== MyExam.html | html.page-myexam ===== */
html.page-myexam{
      --ink: #173047;
      --ink-soft: #496276;
      --primary: #147d70;
      --primary-dark: #0b5b53;
      --primary-soft: #e8f7f4;
      --blue: #3778c2;
      --blue-2: #145fe6;
      --blue-dark: #2a5a9c;
      --blue-soft: #edf5ff;
      --green: #4f914a;
      --green-soft: #eafff5;
      --pink: #ef4f8f;
      --purple: #6557ff;
      --rose: #c83c72;
      --gold: #dcae2a;
      --surface: #ffffff;
      --surface-soft: #f6faf9;
      --line: #dce8e5;
      --line-strong: #b8d9d3;
      --panel: rgba(255, 255, 255, 0.86);
      --danger: #bc3f4b;
      --danger-dark: #9a353f;
      --success: #2e7d59;
      --shadow-sm: 0 8px 24px rgba(24, 70, 68, 0.08);
      --shadow-md: 0 22px 60px rgba(20, 68, 66, 0.14);
      --radius-sm: 12px;
      --radius-md: 20px;
      --radius-lg: 30px;
      --radius-xl: 28px;
      --bg: #f6f9ff;
      --shadow: 0 22px 60px rgba(33, 84, 170, 0.12);
      --container: 1380px;

}
html.page-myexam *{box-sizing: border-box;}
html.page-myexam{scroll-behavior: smooth;}
html.page-myexam body{margin: 0;
      color: var(--ink);
      
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 16px;
      min-height: 100vh;}
html.page-myexam button,
html.page-myexam input,
html.page-myexam select{font: inherit;}
html.page-myexam a{color: inherit; text-decoration: none;}
html.page-myexam .container{width: min(calc(100% - 40px), var(--container)); margin-inline: auto;}
/* html.page-myexam .topbar{background: #103f48; color: rgba(255,255,255,.88); font-size: 13px;}
html.page-myexam .topbar-inner{min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
html.page-myexam .topbar strong{color: #fff; font-weight: 700;}
html.page-myexam .topbar-links{display: flex; align-items: center; gap: 18px;}
html.page-myexam .topbar a:hover{color: #fff;}
html.page-myexam header{position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(255,255,255,.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(220,232,229,.9);}
html.page-myexam .nav-shell{min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;}
html.page-myexam .brand{display: flex; align-items: center; flex: 0 0 auto;}
html.page-myexam .brand img{width: 178px; max-width: 42vw; height: auto; display: block;}
html.page-myexam .nav{display: flex; align-items: center; gap: 30px; margin-left: auto;}
html.page-myexam .nav a{color: #355269; font-size: 15px; font-weight: 650; transition: color .2s ease;}
html.page-myexam .nav a:hover,
html.page-myexam .nav a.active{color: var(--primary);}
html.page-myexam .header-actions{display: flex; align-items: center; gap: 10px;} */
/* html.page-myexam .btn{border: 0;
      border-radius: 12px;
      min-height: 44px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 750;
      font-size: 14px;
      cursor: pointer;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border .2s ease;}
html.page-myexam .btn:hover{transform: translateY(-1px);} */
/* html.page-myexam .btn-primary{background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(20,125,112,.22);}
html.page-myexam .btn-primary:hover{background: var(--primary-dark); box-shadow: 0 12px 25px rgba(20,125,112,.28);}
html.page-myexam .btn-secondary{background: #fff; color: var(--ink); border: 1px solid var(--line);}
html.page-myexam .btn-secondary:hover{background: #f9fcfb; border-color: #b9d4ce;} */
html.page-myexam .page-shell{width: min(calc(100% - 48px), var(--container));
      margin: 54px auto 52px;
      display: grid;
      grid-template-columns: 270px minmax(0, 1fr);
      gap: 30px;
      align-items: start;}
html.page-myexam .sidebar{position: sticky;
      top: 104px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(220,232,229,.95);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      overflow: hidden;}
html.page-myexam .sidebar-head{padding: 18px 20px;
      background: linear-gradient(135deg, #eff9f6, #eef6ff);
      border-bottom: 1px solid var(--line);}
html.page-myexam .sidebar-head strong{display: block; font-size: 14px; letter-spacing: -.01em;}
html.page-myexam .sidebar-head span{display: block; margin-top: 4px; color: #6d8794; font-size: 12px;}
html.page-myexam .side-item{min-height: 54px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 18px;
      border-bottom: 1px solid #e7efed;
      color: #355269;
      font-weight: 700;
      position: relative;
      transition: background .18s ease, color .18s ease;}
html.page-myexam .side-item:last-child{border-bottom: 0;}
html.page-myexam .side-icon{width: 30px;
      height: 30px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--primary);
      background: var(--primary-soft);
      flex: none;}
html.page-myexam .side-icon svg{width: 15px; height: 15px;}
html.page-myexam .side-item .chevron{margin-left: auto; color: #8aa0aa; font-size: 18px; line-height: 1;}
html.page-myexam .side-item:hover{background: #f7fbfa; color: var(--primary-dark);}
html.page-myexam .side-item.active{color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--blue));
      box-shadow: inset 4px 0 0 rgba(255,255,255,.35);}
html.page-myexam .side-item.active .side-icon{color: #fff; background: rgba(255,255,255,.18);}
html.page-myexam .side-item.active .chevron{color: #fff;}
html.page-myexam .content{min-width: 0;}
html.page-myexam .dashboard-card{position: relative;
      overflow: hidden;
      background: rgba(255,255,255,.96);
      border: 1px solid rgba(199,220,216,.86);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);}
html.page-myexam .dashboard-card::before{content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -115px;
      top: -145px;
      border-radius: 50%;
      background: rgba(20,125,112,.06);
      box-shadow: 0 0 0 58px rgba(55,120,194,.035);
      pointer-events: none;}

html.page-myexam .title-kicker{display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-dark);
      background: rgba(255,255,255,.78);
      border: 1px solid #cfeae5;
      padding: 7px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
      margin-bottom: 12px;}
html.page-myexam .title-kicker::before{content: ""; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 4px rgba(20,125,112,.14);}
html.page-myexam h1{margin: 0;
      color: #153347;
      font-size: clamp(25px, 2.45vw, 34px);
      font-weight: 850;
      letter-spacing: -0.04em;
      line-height: 1.1;}
html.page-myexam .title-subtitle{margin: 8px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.55;}
html.page-myexam .db-actions{display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end;}
html.page-myexam .db-btn{border: 0;
      background: var(--success);
      color: #fff;
      border-radius: 12px;
      min-height: 42px;
      padding: 0 16px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 10px 21px rgba(46,125,89,.19);}
html.page-myexam .db-btn:hover{background: #236b4b;}
html.page-myexam .card-body{padding: 0; position: relative; z-index: 1;min-width:930px;}
html.page-myexam .summary-strip{display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 22px;}
html.page-myexam .summary-card{border: 1px solid #e4edeb;
      border-radius: 18px;
      padding: 16px;
      background: #fff;
      box-shadow: 0 6px 18px rgba(28,75,73,.045);}
html.page-myexam .summary-card span{display: block; color: #7e959e; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 850;}
html.page-myexam .summary-card strong{display: block; margin-top: 6px; font-size: 20px; letter-spacing: -.02em;}
html.page-myexam .table-toolbar{display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      gap: 16px;
      color: #355269;}
html.page-myexam .table-toolbar label{display: flex; align-items: center; gap: 7px; white-space: nowrap; font-weight: 650;}
html.page-myexam select,
html.page-myexam input[type="search"]{height: 36px;
      border: 1px solid #d8e6e2;
      border-radius: 10px;
      background: #fff;
      color: #303846;
      font-size: 14px;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease;}
html.page-myexam select{padding: 0 9px;}
html.page-myexam input[type="search"]{width: 220px; padding: 0 11px;}
html.page-myexam select:focus,
html.page-myexam input[type="search"]:focus{border-color: #a9d5cd; box-shadow: 0 0 0 4px rgba(20,125,112,.10);}
html.page-myexam .table-wrap{overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 6px 24px rgba(28,75,73,.04);}
html.page-myexam table{
      /* border-collapse: separate; */
      border-spacing: 0;
      /* width: 100%; */
      /* min-width: 880px; */
      /* table-layout: fixed; */
      background: #fff;}
html.page-myexam th,
html.page-myexam td{border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 0 13px;
      height: 58px;
      vertical-align: middle;}
html.page-myexam th:last-child,
html.page-myexam td:last-child{border-right: 0;}
html.page-myexam thead th{height: 50px;
      text-align: left;
      color: #28475a;
      font-weight: 850;
      background: linear-gradient(180deg, #fbfefe 0%, #f3f9f7 100%);
      white-space: nowrap;
      position: relative;}
html.page-myexam th .sort{position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #b8c5ca; font-size: 14px; font-weight: 400; letter-spacing: -3px;}
html.page-myexam tbody tr{transition: background .16s ease;}
html.page-myexam tbody tr:hover{background: #f9fcfb;}
html.page-myexam td{color: #314657;}
html.page-myexam tfoot th{height: 46px; font-weight: 850; border-bottom: 0; background: #fbfefe; color: #28475a;}
html.page-myexam tbody tr:last-child td{border-bottom: 1px solid var(--line);}
html.page-myexam .col-sr{width: 100px; text-align: center;}
html.page-myexam .col-type{width: 255px;}
html.page-myexam .col-date{width: 315px;}
html.page-myexam .col-length{width: 116px; text-align: center;}
html.page-myexam .col-answer{width: 140px; text-align: center;}
html.page-myexam .col-action{width: 150px; text-align: center;}
html.page-myexam th.col-sr,
html.page-myexam th.col-length,
html.page-myexam th.col-answer,
html.page-myexam th.col-action{text-align: left;}
html.page-myexam .type-pill{display: inline-flex;
      align-items: center;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid #dce8e5;
      color: #355269;
      background: #f8faf9;
      font-weight: 700;
      font-size: 13px;}
html.page-myexam .type-pill.exam{background: var(--blue-soft); border-color: #d8e8fb; color: #285f91;}
html.page-myexam .type-pill.revision{background: var(--primary-soft); border-color: #cfeae5; color: var(--primary-dark);}
html.page-myexam .start-btn{border: 0;
      background: linear-gradient(135deg, var(--primary), #1aa9b8);
      color: white;
      min-height: 36px;
      min-width: 72px;
      padding: 0 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 7px 16px rgba(20,125,112,.18);}
html.page-myexam .start-btn.revision{background: linear-gradient(135deg, var(--blue), var(--primary));}
html.page-myexam .start-btn:hover{filter: brightness(.97); transform: translateY(-1px);}
html.page-myexam .table-footer{display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; color: #496276;}
html.page-myexam .pagination{display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;}
html.page-myexam .page-link{height: 36px;
      min-width: 35px;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--line);
      border-left: 0;
      color: var(--primary-dark);
      background: #fff;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;}
html.page-myexam .page-link:first-child{border-left: 1px solid var(--line); border-top-left-radius: 10px; border-bottom-left-radius: 10px; color: #6f7f89;}
html.page-myexam .page-link:last-child{border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
html.page-myexam .page-link.active{background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(20,125,112,.12); z-index: 1;}
html.page-myexam .page-link.ellipsis{color: #747b86;}
@media (max-width: 1080px){
html.page-myexam .nav{gap: 20px;}
html.page-myexam .page-shell{grid-template-columns: 1fr; width: min(100% - 32px, 1100px); margin-top: 32px;}
html.page-myexam .sidebar{position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
html.page-myexam .sidebar-head{display: none;}
html.page-myexam .side-item{border-right: 1px solid #e7efed;}
}
@media (max-width: 860px){
html.page-myexam .topbar{display: none;}
html.page-myexam .nav-shell{min-height: auto; padding-block: 14px; flex-wrap: wrap;}
html.page-myexam .nav{order: 3; width: 100%; margin: 0; justify-content: center; flex-wrap: wrap; gap: 18px;}
html.page-myexam .header-actions{margin-left: auto;}
html.page-myexam .summary-strip{grid-template-columns: 1fr;}
}
@media (max-width: 680px){
html.page-myexam .brand img{width: 150px;}
html.page-myexam .header-actions{width: 100%;}
html.page-myexam .header-actions .btn{flex: 1; min-width: 0;}
html.page-myexam .sidebar{grid-template-columns: 1fr;}
html.page-myexam .side-item{border-right: 0;}
html.page-myexam .title-row{align-items: stretch; flex-direction: column; padding: 22px;}
html.page-myexam .db-actions{justify-content: flex-start;}
html.page-myexam .card-body{padding: 20px;}
html.page-myexam .table-toolbar,
html.page-myexam .table-footer{flex-direction: column; align-items: flex-start;}
html.page-myexam input[type="search"]{width: 100%;}
}
@media (prefers-reduced-motion: reduce){
html.page-myexam *,
html.page-myexam *::before,
html.page-myexam *::after{scroll-behavior: auto !important; transition: none !important; animation: none !important;}
}
/* Dashboard sidebar imported for My Exam Log */
html.page-myexam{--muted: var(--ink-soft);
      --blue-2: #145fe6;
      --panel: rgba(255, 255, 255, 0.86);}
html.page-myexam .page-shell{grid-template-columns: 304px minmax(0, 1fr);}
html.page-myexam .sidebar{position: sticky;
      top: 104px;
      background: rgba(255,255,255,.97);
      border: 1px solid #dce8e5;
      border-radius: 26px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      backdrop-filter: blur(12px);}
html.page-myexam .sidebar-user{padding: 22px;
      background: linear-gradient(135deg, #eff9f6, #eef6ff);
      display: flex;
      align-items: center;
      gap: 14px;
      border-bottom: 1px solid #e5eeeb;}
html.page-myexam .avatar{width: 46px;
      height: 46px;
      border-radius: 16px;
      background: linear-gradient(145deg, var(--primary), var(--blue));
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      box-shadow: 0 10px 22px rgba(20,125,112,.18);
      flex: 0 0 46px;}
html.page-myexam .sidebar-user strong{display: block;
      font-size: 15px;
      letter-spacing: -0.02em;}
html.page-myexam .sidebar-user span{display: block;
      margin-top: 4px;
      color: var(--ink-soft);
      font-size: 12px;
      font-weight: 700;}
html.page-myexam .side-menu{list-style: none;
      padding: 10px;
      margin: 0;}
html.page-myexam .side-menu li + li{margin-top: 5px;}
html.page-myexam .side-link{display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px 14px;
      border-radius: 14px;
      color: #425d70;
      font-weight: 700;
      transition: background .18s ease, color .18s ease, transform .18s ease;}
html.page-myexam .side-link svg{width: 19px;
      height: 19px;
      flex: 0 0 19px;}
html.page-myexam .side-link .chev{margin-left: auto;
      opacity: .45;}
html.page-myexam .side-link:hover{background: var(--primary-soft);
      color: var(--primary-dark);
      transform: translateX(2px);}
html.page-myexam .side-link.active{color: #fff;
      background: var(--primary);
      box-shadow: 0 12px 24px rgba(20,125,112,.22);}
html.page-myexam .support-card{margin: 12px 20px 22px;
      border-radius: 18px;
      padding: 20px;
      background:
        radial-gradient(circle at 90% 0%, rgba(55,120,194,.12), transparent 34%),
        linear-gradient(135deg, #eff9f6, #eef6ff);
      border: 1px solid #dbeae7;}
html.page-myexam .support-card strong{display: block;
      letter-spacing: -0.02em;
      margin-bottom: 8px;}
html.page-myexam .support-card p{color: var(--ink-soft);
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.5;}
html.page-myexam .support-card button{width: 100%;
      height: 42px;
      border-radius: 999px;
      background: #fff;
      color: var(--primary-dark);
      font-weight: 800;
      cursor: pointer;
      border: 1px solid #cfe8e3;
      box-shadow: 0 8px 18px rgba(20,125,112,.10);}
@media (max-width: 1080px){
html.page-myexam .page-shell{grid-template-columns: 1fr;}
html.page-myexam .sidebar{position: relative;
        top: 0;
        display: block;}
html.page-myexam .side-menu{display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));}
html.page-myexam .side-menu li + li{margin-top: 0;}
html.page-myexam .support-card{display: none;}
}
@media (max-width: 860px){
html.page-myexam .side-menu{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 680px){
html.page-myexam .side-menu{grid-template-columns: 1fr;}
}