:root {
  --ap-primary: #7C3AED;
  --ap-primary-dark: #5B21B6;
  --ap-primary-soft: #F3E8FF;
  --ap-secondary: #17122B;
  --ap-secondary-soft: #EDE9FE;
  --ap-accent: #F59E0B;
  --ap-accent-dark: #D97706;
  --ap-surface: #FFFFFF;
  --ap-background: #F4F7FB;
  --ap-text: #172033;
  --ap-muted: #64748B;
  --ap-border: #E2E8F0;
  --ap-danger: #DC2626;
  --ap-warning: #D97706;
  --ap-success: #059669;
  --ap-radius-sm: 8px;
  --ap-radius: 14px;
  --ap-radius-lg: 22px;
  --ap-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.06);
  --ap-shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
}

html, body {
  min-height: 100%;
}

body {
  background: var(--ap-background);
  color: var(--ap-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ap-primary);
}

a:hover, a:focus {
  color: var(--ap-primary-dark);
}

.wrapper,
.content-wrapper,
.right-side {
  background: var(--ap-background);
}

.content-wrapper {
  min-height: calc(100vh - 101px);
}

.content {
  padding: 18px 22px 28px;
}

.content-header {
  padding: 22px 22px 8px;
}

.content-header > h1 {
  color: var(--ap-text);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.content-header > h1 > small {
  color: var(--ap-muted);
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 5px;
}

.content-header > .breadcrumb {
  background: transparent;
  border-radius: var(--ap-radius-sm);
  color: var(--ap-muted);
  top: 25px;
}

.main-header .navbar,
.main-header .logo {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)) !important;
  border: 0;
}

.main-header .logo {
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow: hidden;
  padding: 0 14px;
}

.main-header .logo:hover,
.main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a,
.main-header .navbar .nav .open > a:hover,
.main-header .navbar .nav .open > a:focus {
  background: rgba(255,255,255,0.12) !important;
}

.ap-brand-inline {
  align-items: center;
  display: flex;
  gap: 10px;
  height: 50px;
  min-width: 0;
}

.ap-brand-inline img {
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  height: 34px;
  object-fit: contain;
  padding: 3px;
  width: 34px;
}

.ap-brand-inline .ap-brand-name {
  color: #fff;
  display: block;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-brand-mini {
  align-items: center;
  display: flex;
  height: 50px;
  justify-content: center;
}

.ap-brand-mini img {
  background: #fff;
  border-radius: 9px;
  height: 32px;
  object-fit: contain;
  padding: 3px;
  width: 32px;
}

.main-sidebar,
.left-side {
  background: var(--ap-secondary) !important;
}

.sidebar-menu > li.header {
  background: transparent !important;
  color: rgba(255,255,255,0.48) !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 18px 20px 8px;
}

.sidebar-menu > li > a {
  border-left: 3px solid transparent !important;
  border-radius: 0 12px 12px 0;
  color: rgba(255,255,255,0.76) !important;
  margin: 3px 10px 3px 0;
  padding: 11px 15px;
}

.sidebar-menu > li:hover > a,
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background: rgba(255,255,255,0.10) !important;
  border-left-color: var(--ap-accent) !important;
  color: #fff !important;
}

.sidebar-menu .treeview-menu {
  background: rgba(0,0,0,0.12) !important;
  margin: 0 10px 4px 0;
  padding: 6px 0 7px 14px;
}

.sidebar-menu .treeview-menu > li > a {
  color: rgba(255,255,255,0.68) !important;
  padding: 8px 12px;
}

.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
  color: #fff !important;
}

.user-panel {
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 18px 14px;
}

.user-panel > .image > img,
.navbar-nav > .user-menu .user-image,
.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
  object-fit: cover;
}

.box {
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.box.box-solid {
  border: 1px solid var(--ap-border);
}

.box-header {
  color: var(--ap-text);
  padding: 16px 18px;
}

.box-header.with-border {
  border-bottom: 1px solid var(--ap-border);
}

.box-header .box-title {
  font-size: 15px;
  font-weight: 700;
}

.box-body {
  padding: 18px;
}

.box-footer {
  background: #FBFCFE;
  border-top: 1px solid var(--ap-border);
  padding: 14px 18px;
}

.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-color: var(--ap-primary);
}

.box.box-success.box-solid > .box-header,
.box.box-primary.box-solid > .box-header,
.box.box-info.box-solid > .box-header {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark));
  color: #fff;
}

.box.box-warning.box-solid > .box-header {
  background: var(--ap-warning);
  color: #fff;
}

.callout {
  border: 0;
  border-left: 4px solid var(--ap-primary);
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
  margin: 0 0 20px;
  padding: 17px 19px;
}

.callout.callout-info {
  background: var(--ap-primary-soft) !important;
  color: var(--ap-text) !important;
}

.callout.callout-success {
  background: #ECFDF5 !important;
  color: var(--ap-text) !important;
}

.alert {
  border: 0;
  border-radius: var(--ap-radius);
  box-shadow: var(--ap-shadow-sm);
}

.btn {
  border-radius: 9px;
  font-weight: 600;
  min-height: 36px;
  padding: 7px 14px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

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

.btn-primary,
.btn-info {
  background: var(--ap-primary) !important;
  border-color: var(--ap-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
  background: var(--ap-primary-dark) !important;
  border-color: var(--ap-primary-dark) !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
}

.btn-success {
  background: var(--ap-accent) !important;
  border-color: var(--ap-accent) !important;
}

.btn-default {
  background: #fff;
  border-color: var(--ap-border);
  color: var(--ap-text);
}

.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: #fff;
  border: 1px solid #CBD5E1;
  border-radius: 9px;
  box-shadow: none;
  color: var(--ap-text);
  min-height: 38px;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.input-sm,
.form-control.input-sm {
  border-radius: 8px;
  height: 36px;
}

label {
  color: #334155;
  font-weight: 600;
}

.help-block {
  color: var(--ap-muted);
  font-size: 12px;
}

.table-responsive {
  border: 0;
}

.table {
  background: #fff;
  margin-bottom: 0;
}

.table > thead > tr > th {
  background: #F8FAFC;
  border-bottom: 1px solid var(--ap-border);
  color: #475569;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  padding: 12px 10px;
  vertical-align: middle;
}

.table > tbody > tr > td {
  border-top: 1px solid #EEF2F7;
  padding: 11px 10px;
  vertical-align: middle;
}

.table-hover > tbody > tr:hover {
  background: #F8FBFF;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--ap-primary);
  border-color: var(--ap-primary);
}

.modal-content {
  border: 0;
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow);
  overflow: hidden;
}

.modal-header,
.modal-footer {
  border-color: var(--ap-border);
  padding: 16px 20px;
}

.modal-body {
  padding: 20px;
}

.main-footer {
  background: #fff;
  border-top: 1px solid var(--ap-border);
  color: var(--ap-muted);
  min-height: 50px;
  padding: 15px 22px;
}

.ap-topbar-brand {
  align-items: center;
  display: inline-flex !important;
  gap: 10px;
  max-width: min(70vw, 560px);
}

.ap-topbar-brand img {
  background: #fff;
  border-radius: 9px;
  height: 34px;
  object-fit: contain;
  padding: 3px;
  width: 34px;
}

.ap-topbar-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-clock {
  align-items: center;
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  margin-top: 9px;
  min-height: 32px;
  padding: 0 13px !important;
}

.ap-auth-page .content-wrapper {
  align-items: center;
  background:
    radial-gradient(circle at 8% 12%, rgba(20,184,166,.18), transparent 28%),
    radial-gradient(circle at 90% 18%, rgba(37,99,235,.18), transparent 30%),
    linear-gradient(180deg, #F8FBFF, #EEF3F9);
  display: flex;
  min-height: calc(100vh - 100px);
}

.ap-auth-page .content-wrapper > .container {
  width: 100%;
}

.ap-auth-shell {
  align-items: stretch;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  margin: 28px auto;
  max-width: 1040px;
}

.ap-auth-intro,
.ap-auth-card {
  border-radius: 24px;
  box-shadow: var(--ap-shadow);
  overflow: hidden;
}

.ap-auth-intro {
  background: linear-gradient(145deg, var(--ap-secondary), var(--ap-primary-dark));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 490px;
  padding: 44px;
  position: relative;
}

.ap-auth-intro:after {
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 66%);
  content: "";
  height: 360px;
  position: absolute;
  right: -150px;
  top: -140px;
  width: 360px;
}

.ap-auth-intro > * {
  position: relative;
  z-index: 1;
}

.ap-auth-logo {
  align-items: center;
  display: flex;
  gap: 14px;
}

.ap-auth-logo img {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  height: 64px;
  object-fit: contain;
  padding: 7px;
  width: 64px;
}

.ap-auth-intro h1 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin: 26px 0 12px;
}

