*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--green-dark:#406328;--green-mid:#4a7a2e;--green-light:#6a9f4b;--green-pale:#b5c9a8;--sage:#c8d5bc;--bg:#f0f4ec;--bg-card:#fff;--text-primary:#2c2c2c;--text-secondary:#666;--text-muted:#999;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-pill:50px;--shadow-card:0 4px 24px #0000000f;--shadow-hover:0 8px 32px #40632826}html{height:100%}body{background-color:var(--bg);color:var(--text-primary);min-height:100%;font-family:Montserrat,sans-serif;position:relative;overflow-x:hidden}body:before,body:after{content:"";pointer-events:none;z-index:0;opacity:.08;background:radial-gradient(ellipse, var(--green-dark) 0%, transparent 70%);position:fixed}body:before{border-radius:40% 60% 70% 30%/40% 50% 60%;width:500px;height:500px;top:-120px;right:-100px}body:after{border-radius:60% 40% 30% 70%/50% 60% 40% 50%;width:400px;height:400px;bottom:-80px;left:-80px}.page-wrapper{z-index:1;flex-direction:column;max-width:640px;min-height:100vh;margin:0 auto;padding:8px 20px 48px;display:flex;position:relative}.page-header{text-align:center;margin-bottom:12px}.brand{color:var(--green-dark);margin-bottom:4px;font-family:DM Serif Text,serif;font-size:2.4rem;line-height:1.1;text-decoration:none}a.brand:hover{opacity:.85}.page-title{color:var(--text-secondary);letter-spacing:.02em;font-size:.95rem;font-weight:500}.nav-header{z-index:10;justify-content:space-between;align-items:center;max-width:640px;margin:0 auto;padding:20px 20px 0;display:flex;position:relative}.nav-links{align-items:center;gap:20px;display:flex}.nav-link{color:var(--text-secondary);font-size:.85rem;font-weight:500;text-decoration:none;transition:color .2s}.nav-link:hover{color:var(--green-dark)}.card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);margin-bottom:20px;animation:.5s ease-out both fadeUp;overflow:hidden}.card:nth-child(2){animation-delay:80ms}.card:nth-child(3){animation-delay:.16s}.card-accent{background:linear-gradient(90deg, var(--green-dark), var(--green-light), var(--green-dark));height:3px}.card-body{padding:2.5rem 2rem}.card-body h2{color:var(--green-dark);margin-bottom:4px;font-family:Grape Nuts,cursive;font-size:1.8rem}.card-body .subtitle{color:var(--text-secondary);margin-bottom:2rem;font-size:.9rem}.btn{border-radius:var(--radius-pill);cursor:pointer;text-align:center;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 24px;font-family:Montserrat,sans-serif;font-size:.95rem;font-weight:600;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex}.btn:active{transform:translateY(0)!important}.btn-primary{color:#fff;background:linear-gradient(135deg, var(--green-dark), var(--green-mid))}.btn-primary:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px)}.btn-secondary{color:var(--green-dark);background:#6a9f4b1f}.btn-secondary:hover{background:#6a9f4b33;transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.btn svg{flex-shrink:0;width:18px;height:18px}.btn-back{color:var(--text-muted);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;margin-top:16px;padding:8px 0;font-family:Montserrat,sans-serif;font-size:.85rem;transition:color .2s;display:inline-flex}.btn-back:hover{color:var(--green-dark)}.btn-back svg{width:16px;height:16px}.form-group{margin-bottom:1.25rem}.form-group label{color:#555;margin-bottom:.4rem;font-size:.85rem;font-weight:500;display:block}.form-group input[type=email],.form-group input[type=password],.form-group input[type=text]{border-radius:var(--radius-sm);color:#333;background:#fafafa;border:1.5px solid #ddd;outline:none;width:100%;padding:.75rem 1rem;font-family:Montserrat,sans-serif;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-group input:focus{border-color:var(--green-light);background:#fff;box-shadow:0 0 0 3px #6a9f4b26}.form-group input::placeholder{color:#bbb}.form-group input[readonly]{color:#888;cursor:not-allowed;background:#f0f0f0}.form-row{gap:12px;display:flex}.form-row .form-group{flex:1}.checkbox-group{align-items:flex-start;gap:10px;margin-bottom:1.5rem;display:flex}.checkbox-group input[type=checkbox]{width:18px;height:18px;accent-color:var(--green-dark);flex-shrink:0;margin-top:2px}.checkbox-group label{color:var(--text-secondary);cursor:pointer;font-size:.85rem;line-height:1.4}.plans-intro{text-align:center;margin-bottom:24px}.plans-intro h2{color:var(--green-dark);margin-bottom:6px;font-family:Grape Nuts,cursive;font-size:1.8rem}.plans-intro p{color:var(--text-secondary);font-size:.9rem}.plans-trial-intro{margin-top:8px;font-weight:600;color:var(--green-dark)!important}.plans-grid{flex-direction:column;gap:16px;display:flex;overflow:visible}.plan-card{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);text-align:center;cursor:pointer;color:inherit;border:2px solid #0000;flex-direction:column;padding:28px 24px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s;animation:.5s ease-out both fadeUp;display:flex;position:relative}.plan-card:first-child{animation-delay:.1s}.plan-card:nth-child(2){animation-delay:.2s}.plan-card:nth-child(3){animation-delay:.3s}.plan-card:hover{border-color:var(--green-pale);box-shadow:var(--shadow-hover);transform:translateY(-2px)}.plan-card.selected{border-color:var(--green-dark);box-shadow:0 8px 32px #40632838}.plan-card.popular{border-color:var(--green-dark);padding-top:36px}.plan-card.popular:hover{border-color:var(--green-dark);box-shadow:0 8px 32px #40632838}.plan-badge{background:linear-gradient(135deg, var(--green-dark), var(--green-mid));color:#fff;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-pill);white-space:nowrap;padding:4px 16px;font-size:.7rem;font-weight:700;position:absolute;top:-13px;left:50%;transform:translate(-50%)}.plan-badge.promo{background:linear-gradient(135deg,#c0392b,#e74c3c)}.plan-name{color:var(--text-primary);margin-bottom:4px;font-size:1.1rem;font-weight:700}.plan-original-price{color:var(--text-muted);margin-top:8px;font-size:1rem;text-decoration:line-through}.plan-price{color:var(--green-dark);margin:12px 0 4px;font-size:2rem;font-weight:700;line-height:1}.plan-period{color:var(--text-muted);margin-bottom:20px;font-size:.8rem}.plan-savings{color:var(--green-dark);border-radius:var(--radius-pill);background:#6a9f4b1f;margin-top:-12px;margin-bottom:20px;padding:3px 12px;font-size:.75rem;font-weight:600;display:inline-block}.plan-promo-note{color:#c0392b;border-radius:var(--radius-pill);background:#c0392b14;margin-top:-12px;margin-bottom:20px;padding:3px 12px;font-size:.75rem;font-weight:600;display:inline-block}.plan-trial{color:var(--green-dark);border-radius:var(--radius-pill);background:#6a9f4b1f;margin:-8px 0 20px;padding:4px 14px;font-size:.75rem;font-weight:700;display:inline-block}.plan-features{text-align:left;flex:1;margin-bottom:20px;list-style:none}.plan-features li{color:var(--text-secondary);align-items:center;gap:8px;padding:6px 0;font-size:.85rem;display:flex}.plan-features li:before{content:"";background:#6a9f4b1f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23406328' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") 50%/10px no-repeat;border-radius:50%;flex-shrink:0;width:18px;height:18px}.plan-select-label{color:var(--green-dark);border:2px solid var(--green-dark);border-radius:var(--radius-pill);margin-top:auto;padding:12px 24px;font-size:.9rem;font-weight:600;transition:background .2s,color .2s}.plan-card:hover .plan-select-label{background:var(--green-dark);color:#fff}.plan-card.selected .plan-select-label{background:linear-gradient(135deg, var(--green-dark), var(--green-mid));color:#fff;border-color:var(--green-dark)}.user-badge{background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-card);align-items:center;gap:12px;margin-bottom:24px;padding:14px 18px;display:flex}.user-avatar{background:linear-gradient(135deg, var(--green-dark), var(--green-light));color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.1rem;font-weight:700;display:flex}.user-info{flex:1;min-width:0}.user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.user-email{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;overflow:hidden}.user-status{text-transform:uppercase;letter-spacing:.06em;border-radius:var(--radius-pill);flex-shrink:0;padding:4px 10px;font-size:.7rem;font-weight:600}.user-status.active{color:var(--green-dark);background:#6a9f4b26}.user-status.inactive{color:var(--text-secondary);background:#0000000f}.subscription-header{align-items:center;gap:10px;margin-bottom:16px;display:flex}.subscription-icon{background:#6a9f4b1f;border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.subscription-icon svg{width:20px;height:20px;color:var(--green-dark)}.subscription-label{color:var(--green-dark);font-family:Grape Nuts,cursive;font-size:1.35rem}.subscription-details{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;display:grid}.detail-item{background:var(--bg);border-radius:var(--radius-sm);padding:12px}.detail-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px;font-size:.7rem;font-weight:600}.detail-value{color:var(--text-primary);font-size:.95rem;font-weight:600}.provider-note{color:var(--text-secondary);background:var(--bg);border-radius:var(--radius-sm);margin-bottom:20px;padding:12px;font-size:.85rem;line-height:1.5}.selected-plan-summary{background:var(--bg);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:12px 16px;display:flex}.selected-plan-summary .plan-info{align-items:center;gap:8px;display:flex}.selected-plan-summary .plan-info .plan-icon{background:#6a9f4b1f;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.selected-plan-summary .plan-info .plan-icon svg{width:16px;height:16px;color:var(--green-dark)}.selected-plan-summary .plan-info span{color:var(--text-primary);font-size:.85rem;font-weight:600}.selected-plan-summary .change-plan{color:var(--green-dark);cursor:pointer;font-size:.8rem;font-weight:500;text-decoration:none}.selected-plan-summary .change-plan:hover{text-decoration:underline}.error-message{color:#c0392b;background:#fdf0ef;border:1px solid #f5c6cb;border-radius:8px;margin-bottom:1.25rem;padding:.75rem 1rem;font-size:.85rem;display:none}.error-message.visible{display:block}.validation-error{color:#c0392b;margin-top:.3rem;font-size:.8rem}.validation-summary{color:#c0392b;background:#fdf0ef;border:1px solid #f5c6cb;border-radius:8px;margin-bottom:1.25rem;padding:.75rem 1rem;font-size:.85rem}.validation-summary:empty{display:none}.forgot-password{text-align:right;color:var(--text-muted);cursor:pointer;margin-top:-.5rem;margin-bottom:1.25rem;font-size:.8rem;text-decoration:none;display:block}.forgot-password:hover{color:var(--green-dark)}.loading-overlay{z-index:100;background:#f0f4ece6;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:none;position:fixed;inset:0}.loading-overlay.visible{display:flex}.loading-overlay .loading-spinner{border:3px solid var(--green-pale);border-top-color:var(--green-dark);border-radius:50%;width:40px;height:40px;animation:.7s linear infinite spin}.loading-overlay p{color:var(--text-secondary);font-size:.95rem;font-weight:500}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.6s linear infinite spin;display:inline-block}.btn-secondary .spinner{border-color:#40632833;border-top-color:var(--green-dark)}.logout-link{color:var(--text-muted);cursor:pointer;align-items:center;gap:5px;font-size:.8rem;text-decoration:none;transition:color .2s;display:inline-flex}.logout-link:hover{color:var(--green-dark)}.logout-link svg{width:14px;height:14px}.step{animation:.4s ease-out both fadeUp;display:none}.step.active{display:block}@keyframes fadeUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@media (width>=768px){.page-wrapper{padding:16px 24px 64px}.brand{font-size:2.8rem}.card-body{padding:2.5rem 2rem}.plans-grid{flex-direction:row}.plan-card{flex:1}}.success-card{text-align:center}.success-icon{background:#6a9f4b1f;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 24px;animation:.4s ease-out .2s both scaleIn;display:flex}.success-icon svg{width:32px;height:32px;color:var(--green-dark)}.success-card h1{color:var(--green-dark);margin-bottom:12px;font-family:Grape Nuts,cursive;font-size:2rem}.success-card p{color:var(--text-secondary);margin-bottom:28px;font-size:.9rem;line-height:1.6}.qr-section{border-top:1px solid #0000000f;margin-top:28px;padding-top:24px}.qr-section img{width:160px;height:160px;margin:16px auto;display:block}.qr-label{color:var(--text-muted);font-size:.8rem;margin-bottom:0!important}.campaign-banner{color:var(--green-dark);border-radius:var(--radius-sm);background:#6a9f4b1f;margin-bottom:20px;padding:12px 16px;font-size:.85rem;font-weight:600}.step{display:block}.plan-feature-gift{color:var(--green-dark);font-weight:600}button.plan-card{font:inherit;appearance:none;width:100%}.centered-note{text-align:center;color:var(--text-secondary);margin-top:2rem;font-size:.85rem}.centered-note a{color:var(--green-dark);cursor:pointer;font-weight:600;text-decoration:none}
