/* ============================================================
   IT Training Portal — Custom Styles
   Author: Anas bin Mahfodh
   ============================================================ */

/* Base */
body {
    background-color: #030712;
    color: #f3f4f6;
    overflow-x: hidden;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #030712; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; border: 2px solid #030712; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Typography */
h1, h2, h3, h4, h5, .font-display { font-family: 'Noto Kufi Arabic', sans-serif; }

/* Noise Overlay */
.noise-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 50; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Glass Cards */
.glass-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 1.5rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative; overflow: hidden;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    transform: translateZ(0);
    cursor: pointer;
}
.glass-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.1), transparent);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.glass-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.15);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}
.glass-card:hover::before { opacity: 1; }

.icon-wrapper {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; transition: transform 0.4s ease;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}
.glass-card:hover .icon-wrapper { transform: scale(1.1) rotate(-5deg); }

/* Read Badge */
.read-check {
    position: absolute; top: 0.75rem; left: 0.75rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}
.read-check.hidden { display: none; }

/* Human Badge */
.human-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.375rem 1rem; border-radius: 9999px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.75rem; color: #6b7280; font-family: monospace;
}
.live-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #10b981;
    animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.8); }
}

/* Stagger Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Search */
#search-input { transition: border-color 0.3s, box-shadow 0.3s; }
#search-input:focus { box-shadow: 0 0 0 1px rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
#search-input::placeholder { color: #374151; }

/* Reading Tracker */
#tracker-bar { width: 0%; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }

/* Progress Hub */
.progress-shell {
    background:
        radial-gradient(circle at top right, rgba(16,185,129,0.1), transparent 28%),
        radial-gradient(circle at bottom left, rgba(59,130,246,0.1), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}
.progress-stats-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.progress-stat-card,
.progress-rail-card {
    border-radius: 1.25rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(8,15,28,0.72);
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}
.progress-stat-card {
    padding: 1.15rem 1.2rem;
}
.progress-stat-label {
    font-size: 0.74rem;
    color: #93c5fd;
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.progress-stat-value {
    color: white;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.55rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.progress-stat-note {
    color: #9ca3af;
    font-size: 0.82rem;
    line-height: 1.8;
}
.progress-rails-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.progress-rail-card {
    padding: 1rem 1.1rem;
}
.progress-rail-card-accent {
    background:
        linear-gradient(135deg, rgba(59,130,246,0.14), rgba(16,185,129,0.08)),
        rgba(8,15,28,0.72);
}
.progress-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: #e5e7eb;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.progress-rail-track {
    height: 0.55rem;
    border-radius: 9999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    margin-top: 0.95rem;
}
.progress-rail-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(59,130,246,0.95), rgba(16,185,129,0.92));
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-next-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    padding: 0.3rem 0.65rem;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: #dbeafe;
    font-size: 0.7rem;
    font-weight: 700;
}
.progress-next-text {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.9;
    margin-top: 0.9rem;
}

.completion-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.72rem;
    border-radius: 9999px;
    background: rgba(16,185,129,0.14);
    border: 1px solid rgba(16,185,129,0.26);
    color: #6ee7b7;
    font-size: 0.68rem;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    z-index: 2;
}
.completion-badge.hidden { display: none; }
.progress-complete {
    border-color: rgba(16,185,129,0.2) !important;
    box-shadow: 0 18px 42px rgba(16,185,129,0.08), 0 8px 32px rgba(0,0,0,0.16);
}
.completion-panel {
    position: relative;
    overflow: hidden;
}
.completion-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left, rgba(16,185,129,0.06), transparent 55%);
    pointer-events: none;
}
.completion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.progress-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(59,130,246,0.2);
    background: rgba(59,130,246,0.14);
    color: #eff6ff;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    cursor: pointer;
    transition: all 0.25s ease;
}
.progress-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,0.35);
    background: rgba(59,130,246,0.22);
}
.progress-toggle.is-done {
    background: rgba(16,185,129,0.16);
    border-color: rgba(16,185,129,0.28);
    color: #d1fae5;
}
.progress-toggle.progress-toggle-secondary {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    color: #d1d5db;
}
.progress-toggle.progress-toggle-secondary:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
}
.completion-note {
    margin-top: 0.95rem;
    color: #9ca3af;
    font-size: 0.84rem;
    line-height: 1.85;
}

