/* =========================================================
   GradePilot Main Stylesheet
   Cleaned and arranged from the submitted CSS.
========================================================= */

/* =========================================================
   01. GLOBAL RESET & BASE STYLE
========================================================= */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f5f7fb;
    color: #0f172a;
}

a {
    text-decoration: none;
}

.container {
    width: min(1120px, 92%);
    margin: auto;
}

.card {
    background: #ffffff;
    padding: 24px;
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.btn {
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    background: #2563eb;
    color: white;
    cursor: pointer;
    font-weight: 700;
}

.btn-sm {
    padding: 8px 12px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
}

.btn-danger {
    padding: 8px 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
}

.btn-light {
    padding: 12px 18px;
    border-radius: 12px;
    border: none;
    background: #f1f5f9;
    color: #334155;
    font-weight: 800;
    cursor: pointer;
}

.error-alert {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 700;
}

.success-alert {
    background: #dcfce7;
    color: #166534;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

/* =========================================================
   02. ADMIN LOGIN PAGE
========================================================= */
.admin-login-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 35%),
        linear-gradient(135deg, #f8fafc, #eef2f7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-login-wrapper {
    width: 100%;
    padding: 32px;
}

.admin-login-card {
    max-width: 1120px;
    min-height: 680px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    background: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
}

.admin-login-left {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.14), transparent 30%),
        linear-gradient(160deg, #2563eb, #1e3a8a);
    color: white;
    padding: 70px 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
}

.admin-login-left::before {
    content: "";
    position: absolute;
    top: 28px;
    left: 28px;
    width: 130px;
    height: 130px;
    background-image: radial-gradient(rgba(255,255,255,0.25) 2px, transparent 2px);
    background-size: 16px 16px;
    opacity: 0.55;
}

.brand-badge {
    width: 92px;
    height: 92px;
    border: 4px solid rgba(255,255,255,0.9);
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 42px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

.admin-login-left h1 {
    font-size: 42px;
    margin: 0;
    font-weight: 800;
    letter-spacing: -1px;
}

.admin-login-left h3 {
    margin: 10px 0 0;
    font-size: 22px;
    font-weight: 600;
    opacity: 0.95;
}

.admin-login-left .line {
    width: 46px;
    height: 3px;
    background: rgba(255,255,255,0.65);
    border-radius: 99px;
    margin: 32px 0;
}

.admin-login-left p {
    max-width: 330px;
    font-size: 18px;
    line-height: 1.7;
    opacity: 0.95;
    margin: 0;
}

.illustration-box {
    margin-top: auto;
    width: 260px;
    height: 160px;
    border-radius: 26px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.2);
    display: grid;
    place-items: center;
    font-size: 76px;
    color: rgba(255,255,255,0.88);
}

.admin-login-right {
    padding: 70px 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.avatar-circle {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    display: grid;
    place-items: center;
    font-size: 42px;
    color: #2563eb;
    margin: 0 auto 28px;
}

.admin-login-right h2 {
    font-size: 36px;
    text-align: center;
    margin: 0;
    font-weight: 800;
}

.login-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 17px;
    margin: 14px 0 38px;
}

.admin-login-right label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

.input-group {
    height: 58px;
    border: 1px solid #d7dce5;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 0 18px;
    margin-bottom: 26px;
    background: #ffffff;
    transition: 0.2s ease;
}

.input-group:focus-within {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.input-group i {
    color: #64748b;
    font-size: 18px;
    margin-right: 16px;
}

.input-group input {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: transparent;
    color: #0f172a;
}

.toggle-password {
    margin-right: 0 !important;
    cursor: pointer;
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -6px;
    margin-bottom: 28px;
    font-size: 15px;
}

.remember {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

.remember input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.login-options a {
    color: #2563eb;
    font-weight: 600;
}

.admin-login-btn {
    width: 100%;
    height: 60px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.25);
    transition: 0.2s ease;
}

.admin-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.32);
}

.admin-login-btn i {
    margin-right: 10px;
}

.divider {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 34px 0 24px;
    color: #64748b;
}

.divider span {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

.back-user-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #2563eb;
    font-size: 17px;
    font-weight: 700;
}

/* =========================================================
   03. USER LOGIN PAGE
========================================================= */
.user-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at bottom right, rgba(37,99,235,0.12), transparent 40%),
        linear-gradient(135deg, #f8fafc, #eef2f7);
}

.user-login-wrapper {
    width: 100%;
    padding: 32px;
}

.user-login-card {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0,0,0,0.1);
}

.user-login-left {
    background: linear-gradient(160deg, #2563eb, #1e3a8a);
    color: white;
    padding: 60px;
    text-align: center;
}

.brand-box {
    font-size: 40px;
    margin-bottom: 20px;
}

.user-login-left h1 {
    margin: 0;
    font-size: 36px;
}

.user-login-left h3 {
    margin-top: 5px;
}

.user-login-left .line {
    width: 40px;
    height: 3px;
    background: white;
    margin: 20px auto;
}

.user-login-left p {
    font-size: 16px;
    opacity: 0.9;
}

.illustration {
    font-size: 60px;
    margin-top: 40px;
}

.user-login-right {
    padding: 60px;
}

.avatar {
    font-size: 40px;
    text-align: center;
    margin-bottom: 10px;
}

.user-login-right h2 {
    text-align: center;
}

.subtitle {
    text-align: center;
    color: gray;
    margin-bottom: 20px;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
}

.switch-admin {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #2563eb;
    font-weight: bold;
}

/* =========================================================
   04. ADMIN DASHBOARD LAYOUT
========================================================= */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 240px;
    background: #0f172a;
    color: white;
    padding: 24px;
}

.sidebar .logo {
    margin: 0 0 28px;
    font-size: 24px;
}

.sidebar a {
    display: block;
    color: #cbd5e1;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
}

.sidebar a:hover {
    background: rgba(255,255,255,0.08);
    color: white;
}

.sidebar-footer {
    margin-top: 40px;
}

.main-content {
    flex: 1;
}

.topbar {
    background: white;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}

.content {
    padding: 28px;
}

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

/* =========================================================
   05. TABLES
========================================================= */
.table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

.table th,
.table td {
    padding: 14px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
}

.table-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.modern-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-table th {
    background: #f8fafc;
    padding: 16px;
    text-align: left;
    font-size: 13px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.modern-table td {
    padding: 16px;
    border-top: 1px solid #eef2f7;
    vertical-align: middle;
}

/* =========================================================
   06. PAGE HEADER
========================================================= */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}

.page-header h2,
.page-header h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
}

.page-header p {
    margin: 6px 0 0;
    color: #64748b;
}

/* =========================================================
   07. ADMIN USERS PAGE
========================================================= */
.user-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.user-tabs a {
    background: white;
    color: #334155;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.user-tabs a.active {
    background: #2563eb;
    color: white;
}

.user-tabs span {
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    font-size: 12px;
}

.user-tabs a.active span {
    background: rgba(255,255,255,0.2);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info small {
    display: block;
    color: #94a3b8;
    margin-top: 3px;
}

.user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #dbeafe;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-weight: 800;
}

.role-badge,
.status-badge {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.role-badge {
    background: #eef2ff;
    color: #4338ca;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-approved {
    background: #dcfce7;
    color: #166534;
}

.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.action-buttons {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.action-buttons a {
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
}

.btn-approve {
    background: #22c55e;
    color: white;
}

.btn-reject {
    background: #f97316;
    color: white;
}

.btn-edit {
    background: #2563eb;
    color: white;
}

.btn-delete {
    background: #ef4444;
    color: white;
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: #64748b;
}

.empty-state h3 {
    margin: 0 0 8px;
    color: #0f172a;
}

/* =========================================================
   08. USER PANEL MAIN LAYOUT
========================================================= */
.user-shell {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
}

.user-sidebar {
    width: 270px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.user-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 34px;
}

.brand-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 22px;
}

.user-brand h2 {
    margin: 0;
    font-size: 22px;
    color: #0f172a;
}

.user-brand span {
    color: #64748b;
    font-size: 13px;
}

.user-nav {
    display: grid;
    gap: 8px;
}

.user-nav a,
.user-sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #475569;
    padding: 13px 14px;
    border-radius: 14px;
    font-weight: 700;
    transition: 0.2s ease;
}

.user-nav a i,
.user-sidebar-footer a i {
    width: 20px;
    text-align: center;
}

.user-nav a:hover,
.user-nav a.active {
    background: #eff6ff;
    color: #2563eb;
}

.user-sidebar-footer {
    margin-top: auto;
    padding-top: 20px;
}

.user-sidebar-footer a {
    color: #ef4444;
}

.user-sidebar-footer a:hover {
    background: #fef2f2;
}

.user-main {
    flex: 1;
    min-width: 0;
}

.user-topbar {
    height: 92px;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-topbar h1 {
    margin: 0;
    font-size: 28px;
    color: #0f172a;
}

.user-topbar p {
    margin: 5px 0 0;
    color: #64748b;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    border-radius: 18px;
}

.topbar-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #dbeafe;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-weight: 900;
}

.topbar-user strong {
    display: block;
    font-size: 14px;
}

.topbar-user span {
    display: block;
    color: #64748b;
    font-size: 12px;
    text-transform: capitalize;
}

.user-content {
    padding: 34px;
}

/* =========================================================
   09. USER DASHBOARD
========================================================= */
.welcome-card {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 32%),
        linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    border-radius: 28px;
    padding: 36px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    box-shadow: 0 22px 50px rgba(37, 99, 235, 0.22);
    margin-bottom: 24px;
}

.welcome-kicker {
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 16px;
}

.welcome-card h2 {
    margin: 0;
    font-size: 34px;
}

.welcome-card p {
    max-width: 620px;
    color: rgba(255,255,255,0.86);
    line-height: 1.7;
    font-size: 16px;
}

.welcome-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.primary-action,
.secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 14px;
    font-weight: 800;
}

.primary-action {
    background: #ffffff;
    color: #2563eb;
}

.secondary-action {
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.22);
}

.welcome-art {
    min-width: 170px;
    height: 170px;
    border-radius: 32px;
    background: rgba(255,255,255,0.12);
    display: grid;
    place-items: center;
    font-size: 72px;
}

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

.user-stat-card {
    background: #ffffff;
    border-radius: 22px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid #edf2f7;
}

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    font-size: 22px;
}

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

.stat-icon.green {
    background: #dcfce7;
    color: #16a34a;
}

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

.user-stat-card span {
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
}

.user-stat-card h3 {
    margin: 4px 0 0;
    font-size: 30px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.dashboard-panel {
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #edf2f7;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.panel-header h3 {
    margin: 0;
    font-size: 20px;
}

.panel-header p {
    color: #64748b;
    margin: 6px 0 20px;
}

.quick-actions {
    display: grid;
    gap: 12px;
}

.quick-actions a,
.note-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 15px;
    color: #334155;
    font-weight: 700;
}

.quick-actions a i,
.note-item i {
    color: #2563eb;
}

.note-list {
    display: grid;
    gap: 12px;
}

/* =========================================================
   10. USER SECTIONS PAGE
========================================================= */
.section-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.section-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 22px;
    border: 1px solid #edf2f7;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.section-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.section-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    background: #dbeafe;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 21px;
}

.section-badge {
    background: #eff6ff;
    color: #2563eb;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

.section-title {
    font-size: 24px;
    font-weight: 900;
    margin: 0 0 16px;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.section-info-clean {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
}

.section-info-clean p {
    margin: 0;
    font-size: 14px;
    color: #475569;
}

.section-info-clean strong {
    color: #0f172a;
}

.section-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.section-btn {
    flex: 1;
    text-align: center;
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 800;
}

.section-btn.primary {
    background: #2563eb;
    color: #ffffff;
}

.section-btn.light {
    background: #f1f5f9;
    color: #334155;
}

.empty-section {
    grid-column: 1 / -1;
    background: #ffffff;
    border-radius: 26px;
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    color: #64748b;
}

.empty-section i {
    font-size: 48px;
    color: #2563eb;
    margin-bottom: 18px;
}

.empty-section h3 {
    color: #0f172a;
    margin: 0 0 8px;
}

/* =========================================================
   11. SECTION VIEW PAGE
========================================================= */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2563eb;
    font-weight: 800;
    margin-bottom: 16px;
}

.section-view-hero {
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.22), transparent 32%),
        linear-gradient(135deg, #2563eb, #1e40af);
    color: white;
    border-radius: 28px;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: center;
    box-shadow: 0 22px 50px rgba(37, 99, 235, 0.20);
    margin-bottom: 22px;
}

.section-view-hero .back-link {
    color: rgba(255,255,255,0.9);
}

.section-view-hero h2 {
    margin: 0;
    font-size: 34px;
    font-weight: 900;
}

.section-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.section-meta span {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13px;
}

.section-view-icon {
    width: 110px;
    height: 110px;
    border-radius: 28px;
    background: rgba(255,255,255,0.13);
    display: grid;
    place-items: center;
    font-size: 46px;
}

.section-tab-panel {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    min-height: 360px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.tab-placeholder {
    min-height: 300px;
    display: grid;
    place-items: center;
    text-align: center;
    color: #64748b;
}

.tab-placeholder i {
    font-size: 54px;
    color: #2563eb;
    margin-bottom: 14px;
}

.tab-placeholder h3 {
    color: #0f172a;
    font-size: 24px;
    margin: 0;
}

.tab-placeholder p {
    max-width: 520px;
    line-height: 1.7;
    margin: 10px auto 20px;
}

/* =========================================================
   12. SECTION TABS
========================================================= */
.section-tabs {
    background: #ffffff;
    border-radius: 22px;
    padding: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    border: 1px solid #edf2f7;
    margin-bottom: 20px;
}

.section-tabs a {
    color: #475569;
    padding: 12px 15px;
    border-radius: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.section-tabs a.active,
.section-tabs a:hover {
    background: #eff6ff;
    color: #2563eb;
}

.section-tabs-modern {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
}

.tab-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 12px 16px;
    border-radius: 14px;
    font-weight: 800;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s ease;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.tab-item i {
    color: #2563eb;
}

.tab-item:hover {
    background: #eff6ff;
    color: #2563eb;
}

.tab-item.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.tab-item.active i {
    color: #ffffff;
}

.section-tabs-line {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 14px 0;
    margin: 18px 0 22px;
    border-bottom: 1px solid #e5e7eb;
}

.section-tabs-line a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 0 14px;
}

.section-tabs-line a i {
    font-size: 18px;
    color: #6b7280;
}

.section-tabs-line a.active,
.section-tabs-line a.active i,
.section-tabs-line a:hover,
.section-tabs-line a:hover i {
    color: #2563eb;
}

.section-tabs-line a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    height: 3px;
    border-radius: 99px;
    background: #2563eb;
}

/* =========================================================
   13. MODAL STYLE
========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 999;
}

.modal-overlay.show {
    display: flex;
}

.section-modal {
    width: min(720px, 100%);
    background: #ffffff;
    border-radius: 26px;
    padding: 26px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.modal-header h3 {
    margin: 0;
    font-size: 24px;
}

.modal-header p {
    margin: 6px 0 0;
    color: #64748b;
}

.modal-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

/* =========================================================
   14. FORMS
========================================================= */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group.full {
    grid-column: 1 / -1;
}

.form-group label {
    display: block;
    font-weight: 800;
    margin-bottom: 8px;
    color: #334155;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 50px;
    border: 1px solid #d7dce5;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 15px;
    outline: none;
    background: #ffffff;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* =========================================================
   15. LEARNER SEX FILTER TABS
========================================================= */
.learner-sex-tabs {
    display: inline-flex;
    background: #ffffff;
    padding: 6px;
    border-radius: 999px;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08);
    border: 1px solid #e5e7eb;
    gap: 6px;
    margin-bottom: 20px;
}

.learner-sex-tabs a {
    position: relative;
    padding: 10px 18px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.25s ease;
}

.learner-sex-tabs a i {
    font-size: 16px;
}

.learner-sex-tabs a span {
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 900;
}

.learner-sex-tabs a:hover {
    color: #2563eb;
    background: #f1f5f9;
}

.learner-sex-tabs a.active {
    color: #ffffff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

.learner-sex-tabs a.active span {
    background: rgba(255,255,255,0.22);
    color: #ffffff;
}

.learner-sex-tabs a.active i {
    color: #ffffff;
}

.learner-sex-tabs a.active.male {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.learner-sex-tabs a.active.female {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.sex-badge {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.sex-badge.male {
    background: #dbeafe;
    color: #1d4ed8;
}

.sex-badge.female {
    background: #fce7f3;
    color: #be185d;
}

/* =========================================================
   16. SUBJECTS PAGE
========================================================= */
.subject-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 28px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
}

.subject-card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 900;
}

.subject-card-header p {
    margin: 6px 0 18px;
    color: #64748b;
}

.subject-form {
    display: grid;
    gap: 16px;
}

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

.subject-add-btn {
    justify-self: end;
}

.subject-list-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 14px;
}

.subject-list-title h3 {
    margin: 0;
    font-size: 18px;
}

.subject-list-title i {
    color: #2563eb;
}

.total-badge {
    background: #dcfce7;
    color: #166534;
    padding: 7px 12px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px;
}

/* =========================================================
   17. CLASS RECORD PAGE
========================================================= */
.record-filter {
    display: flex;
    gap: 16px;
    align-items: end;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.record-filter .form-group {
    min-width: 240px;
}

.class-record-wrap {
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.class-record-table {
    min-width: 1500px;
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.class-record-table th,
.class-record-table td {
    border: 1px solid #e5e7eb;
    padding: 8px;
    text-align: center;
    white-space: nowrap;
}

.class-record-table th {
    background: #f8fafc;
    font-weight: 900;
    color: #334155;
}

.class-record-table .name-col {
    min-width: 260px;
    text-align: left;
    position: sticky;
    left: 0;
    background: #ffffff;
    z-index: 2;
}

.class-record-table th.name-col {
    background: #f1f5f9;
    z-index: 4;
}

.ww-head {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.pt-head {
    background: #ecfdf5 !important;
    color: #15803d !important;
}

.qa-head {
    background: #fff7ed !important;
    color: #c2410c !important;
}

.gender-row td {
    background: #e2e8f0 !important;
    font-weight: 900;
    text-align: left;
    color: #0f172a;
}

.score-input,
.hps-input {
    width: 48px;
    height: 34px;
    border: 1px solid #d7dce5;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    appearance: textfield;
    -moz-appearance: textfield;
}

.hps-input {
    font-weight: 900;
    background: #ffffff;
}

.score-input:focus,
.hps-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.score-input::-webkit-outer-spin-button,
.score-input::-webkit-inner-spin-button,
.hps-input::-webkit-outer-spin-button,
.hps-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ww-total,
.ww-ps,
.ww-ws {
    background: #eff6ff;
    font-weight: 800;
}

.pt-total,
.pt-ps,
.pt-ws {
    background: #ecfdf5;
    font-weight: 800;
}

.qa-total,
.qa-ps,
.qa-ws {
    background: #fff7ed;
    font-weight: 800;
}

.initial-grade {
    background: #fef9c3;
    font-weight: 900;
    color: #854d0e;
}

/* =========================================================
   18. TOAST NOTIFICATION
========================================================= */
.auto-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, -50%) scale(0.95);
    background: #ef4444;
    color: #ffffff;
    padding: 18px 24px;
    border-radius: 16px;
    font-weight: 800;
    opacity: 0;
    transition: 0.25s ease;
    z-index: 99999;
    box-shadow: 0 18px 45px rgba(239, 68, 68, 0.35);
    text-align: center;
    min-width: 280px;
}

.auto-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* =========================================================
   19. RESPONSIVE DESIGN
========================================================= */
@media (max-width: 980px) {
    .user-shell,
    .admin-layout {
        flex-direction: column;
    }

    .user-sidebar,
    .sidebar {
        width: 100%;
        height: auto;
    }

    .user-nav {
        grid-template-columns: repeat(4, 1fr);
    }

    .user-sidebar-footer {
        margin-top: 12px;
    }

    .user-stat-grid,
    .dashboard-grid,
    .cards {
        grid-template-columns: 1fr;
    }

    .section-grid {
        grid-template-columns: 1fr 1fr;
    }

    .welcome-art,
    .illustration-box {
        display: none;
    }

    .admin-login-card,
    .user-login-card {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .admin-login-left {
        padding: 42px 28px;
    }

    .admin-login-right,
    .user-login-right {
        padding: 42px 28px;
    }
}

@media (max-width: 768px) {
    .user-login-left {
        display: none;
    }

    .percent-grid {
        grid-template-columns: 1fr;
    }

    .subject-add-btn {
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .user-topbar {
        height: auto;
        padding: 20px;
        align-items: flex-start;
        gap: 16px;
        flex-direction: column;
    }

    .topbar-user {
        width: 100%;
    }

    .user-content,
    .content {
        padding: 20px;
    }

    .user-nav {
        grid-template-columns: 1fr;
    }

    .welcome-card {
        padding: 24px;
    }

    .welcome-card h2 {
        font-size: 28px;
    }

    .section-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .section-modal {
        padding: 20px;
    }

    .modal-actions {
        flex-direction: column;
    }

    .page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-view-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-view-icon {
        display: none;
    }

    .section-view-hero h2 {
        font-size: 28px;
    }

    .section-tabs,
    .section-tabs-line {
        display: grid;
    }

    .section-tabs-line {
        gap: 18px;
        overflow-x: auto;
        white-space: nowrap;
    }

    .record-filter {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .admin-login-wrapper,
    .user-login-wrapper {
        padding: 16px;
    }

    .admin-login-card,
    .user-login-card {
        border-radius: 20px;
    }

    .admin-login-right h2 {
        font-size: 28px;
    }

    .login-options {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }
}


.save-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.save-status-toast {
    background: #22c55e;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
    transition: 0.25s ease;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.25);
}

.save-status-toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* FULLSCREEN CLASS RECORD */
.class-record-wrap.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffffff;
    padding: 20px;
    border-radius: 0;
    overflow: auto;
}

/* Smooth animation */
.class-record-wrap {
    transition: 0.3s ease;
}

/* Save + Maximize buttons */
.save-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Icon Button */
.icon-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    font-size: 16px;
}

/* Green Auto Save Toast (beside button) */
.save-status-toast {
    background: #22c55e;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    opacity: 0;
    transform: translateX(8px);
    transition: 0.25s ease;
    box-shadow: 0 10px 22px rgba(34, 197, 94, 0.25);
}

.save-status-toast.show {
    opacity: 1;
    transform: translateX(0);
}

/* FULLSCREEN WHOLE CLASS RECORD */
#classRecordFullscreen.fullscreen-mode {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #f5f7fb;
    padding: 20px 24px;
    overflow: auto;
}

/* Make header sticky in fullscreen */
#classRecordFullscreen.fullscreen-mode .page-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f5f7fb;
    padding-bottom: 10px;
}

/* Optional: smoother feel */
#classRecordFullscreen {
    transition: 0.3s ease;
}

/* MAXIMIZE BUTTON HOVER EFFECT */
.icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #e5e7eb;
    color: #374151;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* 🔥 HOVER STATE */
.icon-btn:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.35);
}

/* OPTIONAL: CLICK EFFECT */
.icon-btn:active {
    transform: scale(0.95);
}

/* SUCCESS ALERT ANIMATION */
.success-alert {
    background: #dcfce7;
    color: #166534;
    padding: 14px 18px;
    border-radius: 14px;
    font-weight: 700;
    margin-bottom: 20px;

    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
}

/* SHOW STATE */
.success-alert.show {
    opacity: 1;
    transform: translateY(0);
}

/* HIDE STATE */
.success-alert.hide {
    opacity: 0;
    transform: translateY(-10px);
}


/* CLEAR ENTRIES BUTTON */
.clear-entry-area {
    margin-left: auto;
    display: flex;
    align-items: end;
}

.btn-clear-entries {
    height: 50px;
    border: none;
    border-radius: 14px;
    background: #fee2e2;
    color: #991b1b;
    padding: 0 18px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: 0.2s ease;
}

.btn-clear-entries:hover {
    background: #ef4444;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(239, 68, 68, 0.25);
}

/* CLEAR ENTRIES MODAL */
.clear-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 10000;
}

.clear-modal-overlay.show {
    display: flex;
}

.clear-modal {
    width: min(620px, 100%);
    background: #ffffff;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25);
}

.clear-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.clear-modal-header h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.clear-modal-header p {
    margin: 6px 0 0;
    color: #64748b;
}

.clear-modal-close {
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
}

