/* Global Variables */
:root {
    --primary-color: #5851A1;
    --primary-hover: #4B4589; /* Mandated darker hover */
    --secondary-color: #4DA1A4;
    --secondary-hover: #41898C;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #F9B347;
    --warning-hover: #E6A13A;
    --background-color: #f4f7f6;
    --card-bg: #ffffff;
    --text-color: #333333;
    --text-muted: #7f8c8d;
    --border-color: #e0e0e0;
    --shell-border-subtle: rgba(0, 0, 0, 0.08);
    --shell-surface-subtle: rgba(88, 81, 161, 0.04);
    --shell-surface-hover: rgba(88, 81, 161, 0.08);
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* UI Components Theme Variables */
    --navbar-bg: #FDFCFA;
    --navbar-text: #2d2d2d;
    --footer-bg: #f5f3ef;
    --footer-text: #5a5a5a;

    --item-bg: #f8f9fa;
    --item-bg-hover: #ffffff;

    --sidebar-bg: #ffffff;
    --sidebar-header-bg: #f8f9fa;
    --sidebar-text: #333333;
    --sidebar-text-hover: #5851A1;
    --sidebar-border: #e0e0e0;
}

[data-theme="dark"] {
    --primary-color: #6d65b5;
    --primary-hover: #837cdb;
    --secondary-color: #4DA1A4;
    --secondary-hover: #41898C;
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #F9B347;
    --warning-hover: #E6A13A;
    --background-color: #121212;
    --card-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #333333;
    --shell-border-subtle: rgba(255, 255, 255, 0.08);
    --shell-surface-subtle: rgba(255, 255, 255, 0.04);
    --shell-surface-hover: rgba(255, 255, 255, 0.08);

    /* UI Components Theme Variables for Dark Mode */
    --navbar-bg: #1a1a1a;
    --navbar-text: #e0e0e0;
    --footer-bg: #1a1a1a;
    --footer-text: #a0a0a0;

    --item-bg: #2d3748;
    --item-bg-hover: #4a5568;

    --sidebar-bg: #121212;
    --sidebar-header-bg: #1e1e1e;
    --sidebar-text: #a0a0a0;
    --sidebar-text-hover: #6d65b5;
    --sidebar-border: #333333;
}

/* Base Reset & Typography */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6;
    direction: rtl;
    text-align: right;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

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

h1, h2, h3, h4, h5, h6 {
    color: var(--secondary-color);
    margin-bottom: 1rem;
}

/* Layout */
.navbar {
    background-color: var(--navbar-bg);
    color: var(--navbar-text);
    border-bottom: 1px solid var(--shell-border-subtle, var(--border-color));
    height: var(--shell-navbar-height, 72px);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 100;
}

.navbar__container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--navbar-text);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    margin-inline-end: 2rem; /* Breathing room before nav */
}

.navbar-brand img {
    height: 44px;
    width: auto;
    display: block;
}

.navbar-brand__text {
    letter-spacing: -0.02em;
    position: relative;
}

.navbar-brand__text::after {
    content: '';
    position: absolute;
    bottom: -3px;
    inset-inline-start: 0;
    width: 6px;
    height: 6px;
    background-color: var(--warning-color);
    border-radius: 50%;
}

.nav-links {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    margin: 0;
    padding: 0;
}

.nav-links__primary,
.nav-links__utilities {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.nav-links__primary {
    gap: 0.5rem;
}

.nav-links__primary li a,
.nav-links__utilities a,
.nav-links__utilities button,
.nav-links__utilities .user-greeting {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    color: var(--navbar-text);
    font-weight: 500;
    font-size: 0.925rem;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
    height: 40px;
}

.nav-links__primary li a i,
.nav-links__utilities i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    color: var(--primary-color);
    opacity: 0.85;
}

.nav-links__primary li a:hover {
    color: var(--primary-color);
    background-color: var(--shell-surface-subtle);
}

.nav-links__primary li a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    inset-inline-start: 50%;
    inset-inline-end: 50%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links__primary li a:hover::after,
.nav-links__primary li a.active::after {
    inset-inline-start: 0.85rem;
    inset-inline-end: 0.85rem;
}

/* Visual Group Divider */
.nav-links__divider {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    margin: 0 1rem;
    opacity: 0.6;
}

/* Navbar Gamification Badges */
.nav-gamification {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: 0.5rem;
}

.nav-gamification__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid var(--shell-border-subtle);
}

.nav-gamification__xp {
    background: rgba(88, 81, 161, 0.08);
    color: var(--primary-color);
}

.nav-gamification__xp:hover {
    background: rgba(88, 81, 161, 0.15);
    transform: translateY(-2px);
}

.nav-gamification__xp i {
    color: var(--primary-color);
    filter: drop-shadow(0 0 5px rgba(88, 81, 161, 0.3));
}

.nav-gamification__streak {
    background: rgba(249, 179, 71, 0.08);
    color: var(--warning-color);
    cursor: default;
}

.nav-gamification__streak i {
    color: var(--warning-color);
    filter: drop-shadow(0 0 5px rgba(249, 179, 71, 0.3));
}

/* Account Menu Stats */
.account-menu__stats {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.account-menu__stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
}

.account-menu__stat-item i.fa-bolt {
    color: var(--primary-color);
}

.account-menu__stat-item i.fa-fire {
    color: var(--warning-color);
}

/* Account Menu Dropdown */
.account-menu {
    position: relative;
}

.account-menu__details {
    position: relative;
}

.account-menu__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    color: var(--navbar-text);
    font-weight: 500;
    font-size: 0.925rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    list-style: none;
    height: 40px;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
}

.account-menu__summary::-webkit-details-marker {
    display: none;
}

.account-menu__summary:hover {
    background-color: var(--shell-surface-hover);
    border-color: var(--primary-color);
}

.account-menu__summary i:first-child {
    color: var(--secondary-color);
    font-size: 1.1rem;
}

.account-menu__chevron {
    font-size: 0.75rem;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

.account-menu__details[open] .account-menu__chevron {
    transform: rotate(180deg);
}

.account-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0.5rem;
    animation: dropdownEnter 0.2s ease-out;
}

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

.account-menu__header {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.5rem;
}

.account-menu__username {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-menu__list li a,
.account-menu__logout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    color: var(--text-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.15s ease;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}

.account-menu__list li a:hover,
.account-menu__logout-btn:hover {
    background-color: var(--shell-surface-subtle);
    color: var(--primary-color);
}

.account-menu__list li a i,
.account-menu__logout-btn i {
    width: 1.25rem;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.7;
}

.account-menu__divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 0.5rem 0;
}

.account-menu__admin-link {
    color: var(--secondary-color) !important;
}

.account-menu__admin-link:hover {
    background-color: rgba(77, 161, 164, 0.08) !important;
}

.account-menu__logout-btn:hover {
    color: var(--danger-color) !important;
    background-color: rgba(231, 76, 60, 0.08) !important;
}

.theme-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--navbar-text);
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--shell-surface-hover);
    border-color: var(--shell-border-subtle);
    transform: rotate(15deg);
    color: var(--warning-color);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-greeting {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
    color: var(--text-color);
    cursor: default;
}

.user-greeting i {
    color: var(--secondary-color);
}

