/* ============================================================ */
/* SIMPLESOLVED - COMPLETE MOBILE REVAMP STYLESHEET (mobile.css)*/
/* Applies EXCLUSIVELY to Mobile & Tablets (screens <= 768px)   */
/* Desktop & PC styles remain 100% UNTOUCHED in style.css        */
/* ============================================================ */

@media (max-width: 768px) {

    /* --- 1. Global Viewport & Overflow Hardening --- */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        background-color: #f8fafc;
        background-image: 
            radial-gradient(circle at 50% 0%, rgba(219, 234, 254, 0.5) 0%, rgba(248, 250, 252, 0) 65%),
            radial-gradient(circle at 100% 30%, rgba(243, 232, 255, 0.4) 0%, rgba(248, 250, 252, 0) 50%);
        background-attachment: fixed;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 0.85rem 3rem 0.85rem !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* --- 2. Frosted App-Like Top Navbar --- */
    .navbar {
        padding: 0.65rem 0.9rem !important;
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nav-left {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        min-width: 0 !important;
        flex: 1 !important;
    }

    .nav-left .logo {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    .nav-left .logo span {
        background: linear-gradient(135deg, #2563eb, #3b82f6) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
    }

    .nav-left .badge {
        display: none !important; /* Hide badge on mobile so logo & action buttons never collide */
    }

    .nav-right {
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .nav-action-btn,
    .search-trigger-btn,
    .theme-toggle-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        transition: transform 0.15s ease, background-color 0.15s ease !important;
    }

    .nav-action-btn:active,
    .search-trigger-btn:active,
    .theme-toggle-btn:active {
        transform: scale(0.92) !important;
        background: #f1f5f9 !important;
    }

    .nav-action-btn .btn-icon,
    .search-trigger-btn .btn-icon,
    .theme-toggle-btn .btn-icon {
        font-size: 1.15rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .nav-action-btn .btn-text,
    .theme-toggle-btn .btn-text,
    .shortcut-pill {
        display: none !important;
    }

    /* --- 3. Horizontal Swipable Subject Tabs Bar --- */
    .tabs-nav-bar {
        position: sticky !important;
        top: 51px !important;
        z-index: 900 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid rgba(226, 232, 240, 0.85) !important;
        box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.03) !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .tabs-scroll-container {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        padding: 0.5rem 0.85rem !important;
        gap: 0.5rem !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .tabs-scroll-container::-webkit-scrollbar {
        display: none !important;
    }

    .nav-tab {
        padding: 0.45rem 0.85rem !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-radius: 9999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
    }

    .nav-tab:active {
        transform: scale(0.95) !important;
    }

    .nav-tab.active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    }

    .nav-tab.active .tab-icon {
        transform: scale(1.1) !important;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)) !important;
    }

    /* --- 4. Hero Section & Thumb-Reach Search Box --- */
    .hero-section {
        padding: 0.4rem 0 0.85rem 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .hero-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        padding: 0.3rem 0.75rem !important;
        font-size: 0.74rem !important;
        font-weight: 600 !important;
        background: #ffffff !important;
        border: 1px solid #dbeafe !important;
        color: #1e40af !important;
        border-radius: 9999px !important;
        box-shadow: 0 2px 6px rgba(37, 99, 235, 0.06) !important;
        margin-bottom: 0.6rem !important;
    }

    .pill-dot {
        width: 6px !important;
        height: 6px !important;
        background: #2563eb !important;
        border-radius: 50% !important;
        box-shadow: 0 0 6px #2563eb !important;
        animation: mobilePulseDot 2s infinite ease-in-out !important;
    }

    @keyframes mobilePulseDot {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.4); opacity: 0.6; }
    }

    .hero-title {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: -0.03em !important;
        margin-bottom: 0.5rem !important;
        color: #0f172a !important;
        padding: 0 0.25rem !important;
    }

    .hero-title .gradient-text {
        background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        display: inline-block !important;
    }

    .hero-subtitle {
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        color: #64748b !important;
        padding: 0 0.5rem !important;
        margin: 0 auto !important;
    }

    /* Mobile Search Input Wrapper */
    .search-box-container {
        margin: 1rem 0 0.65rem 0 !important;
        width: 100% !important;
        position: relative !important;
    }

    .search-input-wrapper {
        background: #ffffff !important;
        border: 1.5px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 0.35rem 0.65rem !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .search-input-wrapper:focus-within {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 4px 14px rgba(37, 99, 235, 0.08) !important;
    }

    .search-input-icon {
        font-size: 1rem !important;
        color: #64748b !important;
        flex-shrink: 0 !important;
    }

    #global-search-input {
        font-size: 0.9rem !important;
        padding: 0.45rem 0 !important;
        width: 100% !important;
        border: none !important;
        outline: none !important;
        color: #1e293b !important;
        background: transparent !important;
    }

    #global-search-input::placeholder {
        color: #94a3b8 !important;
        font-size: 0.84rem !important;
    }

    .search-shortcut-hint {
        display: none !important;
    }

    /* Mobile Feature Chips - Smooth Horizontal Swipe Rail */
    .features-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        justify-content: flex-start !important;
        gap: 0.45rem !important;
        margin-top: 0.75rem !important;
        padding: 0.25rem 0.2rem 0.55rem 0.2rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .features-pills::-webkit-scrollbar {
        display: none !important;
    }

    .feat-pill {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        font-size: 0.78rem !important;
        padding: 0.35rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(6px) !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 9999px !important;
        color: #475569 !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .feat-icon {
        font-size: 0.78rem !important;
    }

    /* --- 5. Mobile Subject Cards with Smooth Touch Ripple --- */
    .subject-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0.75rem !important;
        margin-top: 1rem !important;
        width: 100% !important;
    }

    .subject-card-btn {
        width: 100% !important;
        padding: 1.1rem !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
        box-sizing: border-box !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
        text-decoration: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .subject-card-btn:active {
        transform: scale(0.98) !important;
        background: #f8fafc !important;
    }

    .card-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.85rem !important;
        width: 100% !important;
    }

    .card-icon-wrapper {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 12px !important;
        font-size: 1.4rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Subject Card Themes - Exact Same Colors as PC */
    /* 1. Science (Emerald) */
    .card-science {
        border-top: 4px solid #10b981 !important;
        border-left: 1px solid #e2e8f0 !important;
    }
    .icon-science {
        background-color: #ecfdf5 !important;
        border: 1px solid #a7f3d0 !important;
        box-shadow: 0 0 10px rgba(16, 185, 129, 0.15) !important;
    }
    .card-science .card-tag {
        background-color: #ecfdf5 !important;
        color: #059669 !important;
    }
    .card-science .card-footer {
        color: #059669 !important;
    }

    /* 2. SST (Amber / Orange) */
    .card-sst {
        border-top: 4px solid #f59e0b !important;
        border-left: 1px solid #e2e8f0 !important;
    }
    .icon-sst {
        background-color: #fffbeb !important;
        border: 1px solid #fde68a !important;
        box-shadow: 0 0 10px rgba(245, 158, 11, 0.15) !important;
    }
    .card-sst .card-tag {
        background-color: #fffbeb !important;
        color: #d97706 !important;
    }
    .card-sst .card-footer {
        color: #d97706 !important;
    }

    /* 3. Maths (Royal Blue) */
    .card-maths {
        border-top: 4px solid #3b82f6 !important;
        border-left: 1px solid #e2e8f0 !important;
    }
    .icon-maths {
        background-color: #eff6ff !important;
        border: 1px solid #bfdbfe !important;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.15) !important;
    }
    .card-maths .card-tag {
        background-color: #eff6ff !important;
        color: #2563eb !important;
    }
    .card-maths .card-footer {
        color: #2563eb !important;
    }

    /* 4. English (Violet) */
    .card-english {
        border-top: 4px solid #8b5cf6 !important;
        border-left: 1px solid #e2e8f0 !important;
    }
    .icon-english {
        background-color: #f5f3ff !important;
        border: 1px solid #ddd6fe !important;
        box-shadow: 0 0 10px rgba(139, 92, 246, 0.15) !important;
    }
    .card-english .card-tag {
        background-color: #f5f3ff !important;
        color: #7c3aed !important;
    }
    .card-english .card-footer {
        color: #7c3aed !important;
    }

    /* 5. Hindi (Rose / Crimson) */
    .card-hindi {
        border-top: 4px solid #e11d48 !important;
        border-left: 1px solid #e2e8f0 !important;
    }
    .icon-hindi {
        background-color: #fff1f2 !important;
        border: 1px solid #fecdd3 !important;
        box-shadow: 0 0 10px rgba(225, 29, 72, 0.15) !important;
    }
    .card-hindi .card-tag {
        background-color: #fff1f2 !important;
        color: #e11d48 !important;
    }
    .card-hindi .card-footer {
        color: #e11d48 !important;
    }

    .card-tag {
        font-size: 0.72rem !important;
        padding: 0.2rem 0.55rem !important;
        border-radius: 9999px !important;
        font-weight: 700 !important;
        background: #f1f5f9;
        color: #475569;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .card-title {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        margin: 0 !important;
    }

    .card-desc {
        font-size: 0.84rem !important;
        line-height: 1.45 !important;
        color: #64748b !important;
        margin: 0.35rem 0 0.75rem 0 !important;
    }

    .card-footer {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        border-top: 1px dashed #e2e8f0 !important;
        padding-top: 0.6rem !important;
    }

    /* --- 6. Mobile Chapter Selection List --- */
    .chapters-buttons-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .chapter-select-btn {
        width: 100% !important;
        padding: 0.85rem 0.95rem !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.65rem !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: transform 0.15s ease, background-color 0.15s ease !important;
    }

    .chapter-select-btn:active {
        transform: scale(0.98) !important;
        background: #f8fafc !important;
    }

    .chap-btn-content {
        display: flex !important;
        align-items: center !important;
        gap: 0.75rem !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
    }

    .chap-icon-badge {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
        font-size: 1.25rem !important;
        background: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .branch-text-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.2rem !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
    }

    .chap-btn-title {
        display: block !important;
        font-size: 0.94rem !important;
        font-weight: 600 !important;
        color: #1e293b !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        word-break: normal !important; /* CRITICAL: Never break individual words into 1-letter vertical lines */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        hyphens: none !important;
        width: 100% !important;
    }

    .branch-chap-count {
        font-size: 0.76rem !important;
        color: #64748b !important;
        display: block !important;
        margin-top: 0.15rem !important;
        line-height: 1.35 !important;
    }

    .chapter-select-btn::after {
        content: "→" !important;
        font-size: 0.95rem !important;
        color: #2563eb !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
        margin-left: 0.35rem !important;
    }

    /* Introductory Non-Exercise Cards (Science Ch 1, SST Ch 1) - Vertical Card on Mobile */
    .chapter-select-btn.chapter-no-exercises {
        background: #fefce8 !important;
        border: 1.5px dashed #facc15 !important;
        cursor: pointer !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.65rem !important;
        padding: 0.95rem 1rem !important;
        width: 100% !important;
    }

    .chapter-select-btn.chapter-no-exercises::after {
        display: none !important;
    }

    .chapter-select-btn.chapter-no-exercises .chap-btn-content {
        width: 100% !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .chapter-select-btn.chapter-no-exercises .chap-icon-badge {
        background: #fef9c3 !important;
        border-color: #fde047 !important;
        flex-shrink: 0 !important;
        margin-top: 2px !important;
    }

    .chapter-select-btn.chapter-no-exercises .no-ex-hover-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        padding: 0.3rem 0.65rem !important;
        font-size: 0.76rem !important;
        background: #fef08a !important;
        color: #854d0e !important;
        border: 1px solid #eab308 !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        align-self: flex-start !important;
        margin-left: 0 !important;
    }

    /* --- 7. Solution & Question Cards (Homework Ergonomics) --- */
    .solutions-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.85rem !important;
        width: 100% !important;
    }

    .solution-card {
        padding: 1rem 0.95rem !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .card-question-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.45rem !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .q-badge {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        padding: 0.2rem 0.55rem !important;
        border-radius: 6px !important;
        background: #eff6ff !important;
        color: #1d4ed8 !important;
        border: 1px solid #bfdbfe !important;
        display: inline-block !important;
    }

    .question-text {
        font-size: 0.94rem !important;
        line-height: 1.55 !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        width: 100% !important;
        word-break: break-word !important;
    }

    .question-text h3 {
        font-size: 0.98rem !important;
        margin-bottom: 0.35rem !important;
        color: #1e40af !important;
        line-height: 1.4 !important;
    }

    .answer-text {
        font-size: 0.9rem !important;
        line-height: 1.68 !important;
        color: #334155 !important;
        border-left: 3px solid #3b82f6 !important;
        padding-left: 0.75rem !important;
        margin: 0.65rem 0 !important;
        word-break: break-word !important;
        overflow-x: auto !important;
    }

    /* Math Formulas & KaTeX Overflow Protection */
    .katex, .katex-display {
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0.2rem 0 !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Tables inside solutions */
    .answer-text table, .solution-card table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-collapse: collapse !important;
        font-size: 0.85rem !important;
    }

    /* Hint Box with Luminous Yellow Ambient */
    .hint-box {
        margin: 0.65rem 0 !important;
        padding: 0.75rem 0.85rem !important;
        border-radius: 10px !important;
        background: #fefce8 !important;
        border: 1px solid #fde047 !important;
        box-shadow: 0 0 10px rgba(250, 204, 21, 0.12) !important;
        color: #713f12 !important;
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
        word-break: break-word !important;
    }

    /* Card Action Buttons (Touch Friendly) */
    .card-actions-bar {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.45rem !important;
        margin-top: 0.75rem !important;
        border-top: 1px dashed #e2e8f0 !important;
        padding-top: 0.65rem !important;
        width: 100% !important;
    }

    .btn-toggle-hint,
    .btn-toggle-solution {
        flex: 1 !important;
        min-height: 40px !important;
        padding: 0.45rem 0.65rem !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        transition: all 0.15s ease !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

    .btn-toggle-hint {
        background: #fffbeb !important;
        border: 1px solid #fde68a !important;
        color: #b45309 !important;
    }

    .btn-toggle-hint:active {
        background: #fef3c7 !important;
        transform: scale(0.96) !important;
    }

    .btn-toggle-solution {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #475569 !important;
    }

    .btn-toggle-solution:active {
        background: #f1f5f9 !important;
        transform: scale(0.96) !important;
    }

    .btn-toggle-solution.active {
        background: #eff6ff !important;
        border-color: #bfdbfe !important;
        color: #1d4ed8 !important;
    }

    /* Exercise Switcher Pills */
    .exercise-switcher-bar {
        display: flex !important;
        overflow-x: auto !important;
        padding: 0.45rem 0.2rem 0.65rem 0.2rem !important;
        gap: 0.45rem !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .exercise-switcher-bar::-webkit-scrollbar {
        display: none !important;
    }

    .exercise-pill {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
        flex-shrink: 0 !important;
        text-decoration: none !important;
    }

    .exercise-pill:active {
        transform: scale(0.95) !important;
    }

    .exercise-pill.active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3) !important;
    }

    /* --- 8. Back Button & Breadcrumbs Navigation --- */
    .navigation-crumbs {
        margin-bottom: 0.65rem !important;
        width: 100% !important;
    }

    .btn-back {
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        padding: 0.4rem 0.75rem !important;
        border-radius: 8px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #2563eb !important;
        display: inline-flex !important;
        align-items: center !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
        text-decoration: none !important;
    }

    .btn-back:active {
        transform: scale(0.95) !important;
        background: #f8fafc !important;
    }

    /* --- 9. Floating Back-to-Top Button (Safe Area Aware) --- */
    .floating-controls {
        position: fixed !important;
        bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
        right: 1rem !important;
        z-index: 800 !important;
    }

        .hidden,
    .floating-btn.back-to-top-btn.hidden {
        display: none !important;
    }

    .floating-btn.back-to-top-btn {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        color: #ffffff !important;
        border: none !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
        font-size: 1.15rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: transform 0.15s ease !important;
    }

    .floating-btn.back-to-top-btn:active {
        transform: scale(0.9) !important;
    }

    /* --- 10. Creator Note & Footer Polish --- */
    .creator-banner {
        border-radius: 14px !important;
        padding: 1rem !important;
        margin: 1.25rem 0 0.85rem 0 !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.65rem !important;
        width: 100% !important;
    }

    .creator-avatar {
        font-size: 1.6rem !important;
    }

    .creator-content h4 {
        font-size: 0.95rem !important;
        color: #0f172a !important;
        margin-bottom: 0.25rem !important;
    }

    .creator-content p {
        font-size: 0.84rem !important;
        line-height: 1.48 !important;
        color: #64748b !important;
        margin: 0 !important;
    }

    footer {
        padding: 1.25rem 0.85rem calc(1.5rem + env(safe-area-inset-bottom, 0px)) 0.85rem !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    footer p {
        margin: 0.35rem 0 !important;
        word-break: break-word !important;
    }
}