*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#059669,#10b981);min-height:100vh;padding:2rem 1rem}.app{display:flex;justify-content:center;align-items:flex-start}.container{background:#fff;border-radius:20px;box-shadow:0 25px 50px -12px #00000040;padding:2.5rem;width:100%;max-width:800px}.language-toggle{display:flex;justify-content:center;gap:.5rem;margin-bottom:1.5rem}.lang-btn{padding:.5rem 1rem;border:2px solid #e2e8f0;background:#fff;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;font-family:inherit}.lang-btn:hover{border-color:#059669;background:#f8fafc}.lang-btn.active{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border-color:transparent}header{text-align:center;margin-bottom:2rem}header h1{color:#1a1a2e;font-size:2rem;font-weight:700;margin-bottom:.5rem}header .subtitle{color:#059669;font-size:1.1rem;font-weight:500}.volunteer-form{display:flex;flex-direction:column;gap:1.5rem}.form-section{background:#f8fafc;border-radius:12px;padding:1.5rem}.form-section h2{color:#334155;font-size:1rem;font-weight:600;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.05em}.section-desc{color:#64748b;font-size:.9rem;margin-bottom:1rem}.form-row{display:flex;gap:1rem}.form-group{flex:1;margin-bottom:1rem}.form-group:last-child{margin-bottom:0}label{display:block;color:#475569;font-size:.875rem;font-weight:500;margin-bottom:.5rem}input[type=text],input[type=email],input[type=tel],input[type=time],select{width:100%;padding:.75rem 1rem;border:2px solid #e2e8f0;border-radius:8px;font-size:1rem;font-family:inherit;transition:all .2s ease;background:#fff}input:focus,select:focus{outline:none;border-color:#059669;box-shadow:0 0 0 3px #0596691a}input::placeholder{color:#94a3b8}.role-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.role-card{background:#fff;border:2px solid #e2e8f0;border-radius:12px;padding:1.25rem;text-align:center;cursor:pointer;transition:all .2s ease;position:relative}.role-card:hover{border-color:#059669;transform:translateY(-2px)}.role-card.selected{border-color:#059669;background:#ecfdf5}.role-icon{font-size:2rem;margin-bottom:.5rem}.role-name{font-weight:600;color:#1f2937;margin-bottom:.25rem}.role-desc{font-size:.75rem;color:#64748b}.role-checkbox{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;border-radius:50%;background:#059669;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;opacity:0;transition:opacity .2s ease}.role-card.selected .role-checkbox{opacity:1}.time-slot{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1rem;margin-bottom:.75rem}.time-slot-row{display:flex;gap:.75rem;align-items:flex-end}.time-slot-row .form-group{margin-bottom:0}.remove-slot-btn{padding:.75rem;background:#fee2e2;color:#991b1b;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s ease}.remove-slot-btn:hover{background:#fecaca}.add-slot-btn{background:transparent;border:2px dashed #059669;color:#059669;padding:.75rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%;font-family:inherit}.add-slot-btn:hover{background:#ecfdf5}.time-slot-cards{display:flex;flex-direction:column;gap:.75rem}.time-slot-card{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:#fff;border:2px solid #e2e8f0;border-radius:10px;cursor:pointer;transition:all .2s ease}.time-slot-card:hover{border-color:#059669;background:#f0fdf4}.time-slot-card.selected{border-color:#059669;background:#ecfdf5}.slot-day{font-weight:600;color:#1e293b;min-width:100px}.slot-time{color:#64748b;flex:1;text-align:center}.slot-checkbox{width:28px;height:28px;border-radius:50%;border:2px solid #cbd5e1;display:flex;align-items:center;justify-content:center;font-size:1rem;color:#fff;transition:all .2s ease}.time-slot-card.selected .slot-checkbox{background:#059669;border-color:#059669}.availability-row{display:flex;gap:.75rem;align-items:flex-end;background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1rem;margin-bottom:.75rem}.availability-row .form-group{flex:1;margin-bottom:0}.availability-row select,.availability-row input[type=time]{width:100%;padding:.6rem .75rem;border:1px solid #e2e8f0;border-radius:8px;font-size:.95rem}.remove-btn{padding:.6rem .8rem;background:#fee2e2;color:#991b1b;border:none;border-radius:8px;cursor:pointer;font-size:1rem;transition:all .2s ease;flex-shrink:0}.remove-btn:hover{background:#fecaca}.add-availability-btn{background:transparent;border:2px dashed #059669;color:#059669;padding:.75rem;border-radius:8px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s ease;width:100%;font-family:inherit}.add-availability-btn:hover{background:#ecfdf5}@media (max-width: 600px){.availability-row{flex-direction:column;gap:.5rem}.availability-row .form-group{width:100%}.remove-btn{align-self:flex-end}}.captcha-container{display:flex;justify-content:center;margin:1.5rem 0}.submit-btn{background:linear-gradient(135deg,#059669,#10b981);color:#fff;border:none;padding:1rem 2rem;font-size:1.1rem;font-weight:600;border-radius:10px;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.05em}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 20px #0596694d}.submit-btn:disabled{opacity:.7;cursor:not-allowed}.alert{padding:1rem 1.25rem;border-radius:10px;font-weight:500}.alert.success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.alert.error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}@media (max-width: 600px){.container{padding:1.5rem}.form-row{flex-direction:column;gap:0}.role-cards{grid-template-columns:1fr}.time-slot-row{flex-wrap:wrap}.time-slot-row .form-group{flex:1 1 100%}.remove-slot-btn{width:100%}header h1{font-size:1.5rem}}.shift-selector{margin-top:.5rem;width:100%;overflow:hidden}.shift-selector .loading-message,.shift-selector .error-message,.shift-selector .no-shifts-message{text-align:center;padding:2rem;color:#64748b;background:#fff;border-radius:10px;border:1px solid #e2e8f0}.shift-selector .error-message{color:#991b1b;background:#fee2e2;border-color:#fecaca}.shift-selector .retry-btn{margin-top:1rem;padding:.5rem 1.5rem;background:#059669;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500}.shift-selector .retry-btn:hover{background:#047857}.shift-selector .refresh-btn{padding:.5rem 1rem;background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;font-weight:500;font-size:.875rem;transition:all .2s ease}.shift-selector .refresh-btn:hover{background:#059669;color:#fff;border-color:#059669}.shift-selector .shift-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}.shift-selector .shift-header .badge{display:inline-block;padding:.375rem .75rem;background:#059669;color:#fff;border-radius:20px;font-size:.875rem;font-weight:500}.shift-selector .loading-spinner{display:inline-block;margin-right:.5rem;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.shift-selector .selected-count{margin-bottom:.75rem}.shift-selector .selected-count .badge{display:inline-block;padding:.375rem .75rem;background:#059669;color:#fff;border-radius:20px;font-size:.875rem;font-weight:500}.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding:.5rem;background:#fff;border-radius:10px;border:1px solid #e2e8f0}.calendar-nav .nav-btn{padding:.5rem 1rem;background:#f1f5f9;border:none;border-radius:8px;font-size:.875rem;font-weight:500;color:#475569;cursor:pointer;transition:all .2s}.calendar-nav .nav-btn:hover{background:#e2e8f0;color:#1e293b}.calendar-nav .week-label{font-weight:600;color:#1e293b;font-size:1rem}.week-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.375rem;background:#fff;border-radius:12px;padding:.5rem;border:1px solid #e2e8f0;width:100%;box-sizing:border-box}.calendar-day{min-height:100px;background:#f8fafc;border-radius:6px;padding:.375rem;display:flex;flex-direction:column;overflow:hidden}.calendar-day.past{opacity:.5;background:#f1f5f9}.calendar-day.today{background:#ecfdf5;border:2px solid #059669}.calendar-day.has-selected{background:#f0fdf4}.calendar-day .day-header{text-align:center;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid #e2e8f0}.calendar-day .day-name{display:block;font-size:.6rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0}.calendar-day .day-number{display:block;font-size:1rem;font-weight:700;color:#1e293b}.calendar-day.today .day-number{color:#059669}.calendar-day .day-shifts{flex:1;display:flex;flex-direction:column;gap:.375rem;overflow-y:auto}.calendar-day .no-shifts-day{color:#cbd5e1;text-align:center;font-size:.875rem;margin-top:.5rem}.shift-slot{display:flex;align-items:center;gap:.125rem;padding:.25rem .375rem;border-radius:4px;cursor:pointer;transition:all .15s;font-size:.65rem;border:2px solid transparent}.shift-slot:hover{transform:scale(1.02)}.shift-slot.selected{border-color:#059669;box-shadow:0 2px 4px #05966933}.shift-slot .slot-icon{font-size:.7rem}.shift-slot .slot-time{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shift-slot .slot-check{font-weight:700;color:#059669;font-size:.6rem}.shift-slot.role-packaging{background:#dbeafe;color:#1e40af}.shift-slot.role-packaging.selected{background:#bfdbfe}.shift-slot.role-delivering{background:#dcfce7;color:#166534}.shift-slot.role-delivering.selected{background:#bbf7d0}.shift-slot.role-donating{background:#fef3c7;color:#92400e}.shift-slot.role-donating.selected{background:#fde68a}.calendar-legend{display:flex;justify-content:center;gap:1.5rem;margin-top:1rem;padding:.75rem;background:#fff;border-radius:8px;border:1px solid #e2e8f0}.legend-item{display:flex;align-items:center;gap:.375rem;font-size:.8rem;color:#64748b}.legend-icon{font-size:1rem}@media (max-width: 768px){.week-calendar{grid-template-columns:repeat(2,1fr)}.calendar-day{min-height:100px}.calendar-nav .week-label{font-size:.875rem}.calendar-legend{flex-wrap:wrap;gap:.75rem}}@media (max-width: 480px){.week-calendar{grid-template-columns:1fr}.calendar-day{min-height:auto;padding:.75rem}.calendar-day .day-shifts{flex-direction:row;flex-wrap:wrap}.shift-slot{flex:0 0 auto}}