/*
 * PTENOTE dashboard theme.
 * Re-skins the Metronic dashboard with the ptenote.com design language:
 * Inter type, #FFC120 yellow, #1A1A1A ink, #B45309 amber accents,
 * cream #FFF9E6 surfaces, #E5E5E5 hairlines, 20px cards and pill buttons.
 * Visual rules only: sizes, positions and behaviour of the layout are untouched.
 */
.pn-theme {
  --pn-yellow: #FFC120;
  --pn-yellow-hover: #E6AD00;
  --pn-yellow-soft: #FFF4D6;
  --pn-cream: #FFF9E6;
  --pn-ink: #1A1A1A;
  --pn-ink-soft: #2D2D2D;
  --pn-ink-hover: #333333;
  --pn-amber: #B45309;
  --pn-text: #1A1A1A;
  --pn-muted: #666666;
  --pn-subtle: #AAAAAA;
  --pn-canvas: #F5F5F5;
  --pn-paper: #FFFFFF;
  --pn-line: #E5E5E5;
  --pn-line-soft: #F0F0F0;
  --pn-success: #1F7A4D;
  --pn-success-soft: #ECFDF3;
  --pn-danger: #B42318;
  --pn-danger-soft: #FEF3F2;
  --pn-radius-card: 20px;
  --pn-radius-control: 12px;
  --pn-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
  --pn-shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.08);
  --pn-shadow-yellow: 0 4px 15px rgba(255, 193, 32, 0.3);
}

/* ---------- Base ---------- */
.pn-theme body,
.pn-theme .m-body,
.pn-theme .m-wrapper { background-color: var(--pn-canvas); }
.pn-theme body { color: var(--pn-text); font-family: 'Inter', sans-serif; }
.pn-theme body, .pn-theme h1, .pn-theme h2, .pn-theme h3, .pn-theme h4, .pn-theme h5, .pn-theme h6,
.pn-theme p, .pn-theme input, .pn-theme button, .pn-theme select, .pn-theme textarea, .pn-theme table,
.pn-theme .btn, .pn-theme .form-control, .pn-theme .tooltip, .pn-theme .popover,
.pn-theme .m-menu__link-text, .pn-theme .m-subheader__title, .pn-theme .m-portlet__head-text,
.pn-theme .m-widget24, .pn-theme .m-nav__link-text, .pn-theme .m-card-user__name, .pn-theme .m-card-user__email,
.pn-theme .card-title, .pn-theme .display-4, .pn-theme .lead, .pn-theme .nav-link {
  font-family: 'Inter', sans-serif !important;
}
.pn-theme h1, .pn-theme h2, .pn-theme h3, .pn-theme h4, .pn-theme h5, .pn-theme h6 { color: var(--pn-ink); letter-spacing: -0.02em; }
.pn-theme ::selection { background: var(--pn-yellow); color: var(--pn-ink); }
.pn-theme a:focus-visible, .pn-theme button:focus-visible, .pn-theme .btn:focus-visible,
.pn-theme input:focus-visible, .pn-theme [tabindex]:focus-visible { outline: 3px solid var(--pn-amber); outline-offset: 3px; }
.pn-theme .m-content a:not(.btn):not(.nav-link):not(.page-link) { color: var(--pn-amber); }
.pn-theme .m-content a:not(.btn):not(.nav-link):not(.page-link):hover { color: var(--pn-ink); }
.pn-theme .text-muted { color: var(--pn-muted) !important; }