.clear-group {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.clear-group-title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.clear-group-title strong {
    color: #0f172a;
}

.clear-group-title span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.clear-group label {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 800;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.clear-group input {
    width: 16px;
    height: 16px;
    accent-color: #ef4444;
}

.clear-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

.btn-clear-confirm {
    border: none;
    border-radius: 12px;
    background: #ef4444;
    color: #ffffff;
    padding: 12px 18px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.btn-clear-confirm:hover {
    background: #dc2626;
}

@media (max-width: 640px) {
    .clear-entry-area {
        width: 100%;
        margin-left: 0;
    }

    .btn-clear-entries {
        width: 100%;
        justify-content: center;
    }

    .clear-modal-actions {
        flex-direction: column;
    }
}

/* =========================================================
   USER PROFILE PAGE
========================================================= */
.profile-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 22px;
}

.profile-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.profile-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-avatar {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-size: 30px;
    font-weight: 900;
}

.profile-card-header h3,
.profile-section-title h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
}

.profile-card-header p,
.profile-section-title p {
    margin: 6px 0;
    color: #64748b;
}

.profile-card-header span {
    display: inline-flex;
    background: #eff6ff;
    color: #2563eb;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    text-transform: capitalize;
}

.profile-section-title {
    margin-bottom: 24px;
}

.profile-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.profile-form .full {
    grid-column: 1 / -1;
}

.profile-actions {
    grid-column: 1 / -1;
}

.btn-password {
    background: #0f172a;
}

.btn-password:hover {
    background: #1e293b;
}

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

@media (max-width: 640px) {
    .profile-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   FIXED USER HEADER + SIDEBAR
========================================================= */
html,
body {
    height: 100%;
}

body {
    overflow: hidden;
}

.user-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
}

.user-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.user-main {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.user-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #ffffff;
}

/* Mobile/tablet should scroll normally */
@media (max-width: 980px) {
    body {
        overflow: auto;
    }

    .user-shell {
        height: auto;
        overflow: visible;
    }

    .user-sidebar {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .user-main {
        height: auto;
        overflow: visible;
    }

    .user-topbar {
        position: sticky;
        top: 0;
    }
}

/* =========================================================
   DARK MODE
========================================================= */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dark-toggle {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: #f1f5f9;
    color: #2563eb;
    display: grid;
    place-items: center;
    font-size: 18px;
    cursor: pointer;
    transition: 0.2s ease;
}

.dark-toggle:hover {
    background: #2563eb;
    color: #ffffff;
    transform: translateY(-1px);
}

body.dark-mode {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode .user-shell,
body.dark-mode .user-main,
body.dark-mode .user-content {
    background: #0f172a;
    color: #e5e7eb;
}

body.dark-mode .user-sidebar,
body.dark-mode .user-topbar,
body.dark-mode .profile-card,
body.dark-mode .dashboard-panel,
body.dark-mode .user-stat-card,
body.dark-mode .section-card,
body.dark-mode .section-tab-panel,
body.dark-mode .subject-card,
body.dark-mode .table-card,
body.dark-mode .card,
body.dark-mode .modal-overlay .section-modal,
body.dark-mode .clear-modal,
body.dark-mode .empty-section,
body.dark-mode .class-record-wrap {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .user-brand h2,
body.dark-mode .user-topbar h1,
body.dark-mode .page-header h2,
body.dark-mode .page-header h3,
body.dark-mode .profile-card-header h3,
body.dark-mode .profile-section-title h3,
body.dark-mode .section-title,
body.dark-mode .panel-header h3,
body.dark-mode .empty-state h3,
body.dark-mode .empty-section h3,
body.dark-mode .tab-placeholder h3,
body.dark-mode .subject-card-header h3,
body.dark-mode .subject-list-title h3,
body.dark-mode .modal-header h3,
body.dark-mode .clear-modal-header h3,
body.dark-mode .section-info-clean strong,
body.dark-mode .note-item strong {
    color: #f8fafc;
}

body.dark-mode .user-brand span,
body.dark-mode .user-topbar p,
body.dark-mode .page-header p,
body.dark-mode .profile-card-header p,
body.dark-mode .profile-section-title p,
body.dark-mode .panel-header p,
body.dark-mode .topbar-user span,
body.dark-mode .section-info-clean p,
body.dark-mode .tab-placeholder,
body.dark-mode .tab-placeholder p,
body.dark-mode .empty-section,
body.dark-mode .subject-card-header p,
body.dark-mode .modal-header p,
body.dark-mode .clear-modal-header p,
body.dark-mode .clear-group-title span {
    color: #94a3b8;
}

body.dark-mode .user-nav a,
body.dark-mode .user-sidebar-footer a {
    color: #cbd5e1;
}

body.dark-mode .user-nav a:hover,
body.dark-mode .user-nav a.active {
    background: #1e3a8a;
    color: #ffffff;
}

body.dark-mode .user-sidebar-footer a:hover {
    background: #451a1a;
    color: #fecaca;
}

body.dark-mode .topbar-user,
body.dark-mode .quick-actions a,
body.dark-mode .note-item,
body.dark-mode .btn-light,
body.dark-mode .password-note,
body.dark-mode .clear-group,
body.dark-mode .clear-group label {
    background: #1e293b;
    border-color: #334155;
    color: #e5e7eb;
}

body.dark-mode .topbar-avatar,
body.dark-mode .profile-card-header span,
body.dark-mode .section-badge,
body.dark-mode .role-badge {
    background: #1e3a8a;
    color: #bfdbfe;
}

/* Section View Dark Mode */
body.dark-mode .section-view-hero {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 34%),
        linear-gradient(135deg, #1e3a8a, #0f172a);
    color: #ffffff;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    border: 1px solid #1e40af;
}

body.dark-mode .section-view-hero .back-link,
body.dark-mode .section-view-hero h2,
body.dark-mode .section-view-hero .section-meta span,
body.dark-mode .section-view-icon {
    color: #ffffff;
}

body.dark-mode .section-meta span {
    background: rgba(15, 23, 42, 0.42);
    border-color: rgba(191, 219, 254, 0.22);
}

body.dark-mode .section-view-icon {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(191, 219, 254, 0.18);
}

body.dark-mode .section-tabs,
body.dark-mode .section-tabs-modern {
    background: #111827;
    border-color: #1f2937;
}

body.dark-mode .section-tabs-line {
    border-bottom-color: #334155;
}

body.dark-mode .section-tabs-line a,
body.dark-mode .section-tabs-line a i,
body.dark-mode .section-tabs a,
body.dark-mode .tab-item {
    color: #94a3b8;
}

body.dark-mode .section-tabs-line a:hover,
body.dark-mode .section-tabs-line a:hover i,
body.dark-mode .section-tabs-line a.active,
body.dark-mode .section-tabs-line a.active i,
body.dark-mode .section-tabs a:hover,
body.dark-mode .section-tabs a.active {
    color: #60a5fa;
}

body.dark-mode .section-tabs-line a.active::after {
    background: #60a5fa;
}

body.dark-mode .section-tabs a:hover,
body.dark-mode .section-tabs a.active,
body.dark-mode .tab-item:hover,
body.dark-mode .tab-item.active {
    background: #1e3a8a;
    color: #ffffff;
    border-color: #2563eb;
}

body.dark-mode .tab-item i,
body.dark-mode .tab-item:hover i,
body.dark-mode .tab-item.active i {
    color: #ffffff;
}

body.dark-mode .section-tab-panel {
    background: #111827;
    border-color: #1f2937;
    color: #e5e7eb;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}

body.dark-mode .back-link {
    color: #93c5fd;
}

body.dark-mode .form-group label {
    color: #e5e7eb;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .input-group,
body.dark-mode .score-input,
body.dark-mode .hps-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .score-input::placeholder,
body.dark-mode .hps-input::placeholder {
    color: #64748b;
}

body.dark-mode .modern-table th,
body.dark-mode .class-record-table th,
body.dark-mode .table th {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

body.dark-mode .modern-table td,
body.dark-mode .table td,
body.dark-mode .table th,
body.dark-mode .class-record-table td,
body.dark-mode .class-record-table th {
    border-color: #334155;
    color: #e5e7eb;
}

body.dark-mode .table,
body.dark-mode .modern-table,
body.dark-mode .class-record-table,
body.dark-mode .class-record-wrap {
    background: #111827;
}

body.dark-mode .class-record-table .name-col {
    background: #111827;
    color: #f8fafc;
}

body.dark-mode .class-record-table th.name-col {
    background: #1e293b;
}

body.dark-mode .gender-row td {
    background: #1e293b !important;
    color: #f8fafc;
}

body.dark-mode .ww-head,
body.dark-mode .ww-total,
body.dark-mode .ww-ps,
body.dark-mode .ww-ws {
    background: #172554 !important;
    color: #bfdbfe !important;
}

body.dark-mode .pt-head,
body.dark-mode .pt-total,
body.dark-mode .pt-ps,
body.dark-mode .pt-ws {
    background: #052e16 !important;
    color: #bbf7d0 !important;
}

body.dark-mode .qa-head,
body.dark-mode .qa-total,
body.dark-mode .qa-ps,
body.dark-mode .qa-ws {
    background: #431407 !important;
    color: #fed7aa !important;
}

body.dark-mode .initial-grade {
    background: #422006 !important;
    color: #fde68a !important;
}

body.dark-mode .dark-toggle {
    background: #facc15;
    color: #0f172a;
}

body.dark-mode .success-alert {
    background: #14532d;
    color: #dcfce7;
}

body.dark-mode .error-alert {
    background: #7f1d1d;
    color: #fee2e2;
}

body.dark-mode .btn-clear-entries {
    background: #7f1d1d;
    color: #fee2e2;
}

body.dark-mode .btn-clear-entries:hover,
body.dark-mode .btn-clear-confirm {
    background: #dc2626;
    color: #ffffff;
}

/* =========================================================
   DARK MODE BACKGROUND FIX
========================================================= */
body.dark-mode,
body.dark-mode .user-shell,
body.dark-mode .user-main,
body.dark-mode .user-content,
body.dark-mode #classRecordFullscreen,
body.dark-mode #classRecordFullscreen.fullscreen-mode {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

body.dark-mode #classRecordFullscreen.fullscreen-mode .page-header {
    background: #0f172a !important;
}

body.dark-mode .page-header h2,
body.dark-mode .page-header h3,
body.dark-mode .page-header p,
body.dark-mode .record-filter label {
    color: #f8fafc !important;
}

body.dark-mode .class-record-wrap {
    background: #111827 !important;
    border-color: #334155 !important;
}

body.dark-mode .record-filter select,
body.dark-mode .record-filter input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #ffffff !important;
}

.auto-toast.success-toast,
.save-status-toast.show {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.auto-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%) scale(0.96);
    min-width: 220px;
    max-width: 320px;
    padding: 10px 16px;
    border-radius: 12px;
    background: #374151;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
    opacity: 0;
    pointer-events: none;
    z-index: 99999;
    transition: all 0.25s ease;
}

.auto-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.auto-toast.success-toast {
    background: #16a34a !important;
    color: #ffffff !important;
}

.auto-toast.error-toast {
    background: #dc2626 !important;
    color: #ffffff !important;
}

.small-center-toast {
    font-size: 13px !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
}

.score-over-hps {
    border: 2px solid #dc2626 !important;
    background: #fee2e2 !important;
    color: #991b1b !important;
}


.score-over-hps {
    background-color: #fee2e2 !important;
    border: 2px solid #ef4444 !important;
    color: #7f1d1d !important;
}


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

.btn-import {
    background: #2563eb;
}

.btn-import:hover {
    background: #1d4ed8;
}

.import-guide {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    display: grid;
    gap: 4px;
    font-size: 14px;
}

.csv-sample {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    padding: 14px;
    border-radius: 14px;
    margin-top: 14px;
}

.csv-sample code {
    display: block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 8px 10px;
    border-radius: 8px;
    margin-top: 6px;
    color: #334155;
    font-size: 13px;
}

.alert-success,
.alert-error {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.import-actions {
    margin-top: 10px;
    margin-bottom: 10px;
}

.btn-template {
    background: #10b981;
    color: #fff;
    font-size: 14px;
}

.btn-template:hover {
    background: #059669;
}


.import-modal-simple {
    max-width: 680px;
}

.download-template-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    margin: 12px 0 16px;
}

.download-template-link:hover {
    background: #1d4ed8;
}

.csv-format-simple {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #334155;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 14px;
}

.sample-simple {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
}

.sample-simple strong {
    display: block;
    margin-bottom: 8px;
}

.sample-simple code {
    display: block;
    font-size: 13px;
    color: #111827;
    margin-top: 5px;
    word-break: break-word;
}

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

.import-modal-simple {
    max-width: 680px;
}

.download-template-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    padding: 11px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    margin: 12px 0 16px;
}

.download-template-link:hover {
    background: #1d4ed8;
}

.csv-format-simple {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #334155;
    padding: 12px 14px;
    border-radius: 12px;
    margin-bottom: 14px;
    font-size: 14px;
}

.sample-simple {
    background: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 12px;
    margin-top: 14px;
}

.sample-simple strong {
    display: block;
    margin-bottom: 8px;
}

.sample-simple code {
    display: block;
    font-size: 13px;
    color: #111827;
    margin-top: 5px;
    word-break: break-word;
}

.alert-success,
.alert-error {
    padding: 12px 14px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}


.descriptor {
    font-weight: 600;
}

.descriptor-advancing {
    color: #16a34a;
}

.descriptor-benchmarking {
    color: #2563eb;
}

.descriptor-connecting {
    color: #9333ea;
}

.descriptor-developing {
    color: #f59e0b;
}

.descriptor-emerging {
    color: #dc2626;
}
.learner-name-btn {
    border: none;
    background: transparent;
    color: #1d4ed8;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.learner-name-btn:hover {
    text-decoration: underline;
}

.learner-record-modal {
    max-width: 1100px;
    width: 95%;
}

.learner-record-sheet {
    border: 1px solid #111827;
    padding: 22px;
    background: #fff;
    color: #000;
    overflow-x: auto;
}

.record-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 20px;
}

.record-info-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: center;
    margin-bottom: 8px;
}

.record-info-row span {
    border-bottom: 1px solid #111827;
    min-height: 24px;
    font-weight: 700;
    padding-left: 8px;
}

.record-box-grid {
    display: grid;
    grid-template-columns: 1fr 0.75fr 0.75fr;
    gap: 12px;
}

.record-box-title {
    background: #f3f4f6;
    text-align: center;
    font-weight: 800;
    padding: 10px;
    margin-bottom: 10px;
}

.record-mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.record-mini-table th,
.record-mini-table td {
    border: 1px solid #111827;
    padding: 7px;
    text-align: center;
}

.record-mini-table th {
    background: #c6e0b4;
}

.record-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.grade-box {
    min-width: 70px;
    border: 1px solid #111827;
    background: #e2f0d9;
    padding: 12px;
    text-align: center;
    font-weight: 800;
    font-size: 18px;
}

.descriptor-box {
    min-width: 190px;
    border: 1px solid #111827;
    background: #e2f0d9;
    padding: 12px;
    text-align: center;
    font-weight: 900;
    letter-spacing: 1px;
}

.learner-name-link {
    border: none;
    background: transparent;
    padding: 4px 0;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 2px;
}

.learner-name-main {
    color: #0f172a;
    font-weight: 800;
    font-size: 14px;
}

.learner-view-hint {
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-2px);
    transition: 0.2s ease;
}

.learner-name-link:hover .learner-name-main {
    color: #2563eb;
}

.learner-name-link:hover .learner-view-hint {
    opacity: 1;
    transform: translateY(0);
}

.learner-record-modal {
    width: 96%;
    max-width: 1180px;
    border-radius: 26px;
    padding: 24px;
}

.record-modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
    margin-bottom: 18px;
}

.record-loading {
    min-height: 220px;
    display: grid;
    place-items: center;
    color: #64748b;
}

.record-loading i {
    font-size: 30px;
    color: #2563eb;
}

.beautiful-record {
    background: #f8fafc;
    border-radius: 22px;
    padding: 20px;
    color: #0f172a;
}

.record-top-banner {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    border-radius: 22px;
    padding: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.record-label {
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
    margin-bottom: 6px;
}

.record-top-banner h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
}

.record-top-banner p {
    margin: 4px 0 0;
    opacity: 0.9;
}

.record-grade-summary {
    min-width: 150px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 18px;
    padding: 14px;
    text-align: center;
}

.record-grade-summary span {
    display: block;
    font-size: 12px;
    opacity: 0.85;
    margin-bottom: 4px;
}

.record-grade-summary strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}

.record-grade-summary small {
    display: block;
    margin-top: 6px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.record-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.record-meta-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 13px 15px;
}

.record-meta-item span {
    display: block;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 5px;
}

.record-meta-item strong {
    color: #0f172a;
    font-size: 14px;
}

.modern-record-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 1fr;
    gap: 14px;
}

.record-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.record-card-header {
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
}

.record-card-header span {
    display: block;
    font-size: 13px;
    font-weight: 800;
}

.record-card-header strong {
    display: block;
    font-size: 20px;
}

.record-card-header i {
    font-size: 24px;
    opacity: 0.9;
}

.record-card-header.written {
    background: #2563eb;
}

.record-card-header.performance {
    background: #16a34a;
}

.record-card-header.summative {
    background: #9333ea;
}

.modern-record-table {
    width: 100%;
    border-collapse: collapse;
}

.modern-record-table th {
    background: #f1f5f9;
    color: #334155;
    font-size: 12px;
    padding: 10px;
    text-align: center;
}

.modern-record-table td {
    padding: 12px 10px;
    border-top: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
}

.modern-record-table td:first-child {
    font-weight: 800;
    color: #475569;
}

.record-final-strip {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 12px;
}

.record-final-strip div {
    background: #f8fafc;
    border-radius: 14px;
    padding: 14px;
    text-align: center;
}

.record-final-strip span {
    display: block;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 6px;
}

.record-final-strip strong {
    font-size: 24px;
    color: #0f172a;
    font-weight: 900;
}

.descriptor-final {
    background: #eff6ff !important;
}

.descriptor-final strong {
    color: #1d4ed8;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .record-top-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .record-grade-summary {
        width: 100%;
    }

    .record-meta-grid,
    .modern-record-grid,
    .record-final-strip {
        grid-template-columns: 1fr;
    }
}


.section-tabs-line {
    position: sticky;
    top: 102px;
    z-index: 50;
    background: #f5f8ff;
    padding-top: 14px;
    margin-top: 18px;
    border-bottom: 1px solid #e5e7eb;
}


/* FIX: Sticky section tabs should not cover/overlap content when scrolling */
.section-tabs-line {
    position: sticky;
    top: 92px; /* same height as .user-topbar */
    z-index: 900;
    background: #f5f7fb;
    padding: 14px 0 0;
    margin: 0 0 22px;
    border-bottom: 1px solid #e5e7eb;
}

/* Keep class record area below sticky tabs */
.section-tab-panel {
    position: relative;
    z-index: 1;
}

/* Sticky topbar must stay above tabs */
.user-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Dark mode fix */
body.dark-mode .section-tabs-line {
    background: #0f172a;
    border-bottom-color: #334155;
}
/* ==== FULLSCREEN FIX ==== */
.fullscreen-mode{
position:fixed;top:0;left:0;width:100%;height:100%;
background:#f5f7fb;z-index:9999;display:flex;flex-direction:column;
}
.classrecord-scroll{flex:1;overflow:auto;padding:10px;}
.classrecord-scroll thead th{position:sticky;top:0;z-index:5;background:#fff;}
.classrecord-scroll td:first-child,
.classrecord-scroll th:first-child{position:sticky;left:0;background:#fff;z-index:6;}
.no-scroll{overflow:hidden;}

/* =========================================================
   FINAL FIX: CLASS RECORD MAXIMIZE VIEW
========================================================= */
body.classrecord-fullscreen-active {
    overflow: hidden !important;
}
body.classrecord-fullscreen-active .user-topbar,
body.classrecord-fullscreen-active .section-view-hero,
body.classrecord-fullscreen-active .section-tabs-line {
    display: none !important;
}
body.classrecord-fullscreen-active .user-main,
body.classrecord-fullscreen-active .user-content,
body.classrecord-fullscreen-active .section-tab-panel {
    overflow: hidden !important;
}
#classRecordFullscreen.fullscreen-mode {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483000 !important;
    background: #f5f7fb !important;
    padding: 18px 24px 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#classRecordFullscreen.fullscreen-mode .page-header {
    position: static !important;
    flex: 0 0 auto !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
}
#classRecordFullscreen.fullscreen-mode .record-filter {
    flex: 0 0 auto !important;
    margin-bottom: 18px !important;
}
#classRecordFullscreen.fullscreen-mode #classRecordForm {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#classRecordFullscreen.fullscreen-mode .class-record-wrap,
#classRecordFullscreen.fullscreen-mode .classrecord-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#classRecordFullscreen.fullscreen-mode .classrecord-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}
#classRecordFullscreen.fullscreen-mode .class-record-table {
    min-width: 1500px !important;
}
#classRecordFullscreen.fullscreen-mode .class-record-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
}
#classRecordFullscreen.fullscreen-mode .class-record-table .name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table td:first-child,
#classRecordFullscreen.fullscreen-mode .class-record-table th:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 30 !important;
    background: #ffffff !important;
}
#classRecordFullscreen.fullscreen-mode .class-record-table thead .name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table thead th:first-child {
    z-index: 40 !important;
    background: #f8fafc !important;
}
body.dark-mode.classrecord-fullscreen-active #classRecordFullscreen.fullscreen-mode,
body.dark-mode #classRecordFullscreen.fullscreen-mode {
    background: #0f172a !important;
}
body.dark-mode #classRecordFullscreen.fullscreen-mode .classrecord-scroll,
body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table .name-col,
body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table td:first-child,
body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table th:first-child {
    background: #111827 !important;
}

/* =========================================================
   DARK MODE ANTI-FLASH PATCH
   Keeps Class Record dark while subject/term dropdown reloads.
========================================================= */
html.dark-mode,
html.dark-mode body,
body.dark-mode {
    background: #0f172a !important;
}

html.dark-mode .user-shell,
html.dark-mode .user-main,
html.dark-mode .user-content,
html.dark-mode .section-tab-panel,
html.dark-mode .class-record-wrap,
html.dark-mode #classRecordFullscreen,
html.dark-mode .classrecord-wrapper,
html.dark-mode .classrecord-scroll {
    background: #0f172a !important;
    color: #e5e7eb;
}

html.dark-mode .user-topbar,
html.dark-mode .user-sidebar,
html.dark-mode .profile-card,
html.dark-mode .section-view-hero,
html.dark-mode .section-tabs,
html.dark-mode .section-tabs-modern,
html.dark-mode .class-record-card,
html.dark-mode .table-card,
html.dark-mode .card {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .form-group select,
html.dark-mode .form-group input,
html.dark-mode select,
html.dark-mode input.score-input,
html.dark-mode input.hps-input {
    background: #0b1220 !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode .class-record-table,
html.dark-mode .class-record-table td,
html.dark-mode .class-record-table th,
html.dark-mode .modern-table,
html.dark-mode .modern-table td,
html.dark-mode .modern-table th {
    background-color: #111827;
    color: #e5e7eb;
    border-color: #263244 !important;
}

html.dark-mode .class-record-table thead th,
html.dark-mode .classrecord-scroll thead th,
html.dark-mode #classRecordFullscreen.fullscreen-mode thead th {
    background-color: #111827 !important;
    color: #e5e7eb !important;
}

html.dark-mode .class-record-table td:first-child,
html.dark-mode .class-record-table th:first-child,
html.dark-mode .classrecord-scroll td:first-child,
html.dark-mode .classrecord-scroll th:first-child {
    background-color: #111827 !important;
}

/* During dropdown reload, keep the viewport dark instead of flashing white. */
body.dark-mode.classrecord-changing,
html.dark-mode body.classrecord-changing {
    background: #0f172a !important;
}

/* =========================================================
   FINAL PATCH: FULLSCREEN CLASS RECORD STICKY 3-ROW HEADER
   Keeps Written Works / Performance Tasks / HPS rows frozen
========================================================= */
#classRecordFullscreen.fullscreen-mode .classrecord-scroll {
    position: relative !important;
    overflow: auto !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th {
    position: sticky !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.25) !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(1) th {
    top: 0 !important;
    z-index: 80 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(2) th {
    top: 36px !important;
    z-index: 79 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(3) th {
    top: 76px !important;
    z-index: 78 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th[rowspan="3"],
#classRecordFullscreen.fullscreen-mode .class-record-table thead .name-col {
    top: 0 !important;
    z-index: 95 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th.name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table tbody td.name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table tbody td:first-child {
    left: 0 !important;
    position: sticky !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th.name-col {
    z-index: 110 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table tbody td.name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table tbody td:first-child {
    z-index: 60 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table tbody .gender-row td {
    position: sticky !important;
    top: 118px !important;
    z-index: 55 !important;
    background: #e2e8f0 !important;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.25) !important;
}

body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead th,
html.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead th {
    color: #e5edff !important;
    border-color: #334155 !important;
    box-shadow: inset 0 -1px 0 rgba(100, 116, 139, 0.45) !important;
}

body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(2) th,
body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(3) th,
html.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(2) th,
html.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(3) th {
    background: #111827 !important;
}

body.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table tbody .gender-row td,
html.dark-mode #classRecordFullscreen.fullscreen-mode .class-record-table tbody .gender-row td {
    background: #1e293b !important;
    color: #e5edff !important;
}

/* =========================================================
   FINAL FIX: STRAIGHT STICKY CLASS RECORD HEADER
   Uses measured row offsets instead of hardcoded pixel tops.
========================================================= */
#classRecordFullscreen.fullscreen-mode .class-record-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th {
    position: sticky !important;
    background-clip: padding-box !important;
    vertical-align: middle !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(1) th {
    top: 0 !important;
    z-index: 120 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(2) th {
    top: var(--cr-head-row-1, 40px) !important;
    z-index: 119 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead tr:nth-child(3) th {
    top: calc(var(--cr-head-row-1, 40px) + var(--cr-head-row-2, 40px)) !important;
    z-index: 118 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th[rowspan="3"],
#classRecordFullscreen.fullscreen-mode .class-record-table thead .name-col {
    top: 0 !important;
    z-index: 140 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table tbody .gender-row td {
    top: var(--cr-head-total, 124px) !important;
    z-index: 70 !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th.name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table tbody td.name-col,
#classRecordFullscreen.fullscreen-mode .class-record-table tbody td:first-child {
    left: 0 !important;
    position: sticky !important;
}

#classRecordFullscreen.fullscreen-mode .class-record-table thead th.name-col {
    z-index: 160 !important;
}

/* =========================================================
   TERM/SUBJECT CHANGE FULLSCREEN ANTI-FLASH FIX
   Keeps the Class Record in fullscreen during GET reloads.
========================================================= */
html.classrecord-fullscreen-restore,
html.classrecord-fullscreen-restore body {
    overflow: hidden !important;
    background: #f5f7fb !important;
}
html.classrecord-fullscreen-restore .user-topbar,
html.classrecord-fullscreen-restore .section-view-hero,
html.classrecord-fullscreen-restore .section-tabs-line {
    display: none !important;
}
html.classrecord-fullscreen-restore .user-main,
html.classrecord-fullscreen-restore .user-content,
html.classrecord-fullscreen-restore .section-tab-panel {
    overflow: hidden !important;
}
html.classrecord-fullscreen-restore #classRecordFullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483000 !important;
    background: #f5f7fb !important;
    padding: 18px 24px 24px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
html.classrecord-fullscreen-restore #classRecordFullscreen .page-header,
html.classrecord-fullscreen-restore #classRecordFullscreen .record-filter {
    flex: 0 0 auto !important;
}
html.classrecord-fullscreen-restore #classRecordFullscreen #classRecordForm,
html.classrecord-fullscreen-restore #classRecordFullscreen .class-record-wrap,
html.classrecord-fullscreen-restore #classRecordFullscreen .classrecord-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
html.classrecord-fullscreen-restore #classRecordFullscreen .classrecord-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
}
html.dark-mode.classrecord-fullscreen-restore,
html.dark-mode.classrecord-fullscreen-restore body,
html.dark-mode.classrecord-fullscreen-restore #classRecordFullscreen {
    background: #0f172a !important;
    color: #e5e7eb !important;
}

/* =========================================================
   LEARNERS' INDIVIDUAL RECORD MODAL
========================================================= */
.learner-record-name-btn {
    border: 0;
    background: transparent;
    padding: 4px 0;
    cursor: pointer;
    text-align: left;
    display: grid;
    gap: 2px;
    color: inherit;
}

.learner-record-name-btn strong {
    color: #0f172a;
    transition: color 0.2s ease;
}

.learner-record-name-btn small {
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-2px);
    transition: 0.2s ease;
}

.learner-record-name-btn:hover strong {
    color: #2563eb;
}

.learner-record-name-btn:hover small {
    opacity: 1;
    transform: translateY(0);
}

.learner-record-overlay.show {
    display: flex;
}

.learner-record-modal {
    width: min(1180px, 96vw);
    max-height: 94vh;
    overflow: auto;
    border-radius: 18px;
}

.record-loading {
    min-height: 240px;
    display: grid;
    place-items: center;
    color: #64748b;
    text-align: center;
}

.record-loading i {
    color: #2563eb;
    font-size: 30px;
    margin-bottom: 10px;
}

.individual-record-print {
    background: #ffffff;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 20px;
    border: 1px solid #d1d5db;
    overflow-x: auto;
}

.individual-record-title {
    background: #082d70;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    padding: 10px 20px 12px;
    letter-spacing: 1px;
}

.individual-record-info {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 70px;
    padding: 26px 34px 16px;
}

.info-line {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: end;
    gap: 10px;
    margin-bottom: 7px;
    font-size: 18px;
}

.info-line label {
    font-weight: 400;
}

.info-line span {
    min-height: 26px;
    border-bottom: 1px solid #000;
    padding: 0 8px 2px;
}

.info-line .name-value {
    font-size: 23px;
    font-weight: 900;
}

.individual-record-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr 1.08fr;
    gap: 12px;
    padding: 0 28px;
    align-items: start;
}

.record-group-title {
    background: #f1f1f1;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 900;
    text-align: center;
    padding: 12px 8px;
    margin: 0 0 12px;
    min-height: 58px;
    display: grid;
    place-items: center;
}

.classic-record-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 16px;
}

.classic-record-table th,
.classic-record-table td {
    border: 1px solid #000;
    padding: 6px 8px;
    text-align: center;
    height: 34px;
}

.classic-record-table thead th,
.classic-record-table tbody th {
    background: #c6e0b4;
    font-weight: 900;
}

.classic-record-table tbody tr:first-child td {
    background: #e2f0d9;
}

.classic-record-table tbody th {
    font-style: italic;
}

.individual-record-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 26px;
    padding: 8px 28px 0;
    font-size: 18px;
}

.record-final-pair {
    display: flex;
    align-items: center;
    gap: 8px;
}

.record-final-pair span {
    font-style: italic;
}

.record-final-pair strong {
    min-width: 64px;
    min-height: 48px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #000;
    background: #e2f0d9;
    font-size: 22px;
    font-weight: 900;
}

.descriptor-pair strong {
    min-width: 220px;
    letter-spacing: 1px;
    font-family: Georgia, 'Times New Roman', serif;
}

body.dark-mode .learner-record-name-btn strong {
    color: #e5e7eb;
}

body.dark-mode .learner-record-name-btn:hover strong {
    color: #60a5fa;
}

@media (max-width: 900px) {
    .individual-record-info,
    .individual-record-grid {
        grid-template-columns: 1fr;
    }

    .individual-record-info {
        gap: 8px;
    }

    .individual-record-bottom {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* =========================================================
   LEARNER INDIVIDUAL RECORD MODAL OVERLAP + SUBJECT SELECT
========================================================= */
body.modal-open {
    overflow: hidden;
}

.learner-record-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 28px 18px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.58);
}

.learner-record-overlay.show {
    display: flex !important;
}

.learner-record-modal {
    position: relative;
    z-index: 30001 !important;
    width: min(1220px, 96vw) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto 32px !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.34);
}

#learnerRecordContent {
    max-height: calc(100vh - 170px);
    overflow: auto;
    border-radius: 14px;
    transition: opacity .18s ease;
}

#learnerRecordContent.is-refreshing {
    opacity: .65;
}

.subject-select-line {
    align-items: center;
}

.individual-subject-select {
    width: 100%;
    min-height: 30px;
    border: 0;
    border-bottom: 1px solid #000;
    border-radius: 0;
    background: transparent;
    color: #000;
    font: inherit;
    padding: 0 30px 2px 8px;
    cursor: pointer;
    outline: none;
    font-size: 18px;
    appearance: auto;
}

.individual-subject-select:focus {
    background: #f8fafc;
    box-shadow: inset 0 -2px 0 #2563eb;
}

.individual-record-print {
    min-width: 980px;
}

body.dark-mode .learner-record-overlay {
    background: rgba(2, 6, 23, 0.72);
}

body.dark-mode .learner-record-modal {
    background: #0f172a;
}

@media (max-width: 760px) {
    .learner-record-overlay {
        padding: 12px;
    }

    .learner-record-modal {
        width: 100% !important;
        border-radius: 18px;
        padding: 16px;
    }

    #learnerRecordContent {
        max-height: calc(100vh - 135px);
    }
}
/* =========================================================
   FINAL FIX: LEARNER INDIVIDUAL RECORD MODAL ABOVE HEADER/TABS
========================================================= */
body.modal-open { overflow: hidden !important; }
body.modal-open .section-tabs-line,
body.modal-open .section-tabs,
body.modal-open .section-tabs-modern { z-index: 1 !important; }
#learnerRecordModal.learner-record-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483600 !important;
    display: none !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 24px !important;
    overflow: auto !important;
    background: rgba(15, 23, 42, 0.62) !important;
    isolation: isolate !important;
}
#learnerRecordModal.learner-record-overlay.show { display: flex !important; }
#learnerRecordModal .learner-record-modal {
    position: relative !important;
    z-index: 2147483601 !important;
    width: min(1220px, calc(100vw - 48px)) !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto 32px !important;
}
#learnerRecordModal #learnerRecordContent {
    max-height: calc(100vh - 165px) !important;
    overflow: auto !important;
}
body.dark-mode #learnerRecordModal.learner-record-overlay,
html.dark-mode #learnerRecordModal.learner-record-overlay { background: rgba(2, 6, 23, 0.78) !important; }
@media (max-width: 760px) {
    #learnerRecordModal.learner-record-overlay { padding: 12px !important; }
    #learnerRecordModal .learner-record-modal { width: calc(100vw - 24px) !important; margin-bottom: 18px !important; }
    #learnerRecordModal #learnerRecordContent { max-height: calc(100vh - 135px) !important; }
}

