*{margin:0;padding:0;box-sizing:border-box}:root{--primary-navy: #0A2E45;--primary-blue: #0B4F70;--primary-teal: #111827;--dark-teal: #17877D;--light-teal: #BFEAE1;--very-light-blue: #E4F6F2;--info-bg: #DCEAF3;--page-bg: #DFF5F0;--card-bg: #FFFFFF;--text-primary: #111827;--text-secondary: #667085;--border: #DCEAEA;--success: #287A52;--warning-bg: #FFF4D6;--warning-text: #6B4E00;--error: #B42318;--error-bg: #FFF1F2;--overdue-strong: #A93226;--status-overdue: #F59E0B;--status-completed: #17877D;--status-active: #0B4F70;--status-upcoming: #EEF1F3;--color-header: var(--primary-navy);--color-section: var(--primary-teal);--color-bg: var(--page-bg);--color-card: var(--card-bg);--color-button: var(--primary-blue);--color-button-hover: #073B54;--color-text: var(--text-primary)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--color-bg);color:var(--color-text)}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-card{background:var(--card-bg);border-radius:16px;box-shadow:0 8px 30px #1118271f;padding:40px;width:100%;max-width:440px}.login-icon{width:96px;height:96px;border-radius:50%;background:#fff;box-shadow:0 2px 8px #1118271f;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;overflow:hidden;padding:8px}.login-icon img{width:100%;height:100%;object-fit:contain}.header-logo{height:56px;width:auto;border-radius:10px;background:#fff;padding:5px}.login-header{text-align:center}.login-header h1{font-size:2rem;color:var(--text-primary);margin-bottom:8px}.login-header .app-title{background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:initial;color:var(--primary-navy)}.app-title{background:linear-gradient(90deg,#4fd0be,#fff 32%,#4a87c9 68%,#2f6fb0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;font-weight:700;font-size:2.3rem}.login-form{display:flex;flex-direction:column;gap:12px}.password-field-group{position:relative}.password-rules-popup{margin-top:8px;background:var(--very-light-blue);border:1px solid var(--border);border-radius:10px;padding:10px 12px;box-shadow:0 8px 20px #00000014}.password-rule{display:flex;align-items:center;gap:8px;font-size:.82rem;margin:6px 0}.password-rule.valid{color:var(--success)}.password-rule.invalid{color:var(--error)}.phone-input-wrap{display:flex;align-items:center;border:2px solid var(--border);border-radius:8px;background:#fff;overflow:hidden}.phone-input-wrap:focus-within{border-color:var(--color-button)}.phone-prefix{padding:12px 14px;background:var(--very-light-blue);border-right:1px solid var(--border);color:var(--text-primary);font-weight:700}.phone-input-wrap input{border:none!important;border-radius:0!important;flex:1}.login-error{background:var(--error-bg);color:var(--error);border:1px solid rgba(180,34,24,.12);border-radius:8px;padding:10px 12px;font-size:.9rem}.biometric-toggle{display:flex;align-items:center;gap:10px;background:var(--very-light-blue);border:1px solid var(--border);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-weight:600}.biometric-toggle input{width:18px;height:18px}.biometric-toggle span{display:inline-flex;align-items:center;gap:8px}.login-btn{width:100%;justify-content:center}.sign-up-link{width:100%;justify-content:center;margin-top:-4px}.forgot-password-link{background:transparent;border:none;color:var(--color-button);font-weight:600;cursor:pointer;padding:8px 6px;text-decoration:underline;margin-top:4px}.social-login-divider{display:flex;align-items:center;text-align:center;color:var(--text-secondary);font-size:.8rem;margin:6px 0}.social-login-divider:before,.social-login-divider:after{content:"";flex:1;border-bottom:1px solid var(--border)}.social-login-divider span{padding:0 10px}.social-login-row{display:flex;flex-direction:column;gap:10px}.social-login-button{width:100%;border:1px solid var(--border);background:#fff;color:var(--text-primary);border-radius:10px;padding:12px 14px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s ease}.social-login-button:hover{transform:translateY(-1px);box-shadow:0 6px 12px #00000014}.social-login-button.google,.social-login-button.apple,.social-login-button.microsoft{border-color:var(--border)}.login-hint{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);font-size:.8rem;text-align:center}.small-text{font-size:.75rem;margin-top:4px}.signup-flow{display:flex;flex-direction:column;gap:12px}.step-indicator{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}.step-dot{width:28px;height:28px;border-radius:50%;background:var(--very-light-blue);color:var(--color-button);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}.step-dot.active{background:var(--color-button);color:#fff}.signup-actions{display:flex;gap:12px;margin-top:8px}.signup-actions .btn{flex:1;justify-content:center}.terms-box{padding:14px 16px}.success-box{background:var(--light-teal);border:1px solid var(--success);color:var(--success);border-radius:12px;padding:20px;text-align:center}.success-box h3{margin-bottom:8px}.app-container{min-height:100vh;padding:20px}.header{background:var(--color-header);padding:28px 20px;border-radius:0;box-shadow:none;margin:-20px -20px 24px;display:flex;justify-content:space-between;align-items:center;gap:48px}.header h1{color:#fff;font-size:2rem;display:flex;align-items:center;gap:10px}.nav-tabs{display:flex;gap:10px;flex-wrap:wrap}.nav-tab{padding:10px 20px;border:none;background:#ffffff1f;color:#fff;border-radius:9999px;cursor:pointer;font-size:.95rem;font-weight:600;transition:all .2s;display:flex;align-items:center;gap:8px}.nav-tab:hover{background:#ffffff38}.nav-tab.active{background:#fff;color:var(--primary-blue)}.main-content{background:transparent;padding:0;max-width:1200px;margin:0 auto}.section-title{color:var(--color-section);font-size:1.8rem;margin-bottom:20px;display:flex;align-items:center;gap:10px}.card{background:var(--card-bg);padding:24px;border-radius:16px;margin-bottom:15px;box-shadow:0 1px 3px #1118270f,0 1px 2px #1118270a;border-left:none;transition:all .3s}.card:hover{box-shadow:0 4px 12px #0000001a;transform:translate(5px)}.card.alert-error{border-left:4px solid var(--error);background:var(--error-bg)}.card.alert-warning{border-left:4px solid var(--warning-text);background:var(--warning-bg)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.card-title{font-size:1.2rem;color:var(--text-primary);font-weight:600}.card-date{color:var(--text-secondary);font-size:.9rem}.card-content{color:var(--text-secondary);line-height:1.6}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:var(--text-primary);font-weight:500}.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:2px solid var(--border);border-radius:8px;font-size:1rem;transition:border .3s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--color-button)}.form-group textarea{resize:vertical;min-height:100px}.btn{padding:12px 30px;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px;font-weight:500}.btn-primary{background:var(--color-button);color:#fff}.btn-primary:hover{background:var(--color-button-hover);transform:translateY(-2px);box-shadow:0 6px 16px #0a66ff47}.btn-secondary{background:var(--status-upcoming);color:var(--text-primary)}.btn-secondary:hover{background:var(--very-light-blue)}.btn-danger{background:var(--error);color:#fff}.btn-danger:hover{background:#991813}.btn-icon{padding:8px;background:none;border:none;cursor:pointer;color:var(--text-secondary);transition:color .3s}.btn-icon:hover{color:var(--color-button)}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:20px}.stat-card{background:var(--primary-blue);color:#fff;padding:25px;border-radius:12px;box-shadow:0 4px 15px #0000001f}.stat-card-1{background:#0a2e45}.stat-card-2{background:#0b4f70}.stat-card-3{background:#12688c}.stat-card h3{font-size:2.5rem;margin-bottom:5px}.stat-card p{font-size:1rem;opacity:.9}.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:500;margin-left:10px}.badge-success{background:var(--success);color:#fff}.badge-warning{background:var(--warning-bg);color:var(--warning-text)}.badge-danger{background:var(--error);color:#fff}.badge-info{background:var(--primary-blue);color:#fff}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#11182780;display:flex;align-items:center;justify-content:center;padding:20px;z-index:2000}.modal-card{background:var(--card-bg);border-radius:16px;box-shadow:0 20px 50px #11182740;width:100%;max-width:640px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border);flex-shrink:0}.modal-body{padding:24px;overflow-y:auto}.notification{position:fixed;bottom:20px;right:20px;background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 20px #0003;max-width:400px;animation:slideIn .3s;z-index:1000}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}.notification-success{border-left:4px solid var(--success)}.notification-warning{border-left:4px solid var(--status-overdue)}.notification-error{border-left:4px solid var(--error)}.chatbot-toggle{position:fixed;bottom:24px;left:24px;width:56px;height:56px;border-radius:50%;border:none;background:var(--primary-blue);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px #0b4f7059;z-index:1500;transition:transform .2s}.fab-button{position:fixed;bottom:28px;width:48px;height:48px;border-radius:50%;border:none;background:#fff;color:var(--primary-blue);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 20px #11182726;z-index:1500;transition:transform .2s}.fab-button:hover{transform:scale(1.06)}.fab-user-guide{left:92px}.fab-about{left:152px}[data-tooltip]:after{content:attr(data-tooltip);position:absolute;bottom:100%;left:50%;transform:translate(-50%) translateY(-6px);background:var(--text-primary);color:#fff;padding:6px 10px;border-radius:6px;font-size:.78rem;font-weight:600;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:1600}[data-tooltip]:hover:after{opacity:1;visibility:visible;transform:translate(-50%) translateY(-10px)}.chatbot-toggle:hover{transform:scale(1.06)}.chatbot-panel{position:fixed;bottom:92px;left:24px;width:340px;max-width:calc(100vw - 48px);height:440px;max-height:calc(100vh - 140px);background:var(--card-bg);border-radius:16px;box-shadow:0 20px 50px #11182740;display:flex;flex-direction:column;overflow:hidden;z-index:1500}.chatbot-header{background:var(--color-header);color:#fff;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.chatbot-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--page-bg)}.chatbot-bubble{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.88rem;line-height:1.4}.chatbot-bubble-bot{align-self:flex-start;background:#fff;color:var(--text-primary);border-bottom-left-radius:4px;box-shadow:0 1px 3px #11182714}.chatbot-bubble-user{align-self:flex-end;background:var(--primary-blue);color:#fff;border-bottom-right-radius:4px}.chatbot-input-row{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--border);flex-shrink:0}.chatbot-input-row input{flex:1;border:1px solid var(--border);border-radius:999px;padding:10px 14px;font-size:.9rem}.chatbot-input-row input:focus{outline:none;border-color:var(--primary-blue)}.chatbot-input-row button{color:var(--primary-blue)}.empty-state{text-align:center;padding:60px 20px;color:var(--text-secondary)}.empty-state svg{margin-bottom:20px;opacity:.5}.loading{display:flex;justify-content:center;align-items:center;padding:40px}.spinner{width:50px;height:50px;border:4px solid var(--very-light-blue);border-top:4px solid var(--color-button);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.header{flex-direction:column;gap:20px}.header h1{font-size:1.5rem}.grid{grid-template-columns:1fr}}