:root{--primary-color:#4361ee;--primary-light:#eef2ff;--primary-dark:#3f37c9;--primary-hover:#3a53cc;--primary-active:#2e43a3;--secondary-color:#35d8ac;--secondary-light:#e6f7f4;--secondary-dark:#2ba98d;--text-color:#2d3748;--text-dark:#333333;--text-medium:#4a5568;--text-light:#718096;--text-white:#ffffff;--border-color:#e2e8f0;--background-light:#f5f7fa;--background-white:#ffffff;--background-dark:#1a202c;--border-light:#e2e8f0;--border-medium:#cbd5e0;--shadow-color:rgba(0,0,0,.1);--danger-color:#e53e3e;--danger-light:#feb2b2;--danger-dark:#c53030;--danger-bg:#fff5f5;--success-color:#16a34a;--success-hover:#138a3f;--warning-color:#ff9800;--box-shadow:0 4px 6px rgba(0,0,0,.1);--box-shadow-sm:0 2px 4px rgba(0,0,0,.05);--box-shadow-lg:0 10px 15px -3px rgba(0,0,0,.1);--border-radius:5px;--transition:all .3s ease;--active-menu-bg:rgba(255,255,255,.15);--backdrop-overlay:rgba(0,0,0,.5);--backdrop-blur:blur(5px);--mobile-dropdown-bg:rgba(13,17,23,.95);--mobile-border:rgba(255,255,255,.1);--mobile-hover-bg:rgba(255,255,255,.1);--warning-dark:#e67e22;--danger-darkest:#c0392b;--session-warning-border:#0347b5;--session-expired-border:#e74c3c;--session-timer-bg:rgba(231,76,60,.1);--session-timer-border:rgba(231,76,60,.2);--session-timer-text:#e74c3c;--error-color:#e74c3c;--button-mint:#35d8ac;--button-mint-hover:#2ba98d;--button-mint-active:#249f7a;--button-mint-text:#ffffff;--button-mint-border:#35d8ac;--button-mint-ghost:transparent;--button-mint-ghost-hover:rgba(53,216,172,.1);--button-mint-ghost-active:rgba(53,216,172,.2);--button-mint-ghost-text:#35d8ac;--button-mint-ghost-border:#35d8ac;--button-blue:#4361ee;--button-blue-hover:#3a53cc;--button-blue-active:#2e43a3;--button-blue-text:#ffffff;--button-blue-border:#4361ee;--button-blue-ghost:transparent;--button-blue-ghost-hover:rgba(67,97,238,.1);--button-blue-ghost-active:rgba(67,97,238,.2);--button-blue-ghost-text:#4361ee;--button-blue-ghost-border:#4361ee;--button-green:#16a34a;--button-green-hover:#138a3f;--button-green-active:#0f6d31;--button-green-text:#ffffff;--button-green-border:#16a34a;--button-green-ghost:transparent;--button-green-ghost-hover:rgba(22,163,74,.1);--button-green-ghost-active:rgba(22,163,74,.2);--button-green-ghost-text:#16a34a;--button-green-ghost-border:#16a34a;--button-orange:#ff9800;--button-orange-hover:#f08c00;--button-orange-active:#d97706;--button-orange-text:#ffffff;--button-orange-border:#ff9800;--button-orange-ghost:transparent;--button-orange-ghost-hover:rgba(255,152,0,.1);--button-orange-ghost-active:rgba(255,152,0,.2);--button-orange-ghost-text:#ff9800;--button-orange-ghost-border:#ff9800;--button-purple:#8b5cf6;--button-purple-hover:#7c3aed;--button-purple-active:#6d28d9;--button-purple-text:#ffffff;--button-purple-border:#8b5cf6;--button-purple-ghost:transparent;--button-purple-ghost-hover:rgba(139,92,246,.1);--button-purple-ghost-active:rgba(139,92,246,.2);--button-purple-ghost-text:#8b5cf6;--button-purple-ghost-border:#8b5cf6;--button-red:#e53e3e;--button-red-hover:#dc2626;--button-red-active:#c53030;--button-red-text:#ffffff;--button-red-border:#e53e3e;--button-red-ghost:transparent;--button-red-ghost-hover:rgba(229,62,62,.1);--button-red-ghost-active:rgba(229,62,62,.2);--button-red-ghost-text:#e53e3e;--button-red-ghost-border:#e53e3e;--button-dark:#1a202c;--button-dark-hover:#2d3748;--button-dark-active:#4a5568;--button-dark-text:#ffffff;--button-dark-border:#1a202c;--button-dark-ghost:transparent;--button-dark-ghost-hover:rgba(26,32,44,.1);--button-dark-ghost-active:rgba(26,32,44,.2);--button-dark-ghost-text:#1a202c;--button-dark-ghost-border:#1a202c;--button-white:#ffffff;--button-white-hover:#f5f7fa;--button-white-active:#e2e8f0;--button-white-text:#1a202c;--button-white-border:#e2e8f0;--button-white-ghost:transparent;--button-white-ghost-hover:rgba(197,197,197,.307);--button-white-ghost-active:rgba(255,255,255,.2);--button-white-ghost-text:#ffffff;--button-white-ghost-border:#ffffff;--active-menu-bg:rgba(255,255,255,.15);--backdrop-overlay:rgba(0,0,0,.5);--backdrop-blur:blur(5px);--mobile-dropdown-bg:rgba(13,17,23,.95);--mobile-border:rgba(255,255,255,.1);--mobile-hover-bg:rgba(255,255,255,.1)}body,html{margin:0;padding:0;background-color:#edf1f7;color:var(--text-color);font-family:'Rubik',sans-serif}.main-container{max-width:1800px;margin:0 auto;padding:20px}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding-bottom:15px;border-bottom:1px solid var(--border-light);background-color:var(--background-white);border-radius:8px 8px 0 0;padding:20px 30px;box-shadow:var(--box-shadow-sm)}.content-container{max-width:1200px;margin:0 auto 30px;padding:0 20px}h1{font-size:28px;font-weight:500;color:var(--text-primary);margin:0;position:relative}.page-heading p{color:var(--text-light);margin:0}.actions-container{display:flex;align-items:flex-end;gap:15px;flex-wrap:wrap}.hidden{display:none}@media (max-width:992px){}@media (max-width:768px){.page-heading{flex-direction:column;align-items:flex-start;gap:15px}}@media (max-width:480px){}.header-container{display:flex;align-items:center;padding:8px 24px;background:linear-gradient(90deg,var(--background-dark),#2c3e50);box-shadow:0 2px 10px var(--shadow-color);position:relative;z-index:100;font-family:'Rubik',sans-serif;justify-content:space-between}.logo{display:flex;align-items:center;margin-right:20px}.logo img{width:34px;height:34px;filter:drop-shadow(0 2px 4px var(--shadow-color));transition:var(--transition)}.logo:hover img{transform:scale(1.1)}.menu-links.desktop-links{display:flex;align-items:center;margin-right:auto;gap:8px}.auth-buttons.desktop-buttons{display:flex;align-items:center;gap:10px;margin-left:auto}.menu-link{color:var(--text-white);text-decoration:none;padding:8px 14px;border-radius:4px;transition:var(--transition);display:flex;align-items:center;gap:6px;font-weight:500;position:relative}.menu-link i{font-size:16px}.menu-link.active{background-color:var(--active-menu-bg);position:relative}.menu-link.active::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:3px;background:linear-gradient(90deg,var(--primary-color),var(--accent-color));border-radius:3px}.menu-plans{padding:10px 18px;border-radius:6px;background:#28384700;color:#6facff;border:1px solid #6facff;box-shadow:0 2px 5px rgba(0,0,0,.2);font-weight:600;transition:all .3s ease;display:flex;align-items:center}.menu-plans i{font-size:16px}.menu-plans:hover{background:#0c469772;box-shadow:0 4px 8px rgba(0,0,0,.2)}.auth-buttons{z-index:10;display:flex;align-items:center;gap:10px}.auth-buttons button{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.05));color:#fff;border:solid lightgray 1px;border-radius:6px;padding:10px 18px;cursor:pointer;min-width:170px;font-size:.9rem;font-weight:500;font-family:'Rubik',sans-serif;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 5px rgba(0,0,0,.1)}.auth-buttons button i{font-size:16px}.auth-buttons button:hover{background:linear-gradient(135deg,rgba(255,255,255,.2),rgba(255,255,255,.1));box-shadow:0 4px 8px rgba(0,0,0,.2)}.auth-buttons button.login-btn,.auth-buttons button.student-login-btn{background:#667eea;border:2px solid #667eea;color:white;position:relative;overflow:hidden;box-shadow:0 4px 15px rgba(102,126,234,.3)}.auth-buttons button.login-btn:hover,.auth-buttons button.student-login-btn:hover{background:#5a6fd8;border:2px solid #5a6fd8;box-shadow:0 6px 20px rgba(102,126,234,.4)}.auth-buttons button.signup-btn,.auth-buttons button.teacher-login-btn{background:transparent;border:2px solid #35d8ac;color:#35d8ac;position:relative;transition:all .3s ease;font-weight:600}.auth-buttons button.signup-btn:hover,.auth-buttons button.teacher-login-btn:hover{background:#35d8ac;color:white;border:2px solid #35d8ac;box-shadow:0 6px 20px rgba(53,216,172,.4)}.playGame{background:#28384700;color:#05da05;border:1px solid #06da06;border-radius:6px;padding:10px 18px;font-weight:600;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:0 3px 6px rgba(0,0,0,.15)}.playGame i{font-size:16px}.playGame:hover{background:#039d033c;box-shadow:0 5px 10px rgba(0,0,0,.2)}.toggle-menu{display:none;background-color:var(--background-dark);color:var(--text-white);border:none;border-radius:var(--border-radius);padding:8px 12px;font-weight:600;font-size:.9rem;cursor:pointer;text-align:center;box-shadow:var(--box-shadow-sm);transition:var(--transition);align-items:center;justify-content:center;gap:6px;margin-left:auto}.toggle-menu i{font-size:18px;transition:var(--transition)}.toggle-menu:hover{box-shadow:var(--box-shadow)}.mobile-dropdown{display:none;position:absolute;top:100%;left:0;right:0;background:var(--mobile-dropdown-bg);box-shadow:var(--box-shadow-lg);border-radius:0 0 8px 8px;z-index:90;flex-direction:column;padding:10px}.mobile-section{display:flex;flex-direction:column;gap:8px;padding:10px 0}.mobile-section:not(:last-child){border-bottom:1px solid var(--mobile-border);margin-bottom:10px}.mobile-link{color:var(--text-white);text-decoration:none;padding:12px 16px;border-radius:var(--border-radius);transition:var(--transition);display:flex;align-items:center;gap:8px;font-weight:500;background-color:rgba(255,255,255,.05)}.mobile-link.playGame:hover{background-color:var(--button-green-ghost-hover)}.mobile-link.menu-plans:hover{background-color:var(--button-blue-ghost-hover)}.mobile-button{padding:12px 16px;border-radius:var(--border-radius);background-color:rgba(255,255,255,.05);color:var(--text-white);border:1px solid rgba(255,255,255,.1);font-size:.9rem;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;width:100%;transition:var(--transition)}.mobile-button.student-login-btn{background:#667eea;border:2px solid #667eea;color:white;box-shadow:0 4px 15px rgba(102,126,234,.3)}.mobile-button.teacher-login-btn{background:transparent;border:2px solid #35d8ac;color:#35d8ac}.mobile-button i{font-size:16px}.mobile-button:hover{background-color:rgba(255,255,255,.1)}.cookie-consent{position:fixed;bottom:20px;left:20px;max-width:480px;width:calc(100% - 40px);background:#ffffff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);z-index:9999;border:none;overflow:hidden;animation:slideUp .6s cubic-bezier(.16,1,.3,1);font-family:'Rubik',sans-serif}@keyframes slideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.cookie-content{padding:20px}.cookie-content h3{margin-top:0;margin-bottom:8px;color:#1a1a1a;font-weight:700;display:flex;align-items:center;gap:8px;font-size:18px;letter-spacing:-.3px}.cookie-content h3 i{color:#ff9800;font-size:20px;filter:drop-shadow(0 2px 4px rgba(255,152,0,.3))}.cookie-content>p{font-size:13px;color:#4a5568;margin-bottom:12px;line-height:1.5}.cookie-types{background:linear-gradient(135deg,#f7fafc 0%,#edf2f7 100%);border-radius:8px;padding:12px;margin:12px 0;border:1px solid #e2e8f0}.cookie-type{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}.cookie-type:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.cookie-type h4{margin:0 0 6px 0;font-size:13px;font-weight:600;color:#1a1a1a;display:flex;align-items:center;gap:6px}.cookie-type h4 i{font-size:14px}.cookie-type h4 i.fa-shield-alt{color:#10b981}.cookie-type h4 i.fa-video{color:#3b82f6}.cookie-type p{margin:0;font-size:12px;color:#64748b;line-height:1.5}.cookie-buttons{display:flex;gap:8px;margin-top:12px}@media (max-width:640px){.cookie-buttons{flex-direction:column}}.accept-cookies-btn,.reject-cookies-btn{flex:1;border:none;border-radius:8px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 2px 8px rgba(0,0,0,.1);letter-spacing:.3px}.accept-cookies-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;position:relative;overflow:hidden}.accept-cookies-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.accept-cookies-btn:hover::before{left:100%}.accept-cookies-btn:hover{background:linear-gradient(135deg,#059669 0%,#047857 100%);box-shadow:0 8px 24px rgba(16,185,129,.4);transform:translateY(-2px)}.accept-cookies-btn:active{transform:translateY(0)}.reject-cookies-btn{background:#ffffff;color:#64748b;border:2px solid #e2e8f0;box-shadow:none}.reject-cookies-btn:hover{background:#f8fafc;color:#475569;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.08)}.reject-cookies-btn:active{transform:translateY(0)}.cookie-footer{margin-top:12px;padding-top:12px;border-top:1px solid #e2e8f0;text-align:center}.cookie-policy-link{color:#3b82f6;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:all .3s ease;font-weight:500;padding:3px 6px;border-radius:4px}.cookie-policy-link:hover{color:#2563eb;background:#eff6ff;gap:8px}.cookie-policy-link i{transition:transform .3s ease}.cookie-policy-link:hover i{transform:rotate(15deg) scale(1.1)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.logoutModal{display:none;position:fixed;z-index:10000;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px 30px;border-radius:10px;text-align:center;max-width:450px;width:90%;animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{from{opacity:0;transform:translate(-50%,-48%)}to{opacity:1;transform:translate(-50%,-50%)}}.logout-modal-content{background-color:var(--background-white);padding:30px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-lg);border-top:4px solid var(--primary-dark);text-align:center}.logout-modal-content h3{font-size:1.5rem;margin-bottom:15px;color:var(--text-dark);font-weight:600}.logout-modal-content p{font-size:1rem;line-height:1.6;margin-bottom:20px;color:var(--text-medium)}.logout-modal-buttons{display:flex;justify-content:center;gap:15px;margin-top:20px}.logout-modal-buttons button{background-color:var(--background-white);color:var(--text-dark);border:1px solid var(--border-light);border-radius:var(--border-radius);padding:10px 20px;font-weight:500;cursor:pointer;transition:var(--transition);min-width:120px;font-size:.95rem;font-family:'Rubik',sans-serif}button#confirmLogout{background-color:var(--button-blue);color:var(--button-blue-text)}button#confirmLogout:hover{background-color:var(--button-blue-hover);color:var(--button-blue-text)}.logout-modal-buttons button.confirm-logout{background-color:var(--button-green);color:var(--button-green-text);border:1px solid var(--button-green-border)}.logout-modal-buttons button:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.logout-modal-buttons button.confirm-logout:hover{background-color:var(--button-green-hover);border-color:var(--button-green-hover)}.logout-modal-buttons button:active{transform:translateY(0)}.modal-backdrop{display:none;position:fixed;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background-color:var(--backdrop-overlay);z-index:9999;animation:backdropFadeIn .2s ease-out;backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur)}@keyframes backdropFadeIn{from{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}}@media screen and (max-width:520px){.logout-modal-buttons{flex-direction:column;gap:10px}.logout-modal-buttons button{width:100%;margin:0}.logoutModal{padding:20px;width:85%}}@media screen and (max-width:768px){.menu-links.desktop-links,.auth-buttons.desktop-buttons{display:none}.toggle-menu{display:flex}.mobile-dropdown.active{display:flex;animation:slideDown .3s ease-out forwards}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.header-container{padding:8px 16px}}.toast{position:fixed;bottom:30px;right:30px;padding:15px 25px;box-shadow:var(--box-shadow-lg);z-index:1100;font-size:15px;font-weight:500;display:flex;align-items:center;gap:10px;animation:slideIn .3s forwards;max-width:450px;color:var(--text-white)}.toast.info{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));border-left:4px solid var(--primary-dark)}.toast.success{background:linear-gradient(135deg,var(--success-color),var(--secondary-dark));border-left:4px solid var(--secondary-dark)}.toast.error{background:linear-gradient(135deg,var(--danger-color),var(--danger-darkest));border-left:4px solid var(--danger-darkest)}.toast.warning{background:linear-gradient(135deg,var(--warning-color),var(--warning-dark));border-left:4px solid var(--warning-dark)}.toast i{font-size:18px}.toast.fade-out{opacity:0;transition:opacity .3s ease-out}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.session-warning-modal,.session-expired-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--backdrop-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;backdrop-filter:var(--backdrop-blur);-webkit-backdrop-filter:var(--backdrop-blur)}.session-warning-modal.active,.session-expired-modal.active{opacity:1;visibility:visible}.session-warning-content,.session-expired-content{background-color:var(--background-white);padding:25px;border-radius:var(--border-radius);box-shadow:var(--box-shadow-lg);max-width:400px;width:90%;text-align:center;transform:translateY(-20px);transition:transform .3s ease;border:1px solid var(--border-light)}.session-warning-content{border-top:4px solid var(--session-warning-border)}.session-expired-content{border-top:4px solid var(--session-expired-border)}.session-warning-modal.active .session-warning-content,.session-expired-modal.active .session-expired-content{transform:translateY(0)}.session-warning-content h3,.session-expired-content h3{font-size:1.5rem;margin-top:0;margin-bottom:10px;color:var(--text-dark);font-weight:600}.session-warning-content p,.session-expired-content p{color:var(--text-medium);font-size:1rem;line-height:1.5;margin-bottom:15px}.session-timer{font-size:24px;font-weight:bold;margin:15px 0;padding:8px 15px;background-color:var(--session-timer-bg);border-radius:var(--border-radius);color:var(--session-timer-text);display:inline-block;border:1px solid var(--session-timer-border);font-family:'Rubik',sans-serif;letter-spacing:1px}.session-warning-buttons{display:flex;justify-content:center;gap:12px;margin-top:20px}.session-warning-modal button,.session-expired-modal button{background-color:var(--background-white);color:var(--text-dark);border:1px solid var(--border-light);border-radius:var(--border-radius);padding:10px 20px;font-weight:500;cursor:pointer;transition:var(--transition);min-width:120px;font-size:.95rem;font-family:'Rubik',sans-serif}.session-warning-modal .primary-btn{background-color:var(--button-blue);color:var(--button-blue-text);border:1px solid var(--button-blue-border)}.session-warning-modal .primary-btn:hover{background-color:var(--button-blue-hover)}.session-expired-modal .primary-btn{background-color:var(--button-red);color:var(--button-red-text);border:1px solid var(--button-red-border)}.session-expired-modal .primary-btn:hover{background-color:var(--button-red-hover)}.session-warning-modal button:hover,.session-expired-modal button:hover{transform:translateY(-2px);box-shadow:var(--box-shadow)}.session-warning-modal button:active,.session-expired-modal button:active{transform:translateY(0)}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}.session-timer.urgent{animation:pulse 2s infinite;color:var(--text-white);background-color:var(--button-red)}.session-checking-indicator{position:fixed;top:20px;right:20px;background:rgba(33,150,243,.9);color:white;padding:10px 15px;border-radius:var(--border-radius);font-size:14px;z-index:9999;display:flex;align-items:center;gap:8px;animation:fadeIn .3s ease;backdrop-filter:var(--backdrop-blur)}.session-expired-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--backdrop-overlay);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:var(--transition);backdrop-filter:var(--backdrop-blur)}.session-expired-modal.active{opacity:1;visibility:visible}.session-expired-content{background:var(--background-white);padding:30px;border-radius:10px;box-shadow:var(--box-shadow-lg);text-align:center;max-width:400px;width:90%;margin:20px;border-top:4px solid var(--session-expired-border)}.session-expired-content h3{margin:0 0 15px 0;color:var(--danger-color);font-size:20px}.session-expired-content p{color:var(--text-medium);margin:0 0 20px 0;line-height:1.5}.session-expired-buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.session-expired-buttons .primary-btn{background:var(--primary-color);color:white;border:none;padding:12px 20px;border-radius:var(--border-radius);cursor:pointer;font-weight:500;transition:var(--transition);flex:1;min-width:120px}.session-expired-buttons .primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.session-expired-buttons .secondary-btn{background:var(--text-light);color:white;border:none;padding:12px 20px;border-radius:var(--border-radius);cursor:pointer;font-weight:500;transition:var(--transition);flex:1;min-width:120px}.session-expired-buttons .secondary-btn:hover{background:var(--text-medium);transform:translateY(-1px)}.session-warning-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--backdrop-overlay);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:var(--transition);backdrop-filter:var(--backdrop-blur)}.session-warning-modal.active{opacity:1;visibility:visible}.session-warning-content{background:var(--background-white);padding:30px;border-radius:10px;box-shadow:var(--box-shadow-lg);text-align:center;max-width:400px;width:90%;margin:20px;border-top:4px solid var(--session-warning-border)}.session-warning-content h3{margin:0 0 15px 0;color:var(--warning-color);font-size:20px}.session-timer{background:var(--session-timer-bg);border:1px solid var(--session-timer-border);color:var(--session-timer-text);padding:15px;border-radius:var(--border-radius);font-size:24px;font-weight:bold;margin:15px 0;font-family:monospace;letter-spacing:2px}.session-timer.urgent{animation:pulse-urgent 1s infinite;background:rgba(231,76,60,.2);border-color:var(--danger-color)}.session-warning-buttons{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}.session-warning-buttons .primary-btn,.session-warning-buttons .secondary-btn{padding:12px 20px;border-radius:var(--border-radius);cursor:pointer;font-weight:500;transition:var(--transition);border:none;flex:1;min-width:120px}.session-warning-buttons .primary-btn{background:var(--primary-color);color:white}.session-warning-buttons .primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.session-warning-buttons .secondary-btn{background:transparent;color:var(--text-medium);border:1px solid var(--border-medium)}.session-warning-buttons .secondary-btn:hover{background:var(--background-light);transform:translateY(-1px)}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes pulse-urgent{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (max-width:480px){.session-expired-content,.session-warning-content{padding:20px;margin:10px}.session-expired-buttons,.session-warning-buttons{flex-direction:column}.session-expired-buttons .primary-btn,.session-expired-buttons .secondary-btn,.session-warning-buttons .primary-btn,.session-warning-buttons .secondary-btn{min-width:auto;width:100%}.session-timer{font-size:20px;padding:12px}}.session-checking-indicator .spinner{width:16px;height:16px;border:2px solid #fff;border-top:2px solid transparent;border-radius:50%;animation:spin 1s linear infinite}[data-tooltip]{position:relative}[data-tooltip]:before{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;padding:6px 12px;border-radius:4px;background-color:var(--background-dark);color:var(--text-white);text-align:center;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;transition:all .2s;pointer-events:none;z-index:10;box-shadow:var(--box-shadow-sm)}[data-tooltip]:after{content:'';position:absolute;bottom:100%;left:50%;transform:translateX(-50%);border-width:5px;border-style:solid;border-color:var(--background-dark) transparent transparent transparent;margin-bottom:-2px;opacity:0;visibility:hidden;transition:all .2s}[data-tooltip]:hover:before,[data-tooltip]:hover:after{opacity:1;visibility:visible}[data-tooltip-position="left"]:before{top:50%;left:auto;right:100%;transform:translateY(-50%);margin-bottom:0;margin-right:8px}[data-tooltip-position="left"]:after{top:50%;left:auto;right:100%;bottom:auto;transform:translateY(-50%);margin-bottom:0;margin-right:3px;border-color:transparent transparent transparent var(--background-dark)}[data-tooltip-position="right"]:before{top:50%;left:100%;transform:translateY(-50%);margin-bottom:0;margin-left:8px}[data-tooltip-position="right"]:after{top:50%;left:100%;bottom:auto;transform:translateY(-50%);margin-bottom:0;margin-left:3px;border-color:transparent var(--background-dark) transparent transparent}@media (max-width:768px){[data-tooltip]:before{white-space:normal;max-width:200px}}