/* ==========================================================================ZIELAAN MOBILE 2.0 - MASTER STANDALONE APP STYLESHEETUltra-polished,full-bleed,touch-first responsive design system========================================================================== *//* --------------------------------------------------------------------------1. CORE APP RESET & TOUCH ENGINE-------------------------------------------------------------------------- */*{-webkit-tap-highlight-color:transparent !important;box-sizing:border-box;}
:root{--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--app-primary:#0284c7;--app-primary-glow:rgba(2,132,199,0.25);--app-success:#10b981;--app-warning:#f59e0b;--app-danger:#ef4444;}
button,a,input,select,.nav-tab,.app-bottom-nav-item,.card-toggle-btn,.option,.extra-card,.purchase-btn,.step-action-btn{-webkit-user-select:none !important;user-select:none !important;-webkit-touch-callout:none !important;touch-action:manipulation;}
@media (max-width:768px){html,body{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,'Outfit' !important;overflow-x:hidden !important;max-width:100vw !important;width:100% !important;margin:0 !important;padding:0 !important;}
}
/* --------------------------------------------------------------------------2. PUBLIC HEADER & SOLID NATIVE MOBILE MENU DRAWER-------------------------------------------------------------------------- */@media (max-width:768px){.header{position:sticky !important;top:0 !important;left:0 !important;right:0 !important;width:100% !important;padding:0.65rem 0.85rem !important;background:rgba(255,255,255,0.98) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-bottom:1px solid rgba(226,232,240,0.8) !important;z-index:1000 !important;box-shadow:0 2px 10px rgba(0,0,0,0.04) !important;}
[data-theme="dark"] .header,body.theme-dark .header{background:rgba(15,23,42,0.98) !important;border-bottom-color:rgba(30,41,59,0.8) !important;box-shadow:0 4px 20px rgba(0,0,0,0.35) !important;}
.desktop-nav-links,.desktop-nav-link,.desktop-nav-btn,.desktop-nav-auth-buttons,.desktop-nav-controls{display:none !important;}
.nav-container{display:flex !important;flex-direction:row !important;justify-content:space-between !important;align-items:center !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;}
.nav-brand-group{display:flex !important;align-items:center !important;gap:0.65rem !important;}
.logo.text-logo{font-size:1.35rem !important;font-weight:800 !important;color:var(--gray-900,#0f172a) !important;letter-spacing:-0.03em !important;text-decoration:none !important;}
[data-theme="dark"] .logo.text-logo,body.theme-dark .logo.text-logo{color:#ffffff !important;}
.mobile-menu-toggle{display:flex !important;align-items:center !important;justify-content:center !important;width:38px !important;height:38px !important;border-radius:10px !important;background:var(--gray-100,#f1f5f9) !important;border:1px solid var(--gray-200,#e2e8f0) !important;color:var(--gray-800,#1e293b) !important;font-size:1.25rem !important;cursor:pointer !important;}
[data-theme="dark"] .mobile-menu-toggle,body.theme-dark .mobile-menu-toggle{background:#1e293b !important;border-color:rgba(255,255,255,0.1) !important;color:#f1f5f9 !important;}
.nav-header-actions{display:flex !important;align-items:center !important;gap:0.4rem !important;}
.header-nav-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:0.4rem 0.8rem !important;font-size:0.78rem !important;font-weight:700 !important;border-radius:20px !important;text-decoration:none !important;background:#0284c7 !important;color:#ffffff !important;border:none !important;box-shadow:0 2px 6px rgba(2,132,199,0.3) !important;}
.header-nav-btn-danger{background:#ef4444 !important;box-shadow:0 2px 6px rgba(239,68,68,0.3) !important;}
.mobile-drawer-overlay:not(.mobile-active),#mobileDrawer:not(.mobile-active),.nav-links:not(.mobile-active){display:none !important;}
.mobile-drawer-overlay.mobile-active,#mobileDrawer.mobile-active,.nav-links.mobile-active{display:flex !important;flex-direction:column !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100vw !important;height:100vh !important;height:100dvh !important;background:#ffffff !important;z-index:999999 !important;padding:calc(14px + var(--safe-top)) 1.25rem calc(16px + var(--safe-bottom)) 1.25rem !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;box-shadow:0 0 50px rgba(0,0,0,0.25) !important;}
[data-theme="dark"] .mobile-drawer-overlay.mobile-active,[data-theme="dark"] #mobileDrawer.mobile-active,body.theme-dark .mobile-drawer-overlay.mobile-active,body.theme-dark #mobileDrawer.mobile-active{background:#0f172a !important;}
.mobile-drawer-header{display:flex !important;align-items:center !important;justify-content:space-between !important;padding-bottom:0.85rem !important;margin-bottom:0.75rem !important;border-bottom:1px solid var(--gray-200,#e2e8f0) !important;width:100% !important;}
[data-theme="dark"] .mobile-drawer-header{border-bottom-color:rgba(255,255,255,0.1) !important;}
.mobile-drawer-brand{font-size:1.35rem !important;font-weight:800 !important;color:var(--gray-900,#0f172a) !important;letter-spacing:-0.03em !important;}
[data-theme="dark"] .mobile-drawer-brand{color:#ffffff !important;}
.mobile-drawer-close{width:36px !important;height:36px !important;border-radius:50% !important;background:var(--gray-100,#f1f5f9) !important;border:1px solid var(--gray-200,#e2e8f0) !important;color:var(--gray-700,#334155) !important;font-size:1.35rem !important;display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;line-height:1 !important;}
[data-theme="dark"] .mobile-drawer-close{background:#1e293b !important;border-color:rgba(255,255,255,0.1) !important;color:#cbd5e1 !important;}
.mobile-drawer-links{display:flex !important;flex-direction:column !important;gap:0.45rem !important;width:100% !important;}
.mobile-drawer-links a{display:flex !important;align-items:center !important;justify-content:space-between !important;padding:0.75rem 1rem !important;border-radius:12px !important;background:var(--gray-50,#f8fafc) !important;border:1px solid var(--gray-200,#e2e8f0) !important;color:var(--gray-800,#1e293b) !important;font-size:0.95rem !important;font-weight:700 !important;text-decoration:none !important;transition:all 0.15s ease !important;}
[data-theme="dark"] .mobile-drawer-links a{background:#1e293b !important;border-color:rgba(255,255,255,0.08) !important;color:#f1f5f9 !important;}
.mobile-drawer-links a span{display:flex !important;align-items:center !important;gap:0.65rem !important;}
.mobile-drawer-links a span i{font-size:1.05rem !important;color:#0284c7 !important;width:20px !important;text-align:center !important;}
[data-theme="dark"] .mobile-drawer-links a span i{color:#38bdf8 !important;}
.drawer-chevron{font-size:0.8rem !important;color:var(--gray-400,#94a3b8) !important;}
.mobile-drawer-links a.nav-highlight-badge{background:linear-gradient(135deg,rgba(2,132,199,0.08),rgba(56,189,248,0.08)) !important;border-color:rgba(2,132,199,0.3) !important;}
.mobile-drawer-auth{display:flex !important;gap:0.6rem !important;margin:1rem 0 !important;width:100% !important;}
.mobile-drawer-auth .btn{flex:1 !important;min-height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:12px !important;font-size:0.95rem !important;font-weight:700 !important;text-decoration:none !important;}
.mobile-drawer-auth .btn-outline-primary{background:transparent !important;border:1.5px solid #0284c7 !important;color:#0284c7 !important;}
[data-theme="dark"] .mobile-drawer-auth .btn-outline-primary{border-color:#38bdf8 !important;color:#38bdf8 !important;}
.mobile-drawer-footer{display:flex !important;align-items:center !important;justify-content:space-between !important;padding-top:1rem !important;margin-top:auto !important;border-top:1px solid var(--gray-200,#e2e8f0) !important;width:100% !important;}
[data-theme="dark"] .mobile-drawer-footer{border-top-color:rgba(255,255,255,0.1) !important;}
.drawer-pref-item{display:flex !important;align-items:center !important;gap:0.5rem !important;}
.drawer-pref-label{font-size:0.85rem !important;font-weight:700 !important;color:var(--gray-600,#64748b) !important;}
[data-theme="dark"] .drawer-pref-label{color:#94a3b8 !important;}
}
/* --------------------------------------------------------------------------3. HOMEPAGE PUBLIC SECTIONS (HERO,FREE CARDS,PRICING,FAQ)-------------------------------------------------------------------------- */@media (max-width:768px){.top-announcement-banner{padding:0.45rem 0.85rem !important;margin:0 !important;width:100% !important;border-bottom:1px solid rgba(56,189,248,0.25) !important;background:linear-gradient(90deg,rgba(2,132,199,0.18) 0%,rgba(59,130,246,0.22) 50%,rgba(147,51,234,0.18) 100%) !important;}
[data-theme="light"] .top-announcement-banner,body.theme-light .top-announcement-banner{background:linear-gradient(90deg,#f0f9ff 0%,#e0f2fe 50%,#f5f3ff 100%) !important;border-bottom-color:#bae6fd !important;}
.top-announcement-container{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:0.5rem !important;width:100% !important;max-width:100% !important;padding:0 !important;flex-wrap:nowrap !important;}
.top-announcement-content{display:flex !important;align-items:center !important;gap:0.45rem !important;min-width:0 !important;flex:1 !important;justify-content:flex-start !important;text-align:left !important;}
.top-announcement-badge{font-size:0.65rem !important;font-weight:800 !important;padding:0.15rem 0.45rem !important;border-radius:6px !important;white-space:nowrap !important;flex-shrink:0 !important;}
.top-announcement-text{font-size:0.76rem !important;line-height:1.25 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;display:block !important;}
.top-announcement-link{font-size:0.72rem !important;font-weight:800 !important;padding:0.25rem 0.55rem !important;border-radius:8px !important;white-space:nowrap !important;flex-shrink:0 !important;}
.announcement-close-btn{background:transparent !important;border:none !important;color:#94a3b8 !important;font-size:1.1rem !important;cursor:pointer !important;padding:0 4px !important;line-height:1 !important;flex-shrink:0 !important;}
.hero{padding:2rem 1rem 1.5rem 1rem !important;min-height:auto !important;text-align:center !important;width:100% !important;}
.hero-container{width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;}
.hero h1{font-size:1.85rem !important;line-height:1.25 !important;margin-bottom:0.75rem !important;font-weight:800 !important;}
.hero p{font-size:0.95rem !important;line-height:1.5 !important;margin-bottom:1.5rem !important;max-width:100% !important;}
.hero-buttons{display:flex !important;flex-direction:column !important;gap:0.65rem !important;width:100% !important;}
.hero-buttons .btn{width:100% !important;min-height:48px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:1rem !important;border-radius:14px !important;font-weight:700 !important;}
.free-features-section{padding:2rem 1rem !important;width:100% !important;}
.free-features-container{width:100% !important;max-width:100% !important;padding:0 !important;}
.free-features-header{text-align:center !important;margin-bottom:1.5rem !important;}
.free-features-header h2{font-size:1.6rem !important;font-weight:800 !important;margin:0.5rem 0 !important;}
.free-cards-grid{display:flex !important;flex-direction:column !important;gap:1rem !important;width:100% !important;padding:0 !important;}
.free-card{width:100% !important;border-radius:18px !important;padding:1.5rem 1.25rem !important;margin:0 !important;box-shadow:0 4px 16px rgba(0,0,0,0.05) !important;}
.free-card .free-card-btn{width:100% !important;min-height:44px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:12px !important;font-weight:700 !important;}
.features,.packages,.about,.faq-section,.cta{padding:2rem 1rem !important;width:100% !important;}
.features-container,.packages-container,.about-container,.faq-container,.cta-container{width:100% !important;max-width:100% !important;padding:0 !important;margin:0 !important;}
.features-grid,.packages-grid,.stats-grid{display:flex !important;flex-direction:column !important;gap:1rem !important;width:100% !important;padding:0 !important;}
.feature-card,.package-card,.stat-card{width:100% !important;border-radius:18px !important;padding:1.5rem 1.25rem !important;margin:0 !important;}
.package-card .btn{width:100% !important;min-height:48px !important;font-size:1rem !important;border-radius:12px !important;font-weight:700 !important;}
.about-content{display:flex !important;flex-direction:column !important;gap:1.25rem !important;width:100% !important;}
.about-text{width:100% !important;}
.about-text h2{font-size:1.6rem !important;font-weight:800 !important;line-height:1.25 !important;margin-bottom:0.65rem !important;}
.about-intro{font-size:0.95rem !important;line-height:1.5 !important;margin-bottom:1.25rem !important;}
.about-points{display:flex !important;flex-direction:column !important;gap:0.75rem !important;width:100% !important;}
.about-point{display:flex !important;flex-direction:row !important;align-items:flex-start !important;gap:0.85rem !important;padding:0.85rem 1rem !important;border-radius:14px !important;background:#ffffff !important;border:1px solid var(--gray-200,#e2e8f0) !important;width:100% !important;}
[data-theme="dark"] .about-point,body.theme-dark .about-point{background:#1e293b !important;border-color:rgba(255,255,255,0.08) !important;}
.point-icon{font-size:1.5rem !important;flex-shrink:0 !important;margin:0 !important;}
.point-content h3{font-size:1rem !important;font-weight:800 !important;margin-bottom:0.2rem !important;}
.point-content p{font-size:0.85rem !important;line-height:1.4 !important;margin:0 !important;color:var(--gray-600,#94a3b8) !important;}
.about-image{width:100% !important;display:flex !important;justify-content:center !important;margin:0.75rem 0 !important;}
.about-image img{width:100% !important;max-width:320px !important;height:auto !important;border-radius:16px !important;box-shadow:0 4px 16px rgba(0,0,0,0.1) !important;}
.mission-vision{display:flex !important;flex-direction:column !important;gap:0.85rem !important;margin-top:1.25rem !important;width:100% !important;}
.mission,.vision{width:100% !important;padding:1.25rem 1rem !important;border-radius:16px !important;background:#ffffff !important;border:1px solid var(--gray-200,#e2e8f0) !important;border-left:4px solid var(--app-primary,#0284c7) !important;margin:0 !important;}
[data-theme="dark"] .mission,[data-theme="dark"] .vision,body.theme-dark .mission,body.theme-dark .vision{background:#1e293b !important;border-color:rgba(255,255,255,0.08) !important;border-left-color:#38bdf8 !important;}
.mission h3,.vision h3{font-size:1.15rem !important;font-weight:800 !important;margin-bottom:0.4rem !important;color:#0284c7 !important;}
[data-theme="dark"] .mission h3,[data-theme="dark"] .vision h3,body.theme-dark .mission h3,body.theme-dark .vision h3{color:#38bdf8 !important;}
.mission p,.vision p{font-size:0.88rem !important;line-height:1.5 !important;margin:0 !important;}
.faq-list{display:flex !important;flex-direction:column !important;gap:0.75rem !important;width:100% !important;}
.faq-item{border-radius:14px !important;padding:1rem !important;}
}
/* --------------------------------------------------------------------------4. LOGGED-IN NATIVE APP SHELL (TOP & BOTTOM BARS)-------------------------------------------------------------------------- */.app-mobile-top-bar,.app-bottom-nav{display:none;}
@media (max-width:768px){.app-mobile-top-bar,[data-device="mobile"] .app-mobile-top-bar{display:flex !important;align-items:center !important;justify-content:space-between !important;position:fixed !important;top:0 !important;left:0 !important;right:0 !important;height:calc(56px + var(--safe-top)) !important;min-height:56px !important;padding-top:var(--safe-top) !important;padding-left:1rem !important;padding-right:1rem !important;background:rgba(255,255,255,0.95) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-bottom:1px solid rgba(226,232,240,0.8) !important;z-index:99999 !important;box-shadow:0 2px 12px rgba(0,0,0,0.04) !important;}
[data-theme="dark"] .app-mobile-top-bar,body.theme-dark .app-mobile-top-bar{background:rgba(15,23,42,0.95) !important;border-bottom-color:rgba(30,41,59,0.8) !important;box-shadow:0 4px 20px rgba(0,0,0,0.35) !important;}
.app-mobile-top-brand{display:flex !important;align-items:center !important;gap:0.55rem !important;text-decoration:none !important;}
.app-top-logo{width:32px !important;height:32px !important;border-radius:9px !important;box-shadow:0 2px 8px var(--app-primary-glow) !important;}
.app-top-title{font-size:1.2rem !important;font-weight:800 !important;color:#0f172a !important;letter-spacing:-0.02em !important;}
[data-theme="dark"] .app-top-title,body.theme-dark .app-top-title{color:#ffffff !important;}
.app-mobile-top-actions{display:flex !important;align-items:center !important;gap:0.5rem !important;}
.app-top-badge.cbr-badge{display:inline-flex !important;align-items:center !important;gap:0.35rem !important;padding:0.35rem 0.65rem !important;background:rgba(2,132,199,0.1) !important;border:1px solid rgba(2,132,199,0.25) !important;border-radius:20px !important;color:#0284c7 !important;font-size:0.78rem !important;font-weight:700 !important;cursor:pointer !important;}
[data-theme="dark"] .app-top-badge.cbr-badge,body.theme-dark .app-top-badge.cbr-badge{background:rgba(2,132,199,0.18) !important;border-color:rgba(56,189,248,0.35) !important;color:#38bdf8 !important;}
.app-top-avatar{width:34px !important;height:34px !important;border-radius:50% !important;background:linear-gradient(135deg,#0284c7,#2563eb) !important;color:white !important;display:flex !important;align-items:center !important;justify-content:center !important;font-weight:800 !important;font-size:0.85rem !important;cursor:pointer !important;box-shadow:0 2px 8px var(--app-primary-glow) !important;}
.app-top-logout-btn{width:34px !important;height:34px !important;border-radius:50% !important;background:rgba(239,68,68,0.1) !important;border:1px solid rgba(239,68,68,0.25) !important;color:#ef4444 !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:0.95rem !important;text-decoration:none !important;}
[data-theme="dark"] .app-top-logout-btn,body.theme-dark .app-top-logout-btn{background:rgba(239,68,68,0.2) !important;border-color:rgba(239,68,68,0.4) !important;color:#f87171 !important;}
.app-bottom-nav,[data-device="mobile"] .app-bottom-nav{display:flex !important;justify-content:space-around !important;align-items:center !important;position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;height:calc(60px + var(--safe-bottom)) !important;min-height:60px !important;padding-top:4px !important;padding-bottom:calc(4px + var(--safe-bottom)) !important;background:rgba(255,255,255,0.96) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-top:1px solid rgba(226,232,240,0.8) !important;z-index:99999 !important;box-shadow:0 -4px 20px rgba(0,0,0,0.05) !important;}
[data-theme="dark"] .app-bottom-nav,body.theme-dark .app-bottom-nav{background:rgba(15,23,42,0.96) !important;border-top-color:rgba(30,41,59,0.8) !important;box-shadow:0 -8px 24px rgba(0,0,0,0.4) !important;}
.app-bottom-nav-item{flex:1 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:0.15rem !important;height:100% !important;background:transparent !important;border:none !important;color:#64748b !important;font-size:0.72rem !important;font-weight:700 !important;cursor:pointer !important;text-decoration:none !important;}
[data-theme="dark"] .app-bottom-nav-item,body.theme-dark .app-bottom-nav-item{color:#94a3b8 !important;}
.app-bottom-nav-item i{font-size:1.25rem !important;}
.app-bottom-nav-item.active{color:#0284c7 !important;}
[data-theme="dark"] .app-bottom-nav-item.active,body.theme-dark .app-bottom-nav-item.active{color:#38bdf8 !important;}
.app-bottom-nav-item.active i{background:rgba(2,132,199,0.12) !important;padding:2px 14px !important;border-radius:14px !important;color:#0284c7 !important;margin-bottom:2px !important;}
[data-theme="dark"] .app-bottom-nav-item.active i,body.theme-dark .app-bottom-nav-item.active i{background:rgba(56,189,248,0.16) !important;color:#38bdf8 !important;box-shadow:0 0 12px rgba(56,189,248,0.25) !important;}
body.dashboard-page .header,body.exam-page .header,body.video-lesson-page .header,body.exam-results-page .header,body.dashboard-page .site-footer,body.exam-page .site-footer,body.video-lesson-page .site-footer,body.exam-results-page .site-footer{display:none !important;}
}
/* --------------------------------------------------------------------------5. DASHBOARD HUB (OVERVIEW TAB)-------------------------------------------------------------------------- */@media (max-width:768px){body.dashboard-page .dashboard-container{padding-top:calc(64px + var(--safe-top)) !important;padding-bottom:calc(85px + var(--safe-bottom)) !important;padding-left:0.75rem !important;padding-right:0.75rem !important;min-height:100dvh !important;}
.dashboard-nav{display:block !important;margin-bottom:0.85rem !important;width:100% !important;}
.dashboard-nav .nav-tabs{display:flex !important;flex-wrap:nowrap !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;gap:0.45rem !important;padding:4px 2px 8px 2px !important;scrollbar-width:none !important;}
.dashboard-nav .nav-tabs::-webkit-scrollbar{display:none !important;}
.dashboard-nav .tab-btn{flex:0 0 auto !important;padding:0.45rem 0.85rem !important;font-size:0.8rem !important;font-weight:700 !important;border-radius:10px !important;white-space:nowrap !important;}
.unified-overview-master,.overview-card.unified-overview-master{padding:0.85rem !important;border-radius:16px !important;margin-bottom:1rem !important;box-shadow:0 4px 16px rgba(0,0,0,0.04) !important;}
.overview-section-divider{margin:0.85rem 0 !important;height:1px !important;background:var(--gray-200,#e2e8f0) !important;opacity:0.7 !important;}
.agenda-section-wrap .card-header{margin-bottom:0.55rem !important;padding-bottom:0.55rem !important;gap:0.4rem !important;display:flex !important;align-items:center !important;justify-content:space-between !important;}
.agenda-section-wrap .card-header h3{font-size:1.05rem !important;font-weight:800 !important;}
.agenda-section-wrap .card-header p{display:none !important;}
.agenda-section-wrap .card-header button.purchase-btn{padding:0.35rem 0.65rem !important;font-size:0.75rem !important;border-radius:8px !important;}
.package-stats-grid{display:flex !important;flex-direction:column !important;gap:0.45rem !important;margin-bottom:0.55rem !important;}
.package-stat-card{padding:0.55rem 0.75rem !important;border-radius:10px !important;gap:0.25rem !important;}
.package-stat-title{font-size:0.7rem !important;font-weight:800 !important;}
.agenda-week-grid{display:flex !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;gap:0.45rem !important;padding:6px 2px !important;scrollbar-width:none !important;}
.agenda-week-grid::-webkit-scrollbar{display:none !important;}
.agenda-day-card{flex:0 0 88px !important;min-width:88px !important;padding:0.45rem 0.25rem !important;border-radius:10px !important;}
.agenda-day-card > div:first-of-type{font-size:0.68rem !important;}
.agenda-day-card > div:last-of-type{font-size:0.75rem !important;}
.package-hero-header{flex-direction:column !important;align-items:stretch !important;gap:0.65rem !important;margin-bottom:0.65rem !important;padding-bottom:0.65rem !important;}
.package-hero-info{display:flex !important;align-items:center !important;gap:0.65rem !important;}
.package-hero-icon{width:38px !important;height:38px !important;font-size:1.15rem !important;flex-shrink:0 !important;}
.package-hero-title{font-size:1.05rem !important;font-weight:800 !important;}
.package-hero-desc{font-size:0.75rem !important;line-height:1.35 !important;}
.package-hero-actions{display:flex !important;gap:0.5rem !important;width:100% !important;}
.package-hero-actions .btn-overview-primary,.package-hero-actions .btn-overview-pause,.package-hero-actions .btn-overview-disabled{flex:1 !important;min-height:42px !important;justify-content:center !important;font-size:0.85rem !important;border-radius:10px !important;box-sizing:border-box !important;text-align:center !important;font-weight:700 !important;}
.package-hero-actions form{flex:1 !important;display:flex !important;}
.package-hero-actions form button{width:100% !important;}
.stappenplan-section .card-header{margin-bottom:0.65rem !important;padding-bottom:0.55rem !important;gap:0.5rem !important;}
.stappenplan-cards-row{display:flex !important;flex-direction:column !important;gap:0.6rem !important;}
.stappenplan-card-item{padding:0.75rem !important;border-radius:12px !important;margin-bottom:0 !important;}
.stappenplan-card-item .step-action-btn{width:100% !important;min-height:40px !important;justify-content:center !important;border-radius:10px !important;font-size:0.85rem !important;font-weight:700 !important;}
}
/* --------------------------------------------------------------------------6. 100dvh FULL-BLEED EXAM INTERFACE-------------------------------------------------------------------------- */@media (max-width:768px){body.exam-page{height:100dvh !important;width:100vw !important;margin:0 !important;padding:0 !important;overflow:hidden !important;position:fixed !important;top:0 !important;left:0 !important;background:var(--bg-main,#f8fafc) !important;}
[data-theme="dark"] body.exam-page,body.theme-dark.exam-page{background:#0b1120 !important;}
body.exam-page .cbr-exam-header{position:fixed !important;top:0 !important;left:0 !important;right:0 !important;height:calc(52px + var(--safe-top)) !important;min-height:52px !important;padding-top:var(--safe-top) !important;padding-left:0.85rem !important;padding-right:0.85rem !important;display:flex !important;align-items:center !important;justify-content:space-between !important;background:#0f172a !important;color:#ffffff !important;border-bottom:1px solid #1e293b !important;z-index:1000 !important;box-shadow:0 2px 10px rgba(0,0,0,0.25) !important;}
body.exam-page .cbr-header-left{display:flex !important;align-items:center !important;gap:0.4rem !important;}
body.exam-page .cbr-exam-number{font-size:0.75rem !important;font-weight:800 !important;letter-spacing:0.5px !important;color:#38bdf8 !important;}
body.exam-page .cbr-exam-title{display:none !important;}
body.exam-page .cbr-header-center{display:flex !important;align-items:center !important;}
body.exam-page .cbr-timer-section{background:rgba(15,23,42,0.6) !important;border:1px solid rgba(56,189,248,0.3) !important;padding:0.25rem 0.65rem !important;border-radius:20px !important;display:flex !important;align-items:center !important;gap:0.35rem !important;}
body.exam-page .cbr-timer-label{display:none !important;}
body.exam-page .cbr-timer-value{font-size:0.95rem !important;font-weight:800 !important;color:#38bdf8 !important;letter-spacing:0.5px !important;}
body.exam-page .cbr-header-right{display:flex !important;align-items:center !important;gap:0.35rem !important;}
body.exam-page .cbr-header-btn{padding:0.35rem 0.45rem !important;font-size:0.9rem !important;border-radius:8px !important;background:rgba(255,255,255,0.08) !important;border:1px solid rgba(255,255,255,0.15) !important;color:#f1f5f9 !important;}
body.exam-page .cbr-header-btn span{display:none !important;}
body.exam-page .sample-exam-container{position:fixed !important;top:calc(52px + var(--safe-top)) !important;bottom:calc(62px + var(--safe-bottom)) !important;left:0 !important;right:0 !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;height:auto !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch !important;background:var(--bg-main,#f8fafc) !important;}
[data-theme="dark"] body.exam-page .sample-exam-container,body.theme-dark.exam-page .sample-exam-container{background:#0b1120 !important;}
body.exam-page .exam-content{padding:0.85rem 1rem 1.25rem 1rem !important;margin:0 !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
body.exam-page .question-container{width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;box-sizing:border-box !important;}
body.exam-page .question{background:transparent !important;border:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important;width:100% !important;}
body.exam-page .question-text{font-size:1.05rem !important;font-weight:700 !important;line-height:1.4 !important;color:var(--gray-900,#0f172a) !important;margin-bottom:0.75rem !important;padding:0 !important;}
[data-theme="dark"] body.exam-page .question-text,body.theme-dark.exam-page .question-text{color:#f1f5f9 !important;}
body.exam-page .question-image{width:100% !important;margin:0.4rem 0 0.85rem 0 !important;text-align:center !important;}
body.exam-page .question-image img{width:100% !important;max-height:230px !important;object-fit:cover !important;border-radius:14px !important;box-shadow:0 4px 16px rgba(0,0,0,0.08) !important;border:1.5px solid var(--gray-200,#e2e8f0) !important;}
[data-theme="dark"] body.exam-page .question-image img,body.theme-dark.exam-page .question-image img{border-color:rgba(255,255,255,0.1) !important;}
body.exam-page .options{display:flex !important;flex-direction:column !important;gap:0.55rem !important;width:100% !important;padding:0 !important;margin-bottom:1rem !important;}
body.exam-page .option{min-height:52px !important;padding:0.75rem 1rem !important;border-radius:14px !important;border:1.5px solid var(--gray-200,#e2e8f0) !important;background:#ffffff !important;color:var(--gray-800,#1e293b) !important;display:flex !important;align-items:center !important;gap:0.75rem !important;font-size:0.95rem !important;font-weight:600 !important;box-shadow:0 1px 3px rgba(0,0,0,0.04) !important;transition:all 0.15s ease !important;-webkit-tap-highlight-color:transparent !important;}
[data-theme="dark"] body.exam-page .option,body.theme-dark.exam-page .option{background:#1e293b !important;border-color:rgba(255,255,255,0.1) !important;color:#f1f5f9 !important;}
body.exam-page .option:active{transform:scale(0.98) !important;}
body.exam-page .option.selected{border-color:#0284c7 !important;background:rgba(2,132,199,0.08) !important;box-shadow:0 0 0 2px rgba(2,132,199,0.25) !important;}
[data-theme="dark"] body.exam-page .option.selected,body.theme-dark.exam-page .option.selected{background:rgba(2,132,199,0.18) !important;border-color:#38bdf8 !important;box-shadow:0 0 0 2px rgba(56,189,248,0.3) !important;}
body.exam-page .exam-footer{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;height:calc(62px + var(--safe-bottom)) !important;min-height:62px !important;padding-bottom:var(--safe-bottom) !important;padding-left:0.85rem !important;padding-right:0.85rem !important;display:flex !important;align-items:center !important;justify-content:space-between !important;gap:0.5rem !important;background:rgba(255,255,255,0.98) !important;backdrop-filter:blur(16px) !important;-webkit-backdrop-filter:blur(16px) !important;border-top:1px solid #e2e8f0 !important;z-index:1000 !important;box-shadow:0 -4px 16px rgba(0,0,0,0.06) !important;}
[data-theme="dark"] body.exam-page .exam-footer,body.theme-dark.exam-page .exam-footer{background:#0f172a !important;border-top:1px solid #1e293b !important;box-shadow:0 -8px 24px rgba(0,0,0,0.4) !important;}
body.exam-page .footer-btn{min-height:42px !important;padding:0.45rem 0.9rem !important;border-radius:12px !important;font-weight:800 !important;font-size:0.82rem !important;display:inline-flex !important;align-items:center !important;gap:0.35rem !important;}
body.exam-page .prev-btn{border:1.5px solid #cbd5e1 !important;background:transparent !important;color:var(--gray-700,#334155) !important;}
[data-theme="dark"] body.exam-page .prev-btn,body.theme-dark.exam-page .prev-btn{border-color:#334155 !important;color:#cbd5e1 !important;}
body.exam-page .next-btn{background:linear-gradient(135deg,#10b981,#059669) !important;color:#ffffff !important;border:none !important;box-shadow:0 2px 10px rgba(16,185,129,0.35) !important;}
body.exam-page .footer-indicator{font-size:0.8rem !important;font-weight:700 !important;padding:0.35rem 0.7rem !important;border-radius:20px !important;background:var(--gray-100,#f1f5f9) !important;color:var(--gray-700,#334155) !important;border:1px solid var(--gray-200,#e2e8f0) !important;}
[data-theme="dark"] body.exam-page .footer-indicator,body.theme-dark.exam-page .footer-indicator{background:rgba(255,255,255,0.05) !important;border-color:rgba(255,255,255,0.1) !important;color:#cbd5e1 !important;}
}
/* --------------------------------------------------------------------------7. VIDEO LESSONS,SIGNS,AUTH & CHECKOUT-------------------------------------------------------------------------- */@media (max-width:768px){body.video-lesson-page{margin:0 !important;padding-top:0 !important;padding-bottom:calc(90px + var(--safe-bottom)) !important;}
body.video-lesson-page .row,body.video-lesson-page .col-12{margin:0 !important;padding:0 !important;}
body.video-lesson-page .slideshow-wrapper{margin:0 auto !important;margin-bottom:calc(90px + var(--safe-bottom)) !important;padding-bottom:0 !important;min-height:auto !important;}
body.video-lesson-page .slideshow-content{min-height:auto !important;padding-bottom:0 !important;}
body.video-lesson-page .slideshow-controls,body.video-lesson-page .slideshow-controls-detached{position:relative !important;bottom:auto !important;left:auto !important;right:auto !important;transform:none !important;width:100% !important;margin:0.5rem 0 0 0 !important;padding:0.5rem 1rem 1rem 1rem !important;display:flex !important;justify-content:space-between !important;align-items:center !important;background:transparent !important;border:none !important;border-top:none !important;box-shadow:none !important;pointer-events:auto !important;}
.video-player-container,.slideshow-container{width:100% !important;border-radius:0 !important;margin:0 !important;aspect-ratio:16 / 9 !important;box-shadow:0 4px 16px rgba(0,0,0,0.25) !important;}
.course-module-card{padding:0.85rem !important;border-radius:14px !important;margin-bottom:0.65rem !important;}
.signs-page-container{padding:1rem 0.75rem calc(80px + var(--safe-bottom)) 0.75rem !important;max-width:100% !important;width:100% !important;}
.signs-hero{padding:1.5rem 1rem !important;margin-bottom:1.25rem !important;}
.signs-hero h1{font-size:1.75rem !important;margin-bottom:0.5rem !important;}
.signs-hero p{font-size:0.9rem !important;}
.signs-controls{padding:1rem !important;margin-bottom:1.25rem !important;border-radius:16px !important;}
.search-wrapper{margin-bottom:0.85rem !important;}
.search-input{padding:12px 48px 12px 42px !important;font-size:0.95rem !important;min-height:46px !important;}
.category-tabs{display:flex !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;gap:0.4rem !important;padding:4px 2px 8px 2px !important;scrollbar-width:none !important;}
.category-tabs::-webkit-scrollbar{display:none !important;}
.category-tab{flex:0 0 auto !important;padding:0.45rem 0.85rem !important;font-size:0.8rem !important;border-radius:20px !important;white-space:nowrap !important;}
.signs-grid{display:flex !important;flex-direction:column !important;gap:0.75rem !important;padding:0 !important;width:100% !important;}
.sign-card{display:flex !important;flex-direction:row !important;align-items:center !important;gap:1rem !important;padding:0.85rem 1rem !important;border-radius:16px !important;width:100% !important;background:#ffffff !important;border:1px solid var(--gray-200,#e2e8f0) !important;box-shadow:0 2px 8px rgba(0,0,0,0.04) !important;}
[data-theme="dark"] .sign-card,body.theme-dark .sign-card{background:#1e293b !important;border-color:rgba(255,255,255,0.08) !important;}
.sign-visual-wrapper{flex:0 0 76px !important;width:76px !important;height:76px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;background:var(--gray-50,#f8fafc) !important;border-radius:12px !important;padding:4px !important;border:1px solid var(--gray-100,#f1f5f9) !important;}
[data-theme="dark"] .sign-visual-wrapper,body.theme-dark .sign-visual-wrapper{background:rgba(15,23,42,0.6) !important;border-color:rgba(255,255,255,0.05) !important;}
.sign-visual-wrapper img{max-width:66px !important;max-height:66px !important;width:auto !important;height:auto !important;object-fit:contain !important;}
.sign-info-pane{flex:1 !important;display:flex !important;flex-direction:column !important;gap:0.25rem !important;min-width:0 !important;}
.sign-header-meta{display:flex !important;align-items:center !important;gap:0.4rem !important;margin-bottom:0.15rem !important;}
.sign-code-badge{font-size:0.75rem !important;font-weight:800 !important;padding:2px 8px !important;border-radius:6px !important;background:var(--app-primary,#0284c7) !important;color:#ffffff !important;}
.sign-category-tag{font-size:0.72rem !important;color:var(--gray-500,#64748b) !important;font-weight:600 !important;}
[data-theme="dark"] .sign-category-tag,body.theme-dark .sign-category-tag{color:#94a3b8 !important;}
.sign-name-title{font-size:0.95rem !important;font-weight:800 !important;margin:0 !important;line-height:1.3 !important;color:var(--gray-900,#0f172a) !important;}
[data-theme="dark"] .sign-name-title,body.theme-dark .sign-name-title{color:#f1f5f9 !important;}
.sign-description-text{font-size:0.8rem !important;line-height:1.35 !important;margin:0 !important;color:var(--gray-600,#64748b) !important;}
[data-theme="dark"] .sign-description-text,body.theme-dark .sign-description-text{color:#94a3b8 !important;}
body.login-page .login-container,body.register-page .register-container{margin:1rem 0.5rem !important;padding:1.5rem 1rem !important;border-radius:20px !important;width:calc(100% - 1rem) !important;max-width:100% !important;}
.login-container input,.register-container input{font-size:1rem !important;min-height:48px !important;border-radius:12px !important;}
body.checkout-page .checkout-container{padding:1rem 0.75rem calc(85px + var(--safe-bottom)) 0.75rem !important;}
.payment-proceed .btn-proceed{width:100% !important;min-height:48px !important;font-size:1.05rem !important;border-radius:14px !important;}
.site-footer{background:linear-gradient(135deg,rgb(0,0,0),#34495e) !important;color:#ffffff !important;padding:40px 20px calc(80px + var(--safe-bottom)) 20px !important;border-top:1px solid rgba(255,255,255,0.15) !important;width:100% !important;text-align:center !important;}
.footer-desktop-content{display:none !important;}
.footer-mobile-content{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:16px !important;margin-bottom:20px !important;}
.footer-mobile-socials,.footer-mobile-apps{text-align:center !important;margin-bottom:20px !important;width:100% !important;}
.footer-col-subtitle{color:#ffffff !important;font-size:16px !important;font-weight:600 !important;margin-bottom:12px !important;text-align:center !important;display:block !important;}
.footer-social-row{display:flex !important;gap:12px !important;align-items:center !important;justify-content:center !important;margin:0 !important;}
.social-btn{color:#ffffff !important;font-size:24px !important;transition:all 0.3s ease !important;display:flex !important;align-items:center !important;justify-content:center !important;width:40px !important;height:40px !important;border-radius:50% !important;text-decoration:none !important;}
.social-instagram{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%) !important;box-shadow:0 0 15px rgba(220,39,67,0.4) !important;border:none !important;}
.social-tiktok{background:#010101 !important;border:1px solid rgba(255,255,255,0.2) !important;box-shadow:0 0 15px rgba(0,0,0,0.4) !important;}
.social-facebook{background:#1877f2 !important;box-shadow:0 0 15px rgba(24,119,242,0.4) !important;border:none !important;}
.social-x{background:#000000 !important;border:1px solid rgba(255,255,255,0.2) !important;box-shadow:0 0 15px rgba(0,0,0,0.4) !important;}
.footer-app-badges-row{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;flex-wrap:wrap !important;}
.footer-app-badge-link{display:inline-flex !important;align-items:center !important;}
.footer-app-badge-google{height:47px !important;width:auto !important;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;margin:-4px -6px !important;}
.footer-app-badge-apple{height:38px !important;width:auto !important;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)) !important;border-radius:6px !important;}
.footer-bottom-bar{border-top:1px solid rgba(255,255,255,0.12) !important;padding-top:24px !important;margin-top:24px !important;text-align:center !important;width:100% !important;}
.footer-bottom-copy{color:#95a5a6 !important;font-size:14px !important;}
.footer-bottom-copy p{margin:0 !important;color:#95a5a6 !important;}
.footer-bottom-copy p:last-child{margin-top:5px !important;}
.zielaan-smart-app-banner{position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;background:#0f172a !important;border-top:1px solid #1e293b !important;padding:0.65rem 1rem !important;padding-bottom:max(0.65rem,calc(0.5rem + var(--safe-bottom))) !important;z-index:99998 !important;display:flex;align-items:center !important;justify-content:space-between !important;gap:0.75rem !important;box-shadow:0 -8px 25px rgba(0,0,0,0.4) !important;}
[data-theme="light"] .zielaan-smart-app-banner,body.theme-light .zielaan-smart-app-banner{background:#ffffff !important;border-top:1px solid #e2e8f0 !important;box-shadow:0 -4px 20px rgba(0,0,0,0.08) !important;}
.smart-banner-left{display:flex !important;align-items:center !important;gap:0.65rem !important;}
.smart-banner-close{background:transparent !important;border:none !important;color:#94a3b8 !important;font-size:1.2rem !important;cursor:pointer !important;padding:0 4px !important;line-height:1 !important;}
.smart-banner-icon{width:38px !important;height:38px !important;border-radius:9px !important;}
.smart-banner-info{display:flex !important;flex-direction:column !important;gap:2px !important;}
.smart-banner-title{font-size:0.88rem !important;font-weight:800 !important;color:#ffffff !important;line-height:1.2 !important;}
[data-theme="light"] .smart-banner-title,body.theme-light .smart-banner-title{color:#0f172a !important;}
.smart-banner-sub{font-size:0.72rem !important;color:#94a3b8 !important;line-height:1.2 !important;}
[data-theme="light"] .smart-banner-sub,body.theme-light .smart-banner-sub{color:#64748b !important;}
.smart-banner-btn{background:#0284c7 !important;color:#ffffff !important;padding:0.5rem 0.95rem !important;font-size:0.8rem !important;font-weight:800 !important;border-radius:20px !important;text-decoration:none !important;white-space:nowrap !important;box-shadow:0 2px 8px rgba(2,132,199,0.35) !important;}
[data-device="mobile"][data-app="capacitor"] .zielaan-smart-app-banner,body.is-pwa-app .zielaan-smart-app-banner{display:none !important;}
}
/* --------------------------------------------------------------------------8. SKELETON LOADERS & APP SPLASH-------------------------------------------------------------------------- */.exam-skeleton-wrap{width:100%;display:flex;flex-direction:column;gap:0.75rem;padding-top:0.5rem;}
.shimmer-anim{background:linear-gradient(90deg,rgba(226,232,240,0.6) 0%,rgba(241,245,249,0.9) 50%,rgba(226,232,240,0.6) 100%);background-size:200% 100%;animation:shimmerSwipe 1.5s infinite linear;border-radius:12px;}
[data-theme="dark"] .shimmer-anim{background:linear-gradient(90deg,rgba(30,41,59,0.6) 0%,rgba(51,65,85,0.8) 50%,rgba(30,41,59,0.6) 100%);background-size:200% 100%;}
@keyframes shimmerSwipe{0%{background-position:200% 0;}
100%{background-position:-200% 0;}
}
.skeleton-pill{width:80px;height:24px;border-radius:8px;}
.skeleton-line{height:18px;border-radius:6px;}
.skeleton-box{width:100%;border-radius:14px;}
.zielaan-app-loader{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a;z-index:9999999;}
[data-device="mobile"] .zielaan-app-loader,[data-app="capacitor"] .zielaan-app-loader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a;z-index:9999999;display:flex;align-items:center;justify-content:center;opacity:1;visibility:visible;transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1),visibility 0.35s ease;user-select:none;-webkit-user-select:none;}
[data-device="mobile"] .zielaan-app-loader.hide-loader,[data-app="capacitor"] .zielaan-app-loader.hide-loader{opacity:0;visibility:hidden;pointer-events:none;}
.loader-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;}
.loader-logo-wrap{position:relative;width:76px;height:76px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;}
.loader-logo{width:64px;height:64px;border-radius:18px;box-shadow:0 10px 25px rgba(2,132,199,0.4);position:relative;z-index:2;animation:loaderPulse 2s infinite ease-in-out;}
.loader-glow-ring{position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:24px;background:linear-gradient(135deg,rgba(2,132,199,0.6),rgba(56,189,248,0.2));filter:blur(10px);z-index:1;}
.loader-brand-title{font-size:1.6rem;font-weight:800;color:#ffffff;letter-spacing:-0.02em;margin-bottom:0.25rem;}
.loader-brand-subtitle{font-size:0.85rem;color:#94a3b8;font-weight:600;margin-bottom:1.5rem;}
.loader-spinner-bar{width:140px;height:4px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;position:relative;}
.loader-spinner-track{width:50%;height:100%;background:linear-gradient(90deg,#0284c7,#38bdf8);border-radius:4px;position:absolute;animation:loaderTrack 1.4s infinite ease-in-out;}
@keyframes loaderPulse{0%,100%{transform:scale(1);}
50%{transform:scale(1.05);}
}
@keyframes loaderTrack{0%{left:-50%;}
100%{left:100%;}
}
[data-theme="dark"] .theme-switch,body.theme-dark .theme-switch{background-color:#000000 !important;border:1.5px solid rgba(255,255,255,0.22) !important;box-shadow:inset 0 2px 8px rgba(0,0,0,0.95),0 2px 8px rgba(0,0,0,0.4) !important;}