*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;color:#111827;background-color:#fff;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}a{color:inherit;text-decoration:none}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}.public-layout{min-height:100vh;display:flex;flex-direction:column}.public-header{background:#fff;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:100}.header-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;height:4rem;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:baseline;gap:.25rem;text-decoration:none}.logo-text{font-size:1.5rem;font-weight:700;color:#1e40af}.logo-subtext{font-size:1rem;font-weight:500;color:#64748b}.header-nav{display:flex;align-items:baseline;gap:2rem}.header-nav a{color:#374151;text-decoration:none;font-weight:500;transition:color .2s}.header-nav a:hover{color:#1e40af}.header-nav .login-button{background:#1e40af;color:#fff!important;padding:.5rem 1.25rem;border-radius:.5rem;text-decoration:none;font-weight:500;transition:background .2s;margin-left:1rem}.header-nav .login-button:hover{background:#1e3a8a;color:#fff!important}.public-main{flex:1}.public-footer{background:#1f2937;color:#d1d5db;padding:3rem 0 0}.footer-container{max-width:1280px;margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.footer-section h4{color:#fff;font-size:1.125rem;margin-bottom:1rem}.footer-section p{margin:.5rem 0;font-size:.875rem}.footer-section a{display:block;color:#d1d5db;text-decoration:none;font-size:.875rem;margin:.5rem 0;transition:color .2s}.footer-section a:hover{color:#fff}.footer-bottom{margin-top:2rem;padding:1.5rem;border-top:1px solid #374151;text-align:center}.footer-bottom p{font-size:.875rem;margin:0}@media(max-width:1024px){.header-container{padding:0 1rem}.header-nav{gap:1rem}}@media(max-width:768px){.header-nav{display:none}.footer-container{grid-template-columns:1fr;gap:1.5rem}}.notification-bell{position:relative}.notification-bell-trigger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:8px;color:var(--text-secondary, #6b7280);transition:all .2s ease;position:relative}.notification-bell-trigger:hover{background:var(--bg-secondary, #f3f4f6);color:var(--text-primary, #1f2937)}.notification-badge{position:absolute;top:2px;right:2px;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:600;line-height:18px;text-align:center;color:#fff;background:var(--danger, #ef4444);border-radius:9px;box-shadow:0 2px 4px #ef44444d}.notification-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:380px;max-height:480px;background:#fff;border-radius:12px;box-shadow:0 10px 40px #00000026,0 2px 10px #0000001a;overflow:hidden;z-index:1000;display:flex;flex-direction:column}.notification-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border, #e5e7eb)}.notification-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-primary, #1f2937)}.mark-all-read{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:var(--bg-secondary, #f3f4f6);border-radius:6px;cursor:pointer;color:var(--text-secondary, #6b7280);transition:all .2s ease}.mark-all-read:hover{background:var(--primary, #3b82f6);color:#fff}.notification-list{flex:1;overflow-y:auto;max-height:360px}.notification-loading,.notification-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--text-tertiary, #9ca3af);text-align:center}.notification-empty svg{margin-bottom:12px;opacity:.5}.notification-empty p{margin:0;font-size:14px}.notification-item{display:flex;align-items:flex-start;gap:12px;padding:14px 20px;cursor:pointer;transition:background .2s ease;border-bottom:1px solid var(--border-light, #f3f4f6)}.notification-item:last-child{border-bottom:none}.notification-item:hover{background:var(--bg-secondary, #f9fafb)}.notification-item.unread{background:var(--primary-light, #eff6ff)}.notification-item.unread:hover{background:var(--primary-lighter, #dbeafe)}.notification-icon{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--bg-tertiary, #f3f4f6);border-radius:8px}.notification-content{flex:1;min-width:0}.notification-title{font-size:14px;font-weight:600;color:var(--text-primary, #1f2937);margin-bottom:4px;line-height:1.3}.notification-message{font-size:13px;color:var(--text-secondary, #6b7280);margin-bottom:6px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.notification-time{font-size:12px;color:var(--text-tertiary, #9ca3af)}.notification-action{flex-shrink:0;color:var(--text-tertiary, #9ca3af);padding:4px}.notification-footer{padding:12px 20px;border-top:1px solid var(--border, #e5e7eb);background:var(--bg-secondary, #f9fafb)}.view-all-notifications{width:100%;padding:10px 16px;font-size:14px;font-weight:500;color:var(--primary, #3b82f6);background:#fff;border:1px solid var(--border, #e5e7eb);border-radius:8px;cursor:pointer;transition:all .2s ease}.view-all-notifications:hover{background:var(--primary, #3b82f6);color:#fff;border-color:var(--primary, #3b82f6)}@media(max-width:480px){.notification-dropdown{position:fixed;top:60px;left:10px;right:10px;width:auto;max-height:calc(100vh - 80px)}}.authenticated-layout{display:flex;min-height:100vh;background:#f3f4f6}.sidebar{width:260px;background:#1f2937;color:#fff;display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;transition:width .3s ease}.sidebar-collapsed .sidebar{width:70px}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #374151}.sidebar-logo{display:flex;align-items:baseline;gap:.25rem;text-decoration:none}.sidebar-logo .logo-text{font-size:1.5rem;font-weight:700;color:#60a5fa}.sidebar-logo .logo-subtext{font-size:1rem;font-weight:500;color:#9ca3af}.sidebar-logo .custom-logo{max-height:36px;max-width:180px;object-fit:contain}.sidebar-collapsed .sidebar-logo .custom-logo{max-width:40px}.sidebar-collapsed .sidebar-logo .logo-subtext{display:none}.sidebar-toggle{background:transparent;border:none;color:#9ca3af;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;border-radius:.375rem;transition:background .2s,color .2s}.sidebar-toggle:hover{background:#374151;color:#fff}.sidebar-nav{flex:1;padding:1rem .75rem;overflow-y:auto}.nav-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:#d1d5db;text-decoration:none;border-radius:.5rem;margin-bottom:.25rem;transition:background .2s,color .2s}.nav-item:hover{background:#374151;color:#fff}.nav-item.active{background:#1e40af;color:#fff}.sidebar-collapsed .nav-item{justify-content:center;padding:.75rem}.sidebar-collapsed .nav-item span{display:none}.sidebar-footer{padding:.75rem;border-top:1px solid #374151}.sidebar-balance{padding:12px 12px 10px;margin-bottom:4px}.sidebar-balance-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.8125rem;color:#9ca3af}.sidebar-balance-icon{color:#10b981}.sidebar-balance-buy{margin-left:auto;background:#10b981;color:#fff;border:none;border-radius:6px;padding:3px 10px;font-size:.6875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:2px;transition:background-color .2s}.sidebar-balance-buy:hover{background:#059669}.sidebar-balance-value{font-size:1.125rem;font-weight:700;color:#fff}.sidebar-balance-value.low,.sidebar-balance-icon.low{color:#fbbf24}.sidebar-balance-low{font-size:.6875rem;color:#fbbf24;margin-top:2px}.sidebar-balance-postpaid{margin-top:8px}.sidebar-balance-postpaid-divider{font-size:.625rem;color:#9ca3af;text-align:center;border-top:1px solid #4b5563;padding-top:6px;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.sidebar-balance-postpaid-value{font-size:.875rem;font-weight:600;color:#c4b5fd;text-align:center}.sidebar-balance-postpaid-bar{height:4px;background:#374151;border-radius:2px;margin-top:4px;overflow:hidden}.sidebar-balance-postpaid-fill{height:100%;border-radius:2px;transition:width .3s}.sidebar-collapsed .sidebar-balance{display:none}.header-balance{display:flex;align-items:stretch;border-radius:8px;overflow:hidden;cursor:pointer;font-size:.8125rem;border:1px solid #e5e7eb;transition:box-shadow .15s}.header-balance:hover{box-shadow:0 2px 8px #00000014}.header-balance-prepaid{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#ecfdf5;color:#15803d;font-weight:600}.header-balance.low .header-balance-prepaid{background:#fef3c7;color:#a16207}.header-balance-postpaid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 10px;background:#fff;color:#7c3aed;font-weight:600;font-size:.75rem;line-height:1.1}.header-balance-label{font-size:.625rem;font-weight:400;color:#9ca3af}.nav-accordion{display:flex;flex-direction:column;margin-bottom:.25rem}.accordion-trigger{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;color:#d1d5db;background:transparent;border:none;border-radius:.5rem;cursor:pointer;width:100%;text-align:left;font-size:inherit;font-family:inherit;transition:background .2s,color .2s}.accordion-trigger:hover{background:#374151;color:#fff}.accordion-trigger.active{color:#60a5fa}.accordion-trigger span{flex:1}.accordion-arrow{transition:transform .2s ease}.accordion-arrow.open{transform:rotate(90deg)}.accordion-content{display:none;flex-direction:column;overflow:hidden}.accordion-content.open{display:flex}.accordion-content .nav-item{padding-left:2.75rem;font-size:.875rem;gap:.5rem}.accordion-content .nav-item svg{width:16px;height:16px}.sidebar-collapsed .accordion-trigger{justify-content:center;padding:.75rem}.sidebar-collapsed .accordion-trigger span,.sidebar-collapsed .accordion-arrow{display:none}.main-wrapper{flex:1;margin-left:260px;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s ease}.sidebar-collapsed .main-wrapper{margin-left:70px}.top-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:0 1.5rem;height:4rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:50}.header-left{display:flex;align-items:center}.mobile-menu-toggle{display:none;background:transparent;border:none;color:#374151;cursor:pointer;padding:.5rem}.header-right{display:flex;align-items:center;gap:1rem}.user-menu{position:relative}.user-menu-trigger{display:flex;align-items:center;gap:.75rem;background:transparent;border:1px solid #e5e7eb;border-radius:.5rem;padding:.5rem 1rem;cursor:pointer;transition:background .2s}.user-menu-trigger:hover{background:#f9fafb}.user-avatar{width:2rem;height:2rem;background:#1e40af;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.875rem}.user-info{display:flex;flex-direction:column;align-items:flex-start}.user-name{font-size:.875rem;font-weight:500;color:#111827}.user-role{font-size:.75rem;color:#6b7280}.user-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a;min-width:180px;z-index:100}.dropdown-item{display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem;background:transparent;border:none;color:#374151;font-size:.875rem;text-decoration:none;cursor:pointer;transition:background .2s}.dropdown-item:hover{background:#f3f4f6}.dropdown-item:first-child{border-radius:.5rem .5rem 0 0}.dropdown-item:last-child{border-radius:0 0 .5rem .5rem}.main-content{flex:1;padding:1.5rem}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem}.loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#1e40af;border-radius:50%;animation:spin 1s linear infinite}@media(max-width:1024px){.sidebar{transform:translate(-100%)}.authenticated-layout.sidebar-open .sidebar{transform:translate(0)}.main-wrapper,.sidebar-collapsed .main-wrapper{margin-left:0}.mobile-menu-toggle{display:flex}}@media(max-width:640px){.user-info{display:none}.user-menu-trigger{padding:.5rem}}.toast-container{position:fixed;top:1rem;right:1rem;z-index:1100;display:flex;flex-direction:column;gap:.5rem;max-width:400px;width:100%;pointer-events:none}.toast{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#fff;border-radius:.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border-left:4px solid;animation:slideInRight .3s ease;pointer-events:auto}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.toast-success{border-left-color:#22c55e}.toast-success .toast-icon{color:#22c55e}.toast-error{border-left-color:#ef4444}.toast-error .toast-icon{color:#ef4444}.toast-warning{border-left-color:#f59e0b}.toast-warning .toast-icon{color:#f59e0b}.toast-info{border-left-color:#3b82f6}.toast-info .toast-icon{color:#3b82f6}.toast-icon{flex-shrink:0;margin-top:.125rem}.toast-content{flex:1;min-width:0}.toast-title{font-size:.875rem;font-weight:600;color:#111827;margin-bottom:.25rem}.toast-message{font-size:.875rem;color:#6b7280;word-break:break-word}.toast-close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:transparent;border-radius:.25rem;color:#9ca3af;cursor:pointer;transition:all .2s}.toast-close:hover{background:#f3f4f6;color:#6b7280}@media(max-width:480px){.toast-container{left:1rem;right:1rem;max-width:none}}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;color:#111827;background:#f9fafb;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:1rem;background:#f9fafb}.app-loading .loading-spinner{width:40px;height:40px;border:3px solid #e5e7eb;border-top-color:#1e40af;border-radius:50%;animation:spin 1s linear infinite}.app-loading p{color:#6b7280;font-size:.875rem}@keyframes spin{to{transform:rotate(360deg)}}.placeholder-page{max-width:1400px;margin:0 auto}.placeholder-page h1{font-size:1.75rem;font-weight:700;color:#111827;margin-bottom:.5rem}.placeholder-page p{color:#6b7280}a{color:inherit}:focus-visible{outline:2px solid #1e40af;outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}