.nav-admin-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.6rem;
    color: var(--secondary-color);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.nav-admin-link:hover {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.logout-form {
    display: inline;
    margin: 0;
}

.btn-logout {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.btn-logout:hover {
    color: var(--danger-color);
    background-color: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.25);
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-login {
    display: inline-block;
    padding: 0.45rem 1rem;
    color: var(--navbar-text);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-login:hover {
    background-color: var(--shell-surface-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-register {
    display: inline-block;
    padding: 0.45rem 1rem;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-register:hover {
    background-color: var(--primary-hover);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: 1px solid transparent;
    color: var(--navbar-text);
    font-size: 1.4rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

.mobile-menu-btn:hover {
    background-color: var(--shell-surface-hover);
}

.main-content {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    margin-top: auto;
    border-top: 1px solid var(--shell-border-subtle);
}

.footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    text-align: center;
}

.footer__rule {
    width: 64px;
    height: 3px;
    margin: 0 auto 0.75rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 45%, var(--secondary-color) 45%, var(--secondary-color) 80%, var(--warning-color) 80%, var(--warning-color) 100%);
}

.footer__copy {
    font-size: 0.85rem;
    line-height: 1.7;
    opacity: 0.85;
    margin: 0;
}

/* Cards */
.card {
    background: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}

.card-header {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: #fff !important;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: var(--primary-hover);
}

.btn-success { background-color: var(--success-color); }
.btn-success:hover { background-color: #219653; }

.btn-danger { background-color: var(--danger-color); }
.btn-danger:hover { background-color: #c0392b; }

.btn-outline {
    background-color: transparent;
    color: var(--primary-color) !important;
    border: 1px solid var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(41, 128, 185, 0.2);
}

/* Tables */
.table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background: var(--card-bg);
}

.table th, .table td {
    padding: 1rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: var(--secondary-color);
}

.table tbody tr:hover {
    background-color: var(--background-color);
}

/* Messages / Alerts */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-weight: 500;
}

[data-theme="dark"] .table th {
    background-color: #2d3748;
}

[data-theme="dark"] .alert-success {
    background-color: #064e3b;
    color: #68d391;
    border-color: #065f46;
}

[data-theme="dark"] .alert-warning {
    background-color: #744210;
    color: #f6e05e;
    border-color: #975a16;
}

[data-theme="dark"] .alert-danger {
    background-color: #742a2a;
    color: #fc8181;
    border-color: #9b2c2c;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.d-flex { display: flex; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

/* ===================================================================
   Direction A: The Publication Shelf — /courses/ catalog identity
   Warm editorial canvas. Publication-style cards. Misbah Cover System.
   Creative Modern Polish Pass.
   Additive. Placed after legacy global styles.
   =================================================================== */

/* -------------------------------------------------------------------
   1. Page header
   ------------------------------------------------------------------- */
.page-header {
    margin-bottom: 2rem;
    position: relative;
}

.page-header__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.page-header__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0;
    line-height: 1.3;
}

.page-header__count {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.page-header__subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.page-header__rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.page-header__mark {
    display: inline-block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* -------------------------------------------------------------------
   2. Stat strip
   ------------------------------------------------------------------- */
.stat-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    background: var(--item-bg);
    border: 1px solid var(--border-color);
    font-size: 0.9375rem;
}

.stat-chip__icon {
    font-size: 0.875rem;
}

.stat-chip--xp .stat-chip__icon {
    color: var(--primary-color);
}

.stat-chip--streak .stat-chip__icon {
    color: var(--warning-color);
}

.stat-chip__value {
    font-weight: 700;
    color: var(--text-color);
}

.stat-chip__unit {
    font-weight: 400;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-inline-start: 0.25rem;
}

.stat-strip__action {
    margin-inline-start: auto;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.stat-strip__action:hover {
    color: var(--primary-hover);
}

/* -------------------------------------------------------------------
   3. Filter bar
   ------------------------------------------------------------------- */
.filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 200px;
    flex: 1 1 200px;
}

.filter-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
}

.filter-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.filter-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(88, 81, 161, 0.15);
}

.filter-select__chevron {
    position: absolute;
    inset-inline-start: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

.filter-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
    height: 44px;
}

.filter-submit:hover {
    background: var(--primary-hover);
}

.filter-submit:active {
    transform: scale(0.98);
}

.filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    height: 44px;
}

.filter-reset:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(88, 81, 161, 0.05);
}

/* -------------------------------------------------------------------
   4. Catalog grid & course card
   ------------------------------------------------------------------- */
.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.course-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    opacity: 0;
    animation: cardEnter 0.5s ease forwards;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.course-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(88, 81, 161, 0.12);
    transform: translateY(-2px);
}

.course-card--locked {
    opacity: 0.85;
}

.course-card--locked .course-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.course-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--item-bg);
}

.course-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.course-card:hover .course-card__media img {
    transform: scale(1.03);
}

/* -------------------------------------------------------------------
   5. Misbah Cover System (fallback cover)
   ------------------------------------------------------------------- */
