:root{--color-white:#fff;--color-black:#000;--color-primary:#3b82f6;--color-primary-light:#60a5fa;--color-primary-dark:#2563eb;--color-primary-focus:rgba(59,130,246,.2);--color-secondary:#6b7280;--color-secondary-light:#9ca3af;--color-secondary-dark:#4b5563;--color-secondary-focus:hsla(220,9%,46%,.2);--color-success:#10b981;--color-success-light:#34d399;--color-success-dark:#059669;--color-success-focus:rgba(16,185,129,.2);--color-warning:#f59e0b;--color-warning-light:#fbbf24;--color-warning-dark:#d97706;--color-warning-focus:rgba(245,158,11,.2);--color-danger:#ef4444;--color-danger-light:#f87171;--color-danger-dark:#dc2626;--color-danger-focus:rgba(239,68,68,.2);--color-info:#06b6d4;--color-info-light:#22d3ee;--color-info-dark:#0891b2;--color-info-focus:rgba(6,182,212,.2);--color-primary-50:#eff6ff;--color-primary-100:#dbeafe;--color-primary-600:#2563eb;--color-primary-700:#1d4ed8;--color-success-50:#ecfdf5;--color-success-100:#d1fae5;--color-success-600:#059669;--color-success-700:#047857;--color-danger-50:#fef2f2;--color-danger-100:#fee2e2;--color-danger-600:#dc2626;--color-danger-700:#b91c1c;--color-warning-50:#fffbeb;--color-warning-100:#fef3c7;--color-warning-600:#d97706;--color-warning-700:#b45309;--color-info-50:#f0f9ff;--color-info-100:#e0f2fe;--color-info-600:#0891b2;--color-info-700:#0e7490;--color-gray-25:#fcfcfd;--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-text-primary:var(--color-gray-900);--color-text-secondary:var(--color-gray-600);--color-text-tertiary:var(--color-gray-500);--color-text-placeholder:var(--color-gray-400);--color-text-disabled:var(--color-gray-400);--color-text-inverse:var(--color-white);--color-background:var(--color-white);--color-background-secondary:var(--color-gray-50);--color-background-tertiary:var(--color-gray-100);--color-background-disabled:var(--color-gray-100);--color-background-overlay:rgba(0,0,0,.5);--color-border:var(--color-gray-300);--color-border-light:var(--color-gray-200);--color-border-dark:var(--color-gray-400);--color-border-focus:var(--color-primary);--space-px:1px;--space-0:0;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;--font-family-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-family-mono:"SF Mono",Monaco,Inconsolata,"Roboto Mono",Consolas,"Courier New",monospace;--font-size-xs:0.75rem;--font-size-sm:0.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.75;--border-radius:0.375rem;--border-radius-sm:0.25rem;--border-radius-md:0.5rem;--border-radius-lg:0.75rem;--border-radius-xl:1rem;--border-radius-full:9999px;--shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);--shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06);--shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);--transition-fast:0.15s ease-in-out;--transition-normal:0.3s ease-in-out;--transition-slow:0.5s ease-in-out;--z-skip-link:10000;--z-dropdown:1000;--z-index-dropdown:1000;--z-index-sticky:1020;--z-index-fixed:1030;--z-index-modal-backdrop:1040;--z-modal:1050;--z-index-modal:1050;--z-index-popover:1060;--z-index-tooltip:1070;--z-toast:1080;--z-index-toast:1080;--breakpoint-sm:640px;--breakpoint-md:768px;--breakpoint-lg:1024px;--breakpoint-xl:1280px;--breakpoint-2xl:1536px}[data-theme=dark]{--color-text-primary:var(--color-gray-100);--color-text-secondary:var(--color-gray-300);--color-text-tertiary:var(--color-gray-400);--color-text-placeholder:var(--color-gray-500);--color-text-disabled:var(--color-gray-600);--color-background:var(--color-gray-900);--color-background-secondary:var(--color-gray-800);--color-background-tertiary:var(--color-gray-700);--color-background-disabled:var(--color-gray-800);--color-border:var(--color-gray-600);--color-border-light:var(--color-gray-700);--color-border-dark:var(--color-gray-500)}@media (prefers-contrast:high){:root{--color-border:var(--color-black);--color-text-secondary:var(--color-black)}[data-theme=dark]{--color-border:var(--color-white);--color-text-secondary:var(--color-white)}}@media (prefers-reduced-motion:reduce){:root{--transition-fast:none;--transition-normal:none;--transition-slow:none}}.sr-only{height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;clip:rect(0,0,0,0)!important;border:0!important;white-space:nowrap!important}.focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.focus-visible-inset{outline:2px solid var(--color-primary);outline-offset:-2px}.skip-link{background:var(--color-primary);border-radius:var(--border-radius);color:#fff;font-weight:var(--font-weight-medium);left:6px;padding:8px;position:absolute;text-decoration:none;top:-40px;transition:top var(--transition-fast);z-index:var(--z-skip-link)}.skip-link:focus{top:6px}@media (prefers-contrast:high){.focus-visible,.focus-visible-inset{outline:3px solid var(--color-primary)}.skip-link{border:2px solid #fff}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.skip-link{transition:none}}.touch-target{min-height:44px;min-width:44px}.interactive-element{background-color:var(--color-background);color:var(--color-text-primary)}.interactive-element:hover{background-color:var(--color-gray-50)}.interactive-element:focus{outline:2px solid var(--color-primary);outline-offset:2px}.interactive-element:active{background-color:var(--color-gray-100)}.error-text{color:var(--color-danger);font-weight:var(--font-weight-medium)}.error-border{border-color:var(--color-danger)}.error-background{background-color:var(--color-danger-50)}.success-text{color:var(--color-success);font-weight:var(--font-weight-medium)}.success-border{border-color:var(--color-success)}.success-background{background-color:var(--color-success-50)}.warning-text{color:var(--color-warning);font-weight:var(--font-weight-medium)}.warning-border{border-color:var(--color-warning)}.warning-background{background-color:var(--color-warning-50)}@media (min-resolution:2dppx){body{font-size:calc(var(--font-size-base)*1.1)}}@media (prefers-color-scheme:dark){:root{--color-text-primary:#f8f9fa;--color-text-secondary:#e9ecef;--color-text-disabled:#6c757d;--color-background:#212529;--color-background-secondary:#343a40;--color-border:#495057}}@media (pointer:coarse){.touch-target,[role=button],a[role=button],button,input,select,textarea{min-height:44px;min-width:44px}}@media (prefers-reduced-motion:reduce){.parallax{transform:none!important}.auto-scroll{scroll-behavior:auto!important}}[dir=rtl]{text-align:right}[dir=rtl] .skip-link{left:auto;right:6px}@media (-ms-high-contrast:active){.focus-visible,.focus-visible-inset,button:focus,input:focus,select:focus,textarea:focus{outline:2px solid ButtonText}}@media print{.skip-link,.sr-only{height:auto!important;position:static!important;width:auto!important;clip:auto!important;overflow:visible!important}a[href]:after{content:" (" attr(href) ")"}}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background-color:#fff;color:#1a1a1a;min-height:100vh}#root,.app{display:flex;flex-direction:column;min-height:100vh}.main{flex:1;margin:0 auto;max-width:1200px;padding:1rem 1rem 5rem;width:100%}.section{margin-bottom:2rem}.container{margin:0 auto;max-width:400px;padding:2rem}.form{background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:2rem}.form-group{margin-bottom:1.5rem}.form-label{color:#374151;display:block;font-weight:500;margin-bottom:.5rem}.form-input{border:1px solid #d1d5db;border-radius:4px;font-size:1rem;padding:.75rem;transition:border-color .2s,box-shadow .2s;width:100%}.form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.form-input:invalid{border-color:#ef4444}.btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:500;justify-content:center;padding:.75rem 1.5rem;text-decoration:none;transition:all .2s}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background-color:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2563eb}.btn-secondary{background-color:#6b7280;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#4b5563}.btn-outline{background-color:transparent;border:1px solid #3b82f6;color:#3b82f6}.btn-outline:hover:not(:disabled){background-color:#3b82f6;color:#fff}.btn-small{font-size:.875rem;padding:.5rem 1rem}.btn-large{font-size:1.125rem;padding:1rem 2rem}.btn-full{width:100%}.header{background-color:#fff;border-bottom:1px solid #e1e5e9;padding:1rem 0}.header-content{align-items:center;display:flex;justify-content:space-between;margin:0 auto;max-width:1200px;padding:0 1rem}.logo{color:#3b82f6;font-size:1.5rem;font-weight:700;text-decoration:none}.nav{display:flex;gap:1rem}.nav-item{align-items:center;background:none;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:flex;flex-direction:column;padding:.5rem 1rem;text-decoration:none;transition:background-color .2s}.nav-item:hover{background-color:#f3f4f6;color:#374151}.nav-item.active{background-color:#3b82f6;color:#fff}.nav-icon{font-size:1.25rem;margin-bottom:.25rem}.nav-label{font-size:.75rem;font-weight:500}.app-nav{background:#fff;border-top:1px solid #e1e5e9;bottom:0;box-shadow:0 -2px 10px rgba(0,0,0,.1);display:flex;justify-content:space-around;left:0;padding:.5rem 0;position:fixed;right:0;z-index:50}.app-nav .nav-item{align-items:center;background:none;border:none;border-radius:8px;color:#6b7280;cursor:pointer;display:flex;flex-direction:column;min-width:60px;padding:.5rem 1rem;text-decoration:none;transition:all .2s}.app-nav .nav-item:hover{background-color:#f3f4f6;color:#374151}.app-nav .nav-item.active{background-color:#eff6ff;color:#3b82f6}.app-nav .nav-icon{font-size:1.25rem;margin-bottom:.25rem}.app-nav .nav-label{font-size:.75rem;font-weight:500}.card{background:#fff;border:1px solid #e1e5e9;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1);padding:1.5rem}.card-header{border-bottom:1px solid #e1e5e9;margin-bottom:1rem;padding-bottom:1rem}.card-title{color:#1f2937;font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.card-subtitle{color:#6b7280;font-size:.875rem}.dialpad-container,.mobile-dialpad{margin:0 auto;max-width:350px;padding:1rem}.call-display,.dialpad-display{align-items:center;background:#f9fafb;border:1px solid #e1e5e9;border-radius:8px;display:flex;font-family:monospace;font-size:1.5rem;justify-content:center;letter-spacing:.1em;margin-bottom:1.5rem;min-height:4rem;padding:1.5rem;text-align:center}.dialpad-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.5rem}.dialpad-key{align-items:center;aspect-ratio:1;background:#fff;border:1px solid #d1d5db;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;font-size:1.5rem;font-weight:600;justify-content:center;min-height:60px;position:relative;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dialpad-key:hover{background-color:#f3f4f6;border-color:#9ca3af;box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-2px)}.dialpad-key:active{background-color:#e5e7eb;transform:scale(.95)}.dialpad-key.key-delete{background-color:#fef2f2;border-color:#fecaca;color:#dc2626}.dialpad-key.key-delete:hover{background-color:#fee2e2}.dialpad-key-number{font-size:1.5rem;font-weight:700;line-height:1}.dialpad-key-letters,.dialpad-letters{color:#6b7280;font-size:.75rem;font-weight:400;line-height:1;margin-top:.25rem}.dialpad-actions{gap:1rem;margin-top:1.5rem}.dialpad-action,.dialpad-actions{display:flex;justify-content:center}.dialpad-action{align-items:center;border:none;border-radius:50%;cursor:pointer;font-size:1.5rem;font-weight:600;height:4rem;transition:all .2s;width:4rem}.dialpad-action.primary{background-color:#10b981;color:#fff}.dialpad-action.primary:hover{background-color:#059669;transform:scale(1.05)}.dialpad-action.danger{background-color:#ef4444;color:#fff}.dialpad-action.danger:hover{background-color:#dc2626;transform:scale(1.05)}.backspace-btn{background-color:#f3f4f6;border:1px solid #d1d5db;color:#6b7280}.backspace-btn:hover{background-color:#e5e7eb;color:#374151}.call-controls{align-items:center;padding:1rem}.call-controls.active{background-color:#f9fafb;border:1px solid #e1e5e9;border-radius:12px}.call-control{align-items:center;background:none;border:none;border-radius:8px;color:#6b7280;cursor:pointer;display:flex;flex-direction:column;padding:.75rem;transition:all .2s}.call-control:hover{background-color:#f3f4f6;color:#374151}.call-control-icon{font-size:1.5rem;margin-bottom:.25rem}.call-control-label{font-size:.75rem;font-weight:500}.call-actions,.call-actions-modern{display:flex;gap:1rem;justify-content:center;margin:1.5rem 0}.end-call-btn-modern{background-color:#ef4444;border:none;border-radius:50%;color:#fff;cursor:pointer;font-size:1.5rem;height:4rem;transition:all .2s;width:4rem}.end-call-btn-modern:hover{background-color:#dc2626;transform:scale(1.05)}.end-call-icon{transform:rotate(135deg)}.call-controls{gap:1rem;margin-top:1rem}.call-btn,.call-controls{display:flex;justify-content:center}.call-btn{align-items:center;border:none;border-radius:50%;cursor:pointer;font-size:1.5rem;height:4rem;transition:all .2s;width:4rem}.call-btn-primary{background-color:#10b981;color:#fff}.call-btn-primary:hover{background-color:#059669}.call-btn-danger{background-color:#ef4444;color:#fff}.call-btn-danger:hover{background-color:#dc2626}.call-table-container,.excel-table-container,.reports-table-container,.table-container,.transactions-table-container{background:#fff;border:1px solid #e1e5e9;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:1.5rem;overflow-x:auto}.call-history-table,.call-table,.calls-table,.excel-table,.reports-table,.table,.transactions-table{background:#fff;border-collapse:collapse;font-size:.875rem;width:100%}.call-history-table td,.call-history-table th,.call-table td,.call-table th,.calls-table td,.calls-table th,.excel-table td,.excel-table th,.reports-table td,.reports-table th,.table td,.table th,.transactions-table td,.transactions-table th{border-bottom:1px solid #f3f4f6;padding:1rem .75rem;text-align:left;vertical-align:middle}.call-history-table th,.call-table th,.calls-table th,.excel-table th,.reports-table th,.sortable-header,.table th,.table-header th,.transactions-table th{background-color:#f8fafc;color:#374151;font-size:.75rem;font-weight:600;letter-spacing:.05em;position:sticky;text-transform:uppercase;top:0;z-index:10}.sortable-header{cursor:pointer;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.sortable-header:hover{background-color:#f1f5f9;color:#1e40af}.sortable,.sortable.numeric{cursor:pointer;position:relative}.sortable.numeric:after,.sortable:after{content:"↕️";margin-left:.5rem;opacity:.5}.call-history-table tr:hover,.call-table tr:hover,.calls-table tr:hover,.excel-table tr:hover,.reports-table tr:hover,.table tr:hover,.table-row:hover,.transactions-table tr:hover{background-color:#f8fafc}.table-body tr:nth-child(2n){background-color:#fafbfc}.table-loading{color:#6b7280;font-style:italic;padding:2rem;text-align:center}.excel-table.enhanced,.reports-table.enhanced{border:none;box-shadow:0 4px 6px rgba(0,0,0,.05)}.account-management.excel-style{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.05);overflow:hidden}.call-history-page{margin:0 auto;max-width:1200px;padding:1rem}.call-history-content{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:1.5rem}.call-list{display:flex;flex-direction:column;gap:.75rem}.call-record{align-items:center;background:#fff;border:1px solid #e1e5e9;border-radius:8px;display:flex;justify-content:space-between;padding:1rem;transition:all .2s}.call-record:hover{border-color:#3b82f6;box-shadow:0 2px 4px rgba(59,130,246,.1)}.call-main-info{flex:1;gap:1rem}.call-icon,.call-main-info{align-items:center;display:flex}.call-icon{background:#f3f4f6;border-radius:50%;font-size:1.125rem;height:2.5rem;justify-content:center;width:2.5rem}.call-info{flex:1}.call-number{color:#1f2937;font-size:1rem;font-weight:600}.call-meta-info{align-items:center;color:#6b7280;display:flex;font-size:.875rem;gap:1rem;margin-top:.25rem}.call-datetime,.call-duration{align-items:center;display:flex;gap:.25rem}.call-id{color:#9ca3af;font-family:monospace;font-size:.75rem}.date-filter-form{align-items:end;background:#fff;border:1px solid #e1e5e9;border-radius:8px;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1.5rem}.call-history-modal-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.call-history-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px rgba(0,0,0,.2);max-height:90vh;max-width:90vw;overflow:auto}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.text-primary{color:#3b82f6}.text-secondary{color:#6b7280}.text-success{color:#10b981}.text-danger{color:#ef4444}.text-warning{color:#f59e0b}.bg-primary{background-color:#3b82f6}.bg-secondary{background-color:#f9fafb}.bg-success{background-color:#10b981}.bg-danger{background-color:#ef4444}.bg-warning{background-color:#f59e0b}.rounded{border-radius:4px}.rounded-lg{border-radius:8px}.rounded-full{border-radius:9999px}.shadow{box-shadow:0 1px 3px rgba(0,0,0,.1)}.shadow-lg{box-shadow:0 4px 6px rgba(0,0,0,.1)}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.w-full{width:100%}.h-full{height:100%}.hidden{display:none}.block{display:block}@media (max-width:768px){.main{padding:.5rem}.container{padding:1rem}.form{padding:1.5rem}.nav{justify-content:space-around;width:100%}.call-controls{gap:.5rem}.call-btn{height:3.5rem;width:3.5rem}}.admin-portal{background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}.admin-container{display:flex;min-height:calc(100vh - 80px)}.admin-nav{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border-right:1px solid hsla(0,0%,100%,.2);box-shadow:4px 0 20px rgba(0,0,0,.1);padding:0;width:280px}.admin-content{background:hsla(0,0%,100%,.02);flex:1;overflow-y:auto;padding:1.5rem}.admin-header{align-items:center;backdrop-filter:blur(15px);background:hsla(0,0%,100%,.95);border-bottom:1px solid hsla(0,0%,100%,.2);box-shadow:0 2px 20px rgba(0,0,0,.1);display:flex;justify-content:space-between;padding:1rem 2rem;position:sticky;top:0;z-index:100}.header-title h1{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;margin:0}.admin-info{color:#6b7280;font-size:.875rem}.nav-tabs{background:none;border:none;flex-direction:column;padding:1rem 0}.nav-tabs .nav-item{border:none;border-left:4px solid transparent;color:#4b5563;font-weight:500;margin:.25rem 0;transition:all .3s ease;width:100%}.nav-tabs .nav-item:hover{background:rgba(59,130,246,.1);border-left-color:rgba(59,130,246,.3);transform:translateX(4px)}.nav-tabs .nav-item.active{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(147,51,234,.15));border-left-color:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,.2);color:#1e40af;font-weight:600;transform:translateX(8px)}.admin-dashboard{padding:0}.admin-dashboard.enhanced{background:transparent;min-height:100vh}.stats-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:2rem}.metric-card,.stat-card{background:#fff;border:1px solid #e1e5e9;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:2rem;text-align:center;transition:all .2s}.metric-card:hover,.stat-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1);transform:translateY(-2px)}.stat-card.primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-color:#3b82f6;color:#fff}.stat-card.warning{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#f59e0b;color:#fff}.metric-card.primary{border-left:4px solid #3b82f6}.metric-card.status{border-left:4px solid #10b981}.stat-value{font-size:2.5rem;font-weight:800;margin-bottom:.5rem}.stat-label{font-size:.875rem;opacity:.8}.dashboard-header{align-items:center;background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);display:flex;justify-content:space-between;margin-bottom:2rem;padding:1.5rem}.header-content h2{color:#1f2937;font-size:1.5rem;font-weight:700;margin:0 0 .25rem}.header-content p{color:#6b7280;font-size:.875rem;margin:0}.header-actions{align-items:center;display:flex;gap:1rem}.period-selector{background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:.875rem;padding:.5rem 1rem}.metrics-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem}.metric-card{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.9);border:1px solid hsla(0,0%,100%,.3);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.08);padding:1.5rem;transition:all .3s ease}.metric-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.15);transform:translateY(-4px) scale(1.02)}.metric-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.metric-icon{font-size:1.5rem}.metric-trend{border-radius:12px;font-size:.75rem;font-weight:600;padding:.25rem .5rem}.metric-trend.positive{background:#d1fae5;color:#065f46}.metric-trend.neutral{background:#f3f4f6;color:#6b7280}.metric-value{color:#1f2937;font-size:2rem;font-weight:800;line-height:1;margin-bottom:.5rem}.metric-value.system-healthy{color:#10b981}.metric-value.system-error{color:#ef4444}.metric-label{color:#6b7280;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.metric-sub{color:#9ca3af;font-size:.75rem}.status-indicator{border-radius:50%;display:inline-block;height:.75rem;width:.75rem}.status-indicator.healthy{background-color:#10b981}.status-indicator.error{background-color:#ef4444}.performance-row{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:2rem}.chart-container{margin:1rem 0}.chart-stats{display:flex;justify-content:space-between;margin-top:1rem}.chart-stat{display:flex;flex-direction:column;gap:.25rem}.stat-value{font-size:.875rem;font-weight:600}.quick-stats-list{display:flex;flex-direction:column;gap:1rem}.quick-stat{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:.75rem 0}.quick-stat:last-child{border-bottom:none}.quick-stat-label{color:#6b7280;font-size:.875rem}.quick-stat-value{color:#1f2937;font-size:.875rem;font-weight:600}.dashboard-section{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);margin-bottom:1.5rem;padding:1.5rem}.section-header{align-items:center;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;margin-bottom:1rem;padding-bottom:1rem}.section-header h3{color:#1f2937;font-size:1.125rem;font-weight:600;margin:0}.section-badge{background:#eff6ff;border-radius:12px;color:#1d4ed8;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.lookup-input-group{align-items:center;display:flex;gap:.75rem}.input-icon{color:#6b7280;font-size:1.25rem}.lookup-input{border:1px solid #d1d5db;border-radius:6px;flex:1;font-size:1rem;padding:.75rem}.lookup-btn{flex-shrink:0}.lookup-result{margin-top:1rem}.lookup-result.success .user-result-card{background:#f0fdf4;border-color:#10b981}.lookup-result.error .error-card{background:#fef2f2;border-color:#ef4444}.user-avatar{align-items:center;background:#3b82f6;border-radius:50%;color:#fff;display:flex;font-size:1.125rem;font-weight:600;height:3rem;justify-content:center;width:3rem}.user-info{flex:1}.user-info h4{color:#1f2937;font-size:1.125rem;font-weight:600;margin:0 0 .5rem}.user-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.75rem}.meta-item{align-items:center;color:#6b7280;display:flex;font-size:.875rem;gap:.25rem}.meta-icon{font-size:1rem}.user-status-row{align-items:center;display:flex;justify-content:space-between}.status-badge{border-radius:12px;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.status-badge.active{background:#d1fae5;color:#065f46}.status-badge.inactive{background:#fef3c7;color:#92400e}.status-badge.suspended{background:#fee2e2;color:#991b1b}.join-date{color:#9ca3af;font-size:.75rem}.user-actions{display:flex;flex-direction:column;gap:.5rem}.spinner-small{animation:spin 1s linear infinite;border:2px solid transparent;border-radius:50%;border-top-color:currentcolor;display:inline-block;height:1rem;width:1rem}.activity-item{align-items:flex-start;border-bottom:1px solid #f3f4f6;display:flex;gap:1rem;padding:1rem 0}.activity-item:last-child{border-bottom:none}.activity-item.type-user .activity-icon{background:#eff6ff;color:#3b82f6}.activity-item.type-call .activity-icon{background:#f0fdf4;color:#10b981}.activity-item.type-payment .activity-icon{background:#fefce8;color:#ca8a04}.activity-item.type-admin .activity-icon{background:#f3f4f6;color:#6b7280}.activity-message{margin:0}.activity-details{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem}.detail-item{color:#6b7280;font-size:.75rem}.activity-time{white-space:nowrap}.health-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.health-item{align-items:center;display:flex;gap:1rem}.health-label{color:#6b7280;font-size:.875rem;min-width:120px}.health-bar{background:#f3f4f6;border-radius:4px;flex:1;height:.5rem;overflow:hidden}.health-fill{border-radius:4px;height:100%;transition:width .3s ease}.health-fill.good{background:#10b981}.health-fill.warning{background:#f59e0b}.health-fill.critical{background:#ef4444}.health-value{color:#1f2937;font-size:.875rem;font-weight:600;min-width:60px;text-align:right}.activity-feed{background:#fff;border:1px solid #e1e5e9;border-radius:12px;max-height:400px;overflow-y:auto;padding:1.5rem}.activity-content{align-items:flex-start;border-bottom:1px solid #f3f4f6;display:flex;gap:1rem;padding:1rem 0}.activity-content:last-child{border-bottom:none}.activity-icon{align-items:center;background:#f3f4f6;border-radius:50%;display:flex;flex-shrink:0;font-size:1rem;height:2.5rem;justify-content:center;width:2.5rem}.activity-details{flex:1}.activity-message{color:#374151;font-size:.875rem;margin-bottom:.25rem}.activity-time{color:#9ca3af;font-size:.75rem}.performance-card{background:#fff;border:1px solid #e1e5e9;border-radius:8px;margin-bottom:1rem;padding:1.5rem}.performance-row{align-items:center;border-bottom:1px solid #f3f4f6;display:flex;justify-content:space-between;padding:.75rem 0}.performance-row:last-child{border-bottom:none}.alert{border-radius:4px;margin-bottom:1rem;padding:1rem}.alert-success{background-color:#d1fae5;border:1px solid #a7f3d0;color:#065f46}.alert-error{background-color:#fee2e2;border:1px solid #fecaca;color:#991b1b}.alert-warning{background-color:#fef3c7;border:1px solid #fde68a;color:#92400e}.alert-info{background-color:#dbeafe;border:1px solid #bfdbfe;color:#1e40af}.balance-display{background:#f8fafc;margin-bottom:1rem;padding:1rem}.balance-display,.number-display,.numberField{border:1px solid #e1e5e9;border-radius:8px;text-align:center}.number-display,.numberField{align-items:center;background:#f9fafb;display:flex;font-family:monospace;font-size:1.5rem;justify-content:center;letter-spacing:.1em;margin-bottom:1.5rem;min-height:4rem;padding:1.5rem;position:relative}.delete-button{background:none;border:none;border-radius:4px;color:#6b7280;cursor:pointer;padding:.5rem;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);transition:all .2s}.delete-button:hover{background-color:#f3f4f6;color:#374151}.keypad{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr);margin-bottom:1.5rem}.key{align-items:center;aspect-ratio:1;background:#fff;border:1px solid #d1d5db;border-radius:50%;cursor:pointer;display:flex;flex-direction:column;font-size:1.5rem;font-weight:600;justify-content:center;min-height:60px;position:relative;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.key:hover{background-color:#f3f4f6;border-color:#9ca3af;box-shadow:0 4px 8px rgba(0,0,0,.1);transform:translateY(-2px)}.key.dtmf-on,.key:active{background-color:#e5e7eb;transform:scale(.95)}.key-content{align-items:center;display:flex;flex-direction:column}.key-number{font-size:1.5rem;font-weight:700;line-height:1}.key-letters{color:#6b7280;font-size:.75rem;font-weight:400;line-height:1;margin-top:.25rem}.action-buttons{gap:1rem;justify-content:center;margin-top:1.5rem}.btn--call{align-items:center;background-color:#10b981;border:none;border-radius:50px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;transition:all .2s}.btn--call:hover:not(:disabled){background-color:#059669;box-shadow:0 4px 12px rgba(16,185,129,.3);transform:translateY(-2px)}.btn--call:disabled{box-shadow:none;cursor:not-allowed;opacity:.5;transform:none}.btn--end{align-items:center;background-color:#ef4444;border:none;border-radius:50px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:600;gap:.5rem;padding:1rem 2rem;transition:all .2s}.btn--end:hover{background-color:#dc2626;box-shadow:0 4px 12px rgba(239,68,68,.3);transform:translateY(-2px)}.btn--ghost{background:none;border:none;cursor:pointer;transition:all .2s}.dtmf-on{background-color:#3b82f6!important;box-shadow:0 0 20px rgba(59,130,246,.5)!important;color:#fff!important;transform:scale(1.05)!important}.sms-messenger{margin:0 auto;max-width:600px;padding:1rem}.sms-header{align-items:center;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem}.sms-title{color:#1f2937;font-size:1.5rem;font-weight:600;margin:0}.sms-balance{color:#6b7280;font-size:.875rem}.balance-amount{color:#10b981;font-weight:600}.sms-form,.tfa-form,.voucher-form,.whatsapp-form{background:#fff;border:1px solid #e1e5e9;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:1.5rem;padding:2rem}.input-hint{color:#9ca3af;font-size:.75rem;margin-top:.25rem}.message-info{align-items:center;color:#6b7280;display:flex;font-size:.75rem;justify-content:space-between;margin-top:.5rem}.char-count{color:#6b7280}.char-count.warning{color:#f59e0b;font-weight:600}.segment-info{color:#6b7280}.cost-estimate{color:#10b981;font-weight:600}.templates-section{margin:1.5rem 0}.templates-label{color:#374151;font-size:.875rem;font-weight:500;margin-bottom:.75rem}.template-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.template-btn{background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;font-size:.75rem;padding:.5rem 1rem;transition:all .2s}.template-btn:hover{background-color:#f3f4f6;border-color:#9ca3af}.sms-send-btn{align-items:center;display:flex;font-size:1rem;font-weight:600;gap:.5rem;justify-content:center;padding:1rem;width:100%}.loading-spinner{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.sms-info{background:#f8fafc;border:1px solid #e1e5e9;border-radius:8px;margin-top:1.5rem;padding:1.5rem}.sms-info h4{color:#374151;font-size:1rem;font-weight:600;margin-bottom:.75rem}.sms-info ul{list-style:none;margin:0;padding:0}.sms-info li{color:#6b7280;font-size:.875rem;margin-bottom:.5rem;padding-left:1rem;position:relative}.sms-info li:before{color:#3b82f6;content:"•";left:0;position:absolute}.error-message,.success-message{align-items:center;border-radius:8px;display:flex;font-size:.875rem;gap:.5rem;margin-bottom:1rem;padding:1rem}.error-message{background-color:#fee2e2;border:1px solid #fecaca;color:#991b1b}.success-message{background-color:#d1fae5;border:1px solid #a7f3d0;color:#065f46}.error-icon,.success-icon{font-size:1rem}.form-input.sms-input,.form-input.tfa-input,.form-input.voucher-input,.form-input.whatsapp-input{font-family:monospace;letter-spacing:.025em}.form-input.sms-textarea,.form-input.whatsapp-textarea{font-family:inherit;min-height:120px;resize:vertical}.form-input.code-input{font-family:monospace;font-size:1.5rem;font-weight:600;letter-spacing:.5em;text-align:center}.tfa-verify-form{padding:2rem;text-align:center}.action-btn,.quick-action-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;text-decoration:none;transition:all .2s}.action-btn.primary{background-color:#3b82f6;color:#fff}.action-btn.primary:hover{background-color:#2563eb}.action-btn.success{background-color:#10b981;color:#fff}.action-btn.success:hover{background-color:#059669}.action-btn.info{background-color:#06b6d4;color:#fff}.action-btn.info:hover{background-color:#0891b2}.action-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.action-buttons.compact{gap:.5rem}.bulk-action-btn{border:none;border-radius:6px;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;transition:all .2s}.bulk-action-btn.danger{background-color:#ef4444;color:#fff}.bulk-action-btn.danger:hover{background-color:#dc2626}.bulk-action-btn.warning{background-color:#f59e0b;color:#fff}.bulk-action-btn.warning:hover{background-color:#d97706}.billing-management{margin:0 auto;max-width:1000px}.billing-section{backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);margin-bottom:1.5rem;padding:1.5rem}.billing-section h3{color:#1f2937;font-size:1.125rem;font-weight:600;margin-bottom:1rem}.customer-validation-result{margin-top:1rem}.customer-details{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:.75rem}.customer-details p{color:#6b7280;font-size:.875rem;margin:0}.balance.positive{color:#10b981;font-weight:600}.balance.zero{color:#f59e0b;font-weight:600}.billing-form{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.billing-actions{display:flex;gap:1rem;grid-column:span 2;justify-content:center}.balance-preview{background:#f8fafc;border:1px solid #e1e5e9;border-radius:8px;margin-top:1rem;padding:1rem}.balance-preview p{color:#374151;font-size:.875rem;margin:.25rem 0}.transactions-list{display:flex;flex-direction:column;gap:.75rem}.transaction-item{align-items:center;background:#f8fafc;border:1px solid #e1e5e9;border-radius:8px;display:grid;gap:1rem;grid-template-columns:auto auto 1fr auto;padding:1rem;transition:all .2s}.transaction-item:hover{border-color:#3b82f6;box-shadow:0 2px 4px rgba(59,130,246,.1)}.transaction-type{border-radius:12px;font-size:.75rem;font-weight:600;padding:.25rem .5rem;text-transform:uppercase}.transaction-type.admin-charge{background:#fee2e2;color:#991b1b}.transaction-type.admin-refund{background:#d1fae5;color:#065f46}.transaction-type.stripe{background:#dbeafe;color:#1e40af}.transaction-type.call-charge{background:#fef3c7;color:#92400e}.transaction-amount{font-family:monospace;font-weight:600}.transaction-amount.positive{color:#10b981}.transaction-amount.negative{color:#ef4444}.transaction-description{color:#6b7280;font-size:.875rem}.transaction-date{color:#9ca3af;font-size:.75rem;white-space:nowrap}.loading-message,.no-transactions{color:#6b7280;font-style:italic;padding:2rem;text-align:center}.excel-toolbar{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.08);display:flex;justify-content:space-between;margin-bottom:1rem;padding:1rem}.toolbar-left,.toolbar-right{align-items:center;display:flex;gap:.75rem}.btn-tool{background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:all .2s}.btn-tool:hover{background:#f3f4f6;border-color:#9ca3af}.btn-tool.active{background:#3b82f6;border-color:#3b82f6;color:#fff}.search-box{align-items:center;display:flex;position:relative}.search-icon{color:#9ca3af;left:.75rem;position:absolute;z-index:1}.excel-search{border:1px solid #d1d5db;border-radius:6px;font-size:.875rem;padding:.5rem .75rem .5rem 2.25rem;width:250px}.clear-search{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;position:absolute;right:.5rem}.filter-panel{align-items:end;background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:1rem;padding:1.5rem}.filter-group{display:flex;flex-direction:column;gap:.5rem}.filter-group label{color:#374151;font-size:.875rem;font-weight:500}.range-inputs{align-items:center;display:flex;gap:.5rem}.date-input,.range-input{border:1px solid #d1d5db;border-radius:4px;font-size:.875rem;padding:.5rem;width:100px}.excel-stats-bar{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:1rem}.excel-stats-bar .stat-card{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.9);border:1px solid hsla(0,0%,100%,.3);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.06);display:flex;gap:.75rem;padding:1rem}.stat-icon{font-size:1.5rem}.stat-content{display:flex;flex-direction:column}.stat-value{color:#1f2937;font-size:1.25rem;font-weight:700;line-height:1}.stat-label{color:#6b7280;font-size:.75rem;font-weight:500}.excel-status-bar{align-items:center;background:hsla(0,0%,100%,.95);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#6b7280;display:flex;font-size:.875rem;justify-content:space-between;margin-top:1rem;padding:.75rem 1rem}.pagination-controls{align-items:center;display:flex;gap:.5rem}.page-info{font-weight:500;padding:0 1rem}.btn-action{background:#fff;border:1px solid #d1d5db;border-radius:4px;color:#6b7280;cursor:pointer;font-size:.875rem;padding:.25rem .5rem;transition:all .2s}.btn-action:hover{background:#f3f4f6;border-color:#9ca3af}.btn-action.success{background:#10b981;border-color:#10b981;color:#fff}.btn-action.warning{background:#f59e0b;border-color:#f59e0b;color:#fff}.inline-edit{background:#fff;border:1px solid #3b82f6;border-radius:4px;font-size:.875rem;padding:.25rem .5rem;width:100%}.inline-edit.numeric{text-align:right}.status-pill{border-radius:12px;font-size:.75rem;font-weight:500;padding:.25rem .75rem}.status-pill.active{background:#d1fae5;color:#065f46}.status-pill.inactive{background:#fef3c7;color:#92400e}.status-pill.suspended{background:#fee2e2;color:#991b1b}.call-status{border-radius:4px;font-size:.75rem;font-weight:500;padding:.25rem .5rem}.call-status.completed{background:#d1fae5;color:#065f46}.call-status.failed{background:#fee2e2;color:#991b1b}.call-status.unknown{background:#f3f4f6;color:#6b7280}.amount-grid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));margin:1rem 0}.top-up-quick-btn{background:#fff;border:2px solid #e1e5e9;border-radius:8px;cursor:pointer;font-weight:600;padding:1rem;text-align:center;transition:all .2s}.top-up-quick-btn:hover{background-color:#f8fafc;border-color:#3b82f6}.top-up-quick-btn.selected{background-color:#eff6ff;border-color:#3b82f6;color:#1d4ed8}.quick-lookup-form.enhanced{background:#fff;border:1px solid #e1e5e9;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:1.5rem}.form-row{align-items:end;display:flex;gap:1rem}.form-select{background:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;font-size:1rem;padding:.75rem}.form-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1);outline:none}.customer-card,.user-result-card{background:#fff;border:1px solid #e1e5e9;border-radius:8px;margin-bottom:1rem;padding:1.5rem;transition:all .2s}.customer-card:hover,.user-result-card:hover{border-color:#3b82f6;box-shadow:0 2px 4px rgba(59,130,246,.1)}.editable{background-color:#fffbeb;border:1px dashed #f59e0b;border-radius:4px;cursor:pointer;padding:.25rem .5rem;transition:all .2s}.editable:hover{background-color:#fef3c7}.nav-tabs{background:#fff;border-bottom:1px solid #e1e5e9;border-radius:8px 8px 0 0;display:flex;margin-bottom:1.5rem;overflow:hidden}.nav-tabs .nav-item{border-bottom:3px solid transparent;border-radius:0;padding:1rem 1.5rem}.nav-tabs .nav-item.active{background-color:#f8fafc;border-bottom-color:#3b82f6}.error-card,.warning-card{align-items:center;border-radius:8px;display:flex;gap:.75rem;margin-bottom:1rem;padding:1rem}.warning-card{background-color:#fef3c7;border:1px solid #fde68a;color:#92400e}.error-card{background-color:#fee2e2;border:1px solid #fecaca;color:#991b1b}.no-calls{color:#6b7280;font-style:italic;padding:3rem 1rem;text-align:center}.page-btn{background:#fff;border:1px solid #d1d5db;cursor:pointer;padding:.5rem 1rem;transition:all .2s}.page-btn:hover{background-color:#f3f4f6}.page-btn.active{background-color:#3b82f6;border-color:#3b82f6;color:#fff}.cancel-btn,.close-btn,.confirm-btn,.dismiss-btn,.refresh-btn,.update-btn{background:#fff;border:1px solid #d1d5db;border-radius:4px;cursor:pointer;font-size:.875rem;padding:.5rem 1rem;transition:all .2s}.confirm-btn{background-color:#10b981;border-color:#10b981;color:#fff}.confirm-btn:hover{background-color:#059669}.cancel-btn{background-color:#6b7280;border-color:#6b7280;color:#fff}.cancel-btn:hover{background-color:#4b5563}.install-btn{background-color:#3b82f6;border:none;border-radius:50px;bottom:1rem;box-shadow:0 4px 12px rgba(59,130,246,.3);color:#fff;cursor:pointer;font-weight:600;padding:.75rem 1.5rem;position:fixed;right:1rem;transition:all .2s;z-index:100}.install-btn:hover{background-color:#2563eb;box-shadow:0 6px 16px rgba(59,130,246,.4);transform:translateY(-2px)}.modern-app { min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif; }
/* MODERN CUSTOMER PORTAL CSS - Forced inclusion */
.modern-header { background: white; border-bottom: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 16px 24px; position: sticky; top: 0; z-index: 100; }
.modern-header-content { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; }
.modern-logo { font-size: 24px; font-weight: 700; color: #3b82f6; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.modern-balance-section { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: white; padding: 12px 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.modern-balance-info { display: flex; flex-direction: column; align-items: flex-start; }
.modern-balance-label { font-size: 12px; opacity: 0.9; font-weight: 500; }
.modern-balance-value { font-size: 20px; font-weight: 700; margin: 0; }
.modern-recharge-btn { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); color: white; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.modern-recharge-btn:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
.modern-user-section { display: flex; align-items: center; gap: 12px; }
.modern-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); display: flex; align-items: center; justify-content: center; color: white; font-size: 16px; font-weight: 600; }
.modern-user-info { display: flex; flex-direction: column; }
.modern-user-name { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0; }
.modern-user-role { font-size: 12px; color: #6b7280; margin: 0; }
.modern-secondary-btn { background: #f3f4f6; border: 1px solid #d1d5db; color: #374151; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.modern-secondary-btn:hover { background: #e5e7eb; }
.modern-tab-navigation { background: white; border-bottom: 1px solid #e2e8f0; padding: 0 24px; }
.modern-tab-list { display: flex; max-width: 1440px; margin: 0 auto; overflow-x: auto; }
.modern-tab { display: flex; flex-direction: column; align-items: center; padding: 16px 20px; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.2s; min-width: 120px; text-decoration: none; color: #6b7280; }
.modern-tab:hover { color: #374151; background: #f9fafb; }
.modern-tab.active { color: #3b82f6; border-bottom-color: #3b82f6; background: #eff6ff; }
.modern-tab-icon { font-size: 20px; margin-bottom: 4px; }
.modern-status-indicator { width: 8px; height: 8px; border-radius: 50%; margin-left: 8px; }
.modern-status-online { background: #10b981; }
.modern-status-offline { background: #ef4444; }
.modern-main-content { max-width: 1440px; margin: 0 auto; padding: 24px; }
.modern-service-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 24px; }
.modern-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modern-modal-content { background: white; border-radius: 12px; box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2); max-width: 90vw; max-height: 90vh; overflow: auto; }
.modern-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid #e2e8f0; }
.modern-modal-title { font-size: 18px; font-weight: 600; margin: 0; }
.modern-modal-close { background: none; border: none; font-size: 24px; cursor: pointer; padding: 4px; }
.modern-auth-container { min-height: 100vh; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modern-auth-card { background: white; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 32px; max-width: 480px; width: 100%; }
.modern-auth-header { text-align: center; margin-bottom: 24px; }
.modern-auth-title { font-size: 28px; font-weight: 700; color: #1f2937; margin: 0 0 8px; }
.modern-auth-subtitle { font-size: 16px; color: #6b7280; margin: 0; }
.modern-error-alert { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.modern-auth-toggle { display: flex; background: #f3f4f6; border-radius: 8px; padding: 4px; margin-bottom: 24px; }
.modern-auth-toggle-btn { flex: 1; padding: 12px; text-align: center; border-radius: 6px; cursor: pointer; transition: all 0.2s; background: none; border: none; font-weight: 500; }
.modern-auth-toggle-btn.active { background: white; color: #3b82f6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.modern-form-row { display: flex; gap: 16px; }
.modern-form-group { margin-bottom: 16px; }
.modern-form-label { display: block; font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.modern-form-input { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 16px; transition: all 0.2s; }
.modern-form-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; }
.modern-primary-btn { background: #3b82f6; color: white; border: none; padding: 14px 24px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; }
.modern-primary-btn:hover { background: #2563eb; transform: translateY(-1px); }
.modern-form-submit { margin-top: 8px; }
.modern-loading-container { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; }
.modern-loading-spinner { width: 40px; height: 40px; border: 3px solid #f3f4f6; border-top: 3px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; }
.modern-loading-text { margin-top: 16px; font-size: 16px; color: #6b7280; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }