:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;font-weight:400;--primary-color: #2563eb;--primary-dark: #1e40af;--secondary-color: #10b981;--danger-color: #ef4444;--warning-color: #f59e0b;--text-primary: #1f2937;--text-secondary: #6b7280;--bg-light: #f9fafb;--bg-white: #ffffff;--border-color: #e5e7eb;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{font-size:16px}body{margin:0;padding:0;width:100%;min-height:100vh;background-color:var(--bg-light);color:var(--text-primary)}#root{width:100%;min-height:100vh}a{color:var(--primary-color);text-decoration:none}a:hover{color:var(--primary-dark);text-decoration:underline}button{font-family:inherit;cursor:pointer}input,textarea,select{font-family:inherit;font-size:100%}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}.landing{min-height:100vh;background:#f8faff;color:#0f172a;overflow-x:hidden}.landing img{max-width:100%}.hero-copy,.hero-visual,.landing-nav>*,.landing-hero>*,.landing-section>*,.use-case-grid>*,.landing-cta>*,.landing-footer>*{min-width:0}.landing-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;max-width:1240px;margin:0 auto;padding:1rem 1.5rem;background:#f8faffdb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(199,210,254,.65)}.landing-brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 18px #667eea4d;color:#fff;flex:none}.brand-mark svg{width:23px;height:23px}.brand-mark.small{width:34px;height:34px;border-radius:10px}.brand-mark.small svg{width:19px;height:19px}.landing-brand strong{display:block;font-size:1.05rem;line-height:1.2;letter-spacing:-.02em}.landing-brand small{display:block;color:#64748b;font-size:.72rem;font-weight:500;letter-spacing:.02em}.landing-links{display:flex;align-items:center;gap:1.6rem}.landing-links a{color:#475569;font-size:.9rem;font-weight:600;text-decoration:none;transition:color .2s}.landing-links a:hover{color:#4338ca}.landing-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.35rem;border-radius:12px;border:1px solid transparent;font-size:.92rem;font-weight:700;line-height:1;text-decoration:none;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}.landing-btn svg{width:17px;height:17px}.landing-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 12px 24px #667eea47}.landing-btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px #667eea57}.landing-btn.ghost{background:#fff;border-color:#dbe3f7;color:#334155}.landing-btn.ghost:hover{background:#f1f5ff;border-color:#c7d2fe}.landing-btn.light{background:#fff;color:#4338ca;box-shadow:0 12px 26px #0f172a2e}.landing-btn.light:hover{transform:translateY(-2px)}.landing-btn.landing-nav-cta{padding:.7rem 1.1rem;font-size:.85rem;background:#0f172a;color:#fff;white-space:nowrap}.nav-label-short{display:none}.landing-btn.landing-nav-cta:hover{background:#1e293b}.landing-hero{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:3rem;max-width:1240px;margin:0 auto;padding:4.5rem 1.5rem 5rem}.eyebrow{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .7rem;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.eyebrow.light{background:#ffffff29;color:#e0e7ff}.hero-copy h1{max-width:680px;margin:1.1rem 0 1.2rem;font-size:clamp(2.5rem,5vw,4.1rem);line-height:1.03;letter-spacing:-.045em;font-weight:800}.gradient-text{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.hero-copy>p{max-width:590px;color:#475569;font-size:1.08rem;line-height:1.7}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.8rem 0 2.2rem}.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;max-width:560px;padding-top:1.4rem;border-top:1px solid #dbe3f7}.hero-stats strong{display:block;margin-bottom:.25rem;font-size:.95rem;letter-spacing:-.01em}.hero-stats span{color:#64748b;font-size:.8rem}.hero-visual{position:relative;display:flex;justify-content:center}.hero-visual-glow{position:absolute;inset:12% 6% 8%;border-radius:50%;background:radial-gradient(circle,rgba(102,126,234,.28) 0%,rgba(118,75,162,.08) 48%,transparent 72%);filter:blur(18px)}.hero-visual img{position:relative;z-index:1;width:100%;max-width:620px;height:auto;filter:drop-shadow(0 28px 44px rgba(49,46,129,.12))}.landing-section{max-width:1240px;margin:0 auto;padding:4.5rem 1.5rem}.landing-section.alt{max-width:none;background:#fff;border-top:1px solid #eef2ff;border-bottom:1px solid #eef2ff}.landing-section.alt .section-intro,.landing-section.alt .steps-grid{max-width:1240px;margin-left:auto;margin-right:auto}.section-intro{max-width:720px;margin:0 auto 2.6rem;text-align:center}.section-intro h2{margin:1rem 0 .8rem;font-size:clamp(1.8rem,3.4vw,2.75rem);line-height:1.1;letter-spacing:-.035em}.section-intro p{color:#64748b;font-size:1rem;line-height:1.7}.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}.feature-card{padding:1.5rem;border:1px solid #e5ebf8;border-radius:18px;background:#fff;box-shadow:0 12px 30px #312e810a;transition:transform .2s,box-shadow .2s,border-color .2s}.feature-card:hover{transform:translateY(-4px);border-color:#c7d2fe;box-shadow:0 18px 34px #312e8114}.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:1.1rem;border-radius:13px;background:#eef2ff;color:#4f46e5}.feature-icon svg{width:23px;height:23px}.feature-card h3{margin-bottom:.5rem;font-size:1.05rem;letter-spacing:-.01em}.feature-card p{color:#64748b;font-size:.9rem;line-height:1.65}.steps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}.step-card{position:relative;padding:1.5rem;border-radius:18px;background:#f8faff;border:1px solid #e5ebf8}.step-number{display:inline-block;margin-bottom:1.4rem;font-size:1.9rem;font-weight:800;line-height:1;letter-spacing:-.04em;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.step-card h3{margin-bottom:.45rem;font-size:1rem}.step-card p{color:#64748b;font-size:.88rem;line-height:1.6}.use-case-grid{display:grid;grid-template-columns:.95fr 1.05fr;align-items:center;gap:3rem}.use-case-copy h2{margin:1rem 0 .9rem;font-size:clamp(1.8rem,3.4vw,2.65rem);line-height:1.1;letter-spacing:-.035em}.use-case-copy p{color:#64748b;font-size:1rem;line-height:1.7;margin-bottom:1.4rem}.use-case-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.use-case-item{display:flex;gap:.8rem;padding:1.1rem;border:1px solid #e5ebf8;border-radius:16px;background:#fff}.use-case-check{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#ecfdf5;color:#059669;flex:none}.use-case-check svg{width:15px;height:15px}.use-case-item h3{margin-bottom:.25rem;font-size:.95rem}.use-case-item p{color:#64748b;font-size:.82rem;line-height:1.55}.landing-cta{display:flex;align-items:center;justify-content:space-between;gap:2rem;max-width:1240px;margin:0 auto 4.5rem;padding:2.6rem 3rem;border-radius:26px;background:linear-gradient(135deg,#4f46e5,#7c3aed 62%,#9333ea);color:#fff;box-shadow:0 24px 50px #4f46e542}.landing-cta h2{margin:.8rem 0 .4rem;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;letter-spacing:-.035em}.landing-cta p{color:#e0e7ff;font-size:.95rem}.landing-footer{display:grid;grid-template-columns:1fr auto;gap:2rem;max-width:1240px;margin:0 auto;padding:2.8rem 1.5rem 2rem;border-top:1px solid #dbe3f7}.footer-brand{display:flex;gap:.8rem;align-items:flex-start}.footer-brand strong{font-size:.98rem}.footer-brand p{max-width:360px;margin-top:.3rem;color:#64748b;font-size:.83rem;line-height:1.6}.footer-links{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-end;gap:.7rem 1.4rem}.footer-links a{color:#475569;font-size:.83rem;font-weight:600;text-decoration:none}.footer-links a:hover{color:#4338ca}.footer-bottom{grid-column:1 / -1;display:flex;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid #e5ebf8;color:#94a3b8;font-size:.76rem}@media(max-width:1040px){.landing-links{gap:1rem}.landing-hero{grid-template-columns:1fr;gap:2rem;padding-top:3.2rem;text-align:center}.hero-copy>p,.hero-stats{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.hero-visual img{max-width:540px}.feature-grid,.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.use-case-grid{grid-template-columns:1fr;gap:2rem}}@media(max-width:760px){.landing-nav{padding:.9rem 1rem}.landing-links,.landing-brand small{display:none}.landing-btn.landing-nav-cta{padding:.65rem .85rem;font-size:.78rem}.nav-label-full{display:none}.nav-label-short{display:inline}.landing-hero{padding:2.6rem 1rem 3.5rem}.hero-visual img{max-width:100%}.hero-stats{grid-template-columns:1fr;gap:.8rem;text-align:left;max-width:360px}.landing-section{padding:3.2rem 1rem}.feature-grid,.steps-grid,.use-case-list{grid-template-columns:1fr}.landing-cta{flex-direction:column;align-items:flex-start;margin:0 1rem 3.2rem;padding:2rem 1.5rem}.landing-footer{grid-template-columns:1fr;padding:2.2rem 1rem 1.6rem}.footer-links{justify-content:flex-start}.footer-bottom{flex-direction:column;gap:.4rem}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem}.login-box{background:#fff;padding:2.5rem;border-radius:10px;box-shadow:0 10px 40px #0003;width:100%;max-width:420px}.login-header{text-align:center;margin-bottom:2rem}.login-header h1{color:#333;margin:0 0 .5rem;font-size:1.75rem}.login-header p{color:#666;margin:0}.login-form,.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;transition:border-color .3s}.form-group input:focus{outline:none;border-color:#667eea}.error-message{background:#fee;color:#c33;padding:.75rem;border-radius:5px;margin-bottom:1rem;font-size:.9rem}.login-btn{width:100%;padding:.875rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s}.login-btn:hover:not(:disabled){transform:translateY(-2px)}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-home-link{text-align:center;padding-top:1.25rem;border-top:1px solid #eee}.login-home-link a{color:#667eea;font-size:.88rem;font-weight:600;text-decoration:none}.login-home-link a:hover{text-decoration:underline}.login-footer{text-align:center;padding-top:1.5rem;border-top:1px solid #eee}.login-footer p{margin:.25rem 0;font-size:.85rem;color:#666}.login-footer strong{color:#333}@media(max-width:768px){.login-container{padding:1rem}.login-box{width:100%;max-width:none;padding:2rem 1.5rem}.login-header h1{font-size:1.5rem}.login-header p{font-size:.9rem}}@media(max-width:480px){.login-box{padding:1.5rem 1rem}.login-header h1{font-size:1.25rem}.form-group input{font-size:16px}}.dashboard{width:100%;max-width:none}.page-header h1{margin:0;color:#333}.period-select{padding:.5rem 1rem;border:1px solid #ddd;border-radius:5px;font-size:.9rem;cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-bottom:2rem}@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}.stat-card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:1rem;min-width:0;transition:transform .2s}.stat-content{min-width:0}.stat-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px #00000026}.stat-icon{font-size:2.5rem}.stat-content h3{margin:0 0 .5rem;font-size:.9rem;color:#666;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:2rem;font-weight:700;margin:0;color:#333}.stat-content small{color:#999;font-size:.85rem}.stat-card.primary{border-left:4px solid #667eea}.stat-card.success{border-left:4px solid #10b981}.stat-card.info{border-left:4px solid #3b82f6}.stat-card.warning{border-left:4px solid #f59e0b}.stat-card.secondary{border-left:4px solid #8b5cf6}.stat-card.accent{border-left:4px solid #ec4899}.breakdown-section{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px #0000001a;margin-bottom:2rem}.breakdown-section h2{margin:0 0 1rem;color:#333}.breakdown-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem}.breakdown-card{background:#f9fafb;padding:1rem;border-radius:8px;text-align:center}.breakdown-card h4{margin:0 0 .5rem;color:#667eea;text-transform:capitalize}.breakdown-count{font-size:1.5rem;font-weight:700;margin:0 0 .25rem;color:#333}.recent-transactions{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px #0000001a}.recent-transactions h2{margin:0 0 1rem;color:#333}.transactions-list{display:flex;flex-direction:column;gap:.75rem}.transaction-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f9fafb;border-radius:8px}.transaction-info{display:flex;flex-direction:column;gap:.25rem}.txn-type{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;width:fit-content}.txn-type.topup{background:#d1fae5;color:#065f46}.txn-type.deduction{background:#fee2e2;color:#991b1b}.txn-desc{color:#666;font-size:.9rem}.transaction-amount{text-align:right;display:flex;flex-direction:column;gap:.25rem}.transaction-amount span{font-size:1.1rem;font-weight:700}.transaction-amount .positive{color:#10b981}.transaction-amount .negative{color:#ef4444}.transaction-amount small{color:#999;font-size:.8rem}.loading{text-align:center;padding:3rem;color:#666}.no-data{text-align:center;padding:2rem;color:#999}@media(max-width:768px){.stats-grid{grid-template-columns:1fr}.page-header{flex-direction:column;gap:1rem;align-items:flex-start}}@media(max-width:768px){.dashboard{padding:1rem}.dashboard h1{font-size:1.5rem}.stats-grid{grid-template-columns:1fr;gap:1rem}.stat-card{padding:1.25rem}.stat-value{font-size:1.75rem}.activity-section{padding:1.25rem}}@media(max-width:480px){.dashboard{padding:.5rem}.dashboard h1{font-size:1.25rem}.stat-card{padding:1rem}.stat-value{font-size:1.5rem}.stat-label{font-size:.85rem}}.customers-page{max-width:1400px}.customer-count{font-size:1rem;color:#666;font-weight:400;margin-left:.5rem}.btn-small{padding:.5rem 1rem;font-size:.9rem;white-space:nowrap}.filters{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.status-select{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.search-input{flex:1;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem}.group-select{padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;min-width:200px}.customers-table{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.status-badge{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:600}.status-badge.active{background:#d1fae5;color:#065f46}.status-badge.inactive{background:#fee2e2;color:#991b1b}.btn-icon{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.25rem .5rem;transition:transform .2s}.btn-icon:hover{transform:scale(1.2)}.btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;font-weight:600;cursor:pointer;transition:transform .2s}.btn-primary:hover{transform:translateY(-2px)}.btn-secondary{padding:.75rem 1.5rem;background:#f3f4f6;color:#333;border:1px solid #d1d5db;border-radius:5px;font-weight:600;cursor:pointer}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:#fff;border-radius:10px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e5e7eb}.modal-header h2{margin:0}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#999;line-height:1}.modal-form{padding:1.5rem}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;padding-top:1rem;border-top:1px solid #e5e7eb}@media(max-width:768px){.filters{flex-direction:column}.customers-table{overflow-x:auto}table{min-width:600px}}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:2rem;padding:1rem}.page-info{font-size:.9rem;color:#666}.pagination button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.page-header{flex-direction:column;align-items:flex-start;gap:1rem}.page-header h1{font-size:1.5rem}.btn-primary{width:100%}.filters{flex-direction:column}.search-input,.group-select,.status-select{width:100%}.table-container{overflow-x:auto}table{min-width:600px}.pagination{flex-direction:column;gap:.5rem}.pagination button{width:100%}}@media(max-width:480px){.page-header h1{font-size:1.25rem}.customer-count,table{font-size:.85rem}th,td{padding:.5rem}}.send-sms-page{max-width:1400px}.sms-container{display:grid;grid-template-columns:1fr 400px;gap:2rem}.sms-form-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 2px 8px #0000001a}.form-group textarea{resize:vertical}.message-info{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.85rem;color:#666}.btn-full{width:100%;padding:1rem;font-size:1.1rem}.result-message{margin-top:1.5rem;padding:1rem;border-radius:5px}.result-message.success{background:#d1fae5;color:#065f46;border:1px solid #10b981}.result-message.error{background:#fee2e2;color:#991b1b;border:1px solid #ef4444}.result-message p{margin:0 0 .5rem;font-weight:600}.result-details{font-size:.9rem;opacity:.9}.result-details p{margin:.25rem 0;font-weight:400}.warning-message{margin-top:1rem;padding:.75rem;background:#fef3c7;color:#92400e;border:1px solid #f59e0b;border-radius:5px;font-size:.9rem}.info-panel{display:flex;flex-direction:column;gap:1.5rem}.info-card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px #0000001a}.info-card h3{margin:0 0 1rem;color:#333;font-size:1rem}.info-card ul{margin:0;padding-left:1.25rem}.info-card li{margin-bottom:.5rem;color:#666;font-size:.9rem}.balance-amount{font-size:2rem;font-weight:700;color:#667eea;margin:.5rem 0}.info-card small{color:#999}@media(max-width:1024px){.sms-container{grid-template-columns:1fr}.info-panel{flex-direction:row;flex-wrap:wrap}.info-card{flex:1;min-width:250px}}@media(max-width:768px){.info-panel{flex-direction:column}}@media(max-width:768px){.send-sms-container{padding:1rem}.send-sms-card{padding:1.25rem}h1{font-size:1.5rem}.form-row{flex-direction:column}.form-group{width:100%}.message-info{flex-direction:column;align-items:flex-start;gap:.5rem}.tips{padding:1rem}}@media(max-width:480px){.send-sms-container{padding:.5rem}.send-sms-card{padding:1rem}h1{font-size:1.25rem}input,select,textarea{font-size:16px}}.template-builder{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a;margin-bottom:1.5rem}.template-header h3{margin:0 0 .5rem;color:#1f2937;font-size:1.25rem}.template-description{margin:0 0 1.5rem;color:#6b7280;font-size:.95rem}.merge-fields-section{margin-bottom:1.5rem}.merge-fields-label{display:block;margin-bottom:.75rem;color:#374151;font-size:.95rem}.merge-fields-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem}.merge-field-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.merge-field-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #667eea4d}.merge-field-btn:active{transform:translateY(0)}.merge-field-icon{font-size:1rem;font-weight:700}.message-input-section{margin-bottom:1.5rem}.message-input-section label{display:block;margin-bottom:.5rem;color:#374151;font-size:.95rem}.template-textarea{width:100%;padding:.75rem;border:2px solid #e5e7eb;border-radius:6px;font-family:inherit;font-size:1rem;line-height:1.5;resize:vertical;transition:border-color .2s}.template-textarea:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.template-textarea::placeholder{color:#9ca3af}.character-count{display:flex;justify-content:space-between;margin-top:.5rem;font-size:.875rem;color:#6b7280}.character-count .warning{color:#f59e0b;font-weight:600}.sms-count{color:#6b7280}.template-tips{background:#f9fafb;border-left:4px solid #667eea;padding:1rem;border-radius:4px;margin-bottom:1rem}.template-tips h4{margin:0 0 .5rem;color:#374151;font-size:.95rem}.template-tips ul{margin:0;padding-left:1.5rem}.template-tips li{margin-bottom:.25rem;color:#6b7280;font-size:.875rem}.preview-btn{width:100%;padding:.75rem 1.5rem;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.preview-btn:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.preview-btn:active{transform:translateY(0)}@media(max-width:768px){.merge-fields-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.4rem}.merge-field-btn{padding:.4rem .6rem;font-size:.8rem}.template-builder{padding:1rem}}@media(max-width:768px){.template-builder{padding:1rem}.merge-fields{flex-wrap:wrap;gap:.5rem}.merge-field-btn{padding:.4rem .8rem;font-size:.85rem}.char-counter{flex-direction:column;align-items:flex-start;gap:.25rem}.tips{padding:1rem}.tips li{font-size:.85rem}}@media(max-width:480px){.template-builder textarea{font-size:16px}.merge-field-btn{padding:.35rem .6rem;font-size:.8rem}}.preview-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}.preview-modal{background:#fff;border-radius:12px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e5e7eb}.preview-header h3{margin:0;color:#1f2937;font-size:1.25rem}.close-btn{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close-btn:hover{background:#f3f4f6;color:#1f2937}.preview-info{padding:1rem 1.5rem;background:#f9fafb;border-bottom:1px solid #e5e7eb}.preview-info p{margin:0;color:#6b7280;font-size:.95rem}.preview-navigation{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #e5e7eb}.nav-btn{padding:.5rem 1rem;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){background:#5568d3}.nav-btn:disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}.preview-counter{font-weight:600;color:#374151}.preview-content{padding:1.5rem}.preview-recipient{background:#f9fafb;padding:1rem;border-radius:8px;margin-bottom:1rem}.recipient-info,.recipient-phone{margin-bottom:.5rem;color:#374151;font-size:.95rem}.recipient-info:last-child,.recipient-phone:last-child{margin-bottom:0}.preview-message{margin-top:1rem}.message-label{font-weight:600;color:#374151;margin-bottom:.5rem}.message-bubble{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem;border-radius:12px;font-size:1rem;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.message-stats{margin-top:.5rem;font-size:.875rem;color:#6b7280;text-align:right}.preview-all-samples{padding:1.5rem;background:#f9fafb;border-top:1px solid #e5e7eb}.preview-all-samples h4{margin:0 0 1rem;color:#374151;font-size:1rem}.samples-list{display:flex;flex-direction:column;gap:.75rem}.sample-item{background:#fff;padding:.75rem;border-radius:6px;border:2px solid #e5e7eb;cursor:pointer;transition:all .2s}.sample-item:hover{border-color:#667eea}.sample-item.active{border-color:#667eea;background:#f0f4ff}.sample-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.sample-header strong{color:#1f2937;font-size:.9rem}.sample-phone{color:#6b7280;font-size:.85rem}.sample-message{color:#4b5563;font-size:.875rem;line-height:1.4}.preview-actions{display:flex;gap:1rem;padding:1.5rem;border-top:1px solid #e5e7eb}.btn-secondary{flex:1;padding:.75rem 1.5rem;background:#fff;color:#374151;border:2px solid #e5e7eb;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#f9fafb;border-color:#d1d5db}.btn-primary{flex:2;padding:.75rem 1.5rem;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 12px #10b9814d}.btn-primary:active{transform:translateY(0)}@media(max-width:768px){.preview-modal{max-height:95vh;margin:0;border-radius:12px 12px 0 0}.preview-navigation{flex-direction:column;gap:.5rem}.nav-btn{width:100%}.preview-actions{flex-direction:column}}@media(max-width:768px){.preview-modal{padding:1rem}.preview-content{width:95%;max-width:none;max-height:90vh;padding:1rem}.preview-header h2{font-size:1.25rem}.preview-summary{flex-direction:column;gap:.5rem}.preview-list{max-height:300px}.preview-item{padding:.75rem}.preview-actions{flex-direction:column}.preview-actions button{width:100%}}@media(max-width:480px){.preview-content{width:100%;height:100vh;max-height:100vh;border-radius:0}.preview-header h2{font-size:1.1rem}.preview-item{font-size:.85rem}}.bulk-sms-page{max-width:1400px}.tabs{display:flex;gap:.5rem;margin-bottom:2rem}.tab{padding:.875rem 1.5rem;background:#fff;border:2px solid #e5e7eb;border-radius:8px 8px 0 0;color:#666;font-weight:600;cursor:pointer;transition:all .3s}.tab.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#667eea}.bulk-container{display:grid;grid-template-columns:1fr 350px;gap:2rem}.bulk-form-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 2px 8px #0000001a}.selection-actions{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}.btn-small{padding:.5rem 1rem;background:#f3f4f6;border:1px solid #d1d5db;border-radius:5px;font-size:.85rem;cursor:pointer;transition:background .2s}.btn-small:hover{background:#e5e7eb}.selection-count{margin-left:auto;font-size:.9rem;color:#667eea;font-weight:600}.customer-list{max-height:300px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:5px;padding:.5rem}.customer-checkbox{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-bottom:1px solid #f3f4f6;cursor:pointer;transition:background .2s}.customer-checkbox:hover{background:#f9fafb}.customer-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.customer-info{display:flex;flex-direction:column;gap:.25rem}.customer-info strong{color:#333}.customer-info small{color:#666;font-size:.85rem}.cost-highlight{font-weight:700;color:#667eea}@media(max-width:1024px){.bulk-container{grid-template-columns:1fr}}@media(max-width:768px){.bulk-sms-page{padding:1rem}.page-header h1{font-size:1.5rem}.recipient-options{flex-direction:column}.option-card,.submit-btn{width:100%}}@media(max-width:480px){.bulk-sms-page{padding:.5rem}.page-header h1{font-size:1.25rem}textarea{font-size:16px}}.batch-upload-page{max-width:1400px}.batch-upload-page .page-header p{color:#6b7280;margin-top:.35rem}.batch-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}.batch-card{background:#fff;padding:1.5rem;border-radius:10px;box-shadow:0 2px 8px #00000014;margin-bottom:1.5rem}.batch-card h2{font-size:1.15rem;margin-bottom:1rem;color:#333}.muted{color:#6b7280;font-size:.9rem}.warning-text{color:#b91c1c;font-weight:600;font-size:.9rem;margin-top:.5rem}.file-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;padding:2rem 1rem;border:2px dashed #c7d2fe;border-radius:10px;background:#f8faff;color:#4c51bf;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}.file-drop:hover{border-color:#667eea;background:#eef2ff}.file-drop.busy{opacity:.7;cursor:progress}.file-drop input{display:none}.file-drop-icon{font-size:1.8rem}.file-summary{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.75rem 1rem;background:#f9fafb;border-radius:8px;font-size:.9rem}.sheet-list{display:flex;flex-direction:column;gap:.6rem;max-height:280px;overflow-y:auto}.sheet-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;text-align:left;border:1px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;font-size:.95rem}.sheet-item:hover{border-color:#a5b4fc}.sheet-item.active{border-color:#667eea;background:#eef2ff;box-shadow:inset 3px 0 #667eea}.sheet-name{font-weight:600;color:#333;word-break:break-word}.sheet-count{color:#6b7280;font-size:.85rem;white-space:nowrap}.section-heading{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}.section-heading h2{margin-bottom:0}.mapping-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end}.mapping-grid .form-group{margin-bottom:0}.checkbox-group label{display:flex;align-items:center;gap:.5rem;font-weight:500}.checkbox-group input{width:auto}.preview-table-wrap{margin-top:1.25rem;overflow-x:auto;border:1px solid #e5e7eb;border-radius:8px}.preview-table{min-width:100%;font-size:.88rem}.preview-table th,.preview-table td{padding:.6rem .75rem;white-space:nowrap}.preview-table .mapped-column{background:#eef2ff;font-weight:600;color:#3730a3}.batch-card textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:8px;font-family:inherit;font-size:1rem;resize:vertical}.merge-fields{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem}.merge-btn{padding:.4rem .7rem;border:1px solid #c7d2fe;border-radius:999px;background:#eef2ff;color:#3730a3;font-size:.82rem;font-weight:600;cursor:pointer}.merge-btn:hover{background:#e0e7ff}.message-meta{display:flex;flex-wrap:wrap;gap:1rem;margin:.6rem 0;color:#6b7280;font-size:.85rem}.send-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin-top:1rem}.progress-wrap{margin-top:1rem}.progress-bar{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(135deg,#667eea,#764ba2);transition:width .25s ease}.alert{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.9rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.92rem}.alert-error{background:#fee2e2;color:#991b1b}.alert-success{background:#d1fae5;color:#065f46}.alert-close{background:transparent;border:none;font-size:1.2rem;line-height:1;cursor:pointer;color:inherit}@media(max-width:900px){.batch-grid,.mapping-grid{grid-template-columns:1fr}.section-heading{flex-direction:column;align-items:flex-start;gap:.25rem}}.sms-logs-page{max-width:1400px}.filters-section{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:1rem;margin-bottom:1.5rem}.search-input,.filter-select,.date-input{padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:.95rem}.logs-table{background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a;overflow-x:auto}.date-cell{font-size:.85rem;color:#666;white-space:nowrap}.message-cell{max-width:300px}.message-preview{color:#666;font-size:.9rem}.type-badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;background:#f3f4f6;color:#666;text-transform:capitalize}.credits-cell{font-weight:600;color:#667eea}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem;padding:1rem;background:#fff;border-radius:8px}.pagination-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;cursor:pointer;font-weight:600}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{color:#666;font-size:.9rem}@media(max-width:1024px){.filters-section{grid-template-columns:1fr 1fr}}@media(max-width:768px){.filters-section{grid-template-columns:1fr}.logs-table table{min-width:800px}}@media(max-width:768px){.sms-logs-page{padding:1rem}.page-header h1{font-size:1.5rem}.filters-section{flex-direction:column}.filter-group{width:100%}.logs-table-container{overflow-x:auto}table{min-width:700px;font-size:.85rem}th,td{padding:.5rem}}@media(max-width:480px){.sms-logs-page{padding:.5rem}.page-header h1{font-size:1.25rem}table{font-size:.8rem}.message-preview{max-width:150px}}.profile-page{max-width:800px}.profile-container{margin-top:2rem}.profile-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 2px 8px #0000001a}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid #f3f4f6}.card-header h2{margin:0;color:#333}.profile-info{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.info-item label{display:block;font-size:.85rem;color:#666;margin-bottom:.25rem;text-transform:uppercase;letter-spacing:.5px}.info-item p{margin:0;font-size:1.1rem;color:#333;font-weight:500}.info-item .balance{font-size:1.5rem;font-weight:700;color:#667eea}.message{padding:1rem;border-radius:5px;margin-bottom:1.5rem}.message.success{background:#d1fae5;color:#065f46;border:1px solid #10b981}.message.error{background:#fee2e2;color:#991b1b;border:1px solid #ef4444}.form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}@media(max-width:768px){.profile-info{grid-template-columns:1fr}.card-header{flex-direction:column;gap:1rem;align-items:flex-start}}@media(max-width:768px){.profile-page{padding:1rem}.profile-grid{grid-template-columns:1fr}.profile-card{padding:1.25rem}.profile-header h1{font-size:1.5rem}}@media(max-width:480px){.profile-page{padding:.5rem}.profile-card{padding:1rem}.profile-header h1{font-size:1.25rem}}.layout{display:flex;width:100%;min-height:100vh;background-color:#f5f5f5}.sidebar{width:260px;flex:none;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;flex-direction:column;box-shadow:2px 0 10px #0000001a}.sidebar-header{padding:2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}.sidebar-header h2{margin:0 0 1rem;font-size:1.5rem}.company-info p{margin:0 0 .5rem;font-size:.9rem;opacity:.9}.credit-badge{background:#fff3;padding:.5rem 1rem;border-radius:20px;font-size:.85rem;font-weight:600;text-align:center}.nav-menu{list-style:none;padding:1rem 0;margin:0;flex:1}.nav-menu li{margin:.25rem 0}.nav-menu a{display:flex;align-items:center;padding:.875rem 1.5rem;color:#fffc;text-decoration:none;transition:all .3s}.nav-menu a:hover{background:#ffffff1a;color:#fff}.nav-menu a.active{background:#fff3;color:#fff;border-left:4px solid white}.nav-menu .icon{margin-right:.75rem;font-size:1.2rem}.sidebar-footer{padding:1.5rem;border-top:1px solid rgba(255,255,255,.1)}.logout-btn{width:100%;padding:.75rem;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:5px;cursor:pointer;font-size:1rem;transition:all .3s}.logout-btn:hover{background:#fff3}.main-content{flex:1;min-width:0;overflow-y:auto;padding:2rem 1.5rem}@media(max-width:768px){.sidebar{width:100%;height:auto;position:fixed;bottom:0;z-index:100}.main-content{padding:1rem;margin-bottom:60px}}@media(max-width:768px){.layout{flex-direction:column}.sidebar{width:100%;height:auto;position:static}.sidebar-header{padding:1rem}.sidebar-header h2{font-size:1.2rem}.menu-item{padding:.75rem 1rem;font-size:.9rem}.main-content{padding:1rem}.header{padding:1rem;flex-direction:column;gap:.5rem;align-items:flex-start}.user-info{font-size:.85rem}}@media(max-width:480px){.sidebar-header h2{font-size:1rem}.menu-item{padding:.6rem .8rem;font-size:.85rem}.main-content{padding:.5rem}}.mobile-menu-toggle{display:none;position:fixed;top:1rem;left:1rem;z-index:1001;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1rem;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px #0003;font-size:1.5rem;line-height:1}.mobile-menu-toggle:hover{box-shadow:0 4px 12px #0000004d}.hamburger-icon{display:block}.mobile-close-btn{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:.5rem;line-height:1}.mobile-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:999;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media(max-width:768px){.mobile-menu-toggle,.mobile-close-btn,.mobile-overlay{display:block}.sidebar{position:fixed;left:0;top:0;height:100vh;z-index:1000;transform:translate(-100%);transition:transform .3s ease-in-out;box-shadow:2px 0 20px #0000004d}.sidebar.mobile-open{transform:translate(0)}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem}.main-content{margin-left:0;padding:4rem 1rem 1rem}.header{padding:1rem}}@media(max-width:480px){.sidebar{width:80%}.main-content{padding:4rem .5rem .5rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.loading{text-align:center;padding:3rem;color:#666;font-size:1.1rem}.no-data{text-align:center;padding:3rem;color:#999;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000001a}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.page-header h1{margin:0;color:#333;font-size:2rem}.btn-primary{padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:5px;font-weight:600;cursor:pointer;transition:transform .2s;font-size:1rem}.btn-primary:hover:not(:disabled){transform:translateY(-2px)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{padding:.75rem 1.5rem;background:#f3f4f6;color:#333;border:1px solid #d1d5db;border-radius:5px;font-weight:600;cursor:pointer;font-size:1rem}.btn-secondary:hover{background:#e5e7eb}.status-badge{padding:.25rem .75rem;border-radius:12px;font-size:.85rem;font-weight:600;display:inline-block}.status-badge.active,.status-badge.success{background:#d1fae5;color:#065f46}.status-badge.inactive,.status-badge.error{background:#fee2e2;color:#991b1b}.status-badge.pending,.status-badge.warning{background:#fef3c7;color:#92400e}.status-badge.default{background:#f3f4f6;color:#666}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#333}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid #ddd;border-radius:5px;font-size:1rem;font-family:inherit}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#667eea}table{width:100%;border-collapse:collapse}thead{background:#f9fafb}th{padding:1rem;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #e5e7eb}td{padding:1rem;border-bottom:1px solid #e5e7eb}tbody tr:hover{background:#f9fafb}@media(max-width:768px){body{font-size:14px}h1{font-size:1.5rem}h2{font-size:1.25rem}h3{font-size:1.1rem}button{padding:.75rem 1.5rem;font-size:.9rem}input,select,textarea{font-size:16px}.btn-primary,.btn-secondary,.submit-btn{width:100%;margin-top:.5rem}.modal-content{width:95%;max-width:none;margin:1rem;padding:1rem}table{display:block;overflow-x:auto;white-space:nowrap}}@media(max-width:480px){body{font-size:13px}h1{font-size:1.25rem}h2{font-size:1.1rem}button{padding:.6rem 1rem;font-size:.85rem}}@media(hover:none){button,a,.clickable{min-height:44px;min-width:44px}}