/* Shared current presentation. */
@font-face { font-family: Elounda; src: url("/fonts/Elounda-Italic.otf") format("opentype"); font-style: italic; font-weight: normal; font-display: swap; }
@font-face { font-family: Lunera; src: url("/fonts/Lunera-RoundRegular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Lunera; src: url("/fonts/Lunera-RoundBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: Lunera; src: url("/fonts/Lunera-RoundMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Lunera; src: url("/fonts/Lunera-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }
* { box-sizing: border-box; margin: 0px; padding: 0px; }
body { font-family: Lunera, Arial, sans-serif; line-height: 1.4; background: rgb(250, 250, 250); color: rgb(34, 34, 34); padding-bottom: 70px; }
h1 { font-family: Elounda, Georgia, serif; font-style: italic; font-size: 2.5rem; font-weight: normal; color: rgb(44, 62, 80); margin-bottom: 0.5rem; text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.subtitle { font-family: Lunera, Arial, sans-serif; font-weight: 500; font-size: 1.1rem; color: rgb(52, 73, 94); margin-bottom: 1.5rem; margin-top: 0px; letter-spacing: 0.5px; }
h2, h3, h4, h5, h6 { font-family: Lunera, Arial, sans-serif; font-weight: 700; color: rgb(44, 62, 80); }
button, .button { font-family: Lunera, Arial, sans-serif; font-weight: 600; }
input, select, textarea, label { font-family: Lunera, Arial, sans-serif; }
table, th, td { font-family: Lunera, Arial, sans-serif; }
#levelTitle, #cropTitle { font-family: Lunera, Arial, sans-serif; font-weight: 700; }
.quiz-question, .result-text, .explanation { font-family: Lunera, Arial, sans-serif; }
select { font-family: Lunera, Arial, sans-serif; font-weight: 500; }
option { font-family: Lunera, Arial, sans-serif; font-weight: 400; }
.section-container { background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0.75rem 1rem; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 1px 2px; transition: box-shadow 0.2s; }
.section-container:hover { box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px, rgba(0, 0, 0, 0.04) 0px 2px 4px; }
header .section-container, .selectors { background: linear-gradient(135deg, rgb(248, 249, 250) 0%, rgb(241, 243, 244) 100%); }
select { font-family: Lunera, Arial, sans-serif; }
option { font-family: Lunera, Arial, sans-serif; }
@media (min-width: 768px) {
.selectors { display: flex; gap: 1rem; align-items: flex-end; }
.selectors > div { flex: 1 1 0%; }
}
.nav-links { display: flex; gap: 0.25rem; flex-shrink: 0; }
.nav-auth { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; justify-content: flex-end; }
#pwaInstallBtn { display: none; align-items: center; gap: 4px; background: rgb(255, 255, 255); color: rgb(46, 125, 50); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0.35rem 0.6rem; font-size: 0.8rem; font-weight: 600; border-radius: 6px; cursor: pointer; white-space: nowrap; }
#pwaInstallBtn:hover { background: rgb(240, 240, 240); }
.install-icon { font-weight: bold; }
.auth-logged-out { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.auth-logged-out input { padding: 0.4rem 0.5rem; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); font-size: 0.8rem; width: 110px; margin: 0px; min-width: 80px; }
.auth-logged-out input::placeholder { color: rgba(255, 255, 255, 0.6); }
.nav-auth button { padding: 0.35rem 0.6rem; font-size: 0.8rem; margin: 0px; background: rgb(255, 255, 255); color: rgb(46, 125, 50); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; box-shadow: none; white-space: nowrap; }
.nav-auth button:hover { background: rgb(240, 240, 240); transform: translateY(-1px); }
.nav-auth button.secondary { background: rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); border: 1px solid rgba(255, 255, 255, 0.4); }
.nav-auth button.google-btn { padding: 0.35rem 0.6rem; display: flex; justify-content: center; align-items: center; font-weight: 600; font-size: 0.8rem; background: rgb(66, 133, 244); color: rgb(255, 255, 255); }
.nav-auth button.google-btn:hover { background: rgb(53, 122, 232); }
.auth-logged-in { display: flex; align-items: center; gap: 0.75rem; color: rgb(255, 255, 255); font-size: 0.85rem; }
@media (max-width: 768px) {
.nav-links { display: none !important; }
.nav-auth { margin-left: auto; display: flex !important; flex-direction: row !important; gap: 0.5rem !important; }
#pwaInstallBtn { display: none; padding: 0.4rem 0.6rem; font-size: 0.75rem; }
}
@media (max-width: 500px) {
.nav-links { display: none !important; }
}
#aiContainer { margin-top: 1rem; position: relative; z-index: 10; pointer-events: auto; }
#aiRecommendation { width: 100%; height: 120px; resize: vertical; padding: 1rem; border: 2px solid rgb(224, 224, 224); border-radius: 8px; font-family: inherit; font-size: 1rem; transition: 0.2s; display: block; color: rgb(51, 51, 51); position: relative; z-index: 11; pointer-events: auto; cursor: text; background: rgb(255, 255, 255) !important; }
#aiRecommendation:focus { outline: none; border-color: rgb(46, 125, 50); box-shadow: rgba(46, 125, 50, 0.1) 0px 0px 0px 3px; }
#aiRecommendation:disabled { cursor: not-allowed; background: rgb(245, 245, 245) !important; }
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, textarea:focus { outline: none; border-color: rgb(46, 125, 50); box-shadow: rgba(46, 125, 50, 0.1) 0px 0px 0px 3px; }
input[type="email"]::placeholder, input[type="password"]::placeholder, input[type="text"]::placeholder, textarea::placeholder { color: rgb(158, 158, 158); }
select { padding: 0.6rem 2rem 0.6rem 0.75rem; border: 2px solid rgb(224, 224, 224); border-radius: 8px; font-family: Lunera, Arial, sans-serif; font-size: 0.95rem; font-weight: 500; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") right 0.75rem center no-repeat rgb(255, 255, 255); appearance: none; cursor: pointer; transition: 0.2s; }
select:focus { outline: none; border-color: rgb(46, 125, 50); box-shadow: rgba(46, 125, 50, 0.1) 0px 0px 0px 3px; }
select:hover { border-color: rgb(189, 189, 189); }
#logoutBtn { background: rgb(46, 125, 50); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; }
#logoutBtn:hover { background: rgb(27, 94, 32); }
button { background: linear-gradient(135deg, rgb(46, 125, 50) 0%, rgb(27, 94, 32) 100%); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: 8px; padding: 0.6rem 1.25rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; margin-right: 0.5rem; margin-top: 0.4rem; transition: 0.25s; box-shadow: rgba(46, 125, 50, 0.2) 0px 2px 4px; }
button:hover { background: linear-gradient(135deg, rgb(27, 94, 32) 0%, rgb(13, 61, 18) 100%); transform: translateY(-1px); box-shadow: rgba(46, 125, 50, 0.3) 0px 4px 8px; }
button:active { transform: translateY(0px); box-shadow: rgba(46, 125, 50, 0.2) 0px 2px 4px; }
button:disabled { background: rgb(189, 189, 189); cursor: not-allowed; transform: none; box-shadow: none; }
button.secondary { background: rgb(255, 255, 255); color: rgb(46, 125, 50); border: 2px solid rgb(46, 125, 50); box-shadow: none; }
button.secondary:hover { background: rgb(241, 248, 233); transform: translateY(-1px); }
.trigger-cell { font-size: large; font-weight: bold; background: rgb(249, 249, 249); }
footer { position: fixed; bottom: 0px; left: 0px; width: 100%; background: rgb(255, 255, 255); border-top: 1px solid rgb(204, 204, 204); display: flex; justify-content: center; align-items: center; padding: 0.6rem; box-shadow: rgba(0, 0, 0, 0.1) 0px -1px 5px; z-index: 100; }
.env-slider-container { display: flex; gap: 5%; }
.env-slider-container .section-container { background: rgb(255, 255, 255); border-radius: 8px; padding: 1.5rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
input[type="range"] { appearance: none; width: 100%; height: 6px; background: rgb(224, 224, 224); border-radius: 3px; outline: none; cursor: pointer; transition: background 0.2s; }
input[type="range"]:hover { background: rgb(208, 208, 208); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; background: linear-gradient(135deg, rgb(58, 125, 68) 0%, rgb(45, 90, 61) 100%); border-radius: 50%; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; transition: transform 0.15s, box-shadow 0.15s; }
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: rgba(0, 0, 0, 0.25) 0px 3px 10px; }
input[type="range"]::-webkit-slider-thumb:active { transform: scale(0.95); }
input[type="range"]:disabled { opacity: 0.5; cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { background: rgb(153, 153, 153); box-shadow: none; }
.crop-selection-container { margin: 10px 0px; display: inline-block; }
.crop-dropdown-container { margin-top: 10px; padding: 10px; border: 1px solid rgb(221, 221, 221); border-radius: 4px; background: rgb(249, 249, 249); display: inline-block; min-width: 200px; }
.status-perfect { background: rgba(46, 125, 50, 0.15); color: rgb(46, 125, 50); }
.status-good { background: rgba(56, 142, 60, 0.15); color: rgb(56, 142, 60); }
.status-warning { background: rgba(245, 124, 0, 0.15); color: rgb(245, 124, 0); }
.status-critical { background: rgba(211, 47, 47, 0.15); color: rgb(211, 47, 47); }
.progress-bar { height: 100%; border-radius: 6px; transition: width 0.3s; position: relative; }
.progress-optimal { background: linear-gradient(90deg, rgb(76, 175, 80), rgb(46, 125, 50)); }
.progress-warning { background: linear-gradient(90deg, rgb(255, 152, 0), rgb(245, 124, 0)); }
.progress-critical { background: linear-gradient(90deg, rgb(244, 67, 54), rgb(211, 47, 47)); }
.app-title { flex: 0 0 auto; }
.app-title h1 { font-family: Elounda, Georgia, serif; font-style: italic; font-size: 2.2rem; font-weight: normal; color: rgb(44, 62, 80); margin: 0px; letter-spacing: -0.02em; text-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.app-title .subtitle { font-family: Lunera, Arial, sans-serif; font-weight: 500; font-size: 0.95rem; color: rgb(52, 73, 94); margin: -2px 0px 0px; letter-spacing: 0.5px; }
.header-controls { display: flex; align-items: center; gap: 2rem; flex: 1 1 0%; justify-content: flex-end; position: relative; }
.main-controls { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; position: relative; z-index: 100; }
.header-auth { display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 50; }
.auth-logged-out { display: flex; align-items: center; gap: 0.5rem; }
.auth-logged-out input { width: 120px; padding: 0.5rem 0.75rem; border: 2px solid rgb(206, 212, 218); border-radius: 6px; font-family: Lunera, Arial, sans-serif; font-size: 0.9rem; }
.auth-logged-out button { padding: 0.5rem 0.8rem; font-size: 0.9rem; white-space: nowrap; }
.auth-logged-in { display: flex; align-items: center; gap: 0.75rem; background: rgba(255, 255, 255, 0.9); padding: 0.5rem 1rem; border-radius: 6px; border: 2px solid rgb(206, 212, 218); min-height: 44px; }
.auth-logged-in #welcome { font-weight: 600; font-family: Lunera, Arial, sans-serif; color: rgb(44, 62, 80); font-size: 0.9rem; white-space: nowrap; }
.auth-logged-in button { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
.control-group { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; position: relative; z-index: 200; }
.control-group label { font-family: Lunera, Arial, sans-serif; font-size: 0.85rem; font-weight: 600; color: rgb(73, 80, 87); margin: 0px; white-space: nowrap; }
.control-group select { min-width: 160px; min-height: 44px; padding: 0.5rem 0.75rem; border: 2px solid rgb(206, 212, 218); border-radius: 6px; background: white; font-family: Lunera, Arial, sans-serif; font-size: 0.9rem; font-weight: 500; transition: 0.2s; cursor: pointer; }
.control-group select:focus { border-color: rgb(40, 167, 69); box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 2px; outline: none; }
.control-group select:hover { border-color: rgb(173, 181, 189); }
button, .button, .crop-toggle, .toggle-btn { padding: 0.5rem 1rem; border-radius: 6px; font-family: Lunera, Arial, sans-serif; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: 0.2s; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: white !important; color: rgb(44, 62, 80) !important; border: 2px solid rgb(206, 212, 218) !important; }
button:hover, .button:hover, .crop-toggle:hover, .toggle-btn:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px; background: rgb(248, 249, 250) !important; border-color: rgb(173, 181, 189) !important; }
button:active, .button:active, .crop-toggle:active, .toggle-btn:active { transform: translateY(0px); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
button:focus, .button:focus, .crop-toggle:focus, .toggle-btn:focus { outline: none; box-shadow: rgba(40, 167, 69, 0.25) 0px 0px 0px 2px; border-color: rgb(40, 167, 69) !important; }
button:disabled, .button:disabled { cursor: not-allowed; transform: none; box-shadow: none; background: rgb(248, 249, 250) !important; color: rgb(108, 117, 125) !important; border-color: rgb(233, 236, 239) !important; }
.footer-buttons button { margin-right: 0.5rem; margin-top: 0.4rem; background: white !important; color: rgb(44, 62, 80) !important; border: 2px solid rgb(40, 167, 69) !important; }
.footer-buttons button:hover { background: rgb(240, 255, 244) !important; border-color: rgb(32, 201, 151) !important; }
.auth-container button { font-size: 0.8rem; padding: 0.4rem 0.6rem; background: white !important; color: rgb(44, 62, 80) !important; border: 1px solid rgb(206, 212, 218) !important; }
.auth-container button:hover { background: rgb(248, 249, 250) !important; border-color: rgb(173, 181, 189) !important; }
.crop-dropdown-container { position: absolute; top: 100%; background: white; border: 2px solid rgb(40, 167, 69); border-radius: 6px; padding: 1rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; z-index: 2000; min-width: 200px; margin-top: 0.5rem; }
.crop-dropdown-container { right: 0px; }
@media (max-width: 1400px) {
.crop-dropdown-container { right: auto; left: 0px; }
}
.crop-dropdown-container select { width: 100%; font-family: Lunera, Arial, sans-serif; }
@media (max-width: 1200px) {
.header-controls { width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.main-controls { flex-wrap: wrap; gap: 1rem; flex: 1 1 0%; }
.control-group { flex: 1 1 0%; min-width: 150px; }
.control-group select { width: 100%; min-width: 0px; }
.header-auth { margin-top: 0px; }
.auth-logged-out { flex-direction: row; align-items: center; gap: 0.5rem; }
.auth-logged-out input, .auth-logged-out button { min-height: 44px; }
}
@media (max-width: 768px) {
.app-title h1 { font-size: 1.8rem; }
.app-title .subtitle { font-size: 0.85rem; }
.header-controls { flex-direction: column; align-items: stretch; gap: 0.75rem; width: 100%; }
.main-controls { flex-direction: column; align-items: stretch; gap: 0.75rem; }
.control-group { align-items: stretch; }
.control-group label { text-align: left; }
.control-group select, .crop-toggle { width: 100%; }
.header-auth { align-items: stretch; min-width: 100%; }
.auth-logged-in { justify-content: space-between; }
}
@media (min-width: 1201px) {
.main-controls { flex-direction: row; align-items: center; }
.header-controls { flex-direction: row; align-items: center; }
.auth-logged-out { flex-direction: row; align-items: center; }
}
@media (max-width: 480px) {
.app-title h1 { font-size: 1.6rem; }
.header-controls { gap: 0.5rem; }
}
@media (max-width: 480px) {
.app-title h1 { font-size: 1.6rem; }
.header-controls { gap: 0.5rem; }
}
.auth-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); z-index: 2000; display: flex; justify-content: center; align-items: center; padding: 1rem; }
.auth-modal { background: white; border-radius: 16px; max-width: 400px; width: 100%; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px; overflow: hidden; animation: 0.3s ease 0s 1 normal none running modalSlideIn; }
@keyframes modalSlideIn { 
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.auth-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid rgb(224, 224, 224); }
.auth-modal-header h2 { margin: 0px; font-family: Elounda, Georgia, serif; font-style: italic; color: rgb(44, 62, 80); font-size: 1.5rem; }
.auth-modal-close { font-size: 1.5rem; color: rgb(102, 102, 102); cursor: pointer; padding: 0.25rem 0.5rem; min-height: auto; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.auth-modal-close:hover { color: rgb(51, 51, 51); border-radius: 4px; background: rgb(240, 240, 240) !important; }
.auth-tabs { display: flex; padding: 0px 1.5rem; margin-top: 1rem; }
.auth-tab { flex: 1 1 0%; padding: 0.75rem 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; min-height: auto; background: transparent !important; border-width: medium medium 3px !important; border-style: none none solid !important; border-color: currentcolor currentcolor transparent !important; border-image: none !important; color: rgb(102, 102, 102) !important; }
.auth-tab:hover { color: rgb(46, 125, 50) !important; background: transparent !important; }
.auth-tab.active { color: rgb(46, 125, 50) !important; border-bottom-color: rgb(46, 125, 50) !important; }
.auth-form { padding: 1.5rem; }
.auth-form .form-group { margin-bottom: 1rem; }
.auth-form .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: rgb(51, 51, 51); }
.auth-form .form-group input { width: 100%; padding: 0.75rem 1rem; border: 2px solid rgb(224, 224, 224); border-radius: 8px; font-family: Lunera, Arial, sans-serif; font-size: 1rem; transition: border-color 0.2s; box-sizing: border-box; }
.auth-form .form-group input:focus { outline: none; border-color: rgb(46, 125, 50); }
.btn-full { width: 100%; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: white !important; color: rgb(51, 51, 51) !important; border: 2px solid rgb(224, 224, 224) !important; }
.btn-google:hover { background: rgb(245, 245, 245) !important; border-color: rgb(204, 204, 204) !important; }
.auth-divider { text-align: center; margin: 1.25rem 0px; position: relative; }
.auth-divider::before, .auth-divider::after { content: ""; position: absolute; top: 50%; width: 40%; height: 1px; background: rgb(224, 224, 224); }
.auth-divider::before { left: 0px; }
.auth-divider::after { right: 0px; }
.auth-divider span { background: white; padding: 0px 1rem; color: rgb(153, 153, 153); font-size: 0.9rem; }
.auth-footer { text-align: center; padding: 0px 1.5rem 1.5rem; color: rgb(102, 102, 102); font-size: 0.9rem; }
.auth-footer a { color: rgb(46, 125, 50); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.toast-container { position: fixed; top: 80px; right: 1rem; z-index: 3000; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-radius: 8px; background: white; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; min-width: 280px; max-width: 400px; opacity: 0; transform: translateX(100%); transition: 0.3s; }
.toast.show { opacity: 1; transform: translateX(0px); }
.toast-success { border-left: 4px solid rgb(46, 125, 50); background: rgb(232, 245, 233); }
.toast-error { border-left: 4px solid rgb(211, 47, 47); background: rgb(255, 235, 238); }
.toast-info { border-left: 4px solid rgb(21, 101, 192); background: rgb(227, 242, 253); }
.toast-close { font-size: 1.2rem; color: rgb(102, 102, 102); cursor: pointer; padding: 0px; min-height: auto; width: 24px; height: 24px; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.join-code-display { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, rgb(232, 245, 233) 0%, rgb(200, 230, 201) 100%); padding: 0.5rem 1rem; border-radius: 8px; font-family: "Courier New", monospace; font-weight: 700; font-size: 1.1rem; letter-spacing: 2px; color: rgb(27, 94, 32); border: 2px dashed rgb(46, 125, 50); }
.join-code-display button { padding: 0.25rem 0.5rem; font-size: 0.8rem; min-height: auto; background: rgb(46, 125, 50) !important; color: white !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.loading-overlay { position: fixed; inset: 0px; background: rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2500; }
.loading-spinner { width: 40px; height: 40px; border-width: 4px; border-style: solid; border-color: rgb(46, 125, 50) rgb(224, 224, 224) rgb(224, 224, 224); border-image: none; border-radius: 50%; animation: 1s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.loading-text { margin-top: 1rem; color: rgb(102, 102, 102); font-weight: 500; }
.user-role-badge.role-owner { background: linear-gradient(135deg, rgb(255, 215, 0), rgb(255, 140, 0)); color: rgb(0, 0, 0); }
.user-role-badge.role-instructor { background: rgb(232, 245, 233); color: rgb(46, 125, 50); }
.user-role-badge.role-client { background: rgb(227, 242, 253); color: rgb(21, 101, 192); }
.user-role-badge.role-student { background: rgb(243, 229, 245); color: rgb(123, 31, 162); }
.user-role-badge.role-free { background: rgba(200, 200, 200, 0.3); color: rgb(102, 102, 102); }
.auth-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 3000; backdrop-filter: blur(4px); }
.auth-modal { background: white; border-radius: 16px; padding: 2rem; width: 90%; max-width: 400px; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px; animation: 0.3s ease 0s 1 normal none running modalSlideIn; }
@keyframes modalSlideIn { 
  0% { opacity: 0; transform: translateY(-20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.auth-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.auth-modal-header h2 { margin: 0px; color: rgb(46, 125, 50); font-size: 1.5rem; }
.auth-modal-close { font-size: 1.75rem; color: rgb(153, 153, 153); cursor: pointer; padding: 0px; line-height: 1; min-height: auto; width: 32px; height: 32px; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.auth-modal-close:hover { color: rgb(51, 51, 51); }
.auth-tabs { display: flex; gap: 0px; margin-bottom: 1.5rem; border-bottom: 2px solid rgb(224, 224, 224); }
.auth-tab { flex: 1 1 0%; padding: 0.75rem 1rem; font-weight: 600; color: rgb(102, 102, 102); cursor: pointer; position: relative; transition: color 0.2s; min-height: auto; background: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; }
.auth-tab:hover { color: rgb(46, 125, 50); }
.auth-tab.active { color: rgb(46, 125, 50); }
.auth-tab.active::after { content: ""; position: absolute; bottom: -2px; left: 0px; right: 0px; height: 2px; background: rgb(46, 125, 50); }
.auth-form .form-group { margin-bottom: 1rem; }
.auth-form label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: rgb(51, 51, 51); }
.auth-form input[type="email"], .auth-form input[type="password"] { width: 100%; padding: 0.75rem 1rem; border: 2px solid rgb(224, 224, 224); border-radius: 8px; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
.auth-form input:focus { border-color: rgb(46, 125, 50); box-shadow: rgba(46, 125, 50, 0.1) 0px 0px 0px 3px; outline: none; }
.btn-full { width: 100%; }
.auth-divider { display: flex; align-items: center; margin: 1.25rem 0px; color: rgb(153, 153, 153); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1 1 0%; height: 1px; background: rgb(224, 224, 224); }
.auth-divider span { padding: 0px 1rem; font-size: 0.875rem; }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 500; background: white !important; border: 2px solid rgb(224, 224, 224) !important; color: rgb(51, 51, 51) !important; }
.btn-google:hover { background: rgb(245, 245, 245) !important; border-color: rgb(204, 204, 204) !important; }
.auth-footer { text-align: center; margin-top: 1.5rem; color: rgb(102, 102, 102); font-size: 0.9rem; }
.auth-footer a { color: rgb(46, 125, 50); font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
@media (max-width: 768px) {
#pwaInstallBtn { position: absolute; right: 1rem; }
body { padding-bottom: 160px !important; }
main, .container, .page-content, #scenario-result, .quiz-section { padding-bottom: 100px !important; }
}
.nav-auth-logged-out { display: flex; align-items: center; gap: 0.5rem; }
.nav-auth-logged-in { display: none; align-items: center; gap: 0.75rem; }
.nav-auth-logged-in .user-name { color: white; font-weight: 500; }
.nav-auth-logged-in .user-role-badge { padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; }
.nav-login-btn { padding: 0.5rem 1rem; border-radius: 6px; font-weight: 500; transition: background 0.2s; min-height: auto; background: rgba(255, 255, 255, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; color: white !important; }
.nav-login-btn:hover { background: rgba(255, 255, 255, 0.25) !important; }
.nav-logout-btn { padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; min-height: auto; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: white !important; }
.nav-logout-btn:hover { background: rgba(255, 0, 0, 0.2) !important; }
.nav-admin-link { display: none; color: white; text-decoration: none; padding: 0.5rem 0.75rem; background: rgba(255, 215, 0, 0.2); border-radius: 6px; font-weight: 500; transition: background 0.2s; }
.nav-admin-link:hover { background: rgba(255, 215, 0, 0.3); }
.nav-bar, header, .page-content { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
#pwaInstallBtn { display: none; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 0.4rem 0.75rem; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.2s; }
#pwaInstallBtn:hover { background: rgba(255, 255, 255, 0.25); }
#pwaInstallBtn .install-icon { font-size: 1rem; }
.pwa-update-toast { position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); background: rgb(51, 51, 51); color: white; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; gap: 12px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; z-index: 10000; transition: bottom 0.3s; }
.pwa-update-toast.show { bottom: 20px; }
.pwa-update-toast button { background: rgb(45, 106, 79); color: white; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-weight: 600; }
.pwa-update-toast button:hover { background: rgb(64, 145, 108); }
.ios-install-modal { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.2s; }
.ios-install-modal.show { opacity: 1; }
.ios-install-content { background: white; padding: 24px; border-radius: 16px; max-width: 320px; text-align: center; position: relative; }
.ios-install-content h3 { margin: 0px 0px 12px; color: rgb(45, 106, 79); }
.ios-install-content p { margin: 0px 0px 16px; color: rgb(102, 102, 102); }
.ios-install-content ol { text-align: left; padding-left: 20px; margin: 0px; color: rgb(51, 51, 51); line-height: 1.8; }
.ios-install-close { position: absolute; top: 8px; right: 12px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; font-size: 24px; color: rgb(153, 153, 153); cursor: pointer; }
.page-transition { animation: 0.2s ease-out 0s 1 normal none running fadeIn; }
@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: rgb(46, 125, 50) solid 3px; outline-offset: 2px; border-radius: 4px; }
.auth-forgot { text-align: right; margin: 8px 0px 0px; font-size: 0.85rem; }
.auth-forgot a { color: rgb(46, 125, 50); }
.profile-email-row { font-size: 0.9rem; color: rgb(85, 85, 85); margin: 4px 0px 12px; word-break: break-all; }
.btn-secondary { background: rgb(241, 245, 241); color: rgb(46, 125, 50); border: 1px solid rgb(200, 230, 201); margin-top: 8px; }
.btn-secondary:hover { background: rgb(227, 239, 227); }
.btn-danger { background: rgb(255, 255, 255); color: rgb(198, 40, 40); border: 1px solid rgb(239, 154, 154); margin-top: 8px; }
.btn-danger:hover { background: rgb(255, 235, 238); }
#pwaInstallBtn[hidden], #bottomNavInstall[hidden] { display: none !important; }
#authModal [hidden] { display: none !important; }
#authModal .auth-modal { box-sizing: border-box; max-height: calc(100dvh - 2rem); overflow-y: auto; }
#authModal .auth-status:empty { display: none; }
#authModal .auth-status, #authModal .auth-verification { overflow-wrap: anywhere; }
#authModal .auth-verification h3 { margin: 0px 0px 0.75rem; }
#authModal .auth-verification p { line-height: 1.5; }
#authModal button, #authModal input { min-height: 44px; }
#authModal input { box-sizing: border-box; min-width: 0px; max-width: 100%; }
#authModal .auth-modal-close { min-width: 44px; flex-shrink: 0; }
#authModal :focus-visible { outline: rgb(45, 106, 79) solid 3px; outline-offset: 3px; }
#authModal button:disabled { opacity: 0.65; cursor: wait; }
#verificationCooldown { font-size: 0.9rem; color: rgb(82, 100, 90); }
#authModal .auth-modal-header h2 { min-width: 0px; overflow-wrap: anywhere; }
#authModal .btn { white-space: normal; overflow-wrap: anywhere; }
#authModal { z-index: 10001; }
@media (max-width: 480px) {
#authModal .auth-modal { padding: 1rem; }
}