.course-cover {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f8f6ff 0%, #f0f7f7 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

[data-theme="dark"] .course-cover {
    background: linear-gradient(135deg, #1a1830 0%, #162020 100%);
}

.course-cover__field {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.course-cover__watermark {
    font-size: 3.5rem;
    color: var(--primary-color);
    opacity: 0.18;
}

.course-cover__band {
    height: 36%;
    min-height: 64px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-block: 12px;
    padding-inline: 12px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.course-cover__label {
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.course-cover__divider {
    display: block;
    width: 32px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 1px;
}

.course-cover__sig {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--warning-color);
    border-radius: 50%;
}

.course-cover__rule {
    position: absolute;
    top: 12%;
    right: 8%;
    width: 24%;
    height: 2px;
    background: rgba(88, 81, 161, 0.12);
    border-radius: 1px;
    transform: rotate(-15deg);
}

[data-theme="dark"] .course-cover__rule {
    background: rgba(109, 101, 181, 0.2);
}

/* -------------------------------------------------------------------
   6. Card body
   ------------------------------------------------------------------- */
.course-card__body {
    padding: 1rem 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.course-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.course-card__title-icon {
    font-size: 0.875rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.course-card__meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.course-card__desc {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.course-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.course-badge--success {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.course-badge--warning {
    background: rgba(249, 179, 71, 0.1);
    color: #c68a2a;
    border: 1px solid rgba(249, 179, 71, 0.25);
}

[data-theme="dark"] .course-badge--warning {
    color: #f9b347;
}

.course-badge--neutral {
    background: rgba(127, 140, 141, 0.1);
    color: var(--text-muted);
    border: 1px solid rgba(127, 140, 141, 0.2);
}

/* -------------------------------------------------------------------
   7. Card footer & CTA
   ------------------------------------------------------------------- */
.course-card__footer {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
}

.course-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    height: 44px;
}

.course-card__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(88, 81, 161, 0.2);
}

.course-card__cta:active {
    transform: scale(0.98);
}

.course-card__cta.cta-arrow {
    transition: transform 0.2s;
}

.course-card__cta:hover .cta-arrow {
    transform: translateX(-4px);
}

.btn-attention {
    background: linear-gradient(135deg, var(--warning-color), #e6a13a);
    color: #1a1200 !important;
}

.btn-attention:hover {
    background: linear-gradient(135deg, #e6a13a, #d4932f);
}

.btn-outline-secondary {
    background: transparent;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color);
}

.btn-outline-secondary:hover {
    background: var(--item-bg);
    color: var(--text-color) !important;
    border-color: var(--text-muted);
}

/* -------------------------------------------------------------------
   8. Empty state
   ------------------------------------------------------------------- */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.empty-state__icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.empty-state__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0;
}

.empty-state__helper {
    font-size: 0.9375rem;
    color: var(--text-muted);
    max-width: 400px;
}

.empty-state__action {
    margin-top: 0.5rem;
}

/* -------------------------------------------------------------------
   9. Responsive
   ------------------------------------------------------------------- */
@media (max-width: 768px) {
    .page-header__title {
        font-size: 1.5rem;
    }

    .stat-strip {
        gap: 0.75rem;
    }

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

    .filter-field {
        min-width: 100%;
    }

    .filter-submit,
    .filter-reset {
        width: 100%;
    }

    .catalog-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* -------------------------------------------------------------------
   10. Reduced motion
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .course-card {
        animation: none;
        opacity: 1;
    }

    .course-card,
    .course-card__media img,
    .course-card__cta,
    .cta-arrow,
    .filter-select,
    .filter-submit,
    .filter-reset {
        transition: none !important;
    }

    .course-card:hover,
    .course-card__cta:hover {
        transform: none !important;
    }
}

/* ===================================================================
   Misbah Global Shell — Responsive & Motion
   =================================================================== */

@media (max-width: 768px) {
    .navbar {
        height: auto;
        padding: 0.75rem 0;
    }

    .navbar__container {
        flex-wrap: wrap;
        padding: 0 1rem;
    }

    .navbar-brand img {
        height: 38px;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--shell-border-subtle);
        gap: 0.5rem;
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links__divider {
        display: none;
    }

    .nav-links__primary {
        flex-direction: column;
        width: 100%;
        gap: 0;
    }

    .nav-links__primary li {
        width: 100%;
    }

    .nav-links__primary li a {
        width: 100%;
        padding: 0.65rem 0.5rem;
        border-radius: 6px;
    }

    .nav-links__primary li a::after {
        display: none;
    }

    .nav-links__utilities {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--shell-border-subtle);
    }

    .account-menu,
    .account-menu__details,
    .account-menu__summary {
        width: 100%;
    }

    .account-menu__summary {
        justify-content: space-between;
        padding: 0.65rem 0.5rem;
    }

    .account-menu__dropdown {
        position: static;
        width: 100%;
        box-shadow: none;
        border: none;
        background: var(--shell-surface-subtle);
        padding: 0;
        margin-top: 0.25rem;
        border-radius: 8px;
        animation: none;
    }

    .account-menu__header {
        display: none; /* Hide redundant username in mobile expanded view */
    }

    .account-menu__list li a,
    .account-menu__logout-btn {
        padding: 0.75rem 1rem;
    }

    .theme-toggle {
        align-self: flex-start;
        margin: 0.25rem 0;
    }

    .auth-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }

    .btn-login,
    .btn-register {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-brand__text::after,
    .nav-links__primary li a,
    .nav-links__primary li a::after,
    .theme-toggle,
    .account-menu__summary,
    .account-menu__dropdown,
    .account-menu__chevron,
    .btn-logout,
    .btn-login,
    .btn-register {
        transition: none !important;
    }

    .theme-toggle:hover {
        transform: none;
    }
}

/* Misbah Course Detail Workspace */
.course-workspace {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* --- Course Hero --- */
.course-hero {
    position: relative;
    border-radius: 24px;
    background: var(--primary-color);
    color: white;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.course-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.25;
    background-size: cover;
    background-position: center;
    filter: blur(2px);
}

.course-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(135deg, var(--primary-color), rgba(88, 81, 161, 0.8));
}

.course-hero__content {
    position: relative;
    z-index: 3;
    max-width: 800px;
}

.course-hero__title {
    font-size: 2.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: white;
}

.course-hero__desc {
    font-size: 1.15rem;
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.course-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
}

.course-hero__badge--warning {
    background: rgba(249, 179, 71, 0.2);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.course-hero__badge--success {
    background: rgba(39, 174, 96, 0.2);
    border-color: var(--success-color);
    color: var(--success-color);
}

.course-hero__action {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.purchase-cta {
    padding: 0.85rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(249, 179, 71, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.purchase-cta:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 30px rgba(249, 179, 71, 0.4);
    background-color: #f7a01d; /* Slightly deeper orange */
}

.purchase-cta:active {
    transform: translateY(-1px);
}

.purchase-cta i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.purchase-cta:hover i {
    transform: rotate(-10deg) scale(1.1);
}

/* --- Subscription Modal Overlay --- */
.subscription-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 14, 28, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    animation: modalFadeIn 0.3s ease-out;
}

.subscription-modal-backdrop[hidden] {
    display: none !important;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.subscription-modal-dialog {
    width: 100%;
    max-width: 680px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    position: relative;
    overflow: hidden;
    animation: modalSlideUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.subscription-modal-head {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--shell-surface-subtle);
}

.subscription-modal-head h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
}

.subscription-modal-head p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

.subscription-modal-close {
    background: transparent;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.subscription-modal-close:hover {
    color: var(--danger-color);
    background: rgba(231, 76, 60, 0.1);
}

.subscription-modal-body {
    padding: 2rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.subscription-option {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease;
}

.subscription-option:hover {
    border-color: var(--primary-color);
    background: var(--card-bg);
}

.subscription-option-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscription-option-head h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.subscription-option-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--primary-color);
}

.subscription-option-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subscription-option-desc {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
}

.subscription-courses-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subscription-modal-foot {
    padding: 1.25rem 2rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--shell-surface-subtle);
}

/* --- In-Page Navigation --- */
.course-nav {
    position: sticky;
    top: 80px;
    z-index: 100;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
    scrollbar-width: none;
}

.course-nav::-webkit-scrollbar {
    display: none;
}

.course-nav__link {
    white-space: nowrap;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    color: var(--text-muted);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.course-nav__link:hover {
    background: var(--shell-surface-subtle);
    color: var(--primary-color);
}

.course-nav__link.active {
    background: var(--primary-color);
    color: white;
}

/* --- Learning Tools --- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.tool-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    display: flex;    flex-direction: column;
    gap: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tool-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.tool-card--anki:hover {
    border-color: var(--secondary-color);
}

.tool-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--shell-surface-subtle);
    color: var(--primary-color);
}

.tool-card--anki .tool-card__icon {
    color: var(--secondary-color);
    background: rgba(77, 161, 164, 0.08);
}

.tool-card__content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.tool-card__content p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.tool-card__action {
    margin-top: auto;
}

/* --- Community / Telegram --- */
.community-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 2.5rem;
}

.community-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.community-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.community-icon {
    width: 64px;
    height: 64px;
    background: #0088cc;
    color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.2);
}

.community-status-rows {
    display: grid;
    gap: 1rem;
}

.status-row {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
}

.status-row:hover {
    background: var(--shell-surface-hover);
}

.status-row__label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-row__title {
    font-weight: 700;
    font-size: 1rem;
}

.status-chip {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.status-chip--joined {
    background: rgba(39, 174, 96, 0.1);
    color: var(--success-color);
}

.status-chip--missing {
    background: rgba(231, 76, 60, 0.1);
    color: var(--danger-color);
}

/* --- Live Sessions --- */
.live-timeline {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.live-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-inline-start: 4px solid var(--danger-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}

.live-item__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
    padding: 0.5rem;
    background: var(--shell-surface-subtle);
    border-radius: 8px;
    color: var(--text-muted);
}

.live-item__day {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-color);
}

.live-item__month {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
}

.live-item__content {
    flex: 1;
}

.live-item__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.live-item__meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    gap: 1rem;
}

/* --- Curriculum Tree --- */
.curriculum-tree {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.subject-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.subject-header {
    background: var(--shell-surface-subtle);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.subject-header i {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.subject-header h2 {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
}

.chapter-item {
    border-bottom: 1px solid var(--border-color);
}

.chapter-item:last-child {
    border-bottom: none;
}

.chapter-summary {
    padding: 1.25rem 2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s ease;
    user-select: none;
}

.chapter-summary:hover {
    background: var(--shell-surface-subtle);
}

.chapter-summary::-webkit-details-marker {
    display: none;
}

.chapter-title-box {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.chapter-title-box i {
    color: var(--secondary-color);
    transition: transform 0.2s ease;
}

.chapter-item[open] .chapter-title-box i {
    transform: rotate(90deg);
}

.chapter-title-text {
    font-weight: 700;
    font-size: 1.1rem;
}

.chapter-content {
    padding: 0 1.5rem 1.5rem;
    display: grid;
    gap: 0.5rem;
}

.lesson-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.lesson-row:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    transform: translateX(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.lesson-row--locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: var(--shell-surface-subtle);
}

.lesson-row--locked:hover {
    transform: none;
    border-color: var(--border-color);
    box-shadow: none;
}

.lesson-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lesson-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--shell-surface-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.lesson-row--locked .lesson-icon {
    color: var(--text-muted);
}

.lesson-title {
    font-weight: 600;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .course-hero {
        padding: 2rem 1.5rem;
    }
    .course-hero__title {
        font-size: 2rem;
    }
    .tools-grid {
        grid-template-columns: 1fr;
    }
    .community-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .live-item {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .live-item__time {
        flex-direction: row;
        justify-content: center;
        gap: 0.5rem;
    }
    .chapter-summary {
        padding: 1rem 1.5rem;
    }
}

/* --- Dark Mode Specific Fixes for Community --- */
[data-theme="dark"] .status-row {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .status-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .subject-group {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .lesson-row {
    background: rgba(255, 255, 255, 0.02);
}

/* Misbah Feature Setup Wizard */
.setup-wizard {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.setup-wizard__header {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.setup-wizard__context {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.setup-wizard__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.setup-wizard__title-row h1 {
    font-size: 2.25rem;
    font-weight: 900;
    margin: 0;
}

.setup-wizard__instructions {
    background: var(--shell-surface-subtle);
    border-right: 4px solid var(--secondary-color);
    padding: 1.25rem 1.75rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.setup-wizard__instructions i {
    color: var(--secondary-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

.setup-wizard__instructions-content h4 {
    margin: 0 0 0.4rem;
    font-weight: 800;
    font-size: 1.05rem;
}

.setup-wizard__instructions-content p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.setup-wizard__section {
    margin-bottom: 3.5rem;
}

.setup-wizard__section-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.setup-wizard__section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

/* Mode Selection Cards */
.mode-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.mode-option-card {
    position: relative;
    cursor: pointer;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.mode-option-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.06);
}

.mode-option-card.is-active {
    border-color: var(--primary-color);
    background: rgba(88, 81, 161, 0.03);
}

.mode-option-card input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.mode-option-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-color);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.25rem;
    position: relative;
    transition: all 0.2s ease;
}

.mode-option-card.is-active .mode-option-indicator {
    border-color: var(--primary-color);
}

.mode-option-card.is-active .mode-option-indicator::after {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--primary-color);
    border-radius: 50%;
}

.mode-option-icon {
    font-size: 1.75rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.mode-option-info h4 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 800;
}

.mode-option-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Settings Group */
.settings-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
}

.settings-row {
    margin-bottom: 2rem;
}

.settings-row:last-child {
    margin-bottom: 0;
}

.settings-row label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.settings-row input[type="number"],
.settings-row select {
    width: 100%;
    max-width: 400px;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.settings-row input[type="number"]:focus,
.settings-row select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 81, 161, 0.1);
}

/* Preset Hint Panel */
.preset-hint-panel {
    background: rgba(77, 161, 164, 0.05);
    border: 1px dashed var(--secondary-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.preset-hint-panel i {
    color: var(--secondary-color);
    font-size: 1.25rem;
}

.is-hidden {
    display: none !important;
}

.setup-wizard__actions {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .setup-wizard__header {
        margin-bottom: 2rem;
    }
    .setup-wizard__title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .mode-selection-grid {
        grid-template-columns: 1fr;
    }
    .setup-wizard__actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Misbah Feature Sections Builder */
.sections-builder {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.sections-builder__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.sections-builder__context {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.sections-builder__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sections-builder__title-row h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
}

.sections-builder__actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Question Summary Strip */
.plan-summary-strip {
    background: var(--shell-surface-subtle);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.plan-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
    flex: 1;
}

.plan-summary-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-summary-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-color);
}

.plan-summary-value--highlight {
    color: var(--secondary-color); /* Teal for emphasis */
}

.plan-summary-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Section Builder Unit */
.builder-section {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    margin-bottom: 3rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.builder-section:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 8px 30px rgba(88, 81, 161, 0.08);
}

.builder-section__head {
    background: var(--shell-surface-subtle);
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.builder-section__title {
    font-size: 1.25rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.builder-section__number {
    width: 36px;
    height: 36px;
    background: var(--primary-color);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(88, 81, 161, 0.3);
}

.builder-section__meta {
    display: flex;
    gap: 2rem;
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 600;
}

.builder-section__meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.builder-section__meta i {
    color: var(--primary-color);
    opacity: 0.8;
}

.builder-section__body {
    padding: 2.5rem;
}

.builder-section__fields {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.builder-field label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.builder-field input,
.builder-field select {
    width: 100%;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem 1.25rem;
    color: var(--text-color);
    font-size: 1rem;
    transition: all 0.2s ease;
    font-weight: 600;
}

.builder-field input:focus,
.builder-field select:focus {
    border-color: var(--primary-color);
    background: var(--card-bg);
    outline: none;
    box-shadow: 0 0 0 4px rgba(88, 81, 161, 0.1);
}

/* Source Builder Area */
.sources-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.source-item-card {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.source-item-card:hover {
    border-color: var(--shell-border-subtle);
}

.source-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--border-color);
}

.source-item-title {
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.source-remove-link {
    background: transparent;
    border: 1px solid transparent;
    color: var(--danger-color);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.source-remove-link:hover {
    background: rgba(231, 76, 60, 0.08);
    border-color: rgba(231, 76, 60, 0.2);
}

/* Source Type Segmented Selector */
.source-type-segmented {
    display: flex;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 5px;
    border-radius: 14px;
    gap: 5px;
    margin-bottom: 2rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
}

.source-type-segmented .source-type-btn {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.source-type-segmented .source-type-btn:hover {
    color: var(--primary-color);
    background: var(--shell-surface-subtle);
}

.source-type-segmented .source-type-btn.active {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(88, 81, 161, 0.2);
}

/* Source Workspace Stacked */
.source-config-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.source-config-group {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
}

.source-config-group summary {
    padding: 1rem 1.5rem;
    cursor: pointer;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    transition: background 0.2s ease;
    user-select: none;
}

.source-config-group summary::-webkit-details-marker {
    display: none;
}

.source-config-group summary:hover {
    background: var(--shell-surface-subtle);
}

.source-config-group[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.source-config-group__title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

.source-config-group__badge {
    background: var(--primary-color);
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

.source-config-group__badge.is-empty {
    background: var(--shell-surface-subtle);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.source-config-group__content {
    padding: 1.5rem;
}

.source-config-group__indicator {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.source-config-group[open] .source-config-group__indicator {
    transform: rotate(180deg);
}

.search-input-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-input-wrapper::after {
    content: '\f002';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.8rem 1.25rem 0.8rem 2.75rem;
    color: var(--text-color);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.search-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(88, 81, 161, 0.1);
}

/* Selection Items Grid */
.source-selection-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
    margin-top: 1rem;
}

.source-selection-list::-webkit-scrollbar {
    width: 6px;
}

.source-selection-list::-webkit-scrollbar-track {
    background: transparent;
}

.source-selection-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 10px;
}

.selection-item {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    border-right: 4px solid transparent;
}

.selection-item:hover {
    border-color: var(--primary-color);
    transform: translateX(-4px);
    background: var(--shell-surface-subtle);
}

.selection-item.selected {
    border-color: var(--primary-color);
    border-right-color: var(--primary-color);
    background: rgba(88, 81, 161, 0.05);
}

.selection-item.selected::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(88, 81, 161, 0.3);
}

.selection-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--shell-surface-subtle);
    border-style: dashed;
}

.item-main-text {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--text-color);
}

.item-sub-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Add Source Button */
.add-source-action {
    margin-top: 2.5rem;
    width: 100%;
    padding: 1.25rem;
    background: var(--shell-surface-subtle);
    border: 2px dashed var(--border-color);
    border-radius: 20px;
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.add-source-action:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(88, 81, 161, 0.1);
}

.add-source-action i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.add-source-action:hover i {
    transform: rotate(90deg);
}

/* Final Actions */
.builder-actions-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    margin-top: 4rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
}

.builder-actions-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Responsive Layout */
@media (max-width: 992px) {
    .plan-summary-strip {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .plan-summary-divider {
        display: none;
    }
    .plan-summary-item {
        min-width: 120px;
    }
    .builder-section__fields {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .builder-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.5rem;
    }
    .builder-section__meta {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
    }
    .source-type-segmented {
        overflow-x: auto;
        padding: 4px;
    }
    .source-type-segmented .source-type-btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    .source-selection-list {
        grid-template-columns: 1fr;
    }
}

/* Subject Source Specifics */
.subject-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.whole-subject-toggle {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    font-weight: 700;
    padding-top: 1.75rem;
    color: var(--text-color);
    user-select: none;
}

.whole-subject-toggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

/* --- Feature Hub --- */
.feature-hub {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

.feature-hub__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.feature-hub__title-group h1 {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
    color: var(--text-color);
}

.feature-hub__title-group p {
    color: var(--text-muted);
    margin: 0;
}

/* Primary Features Grid */
.feature-grid--primary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.feature-module {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.feature-module:hover {
    transform: translateY(-8px);
    border-color: var(--primary-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.feature-module__icon {
    width: 64px;
    height: 64px;
    background: var(--shell-surface-subtle);
    color: var(--primary-color);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    transition: all 0.3s ease;
}

.feature-module:hover .feature-module__icon {
    background: var(--primary-color);
    color: white;
    transform: rotate(-5deg);
}

.feature-module__content h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.feature-module__content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* Plan Progress UI */
.feature-plan-box {
    background: var(--shell-surface-subtle);
    border-radius: 16px;
    padding: 1.25rem;
    margin-top: auto;
}

.feature-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.feature-plan-status {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
}

.feature-plan-stages {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

.feature-progress-rail {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.feature-progress-fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Supporting Tools Section */
.feature-hub__section-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-muted);
}

.feature-grid--supporting {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tool-module {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 18px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s ease;
}

.tool-module:hover {
    background: var(--card-bg);
    border-color: var(--secondary-color);
    transform: translateX(-4px);
}

.tool-module__icon {
    width: 48px;
    height: 48px;
    background: var(--card-bg);
    color: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tool-module__content {
    flex: 1;
}

.tool-module__content h4 {
    margin: 0 0 0.2rem;
    font-weight: 700;
    font-size: 1rem;
}

.tool-module__content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.tool-module__action {
    opacity: 0.3;
    transition: all 0.2s ease;
}

.tool-module:hover .tool-module__action {
    opacity: 1;
    color: var(--secondary-color);
}

/* Responsive */
/* Misbah Feature Plan Review */
.feature-review {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.feature-review__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.feature-review__context {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.feature-review__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.feature-review__title-row h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
}

.feature-review__actions {
    display: flex;
    gap: 1rem;
}

/* Plan Overview Strip */
.review-summary-strip {
    background: var(--shell-surface-subtle);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 3rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.review-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.review-summary-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-summary-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.review-summary-value {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-summary-value i {
    font-size: 1.1rem;
    color: var(--primary-color);
    opacity: 0.7;
}

/* Section Review Cards */
.review-sections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.review-section-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: all 0.3s ease;
}

.review-section-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.review-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.review-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.review-section-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: var(--shell-surface-subtle);
    padding: 1.25rem;
    border-radius: 14px;
}

.review-metric-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.review-metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
}

.review-metric-value {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-color);
}

.review-section-sources {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.source-review-item {
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.9rem;
}

.source-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-inline-end: 0.5rem;
}

/* Generation Method Area */
.generation-config {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 3rem;
}

.generation-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.mode-option-card {
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mode-option-card:hover {
    border-color: var(--primary-color);
    background: var(--shell-surface-subtle);
}

.mode-option-card:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: rgba(88, 81, 161, 0.05);
    box-shadow: 0 8px 20px rgba(88, 81, 161, 0.1);
}

.mode-option-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mode-option-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Difficulty Selection */
.difficulty-selection-area {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--border-color);
}

.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.difficulty-option-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.difficulty-option-card:hover:not(.disabled) {
    border-color: var(--secondary-color);
    transform: translateY(-4px);
}

.difficulty-option-card:has(input[type="radio"]:checked) {
    border-color: var(--secondary-color);
    background: rgba(77, 161, 164, 0.05);
    box-shadow: 0 4px 15px rgba(77, 161, 164, 0.15);
}

.difficulty-option-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-style: dashed;
    background: var(--shell-surface-subtle);
}

.difficulty-title {
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.difficulty-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
}

.difficulty-breakdown {
    font-size: 0.8rem;
    color: var(--text-muted);
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Final Action Area */
.review-final-actions {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
    margin-top: 4rem;
}

.review-final-hint {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 1rem;
}

/* Responsive */
/* Misbah Feature Stages Dashboard */
.feature-stages {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.feature-stages__header {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.feature-stages__context {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
}

.feature-stages__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.feature-stages__title-row h1 {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0;
}

.feature-stages__progress-container {
    background: var(--shell-surface-subtle);
    padding: 1rem 1.5rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.feature-stages__progress-meta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap;
}

.progress-rail {
    flex-grow: 1;
    height: 8px;
    background: var(--border-color);
    border-radius: 99px;
    overflow: hidden;
    position: relative;
}

.progress-rail__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 99px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stage Grid */
.stages-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.stage-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.25s ease;
    position: relative;
    height: 100%;
}

.stage-card--current {
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: 0 8px 25px rgba(88, 81, 161, 0.1);
}

.stage-card--completed {
    border-color: var(--secondary-color);
}

.stage-card--locked {
    background: var(--shell-surface-subtle);
    opacity: 0.8;
}

.stage-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.stage-card__number {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--text-muted);
    line-height: 1;
}

.stage-card--current .stage-card__number {
    color: var(--primary-color);
}

.stage-card--completed .stage-card__number {
    color: var(--secondary-color);
}

.stage-card__status-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 800;
    text-transform: uppercase;
}

.badge--locked { background: var(--border-color); color: var(--text-muted); }
.badge--available { background: var(--shell-surface-subtle); color: var(--primary-color); border: 1px solid var(--primary-color); }
.badge--current { background: var(--warning-color); color: white; }
.badge--completed { background: var(--secondary-color); color: white; }

.stage-card__title {
    font-weight: 800;
    font-size: 1rem;
    margin: 0;
}

.stage-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.stage-card__meta i {
    color: var(--primary-color);
    opacity: 0.7;
}

.stage-card__action {
    margin-top: auto;
}

.stage-card__action .btn {
    width: 100%;
    padding: 0.6rem;
    font-size: 0.85rem;
}

.stage-card__current-marker {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--warning-color);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Responsive Grid Breakpoints */
@media (max-width: 1200px) {
    .stages-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .stages-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
    .feature-stages__header { padding: 1.25rem; }
    .feature-stages__progress-container { flex-direction: column; align-items: stretch; gap: 1rem; }
    .stages-grid { grid-template-columns: 1fr; }
}

.alert-roadmap-success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.2);
    color: var(--success-color);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Misbah Preset Sections Selection */
.feature-preset-selection {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.feature-preset-selection__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.feature-preset-selection__context {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.feature-preset-selection__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.feature-preset-selection__title-row h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
}

.preset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.preset-card {
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.preset-card:hover:not(.is-disabled) {
    border-color: var(--primary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.preset-card:has(input[type="checkbox"]:checked) {
    border-color: var(--secondary-color);
    background: rgba(77, 161, 164, 0.05);
    box-shadow: 0 10px 30px rgba(77, 161, 164, 0.1);
}

.preset-card.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-style: dashed;
    background: var(--shell-surface-subtle);
}

.preset-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.preset-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-color);
}

.preset-card__compatibility {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.compatibility-chip {
    padding: 2px 8px;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--shell-border-subtle);
    border-radius: 6px;
    font-size: 0.75rem;
}

.preset-card__checkbox {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.preset-card:has(input[type="checkbox"]:checked) .preset-card__checkbox {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white;
}

.preset-metrics-strip {
    display: flex;
    justify-content: space-between;
    background: var(--shell-surface-subtle);
    padding: 1rem;
    border-radius: 14px;
    gap: 1rem;
}

.preset-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex: 1;
    text-align: center;
}

.preset-metric__label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.preset-metric__value {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-color);
}

.preset-metric__value--highlight {
    color: var(--secondary-color);
}

.preset-sources-area {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.preset-sources-label {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
}

.preset-source-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.4;
}

.preset-source-item i {
    color: var(--primary-color);
    margin-top: 0.25rem;
    font-size: 0.8rem;
}

.preset-selection-footer {
    position: sticky;
    bottom: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

@media (max-width: 992px) {
    .preset-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .preset-grid { grid-template-columns: 1fr; }
    .preset-selection-footer {
        flex-direction: column;
        padding: 1.5rem;
        bottom: 1rem;
    }
    .preset-selection-footer .btn { width: 100%; }
}

/* Misbah Smart Review Home */
.anki-home {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.anki-home__header {
    margin-bottom: 2.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.anki-home__context {
    font-size: 0.85rem;
    color: var(--secondary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.anki-home__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.anki-home__title-row h1 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.anki-home__title-row h1 i {
    color: var(--secondary-color);
}

/* Anki Hero States */
.anki-hero {
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    border: 1px solid var(--border-color);
}

.anki-hero--due {
    background: linear-gradient(135deg, rgba(77, 161, 164, 0.08) 0%, rgba(88, 81, 161, 0.08) 100%);
    border-color: var(--secondary-color);
}

.anki-hero--active {
    background: linear-gradient(135deg, rgba(88, 81, 161, 0.08) 0%, rgba(77, 161, 164, 0.08) 100%);
    border-color: var(--primary-color);
}

.anki-hero--clear {
    background: var(--shell-surface-subtle);
    border-color: var(--border-color);
}

.anki-hero__content {
    flex: 1;
}

.anki-hero__status-label {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 800;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.status-label--due { background: var(--secondary-color); color: white; }
.status-label--active { background: var(--primary-color); color: white; }
.status-label--clear { background: var(--border-color); color: var(--text-muted); }

.anki-hero__title {
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 0.75rem;
    color: var(--text-color);
}

.anki-hero__desc {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 500px;
    font-weight: 600;
}

/* Metrics Strip */
.anki-metrics-strip {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.anki-metric-card {
    flex: 1;
    min-width: 200px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: all 0.3s ease;
}

.anki-metric-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.anki-metric-card i {
    font-size: 1.5rem;
    width: 48px;
    height: 48px;
    background: var(--shell-surface-subtle);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.anki-metric-info {
    display: flex;
    flex-direction: column;
}

.anki-metric-value {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.anki-metric-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* Dashboard Grid */
.anki-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
}

.anki-section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* History List */
.anki-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.anki-history-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.anki-history-row:hover {
    border-color: var(--secondary-color);
    background: var(--shell-surface-subtle);
}

.anki-history-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.anki-history-date {
    font-weight: 800;
    font-size: 0.95rem;
}

.anki-history-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Side Cards */
.anki-side-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.anki-side-card--tool {
    border-color: var(--primary-color);
    background: linear-gradient(to bottom right, var(--card-bg), var(--shell-surface-subtle));
}

.anki-side-card h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
}

.anki-side-card p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}

.anki-explainer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.anki-explainer-list li {
    font-size: 0.85rem;
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.anki-explainer-list i {
    color: var(--secondary-color);
    margin-top: 0.25rem;
}

@media (max-width: 992px) {
    .anki-dashboard-grid { grid-template-columns: 1fr; }
    .anki-hero { flex-direction: column; text-align: center; padding: 2rem; }
    .anki-hero__desc { margin: 0 auto 1.5rem; }
}

@media (max-width: 576px) {
    .anki-metrics-strip { gap: 1rem; }
    .anki-metric-card { min-width: 100%; }
    .anki-history-row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .anki-history-main { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
}

/* Misbah Smart Review Session Builder */
.anki-create {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.anki-create__header {
    margin-bottom: 3rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.anki-create__context {
    font-size: 0.85rem;
    color: var(--secondary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.anki-create__title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.anki-create__title-row h1 {
    font-size: 2.2rem;
    font-weight: 900;
    margin: 0;
}

/* Builder Layout */
.anki-builder-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2.5rem;
    align-items: start;
}

.anki-builder-section {
    margin-bottom: 3rem;
}

.anki-builder-section__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

.anki-builder-section__title i {
    color: var(--secondary-color);
}

/* Question Count Control */
.anki-count-control {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 500px;
}

.anki-count-control label {
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-muted);
}

.anki-count-control .form-control {
    font-size: 2rem;
    font-weight: 900;
    text-align: center;
    padding: 1rem;
    border-radius: 16px;
    border: 2px solid var(--border-color);
    background: var(--shell-surface-subtle);
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.anki-count-control .form-control:focus {
    border-color: var(--secondary-color);
    background: var(--card-bg);
    box-shadow: 0 0 0 4px rgba(77, 161, 164, 0.1);
}

/* Review Source Blocks */
.review-source-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
}

.review-source-card:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);
}

.review-source-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--shell-border-subtle);
}

.review-source-card__number {
    font-weight: 900;
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-source-card__remove {
    color: var(--danger-color);
    background: rgba(231, 76, 60, 0.05);
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.review-source-card__remove:hover {
    background: var(--danger-color);
    color: white;
}

.review-source-card__body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.review-source-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.review-source-field label {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
}

.btn-add-review-source {
    width: 100%;
    padding: 1.25rem;
    background: var(--shell-surface-subtle);
    border: 2px dashed var(--border-color);
    border-radius: 20px;
    color: var(--text-muted);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-add-review-source:hover {
    background: var(--card-bg);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/* Sticky Session Summary */
.anki-session-summary {
    position: sticky;
    top: 2rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.anki-session-summary__title {
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.anki-summary-metrics {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.anki-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--shell-border-subtle);
}

.anki-summary-item:last-child {
    border-bottom: none;
}

.anki-summary-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
}

.anki-summary-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-color);
}

.anki-summary-value--highlight {
    color: var(--secondary-color);
}

.btn-create-session {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    box-shadow: 0 8px 25px rgba(88, 81, 161, 0.2);
}

@media (max-width: 992px) {
    .anki-builder-layout { grid-template-columns: 1fr; }
    .anki-session-summary { position: static; margin-top: 2rem; }
    .anki-count-control { max-width: 100%; }
}

@media (max-width: 576px) {
    .anki-create__header { text-align: center; }
    .anki-create__title-row { justify-content: center; }
    .review-source-card { padding: 1.25rem; }
    .anki-hero__desc { font-size: 0.9rem; }
}

/* Misbah Subscription Marketplace */
.subscription-catalog {
    padding-bottom: 4rem;
}

.subscription-catalog__header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.subscription-catalog__context {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.subscription-catalog__header h1 {
    font-size: 2.75rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.subscription-catalog__header p {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.subscription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2.5rem;
    justify-content: center;
}

/* Subscription Card */
.sub-offer-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 28px;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.sub-offer-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(88, 81, 161, 0.1);
}

.sub-offer-card--active {
    border-color: var(--secondary-color);
    border-top: 5px solid var(--secondary-color);
    box-shadow: 0 8px 30px rgba(77, 161, 164, 0.08);
}

.sub-offer-card__active-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    border: 1px solid rgba(77, 161, 164, 0.2);
}

.sub-offer-card__identity {
    margin-bottom: 2rem;
}

.sub-offer-card__title {
    font-size: 1.5rem;
    font-weight: 850;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sub-offer-card__title i {
    color: var(--secondary-color);
    font-size: 1.25rem;
}

.sub-offer-card__desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Price & Duration Section */
.sub-offer-card__pricing {
    background: var(--shell-surface-subtle);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sub-offer-card__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.sub-offer-card__price-value {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--text-color);
}

.sub-offer-card__price-currency {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.sub-offer-card__validity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--secondary-color);
}

/* Included Courses Section */
.sub-offer-card__courses {
    margin-bottom: 2.5rem;
    flex-grow: 1;
}

.sub-offer-card__courses-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-offer-card__course-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sub-offer-card__course-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.sub-offer-card__course-item i {
    color: var(--secondary-color);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Action Section */
.sub-offer-card__action {
    margin-top: auto;
}

.sub-offer-card__active-cta {
    width: 100%;
    padding: 1.1rem;
    border-radius: 16px;
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border: 1px solid rgba(77, 161, 164, 0.2);
    cursor: default;
    user-select: none;
}

.btn-sub-details {
    width: 100%;
    padding: 1.1rem;
    border-radius: 16px;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.3s;
}

.btn-sub-details i {
    transition: transform 0.3s;
}

.btn-sub-details:hover i {
    transform: translateX(-4px);
}

[dir="ltr"] .btn-sub-details:hover i {
    transform: translateX(4px);
}

/* Empty State */
.sub-catalog-empty {
    text-align: center;
    padding: 5rem 2rem;
    background: var(--card-bg);
    border: 2px dashed var(--border-color);
    border-radius: 32px;
    grid-column: 1 / -1;
}

.sub-catalog-empty i {
    font-size: 3rem;
    color: var(--border-color);
    margin-bottom: 1.5rem;
}

.sub-catalog-empty p {
    font-size: 1.2rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Misbah Subscription Product Detail */
.subscription-detail {
    padding-bottom: 4rem;
}

.sub-detail-hero {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    margin-bottom: 3rem;
}

.sub-detail-hero__main {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.sub-detail-hero__context {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(88, 81, 161, 0.1);
    color: var(--primary-color);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.sub-detail-hero__title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.sub-detail-hero__desc {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 800px;
}

.sub-detail-hero__sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.sub-detail-hero__price-box {
    margin-bottom: 2rem;
}

.sub-detail-hero__price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.sub-detail-hero__price-value {
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--primary-color);
}

.sub-detail-hero__price-currency {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-muted);
}

.sub-detail-hero__validity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--secondary-color);
    font-weight: 700;
    font-size: 1rem;
}

.sub-detail-hero__validity i {
    font-size: 1.2rem;
}

.sub-detail-hero__cta-box {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sub-detail-hero__active-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
    border: 2px solid rgba(77, 161, 164, 0.2);
    border-radius: 16px;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: default;
}

/* Included Courses Section */
.sub-detail-section {
    margin-bottom: 4rem;
}

.sub-detail-section__header {
    margin-bottom: 2rem;
}

.sub-detail-section__title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-detail-section__title::before {
    content: '';
    display: block;
    width: 6px;
    height: 32px;
    background: var(--secondary-color);
    border-radius: 50px;
}

.sub-detail-courses {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.sub-detail-course-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.sub-detail-course-card:hover {
    border-color: var(--secondary-color);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.sub-detail-course-card__icon {
    width: 48px;
    height: 48px;
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.sub-detail-course-card__title {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1.1rem;
}

/* How it works Timeline */
.sub-detail-timeline {
    position: relative;
    padding-right: 2rem;
}

.sub-detail-timeline::before {
    content: '';
    position: absolute;
    right: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}

.sub-detail-step {
    position: relative;
    padding-bottom: 2.5rem;
    padding-right: 2.5rem;
}

.sub-detail-step::before {
    content: attr(data-step);
    position: absolute;
    right: -12px;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--card-bg);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    z-index: 1;
}

.sub-detail-step--active::before {
    background: var(--primary-color);
    color: #fff;
}

.sub-detail-step__title {
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.sub-detail-step__desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Info Cards Grid */
.sub-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.sub-detail-info-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
}

.sub-detail-info-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.sub-detail-info-card__icon {
    font-size: 1.5rem;
    color: var(--orange-color);
}

.sub-detail-info-card__title {
    font-weight: 800;
    color: var(--text-color);
    font-size: 1.2rem;
}

.sub-detail-info-card__content {
    color: var(--text-muted);
    line-height: 1.7;
}

.sub-detail-info-card__content p {
    margin-bottom: 1rem;
}

.sub-detail-info-card__content ul {
    list-style: none;
    padding: 0;
}

.sub-detail-info-card__content li {
    position: relative;
    padding-right: 1.5rem;
    margin-bottom: 0.75rem;
}

.sub-detail-info-card__content li::before {
    content: '•';
    position: absolute;
    right: 0;
    color: var(--secondary-color);
    font-weight: 800;
}

@media (max-width: 1100px) {
    .sub-detail-hero {
        grid-template-columns: 1fr;
    }
    .sub-detail-hero__sidebar {
        position: static;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .sub-detail-hero__main {
        padding: 2rem;
    }
    .sub-detail-hero__title {
        font-size: 2rem;
    }
    .sub-detail-hero__price-value {
        font-size: 2.75rem;
    }
}

/* --- Misbah Focus Workspace (Pomodoro) --- */
.pomodoro-workspace {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.pomodoro-hero {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 32px;
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.pomodoro-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

.timer-ring-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timer-progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.timer-progress-bg {
    fill: none;
    stroke: var(--shell-surface-subtle);
    stroke-width: 8;
}

.timer-progress-fill {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

/* Timer Mode Colors */
.pomodoro-workspace[data-mode="FOCUS"] .timer-progress-fill { stroke: var(--primary-color); }
.pomodoro-workspace[data-mode="BREAK"] .timer-progress-fill { stroke: var(--secondary-color); }
.pomodoro-workspace[data-mode="PAUSED"] .timer-progress-fill { stroke: var(--orange-color); }

.timer-typography {
    font-size: 6rem;
    font-weight: 950;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    z-index: 2;
}

.timer-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: var(--shell-surface-subtle);
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.pomodoro-workspace[data-mode="FOCUS"] .timer-status-badge { color: var(--primary-color); border-color: rgba(88, 81, 161, 0.2); background: rgba(88, 81, 161, 0.05); }
.pomodoro-workspace[data-mode="BREAK"] .timer-status-badge { color: var(--secondary-color); border-color: rgba(77, 161, 164, 0.2); background: rgba(77, 161, 164, 0.05); }
.pomodoro-workspace[data-mode="PAUSED"] .timer-status-badge { color: var(--orange-color); border-color: rgba(249, 179, 71, 0.2); background: rgba(249, 179, 71, 0.05); }

.timer-main-actions {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
}

.btn-pomodoro-main {
    padding: 1.25rem 3rem;
    font-size: 1.25rem;
    font-weight: 900;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 8px 25px rgba(88, 81, 161, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pomodoro-main:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(88, 81, 161, 0.3);
}

.btn-pomodoro-secondary {
    padding: 1rem 2rem;
    font-weight: 800;
    border-radius: 16px;
    font-size: 1rem;
}

/* Workspace Grid */
.workspace-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.workspace-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.workspace-card__title {
    font-size: 1.25rem;
    font-weight: 850;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

.workspace-card__title i {
    color: var(--primary-color);
}

/* Tasks Workspace */
.task-composer {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.task-composer input {
    flex: 1;
    background: var(--shell-surface-subtle);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.task-composer input:focus {
    border-color: var(--primary-color);
    background: var(--card-bg);
    outline: none;
    box-shadow: 0 0 0 4px rgba(88, 81, 161, 0.1);
}

.task-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.task-item-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.2s ease;
}

.task-item-row:hover {
    background: var(--card-bg);
    border-color: var(--primary-color);
    transform: translateX(-4px);
}

.task-item-row.completed {
    opacity: 0.6;
}

.task-item-row.completed .task-text {
    text-decoration: line-through;
}

.task-checkbox-wrapper {
    width: 24px;
    height: 24px;
    position: relative;
    cursor: pointer;
}

.task-checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.task-checkbox-custom {
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    transition: all 0.2s;
}

.task-checkbox-wrapper input:checked ~ .task-checkbox-custom {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

.task-checkbox-custom::after {
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    display: none;
    color: white;
    font-size: 0.7rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.task-checkbox-wrapper input:checked ~ .task-checkbox-custom::after {
    display: block;
}

.task-text {
    flex: 1;
    font-weight: 700;
    color: var(--text-color);
}

.btn-task-delete {
    color: var(--danger-color);
    opacity: 0.3;
    transition: all 0.2s;
    background: transparent;
    border: none;
    padding: 8px;
}

.task-item-row:hover .btn-task-delete {
    opacity: 1;
}

.task-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.task-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    opacity: 0.2;
}

/* Settings & Audio Desk */
.session-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.settings-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-input-group label {
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.duration-picker {
    display: flex;
    align-items: center;
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
}

.duration-picker input {
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 900;
    font-size: 1.25rem;
    padding: 0.75rem;
    color: var(--text-color);
    width: 60px;
}

.duration-picker input:focus {
    outline: none;
}

/* Custom Styled Audio Desk */
.audio-desk {
    background: var(--shell-surface-subtle);
    border-radius: 18px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.audio-desk__select {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.audio-desk__volume {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.audio-desk__volume i {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.volume-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--secondary-color);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Stats Footer */
.pomodoro-stats-section {
    margin-top: 4rem;
}

.stats-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-card__icon {
    width: 54px;
    height: 54px;
    background: var(--shell-surface-subtle);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.stat-card__info {
    display: flex;
    flex-direction: column;
}

.stat-card__value {
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-card__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}

.activity-chart-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
}

.activity-chart__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
}

.activity-chart__header h4 {
    margin: 0;
    font-weight: 850;
    font-size: 1.2rem;
}

.chart-canvas-mock {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: 2rem;
    padding: 0 1rem;
    border-bottom: 2px solid var(--shell-surface-subtle);
}

.chart-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.chart-bar-fill {
    width: 32px;
    background: linear-gradient(to top, var(--primary-color), var(--secondary-color));
    border-radius: 8px 8px 0 0;
    min-height: 4px;
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-day-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: -2.5rem;
}

/* Mobile */
@media (max-width: 992px) {
    .workspace-grid {
        grid-template-columns: 1fr;
    }
    .timer-typography {
        font-size: 4.5rem;
    }
    .timer-ring-container {
        width: 220px;
        height: 220px;
    }
}

@media (max-width: 576px) {
    .pomodoro-hero {
        padding: 3rem 1rem;
    }
    .timer-main-actions {
        flex-direction: column;
    }
    .btn-pomodoro-main {
        width: 100%;
    }
    .stats-overview-grid {
        grid-template-columns: 1fr;
    }
    .chart-canvas-mock {
        gap: 0.75rem;
    }
    .chart-bar-fill {
        width: 16px;
    }
}

/* --- Misbah Leaderboard Arena --- */
.leaderboard-arena {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.lb-hero {
    text-align: center;
    padding: 4rem 1rem 3rem;
    margin-bottom: 2.5rem;
    background: linear-gradient(135deg, rgba(88, 81, 161, 0.08) 0%, rgba(77, 161, 164, 0.08) 100%);
    border-radius: 40px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(88, 81, 161, 0.05);
}

.lb-hero__icon {
    font-size: 3rem;
    color: #F9B347;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 15px rgba(249, 179, 71, 0.4));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.lb-hero__title {
    font-size: 3rem;
    font-weight: 950;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    letter-spacing: -1px;
}

.lb-hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 600;
}

.lb-filters-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: center;
}

.lb-filter-group {
    display: flex;
    background: var(--shell-surface-subtle);
    padding: 0.4rem;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    gap: 0.25rem;
}

.lb-filter-btn {
    padding: 0.6rem 1.5rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--text-muted);
    border: none;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.lb-filter-btn.active {
    background: var(--card-bg);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lb-filter-btn:hover:not(.active) {
    color: var(--text-color);
    background: rgba(0, 0, 0, 0.03);
}

/* Podium / Top 3 */
.lb-podium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: flex-end;
}

.lb-podium-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.lb-podium-card:hover {
    transform: translateY(-8px);
}

.lb-podium-card--1 {
    order: 2;
    padding-top: 3rem;
    border-color: #F9B347;
    background: linear-gradient(to bottom, var(--card-bg), rgba(249, 179, 71, 0.03));
}

.lb-podium-card--2 {
    order: 1;
    border-color: #A0AEC0;
}

.lb-podium-card--3 {
    order: 3;
    border-color: #CD7F32;
}

.lb-podium-rank {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lb-podium-card--1 .lb-podium-rank { background: #F9B347; }
.lb-podium-card--2 .lb-podium-rank { background: #A0AEC0; }
.lb-podium-card--3 .lb-podium-rank { background: #CD7F32; }

.lb-podium-avatar {
    width: 80px;
    height: 80px;
    background: var(--shell-surface-subtle);
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary-color);
    border: 4px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--border-color);
}

.lb-podium-card--1 .lb-podium-avatar { width: 100px; height: 100px; font-size: 2.5rem; }

.lb-podium-name {
    font-weight: 850;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-podium-xp {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    background: var(--shell-surface-subtle);
    border-radius: 50px;
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--secondary-color);
}

/* Main List */
.lb-list {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
    gap: 1.5rem;
}

.lb-row:last-child {
    border-bottom: none;
}

.lb-row:hover {
    background: var(--shell-surface-subtle);
}

.lb-row.me {
    background: rgba(88, 81, 161, 0.04);
}

.lb-rank-badge {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    color: var(--text-muted);
    background: var(--shell-surface-subtle);
    border-radius: 10px;
}

.lb-row.me .lb-rank-badge {
    background: var(--primary-color);
    color: white;
}

.lb-user-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.lb-user-avatar-small {
    width: 40px;
    height: 40px;
    background: var(--shell-surface-subtle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    color: var(--primary-color);
}

.lb-user-name {
    font-weight: 750;
    color: var(--text-color);
}

.lb-xp-value {
    font-weight: 900;
    color: var(--secondary-color);
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(77, 161, 164, 0.08);
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    border: 1px solid rgba(77, 161, 164, 0.15);
}

.lb-xp-value i {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 5px var(--secondary-color));
}

.lb-xp-value small {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-right: 0.2rem;
}

/* User Summary Card */
.lb-user-summary {
    margin-bottom: 2rem;
    background: var(--primary-color);
    color: white;
    border-radius: 24px;
    padding: 1.5rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(88, 81, 161, 0.2);
}

.lb-user-summary__info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.lb-user-summary__rank {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 950;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.lb-user-summary__rank.is-first {
    background: #F9B347; /* Gold/Yellow */
    color: white;
    border-color: #FFFFFF;
    box-shadow: 0 0 20px rgba(249, 179, 71, 0.4);
}

.lb-user-summary__text {
    display: flex;
    flex-direction: column;
}

.lb-user-summary__label {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 700;
}

.lb-user-summary__name {
    font-size: 1.25rem;
    font-weight: 850;
}

.lb-user-summary__xp {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: 950;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.lb-user-summary__xp i {
    color: #F9B347;
    filter: drop-shadow(0 0 8px #F9B347);
}

.lb-user-summary__xp small {
    font-size: 0.8rem;
    opacity: 0.9;
    font-weight: 800;
}

/* Empty State */
.lb-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.lb-empty-state i {
    font-size: 3rem;
    color: var(--text-muted);
    opacity: 0.3;
    margin-bottom: 1.5rem;
}

.lb-empty-state p {
    font-weight: 700;
    color: var(--text-muted);
}

/* Course Select */
.lb-course-picker {
    margin-top: 1.5rem;
    width: 100%;
    max-width: 400px;
}

.lb-course-select {
    width: 100%;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 0.75rem 1.25rem;
    font-weight: 750;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.2s;
}

.lb-course-select:focus {
    border-color: var(--primary-color);
    outline: none;
}

@media (max-width: 768px) {
    .lb-podium {
        grid-template-columns: 1fr;
        gap: 1rem;
        align-items: stretch;
    }
    .lb-podium-card {
        order: initial !important;
        padding-top: 2rem !important;
    }
    .lb-podium-rank {
        left: 24px;
        transform: none;
    }
    .lb-podium-card {
        display: flex;
        align-items: center;
        text-align: right;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .lb-podium-avatar {
        margin: 0;
        width: 60px !important;
        height: 60px !important;
        font-size: 1.5rem !important;
    }
    .lb-podium-info {
        flex: 1;
    }
    .lb-user-summary {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    .lb-user-summary__info {
        flex-direction: column;
        gap: 0.5rem;
    }
    .lb-row {
        padding: 1rem;
        gap: 1rem;
    }
}

/* --- Misbah Coordination Calculator --- */
.coordination-workspace {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1rem 4rem;
}

.coord-hero {
    text-align: center;
    padding: 4rem 1rem 3rem;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, rgba(77, 161, 164, 0.08) 0%, rgba(88, 81, 161, 0.08) 100%);
    border-radius: 40px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.coord-hero__icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 0 15px rgba(77, 161, 164, 0.3));
}

.coord-hero__title {
    font-size: 2.75rem;
    font-weight: 950;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.coord-hero__subtitle {
    font-size: 1.15rem;
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.coord-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 2.5rem;
    align-items: start;
}

.coord-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.coord-card__title {
    font-size: 1.25rem;
    font-weight: 850;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.coord-card__title i {
    color: var(--primary-color);
}

/* Form Styling */
.coord-form-group {
    margin-bottom: 1.75rem;
}

.coord-label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 750;
    color: var(--text-color);
}

.coord-input {
    width: 100%;
    background: var(--shell-surface-subtle);
    border: 2px solid var(--border-color);
    border-radius: 14px;
    padding: 0.85rem 1.25rem;
    font-weight: 750;
    color: var(--text-color);
    transition: all 0.2s;
}

.coord-input:focus {
    border-color: var(--primary-color);
    outline: none;
    background: var(--card-bg);
}

/* Result Visualization */
.coord-result-display {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.coord-main-score {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 20px;
    color: white;
    box-shadow: 0 10px 25px rgba(88, 81, 161, 0.25);
}

.coord-main-score__label {
    font-size: 0.95rem;
    opacity: 0.9;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: block;
}

.coord-main-score__value {
    font-size: 3rem;
    font-weight: 950;
}

.coord-main-score__total {
    font-size: 1.25rem;
    opacity: 0.8;
}

.coord-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.coord-stat-box {
    background: var(--shell-surface-subtle);
    padding: 1.25rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.coord-stat-box__label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.coord-stat-box__value {
    font-size: 1.25rem;
    font-weight: 850;
    color: var(--text-color);
}

/* College Grid */
.colleges-section {
    margin-top: 4rem;
}

.colleges-section__header {
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.college-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.college-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 1.75rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.college-card:hover {
    transform: translateY(-5px);
    border-color: var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.college-card__name {
    font-size: 1.15rem;
    font-weight: 850;
    color: var(--text-color);
    line-height: 1.4;
}

.college-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px dashed var(--border-color);
}

.college-card__cutoff-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 700;
}

.college-card__cutoff-value {
    font-weight: 900;
    color: var(--secondary-color);
}

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

/* Misbah Student Membership Dashboard */
.my-subscriptions-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Identity Header */
.membership-identity {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.membership-identity::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(88, 81, 161, 0.03));
    pointer-events: none;
}

.membership-avatar {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(88, 81, 161, 0.2);
    flex-shrink: 0;
}

.membership-info {
    flex: 1;
}

.membership-name {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.membership-join-date {
    font-size: 0.95rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.membership-gamification {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
}

.mg-chip {
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mg-chip--xp {
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
}

.mg-chip--streak {
    background: rgba(249, 179, 71, 0.1);
    color: var(--accent-color);
}

/* Metrics Strip */
.membership-metrics {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.m-metric {
    display: flex;
    flex-direction: column;
}

.m-metric__value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-color);
}

.m-metric__label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Sections */
.dashboard-section {
    margin-bottom: 3.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title i {
    color: var(--primary-color);
}

/* Active Cards */
.active-subscriptions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 1.5rem;
}

.subscription-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.subscription-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

.subscription-card--active {
    border-top: 4px solid var(--secondary-color);
}

.sub-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.sub-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    color: var(--text-color);
}

.sub-status-badge {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
}

.sub-status-badge--active {
    background: rgba(77, 161, 164, 0.1);
    color: var(--secondary-color);
}

.sub-status-badge--pending {
    background: rgba(249, 179, 71, 0.1);
    color: var(--accent-color);
}

.sub-validity {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Courses Row */
.sub-courses {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sub-section-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 600;
}

.course-row i {
    color: var(--secondary-color);
    font-size: 0.8rem;
}

/* Timeline/Dates */
.sub-timeline {
    background: var(--shell-surface-subtle);
    border-radius: 12px;
    padding: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ti-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.ti-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-color);
}

.remaining-chip {
    grid-column: 1 / -1;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Controls / Freeze */
.sub-controls {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
}

.freeze-control {
    background: var(--shell-surface-subtle);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem;
}

.freeze-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.freeze-title {
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.freeze-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.fs-item {
    font-size: 0.85rem;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
}

.fs-item span:last-child {
    font-weight: 700;
    color: var(--text-color);
}

.freeze-badge {
    background: #e8f4fd;
    color: #0d47a1;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.freeze-details {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.freeze-details p { margin: 2px 0; }

/* History Table */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: 2fr 1.5fr 2fr 1fr;
    align-items: center;
    gap: 1.5rem;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.history-row:hover {
    opacity: 1;
}

.hr-title {
    font-weight: 700;
    color: var(--text-color);
}

.hr-status {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--shell-surface-subtle);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    width: fit-content;
}

.hr-dates {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.hr-courses {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pending Section */
.pending-subscription {
    background: rgba(249, 179, 71, 0.03);
    border: 1px solid rgba(249, 179, 71, 0.2);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pending-alert {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.pending-alert i {
    color: var(--accent-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

.pa-content h4 {
    margin: 0 0 0.25rem 0;
    font-weight: 800;
}

.pa-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pending-details {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1rem;
    font-size: 0.85rem;
}

.pd-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

/* Responsive */
@media (max-width: 992px) {
    .active-subscriptions-grid {
        grid-template-columns: 1fr;
    }
    .history-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .hr-courses { display: none; }
}

@media (max-width: 768px) {
    .membership-identity {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
    }
    .membership-metrics {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.5rem;
    }
}

[data-theme="dark"] .freeze-badge {
    background: rgba(13, 71, 161, 0.2);
    color: #90caf9;
}

/* Misbah Exam Center */
.exam-center {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

.exam-center-header {
    margin-bottom: 2.5rem;
}

.ec-context {
    font-size: 0.9rem;
    color: var(--primary-color);
    font-weight: 700;
    display: block;
    margin-bottom: 0.25rem;
}

.ec-title {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    color: var(--text-color);
}

.ec-subtitle {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
}

.exam-section {
    margin-bottom: 3.5rem;
}

.exam-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--shell-border-subtle);
    padding-bottom: 0.75rem;
}

.es-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-color);
}

.es-title i {
    color: var(--secondary-color);
}

.es-count {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--shell-surface-subtle);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
}

/* Filter Bar */
.exam-filter-bar {
    background: var(--shell-surface-subtle);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--shell-border-subtle);
}

.ef-form {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.ef-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 200px;
}

.ef-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-inline-start: 0.25rem;
}

.ef-select {
    width: 100%;
    height: 48px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0 1rem;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
    background-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

[dir="rtl"] .ef-select {
    background-position: left 1rem center;
}

.ef-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(88, 81, 161, 0.1);
}

.ef-actions {
    display: flex;
    gap: 0.75rem;
}

/* Exam Rows */
.exam-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exam-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    transition: all 0.2s ease;
}

.exam-row:hover {
    border-color: var(--secondary-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transform: translateX(-4px);
}

[dir="ltr"] .exam-row:hover {
    transform: translateX(4px);
}

.er-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.er-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-color);
    margin: 0;
}

.er-meta-group {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.er-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
}

.er-meta-item i {
    color: var(--secondary-color);
    font-size: 0.9rem;
}

.er-meta-item.course-tag {
    color: var(--primary-color);
}

.er-action {
    flex-shrink: 0;
}

/* Attempt Rows */
.attempt-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr 1fr 1.2fr 1fr;
    align-items: center;
    gap: 1.5rem;
    transition: background 0.2s ease;
}

.attempt-row:hover {
    background: var(--shell-surface-subtle);
}

.ar-title {
    font-weight: 700;
    color: var(--text-color);
    font-size: 1rem;
}

.ar-course {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ar-status-badge {
    padding: 0.35rem 0.75rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    width: fit-content;
}

.ar-status--in_progress { background: rgba(249, 179, 71, 0.1); color: var(--accent-color); }
.ar-status--submitted { background: rgba(77, 161, 164, 0.1); color: var(--secondary-color); }
.ar-status--review { background: rgba(88, 81, 161, 0.1); color: var(--primary-color); }
.ar-status--other { background: var(--shell-surface-subtle); color: var(--text-muted); }

.ar-score {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--secondary-color);
    text-align: center;
}

.ar-score.no-score {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 600;
}

.ar-date {
    font-size: 0.88rem;
    color: var(--text-muted);
    font-weight: 600;
}

.ar-action {
    display: flex;
    justify-content: flex-end;
}

/* Empty State */
.exam-empty-state {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--shell-surface-subtle);
    border-radius: 20px;
    border: 1px dashed var(--border-color);
}

.ees-icon {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.ees-text {
    color: var(--text-muted);
    font-weight: 600;
    margin: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .attempt-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    }
    .ar-course { display: none; }
}

@media (max-width: 900px) {
    .exam-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
    }
    .er-action .btn {
        width: 100%;
    }
    .attempt-row {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
    .ar-date { display: none; }
}

@media (max-width: 600px) {
    .ef-group {
        min-width: 100%;
    }
    .attempt-row {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        padding: 1.25rem;
    }
    .ar-title { grid-column: 1 / -1; }
    .ar-score { text-align: right; }
    .ar-action { grid-column: 1 / -1; }
    .ar-action .btn { width: 100%; }
}