.ap-auth-intro p {
  color: rgba(255,255,255,.78);
  font-size: 15px;
  max-width: 540px;
}

.ap-auth-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ap-auth-badge {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  font-size: 12px;
  padding: 7px 11px;
}

.ap-auth-card {
  align-self: center;
  background: #fff;
  padding: 34px;
}

.ap-auth-card-header {
  margin-bottom: 26px;
}

.ap-auth-card-header h2 {
  color: var(--ap-text);
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.025em;
  margin: 0 0 7px;
}

.ap-auth-card-header p {
  color: var(--ap-muted);
  margin: 0;
}

.ap-input-icon {
  position: relative;
}

.ap-input-icon .form-control {
  height: 48px;
  padding-left: 43px;
}

.ap-input-icon > i {
  color: #94A3B8;
  left: 15px;
  position: absolute;
  top: 16px;
  z-index: 3;
}

.ap-auth-actions {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 22px;
}

.ap-auth-actions .btn {
  min-width: 128px;
}

.ap-brand-preview {
  align-items: center;
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark));
  border-radius: var(--ap-radius);
  color: #fff;
  display: flex;
  gap: 14px;
  min-height: 94px;
  padding: 18px;
}

.ap-brand-preview img {
  background: #fff;
  border-radius: 14px;
  height: 58px;
  object-fit: contain;
  padding: 6px;
  width: 58px;
}

.ap-brand-preview strong,
.ap-brand-preview span {
  display: block;
}

.ap-brand-preview span {
  color: rgba(255,255,255,.76);
  font-size: 12px;
  margin-top: 3px;
}

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

.ap-settings-card {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 18px;
}

.ap-settings-card h4 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 15px;
}

.ap-color-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px 1fr;
}

.ap-color-row input[type="color"] {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  cursor: pointer;
  height: 42px;
  padding: 3px;
  width: 54px;
}

.ap-file-preview {
  align-items: center;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 12px;
  display: flex;
  gap: 13px;
  margin-bottom: 10px;
  padding: 12px;
}

.ap-file-preview img {
  background: #fff;
  border: 1px solid var(--ap-border);
  border-radius: 10px;
  height: 54px;
  object-fit: contain;
  padding: 4px;
  width: 54px;
}

.ap-exam-notice {
  background: linear-gradient(135deg, var(--ap-secondary), var(--ap-primary-dark));
  border: 0;
  border-radius: 0;
  color: #fff;
  margin: 0;
  padding: 14px 24px;
}

.ap-exam-notice .closebtn {
  color: rgba(255,255,255,.86);
}

#isi-tes-soal {
  color: #172033;
  line-height: 1.75;
  min-height: 180px;
  overflow-wrap: anywhere;
}

#isi-tes-soal img,
.box-body img,
table img {
  height: auto !important;
  max-width: 100% !important;
}

#isi-tes-soal audio,
#isi-tes-soal video,
#isi-tes-soal iframe {
  max-width: 100%;
}

.ap-exam-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}

.ap-question-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.ap-question-nav .btn,
.box-body > .btn-group .btn {
  margin: 2px;
}

.dropdown-menu {
  border: 1px solid var(--ap-border);
  border-radius: 12px;
  box-shadow: var(--ap-shadow);
  overflow: hidden;
}

.navbar-nav > .user-menu > .dropdown-menu > .user-header {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark));
}

@media (max-width: 991px) {
  .ap-auth-shell {
    grid-template-columns: 1fr;
    max-width: 680px;
  }

  .ap-auth-intro {
    min-height: 300px;
    padding: 32px;
  }

  .ap-settings-grid {
    grid-template-columns: 1fr;
  }

  .content-header > .breadcrumb {
    display: none;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 13px;
  }

  .main-header .logo {
    height: 56px;
    line-height: 56px;
    text-align: left;
  }

  .main-header .navbar {
    min-height: 50px;
  }

  .ap-brand-inline {
    height: 56px;
    justify-content: center;
  }

  .content-header {
    padding: 18px 14px 5px;
  }

  .content-header > h1 {
    font-size: 21px;
  }

  .content {
    padding: 12px 12px 22px;
  }

  .box {
    border-radius: 12px;
    margin-bottom: 14px;
  }

  .box-header,
  .box-body,
  .box-footer {
    padding: 14px;
  }

  .main-footer {
    padding: 14px;
    text-align: center;
  }

  .main-footer .pull-right {
    float: none !important;
    margin-bottom: 5px;
  }

  .layout-top-nav .main-header .navbar {
    min-height: 58px;
  }

  .layout-top-nav .navbar-header {
    float: left;
    max-width: calc(100% - 112px);
  }

  .layout-top-nav .navbar-custom-menu {
    float: right;
  }

  .ap-topbar-brand {
    font-size: 14px;
    height: 58px;
    max-width: calc(100vw - 130px);
    padding: 10px 8px !important;
  }

  .ap-topbar-brand img {
    height: 32px;
    width: 32px;
  }

  .ap-clock {
    font-size: 11px;
    margin-right: 5px;
    padding: 0 9px !important;
  }

  .ap-auth-page .content-wrapper {
    align-items: flex-start;
  }

  .ap-auth-shell {
    margin: 18px auto;
    padding: 0 4px;
  }

  .ap-auth-intro {
    min-height: auto;
    padding: 27px 22px;
  }

  .ap-auth-logo img {
    height: 52px;
    width: 52px;
  }

  .ap-auth-intro h1 {
    font-size: 28px;
    margin-top: 18px;
  }

  .ap-auth-card {
    border-radius: 18px;
    padding: 24px 19px;
  }

  .ap-auth-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .ap-auth-actions .btn {
    width: 100%;
  }

  .form-horizontal .control-label {
    margin-bottom: 6px;
    padding-top: 0;
    text-align: left;
  }

  .table-responsive,
  .dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table.dataTable,
  .table {
    min-width: 680px;
  }

  .modal-dialog {
    margin: 12px;
  }

  .ap-exam-notice {
    padding: 12px 14px;
  }

  .ap-exam-actions,
  .box-footer.ap-exam-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ap-exam-actions .btn,
  .ap-exam-actions #btn-ragu {
    margin: 0 !important;
    text-align: center;
    white-space: normal;
    width: 100%;
  }

  .ap-exam-actions #btn-ragu {
    grid-column: 1 / -1;
  }

  #isi-tes-soal {
    font-size: 15px !important;
    line-height: 1.7 !important;
    min-height: 140px;
  }
}

@media (max-width: 420px) {
  .ap-clock {
    display: none !important;
  }

  .layout-top-nav .navbar-header {
    max-width: calc(100% - 58px);
  }

  .ap-topbar-brand {
    max-width: calc(100vw - 75px);
  }

  .ap-auth-badges {
    display: none;
  }

  .ap-exam-actions,
  .box-footer.ap-exam-actions {
    grid-template-columns: 1fr;
  }

  .ap-exam-actions #btn-ragu {
    grid-column: auto;
  }
}

@media print {
  .main-header,
  .main-sidebar,
  .main-footer,
  .no-print {
    display: none !important;
  }

  .content-wrapper {
    margin-left: 0 !important;
  }

  .box {
    box-shadow: none;
  }
}

/* ========================================================================
   AlphaPro Modern Exam Suite v3
   Total UI/UX overhaul with purple-first design language
   ======================================================================== */

:root {
  --ap-purple-50: #FAF5FF;
  --ap-purple-100: #F3E8FF;
  --ap-purple-200: #E9D5FF;
  --ap-purple-300: #D8B4FE;
  --ap-purple-500: #8B5CF6;
  --ap-purple-600: #7C3AED;
  --ap-purple-700: #6D28D9;
  --ap-purple-800: #5B21B6;
  --ap-purple-900: #4C1D95;
  --ap-ink: #211A36;
  --ap-slate: #706A83;
  --ap-line: #E9E5F2;
  --ap-soft-bg: #F8F7FC;
  --ap-card-shadow: 0 18px 48px rgba(55, 38, 93, .09);
  --ap-card-shadow-hover: 0 22px 60px rgba(82, 48, 154, .16);
}

body.skin-purple .main-header .navbar,
body.skin-purple .main-header .logo {
  background: linear-gradient(135deg, var(--ap-primary) 0%, var(--ap-primary-dark) 100%) !important;
}

