:root{--bg-primary:#f8f9fa;--bg-card:#fff;--bg-nav:#1a2332;--text-primary:#1a1a2e;--text-secondary:#6c757d;--accent-primary:#2563eb;--accent-success:#16a34a;--accent-warning:#d97706;--accent-danger:#dc2626;--accent-gold:#d4a853;--border:#e5e7eb;--shadow-card:0 4px 16px #00000014, 0 1px 4px #0000000a;--shadow-hover:0 8px 24px #0000001f, 0 2px 8px #0000000f;--radius:16px;--radius-sm:10px;--radius-xs:6px;--transition:.2s cubic-bezier(.4, 0, .2, 1);--spring:.3s cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#c4c8cc;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#9ea3a8}.app-container{max-width:480px;min-height:100vh;margin:0 auto;padding-bottom:80px;position:relative}.fade-in{animation:.25s forwards fadeIn}.fade-out{opacity:0;transition:opacity .1s}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.offline-banner{background:var(--accent-warning);color:#fff;text-align:center;z-index:100;padding:8px 16px;font-size:.85rem;font-weight:600;position:sticky;top:0}.card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);transition:transform var(--transition), box-shadow var(--transition);margin:0 16px 16px;padding:16px 20px}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.card:active{transition:transform var(--spring);transform:scale(.98)}.card-clickable{cursor:pointer}.card-primary{border-left:4px solid var(--accent-primary)}.card-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.card-header h2{font-size:1rem;font-weight:600}.card-arrow{color:var(--text-secondary);font-size:1.4rem}.badge{letter-spacing:.02em;border-radius:20px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-block}.badge-accent{color:var(--accent-primary);background:#2563eb1a}.badge-outline{border:1.5px solid var(--border);color:var(--text-secondary);background:0 0}.btn{border-radius:var(--radius);cursor:pointer;transition:transform var(--spring), box-shadow var(--transition), background var(--transition);-webkit-tap-highlight-color:transparent;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:600;display:inline-flex}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent-primary);color:#fff;width:100%}.btn-primary:hover:not(:disabled){background:#1d4ed8;box-shadow:0 4px 12px #2563eb4d}.btn-secondary{color:var(--text-secondary);background:0 0;width:100%;margin-top:8px}.btn-danger{background:var(--accent-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}.btn-logout{color:var(--accent-danger);background:#f3f4f6;width:calc(100% - 32px);margin:24px 16px;font-weight:600}.btn-logout:hover{background:#fef2f2}.login-screen{background:linear-gradient(135deg,#f0f4ff 0%,#e8ecf4 50%,#f5f0e8 100%);flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.login-card{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);width:100%;max-width:400px;padding:32px 24px;animation:.4s fadeIn}.login-logo{text-align:center;margin-bottom:8px}.login-logo img{object-fit:contain;border-radius:12px;width:80px;height:80px}.login-logo-fallback{margin-top:8px;font-size:3rem}.login-logo img+.login-logo-fallback{display:none}.login-title{text-align:center;color:var(--text-primary);margin-bottom:24px;font-size:1.5rem;font-weight:700}.form-group{margin-bottom:16px}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-size:.85rem;font-weight:600;display:block}.form-select{border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);appearance:none;transition:border-color var(--transition), box-shadow var(--transition);background:#fff url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236c757d' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right 16px center no-repeat;padding:12px 16px;font-family:inherit;font-size:1rem}.form-select:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #2563eb26}.pin-section{text-align:center;margin:16px 0}.pin-dots{justify-content:center;gap:16px;margin:16px 0;display:flex}.pin-dot{border:2px solid var(--border);width:16px;height:16px;transition:all var(--spring);border-radius:50%}.pin-dot.filled{background:var(--accent-primary);border-color:var(--accent-primary);animation:dotFill .25s var(--spring);box-shadow:0 0 8px #2563eb66}.pin-dot.error{border-color:var(--accent-danger);animation:.4s dotShake}@keyframes dotFill{0%{transform:scale(.6)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes dotShake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.pin-keypad{grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto;display:grid}.pin-key{aspect-ratio:1.5;border-radius:var(--radius-sm);width:100%;color:var(--text-primary);cursor:pointer;transition:transform var(--spring), background var(--transition);-webkit-tap-highlight-color:transparent;background:#f3f4f6;border:none;justify-content:center;align-items:center;font-family:inherit;font-size:1.4rem;font-weight:600;display:flex}.pin-key:active:not(:disabled){background:#e5e7eb;transform:scale(.92)}.pin-key.invisible{visibility:hidden}.pin-key-delete{background:0 0;font-size:1.6rem}.login-error{color:var(--accent-danger);border-radius:var(--radius-xs);text-align:center;background:#fef2f2;margin:12px 0;padding:10px 14px;font-size:.9rem;font-weight:500;animation:.3s fadeIn}.login-loading{text-align:center;color:var(--text-secondary);padding:12px 0;font-weight:500}.tos-check{color:var(--text-secondary);cursor:pointer;align-items:flex-start;gap:10px;margin:16px 0 8px;font-size:.85rem;display:flex}.tos-check input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-primary);margin-top:2px}.login-footer{color:var(--text-secondary);text-align:center;margin-top:24px;font-size:.8rem}.webauthn-section{text-align:center;margin-bottom:12px}.btn-faceid{background:linear-gradient(135deg, var(--accent-primary), #3b82f6);color:#fff;border-radius:var(--radius);width:100%;padding:14px 24px;font-size:1.1rem;box-shadow:0 4px 12px #2563eb4d}.btn-faceid:hover:not(:disabled){box-shadow:0 6px 20px #2563eb66}.link-btn{color:var(--accent-primary);cursor:pointer;background:0 0;border:none;padding:8px;font-family:inherit;font-size:.9rem;text-decoration:underline}.login-divider{color:var(--text-secondary);align-items:center;gap:12px;margin:16px 0;font-size:.85rem;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--border);flex:1;height:1px}.modal-overlay{z-index:200;background:#00000080;justify-content:center;align-items:center;padding:24px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-card);border-radius:var(--radius);text-align:center;width:100%;max-width:360px;animation:popIn .35s var(--spring);padding:32px 24px;box-shadow:0 20px 60px #0003}.modal-icon{margin-bottom:12px;font-size:3rem}.modal-card h2{margin-bottom:8px;font-size:1.2rem;font-weight:700}.modal-card p{color:var(--text-secondary);margin-bottom:20px;font-size:.95rem}.screen{padding:16px 0}.home-screen{padding-top:24px}.home-header{padding:0 16px 16px}.home-greeting{color:var(--text-primary);font-size:1.4rem;font-weight:700}.home-date{color:var(--text-secondary);margin-top:4px;font-size:.9rem}.home-meta{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.assignment-meta{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.op-badge{color:var(--accent-primary);background:#2563eb14;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:.8rem;font-weight:600;display:inline-flex}.vessel-badge{color:var(--text-secondary);background:#f3f4f6;border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:.8rem;font-weight:500;display:inline-flex}.assignment-date-label{color:var(--text-primary);margin-bottom:4px;font-size:.95rem;font-weight:600}.assignment-type{color:var(--accent-primary);margin-bottom:12px;font-size:.85rem;font-weight:500}.assignment-times{flex-direction:column;gap:6px;display:flex}.time-row{border-bottom:1px solid #f3f4f6;justify-content:space-between;padding:6px 0;font-size:.9rem;display:flex}.time-row:last-child{border-bottom:none}.time-label{color:var(--text-secondary);font-weight:500}.time-value{font-variant-numeric:tabular-nums;color:var(--text-primary);font-weight:600}.clock-section{border-top:1.5px solid var(--border);margin-top:16px;padding-top:16px}.clock-header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.clock-title{color:var(--text-primary);font-size:.9rem;font-weight:600}.gps-dot{border-radius:50%;width:10px;height:10px;display:inline-block}.gps-active-in{background:var(--accent-success);box-shadow:0 0 6px #16a34a80}.gps-active-out{background:var(--accent-warning);box-shadow:0 0 6px #d9770680}.gps-unavailable{background:var(--accent-danger);box-shadow:0 0 6px #dc262680}.gps-unknown{background:#ccc}.btn-clock-in{background:var(--accent-success);color:#fff;border-radius:var(--radius);width:100%;padding:14px;font-size:1.1rem;animation:2s infinite pulse}@keyframes pulse{0%,to{box-shadow:0 0 #16a34a66}50%{box-shadow:0 0 0 10px #16a34a00}}.btn-clock-out{background:var(--accent-warning);color:#fff;border-radius:var(--radius);width:100%;padding:14px;font-size:1.1rem}.clock-active{text-align:center}.elapsed-time{font-variant-numeric:tabular-nums;color:var(--text-primary);letter-spacing:.05em;margin-bottom:12px;font-size:2rem;font-weight:700}.clock-completed{color:var(--accent-success);border-radius:var(--radius-sm);text-align:center;background:#16a34a1a;padding:12px 16px;font-size:.95rem;font-weight:600}.clock-info{color:var(--accent-primary);border-radius:var(--radius-xs);text-align:center;background:#f0f4ff;padding:10px 14px;font-size:.9rem;font-weight:500}.clock-error{color:var(--accent-danger);border-radius:var(--radius-xs);text-align:center;background:#fef2f2;margin-top:10px;padding:10px 14px;font-size:.85rem}.clock-success{color:var(--accent-success);border-radius:var(--radius-xs);text-align:center;background:#f0fdf4;margin-top:10px;padding:10px 14px;font-weight:600}.pop-in{animation:.4s cubic-bezier(.34,1.56,.64,1) popIn}@keyframes popIn{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.cred-summary{flex-wrap:wrap;gap:8px;display:flex}.cred-chip{border-radius:20px;padding:6px 12px;font-size:.8rem;font-weight:600}.cred-current{color:var(--accent-success);background:#16a34a1a}.cred-expiring{color:var(--accent-warning);background:#d977061a}.cred-expired{color:var(--accent-danger);background:#dc26261a}.quick-links{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;padding:0 16px;display:grid}.quick-link{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-card);cursor:pointer;transition:transform var(--spring), box-shadow var(--transition);-webkit-tap-highlight-color:transparent;border:none;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;font-family:inherit;display:flex}.quick-link:active{transform:scale(.96)}.quick-link:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.ql-icon{font-size:1.5rem}.ql-label{color:var(--text-secondary);font-size:.8rem;font-weight:600}.screen-title{margin-bottom:16px;padding:0 16px;font-size:1.3rem;font-weight:700}.month-nav{justify-content:space-between;align-items:center;margin-bottom:16px;padding:0 16px;display:flex}.month-btn{border:1.5px solid var(--border);background:var(--bg-card);cursor:pointer;width:40px;height:40px;transition:transform var(--spring);color:var(--text-primary);border-radius:50%;justify-content:center;align-items:center;font-family:inherit;font-size:1.3rem;display:flex}.month-btn:active{transform:scale(.92)}.month-label{font-size:1.1rem;font-weight:700}.calendar-grid{grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:16px;padding:0 12px;display:grid}.cal-header{text-align:center;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;padding:8px 0;font-size:.75rem;font-weight:600}.cal-cell{text-align:center;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);flex-direction:column;justify-content:center;align-items:center;min-height:44px;padding:10px 4px;display:flex;position:relative}.cal-cell.empty{cursor:default}.cal-cell:not(.empty):hover{background:#f0f4ff}.cal-cell.selected{background:var(--accent-primary);color:#fff}.cal-cell.selected .cal-dot{background:#fff}.cal-cell.today .cal-day{color:var(--accent-primary);background:#2563eb1a;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.cal-cell.selected.today .cal-day{color:#fff;background:#fff3}.cal-day{font-size:.9rem;font-weight:500}.cal-dot{background:var(--accent-primary);border-radius:50%;width:6px;height:6px;margin-top:4px}.day-detail{padding:0 0 16px;animation:.3s fadeIn}.day-detail-title{color:var(--text-primary);margin-bottom:12px;padding:0 16px;font-size:1rem;font-weight:600}.assignment-card{border-left:3px solid var(--accent-primary)}.assignment-confirmation{border-top:1px solid #f3f4f6;margin-top:12px;padding-top:12px}.conf-badge{border-radius:20px;align-items:center;gap:4px;padding:4px 12px;font-size:.8rem;font-weight:600;display:inline-flex}.conf-confirmed{color:var(--accent-success);background:#16a34a1a}.conf-declined{color:var(--accent-danger);background:#dc26261a}.conf-pending{color:var(--accent-warning);background:#d977061a}.conf-pending-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.btn-accept{background:var(--accent-success);color:#fff;border-radius:var(--radius-sm);padding:8px 16px;font-size:.85rem}.btn-accept:hover:not(:disabled){background:#15803d}.cred-card{overflow:hidden}.cred-card-header{align-items:flex-start;gap:12px;display:flex}.cred-icon{flex-shrink:0;margin-top:2px;font-size:1.8rem}.cred-card-info{flex:1;min-width:0}.cred-type{color:var(--text-primary);font-size:.95rem;font-weight:600}.cred-number{color:var(--text-secondary);font-variant-numeric:tabular-nums;cursor:pointer;align-items:center;gap:6px;margin-top:2px;font-size:.85rem;display:flex}.reveal-hint{opacity:.6;font-size:.75rem}.cred-status-badge{white-space:nowrap;border-radius:20px;flex-shrink:0;padding:4px 10px;font-size:.75rem;font-weight:600}.cred-no-exp{color:var(--text-secondary);background:#f3f4f6}.cred-card-details{flex-direction:column;gap:4px;margin-top:12px;display:flex}.cred-detail-row{justify-content:space-between;font-size:.85rem;display:flex}.cred-detail-row span:first-child{color:var(--text-secondary)}.cred-detail-row span:last-child{font-weight:500}.cred-capacities{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.capacity-chip{color:var(--accent-primary);background:#2563eb14;border-radius:12px;padding:3px 10px;font-size:.75rem;font-weight:500;display:inline-block}.profile-card{text-align:center;padding:24px 20px}.profile-avatar{background:linear-gradient(135deg, var(--accent-primary), #3b82f6);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 12px;font-size:1.6rem;font-weight:700;display:flex;box-shadow:0 4px 12px #2563eb4d}.profile-name{font-size:1.3rem;font-weight:700}.profile-badges{justify-content:center;gap:8px;margin-top:10px;display:flex}.profile-detail-row{border-bottom:1px solid #f3f4f6;justify-content:space-between;padding:12px 0;font-size:.9rem;display:flex}.profile-detail-row:last-child{border-bottom:none}.profile-label{color:var(--text-secondary);font-weight:500}.profile-value{color:var(--text-primary);text-align:right;font-weight:600}.text-secondary{color:var(--text-secondary);padding:8px 0;font-size:.9rem}.webauthn-status{padding:8px 0}.webauthn-status p{color:var(--text-secondary);margin-bottom:12px;font-size:.9rem}.bottom-nav{width:100%;max-width:480px;padding:8px 0 env(safe-area-inset-bottom,8px);-webkit-backdrop-filter:blur(20px);z-index:50;background:#1a2332d9;border-top:1px solid #ffffff14;justify-content:space-around;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.nav-tab{cursor:pointer;border-radius:var(--radius-xs);transition:all var(--transition);-webkit-tap-highlight-color:transparent;background:0 0;border:none;flex-direction:column;align-items:center;gap:3px;padding:8px 12px;font-family:inherit;display:flex;position:relative}.nav-tab.active:after{content:"";background:var(--accent-primary);border-radius:2px;width:24px;height:3px;position:absolute;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 0 8px #2563eb99}.nav-icon{opacity:.5;transition:opacity var(--transition);font-size:1.3rem}.nav-tab.active .nav-icon{opacity:1}.nav-label{color:#fff6;letter-spacing:.02em;transition:color var(--transition);font-size:.65rem;font-weight:600}.nav-tab.active .nav-label{color:#fffffff2}.empty-state{text-align:center;color:var(--text-secondary);padding:24px 16px;font-size:.95rem}@media (width>=481px){.app-container{border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:100vh}}