/* ---------- Header ---------- */
.pn-theme .m-header {
  background: var(--pn-paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 var(--pn-line) !important;
}
/* The logo area is white like the ptenote.com navigation bar; the official logo is black. */
.pn-theme .m-brand,
.pn-theme .m-brand.m-brand--skin-dark { background: var(--pn-paper) !important; }
.pn-theme .m-brand .pn-brand-logo { display: block; width: 126px; max-width: 100%; height: auto; }
@media (min-width: 1025px) {
  .pn-theme .m-brand { padding-left: 12px !important; padding-right: 12px !important; }
}
.pn-theme .m-brand .m-brand__tools .m-brand__toggler span,
.pn-theme .m-brand .m-brand__tools .m-brand__toggler span::before,
.pn-theme .m-brand .m-brand__tools .m-brand__toggler span::after { background: var(--pn-ink) !important; }
.pn-theme .m-brand .m-brand__tools .m-brand__toggler:hover span,
.pn-theme .m-brand .m-brand__tools .m-brand__toggler:hover span::before,
.pn-theme .m-brand .m-brand__tools .m-brand__toggler:hover span::after { background: var(--pn-amber) !important; }
.pn-theme .m-brand .m-brand__tools .m-brand__icon > i { color: var(--pn-ink); }
.pn-theme .m-brand .m-brand__tools .m-brand__icon:hover > i { color: var(--pn-amber); }

.pn-theme .m-topbar .m-topbar__userpic img {
  border: 2px solid var(--pn-yellow);
  padding: 2px;
  background: var(--pn-paper);
}
.pn-theme .m-topbar .btn { font-weight: 700; }

/* Account dropdown */
.pn-theme .m-dropdown .m-dropdown__wrapper .m-dropdown__inner {
  border-radius: var(--pn-radius-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.pn-theme .m-topbar__user-profile .m-dropdown__header {
  background: radial-gradient(ellipse at top right, rgba(255, 193, 32, 0.35), transparent 60%), var(--pn-ink) !important;
}
.pn-theme .m-topbar__user-profile .m-dropdown__arrow { color: var(--pn-ink) !important; }
.pn-theme .m-card-user .m-card-user__pic img { border: 2px solid var(--pn-yellow); }
.pn-theme .m-card-user.m-card-user--skin-dark .m-card-user__details .m-card-user__name { color: #FFFFFF; font-weight: 700 !important; }
.pn-theme .m-card-user.m-card-user--skin-dark .m-card-user__details .m-card-user__email { color: #D1D1D1; }
.pn-theme .m-dropdown__body .m-nav .m-nav__item > .m-nav__link .m-nav__link-icon,
.pn-theme .m-dropdown__body .m-nav .m-nav__item > .m-nav__link .m-nav__link-text { color: var(--pn-ink-soft); }
.pn-theme .m-dropdown__body .m-nav .m-nav__item > .m-nav__link:hover .m-nav__link-icon,
.pn-theme .m-dropdown__body .m-nav .m-nav__item > .m-nav__link:hover .m-nav__link-text { color: var(--pn-amber); }
.pn-theme .m-dropdown__body .m-nav .m-nav__separator { border-color: var(--pn-line-soft); }

/* ---------- Left navigation ---------- */
.pn-theme .m-aside-left,
.pn-theme .m-aside-left.m-aside-left--skin-dark,
.pn-theme #m_ver_menu { background-color: var(--pn-ink) !important; }
.pn-theme .m-aside-left-close.m-aside-left-close--skin-dark { background: var(--pn-ink-soft); }
.pn-theme .m-aside-left-close.m-aside-left-close--skin-dark > i { color: #E5E5E5; }
.pn-theme #m_ver_menu .m-menu__nav { padding-top: 22px; }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item:hover,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--open,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--expanded { background-color: transparent !important; }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link {
  margin: 0 12px;
  width: calc(100% - 24px);
  border-radius: 14px;
  transition: background-color 0.2s ease;
}
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-icon { color: var(--pn-subtle) !important; transition: color 0.2s ease; }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item > .m-menu__link .m-menu__link-text { color: #E5E5E5 !important; font-weight: 500; }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link { background-color: var(--pn-ink-soft); }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item:hover > .m-menu__link .m-menu__link-icon { color: var(--pn-yellow) !important; }
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link {
  background-color: var(--pn-yellow);
  box-shadow: var(--pn-shadow-yellow);
}
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-icon,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--open > .m-menu__link .m-menu__link-text,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-icon,
.pn-theme #m_ver_menu .m-menu__nav > .m-menu__item.m-menu__item--expanded > .m-menu__link .m-menu__link-text {
  color: var(--pn-ink) !important;
  font-weight: 700;
}
/* The notch pointing at the content matches the new page background. */
.pn-theme #m_ver_menu .m-menu__item-here { color: var(--pn-canvas) !important; }
.pn-theme #m_ver_menu .m-menu__link-badge .m-badge { background: var(--pn-yellow); color: var(--pn-ink); font-weight: 700; }
.pn-theme #m_ver_menu .m-menu__item--open .m-menu__link-badge .m-badge,
.pn-theme #m_ver_menu .m-menu__item--expanded .m-menu__link-badge .m-badge { background: var(--pn-ink); color: var(--pn-yellow); }

/* "New" tag (replaces the old image badge) */
.pn-new-badge {
  display: inline-block;
  vertical-align: top;
  margin: -6px -26px 0 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--pn-yellow);
  color: var(--pn-ink);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pn-theme #m_ver_menu .m-menu__item--open .pn-new-badge,
.pn-theme #m_ver_menu .m-menu__item--expanded .pn-new-badge { background: var(--pn-ink); color: var(--pn-yellow); }
.pn-theme .m-content .pn-new-badge { margin: -10px 0 0 4px; }

/* ---------- Page heading ---------- */
.pn-theme .m-subheader .m-subheader__title {
  color: var(--pn-ink);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.pn-theme .m-subheader .m-subheader__title.m-subheader__title--separator { border-right-color: var(--pn-line); }
.pn-theme .upgrade-notice {
  padding: 8px 16px;
  border: 1px solid rgba(255, 193, 32, 0.35);
  border-radius: 999px;
  background: linear-gradient(to right, var(--pn-cream), #FFF3CC);
  color: #614712;
  font-size: 13px;
  font-weight: 500;
}
.pn-theme .upgrade-notice a,
.pn-theme .upgrade-notice a.text-warning { color: var(--pn-amber) !important; font-weight: 700; }

/* ---------- Cards and portlets ---------- */
.pn-theme .m-content .m-portlet,
.pn-theme .m-content .card {
  background: var(--pn-paper);
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius-card);
  box-shadow: var(--pn-shadow-card);
}
.pn-theme .m-content .m-portlet .m-portlet__head { border-bottom-color: var(--pn-line-soft); }
.pn-theme .m-content .m-portlet .m-portlet__head .m-portlet__head-text,
.pn-theme .m-content .card .card-title { color: var(--pn-ink); font-weight: 700; letter-spacing: -0.02em; }
.pn-theme .m-content .m-portlet .m-portlet__head .m-portlet__head-icon { color: var(--pn-amber); }
.pn-theme .m-content .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--pn-line-soft);
  border-radius: var(--pn-radius-card) var(--pn-radius-card) 0 0;
}
.pn-theme .m-content .card .card-header.card-head-inverse {
  background: var(--pn-ink);
  border-bottom: 0;
}
.pn-theme .m-content .card .card-header.card-head-inverse .card-title,
.pn-theme .m-content .card .card-header.card-head-inverse .heading-elements a { color: #FFFFFF; }
.pn-theme .m-content .m-row--col-separator-xl > div { border-color: var(--pn-line-soft) !important; }
.pn-theme .border-right-grey,
.pn-theme .border-right-blue-grey { border-right-color: var(--pn-line-soft) !important; }

/* Stat widgets (test grid and analysis) */
.pn-theme .m-widget24 .m-widget24__item h3 { color: var(--pn-ink); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; }
.pn-theme .m-widget24 .m-widget24__item .m-widget24__title { color: var(--pn-ink); font-weight: 700; }
.pn-theme .m-widget24 .m-widget24__item .m-widget24__desc,
.pn-theme .m-widget24 .m-widget24__item .m-widget24__change { color: var(--pn-muted); }
.pn-theme .m-widget24 .m-widget24__item .m-widget24__number { color: var(--pn-ink); font-weight: 600; }
.pn-theme .m-widget24 .m-widget24__item .m-widget24__stats { font-weight: 800; }

/* Progress bars */
.pn-theme .m-content .progress { background-color: var(--pn-line-soft); border-radius: 999px; }
.pn-theme .m-content .progress .progress-bar { border-radius: 999px; }

/* Score colours used by the dashboard, analysis and stat widgets */
.pn-theme .m--font-brand { color: var(--pn-amber) !important; }
.pn-theme .m--bg-brand { background-color: var(--pn-yellow) !important; }
.pn-theme .m--font-info, .pn-theme .m-content .text-info { color: var(--pn-ink) !important; }
.pn-theme .m--bg-info, .pn-theme .m-content .bg-info { background-color: var(--pn-ink) !important; }
.pn-theme .m--font-success, .pn-theme .m-content .text-success { color: var(--pn-success) !important; }
.pn-theme .m--bg-success, .pn-theme .m-content .bg-success { background-color: var(--pn-success) !important; }
.pn-theme .m--font-danger, .pn-theme .m-content .text-danger { color: var(--pn-danger) !important; }
.pn-theme .m--bg-danger, .pn-theme .m-content .bg-danger { background-color: var(--pn-danger) !important; }
.pn-theme .m--font-warning, .pn-theme .m-content .text-warning { color: var(--pn-amber) !important; }
.pn-theme .m--bg-warning, .pn-theme .m-content .bg-warning { background-color: var(--pn-yellow) !important; }

/* Icon tile used in place of the old clip-art images */
.pn-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--pn-cream);
  border: 1px solid rgba(255, 193, 32, 0.3);
  color: var(--pn-amber);
  font-size: 26px;
  line-height: 1;
}
.pn-stat-icon > i { font-size: 26px; line-height: 1; }

/* ---------- Buttons ---------- */
.pn-theme .btn {
  border-radius: 999px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pn-theme .btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.pn-theme .btn.disabled, .pn-theme .btn:disabled { opacity: 0.45; box-shadow: none !important; transform: none; }

/* Primary: yellow pill with ink text */
.pn-theme .btn-primary,
.pn-theme .btn-warning,
.pn-theme .btn-attempt,
.pn-theme button.btn.test-button-attempt,
.pn-theme .m-subheader .btn-primary {
  background-color: var(--pn-yellow) !important;
  border-color: var(--pn-yellow) !important;
  color: var(--pn-ink) !important;
  box-shadow: var(--pn-shadow-yellow);
}
.pn-theme .btn-primary:not(:disabled):not(.disabled):hover,
.pn-theme .btn-warning:not(:disabled):not(.disabled):hover,
.pn-theme .btn-attempt:not(:disabled):not(.disabled):hover,
.pn-theme button.btn.test-button-attempt:hover {
  background-color: var(--pn-yellow-hover) !important;
  border-color: var(--pn-yellow-hover) !important;
  color: var(--pn-ink) !important;
}

/* Continue a test: soft yellow with a yellow outline */
.pn-theme .btn-resume,
.pn-theme .btn-continue,
.pn-theme button.btn.test-button-continue {
  background-color: var(--pn-yellow-soft) !important;
  border: 2px solid var(--pn-yellow) !important;
  color: var(--pn-ink) !important;
}
.pn-theme .btn-resume:hover,
.pn-theme .btn-continue:hover,
.pn-theme button.btn.test-button-continue:hover { background-color: var(--pn-yellow) !important; }

/* Secondary: ink pill with white text */
.pn-theme .btn-success,
.pn-theme .btn-review,
.pn-theme .btn-info,
.pn-theme button.btn.test-button-review,
.pn-theme .m-subheader .btn-review,
.pn-theme .m-subheader .btn-success {
  background-color: var(--pn-ink) !important;
  border-color: var(--pn-ink) !important;
  color: #FFFFFF !important;
}
.pn-theme .btn-success:not(:disabled):not(.disabled):hover,
.pn-theme .btn-review:not(:disabled):not(.disabled):hover,
.pn-theme .btn-info:not(:disabled):not(.disabled):hover,
.pn-theme button.btn.test-button-review:hover {
  background-color: var(--pn-ink-hover) !important;
  border-color: var(--pn-ink-hover) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.pn-theme .btn-success i, .pn-theme .btn-review i, .pn-theme .btn-info i { color: var(--pn-yellow); }

/* Analysis: amber pill */
.pn-theme .btn-analysis,
.pn-theme button.btn.test-button-analysis {
  background-color: var(--pn-amber) !important;
  border-color: var(--pn-amber) !important;
  color: #FFFFFF !important;
}
.pn-theme .btn-analysis:hover,
.pn-theme button.btn.test-button-analysis:hover { background-color: #92400E !important; border-color: #92400E !important; }

/* Quiet: white pill with hairline border */
.pn-theme .btn-secondary,
.pn-theme .btn-locked,
.pn-theme .btn-view,
.pn-theme .btn-outline-primary {
  background-color: var(--pn-paper) !important;
  border: 2px solid var(--pn-line) !important;
  color: var(--pn-ink) !important;
}
.pn-theme .btn-secondary:not(:disabled):not(.disabled):hover,
.pn-theme .btn-locked:hover,
.pn-theme .btn-view:hover,
.pn-theme .btn-outline-primary:hover {
  border-color: var(--pn-yellow) !important;
  background-color: rgba(255, 193, 32, 0.1) !important;
}
.pn-theme .btn-danger { background-color: var(--pn-danger) !important; border-color: var(--pn-danger) !important; color: #FFFFFF !important; }

/* Progress bars in the test grid pick up the button colour */
.pn-theme .progress-bar.btn-test-attempt { background-color: var(--pn-yellow) !important; }
.pn-theme .progress-bar.btn-test-resume,
.pn-theme .progress-bar.btn-test-continue { background-color: var(--pn-yellow-hover) !important; }
.pn-theme .progress-bar.btn-test-review { background-color: var(--pn-ink) !important; }
.pn-theme .progress-bar.btn-test-analysis { background-color: var(--pn-amber) !important; }

/* ---------- Forms ---------- */
.pn-theme form:focus,
.pn-theme form :focus,
.pn-theme input:focus,
.pn-theme select:focus,
.pn-theme textarea:focus {
  outline: none !important;
}
.pn-theme input:focus,
.pn-theme select:focus,
.pn-theme textarea:focus {
  box-shadow: none !important;
}
.pn-theme .m-content .form-control,
.pn-theme .m-content select,
.pn-theme .m-content .dataTables_filter input,
.pn-theme .m-content .dataTables_length select {
  border: 1px solid var(--pn-line);
  border-radius: var(--pn-radius-control);
  color: var(--pn-ink);
  background-color: var(--pn-paper);
}
.pn-theme .m-content .form-control:focus,
.pn-theme .m-content select:focus,
.pn-theme .m-content .dataTables_filter input:focus {
  border-color: var(--pn-yellow);
  box-shadow: none;
  outline: none;
}
.pn-theme .m-content .form-control::placeholder { color: var(--pn-subtle); }
.pn-theme .m-content label { color: var(--pn-ink-soft); font-weight: 600; }
.pn-theme .m-content .form-section { color: var(--pn-ink); border-bottom-color: var(--pn-line); font-weight: 700; }
.pn-theme .m-content .form-section i { color: var(--pn-amber); }
.pn-theme .m-content input[type="checkbox"],
.pn-theme .m-content input[type="radio"] { accent-color: var(--pn-yellow); }

/* ---------- Tables ---------- */
.pn-theme .m-content table.table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pn-paper);
  border: 1px solid var(--pn-line);
  border-radius: 16px;
  overflow: hidden;
}
.pn-theme .m-content table.table thead th {
  background: var(--pn-ink) !important;
  color: #FFFFFF !important;
  border-color: var(--pn-ink) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.pn-theme .m-content table.table td,
.pn-theme .m-content table.table tbody th {
  border-color: var(--pn-line-soft);
  vertical-align: middle;
}
.pn-theme .m-content table.table.table-bordered td,
.pn-theme .m-content table.table.table-bordered th { border-width: 0 0 1px 0; }
.pn-theme .m-content .table-striped tbody tr:nth-of-type(odd) { background-color: #FAFAFA; }
.pn-theme .m-content table.table tbody tr:hover { background-color: #FFFDF6; }
.pn-theme .m-content table.table tbody tr:last-child td,
.pn-theme .m-content table.table tbody tr:last-child th { border-bottom: 0; }
/* DataTables sort arrows sit on the dark header */
.pn-theme .m-content table.dataTable thead .sorting,
.pn-theme .m-content table.dataTable thead .sorting_asc,
.pn-theme .m-content table.dataTable thead .sorting_desc { background-color: var(--pn-ink) !important; }

/* DataTables controls */
.pn-theme .m-content .dataTables_wrapper { color: var(--pn-muted); }
.pn-theme .m-content .dataTables_wrapper .dataTables_info { color: var(--pn-muted); }
.pn-theme .m-content .page-link,
.pn-theme .m-content .dataTables_wrapper .paginate_button {
  color: var(--pn-ink) !important;
  border-color: var(--pn-line) !important;
  background: var(--pn-paper) !important;
}
.pn-theme .m-content .page-item:first-child .page-link { border-radius: 999px 0 0 999px; }
.pn-theme .m-content .page-item:last-child .page-link { border-radius: 0 999px 999px 0; }
.pn-theme .m-content .page-item.active .page-link,
.pn-theme .m-content .dataTables_wrapper .paginate_button.current {
  background: var(--pn-yellow) !important;
  border-color: var(--pn-yellow) !important;
  color: var(--pn-ink) !important;
  font-weight: 700;
}
.pn-theme .m-content .page-link:hover { background: rgba(255, 193, 32, 0.1) !important; }
.pn-theme .m-content .page-link:focus { box-shadow: 0 0 0 3px rgba(255, 193, 32, 0.25); }

/* ---------- Alerts ---------- */
.pn-theme .m-content .alert { border-radius: 14px; border-width: 1px; font-weight: 500; }
.pn-theme .m-content .alert-success { background: var(--pn-success-soft); border-color: #ABEFC6; color: #05603A; }
.pn-theme .m-content .alert-warning { background: var(--pn-cream); border-color: #FDE68A; color: #614712 !important; }
.pn-theme .m-content .alert-danger { background: var(--pn-danger-soft); border-color: #FECDCA; color: #7A271A; }
.pn-theme .m-content .alert-info,
.pn-theme .m-content .m-alert--default { background: var(--pn-canvas); border-color: var(--pn-line); color: var(--pn-ink-soft); }

/* ---------- Tabs and pills ---------- */
.pn-theme .m-content .nav-tabs { border-bottom-color: var(--pn-line); }
.pn-theme .m-content .nav-tabs .nav-link { color: var(--pn-muted); font-weight: 600; border: 0; border-bottom: 3px solid transparent; }
.pn-theme .m-content .nav-tabs .nav-link:hover { color: var(--pn-ink); border-bottom-color: rgba(255, 193, 32, 0.5); }
.pn-theme .m-content .nav-tabs .nav-link.active,
.pn-theme .m-content .nav-tabs .nav-link.active:hover { color: var(--pn-ink); background: transparent; border-bottom-color: var(--pn-yellow); }
.pn-theme .m-content .nav-tabs .nav-link i { color: var(--pn-amber); }
.pn-theme .m-content .nav-pills .nav-link { color: var(--pn-muted); border-radius: 999px; }
.pn-theme .m-content .nav-pills .nav-link.active,
.pn-theme .m-content .nav-pills .show > .nav-link { background: var(--pn-yellow); color: var(--pn-ink); }

/* ---------- Misc ---------- */
.pn-theme .m-badge.m-badge--danger { background: var(--pn-yellow); color: var(--pn-ink); font-weight: 700; }
.pn-theme .tooltip .tooltip-inner { background: var(--pn-ink); color: #FFFFFF; border-radius: 10px; font-weight: 500; }
.pn-theme .tooltip.bs-tooltip-top .arrow::before { border-top-color: var(--pn-ink); }
.pn-theme .tooltip.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--pn-ink); }
.pn-theme .m-scroll-top { background: var(--pn-ink); border-radius: 14px; box-shadow: var(--pn-shadow-hover); }
.pn-theme .m-scroll-top > i { color: var(--pn-yellow); }
.pn-theme .m-scroll-top:hover { background: var(--pn-yellow); }
.pn-theme .m-scroll-top:hover > i { color: var(--pn-ink); }
.pn-theme .m-footer { background: var(--pn-paper); border-top: 1px solid var(--pn-line); }
.pn-theme .m-footer .m-footer__copyright, .pn-theme .m-footer a { color: var(--pn-muted); }

/* ---------- Dashboard score summary (test_layout) ---------- */
.pn-theme .m-content .font-large-2 { color: var(--pn-ink); font-weight: 700; letter-spacing: -0.03em; }
.pn-theme .m-content .card-header + .card-content canvas { border-radius: 0 0 var(--pn-radius-card) var(--pn-radius-card); }

/* ---------- Test analysis ---------- */
.pn-theme .score-knob {
  background: radial-gradient(circle at 50% 35%, #FFFFFF 0%, var(--pn-cream) 100%);
  color: var(--pn-ink);
  font-weight: 800;
  letter-spacing: -0.03em;
  box-shadow: var(--pn-shadow-card);
}
.pn-theme .score-knob.listening { border-color: var(--pn-ink) !important; }
.pn-theme .score-knob.reading { border-color: var(--pn-yellow) !important; }
.pn-theme .score-knob.speaking { border-color: var(--pn-amber) !important; }
.pn-theme .score-knob.writing { border-color: #A67C52 !important; }
.pn-theme .listening.spining-loader::after { border-color: var(--pn-ink) transparent var(--pn-ink) transparent !important; }
.pn-theme .reading.spining-loader::after { border-color: var(--pn-yellow) transparent var(--pn-yellow) transparent !important; }
.pn-theme .speaking.spining-loader::after { border-color: var(--pn-amber) transparent var(--pn-amber) transparent !important; }
.pn-theme .writing.spining-loader::after { border-color: #A67C52 transparent #A67C52 transparent !important; }
.pn-theme .spining-loader .loading-text { color: var(--pn-ink); font-weight: 800; }
.pn-theme .m-content .display-4 { color: var(--pn-ink); font-weight: 600; letter-spacing: -0.02em; }

/* Result stat row: time, correct, partially correct, incorrect */
.pn-theme .pn-result-stats .col-xl-3:nth-child(1) .m-widget24__stats { color: var(--pn-amber) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(1) .progress-bar { background-color: var(--pn-yellow) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(2) .m-widget24__stats { color: var(--pn-success) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(2) .progress-bar { background-color: var(--pn-success) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(3) .m-widget24__stats { color: var(--pn-amber) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(3) .progress-bar { background-color: #F59E0B !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(4) .m-widget24__stats { color: var(--pn-danger) !important; }
.pn-theme .pn-result-stats .col-xl-3:nth-child(4) .progress-bar { background-color: var(--pn-danger) !important; }

/* Question result rows */
.pn-theme .m-content tr.bg-danger.white.table-correct { background: var(--pn-success-soft) !important; color: #05603A !important; }
.pn-theme .m-content tr.bg-danger.white.table-partially-correct { background: var(--pn-yellow-soft) !important; color: #6B4A00 !important; }
.pn-theme .m-content tr.bg-danger.white.table-incorrect { background: var(--pn-danger-soft) !important; color: #7A271A !important; }
.pn-theme .m-content tr.bg-danger.white th,
.pn-theme .m-content tr.bg-danger.white td { border-color: rgba(0, 0, 0, 0.05); }

/* ---------- Packages / upgrade pricing ---------- */
.pn-theme .pn-pricing-band {
  background: radial-gradient(ellipse at top right, rgba(255, 193, 32, 0.28), transparent 60%), var(--pn-ink) !important;
}
.pn-theme .pn-pricing .card { border-radius: var(--pn-radius-card) !important; }
.pn-theme .pn-pricing > .container > .card,
.pn-theme .pn-pricing .container.pricing-container > .card { overflow: hidden; border: 1px solid var(--pn-line); }
.pn-theme .pn-pricing h3.text-white { font-weight: 800; letter-spacing: -0.03em; }
.pn-theme .pn-pricing .nav-pills.nav-primary {
  padding: 6px;
  border-radius: 999px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.pn-theme .pn-pricing .nav-pills .nav-link {
  border-radius: 999px;
  color: var(--pn-muted);
  cursor: pointer;
}
.pn-theme .pn-pricing .nav-pills .nav-link.active,
.pn-theme .pn-pricing .nav-pills .nav-link.active:hover {
  background-color: var(--pn-yellow) !important;
  color: var(--pn-ink) !important;
  box-shadow: var(--pn-shadow-yellow);
}
.pn-theme .pn-pricing section.pricing h1 { color: var(--pn-ink); font-weight: 800; letter-spacing: -0.03em; }
.pn-theme .pn-pricing section.pricing h1 u { text-decoration-color: var(--pn-yellow); text-decoration-thickness: 4px; text-underline-offset: 8px; }
.pn-theme .pn-pricing section.pricing p { color: var(--pn-muted); }
.pn-theme .pn-pricing .packages-div > .card {
  border: 1px solid var(--pn-line) !important;
  border-radius: var(--pn-radius-card) !important;
  overflow: hidden;
  box-shadow: var(--pn-shadow-card);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.pn-theme .pn-pricing .packages-div > .card:hover {
  border-color: var(--pn-yellow) !important;
  box-shadow: var(--pn-shadow-hover);
}
.pn-theme .pn-pricing .pricing-divider { background-color: var(--pn-ink) !important; border-radius: 0 !important; }
.pn-theme .pn-pricing .pricing-divider h3 { color: #FFFFFF !important; font-weight: 800; }
.pn-theme .pn-pricing .packages-div .card-body { box-shadow: none !important; border-radius: 0 !important; }
.pn-theme .pn-pricing .packages-div .card-title { color: var(--pn-ink); font-weight: 800; letter-spacing: -0.03em; }
.pn-theme .pn-pricing .packages-div ul li { color: var(--pn-ink-soft); }
.pn-theme .pn-pricing .packages-div hr { border-top-color: var(--pn-line-soft); }
.pn-theme .pn-pricing .packages-div del { color: var(--pn-subtle); }
.pn-theme .pn-pricing .packages-div li b { color: var(--pn-ink); }
.pn-theme .pn-pricing .qnt-buttons {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pn-paper) !important;
  border: 2px solid var(--pn-line) !important;
  color: var(--pn-ink) !important;
}
.pn-theme .pn-pricing .qnt-buttons svg { fill: var(--pn-ink); }
.pn-theme .pn-pricing .qnt-buttons:not(:disabled):hover { border-color: var(--pn-yellow) !important; }
.pn-theme .pn-pricing .input-number { font-weight: 700; color: var(--pn-ink); border-bottom-color: var(--pn-yellow) !important; }
.pn-theme .pn-pricing .btnclri,
.pn-theme .pn-pricing a.get-started,
.pn-theme .pn-pricing a#ptemock {
  background: var(--pn-yellow) !important;
  border: 0 !important;
  color: var(--pn-ink) !important;
  font-weight: 700;
  box-shadow: 0 10px 40px rgba(255, 193, 32, 0.35) !important;
}
.pn-theme .pn-pricing .btnclri:hover,
.pn-theme .pn-pricing a.get-started:hover,
.pn-theme .pn-pricing a#ptemock:hover { background: var(--pn-yellow-hover) !important; }
.pn-theme .ribbon span {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
  text-shadow: none !important;
}

/* ---------- Evaluation vouchers ---------- */
.pn-theme .m-pricing-table-1 .m-pricing-table-1__items .m-pricing-table-1__item { border-color: var(--pn-line-soft) !important; }
.pn-theme .m-pricing-table-1 .m-pricing-table-1__item h3,
.pn-theme .m-pricing-table-1 .m-pricing-table-1__item h6 { color: var(--pn-ink); font-weight: 700; }
.pn-theme .m-pricing-table-1 .m-pricing-table-1__btn .btn a { color: #FFFFFF !important; text-decoration: none; }

/* ---------- Downloads ---------- */
.pn-theme .m-content .card .card-img-top { border-radius: var(--pn-radius-card) var(--pn-radius-card) 0 0; }
.pn-theme .m-content .list-inline h2 { color: var(--pn-ink); font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .pn-theme *, .pn-theme *::before, .pn-theme *::after { transition: none !important; }
  .pn-theme .btn:hover { transform: none !important; }
}

/* ---------- Account pages (edit profile, change password) ---------- */
.pn-account-grid { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 28px; max-width: 1080px; margin: 0 auto; }
.pn-account-side { align-self: start; padding: 36px; border-radius: var(--pn-radius-card); color: #FFFFFF; background: radial-gradient(ellipse at top right, rgba(255, 193, 32, 0.28), transparent 60%), var(--pn-ink); }
.pn-theme .pn-account-side h2 { margin: 24px 0 14px; color: #FFFFFF; font-size: clamp(25px, 3vw, 37px); font-weight: 800; letter-spacing: -0.04em; }
.pn-account-side h2 span { color: var(--pn-yellow); }
.pn-account-side p { color: #D1D1D1; font-size: 14px; line-height: 1.8; }
.pn-account-side ul { padding-left: 18px; color: #E5E5E5; font-size: 13px; line-height: 2.2; }
.pn-theme .pn-account-side a { color: var(--pn-yellow) !important; font-weight: 700; }
.pn-tag { display: inline-block; padding: 7px 14px; border: 1px solid rgba(255, 193, 32, 0.3); border-radius: 999px; background: #333333; color: var(--pn-yellow); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pn-account-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-top: 28px; border-radius: 18px; background: var(--pn-yellow); color: var(--pn-ink); font-size: 28px; box-shadow: var(--pn-shadow-yellow); }
.pn-account-form { padding: 32px; border: 1px solid var(--pn-line); border-radius: var(--pn-radius-card); background: var(--pn-paper); box-shadow: var(--pn-shadow-card); }
.pn-theme .pn-account-form h2 { margin: 0 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -0.035em; }
.pn-account-form > p { margin-bottom: 24px; color: var(--pn-muted); line-height: 1.7; }
.pn-field { margin-bottom: 24px; }
.pn-theme .pn-field label { display: block; margin-bottom: 6px; color: #444444; font-size: 12px; font-weight: 600; }
.pn-theme .pn-field input { width: 100%; min-height: 48px; padding: 11px 0; border: 0; border-bottom: 3px solid var(--pn-yellow); border-radius: 0; background: var(--pn-paper); color: var(--pn-ink); font-size: 15px; box-shadow: none; }
.pn-theme .pn-field input:focus { outline: none; box-shadow: none; }
.pn-theme .pn-field input:focus-visible { outline: none; }
.pn-field small { display: block; margin-top: 10px; color: var(--pn-muted); line-height: 1.6; }
.pn-form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 12px; }
.pn-theme .pn-form-actions .btn { padding: 11px 22px; }
.pn-avatar { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--pn-line); }
.pn-avatar img { width: 64px; height: 64px; border: 3px solid var(--pn-yellow-soft); border-radius: 50%; object-fit: cover; }
.pn-avatar strong { display: block; word-break: break-word; }
.pn-avatar span { color: var(--pn-muted); font-size: 12px; }
.pn-photo-box { padding: 18px; border: 1px dashed #D8C17E; border-radius: var(--pn-radius-control); background: #FFFDF7; }
.pn-photo-box input { max-width: 100%; font-size: 12px; }
.pn-photo-box input::file-selector-button { margin-right: 10px; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--pn-yellow); color: var(--pn-ink); font-weight: 700; cursor: pointer; }
.pn-photo-preview { display: block; width: 100px; height: 100px; margin-top: 14px; overflow: hidden; border-radius: 14px; }
.pn-photo-preview:empty { display: none; }
.pn-photo-preview canvas { width: 100%; height: 100%; object-fit: cover; }
.pn-field-error { margin: 12px 0; color: var(--pn-danger); font-size: 12px; line-height: 1.6; }
.pn-form-alert { margin-bottom: 20px; padding: 14px; border: 1px solid #FECDCA; border-radius: var(--pn-radius-control); background: var(--pn-danger-soft); color: #7A271A; }
@media (max-width: 1199px) {
  .pn-account-grid { grid-template-columns: minmax(200px, .7fr) minmax(0, 1.3fr); gap: 20px; }
  .pn-account-side, .pn-account-form { padding: 24px; }
}
@media (max-width: 767px) {
  .pn-account-grid { grid-template-columns: minmax(0, 1fr); }
  .pn-account-side .pn-account-icon { display: none; }
  .pn-theme .pn-account-side h2 { margin-top: 16px; font-size: 28px; }
  .pn-account-form { padding: 24px 20px; }
  .pn-form-actions > * { flex: 1; text-align: center; }
}
.pn-account-icon > i { font-size: 28px; line-height: 1; }