.selector-shell {
    background:
        radial-gradient(circle at top left, rgba(245,158,11,0.1), transparent 28%),
        radial-gradient(circle at bottom right, rgba(59,130,246,0.1), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
}
.selector-note {
    max-width: 24rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #cbd5e1;
    font-size: 0.84rem;
    line-height: 1.9;
}
.selector-card {
    position: relative;
    border-radius: 1.4rem;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.016)),
        rgba(8,15,28,0.74);
    padding: 1.4rem;
    box-shadow: 0 14px 34px rgba(0,0,0,0.18);
    overflow: hidden;
}
.selector-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0.05), transparent 52%);
    pointer-events: none;
}
.selector-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #dbeafe;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.selector-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    font-size: 1.15rem;
}
.selector-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Guided Homepage Sections */
.section-kicker {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem; border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: #6b7280; font-size: 0.72rem; font-family: monospace;
    letter-spacing: 0.18em;
}
.guide-shell {
    position: relative; overflow: hidden; border-radius: 2rem;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.12), transparent 32%),
        radial-gradient(circle at bottom left, rgba(20,184,166,0.08), transparent 35%),
        linear-gradient(135deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.guide-shell::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.05), transparent 45%);
    pointer-events: none;
}
.journey-card {
    position: relative; overflow: hidden;
    border-radius: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
        rgba(8,15,28,0.72);
    padding: 1.5rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.journey-card::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top left, rgba(255,255,255,0.06), transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.journey-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 20px 44px rgba(0,0,0,0.22);
}
.journey-card:hover::before { opacity: 1; }
.step-badge {
    width: 2rem; height: 2rem; border-radius: 9999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(245,158,11,0.14);
    border: 1px solid rgba(245,158,11,0.25);
    color: #fbbf24; font-weight: 700; font-size: 0.9rem;
    margin-bottom: 1rem;
}
.path-tag {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.7rem; border-radius: 9999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.72rem; font-weight: 700;
}
.mini-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
    padding: 0.65rem 0.95rem; border-radius: 0.9rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #d1d5db; font-size: 0.78rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
    cursor: pointer; transition: all 0.25s ease;
}
.mini-action:hover {
    background: rgba(255,255,255,0.08);
    color: white;
    border-color: rgba(255,255,255,0.16);
}
.mini-action-primary {
    background: linear-gradient(135deg, rgba(59,130,246,0.18), rgba(20,184,166,0.12));
    border-color: rgba(96,165,250,0.2);
    color: #eff6ff;
}
.mini-action-primary:hover {
    background: linear-gradient(135deg, rgba(59,130,246,0.28), rgba(20,184,166,0.18));
    border-color: rgba(147,197,253,0.35);
}

@media (max-width: 767px) {
    .progress-stat-value {
        font-size: 1.65rem;
    }
    .progress-rail-card {
        padding: 0.95rem 1rem;
    }
    .completion-actions,
    .progress-toggle {
        width: 100%;
    }
}

/* ============================================================
   MODAL READER
   ============================================================ */
#reader-modal {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
    opacity: 0; visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#reader-backdrop {
    position: absolute; inset: 0;
    background: rgba(3,7,18,0.75);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
#reader-content-box {
    position: relative; width: 100%; max-width: 860px; max-height: 92dvh;
    background: #0B1120; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 1.5rem; box-shadow: 0 25px 60px -12px rgba(0,0,0,0.6);
    transform: scale(0.95) translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; overflow: hidden;
}
.modal-active #reader-modal  { opacity: 1; visibility: visible; }
.modal-active #reader-content-box { transform: scale(1) translateY(0); }