body.skin-purple .main-sidebar,
body.skin-purple .left-side {
  background: linear-gradient(180deg, var(--ap-secondary) 0%, #211740 100%) !important;
}

.content-wrapper {
  background:
    radial-gradient(circle at 85% 8%, rgba(124,58,237,.06), transparent 25%),
    var(--ap-soft-bg);
}

.btn-primary,
.btn-success {
  background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 20px rgba(124,58,237,.18);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  filter: brightness(.96);
  transform: translateY(-1px);
}

/* Shared modern components */
.ap-eyebrow,
.ap-panel-kicker {
  color: var(--ap-primary);
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}

.ap-page-heading {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 26px 26px 10px;
}

.ap-page-heading h1 {
  color: var(--ap-ink);
  font-size: 29px;
  font-weight: 800;
  letter-spacing: -.035em;
  margin: 4px 0 4px;
}

.ap-page-heading p {
  color: var(--ap-slate);
  margin: 0;
}

.ap-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ap-live-pill,
.ap-panel-chip,
.ap-count-badge {
  align-items: center;
  background: var(--ap-purple-100);
  border: 1px solid var(--ap-purple-200);
  border-radius: 999px;
  color: var(--ap-purple-700);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 7px;
  padding: 7px 11px;
  white-space: nowrap;
}

.ap-live-pill:before {
  background: #22C55E;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(34,197,94,.13);
  content: "";
  height: 7px;
  width: 7px;
}

.ap-panel {
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: 20px;
  box-shadow: var(--ap-card-shadow);
  height: 100%;
  overflow: hidden;
  padding: 22px;
}

.ap-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ap-panel-head h3 {
  color: var(--ap-ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 4px 0 0;
}

.ap-panel-head > a {
  font-size: 12px;
  font-weight: 700;
  padding-top: 5px;
}

.ap-empty-state {
  align-items: center;
  color: var(--ap-slate);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 180px;
  padding: 24px;
  text-align: center;
}

.ap-empty-state > i {
  color: var(--ap-purple-300);
  font-size: 36px;
  margin-bottom: 12px;
}

.ap-empty-state h3 {
  color: var(--ap-ink);
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
}

.ap-empty-state p { margin: 0; }
.ap-empty-state--compact { min-height: 120px; }
.ap-empty-state--large { background: #fff; border: 1px dashed var(--ap-purple-300); border-radius: 20px; grid-column: 1 / -1; min-height: 280px; }

.ap-avatar-letter {
  align-items: center;
  background: linear-gradient(135deg, var(--ap-purple-100), var(--ap-purple-200));
  border: 1px solid var(--ap-purple-200);
  border-radius: 14px;
  color: var(--ap-purple-700);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.ap-progress {
  background: #EEEAF5;
  border-radius: 999px;
  height: 7px;
  overflow: hidden;
}

.ap-progress > span {
  background: linear-gradient(90deg, var(--ap-primary), #A78BFA);
  border-radius: inherit;
  display: block;
  height: 100%;
  min-width: 2px;
}

.ap-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 6px 9px;
  white-space: nowrap;
}
.ap-status--success { background: #DCFCE7; color: #15803D; }
.ap-status--info { background: #EDE9FE; color: #6D28D9; }
.ap-status--default { background: #F1F5F9; color: #64748B; }
.ap-status--warning { background: #FEF3C7; color: #B45309; }
.ap-status--danger { background: #FEE2E2; color: #B91C1C; }

/* Operator dashboard */
.ap-dashboard-v3 {
  padding: 14px 26px 34px;
}

.ap-dashboard-hero {
  align-items: center;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.20), transparent 24%),
    linear-gradient(132deg, #4C1D95 0%, #7C3AED 54%, #9F67F4 100%);
  border-radius: 26px;
  box-shadow: 0 24px 55px rgba(76,29,149,.22);
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 20px;
  min-height: 215px;
  overflow: hidden;
  padding: 32px 38px;
  position: relative;
}

.ap-dashboard-hero:after {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 44% 56% 70% 30%;
  content: "";
  height: 280px;
  position: absolute;
  right: -70px;
  top: -120px;
  transform: rotate(16deg);
  width: 280px;
}

.ap-dashboard-hero__content { max-width: 760px; position: relative; z-index: 1; }
.ap-dashboard-hero .ap-eyebrow { color: #DDD6FE; }
.ap-dashboard-hero h2 { font-size: 31px; font-weight: 800; letter-spacing: -.035em; margin: 8px 0 8px; }
.ap-dashboard-hero p { color: rgba(255,255,255,.78); font-size: 14px; margin: 0; max-width: 650px; }
.ap-dashboard-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 22px; }
.ap-dashboard-hero__meta span { align-items: center; color: rgba(255,255,255,.86); display: inline-flex; font-size: 12px; gap: 7px; }
.ap-dashboard-hero__badge { position: relative; z-index: 1; }

.ap-dashboard-score {
  align-items: center;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 22px;
  backdrop-filter: blur(12px);
  display: flex;
  gap: 16px;
  min-width: 220px;
  padding: 18px;
}

.ap-ring {
  align-items: center;
  background: conic-gradient(#FBBF24 calc(var(--value, 0) * 1%), rgba(255,255,255,.18) 0);
  border-radius: 50%;
  display: flex;
  height: 78px;
  justify-content: center;
  position: relative;
  width: 78px;
}
.ap-ring:after { background: #6D28D9; border-radius: 50%; content: ""; inset: 7px; position: absolute; }
.ap-ring strong { color: #fff; font-size: 15px; position: relative; z-index: 1; }
.ap-dashboard-score div:last-child small { color: rgba(255,255,255,.7); display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.ap-dashboard-score div:last-child strong { display: block; font-size: 26px; line-height: 1.1; margin-top: 3px; }

.ap-stat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}
.ap-stat-grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ap-stat-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--ap-line);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(50,34,81,.055);
  color: inherit;
  display: flex;
  gap: 13px;
  min-height: 112px;
  overflow: hidden;
  padding: 16px;
  position: relative;
  transition: .22s ease;
}
.ap-stat-card:hover { border-color: var(--ap-purple-200); box-shadow: var(--ap-card-shadow-hover); color: inherit; transform: translateY(-3px); }
.ap-stat-icon { align-items: center; border-radius: 15px; display: flex; flex: 0 0 auto; font-size: 19px; height: 48px; justify-content: center; width: 48px; }
.ap-stat-icon--purple { background: #F3E8FF; color: #7C3AED; }
.ap-stat-icon--blue { background: #DBEAFE; color: #2563EB; }
.ap-stat-icon--green { background: #DCFCE7; color: #16A34A; }
.ap-stat-icon--orange { background: #FEF3C7; color: #D97706; }
.ap-stat-icon--pink { background: #FCE7F3; color: #DB2777; }
.ap-stat-icon--red { background: #FEE2E2; color: #DC2626; }
.ap-stat-body { min-width: 0; }
.ap-stat-body small, .ap-stat-body em { color: var(--ap-slate); display: block; font-size: 10px; font-style: normal; }
.ap-stat-body strong { color: var(--ap-ink); display: block; font-size: 25px; font-weight: 800; line-height: 1.15; margin: 2px 0; }
.ap-stat-arrow { color: var(--ap-purple-300); font-size: 10px; margin-left: auto; }

.ap-dashboard-row { display: flex; flex-wrap: wrap; margin-bottom: 20px; }
.ap-dashboard-row > [class*="col-"] { display: flex; }
.ap-bar-chart { align-items: flex-end; display: flex; gap: 14px; height: 250px; justify-content: space-around; padding: 10px 4px 0; }
.ap-bar-chart__item { align-items: center; display: flex; flex: 1; flex-direction: column; height: 100%; justify-content: flex-end; min-width: 40px; }
.ap-bar-chart__value { color: var(--ap-ink); font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.ap-bar-chart__track { background: linear-gradient(180deg, #F5F3FA, #EEEAF5); border-radius: 9px 9px 3px 3px; display: flex; height: 185px; overflow: hidden; width: min(44px, 72%); }
.ap-bar-chart__track span { align-self: flex-end; background: linear-gradient(180deg, #A78BFA, #6D28D9); border-radius: inherit; box-shadow: inset 0 1px rgba(255,255,255,.3); display: block; min-height: 5px; width: 100%; }
.ap-bar-chart__label { color: var(--ap-slate); font-size: 10px; margin-top: 8px; text-align: center; }

.ap-performance-panel { background: linear-gradient(180deg, #fff, #FAF8FF); }
.ap-performance-main { align-items: baseline; border-bottom: 1px solid var(--ap-line); display: flex; gap: 10px; margin-bottom: 16px; padding: 6px 0 18px; }
.ap-performance-main strong { color: var(--ap-primary); font-size: 49px; font-weight: 850; letter-spacing: -.06em; line-height: 1; }
.ap-performance-main span { color: var(--ap-slate); font-size: 12px; }
.ap-metric-line { align-items: center; color: var(--ap-slate); display: flex; font-size: 12px; justify-content: space-between; margin: 13px 0 7px; }
.ap-metric-line strong { color: var(--ap-ink); }

.ap-distribution-list { display: grid; gap: 15px; }
.ap-distribution-item > div:first-child { align-items: center; display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 7px; }
.ap-distribution-item span { color: var(--ap-ink); font-weight: 650; }
.ap-distribution-item strong { color: var(--ap-primary); }

.ap-table-modern { margin: 0; min-width: 600px; }
.ap-table-modern > thead > tr > th { border: 0; color: #8A8498; font-size: 9px; font-weight: 800; letter-spacing: .11em; padding: 10px 12px; text-transform: uppercase; }
.ap-table-modern > tbody > tr > td { border-top: 1px solid #F0EDF5; color: var(--ap-slate); padding: 13px 12px; vertical-align: middle; }
.ap-table-modern td strong { color: var(--ap-ink); display: block; font-size: 12px; }
.ap-table-modern td small { color: #9892A6; display: block; font-size: 10px; margin-top: 2px; }
.ap-table-modern tbody tr:hover { background: #FCFAFF; }

.ap-activity-list, .ap-alert-list { display: grid; }
.ap-activity-item, .ap-alert-item { align-items: center; border-bottom: 1px solid #F0EDF5; color: inherit; display: flex; gap: 12px; padding: 12px 2px; }
.ap-activity-item:last-child, .ap-alert-item:last-child { border-bottom: 0; }
.ap-activity-item > div:nth-child(2), .ap-alert-item > div { flex: 1; min-width: 0; }
.ap-activity-item strong, .ap-alert-item strong { color: var(--ap-ink); display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-activity-item span, .ap-alert-item span { color: var(--ap-slate); display: block; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-activity-time { color: #9992A7; font-size: 10px; text-align: right; }
.ap-activity-time .ap-status { margin-top: 5px; }
.ap-alert-icon { align-items: center; background: #FFF7ED; border-radius: 12px; color: #EA580C; display: flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.ap-alert-item time { color: #9992A7; font-size: 10px; }
.ap-alert-item:hover { color: inherit; }

.ap-system-strip { background: #211A36; border-radius: 18px; color: #fff; display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.ap-system-strip > div { align-items: center; background: rgba(255,255,255,.025); display: grid; grid-template-columns: 34px 1fr; padding: 14px 16px; }
.ap-system-strip i { color: #C4B5FD; font-size: 16px; grid-row: 1 / 3; }
.ap-system-strip span { color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.ap-system-strip strong { font-size: 11px; font-weight: 700; }

/* Proctoring views */
.ap-proctor-summary { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 18px; }
.ap-table-search { position: relative; }
.ap-table-search i { color: #A29BAC; left: 12px; position: absolute; top: 11px; z-index: 2; }
.ap-table-search input { border-radius: 12px !important; padding-left: 34px !important; }
.ap-timeline { display: grid; gap: 0; }
.ap-timeline-item { display: grid; gap: 12px; grid-template-columns: 14px 1fr auto; padding: 0 0 18px; position: relative; }
.ap-timeline-item:before { background: var(--ap-line); content: ""; left: 6px; position: absolute; top: 12px; bottom: -2px; width: 2px; }
.ap-timeline-item:last-child:before { display: none; }
.ap-timeline-dot { background: #F59E0B; border: 3px solid #FEF3C7; border-radius: 50%; height: 13px; margin-top: 3px; position: relative; width: 13px; z-index: 1; }
.ap-timeline-item strong { color: var(--ap-ink); display: block; font-size: 12px; }
.ap-timeline-item p { color: var(--ap-slate); font-size: 11px; margin: 3px 0 0; }
.ap-timeline-item time { color: #9992A7; font-size: 10px; }
.ap-photo-grid { display: grid; gap: 14px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.ap-photo-card { background: #F8F7FB; border: 1px solid var(--ap-line); border-radius: 15px; overflow: hidden; }
.ap-photo-card img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.ap-photo-card div { padding: 10px; }
.ap-photo-card strong { color: var(--ap-ink); display: block; font-size: 11px; }
.ap-photo-card span { color: var(--ap-slate); font-size: 9px; }

/* Security settings inside exam editor */
.ap-security-setting-card { background: linear-gradient(180deg, #FAF8FF, #FFF); border: 1px solid var(--ap-purple-200); border-radius: 17px; margin-top: 14px; padding: 16px; }
.ap-security-setting-head { align-items: center; border-bottom: 1px solid var(--ap-line); display: flex; gap: 11px; margin-bottom: 10px; padding-bottom: 12px; }
.ap-security-setting-head > i { align-items: center; background: var(--ap-purple-100); border-radius: 11px; color: var(--ap-primary); display: flex; font-size: 17px; height: 39px; justify-content: center; width: 39px; }
.ap-security-setting-head strong { color: var(--ap-ink); display: block; font-size: 13px; }
.ap-security-setting-head small { color: var(--ap-slate); display: block; font-size: 10px; }
.ap-setting-switch { align-items: center; border-bottom: 1px solid #F0EDF5; cursor: pointer; display: flex; gap: 11px; margin: 0; padding: 11px 0; }
.ap-setting-switch input { display: none; }
.ap-setting-switch > span { background: #D8D3E2; border-radius: 999px; flex: 0 0 auto; height: 22px; position: relative; transition: .2s; width: 40px; }
.ap-setting-switch > span:after { background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.16); content: ""; height: 16px; left: 3px; position: absolute; top: 3px; transition: .2s; width: 16px; }
.ap-setting-switch input:checked + span { background: var(--ap-primary); }
.ap-setting-switch input:checked + span:after { transform: translateX(18px); }
.ap-setting-switch div { flex: 1; }
.ap-setting-switch strong { color: var(--ap-ink); display: block; font-size: 11px; }
.ap-setting-switch small { color: var(--ap-slate); display: block; font-size: 9px; font-weight: 400; }
.ap-setting-switch--danger input:checked + span { background: #DC2626; }
.ap-security-number-row { margin-top: 12px; }
.ap-security-number-row label { color: var(--ap-ink); font-size: 10px; }
.ap-security-number-row small { color: var(--ap-slate); display: block; font-size: 9px; margin-top: 4px; }

/* Student portal */
.layout-top-nav .content-wrapper { padding-top: 0; }
.ap-student-shell, .ap-start-shell { max-width: 1440px; padding-left: 24px; padding-right: 24px; width: 100%; }
.ap-student-hero {
  align-items: center;
  background:
    radial-gradient(circle at 78% 8%, rgba(255,255,255,.18), transparent 26%),
    linear-gradient(130deg, #4C1D95 0%, #7C3AED 56%, #A855F7 100%);
  border-radius: 0 0 30px 30px;
  box-shadow: 0 24px 55px rgba(76,29,149,.16);
  color: #fff;
  display: flex;
  gap: 24px;
  justify-content: space-between;
  min-height: 190px;
  padding: 30px 36px;
}
.ap-student-hero__profile { align-items: center; display: flex; gap: 18px; }
.ap-student-avatar { align-items: center; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.28); border-radius: 22px; display: flex; font-size: 31px; font-weight: 800; height: 78px; justify-content: center; width: 78px; }
.ap-student-hero .ap-eyebrow { color: #DDD6FE; }
.ap-student-hero h1 { font-size: 30px; font-weight: 800; letter-spacing: -.04em; margin: 4px 0; }
.ap-student-hero p { color: rgba(255,255,255,.75); margin: 0; }
.ap-student-summary { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; backdrop-filter: blur(9px); display: flex; overflow: hidden; }
.ap-student-summary > div { min-width: 112px; padding: 16px 19px; text-align: center; }
.ap-student-summary > div + div { border-left: 1px solid rgba(255,255,255,.15); }
.ap-student-summary strong { display: block; font-size: 25px; font-weight: 800; }
.ap-student-summary span { color: rgba(255,255,255,.7); display: block; font-size: 9px; }
.ap-student-content { padding: 30px 0 38px; }
.ap-student-layout { align-items: start; display: grid; gap: 22px; grid-template-columns: minmax(0,1fr) 310px; }
.ap-section-heading { align-items: flex-end; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 17px; }
.ap-section-heading h2 { color: var(--ap-ink); font-size: 23px; font-weight: 800; letter-spacing: -.035em; margin: 3px 0; }
.ap-section-heading p { color: var(--ap-slate); font-size: 12px; margin: 0; }
.ap-exam-card-grid { display: grid; gap: 16px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ap-exam-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 21px; box-shadow: 0 12px 32px rgba(50,34,81,.06); display: flex; flex-direction: column; min-height: 315px; overflow: hidden; padding: 20px; position: relative; transition: .22s ease; }
.ap-exam-card:before { background: var(--ap-primary); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0; }
.ap-exam-card--upcoming:before { background: #94A3B8; }
.ap-exam-card--expired:before { background: #CBD5E1; }
.ap-exam-card--completed:before { background: #22C55E; }
.ap-exam-card--ongoing:before { background: #F59E0B; }
.ap-exam-card:hover { border-color: var(--ap-purple-200); box-shadow: var(--ap-card-shadow-hover); transform: translateY(-3px); }
.ap-exam-card__top { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.ap-exam-type { color: var(--ap-primary); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ap-exam-type i { margin-right: 4px; }
.ap-exam-card h3 { color: var(--ap-ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin: 0 0 6px; }
.ap-exam-card > p { color: var(--ap-slate); font-size: 11px; line-height: 1.6; margin: 0 0 15px; min-height: 35px; }
.ap-exam-meta-grid { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.ap-exam-meta-grid > div { align-items: center; background: #FAF9FC; border: 1px solid #F0EDF5; border-radius: 12px; display: flex; gap: 9px; padding: 9px; }
.ap-exam-meta-grid i { align-items: center; background: var(--ap-purple-100); border-radius: 9px; color: var(--ap-primary); display: flex; flex: 0 0 auto; height: 29px; justify-content: center; width: 29px; }
.ap-exam-meta-grid span { color: var(--ap-slate); display: block; font-size: 8px; }
.ap-exam-meta-grid strong { color: var(--ap-ink); display: block; font-size: 10px; margin-top: 1px; }
.ap-security-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0; }
.ap-security-tags span { background: var(--ap-purple-50); border: 1px solid var(--ap-purple-200); border-radius: 999px; color: var(--ap-purple-700); font-size: 8px; font-weight: 700; padding: 5px 8px; }
.ap-security-tags i { margin-right: 3px; }
.ap-exam-card__footer { align-items: center; border-top: 1px solid #F0EDF5; display: flex; gap: 12px; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.ap-exam-card__footer > span { color: #918A9E; font-size: 9px; }
.ap-exam-card__footer .btn { border-radius: 11px; font-size: 10px; font-weight: 700; padding: 8px 12px; }
.ap-student-side-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 20px; box-shadow: 0 12px 32px rgba(50,34,81,.055); margin-bottom: 16px; padding: 20px; }
.ap-student-side-card h3 { color: var(--ap-ink); font-size: 16px; font-weight: 800; margin: 4px 0 13px; }
.ap-announcement-content { color: var(--ap-slate); font-size: 11px; line-height: 1.7; }
.ap-announcement-content img { height: auto !important; max-width: 100% !important; }
.ap-checklist-card ul { list-style: none; margin: 0; padding: 0; }
.ap-checklist-card li { align-items: center; border-top: 1px solid #F0EDF5; color: var(--ap-slate); display: flex; font-size: 10px; gap: 8px; padding: 9px 0; }
.ap-checklist-card i { align-items: center; background: #DCFCE7; border-radius: 50%; color: #16A34A; display: flex; font-size: 8px; height: 20px; justify-content: center; width: 20px; }

/* Start / confirmation page */
.ap-start-shell .content { padding: 34px 0 42px; }
.ap-start-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(0,1fr) 360px; }
.ap-start-main { background: #fff; border: 1px solid var(--ap-line); border-radius: 25px; box-shadow: var(--ap-card-shadow); padding: 31px; }
.ap-back-link { color: var(--ap-slate); display: inline-flex; font-size: 10px; font-weight: 700; gap: 7px; margin-bottom: 24px; }
.ap-start-main h1 { color: var(--ap-ink); font-size: 30px; font-weight: 850; letter-spacing: -.04em; line-height: 1.2; margin: 6px 0 8px; }
.ap-start-main > p { color: var(--ap-slate); font-size: 12px; line-height: 1.65; max-width: 700px; }
.ap-confirm-grid { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 23px 0; }
.ap-confirm-grid > div { background: #FAF9FC; border: 1px solid var(--ap-line); border-radius: 14px; padding: 13px 15px; }
.ap-confirm-grid span { color: var(--ap-slate); display: block; font-size: 9px; }
.ap-confirm-grid strong { color: var(--ap-ink); display: block; font-size: 12px; margin-top: 3px; }
.ap-token-box { align-items: center; background: linear-gradient(135deg, #F3E8FF, #FAF5FF); border: 1px solid var(--ap-purple-200); border-radius: 16px; display: flex; gap: 15px; justify-content: space-between; margin: 18px 0; padding: 13px; }
.ap-token-box > div { align-items: center; display: flex; gap: 10px; }
.ap-token-box i { align-items: center; background: #fff; border-radius: 10px; color: var(--ap-primary); display: flex; height: 36px; justify-content: center; width: 36px; }
.ap-token-box span { color: var(--ap-slate); display: block; font-size: 9px; }
.ap-token-box strong { color: var(--ap-ink); display: block; font-size: 11px; }
.ap-token-box input { border: 1px solid var(--ap-purple-300); border-radius: 11px; color: var(--ap-primary-dark); font-size: 14px; font-weight: 800; letter-spacing: .12em; max-width: 170px; padding: 10px 12px; text-align: center; text-transform: uppercase; }
.ap-agreement { align-items: flex-start; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 13px; color: #78350F; display: flex; font-size: 10px; font-weight: 600; gap: 9px; margin: 20px 0 15px; padding: 12px; }
.ap-agreement input { margin-top: 2px; }
.ap-start-main > .btn-lg { border-radius: 13px; font-size: 12px; font-weight: 800; min-height: 48px; padding: 12px 22px; }
.ap-secure-card { background: linear-gradient(165deg, #211A36, #4C1D95); border-radius: 24px; box-shadow: 0 22px 48px rgba(33,26,54,.2); color: #fff; overflow: hidden; padding: 25px; position: sticky; top: 72px; }
.ap-secure-card:after { background: rgba(255,255,255,.06); border-radius: 50%; content: ""; height: 150px; position: absolute; right: -60px; top: -60px; width: 150px; }
.ap-secure-card__icon { align-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.15); border-radius: 16px; display: flex; font-size: 22px; height: 52px; justify-content: center; width: 52px; }
.ap-secure-card h3 { font-size: 20px; font-weight: 800; margin: 16px 0 5px; }
.ap-secure-card > p { color: rgba(255,255,255,.64); font-size: 10px; }
.ap-secure-card ul { list-style: none; margin: 17px 0 0; padding: 0; }
.ap-secure-card li { align-items: center; border-top: 1px solid rgba(255,255,255,.09); display: grid; gap: 8px; grid-template-columns: 28px 1fr auto; padding: 12px 0; }
.ap-secure-card li > i { color: rgba(255,255,255,.35); }
.ap-secure-card li span { color: rgba(255,255,255,.65); font-size: 10px; }
.ap-secure-card li b { background: rgba(255,255,255,.08); border-radius: 999px; color: rgba(255,255,255,.45); font-size: 8px; padding: 4px 7px; }
.ap-secure-card li.is-active > i { color: #C4B5FD; }
.ap-secure-card li.is-active span { color: #fff; }
.ap-secure-card li.is-active b { background: rgba(34,197,94,.17); color: #86EFAC; }
.ap-secure-note { background: rgba(255,255,255,.08); border-radius: 11px; color: rgba(255,255,255,.7); font-size: 9px; margin-top: 14px; padding: 10px; }

/* Exam workspace */
body:has(.ap-exam-workspace) .main-footer { display: none; }
body:has(.ap-exam-workspace) .content-wrapper { min-height: calc(100vh - 50px); }
body:has(.ap-exam-workspace) .content-wrapper > .container { max-width: none; }
.ap-exam-workspace { background: #F5F3F9; min-height: calc(100vh - 50px); position: relative; }

.ap-exam-commandbar { align-items: center; background: #fff; border-bottom: 1px solid var(--ap-line); box-shadow: 0 6px 22px rgba(45,32,69,.055); display: grid; gap: 24px; grid-template-columns: minmax(240px,1fr) minmax(260px,440px) minmax(300px,1fr); min-height: 84px; padding: 12px 28px; position: sticky; top: 50px; z-index: 90; }
.ap-exam-commandbar__identity { align-items: center; display: flex; gap: 12px; min-width: 0; }
.ap-exam-commandbar__mark { align-items: center; background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)); border-radius: 14px; box-shadow: 0 9px 19px rgba(124,58,237,.24); color: #fff; display: flex; flex: 0 0 auto; font-size: 18px; height: 44px; justify-content: center; width: 44px; }
.ap-exam-commandbar__identity small { color: var(--ap-slate); display: block; font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.ap-exam-commandbar__identity h1 { color: var(--ap-ink); font-size: 14px; font-weight: 800; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-exam-commandbar__center { min-width: 0; }
.ap-exam-progress-meta { align-items: center; display: flex; font-size: 9px; justify-content: space-between; margin-bottom: 6px; }
.ap-exam-progress-meta span { color: var(--ap-slate); }
.ap-exam-progress-meta strong { color: var(--ap-primary); }
.ap-exam-progress { background: #EEEAF5; border-radius: 999px; height: 7px; overflow: hidden; }
.ap-exam-progress span { background: linear-gradient(90deg, var(--ap-primary), #A78BFA); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; }
.ap-exam-commandbar__tools { align-items: center; display: flex; gap: 8px; justify-content: flex-end; }
.ap-icon-button { align-items: center; background: #FAF9FC; border: 1px solid var(--ap-line); border-radius: 11px; color: var(--ap-slate); display: inline-flex; height: 40px; justify-content: center; position: relative; width: 40px; }
.ap-icon-button:hover { background: var(--ap-purple-50); border-color: var(--ap-purple-200); color: var(--ap-primary); }
.ap-icon-button small { bottom: 3px; font-size: 7px; position: absolute; right: 5px; }
.ap-icon-button strong { bottom: 2px; font-size: 9px; position: absolute; right: 4px; }
.ap-exam-timer { align-items: center; background: #211A36; border-radius: 13px; color: #fff; display: flex; gap: 10px; min-width: 155px; padding: 8px 12px; }
.ap-exam-timer > i { color: #C4B5FD; font-size: 17px; }
.ap-exam-timer small { color: rgba(255,255,255,.52); display: block; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.ap-exam-timer strong { display: block; font-size: 15px; letter-spacing: .04em; line-height: 1.2; }
.ap-mobile-navigator-toggle { display: none; }

.ap-exam-main { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0,1fr) 310px; margin: 0 auto; max-width: 1500px; padding: 24px 28px 34px; }
.ap-question-stage { min-width: 0; }
.ap-question-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 23px; box-shadow: var(--ap-card-shadow); overflow: hidden; }
.ap-question-card__head { align-items: center; border-bottom: 1px solid var(--ap-line); display: flex; gap: 15px; min-height: 86px; padding: 16px 20px; }
.ap-question-number { align-items: center; background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)); border-radius: 15px; box-shadow: 0 9px 19px rgba(124,58,237,.20); color: #fff; display: flex; flex: 0 0 auto; flex-direction: column; height: 54px; justify-content: center; width: 58px; }
.ap-question-number span { font-size: 7px; letter-spacing: .09em; text-transform: uppercase; }
.ap-question-number strong { font-size: 23px; line-height: 1.05; }
.ap-question-headcopy { min-width: 0; }
.ap-question-headcopy p { color: var(--ap-slate); font-size: 9px; margin: 2px 0 0; }
.ap-question-security { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ap-question-security span { background: #F8F6FC; border: 1px solid var(--ap-line); border-radius: 999px; color: var(--ap-slate); font-size: 8px; font-weight: 700; padding: 6px 8px; }
.ap-question-security i { color: var(--ap-primary); margin-right: 3px; }
.ap-question-card__body { color: #302A3D; font-size: 15px !important; line-height: 1.75 !important; min-height: 430px; padding: 27px 30px; transition: font-size .2s; }
.ap-question-card__body img { height: auto !important; max-width: 100% !important; }
.ap-question-card__body table { max-width: 100% !important; }
.ap-question-card__body hr { border-color: var(--ap-line); margin: 20px 0; }
.ap-question-card__body .form-group { margin: 0; }
.ap-question-card__body .radio { margin: 10px 0; }
.ap-question-card__body .radio label { align-items: flex-start; background: #FCFBFD; border: 1px solid var(--ap-line); border-radius: 14px; color: #3D364A; display: flex; font-size: 13px; gap: 9px; line-height: 1.55; min-height: 48px; padding: 13px 14px 13px 42px; position: relative; transition: .18s ease; width: 100%; }
.ap-question-card__body .radio label:hover { background: var(--ap-purple-50); border-color: var(--ap-purple-300); }
.ap-question-card__body .radio input { left: 15px; margin: 3px 0 0; position: absolute; transform: scale(1.15); }
.ap-question-card__body .radio label:has(input:checked) { background: var(--ap-purple-50); border-color: var(--ap-primary); box-shadow: 0 0 0 3px rgba(124,58,237,.08); color: var(--ap-purple-900); }
.ap-question-card__body textarea,
.ap-question-card__body input[type="text"] { border: 1px solid var(--ap-line) !important; border-radius: 13px !important; font-size: 13px !important; line-height: 1.65 !important; padding: 13px !important; width: 100% !important; }
.ap-question-card__body textarea:focus,
.ap-question-card__body input[type="text"]:focus { border-color: var(--ap-purple-400) !important; box-shadow: 0 0 0 4px rgba(124,58,237,.09); outline: none; }
.ap-question-card__body .btn-default { background: var(--ap-purple-100); border: 1px solid var(--ap-purple-200); border-radius: 11px; color: var(--ap-purple-700); font-weight: 700; margin-top: 9px; }
.ap-question-card__actions { align-items: center; background: #FCFBFD; border-top: 1px solid var(--ap-line); display: grid; gap: 10px; grid-template-columns: 1fr auto 1fr; padding: 15px 20px; }
.ap-question-card__actions .btn { align-items: center; border-radius: 12px; display: inline-flex; font-size: 11px; font-weight: 750; gap: 8px; justify-content: center; min-height: 44px; padding: 10px 16px; }
.ap-question-card__actions #btn-selanjutnya { justify-self: end; min-width: 165px; }
.ap-question-card__actions #btn-sebelumnya { justify-self: start; min-width: 165px; }
.ap-btn-secondary { background: #fff; border: 1px solid var(--ap-line); color: var(--ap-ink); }
.ap-btn-review { background: #FFFBEB; border: 1px solid #FDE68A; color: #A16207; }
.ap-btn-review input { accent-color: #F59E0B; height: 14px; margin: 0; width: 14px; }

.ap-question-navigator { display: grid; gap: 15px; position: sticky; top: 158px; }
.ap-question-navigator__mobile-head { display: none; }
.ap-navigator-card { background: #fff; border: 1px solid var(--ap-line); border-radius: 20px; box-shadow: 0 12px 35px rgba(50,34,81,.07); overflow: hidden; padding: 17px; }
.ap-navigator-card__head { align-items: center; display: flex; justify-content: space-between; margin-bottom: 13px; }
.ap-navigator-card__head h3 { color: var(--ap-ink); font-size: 15px; font-weight: 800; margin: 2px 0 0; }
.ap-question-grid { display: grid; gap: 7px; grid-template-columns: repeat(5,minmax(0,1fr)); max-height: 310px; overflow-y: auto; padding: 2px; }
.ap-question-grid .btn { align-items: center; border: 1px solid var(--ap-line) !important; border-radius: 10px !important; box-shadow: none !important; display: flex; font-size: 10px; font-weight: 800; height: 38px; justify-content: center; margin: 0 !important; min-width: 0; padding: 0; width: 100%; }
.ap-question-grid .btn-default { background: #F8F7FA !important; color: #8A8397 !important; }
.ap-question-grid .btn-primary { background: #EDE9FE !important; border-color: #DDD6FE !important; color: #6D28D9 !important; }
.ap-question-grid .btn-warning { background: #FEF3C7 !important; border-color: #FDE68A !important; color: #B45309 !important; }
.ap-question-grid .btn.ap-current-question { background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)) !important; border-color: transparent !important; box-shadow: 0 6px 14px rgba(124,58,237,.24) !important; color: #fff !important; transform: scale(1.04); }
.ap-question-legend { border-top: 1px solid var(--ap-line); display: grid; gap: 6px; grid-template-columns: 1fr 1fr; margin-top: 13px; padding-top: 11px; }
.ap-question-legend span { align-items: center; color: var(--ap-slate); display: flex; font-size: 8px; gap: 5px; }
.ap-question-legend i { border-radius: 4px; display: inline-block; height: 9px; width: 9px; }
.ap-question-legend .is-current { background: var(--ap-primary); }
.ap-question-legend .is-answered { background: #DDD6FE; }
.ap-question-legend .is-review { background: #FDE68A; }
.ap-question-legend .is-empty { background: #E5E7EB; }
.ap-session-card { padding: 15px; }
.ap-session-participant { align-items: center; display: flex; gap: 10px; }
.ap-session-participant div { min-width: 0; }
.ap-session-participant small { color: var(--ap-slate); display: block; font-size: 8px; }
.ap-session-participant strong { color: var(--ap-ink); display: block; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-session-participant span { color: var(--ap-slate); display: block; font-size: 8px; }
.ap-session-status-grid { background: #F8F7FB; border-radius: 12px; display: grid; grid-template-columns: repeat(3,1fr); margin: 13px 0; overflow: hidden; }
.ap-session-status-grid > div { padding: 9px 5px; text-align: center; }
.ap-session-status-grid > div + div { border-left: 1px solid var(--ap-line); }
.ap-session-status-grid span { color: var(--ap-primary); display: block; font-size: 15px; font-weight: 850; }
.ap-session-status-grid small { color: var(--ap-slate); display: block; font-size: 7px; }
.ap-camera-monitor { background: #171222; border-radius: 13px; margin-bottom: 12px; overflow: hidden; position: relative; }
.ap-camera-monitor video { aspect-ratio: 16 / 9; display: block; object-fit: cover; transform: scaleX(-1); width: 100%; }
.ap-camera-monitor__status { align-items: center; background: rgba(0,0,0,.55); bottom: 0; color: #fff; display: flex; font-size: 8px; gap: 6px; left: 0; padding: 7px 9px; position: absolute; right: 0; }
.ap-camera-monitor__status i { color: #22C55E; font-size: 7px; }
.ap-btn-finish { background: #FFF1F2; border: 1px solid #FECDD3; border-radius: 11px; color: #BE123C; font-size: 10px; font-weight: 800; min-height: 41px; width: 100%; }
.ap-btn-finish:hover { background: #FFE4E6; color: #9F1239; }
.ap-navigator-backdrop { display: none; }

.ap-integrity-alert { align-items: center; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 15px; box-shadow: 0 18px 45px rgba(120,53,15,.18); display: flex; gap: 11px; left: 50%; max-width: 520px; opacity: 0; padding: 12px 14px; pointer-events: none; position: fixed; top: 70px; transform: translate(-50%,-18px); transition: .25s ease; width: calc(100% - 28px); z-index: 5000; }
.ap-integrity-alert.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%,0); }
.ap-integrity-alert.is-critical { background: #FEF2F2; border-color: #FECACA; }
.ap-integrity-alert__icon { align-items: center; background: #FEF3C7; border-radius: 11px; color: #D97706; display: flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.ap-integrity-alert strong { color: #78350F; display: block; font-size: 11px; }
.ap-integrity-alert p { color: #92400E; font-size: 9px; margin: 2px 0 0; }
.ap-integrity-alert > button { background: transparent; border: 0; color: #A16207; margin-left: auto; padding: 5px; }

.ap-secure-gate { align-items: center; background: rgba(23,18,43,.90); backdrop-filter: blur(8px); display: flex; inset: 0; justify-content: center; padding: 20px; position: fixed; transition: opacity .3s ease; z-index: 4900; }
.ap-secure-gate.is-hidden { opacity: 0; pointer-events: none; }
.ap-secure-gate__card { background: #fff; border-radius: 25px; box-shadow: 0 32px 80px rgba(0,0,0,.28); max-width: 560px; padding: 30px; text-align: center; width: 100%; }
.ap-secure-gate__shield { align-items: center; background: linear-gradient(135deg, var(--ap-primary), var(--ap-primary-dark)); border-radius: 20px; box-shadow: 0 13px 26px rgba(124,58,237,.24); color: #fff; display: flex; font-size: 27px; height: 68px; justify-content: center; margin: 0 auto 16px; width: 68px; }
.ap-secure-gate__card h2 { color: var(--ap-ink); font-size: 24px; font-weight: 850; letter-spacing: -.04em; margin: 5px 0 7px; }
.ap-secure-gate__card > p { color: var(--ap-slate); font-size: 11px; line-height: 1.65; margin: 0 auto 18px; max-width: 430px; }
.ap-secure-gate__features { display: grid; gap: 9px; margin: 0 0 18px; text-align: left; }
.ap-secure-gate__features > div { align-items: center; background: #FAF9FC; border: 1px solid var(--ap-line); border-radius: 13px; display: flex; gap: 11px; padding: 11px; }
.ap-secure-gate__features > div > i { align-items: center; background: var(--ap-purple-100); border-radius: 10px; color: var(--ap-primary); display: flex; height: 36px; justify-content: center; width: 36px; }
.ap-secure-gate__features strong { color: var(--ap-ink); display: block; font-size: 11px; }
.ap-secure-gate__features small { color: var(--ap-slate); display: block; font-size: 9px; }
.ap-secure-gate__card .btn { border-radius: 13px; font-size: 11px; font-weight: 800; min-height: 47px; padding: 11px 20px; width: 100%; }
.ap-secure-gate__note { color: #9A94A7; display: block; font-size: 8px; margin-top: 10px; }

.ap-finish-modal .modal-dialog { max-width: 540px; }
.ap-finish-modal .modal-content { border: 0; border-radius: 22px; box-shadow: 0 28px 70px rgba(33,26,54,.26); overflow: hidden; }
.ap-finish-modal .modal-header { border: 0; padding: 25px 25px 10px; text-align: center; }
.ap-finish-modal__icon { align-items: center; background: var(--ap-purple-100); border-radius: 15px; color: var(--ap-primary); display: flex; font-size: 20px; height: 48px; justify-content: center; margin: 0 auto 11px; width: 48px; }
.ap-finish-modal h3 { color: var(--ap-ink); font-size: 20px; font-weight: 850; margin: 0 0 4px; }
.ap-finish-modal .modal-header p { color: var(--ap-slate); font-size: 10px; margin: 0; }
.ap-finish-modal .modal-body { padding: 15px 25px 20px; }
.ap-finish-summary { display: grid; gap: 9px; grid-template-columns: 1fr 1fr; }
.ap-finish-summary > div { background: #F8F7FB; border: 1px solid var(--ap-line); border-radius: 13px; padding: 12px; }
.ap-finish-summary span { color: var(--ap-slate); display: block; font-size: 8px; }
.ap-finish-summary strong { color: var(--ap-ink); display: block; font-size: 10px; margin-top: 3px; }
.ap-finish-confirm { align-items: flex-start; background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 13px; display: flex; gap: 9px; margin: 14px 0 0; padding: 12px; }
.ap-finish-confirm input { margin-top: 3px; }
.ap-finish-confirm strong { color: #78350F; display: block; font-size: 10px; }
.ap-finish-confirm small { color: #92400E; display: block; font-size: 8px; font-weight: 400; }
.ap-finish-modal .modal-footer { background: #FCFBFD; border-top: 1px solid var(--ap-line); padding: 13px 20px; }
.ap-finish-modal .modal-footer .btn { border-radius: 11px; font-size: 10px; font-weight: 750; padding: 9px 14px; }

/* Responsive modern suite */
@media (max-width: 1199px) {
  .ap-stat-grid, .ap-stat-grid--wide { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ap-student-layout { grid-template-columns: minmax(0,1fr) 280px; }
  .ap-exam-commandbar { grid-template-columns: minmax(220px,1fr) minmax(220px,360px) auto; gap: 14px; padding-left: 18px; padding-right: 18px; }
  .ap-exam-main { grid-template-columns: minmax(0,1fr) 285px; padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 991px) {
  .ap-page-heading { align-items: flex-start; flex-direction: column; }
  .ap-dashboard-hero { gap: 22px; grid-template-columns: 1fr; }
  .ap-dashboard-hero__badge { display: none; }
  .ap-stat-grid, .ap-stat-grid--wide { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap-dashboard-row > [class*="col-"] { display: block; margin-bottom: 16px; }
  .ap-system-strip { grid-template-columns: repeat(2,1fr); }
  .ap-student-layout, .ap-start-layout { grid-template-columns: 1fr; }
  .ap-student-layout aside { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
  .ap-student-side-card { margin: 0; }
  .ap-start-side { order: -1; }
  .ap-secure-card { position: static; }
  .ap-exam-commandbar { grid-template-columns: minmax(0,1fr) auto; top: 50px; }
  .ap-exam-commandbar__center { display: none; }
  .ap-mobile-navigator-toggle { display: inline-flex; }
  .ap-exam-main { display: block; padding: 16px; }
  .ap-question-navigator { background: #F8F7FB; bottom: 0; box-shadow: -16px 0 45px rgba(33,26,54,.2); display: block; max-width: 360px; overflow-y: auto; padding: 15px; position: fixed; right: 0; top: 0; transform: translateX(105%); transition: transform .25s ease; width: min(88vw,360px); z-index: 3000; }
  .ap-question-navigator.is-open { transform: translateX(0); }
  .ap-question-navigator__mobile-head { align-items: center; display: flex; justify-content: space-between; padding: 4px 3px 13px; }
  .ap-question-navigator__mobile-head strong { color: var(--ap-ink); font-size: 14px; }
  .ap-question-navigator__mobile-head button { background: #fff; border: 1px solid var(--ap-line); border-radius: 10px; height: 38px; width: 38px; }
  .ap-navigator-card { margin-bottom: 13px; }
  .ap-navigator-backdrop { background: rgba(23,18,43,.55); inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .2s; z-index: 2990; }
  .ap-navigator-backdrop.is-open { display: block; opacity: 1; pointer-events: auto; }
  .ap-question-card__body { min-height: 390px; }
}

@media (max-width: 767px) {
  .ap-dashboard-v3 { padding: 10px 14px 25px; }
  .ap-page-heading { padding: 20px 14px 8px; }
  .ap-page-heading h1 { font-size: 24px; }
  .ap-dashboard-hero { border-radius: 21px; min-height: 0; padding: 25px 22px; }
  .ap-dashboard-hero h2 { font-size: 25px; }
  .ap-stat-card { min-height: 100px; padding: 13px; }
  .ap-stat-body strong { font-size: 21px; }
  .ap-panel { border-radius: 17px; padding: 17px; }
  .ap-bar-chart { gap: 5px; height: 220px; }
  .ap-bar-chart__track { height: 160px; }
  .ap-bar-chart__label { font-size: 8px; transform: rotate(-30deg); white-space: nowrap; }
  .ap-system-strip { grid-template-columns: 1fr; }
  .ap-proctor-summary { grid-template-columns: 1fr; }
  .ap-photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ap-student-shell, .ap-start-shell { padding-left: 12px; padding-right: 12px; }
  .ap-student-hero { align-items: flex-start; border-radius: 0 0 23px 23px; flex-direction: column; gap: 20px; padding: 24px 20px; }
  .ap-student-avatar { border-radius: 17px; height: 62px; width: 62px; }
  .ap-student-hero h1 { font-size: 25px; }
  .ap-student-summary { width: 100%; }
  .ap-student-summary > div { flex: 1; min-width: 0; padding: 12px 7px; }
  .ap-student-layout aside { grid-template-columns: 1fr; }
  .ap-exam-card-grid { grid-template-columns: 1fr; }
  .ap-section-heading { align-items: flex-start; }
  .ap-start-main { border-radius: 20px; padding: 22px 18px; }
  .ap-start-main h1 { font-size: 25px; }
  .ap-confirm-grid { grid-template-columns: 1fr; }
  .ap-token-box { align-items: stretch; flex-direction: column; }
  .ap-token-box input { max-width: none; width: 100%; }
  .ap-exam-commandbar { min-height: 74px; padding: 9px 12px; top: 50px; }
  .ap-exam-commandbar__mark { border-radius: 11px; height: 39px; width: 39px; }
  .ap-exam-commandbar__identity small { display: none; }
  .ap-exam-commandbar__identity h1 { font-size: 12px; }
  .ap-exam-commandbar__tools .ap-icon-button:not(.ap-mobile-navigator-toggle) { display: none; }
  .ap-exam-timer { min-width: 115px; padding: 7px 9px; }
  .ap-exam-timer small { display: none; }
  .ap-exam-timer strong { font-size: 13px; }
  .ap-exam-main { padding: 10px; }
  .ap-question-card { border-radius: 18px; }
  .ap-question-card__head { align-items: flex-start; min-height: 0; padding: 13px; }
  .ap-question-number { border-radius: 12px; height: 48px; width: 50px; }
  .ap-question-security { display: none; }
  .ap-question-card__body { font-size: 14px !important; line-height: 1.7 !important; min-height: calc(100vh - 300px); padding: 20px 16px; }
  .ap-question-card__body .radio label { font-size: 12px; padding: 12px 11px 12px 38px; }
  .ap-question-card__actions { grid-template-columns: 1fr 1fr; padding: 11px; }
  .ap-question-card__actions #btn-sebelumnya,
  .ap-question-card__actions #btn-selanjutnya { min-width: 0; width: 100%; }
  .ap-question-card__actions #btn-ragu { grid-column: 1 / -1; grid-row: 1; }
  .ap-question-card__actions #btn-sebelumnya { grid-column: 1; grid-row: 2; }
  .ap-question-card__actions #btn-selanjutnya { grid-column: 2; grid-row: 2; }
  .ap-question-card__actions .btn span { font-size: 9px; }
  .ap-finish-summary { grid-template-columns: 1fr; }
  .ap-secure-gate__card { border-radius: 20px; padding: 23px 18px; }
  .ap-secure-gate__card h2 { font-size: 21px; }
}

@media (max-width: 480px) {
  .ap-stat-grid, .ap-stat-grid--wide { grid-template-columns: 1fr; }
  .ap-stat-card { min-height: 90px; }
  .ap-dashboard-hero__meta { align-items: flex-start; flex-direction: column; gap: 7px; }
  .ap-photo-grid { grid-template-columns: 1fr; }
  .ap-exam-card { padding: 17px; }
  .ap-exam-meta-grid { grid-template-columns: 1fr; }
  .ap-exam-card__footer { align-items: stretch; flex-direction: column; }
  .ap-exam-card__footer .btn { width: 100%; }
  .ap-student-hero__profile { align-items: flex-start; }
  .ap-student-avatar { height: 52px; width: 52px; }
  .ap-student-summary strong { font-size: 20px; }
  .ap-question-headcopy p { display: none; }
  .ap-question-card__actions .btn { padding-left: 8px; padding-right: 8px; }
  .ap-question-card__actions .btn i { display: none; }
  .ap-integrity-alert { top: 58px; }
}

@media print {
  .ap-dashboard-hero,
  .ap-exam-commandbar,
  .ap-question-navigator,
  .ap-integrity-alert,
  .ap-secure-gate { box-shadow: none !important; }
}

/* Participant card generator */
.ap-card-print-form { align-items: center; background: linear-gradient(135deg,#FAF5FF,#FFF); border: 1px solid var(--ap-purple-200); border-radius: 18px; display: grid; gap: 16px; grid-template-columns: 64px minmax(0,1fr) auto; padding: 20px; }
.ap-card-print-form__icon { align-items: center; background: linear-gradient(135deg,var(--ap-primary),var(--ap-primary-dark)); border-radius: 17px; box-shadow: 0 11px 23px rgba(124,58,237,.22); color: #fff; display: flex; font-size: 25px; height: 64px; justify-content: center; width: 64px; }
.ap-card-print-form .form-group { margin: 0; }
.ap-card-print-form label { color: var(--ap-ink); font-size: 11px; }
.ap-card-print-form select { border-color: var(--ap-purple-200); border-radius: 12px; font-size: 12px; min-height: 45px; }
.ap-card-print-form .help-block { color: var(--ap-slate); font-size: 9px; margin: 5px 0 0; }
.ap-card-print-form .btn { border-radius: 12px; font-size: 10px; font-weight: 800; min-height: 45px; white-space: nowrap; }
.ap-card-guide ul { list-style: none; margin: 0; padding: 0; }
.ap-card-guide li { align-items: flex-start; border-top: 1px solid var(--ap-line); display: flex; gap: 10px; padding: 12px 0; }
.ap-card-guide li:first-child { border-top: 0; padding-top: 0; }
.ap-card-guide li > i { align-items: center; background: #DCFCE7; border-radius: 10px; color: #16A34A; display: flex; flex: 0 0 auto; height: 31px; justify-content: center; width: 31px; }
.ap-card-guide strong { color: var(--ap-ink); display: block; font-size: 11px; }
.ap-card-guide small { color: var(--ap-slate); display: block; font-size: 9px; margin-top: 2px; }
@media(max-width:767px){.ap-card-print-form{align-items:stretch;grid-template-columns:1fr}.ap-card-print-form__icon{height:52px;width:52px}.ap-card-print-form .btn{width:100%}}
.ap-dashboard-hero__badge { align-items:center; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:999px; color:#EDE9FE; display:inline-flex; font-size:9px; font-weight:800; gap:6px; letter-spacing:.05em; padding:6px 9px; text-transform:uppercase; }
.ap-ring > div { align-items:center; display:flex; flex-direction:column; justify-content:center; position:relative; text-align:center; z-index:1; }
.ap-ring > div span { color:rgba(255,255,255,.62); font-size:7px; line-height:1.1; margin-top:2px; }
.ap-proctor-summary > div { background:#fff; border:1px solid var(--ap-line); border-radius:16px; box-shadow:0 9px 25px rgba(50,34,81,.055); padding:15px; }
.ap-proctor-summary > div span { color:var(--ap-slate); display:block; font-size:8px; letter-spacing:.07em; text-transform:uppercase; }
.ap-proctor-summary > div strong { color:var(--ap-ink); display:block; font-size:16px; font-weight:800; margin-top:3px; }
.ap-count-badge.is-danger { background:#FEE2E2; border-color:#FECACA; color:#B91C1C; }
.ap-photo-card > span { color:var(--ap-ink); display:block; font-size:10px; font-weight:700; padding:9px 10px; }
.ap-photo-card > span small { color:var(--ap-slate); display:block; font-size:8px; font-weight:400; margin-top:2px; }
.ap-security-setting-head > span { align-items:center; background:var(--ap-purple-100); border-radius:11px; color:var(--ap-primary); display:flex; flex:0 0 auto; font-size:17px; height:39px; justify-content:center; width:39px; }
.ap-exam-page .main-footer { display:none; }
.ap-exam-page .content-wrapper { min-height:calc(100vh - 50px); }