.breadcrumb-container{display:flex;align-items:center;gap:8px;padding:12px 0 12px 20px;font-size:14px;color:#6b7280;flex-wrap:wrap}.breadcrumb-item{display:inline-flex;align-items:center;transition:color .2s ease}.breadcrumb-item.clickable{cursor:pointer;color:#3b82f6}.breadcrumb-item.clickable:hover{color:#2563eb;text-decoration:underline}.breadcrumb-item.current{color:#1f2937;font-weight:500}.breadcrumb-separator{font-size:10px;color:#9ca3af;flex-shrink:0}@media (max-width: 768px){.breadcrumb-container{font-size:12px;gap:6px;padding:8px 0 8px 16px}.breadcrumb-separator{font-size:8px}}.logo-cropper-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease;padding:20px}.logo-cropper-container-pro{background:white;border-radius:20px;box-shadow:0 25px 50px #00000080;width:100%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.175,.885,.32,1.275);overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.logo-cropper-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #e5e5e5;background:#fafafa}.logo-cropper-header h3{margin:0;font-size:1.5rem;font-weight:600;color:#1d1d1f;letter-spacing:-.3px}.cropper-close-btn{background:none;border:none;font-size:1.2rem;color:#86868b;cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:36px;height:36px}.cropper-close-btn:hover{background:#f5f5f7;color:#1d1d1f}.logo-cropper-content-pro{display:flex;padding:0;flex:1;overflow:hidden}.cropper-area-wrapper{flex:1;display:flex;flex-direction:column;background:#000;position:relative;width:100%}.cropper-area{position:relative;width:100%;height:100%;min-height:500px;flex:1}.cropper-hint{text-align:center;color:#ffffffb3;font-size:.85rem;font-weight:500;padding:16px 20px;margin:0;background:rgba(0,0,0,.3);border-top:1px solid rgba(255,255,255,.1)}.logo-cropper-actions{display:flex;gap:16px;padding:24px 32px;border-top:1px solid #e5e5e5;background:#fafafa}.cancel-btn,.crop-btn{flex:1;padding:14px 24px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:-.2px}.cancel-btn{background:#f5f5f7;color:#1d1d1f;border:2px solid #e5e5e5}.cancel-btn:hover{background:#e8e8ed;border-color:#d1d1d6;transform:translateY(-1px)}.crop-btn{background:#007AFF;color:#fff;box-shadow:0 4px 12px #007aff4d}.crop-btn:hover{background:#0056CC;transform:translateY(-1px);box-shadow:0 6px 16px #007aff66}.crop-btn:active,.cancel-btn:active{transform:translateY(0)}@media (max-width: 768px){.logo-cropper-container-pro{width:95%;max-height:95vh}.logo-cropper-content-pro{flex-direction:column}.cropper-area{min-height:400px}.logo-cropper-header{padding:20px 24px}.logo-cropper-header h3{font-size:1.3rem}.logo-cropper-actions{padding:20px 24px}}@media (max-width: 480px){.logo-cropper-overlay{padding:10px}.logo-cropper-container-pro{max-height:98vh}.cropper-area{min-height:300px}.logo-cropper-actions{flex-direction:column;gap:12px}.cropper-hint{font-size:.8rem;padding:12px 16px}}.cancel-btn:focus,.crop-btn:focus,.cropper-close-btn:focus{outline:2px solid #007AFF;outline-offset:2px}.cropper-area>div{transition:transform .1s ease}.reactEasyCrop_Container{background:#000!important}.reactEasyCrop_CropArea{color:#ffffff80!important}.settings-container{min-height:100vh;background:#f5f5f5;padding:0}.section-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important}.section-header .section-icon,.section-header .section-title,.section-header .section-toggle{display:inline-flex!important;align-items:center!important}.back-button,.back-to-menu-button{display:inline-flex;align-items:center;justify-content:center;background:#007AFF;color:#fff;border:none;border-radius:12px;padding:10px;width:44px;height:44px;cursor:pointer;transition:all .2s ease}.back-button:hover,.back-to-menu-button:hover{background:#0056CC;transform:translateY(-1px);box-shadow:0 2px 8px #007aff4d}.back-button:active,.back-to-menu-button:active{transform:translateY(0);box-shadow:0 1px 4px #007aff33}.back-button svg,.back-to-menu-button svg{font-size:1.3rem}.settings-back-button{display:inline-flex;align-items:center;justify-content:center;background:none;color:#47578f;border:none;border-radius:12px;padding:10px;width:44px;height:44px;cursor:pointer;transition:none}.settings-back-button svg{font-size:1.3rem}.option-detail-view{background:white;margin:8px;border-radius:12px;overflow:hidden}.option-detail-content{padding:24px;text-align:center}.option-detail-icon{width:80px;height:80px;background:#f0f0f0;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:2rem;color:#666}.option-detail-content h3{margin:0 0 8px;font-size:1.5rem;font-weight:600;color:#333}.option-detail-content p{margin:0 0 24px;color:#666;font-size:1rem}.toggle-section{margin:20px 0;padding:16px;background:#f8f8f8;border-radius:8px}.toggle-label{display:flex;align-items:center;justify-content:space-between;font-size:1rem;color:#333;cursor:pointer}.value-section{margin:20px 0;padding:16px;background:#f8f8f8;border-radius:8px;text-align:left}.value-section label{display:block;font-size:.9rem;color:#666;margin-bottom:8px}.current-value{font-size:1.1rem;font-weight:500;color:#333}.option-actions{display:flex;gap:12px;margin-top:24px}.action-button{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.action-button.primary{background:#007AFF;color:#fff}.action-button.primary:hover{background:#0056CC}.action-button.secondary{background:#f0f0f0;color:#333}.action-button.secondary:hover{background:#e0e0e0}.settings-header{background:white;padding:16px 20px;border-bottom:1px solid #e0e0e0;position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:16px}.settings-header h2{margin:0;font-size:1.3rem;font-weight:600;color:#1d1d1f;letter-spacing:-.3px;flex:1}.settings-content{padding:16px;background:#f5f5f7;min-height:100vh}.settings-section{background:white;margin-bottom:20px;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px #00000014;transition:all .3s ease}.settings-section:hover{box-shadow:0 4px 12px #0000001a}.section-header{display:flex;align-items:center;padding:20px;background:white;cursor:pointer;transition:background-color .2s ease;flex-direction:row;justify-content:space-between;border-bottom:none}.section-header:hover{background:#fafafa}.section-header-no-toggle{display:flex;align-items:center;padding:20px;background:white;border-bottom:none}.section-icon{font-size:1.4rem;margin-right:16px;flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.section-title{margin:0;font-size:1.05rem;font-weight:600;color:#1d1d1f;flex:1;display:flex;align-items:center;letter-spacing:-.2px}.section-toggle{font-size:.9rem;color:#666;transition:transform .2s ease;flex-shrink:0;display:flex;align-items:center}.section-options{padding:0;background:white}.option-item{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:.5px solid #e5e5e5;cursor:pointer;transition:all .2s ease;min-height:60px;background:white}.option-item:last-child{border-bottom:none}.option-item:hover{background-color:#f9f9f9}.option-item:active{background-color:#f0f0f0;transform:scale(.99)}.option-item-info{cursor:default}.option-item-info:hover{background-color:transparent}.option-content{display:flex;align-items:center;flex:1;gap:12px;min-height:28px}.option-icon{font-size:1.1rem;color:#86868b;margin-right:0;width:24px;height:24px;width:16px;text-align:center;display:flex;align-items:center;justify-content:center;flex-shrink:0}.option-label{font-size:1rem;color:#1d1d1f;font-weight:400;letter-spacing:-.1px}.option-value{font-size:.95rem;color:#86868b;margin-left:auto;font-weight:400}.option-action{display:flex;align-items:center;flex-shrink:0;margin-left:12px}.option-arrow{font-size:1rem;color:#999}.option-arrow.rotated{transform:rotate(180deg);transition:transform .2s ease}.option-item-container{position:relative}.option-item-container .option-item{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:.5px solid #e5e5e5;cursor:pointer;transition:all .2s ease;min-height:60px;background:white}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:none;box-shadow:0 8px 16px #0000001f;z-index:10;max-height:250px;overflow-y:auto;animation:slideDown .2s ease;border-radius:12px;margin-top:4px}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dropdown-option{padding:14px 20px;cursor:pointer;transition:all .2s ease;border-bottom:.5px solid #f0f0f0;font-size:.95rem;color:#1d1d1f}.dropdown-option:first-child{border-radius:12px 12px 0 0}.dropdown-option:last-child{border-bottom:none;border-radius:0 0 12px 12px}.dropdown-option:hover{background-color:#f5f5f7}.dropdown-option:active{background-color:#e8e8e8}.email-reports-view{padding:20px;max-width:800px;margin:0 auto}.email-reports-section{background:white;border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px #00000014}.email-reports-section h3{margin:0;color:#1d1d1f;font-size:1.05rem;font-weight:600;letter-spacing:-.2px}.email-reports-section:has(.section-header){padding:10px 20px}.email-reports-section h4{margin:0 0 12px;color:#666;font-size:1rem;font-weight:500}.email-option{margin-bottom:16px}.email-checkbox{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:1rem;color:#333}.email-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#007AFF}.custom-emails{margin-top:16px}.email-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8f8f8;border-radius:8px;margin-bottom:8px}.email-item span{color:#333;font-size:.95rem}.remove-email-btn{background:#ff4444;color:#fff;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.8rem}.add-email{margin-top:8px}.add-email .email-input-wrapper{position:relative}.add-email .email-input-with-btn{width:100%;padding:12px 50px 12px 16px;border:1px solid #e5e5e5;border-radius:12px;font-size:1rem;color:#1d1d1f;transition:all .2s ease;box-sizing:border-box}.add-email .email-input-with-btn:hover{border-color:#d1d1d6}.add-email .email-input-with-btn:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 4px #007aff1a}.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.email-reports-section .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0}.email-reports-section .section-header h3{margin:0;color:#1d1d1f;font-size:1.05rem;font-weight:600;flex:1;letter-spacing:-.2px}.add-report-btn{background:#007AFF;color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:.9rem;font-weight:500;cursor:pointer;transition:background-color .2s ease}.add-report-btn:hover{background:#0056CC}.add-report-section{display:flex;justify-content:center;padding:8px 0}.reports-limit-message{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#f0f8ff;border:1px solid #b3d9ff;border-radius:14px;margin:12px 0}.reports-limit-message .info-icon{color:#007aff;font-size:1.3rem;flex-shrink:0}.reports-limit-message p{margin:0;font-size:.95rem;color:#1d1d1f;letter-spacing:-.1px}.add-report-btn-primary{background:#007AFF;color:#fff;border:none;border-radius:16px;padding:16px 32px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #007aff40;letter-spacing:-.2px;display:flex;align-items:center;gap:10px}.add-report-btn-primary:hover{background:#0056CC;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.add-report-btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px #007aff33}.add-report-icon{font-size:1.3rem}.report-form-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:16px;border-bottom:.5px solid #e5e5e5}.report-form-header h3{margin:0;color:#1d1d1f;font-size:1.1rem;font-weight:600;letter-spacing:-.2px}.edit-name-btn{background:none;border:none;font-size:1.1rem;color:#007aff;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.edit-name-btn:hover{background:#f0f8ff;color:#0056cc}.edit-name-btn:active{transform:scale(.9)}.report-form{display:flex;flex-direction:column;gap:16px}.report-form-actions{display:flex;gap:12px;margin-top:20px;padding-top:20px;border-top:.5px solid #e5e5e5}.cancel-report-btn,.save-report-btn{flex:1;padding:14px 20px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:-.2px}.cancel-report-btn{background:#f5f5f7;color:#1d1d1f}.cancel-report-btn:hover{background:#e8e8ed;transform:translateY(-1px)}.cancel-report-btn:active{transform:translateY(0)}.save-report-btn{background:#007AFF;color:#fff;box-shadow:0 2px 8px #007aff40}.save-report-btn:hover{background:#0056CC;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.save-report-btn:active{transform:translateY(0);box-shadow:0 1px 4px #007aff33}.reports-list{display:flex;flex-direction:column;gap:12px;margin-top:16px}.report-card{background:#f9f9f9;border-radius:14px;border:1px solid #e5e5e5;overflow:hidden;transition:all .2s ease}.report-card:hover{border-color:#d1d1d6;box-shadow:0 2px 8px #0000000f}.report-card-header{padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}.report-card-info{flex:1;min-width:0}.report-card-info h4{margin:0 0 4px;font-size:1rem;font-weight:600;color:#1d1d1f;letter-spacing:-.2px}.report-card-summary{margin:0;font-size:.85rem;color:#86868b;letter-spacing:-.1px}.report-card-actions{display:flex;align-items:center;gap:8px}.toggle-details-btn{background:#f5f5f7;color:#86868b;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;transition:all .2s ease}.toggle-details-btn:hover{background:#e8e8ed;color:#1d1d1f;transform:scale(1.05)}.toggle-details-btn:active{transform:scale(.95)}.delete-report-btn{background:#ff3b30;color:#fff;border:none;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .2s ease}.delete-report-btn:hover{background:#e8332a;transform:scale(1.05)}.delete-report-btn:active{transform:scale(.95)}.report-card-details{padding:12px 18px 16px;border-top:.5px solid #e5e5e5;display:flex;flex-direction:column;gap:10px;animation:slideDown .2s ease}.report-detail-item{display:flex;justify-content:space-between;align-items:center}.detail-label{font-size:.9rem;color:#86868b;font-weight:500}.detail-value{font-size:.9rem;color:#1d1d1f;font-weight:400}.report-config{background:#f8f8f8;border-radius:8px;padding:16px;margin-bottom:16px;border:1px solid #e0e0e0}.report-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.report-header h4{margin:0;color:#333;font-size:1rem}.remove-report-btn{background:#ff4444;color:#fff;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem}.report-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}.report-option{display:flex;flex-direction:column;gap:8px}.report-option label{font-size:.9rem;color:#86868b;font-weight:500;letter-spacing:-.1px}.report-option select,.report-option input{padding:12px 14px;border:1px solid #e5e5e5;border-radius:12px;font-size:1rem;background:white;color:#1d1d1f;transition:all .2s ease}.report-option select{cursor:pointer}.report-option select:hover,.report-option input:hover{border-color:#d1d1d6}.report-option select:focus,.report-option input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 4px #007aff1a}.email-reports-actions{display:flex;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}.email-reports-actions .action-button{flex:1;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease}.email-reports-actions .action-button.primary{background:#007AFF;color:#fff}.email-reports-actions .action-button.primary:hover{background:#0056CC}.email-reports-actions .action-button.secondary{background:#f0f0f0;color:#333;border:1px solid #e0e0e0}.email-reports-actions .action-button.secondary:hover{background:#e0e0e0}@media (max-width: 768px){.email-reports-view{padding:16px}.email-reports-section{padding:16px;margin-bottom:16px}.report-options{grid-template-columns:1fr;gap:12px}.email-reports-actions{flex-direction:column;gap:8px}.section-header{flex-direction:column;align-items:flex-start;gap:12px}}.toggle{width:50px;height:30px;background:#ddd;border-radius:15px;position:relative;cursor:pointer;transition:background-color .3s ease}.logout-section{margin-top:8px;padding:0 16px;margin-bottom:32px}.logout-button{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px;background:#ff3b30;color:#fff;border:none;border-radius:16px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #ff3b3040;letter-spacing:-.2px}.logout-button:hover{background:#e8332a;transform:translateY(-1px);box-shadow:0 4px 12px #ff3b304d}.logout-button:active{transform:translateY(0);box-shadow:0 1px 4px #ff3b3033}.logout-icon{font-size:1.2rem}@media (max-width: 768px){.settings-header{padding:16px}.settings-header h2{font-size:1.3rem}.section-header{padding:14px 16px}.section-icon{font-size:1rem;margin-right:10px}.section-title{font-size:.95rem}.option-item,.option-item-container .option-item{padding:14px 16px;min-height:56px}.option-icon{font-size:.8rem;width:16px;margin-right:10px}.option-label{font-size:.95rem}.option-value{font-size:.85rem}.option-arrow{font-size:.9rem}.logout-section{padding:0 16px}.logout-button{padding:14px 16px;font-size:.95rem}}@media (max-width: 390px){.settings-section .option-item,.settings-section .option-item-container .option-item{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important}.settings-section .option-content{display:flex!important;flex-direction:row!important;align-items:center!important;flex:1}.settings-section .option-action{display:flex!important;align-items:center!important;flex-shrink:0}.settings-header{padding:12px 16px}.settings-header h2{font-size:1.2rem}.section-header{padding:12px 16px}.section-icon{font-size:.9rem;margin-right:8px}.section-title{font-size:.95rem}.option-item{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;min-height:52px;flex-direction:row}.option-item-container .option-item{padding:12px 16px;min-height:52px;display:flex;align-items:center;justify-content:space-between;flex-direction:row}.option-icon{font-size:.75rem;width:14px;margin-right:8px;flex-shrink:0}.option-content{display:flex;align-items:center;flex:1;gap:8px;min-height:28px}.option-label{font-size:.9rem;flex:1}.option-value{font-size:.8rem}.option-action{display:flex;align-items:center;flex-shrink:0;margin-left:12px}.option-arrow{font-size:.8rem;margin-left:8px}.toggle{width:45px;height:28px}.toggle-thumb{width:24px;height:24px}.toggle.enabled .toggle-thumb{transform:translate(17px)}.logout-section{padding:0 16px}.logout-button{padding:12px 16px;font-size:.9rem}.option-detail-content{padding:20px}.option-detail-icon{width:60px;height:60px;font-size:1.5rem}.option-detail-content h3{font-size:1.3rem}.option-actions{flex-direction:column;gap:8px}.action-button{padding:10px 16px;font-size:.95rem}.settings-header .back-to-menu-button{padding:6px 12px;font-size:.85rem}}.welcome-screens-view{padding:20px;max-width:800px;margin:0 auto}.screens-counter{display:flex;align-items:center;gap:8px;margin:0 auto 20px;padding:12px 16px;background:linear-gradient(135deg,#e7f3ff,#d1e8ff);border-radius:10px;color:#0056b3;font-weight:600;max-width:400px;width:fit-content}.qr-access-section{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.qr-access-section p{margin:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}.qr-access-section a{word-break:break-all;margin-right:4px}.copy-url-btn{display:flex;align-items:center;justify-content:center;background:none;color:#666;border:none;border-radius:4px;padding:4px;width:24px;height:24px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.copy-url-btn:hover{background:#f0f0f0;color:#333}.copy-url-btn:active{background:#e0e0e0}.copy-url-btn svg{font-size:1rem}.url-prefix-section{margin-top:12px}.url-prefix-option{margin-bottom:16px}.url-preview{margin-top:12px;padding:10px 12px;background:#f0f8ff;border:1px solid #d1e8ff;border-radius:8px;display:flex;flex-direction:column;gap:4px}.url-preview-label{font-size:.8rem;color:#666;font-weight:500}.url-preview-url{font-size:.85rem;color:#007aff;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,Courier New,monospace;word-break:break-all;line-height:1.3}.url-disabled-message{margin-top:12px;padding:10px 12px;background:#fff3cd;border:1px solid #ffeaa7;border-radius:8px;display:flex;align-items:center;gap:8px}.url-disabled-text{font-size:.8rem;color:#856404;font-weight:500}.url-disabled-icon{font-size:.9rem;color:#856404;flex-shrink:0}.url-prefix-subtitle{margin:0 0 8px;font-size:.9rem;color:#666;font-weight:500}.url-prefix-input-wrapper{position:relative;display:flex;align-items:center;gap:8px}.url-prefix-input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;transition:border-color .2s ease}.url-prefix-input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff1a}.url-prefix-input.error{border-color:#ff3b30}.url-prefix-input.error:focus{border-color:#ff3b30;box-shadow:0 0 0 3px #ff3b301a}.character-count{font-size:.8rem;color:#666;white-space:nowrap;min-width:40px;text-align:right}.title-input-wrapper{position:relative;display:flex;align-items:center;gap:8px}.title-input{flex:1;padding:10px 12px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;transition:border-color .2s ease}.title-input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff1a}.title-input.error{border-color:#ff3b30}.title-input.error:focus{border-color:#ff3b30;box-shadow:0 0 0 3px #ff3b301a}.url-prefix-hint{margin:6px 0 0;font-size:.8rem;color:#666;line-height:1.3}.custom-url-prefix-section{margin-top:12px;padding:12px;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef}.error-message{margin-top:6px;font-size:.8rem;color:#ff3b30;display:flex;flex-direction:column;gap:8px}.error-message:before{content:"⚠️";font-size:.7rem}.error-message span{display:flex;align-items:center;gap:4px}.fix-url-btn{background:#007AFF;color:#fff;border:none;border-radius:6px;padding:6px 12px;font-size:.75rem;cursor:pointer;transition:all .2s ease;align-self:flex-start}.fix-url-btn:hover{background:#0056CC;transform:translateY(-1px)}.fix-url-btn:active{transform:translateY(0)}.required-asterisk{color:#ff3b30;font-weight:700;margin-left:2px}.setup-section{margin-top:12px}.setup-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:none;color:#47578f;border:2px solid #47578F;border-radius:8px;padding:12px 16px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%}.setup-btn:hover{background:#47578F;color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px #47578f4d}.setup-btn:active{transform:translateY(0);box-shadow:0 1px 4px #47578f33}.setup-btn svg{font-size:.8rem}.setup-modal{max-width:800px!important;width:95%!important;max-height:90vh!important;overflow-y:auto!important}.modal-content.setup-modal{max-width:800px!important;width:95%!important;max-height:90vh!important;overflow:hidden!important;display:flex!important;flex-direction:column!important}.setup-content{padding:20px 24px;max-height:calc(90vh - 120px);overflow-y:auto;display:flex;flex-direction:column;align-items:center}.setup-modal .modal-header{padding:20px 24px 0;flex-shrink:0}.setup-modal .modal-actions{padding:20px 24px 24px;flex-shrink:0;border-top:1px solid #e9ecef;background:#f8f9fa;display:flex;justify-content:flex-end}.setup-step{display:flex;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid #e9ecef;width:100%;max-width:600px;flex-direction:column;text-align:center}.setup-step:last-child{border-bottom:none}.step-icon{width:48px;height:48px;background:#f8f9fa;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#007aff;font-size:1.2rem;flex-shrink:0}.step-content{flex:1;text-align:center;width:100%}.step-content h4{margin:0 0 4px;font-size:1rem;font-weight:600;color:#333}.step-content p{margin:0 0 12px;font-size:.85rem;color:#666;line-height:1.4}.upload-btn{display:flex;align-items:center;gap:8px;background:#f8f9fa;color:#333;border:1px solid #ddd;border-radius:6px;padding:8px 12px;font-size:.85rem;cursor:pointer;transition:all .2s ease;margin:0 auto;justify-content:center}.upload-btn:hover{background:#e9ecef;border-color:#007aff}.upload-btn.error{border-color:#ff3b30;background:#fff5f5}.upload-btn.error:hover{border-color:#ff3b30;background:#ffe6e6}.logo-buttons{display:flex;gap:10px;justify-content:center;width:100%;max-width:400px;margin:0 auto}.logo-buttons .upload-btn{flex:1;margin:0}.delete-logo-btn{display:flex;align-items:center;gap:8px;background:#fff5f5;color:#ff3b30;border:1px solid #ff3b30;border-radius:6px;padding:8px 12px;font-size:.85rem;cursor:pointer;transition:all .2s ease;margin:0;justify-content:center;flex:1}.delete-logo-btn:hover{background:#ff3b30;color:#fff;border-color:#ff3b30}.setup-select{width:100%;max-width:200px;padding:8px 12px;border:1px solid #ddd;border-radius:6px;font-size:.85rem;background:white;margin:0 auto;display:block}.setup-select.error{border-color:#ff3b30}.setup-select.error:focus{border-color:#ff3b30;box-shadow:0 0 0 3px #ff3b301a}.color-palette-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;margin-top:10px;width:100%;max-width:400px;justify-self:center}.color-palette-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border:2px solid #ddd;border-radius:8px;background:white;cursor:pointer;transition:all .2s ease}.color-palette-option:hover{border-color:#007aff;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.color-palette-option.active{border-color:#007aff;background:rgba(0,122,255,.05);box-shadow:0 4px 12px #007aff33}.palette-preview{display:flex;gap:2px;border-radius:4px;overflow:hidden;border:1px solid rgba(0,0,0,.1)}.palette-color{width:20px;height:20px}.palette-name{font-size:.85rem;font-weight:500;color:#333;text-align:center}@media (max-width: 768px){.color-palette-grid{grid-template-columns:repeat(2,1fr);gap:12px}.color-palette-option{padding:10px}.palette-color{width:18px;height:18px}.palette-name{font-size:.8rem}}.logo-preview-container{width:150px;height:150px;border-radius:50%;border:3px solid #ddd;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:16px auto;position:relative;background:#f8f9fa}.logo-preview{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}.logo-controls{margin:16px auto;padding:16px;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef;width:100%;max-width:400px}.control-group{margin-bottom:12px}.control-group:last-child{margin-bottom:0}.control-group label{display:block;font-size:.85rem;font-weight:500;color:#333;margin-bottom:4px}.slider{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#007AFF;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#007AFF;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.theme-option span{font-size:.8rem;font-weight:500;color:#333}@media (max-width: 768px){.setup-modal{max-width:95%!important;width:95%!important}.setup-step{flex-direction:column;gap:12px;text-align:center}.step-icon{width:40px;height:40px;font-size:1rem}.theme-options{flex-direction:column;gap:8px}.theme-option{min-width:auto;width:100%}}.counter-icon{font-size:1.2rem;color:#0056b3;display:block}.screens-counter-text{font-size:.95rem}.create-screen-section{margin-bottom:30px;text-align:center}.create-screen-btn{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;border:none;border-radius:12px;padding:14px 28px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #4facfe4d}.create-screen-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 25px #4facfe66}.create-screen-btn.disabled{background:#e2e8f0;color:#a0aec0;cursor:not-allowed;box-shadow:none;transform:none}.limit-indicator{font-size:.8rem;font-weight:500;opacity:.8}.create-screen-form{background:#f8fafc;border-radius:12px;padding:24px;margin-bottom:30px;border:1px solid #e2e8f0}.create-screen-form h3{margin:0 0 20px;color:#2d3748;font-size:1.25rem}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#4a5568}.form-group input,.form-group select{width:100%;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;transition:border-color .3s ease;box-sizing:border-box}.form-group input:focus,.form-group select:focus{outline:none;border-color:#4facfe}.form-group select:disabled{background-color:#f7fafc;color:#a0aec0;cursor:not-allowed;border-color:#e2e8f0}.no-equipment-message{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;background-color:#fef5e7;border:1px solid #f6e05e;border-radius:6px;color:#744210;font-size:.9rem}.no-equipment-message svg{color:#d69e2e}.logo-final-container{display:flex;flex-direction:column;align-items:center;gap:16px}.logo-preview-final{width:150px;height:150px;border-radius:50%;overflow:hidden;border:4px solid #4facfe;box-shadow:0 4px 15px #4facfe4d;background-color:#fff;position:relative;display:flex;align-items:center;justify-content:center}.logo-final-preview{width:100%;height:100%;transition:transform .1s ease;pointer-events:none}.logo-adjustment-container{background:white;border-radius:12px;padding:20px;box-shadow:0 4px 15px #0000001a;border:1px solid #e0e0e0;margin-bottom:20px}.logo-adjustment-container .logo-preview-container,.logo-adjustment-container .logo-modal-controls{margin-bottom:20px}.logo-adjustment-container .logo-modal-actions{display:flex;gap:12px;justify-content:center}.logo-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.logo-modal-container{background:white;border-radius:16px;box-shadow:0 20px 40px #0000004d;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:logo-modal-slide-in .3s ease-out}@keyframes logo-modal-slide-in{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.logo-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e2e8f0}.logo-modal-header h3{margin:0;color:#2d3748;font-size:1.5rem;font-weight:600}.logo-modal-close{background:none;border:none;font-size:1.2rem;color:#718096;cursor:pointer;padding:8px;border-radius:6px;transition:all .2s ease}.logo-modal-close:hover{background:#f7fafc;color:#4a5568}.logo-modal-content{padding:24px;display:flex;flex-direction:column;gap:24px}.logo-modal-preview{display:flex;justify-content:center}.logo-modal-controls{display:flex;flex-direction:column;gap:20px}.logo-control-group{display:flex;flex-direction:column;gap:8px}.logo-control-group label{font-size:1rem;font-weight:600;color:#4a5568}.logo-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;border-radius:4px;background:#e2e8f0;outline:none;transition:background .2s ease}.logo-slider:hover{background:#cbd5e0}.logo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#4facfe;cursor:pointer;box-shadow:0 3px 8px #4facfe66;transition:all .2s ease}.logo-slider::-webkit-slider-thumb:hover{background:#00f2fe;transform:scale(1.1)}.logo-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#4facfe;cursor:pointer;border:none;box-shadow:0 3px 8px #4facfe66;transition:all .2s ease}.logo-slider::-moz-range-thumb:hover{background:#00f2fe;transform:scale(1.1)}.logo-modal-actions{display:flex;gap:12px;justify-content:flex-end;padding:20px 24px;border-top:1px solid #e2e8f0}.logo-modal-cancel,.logo-modal-confirm{padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none}.logo-modal-cancel{background:#f7fafc;color:#4a5568;border:2px solid #e2e8f0}.logo-modal-cancel:hover{background:#edf2f7;border-color:#cbd5e0}.logo-modal-confirm{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;box-shadow:0 4px 15px #4facfe4d}.logo-modal-confirm:hover{transform:translateY(-2px);box-shadow:0 8px 25px #4facfe66}.logo-preview-container{width:150px;height:150px;border-radius:50%;overflow:hidden;border:4px solid #4facfe;box-shadow:0 4px 15px #4facfe4d;background-color:#fff;position:relative;margin:0 auto 16px;cursor:grab}.logo-preview-adjustable{width:100%;height:100%;transition:transform .1s ease;pointer-events:none}.logo-controls-grid{display:grid;grid-template-columns:1fr;gap:16px}.control-group{display:flex;flex-direction:column;gap:8px}.control-group label{font-size:.9rem;font-weight:600;color:#4a5568}.slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;border-radius:3px;background:#e2e8f0;outline:none;transition:background .2s ease}.slider:hover{background:#cbd5e0}.slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4facfe;cursor:pointer;box-shadow:0 2px 6px #4facfe4d;transition:all .2s ease}.slider::-webkit-slider-thumb:hover{background:#00f2fe;transform:scale(1.1)}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4facfe;cursor:pointer;border:none;box-shadow:0 2px 6px #4facfe4d;transition:all .2s ease}.slider::-moz-range-thumb:hover{background:#00f2fe;transform:scale(1.1)}@media (max-width: 768px){.email-input-with-btn{padding:12px 45px 12px 12px;font-size:16px}.email-btn-inside{width:36px;height:36px;font-size:16px}}@media (max-width: 768px){.logo-modal-overlay{padding:10px}.logo-modal-container{max-width:100%;max-height:95vh}.logo-preview-circle{width:150px;height:150px}.logo-modal-content{padding:16px;gap:16px}.logo-modal-header{padding:16px 20px}.logo-modal-actions{padding:16px 20px;flex-direction:column}.logo-modal-cancel,.logo-modal-confirm{width:100%}.logo-preview-final{width:120px;height:120px}}.email-option{margin-bottom:12px}.email-checkbox{display:flex;align-items:center;gap:8px;font-weight:500;color:#4a5568;cursor:pointer}.email-checkbox input[type=checkbox]{width:auto;margin:0}.email-input-wrapper{position:relative;margin-top:8px}.email-input-with-btn{width:100%;padding:10px 45px 10px 12px;border:1px solid #ddd;border-radius:8px;font-size:14px;transition:border-color .2s ease;box-sizing:border-box;pointer-events:auto}.email-input-with-btn:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 3px #007aff1a}.email-btn-inside{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:40px;height:calc(100% - 8px);background:none;color:#000;border:none;cursor:pointer;font-size:20px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:10}.email-btn-inside:hover{color:#333;transform:translateY(-50%) scale(1.05)}.email-btn-inside:active{transform:translateY(-50%) scale(.95)}.form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.cancel-btn,.save-btn{padding:12px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;border:none}.cancel-btn{background:#f7fafc;color:#4a5568;border:2px solid #e2e8f0}.cancel-btn:hover{background:#edf2f7;border-color:#cbd5e0}.save-btn{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;box-shadow:0 4px 15px #4facfe4d}.save-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 8px 25px #4facfe66}.save-btn.disabled{background:#e2e8f0;color:#a0aec0;cursor:not-allowed;box-shadow:none;transform:none}.screens-list{display:flex;flex-direction:column;gap:16px}.screen-card{background:white;border-radius:12px;padding:20px;border:1px solid #e2e8f0;box-shadow:0 2px 8px #0000001a;max-width:100%;box-sizing:border-box;overflow:hidden;word-wrap:break-word}.screen-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.screen-header-actions{display:flex;align-items:center;gap:12px}.session-counter{display:flex;align-items:center;gap:6px;background:#e6fffa;color:#234e52;padding:6px 10px;border-radius:20px;font-size:.875rem;font-weight:500;border:1px solid #81e6d9}.monitor-icon{font-size:1rem;color:#234e52}.session-count{font-weight:600;color:#234e52}.screen-header h4{margin:0;color:#2d3748;font-size:1.125rem}.delete-btn{background:#fed7d7;color:#c53030;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .3s ease}.delete-btn svg{font-size:.9rem;color:#c53030;display:block}.delete-btn:hover{background:#feb2b2;transform:scale(1.1)}.screen-info{display:flex;flex-direction:column;gap:8px}.screen-info p{margin:0;color:#4a5568;font-size:.9rem}.screen-info a{color:#4facfe;text-decoration:none;word-break:break-all}.screen-info a:hover{text-decoration:underline}@media (max-width: 768px){.welcome-screens-view{padding:16px}.create-screen-form{padding:20px}.form-actions{flex-direction:row;gap:8px}.cancel-btn,.save-btn{flex:1;padding:10px 16px;font-size:.9rem}}@media (max-width: 414px){.welcome-screens-view{padding:10px}.screens-counter{padding:10px 12px;margin:0 auto 15px;max-width:350px}.counter-icon{font-size:1rem}.screens-counter-text{font-size:.85rem}.screen-card{padding:15px;margin-bottom:15px;border-radius:10px}.screen-header{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:12px}.screen-header-actions{align-self:flex-end;gap:8px}.session-counter{font-size:.8rem;padding:4px 8px}.screen-header h4{font-size:1rem;line-height:1.3;word-break:break-word}.delete-btn{align-self:flex-end;width:32px;height:32px;font-size:.8rem}.screen-info{gap:6px}.screen-info p{font-size:.85rem;line-height:1.4;word-break:break-all}.screen-info a{font-size:.8rem;word-break:break-all;display:block;margin-top:2px}}@media (max-width: 480px){.screen-card{padding:16px}.screen-header{flex-direction:column;align-items:flex-start;gap:12px}.delete-btn{align-self:flex-end}}.logo-upload-section{border:2px dashed #e2e8f0;border-radius:8px;padding:20px;text-align:center;transition:border-color .3s ease}.logo-upload-section:hover{border-color:#4facfe}.logo-upload-area{cursor:pointer;padding:20px;border-radius:8px;background:#f8fafc;transition:background-color .3s ease}.logo-upload-area:hover{background:#e2e8f0}.upload-icon{font-size:2rem;color:#4facfe;margin-bottom:10px}.logo-upload-area p{margin:10px 0 5px;font-weight:600;color:#4a5568}.logo-upload-area small{color:#718096;font-size:.85rem}.logo-preview-container{display:flex;flex-direction:column;align-items:center;gap:15px}.logo-preview{max-width:120px;max-height:120px;object-fit:contain;border-radius:8px;box-shadow:0 4px 12px #0000001a}.logo-actions{display:flex;gap:10px}.change-logo-btn,.remove-logo-btn{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease}.change-logo-btn{background:#4facfe;color:#fff}.change-logo-btn:hover{background:#3b82f6}.remove-logo-btn{background:#f56565;color:#fff}.remove-logo-btn:hover{background:#e53e3e}.temperature-unit-selector{display:flex;gap:10px;margin-top:8px}.unit-btn{flex:1;padding:12px 16px;border:2px solid #e2e8f0;border-radius:8px;background:white;color:#4a5568;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.unit-btn:hover{border-color:#4facfe;background:#f8fafc}.unit-btn.active{border-color:#4facfe;background:#4facfe;color:#fff}@media (max-width: 768px){.temperature-unit-selector{flex-direction:column}.logo-actions{flex-direction:column;width:100%}.change-logo-btn,.remove-logo-btn{width:100%;justify-content:center}}.pool-sections-container{width:100%}.pool-sections{margin-top:12px}.pool-section{margin-bottom:20px}.pool-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;cursor:pointer;transition:all .2s ease;margin-bottom:8px}.pool-header:hover{border-color:#4facfe;background:#f1f5f9}.pool-header.selected{border-color:#4facfe;background:rgba(79,172,254,.05);box-shadow:0 2px 8px #4facfe1a}.pool-name{font-size:1rem;font-weight:600;color:#2d3748;margin:0}.selected-check{color:#4facfe;font-size:1.2rem;font-weight:700}.equipment-tags{display:flex;flex-wrap:wrap;gap:6px;margin-left:16px}.equipment-tag{background:#f8fafc;color:#4a5568;padding:6px 10px;border-radius:6px;border:1px solid #e2e8f0;font-size:.75rem;transition:all .2s ease;min-width:100px;text-align:center}.equipment-tag:hover{background:#f1f5f9;border-color:#cbd5e0}.equipment-tag{display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;text-align:center!important;font-size:.85rem!important;line-height:1.2!important}.equipment-name{font-weight:500!important;color:#2d3748!important;font-size:.85rem!important;display:flex!important;align-items:center!important;line-height:1.2!important}.separator-dot{color:#cbd5e0!important;font-size:.7rem!important;display:flex!important;align-items:center!important}.equipment-model-short{background:transparent!important;color:#0056b3!important;padding:3px 8px!important;border:1px solid #0056b3!important;border-radius:4px!important;font-weight:600!important;font-size:.85rem!important;text-transform:uppercase!important;display:flex!important;align-items:center!important;line-height:1.2!important}.equipment-sn{color:#4a5568!important;font-weight:500!important;font-size:.85rem!important;display:flex!important;align-items:center!important;line-height:1.2!important}.pool-separator{border:none;height:1px;background:#e2e8f0;margin:20px 0}.label-icon{margin-right:8px;color:#0056b3;font-size:1rem;vertical-align:middle}.form-section-separator{border:none;height:2px;background:linear-gradient(90deg,transparent,#e2e8f0,transparent);margin:24px 0}.settings-section-preferences .section-icon{color:#3b82f6!important}.settings-section-display .section-icon{color:#f59e0b!important}.settings-section-about .section-icon{color:#8b5cf6!important}.settings-section-language .section-icon{color:#ef4444!important}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .25s ease;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:20px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:white;width:100%;max-width:340px;border-radius:20px;max-height:80vh;display:flex;flex-direction:column;animation:modalPop .3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 20px 60px #0000004d}@keyframes modalPop{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.modal-header{display:flex;align-items:center;justify-content:center;padding:18px 20px 14px;border-bottom:.5px solid #e5e5e5;position:relative}.modal-header h3{margin:0;font-size:1rem;font-weight:600;color:#1d1d1f;letter-spacing:-.3px;text-align:center}.modal-close{background:none;border:none;font-size:1.2rem;color:#86868b;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.modal-close:hover{background:#f5f5f7;color:#1d1d1f}.modal-close:active{transform:translateY(-50%) scale(.9)}.modal-options{overflow-y:auto;flex:1;padding:4px 0}.modal-option{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;transition:all .15s ease;position:relative}.modal-option:hover{background:#f5f5f7}.modal-option:active{background:#e8e8ed}.modal-option span{font-size:.95rem;color:#1d1d1f;letter-spacing:-.2px}.modal-option.selected{background:#e3f2fd}.modal-option.selected span{color:#007aff;font-weight:500}.modal-option .check-icon{color:#007aff;font-size:1.1rem}.modal-option.disabled{cursor:not-allowed;opacity:.6}.modal-option.disabled:hover,.modal-option.disabled:active{background:transparent}.modal-option .option-content{display:flex;flex-direction:column;gap:4px;flex:1}.modal-option .disabled-text{color:#8e8e93!important}.modal-option .option-note{font-size:.75rem;color:#8e8e93;font-style:italic;line-height:1.2}.modal-input{max-width:400px;max-height:none}.modal-confirm{max-width:360px;max-height:none;text-align:center}.modal-confirm-icon{display:flex;align-items:center;justify-content:center;padding:24px 24px 16px}.modal-confirm-icon svg{font-size:3rem;color:#ff3b30}.modal-confirm-content{padding:0 24px 20px}.modal-confirm-content h3{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:#1d1d1f;letter-spacing:-.3px}.modal-confirm-content p{margin:0;font-size:.95rem;color:#86868b;line-height:1.5;letter-spacing:-.1px}.modal-confirm-actions{display:flex;gap:12px;padding:0 24px 24px}.modal-delete-btn{flex:1;padding:12px 20px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:-.2px;background:#ff3b30;color:#fff;box-shadow:0 2px 8px #ff3b3040}.modal-delete-btn:hover{background:#e8332a;transform:translateY(-1px);box-shadow:0 4px 12px #ff3b304d}.modal-delete-btn:active{transform:translateY(0);box-shadow:0 1px 4px #ff3b3033}.modal-input-content{padding:20px 24px 24px}.modal-text-input{width:100%;padding:14px 16px;border:1px solid #e5e5e5;border-radius:12px;font-size:1rem;color:#1d1d1f;background:white;transition:all .2s ease;box-sizing:border-box}.modal-text-input:hover{border-color:#d1d1d6}.modal-text-input:focus{outline:none;border-color:#007aff;box-shadow:0 0 0 4px #007aff1a}.modal-input-actions{display:flex;gap:12px;margin-top:20px}.modal-cancel-btn,.modal-save-btn{flex:1;padding:12px 20px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:-.2px}.modal-cancel-btn{background:#f5f5f7;color:#1d1d1f}.modal-cancel-btn:hover{background:#e8e8ed;transform:translateY(-1px)}.modal-cancel-btn:active{transform:translateY(0)}.modal-save-btn{background:#007AFF;color:#fff;box-shadow:0 2px 8px #007aff40}.modal-save-btn:hover{background:#0056CC;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.modal-save-btn:active{transform:translateY(0);box-shadow:0 1px 4px #007aff33}@media (max-width: 480px){.modal-content{max-width:calc(100vw - 32px);margin:16px}.modal-option{padding:16px 20px}.modal-option span{font-size:1rem}}@media (max-width: 768px){.pool-header{padding:10px 12px}.pool-name{font-size:.95rem}.equipment-tags{margin-left:12px;gap:4px}.equipment-tag{min-width:90px!important;padding:5px 8px!important;font-size:.85rem!important}.pool-separator{margin:16px 0}}.email-custom-section{margin-top:12px}.email-custom-subtitle{font-size:.9rem;font-weight:600;color:#4a5568;margin:0 0 8px;padding:0}.custom-email-display{margin-top:8px}.email-tag{display:flex;align-items:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px 12px;gap:10px;transition:all .2s ease;max-width:300px}.email-tag:hover{background:#f1f5f9;border-color:#cbd5e0}.email-text{font-size:.9rem;color:#4a5568;font-weight:500;flex:1}.email-remove-btn{background:none;border:none;color:#e53e3e;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.email-remove-btn:hover{background:#fed7d7;color:#c53030}.email-remove-btn svg{font-size:.8rem}.email-error-message{color:#e53e3e;font-size:.8rem;margin-top:4px;margin-left:4px;font-weight:500}.email-input-with-btn.error{border-color:#e53e3e;box-shadow:0 0 0 1px #e53e3e}.email-input-with-btn.error:focus{border-color:#e53e3e;box-shadow:0 0 0 3px #e53e3e1a}.logo-preview-circle{position:relative;width:200px;height:200px;border-radius:50%;margin:0 auto;background:#f8fafc;display:flex;align-items:center;justify-content:center;overflow:hidden}.setup-logo-preview{width:200px!important;height:200px!important;background:#f8fafc!important;border-radius:50%!important;border:3px solid #4facfe!important;box-shadow:0 4px 15px #4facfe4d!important;overflow:hidden!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:16px auto!important}.setup-logo-image{width:100%!important;height:100%!important;object-fit:contain!important;display:block!important}.logo-buttons{display:flex;gap:12px;justify-content:center;margin-top:16px}.logo-btn{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:.9rem}.logo-btn.change-btn{background:#dbeafe;color:#1d4ed8}.logo-btn.change-btn svg{color:#1d4ed8}.logo-btn.change-btn:hover{background:#bfdbfe;transform:scale(1.1)}.logo-btn.edit-btn{background:#fef3c7;color:#d97706}.logo-btn.edit-btn svg{color:#d97706}.logo-btn.edit-btn:hover{background:#fde68a;transform:scale(1.1)}.modal-save-btn{display:flex;align-items:center;justify-content:center;gap:8px}.modal-save-btn svg{font-size:16px;transition:transform .2s ease}.modal-save-btn:hover svg{transform:translate(2px)}.screen-actions{display:flex;gap:8px;align-items:center}.edit-screen-btn{width:36px;height:36px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:.9rem;background:#fef3c7;color:#d97706}.edit-screen-btn svg{color:#d97706}.edit-screen-btn:hover{background:#fde68a;transform:scale(1.1)}.logo-preview-area{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.logo-preview-draggable{width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;z-index:10;transition:width .2s ease,height .2s ease;display:block}.logo-preview-draggable:active{cursor:grabbing!important}.logo-preview-guide{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.guide-circle{position:absolute;top:50%;left:50%;width:4px;height:4px;background:#3b82f6;border-radius:50%;transform:translate(-50%,-50%);opacity:.6}.guide-crosshair{position:absolute;top:50%;left:50%;width:1px;height:1px;background:#3b82f6;transform:translate(-50%,-50%);opacity:.3}.guide-crosshair:before,.guide-crosshair:after{content:"";position:absolute;background:#3b82f6;opacity:.3}.guide-crosshair:before{top:-20px;left:-.5px;width:1px;height:40px}.guide-crosshair:after{top:-.5px;left:-20px;width:40px;height:1px}@media (max-width: 768px){.logo-preview-circle{width:150px;height:150px}.logo-preview-draggable{width:45px;height:45px}}.logo-controls{margin-top:20px;padding:20px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.logo-control-group{margin-bottom:16px}.logo-control-group:last-child{margin-bottom:0}.logo-control-group label{display:block;margin-bottom:8px;font-weight:500;color:#374151;font-size:14px}.logo-slider{width:80%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#e2e8f0;border-radius:5px;outline:none;transition:opacity .2s;cursor:pointer}.logo-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 5px #0000004d}.logo-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#3b82f6;cursor:pointer;box-shadow:0 2px 5px #0000004d}.logo-drag-hint{text-align:center;color:#6b7280;font-size:14px;margin-bottom:16px;font-style:italic;padding:8px 0}.logo-preview-wrapper{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:12px;position:relative}.logo-preview-container{flex-shrink:0}.logo-actions-left{position:absolute;right:-60px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}.change-logo-btn-icon,.remove-logo-btn-icon{width:36px;height:36px;border-radius:8px;border:1px solid #e2e8f0;background:#ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;font-size:16px}.change-logo-btn-icon{color:#3b82f6}.change-logo-btn-icon:hover{background:#eff6ff;border-color:#3b82f6;transform:translateY(-1px)}.remove-logo-btn-icon{color:#ef4444}.remove-logo-btn-icon:hover{background:#fef2f2;border-color:#ef4444;transform:translateY(-1px)}.change-logo-btn-icon:active,.remove-logo-btn-icon:active{transform:translateY(0)}body{overflow-x:hidden;max-width:100vw}.pools-list{height:100%;display:flex;flex-direction:column;padding:20px;overflow-x:hidden;max-width:100vw;box-sizing:border-box;gap:0}.equipment-changes-card{background-color:#fff3cd;border:1px solid #ffeeba;border-radius:15px;padding:20px;margin-bottom:20px}.changes-header{display:flex;align-items:center;margin-bottom:15px}.warning-icon{color:#856404;font-size:1.5rem;margin-right:10px}.changes-summary{margin-top:15px}.change-item{padding:15px;margin-bottom:15px}.change-item h4{margin-top:0;margin-bottom:10px;display:flex;align-items:center}.change-item ul{margin:0;padding-left:20px;list-style-type:none}.changes-equipment-list{margin-top:10px;display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.change-item li{margin-bottom:5px}.equipment-list-item{display:flex;align-items:center;margin-bottom:10px}.equipment-list-image{width:30px;height:30px;object-fit:contain;margin-right:10px}.equipment-list-info{flex:1}.changes-actions{margin-top:20px;display:flex;justify-content:flex-end}.configure-changes-btn{display:flex;align-items:center;background-color:#0056b3;color:#fff;border:none;border-radius:5px;padding:10px 15px;font-size:1rem;cursor:pointer;transition:background-color .2s ease}.configure-changes-btn:hover{background-color:#004494}.configure-changes-btn svg{margin-right:8px}.config-complete-card{background:linear-gradient(135deg,#d4edda,#c3e6cb);border-radius:15px;padding:20px;margin-bottom:10px;box-shadow:0 4px 8px #0000001a;position:relative;overflow:hidden;border-left:10px solid #28a745}.config-complete-card:before{content:"";position:absolute;top:-10px;right:-10px;width:80px;height:80px;background:rgba(40,167,69,.1);border-radius:50%;z-index:0}.home-config-status-card{background:white;border-radius:15px;padding:16px;margin-bottom:20px;margin-top:0;box-shadow:0 2px 6px #00000014;border:1px solid #e9ecef;position:relative;z-index:5}.weather-card{background:linear-gradient(135deg,#5896e6,#3178c6);border-radius:15px;padding:20px;margin-bottom:20px;color:#fff;box-shadow:0 4px 8px #00000026}.weather-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.weather-header h3{margin:0;font-size:1.3rem;display:flex;align-items:center}.weather-header h3 svg{margin-right:8px}.weather-location{font-size:.9rem;opacity:.9}.weather-current{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.weather-temp{font-size:2.5rem;font-weight:700}.weather-forecast{display:flex;justify-content:space-between;overflow-x:auto;padding-bottom:5px}.forecast-item{display:flex;flex-direction:column;align-items:center;padding:0 10px;min-width:60px}.forecast-hour{font-size:.8rem;margin-bottom:5px;opacity:.9}.forecast-temp{font-size:1.1rem;font-weight:700}.config-complete-header{display:flex;align-items:center;margin-bottom:15px;position:relative;z-index:1}.success-icon{color:#155724;font-size:1.5rem;margin-right:10px}.config-complete-card h3{margin:0;color:#155724;font-weight:600}.config-complete-card p{color:#155724;position:relative;z-index:1}.home-config-status-header{display:flex;align-items:center;margin-bottom:12px}.home-config-status-icon{color:#28a745;font-size:1.4rem;margin-right:10px}.home-config-status-card h3{margin:0;color:#28a745;font-weight:600;font-size:1.1rem}.home-config-status-card p{color:#6c757d;margin:8px 0;font-size:.9rem;line-height:1.4}.home-config-last-update{font-style:italic;color:#adb5bd!important;margin-top:6px!important;font-size:.8rem!important}.home-config-preference-note{color:#6c757d!important;font-size:.85rem!important;margin-top:4px!important;font-weight:500}.home-config-preference-note p{margin:0 0 6px}.home-config-path{color:#28a745!important;font-weight:600!important;padding-left:8px;margin:0!important}.home-config-preference-note svg{margin:0 4px;vertical-align:middle;color:#28a745;font-size:.9rem}.last-update{font-style:italic;color:#6c757d;margin-top:10px}.config-actions{margin-top:20px;display:flex;justify-content:flex-end}.reconfigure-btn{display:flex;align-items:center;background-color:#28a745;color:#fff;border:none;border-radius:5px;padding:10px 15px;font-size:1rem;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #0000001a;position:relative;z-index:1}.reconfigure-btn:hover{background-color:#218838;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.reconfigure-btn svg{margin-right:8px}.first-time-message{background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:15px;padding:20px;margin-bottom:20px;text-align:center}.first-time-actions{margin-top:20px}.setup-equipment-btn{display:flex;align-items:center;justify-content:center;background-color:#0056b3;color:#fff;border:none;border-radius:5px;padding:12px 20px;font-size:1.1rem;cursor:pointer;transition:background-color .2s ease;margin:0 auto}.setup-equipment-btn:hover{background-color:#004494}.setup-equipment-btn svg{margin-right:8px}.equipment-info{padding:20px}.equipment-detected-title{margin-top:0;margin-bottom:5px;color:#0056b3}.equipment-list{margin-top:15px;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;justify-content:center}.equipment-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5px;width:140px;margin:0 auto}.equipment-pagination{display:flex;justify-content:center;align-items:center;margin-top:20px}.pagination-btn{background:none;border:none;font-size:1.2rem;color:#0056b3;cursor:pointer;padding:5px 10px}.pagination-btn:disabled{color:#6c757d;cursor:not-allowed}.pagination-pages{display:flex;margin:0 10px}.pagination-page{background:none;border:1px solid #dee2e6;width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin:0 2px;cursor:pointer;transition:all .2s ease}.pagination-page.active{background-color:#0056b3;color:#fff;border-color:#0056b3}.pagination-page:hover:not(.active){background-color:#e9ecef}.wizard-section{margin-top:30px}.wizard-step{background-color:#fff;border-radius:15px;padding:20px;box-shadow:0 2px 5px #0000001a}.wizard-step-title{margin-top:0;margin-bottom:20px;color:#0056b3;text-align:center;width:100%}.components-title{margin-top:0;margin-bottom:20px;color:#0056b3;text-align:center;width:100%;font-size:1.5rem;font-weight:600}.wizard-description{color:#6c757d;margin-bottom:20px;text-align:center;width:100%}.wizard-progress{display:flex;align-items:center;justify-content:center;margin-bottom:20px}.progress-step{width:30px;height:30px;border-radius:50%;background-color:#e9ecef;border:2px solid #dee2e6;display:flex;align-items:center;justify-content:center;font-weight:700;color:#6c757d;position:relative;z-index:1}.progress-step.active{background-color:#b3d9ff;border-color:#0056b3;color:#0056b3}.progress-step.completed{background-color:#0056b3;border-color:#0056b3;color:#fff}.progress-line{flex:1;height:2px;background-color:#dee2e6;margin:0 -5px;z-index:0}.progress-line.active,.progress-line.completed{background-color:#0056b3}.pool-selection{margin:20px 0}.pool-input-group{display:flex;flex-direction:column;align-items:center}.pool-count-input-wrapper{display:flex;align-items:center;margin:10px 0}.pool-count-btn{width:40px;height:40px;border:1px solid #ced4da;background-color:#f8f9fa;font-size:1.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.pool-count-btn:hover:not(:disabled){background-color:#e9ecef}.pool-count-btn:disabled{color:#adb5bd;cursor:not-allowed}.pool-count-input{width:60px;height:40px;border:1px solid #ced4da;border-left:none;border-right:none;text-align:center;font-size:1.2rem;-moz-appearance:textfield}.pool-count-input::-webkit-inner-spin-button,.pool-count-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pool-count-info{color:#6c757d;margin-top:5px}.wizard-note{background-color:#e7f3ff;border-left:4px solid #0056b3;padding:10px 15px;margin:20px 0;color:#004085}.wizard-buttons,.wizard-buttons-single{display:flex;justify-content:stretch;gap:12px;margin-top:30px;width:100%}.wizard-back-button,.wizard-next-button{display:flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:5px;font-size:1rem;cursor:pointer;transition:all .2s ease;flex:1}.wizard-back-button{background-color:#f8f9fa;border:1px solid #ced4da;color:#6c757d}.wizard-back-button:hover:not(:disabled){background-color:#e9ecef}.wizard-next-button{background-color:#0056b3;border:none;color:#fff}.wizard-next-button:hover:not(:disabled){background-color:#004494}.wizard-back-button:disabled,.wizard-next-button:disabled{opacity:.6;cursor:not-allowed}.wizard-back-button svg{margin-right:8px}.wizard-next-button svg{margin-left:8px}.personalization-toggle-section{margin:20px 0;padding:16px;background:#f8f9fa;border-radius:12px;border:1px solid #e2e8f0}.personalization-toggle-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.personalization-toggle-label{color:#2d3748;font-size:1rem;font-weight:500;flex:1}.pool-name-editor{background-color:#f8f9fa;border-radius:10px;padding:20px;margin:20px 0}.single-pool-editor{display:flex;flex-direction:column;gap:16px}.multi-pool-editor{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0;display:flex;flex-direction:column;gap:16px}.input-with-counter{position:relative;display:flex;flex-direction:column;gap:4px}.name-input-field-single{width:100%;padding:12px 50px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:1rem;color:#374151;background:white;transition:border-color .2s ease,box-shadow .2s ease}.name-input-field-single:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.name-input-field-single:hover{border-color:#9ca3af}.character-counter{position:absolute;top:50%;right:12px;transform:translateY(-50%);pointer-events:none}.counter-text{font-size:.75rem;color:#6b7280;font-weight:500;background:rgba(255,255,255,.9);padding:2px 6px;border-radius:4px;border:1px solid #e5e7eb}.counter-text.warning{color:#f59e0b;background:rgba(245,158,11,.1);border-color:#fbbf24}.counter-text.danger{color:#ef4444;background:rgba(239,68,68,.1);border-color:#f87171}.edit-actions-horizontal{display:flex;gap:12px;justify-content:stretch;align-items:center;width:100%}.edit-actions-horizontal .cancel-edit-btn{flex:1;padding:10px 20px;background:#f3f4f6;color:#6b7280;border:1px solid #d1d5db;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;text-align:center}.edit-actions-horizontal .cancel-edit-btn:hover{background:#e5e7eb;color:#374151}.edit-actions-horizontal .save-name-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;background:#4facfe;color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease}.edit-actions-horizontal .save-name-btn:hover:not(:disabled){background:#3b82f6;transform:translateY(-1px);box-shadow:0 4px 8px #4facfe4d}.edit-actions-horizontal .save-name-btn:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}.names-preview-section{margin:20px 0;padding:16px;background:#f0f8ff;border-radius:12px;border:1px solid #b3d9ff}.preview-title{margin:0 0 12px;color:#2d3748;font-size:1rem;font-weight:600}.names-preview-list{display:flex;flex-direction:column;gap:8px}.name-preview-item{display:flex;align-items:center;gap:12px;padding:8px 12px;background:white;border-radius:8px;border:1px solid #e2e8f0}.pool-number{font-weight:500;color:#4a5568;min-width:80px}.pool-name{color:#2d3748;font-weight:500}.name-input-field{width:100%;padding:12px 50px 12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:1rem;color:#374151;background:white;transition:border-color .2s ease,box-shadow .2s ease}.name-input-field:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.name-input-field:hover{border-color:#9ca3af}.input-with-counter-above{display:flex;flex-direction:column;gap:8px}.label-with-counter{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.character-counter-above{display:flex;justify-content:flex-end;align-items:center}.input-with-arrow{position:relative;display:flex;align-items:center;gap:8px}.name-input-field-with-arrow{flex:1;padding:12px 16px;border:2px solid #d1d5db;border-radius:8px;font-size:1rem;color:#374151;background:white;transition:border-color .2s ease,box-shadow .2s ease}.name-input-field-with-arrow:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.name-input-field-with-arrow:hover{border-color:#9ca3af}.arrow-save-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;color:#4facfe;border:none;cursor:pointer;transition:all .2s ease;flex-shrink:0}.arrow-save-btn:hover:not(:disabled){color:#3b82f6;transform:scale(1.1)}.arrow-save-btn:disabled{color:#9ca3af;cursor:not-allowed;transform:none}.arrow-save-btn svg{font-size:1.8rem}.pool-selector{margin-bottom:20px}.pool-select-dropdown{width:100%;padding:10px;border:1px solid #ced4da;border-radius:5px;font-size:1rem}.pool-edit-panel{background-color:#fff;border-radius:8px;padding:15px;box-shadow:0 1px 3px #0000001a}.edit-pool-header,.edit-name-input{margin-bottom:15px}.edit-name-input label{display:block;margin-bottom:8px;font-weight:500}.input-with-button{display:flex;align-items:stretch;gap:10px}.name-input-field{flex:1;padding:10px;border:1px solid #ced4da;border-radius:5px;font-size:1rem;height:20px}.edit-actions{display:flex;justify-content:flex-end;margin-top:20px}.save-name-btn,.cancel-edit-btn{padding:8px 12px;border-radius:5px;border:none;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.save-name-btn{background-color:#28a745;color:#fff;height:42px;width:42px;padding:0;display:flex;align-items:center;justify-content:center}.save-name-btn:hover:not(:disabled){background-color:#218838}.save-name-btn:disabled{background-color:#6c757d;cursor:not-allowed}.cancel-edit-btn{background-color:transparent;color:#6c757d;padding:8px 16px;font-size:14px}.cancel-edit-btn:hover{color:#dc3545;text-decoration:underline}.pool-progress-info{margin-top:20px;text-align:center}.assignment-title{margin-bottom:20px;color:#333;text-align:center;width:100%;font-size:20px}.all-pools-assignment-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-bottom:20px}.all-pools-assignment-panel.with-scroll{max-height:500px;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:#5fcff9 #f0f0f0}.all-pools-assignment-panel.with-scroll::-webkit-scrollbar{width:8px}.all-pools-assignment-panel.with-scroll::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.all-pools-assignment-panel.with-scroll::-webkit-scrollbar-thumb{background-color:#5fcff9;border-radius:4px}.pool-assignment-section{margin-bottom:32px;padding:20px 0;border-bottom:1px solid #e2e8f0}.pool-assignment-section:last-child{border-bottom:none;margin-bottom:0}.pool-assignment-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}.pool-assignment-header h4{margin:0;color:#2d3748;font-size:1.2rem;font-weight:600}.select-equipment-label{color:#6b7280;font-size:.9rem;font-weight:500}.pool-card-header h4{margin:0;font-size:16px;color:#333;font-weight:600}.select-equipment-label{font-weight:400;font-size:14px;color:#666}.equipment-circles{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}.equipment-circle{width:90px;height:90px;border-radius:50%;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;position:relative;border:2px solid transparent;overflow:hidden;box-shadow:0 2px 4px #0000001a}.equipment-circle:hover:not(.disabled){background-color:#e0e0e0;transform:translateY(-2px)}.equipment-circle.selected{border-color:#5fcff9;background-color:#e6f7ff}.equipment-circle.disabled{opacity:.5;cursor:not-allowed;background-color:#ddd}.equipment-circle-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.2;position:relative;width:100%;height:100%}.equipment-check{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;background-color:#10b981;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 1px 3px #0003}.equipment-model{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.equipment-image{display:flex;justify-content:center;align-items:center;margin-bottom:4px}.equipment-model-short{font-size:18px;font-weight:700;color:#0b1d3a;text-align:center;margin-bottom:4px;line-height:1.2}.equipment-model-img{width:100px;height:100px;object-fit:contain}.equipment-sn{font-size:14px;color:#333;font-weight:600;text-align:center}.no-equipment-assigned{color:#888;text-align:center;padding:15px;background:#f0f0f0;border-radius:8px;margin-top:15px}.pool-assignment-panel{background-color:#f8f9fa;border-radius:10px;padding:20px;margin:20px 0}.assignment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.assignment-progress{color:#6c757d;font-size:.9rem}.available-equipment{margin-bottom:20px}.equipment-selector{margin-top:10px}.equipment-limit-info{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.9rem;color:#6c757d}.equipment-controls{margin-bottom:15px}.equipment-dropdown{width:100%;padding:10px;border:1px solid #ced4da;border-radius:5px;font-size:1rem;margin-bottom:10px}.selection-info{font-size:.9rem;color:#6c757d;font-style:italic}.selected-equipment-list{margin-top:20px}.selected-items{display:flex;flex-direction:column;gap:10px;margin-top:10px}.selected-equipment-item{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-radius:5px;padding:10px 15px;box-shadow:0 1px 3px #0000001a}.equipment-name{font-weight:500}.remove-equipment-btn{background:none;border:none;color:#dc3545;cursor:pointer;font-size:1rem;padding:5px;transition:all .2s ease}.remove-equipment-btn:hover{color:#c82333;transform:scale(1.1)}.no-equipment-message{background-color:#e7f3ff;border-radius:5px;padding:10px 15px;color:#004085;margin-top:15px;text-align:center}.assignment-summary{margin-top:20px;text-align:center;color:#6c757d}.assignment-status{display:flex;justify-content:center;align-items:center;gap:10px;font-size:14px}.status-item{display:flex;align-items:center;gap:5px}.status-count{font-weight:700;font-size:16px;color:#333}.status-divider{color:#ccc;font-size:18px;margin:0 5px}.confirm-assignment-btn{background-color:#0056b3;color:#fff;border:none;border-radius:5px;padding:10px 20px;font-size:1rem;cursor:pointer;transition:all .2s ease;margin-top:15px}.confirm-assignment-btn:hover:not(:disabled){background-color:#004494}.confirm-assignment-btn:disabled{background-color:#6c757d;cursor:not-allowed}.assignment-complete{background-color:#d4edda;border-radius:10px;padding:20px;margin:20px 0}.complete-message{text-align:center;margin-bottom:20px}.complete-icon{font-size:3rem;color:#28a745;margin-bottom:15px}.final-assignment-summary{background-color:#fff;border-radius:8px;padding:15px;box-shadow:0 1px 3px #0000001a}.pool-summary-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #e9ecef}.pool-summary-item:last-child{border-bottom:none}.equipment-count{position:relative;cursor:help}.equipment-count:hover:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#333;color:#fff;padding:5px 10px;border-radius:5px;white-space:pre-line;font-size:.9rem;z-index:1000;width:max-content;max-width:300px}.components-config{margin:20px 0}.pool-components-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:20px 0}.pool-components-panel.with-scroll{max-height:500px;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:#5fcff9 #f0f0f0}.pool-components-panel.with-scroll::-webkit-scrollbar{width:8px}.pool-components-panel.with-scroll::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}.pool-components-panel.with-scroll::-webkit-scrollbar-thumb{background-color:#5fcff9;border-radius:4px}.pool-component-section{margin-bottom:32px;padding:20px 0;border-bottom:1px solid #e2e8f0}.pool-component-section:last-child{border-bottom:none;margin-bottom:0}.pool-component-header{margin-bottom:20px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}.pool-component-header h4{margin:0;color:#2d3748;font-size:1.2rem;font-weight:600}.component-questions{display:flex;flex-direction:column;gap:20px}.component-question{margin-bottom:0}.component-section-title{margin:0 0 16px;color:#4a5568;font-size:1rem;font-weight:500}.dosifier-pumps-row{display:flex;gap:24px;align-items:center}.dosifier-pump-item{display:flex;align-items:center;gap:12px;flex:1}.pump-label{color:#2d3748;font-size:.9rem;font-weight:500;min-width:80px}.wizard-success-message{display:flex;align-items:center;background-color:#d4edda;border-radius:10px;padding:20px;margin:20px 0;color:#155724}.configuration-summary{background-color:#f8f9fa;border-radius:10px;padding:20px;margin:20px 0}.summary-item{margin-bottom:10px}.toast-container{position:fixed;bottom:20px;right:20px;z-index:1000}.toast{display:flex;align-items:center;padding:15px 20px;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin-bottom:10px;animation:slideIn .3s ease-out;background:white;border:3px solid #e2e8f0}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.toast.success{background:white;border:3px solid #38a169;color:#38a169}.toast.error{background:white;border:3px solid #e53e3e;color:#e53e3e}.toast-icon{margin-right:10px;font-size:1.2rem}.skeleton-container{padding:20px}.skeleton-card{background-color:#f8f9fa;border-radius:15px;padding:20px;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.skeleton-title{height:30px;background-color:#e9ecef;border-radius:5px;margin-bottom:20px}.skeleton-text{height:20px;background-color:#e9ecef;border-radius:5px;margin-bottom:15px;width:100%}.skeleton-text.short{width:60%}.skeleton-list{margin-top:30px}.skeleton-item{padding:15px;background-color:#fff;border-radius:8px;margin-bottom:10px;box-shadow:0 1px 3px #0000001a}.skeleton-line{height:15px;background-color:#e9ecef;border-radius:5px;margin-bottom:10px;width:100%}.skeleton-line.short{width:40%}.equipment-assignment-view{display:flex;flex-direction:column;height:100%}.assignment-header{display:flex;align-items:center;margin-bottom:20px}.back-button{background:none;border:none;font-size:1.2rem;color:#0056b3;cursor:pointer;margin-right:15px}.assignment-content{flex:1;display:flex;flex-direction:column;gap:20px}.equipment-summary{padding:15px}.equipment-image{width:130px;height:130px;object-fit:contain;margin-bottom:5px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));transition:transform .2s ease,filter .2s ease;display:block;max-width:100%;box-sizing:border-box;margin-left:auto;margin-right:auto}.equipment-image:hover{transform:translateY(-2px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.3))}.equipment-text{display:flex;flex-direction:column;align-items:center;margin-top:2px;width:130px}.equipment-model{font-weight:500}.equipment-name{font-weight:500;font-size:.75em;color:#0056b3;margin-bottom:2px;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equipment-sn{color:#666;font-size:.9em}.equipment-sn-small{color:#777;font-size:.7em;font-weight:400}.assignment-options{background-color:#f5f5f5;border-radius:10px;padding:15px}.equipment-assignment-list{margin-top:15px}.equipment-assignment-item{display:flex;flex-direction:column;background-color:#fff;border-radius:8px;padding:15px;margin-bottom:15px;box-shadow:0 2px 4px #0000001a}@media (min-width: 768px){.equipment-assignment-item{flex-direction:row;align-items:center;justify-content:space-between}}.equipment-info{display:flex;flex-direction:column;margin-bottom:10px}@media (min-width: 768px){.equipment-info{margin-bottom:0;margin-right:15px}}.assignment-selector{display:flex;flex-direction:column;gap:10px;width:100%}@media (min-width: 768px){.assignment-selector{flex:1;max-width:60%}}.assignment-type-select,.pool-select,.pool-name-input{width:100%;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:.95rem}.no-pools-message{background-color:#fff3cd;border:1px solid #ffeeba;border-radius:5px;padding:10px 15px;margin-top:15px;color:#856404}.delete-pools-option{margin-top:20px;padding-top:15px;border-top:1px solid #ddd}.delete-pools-checkbox{display:flex;align-items:center;cursor:pointer}.delete-pools-checkbox input{margin-right:10px}.delete-pools-section{background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;padding:15px;margin-top:15px;color:#721c24}.delete-pools-list{margin-top:10px;display:flex;flex-direction:column;gap:10px}.delete-pool-item{background-color:#fff;border-radius:5px;padding:10px}.delete-pool-checkbox{display:flex;align-items:center;cursor:pointer}.delete-pool-checkbox input{margin-right:10px}.option-cards{display:flex;gap:15px;margin-top:15px}.option-card{flex:1;background-color:#fff;border:2px solid #ddd;border-radius:10px;padding:15px;text-align:center;cursor:pointer;transition:all .2s ease}.option-card:hover{border-color:#0056b3;transform:translateY(-3px)}.option-card.selected{border-color:#0056b3;background-color:#e7f3ff}.existing-pool-selection,.new-pool-creation{background-color:#f5f5f5;border-radius:10px;padding:15px;margin-top:20px}.assignment-actions{margin-top:20px;display:flex;justify-content:center}.save-assignment-btn{background-color:#28a745;color:#fff;border:none;border-radius:5px;padding:12px 25px;font-size:1rem;cursor:pointer;transition:background-color .2s ease}.save-assignment-btn:hover{background-color:#218838}.save-assignment-btn:disabled{background-color:#6c757d;cursor:not-allowed}@media (max-width: 768px){.option-cards{grid-template-columns:1fr;gap:16px}.assignment-content,.assignment-header{padding:16px}}@media (max-width: 480px){.equipment-summary .equipment-item{gap:8px}.option-card{padding:20px}.save-assignment-btn{width:100%;padding:14px 24px}}@media (max-width: 414px){.pools-list{padding:10px;overflow-x:hidden}.home-config-status-card{margin-top:0;margin-bottom:20px}.equipment-image{width:100px!important;height:100px!important}.equipment-text{width:100px!important}.equipment-circle{width:70px!important;height:70px!important}.equipment-model-img{width:80px!important;height:80px!important}.equipment-assignment-item{flex-direction:column;align-items:flex-start;gap:10px}.equipment-info{width:100%;margin-bottom:10px}.assignment-selector{width:100%}.pool-components-panel,.all-pools-assignment-panel{max-width:100%;left:5px;right:5px}}@media (max-width: 375px){.pools-list{padding:8px}.home-config-status-card{margin-top:0;margin-bottom:20px}.equipment-image{width:90px!important;height:90px!important}.equipment-text{width:90px!important}.equipment-circle{width:60px!important;height:60px!important}.equipment-model-img{width:70px!important;height:70px!important}}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner-large{width:50px;height:50px;border:4px solid #f3f3f3;border-top:4px solid #47578F;border-radius:50%;animation:spin 1s linear infinite}.loading-container p{color:#6c757d;font-size:1rem;font-weight:500;margin:0}.pool-xpert-pro-section{margin:20px 0;padding:16px;background:#f8f9fa;border-radius:12px;border:1px solid #e2e8f0;transition:opacity .3s ease,background-color .3s ease}.pool-xpert-pro-section.disabled-mutually{opacity:.6;background:#f1f3f4;border-color:#d1d5db}.pool-xpert-pro-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.pool-xpert-pro-link{color:#2d3748;text-decoration:none;font-size:1rem;font-weight:500;flex:1}.pool-xpert-pro-link:hover{color:#4facfe;text-decoration:underline}.pro-model-selection{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}.pro-model-label{display:block;font-size:.9rem;font-weight:500;color:#4a5568;margin-bottom:8px}.pro-model-dropdown{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:white;font-size:.9rem;color:#374151;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.pro-model-dropdown:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.pro-model-dropdown:hover{border-color:#9ca3af}.chlorinators-px-section{margin:20px 0;padding:16px;background:#f8f9fa;border-radius:12px;border:1px solid #e2e8f0;transition:opacity .3s ease,background-color .3s ease}.chlorinators-px-section.disabled-mutually{opacity:.6;background:#f1f3f4;border-color:#d1d5db}.chlorinators-px-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.chlorinators-px-link{color:#2d3748;text-decoration:none;font-size:1rem;font-weight:500;flex:1}.chlorinators-px-link:hover{color:#4facfe;text-decoration:underline}.chlorinators-count-selection{margin-top:16px;padding-top:16px;border-top:1px solid #e2e8f0}.chlorinators-count-label{display:block;font-size:.9rem;font-weight:500;color:#4a5568;margin-bottom:8px}.chlorinators-count-dropdown{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;background:white;font-size:.9rem;color:#374151;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.chlorinators-count-dropdown:focus{outline:none;border-color:#4facfe;box-shadow:0 0 0 3px #4facfe1a}.chlorinators-count-dropdown:hover{border-color:#9ca3af}.toggle{width:50px;height:30px;background:#ddd;border-radius:15px;position:relative;cursor:pointer;transition:background-color .3s ease;flex-shrink:0}.toggle.enabled{background:#4CAF50}.toggle.disabled{background:#ddd}.toggle-thumb{width:26px;height:26px;background:white;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0003}.toggle.enabled .toggle-thumb{transform:translate(20px)}@media (max-width: 768px){.pool-xpert-pro-section{margin:16px 0;padding:12px}.pool-xpert-pro-header{gap:12px}.pool-xpert-pro-link{font-size:.9rem}.chlorinators-px-section{margin:16px 0;padding:12px}.chlorinators-px-header{gap:12px}.chlorinators-px-link{font-size:.9rem}.chlorinators-count-selection{margin-top:12px;padding-top:12px}.chlorinators-count-label{font-size:.85rem}.chlorinators-count-dropdown{padding:8px 10px;font-size:.85rem}.pro-model-selection{margin-top:12px;padding-top:12px}.pro-model-label{font-size:.85rem}.pro-model-dropdown{padding:8px 10px;font-size:.85rem}.personalization-toggle-section{margin:16px 0;padding:12px}.personalization-toggle-header{gap:12px}.personalization-toggle-label{font-size:.9rem}.names-preview-section{margin:16px 0;padding:12px}.preview-title{font-size:.9rem}.name-preview-item{padding:6px 10px;gap:8px}.pool-number{min-width:60px;font-size:.85rem}.pool-name{font-size:.85rem}.single-pool-editor{gap:12px}.multi-pool-editor{margin-top:12px;padding-top:12px;gap:12px}.name-input-field-single,.name-input-field{padding:10px 45px 10px 12px;font-size:.9rem}.name-input-field-with-arrow{padding:10px 12px;font-size:.9rem}.arrow-save-btn{width:36px;height:36px}.arrow-save-btn svg{font-size:1.5rem}.label-with-counter{margin-bottom:6px}.pool-assignment-section{margin-bottom:24px;padding:16px 0}.pool-assignment-header{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:12px}.pool-assignment-header h4{font-size:1.1rem}.select-equipment-label{font-size:.85rem}.equipment-circles{gap:8px}.pool-component-section{margin-bottom:24px;padding:16px 0}.pool-component-header{margin-bottom:16px}.pool-component-header h4{font-size:1.1rem}.component-question-header{flex-direction:column;align-items:flex-start;gap:8px}.component-question-header h5{font-size:.9rem}.dosifier-pumps-row{flex-direction:column;gap:16px;align-items:stretch}.dosifier-pump-item{justify-content:space-between;gap:16px}.pump-label{min-width:auto;font-size:.85rem}.character-counter{right:8px}.counter-text{font-size:.7rem;padding:1px 4px}.edit-actions-horizontal{gap:8px;flex-direction:row;align-items:center;justify-content:stretch;width:100%}.edit-actions-horizontal .cancel-edit-btn,.edit-actions-horizontal .save-name-btn{flex:1;padding:10px 16px;font-size:.85rem;justify-content:center}.wizard-buttons,.wizard-buttons-single{gap:8px}.wizard-back-button,.wizard-next-button{padding:10px 16px;font-size:.9rem}.toggle{width:45px;height:28px}.toggle-thumb{width:24px;height:24px}.toggle.enabled .toggle-thumb{transform:translate(17px)}}.tab-content{padding:20px}.tab-content h2{color:var(--dark-color);font-size:1.5rem;margin-bottom:20px}.welcome-header{text-align:center;margin-bottom:0;margin-top:20px;padding:0;background:none;border-radius:0;color:#2d3748;box-shadow:none;position:relative;overflow:visible;max-width:100%;box-sizing:border-box;z-index:100}.welcome-title-container{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.welcome-header h2{margin:0;font-size:1.8rem;position:relative;z-index:101;color:#2d3748;font-weight:600}.metrix-welcome-logo{width:160px;height:auto;opacity:.9;transition:all .3s ease}.metrix-welcome-logo:hover{opacity:1;transform:scale(1.05)}.monitor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px;padding:0 20px}.monitor-header h2{margin:0 0 30px;flex:1;min-width:200px}.pool-selector-container{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;max-width:400px;margin:0 auto}.pool-selector-label{font-size:18px;font-weight:700;color:#111827;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.pool-selector-label .emoji{font-size:1.3em}.pool-selector-icon{color:#0056b3;font-size:16px;margin-right:8px}.pool-selector-button{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#ffffff;border:2px solid #e5e7eb;border-radius:16px;color:#374151;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000000d;min-height:56px}.pool-selector-button:hover{background:#f9fafb;border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 8px 25px #3b82f626}.pool-selector-button:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.arrow-icon{font-size:18px;color:var(--primary-color);transition:transform .3s ease}.arrow-icon.open{transform:rotate(180deg)}.pool-selector-dropdown{position:fixed!important;top:auto;left:auto;right:auto;background:rgba(255,255,255,.95)!important;border:1px solid rgba(0,0,0,.1)!important;border-radius:8px;box-shadow:0 4px 16px #0003!important;z-index:2147483647!important;margin:0;padding:0;list-style:none;max-height:200px;overflow-y:auto;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:120px;max-width:200px}.pool-selector-dropdown li{padding:10px 12px;cursor:pointer;transition:background-color .2s ease;font-size:.9rem;font-weight:500;color:#333;border-bottom:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.pool-selector-dropdown li:last-child{border-bottom:none}.pool-selector-dropdown li:hover{background:rgba(102,126,234,.1)}.pool-selector-dropdown li[aria-selected=true]{background:rgba(102,126,234,.2);color:#667eea;font-weight:600}.setup-required{text-align:center;padding:40px 20px;background:white;border-radius:12px;box-shadow:0 2px 8px #0000001a}.setup-icon{font-size:3rem;color:var(--warning-color);margin-bottom:16px}.setup-required h3{color:var(--dark-color);margin-bottom:12px}.setup-required p{color:var(--text-color);margin:0}.pools-monitor{display:flex;flex-direction:column;gap:20px}.pool-monitor-card{background:white;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;border:1px solid var(--light-gray)}.pool-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--light-gray)}.pool-header h3{color:var(--primary-color);font-size:1.3rem;margin:0}.pool-status{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:20px}.pool-status.online{background:#f0fff4;color:#38a169}.pool-info{margin-bottom:20px}.info-row{display:flex;justify-content:space-between;margin-bottom:8px}.info-label{color:var(--text-color);font-weight:500}.info-value{color:var(--dark-color);font-weight:600}.equipment-section{margin-top:20px}.equipment-section h4{color:var(--primary-color);font-size:1.1rem;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--light-gray);display:flex;align-items:center;gap:8px}.equipment-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:24px}.device-card{background:white;border:1px solid #e9ecef;border-radius:12px;padding:20px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000000d;position:relative;overflow:hidden}.device-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #00000026;border-color:var(--primary-color)}.device-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--primary-light))}.device-card-content{display:flex;flex-direction:column;height:100%}.device-header{display:flex;align-items:center;gap:16px;margin-bottom:20px}.device-image-container{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;box-shadow:0 4px 12px #4361ee4d;overflow:hidden;position:relative}.device-image{width:100%;height:100%;object-fit:cover;border-radius:16px}.device-image-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff}.device-name{color:var(--dark-color);font-size:1.2rem;font-weight:700;margin:0;line-height:1.3}.device-info{flex:1;display:flex;flex-direction:column;gap:16px}.device-status{display:flex;justify-content:flex-end}.device-metrics{display:flex;flex-direction:column;gap:12px;padding:16px;background:#f8f9fa;border-radius:10px;border:1px solid #e9ecef}.metric-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e9ecef}.metric-item:last-child{border-bottom:none}.metric-label{color:var(--text-color);font-size:14px;font-weight:500}.metric-value{color:var(--dark-color);font-size:14px;font-weight:700;background:white;padding:4px 8px;border-radius:6px;border:1px solid #e9ecef}.metrics-link-wrapper{margin-top:20px;padding-top:16px;border-top:2px solid #f1f3f4}.metrics-link-button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4361ee4d}.metrics-link-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4361ee66;background:linear-gradient(135deg,var(--primary-dark),var(--primary-color))}.metrics-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.metrics-modal-container{background:white;border-radius:0;width:100%;height:100%;max-width:none;max-height:none;overflow-y:auto;box-shadow:none;border:none}.metrics-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 30px;border-bottom:2px solid #f1f3f4;background:linear-gradient(135deg,#f8f9fa,#ffffff)}.metrics-modal-title{color:var(--dark-color);font-size:1.4rem;font-weight:700;margin:0}.modal-close{background:none;border:none;font-size:28px;color:var(--text-color);cursor:pointer;padding:8px;border-radius:8px;transition:all .2s ease;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#f1f3f4;color:var(--dark-color)}.metrics-modal-body{padding:30px}.metric-section{margin-bottom:30px}.metric-section h4{color:var(--dark-color);font-size:1.2rem;font-weight:600;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #f1f3f4}.chart-period-selector{display:flex;gap:10px;margin-bottom:20px;background:#f8f9fa;padding:8px;border-radius:12px}.chart-period-selector button{flex:1;padding:12px 20px;border:2px solid transparent;background:white;color:var(--text-color);border-radius:8px;cursor:pointer;transition:all .3s ease;font-size:14px;font-weight:600;box-shadow:0 2px 4px #0000000d}.chart-period-selector button.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color);box-shadow:0 4px 12px #4361ee4d}.chart-period-selector button:hover:not(.active){background:#f1f3f4;transform:translateY(-1px)}.chart-container{height:250px;background:linear-gradient(135deg,#f8f9fa,#ffffff);border:2px solid #e9ecef;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;overflow:hidden}.chart-placeholder{text-align:center;color:var(--text-color);padding:20px}.chart-placeholder p{margin:8px 0;font-size:16px}.chart-placeholder p:first-child{font-weight:600;color:var(--dark-color)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.metric-detail{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:linear-gradient(135deg,#f8f9fa,#ffffff);border:2px solid #e9ecef;border-radius:12px;transition:all .3s ease}.metric-detail:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a;border-color:var(--primary-color)}.metric-detail-label{color:var(--text-color);font-weight:600;font-size:14px}.metric-detail-value{color:var(--dark-color);font-weight:700;font-size:16px;background:white;padding:6px 12px;border-radius:8px;border:1px solid #e9ecef;box-shadow:0 2px 4px #0000000d}.service-recommendation{background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #fdcb6e;border-radius:12px;padding:20px;margin-top:20px;position:relative;overflow:hidden}.service-recommendation:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fdcb6e,#f39c12)}.service-recommendation p{color:#856404;margin:0;font-size:15px;font-weight:600;line-height:1.5}.metrics-modal-footer{padding:24px 30px;border-top:2px solid #f1f3f4;text-align:center;background:linear-gradient(135deg,#f8f9fa,#ffffff)}.metrics-modal-action-btn{padding:16px 32px;background:linear-gradient(135deg,var(--primary-color),var(--primary-light));color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4361ee4d;min-width:150px}.metrics-modal-action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4361ee66;background:linear-gradient(135deg,var(--primary-dark),var(--primary-color))}.monitor-equipment-item{background-color:#fff;border-radius:12px;padding:20px;display:flex;align-items:center;box-shadow:0 4px 8px #0000001a;transition:all .3s ease;overflow:hidden;position:relative;cursor:pointer}.monitor-equipment-item:before{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;background:rgba(0,86,179,.05);border-radius:50%;z-index:0}.monitor-equipment-item:hover{transform:translateY(-4px);box-shadow:0 8px 16px #00000026}.monitor-equipment-item .equipment-image{width:130px;height:130px;object-fit:contain;margin-right:20px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.15));transition:transform .3s ease;position:relative;z-index:1}.monitor-equipment-item:hover .equipment-image{transform:scale(1.05)}.equipment-details{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}.equipment-sn{margin:0 0 8px;color:#777;font-size:.7em}.monitor-equipment-status{display:flex;align-items:center;font-size:.75rem;padding:3px 6px;border-radius:8px;width:fit-content;margin-top:2px}.monitor-equipment-status svg{margin-right:4px;font-size:.8rem}.monitor-equipment-status.online{background-color:#38a16926;color:#2f855a}.monitor-equipment-status.offline{background-color:#e53e3e26;color:#c53030}.monitor-equipment-status.unassigned{background-color:#d69e2e26;color:#b7791f}.monitor-equipment-arrow{display:flex;align-items:center;justify-content:center;color:var(--primary-color);font-size:1.8rem;margin-left:12px;transition:transform .3s ease;position:relative;z-index:1}.monitor-equipment-item:hover .monitor-equipment-arrow{transform:translate(4px)}.temperature-section{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #e0e0e0}.temperature-section h4{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:#e67e22;padding-bottom:8px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:8px}.temperature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.temperature-card{background-color:#f8f9fc;border-radius:12px;padding:20px;display:flex;align-items:center;gap:15px;border:2px solid #e9ecef;transition:border-color .2s ease,box-shadow .2s ease}.temperature-card:hover{border-color:#0056b3;box-shadow:0 4px 12px #0056b31a}.temperature-icon{width:50px;height:50px;border-radius:50%;background-color:#0056b3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;flex-shrink:0}.temperature-icon.water{background-color:#17a2b8}.temperature-info{flex:1}.temperature-info h5{margin:0 0 8px;font-size:1rem;font-weight:600;color:var(--dark-color, #2c3e50)}.temperature-value{margin:0 0 4px;font-size:1.8rem;font-weight:700;color:var(--primary-color, #0056b3)}.temperature-description{margin:0;font-size:.85rem;color:var(--text-secondary, #6c757d);font-style:italic}.temperature-details{margin-top:8px}.temperature-detail{margin:2px 0;font-size:.75rem;color:var(--text-secondary, #6c757d);line-height:1.3}.thermal-sensation{margin-top:8px;font-weight:500;color:var(--primary-color, #0056b3)}.temperature-status{margin-top:8px}.status-optimal{display:inline-block;background-color:#28a745;color:#fff;padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:600}.components-section{margin-top:30px;padding-top:20px}.components-section h4{color:#8e44ad;font-size:1.1rem;margin:0 0 12px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:8px}.section-title-icon{font-size:1.1rem;flex-shrink:0}.temperature-section .section-title-icon,.equipment-section .section-title-icon,.components-section .section-title-icon{font-size:1.4rem}.component-info{display:flex;flex-direction:column;gap:4px;margin-top:4px}.component-life{display:flex;align-items:center;gap:6px;font-size:.7rem}.life-label{color:#666;font-weight:500}.life-percentage{color:var(--primary-color);font-weight:600;background-color:#0056b31a;padding:2px 6px;border-radius:4px}.no-equipment-message{grid-column:1 / -1;padding:30px;text-align:center;background-color:#f8f9fa;border-radius:12px;border:1px dashed #dee2e6}.no-equipment-message p{margin:0;color:#6c757d;font-size:1.1rem}.temperature-card-modern{background:white;border-radius:16px;padding:20px;box-shadow:0 2px 12px #00000014;border:1px solid #f1f5f9;transition:all .3s ease;position:relative;overflow:hidden}.temperature-card-modern:hover{transform:translateY(-4px);box-shadow:0 8px 25px #00000026;border-color:#e2e8f0}.temperature-card-modern.local,.temperature-card-modern.pool{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%)}.temperature-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.temperature-card-title h5{color:#1e293b;margin:0 0 4px;font-size:16px;font-weight:600;line-height:1.2}.temperature-type{color:#64748b;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.temperature-status-badge{padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.temperature-status-badge.optimal{background:linear-gradient(135deg,#f1f5f9 0%,#e2e8f0 100%);color:#475569;border:1px solid #e2e8f0}.temperature-status-badge.offline{background:none;color:#757575;border:none;display:flex;align-items:center;justify-content:center;padding:0}.temperature-status-badge.offline svg{font-size:20px}.temperature-card-content{display:flex;flex-direction:column;gap:16px}.temperature-main-value{display:flex;align-items:baseline;gap:4px}.temperature-number{font-size:36px;font-weight:700;color:#1e293b;line-height:1}.temperature-unit{font-size:20px;font-weight:500;color:#64748b}.temperature-details-grid{display:flex;flex-direction:column;gap:8px}.temperature-detail-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9}.temperature-detail-item:last-child{border-bottom:none}.temperature-detail-item.location{border-bottom:none;padding-bottom:0;display:flex;align-items:center;gap:6px;justify-content:flex-start}.location-icon{font-size:.9rem;color:#64748b}.detail-label{color:#64748b;font-size:13px;font-weight:500}.detail-value{color:#1e293b;font-size:13px;font-weight:600}.temperature-range-info{margin-top:8px}.range-text{color:#64748b;font-size:12px;font-weight:500;background:#f8fafc;padding:6px 10px;border-radius:8px;display:inline-block}@media (max-width: 768px){.monitor-header{flex-direction:column;align-items:stretch;gap:12px;padding:16px 16px 0}.monitor-header h2{text-align:center;min-width:auto}.pool-selector-container{min-width:auto;gap:8px}.pool-selector-label{font-size:16px}.pool-selector-button{flex:1;min-width:auto}.equipment-grid{grid-template-columns:1fr}.temperature-grid{grid-template-columns:1fr 1fr;gap:10px}.temperature-card{padding:12px;min-height:120px}.temperature-icon{width:40px;height:40px;font-size:1.2rem}.temperature-card-modern{padding:16px}.temperature-card-header{margin-bottom:12px}.temperature-card-title h5{font-size:15px}.temperature-type{font-size:11px}.temperature-number{font-size:28px}.temperature-unit{font-size:16px}.temperature-details-grid{gap:6px}.temperature-detail-item{padding:6px 0}.detail-label,.detail-value{font-size:12px}.temperature-status-badge{padding:4px 8px;font-size:10px}.range-text{font-size:11px;padding:4px 8px}.temperature-value{font-size:1.4rem}.temperature-detail{font-size:.7rem}.status-optimal{font-size:.7rem;padding:3px 6px}.temperature-info{display:flex;flex-direction:column;justify-content:space-between;height:100%}.temperature-details{margin-top:auto;text-align:right}.metrics-modal-container{margin:0;max-width:none;border-radius:0}.metrics-grid{grid-template-columns:1fr}.chart-period-selector{flex-wrap:wrap}.chart-period-selector button{flex:1;min-width:100px;padding:10px 16px}.metrics-modal-header,.metrics-modal-body,.metrics-modal-footer{padding:20px}.device-card{padding:16px}.device-image-container{width:50px;height:50px;font-size:20px}.device-image{width:100%;height:100%}.device-name{font-size:1.1rem}}@media (max-width: 390px){.temperature-grid{grid-template-columns:1fr 1fr;gap:8px;padding:0 4px}.temperature-card{padding:12px;min-height:100px;flex-direction:column;text-align:center;gap:8px}.temperature-icon{width:35px;height:35px;font-size:1rem;margin:0 auto}.temperature-info{flex:1;text-align:center}.temperature-info h5{font-size:.85rem;margin-bottom:2px}.temperature-value{font-size:1.4rem;font-weight:600}.temperature-description{font-size:.7rem;margin-top:2px}.temperature-card-modern{padding:12px;margin:0 2px}.temperature-card-header{margin-bottom:8px;text-align:center}.temperature-card-title h5{font-size:.85rem;margin-bottom:2px}.temperature-type{font-size:.7rem}.temperature-card-content{text-align:center}.temperature-main-value{margin-bottom:6px}.temperature-number{font-size:1.6rem;font-weight:700}.temperature-unit{font-size:.9rem}.temperature-details-grid{grid-template-columns:1fr;gap:4px;margin-top:8px}.temperature-detail-item{padding:4px 6px;text-align:center;font-size:.7rem}.temperature-status-badge{font-size:.6rem;padding:2px 6px}}@media (min-width: 769px){.monitor-header{padding:30px 30px 0}}.equipment-card-horizontal{background:white;border-radius:16px;padding:20px;box-shadow:0 4px 12px #00000014;border:2px solid transparent;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden}.equipment-card-horizontal:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);transform:scaleX(0);transition:transform .3s ease}.equipment-card-horizontal:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f;border-color:#667eea}.equipment-card-horizontal:hover:before{transform:scaleX(1)}.equipment-image-section{flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.equipment-model-circle{width:80px;height:80px;border-radius:50%;position:relative;overflow:hidden;box-shadow:0 4px 12px #0096ff4d;display:flex;align-items:center;justify-content:center}.water-sphere{width:100%;height:100%;background:linear-gradient(135deg,#4fc3f7 0%,#29b6f6 50%,#0288d1 100%);border-radius:50%;position:relative;overflow:hidden}.water-waves{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;overflow:hidden}.wave{position:absolute;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);border-radius:50%;animation:wave-animation 3s ease-in-out infinite}.wave1{top:-50%;left:-50%;animation-delay:0s}.wave2{top:-50%;left:-50%;animation-delay:1s;transform:rotate(120deg)}.wave3{top:-50%;left:-50%;animation-delay:2s;transform:rotate(240deg)}@keyframes wave-animation{0%,to{transform:rotate(0) scale(1);opacity:.3}50%{transform:rotate(180deg) scale(1.1);opacity:.6}}.model-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:1.4rem;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 3px rgba(0,0,0,.3);z-index:10}.equipment-info-section{flex:1;display:flex;flex-direction:column;gap:12px}.equipment-main-info{display:flex;flex-direction:column;gap:4px}.equipment-sn{color:#64748b;font-size:.9rem;margin:0;font-weight:500}.equipment-status-section{display:flex;align-items:center}.equipment-status-indicator{display:flex;align-items:center;gap:8px}.equipment-action-section{flex-shrink:0;display:flex;align-items:center}.click-hint{display:flex;align-items:center;justify-content:space-between;color:#667eea;font-size:.85rem;font-weight:500}.hint-text{opacity:.8}.hint-arrow{font-size:1.1rem;transition:transform .3s ease}.equipment-card-modern:hover .hint-arrow{transform:translate(4px)}.component-card-modern{background:white;border-radius:16px;padding:20px;box-shadow:0 4px 12px #00000014;border:2px solid transparent;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden}.component-card-modern:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b 0%,#d97706 100%);transform:scaleX(0);transition:transform .3s ease}.component-card-modern:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f;border-color:#f59e0b}.component-card-modern:hover:before{transform:scaleX(1)}.component-card-header{display:flex;justify-content:space-between;align-items:flex-start}.component-image-container{width:50px;height:50px;background:transparent;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:0}.component-image{width:100%;height:100%;object-fit:contain}.component-status-indicator{display:flex;align-items:center;gap:8px}.component-card-content{flex:1}.component-name{color:var(--dark-color);font-size:1.1rem;font-weight:600;margin:0 0 12px;line-height:1.3}.component-metrics{display:flex;flex-direction:column;gap:8px}.life-metric{display:flex;flex-direction:column;gap:6px}.metric-label{color:#64748b;font-size:.8rem;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.life-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.life-fill{height:100%;background:linear-gradient(90deg,#10b981 0%,#059669 100%);border-radius:3px;transition:width .3s ease}.metric-value{color:#47578f;font-size:.8rem;font-weight:600;text-align:center;background:none;border:none;padding:0}.component-card-footer{border-top:1px solid #f1f5f9;padding-top:12px}@media (max-width: 768px){.equipment-grid{grid-template-columns:1fr;gap:16px}.equipment-card-horizontal,.component-card-modern{padding:16px}.equipment-image-section,.equipment-model-circle{width:60px;height:60px}.model-text{font-size:1rem;letter-spacing:.3px}.component-image-container{width:40px;height:40px}.click-hint{font-size:.8rem}}.component-card-horizontal{background:white;border-radius:16px;padding:20px;box-shadow:0 4px 12px #00000014;border:2px solid transparent;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:20px;position:relative;overflow:hidden}.component-card-horizontal:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#f59e0b 0%,#d97706 100%);transform:scaleX(0);transition:transform .3s ease}.component-card-horizontal:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001f;border-color:#f59e0b}.component-card-horizontal:hover:before{transform:scaleX(1)}.component-image-section{flex-shrink:0;width:80px;height:80px;display:flex;align-items:center;justify-content:center}.component-image-large{width:100%;height:100%;object-fit:contain}.component-info-section{flex:1;display:flex;flex-direction:column;gap:12px}.component-main-info{display:flex;flex-direction:column;gap:8px}.component-name{color:var(--dark-color);font-size:1.2rem;font-weight:600;margin:0;line-height:1.3}.component-battery{display:flex;align-items:center;gap:8px}.battery-icon{color:#f59e0b;font-size:1.1rem}.battery-text{color:#64748b;font-size:.9rem;font-weight:500}.battery-percentage{color:#47578f;font-size:.9rem;font-weight:600}.component-action-section{flex-shrink:0;display:flex;align-items:center}@media (max-width: 768px){.component-card-horizontal{padding:16px}.component-image-section{width:60px;height:60px}.component-name{font-size:1.1rem}.battery-icon{font-size:1rem}.battery-text,.battery-percentage{font-size:.8rem}}.monitor-config-status-card{background:white;border-radius:15px;padding:16px;margin-bottom:20px;margin-top:0;box-shadow:0 2px 6px #00000014;border:1px solid #e9ecef;position:relative;z-index:5}.monitor-config-status-header{display:flex;align-items:center;margin-bottom:12px}.monitor-config-status-icon{color:#0056b3;font-size:1.4rem;margin-right:10px}.monitor-config-status-card h3{margin:0;color:#0056b3;font-weight:600;font-size:1.1rem}.monitor-config-status-card p{color:#6c757d;margin:8px 0;font-size:.9rem;line-height:1.4}.monitor-config-preference-note{color:#6c757d!important;font-size:.85rem!important;margin-top:4px!important;font-weight:500}.monitor-config-preference-note p{margin:0 0 6px}.monitor-config-path{color:#0056b3!important;font-weight:600!important;padding-left:8px;margin:0!important}.monitor-config-status-card p svg,.monitor-config-preference-note svg{margin:0 4px;vertical-align:middle;color:#0056b3;font-size:.9rem}.monitor-config-status-card.reports-card{background:linear-gradient(135deg,#fff5f5 0%,#ffe8e8 100%);border:2px solid #ff6b6b;box-shadow:0 4px 12px #ff6b6b26}.monitor-config-status-card.reports-card .monitor-config-status-icon,.monitor-config-status-card.reports-card h3{color:#ff6b6b}.monitor-config-status-card.reports-card p{color:#d63031}.monitor-config-status-card.reports-card p svg,.monitor-config-status-card.reports-card .monitor-config-path svg{color:#ff6b6b}.home-savings-card{background:white;border-radius:15px;padding:16px;box-shadow:0 4px 12px #228b2226;border:2px solid #4caf50;margin-bottom:20px;position:relative;overflow:hidden}.home-savings-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#4caf50,#66bb6a,#81c784)}.home-savings-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #228b2240;border-color:#388e3c;transition:all .3s ease}.home-savings-card:hover .home-savings-icon{transform:scale(1.05);transition:transform .3s ease}.home-savings-content{display:flex;align-items:center;gap:16px}.home-savings-text{flex:1}.home-savings-header h3{color:#2e7d32;font-size:1.1rem;font-weight:600;margin:0 0 8px;line-height:1.4}.savings-highlight{color:#1b5e20;font-weight:700;text-shadow:0 1px 2px rgba(27,94,32,.3)}.home-savings-description{color:#4caf50;font-size:.95rem;margin:0;line-height:1.4;font-weight:500}.home-savings-icon{width:60px;height:60px;background:linear-gradient(135deg,#e8f5e8 0%,#c8e6c9 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2e7d32;font-size:28px;flex-shrink:0;box-shadow:0 2px 8px #2e7d324d;border:2px solid #4caf50}@media (max-width: 768px){.home-savings-card{padding:14px;margin-bottom:16px}.home-savings-content{gap:12px}.home-savings-header h3{font-size:1rem;line-height:1.3}.home-savings-description{font-size:.9rem}.home-savings-icon{width:50px;height:50px;font-size:24px}}.weather-icon{font-size:1.2rem;margin-left:8px}.weather-loading{font-size:1.2rem;margin-left:8px;opacity:.7}.weather-fa-icon{font-size:1.2rem;margin-right:8px;color:var(--primary-color, #0056b3)}.weather-fa-icon.sunny{color:#ffa726}.weather-fa-icon.partly-cloudy{color:#90a4ae}.weather-fa-icon.cloudy{color:#78909c}.weather-fa-icon.overcast{color:#607d8b}.weather-fa-icon.mist{color:#b0bec5}.weather-fa-icon.rain{color:#42a5f5}.weather-fa-icon.snow{color:#e3f2fd}.weather-fa-icon.thunder{color:#7b1fa2}.last-update-footer{display:flex;justify-content:center;margin-top:20px;padding:16px 0;border-top:1px solid var(--border-color, #e0e0e0)}.last-update-indicator{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-muted, #666);background:var(--light-bg, #f8f9fa);padding:8px 16px;border-radius:20px;border:1px solid var(--border-color, #e0e0e0);box-shadow:0 2px 4px #0000000d}.update-text{font-weight:500;white-space:nowrap}.refresh-spinner{animation:spin 1s linear infinite;font-size:.9rem}.pool-analysis-info{margin-top:12px;text-align:center}.pool-analysis-info p{font-size:.85rem;color:var(--text-secondary, #666);margin:0;line-height:1.4}.section-separator{height:1px;background:linear-gradient(90deg,transparent 0%,#e0e0e0 20%,#e0e0e0 80%,transparent 100%);margin:30px 0;border:none}@media (max-width: 768px){.last-update-footer{margin-top:16px;padding:12px 0}.last-update-indicator{font-size:.8rem;padding:6px 12px}.metrix-welcome-logo{width:140px}.welcome-title-container{gap:10px}}@media (max-width: 480px){.metrix-welcome-logo{width:120px}.welcome-title-container{gap:8px}.welcome-header{padding:0;margin-bottom:-20px;margin-top:16px}.welcome-header h2{font-size:1.5rem;color:#0056b3;font-weight:600}}@media (max-width: 360px){.metrix-welcome-logo{width:110px}.welcome-title-container{gap:6px}.welcome-header{padding:0;margin-bottom:-20px;margin-top:16px}.welcome-header h2{font-size:1.3rem;color:#0056b3;font-weight:600}}.sensors-combined-image{display:flex;align-items:center;justify-content:center;gap:0px;width:100%;height:100%}.sensor-image-small{width:48px;height:48px;object-fit:contain}.ph-sensor{filter:hue-rotate(45deg) saturate(1.5)}.orp-sensor{filter:hue-rotate(0deg) saturate(1.5)}@media (max-width: 768px){.sensor-image-small{width:40px;height:40px}.sensors-combined-image{gap:0px}}@media (max-width: 480px){.sensor-image-small{width:36px;height:36px}.sensors-combined-image{gap:0px}}.equipment-list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:16px}.equipment-item{display:flex;justify-content:center;padding:16px;background:transparent}.equipment-image-container{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.equipment-image{width:160px;height:160px;object-fit:contain}.equipment-name{font-size:1.2rem;font-weight:800;color:#111827;margin:0;text-align:center}.equipment-sn-small{font-size:.875rem;color:#6b7280;margin:0;text-align:center}.equipment-status-indicator{display:flex;align-items:center;justify-content:center;gap:6px;padding:4px 8px;border-radius:12px;font-size:.7rem;font-weight:600;white-space:nowrap;box-shadow:0 1px 2px #0000001a;height:auto}.equipment-status-indicator.equipment-online{background-color:#dcfce7;color:#166534}.equipment-status-indicator.equipment-offline{background-color:#fef2f2;color:#dc2626}.equipment-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.equipment-status-indicator.equipment-online .equipment-status-dot{background-color:#22c55e}.equipment-status-indicator.equipment-offline .equipment-status-dot{background-color:#dc2626}.equipment-status-text{font-size:inherit;font-weight:inherit;color:inherit}@media (max-width: 1200px){.equipment-list{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.equipment-list{grid-template-columns:repeat(2,1fr);gap:16px}.equipment-item{padding:12px}.equipment-image-container{gap:8px}.equipment-image{width:125px;height:125px}.equipment-status-indicator{font-size:.65rem;padding:2px 5px}.equipment-name{font-size:1.1rem;font-weight:800;color:#111827}.equipment-sn-small{font-size:.8rem}}@media (max-width: 480px){.equipment-item{padding:12px}.equipment-image-container{gap:6px}.equipment-image{width:100px;height:100px}.equipment-status-indicator{font-size:.6rem;padding:2px 4px}.equipment-name{font-size:1rem;font-weight:800;color:#111827}.equipment-sn-small{font-size:.75rem}}.pool-analysis-content{margin-top:30px;padding-top:20px;border-top:1px solid #e0e0e0;margin-bottom:20px}.pool-analysis-header{margin-bottom:20px}.pool-analysis-header h4{color:var(--dark-color);font-size:1.2rem;margin:0;font-weight:600;display:flex;align-items:center;gap:.5rem}.pool-status-summary{display:flex;align-items:center;padding:1rem 1.25rem;border-radius:10px;margin-bottom:1.5rem;color:#fff}.pool-status-summary.ok,.pool-status-summary.good{background-color:#28a745}.pool-status-summary.warning{background-color:#ffc107;color:#333}.pool-status-summary.critical{background-color:#dc3545}.pool-status-icon{font-size:2.2rem;margin-right:1rem;flex-shrink:0}.pool-status-text h5{margin:0 0 .25rem;font-size:1.2rem;font-weight:600}.pool-status-text p{margin:0;font-size:.85rem;line-height:1.4}.pool-trends-section h5{font-size:1.1rem;font-weight:600;color:#33475b;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid #e0e5eb}.pool-trends-section h5 svg{font-size:1.2em;color:var(--life-medium-color, #FFC107)}.pool-charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-bottom:1.5rem}.pool-chart-wrapper{background-color:#fff;padding:.75rem;border-radius:8px;box-shadow:0 2px 8px #00000012;height:200px}.pool-analysis-recommendations h5{font-size:1.1rem;font-weight:600;color:#33475b;margin:0 0 1rem;display:flex;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:1px solid #e0e5eb}.pool-analysis-recommendations h5 svg{font-size:1.2em;color:var(--life-medium-color, #FFC107)}.pool-recommendation-item{display:flex;gap:.75rem;padding:.8rem 1rem;border-radius:8px;margin-bottom:.75rem;border:1px solid #e0e5eb;align-items:flex-start;background-color:#fff}.pool-recommendation-item svg{font-size:1.3rem;flex-shrink:0;margin-top:.15rem}.pool-recommendation-item p{margin:0;font-size:.85rem;line-height:1.5}.pool-recommendation-item p strong{color:#33475b}.pool-recommendation-item.ok{border-left:4px solid #28a745;background-color:#e9f5ec}.pool-recommendation-item.ok svg{color:#28a745}.pool-recommendation-item.info{border-left:4px solid #007bff;background-color:#e6f3ff}.pool-recommendation-item.info svg{color:#007bff}.pool-recommendation-item.warning{border-left:4px solid #ffc107;background-color:#fff8e6}.pool-recommendation-item.warning svg{color:#ffc107}.pool-recommendation-item.critical{border-left:4px solid #dc3545;background-color:#fdecea}.pool-recommendation-item.critical svg{color:#dc3545}.pool-info-section{margin-top:1.5rem;padding-top:1rem;border-top:1px dashed #ced4da;font-size:.8rem;color:#6c757d;background-color:#fff;padding:1rem;border-radius:8px}.pool-info-section p{margin-bottom:.3rem}.pool-info-section strong{color:#495057}.pool-data-update-time{font-style:italic;font-size:.75rem;margin-top:.5rem;text-align:right}@media (max-width: 600px){.pool-analysis-content{padding:15px;margin-top:20px}.pool-analysis-header h4{font-size:1.1rem}.pool-analysis-content{font-size:.85rem}.pool-status-summary{padding:.8rem 1rem;margin-bottom:1.25rem}.pool-status-icon{font-size:1.8rem;margin-right:.8rem}.pool-status-text h5{font-size:1.05rem}.pool-status-text p{font-size:.8rem}.pool-trends-section h5,.pool-analysis-recommendations h5{font-size:1rem;margin-bottom:.75rem}.pool-trends-section h5 svg,.pool-analysis-recommendations h5 svg{font-size:1.1em}.pool-charts-grid{grid-template-columns:1fr;gap:1rem}.pool-chart-wrapper{height:180px;padding:.5rem}.pool-recommendation-item{padding:.7rem .9rem;gap:.6rem}.pool-recommendation-item svg{font-size:1.1rem}.pool-recommendation-item p{font-size:.8rem}.pool-info-section{font-size:.75rem;padding:.8rem}.pool-data-update-time{font-size:.7rem}}@media (max-width: 400px){.pool-analysis-content{padding:12px;margin-top:15px}.pool-analysis-header h4{font-size:1rem}.pool-analysis-content{font-size:.8rem}.pool-status-summary{flex-direction:column;text-align:center;padding:.7rem}.pool-status-icon{margin-right:0;margin-bottom:.5rem;font-size:1.6rem}.pool-status-text h5{font-size:1rem}.pool-status-text p{font-size:.75rem}.pool-trends-section h5,.pool-analysis-recommendations h5{font-size:.9rem}.pool-chart-wrapper{height:160px;padding:.3rem}.pool-recommendation-item{padding:.6rem .8rem}.pool-recommendation-item svg{font-size:1rem}.pool-recommendation-item p{font-size:.75rem}.pool-info-section{font-size:.7rem;padding:.6rem}.pool-data-update-time{font-size:.65rem}}.component-detail-view{min-height:100vh;background-color:#f8f9fc;padding:20px;box-sizing:border-box}.component-detail-header{background-color:#fff;border-radius:0;padding:16px 20px;margin-bottom:0;box-shadow:none;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10}.component-detail-title-group{flex:1}.component-detail-title{margin:0;font-size:1.3rem;font-weight:600;color:#1d1d1f;line-height:1.3;letter-spacing:-.3px}.component-detail-subtitle{margin:4px 0 0;font-size:.85rem;color:#86868b;letter-spacing:-.1px}.component-detail-body{background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;font-size:.9rem;line-height:1.6;color:var(--text-secondary, #4a5568)}.component-service-recommendation{background-color:#fff3cd;color:#856404;border:1px solid #ffeeba;padding:12px 16px;border-radius:8px;margin:0 0 20px;text-align:center;font-size:.9rem}.component-service-recommendation strong{font-weight:600}.component-metric-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px dashed #e2e8f0}.component-metric-section:last-of-type{border-bottom:none;margin-bottom:10px;padding-bottom:10px}.component-metric-section h4{font-size:1.1rem;font-weight:600;color:var(--dark-color, #333);margin-top:0;margin-bottom:15px;display:flex;align-items:center;gap:8px}.component-metric-section p{margin-bottom:8px;color:#555}.component-metric-section p:last-child{margin-bottom:0}.component-chart-period-selector{display:flex;justify-content:center;gap:8px;margin-bottom:15px}.component-chart-period-selector button{padding:8px 16px;font-size:.8rem;border:1px solid #d1d9e4;background-color:#fff;color:var(--text-secondary, #555);border-radius:20px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;font-weight:500}.component-chart-period-selector button:hover{background-color:#f0f2f5;border-color:#b0b9c6}.component-chart-period-selector button.active{background-color:var(--primary-color, #0056b3);color:#fff;border-color:var(--primary-color, #0056b3);font-weight:600;box-shadow:0 2px 4px #0000001a}.component-chart-container{position:relative;height:250px;width:100%;max-width:600px;margin:10px auto 0;padding:10px;background-color:#f8f9fc;border-radius:8px;border:1px solid #e9edf0;box-sizing:border-box}.component-tank-depletion-section h4{display:flex;align-items:center;gap:8px}.component-tank-depletion-section svg{font-size:1.2em;color:var(--text-secondary, #555);flex-shrink:0}.component-tank-depletion-section p{font-size:1.1rem;font-weight:500;color:var(--dark-color, #333)}.component-detail-tabs{display:flex;gap:8px;margin-bottom:20px;background-color:#fff;border-radius:12px;padding:8px;box-shadow:0 2px 8px #0000001a}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:none;background:transparent;color:var(--text-secondary, #6c757d);border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.9rem;font-weight:500}.tab-button:hover{background-color:#f8f9fc;color:var(--primary-color, #0056b3)}.tab-button.active{background-color:var(--primary-color, #0056b3);color:#fff;box-shadow:0 2px 4px #0056b333}.tab-button svg{font-size:1rem}.component-detail-content{background-color:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;min-height:400px}.overview-tab{display:flex;flex-direction:column;gap:20px}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.status-card{background-color:#f8f9fc;border-radius:12px;padding:20px;border:2px solid #e9ecef;transition:all .3s ease;position:relative;overflow:hidden}.status-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:var(--primary-color, #0056b3)}.status-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color, #0056b3),var(--primary-light, #3b82f6))}.status-icon{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#f8f9fc,#ffffff);margin-bottom:15px;box-shadow:0 4px 12px #0000001a}.status-icon svg{font-size:1.5rem}.status-info{text-align:center}.status-info h3{margin:0 0 10px;font-size:1.1rem;font-weight:600;color:var(--dark-color, #2c3e50)}.status-value{font-size:2.5rem;font-weight:700;color:var(--primary-color, #0056b3);margin:0 0 10px;display:flex;align-items:baseline;justify-content:center;gap:4px}.status-unit{font-size:1.2rem;font-weight:500;color:var(--text-secondary, #6c757d)}.status-badge{display:inline-block;padding:6px 12px;border-radius:20px;font-size:.8rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px}.sensors-tab h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.sensors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.sensor-card{background-color:#f8f9fc;border-radius:12px;padding:20px;border:2px solid #e9ecef;transition:all .3s ease;text-align:center}.sensor-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a;border-color:var(--primary-color, #0056b3)}.sensor-card h4{margin:0 0 15px;font-size:1rem;font-weight:600;color:var(--dark-color, #2c3e50);text-transform:capitalize}.sensor-value{font-size:2rem;font-weight:700;color:var(--primary-color, #0056b3);margin:0 0 10px;display:flex;align-items:baseline;justify-content:center;gap:4px}.sensor-unit{font-size:1rem;font-weight:500;color:var(--text-secondary, #6c757d)}.sensor-status{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0;font-size:.9rem;font-weight:500}.status-indicator{width:8px;height:8px;border-radius:50%;display:inline-block}.sensor-timestamp{font-size:.8rem;color:var(--text-secondary, #6c757d);font-style:italic}.no-data{grid-column:1 / -1;text-align:center;padding:40px 20px;color:var(--text-secondary, #6c757d)}.analytics-tab h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.analytics-placeholder{text-align:center;padding:40px 20px;background-color:#f8f9fc;border-radius:12px;border:2px dashed #e9ecef;color:var(--text-secondary, #6c757d)}.settings-tab h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.settings-placeholder{text-align:center;padding:40px 20px;background-color:#f8f9fc;border-radius:12px;border:2px dashed #e9ecef;color:var(--text-secondary, #6c757d)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-secondary, #6c757d)}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color, #0056b3);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}.loading-state p{margin:0;font-size:1rem;font-weight:500}.error-state{text-align:center;padding:40px 20px;color:var(--text-secondary, #6c757d)}.error-state h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.dosificadores-section{margin-bottom:30px}.dosificadores-section h3{color:var(--text-primary, #1f2937);font-size:1.5rem;font-weight:600;margin-bottom:20px;border-bottom:2px solid var(--primary-color, #0056b3);padding-bottom:10px}.dosificadores-group,.tanques-group{margin-bottom:25px}.dosificadores-group h4,.tanques-group h4{color:var(--text-secondary, #6c757d);font-size:1.2rem;font-weight:500;margin-bottom:15px;display:flex;align-items:center;gap:8px}.dosificadores-grid,.tanques-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}.dosificador-card,.tanque-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;border:1px solid #e5e7eb;transition:all .2s ease}.dosificador-card:hover,.tanque-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.dosificador-header,.tanque-header{display:flex;align-items:center;gap:12px;margin-bottom:15px;padding-bottom:10px;border-bottom:1px solid #e5e7eb}.dosificador-header h5,.tanque-header h5{color:var(--text-primary, #1f2937);font-size:1.1rem;font-weight:600;margin:0}.dosificador-metrics,.tanque-metrics{display:flex;flex-direction:column;gap:12px}.metric{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6}.metric:last-child{border-bottom:none}.metric-label{color:var(--text-secondary, #6c757d);font-size:.9rem;font-weight:500}.metric-value{color:var(--text-primary, #1f2937);font-size:1rem;font-weight:600}.alert{background:#fef3c7;border:1px solid #f59e0b;border-radius:8px;padding:8px 12px;margin-top:10px}.alert-text{color:#92400e;font-size:.9rem;font-weight:500}.metricas-totales{background:#f8fafc;border-radius:12px;padding:20px;margin-top:20px}.metricas-totales h4{color:var(--text-primary, #1f2937);font-size:1.2rem;font-weight:600;margin-bottom:15px;text-align:center}.metricas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}.metrica-card{background:#fff;border-radius:8px;padding:15px;text-align:center;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb}.metrica-icon{margin-bottom:10px}.metrica-icon svg{font-size:1.5rem}.metrica-info h5{color:var(--text-secondary, #6c757d);font-size:.9rem;font-weight:500;margin:0 0 5px}.metrica-value{color:var(--text-primary, #1f2937);font-size:1.2rem;font-weight:600;margin:0}.sensors-section{margin-top:30px;padding-top:20px}.sensors-section h3{color:var(--text-primary, #1f2937);font-size:1.5rem;font-weight:600;margin-bottom:20px}@media (max-width: 600px){.component-detail-view{padding:15px}.component-detail-header{padding:12px 16px;gap:12px}.component-detail-title{font-size:1.2rem}.component-detail-body{padding:15px;font-size:.85rem}.component-service-recommendation{padding:10px 12px;font-size:.85rem;margin-bottom:15px}.component-metric-section{margin-bottom:20px;padding-bottom:15px}.component-metric-section h4{font-size:1rem;margin-bottom:10px}.component-metric-section p{font-size:.85rem}.component-chart-period-selector{gap:6px;margin-bottom:12px}.component-chart-period-selector button{padding:6px 12px;font-size:.75rem}.component-chart-container{height:220px;padding:8px}.component-tank-depletion-section p{font-size:1rem}.component-detail-tabs{flex-direction:column;gap:4px}.tab-button{padding:10px 12px;font-size:.85rem}.status-grid{grid-template-columns:1fr;gap:15px}.status-card{padding:15px}.status-icon{width:50px;height:50px;margin-bottom:10px}.status-icon svg{font-size:1.2rem}.status-value{font-size:2rem}.status-unit{font-size:1rem}.sensors-grid{grid-template-columns:1fr;gap:15px}.sensor-card{padding:15px}.sensor-value{font-size:1.5rem}.sensor-unit{font-size:.9rem}}@media (max-width: 400px){.component-detail-view{padding:10px}.component-detail-header{padding:12px 16px}.component-detail-title{font-size:1.1rem}.component-detail-body{padding:12px;font-size:.8rem}.component-service-recommendation{font-size:.8rem;padding:8px 10px}.component-metric-section h4{font-size:.95rem}.component-metric-section p{font-size:.8rem}.component-chart-container{height:200px;padding:6px}.component-chart-period-selector button{font-size:.7rem;padding:5px 10px}.component-tank-depletion-section p{font-size:.95rem}.component-detail-tabs{padding:6px}.tab-button{padding:8px 10px;font-size:.8rem}.tab-button svg{font-size:.9rem}.component-detail-content{padding:15px;min-height:300px}.status-card{padding:12px}.status-icon{width:40px;height:40px;margin-bottom:8px}.status-icon svg{font-size:1rem}.status-info h3{font-size:1rem}.status-value{font-size:1.8rem}.status-unit{font-size:.9rem}.status-badge{font-size:.7rem;padding:4px 8px}.sensor-card{padding:12px}.sensor-card h4{font-size:.9rem}.sensor-value{font-size:1.3rem}.sensor-unit,.sensor-status{font-size:.8rem}.sensor-timestamp{font-size:.7rem}.analytics-placeholder,.settings-placeholder,.loading-state{padding:30px 15px}.spinner{width:30px;height:30px;border-width:3px}.loading-state p{font-size:.9rem}.error-state{padding:30px 15px}.error-state h3{font-size:1.1rem}.dosificadores-grid,.tanques-grid{grid-template-columns:1fr;gap:15px}.dosificador-card,.tanque-card{padding:15px}.dosificador-header,.tanque-header{gap:8px}.dosificador-header h5,.tanque-header h5{font-size:1rem}.metric{padding:6px 0}.metric-label{font-size:.85rem}.metric-value{font-size:.9rem}.metricas-grid{grid-template-columns:1fr;gap:10px}.metrica-card{padding:12px}.metrica-icon svg{font-size:1.2rem}.metrica-info h5{font-size:.8rem}.metrica-value{font-size:1rem}}.cell-specific-content,.pump-specific-content,.maintenance-section{margin-bottom:2rem}.maintenance-card{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:1.5rem}.maintenance-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.maintenance-title-group{display:flex;align-items:center}.maintenance-icon{font-size:1.2rem;color:#6c757d;margin-right:.5rem}.maintenance-header h4{margin:0;color:#495057}.edit-maintenance-btn{background:none;border:none;color:#6c757d;cursor:pointer;padding:.5rem;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;font-size:1.1rem}.edit-maintenance-btn:hover{background-color:#e9ecef;color:#495057}.edit-maintenance-btn:active{transform:scale(.95)}.maintenance-info p{margin:.5rem 0;color:#6c757d}.chart-section{margin-bottom:2rem}.chart-section h4{margin-bottom:1rem;color:#495057;font-size:1.1rem}.chart-container{height:300px;background:white;border:1px solid #e9ecef;border-radius:8px;padding:1rem}.cell-specific-content .chart-section{background:transparent;border-radius:0;padding:0;margin-bottom:1.5rem;box-shadow:none}.cell-specific-content .chart-section h4{color:#2e86ab;font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.cell-specific-content .chart-container{height:250px;background:#f8f9fa;border:none;border-radius:8px;padding:1rem}.ph-dosifier-specific-content .chart-section,.chlorine-dosifier-specific-content .chart-section{background:transparent;border-radius:0;padding:0;margin-bottom:1.5rem;box-shadow:none}.ph-dosifier-specific-content .chart-section h4,.chlorine-dosifier-specific-content .chart-section h4{color:#2e86ab;font-size:1.1rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.ph-dosifier-specific-content .chart-container,.chlorine-dosifier-specific-content .chart-container{height:250px;background:#f8f9fa;border:none;border-radius:8px;padding:1rem}.savings-section,.tank-section{margin-bottom:2rem}.savings-section h4,.tank-section h4{margin-bottom:1rem;color:#495057;font-size:1.1rem}.metrics-grid,.tank-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}.metric-card,.tank-info-card{background:white;border:1px solid #e9ecef;border-radius:8px;padding:1.5rem;display:flex;align-items:center;transition:box-shadow .2s ease}.metric-card:hover,.tank-info-card:hover{box-shadow:0 2px 8px #0000001a}.metric-icon,.tank-icon{font-size:1.5rem;color:#007bff;margin-right:1rem;flex-shrink:0}.metric-content,.tank-content{flex:1}.metric-content h5,.tank-content h5{margin:0 0 .5rem;color:#495057;font-size:.9rem;font-weight:600}.metric-value,.tank-value{margin:0;color:#007bff;font-size:1.2rem;font-weight:700}.metrics-grid-simplified{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1rem}.metric-card-simplified{background:white;border:1px solid #e9ecef;border-radius:12px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.metric-card-simplified:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.metric-icon-simplified{font-size:1.8rem;color:#007bff;flex-shrink:0;margin-top:4px}.metric-icon-time{color:#6366f1}.metric-icon-savings{color:#10b981}.metric-content-simplified{flex:1}.metric-content-simplified h5{margin:0 0 .75rem;color:#495057;font-size:1rem;font-weight:600;line-height:1.3}.metric-values{display:flex;flex-direction:column;gap:.5rem}.metric-values p{margin:0;display:flex;justify-content:space-between;align-items:center;line-height:1.5}.metric-label-inline{color:#6c757d;font-size:.9rem;font-weight:500}.metric-value-inline{color:#007bff;font-size:1.1rem;font-weight:700}.metric-value-time{color:#6366f1}.metric-value-savings{color:#10b981}.tank-info-grid-simplified{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1rem}.tank-info-card-simplified{background:white;border:1px solid #e9ecef;border-radius:12px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;transition:all .2s ease;box-shadow:0 1px 3px #0000000d}.tank-info-card-simplified:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.tank-icon-simplified{font-size:1.8rem;color:#007bff;flex-shrink:0;margin-top:4px}.tank-icon-time{color:#6366f1}.tank-icon-capacity{color:#f59e0b}.tank-icon-usage{color:#10b981}.tank-content-simplified{flex:1}.tank-content-simplified h5{margin:0 0 .5rem;color:#495057;font-size:1rem;font-weight:600;line-height:1.3}.tank-value-simplified{margin:0;font-size:1.1rem;font-weight:700;display:block}.tank-value-time{color:#6366f1}.tank-value-capacity{color:#f59e0b}.tank-value-usage{color:#10b981}.tank-header-with-edit{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.tank-header-with-edit h5{margin:0}.edit-capacity-btn{background:none;border:none;color:#6c757d;font-size:1.1rem;cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.edit-capacity-btn:hover{background-color:#e9ecef;color:#495057}.edit-capacity-btn:active{transform:scale(.95)}.modal-input-hint{font-size:.85rem;color:#6c757d;margin:.5rem 0 0;text-align:center}.modal-input-group{margin-bottom:1rem}.modal-input-label{display:block;font-size:.9rem;font-weight:500;color:#495057;margin-bottom:.5rem}.modal-text-input[type=date]{width:100%;padding:.75rem;border:1px solid #ced4da;border-radius:4px;font-size:1rem;background-color:#fff;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.modal-text-input[type=date]:focus{border-color:#007bff;outline:0;box-shadow:0 0 0 .2rem #007bff40}@media (max-width: 768px){.metrics-grid,.tank-info-grid,.metrics-grid-simplified,.tank-info-grid-simplified{grid-template-columns:1fr}.chart-container{height:250px}.maintenance-card,.metric-card,.tank-info-card,.metric-card-simplified,.tank-info-card-simplified{padding:1rem}.metric-icon-simplified,.tank-icon-simplified{font-size:1.5rem}.metric-value-inline,.tank-value-simplified{font-size:1rem}}.equipment-detail-view{min-height:100vh;background-color:#f8f9fc;padding:20px;box-sizing:border-box}.equipment-detail-header{background-color:#fff;border-radius:0;padding:16px 20px;margin-bottom:0;box-shadow:none;border-bottom:1px solid #e0e0e0;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10}.equipment-detail-title-group{flex:1}.equipment-detail-title{margin:0;font-size:1.3rem;font-weight:600;color:#1d1d1f;line-height:1.3;letter-spacing:-.3px}.equipment-detail-subtitle{margin:4px 0 0;font-size:.85rem;color:#86868b;letter-spacing:-.1px}.equipment-status{font-weight:600;padding:2px 6px;border-radius:4px;font-size:.8rem}.equipment-status.online{color:#10b981;background-color:#10b9811a}.equipment-status.offline{color:#ef4444;background-color:#ef44441a}.equipment-detail-body{display:flex;flex-direction:column;gap:20px}.sensors-status-section{margin-bottom:1.5rem}.sensors-status-section h3{margin:1rem 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.sensors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.sensor-card{background-color:#f8f9fc;border-radius:10px;padding:20px;border:2px solid #e9ecef;transition:border-color .2s ease,box-shadow .2s ease}.sensor-card:hover{border-color:#0056b3;box-shadow:0 4px 12px #0056b31a}.sensor-header{display:flex;flex-direction:row;align-items:center;gap:20px;margin-bottom:15px;text-align:left;position:relative}.sensor-icon{display:flex;align-items:center;justify-content:center}.sensor-svg{width:130px;height:130px;object-fit:contain}.sensor-info{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1}.sensor-info h4{margin:0;font-size:1rem;font-weight:600;color:var(--dark-color, #2c3e50)}.sensor-unit{margin:0;font-size:.8rem;color:var(--text-secondary, #6c757d)}.sensor-status{font-size:.9rem;font-weight:600;padding:4px 8px;border-radius:12px;background-color:#28a7451a;position:absolute;top:0;right:0}.sensor-value{font-size:2.5rem;font-weight:700;margin:10px 0;text-align:center}.sensor-range{font-size:.85rem;color:var(--text-secondary, #6c757d);text-align:center;margin-top:10px}.trends-section,.activity-section{margin-bottom:1.5rem}.trends-section h3,.activity-section h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.chart-period-selector{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.chart-period-selector button{padding:8px 16px;font-size:.8rem;border:1px solid #d1d9e4;background-color:#fff;color:var(--text-secondary, #555);border-radius:20px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s;font-weight:500}.chart-period-selector button:hover{background-color:#f0f2f5;border-color:#b0b9c6}.chart-period-selector button.active{background-color:var(--primary-color, #0056b3);color:#fff;border-color:var(--primary-color, #0056b3);font-weight:600;box-shadow:0 2px 4px #0000001a}.chart-container{position:relative;height:300px;width:100%;max-width:800px;margin:0 auto;padding:15px;background-color:#f8f9fc;border-radius:8px;border:1px solid #e9edf0;box-sizing:border-box}.info-content p{margin:0;font-size:1rem;font-weight:500;color:var(--text-primary, #333)}.status-online{color:#28a745!important;font-weight:600}.recommendations-section{margin-top:1.5rem}.recommendations-section h3{margin:0 0 20px;font-size:1.2rem;font-weight:600;color:var(--dark-color, #2c3e50)}.recommendation-card{display:flex;align-items:flex-start;gap:15px;padding:15px;background-color:#fff3cd;border:1px solid #ffeeba;border-radius:8px;margin-bottom:15px}.recommendation-card:last-child{margin-bottom:0}.recommendation-icon{font-size:1.2rem;color:#856404;flex-shrink:0;margin-top:2px}.recommendation-content h4{margin:0 0 8px;font-size:1rem;font-weight:600;color:#856404}.recommendation-content p{margin:0;font-size:.9rem;color:#856404;line-height:1.5}@media (max-width: 768px){.equipment-detail-view{padding:15px}.equipment-detail-header{padding:12px 16px;gap:12px}.equipment-detail-title{font-size:1.3rem}.equipment-detail-subtitle{font-size:.85rem}.sensors-grid{grid-template-columns:1fr 1fr;gap:10px}.sensor-card{padding:8px;display:flex;flex-direction:column;align-items:center;text-align:center}.sensor-header{flex-direction:column;align-items:center;text-align:center;gap:8px;position:relative;margin-bottom:8px;width:100%}.sensor-info{flex-direction:column;align-items:center;gap:2px;flex:1}.sensor-info h4{font-size:.9rem}.sensor-unit{font-size:.75rem}.sensor-status{position:absolute;top:0;right:0;font-size:.8rem;padding:3px 6px}.sensor-value{font-size:1.2rem;margin:6px 0}.sensor-range{font-size:.8rem;margin-top:6px;text-align:center}.chart-container{height:250px;padding:10px}.info-grid{grid-template-columns:1fr;gap:15px}.info-item{padding:12px}}@media (max-width: 480px){.equipment-detail-view{padding:10px}.equipment-detail-header{padding:12px}.equipment-detail-title{font-size:1.2rem}.sensors-status-section,.trends-section,.activity-section,.equipment-info-section,.recommendations-section{padding:15px}.sensor-card{padding:6px}.sensor-header{gap:6px;margin-bottom:6px}.sensor-info h4{font-size:.85rem}.sensor-unit{font-size:.7rem}.sensor-status{font-size:.75rem;padding:2px 5px}.sensor-value{font-size:1rem;margin:4px 0}.sensor-range{font-size:.75rem;margin-top:4px}.chart-container{height:200px;padding:8px}.chart-period-selector{gap:6px}.chart-period-selector button{padding:6px 12px;font-size:.75rem}.info-item{padding:10px;gap:10px}.info-icon{font-size:1.2rem}.recommendation-card{padding:12px;gap:12px}}.calibration-edit-form{display:flex;flex-direction:column;gap:10px;margin-top:8px}.calibration-input-group{display:flex;flex-direction:column;gap:4px}.calibration-input-group label{font-size:.85rem;font-weight:500;color:#666}.calibration-date-input,.calibration-sensor-select{padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:.9rem;background-color:#fff}.calibration-date-input:focus,.calibration-sensor-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.calibration-buttons{display:flex;gap:8px;margin-top:8px}.btn-save,.btn-cancel,.btn-edit-calibration{padding:6px 12px;border:none;border-radius:4px;font-size:.85rem;cursor:pointer;transition:background-color .2s}.btn-save{background-color:#28a745;color:#fff}.btn-save:hover{background-color:#218838}.btn-cancel{background-color:#6c757d;color:#fff}.btn-cancel:hover{background-color:#5a6268}.btn-edit-calibration{background-color:#007bff;color:#fff;margin-top:4px}.btn-edit-calibration:hover{background-color:#0056b3}.calibration-display{margin-top:8px}.calibration-sensor{font-size:.85rem;color:#666;margin-top:2px}@media (max-width: 480px){.calibration-buttons{flex-direction:column}.btn-save,.btn-cancel,.btn-edit-calibration{padding:8px 12px;font-size:.9rem}}.monitor-back-button{display:inline-flex;align-items:center;justify-content:center;background:none;color:#47578f;border:none;border-radius:12px;padding:10px;width:44px;height:44px;cursor:pointer;transition:none}.monitor-back-button svg{font-size:1.3rem}.streak-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;padding:20px;color:#fff;box-shadow:0 8px 32px #0000001a;margin-bottom:20px;position:relative;overflow:visible}.streak-card:before{content:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);pointer-events:none}.streak-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;position:relative;z-index:1}.streak-title{display:flex;align-items:stretch;gap:10px}.title-with-icon{display:flex;align-items:center;gap:8px;height:40px}.pool-selector{display:flex;align-items:stretch;gap:8px}.pool-dropdown{position:relative;z-index:9999}.pool-dropdown-button{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;padding:0 12px;font-size:1.3rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);line-height:1;height:40px}.pool-dropdown-button:hover{background:rgba(255,255,255,.3);border-color:#ffffff80}.dropdown-icon{font-size:.8rem;transition:transform .2s ease}.dropdown-icon.open{transform:rotate(180deg)}.pool-dropdown-menu{position:fixed!important;top:auto;left:auto;right:auto;background:rgba(255,255,255,.95)!important;border-radius:8px;box-shadow:0 4px 16px #0003!important;z-index:2147483647!important;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);min-width:120px;border:1px solid rgba(0,0,0,.1)!important}.pool-option{width:100%;background:transparent;border:none;color:#333;padding:10px 12px;text-align:left;cursor:pointer;transition:background-color .2s ease;font-size:.9rem;font-weight:500}.pool-option:hover{background:rgba(102,126,234,.1)}.pool-option.selected{background:rgba(102,126,234,.2);color:#667eea;font-weight:600}.streak-icon{font-size:1.5rem;color:gold}.streak-title h3,.title-with-icon h3{margin:0;font-size:1.3rem;font-weight:600;color:#fff;line-height:1;padding:0;display:flex;align-items:center;height:40px}.streak-calendar{background:white;border-radius:12px;padding:16px;margin-bottom:16px;position:relative;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-title-centered{text-align:center;flex:1;margin:0;font-size:1rem;font-weight:600;color:#333}.calendar-legend-top{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}.calendar-streak-stats{display:flex;gap:16px}.calendar-streak-stat{display:flex;align-items:center;gap:6px}.calendar-stat-icon{font-size:1rem;color:gold}.calendar-stat-content{display:flex;flex-direction:column;align-items:center;text-align:center}.calendar-stat-value{font-size:1.1rem;font-weight:700;color:#333;line-height:1}.calendar-stat-label{font-size:.7rem;color:#666;margin-top:2px}.calendar-header h4{margin:0;font-size:1rem;font-weight:600;color:#333}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:12px}.calendar-day{aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center;position:relative;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.calendar-day:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}.day-number{font-size:.75rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.streak-day-optimal{background-color:#81c784}.streak-day-good{background-color:#ffd54f}.streak-day-warning{background-color:#ffab40}.streak-day-poor{background-color:#e57373}.streak-day-empty{background-color:#fff3}.calendar-day.today{border:2px solid #ffd700;box-shadow:0 0 0 2px #ffd7004d}.calendar-day.future{opacity:.5}.legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:#666}.legend-color{width:12px;height:12px;border-radius:3px}.legend-color.optimal{background-color:#81c784}.legend-color.good{background-color:#ffd54f}.legend-color.warning{background-color:#ffab40}.legend-color.poor{background-color:#e57373}@media (max-width: 768px){.streak-card{padding:16px;margin-bottom:16px}.streak-header{flex-direction:column;gap:12px;align-items:stretch}.streak-title{justify-content:center}.title-with-icon{gap:6px}.calendar-streak-stats{gap:12px}.streak-title h3,.title-with-icon h3{font-size:1.2rem;height:36px}.title-with-icon{height:36px}.pool-dropdown-button{font-size:1.2rem;padding:0 10px;height:36px}.pool-option{font-size:.85rem;padding:8px 10px}.calendar-stat-value{font-size:1rem}.calendar-stat-label{font-size:.65rem}.streak-calendar{padding:12px}.calendar-header{flex-direction:column;gap:12px;align-items:stretch}.calendar-title-section{align-items:flex-start}.calendar-streak-stats{justify-content:space-around;width:100%}.calendar-grid{gap:3px}.day-number{font-size:.7rem}.calendar-legend-top{gap:12px}.legend-item{font-size:.75rem}.legend-color{width:10px;height:10px}}@media (max-width: 480px){.streak-card{padding:12px}.streak-title h3,.title-with-icon h3{font-size:1.1rem;height:32px}.title-with-icon{height:32px}.pool-dropdown-button{font-size:1.1rem;padding:0 8px;height:32px}.pool-option{font-size:.8rem;padding:6px 8px}.calendar-header{gap:8px}.calendar-streak-stats{gap:8px;justify-content:space-between}.calendar-stat-value{font-size:.9rem}.calendar-stat-label{font-size:.6rem}.calendar-stat-icon{font-size:.9rem}.calendar-grid{gap:2px}.day-number{font-size:.65rem}.calendar-legend-top{gap:8px}.legend-item{font-size:.7rem}}@media (max-width: 360px){.streak-card{padding:10px}.streak-title h3,.title-with-icon h3{font-size:1rem;height:30px}.title-with-icon{height:30px}.pool-dropdown-button{font-size:1rem;padding:0 8px;height:30px}.calendar-header{gap:6px}.calendar-header h4{font-size:.9rem}.calendar-streak-stats{gap:6px}.calendar-stat-value{font-size:.8rem}.calendar-stat-label{font-size:.55rem}.calendar-stat-icon{font-size:.8rem}.calendar-grid{gap:1px}.day-number{font-size:.6rem}.calendar-legend-top{gap:6px}.legend-item{font-size:.65rem}.legend-color{width:8px;height:8px}}.mobile-app-container{display:flex;flex-direction:column;min-height:100vh;background-color:#f5f5f5;position:relative}.main-content{flex:1;padding:0;height:100vh;overflow-y:auto}.tab-content{max-width:100%;margin:0 auto}.bottom-navbar{display:flex;justify-content:space-around;align-items:center;padding:10px 0;background-color:#fff;border-top:1px solid #e0e0e0;position:sticky;bottom:0;z-index:100}.nav-button{display:flex;flex-direction:column;align-items:center;background:none;border:none;color:#666;font-size:.8rem;cursor:pointer;padding:8px 12px;transition:all .2s ease;flex:1}.nav-button:hover{color:inherit}.nav-button.active{color:#47578f;position:relative;font-weight:700}.nav-button.active:before{content:"";position:absolute;top:-10px;left:50%;transform:translate(-50%);width:50px;height:4px;background-color:#47578f}.nav-button.disabled{color:#ccc;cursor:not-allowed;opacity:.6;position:relative}.nav-button.disabled:hover{color:#ccc}.disabled-icon{position:absolute;top:-5px;right:5px;font-size:.6rem;color:#ff6b6b}.nav-icon{font-size:1.4rem;margin-bottom:4px}.nav-label{font-size:.7rem}@media (min-width: 768px){.mobile-app-container{flex-direction:row}.mobile-header{display:none}.bottom-navbar{flex-direction:column;width:80px;height:100vh;border-top:none;border-right:1px solid #e0e0e0;justify-content:flex-start;padding-top:20px}.nav-button{margin-bottom:30px;flex:0}.main-content{flex:1;padding:30px;max-width:1200px;margin:0 auto}.nav-label{font-size:.6rem;margin-top:5px}}@media (max-width: 414px){.mobile-app-container{padding:0}.main-content{padding:0;height:calc(100vh - 70px)}.bottom-navbar{padding:8px 0;min-height:70px}.nav-button{padding:6px 8px;font-size:.7rem;flex:1;min-width:0}.nav-icon{font-size:1.2rem;margin-bottom:3px}.nav-label{font-size:.65rem;line-height:1;text-align:center;word-break:break-word}.disabled-icon{font-size:.5rem;top:-3px;right:3px}.tab-content{padding:0}}@media (max-width: 375px){.nav-button{padding:5px 4px;font-size:.65rem}.nav-icon{font-size:1.1rem;margin-bottom:2px}.nav-label{font-size:.6rem}.bottom-navbar{padding:6px 0;min-height:65px}.main-content{height:calc(100vh - 65px)}}@media (min-width: 1024px){.bottom-navbar{width:200px;align-items:flex-start;padding-left:20px}.nav-button{flex-direction:row;font-size:1rem;padding:10px 15px;width:100%}.nav-icon{margin-right:10px;margin-bottom:0;font-size:1.2rem}.nav-label{font-size:.9rem}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:white;padding:20px;box-sizing:border-box;position:relative;overflow:hidden}.auth-card{background:transparent;border-radius:0;box-shadow:none;padding:40px;width:100%;max-width:400px;animation:slideUp .3s ease-out;border:none;position:relative;z-index:1}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.auth-header{text-align:center;margin-bottom:10px;position:relative}.auth-favicon{width:180px;height:180px;margin:0 auto 100px;display:block;opacity:.9;transition:all .3s ease}.auth-favicon:hover{opacity:1;transform:scale(1.05)}.auth-subtitle-container{text-align:center;margin-bottom:40px}.auth-subtitle{color:#2d3748;font-size:1.8rem;font-weight:700;margin:0 0 8px}.auth-header p{color:#718096;font-size:.95rem;margin:0}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{color:#4a5568;font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:8px}.label-icon{font-size:1.1rem;color:#4facfe}.form-group input{padding:12px 16px;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;transition:all .2s ease;background-color:#f7fafc;color:#2d3748}.form-group input:focus{outline:none;border-color:#4facfe;background-color:#fff;box-shadow:0 0 0 3px #4facfe33}.password-input-container{position:relative;display:flex;align-items:center}.password-input-container input{padding-right:50px;width:100%}.password-toggle{position:absolute;right:12px;background:none;border:none;color:#718096;cursor:pointer;padding:8px;border-radius:4px;transition:color .2s ease}.password-toggle:hover{color:#4a5568}.input-container{position:relative;display:flex;align-items:center}.input-container input{padding-right:50px;width:100%}.clear-input-btn{position:absolute;right:12px;background:none;border:none;color:#718096;cursor:pointer;font-size:.9rem;padding:4px;border-radius:4px;transition:color .2s ease;display:flex;align-items:center;justify-content:center}.clear-input-btn:hover{color:#4a5568}.password-container input{padding-right:50px}.toggle-password-btn{position:absolute;right:12px;background:none;border:none;color:#718096;cursor:pointer;font-size:1rem;padding:4px;border-radius:4px;transition:color .2s ease;display:flex;align-items:center;justify-content:center}.toggle-password-btn:hover{color:#4facfe}.verification-input{text-align:center;font-size:1.2rem;font-weight:600;letter-spacing:2px;font-family:Courier New,monospace}.verification-input::-webkit-outer-spin-button,.verification-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.verification-input[type=number]{-moz-appearance:textfield}.auth-button{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;max-height:48px;box-sizing:border-box;box-shadow:0 4px 15px #4facfe4d;flex-shrink:0;overflow:hidden}.auth-button>*{display:inline-block;vertical-align:middle;line-height:1}.auth-button:has(.success-icon){align-items:center!important;justify-content:center!important}.auth-button:has(.success-icon)>*{vertical-align:middle!important;display:inline-block!important}.auth-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #4facfe66;background:linear-gradient(135deg,#00f2fe 0%,#4facfe 100%)}.auth-button:active:not(:disabled){transform:translateY(0)}.auth-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-divider{display:flex;align-items:center;margin:20px 0 16px;width:100%}.divider-line{flex:1;height:1px;background:linear-gradient(to right,transparent,#e0e0e0,transparent)}.divider-text{padding:0 16px;color:#9e9e9e;font-size:.9rem;font-weight:500;text-transform:lowercase}.biometric-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:12px;padding:14px 24px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;max-height:48px;box-sizing:border-box;box-shadow:0 4px 15px #667eea4d;flex-shrink:0;overflow:hidden}.biometric-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #667eea66;background:linear-gradient(135deg,#764ba2 0%,#667eea 100%)}.biometric-button:active:not(:disabled){transform:translateY(0)}.biometric-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.biometric-icon{font-size:1.4rem;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.spinner{animation:spin 1s linear infinite}.dots-spinner{display:inline-flex;align-items:center;gap:4px;margin-left:8px}.dots-spinner span{width:6px;height:6px;border-radius:50%;background-color:currentColor;animation:dotsBounce 1.4s ease-in-out infinite both}.dots-spinner span:nth-child(1){animation-delay:-.32s}.dots-spinner span:nth-child(2){animation-delay:-.16s}.dots-spinner span:nth-child(3){animation-delay:0s}@keyframes dotsBounce{0%,80%,to{transform:scale(0);opacity:.5}40%{transform:scale(1);opacity:1}}.toast-container{position:fixed;bottom:0;left:0;right:0;z-index:1000;padding:0 20px 20px;pointer-events:none}.toast{background:white;color:#2d3748;padding:16px 20px;border-radius:12px;box-shadow:0 10px 25px #0000001a;display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:500;margin-bottom:12px;transform:translateY(100px);opacity:0;animation:toastSlideIn .3s ease-out forwards;pointer-events:auto;position:relative;overflow:hidden;border:3px solid #e2e8f0}.toast.error{border-color:#e53e3e;color:#e53e3e}.toast.success{border-color:#38a169;color:#38a169}.toast.warning{border-color:#d69e2e;color:#d69e2e}.toast-info{border-color:#3182ce;color:#3182ce}.toast-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(0,0,0,.1);border-radius:0 0 12px 12px;animation:toastProgress 4s linear forwards}@keyframes toastSlideIn{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes toastProgress{0%{width:100%}to{width:0%}}.error-message{background-color:#fed7d7;color:#c53030;padding:12px 16px;border-radius:8px;border:1px solid #feb2b2;display:flex;align-items:center;gap:8px;font-size:.9rem;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.error-icon{flex-shrink:0}.auth-footer{display:flex;flex-direction:column;gap:12px;margin-top:20px}.resend-button,.auth-back-to-login-button{background:none;border:1px solid #e2e8f0;color:#4a5568;padding:10px 16px;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:8px}.resend-text-button{background:none;border:none;color:#4facfe;padding:8px 0;cursor:pointer;transition:all .2s ease;font-size:.9rem;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:underline}.resend-text-button:hover:not(:disabled){color:#00f2fe}.resend-text-button:disabled{opacity:.6;cursor:not-allowed}.countdown-text{color:#718096;font-size:.9rem;text-align:center;padding:8px 0;display:flex;align-items:center;justify-content:center;gap:8px}.countdown-icon{color:#718096;font-size:1.2rem}.countdown-seconds{color:#2d3748;font-weight:600}.button-icon{font-size:1rem}.auth-footer-text-container{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:0;flex-wrap:wrap}.auth-footer-text{color:#718096!important;font-size:1.3rem!important;text-align:center!important;margin:0!important;font-weight:600!important}.px-logo{width:20px;height:auto;opacity:.8;transition:all .3s ease}.px-logo:hover{opacity:1;transform:scale(1.05)}.button-icon.spinning{animation:spin 1s linear infinite}.auth-button .success-icon{font-size:1.3rem!important;color:#fff!important;margin-left:8px!important;width:1.3rem!important;height:1.3rem!important;flex-shrink:0!important;display:inline-block!important;vertical-align:middle!important;line-height:1!important;position:relative!important;top:0!important;transform:none!important;margin-top:0!important;margin-bottom:0!important}.resend-button:hover,.auth-back-to-login-button:hover{background-color:#f7fafc;border-color:#cbd5e0}@media (max-width: 768px){.auth-container{padding:16px}.auth-card{padding:32px 24px}.auth-favicon{width:150px;height:150px;margin-bottom:16px}.toast-container{padding:0 16px 16px}.toast{padding:14px 18px;font-size:.9rem}.auth-subtitle{font-size:1.6rem}.auth-header p{font-size:.95rem}.auth-footer-text{font-size:1.2rem!important}.px-logo{width:18px}.auth-footer-text-container{gap:10px}}@media (max-width: 480px){.auth-container{padding:12px}.auth-card{padding:24px 20px}.auth-favicon{width:130px;height:130px;margin-bottom:14px}.toast-container{padding:0 12px 12px}.toast{padding:12px 16px;font-size:.85rem}.auth-subtitle{font-size:1.4rem}.auth-header p{font-size:.9rem}.auth-footer-text{font-size:1.1rem!important}.px-logo{width:16px}.auth-footer-text-container{gap:8px}.form-group input{padding:10px 14px;font-size:.95rem}.auth-button{padding:12px 20px;font-size:.95rem}}@media (max-width: 390px){.auth-container{padding:8px}.auth-card{padding:20px 16px}.auth-favicon{width:110px;height:110px;margin-bottom:12px}.toast-container{padding:0 8px 8px}.toast{padding:10px 14px;font-size:.8rem}.auth-subtitle{font-size:1.3rem}.auth-header p{font-size:.85rem}.auth-footer-text{font-size:1rem!important}.px-logo{width:14px}.auth-footer-text-container{gap:6px}}.qr-display-container{min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.qr-header{text-align:center;margin-bottom:40px;color:#fff}.qr-header h2{font-size:2.5rem;margin:0 0 20px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3)}.qr-subtitle{font-size:1.1rem;margin:8px 0;opacity:.9}.qr-content{background:white;border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000001a;max-width:600px;width:100%;text-align:center}.qr-image-container{display:inline-block;margin-bottom:20px}.qr-image{width:300px;height:300px;border-radius:15px;box-shadow:0 10px 20px #0000001a}.qr-status-container{margin-bottom:30px}.qr-status{background:rgba(0,0,0,.8);color:#fff;padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:600;display:inline-block}.status-waiting{color:#fbbf24}.status-code-sent{color:#3b82f6}.status-verified{color:#10b981}.status-expired{color:#ef4444}.qr-instructions{text-align:left;margin-bottom:30px}.qr-instructions h4{color:#374151;margin-bottom:15px;font-size:1.2rem}.qr-instructions ol{color:#6b7280;line-height:1.6;padding-left:20px}.qr-instructions li{margin-bottom:8px}.qr-footer{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:20px;border-top:1px solid #e5e7eb}.qr-expiry{color:#6b7280;font-size:.9rem;margin:0}.refresh-btn{background:#3b82f6;color:#fff;border:none;border-radius:8px;padding:10px 16px;font-size:.9rem;cursor:pointer;transition:background .2s ease}.refresh-btn:hover{background:#2563eb}.qr-loading{text-align:center;color:#fff}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.qr-error{background:white;border-radius:20px;padding:40px;text-align:center;max-width:500px;width:100%}.qr-error h3{color:#ef4444;margin-bottom:15px;font-size:1.5rem}.qr-error p{color:#6b7280;margin-bottom:20px;line-height:1.5}.retry-btn{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;cursor:pointer;transition:background .2s ease}.retry-btn:hover{background:#dc2626}@media (max-width: 768px){.qr-display-container{padding:10px}.qr-header h2{font-size:2rem}.qr-content{padding:20px}.qr-image{width:250px;height:250px}.qr-footer{flex-direction:column;gap:15px}}.qr-login-container{min-height:100vh;background:#0b1d3a;display:flex;align-items:center;justify-content:center;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.qr-login-card{background:white;border-radius:20px;padding:40px;box-shadow:0 20px 40px #0000001a;max-width:500px;width:100%;text-align:center}.qr-login-header{margin-bottom:30px}.qr-login-header h1{font-size:2rem;margin:0 0 15px;color:#374151;font-weight:700;display:flex;align-items:center;justify-content:center;gap:10px}.lock-icon{color:#3b82f6}.qr-login-subtitle{color:#6b7280;margin:5px 0;font-size:.95rem}.qr-login-form{text-align:left}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#374151;font-weight:600;font-size:.95rem}.form-input{width:100%;padding:12px 16px;border:2px solid #e5e7eb;border-radius:10px;font-size:1rem;transition:border-color .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.code-input{text-align:center;font-size:1.2rem;letter-spacing:2px;font-weight:600}.code-hint{margin-top:8px;font-size:.85rem;color:#6b7280}.submit-btn{width:100%;background:#3b82f6;color:#fff;border:none;border-radius:10px;padding:14px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s ease;margin-bottom:15px}.submit-btn:hover:not(:disabled){background:#2563eb}.submit-btn:disabled{background:#9ca3af;cursor:not-allowed}.back-btn{width:100%;background:transparent;color:#6b7280;border:2px solid #e5e7eb;border-radius:10px;padding:12px;font-size:.95rem;cursor:pointer;transition:all .2s ease}.back-btn:hover{background:#f9fafb;border-color:#d1d5db}.error-message{background:#fef2f2;color:#dc2626;padding:12px;border-radius:8px;margin-bottom:15px;font-size:.9rem;border:1px solid #fecaca}.success-message{background:#f0fdf4;color:#16a34a;padding:12px;border-radius:8px;margin-bottom:15px;font-size:.9rem;border:1px solid #bbf7d0}.success-screen{text-align:center;padding:20px 0}.success-icon{font-size:4rem;margin-bottom:20px}.success-screen h2{color:#16a34a;margin-bottom:15px;font-size:1.5rem}.success-screen p{color:#6b7280;margin-bottom:20px}.loading-dots{display:flex;justify-content:center;gap:8px}.loading-dots span{width:8px;height:8px;background:#3b82f6;border-radius:50%;animation:bounce 1.4s ease-in-out infinite both}.loading-dots span:nth-child(1){animation-delay:-.32s}.loading-dots span:nth-child(2){animation-delay:-.16s}.qr-login-footer{margin-top:30px;padding-top:20px;border-top:1px solid #e5e7eb}.expiry-info{color:#9ca3af;font-size:.85rem;margin:0}.qr-login-error{background:white;border-radius:20px;padding:40px;text-align:center;max-width:500px;width:100%}.qr-login-error h2{color:#ef4444;margin-bottom:15px;font-size:1.5rem}.qr-login-error p{color:#6b7280;line-height:1.5}@media (max-width: 768px){.qr-login-container{padding:10px}.qr-login-card{padding:30px 20px}.qr-login-header h1{font-size:1.5rem}}:root{--primary-color: #4361ee;--primary-light: #6a7ef0;--primary-dark: #3a56d4;--secondary-color: #3f37c9;--success-color: #4cc9f0;--warning-color: #f8961e;--danger-color: #f94144;--light-color: #f8f9fa;--dark-color: #212529;--gray-color: #6c757d;--light-gray: #e9ecef;--border-radius: 12px;--box-shadow: 0 4px 12px rgba(0, 0, 0, .1);--transition: all .3s ease}body{background-color:#f5f7fa;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:var(--dark-color)}.index-container{padding:20px;min-height:100vh;max-width:100%;background-color:#f5f7fa}.loading-container{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-height:100vh!important;background:white!important;color:var(--dark-color)!important;padding:20px!important;position:relative!important;z-index:1000!important;width:100%!important;height:100vh!important}.loading-animation{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.loading-circle{width:12px;height:12px;margin:0 6px;background-color:var(--primary-color);border-radius:50%;animation:bounce 1.4s infinite ease-in-out}.loading-circle:nth-child(1){animation-delay:-.32s}.loading-circle:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.loading-dots:after{content:".";animation:dots 1.5s steps(5,end) infinite}@keyframes dots{0%,20%{content:"."}40%{content:".."}60%{content:"..."}80%,to{content:""}}.p-loading{font-size:1.1rem;font-weight:500;color:#4a5568;margin:0;text-align:center}.loading-user-info{margin-top:20px;padding:16px 24px;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0;max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}.loading-user-info p{margin:0;font-size:1rem;color:#2d3748;font-weight:500;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;text-align:center;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:normal;word-break:break-word;-webkit-word-break:break-word;-moz-word-break:break-word;-ms-word-break:break-word}@media (max-width: 768px){.loading-container{padding:16px;background:white!important;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-logo{width:250px!important;margin-bottom:60px!important;max-width:90%}.p-loading{font-size:1rem;text-align:center;margin:0 auto;max-width:90%}.loading-user-info{margin-top:16px;padding:12px 20px;max-width:90%;text-align:center;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;box-sizing:border-box}.loading-user-info p{font-size:.9rem;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;line-height:1.3;text-align:center}}@media (max-width: 390px){.loading-container{padding:12px;background:white!important;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.loading-logo{width:200px!important;margin-bottom:40px!important;max-width:85%}.p-loading{font-size:.95rem;padding:0 20px;text-align:center;margin:0 auto;max-width:85%}.loading-user-info{margin-top:12px;padding:8px 12px;width:100%;max-width:280px;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;box-sizing:border-box;text-align:center;background:#f7fafc;border-radius:8px;border:1px solid #e2e8f0}.loading-user-info p{font-size:.8rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;line-height:1.3;text-align:center;margin:0;padding:0;white-space:normal;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto}.loading-animation{margin-bottom:16px}}@media (max-width: 390px) and (max-height: 844px){.loading-container{padding:20px 8px;background:white!important;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between}.loading-logo{width:160px!important;margin-bottom:20px!important;max-width:75%}.p-loading{font-size:.85rem;padding:0 10px;text-align:center;margin:0 auto 15px;max-width:75%}.loading-user-info{margin-top:0;padding:12px 16px;width:100%;max-width:320px;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;box-sizing:border-box;text-align:center;background:#f7fafc;border-radius:10px;border:1px solid #e2e8f0;flex-shrink:0;min-height:60px;display:flex;align-items:center;justify-content:center}.loading-user-info p{font-size:.85rem;word-wrap:break-word;overflow-wrap:break-word;hyphens:auto;line-height:1.4;text-align:center;margin:0;padding:0;white-space:normal;word-break:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;flex:1}.loading-circle{width:10px;height:10px;margin:0 4px}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-container{background:white;border-radius:var(--border-radius);width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:var(--box-shadow);animation:modalFadeIn .3s ease}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-header{padding:20px;border-bottom:1px solid var(--light-gray);display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;color:var(--primary-color)}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-color);padding:5px}.modal-close:hover{color:var(--danger-color)}.modal-options{padding:20px}.modal-option{padding:15px;border:1px solid var(--light-gray);border-radius:8px;margin-bottom:15px;cursor:pointer;transition:var(--transition)}.modal-option:hover{border-color:var(--primary-light);background:rgba(67,97,238,.05)}.modal-option h4{margin:0 0 5px;color:var(--primary-color);display:flex;align-items:center;gap:8px}.modal-option p{margin:0;color:var(--gray-color);font-size:.9rem}.modal-option.danger{border-color:#ffebee;background:#ffebee}.modal-option.danger h4{color:var(--danger-color)}.modal-option.danger:hover{background:#ffcdd2}.edit-names-container,.edit-count-container,.edit-distribution-container{padding:20px}.modal-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--light-gray)}.modal-button{padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;transition:var(--transition);border:none}.modal-button.primary{background:var(--primary-color);color:#fff}.modal-button.primary:hover{background:var(--primary-dark)}.modal-button.secondary{background:white;color:var(--gray-color);border:1px solid var(--light-gray)}.modal-button.secondary:hover{background:var(--light-gray)}.modal-button:disabled{opacity:.6;cursor:not-allowed}.no-controller-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:20px;text-align:center;color:var(--dark-color)}.no-controller-message{max-width:500px;margin:40px 0;padding:30px;background:white;border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.no-controller-message h2{font-size:1.5rem;margin-bottom:15px;color:var(--primary-color)}.no-controller-message p{font-size:1rem;line-height:1.5;color:var(--gray-color)}.controllers-grid{display:grid;gap:12px;list-style:none;padding:0;margin:0}.controller-card{display:flex;justify-content:space-between;align-items:center;padding:16px;background:white;border-radius:10px;box-shadow:0 2px 8px #00000014;transition:transform .2s,box-shadow .2s;border-left:4px solid var(--primary-color)}.controller-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001f}.controller-info{display:flex;flex-direction:column;gap:4px}.controller-name{font-weight:600;color:var(--dark-color);font-size:1rem}.controller-sn{display:flex;gap:6px;font-size:.85rem}.controller-sn .label{color:var(--gray-color)}.controller-sn .value{font-family:monospace;color:var(--dark-color);font-weight:500}.controller-model{display:flex;align-items:center;gap:8px}.model-badge{padding:4px 8px;border-radius:12px;font-size:.75rem;font-weight:500;background:var(--light-gray);color:var(--dark-color)}.model-badge[data-model-type="0"]{background:#e3f2fd;color:#1976d2}.model-badge[data-model-type="1"]{background:#e8f5e9;color:#388e3c}.configuration-message{margin-top:25px;padding-top:20px;border-top:1px solid var(--light-gray);color:var(--gray-color)}.configure-button{display:block;width:100%;padding:15px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;margin-top:20px;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition);text-align:center}.configure-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.change-config-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;transition:var(--transition)}.change-config-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.wizard-container{padding:20px;max-width:600px;margin:0 auto;color:var(--dark-color)}.wizard-step{background:white;border-radius:var(--border-radius);padding:30px;margin-bottom:20px;box-shadow:var(--box-shadow)}.wizard-progress{display:flex;align-items:center;justify-content:center;margin-bottom:30px}.progress-step{width:30px;height:30px;border-radius:50%;background:var(--light-gray);color:var(--gray-color);display:flex;align-items:center;justify-content:center;font-weight:600}.progress-step.active{background:var(--primary-color);color:#fff}.progress-step.completed{background:var(--success-color);color:#fff}.progress-line{height:2px;width:50px;background:var(--light-gray)}.progress-line.active{background:var(--primary-color)}.progress-line.completed{background:var(--success-color)}.wizard-step h3{margin-top:0;color:var(--primary-color);font-size:1.3rem;margin-bottom:10px;text-align:center}.wizard-description{color:var(--gray-color);text-align:center;margin-bottom:25px}.pool-options{display:flex;gap:20px;margin:30px 0;justify-content:center;flex-wrap:wrap}.pool-option{background:white;border:2px solid var(--light-gray);color:var(--dark-color);padding:20px;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);text-align:center;flex:1;min-width:120px;max-width:200px}.pool-option.selected{border-color:var(--primary-color);background:rgba(67,97,238,.05)}.pool-option:hover{border-color:var(--primary-light)}.pool-option .option-icon{width:40px;height:40px;border-radius:50%;background:var(--light-gray);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-weight:600;color:var(--gray-color)}.pool-option.selected .option-icon{background:var(--primary-color);color:#fff}.input-group{margin-bottom:20px}.input-group label{display:block;margin-bottom:8px;color:var(--dark-color);font-weight:500}.input-group input{width:100%;padding:12px 15px;border-radius:8px;border:1px solid var(--light-gray);background:white;color:var(--dark-color);font-size:1rem;transition:var(--transition)}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4361ee33}.controller-assign-container{margin:30px 0}.assign-group{margin-bottom:30px}.assign-group h4{margin-bottom:15px;color:var(--primary-color);font-size:1.1rem;text-align:center}.controller-cards-wrapper{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.controller-card-item{width:120px;min-height:80px;border-radius:10px;background:var(--light-gray);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);border:2px solid transparent;padding:10px;box-sizing:border-box;text-align:center}.controller-card-item:hover{transform:translateY(-3px);box-shadow:0 4px 8px #0000001a}.controller-card-item.selected{background:var(--primary-color);color:#fff;border-color:var(--primary-dark)}.controller-card-item.disabled{opacity:.5;cursor:not-allowed;position:relative}.controller-card-item.disabled:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);border-radius:8px}.controller-card-content{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%}.controller-name{font-weight:600;font-size:.75rem;margin-bottom:4px;line-height:1.2;word-break:break-word;width:100%}.controller-serial{font-family:monospace;font-size:.7rem;opacity:.9;background:rgba(255,255,255,.2);padding:2px 5px;border-radius:4px}.controller-card-item.selected .controller-name,.controller-card-item.selected .controller-serial{color:#fff}.controller-card-item.selected .controller-serial{background:rgba(255,255,255,.3)}.assign-count{text-align:center;margin-top:10px;font-size:.9rem;color:var(--gray-color)}.configured-view{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:5px;text-align:center;max-width:600px;margin:0 auto}.configured-content{background:white;border-radius:var(--border-radius);padding:15px;width:100%;box-shadow:var(--box-shadow)}.welcome-message{margin-bottom:30px;color:var(--gray-color)}.welcome-message p{margin-bottom:10px}.wizard-note,.warning-message,.success-message{padding:15px;border-radius:8px;margin:20px 0;font-size:.9rem}.wizard-note{background:rgba(67,97,238,.1);border-left:4px solid var(--primary-color)}.warning-message{background:rgba(248,150,30,.1);border-left:4px solid var(--warning-color);color:var(--warning-color)}.success-message{background:rgba(76,201,240,.1);border-left:4px solid var(--success-color);color:var(--success-color);text-align:center;margin:20px 0 30px}.error-message{text-align:center;max-width:500px;padding:30px;border-radius:10px;background-color:#f8d7da;color:#721c24;box-shadow:0 4px 6px #0000001a}.error-icon{font-size:3rem;margin-bottom:20px;color:#dc3545}.configuration-summary{margin:30px 0}.pool-summary{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--light-gray)}.pool-summary:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.pool-summary h5{color:var(--primary-color);margin-bottom:8px;font-size:1.1rem}.pool-summary p{color:var(--gray-color)}.pool-summary ul{margin-top:5px;padding-left:20px}.pool-summary li{margin-bottom:5px}.pool-summary strong{color:var(--dark-color)}.wizard-buttons{display:flex;justify-content:space-between;margin-top:30px;gap:15px}.wizard-back-button,.wizard-next-button,.wizard-finish-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:8px;cursor:pointer;transition:var(--transition);font-weight:600;font-size:1rem;border:none}.wizard-back-button{background:white;color:var(--gray-color);border:1px solid var(--light-gray)}.wizard-back-button:hover{background:var(--light-gray)}.wizard-next-button,.wizard-finish-button{background:var(--primary-color);color:#fff}.wizard-next-button:hover,.wizard-finish-button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.wizard-next-button:disabled,.wizard-finish-button:disabled{background:var(--light-gray);color:var(--gray-color);cursor:not-allowed;transform:none;box-shadow:none}.wizard-finish-button{background:var(--success-color);width:100%;margin-top:20px}.wizard-finish-button:hover{background:#3ab0d6}@media (max-width: 414px){.index-container,.wizard-container,.configured-view{padding:10px}.wizard-step{padding:15px;margin-bottom:10px}.wizard-step h3{font-size:1.1rem;margin-bottom:8px}.wizard-description{font-size:.9rem;margin-bottom:20px}.pool-options{flex-direction:column;gap:12px;margin:20px 0}.pool-option{padding:15px;min-width:auto;max-width:100%;width:100%}.pool-option .option-icon{width:35px;height:35px;margin-bottom:8px}.controller-card-item{width:90px;min-height:70px;padding:8px}.controller-name{font-size:.7rem;margin-bottom:3px}.controller-serial{font-size:.65rem;padding:1px 4px}.controller-cards-wrapper{gap:8px;justify-content:center}.modal-container{width:95%;max-height:85vh;margin:10px}.modal-header{padding:15px}.modal-header h3{font-size:1.1rem}.modal-options,.edit-names-container,.edit-count-container,.edit-distribution-container{padding:15px}.modal-option{padding:12px;margin-bottom:12px}.modal-option h4{font-size:.95rem}.modal-option p{font-size:.85rem}.wizard-buttons{flex-direction:column;gap:10px;margin-top:20px}.wizard-back-button,.wizard-next-button,.wizard-finish-button{width:100%;padding:12px 16px;font-size:.9rem}.modal-buttons{flex-direction:column;gap:8px;margin-top:15px;padding-top:15px}.modal-button{width:100%;padding:12px;font-size:.9rem}.wizard-progress{margin-bottom:20px}.progress-step{width:25px;height:25px;font-size:.8rem}.progress-line{width:30px}.controller-card{padding:12px;flex-direction:column;align-items:flex-start;gap:8px}.controller-info{width:100%}.controller-name{font-size:.9rem}.controller-sn{font-size:.8rem}.model-badge{font-size:.7rem;padding:3px 6px}.assign-group h4{font-size:1rem;margin-bottom:12px}.assign-count{font-size:.8rem;margin-top:8px}.input-group{margin-bottom:15px}.input-group label{font-size:.9rem;margin-bottom:6px}.input-group input{padding:10px 12px;font-size:.9rem}.wizard-note,.warning-message,.success-message{padding:12px;margin:15px 0;font-size:.85rem}.configured-content{padding:15px}.configuration-summary{margin:20px 0}.pool-summary{margin-bottom:15px;padding-bottom:15px}.pool-summary h5{font-size:1rem}.pool-summary ul{padding-left:15px}.pool-summary li{font-size:.85rem;margin-bottom:3px}}@media (max-width: 768px){.pool-options{flex-direction:column;align-items:center}.pool-option{max-width:100%;width:100%}.wizard-step{padding:20px}.wizard-buttons{flex-direction:column}.wizard-back-button,.wizard-next-button{width:100%}.controller-circle{width:70px;height:70px}.circle-sn{font-size:.8rem}}@media (max-width: 375px){.controller-card-item{width:80px;min-height:65px;padding:6px}.controller-name{font-size:.65rem;line-height:1.1}.controller-serial{font-size:.6rem}.controller-cards-wrapper{gap:6px}.pool-option{padding:12px}.pool-option .option-icon{width:30px;height:30px}.wizard-step{padding:12px}.modal-container{width:98%;margin:5px}.progress-step{width:22px;height:22px;font-size:.75rem}.progress-line{width:25px}}html,body{margin:0;padding:0;height:100%;background-color:#0b1d3a;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;overflow-x:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*{box-sizing:border-box}input,select,textarea{font-size:16px}@media (max-width: 414px){body{font-size:14px}}@media (max-width: 375px){body{font-size:13px}}