@import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap";:root{--teal-50:#eff6ff;--teal-100:#dbeafe;--teal-200:#bfdbfe;--teal-400:#60a5fa;--teal-500:#3b82f6;--teal-600:#2563eb;--teal-700:#1d4ed8;--teal-800:#1e40af;--teal-900:#1e3a8a;--slate-50:#f8fafc;--slate-100:#f1f5f9;--slate-200:#e2e8f0;--slate-300:#cbd5e1;--slate-400:#94a3b8;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;--slate-800:#1e293b;--slate-900:#0f172a;--success:#22c55e;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;--font-sans:"DM Sans", sans-serif;--font-mono:"DM Mono", monospace;--radius-sm:6px;--radius:10px;--radius-lg:16px;--radius-xl:24px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow:0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--transition:.15s cubic-bezier(.4,0,.2,1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-sans);background:var(--slate-50);color:var(--slate-800);min-height:100vh;line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{font-family:inherit}img{max-width:100%;display:block}.app-shell{flex-direction:column;min-height:100vh;display:flex}.main-content{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.navbar{border-bottom:1px solid var(--slate-200);z-index:100;height:64px;box-shadow:var(--shadow-sm);background:#fff;justify-content:space-between;align-items:center;padding:0 1.5rem;display:flex;position:sticky;top:0}.navbar-menu-btn{color:var(--slate-600);border-radius:var(--radius-sm);transition:background var(--transition);justify-content:center;align-items:center;padding:.4rem;display:none}.navbar-menu-btn:hover{background:var(--slate-100)}.navbar-mobile-menu{border-bottom:1px solid var(--slate-200);box-shadow:var(--shadow-md);z-index:99;background:#fff;flex-direction:column;gap:.25rem;padding:.5rem .75rem .75rem;display:flex;position:fixed;top:64px;left:0;right:0}.navbar-mobile-menu .nav-link{border-radius:var(--radius-sm);align-items:center;padding:.75rem 1rem;display:flex}.navbar-backdrop{z-index:98;position:fixed;inset:0}.navbar-brand{align-items:center;gap:10px;display:flex}.navbar-logo{background:linear-gradient(135deg, var(--teal-500), var(--teal-700));border-radius:var(--radius);color:#fff;letter-spacing:-.5px;justify-content:center;align-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:flex}.navbar-name{color:var(--slate-800);font-size:15px;font-weight:600}.navbar-name span{color:var(--teal-600)}.navbar-links{align-items:center;gap:.25rem;display:flex}.nav-link{border-radius:var(--radius-sm);color:var(--slate-600);transition:all var(--transition);padding:.4rem .85rem;font-size:14px;font-weight:500}.nav-link:hover{background:var(--slate-100);color:var(--slate-800)}.nav-link.active{background:var(--teal-50);color:var(--teal-700)}.page-header{margin-bottom:2rem}.page-title{color:var(--slate-900);letter-spacing:-.4px;font-size:1.75rem;font-weight:700;line-height:1.2}.page-subtitle{color:var(--slate-500);margin-top:.375rem;font-size:.9375rem}.card{border:1px solid var(--slate-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:#fff;padding:1.75rem}.card-sm{border-radius:var(--radius);padding:1.25rem}.card-flat{box-shadow:none}.modal-backdrop{z-index:200;background:#00000073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0;overflow-y:auto}.modal-card,.modal-card-col{width:100%;max-height:calc(100dvh - 2rem);padding:1.75rem}.modal-card{overflow-y:auto}.modal-card-col{flex-direction:column;display:flex}.card-title{color:var(--slate-800);margin-bottom:1.25rem;font-size:1rem;font-weight:600}.card-divider{border:none;border-top:1px solid var(--slate-100);margin:1.25rem 0}.btn{border-radius:var(--radius);transition:all var(--transition);white-space:nowrap;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.9375rem;font-weight:500;line-height:1;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--teal-600);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){background:var(--teal-700);box-shadow:var(--shadow)}.btn-secondary{color:var(--slate-700);border:1px solid var(--slate-300);background:#fff}.btn-secondary:hover:not(:disabled){background:var(--slate-50);border-color:var(--slate-400)}.btn-ghost{color:var(--slate-600)}.btn-ghost:hover:not(:disabled){background:var(--slate-100);color:var(--slate-800)}.btn-danger{color:var(--error);background:#fef2f2;border:1px solid #fecaca}.btn-danger:hover:not(:disabled){background:#fee2e2}.btn-sm{padding:.4rem .875rem;font-size:.875rem}.btn-lg{padding:.8125rem 1.75rem;font-size:1rem}.btn-full{width:100%}.btn-loading{position:relative}.btn-loading:after{content:"";border:2px solid;border-top-color:#0000;border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin}.form-group{flex-direction:column;gap:.4rem;display:flex}.form-label{color:var(--slate-700);font-size:.875rem;font-weight:500}.form-label .required{color:var(--error);margin-left:2px}.form-input,.form-select{border:1.5px solid var(--slate-300);border-radius:var(--radius);width:100%;color:var(--slate-800);transition:border-color var(--transition), box-shadow var(--transition);background:#fff;outline:none;padding:.625rem .875rem;font-size:.9375rem}.form-input::placeholder{color:var(--slate-400)}.form-input:focus,.form-select:focus{border-color:var(--teal-500);box-shadow:0 0 0 3px #3b82f61f}.form-input.error,.form-select.error{border-color:var(--error)}.form-input.error:focus{box-shadow:0 0 0 3px #ef44441f}.form-hint{color:var(--slate-500);font-size:.8125rem}.form-error{color:var(--error);align-items:center;gap:.25rem;font-size:.8125rem;display:flex}.form-grid-2{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.form-grid-3{grid-template-columns:1fr 1fr 1fr;gap:1rem;display:grid}.field-grid-2{grid-template-columns:1fr 1fr;gap:.9rem;display:grid}.stepper{align-items:center;gap:0;margin-bottom:2.5rem;display:flex}.step{flex:1;align-items:center;display:flex}.step-circle{width:34px;height:34px;transition:all var(--transition);border:2px solid var(--slate-300);color:var(--slate-500);background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.8125rem;font-weight:600;display:flex}.step.active .step-circle{border-color:var(--teal-600);background:var(--teal-600);color:#fff}.step.completed .step-circle{border-color:var(--teal-600);background:var(--teal-50);color:var(--teal-600)}.step-info{margin-left:.625rem}.step-label{text-transform:uppercase;letter-spacing:.05em;color:var(--slate-400);font-size:.75rem;font-weight:600}.step.active .step-label,.step.completed .step-label{color:var(--teal-600)}.step-title{color:var(--slate-600);font-size:.875rem;font-weight:500}.step.active .step-title{color:var(--slate-800);font-weight:600}.step-connector{background:var(--slate-200);flex:1;height:2px;margin:0 .5rem}.step-connector.completed{background:var(--teal-400)}.plan-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.plan-card{border:2px solid var(--slate-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition);background:#fff;padding:1.5rem;position:relative}.plan-card:hover{border-color:var(--teal-400);box-shadow:var(--shadow-md)}.plan-card.selected{border-color:var(--teal-600);background:var(--teal-50);box-shadow:0 0 0 4px #2563eb1a}.plan-card-badge{background:var(--teal-600);color:#fff;text-transform:uppercase;letter-spacing:.06em;border-radius:999px;padding:.2rem .6rem;font-size:.7rem;font-weight:700;position:absolute;top:-10px;right:1rem}.plan-service-tag{text-transform:uppercase;letter-spacing:.06em;color:var(--teal-600);margin-bottom:.5rem;font-size:.75rem;font-weight:600}.plan-name{color:var(--slate-800);margin-bottom:.25rem;font-size:1.0625rem;font-weight:600}.plan-amount{color:var(--slate-900);letter-spacing:-.03em;font-size:1.75rem;font-weight:700}.plan-amount span{color:var(--slate-500);font-size:.9375rem;font-weight:400}.plan-savings{color:var(--success);margin-top:.375rem;font-size:.8125rem;font-weight:500}.plan-trial{color:var(--slate-500);align-items:center;gap:.25rem;margin-top:.5rem;font-size:.8125rem;display:flex}.payment-methods{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-bottom:1.5rem;display:grid}.payment-method-btn{border:2px solid var(--slate-200);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);color:var(--slate-600);background:#fff;flex-direction:column;align-items:center;gap:.5rem;padding:.875rem 1rem;font-size:.875rem;font-weight:500;display:flex}.payment-method-btn:hover{border-color:var(--teal-400);color:var(--teal-700)}.payment-method-btn.selected{border-color:var(--teal-600);background:var(--teal-50);color:var(--teal-700)}.payment-method-icon{letter-spacing:-.3px;border-radius:4px;justify-content:center;align-items:center;width:40px;height:28px;font-size:10px;font-weight:700;display:flex}.pm-icon-card{background:var(--slate-800);color:#fff}.pm-icon-gcash{color:#fff;background:#007dff}.pm-icon-maya{color:#fff;background:#00a94f}.card-visual{background:linear-gradient(135deg, var(--slate-800), var(--slate-700));border-radius:var(--radius-lg);color:#fff;font-family:var(--font-mono);margin-bottom:1.5rem;padding:1.5rem;position:relative;overflow:hidden}.card-visual:before{content:"";background:#ffffff0f;border-radius:50%;width:120px;height:120px;position:absolute;top:-30px;right:-30px}.card-visual:after{content:"";background:#ffffff0a;border-radius:50%;width:160px;height:160px;position:absolute;bottom:-40px;right:30px}.card-chip{background:linear-gradient(135deg,#d4a017,#f0c040);border-radius:5px;width:36px;height:28px;margin-bottom:1.25rem}.card-number-display{letter-spacing:.18em;color:#ffffffe6;margin-bottom:1rem;font-size:1.125rem}.card-footer-row{justify-content:space-between;font-size:.75rem;display:flex}.card-field-label{text-transform:uppercase;letter-spacing:.08em;color:#ffffff80;margin-bottom:.125rem;font-size:.625rem}.card-field-value{color:#ffffffe6;font-size:.875rem}.proration-notice{background:var(--teal-50);border:1px solid var(--teal-200);border-radius:var(--radius);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;display:flex}.proration-icon{color:var(--teal-600);flex-shrink:0;margin-top:2px}.proration-title{color:var(--teal-800);margin-bottom:.25rem;font-size:.875rem;font-weight:600}.proration-text{color:var(--teal-700);font-size:.8125rem;line-height:1.5}.order-summary{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--radius);padding:1.25rem}.summary-row{color:var(--slate-600);justify-content:space-between;align-items:center;padding:.3rem 0;font-size:.9rem;display:flex}.summary-row.total{border-top:1px solid var(--slate-200);color:var(--slate-900);margin-top:.5rem;padding-top:.75rem;font-size:1rem;font-weight:700}.summary-row.today{color:var(--teal-700);font-weight:600}.badge{letter-spacing:.02em;border-radius:999px;align-items:center;gap:.3rem;padding:.2rem .65rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px}.badge-success{color:#166534;background:#dcfce7}.badge-warning{color:#854d0e;background:#fef9c3}.badge-error{color:#991b1b;background:#fee2e2}.badge-neutral{background:var(--slate-100);color:var(--slate-600)}.badge-info{color:#1e40af;background:#dbeafe}.table-wrapper{border-radius:var(--radius-lg);border:1px solid var(--slate-200);overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}thead{background:var(--slate-50)}th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--slate-500);border-bottom:1px solid var(--slate-200);padding:.75rem 1rem;font-size:.75rem;font-weight:600}td{color:var(--slate-700);border-bottom:1px solid var(--slate-100);vertical-align:middle;padding:.875rem 1rem}tbody tr:last-child td{border-bottom:none}tbody tr:hover td{background:var(--slate-50)}.alert{border-radius:var(--radius);align-items:flex-start;gap:.75rem;padding:1rem 1.25rem;font-size:.9rem;display:flex}.alert-success{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.alert-error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.alert-info{color:#1e40af;background:#eff6ff;border:1px solid #bfdbfe}.alert-warning{color:#854d0e;background:#fffbeb;border:1px solid #fde68a}.empty-state{text-align:center;color:var(--slate-400);padding:4rem 2rem}.empty-state-icon{opacity:.5;margin-bottom:1rem;font-size:2.5rem}.empty-state-title{color:var(--slate-600);margin-bottom:.375rem;font-size:1rem;font-weight:600}.empty-state-text{font-size:.875rem}.spinner{border:2px solid var(--slate-200);border-top-color:var(--teal-600);border-radius:50%;flex-shrink:0;width:20px;height:20px;animation:.7s linear infinite spin}.loading-screen{min-height:30vh;color:var(--slate-500);justify-content:center;align-items:center;gap:.75rem;display:flex}.success-screen{text-align:center;max-width:480px;margin:0 auto;padding:3rem 2rem}.success-icon{background:linear-gradient(135deg, var(--teal-500), var(--teal-600));color:#fff;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin:0 auto 1.5rem;animation:.4s cubic-bezier(.175,.885,.32,1.275) pop;display:flex;box-shadow:0 8px 24px #2563eb4d}.success-title{color:var(--slate-900);margin-bottom:.5rem;font-size:1.5rem;font-weight:700}.success-text{color:var(--slate-500);margin-bottom:2rem;line-height:1.6}.interval-toggle{background:var(--slate-100);border-radius:var(--radius);gap:2px;margin-bottom:1.5rem;padding:3px;display:inline-flex}.interval-btn{border-radius:calc(var(--radius) - 2px);color:var(--slate-600);transition:all var(--transition);padding:.45rem 1.1rem;font-size:.875rem;font-weight:500}.interval-btn.active{color:var(--teal-700);box-shadow:var(--shadow-sm);background:#fff;font-weight:600}.ewallet-notice{border:1.5px dashed var(--slate-300);border-radius:var(--radius-lg);text-align:center;color:var(--slate-500);padding:2rem}.ewallet-notice .ewallet-icon{margin-bottom:.75rem;font-size:2.5rem}.ewallet-notice p{font-size:.9rem;line-height:1.5}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:.3s forwards fadeInUp}@media (width<=640px){.main-content{padding:1.25rem 1rem}.navbar{padding:0 1rem}.navbar-links{display:none}.navbar-menu-btn{display:flex}.page-title{font-size:1.375rem}.page-subtitle{font-size:.875rem}.card{padding:1.25rem}.form-grid-2,.form-grid-3,.plan-grid{grid-template-columns:1fr}.stepper .step-info{display:none}.payment-methods{grid-template-columns:repeat(2,1fr)}.card-number-display{letter-spacing:.1em;font-size:.9375rem}.tab-bar{-webkit-overflow-scrolling:touch;scrollbar-width:none;overflow-x:auto}.tab-bar::-webkit-scrollbar{display:none}.tab-bar button{flex-shrink:0}.modal-backdrop{padding:.75rem}.modal-card,.modal-card-col{max-height:calc(100dvh - 1.5rem);padding:1.25rem}.modal-actions{flex-direction:column-reverse!important}.modal-actions .btn{justify-content:center;width:100%}.success-screen{padding:2rem 1rem}.empty-state{padding:2.5rem 1rem}}@media (width<=480px){.field-grid-2,.payment-methods{grid-template-columns:1fr}.page-title{font-size:1.25rem}}