.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);padding:20px}.auth-card{background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);padding:40px;width:100%;max-width:450px}.auth-header{text-align:center;margin-bottom:30px}.auth-header svg{width:60px;height:60px;color:#2c5f2d;margin-bottom:20px}.auth-header h1{font-size:28px;font-weight:700;color:#1a1a1a;margin-bottom:8px}.auth-header p{color:#666;font-size:16px}.error-message{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:12px 16px;border-radius:8px;display:flex;align-items:center;gap:8px;margin-bottom:20px}.error-message svg{width:20px;height:20px;flex-shrink:0}.info-message{background:#dbeafe;border:1px solid #93c5fd;color:#1d4ed8;padding:12px 16px;border-radius:8px;display:flex;align-items:center;gap:8px;margin-bottom:20px}.info-message svg{width:20px;height:20px;flex-shrink:0}.auth-form{gap:20px}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{font-weight:600;color:#374151;font-size:14px}.input-with-icon{position:relative;display:flex;align-items:center}.input-with-icon svg{position:absolute;left:12px;width:20px;height:20px;color:#9ca3af;z-index:1}.input-with-icon input{width:100%;padding:12px 12px 12px 44px;border:2px solid #e5e7eb;border-radius:8px;font-size:16px;transition:all .2s ease;background:#fff}.input-with-icon input:focus{outline:none;border-color:#2c5f2d;box-shadow:0 0 0 3px rgba(44,95,45,.1)}.input-with-icon input::-moz-placeholder{color:#9ca3af}.input-with-icon input::placeholder{color:#9ca3af}.auth-button{background:#2c5f2d;color:#fff;border:none;padding:14px 20px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}.auth-button:hover:not(:disabled){background:#254d26;transform:translateY(-1px)}.auth-button:disabled{opacity:.7;cursor:not-allowed}.auth-button svg{width:20px;height:20px}.auth-footer{text-align:center;margin-top:30px}.auth-footer p{color:#666;font-size:14px}.auth-footer a{color:#2c5f2d;text-decoration:none;font-weight:600}.auth-footer a:hover{text-decoration:underline}.demo-credentials{margin-top:30px;padding:20px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.demo-credentials h3{font-size:14px;font-weight:600;color:#374151;margin-bottom:12px}.demo-account{font-size:12px;color:#6b7280;margin-bottom:6px}.demo-account strong{color:#374151}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.auth-button svg:first-child{animation:spin 1s linear infinite}@media (max-width:480px){.auth-container{padding:10px}.auth-card{padding:30px 20px}.auth-header h1{font-size:24px}}.protected-route-error,.protected-route-loading{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:20px}.error-content,.loading-spinner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}.loading-spinner svg{animation:spin 1s linear infinite;color:#2c5f2d}.loading-spinner p{color:#666;font-size:16px;margin:0}.error-content{max-width:400px}.error-content svg{color:#dc2626}.error-content h1{font-size:32px;font-weight:700;color:#1a1a1a;margin:0}.error-content p{color:#666;font-size:16px;margin:0;line-height:1.5}.error-button{background:#2c5f2d;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.error-button:hover{background:#254d26;transform:translateY(-1px)}.profile-section{gap:20px;margin-bottom:30px}.profile-field,.profile-section{display:flex;flex-direction:column}.profile-field{gap:8px}.profile-field label{font-weight:600;color:#374151;font-size:14px}.profile-value{padding:12px 16px;background:#f8fafc;border:2px solid #e5e7eb;border-radius:8px;color:#1a1a1a;font-size:16px}.role-badge{display:inline-block;padding:6px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:capitalize}.role-badge.admin{background:#fee2e2;color:#dc2626}.role-badge.customer{background:#dbeafe;color:#2563eb}.profile-actions{display:flex;gap:12px;flex-wrap:wrap}.orders-list{display:flex;flex-direction:column;gap:20px}.order-card{border:1px solid #e2e8f0;border-radius:12px;padding:20px;background:#fafafa}.order-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e2e8f0}.order-info h3{font-size:18px;font-weight:600;color:#1a1a1a;margin:0 0 4px}.order-info p{color:#666;margin:0;font-size:14px}.order-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.order-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#fff;border-radius:8px}.item-details{display:flex;flex-direction:column;gap:4px}.item-name{font-weight:600;color:#1a1a1a}.item-quantity{font-size:12px;color:#666}.item-price{font-weight:600;color:#2c5f2d}.order-footer{display:flex;justify-content:space-between;align-items:center;padding-top:16px;border-top:1px solid #e2e8f0}.order-total{font-size:18px;color:#1a1a1a}.order-actions{display:flex;gap:8px}.order-action-btn{display:flex;align-items:center;gap:6px;background:transparent;color:#2c5f2d;border:2px solid #2c5f2d;padding:8px 12px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.order-action-btn:hover{background:#2c5f2d;color:#fff}@media (max-width:640px){.profile-actions{flex-direction:column}.order-footer,.order-header{flex-direction:column;gap:12px;align-items:flex-start}.order-actions{width:100%;justify-content:space-between}}