/* Progress Bar */
#reading-progress {
    height: 3px;
    background: linear-gradient(90deg, var(--theme-color, #3b82f6), transparent);
    width: 0%; position: absolute; top: 0; left: 0; z-index: 10;
    transition: width 0.1s ease;
}

/* Reader Prose */
.prose-premium {
    padding: 1.5rem;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
@media (min-width: 768px) { .prose-premium { padding: 2.5rem; } }
.prose-premium::-webkit-scrollbar { width: 6px; }
.prose-premium::-webkit-scrollbar-track { background: transparent; }
.prose-premium::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }

.prose-premium h3 {
    font-family: 'Noto Kufi Arabic', sans-serif; font-size: 2rem; font-weight: 800;
    color: white; margin-bottom: 2rem; letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 1rem;
}
.prose-premium h3 i { color: var(--theme-color, #3b82f6); padding: 0.5rem; background: rgba(255,255,255,0.03); border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.05); }
.prose-premium h4 { font-family: 'Noto Kufi Arabic', sans-serif; font-size: 1.2rem; font-weight: 700; color: #f3f4f6; margin-top: 2.5rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 0.5rem; }
.prose-premium p  { margin-bottom: 1.25rem; line-height: 2; color: #9ca3af; font-size: 1.05rem; }
.prose-premium ul { list-style: none; padding: 0; margin-bottom: 1.5rem; }
.prose-premium li { position: relative; padding-right: 1.5rem; margin-bottom: 0.75rem; color: #9ca3af; line-height: 1.8; }
.prose-premium li::before { content: ''; position: absolute; right: 0; top: 0.65rem; width: 6px; height: 6px; border-radius: 50%; background: var(--theme-color, #3b82f6); }
.prose-premium strong { color: #e5e7eb; font-weight: 600; }
.prose-premium ol { padding-right: 1.5rem; margin-bottom: 1.5rem; counter-reset: ol-counter; list-style: none; }
.prose-premium ol li { counter-increment: ol-counter; padding-right: 0.5rem; }
.prose-premium ol li::before { content: counter(ol-counter) '.'; position: absolute; right: -1.5rem; color: var(--theme-color, #3b82f6); font-weight: 700; font-size: 0.9rem; top: 0.1rem; }

.insight-box {
    padding: 1.25rem 1.5rem; border-radius: 12px; margin: 2rem 0;
    background: linear-gradient(to left, rgba(255,255,255,0.02), transparent);
    border: 1px solid rgba(255,255,255,0.05);
    border-right: 4px solid var(--theme-color, #3b82f6);
}
.insight-box p { color: #d1d5db; margin: 0; font-size: 0.95rem; }

.overview-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin: 1.75rem 0 1.25rem;
}
.overview-card,
.action-section,
.project-card {
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.018));
    box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.overview-card {
    padding: 1rem 1.1rem;
}
.overview-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #93c5fd;
    font-weight: 700;
    margin-bottom: 0.6rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.overview-value {
    color: #d1d5db;
    line-height: 1.9;
    font-size: 0.92rem;
}
.action-section,
.project-card {
    margin-top: 1.25rem;
    padding: 1.1rem 1.2rem;
}
.action-section p,
.action-section li,
.project-card p,
.project-card li {
    font-size: 0.95rem;
}
.roadmap-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    margin-top: 1rem;
}
.rubric-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: 1rem;
}
.roadmap-phase {
    position: relative;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(9,15,28,0.72);
}
.rubric-item {
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(9,15,28,0.72);
}
.roadmap-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
    background: rgba(59,130,246,0.14);
    border: 1px solid rgba(59,130,246,0.2);
    color: #bfdbfe;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.roadmap-focus {
    font-size: 1rem;
    color: white;
    font-weight: 700;
    margin-bottom: 0.7rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.rubric-title {
    font-size: 0.92rem;
    color: white;
    font-weight: 700;
    margin-bottom: 0.55rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
}
.roadmap-phase ul,
.action-section ul,
.project-card ul {
    margin-bottom: 0;
}
.rubric-item p {
    margin: 0;
    color: #cbd5e1;
    line-height: 1.9;
    font-size: 0.88rem;
}
.project-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    font-weight: 700;
    font-family: 'Noto Kufi Arabic', sans-serif;
    margin-bottom: 0.8rem;
}
.next-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}
.next-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #dbeafe;
    font-size: 0.8rem;
    font-family: 'Noto Kufi Arabic', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}
.next-link:hover {
    background: rgba(59,130,246,0.12);
    border-color: rgba(96,165,250,0.22);
    color: white;
}

/* Font Size Variants */
#reader-article.font-sm p, #reader-article.font-sm li { font-size: 0.88rem !important; line-height: 1.9 !important; }
#reader-article.font-lg p, #reader-article.font-lg li { font-size: 1.2rem  !important; line-height: 2.3 !important; }

/* Font button active state */
.font-btn-active { color: white !important; background: rgba(255,255,255,0.12) !important; }

/* ============================================================
   TABLE OF CONTENTS
   ============================================================ */
#toc-panel {
    position: absolute; top: 4rem; right: 0; width: 220px;
    background: #0d1829; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 1rem; padding: 1rem; z-index: 20;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    transform: translateX(8px) scale(0.97);
    opacity: 0; visibility: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
#toc-panel.toc-open { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }
#toc-panel h5 { font-family: 'Noto Kufi Arabic', sans-serif; font-size: 0.7rem; color: #4b5563; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; }
.toc-item { display: block; font-size: 0.78rem; color: #6b7280; padding: 0.35rem 0.5rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s; border-right: 2px solid transparent; text-align: right; width: 100%; background: none; border-top: none; border-left: none; border-bottom: none; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.toc-item:hover { color: white; background: rgba(255,255,255,0.05); border-right-color: var(--theme-color, #3b82f6); }

/* ============================================================
   PERSONAL NOTES
   ============================================================ */
.notes-section {
    margin-top: 2.5rem; padding-top: 2rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.notes-section label { display: block; font-size: 0.8rem; color: #4b5563; font-weight: 600; margin-bottom: 0.4rem; font-family: 'Noto Kufi Arabic', sans-serif; }
.notes-disclosure { font-size: 0.72rem; color: #374151; margin-bottom: 0.5rem; padding: 0.4rem 0.7rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 0.5rem; direction: rtl; }
.notes-textarea {
    width: 100%; min-height: 100px; background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06); border-radius: 0.75rem;
    padding: 0.75rem 1rem; color: #d1d5db; font-size: 0.9rem;
    font-family: 'IBM Plex Sans Arabic', sans-serif; line-height: 1.8;
    resize: vertical; transition: border-color 0.3s;
    direction: rtl;
}
.notes-textarea:focus { outline: none; border-color: rgba(255,255,255,0.15); }
.notes-textarea::placeholder { color: #374151; }
.notes-saved-indicator { font-size: 0.72rem; color: #10b981; opacity: 0; transition: opacity 0.3s; margin-top: 0.35rem; display: inline-block; }

/* ============================================================
   FLASH QUIZ
   ============================================================ */
.quiz-section {
    margin-top: 2rem; padding: 1.5rem;
    background: linear-gradient(135deg, rgba(99,102,241,0.04), rgba(139,92,246,0.02));
    border: 1px solid rgba(99,102,241,0.12); border-radius: 1rem;
}
.quiz-section h5 { font-family: 'Noto Kufi Arabic', sans-serif; font-size: 0.9rem; font-weight: 700; color: #a5b4fc; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.quiz-question { font-size: 0.95rem; color: #e5e7eb; margin-bottom: 1rem; line-height: 1.8; }
.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.quiz-option {
    padding: 0.6rem 1rem; border-radius: 0.6rem; font-size: 0.85rem; text-align: right;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    color: #9ca3af; cursor: pointer; transition: all 0.2s; font-family: 'IBM Plex Sans Arabic', sans-serif;
    width: 100%;
}
.quiz-option:hover:not(:disabled) { background: rgba(255,255,255,0.07); color: white; border-color: rgba(255,255,255,0.12); }
.quiz-option.correct  { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); color: #6ee7b7; }
.quiz-option.wrong    { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.3);  color: #fca5a5; }
.quiz-option:disabled { cursor: default; }
.quiz-explanation { font-size: 0.82rem; color: #6b7280; line-height: 1.7; padding: 0.75rem; background: rgba(255,255,255,0.02); border-radius: 0.5rem; border-right: 3px solid var(--theme-color, #3b82f6); display: none; }
.quiz-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; }
.quiz-counter { font-size: 0.75rem; color: #4b5563; font-family: monospace; }
.quiz-next { font-size: 0.8rem; color: var(--theme-color, #3b82f6); cursor: pointer; background: none; border: none; font-family: 'IBM Plex Sans Arabic', sans-serif; display: none; }
.quiz-next:hover { text-decoration: underline; }

/* ============================================================
   POMODORO TIMER
   ============================================================ */
#pomodoro-widget {
    position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 90;
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}
#pomodoro-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(15,20,35,0.9); border: 1px solid rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    display: flex; align-items: center; justify-content: center;
    color: #ef4444; font-size: 1.1rem; cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
#pomodoro-btn:hover { transform: scale(1.08); border-color: rgba(239,68,68,0.3); }
#pomodoro-panel {
    background: rgba(11,17,32,0.95); border: 1px solid rgba(255,255,255,0.1);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-radius: 1rem; padding: 1.25rem 1.5rem; min-width: 200px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    display: none; text-align: center;
}
#pomodoro-panel.pomo-open { display: block; animation: fadeInUp 0.3s ease; }
#pomo-display { font-family: monospace; font-size: 2.5rem; color: white; font-weight: 700; letter-spacing: 0.05em; line-height: 1; margin-bottom: 0.75rem; }
#pomo-label   { font-size: 0.72rem; color: #6b7280; margin-bottom: 1rem; font-family: 'Noto Kufi Arabic', sans-serif; }
.pomo-controls { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.pomo-ctrl {
    padding: 0.4rem 1rem; border-radius: 0.5rem; font-size: 0.78rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: #d1d5db; cursor: pointer; transition: all 0.2s; font-family: 'Noto Kufi Arabic', sans-serif;
}
.pomo-ctrl:hover { background: rgba(255,255,255,0.1); color: white; }
.pomo-ctrl.active-pomo { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #fca5a5; }
#pomo-ring { margin-bottom: 0.5rem; }
#pomo-ring circle.track { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 3; }
#pomo-ring circle.progress { fill: none; stroke: #ef4444; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 138; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; transform-origin: center; transform: rotate(-90deg); }

/* ============================================================
   SHARE TOAST
   ============================================================ */
#share-toast {
    position: fixed; bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(12px);
    opacity: 0; pointer-events: none; z-index: 999;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    background: rgba(20,25,40,0.9); border: 1px solid rgba(255,255,255,0.12);
    color: white; font-size: 0.875rem; font-weight: 600;
    padding: 0.75rem 1.5rem; border-radius: 9999px;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
#share-toast.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Aurora blob delays */
.blob-delay-2 { animation-delay: 2s; }
.blob-delay-4 { animation-delay: 4s; }

/* Pomodoro presets row */
.pomo-presets { margin-top: 0.75rem; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes blob {
    0%   { transform: translate(0px, 0px) scale(1); }
    33%  { transform: translate(30px, -50px) scale(1.1); }
    66%  { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}