/* =========================================================
   DARK MODE PERSISTENCE FIX
   Keeps dark mode active across page changes, reloads, and back/forward.
========================================================= */
html.dark-mode,
html.dark-mode body {
    background: #0f172a !important;
    color: #e5e7eb !important;
    color-scheme: dark;
}

html.dark-mode .user-shell,
html.dark-mode .user-main,
html.dark-mode .user-content,
html.dark-mode .user-sidebar,
html.dark-mode .user-topbar,
html.dark-mode .profile-card,
html.dark-mode .dashboard-panel,
html.dark-mode .user-stat-card,
html.dark-mode .section-card,
html.dark-mode .section-tab-panel,
html.dark-mode .subject-card,
html.dark-mode .table-card,
html.dark-mode .card,
html.dark-mode .modal-overlay .section-modal,
html.dark-mode .clear-modal,
html.dark-mode .empty-section,
html.dark-mode .class-record-wrap,
html.dark-mode .section-tabs,
html.dark-mode .section-tabs-modern,
html.dark-mode .learner-record-dialog,
html.dark-mode .learner-record-modal,
html.dark-mode .learner-record-frame,
html.dark-mode .individual-record-modal,
html.dark-mode .individual-record-content {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .user-brand h2,
html.dark-mode .user-topbar h1,
html.dark-mode .page-header h2,
html.dark-mode .page-header h3,
html.dark-mode .profile-card-header h3,
html.dark-mode .profile-section-title h3,
html.dark-mode .section-title,
html.dark-mode .panel-header h3,
html.dark-mode .empty-state h3,
html.dark-mode .empty-section h3,
html.dark-mode .tab-placeholder h3,
html.dark-mode .subject-card-header h3,
html.dark-mode .subject-list-title h3,
html.dark-mode .modal-header h3,
html.dark-mode .clear-modal-header h3,
html.dark-mode .section-info-clean strong,
html.dark-mode .note-item strong,
html.dark-mode .learner-record-dialog strong,
html.dark-mode .learner-record-dialog h1,
html.dark-mode .learner-record-dialog h2,
html.dark-mode .learner-record-dialog h3 {
    color: #f8fafc !important;
}

html.dark-mode .user-brand span,
html.dark-mode .user-topbar p,
html.dark-mode .page-header p,
html.dark-mode .profile-card-header p,
html.dark-mode .profile-section-title p,
html.dark-mode .panel-header p,
html.dark-mode .topbar-user span,
html.dark-mode .section-info-clean p,
html.dark-mode .tab-placeholder,
html.dark-mode .tab-placeholder p,
html.dark-mode .empty-section,
html.dark-mode .subject-card-header p,
html.dark-mode .modal-header p,
html.dark-mode .clear-modal-header p,
html.dark-mode .clear-group-title span {
    color: #94a3b8 !important;
}

html.dark-mode .user-nav a,
html.dark-mode .user-sidebar-footer a,
html.dark-mode .section-tabs-line a,
html.dark-mode .section-tabs-line a i,
html.dark-mode .section-tabs a,
html.dark-mode .tab-item {
    color: #cbd5e1 !important;
}

html.dark-mode .user-nav a:hover,
html.dark-mode .user-nav a.active,
html.dark-mode .section-tabs a:hover,
html.dark-mode .section-tabs a.active,
html.dark-mode .tab-item:hover,
html.dark-mode .tab-item.active {
    background: #1e3a8a !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

html.dark-mode .topbar-user,
html.dark-mode .quick-actions a,
html.dark-mode .note-item,
html.dark-mode .btn-light,
html.dark-mode .password-note,
html.dark-mode .clear-group,
html.dark-mode .clear-group label,
html.dark-mode .sidebar-toggle {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e5e7eb !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea,
html.dark-mode .score-input,
html.dark-mode .hps-input,
html.dark-mode .form-control {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode .score-input::placeholder,
html.dark-mode .hps-input::placeholder {
    color: #64748b !important;
}

html.dark-mode .modern-table,
html.dark-mode .class-record-table,
html.dark-mode .table,
html.dark-mode table {
    background: #111827 !important;
    color: #e5e7eb !important;
}

html.dark-mode .modern-table th,
html.dark-mode .class-record-table th,
html.dark-mode .table th,
html.dark-mode table th {
    background: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

html.dark-mode .modern-table td,
html.dark-mode .class-record-table td,
html.dark-mode .table td,
html.dark-mode table td {
    border-color: #334155 !important;
}


/* ===============================
   SECTION PLAN LIMIT UI
================================ */
.section-plan-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.plan-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
    border: 1px solid rgba(148, 163, 184, .35);
    background: #f8fafc;
    color: #475569;
}

.plan-pill.pro {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-color: #facc15;
}

.plan-pill.free {
    background: #eef2ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.btn.btn-disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.2);
}

.limit-alert {
    margin: 14px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff7ed;
    color: #9a3412;
    border: 1px solid #fed7aa;
    font-weight: 600;
}

.section-limit-card {
    margin: 16px 0 22px;
    padding: 18px 20px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
}

.section-limit-card strong {
    display: block;
    color: #0f172a;
    font-size: 16px;
    margin-bottom: 4px;
}

.section-limit-card p {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.section-limit-card > span {
    min-width: 72px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 900;
    font-size: 20px;
}

html.dark-mode .section-limit-card,
body.dark-mode .section-limit-card {
    background: #111827;
    border-color: rgba(148, 163, 184, .22);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

html.dark-mode .section-limit-card strong,
body.dark-mode .section-limit-card strong {
    color: #f8fafc;
}

html.dark-mode .section-limit-card p,
body.dark-mode .section-limit-card p {
    color: #94a3b8;
}

html.dark-mode .section-limit-card > span,
body.dark-mode .section-limit-card > span {
    background: #172554;
    color: #bfdbfe;
}

html.dark-mode .limit-alert,
body.dark-mode .limit-alert {
    background: rgba(154, 52, 18, .18);
    color: #fed7aa;
    border-color: rgba(251, 146, 60, .35);
}

/* =========================================================
   REPORTS PAGE
========================================================= */
.reports-page { padding-bottom: 32px; }
.reports-hero { margin-bottom: 18px; }
.reports-card,
.report-panel {
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 22px;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.07);
}
.reports-card { padding: 18px; }
.reports-tabs-wrap {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.reports-tabs-wrap .tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 14px;
    color: var(--text-color, #0f172a);
    background: var(--soft-bg, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    font-weight: 800;
    text-decoration: none;
}
.reports-tabs-wrap .tab-link.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}
.report-panel { padding: 20px; }
.report-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.report-panel h2 {
    margin: 0 0 6px;
    font-size: 24px;
    color: var(--text-color, #0f172a);
}
.report-placeholder-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.mini-stat-card,
.achievement-meter-card {
    background: var(--soft-bg, #f8fafc);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 16px;
}
.mini-stat-card span,
.achievement-meter-top span {
    display: block;
    font-size: 13px;
    color: var(--muted-color, #64748b);
    font-weight: 700;
}
.mini-stat-card strong,
.achievement-meter-top strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    color: var(--text-color, #0f172a);
}
.achievement-meter-card { margin-bottom: 18px; }
.achievement-meter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.achievement-track {
    height: 18px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.25);
    overflow: hidden;
}
.achievement-fill {
    height: 100%;
    border-radius: inherit;
    background: #22c55e;
}
.report-table-wrap { overflow-x: auto; }
.report-table { width: 100%; border-collapse: collapse; }
.report-table th,
.report-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    text-align: left;
}
.report-table th {
    background: var(--soft-bg, #f8fafc);
    color: var(--text-color, #0f172a);
    font-weight: 900;
}
html.dark-mode .reports-card,
body.dark-mode .reports-card,
html.dark-mode .report-panel,
body.dark-mode .report-panel,
html.dark-mode .mini-stat-card,
body.dark-mode .mini-stat-card,
html.dark-mode .achievement-meter-card,
body.dark-mode .achievement-meter-card,
html.dark-mode .reports-tabs-wrap .tab-link,
body.dark-mode .reports-tabs-wrap .tab-link,
html.dark-mode .report-table th,
body.dark-mode .report-table th {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.22);
}
html.dark-mode .report-panel h2,
body.dark-mode .report-panel h2,
html.dark-mode .mini-stat-card strong,
body.dark-mode .mini-stat-card strong,
html.dark-mode .achievement-meter-top strong,
body.dark-mode .achievement-meter-top strong,
html.dark-mode .reports-tabs-wrap .tab-link,
body.dark-mode .reports-tabs-wrap .tab-link,
html.dark-mode .report-table th,
body.dark-mode .report-table th,
html.dark-mode .report-table td,
body.dark-mode .report-table td { color: #e5e7eb; }
html.dark-mode .reports-tabs-wrap .tab-link.active,
body.dark-mode .reports-tabs-wrap .tab-link.active {
    background: #3b82f6;
    color: #ffffff;
}
@media (max-width: 768px) {
    .report-placeholder-grid { grid-template-columns: 1fr; }
    .reports-tabs-wrap .tab-link { width: 100%; justify-content: center; }
}

/* =========================================================
   REPORTS PAGE - MATCH SECTIONS + SECTION VIEW UI
========================================================= */
.reports-section-page {
    padding-bottom: 40px;
}

.reports-view-hero {
    margin-bottom: 18px;
}

.reports-tabs-line {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 20px;
    padding: 0 22px;
    min-height: 70px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    margin: 0 0 22px;
}

.reports-tabs-line a {
    height: 70px;
    padding: 0 0 2px;
}

.reports-tabs-line a.active::after {
    bottom: 0;
}

.reports-tab-panel {
    padding: 0;
    overflow: hidden;
}

.report-content-card {
    padding: 26px;
}

.report-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.report-kicker {
    display: inline-flex;
    align-items: center;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 10px;
}

.report-title-row h3 {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -0.3px;
}

.report-title-row p {
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.report-icon-bubble {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 30px;
    flex: 0 0 auto;
}

.report-icon-bubble.blue {
    background: #dbeafe;
    color: #2563eb;
}

.report-icon-bubble.green {
    background: #dcfce7;
    color: #16a34a;
}

.report-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.mini-stat-card.clean {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
    padding: 20px;
}

.report-table-card,
.achievement-summary-card,
.achievement-meter-card.improved {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 22px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.report-table-card {
    overflow: hidden;
}

.report-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.report-table-header h4 {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
}

.report-table-header span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.report-table th {
    color: #475569;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

.report-table td {
    color: #0f172a;
}

.achievement-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
}

.achievement-summary-card span {
    color: #64748b;
    font-weight: 800;
}

.achievement-summary-card strong {
    display: block;
    color: #16a34a;
    font-size: 48px;
    line-height: 1;
    margin: 10px 0;
}

.achievement-summary-card p {
    margin: 0;
    color: #64748b;
}

.achievement-ring {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: conic-gradient(#22c55e 0deg, #e2e8f0 0deg);
    display: grid;
    place-items: center;
    position: relative;
}

.achievement-ring::before {
    content: "";
    position: absolute;
    inset: 12px;
    background: #ffffff;
    border-radius: inherit;
}

.achievement-ring span {
    position: relative;
    color: #16a34a;
    font-size: 26px;
    font-weight: 900;
}

.achievement-meter-card.improved {
    padding: 20px;
    margin-bottom: 18px;
}

html.dark-mode .reports-tabs-line,
body.dark-mode .reports-tabs-line,
html.dark-mode .report-table-card,
body.dark-mode .report-table-card,
html.dark-mode .mini-stat-card.clean,
body.dark-mode .mini-stat-card.clean,
html.dark-mode .achievement-meter-card.improved,
body.dark-mode .achievement-meter-card.improved,
html.dark-mode .reports-tab-panel,
body.dark-mode .reports-tab-panel {
    background: #111827;
    border-color: rgba(148, 163, 184, 0.22);
}

html.dark-mode .report-table-header,
body.dark-mode .report-table-header {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.22);
}

html.dark-mode .achievement-summary-card,
body.dark-mode .achievement-summary-card {
    background: linear-gradient(135deg, #111827, #052e1b);
    border-color: rgba(148, 163, 184, 0.22);
}

html.dark-mode .achievement-ring::before,
body.dark-mode .achievement-ring::before {
    background: #111827;
}

html.dark-mode .report-title-row h3,
body.dark-mode .report-title-row h3,
html.dark-mode .report-table-header h4,
body.dark-mode .report-table-header h4,
html.dark-mode .report-table td,
body.dark-mode .report-table td {
    color: #e5e7eb;
}

html.dark-mode .report-title-row p,
body.dark-mode .report-title-row p,
html.dark-mode .report-table-header span,
body.dark-mode .report-table-header span,
html.dark-mode .achievement-summary-card p,
body.dark-mode .achievement-summary-card p,
html.dark-mode .achievement-summary-card span,
body.dark-mode .achievement-summary-card span {
    color: #94a3b8;
}

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

    .report-title-row,
    .achievement-summary-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .reports-tabs-line {
        gap: 18px;
        overflow-x: auto;
    }

    .reports-tabs-line a {
        white-space: nowrap;
    }
}

/* =========================================================
   SECTIONS PAGE UPGRADE + MEMBERSHIP PLANS
========================================================= */
.sections-page {
    padding-bottom: 40px;
}

.sections-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: 24px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 55%, #60a5fa);
    color: #ffffff;
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.22);
    margin-bottom: 22px;
    overflow: hidden;
    position: relative;
}

.sections-hero-card::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -60px;
    top: -80px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.sections-hero-copy,
.sections-hero-actions {
    position: relative;
    z-index: 1;
}

.eyebrow,
.mini-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #93c5fd;
}

.sections-hero-card .eyebrow {
    color: rgba(255, 255, 255, 0.75);
}

.sections-hero-copy h2 {
    margin: 6px 0 8px;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.sections-hero-copy p {
    margin: 0;
    max-width: 560px;
    color: rgba(255, 255, 255, 0.82);
}

.sections-hero-meta {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sections-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
}

.sections-hero-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.sections-hero-actions .btn,
.sections-hero-actions .btn-light {
    white-space: nowrap;
}

.section-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
    gap: 18px;
    margin-bottom: 22px;
}

.section-usage-card,
.section-feature-card,
.plans-wrap {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.usage-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.usage-top h3,
.section-feature-card h3,
.plans-heading h3 {
    margin: 6px 0;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.usage-top p,
.section-feature-card p,
.plans-heading p,
.pricing-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.55;
}

.usage-meter {
    height: 12px;
    background: #eef2ff;
    border-radius: 999px;
    overflow: hidden;
    margin: 22px 0 16px;
}

.usage-meter-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
}

.usage-meter-fill.beginner {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
}

.usage-meter-fill.pro {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.usage-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.usage-stats div {
    border-radius: 16px;
    background: #f8fafc;
    padding: 14px;
}

.usage-stats strong {
    display: block;
    font-size: 24px;
    color: #0f172a;
    line-height: 1;
}

.usage-stats span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.plan-pill.free,
.plan-pill.beginner,
.plan-pill.pro {
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
}

.plan-pill.free {
    color: #1d4ed8;
    background: #dbeafe;
}

.plan-pill.beginner {
    color: #92400e;
    background: #fef3c7;
}

.plan-pill.pro {
    color: #166534;
    background: #dcfce7;
}

.pending-plan-alert {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: 18px;
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #92400e;
    margin-bottom: 18px;
}

.pending-plan-alert p {
    margin: 4px 0 0;
    color: #92400e;
}

.improved-section-card {
    border: 1px solid #e5e7eb;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.improved-section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.11);
    border-color: #bfdbfe;
}

.section-info-clean p i {
    width: 18px;
    color: #2563eb;
    margin-right: 6px;
}

.improved-empty-section {
    grid-column: 1 / -1;
}

.plans-wrap {
    margin-top: 26px;
}

.plans-heading {
    margin-bottom: 18px;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.pricing-card {
    position: relative;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.pricing-card.highlight {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #ffffff, #eff6ff);
}

.pricing-card.current {
    border-color: #2563eb;
    box-shadow: 0 16px 42px rgba(37, 99, 235, 0.12);
}

.current-ribbon {
    position: absolute;
    right: 16px;
    top: 16px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.pro-ribbon {
    background: #dcfce7;
    color: #166534;
}

.pricing-card h4 {
    margin: 0 0 8px;
    font-size: 20px;
    color: #0f172a;
}

.plan-price {
    font-size: 36px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.04em;
    margin-bottom: 6px;
}

.pricing-card ul {
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.pricing-card li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    font-weight: 650;
}

.pricing-card li i {
    color: #16a34a;
}

.plan-btn {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 900;
    cursor: pointer;
    color: #ffffff;
    background: #2563eb;
}

.plan-btn.beginner {
    background: #f59e0b;
}

.plan-btn.pro {
    background: #16a34a;
}

.plan-btn.pending,
.plan-btn.muted {
    background: #e5e7eb;
    color: #64748b;
    cursor: not-allowed;
}

.btn-disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.plan-request-note {
    margin-top: 8px;
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
}

.plan-actions-admin {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 980px) {
    .sections-hero-card,
    .section-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .sections-hero-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .sections-hero-actions {
        justify-content: flex-start;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .sections-hero-card,
    .section-usage-card,
    .section-feature-card,
    .plans-wrap,
    .pricing-card {
        border-radius: 18px;
        padding: 18px;
    }

    .usage-stats {
        grid-template-columns: 1fr;
    }
}

/* Dark mode for upgraded sections/plans */
body.dark-mode .sections-hero-card {
    background: linear-gradient(135deg, #0f172a, #1e3a8a 60%, #1d4ed8);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

body.dark-mode .section-usage-card,
body.dark-mode .section-feature-card,
body.dark-mode .plans-wrap,
body.dark-mode .pricing-card {
    background: #111827;
    border-color: #1f2937;
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

body.dark-mode .usage-top h3,
body.dark-mode .section-feature-card h3,
body.dark-mode .plans-heading h3,
body.dark-mode .pricing-card h4,
body.dark-mode .plan-price,
body.dark-mode .usage-stats strong {
    color: #f8fafc;
}

body.dark-mode .usage-top p,
body.dark-mode .section-feature-card p,
body.dark-mode .plans-heading p,
body.dark-mode .pricing-card p,
body.dark-mode .pricing-card li,
body.dark-mode .usage-stats span {
    color: #cbd5e1;
}

body.dark-mode .usage-stats div,
body.dark-mode .usage-meter {
    background: #0f172a;
}

body.dark-mode .pricing-card.highlight {
    background: linear-gradient(180deg, #111827, #0f172a);
    border-color: #2563eb;
}

body.dark-mode .pending-plan-alert {
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .28);
    color: #fbbf24;
}

body.dark-mode .pending-plan-alert p {
    color: #fde68a;
}


/* =========================================================
   MEMBERSHIP PAGE + IMPROVED SECTIONS UI
========================================================= */
.section-upgrade-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.section-membership-cta-card {
    margin-top: 26px;
    padding: 24px;
    border-radius: 24px;
    background: linear-gradient(135deg, #ffffff, #eef4ff);
    border: 1px solid rgba(37, 99, 235, 0.14);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.section-membership-cta-card h3 {
    margin: 8px 0 6px;
    font-size: 22px;
}

.section-membership-cta-card p {
    margin: 0;
    color: #64748b;
    max-width: 680px;
}

.sections-page .section-grid {
    margin-top: 24px;
}

.improved-section-card {
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.improved-section-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.improved-section-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px rgba(15, 23, 42, 0.12);
    border-color: rgba(37, 99, 235, 0.22);
}

.membership-page {
    padding-bottom: 48px;
}

.membership-hero-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #173a8f 0%, #2563eb 52%, #60a5fa 100%);
    color: #fff;
    border-radius: 28px;
    padding: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) 340px;
    gap: 24px;
    box-shadow: 0 24px 50px rgba(37, 99, 235, 0.22);
}

.membership-hero-card::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    right: -120px;
    top: -140px;
}

.membership-hero-card .eyebrow,
.membership-page .eyebrow {
    display: inline-flex;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 800;
    opacity: .88;
}

.membership-hero-card h2 {
    margin: 10px 0 10px;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1;
    letter-spacing: -0.04em;
}

.membership-hero-card p {
    margin: 0;
    max-width: 720px;
    color: rgba(255,255,255,.86);
    line-height: 1.7;
}

.membership-hero-meta {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.membership-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
    font-weight: 800;
    font-size: 13px;
}

.membership-status-card {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 24px;
    padding: 22px;
    backdrop-filter: blur(12px);
}

.membership-status-card h3 {
    margin: 8px 0 4px;
    font-size: 34px;
    color: #fff;
}

.membership-current-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
    gap: 20px;
    margin-top: 22px;
}

.membership-note-card,
.membership-plan-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.membership-note-card h3 {
    margin: 8px 0 8px;
    font-size: 22px;
}

.membership-note-card p {
    color: #64748b;
    line-height: 1.7;
}

.membership-plans-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.membership-plan-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    transition: transform .2s ease, box-shadow .2s ease;
}

.membership-plan-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: #cbd5e1;
}

.membership-plan-card.free::before {
    background: linear-gradient(90deg, #64748b, #94a3b8);
}

.membership-plan-card.beginner::before {
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.membership-plan-card.pro::before {
    background: linear-gradient(90deg, #f59e0b, #facc15);
}

.membership-plan-card.current {
    border-color: rgba(37, 99, 235, .35);
    box-shadow: 0 22px 52px rgba(37, 99, 235, .14);
}

.membership-plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 56px rgba(15, 23, 42, .12);
}

.plan-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.plan-overline {
    display: inline-flex;
    color: #2563eb;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.plan-card-head h3 {
    margin: 6px 0 0;
    font-size: 28px;
    letter-spacing: -0.03em;
}

.membership-price {
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
    white-space: nowrap;
}

.plan-tagline {
    color: #64748b;
    line-height: 1.6;
    margin: 14px 0 18px;
}

.plan-limit-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.plan-limit-box i {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eff6ff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.plan-limit-box strong,
.plan-limit-box span {
    display: block;
}

.plan-limit-box span {
    color: #64748b;
    font-size: 13px;
    margin-top: 2px;
}

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

.membership-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #334155;
    font-weight: 700;
}

.membership-feature-list li i {
    margin-top: 3px;
    color: #16a34a;
}

.membership-feature-list li.locked {
    color: #94a3b8;
    font-weight: 600;
}

.membership-feature-list li.locked i {
    color: #94a3b8;
}

.membership-plan-action {
    margin-top: auto;
}

.membership-plan-action form,
.membership-plan-action button {
    width: 100%;
}

body.dark-mode .section-membership-cta-card,
body.dark-mode .membership-note-card,
body.dark-mode .membership-plan-card {
    background: #111827;
    border-color: rgba(148, 163, 184, .18);
    color: #e5e7eb;
}

body.dark-mode .section-membership-cta-card p,
body.dark-mode .membership-note-card p,
body.dark-mode .plan-tagline,
body.dark-mode .membership-feature-list li {
    color: #cbd5e1;
}

body.dark-mode .membership-price,
body.dark-mode .plan-card-head h3,
body.dark-mode .membership-note-card h3 {
    color: #f8fafc;
}

body.dark-mode .plan-limit-box {
    background: #0f172a;
    border-color: rgba(148, 163, 184, .18);
}

body.dark-mode .plan-limit-box i {
    background: #172554;
    color: #93c5fd;
}

@media (max-width: 1100px) {
    .membership-hero-card,
    .membership-current-grid,
    .membership-plans-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .membership-hero-card,
    .section-membership-cta-card {
        padding: 22px;
        border-radius: 22px;
    }

    .section-membership-cta-card {
        align-items: stretch;
        flex-direction: column;
    }

    .membership-hero-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =========================================================
   GradePilot Full System Upgrade - Membership / Sections / Reports
========================================================= */
.topbar-plan-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#eef2ff;color:#2563eb;margin-right:8px;white-space:nowrap}.topbar-plan-badge.pro{background:#fef3c7;color:#92400e}.topbar-plan-badge.beginner{background:#dcfce7;color:#166534}body.dark-mode .topbar-plan-badge{background:#1e293b;color:#93c5fd}body.dark-mode .topbar-plan-badge.pro{background:#422006;color:#facc15}body.dark-mode .topbar-plan-badge.beginner{background:#052e16;color:#86efac}
.gp-page-hero{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px;border-radius:26px;background:linear-gradient(135deg,#2563eb,#60a5fa);color:#fff;box-shadow:0 20px 45px rgba(37,99,235,.22);margin-bottom:22px;overflow:hidden;position:relative}.gp-page-hero:before{content:"";position:absolute;inset:auto -80px -120px auto;width:280px;height:280px;border-radius:999px;background:rgba(255,255,255,.14)}.gp-hero-copy,.gp-hero-actions,.report-access-badge{position:relative;z-index:1}.gp-hero-copy h2{font-size:34px;line-height:1.05;margin:8px 0}.gp-hero-copy p{max-width:680px;margin:0;color:rgba(255,255,255,.86)}.gp-hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.gp-hero-meta span{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:13px;font-weight:700}.gp-hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;border:0;text-decoration:none;cursor:pointer;font-weight:800;transition:.2s ease}.gp-btn-primary{background:#fff;color:#2563eb}.gp-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(15,23,42,.15)}.gp-btn-soft{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.32)}.gp-btn.is-disabled,.gp-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.gp-quick-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.gp-stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:18px;box-shadow:0 10px 25px rgba(15,23,42,.05)}.gp-stat-card span{display:block;color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.gp-stat-card strong{display:block;font-size:28px;margin:5px 0;color:#0f172a}.gp-stat-card small{color:#64748b}.gp-mini-meter{height:10px;border-radius:999px;background:#e5e7eb;margin:13px 0 8px;overflow:hidden}.gp-mini-meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#22c55e)}.gp-section-grid-v2{margin-top:8px}.gp-section-card-v2{border:1px solid #e5e7eb;box-shadow:0 12px 30px rgba(15,23,42,.06)}.gp-empty-wide{grid-column:1/-1}.gp-upgrade-strip,.membership-how-card,.pro-lock-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:20px;margin-top:22px;box-shadow:0 10px 26px rgba(15,23,42,.05)}.gp-upgrade-strip h3,.membership-how-card h3{margin:4px 0}.gp-upgrade-strip p,.membership-how-card p,.pro-lock-banner p{margin:0;color:#64748b}.membership-how-card{justify-content:flex-start}.membership-how-card>div:first-child,.report-icon-bubble{width:54px;height:54px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:22px;flex:0 0 auto}.upgraded-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.upgraded-plan-card{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:26px;padding:22px;box-shadow:0 16px 38px rgba(15,23,42,.07);overflow:hidden}.upgraded-plan-card.current{border-color:#2563eb;box-shadow:0 18px 42px rgba(37,99,235,.15)}.upgraded-plan-card.pro{border-color:#fbbf24}.plan-ribbon,.popular-ribbon{position:absolute;right:18px;top:18px;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900}.plan-ribbon{background:#dbeafe;color:#1d4ed8}.popular-ribbon{background:#fef3c7;color:#92400e;top:48px}.plan-card-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}.plan-icon{width:52px;height:52px;border-radius:18px;background:#eef2ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:22px}.upgraded-plan-card.pro .plan-icon{background:#fef3c7;color:#b45309}.upgraded-plan-card.beginner .plan-icon{background:#dcfce7;color:#166534}.plan-card-head h3{margin:0;font-size:22px}.plan-card-head p{margin:4px 0 0;color:#64748b}.plan-price-row{display:flex;align-items:end;gap:8px;margin-bottom:16px}.plan-price-row strong{font-size:34px;color:#0f172a}.plan-price-row span{color:#64748b;padding-bottom:7px}.report-access-badge{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:999px;background:rgba(255,255,255,.18);font-weight:900}.report-access-badge.pro{background:#fef3c7;color:#92400e}.pro-lock-banner{margin-top:-6px;margin-bottom:18px}.pro-lock-banner>i{font-size:28px;color:#f59e0b}.report-stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-locked{position:relative}.preview-locked:after{content:"Preview mode";position:absolute;right:18px;top:18px;background:#fef3c7;color:#92400e;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900}.achievement-ring{background:conic-gradient(#22c55e 0deg,#e5e7eb 0deg);border:10px solid #f8fafc}.admin-plan-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0}.admin-plan-summary-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 10px 24px rgba(15,23,42,.05)}.admin-plan-summary-card span{color:#64748b;font-size:12px;text-transform:uppercase;font-weight:900}.admin-plan-summary-card strong{display:block;font-size:30px;color:#0f172a;margin:4px 0}.admin-plan-summary-card small{color:#64748b}body.dark-mode .gp-stat-card,body.dark-mode .gp-upgrade-strip,body.dark-mode .membership-how-card,body.dark-mode .upgraded-plan-card,body.dark-mode .pro-lock-banner,body.dark-mode .admin-plan-summary-card{background:#0f172a;border-color:#1e293b;color:#e5e7eb}body.dark-mode .gp-stat-card strong,body.dark-mode .plan-price-row strong,body.dark-mode .admin-plan-summary-card strong{color:#f8fafc}body.dark-mode .gp-stat-card span,body.dark-mode .gp-stat-card small,body.dark-mode .gp-upgrade-strip p,body.dark-mode .membership-how-card p,body.dark-mode .pro-lock-banner p,body.dark-mode .plan-card-head p,body.dark-mode .plan-price-row span{color:#94a3b8}body.dark-mode .gp-mini-meter{background:#1e293b}@media(max-width:1000px){.gp-quick-stats,.upgraded-plan-grid,.report-stat-row,.admin-plan-summary-grid{grid-template-columns:1fr 1fr}.gp-page-hero{align-items:flex-start;flex-direction:column}.gp-hero-actions{justify-content:flex-start}}@media(max-width:640px){.gp-quick-stats,.upgraded-plan-grid,.report-stat-row,.admin-plan-summary-grid{grid-template-columns:1fr}.gp-page-hero{padding:22px}.gp-hero-copy h2{font-size:28px}.gp-upgrade-strip,.pro-lock-banner{flex-direction:column;align-items:flex-start}}


/* =========================================================
   Subscription UI v3 - renamed from Membership
========================================================= */
.subscription-page-v3{padding-bottom:40px}.subscription-hero-v3{display:grid;grid-template-columns:1fr 310px;gap:24px;align-items:stretch;padding:30px;border-radius:30px;background:radial-gradient(circle at 100% 0%,rgba(255,255,255,.24),transparent 34%),linear-gradient(135deg,#1d4ed8,#3b82f6 55%,#60a5fa);color:#fff;box-shadow:0 24px 55px rgba(37,99,235,.23);margin-bottom:22px;overflow:hidden}.subscription-hero-copy h2{font-size:38px;line-height:1.05;margin:8px 0 10px;max-width:760px}.subscription-hero-copy p{margin:0;max-width:760px;color:rgba(255,255,255,.88);font-size:15px}.subscription-hero-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.subscription-hero-pills span{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 13px;font-weight:800;font-size:13px}.subscription-usage-card{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);border-radius:24px;padding:22px;display:flex;flex-direction:column;justify-content:center}.subscription-usage-card small{text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:rgba(255,255,255,.7)}.subscription-usage-card strong{font-size:42px;line-height:1;margin:10px 0}.subscription-usage-card span{color:rgba(255,255,255,.86)}.subscription-meter{height:10px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;margin-top:18px}.subscription-meter i{display:block;height:100%;background:linear-gradient(90deg,#fff,#bbf7d0);border-radius:999px}.subscription-pending-card,.subscription-footer-note{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:18px 20px;margin:0 0 20px;box-shadow:0 14px 35px rgba(15,23,42,.06)}.pending-icon,.subscription-footer-note>div:first-child{width:54px;height:54px;border-radius:18px;background:#fef3c7;color:#b45309;display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto}.subscription-pending-card span,.subscription-plan-head span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;color:#60a5fa}.subscription-pending-card h3{margin:4px 0;font-size:18px}.subscription-pending-card p,.subscription-pending-card small,.subscription-footer-note p{margin:0;color:#64748b}.subscription-workflow-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.subscription-workflow-card{background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:20px;box-shadow:0 12px 28px rgba(15,23,42,.05)}.subscription-workflow-card i{width:44px;height:44px;border-radius:16px;background:#eff6ff;color:#2563eb;display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}.subscription-workflow-card h3{margin:0 0 7px;font-size:17px}.subscription-workflow-card p{margin:0;color:#64748b}.subscription-plan-grid-v3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.subscription-plan-card-v3{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:28px;padding:24px;box-shadow:0 18px 42px rgba(15,23,42,.07);overflow:hidden;transition:.2s ease}.subscription-plan-card-v3:hover{transform:translateY(-4px);box-shadow:0 24px 55px rgba(15,23,42,.11)}.subscription-plan-card-v3:before{content:"";position:absolute;inset:0 0 auto;height:6px;background:#94a3b8}.subscription-plan-card-v3.beginner:before{background:linear-gradient(90deg,#06b6d4,#2563eb)}.subscription-plan-card-v3.pro:before{background:linear-gradient(90deg,#f59e0b,#facc15)}.subscription-plan-card-v3.current{border-color:#2563eb}.plan-badge{position:absolute;right:18px;top:18px;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900}.current-badge{background:#dbeafe;color:#1d4ed8}.best-badge{background:#fef3c7;color:#92400e;top:52px}.subscription-plan-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px}.subscription-plan-icon{width:56px;height:56px;border-radius:20px;background:#eef2ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:23px;flex:0 0 auto}.subscription-plan-card-v3.beginner .subscription-plan-icon{background:#ecfeff;color:#0891b2}.subscription-plan-card-v3.pro .subscription-plan-icon{background:#fef3c7;color:#b45309}.subscription-plan-head h3{font-size:25px;margin:4px 0}.subscription-plan-head p{margin:0;color:#64748b}.subscription-price-row{display:flex;align-items:flex-end;gap:8px;margin:0 0 16px}.subscription-price-row strong{font-size:38px;line-height:1;color:#0f172a}.subscription-price-row span{color:#64748b;padding-bottom:5px}.subscription-limit-box{display:flex;gap:12px;align-items:center;background:#f8fafc;border:1px solid #e5e7eb;border-radius:18px;padding:14px;margin-bottom:18px}.subscription-limit-box i{width:42px;height:42px;border-radius:14px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center}.subscription-limit-box strong{display:block;color:#0f172a}.subscription-limit-box span{display:block;color:#64748b;font-size:13px}.subscription-feature-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}.subscription-feature-list li{display:flex;align-items:center;gap:10px;font-weight:700;color:#0f172a}.subscription-feature-list li i{color:#16a34a}.subscription-feature-list li.locked{color:#94a3b8}.subscription-feature-list li.locked i{color:#94a3b8}.subscription-action form,.subscription-action button{width:100%}.subscription-btn{width:100%;border:0;border-radius:16px;padding:13px 16px;font-weight:900;cursor:pointer;background:#2563eb;color:#fff}.subscription-btn.pro{background:linear-gradient(135deg,#f59e0b,#facc15);color:#111827}.subscription-btn.beginner{background:linear-gradient(135deg,#06b6d4,#2563eb)}.subscription-btn.muted,.subscription-btn.pending{background:#f1f5f9;color:#64748b;cursor:not-allowed}.subscription-footer-note{margin-top:24px;justify-content:space-between}.subscription-footer-note .gp-btn-primary{background:#2563eb;color:#fff}.user-nav a[href="subscription.php"].active{background:#eef2ff;color:#2563eb}body.dark-mode .subscription-workflow-card,body.dark-mode .subscription-plan-card-v3,body.dark-mode .subscription-pending-card,body.dark-mode .subscription-footer-note{background:#0f172a;border-color:#1e293b;color:#e5e7eb}body.dark-mode .subscription-plan-head h3,body.dark-mode .subscription-price-row strong,body.dark-mode .subscription-limit-box strong,body.dark-mode .subscription-feature-list li{color:#f8fafc}body.dark-mode .subscription-plan-head p,body.dark-mode .subscription-pending-card p,body.dark-mode .subscription-pending-card small,body.dark-mode .subscription-footer-note p,body.dark-mode .subscription-workflow-card p,body.dark-mode .subscription-limit-box span,body.dark-mode .subscription-price-row span{color:#94a3b8}body.dark-mode .subscription-limit-box{background:#111827;border-color:#1e293b}body.dark-mode .subscription-btn.muted,body.dark-mode .subscription-btn.pending{background:#1e293b;color:#94a3b8}@media(max-width:1020px){.subscription-hero-v3{grid-template-columns:1fr}.subscription-workflow-grid,.subscription-plan-grid-v3{grid-template-columns:1fr 1fr}}@media(max-width:680px){.subscription-workflow-grid,.subscription-plan-grid-v3{grid-template-columns:1fr}.subscription-hero-v3{padding:22px}.subscription-hero-copy h2{font-size:30px}.subscription-footer-note{align-items:flex-start;flex-direction:column}}

/* =========================================================
   FINAL PATCH: MODALS ABOVE STICKY HEADER + TRUE DARK THEME
   Added 2026-04-26
========================================================= */

/* Keep every modal/popup above the sticky topbar, section tabs, and fullscreen helpers */
body.modal-open {
    overflow: hidden;
}

body.modal-open .user-topbar,
body.modal-open .section-tabs,
body.modal-open .section-tabs-modern,
body.modal-open .section-tabs-line {
    z-index: 1 !important;
}

.modal-overlay,
.modal-overlay.show,
.clear-modal-overlay,
.clear-modal-overlay.show,
.learner-record-overlay,
#learnerModal,
#importLearnerModal,
#sectionModal,
#subjectModal,
#learnerRecordModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483600 !important;
}

.modal-overlay.show,
.clear-modal-overlay.show,
.learner-record-overlay.show,
#learnerModal.show,
#importLearnerModal.show,
#sectionModal.show,
#subjectModal.show,
#learnerRecordModal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background: rgba(2, 6, 23, 0.66) !important;
    backdrop-filter: blur(5px) !important;
}

.section-modal,
.clear-modal,
.learner-record-modal,
.import-modal-simple,
.gp-modal-v2 {
    position: relative !important;
    z-index: 2147483601 !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
}

/* Make normal modals compact and centered even when the page has sticky section tabs */
.import-modal-simple,
#learnerModal .section-modal,
#subjectModal .section-modal,
#sectionModal .section-modal {
    width: min(640px, 96vw) !important;
}

.learner-record-modal {
    width: min(1180px, 96vw) !important;
}

/* TRUE DARK MODE: charcoal/black, less blue */
html.dark-mode,
body.dark-mode {
    background: #09090b !important;
    color: #e7e7ea !important;
    color-scheme: dark !important;
}

html.dark-mode body,
body.dark-mode,
body.dark-mode .user-shell,
body.dark-mode .user-main,
body.dark-mode .user-content {
    background: #09090b !important;
    color: #e7e7ea !important;
}

body.dark-mode .user-sidebar,
body.dark-mode .user-topbar,
body.dark-mode .profile-card,
body.dark-mode .dashboard-panel,
body.dark-mode .user-stat-card,
body.dark-mode .section-card,
body.dark-mode .section-card-v2,
body.dark-mode .gp-section-card-v2,
body.dark-mode .section-tab-panel,
body.dark-mode .subject-card,
body.dark-mode .table-card,
body.dark-mode .card,
body.dark-mode .section-modal,
body.dark-mode .clear-modal,
body.dark-mode .empty-section,
body.dark-mode .class-record-wrap,
body.dark-mode .gp-stat-card,
body.dark-mode .gp-upgrade-strip,
body.dark-mode .membership-how-card,
body.dark-mode .upgraded-plan-card,
body.dark-mode .pro-lock-banner,
body.dark-mode .admin-plan-summary-card,
body.dark-mode .subscription-workflow-card,
body.dark-mode .subscription-plan-card-v3,
body.dark-mode .subscription-pending-card,
body.dark-mode .subscription-footer-note,
body.dark-mode .reports-card,
body.dark-mode .report-card,
body.dark-mode .gp-report-card {
    background: #111113 !important;
    border-color: #27272a !important;
    color: #e7e7ea !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42) !important;
}

body.dark-mode .user-sidebar {
    background: #0b0b0d !important;
    border-right: 1px solid #27272a !important;
}

body.dark-mode .user-topbar {
    background: #111113 !important;
    border-bottom: 1px solid #27272a !important;
}

body.dark-mode .user-brand h2,
body.dark-mode .user-topbar h1,
body.dark-mode .page-header h2,
body.dark-mode .page-header h3,
body.dark-mode .profile-card-header h3,
body.dark-mode .profile-section-title h3,
body.dark-mode .section-title,
body.dark-mode .panel-header h3,
body.dark-mode .empty-state h3,
body.dark-mode .empty-section h3,
body.dark-mode .tab-placeholder h3,
body.dark-mode .subject-card-header h3,
body.dark-mode .subject-list-title h3,
body.dark-mode .modal-header h3,
body.dark-mode .clear-modal-header h3,
body.dark-mode .section-info-clean strong,
body.dark-mode .note-item strong,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode strong {
    color: #fafafa !important;
}

body.dark-mode .user-brand span,
body.dark-mode .user-topbar p,
body.dark-mode .page-header p,
body.dark-mode .profile-card-header p,
body.dark-mode .profile-section-title p,
body.dark-mode .panel-header p,
body.dark-mode .topbar-user span,
body.dark-mode .section-info-clean p,
body.dark-mode .tab-placeholder,
body.dark-mode .tab-placeholder p,
body.dark-mode .empty-section,
body.dark-mode .subject-card-header p,
body.dark-mode .modal-header p,
body.dark-mode .clear-modal-header p,
body.dark-mode .clear-group-title span,
body.dark-mode p,
body.dark-mode small,
body.dark-mode .text-muted {
    color: #a1a1aa !important;
}

body.dark-mode .user-nav a,
body.dark-mode .user-sidebar-footer a {
    color: #d4d4d8 !important;
}

body.dark-mode .user-nav a:hover,
body.dark-mode .user-nav a.active {
    background: #1f1f23 !important;
    color: #ffffff !important;
}

body.dark-mode .user-nav a.active i,
body.dark-mode .user-nav a:hover i {
    color: #facc15 !important;
}

body.dark-mode .topbar-user,
body.dark-mode .quick-actions a,
body.dark-mode .note-item,
body.dark-mode .btn-light,
body.dark-mode .password-note,
body.dark-mode .clear-group,
body.dark-mode .clear-group label,
body.dark-mode .sidebar-toggle,
body.dark-mode .dark-toggle,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .csv-format-simple,
body.dark-mode .sample-simple,
body.dark-mode .subscription-limit-box {
    background: #18181b !important;
    border-color: #3f3f46 !important;
    color: #f4f4f5 !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #71717a !important;
}

body.dark-mode .dark-toggle {
    color: #facc15 !important;
}

body.dark-mode .dark-toggle:hover,
body.dark-mode .sidebar-toggle:hover {
    background: #27272a !important;
    color: #facc15 !important;
}

body.dark-mode .section-view-hero,
body.dark-mode .gp-page-hero,
body.dark-mode .subscription-hero-v3,
body.dark-mode .sections-hero,
body.dark-mode .page-hero {
    background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.12), transparent 34%),
        linear-gradient(135deg, #18181b, #09090b) !important;
    border: 1px solid #27272a !important;
    color: #ffffff !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.52) !important;
}

body.dark-mode .section-tabs,
body.dark-mode .section-tabs-modern,
body.dark-mode .section-tabs-line {
    background: #111113 !important;
    border-color: #27272a !important;
}

body.dark-mode .section-tabs a,
body.dark-mode .section-tabs-line a {
    color: #d4d4d8 !important;
}

body.dark-mode .section-tabs a.active,
body.dark-mode .section-tabs a:hover,
body.dark-mode .section-tabs-line a.active,
body.dark-mode .section-tabs-line a:hover {
    color: #facc15 !important;
}

body.dark-mode .section-tabs-line a.active::after,
body.dark-mode .section-tabs a.active::after {
    background: #facc15 !important;
}

body.dark-mode table,
body.dark-mode .learner-table,
body.dark-mode .subject-table,
body.dark-mode .class-record-table {
    color: #e7e7ea !important;
    border-color: #27272a !important;
}

body.dark-mode th,
body.dark-mode td,
body.dark-mode .table th,
body.dark-mode .table td {
    border-color: #27272a !important;
}

body.dark-mode thead th,
body.dark-mode .learner-table thead th,
body.dark-mode .subject-table thead th {
    background: #18181b !important;
    color: #d4d4d8 !important;
}

body.dark-mode tbody tr:hover {
    background: #18181b !important;
}

body.dark-mode .modal-overlay.show,
body.dark-mode .clear-modal-overlay.show,
body.dark-mode .learner-record-overlay.show {
    background: rgba(0, 0, 0, 0.72) !important;
}

body.dark-mode .section-modal,
body.dark-mode .learner-record-modal,
body.dark-mode .import-modal-simple,
body.dark-mode .clear-modal {
    background: #111113 !important;
    color: #e7e7ea !important;
    border: 1px solid #27272a !important;
}

body.dark-mode .modal-close,
body.dark-mode .clear-modal-close {
    background: #27272a !important;
    color: #f4f4f5 !important;
}

body.dark-mode .success-alert {
    background: #052e1a !important;
    color: #bbf7d0 !important;
}

body.dark-mode .error-alert {
    background: #3f1212 !important;
    color: #fecaca !important;
}


/* One-year subscription validity cards */
.subscription-validity-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}
.subscription-validity-card > div {
    background: #ffffff;
    border: 1px solid #dbe7ff;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}
.subscription-validity-card span {
    display: block;
    color: #60a5fa;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.subscription-validity-card strong {
    display: block;
    color: #0f172a;
    font-size: 20px;
}
body.dark-mode .subscription-validity-card > div {
    background: #181818;
    border-color: #2b2b2b;
    box-shadow: none;
}
body.dark-mode .subscription-validity-card strong {
    color: #f5f5f5;
}
@media (max-width: 800px) {
    .subscription-validity-card { grid-template-columns: 1fr; }
}


/* =========================================================
   SUBSCRIPTION EXPIRY BADGES + FEATURE LOCKS
========================================================= */
.topbar-plan-badge{text-decoration:none!important;}
.topbar-plan-badge.expiring{background:#fff7ed!important;color:#c2410c!important;border:1px solid #fed7aa;animation:gpPulseWarn 1.8s ease-in-out infinite;}
body.dark-mode .topbar-plan-badge.expiring{background:#431407!important;color:#fdba74!important;border-color:#9a3412;}
@keyframes gpPulseWarn{0%,100%{box-shadow:0 0 0 rgba(251,146,60,0)}50%{box-shadow:0 0 0 5px rgba(251,146,60,.14)}}
.section-tabs-line a.locked{opacity:.78;position:relative;}
.section-tabs-line a.locked:hover{opacity:1;}
.tab-pro-pill{font-size:10px;font-weight:900;padding:3px 7px;border-radius:999px;background:#fef3c7;color:#92400e;margin-left:5px;}
body.dark-mode .tab-pro-pill{background:#422006;color:#facc15;}
.feature-lock-card{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:42px 24px;border:1px dashed #bfdbfe;border-radius:26px;background:linear-gradient(180deg,#ffffff,#f8fbff);box-shadow:0 18px 38px rgba(15,23,42,.06);}
.feature-lock-icon{width:74px;height:74px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:#fef3c7;color:#b45309;font-size:30px;margin-bottom:16px;}
.feature-lock-card h3{margin:0 0 8px;color:#0f172a;font-size:24px;}
.feature-lock-card p{max-width:640px;margin:0 0 20px;color:#64748b;line-height:1.65;}
.limit-alert.warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.subscription-expiry-card{display:flex;gap:16px;align-items:center;background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46;border-radius:22px;padding:18px 20px;margin-bottom:18px;box-shadow:0 12px 30px rgba(22,163,74,.08);}
.subscription-expiry-card>div:first-child{width:50px;height:50px;border-radius:18px;background:#dcfce7;color:#16a34a;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto;}
.subscription-expiry-card span{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:900;color:#16a34a;}
.subscription-expiry-card h3{margin:3px 0 4px;color:#064e3b;font-size:19px;}
.subscription-expiry-card p{margin:0;color:#047857;}
.subscription-expiry-card.warning{background:#fff7ed;border-color:#fed7aa;color:#9a3412;}
.subscription-expiry-card.warning>div:first-child{background:#ffedd5;color:#ea580c;}
.subscription-expiry-card.warning span,.subscription-expiry-card.warning p{color:#c2410c;}
.subscription-expiry-card.warning h3{color:#9a3412;}
body.dark-mode .feature-lock-card{background:linear-gradient(180deg,#111827,#0b1220);border-color:#334155;box-shadow:none;}
body.dark-mode .feature-lock-card h3{color:#f8fafc;}
body.dark-mode .feature-lock-card p{color:#94a3b8;}
body.dark-mode .subscription-expiry-card{background:#052e16;border-color:#166534;color:#bbf7d0;box-shadow:none;}
body.dark-mode .subscription-expiry-card>div:first-child{background:#064e3b;color:#86efac;}
body.dark-mode .subscription-expiry-card span,body.dark-mode .subscription-expiry-card p{color:#86efac;}
body.dark-mode .subscription-expiry-card h3{color:#dcfce7;}
body.dark-mode .subscription-expiry-card.warning{background:#431407;border-color:#9a3412;}
body.dark-mode .subscription-expiry-card.warning>div:first-child{background:#7c2d12;color:#fdba74;}
body.dark-mode .subscription-expiry-card.warning span,body.dark-mode .subscription-expiry-card.warning p{color:#fdba74;}
body.dark-mode .subscription-expiry-card.warning h3{color:#ffedd5;}


/* =========================================================
   SECTION CARD COLOR CUSTOMIZER
========================================================= */
.section-card.custom-colored {
    background: var(--section-card-bg, #ffffff);
    border-color: rgba(37, 99, 235, 0.16);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.section-card.custom-colored::before {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.95), rgba(14, 165, 233, 0.95));
}

.section-card-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-color-btn {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 13px;
    background: #eef2ff;
    color: #2563eb;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: transform .18s ease, background .18s ease, color .18s ease;
}

.section-color-btn:hover {
    transform: translateY(-1px);
    background: #2563eb;
    color: #ffffff;
}

.color-modal-box {
    max-width: 560px;
}

.color-preview-card {
    min-height: 106px;
    border-radius: 22px;
    border: 1px solid #e2e8f0;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    transition: background .18s ease;
}

.color-preview-card strong {
    display: block;
    font-size: 18px;
    color: #0f172a;
}

.color-preview-card span {
    color: #64748b;
    font-size: 13px;
}

.color-palette-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.color-swatch {
    height: 44px;
    border-radius: 14px;
    border: 2px solid #e2e8f0;
    background: var(--swatch);
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .04);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.color-swatch:hover,
.color-swatch.active {
    transform: translateY(-2px);
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .16);
}

.color-swatch.is-white {
    background:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    background-color: #ffffff;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group input[type="color"] {
    height: 46px;
    padding: 5px;
    cursor: pointer;
}

body.dark-mode .section-card.custom-colored {
    background: color-mix(in srgb, var(--section-card-bg, #111827) 20%, #111827 80%);
    border-color: #1f2937;
}

body.dark-mode .section-color-btn {
    background: #1f2937;
    color: #93c5fd;
}

body.dark-mode .section-color-btn:hover {
    background: #2563eb;
    color: #ffffff;
}

body.dark-mode .color-preview-card {
    border-color: #334155;
}

body.dark-mode .color-preview-card strong {
    color: #f8fafc;
}

body.dark-mode .color-preview-card span {
    color: #94a3b8;
}

@media (max-width: 640px) {
    .color-palette-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* =========================================================
   UPGRADED SECTION CARD COLOR UI
========================================================= */
.gp-section-card-v2.custom-colored {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--section-card-bg, #ffffff) 78%, #ffffff 22%) 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--section-card-bg, #ffffff) 86%, #ffffff 14%) 0%, #ffffff 95%);
    border-color: color-mix(in srgb, var(--section-card-bg, #2563eb) 45%, #dbeafe 55%);
}
.gp-section-card-v2.custom-colored::before {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--section-card-bg, #2563eb) 65%, #2563eb 35%),
        color-mix(in srgb, var(--section-card-bg, #38bdf8) 60%, #0ea5e9 40%)
    );
}
.gp-section-card-v2.custom-colored .section-icon {
    background: color-mix(in srgb, var(--section-card-bg, #eff6ff) 70%, #dbeafe 30%);
    color: color-mix(in srgb, var(--section-card-bg, #2563eb) 35%, #1d4ed8 65%);
}
.gp-section-card-v2.custom-colored .section-badge {
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(12px);
}
.section-color-btn {
    width: auto;
    min-width: 42px;
    padding: 0 10px;
    gap: 7px;
}
.section-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.9);
    box-shadow: 0 0 0 1px rgba(15,23,42,.12);
}
.color-modal-box {
    max-width: 720px;
}
.upgraded-color-preview {
    min-height: 128px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.65), transparent 44%),
        linear-gradient(135deg, var(--preview-bg, #ffffff), color-mix(in srgb, var(--preview-bg, #ffffff) 58%, #ffffff 42%));
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 18px 40px rgba(15,23,42,.08);
}
.upgraded-color-preview .section-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(10px);
}
.preview-kicker,
.color-section-label {
    display: block;
    margin-bottom: 4px;
    color: #2563eb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 900;
}
.upgraded-color-preview small {
    display: inline-flex;
    margin-top: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,.70);
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}
.color-picker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(240px, .85fr);
    gap: 18px;
    align-items: start;
}
.upgraded-palette-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 10px 0 0;
}
.color-theme-tile {
    height: 72px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 9px;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.75), transparent 42%),
        linear-gradient(135deg, var(--swatch), color-mix(in srgb, var(--swatch) 65%, #ffffff 35%));
}
.color-theme-tile span {
    position: relative;
    z-index: 1;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    color: #0f172a;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.color-theme-tile.active::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
}
.custom-color-panel {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 22px;
    padding: 16px;
}
.custom-color-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 10px;
}
.custom-color-row input[type="color"] {
    width: 64px;
    height: 58px;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    background: #fff;
    padding: 5px;
    flex: 0 0 auto;
}
.custom-color-row strong {
    display: block;
    color: #0f172a;
    margin-bottom: 2px;
}
.custom-color-row span {
    display: block;
    color: #64748b;
    font-size: 13px;
    line-height: 1.35;
}
.reset-color-btn {
    width: 100%;
    margin-top: 14px;
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    background: #e2e8f0;
    color: #334155;
    font-weight: 900;
    cursor: pointer;
}
.reset-color-btn:hover {
    background: #cbd5e1;
}
.upgraded-color-actions {
    margin-top: 18px;
}
body.dark-mode .gp-section-card-v2.custom-colored {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--section-card-bg, #111827) 18%, transparent 82%) 0%, transparent 42%),
        linear-gradient(145deg, color-mix(in srgb, var(--section-card-bg, #111827) 12%, #111827 88%) 0%, #0b0f17 100%);
    border-color: color-mix(in srgb, var(--section-card-bg, #1f2937) 30%, #1f2937 70%);
}
body.dark-mode .gp-section-card-v2.custom-colored .section-badge,
body.dark-mode .upgraded-color-preview small,
body.dark-mode .color-theme-tile span {
    background: rgba(15,23,42,.82);
    color: #e5e7eb;
}
body.dark-mode .custom-color-panel {
    background: #0b0f17;
    border-color: #1f2937;
}
body.dark-mode .custom-color-row strong {
    color: #f8fafc;
}
body.dark-mode .custom-color-row span {
    color: #94a3b8;
}
body.dark-mode .preview-kicker,
body.dark-mode .color-section-label {
    color: #93c5fd;
}
body.dark-mode .reset-color-btn {
    background: #1f2937;
    color: #e5e7eb;
}
body.dark-mode .reset-color-btn:hover {
    background: #334155;
}
@media (max-width: 760px) {
    .color-picker-layout { grid-template-columns: 1fr; }
    .upgraded-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =========================================================
   GRADIENT SECTION CARD DESIGNER
========================================================= */
.gp-section-card-v2.gradient-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, var(--section-grad-1, #2563eb), var(--section-grad-2, #60a5fa));
    border-color: rgba(255,255,255,.30);
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.gp-section-card-v2.gradient-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.28), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.22), transparent 32%),
        rgba(0,0,0, calc(1 - var(--section-card-opacity, 1)));
    pointer-events: none;
}
.gp-section-card-v2.gradient-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 24px 55px color-mix(in srgb, var(--section-grad-1, #2563eb) 34%, rgba(15,23,42,.25) 66%);
    border-color: rgba(255,255,255,.55);
    filter: saturate(1.06);
}
.gp-section-card-v2.gradient-card .section-title,
.gp-section-card-v2.gradient-card .section-info-clean p,
.gp-section-card-v2.gradient-card .section-info-clean strong,
.gp-section-card-v2.gradient-card .section-info-clean i { color: #ffffff; }
.gp-section-card-v2.gradient-card .section-icon,
.gp-section-card-v2.gradient-card .section-color-btn,
.gp-section-card-v2.gradient-card .section-badge {
    background: rgba(255,255,255,.20);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(14px);
}
.gp-section-card-v2.gradient-card .section-btn.primary {
    background: rgba(255,255,255,.92);
    color: #0f172a;
}
.gp-section-card-v2.gradient-card .section-btn.light {
    background: rgba(15,23,42,.18);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.20);
}
.gp-section-card-v2.gradient-card.theme-neon:hover { box-shadow: 0 24px 60px rgba(34,197,94,.28), 0 0 28px rgba(6,182,212,.22); }
.gp-section-card-v2.gradient-card.theme-purple:hover { box-shadow: 0 24px 60px rgba(124,58,237,.30), 0 0 28px rgba(217,70,239,.22); }
.gp-section-card-v2.gradient-card.theme-sunset:hover { box-shadow: 0 24px 60px rgba(249,115,22,.28), 0 0 28px rgba(239,68,68,.20); }
.gp-section-card-v2.gradient-card.theme-blue:hover { box-shadow: 0 24px 60px rgba(37,99,235,.28), 0 0 28px rgba(96,165,250,.22); }

.gradient-designer-modal { max-width: 780px; }
.gradient-preview-card {
    background: linear-gradient(135deg, var(--preview-grad-1, #2563eb), var(--preview-grad-2, #60a5fa));
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
.gradient-preview-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0, calc(1 - var(--preview-opacity, 1)));
    pointer-events: none;
}
.gradient-preview-card > * { position: relative; z-index: 1; }
.gradient-preview-card strong,
.gradient-preview-card .preview-kicker { color: #ffffff; }
.gradient-preview-card small {
    background: rgba(255,255,255,.20);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
}
.gradient-theme-grid .color-theme-tile {
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.35), transparent 32%),
        linear-gradient(135deg, var(--grad1), var(--grad2));
    color: #fff;
}
.gradient-theme-grid .color-theme-tile span { background: rgba(255,255,255,.86); color: #0f172a; }
.gradient-pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.gradient-pair-row label { display: grid; gap: 7px; color: #475569; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.gradient-pair-row input[type="color"] { width: 100%; height: 58px; border-radius: 16px; border: 1px solid #cbd5e1; background: #fff; padding: 5px; cursor: pointer; }
.opacity-control-box { margin-top: 16px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.70); border: 1px solid #e2e8f0; }
.opacity-control-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.opacity-control-head strong { color: #0f172a; }
.opacity-control-head span { color: #2563eb; font-weight: 900; }
.opacity-control-box input[type="range"] { width: 100%; accent-color: #2563eb; }
body.dark-mode .gp-section-card-v2.gradient-card {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--section-grad-1, #2563eb) 58%, #0b0f17 42%),
        color-mix(in srgb, var(--section-grad-2, #60a5fa) 48%, #0b0f17 52%)
    );
    border-color: rgba(148,163,184,.22);
    box-shadow: 0 18px 38px rgba(0,0,0,.34);
}
body.dark-mode .gp-section-card-v2.gradient-card::after {
    background:
        radial-gradient(circle at 12% 8%, rgba(255,255,255,.10), transparent 28%),
        radial-gradient(circle at 92% 14%, rgba(255,255,255,.08), transparent 32%),
        rgba(0,0,0, calc(.22 + (1 - var(--section-card-opacity, 1))));
}
body.dark-mode .gp-section-card-v2.gradient-card:hover {
    box-shadow: 0 28px 70px rgba(0,0,0,.42), 0 0 28px color-mix(in srgb, var(--section-grad-2, #60a5fa) 22%, transparent 78%);
}
body.dark-mode .gradient-custom-panel,
body.dark-mode .opacity-control-box { background: #0b0f17; border-color: #1f2937; }
body.dark-mode .gradient-pair-row label { color: #cbd5e1; }
body.dark-mode .opacity-control-head strong { color: #f8fafc; }
body.dark-mode .opacity-control-head span { color: #93c5fd; }
@media (max-width: 760px) { .gradient-pair-row { grid-template-columns: 1fr; } }

/* =========================================================
   19. GRADEPILOT THEME SETTINGS - PRO STUDIO
========================================================= */
:root {
    --gp-primary: #2563eb;
    --gp-primary-dark: #1d4ed8;
    --gp-primary-rgb: 37, 99, 235;
    --gp-primary-soft: rgba(37, 99, 235, .12);
    --gp-dark-bg: #0f172a;
    --gp-dark-surface: #111827;
    --gp-dark-border: #1f2937;
    --gp-dark-text: #e5e7eb;
    --gp-dark-muted: #94a3b8;
    --gp-dark-title: #f8fafc;
    --gp-dark-icon: #93c5fd;
    --gp-dark-active: #1e3a8a;
    --gp-dark-active-soft: rgba(30, 58, 138, .72);
}
.btn,.btn-sm,.btn-edit,.primary-action,.create-section-btn,.save-btn,button[type="submit"]{background:var(--gp-primary)}
.btn:hover,.primary-action:hover,.create-section-btn:hover,.save-btn:hover,button[type="submit"]:hover{background:var(--gp-primary-dark)}
.brand-icon,.avatar-circle,.welcome-art,.settings-hero-icon,.preview-logo{background:linear-gradient(135deg,var(--gp-primary),var(--gp-primary-dark))}
.user-nav a[href="settings.php"]{position:relative}.user-nav a[href="settings.php"]::after{content:"New";margin-left:auto;font-size:10px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--gp-primary),var(--gp-primary-dark));padding:3px 7px;border-radius:999px;box-shadow:0 8px 18px rgba(var(--gp-primary-rgb),.22)}
.user-nav a:hover,.user-nav a.active,.dark-toggle:hover,.sidebar-toggle:hover{color:var(--gp-primary);background:var(--gp-primary-soft)}
.dark-toggle,.sidebar-toggle,.note-item i,.user-stat-card .stat-icon,.settings-panel-head>i{color:var(--gp-primary)}
body.dark-mode{background:var(--gp-dark-bg);color:var(--gp-dark-text)}
body.dark-mode .user-shell,body.dark-mode .user-main,body.dark-mode .user-content{background:var(--gp-dark-bg);color:var(--gp-dark-text)}
body.dark-mode .user-sidebar,body.dark-mode .user-topbar,body.dark-mode .profile-card,body.dark-mode .dashboard-panel,body.dark-mode .user-stat-card,body.dark-mode .section-card,body.dark-mode .section-tab-panel,body.dark-mode .subject-card,body.dark-mode .table-card,body.dark-mode .card,body.dark-mode .modal-overlay .section-modal,body.dark-mode .clear-modal,body.dark-mode .empty-section,body.dark-mode .class-record-wrap,body.dark-mode .settings-panel,body.dark-mode .theme-preview{background:var(--gp-dark-surface);border-color:var(--gp-dark-border);color:var(--gp-dark-text)}
body.dark-mode .user-brand h2,body.dark-mode .user-topbar h1,body.dark-mode .page-header h2,body.dark-mode .page-header h3,body.dark-mode .profile-card-header h3,body.dark-mode .profile-section-title h3,body.dark-mode .section-title,body.dark-mode .panel-header h3,body.dark-mode .empty-state h3,body.dark-mode .empty-section h3,body.dark-mode .tab-placeholder h3,body.dark-mode .subject-card-header h3,body.dark-mode .subject-list-title h3,body.dark-mode .modal-header h3,body.dark-mode .clear-modal-header h3,body.dark-mode .section-info-clean strong,body.dark-mode .note-item strong,body.dark-mode .settings-panel h3,body.dark-mode .preview-content h4{color:var(--gp-dark-title)}
body.dark-mode .user-brand span,body.dark-mode .user-topbar p,body.dark-mode .page-header p,body.dark-mode .profile-card-header p,body.dark-mode .profile-section-title p,body.dark-mode .panel-header p,body.dark-mode .topbar-user span,body.dark-mode .section-info-clean p,body.dark-mode .tab-placeholder,body.dark-mode .tab-placeholder p,body.dark-mode .empty-section,body.dark-mode .subject-card-header p,body.dark-mode .modal-header p,body.dark-mode .clear-modal-header p,body.dark-mode .clear-group-title span,body.dark-mode .settings-panel p,body.dark-mode .preview-content p{color:var(--gp-dark-muted)}
body.dark-mode .user-nav a,body.dark-mode .user-sidebar-footer a,body.dark-mode .settings-panel-head>i,body.dark-mode .preview-sidebar span i{color:var(--gp-dark-icon)}
body.dark-mode .user-nav a:hover,body.dark-mode .user-nav a.active,body.dark-mode .preview-sidebar span.active{background:var(--gp-dark-active);color:var(--gp-dark-title)}
body.dark-mode .dark-toggle,body.dark-mode .sidebar-toggle,body.dark-mode .topbar-user,body.dark-mode .quick-actions a,body.dark-mode .note-item,body.dark-mode .btn-light,body.dark-mode .password-note,body.dark-mode .clear-group,body.dark-mode .clear-group label,body.dark-mode .color-control,body.dark-mode .preset-card-pro,body.dark-mode .field-group-card,body.dark-mode .contrast-note{background:color-mix(in srgb,var(--gp-dark-surface) 84%,white 16%);border-color:var(--gp-dark-border);color:var(--gp-dark-text)}
.settings-page.pro-settings-page{padding:clamp(18px,3vw,34px);position:relative;overflow:hidden}.settings-page.pro-settings-page::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 18% 10%,rgba(var(--gp-primary-rgb),.14),transparent 25%),radial-gradient(circle at 92% 8%,color-mix(in srgb,var(--gp-primary-dark) 18%,transparent 82%),transparent 28%);z-index:0}.settings-page.pro-settings-page>*{position:relative;z-index:1}
.theme-command-hero{position:relative;min-height:260px;display:grid;grid-template-columns:1.5fr minmax(260px,.75fr);gap:22px;align-items:center;padding:clamp(26px,4vw,42px);margin-bottom:22px;border-radius:34px;overflow:hidden;color:#fff;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.22),transparent 27%),radial-gradient(circle at 84% 10%,rgba(255,255,255,.14),transparent 30%),linear-gradient(135deg,var(--gp-primary),var(--gp-primary-dark));box-shadow:0 28px 80px rgba(var(--gp-primary-rgb),.26)}.theme-command-hero::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.23) 1px,transparent 1px);background-size:18px 18px;opacity:.32}.hero-glow{position:absolute;border-radius:999px;filter:blur(4px);opacity:.55}.hero-glow.one{width:140px;height:140px;background:#fff;right:30%;top:-55px}.hero-glow.two{width:190px;height:190px;background:var(--gp-primary-dark);right:-60px;bottom:-70px}.theme-orbit{position:absolute;right:34%;bottom:32px;width:58px;height:58px;display:grid;place-items:center;border-radius:22px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);box-shadow:0 20px 50px rgba(0,0,0,.16);z-index:2}.theme-hero-copy,.theme-phone-preview{position:relative;z-index:2}.settings-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-weight:900;font-size:13px;margin-bottom:14px;border:1px solid rgba(255,255,255,.28)}.theme-hero-copy h2{margin:0;font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-2px;max-width:760px}.theme-hero-copy p{max-width:690px;margin:16px 0 0;color:rgba(255,255,255,.86);line-height:1.7;font-size:16px}.hero-mini-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.hero-mini-row span{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);border-radius:999px;font-weight:800}.theme-phone-preview{width:min(100%,330px);justify-self:end;padding:20px;border-radius:30px;background:rgba(15,23,42,.34);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 24px 60px rgba(0,0,0,.18)}.phone-top{width:58px;height:8px;border-radius:99px;background:rgba(255,255,255,.58);margin-bottom:18px}.phone-card{height:50px;border-radius:18px;background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.16);margin-bottom:12px}.phone-card.wide{height:82px;background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.12))}.phone-card.soft{width:74%}.phone-button{display:inline-flex;padding:12px 16px;border-radius:16px;background:#fff;color:var(--gp-primary);font-weight:900}
.theme-alert{border:1px solid rgba(255,255,255,.55);box-shadow:0 14px 30px rgba(15,23,42,.08)}.theme-studio-layout{display:grid;grid-template-columns:minmax(230px,.75fr) minmax(360px,1.35fr) minmax(300px,.9fr);gap:20px;align-items:start}.settings-panel.glass-panel{background:rgba(255,255,255,.88);border:1px solid rgba(226,232,240,.88);border-radius:28px;padding:22px;box-shadow:0 24px 60px rgba(15,23,42,.08);backdrop-filter:blur(18px)}.settings-panel-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}.settings-panel-head h3{margin:0;color:#0f172a;font-size:20px;letter-spacing:-.3px}.settings-panel-head p{margin:7px 0 0;color:#64748b;line-height:1.5}.settings-panel-head>i{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:var(--gp-primary-soft);flex:0 0 auto}.preset-grid-pro{display:grid;gap:12px}.preset-card-pro{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-areas:"swatch name" "swatch code";gap:3px 12px;text-align:left;border:1px solid #e5e7eb;background:#fff;border-radius:18px;padding:12px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;overflow:hidden}.preset-card-pro:hover,.preset-card-pro.selected{transform:translateY(-2px);border-color:color-mix(in srgb,var(--gp-primary) 42%,#e5e7eb 58%);box-shadow:0 18px 34px rgba(var(--gp-primary-rgb),.16)}.preset-splash{grid-area:swatch;width:44px;height:44px;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}.preset-card-pro strong{grid-area:name;color:#0f172a;font-size:14px;align-self:end}.preset-card-pro small{grid-area:code;color:#64748b;font-weight:700}.field-group-card{border:1px solid #e5e7eb;background:rgba(248,250,252,.78);border-radius:22px;padding:16px;margin-bottom:16px}.field-group-title{display:flex;align-items:center;justify-content:space-between;color:#0f172a;font-weight:900;margin-bottom:14px}.field-group-title i{color:var(--gp-primary)}.color-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.pro-color-field{display:block;padding:12px;border-radius:18px;background:#fff;border:1px solid rgba(226,232,240,.85)}.color-label-row{display:block;margin-bottom:10px}.color-label-row strong{display:block;color:#334155;font-size:14px}.color-label-row em{display:block;margin-top:3px;color:#64748b;font-style:normal;font-size:12px;line-height:1.3}.color-control.pro-control,.color-control{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:16px;padding:8px}.color-control input[type="color"]{width:52px;height:42px;border:none;background:transparent;padding:0;cursor:pointer}.color-control input[type="text"]{width:100%;border:none;outline:none;background:transparent;color:inherit;font-weight:900;letter-spacing:.3px}
.sticky-preview{position:sticky;top:88px}.theme-preview.pro-preview{border:1px solid #e5e7eb;border-radius:24px;overflow:hidden;display:grid;grid-template-columns:142px 1fr;min-height:330px;background:#f8fafc;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}.preview-sidebar{background:var(--gp-dark-surface);border-right:1px solid var(--gp-dark-border);padding:18px;display:grid;align-content:start;gap:10px}.preview-logo{width:48px;height:48px;border-radius:17px;color:#fff;display:grid;place-items:center;margin-bottom:12px}.preview-sidebar span{display:flex;align-items:center;gap:8px;color:var(--gp-dark-muted);font-weight:900;font-size:12px;padding:10px;border-radius:13px}.preview-sidebar span.active{background:var(--gp-dark-active);color:var(--gp-dark-title)}.preview-content{padding:24px;background:var(--gp-dark-bg);color:var(--gp-dark-text)}.preview-topline{width:74px;height:8px;border-radius:99px;background:linear-gradient(135deg,var(--gp-primary),var(--gp-primary-dark));margin-bottom:22px}.preview-content h4{margin:0;font-size:30px;color:var(--gp-dark-title);letter-spacing:-.8px}.preview-content p{color:var(--gp-dark-muted);line-height:1.6}.preview-stat-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.preview-stat-row div{padding:14px;border:1px solid var(--gp-dark-border);border-radius:16px;background:color-mix(in srgb,var(--gp-dark-surface) 72%,white 8%)}.preview-stat-row strong{display:block;font-size:22px;color:var(--gp-dark-title)}.preview-stat-row span{display:block;color:var(--gp-dark-muted);font-size:12px;margin-top:2px}.preview-content button{border:none;border-radius:15px;background:linear-gradient(135deg,var(--gp-primary),var(--gp-primary-dark));color:#fff;font-weight:900;padding:12px 16px;box-shadow:0 16px 32px rgba(var(--gp-primary-rgb),.25)}.contrast-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:13px;border-radius:18px;background:#f8fafc;border:1px solid #e5e7eb;color:#64748b;font-weight:700;line-height:1.45}.contrast-note i{color:var(--gp-primary);margin-top:2px}.settings-actions.floating-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}.settings-actions .primary-action,.settings-actions .btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px}.settings-actions .primary-action{border:none;border-radius:15px;color:#fff;font-weight:900;padding:12px 18px;box-shadow:0 16px 30px rgba(var(--gp-primary-rgb),.24)}.settings-actions .btn-light{border:1px solid #e5e7eb}
body.dark-mode .theme-command-hero{box-shadow:0 28px 90px rgba(0,0,0,.38)}body.dark-mode .settings-panel.glass-panel{background:color-mix(in srgb,var(--gp-dark-surface) 92%,white 8%);border-color:var(--gp-dark-border)}body.dark-mode .preset-card-pro strong,body.dark-mode .field-group-title,body.dark-mode .color-label-row strong{color:var(--gp-dark-title)}body.dark-mode .preset-card-pro small,body.dark-mode .color-label-row em{color:var(--gp-dark-muted)}body.dark-mode .pro-color-field{background:color-mix(in srgb,var(--gp-dark-surface) 88%,white 12%);border-color:var(--gp-dark-border)}
@media(max-width:1280px){.theme-studio-layout{grid-template-columns:1fr 1.35fr}.sticky-preview{grid-column:1/-1;position:static}}@media(max-width:900px){.theme-command-hero{grid-template-columns:1fr}.theme-phone-preview{justify-self:start}.theme-studio-layout{grid-template-columns:1fr}.color-field-grid{grid-template-columns:1fr}}@media(max-width:640px){.settings-page.pro-settings-page{padding:16px}.theme-command-hero{border-radius:24px}.theme-hero-copy h2{letter-spacing:-1px}.hero-mini-row span{width:100%}.theme-preview.pro-preview{grid-template-columns:1fr}.preview-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));border-right:none;border-bottom:1px solid var(--gp-dark-border)}.preview-logo{display:none}.settings-actions .primary-action,.settings-actions .btn-light{width:100%}}

/* =========================================================
   20. SITE-WIDE ACCENT COLOR SYNC
   Makes Settings accent travel across every user page/nav.
========================================================= */
:root {
    --primary: var(--gp-primary);
    --primary-dark: var(--gp-primary-dark);
    --primary-soft: var(--gp-primary-soft);
    --accent: var(--gp-primary);
    --accent-dark: var(--gp-primary-dark);
    --accent-rgb: var(--gp-primary-rgb);
}

/* Main light-mode accent surfaces */
.user-sidebar { border-right-color: color-mix(in srgb, var(--gp-primary) 12%, #e5e7eb 88%); }
.brand-icon,
.welcome-card,
.section-view-hero,
.hero-card,
.membership-hero,
.profile-hero,
.subscription-hero,
.settings-hero,
.avatar-circle,
.topbar-avatar,
.preview-logo,
.welcome-art,
.stat-icon,
.user-stat-card .stat-icon,
.class-record-header,
.primary-gradient,
.gradient-header {
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
    color: #ffffff !important;
}

/* Buttons, submit controls, and action links */
.btn,
.btn-sm,
.btn-edit,
.primary-action,
.create-section-btn,
.save-btn,
.add-btn,
.export-btn,
.print-btn,
.next-btn,
button[type="submit"],
input[type="submit"],
a.btn,
a.primary-action,
.section-action.primary,
.action-btn.primary,
.card-action.primary {
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
    border-color: var(--gp-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(var(--gp-primary-rgb), .18);
}
.btn:hover,
.btn-sm:hover,
.btn-edit:hover,
.primary-action:hover,
.create-section-btn:hover,
.save-btn:hover,
.add-btn:hover,
.export-btn:hover,
.print-btn:hover,
.next-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
a.btn:hover,
a.primary-action:hover,
.section-action.primary:hover,
.action-btn.primary:hover,
.card-action.primary:hover {
    filter: brightness(.98);
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(var(--gp-primary-rgb), .26);
}

/* Text accents, links, icons */
a,
.link,
.text-primary,
.page-header i,
.panel-header i,
.section-title i,
.subject-card-header i,
.profile-section-title i,
.empty-state i,
.empty-section i,
.note-item i,
.field-group-title i,
.contrast-note i,
.settings-panel-head > i,
.quick-actions a i,
.topbar-plan-badge i,
.form-group label i {
    color: var(--gp-primary);
}

/* User nav, topbar, dark toggle */
.user-nav a:hover,
.user-nav a.active,
.section-tabs a:hover,
.section-tabs a.active,
.section-tabs-line a:hover,
.section-tabs-line a.active,
.tab-item:hover,
.tab-item.active,
.dark-toggle:hover,
.sidebar-toggle:hover {
    background: var(--gp-primary-soft) !important;
    color: var(--gp-primary) !important;
    border-color: color-mix(in srgb, var(--gp-primary) 34%, #e5e7eb 66%) !important;
}
.user-nav a:hover i,
.user-nav a.active i,
.section-tabs a:hover i,
.section-tabs a.active i,
.section-tabs-line a:hover i,
.section-tabs-line a.active i,
.tab-item:hover i,
.tab-item.active i {
    color: var(--gp-primary) !important;
}
.section-tabs-line a.active::after,
.progress-fill,
.plan-progress-fill,
.class-record-progress,
.score-progress,
.badge-primary,
.status-primary {
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
}
.dark-toggle,
.sidebar-toggle,
.topbar-avatar,
.section-badge,
.role-badge,
.badge-soft,
.status-badge.draft,
.subscription-badge,
.plan-chip,
.filter-chip.active {
    background: var(--gp-primary-soft) !important;
    color: var(--gp-primary) !important;
    border-color: color-mix(in srgb, var(--gp-primary) 22%, #e5e7eb 78%) !important;
}

/* Cards get subtle accent glow without overpowering content */
.user-stat-card:hover,
.section-card:hover,
.subject-card:hover,
.table-card:hover,
.profile-card:hover,
.dashboard-panel:hover,
.preset-card-pro:hover,
.preset-card-pro.selected {
    border-color: color-mix(in srgb, var(--gp-primary) 38%, #e5e7eb 62%) !important;
    box-shadow: 0 22px 52px rgba(var(--gp-primary-rgb), .12) !important;
}

/* Forms and focus states */
input:focus,
select:focus,
textarea:focus,
.score-input:focus,
.hps-input:focus,
.form-control:focus,
.color-control:focus-within {
    border-color: var(--gp-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--gp-primary-rgb), .14) !important;
    outline: none !important;
}
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--gp-primary);
}

/* Tables and chips */
.modern-table th,
.class-record-table th,
.summary-table th,
.data-table th,
table thead th {
    background: color-mix(in srgb, var(--gp-primary) 9%, #f8fafc 91%);
    color: color-mix(in srgb, var(--gp-primary-dark) 70%, #0f172a 30%);
}
.chip.active,
.filter-pill.active,
.term-pill.active,
.subject-chip.active,
.quarter-chip.active {
    background: var(--gp-primary-soft) !important;
    color: var(--gp-primary) !important;
    border-color: var(--gp-primary) !important;
}

/* Dark mode: user-custom dark palette + accent-aware controls */
body.dark-mode,
html.dark-mode body {
    background: var(--gp-dark-bg) !important;
    color: var(--gp-dark-text) !important;
}
body.dark-mode .user-shell,
body.dark-mode .user-main,
body.dark-mode .user-content,
body.dark-mode .container {
    background: var(--gp-dark-bg) !important;
    color: var(--gp-dark-text) !important;
}
body.dark-mode .user-sidebar,
body.dark-mode .user-topbar,
body.dark-mode .profile-card,
body.dark-mode .dashboard-panel,
body.dark-mode .user-stat-card,
body.dark-mode .section-card,
body.dark-mode .section-tab-panel,
body.dark-mode .subject-card,
body.dark-mode .table-card,
body.dark-mode .card,
body.dark-mode .modal-overlay .section-modal,
body.dark-mode .clear-modal,
body.dark-mode .empty-section,
body.dark-mode .class-record-wrap,
body.dark-mode .settings-panel,
body.dark-mode .theme-preview,
body.dark-mode .topbar-user,
body.dark-mode .quick-actions a,
body.dark-mode .note-item,
body.dark-mode .btn-light,
body.dark-mode .password-note,
body.dark-mode .clear-group,
body.dark-mode .clear-group label,
body.dark-mode .color-control,
body.dark-mode .preset-card-pro,
body.dark-mode .field-group-card,
body.dark-mode .contrast-note,
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
    background-color: var(--gp-dark-surface) !important;
    border-color: var(--gp-dark-border) !important;
    color: var(--gp-dark-text) !important;
}
body.dark-mode .user-brand h2,
body.dark-mode .user-topbar h1,
body.dark-mode .page-header h1,
body.dark-mode .page-header h2,
body.dark-mode .page-header h3,
body.dark-mode .profile-card-header h3,
body.dark-mode .profile-section-title h3,
body.dark-mode .section-title,
body.dark-mode .panel-header h3,
body.dark-mode .empty-state h3,
body.dark-mode .empty-section h3,
body.dark-mode .tab-placeholder h3,
body.dark-mode .subject-card-header h3,
body.dark-mode .subject-list-title h3,
body.dark-mode .modal-header h3,
body.dark-mode .clear-modal-header h3,
body.dark-mode .section-info-clean strong,
body.dark-mode .note-item strong,
body.dark-mode .settings-panel h3,
body.dark-mode .preview-content h4,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--gp-dark-title) !important;
}
body.dark-mode .user-brand span,
body.dark-mode .user-topbar p,
body.dark-mode .page-header p,
body.dark-mode .profile-card-header p,
body.dark-mode .profile-section-title p,
body.dark-mode .panel-header p,
body.dark-mode .topbar-user span,
body.dark-mode .section-info-clean p,
body.dark-mode .tab-placeholder,
body.dark-mode .tab-placeholder p,
body.dark-mode .empty-section,
body.dark-mode .subject-card-header p,
body.dark-mode .modal-header p,
body.dark-mode .clear-modal-header p,
body.dark-mode .clear-group-title span,
body.dark-mode .settings-panel p,
body.dark-mode .preview-content p,
body.dark-mode small,
body.dark-mode .muted,
body.dark-mode .text-muted {
    color: var(--gp-dark-muted) !important;
}
body.dark-mode .user-nav a,
body.dark-mode .user-sidebar-footer a,
body.dark-mode .user-nav a i,
body.dark-mode .user-sidebar-footer a i,
body.dark-mode .dark-toggle,
body.dark-mode .sidebar-toggle,
body.dark-mode .settings-panel-head > i,
body.dark-mode .preview-sidebar span i,
body.dark-mode .section-tabs a i,
body.dark-mode .tab-item i {
    color: var(--gp-dark-icon) !important;
}
body.dark-mode .user-nav a:hover,
body.dark-mode .user-nav a.active,
body.dark-mode .section-tabs a:hover,
body.dark-mode .section-tabs a.active,
body.dark-mode .section-tabs-line a:hover,
body.dark-mode .section-tabs-line a.active,
body.dark-mode .tab-item:hover,
body.dark-mode .tab-item.active,
body.dark-mode .preview-sidebar span.active {
    background: var(--gp-dark-active) !important;
    color: var(--gp-dark-title) !important;
    border-color: color-mix(in srgb, var(--gp-dark-active) 70%, var(--gp-dark-border) 30%) !important;
}
body.dark-mode .user-nav a:hover i,
body.dark-mode .user-nav a.active i,
body.dark-mode .section-tabs a:hover i,
body.dark-mode .section-tabs a.active i,
body.dark-mode .tab-item:hover i,
body.dark-mode .tab-item.active i {
    color: var(--gp-dark-title) !important;
}
body.dark-mode a,
body.dark-mode .link,
body.dark-mode .back-link,
body.dark-mode .note-item i,
body.dark-mode .field-group-title i,
body.dark-mode .contrast-note i {
    color: var(--gp-dark-icon) !important;
}
body.dark-mode .btn,
body.dark-mode .btn-sm,
body.dark-mode .btn-edit,
body.dark-mode .primary-action,
body.dark-mode .create-section-btn,
body.dark-mode .save-btn,
body.dark-mode button[type="submit"],
body.dark-mode input[type="submit"] {
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
    color: #ffffff !important;
    border-color: var(--gp-primary) !important;
}
body.dark-mode .modern-table th,
body.dark-mode .class-record-table th,
body.dark-mode .summary-table th,
body.dark-mode .data-table th,
body.dark-mode table thead th {
    background: color-mix(in srgb, var(--gp-dark-active) 68%, var(--gp-dark-surface) 32%) !important;
    color: var(--gp-dark-title) !important;
    border-color: var(--gp-dark-border) !important;
}

/* =========================================================
   THEME PATCH: apply user accent to hero banners and navigation
   Added for full site-wide accent coverage.
========================================================= */
:root{
    --gp-accent-gradient: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark) 58%, color-mix(in srgb, var(--gp-primary) 72%, white 28%));
    --gp-accent-radial: radial-gradient(circle at 92% 12%, rgba(255,255,255,.26), transparent 28%);
}

/* Main user navigation */
.user-sidebar,
.user-topbar{
    --nav-accent: var(--gp-primary);
}
.user-brand .brand-icon,
.sidebar-toggle,
.topbar-avatar,
.user-avatar,
.profile-avatar,
.brand-icon{
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
    color:#fff !important;
}
.user-brand h2,
.user-topbar h1,
.topbar-left h1{
    color: color-mix(in srgb, var(--gp-primary-dark) 72%, #0f172a 28%);
}
.user-nav a:hover,
.user-nav a.active,
.user-sidebar-footer a:hover{
    background: linear-gradient(135deg, color-mix(in srgb, var(--gp-primary) 15%, white 85%), color-mix(in srgb, var(--gp-primary-dark) 10%, white 90%)) !important;
    color: var(--gp-primary-dark) !important;
    border-color: color-mix(in srgb, var(--gp-primary) 38%, #e5e7eb 62%) !important;
    box-shadow: 0 14px 30px rgba(var(--gp-primary-rgb), .13) !important;
}
.user-nav a:hover i,
.user-nav a.active i,
.user-sidebar-footer a:hover i{
    color: var(--gp-primary) !important;
}

/* Page hero banners: Sections, Subscription, Reports, Dashboard-style banners */
.gp-page-hero,
.subscription-hero-v3,
.subscription-hero,
.dashboard-hero,
.profile-hero,
.reports-hero,
.section-view-hero,
.class-record-hero,
.membership-hero,
.settings-hero-pro{
    background: var(--gp-accent-radial), var(--gp-accent-gradient) !important;
    box-shadow: 0 24px 58px rgba(var(--gp-primary-rgb), .24) !important;
}
.gp-page-hero:before,
.subscription-hero-v3:before,
.dashboard-hero:before,
.profile-hero:before,
.reports-hero:before{
    background: rgba(255,255,255,.16) !important;
}
.gp-btn-primary,
.subscription-btn.beginner,
.subscription-btn.pro,
.primary-action,
.btn-primary,
.primary-btn,
.save-btn,
.submit-btn,
.create-section-btn,
.section-btn.primary,
.modal-submit,
button[type="submit"]:not(.btn-light):not(.subscription-btn.muted):not(.subscription-btn.pending){
    background: linear-gradient(135deg, var(--gp-primary), var(--gp-primary-dark)) !important;
    border-color: var(--gp-primary) !important;
    color:#fff !important;
    box-shadow: 0 16px 32px rgba(var(--gp-primary-rgb), .22) !important;
}
.gp-btn-primary{
    background:#fff !important;
    color: var(--gp-primary) !important;
    border-color: rgba(255,255,255,.72) !important;
}
.gp-btn-soft,
.subscription-hero-pills span,
.gp-hero-meta span,
.report-access-badge,
.subscription-usage-card{
    border-color: rgba(255,255,255,.32) !important;
    background: rgba(255,255,255,.16) !important;
}
.gp-mini-meter i,
.subscription-meter i,
.progress-fill,
.meter-fill{
    background: linear-gradient(90deg, #fff, color-mix(in srgb, var(--gp-primary) 32%, #bbf7d0 68%)) !important;
}

/* Tabs, badges, links, inputs, cards */
.tab-btn.active,
.tabs a.active,
.nav-tabs .active,
.filter-tab.active,
.badge-primary,
.plan-ribbon,
.section-badge,
.status-badge.active{
    background: var(--gp-primary-soft) !important;
    color: var(--gp-primary-dark) !important;
    border-color: color-mix(in srgb, var(--gp-primary) 36%, #e5e7eb 64%) !important;
}
a,
.link,
.field-group-title i,
.contrast-note i,
.membership-how-card>div:first-child,
.report-icon-bubble,
.plan-icon{
    color: var(--gp-primary);
}
input:focus,
select:focus,
textarea:focus,
.form-control:focus{
    border-color: var(--gp-primary) !important;
    box-shadow: 0 0 0 4px rgba(var(--gp-primary-rgb), .14) !important;
    outline:none !important;
}
.card:hover,
.gp-stat-card:hover,
.subscription-plan-card-v3:hover,
.section-card:hover{
    border-color: color-mix(in srgb, var(--gp-primary) 38%, #e5e7eb 62%) !important;
}

/* Dark mode: accent still controls active nav and glowing UI */
body.dark-mode .user-brand h2,
html.dark-mode .user-brand h2,
body.dark-mode .user-topbar h1,
html.dark-mode .user-topbar h1{
    color: var(--gp-dark-title) !important;
}
body.dark-mode .user-nav a:hover,
body.dark-mode .user-nav a.active,
body.dark-mode .user-sidebar-footer a:hover,
html.dark-mode .user-nav a:hover,
html.dark-mode .user-nav a.active,
html.dark-mode .user-sidebar-footer a:hover{
    background: linear-gradient(135deg, color-mix(in srgb, var(--gp-primary) 34%, var(--gp-dark-surface) 66%), color-mix(in srgb, var(--gp-primary-dark) 26%, var(--gp-dark-surface) 74%)) !important;
    color: var(--gp-dark-title) !important;
    border-color: color-mix(in srgb, var(--gp-primary) 42%, var(--gp-dark-border) 58%) !important;
    box-shadow: 0 16px 34px rgba(var(--gp-primary-rgb), .18) !important;
}
body.dark-mode .user-nav a:hover i,
body.dark-mode .user-nav a.active i,
html.dark-mode .user-nav a:hover i,
html.dark-mode .user-nav a.active i{
    color: var(--gp-dark-icon) !important;
}
body.dark-mode .gp-page-hero,
body.dark-mode .subscription-hero-v3,
body.dark-mode .subscription-hero,
body.dark-mode .dashboard-hero,
body.dark-mode .profile-hero,
body.dark-mode .reports-hero,
body.dark-mode .section-view-hero,
body.dark-mode .class-record-hero,
html.dark-mode .gp-page-hero,
html.dark-mode .subscription-hero-v3,
html.dark-mode .subscription-hero,
html.dark-mode .dashboard-hero,
html.dark-mode .profile-hero,
html.dark-mode .reports-hero,
html.dark-mode .section-view-hero,
html.dark-mode .class-record-hero{
    background: radial-gradient(circle at 95% 5%, color-mix(in srgb, var(--gp-primary) 38%, transparent), transparent 32%), linear-gradient(135deg, color-mix(in srgb, var(--gp-primary-dark) 72%, #020617 28%), color-mix(in srgb, var(--gp-primary) 62%, #0f172a 38%)) !important;
    box-shadow: 0 24px 58px rgba(var(--gp-primary-rgb), .20) !important;
}

/* =========================================================
   MOBILE + TABLET READY PATCH
   Added for responsive GradePilot layout
========================================================= */
html { -webkit-text-size-adjust: 100%; }
body.gp-menu-open { overflow: hidden; }
.gp-mobile-overlay{position:fixed;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px);z-index:1090;opacity:0;visibility:hidden;transition:.2s ease}body.gp-menu-open .gp-mobile-overlay{opacity:1;visibility:visible}img,svg,video,canvas{max-width:100%;height:auto}.table-card,.report-table-wrap,.classrecord-scroll,.record-table-wrap,.table-responsive,.modern-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.modern-table,.report-table,.class-record-table,.classic-record-table,table{max-width:100%}input,select,textarea,button{font-size:16px}
@media(max-width:1180px){.user-content{padding:26px}.section-grid,.gp-section-grid-v2,.dashboard-grid,.user-stat-grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.user-shell{display:block;min-height:100vh;height:auto!important;overflow:visible!important}.user-sidebar{position:fixed!important;top:0;left:0;bottom:0;z-index:1100;width:min(86vw,330px)!important;height:100vh!important;padding:20px;transform:translateX(-105%);transition:transform .24s ease;box-shadow:24px 0 60px rgba(15,23,42,.2);overflow-y:auto!important}.user-shell.mobile-sidebar-open .user-sidebar{transform:translateX(0)}.user-main{width:100%!important;min-height:100vh;height:auto!important;overflow:visible!important}.user-topbar{position:sticky!important;top:0;z-index:1000;min-height:76px;height:auto;padding:14px 18px;gap:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px)}.topbar-left{min-width:0}.user-topbar h1{font-size:clamp(20px,3vw,25px);line-height:1.1}.user-topbar p{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}.sidebar-toggle{flex:0 0 auto;margin-right:4px!important}.user-brand{margin-bottom:22px}.user-nav{display:grid;grid-template-columns:1fr;gap:8px}.user-nav a,.user-sidebar-footer a{padding:14px 15px}.user-content{padding:22px}.topbar-actions{flex:0 0 auto}.topbar-user{padding:8px 10px;border-radius:16px}.topbar-user>div:last-child{display:none}.topbar-plan-badge{margin-right:0}.welcome-card,.gp-page-hero,.subscription-hero-v3{border-radius:24px}.gp-page-hero,.subscription-hero-v3,.welcome-card{flex-direction:column;align-items:flex-start}.gp-hero-actions,.welcome-actions{justify-content:flex-start;width:100%}.gp-btn,.primary-action,.secondary-action,.subscription-btn{min-height:44px}}
@media(max-width:760px){.user-content{padding:18px}.user-topbar{align-items:center}.dark-toggle,.sidebar-toggle{width:42px;height:42px;border-radius:14px}.topbar-plan-badge{max-width:118px;overflow:hidden;text-overflow:ellipsis}.topbar-avatar{width:38px;height:38px;border-radius:13px}.section-grid,.gp-section-grid-v2,.dashboard-grid,.user-stat-grid,.cards,.form-grid,.gp-quick-stats,.upgraded-plan-grid,.report-stat-row,.admin-plan-summary-grid,.subscription-workflow-grid,.subscription-plan-grid-v3{grid-template-columns:1fr!important}.welcome-card,.gp-page-hero,.subscription-hero-v3,.card,.table-card,.subscription-plan-card-v3,.subscription-workflow-card{border-radius:20px}.welcome-card,.gp-page-hero,.subscription-hero-v3{padding:22px!important}.welcome-card h2,.gp-hero-copy h2,.subscription-hero-copy h2{font-size:clamp(26px,9vw,34px)!important;line-height:1.08}.gp-hero-meta,.subscription-hero-pills{gap:8px}.gp-hero-meta span,.subscription-hero-pills span{font-size:12px;padding:8px 10px}.gp-hero-actions .gp-btn,.welcome-actions a,.welcome-actions button,.subscription-footer-note .gp-btn,.subscription-action .subscription-btn{width:100%}.subscription-usage-card{width:100%}.subscription-footer-note,.subscription-pending-card{align-items:flex-start;flex-direction:column}.modal-card,.section-modal,.settings-panel,.settings-card{width:min(94vw,560px)!important;max-height:88vh;overflow-y:auto}}
@media(max-width:520px){.user-topbar{padding:12px 14px}.user-topbar p{display:none}.topbar-actions{gap:8px}.topbar-plan-badge{display:none}.topbar-user{background:transparent;border:0;padding:0}.user-content{padding:14px}.user-sidebar{width:min(88vw,310px)!important;padding:18px}.brand-icon{width:44px;height:44px;border-radius:15px}.user-brand h2{font-size:20px}.gp-page-hero,.subscription-hero-v3,.welcome-card{margin-left:-2px;margin-right:-2px}.gp-btn,.primary-action,.secondary-action,.btn,.subscription-btn{width:100%;justify-content:center}.modern-table,.report-table,.class-record-table,.classic-record-table{min-width:720px}.classrecord-toolbar,.section-actions,.filter-row,.form-actions{flex-direction:column;align-items:stretch!important}}
@media(max-width:380px){.user-topbar h1{font-size:19px}.dark-toggle,.sidebar-toggle,.topbar-avatar{width:38px;height:38px}.user-content{padding:12px}}
html.dark-mode .user-topbar,body.dark-mode .user-topbar{background:color-mix(in srgb,var(--gp-dark-surface) 88%,transparent)}html.dark-mode .gp-mobile-overlay,body.dark-mode .gp-mobile-overlay{background:rgba(2,6,23,.68)}

/* =========================================================
   ADMIN MANAGE USERS EDITOR
========================================================= */
.admin-action-button {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.error-alert {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    padding: 14px 16px;
    border-radius: 16px;
    margin: 14px 0;
    font-weight: 800;
}

.admin-user-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.58);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 18px;
}

.admin-user-modal-backdrop.show {
    display: flex;
}

.admin-user-modal-card {
    width: min(760px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.admin-user-modal-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 26px 28px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent, #2563eb), var(--accent-soft, #60a5fa));
    border-radius: 28px 28px 0 0;
}

.admin-user-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: .8;
}

.admin-user-modal-head h3 {
    margin: 0;
    font-size: 26px;
}

.admin-user-modal-head p {
    margin: 8px 0 0;
    opacity: .9;
}

.admin-user-modal-close {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 16px;
    background: rgba(255,255,255,.16);
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
}

.admin-user-form {
    padding: 26px 28px 28px;
    display: grid;
    gap: 18px;
}

.admin-user-form label {
    display: grid;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
}

.admin-user-form label span small {
    color: #64748b;
    font-weight: 700;
}

.admin-user-form input,
.admin-user-form select {
    width: 100%;
    border: 1px solid #dbe4f0;
    background: #f8fafc;
    border-radius: 16px;
    padding: 13px 14px;
    font: inherit;
    outline: none;
    transition: .2s ease;
}

.admin-user-form input:focus,
.admin-user-form select:focus {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #2563eb) 18%, transparent);
    background: #ffffff;
}

.admin-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-user-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-user-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 6px;
}

.btn-light {
    border: 1px solid #dbe4f0;
    background: #ffffff;
    color: #334155;
    padding: 12px 18px;
    border-radius: 14px;
    font-weight: 900;
    cursor: pointer;
}

body.dark-mode .admin-user-modal-card,
html.dark-mode .admin-user-modal-card {
    background: #111827;
    color: #e5e7eb;
    border-color: rgba(148, 163, 184, .18);
}

body.dark-mode .admin-user-form label,
html.dark-mode .admin-user-form label {
    color: #f8fafc;
}

body.dark-mode .admin-user-form input,
body.dark-mode .admin-user-form select,
html.dark-mode .admin-user-form input,
html.dark-mode .admin-user-form select {
    background: #0f172a;
    border-color: #263244;
    color: #f8fafc;
}

body.dark-mode .btn-light,
html.dark-mode .btn-light {
    background: #0f172a;
    color: #f8fafc;
    border-color: #263244;
}

@media (max-width: 768px) {
    .admin-user-grid,
    .admin-user-grid-3 {
        grid-template-columns: 1fr;
    }

    .admin-user-modal-head,
    .admin-user-form {
        padding: 22px;
    }

    .admin-user-modal-actions {
        flex-direction: column-reverse;
    }

    .admin-user-modal-actions .btn,
    .admin-user-modal-actions .btn-light {
        width: 100%;
    }
}


/* =========================================================
   SUBSCRIPTION EXPIRY + SECTION LOCK UI
========================================================= */
.locked-stat { border-color: rgba(239, 68, 68, .25) !important; background: linear-gradient(135deg, rgba(239, 68, 68, .08), rgba(245, 158, 11, .08)) !important; }
.is-section-locked { position: relative; filter: grayscale(.18); opacity: .86; }
.is-section-locked::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(15, 23, 42, .08), rgba(15, 23, 42, .22)); pointer-events: none; }
.section-lock-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(15, 23, 42, .72); color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .18); backdrop-filter: blur(10px); }
.locked-note { cursor: not-allowed; opacity: .86; }
.section-expired-lock { max-width: 820px; margin: 24px auto; text-align: center; }
.section-expired-lock .mini-label { display: inline-flex; margin-bottom: 8px; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 900; color: var(--accent, #2563eb); }
.lock-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.dark-mode .locked-stat, body.dark .locked-stat { background: linear-gradient(135deg, rgba(239, 68, 68, .18), rgba(245, 158, 11, .12)) !important; }
.dark-mode .is-section-locked::after, body.dark .is-section-locked::after { background: linear-gradient(135deg, rgba(2, 6, 23, .18), rgba(2, 6, 23, .38)); }
@media (max-width: 768px) { .section-lock-badge { font-size: 11px; padding: 6px 8px; } .lock-actions .gp-btn { width: 100%; justify-content: center; } }

/* =========================================================
   PREMIUM SUBSCRIPTION LOCK + PAYMENT FLOW UPGRADE
========================================================= */
.gp-section-card-v2,
.gp-stat-card,
.subscription-plan-card-v3,
.subscription-workflow-card,
.gp-upgrade-strip {
    animation: gpCardRise .55s ease both;
}
.gp-section-card-v2:nth-child(2), .subscription-plan-card-v3:nth-child(2){animation-delay:.06s}
.gp-section-card-v2:nth-child(3), .subscription-plan-card-v3:nth-child(3){animation-delay:.12s}
@keyframes gpCardRise{
    from{opacity:0; transform:translateY(18px) scale(.985)}
    to{opacity:1; transform:translateY(0) scale(1)}
}
.gp-section-card-v2:hover,
.gp-stat-card:hover,
.subscription-plan-card-v3:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 45px rgba(15,23,42,.13);
}
.gp-section-card-v2.is-section-locked{
    overflow:hidden;
    position:relative;
}
.gp-section-card-v2.is-section-locked > *:not(.section-lock-overlay-premium){
    filter: blur(2.5px) saturate(.65);
    opacity:.55;
    pointer-events:none;
}
.section-lock-overlay-premium{
    position:absolute;
    inset:0;
    z-index:9;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:22px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg, rgba(15,23,42,.78), rgba(37,99,235,.65));
    backdrop-filter: blur(4px);
}
.section-lock-overlay-premium .lock-orb{
    width:58px;
    height:58px;
    border-radius:22px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.2);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 18px 38px rgba(0,0,0,.25);
    animation: gpLockPulse 1.8s ease-in-out infinite;
}
@keyframes gpLockPulse{
    0%,100%{transform:scale(1); box-shadow:0 18px 38px rgba(0,0,0,.22)}
    50%{transform:scale(1.08); box-shadow:0 22px 55px rgba(255,255,255,.18)}
}
.section-lock-overlay-premium strong{font-size:1.15rem; letter-spacing:.2px}
.section-lock-overlay-premium span{font-size:.82rem; opacity:.92; max-width:280px}
.renew-now-mini{
    border:0;
    border-radius:999px;
    padding:11px 18px;
    color:var(--accent, #2563eb);
    background:#fff;
    font-weight:900;
    cursor:pointer;
    box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.renew-now-mini:hover{transform:translateY(-2px)}
.gp-quick-stats-below{margin-top:22px}
.gp-payment-modal{max-width:820px;width:min(92vw,820px)}
.payment-flow-grid{
    display:grid;
    grid-template-columns: .8fr 1.2fr;
    gap:18px;
}
.payment-plan-choice,
.payment-request-form,
.payment-selected-card{
    border:1px solid rgba(148,163,184,.25);
    border-radius:24px;
    background:rgba(255,255,255,.78);
    padding:18px;
    box-shadow:0 18px 40px rgba(15,23,42,.08);
}
.payment-plan-choice h4{margin:0 0 12px;color:var(--text-main,#0f172a)}
.payment-plan-choice button{
    width:100%;
    border:1px solid rgba(37,99,235,.18);
    background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(96,165,250,.12));
    padding:14px;
    border-radius:18px;
    margin-bottom:10px;
    text-align:left;
    display:grid;
    grid-template-columns:34px 1fr auto;
    align-items:center;
    gap:10px;
    cursor:pointer;
    font-weight:800;
    color:var(--text-main,#0f172a);
}
.payment-plan-choice button:hover{border-color:var(--accent,#2563eb); transform:translateY(-2px)}
.payment-selected-card{margin-bottom:14px;background:linear-gradient(135deg,var(--accent,#2563eb),var(--accent-2,#60a5fa)); color:#fff}
.payment-selected-card.big{margin:0; min-height:100%}
.payment-selected-card span{display:block;text-transform:uppercase;font-size:.72rem;font-weight:900;opacity:.8;letter-spacing:.08em}
.payment-selected-card strong{display:block;font-size:2rem;margin:6px 0}
.payment-selected-card small{opacity:.9}
.payment-request-form label{display:block;font-weight:800;font-size:.82rem;margin-bottom:12px;color:var(--text-main,#0f172a)}
.payment-request-form input,.payment-request-form select,.payment-request-form textarea{
    width:100%;
    margin-top:7px;
    border:1px solid rgba(148,163,184,.45);
    border-radius:14px;
    padding:12px 14px;
    background:#fff;
    color:#0f172a;
    outline:none;
}
.payment-request-form input:focus,.payment-request-form select:focus,.payment-request-form textarea:focus{
    border-color:var(--accent,#2563eb);
    box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.payment-steps-mini{margin-top:18px;display:grid;gap:8px;font-size:.9rem;line-height:1.4}
.payment-steps-mini b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:99px;background:#fff;color:var(--accent,#2563eb);margin-right:7px}
.dark-mode .payment-plan-choice,
.dark-mode .payment-request-form{background:rgba(15,23,42,.88);border-color:rgba(255,255,255,.12)}
.dark-mode .payment-request-form label,.dark-mode .payment-plan-choice h4{color:var(--dark-text,#e5e7eb)}
.dark-mode .payment-request-form input,.dark-mode .payment-request-form select,.dark-mode .payment-request-form textarea{background:#0f172a;color:#e5e7eb;border-color:rgba(255,255,255,.16)}
.dark-mode .payment-plan-choice button{background:rgba(255,255,255,.06);color:var(--dark-text,#e5e7eb);border-color:rgba(255,255,255,.12)}
@media (max-width: 820px){
    .payment-flow-grid{grid-template-columns:1fr}
    .section-lock-overlay-premium{padding:16px}
}

/* =========================================================
   PAYMENT + AUTO RENEWAL UPGRADE
========================================================= */
.payment-method-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.pay-method-card input { display: none; }
.pay-method-card span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: var(--gp-primary, #2563eb);
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}
.pay-method-card input:checked + span {
    background: var(--gp-primary, #2563eb);
    color: #fff;
    box-shadow: 0 16px 35px rgba(37, 99, 235, .25);
    transform: translateY(-2px);
}
.qr-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 0 16px;
}
.qr-duo div {
    border: 1px dashed rgba(37,99,235,.28);
    border-radius: 18px;
    padding: 14px;
    text-align: center;
    background: rgba(255,255,255,.72);
}
.qr-duo strong { display: block; margin-bottom: 8px; }
.qr-duo img {
    width: min(150px, 100%);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 14px;
    background: #fff;
}
.payment-request-form input[type="file"] {
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: #fff;
}
.revenue-hero {
    background: linear-gradient(135deg, var(--gp-primary, #2563eb), color-mix(in srgb, var(--gp-primary, #2563eb) 55%, #8b5cf6 45%));
    color: #fff;
    border-radius: 28px;
    padding: 26px;
    box-shadow: 0 24px 55px rgba(37, 99, 235, .22);
}
.admin-kicker {
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}
.revenue-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 22px 0;
}
.revenue-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 18px 45px rgba(15,23,42,.08);
    animation: gpFloatCard 5s ease-in-out infinite;
}
.revenue-card:nth-child(2) { animation-delay: .25s; }
.revenue-card:nth-child(3) { animation-delay: .5s; }
.revenue-card:nth-child(4) { animation-delay: .75s; }
.revenue-card::after {
    content: "";
    position: absolute;
    width: 90px;
    height: 90px;
    right: -28px;
    top: -28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gp-primary, #2563eb) 18%, transparent);
}
.revenue-card span, .revenue-card small { color: #64748b; font-weight: 700; }
.revenue-card strong { display:block; margin: 8px 0; font-size: 30px; color: #0f172a; }
@keyframes gpFloatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.revenue-status-strip {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.revenue-status-strip span {
    background: rgba(37,99,235,.08);
    border: 1px solid rgba(37,99,235,.14);
    color: var(--gp-primary, #2563eb);
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 800;
}
.revenue-table td small { display: block; color: #64748b; margin-top: 3px; }
.payment-status {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}
.payment-status.pending { background: #fef3c7; color: #92400e; }
.payment-status.approved { background: #dcfce7; color: #166534; }
.payment-status.rejected { background: #fee2e2; color: #991b1b; }
.payment-action-form { display: grid; gap: 8px; }
.payment-action-form input {
    width: 100%;
    border: 1px solid rgba(15,23,42,.12);
    border-radius: 12px;
    padding: 9px 10px;
}
.payment-action-form div { display: flex; gap: 8px; flex-wrap: wrap; }
body.dark-mode .revenue-card,
body.dark-mode .qr-duo div,
body.dark-mode .payment-request-form input[type="file"] {
    background: var(--gp-dark-surface, #111827);
    color: var(--gp-dark-text, #e5e7eb);
}
body.dark-mode .revenue-card strong { color: var(--gp-dark-title, #fff); }
body.dark-mode .revenue-card span,
body.dark-mode .revenue-card small { color: var(--gp-dark-muted, #9ca3af); }
@media (max-width: 980px) {
    .revenue-metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .qr-duo, .payment-method-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .revenue-metrics-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   Section + Subject delete/edit controls
========================================================= */
.section-delete-btn,
.subject-edit-btn,
.subject-delete-btn {
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.section-delete-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
    box-shadow: 0 12px 24px rgba(239, 68, 68, .22);
}
.section-delete-btn:hover,
.subject-edit-btn:hover,
.subject-delete-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}
.subject-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.subject-edit-btn,
.subject-delete-btn {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
}
.subject-edit-btn {
    color: #0f172a;
    background: linear-gradient(135deg, #fde68a, #facc15);
    box-shadow: 0 10px 20px rgba(250, 204, 21, .18);
}
.subject-delete-btn,
.btn-danger-action {
    color: #fff !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 12px 24px rgba(220, 38, 38, .22);
}
.danger-modal-box {
    border: 1px solid rgba(239, 68, 68, .20);
}
.delete-warning-box {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 16px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: rgba(239, 68, 68, .08);
    border: 1px solid rgba(239, 68, 68, .18);
}
.delete-warning-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #ef4444, #f97316);
}
.delete-warning-box strong,
.delete-warning-box span {
    display: block;
}
.delete-warning-box span {
    color: #64748b;
    font-size: 13px;
    margin-top: 3px;
}
.subject-total-preview {
    margin: 14px 0 2px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 900;
    background: rgba(15, 23, 42, .06);
    color: #334155;
}
.subject-total-preview.is-valid {
    background: rgba(34, 197, 94, .10);
    color: #15803d;
}
.subject-total-preview.is-invalid {
    background: rgba(239, 68, 68, .10);
    color: #b91c1c;
}
@media (max-width: 700px) {
    .subject-action-group { flex-direction: column; }
    .subject-edit-btn,
    .subject-delete-btn { width: 100%; }
}


/* Edit controls for sections and learners */
.section-edit-btn,.learner-edit-btn{border:0;border-radius:12px;padding:9px 11px;background:rgba(255,255,255,.92);color:var(--accent,#2563eb);font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 10px 22px rgba(15,23,42,.12);transition:.2s ease}.section-edit-btn:hover,.learner-edit-btn:hover{transform:translateY(-2px);background:#fff;box-shadow:0 16px 30px rgba(15,23,42,.18)}.learner-edit-btn{background:color-mix(in srgb,var(--accent,#2563eb) 12%,#fff);box-shadow:none;white-space:nowrap}body.dark-mode .section-edit-btn,body.dark-mode .learner-edit-btn{background:rgba(15,23,42,.88);color:var(--accent-light,#93c5fd)}

/* =========================================================
   FINAL SECTION CARD UI: uniform icons, grade beside title,
   hover glow, and draggable card feedback
========================================================= */
.gp-section-card-v2.gradient-card {
    cursor: grab;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, border-color .25s ease;
}
.gp-section-card-v2.gradient-card:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow:
        0 26px 62px color-mix(in srgb, var(--section-grad-1, #2563eb) 38%, rgba(15,23,42,.26) 62%),
        0 0 28px color-mix(in srgb, var(--section-grad-2, #60a5fa) 36%, transparent 64%);
    filter: saturate(1.08) brightness(1.02);
}
.section-card-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}
.section-edit-btn,
.section-color-btn,
.section-delete-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 14px !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 42px;
    line-height: 1;
}
.section-edit-btn i,
.section-color-btn i,
.section-delete-btn i {
    font-size: 16px !important;
    line-height: 1;
    margin: 0 !important;
}
.section-color-dot {
    display: none !important;
}
.section-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
}
.section-title-row .section-title {
    margin: 0 !important;
}
.section-grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 13px !important;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}
.section-btn,
.icon-btn,
.section-edit-btn,
.section-color-btn,
.section-delete-btn {
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.section-btn:hover,
.icon-btn:hover,
.section-edit-btn:hover,
.section-color-btn:hover,
.section-delete-btn:hover {
    transform: translateY(-2px);
}
.section-card-ghost {
    opacity: .42;
    transform: scale(.98);
}
.section-card-chosen {
    cursor: grabbing !important;
    filter: brightness(1.08) saturate(1.12);
}
.section-card-dragging {
    cursor: grabbing !important;
}
@media (max-width: 640px) {
    .section-card-tools { gap: 7px; }
    .section-edit-btn,
    .section-color-btn,
    .section-delete-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        border-radius: 13px !important;
    }
    .section-title-row { align-items: flex-start; }
}

/* Learner edit/delete action polish */
.learner-action-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.learner-delete-btn {
    border: 0;
    border-radius: 999px;
    padding: 8px 12px;
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    font-weight: 800;
    cursor: pointer;
    transition: .2s ease;
}

.learner-delete-btn:hover {
    transform: translateY(-2px);
    background: #dc2626;
    color: #fff;
    box-shadow: 0 12px 24px rgba(220, 38, 38, .22);
}

.delete-warning-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.10);
    color: #991b1b;
    margin-bottom: 16px;
}

.delete-warning-box i {
    font-size: 22px;
    margin-top: 3px;
}

.delete-warning-box p {
    margin: 4px 0 0;
    color: #7f1d1d;
}

.btn-danger-soft {
    background: #dc2626 !important;
    color: #fff !important;
}

/* =========================================================
   CLASS RECORD POLISH PATCH
   Fixes stacked/sticky header overlap and matches action icons
   to the GradePilot blue theme.
========================================================= */
.classrecord-wrapper,
.classrecord-scroll {
    width: 100%;
    overflow: auto;
}

.classrecord-scroll {
    max-height: calc(100vh - 310px);
    position: relative;
    border-radius: 18px;
}

.class-record-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.class-record-table thead th {
    position: sticky !important;
    background-clip: padding-box !important;
    vertical-align: middle !important;
    box-shadow: inset 0 -1px 0 rgba(148, 163, 184, .28);
}

.class-record-table thead tr:nth-child(1) th {
    top: 0 !important;
    z-index: 90 !important;
}

.class-record-table thead tr:nth-child(2) th {
    top: var(--cr-head-row-1, 42px) !important;
    z-index: 89 !important;
}

.class-record-table thead tr:nth-child(3) th {
    top: calc(var(--cr-head-row-1, 42px) + var(--cr-head-row-2, 42px)) !important;
    z-index: 88 !important;
}

.class-record-table thead th[rowspan="3"],
.class-record-table thead th.name-col {
    top: 0 !important;
    z-index: 120 !important;
}

.class-record-table th.name-col,
.class-record-table td.name-col,
.class-record-table th:first-child,
.class-record-table td:first-child {
    position: sticky !important;
    left: 0 !important;
}

.class-record-table tbody td.name-col,
.class-record-table tbody td:first-child {
    z-index: 40 !important;
    background: #ffffff !important;
}

.class-record-table thead th.name-col,
.class-record-table thead th:first-child {
    z-index: 140 !important;
    background: #f8fafc !important;
}

#classRecordFullscreen.fullscreen-mode .classrecord-scroll {
    max-height: none !important;
}

.save-area {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.class-record-save-btn,
.class-record-maximize-btn {
    min-height: 48px;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 900;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.class-record-save-btn {
    padding: 12px 18px !important;
    background: linear-gradient(135deg, var(--gp-primary, #2563eb), var(--gp-primary-dark, #1d4ed8)) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 14px 28px rgba(var(--gp-primary-rgb, 37, 99, 235), .24) !important;
}

.class-record-save-btn i {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    background: rgba(255,255,255,.18);
    color: #ffffff !important;
    font-size: 12px;
}

.class-record-maximize-btn {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    border: 1px solid rgba(var(--gp-primary-rgb, 37, 99, 235), .18) !important;
    background: rgba(var(--gp-primary-rgb, 37, 99, 235), .10) !important;
    color: var(--gp-primary, #2563eb) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, .06) !important;
}

.class-record-maximize-btn i {
    color: currentColor !important;
    font-size: 15px;
}

.class-record-save-btn:hover,
.class-record-maximize-btn:hover {
    transform: translateY(-2px);
}

.class-record-maximize-btn:hover {
    background: var(--gp-primary, #2563eb) !important;
    color: #ffffff !important;
    border-color: var(--gp-primary, #2563eb) !important;
    box-shadow: 0 16px 34px rgba(var(--gp-primary-rgb, 37, 99, 235), .28) !important;
}

body.dark-mode .class-record-table tbody td.name-col,
body.dark-mode .class-record-table tbody td:first-child,
html.dark-mode .class-record-table tbody td.name-col,
html.dark-mode .class-record-table tbody td:first-child {
    background: #111827 !important;
}

body.dark-mode .class-record-table thead th.name-col,
body.dark-mode .class-record-table thead th:first-child,
html.dark-mode .class-record-table thead th.name-col,
html.dark-mode .class-record-table thead th:first-child {
    background: #111827 !important;
}

body.dark-mode .class-record-maximize-btn,
html.dark-mode .class-record-maximize-btn {
    background: rgba(var(--gp-primary-rgb, 37, 99, 235), .18) !important;
    border-color: rgba(var(--gp-primary-rgb, 37, 99, 235), .32) !important;
    color: #93c5fd !important;
}

/* =========================================================
   FINAL FIX: Keep popups above sticky class record headers/tabs
========================================================= */
body.modal-open .user-topbar,
body.modal-open .section-tabs-line,
body.modal-open .section-tabs,
body.modal-open .section-tabs-modern,
body.modal-open .class-record-table thead th,
body.modal-open .class-record-table .name-col {
    z-index: 1 !important;
}

body.modal-open .clear-modal-overlay,
.clear-modal-overlay.show {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483640 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(15, 23, 42, 0.68) !important;
    backdrop-filter: blur(6px) !important;
}

body.modal-open .clear-modal {
    position: relative !important;
    z-index: 2147483641 !important;
}


.summary-action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.summary-excel-btn {
    gap: 8px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}

.google-btn {
    width: 100%;
    height: 58px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
    transition: .25s ease;
}

.google-btn:hover {
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 18px 38px rgba(37,99,235,.10);
}

.google-btn i {
    color: #ea4335;
    font-size: 20px;
}

.divider {
    margin: 24px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    position: relative;
}

.divider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e2e8f0;
}

.divider span {
    position: relative;
    background: #ffffff;
    padding: 0 14px;
}

/* =========================================================
   CENTRALIZED PAGE STYLES
   These styles were moved from embedded <style> blocks.
========================================================= */


/* =========================================================
   Moved from forgot_password.php (style block 1)
========================================================= */
.gp-page-forgot *{box-sizing:border-box;margin:0;padding:0}:root{--blue:#2563eb;--sky:#06b6d4;--dark:#0f172a;--muted:#64748b;--line:#dbeafe;--soft:#f8fbff}body.gp-page-forgot{min-height:100vh;font-family:Inter,sans-serif;background:radial-gradient(circle at 10% 10%,rgba(37,99,235,.22),transparent 26%),radial-gradient(circle at 90% 15%,rgba(6,182,212,.22),transparent 28%),linear-gradient(135deg,#f8fbff,#eef6ff,#fff);display:grid;place-items:center;color:var(--dark);padding:24px;overflow-x:hidden}.gp-page-forgot .orb{position:fixed;border-radius:999px;filter:blur(8px);opacity:.65;animation:float 8s ease-in-out infinite}.gp-page-forgot .o1{width:180px;height:180px;background:rgba(37,99,235,.18);left:6%;top:16%}.gp-page-forgot .o2{width:240px;height:240px;background:rgba(6,182,212,.18);right:7%;bottom:10%;animation-delay:1.2s}@keyframes float{50%{transform:translateY(-20px) scale(1.04)}}.gp-page-forgot .card{position:relative;z-index:1;width:min(520px,100%);background:rgba(255,255,255,.86);border:1px solid rgba(219,234,254,.95);border-radius:32px;padding:38px;box-shadow:0 30px 90px rgba(37,99,235,.16);backdrop-filter:blur(20px)}.gp-page-forgot .badge{display:inline-flex;gap:8px;align-items:center;background:#dbeafe;color:#1d4ed8;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900}.gp-page-forgot h1{font-size:clamp(32px,6vw,42px);letter-spacing:-1.4px;margin:20px 0 12px;line-height:1.03}.gp-page-forgot p{color:var(--muted);line-height:1.75;margin-bottom:18px}.gp-page-forgot .alert{padding:15px 16px;border-radius:18px;margin:16px 0;font-weight:850}.gp-page-forgot .err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.gp-page-forgot .ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.gp-page-forgot .dev{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;word-break:break-all}.gp-page-forgot .dev a{color:#1d4ed8;font-weight:900}.gp-page-forgot label{display:block;font-weight:900;color:#334155;font-size:14px;margin-bottom:9px}.gp-page-forgot .input-wrap{position:relative}.gp-page-forgot .input-wrap i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#2563eb}.gp-page-forgot input{width:100%;height:60px;border:1px solid var(--line);border-radius:19px;padding:0 18px 0 48px;font:inherit;font-weight:750;outline:none;margin-bottom:18px;background:#fff}.gp-page-forgot input:focus{border-color:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.10)}.gp-page-forgot button, .gp-page-forgot .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:60px;border:0;border-radius:19px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;font-weight:950;font-size:15px;cursor:pointer;text-decoration:none;transition:.2s}.gp-page-forgot button:hover, .gp-page-forgot .btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(37,99,235,.22)}.gp-page-forgot button[disabled]{opacity:.75;cursor:not-allowed}.gp-page-forgot .back{margin-top:14px;background:#f1f5f9;color:#0f172a}.gp-page-forgot .small{font-size:13px;margin-top:14px}.gp-page-forgot .copy{margin-top:10px;height:42px;border-radius:13px;background:#f97316}.gp-page-forgot .spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:999px;animation:spin .7s linear infinite;display:none}@keyframes spin{to{transform:rotate(360deg)}}.gp-page-forgot .is-loading .spinner{display:inline-block}.gp-page-forgot .is-loading .send-icon{display:none}


/* =========================================================
   Moved from index.php (style block 1)
========================================================= */
.gp-page-index *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body.gp-page-index{
    font-family: "Poppins", sans-serif;
    background: #f7faff;
    color: #0f172a;
    overflow-x: hidden;
}

.gp-page-index a{
    text-decoration: none;
}

.gp-page-index .page-bg{
    min-height: 100vh;
    background:
        radial-gradient(circle at 10% 20%, rgba(37,99,235,.22), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(14,165,233,.22), transparent 30%),
        radial-gradient(circle at 70% 80%, rgba(99,102,241,.18), transparent 28%),
        linear-gradient(135deg, #f8fbff, #eef5ff, #ffffff);
    background-size: 200% 200%;
    animation: gradientFlow 12s ease-in-out infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 50%; }
}

.gp-page-index .container{
    width: min(1180px, 92%);
    margin: auto;
}

.gp-page-index /* NAV */
.navbar{
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: blur(18px);
    background: rgba(255,255,255,.72);
    border-bottom: 1px solid rgba(226,232,240,.9);
}

.gp-page-index .nav-inner{
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gp-page-index .brand{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 800;
    color: #1d4ed8;
}

.gp-page-index .brand-icon{
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: white;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
    box-shadow: 0 16px 30px rgba(37,99,235,.25);
}

.gp-page-index .nav-links{
    display: flex;
    align-items: center;
    gap: 26px;
}

.gp-page-index .nav-links a{
    color: #475569;
    font-weight: 600;
    font-size: 14px;
}

.gp-page-index .nav-links a:hover{
    color: #2563eb;
}

.gp-page-index .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 13px 20px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.gp-page-index .btn-primary{
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    box-shadow: 0 18px 35px rgba(37,99,235,.25);
}

.gp-page-index .btn-primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 24px 45px rgba(37,99,235,.35);
}

.gp-page-index .btn-soft{
    background: #ffffff;
    color: #2563eb;
    border: 1px solid #dbeafe;
}

.gp-page-index .btn-soft:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 35px rgba(15,23,42,.08);
}

.gp-page-index /* HERO */
.hero{
    padding: 86px 0 80px;
}

.gp-page-index .hero-grid{
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    align-items: center;
    gap: 54px;
}

.gp-page-index .badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.78);
    border: 1px solid #dbeafe;
    color: #2563eb;
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 12px 26px rgba(15,23,42,.06);
}

.gp-page-index .hero h1{
    margin-top: 22px;
    font-size: clamp(42px, 5.5vw, 72px);
    line-height: 1.02;
    letter-spacing: -2px;
    font-weight: 800;
}

.gp-page-index .hero h1 span{
    background: linear-gradient(135deg, #2563eb, #06b6d4, #7c3aed);
    -webkit-background-clip: text;
    color: transparent;
}

.gp-page-index .hero p{
    margin-top: 22px;
    font-size: 18px;
    line-height: 1.8;
    color: #475569;
    max-width: 620px;
}

.gp-page-index .hero-actions{
    margin-top: 32px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.gp-page-index .trust-row{
    margin-top: 28px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
}

.gp-page-index .trust-row span{
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.gp-page-index /* DEMO DASHBOARD */
.demo-wrap{
    position: relative;
}

.gp-page-index .floating-pill{
    position: absolute;
    z-index: 4;
    background: rgba(255,255,255,.9);
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 12px 16px;
    box-shadow: 0 22px 45px rgba(15,23,42,.12);
    font-weight: 700;
    animation: floaty 4s ease-in-out infinite;
}

.gp-page-index .pill-1{
    top: -22px;
    left: 28px;
    color: #16a34a;
}

.gp-page-index .pill-2{
    bottom: 22px;
    right: -12px;
    color: #2563eb;
    animation-delay: 1.3s;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

.gp-page-index .demo-dashboard{
    position: relative;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(226,232,240,.95);
    border-radius: 34px;
    padding: 22px;
    box-shadow: 0 30px 80px rgba(37,99,235,.18);
    overflow: hidden;
}

.gp-page-index .demo-dashboard::before{
    content: "";
    position: absolute;
    inset: -80px;
    background: conic-gradient(from 180deg, transparent, rgba(37,99,235,.18), transparent, rgba(14,165,233,.18), transparent);
    animation: spinGlow 10s linear infinite;
    z-index: 0;
}

@keyframes spinGlow {
    to { transform: rotate(360deg); }
}

.gp-page-index .demo-inner{
    position: relative;
    z-index: 1;
    background: #f8fbff;
    border-radius: 26px;
    padding: 20px;
}

.gp-page-index .demo-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.gp-page-index .demo-title{
    font-weight: 800;
    color: #0f172a;
}

.gp-page-index .demo-dots{
    display: flex;
    gap: 7px;
}

.gp-page-index .demo-dots span{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.gp-page-index .stats-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gp-page-index .stat-card{
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 16px;
}

.gp-page-index .stat-card i{
    font-size: 24px;
    color: #2563eb;
}

.gp-page-index .stat-card h3{
    margin-top: 10px;
    font-size: 28px;
}

.gp-page-index .stat-card p{
    color: #64748b;
    font-size: 13px;
}

.gp-page-index .chart-card{
    margin-top: 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    padding: 18px;
}

.gp-page-index .chart-head{
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
    font-weight: 800;
}

.gp-page-index .bars{
    display: flex;
    align-items: end;
    gap: 13px;
    height: 170px;
}

.gp-page-index .bar{
    flex: 1;
    border-radius: 14px 14px 6px 6px;
    background: linear-gradient(180deg, #2563eb, #93c5fd);
    animation: growBar 1.8s ease forwards;
    transform-origin: bottom;
    transform: scaleY(.2);
}

.gp-page-index .bar:nth-child(1){ height: 45%; }
.gp-page-index .bar:nth-child(2){ height: 70%; animation-delay: .1s; }
.gp-page-index .bar:nth-child(3){ height: 55%; animation-delay: .2s; }
.gp-page-index .bar:nth-child(4){ height: 86%; animation-delay: .3s; }
.gp-page-index .bar:nth-child(5){ height: 62%; animation-delay: .4s; }
.gp-page-index .bar:nth-child(6){ height: 78%; animation-delay: .5s; }

@keyframes growBar {
    to { transform: scaleY(1); }
}

.gp-page-index .progress-row{
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.gp-page-index .progress-item{
    display: grid;
    grid-template-columns: 90px 1fr 45px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #475569;
    font-weight: 700;
}

.gp-page-index .progress-track{
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.gp-page-index .progress-fill{
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, #06b6d4, #2563eb);
}

.gp-page-index /* SECTIONS */
.section{
    padding: 86px 0;
}

.gp-page-index .section-title{
    text-align: center;
    max-width: 760px;
    margin: 0 auto 46px;
}

.gp-page-index .section-title h2{
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -1px;
}

.gp-page-index .section-title p{
    margin-top: 14px;
    color: #64748b;
    line-height: 1.8;
}

.gp-page-index .features-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.gp-page-index .feature-card{
    background: rgba(255,255,255,.86);
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 22px 45px rgba(15,23,42,.06);
    transition: .3s ease;
}

.gp-page-index .feature-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(37,99,235,.14);
}

.gp-page-index .feature-icon{
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: white;
    font-size: 24px;
    background: linear-gradient(135deg, #2563eb, #38bdf8);
}

.gp-page-index .feature-card h3{
    margin-top: 20px;
    font-size: 20px;
}

.gp-page-index .feature-card p{
    margin-top: 10px;
    color: #64748b;
    line-height: 1.7;
}

.gp-page-index /* WORKFLOW */
.workflow{
    background: rgba(255,255,255,.58);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

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

.gp-page-index .step{
    background: white;
    border-radius: 24px;
    padding: 26px;
    border: 1px solid #e2e8f0;
    position: relative;
}

.gp-page-index .step-num{
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    font-weight: 800;
}

.gp-page-index /* CTA */
.cta-box{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.3), transparent 25%),
        linear-gradient(135deg, #1d4ed8, #06b6d4);
    color: white;
    border-radius: 36px;
    padding: 64px;
    text-align: center;
    box-shadow: 0 30px 70px rgba(37,99,235,.25);
}

.gp-page-index .cta-box h2{
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
}

.gp-page-index .cta-box p{
    margin-top: 14px;
    opacity: .92;
    line-height: 1.8;
}

.gp-page-index .cta-box .btn{
    margin-top: 26px;
    background: white;
    color: #2563eb;
}

.gp-page-index /* FOOTER */
footer{
    padding: 34px 0;
    text-align: center;
    color: #64748b;
}

.gp-page-index /* SCROLL REVEAL */
.reveal{
    opacity: 0;
    transform: translateY(38px);
    transition: 900ms ease;
}

.gp-page-index .reveal.show{
    opacity: 1;
    transform: translateY(0);
}

.gp-page-index /* RESPONSIVE */
@media (max-width: 980px){
    .hero-grid,
    .features-grid,
    .steps {
        grid-template-columns: 1fr;
    }

    .nav-links {
        display: none;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero {
        padding-top: 54px;
    }

    .demo-wrap {
        margin-top: 20px;
    }

    .pill-2 {
        right: 8px;
    }

    .cta-box {
        padding: 42px 24px;
    }
}


/* =========================================================
   Moved from login.php (style block 1)
========================================================= */
.gp-page-login *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root{
    --blue: #2563eb;
    --sky: #06b6d4;
    --dark: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --soft: #f8fbff;
}

body.gp-page-login{
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    color: var(--dark);
    overflow-x: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(37,99,235,.28), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(6,182,212,.30), transparent 30%),
        radial-gradient(circle at 70% 90%, rgba(124,58,237,.18), transparent 28%),
        linear-gradient(135deg, #f8fbff, #eef6ff, #ffffff);
    background-size: 180% 180%;
    animation: bgFlow 12s ease-in-out infinite;
}

@keyframes bgFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 50%; }
}

.gp-page-login a{ text-decoration: none; }

.gp-page-login .login-page{
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 34px;
    position: relative;
}

.gp-page-login .orb{
    position: fixed;
    border-radius: 999px;
    filter: blur(10px);
    opacity: .65;
    z-index: 0;
    animation: drift 8s ease-in-out infinite;
}

.gp-page-login .orb-one{
    width: 180px;
    height: 180px;
    left: 4%;
    top: 18%;
    background: rgba(37,99,235,.24);
}

.gp-page-login .orb-two{
    width: 230px;
    height: 230px;
    right: 6%;
    bottom: 10%;
    background: rgba(6,182,212,.24);
    animation-delay: 1.2s;
}

.gp-page-login .orb-three{
    width: 120px;
    height: 120px;
    right: 20%;
    top: 9%;
    background: rgba(124,58,237,.18);
    animation-delay: 2s;
}

@keyframes drift {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(18px,-22px) scale(1.05); }
}

.gp-page-login .login-shell{
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    min-height: 720px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    border-radius: 38px;
    overflow: hidden;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(255,255,255,.80);
    box-shadow:
        0 30px 90px rgba(37,99,235,.17),
        inset 0 1px 0 rgba(255,255,255,.70);
    backdrop-filter: blur(24px);
}

.gp-page-login /* LEFT SIDE */
.brand-panel{
    position: relative;
    padding: 52px;
    color: white;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.28), transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(140deg, #1d4ed8, #2563eb 42%, #06b6d4);
    overflow: hidden;
}

.gp-page-login .brand-panel::before{
    content: "";
    position: absolute;
    inset: -160px;
    background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.30), transparent, rgba(255,255,255,.18), transparent);
    animation: spin 16s linear infinite;
    opacity: .65;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gp-page-login .brand-content{
    position: relative;
    z-index: 2;
}

.gp-page-login .brand-top{
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 900;
    font-size: 24px;
    letter-spacing: -.5px;
}

.gp-page-login .logo-box{
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 18px 38px rgba(15,23,42,.14);
}

.gp-page-login .hero-copy{
    margin-top: 78px;
}

.gp-page-login .kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 800;
    font-size: 13px;
}

.gp-page-login .hero-copy h1{
    margin-top: 20px;
    max-width: 520px;
    font-size: clamp(38px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -2.6px;
    font-weight: 900;
}

.gp-page-login .hero-copy p{
    margin-top: 20px;
    max-width: 500px;
    line-height: 1.8;
    opacity: .93;
    font-weight: 500;
}

.gp-page-login .mini-dashboard{
    margin-top: 38px;
    padding: 18px;
    border-radius: 28px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(16px);
    box-shadow: 0 25px 50px rgba(15,23,42,.13);
}

.gp-page-login .mini-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gp-page-login .mini-title{
    font-weight: 900;
}

.gp-page-login .live-pill{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: 12px;
    font-weight: 800;
}

.gp-page-login .live-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 7px rgba(34,197,94,.16);
}

.gp-page-login .mini-grid{
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.gp-page-login .mini-card{
    padding: 16px;
    border-radius: 20px;
    background: rgba(255,255,255,.17);
    border: 1px solid rgba(255,255,255,.18);
}

.gp-page-login .mini-card i{
    font-size: 22px;
}

.gp-page-login .mini-card strong{
    display: block;
    margin-top: 10px;
    font-size: 27px;
    font-weight: 900;
}

.gp-page-login .mini-card span{
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .88;
}

.gp-page-login .activity-strip{
    margin-top: 14px;
    display: grid;
    gap: 9px;
}

.gp-page-login .activity{
    display: grid;
    grid-template-columns: 34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,.13);
}

.gp-page-login .activity-icon{
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(255,255,255,.20);
}

.gp-page-login .activity p{
    font-size: 13px;
    font-weight: 700;
}

.gp-page-login .activity small{
    opacity: .8;
    font-weight: 700;
}

.gp-page-login /* RIGHT FORM */
.form-panel{
    position: relative;
    padding: 50px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.92));
}

.gp-page-login .home-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 800;
}

.gp-page-login .form-card{
    margin-top: 52px;
}

.gp-page-login .form-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    padding: 9px 13px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
}

.gp-page-login .form-card h2{
    margin-top: 18px;
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -1.5px;
    line-height: 1.05;
    font-weight: 900;
}

.gp-page-login .form-card p{
    margin-top: 12px;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 500;
}

.gp-page-login .alert{
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    gap: 9px;
    align-items: center;
}

.gp-page-login .alert-error{
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.gp-page-login .alert-success{
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.gp-page-login form{
    margin-top: 28px;
}

.gp-page-login .form-group{
    margin-bottom: 18px;
}

.gp-page-login .form-label{
    display: flex;
    justify-content: space-between;
    margin-bottom: 9px;
    color: #334155;
    font-size: 14px;
    font-weight: 850;
}

.gp-page-login .input-wrap{
    position: relative;
}

.gp-page-login .input-icon{
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 19px;
    pointer-events: none;
}

.gp-page-login .form-control{
    width: 100%;
    height: 60px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    padding: 0 52px;
    font: inherit;
    font-weight: 650;
    color: var(--dark);
    outline: none;
    transition: .22s ease;
    box-shadow: 0 12px 28px rgba(15,23,42,.04);
}

.gp-page-login .form-control::placeholder{
    color: #94a3b8;
    font-weight: 600;
}

.gp-page-login .form-control:focus{
    border-color: var(--blue);
    box-shadow:
        0 0 0 5px rgba(37,99,235,.10),
        0 16px 34px rgba(37,99,235,.08);
    transform: translateY(-1px);
}

.gp-page-login .password-toggle{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 17px;
}

.gp-page-login .form-options{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 8px 0 22px;
    font-size: 14px;
}

.gp-page-login .check{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-weight: 750;
}

.gp-page-login .check input{
    width: 17px;
    height: 17px;
    accent-color: var(--blue);
}

.gp-page-login .forgot{
    color: var(--blue);
    font-weight: 850;
}


.gp-page-login .google-btn{
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 18px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #0f172a;
    font-weight: 900;
    box-shadow: 0 14px 28px rgba(15,23,42,.06);
    margin-bottom: 18px;
    transition: .2s ease;
}
.gp-page-login .google-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(37,99,235,.12);
}
.gp-page-login .divider{
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    color: #64748b;
    font-size: 13px;
    font-weight: 800;
}
.gp-page-login .divider::before, .gp-page-login .divider::after{
    content: "";
    height: 1px;
    flex: 1;
    background: #e2e8f0;
}

.gp-page-login .btn-login{
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(37,99,235,.28);
    transition: .25s ease;
    position: relative;
    overflow: hidden;
}

.gp-page-login .btn-login::before{
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: .5s ease;
}

.gp-page-login .btn-login:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(37,99,235,.38);
}

.gp-page-login .btn-login:hover::before{
    left: 125%;
}

.gp-page-login .register-link{
    margin-top: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
}

.gp-page-login .register-link a{
    color: var(--blue);
    font-weight: 900;
}

.gp-page-login .quick-links{
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.gp-page-login .quick-link{
    padding: 14px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--line);
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: .22s ease;
}

.gp-page-login .quick-link i{
    color: var(--blue);
    font-size: 18px;
}

.gp-page-login .quick-link:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 32px rgba(15,23,42,.07);
    border-color: #bfdbfe;
}

.gp-page-login .mobile-brand{
    display: none;
}

.gp-page-login /* RESPONSIVE */
@media (max-width: 980px){
    .login-page {
        padding: 16px;
    }

    .login-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 28px;
    }

    .brand-panel {
        display: none;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 26px;
        color: var(--blue);
        font-weight: 950;
        font-size: 22px;
    }

    .mobile-brand .logo-box {
        color: white;
        background: linear-gradient(135deg, var(--blue), var(--sky));
    }

    .form-panel {
        padding: 30px 22px;
    }

    .form-card {
        margin-top: 32px;
    }

    .quick-links {
        grid-template-columns: 1fr;
    }

    .form-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

.gp-page-login .login-spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:999px;animation:loginSpin .7s linear infinite;display:none}
@keyframes loginSpin{to{transform:rotate(360deg)}}
.gp-page-login .btn-login.is-loading .login-spinner{display:inline-block}.gp-page-login .btn-login.is-loading .login-arrow{display:none}.gp-page-login .btn-login:disabled{opacity:.8;cursor:not-allowed}


/* =========================================================
   Moved from password_reset_sent.php (style block 1)
========================================================= */
.gp-page-reset-sent *{box-sizing:border-box;margin:0;padding:0}body.gp-page-reset-sent{min-height:100vh;font-family:Inter,sans-serif;background:radial-gradient(circle at 12% 10%,rgba(37,99,235,.22),transparent 28%),radial-gradient(circle at 88% 20%,rgba(6,182,212,.24),transparent 30%),linear-gradient(135deg,#f8fbff,#eef6ff,#fff);display:grid;place-items:center;padding:24px;color:#0f172a}.gp-page-reset-sent .card{width:min(560px,100%);background:rgba(255,255,255,.88);border:1px solid #dbeafe;border-radius:32px;padding:42px;text-align:center;box-shadow:0 30px 90px rgba(37,99,235,.16);backdrop-filter:blur(20px)}.gp-page-reset-sent .icon{width:88px;height:88px;border-radius:28px;margin:0 auto 18px;display:grid;place-items:center;background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;font-size:42px;box-shadow:0 18px 38px rgba(37,99,235,.22)}.gp-page-reset-sent h1{font-size:clamp(32px,6vw,44px);letter-spacing:-1.4px;line-height:1.03;margin-bottom:13px}.gp-page-reset-sent p{color:#64748b;line-height:1.8;margin:0 auto 22px;max-width:440px}.gp-page-reset-sent .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:220px;height:58px;padding:0 22px;border-radius:18px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;text-decoration:none;font-weight:950}.gp-page-reset-sent .ghost{margin-top:12px;background:#f1f5f9;color:#0f172a}.gp-page-reset-sent .tips{margin-top:24px;text-align:left;background:#f8fafc;border:1px solid #e2e8f0;border-radius:22px;padding:18px}.gp-page-reset-sent .tips b{display:block;margin-bottom:9px}.gp-page-reset-sent .tips li{margin-left:18px;color:#64748b;line-height:1.7}


/* =========================================================
   Moved from register.php (style block 1)
========================================================= */
.gp-page-register *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root{
    --blue: #2563eb;
    --sky: #06b6d4;
    --dark: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
}

body.gp-page-register{
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    color: var(--dark);
    background:
        radial-gradient(circle at 8% 12%, rgba(37,99,235,.26), transparent 28%),
        radial-gradient(circle at 92% 12%, rgba(6,182,212,.26), transparent 30%),
        radial-gradient(circle at 70% 88%, rgba(124,58,237,.16), transparent 28%),
        linear-gradient(135deg, #f8fbff, #eef6ff, #ffffff);
    background-size: 180% 180%;
    animation: bgFlow 12s ease-in-out infinite;
    overflow-x: hidden;
}

@keyframes bgFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 60%; }
    100% { background-position: 0% 50%; }
}

.gp-page-register a{
    text-decoration: none;
}

.gp-page-register .orb{
    position: fixed;
    border-radius: 999px;
    filter: blur(10px);
    opacity: .65;
    z-index: 0;
    animation: drift 8s ease-in-out infinite;
}

.gp-page-register .orb-one{
    width: 180px;
    height: 180px;
    left: 4%;
    top: 16%;
    background: rgba(37,99,235,.22);
}

.gp-page-register .orb-two{
    width: 230px;
    height: 230px;
    right: 6%;
    bottom: 8%;
    background: rgba(6,182,212,.22);
    animation-delay: 1.2s;
}

.gp-page-register .orb-three{
    width: 130px;
    height: 130px;
    right: 22%;
    top: 8%;
    background: rgba(124,58,237,.17);
    animation-delay: 2s;
}

@keyframes drift {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(18px,-22px) scale(1.05); }
}

.gp-page-register .register-page{
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 34px;
}

.gp-page-register .register-shell{
    width: min(1180px, 100%);
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    min-height: 760px;
    border-radius: 38px;
    overflow: hidden;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.82);
    backdrop-filter: blur(24px);
    box-shadow:
        0 30px 90px rgba(37,99,235,.17),
        inset 0 1px 0 rgba(255,255,255,.75);
}

.gp-page-register .brand-panel{
    position: relative;
    padding: 52px;
    color: white;
    background:
        radial-gradient(circle at 20% 18%, rgba(255,255,255,.30), transparent 24%),
        radial-gradient(circle at 88% 82%, rgba(255,255,255,.18), transparent 28%),
        linear-gradient(140deg, #1d4ed8, #2563eb 42%, #06b6d4);
    overflow: hidden;
}

.gp-page-register .brand-panel::before{
    content: "";
    position: absolute;
    inset: -170px;
    background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.30), transparent, rgba(255,255,255,.18), transparent);
    animation: spin 16s linear infinite;
    opacity: .65;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.gp-page-register .brand-content{
    position: relative;
    z-index: 2;
}

.gp-page-register .brand-top{
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 900;
}

.gp-page-register .logo-box{
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
}

.gp-page-register .hero-copy{
    margin-top: 72px;
}

.gp-page-register .kicker{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    font-weight: 800;
    font-size: 13px;
}

.gp-page-register .hero-copy h1{
    margin-top: 20px;
    max-width: 500px;
    font-size: clamp(38px, 5vw, 62px);
    line-height: .98;
    letter-spacing: -2.5px;
    font-weight: 900;
}

.gp-page-register .hero-copy p{
    margin-top: 20px;
    max-width: 500px;
    line-height: 1.8;
    opacity: .93;
    font-weight: 500;
}

.gp-page-register .benefit-list{
    margin-top: 38px;
    display: grid;
    gap: 14px;
}

.gp-page-register .benefit{
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.22);
}

.gp-page-register .benefit i{
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: rgba(255,255,255,.20);
    font-size: 18px;
}

.gp-page-register .benefit strong{
    display: block;
    font-size: 14px;
}

.gp-page-register .benefit span{
    display: block;
    margin-top: 4px;
    font-size: 12px;
    opacity: .86;
    line-height: 1.5;
}

.gp-page-register .form-panel{
    padding: 46px 50px;
    background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.94));
}

.gp-page-register .mobile-brand{
    display: none;
}

.gp-page-register .home-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 850;
}

.gp-page-register .form-card{
    margin-top: 36px;
}

.gp-page-register .form-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1d4ed8;
    background: #dbeafe;
    border: 1px solid #bfdbfe;
    padding: 9px 13px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
}

.gp-page-register .form-card h2{
    margin-top: 18px;
    font-size: clamp(32px, 4vw, 46px);
    letter-spacing: -1.5px;
    line-height: 1.05;
    font-weight: 900;
}

.gp-page-register .form-card p{
    margin-top: 12px;
    color: var(--muted);
    line-height: 1.7;
    font-weight: 500;
}

.gp-page-register .alert{
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    gap: 9px;
    align-items: center;
}

.gp-page-register .alert-error{
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.gp-page-register .alert-success{
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.gp-page-register .google-btn{
    margin-top: 24px;
    width: 100%;
    height: 58px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(15,23,42,.05);
    transition: .25s ease;
}

.gp-page-register .google-btn:hover{
    transform: translateY(-2px);
    border-color: #bfdbfe;
    box-shadow: 0 18px 38px rgba(37,99,235,.10);
}

.gp-page-register .google-btn i{
    color: #ea4335;
    font-size: 20px;
}

.gp-page-register .divider{
    margin: 24px 0;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    position: relative;
}

.gp-page-register .divider::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
    background: #e2e8f0;
}

.gp-page-register .divider span{
    position: relative;
    background: #ffffff;
    padding: 0 14px;
}

.gp-page-register .form-grid{
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 14px;
}

.gp-page-register .form-group{
    margin-bottom: 16px;
}

.gp-page-register .full{
    grid-column: 1 / -1;
}

.gp-page-register .form-label{
    display: block;
    margin-bottom: 9px;
    color: #334155;
    font-size: 14px;
    font-weight: 850;
}

.gp-page-register .input-wrap{
    position: relative;
}

.gp-page-register .input-icon{
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    pointer-events: none;
}

.gp-page-register .form-control{
    width: 100%;
    height: 58px;
    border: 1px solid #dbeafe;
    border-radius: 20px;
    background: #ffffff;
    padding: 0 50px;
    font: inherit;
    font-weight: 650;
    color: var(--dark);
    outline: none;
    transition: .22s ease;
    box-shadow: 0 12px 28px rgba(15,23,42,.04);
}

.gp-page-register .form-control::placeholder{
    color: #94a3b8;
    font-weight: 600;
}

.gp-page-register .form-control:focus{
    border-color: var(--blue);
    box-shadow:
        0 0 0 5px rgba(37,99,235,.10),
        0 16px 34px rgba(37,99,235,.08);
    transform: translateY(-1px);
}

.gp-page-register .password-toggle{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 17px;
}

.gp-page-register .password-strength{
    margin-top: 9px;
    display: grid;
    gap: 7px;
}

.gp-page-register .strength-track{
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.gp-page-register .strength-fill{
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: #ef4444;
    transition: .25s ease;
}

.gp-page-register .strength-text{
    color: #64748b;
    font-size: 12px;
    font-weight: 750;
}

.gp-page-register .terms{
    margin: 8px 0 22px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #475569;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.6;
}

.gp-page-register .terms input{
    margin-top: 3px;
    width: 17px;
    height: 17px;
    accent-color: var(--blue);
}

.gp-page-register .btn-register{
    width: 100%;
    height: 62px;
    border: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    color: white;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 20px 40px rgba(37,99,235,.28);
    transition: .25s ease;
    position: relative;
    overflow: hidden;
}

.gp-page-register .btn-register::before{
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: .5s ease;
}

.gp-page-register .btn-register:hover{
    transform: translateY(-3px);
    box-shadow: 0 26px 50px rgba(37,99,235,.38);
}

.gp-page-register .btn-register:hover::before{
    left: 125%;
}

.gp-page-register .login-link{
    margin-top: 22px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
    font-weight: 650;
}

.gp-page-register .login-link a{
    color: var(--blue);
    font-weight: 900;
}

.gp-page-register .note-card{
    margin-top: 22px;
    padding: 15px;
    border-radius: 18px;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    gap: 12px;
    font-size: 13px;
    line-height: 1.6;
    font-weight: 650;
}

.gp-page-register .note-card i{
    color: var(--blue);
    font-size: 20px;
}

@media (max-width: 980px) {
    .gp-page-register .register-page{
        padding: 16px;
    }

    .gp-page-register .register-shell{
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: 28px;
    }

    .gp-page-register .brand-panel{
        display: none;
    }

    .gp-page-register .form-panel{
        padding: 30px 22px;
    }

    .gp-page-register .mobile-brand{
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        color: var(--blue);
        font-weight: 950;
        font-size: 22px;
    }

    .gp-page-register .mobile-brand .logo-box{
        color: white;
        background: linear-gradient(135deg, var(--blue), var(--sky));
    }

    .gp-page-register .form-grid{
        grid-template-columns: 1fr;
    }

    .gp-page-register .full{
        grid-column: auto;
    }
}


/* =========================================================
   Moved from reset_password.php (style block 1)
========================================================= */
.gp-page-reset *{box-sizing:border-box;margin:0;padding:0}body.gp-page-reset{min-height:100vh;font-family:Inter,sans-serif;background:radial-gradient(circle at 10% 10%,rgba(37,99,235,.22),transparent 26%),radial-gradient(circle at 90% 15%,rgba(6,182,212,.22),transparent 28%),linear-gradient(135deg,#f8fbff,#eef6ff,#fff);display:grid;place-items:center;color:#0f172a;padding:24px}.gp-page-reset .card{width:min(520px,100%);background:rgba(255,255,255,.88);border:1px solid #dbeafe;border-radius:32px;padding:38px;box-shadow:0 30px 90px rgba(37,99,235,.16);backdrop-filter:blur(20px)}.gp-page-reset .badge{display:inline-flex;gap:8px;align-items:center;background:#dbeafe;color:#1d4ed8;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900}.gp-page-reset h1{font-size:clamp(32px,6vw,42px);letter-spacing:-1.4px;margin:20px 0 12px;line-height:1.03}.gp-page-reset p{color:#64748b;line-height:1.75;margin-bottom:18px}.gp-page-reset .alert{padding:15px 16px;border-radius:18px;margin:16px 0;font-weight:850}.gp-page-reset .err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}.gp-page-reset .ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0}.gp-page-reset label{display:block;font-weight:900;color:#334155;font-size:14px;margin-bottom:9px}.gp-page-reset .input-wrap{position:relative}.gp-page-reset .input-wrap i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#2563eb}.gp-page-reset input{width:100%;height:60px;border:1px solid #dbeafe;border-radius:19px;padding:0 50px 0 48px;font:inherit;font-weight:750;outline:none;margin-bottom:18px;background:#fff}.gp-page-reset input:focus{border-color:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.10)}.gp-page-reset .toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:12px;background:#eff6ff;color:#2563eb;cursor:pointer}.gp-page-reset button, .gp-page-reset .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;height:60px;border:0;border-radius:19px;background:linear-gradient(135deg,#2563eb,#06b6d4);color:white;font-weight:950;font-size:15px;cursor:pointer;text-decoration:none;transition:.2s}.gp-page-reset button:hover, .gp-page-reset .btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(37,99,235,.22)}.gp-page-reset button[disabled]{opacity:.75;cursor:not-allowed}.gp-page-reset .back{margin-top:14px;background:#f1f5f9;color:#0f172a}.gp-page-reset .spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:999px;animation:spin .7s linear infinite;display:none}@keyframes spin{to{transform:rotate(360deg)}}.gp-page-reset .is-loading .spinner{display:inline-block}.gp-page-reset .is-loading .save-icon{display:none}.gp-page-reset .meter{height:9px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:-8px 0 18px}.gp-page-reset .meter span{display:block;height:100%;width:0;background:linear-gradient(135deg,#ef4444,#f97316);transition:.2s}.gp-page-reset .meter.good span{width:70%;background:linear-gradient(135deg,#f59e0b,#22c55e)}.gp-page-reset .meter.strong span{width:100%;background:linear-gradient(135deg,#22c55e,#06b6d4)}


/* =========================================================
   Moved from user/dashboard.php (style block 1)
========================================================= */
.gp-dashboard-v2{padding-top:26px}.gp-dash-hero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:20px;align-items:stretch;padding:30px;border-radius:30px;background:linear-gradient(135deg,#2563eb,#60a5fa 60%,#93c5fd);color:#fff;box-shadow:0 24px 55px rgba(37,99,235,.22);margin-bottom:20px}.gp-dash-hero:before{content:"";position:absolute;right:-110px;top:-120px;width:310px;height:310px;border-radius:999px;background:rgba(255,255,255,.16)}.gp-dash-hero-copy,.gp-dash-hero-card{position:relative;z-index:1}.gp-dash-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.gp-dash-hero h2{font-size:42px;line-height:1;margin:14px 0 10px}.gp-dash-hero p{max-width:700px;margin:0;color:rgba(255,255,255,.88);font-size:16px}.gp-dash-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.gp-dash-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:16px;padding:12px 16px;font-weight:900;transition:.18s ease}.gp-dash-btn:hover{transform:translateY(-2px)}.gp-dash-btn.primary{background:#fff;color:#2563eb}.gp-dash-btn.soft{background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.28)}.gp-dash-btn.ghost{background:rgba(15,23,42,.16);color:#fff}.gp-dash-hero-card{align-self:stretch;border-radius:24px;padding:20px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:flex-end}.gp-dash-hero-card span{font-size:12px;text-transform:uppercase;font-weight:900;opacity:.85}.gp-dash-hero-card strong{font-size:28px;margin:8px 0}.gp-dash-hero-card small{color:rgba(255,255,255,.82)}.gp-dash-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.gp-dash-stat-card{position:relative;overflow:hidden;background:#fff;border:1px solid #e5e7eb;border-radius:24px;padding:20px;box-shadow:0 14px 32px rgba(15,23,42,.06)}.gp-dash-stat-card span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;font-weight:900}.gp-dash-stat-card strong{display:block;font-size:34px;color:#0f172a;margin:6px 0}.gp-dash-stat-card small{color:#64748b}.gp-dash-stat-card>i{position:absolute;right:18px;bottom:14px;font-size:48px;opacity:.11}.gp-dash-stat-card.blue>i{color:#2563eb}.gp-dash-stat-card.green>i{color:#16a34a}.gp-dash-stat-card.orange>i{color:#f97316}.gp-dash-stat-card.violet>i{color:#7c3aed}.gp-shortcut-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.gp-shortcut-card{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:17px;color:#0f172a;box-shadow:0 10px 26px rgba(15,23,42,.05);transition:.18s ease}.gp-shortcut-card:hover{transform:translateY(-3px);border-color:#bfdbfe;box-shadow:0 18px 36px rgba(37,99,235,.12)}.gp-shortcut-card i{width:46px;height:46px;border-radius:16px;background:#eff6ff;color:#2563eb;display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}.gp-shortcut-card strong{display:block;margin-bottom:5px}.gp-shortcut-card span{display:block;color:#64748b;font-size:13px;line-height:1.45}.gp-dash-grid-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.7fr);gap:16px;margin-bottom:16px}.gp-dash-grid-main.two{grid-template-columns:1fr 1fr}.gp-dash-panel{background:#fff;border:1px solid #e5e7eb;border-radius:26px;padding:22px;box-shadow:0 14px 32px rgba(15,23,42,.06)}.gp-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.gp-panel-head h3{margin:0;color:#0f172a;font-size:20px}.gp-panel-head p{margin:5px 0 0;color:#64748b}.gp-panel-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#eff6ff;color:#2563eb;font-size:12px;font-weight:900;padding:8px 11px;white-space:nowrap}.gp-bar-chart{display:grid;gap:14px}.gp-bar-row{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center}.gp-bar-row span{font-weight:800;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gp-bar-row strong{color:#0f172a;text-align:right}.gp-bar-track{height:13px;border-radius:999px;background:#e5e7eb;overflow:hidden}.gp-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#22c55e)}.gp-ring{--value:0;width:174px;height:174px;border-radius:50%;margin:10px auto 18px;display:grid;place-items:center;background:conic-gradient(#2563eb calc(var(--value) * 1%),#e5e7eb 0);position:relative}.gp-ring:after{content:"";position:absolute;inset:18px;background:#fff;border-radius:50%}.gp-ring span{position:relative;z-index:1;font-weight:950;font-size:32px;color:#0f172a}.gp-progress-notes{text-align:center;color:#64748b}.gp-progress-notes p{margin:0 0 10px}.gp-text-link{display:inline-flex;align-items:center;gap:7px;color:#2563eb;font-weight:900}.gp-section-list-mini,.gp-toolkit-list{display:grid;gap:10px}.gp-section-mini-item,.gp-toolkit-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #e5e7eb;background:#f8fafc;border-radius:18px;padding:14px;color:#0f172a;transition:.18s ease}.gp-section-mini-item:hover,.gp-toolkit-list a:hover{background:#eff6ff;border-color:#bfdbfe}.gp-section-mini-item strong{display:block}.gp-section-mini-item span{display:block;color:#64748b;font-size:13px;margin-top:3px}.gp-toolkit-list a{justify-content:flex-start;font-weight:850}.gp-toolkit-list i{width:38px;height:38px;border-radius:13px;background:#fff;color:#2563eb;display:flex;align-items:center;justify-content:center}.gp-mini-empty{min-height:150px;border:1px dashed #cbd5e1;border-radius:20px;display:grid;place-items:center;text-align:center;color:#64748b;padding:22px}.gp-mini-empty i{font-size:34px;color:#94a3b8;margin-bottom:8px}.gp-mini-empty p{margin:0;max-width:360px}body.dark-mode .gp-dash-stat-card,body.dark-mode .gp-shortcut-card,body.dark-mode .gp-dash-panel{background:#0f172a;border-color:#1e293b}body.dark-mode .gp-dash-stat-card strong,body.dark-mode .gp-shortcut-card,body.dark-mode .gp-panel-head h3,body.dark-mode .gp-bar-row strong,body.dark-mode .gp-ring span,body.dark-mode .gp-section-mini-item,body.dark-mode .gp-toolkit-list a{color:#f8fafc}body.dark-mode .gp-dash-stat-card span,body.dark-mode .gp-dash-stat-card small,body.dark-mode .gp-shortcut-card span,body.dark-mode .gp-panel-head p,body.dark-mode .gp-bar-row span,body.dark-mode .gp-progress-notes,body.dark-mode .gp-section-mini-item span{color:#94a3b8}body.dark-mode .gp-section-mini-item,body.dark-mode .gp-toolkit-list a{background:#111827;border-color:#1e293b}body.dark-mode .gp-ring:after{background:#0f172a}body.dark-mode .gp-bar-track{background:#1e293b}@media(max-width:1100px){.gp-dash-stat-grid,.gp-shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gp-dash-hero,.gp-dash-grid-main,.gp-dash-grid-main.two{grid-template-columns:1fr}.gp-dash-hero-card{min-height:150px}}@media(max-width:640px){.gp-dash-hero{padding:22px;border-radius:24px}.gp-dash-hero h2{font-size:32px}.gp-dash-stat-grid,.gp-shortcut-grid{grid-template-columns:1fr}.gp-bar-row{grid-template-columns:1fr}.gp-bar-row strong{text-align:left}.gp-panel-head{flex-direction:column}.gp-dash-actions{flex-direction:column}.gp-dash-btn{width:100%}}


/* =========================================================
   Moved from user/header.php (style block 1)
========================================================= */
.sidebar-toggle {
            width: 42px;
            height: 42px;
            border: none;
            border-radius: 12px;
            background: var(--gp-primary-soft);
            color: var(--gp-primary);
            font-size: 18px;
            cursor: pointer;
            margin-right: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s ease;
        }

        .sidebar-toggle:hover {
            background: var(--gp-primary-soft);
        }

        .user-shell.sidebar-hidden .user-sidebar {
            display: none;
        }

        .user-shell.sidebar-hidden .user-main {
            width: 100%;
            margin-left: 0;
        }

        .topbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        body.dark-mode .sidebar-toggle {
            background: color-mix(in srgb, var(--gp-dark-surface) 84%, white 16%);
            color: var(--gp-dark-icon);
        }

        body.dark-mode .sidebar-toggle:hover {
            background: var(--gp-dark-active);
        }


/* =========================================================
   Moved from user/profile.php (style block 1)
========================================================= */
.profile-password-card {
    margin-top: 22px;
}

.password-note {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 16px;
    color: #475569;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.password-note i {
    color: #2563eb;
    margin-right: 8px;
}

.profile-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn-dark {
    background: #0f172a;
}

.btn-dark:hover {
    background: #1e293b;
}

.profile-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eff6ff;
    color: #2563eb;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    margin-top: 8px;
}


/* =========================================================
   Moved from user/sections/tabs/class_record.php (style block 1)
========================================================= */
.auto-toast.success-toast,
.save-status-toast.show {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

.auto-toast.error-toast {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

.class-record-table input.score-over-hps {
    background-color: #fee2e2 !important;
    border: 2px solid #ef4444 !important;
    color: #991b1b !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.16) !important;
}


/* =========================================================
   Moved from user/sections/tabs/summary.php (style block 1)
========================================================= */
.summary-page-shell .summary-action-header { align-items: center; }
.summary-action-buttons { background: #fff; border:1px solid #e0e7ff; padding:12px; border-radius:18px; box-shadow:0 12px 30px rgba(15,23,42,.06); margin-bottom:14px; }
.summary-save-toast { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; margin:0 0 12px; border-radius:14px; background:#ecfdf5; color:#047857; border:1px solid #bbf7d0; font-weight:800; }
.summary-filter { margin-bottom: 18px; align-items: end; background:linear-gradient(135deg,#ffffff,#f8fbff); border:1px solid #dbeafe; border-radius:20px; padding:16px; box-shadow:0 14px 34px rgba(37,99,235,.07); }
.summary-update-btn { height: 46px; gap: 8px; background: linear-gradient(135deg,#0f172a,#2563eb); color:#fff; }
.summary-print-btn { gap: 8px; background: linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; }
.summary-print-area {
    background: radial-gradient(circle at top left,#eff6ff 0,#ffffff 34%,#f8fbff 100%);
    border: 1px solid #dbeafe;
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.10);
    overflow: auto;
}
.summary-title-row {
    display: grid;
    grid-template-columns: 112px 1fr 170px;
    align-items: center;
    gap: 12px;
    min-width: 1080px;
    border-bottom: 3px solid #1d4ed8;
    padding-bottom: 8px;
}
.summary-title-row h2 {
    text-align: center;
    margin: 0;
    font-size: 30px;
    color: #020617;
    font-weight: 900;
    letter-spacing: .01em;
}
.summary-seal {
    width: 86px;
    height: 86px;
    border: 3px solid #3154c9;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #3154c9;
    font-weight: 1000;
    font-size: 14px;
    line-height: 1.05;
    margin-left: 6px;
    background: radial-gradient(circle,#eef4ff 0,#fff 72%);
}
.summary-seal small { font-size: 10px; color:#64748b; }
.summary-deped-text {
    color: #1354b7;
    font-size: 42px;
    font-weight: 1000;
    letter-spacing: -3px;
    text-align: center;
    line-height: 1;
}
.summary-deped-text span { color:#ef4444; }
.summary-info-grid {
    min-width: 1080px;
    display: grid;
    grid-template-columns: 1.1fr 1.1fr .9fr;
    gap: 0;
    margin: 8px 0 10px;
}
.summary-info-pair {
    display: grid;
    grid-template-columns: 145px 1fr;
    align-items: stretch;
    min-height: 34px;
}
.summary-info-pair strong {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 15px;
    color: #020617;
    font-weight: 1000;
}
.summary-info-pair span {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111827;
    padding: 5px 8px;
    color: #020617;
    background: #fff;
    min-width: 0;
}
.summary-info-pair.school-name { grid-column: span 2; }
.summary-table-wrap { min-width: 1080px; overflow: visible; }
.summary-grade-table,
.summary-distribution-table {
    width: 100%;
    border-collapse: collapse;
    color: #020617;
    background: #ffffff;
    font-size: 13px;
}
.summary-grade-table th,
.summary-grade-table td,
.summary-distribution-table th,
.summary-distribution-table td {
    border: 1px solid #111827;
    padding: 5px 6px;
    text-align: center;
    vertical-align: middle;
}
.summary-grade-table th,
.summary-distribution-table th {
    font-weight: 1000;
    background: linear-gradient(180deg,#eff6ff,#dbeafe);
}
.summary-name-head { width: 310px; font-size: 18px; }
.summary-meta-head { text-align: left !important; font-size: 14px; }
.summary-meta-head span { font-weight: 500; margin-left: 30px; }
.summary-gender-row td {
    background: #e0ecff;
    font-weight: 1000;
    text-align: center;
    padding: 4px 7px;
}
.summary-learner-name { text-align: left !important; white-space: nowrap; }
.summary-learner-name span { display: inline-block; width: 28px; text-align: center; font-weight: 1000; margin-right: 4px; }
.summary-rate-row td { font-weight: 900; font-style: italic; background:#fff; }
.summary-rate-row td:first-child { text-align:right; padding-right:14px; }
.summary-rate-row.total td { border-top:2px solid #111827; }
.summary-remark { font-weight: 900; }
.summary-remark.passed { color: #065f46; }
.summary-remark.failed { color: #b91c1c; }
.summary-empty-row { padding:18px!important; color:#64748b; }
.summary-bottom-grid { display:flex; justify-content:center; margin-top:14px; width:100%; }
.summary-distribution-table { font-size:12px; width:760px; max-width:100%; }
.summary-distribution-table th:first-child { width:78px; }
.summary-distribution-table th:last-child, .summary-distribution-table td:last-child { width:90px; min-width:90px; height:26px; }
.summary-signatures { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:18px; font-size:12px; color:#020617; }
.summary-signatures div { min-height:60px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.summary-signatures span { align-self:flex-start; margin-bottom:16px; }
.summary-signatures strong { border-top:1px solid transparent; min-width:210px; text-align:center; font-weight:1000; }
.summary-signatures small { margin-top:2px; }
body.dark-mode .summary-print-area { background:#ffffff; color:#020617; }
@media print {
    body * { visibility: hidden !important; }
    .summary-print-area, .summary-print-area * { visibility: visible !important; }
    .summary-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        overflow: visible;
        background:#fff!important;
    }
    .summary-action-header, .summary-filter, .sidebar, .user-sidebar, .topbar, .user-topbar, .section-tabs-line, .section-view-hero { display: none !important; }
    .summary-title-row, .summary-info-grid, .summary-table-wrap { min-width: 0; }
    .summary-title-row h2 { font-size: 22px; }
    .summary-seal { width:74px; height:74px; }
    .summary-deped-text { font-size:34px; }
    .summary-grade-table, .summary-distribution-table { font-size:10px; }
    .summary-grade-table th, .summary-grade-table td, .summary-distribution-table th, .summary-distribution-table td { padding:2px 4px; }
    .summary-name-head { width:260px; font-size:14px; }
    @page { size: landscape; margin: 6mm; }
}

.summary-bottom-grid {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    width: 100%;
}

.summary-distribution-table {
    font-size: 12px;
    width: 820px;
    max-width: 100%;
    margin: 0 auto;
}

.summary-distribution-table th:first-child {
    width: 84px;
}

.summary-distribution-table th:last-child,
.summary-distribution-table td:last-child {
    width: 140px;
    min-width: 140px;
    height: 30px;
    background: #fff;
}

.summary-distribution-table th:nth-last-child(2),
.summary-distribution-table td:nth-last-child(2) {
    width: 76px;
    min-width: 76px;
}

.summary-action-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.summary-excel-btn {
    gap: 8px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
}


/* =========================================================
   Moved from admin/generate_password.php (style block 1)
========================================================= */
body.gp-page-admin-generate{font-family:Segoe UI,Arial,sans-serif;background:#f4f7fb;padding:40px;color:#0f172a}.gp-page-admin-generate .box{max-width:760px;margin:auto;background:white;border-radius:22px;padding:28px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.gp-page-admin-generate textarea{width:100%;height:120px;border:1px solid #dbe4f0;border-radius:14px;padding:14px;font-size:15px}.gp-page-admin-generate .pill{display:inline-block;background:#eaf2ff;color:#2563eb;border-radius:999px;padding:8px 12px;font-weight:800}.gp-page-admin-generate code{background:#f1f5f9;padding:3px 6px;border-radius:7px}.gp-page-admin-generate .warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:12px 14px;border-radius:14px}


/* =========================================================
   Moved from admin/setup_admin_password.php (style block 1)
========================================================= */
body.gp-page-admin-setup{font-family:Segoe UI,Arial,sans-serif;background:#f4f7fb;padding:40px;color:#0f172a}.gp-page-admin-setup .box{max-width:680px;margin:auto;background:white;border-radius:22px;padding:28px;box-shadow:0 18px 45px rgba(15,23,42,.08)}.gp-page-admin-setup .ok{background:#dcfce7;color:#166534;border:1px solid #bbf7d0;padding:14px 16px;border-radius:14px;font-weight:800}.gp-page-admin-setup .danger{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:14px 16px;border-radius:14px;margin-top:16px}.gp-page-admin-setup code{background:#f1f5f9;padding:3px 6px;border-radius:7px}.gp-page-admin-setup .btn{display:inline-block;margin-top:14px;background:#2563eb;color:white;padding:11px 16px;border-radius:12px;text-decoration:none;font-weight:800}