/* =================================================================== TAILWIND CSS — precompiled static build (replaces cdn.tailwindcss.com) Generated from the actual classes used in net-bill-pro.html/.js so the in-browser JIT compiler + its "should not be used in production" console warning are both gone. Same visual output, faster load. =================================================================== */ *,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-2{inset:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-3{top:.75rem}.top-4{top:1rem}.z-50{z-index:50}.col-span-2{grid-column:span 2/span 2}.col-span-4{grid-column:span 4/span 4}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-2\.5{margin-bottom:.625rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.\!grid{display:grid!important}.grid{display:grid}.hidden{display:none}.h-16{height:4rem}.h-24{height:6rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-8{height:2rem}.h-px{height:1px}.max-h-52{max-height:13rem}.max-h-60{max-height:15rem}.max-h-80{max-height:20rem}.max-h-\[90vh\]{max-height:90vh}.min-h-\[16px\]{min-height:16px}.min-h-\[40px\]{min-height:40px}.min-h-screen{min-height:100vh}.w-16{width:4rem}.w-24{width:6rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-8{width:2rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[140px\]{min-width:140px}.min-w-\[200px\]{min-width:200px}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.animate-ping{animation:ping 1s cubic-bezier(0,0,.2,1) infinite}.cursor-pointer{cursor:pointer}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-slate-700\/50>:not([hidden])~:not([hidden]){border-color:rgba(51,65,85,.5)}.divide-white\/5>:not([hidden])~:not([hidden]){border-color:hsla(0,0%,100%,.05)}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-lg{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-amber-500{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.border-amber-500\/20{border-color:rgba(245,158,11,.2)}.border-amber-500\/25{border-color:rgba(245,158,11,.25)}.border-amber-500\/30{border-color:rgba(245,158,11,.3)}.border-blue-500\/20{border-color:rgba(59,130,246,.2)}.border-blue-500\/25{border-color:rgba(59,130,246,.25)}.border-blue-500\/30{border-color:rgba(59,130,246,.3)}.border-cyan-500\/30{border-color:rgba(6,182,212,.3)}.border-emerald-500{--tw-border-opacity:1;border-color:rgb(16 185 129/var(--tw-border-opacity,1))}.border-green-500{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.border-green-500\/20{border-color:rgba(34,197,94,.2)}.border-green-500\/30{border-color:rgba(34,197,94,.3)}.border-orange-500{--tw-border-opacity:1;border-color:rgb(249 115 22/var(--tw-border-opacity,1))}.border-orange-500\/20{border-color:rgba(249,115,22,.2)}.border-orange-500\/30{border-color:rgba(249,115,22,.3)}.border-pink-500{--tw-border-opacity:1;border-color:rgb(236 72 153/var(--tw-border-opacity,1))}.border-pink-500\/20{border-color:rgba(236,72,153,.2)}.border-purple-500{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.border-purple-500\/20{border-color:rgba(168,85,247,.2)}.border-purple-500\/30{border-color:rgba(168,85,247,.3)}.border-red-500\/20{border-color:rgba(239,68,68,.2)}.border-rose-500\/20{border-color:rgba(244,63,94,.2)}.border-rose-500\/25{border-color:rgba(244,63,94,.25)}.border-rose-500\/30{border-color:rgba(244,63,94,.3)}.border-slate-500{--tw-border-opacity:1;border-color:rgb(100 116 139/var(--tw-border-opacity,1))}.border-slate-600{--tw-border-opacity:1;border-color:rgb(71 85 105/var(--tw-border-opacity,1))}.border-slate-700{--tw-border-opacity:1;border-color:rgb(51 65 85/var(--tw-border-opacity,1))}.border-slate-700\/50{border-color:rgba(51,65,85,.5)}.border-white\/5{border-color:hsla(0,0%,100%,.05)}.bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity,1))}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-amber-600{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.bg-amber-600\/80{background-color:rgba(217,119,6,.8)}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-blue-600\/80{background-color:rgba(37,99,235,.8)}.bg-cyan-600{--tw-bg-opacity:1;background-color:rgb(8 145 178/var(--tw-bg-opacity,1))}.bg-emerald-600{--tw-bg-opacity:1;background-color:rgb(5 150 105/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-500\/5{background-color:rgba(34,197,94,.05)}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-orange-500{--tw-bg-opacity:1;background-color:rgb(249 115 22/var(--tw-bg-opacity,1))}.bg-pink-500\/10{background-color:rgba(236,72,153,.1)}.bg-pink-500\/5{background-color:rgba(236,72,153,.05)}.bg-pink-600{--tw-bg-opacity:1;background-color:rgb(219 39 119/var(--tw-bg-opacity,1))}.bg-purple-500\/10{background-color:rgba(168,85,247,.1)}.bg-purple-500\/20{background-color:rgba(168,85,247,.2)}.bg-purple-500\/5{background-color:rgba(168,85,247,.05)}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-red-600\/80{background-color:rgba(220,38,38,.8)}.bg-rose-500\/10{background-color:rgba(244,63,94,.1)}.bg-rose-600{--tw-bg-opacity:1;background-color:rgb(225 29 72/var(--tw-bg-opacity,1))}.bg-slate-600{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.bg-slate-700{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.bg-slate-700\/50{background-color:rgba(51,65,85,.5)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-800\/80{background-color:rgba(30,41,59,.8)}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-900\/70{background-color:rgba(15,23,42,.7)}.bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity,1))}.bg-slate-950\/85{background-color:rgba(2,6,23,.85)}.bg-slate-950\/90{background-color:rgba(2,6,23,.9)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-tr{background-image:linear-gradient(to top right,var(--tw-gradient-stops))}.from-rose-600\/25{--tw-gradient-from:rgba(225,29,72,.25) var(--tw-gradient-from-position);--tw-gradient-to:rgba(225,29,72,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-rose-900\/40{--tw-gradient-from:rgba(136,19,55,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(136,19,55,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-purple-900\/20{--tw-gradient-to:rgba(88,28,135,.2) var(--tw-gradient-to-position)}.to-purple-950\/30{--tw-gradient-to:rgba(59,7,100,.3) var(--tw-gradient-to-position)}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-7{padding:1.75rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-4{padding-bottom:1rem}.pt-1{padding-top:.25rem}.pt-2{padding-top:.5rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[15px\]{font-size:15px}.text-\[9px\]{font-size:9px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-black{font-weight:900}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.normal-case{text-transform:none}.italic{font-style:italic}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}.text-amber-200{--tw-text-opacity:1;color:rgb(253 230 138/var(--tw-text-opacity,1))}.text-amber-300{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.text-blue-300{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-cyan-400{--tw-text-opacity:1;color:rgb(34 211 238/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-indigo-300{--tw-text-opacity:1;color:rgb(165 180 252/var(--tw-text-opacity,1))}.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.text-pink-400{--tw-text-opacity:1;color:rgb(244 114 182/var(--tw-text-opacity,1))}.text-purple-300{--tw-text-opacity:1;color:rgb(216 180 254/var(--tw-text-opacity,1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-rose-300{--tw-text-opacity:1;color:rgb(253 164 175/var(--tw-text-opacity,1))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.text-rose-400\/70{color:rgba(251,113,133,.7)}.text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity,1))}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.text-slate-300{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity,1))}.text-slate-500{--tw-text-opacity:1;color:rgb(100 116 139/var(--tw-text-opacity,1))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105/var(--tw-text-opacity,1))}.text-slate-950{--tw-text-opacity:1;color:rgb(2 6 23/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.blur{--tw-blur:blur(8px)}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-\[3px\]{--tw-backdrop-blur:blur(3px)}.backdrop-blur-\[3px\],.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.hover\:border-amber-500:hover{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.hover\:border-amber-500\/50:hover{border-color:rgba(245,158,11,.5)}.hover\:border-emerald-500:hover{--tw-border-opacity:1;border-color:rgb(16 185 129/var(--tw-border-opacity,1))}.hover\:border-green-500:hover{--tw-border-opacity:1;border-color:rgb(34 197 94/var(--tw-border-opacity,1))}.hover\:border-pink-500:hover{--tw-border-opacity:1;border-color:rgb(236 72 153/var(--tw-border-opacity,1))}.hover\:border-purple-400:hover{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.hover\:border-purple-500:hover{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.hover\:bg-amber-400:hover{--tw-bg-opacity:1;background-color:rgb(251 191 36/var(--tw-bg-opacity,1))}.hover\:bg-amber-600:hover{--tw-bg-opacity:1;background-color:rgb(217 119 6/var(--tw-bg-opacity,1))}.hover\:bg-blue-500:hover{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.hover\:bg-blue-600:hover{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.hover\:bg-blue-700:hover{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity,1))}.hover\:bg-cyan-500:hover{--tw-bg-opacity:1;background-color:rgb(6 182 212/var(--tw-bg-opacity,1))}.hover\:bg-emerald-500:hover{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.hover\:bg-green-500:hover{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.hover\:bg-orange-400:hover{--tw-bg-opacity:1;background-color:rgb(251 146 60/var(--tw-bg-opacity,1))}.hover\:bg-purple-500:hover{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.hover\:bg-red-500:hover{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity,1))}.hover\:bg-red-600:hover{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.hover\:bg-rose-500:hover{--tw-bg-opacity:1;background-color:rgb(244 63 94/var(--tw-bg-opacity,1))}.hover\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105/var(--tw-bg-opacity,1))}.hover\:bg-slate-700:hover{--tw-bg-opacity:1;background-color:rgb(51 65 85/var(--tw-bg-opacity,1))}.hover\:bg-slate-700\/30:hover{background-color:rgba(51,65,85,.3)}.hover\:text-amber-300:hover{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.hover\:text-amber-400:hover{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}.hover\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253/var(--tw-text-opacity,1))}.hover\:text-green-400:hover{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.hover\:text-red-300:hover{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.hover\:text-red-400:hover{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.hover\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(226 232 240/var(--tw-text-opacity,1))}.hover\:text-slate-300:hover{--tw-text-opacity:1;color:rgb(203 213 225/var(--tw-text-opacity,1))}.hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-amber-500\/10:hover{--tw-shadow-color:rgba(245,158,11,.1);--tw-shadow:var(--tw-shadow-colored)}.focus\:border-amber-400:focus{--tw-border-opacity:1;border-color:rgb(251 191 36/var(--tw-border-opacity,1))}.focus\:border-amber-500:focus{--tw-border-opacity:1;border-color:rgb(245 158 11/var(--tw-border-opacity,1))}.focus\:border-blue-500:focus{--tw-border-opacity:1;border-color:rgb(59 130 246/var(--tw-border-opacity,1))}.focus\:border-cyan-500:focus{--tw-border-opacity:1;border-color:rgb(6 182 212/var(--tw-border-opacity,1))}.focus\:border-green-400:focus{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.focus\:border-orange-500:focus{--tw-border-opacity:1;border-color:rgb(249 115 22/var(--tw-border-opacity,1))}.focus\:border-purple-400:focus{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.focus\:border-purple-500:focus{--tw-border-opacity:1;border-color:rgb(168 85 247/var(--tw-border-opacity,1))}.focus\:border-rose-500:focus{--tw-border-opacity:1;border-color:rgb(244 63 94/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.active\:scale-95:active{--tw-scale-x:.95;--tw-scale-y:.95}.active\:scale-95:active,.active\:scale-\[0\.98\]:active{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:scale-\[0\.98\]:active{--tw-scale-x:0.98;--tw-scale-y:0.98}.group:hover .group-hover\:rotate-45{--tw-rotate:45deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-amber-400{--tw-text-opacity:1;color:rgb(251 191 36/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}}@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:p-8{padding:2rem}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}} /* ================== END TAILWIND BUILD ================== */ /* * ISP Billing Pro — Billing Management System * Stylesheet * © 2024–2026 TrioTech Solutions. All Rights Reserved. * * This file contains all visual styling for both the Admin and * Staff portals: base theme variables, the liquid-glass design * system, layout rules, component styles, and animations. */ /* ============================================================ SECTION 1 — Loading Screen ============================================================ */ /* ========== LOADING SCREEN ========== */ #app-loading-screen { position: fixed; inset: 0; z-index: 999999; display: flex; justify-content: center; align-items: center; background: #020617; font-family: 'Segoe UI', system-ui, sans-serif; overflow: hidden; transition: opacity 0.55s ease, visibility 0.55s ease; } #app-loading-screen.hide { opacity:0; visibility:hidden; pointer-events:none; } #app-loading-screen::before { content:''; position:absolute; width:100%; height:100%; background-image: radial-gradient(white 1px, transparent 1px); background-size: 50px 50px; opacity:0.05; z-index:1; } .unique-loader { position:relative; z-index:2; text-align:center; } .data-core { position:relative; width:120px; height:120px; margin:0 auto 50px; } .core-hex { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:80px; height:80px; background:rgba(14,165,233,0.05); border:2px solid rgba(14,165,233,0.2); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); animation:corePulse 2s infinite ease-in-out; } .particle { position:absolute; width:6px; height:6px; background:#0ea5e9; border-radius:50%; box-shadow:0 0 10px #0ea5e9; opacity:0; } .particle:nth-child(1){top:-20px;left:-20px;animation:assemble 2.5s infinite 0.1s;} .particle:nth-child(2){top:-20px;left:140px;animation:assemble 2.5s infinite 0.3s;} .particle:nth-child(3){top:60px;left:160px;animation:assemble 2.5s infinite 0.5s;} .particle:nth-child(4){top:140px;left:140px;animation:assemble 2.5s infinite 0.7s;} .particle:nth-child(5){top:140px;left:-20px;animation:assemble 2.5s infinite 0.9s;} .particle:nth-child(6){top:60px;left:-40px;animation:assemble 2.5s infinite 1.1s;} .brand-frame { margin-top:20px; position:relative; } .tag { font-size:12px; font-weight:700; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:5px; margin-bottom:6px; display:inline-block; } .name-reveal { font-size:38px; font-weight:800; letter-spacing:-1px; position:relative; display:inline-block; } .name-part-1 { color:#f8fafc; } .name-part-2 { color:#0ea5e9; } .name-reveal::after { content:''; position:absolute; left:0; bottom:-5px; width:0; height:3px; background:linear-gradient(90deg,#f8fafc,#0ea5e9); border-radius:2px; animation:lineReveal 2.5s infinite ease-out; box-shadow:0 0 10px rgba(14,165,233,0.5); } .status { font-size:13px; color:#64748b; margin-top:15px; font-weight:500; animation:textFlicker 2.5s infinite; } @keyframes assemble { 0%{transform:scale(1);opacity:0;} 10%{opacity:1;} 50%{top:50%;left:50%;transform:translate(-50%,-50%) scale(1.5);opacity:1;} 60%{top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);opacity:0;} 100%{top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);opacity:0;} } @keyframes corePulse { 0%,100%{background:rgba(14,165,233,0.05);border-color:rgba(14,165,233,0.2);} 50%{background:rgba(14,165,233,0.15);border-color:rgba(14,165,233,0.5);} } @keyframes lineReveal { 0%{width:0;left:0;} 30%{width:100%;left:0;} 60%{width:0;left:100%;} 100%{width:0;left:100%;} } @keyframes textFlicker { 0%,15%,20%,30%,100%{opacity:1;} 17%{opacity:0.5;} 22%{opacity:0.7;} } /* ========== END LOADING SCREEN ========== */ body { font-family: 'Rajdhani', 'Noto Sans Bengali', 'Sora', sans-serif; } .screen-full { display: none; position: fixed; inset: 0; z-index: 50; } .screen-full.active { display: flex; align-items: center; justify-content: center; } .screen { display: none; min-height: 100vh; } .screen.active { display: block; } .logo-pulse { animation: pulse-glow 2.5s ease-in-out infinite; } @keyframes pulse-glow { 0%,100%{text-shadow:0 0 8px rgba(245,158,11,0.5)} 50%{text-shadow:0 0 20px rgba(245,158,11,0.9),0 0 40px rgba(245,158,11,0.4)} } .fade-in { animation: fadeInUp 0.45s ease forwards; } @keyframes fadeInUp { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} } #toast-container { position:fixed; top:18px; right:18px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; } .toast { min-width:220px; max-width:320px; padding:12px 16px; border-radius:14px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:10px; pointer-events:auto; opacity:0; transform:translateX(40px); animation:toastIn 0.28s cubic-bezier(0.22,1,0.36,1) forwards; box-shadow:0 8px 32px rgba(0,0,0,0.4); backdrop-filter:blur(4px); } .toast.out { animation:toastOut 0.22s ease forwards; } @keyframes toastIn { to{opacity:1;transform:translateX(0)} } @keyframes toastOut { to{opacity:0;transform:translateX(40px)} } .toast-success { background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.4); color:#6ee7b7; } .toast-error { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.4); color:#fca5a5; } .toast-info { background:rgba(59,130,246,0.15); border:1px solid rgba(59,130,246,0.4); color:#93c5fd; } .btn-loading { opacity:0.65; pointer-events:none; position:relative; } .btn-loading::after { content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:14px; height:14px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; } @keyframes spin { to{transform:translateY(-50%) rotate(360deg)} } #confirm-overlay { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.70); backdrop-filter:blur(4px); z-index:99998; align-items:center; justify-content:center; padding:16px; } #confirm-overlay.show { display:flex; } #confirm-box { background:#1e293b; border:1px solid #334155; border-radius:20px; padding:28px 24px; max-width:320px; width:100%; text-align:center; animation:fadeInUp 0.25s ease; } #reset-pass-overlay { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.70); backdrop-filter:blur(4px); z-index:99998; align-items:center; justify-content:center; padding:16px; } #reset-pass-overlay.show { display:flex; } #reset-pass-box { background:#1e293b; border:1px solid #334155; border-radius:20px; padding:28px 24px; max-width:320px; width:100%; text-align:center; animation:fadeInUp 0.25s ease; } /* ============================================================ SECTION 2 — Core Theme, Liquid Glass System, Layout & Components ============================================================ */ :root { --blue: #3b82f6; --blue-dim: rgba(59,130,246,0.15); --green: #10b981; --red: #ef4444; --amber: #f59e0b; --slate-950: #020617; --slate-900: #0f172a; --slate-800: #1e293b; --slate-700: #334155; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* System font stack — also works offline */ body { font-family: 'Rajdhani', 'Noto Sans Bengali', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: transparent; color: #f1f5f9; min-height: 100vh; overscroll-behavior: none; } body.lang-ur input, body.lang-ur textarea { direction: ltr; } /* === SCREENS === */ .screen-full { display:none; position:fixed; inset:0; z-index:50; } .screen-full.active { display:flex; align-items:center; justify-content:center; } .screen { display:none; min-height:100vh; } .screen.active { display:block; } /* === ANIMATIONS === */ .logo-pulse { animation: pulse-glow 2.5s ease-in-out infinite; } @keyframes pulse-glow { 0%,100% { text-shadow: 0 0 8px rgba(59,130,246,0.5); } 50% { text-shadow: 0 0 20px rgba(59,130,246,0.9), 0 0 40px rgba(59,130,246,0.3); } } .fade-in { animation: fadeInUp 0.4s ease forwards; } @keyframes fadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } @keyframes spin { to { transform: translateY(-50%) rotate(360deg); } } @keyframes devPulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)} 70%{box-shadow:0 0 0 5px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} } /* === TOAST === */ #staff-toast-container { position:fixed; top:16px; right:16px; z-index:99999; display:flex; flex-direction:column; gap:8px; pointer-events:none; max-width:calc(100vw - 32px); } .toast { min-width:200px; max-width:300px; padding:11px 15px; border-radius:14px; font-size:13px; font-weight:700; display:flex; align-items:center; gap:9px; pointer-events:auto; opacity:0; transform:translateX(40px); animation:toastIn 0.28s cubic-bezier(0.22,1,0.36,1) forwards; box-shadow:0 6px 24px rgba(0,0,0,0.5); backdrop-filter:blur(4px); } .toast.out { animation:toastOut 0.2s ease forwards; } @keyframes toastIn { to { opacity:1; transform:translateX(0); } } @keyframes toastOut { to { opacity:0; transform:translateX(40px); } } .toast-success { background:rgba(16,185,129,0.15); border:1px solid rgba(16,185,129,0.4); color:#6ee7b7; } .toast-error { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.4); color:#fca5a5; } .toast-info { background:rgba(59,130,246,0.15); border:1px solid rgba(59,130,246,0.4); color:#93c5fd; } /* === BTN LOADING === */ .btn-loading { opacity:0.65; pointer-events:none; position:relative; } .btn-loading::after { content:''; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:13px; height:13px; border:2px solid rgba(255,255,255,0.3); border-top-color:white; border-radius:50%; animation:spin 0.6s linear infinite; } /* === CONFIRM DIALOG === */ #staff-confirm-overlay { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.72); backdrop-filter:blur(4px); z-index:99998; align-items:center; justify-content:center; padding:16px; } #staff-confirm-overlay.show { display:flex; } #staff-confirm-box { background:#1e293b; border:1px solid #334155; border-radius:20px; padding:26px 22px; max-width:310px; width:100%; text-align:center; animation:fadeInUp 0.22s ease; } /* === LANG MODAL === */ #lang-modal { display:none; position:fixed; inset:0; background:rgba(2,6,23,0.72); backdrop-filter:blur(4px); z-index:99997; align-items:center; justify-content:center; padding:16px; } #lang-modal.show { display:flex; } .lang-btn { width:100%; padding:13px; border-radius:14px; border:1.5px solid #334155; background:#1e293b; color:#94a3b8; font-size:15px; font-weight:700; cursor:pointer; transition:all 0.2s ease; text-align:left; } .lang-btn:hover { border-color:var(--blue); color:#60a5fa; box-shadow:0 2px 10px rgba(59,130,246,0.15); } .lang-btn.active { border-color:var(--blue); background:var(--blue-dim); color:#60a5fa; box-shadow:0 2px 10px rgba(59,130,246,0.15); } /* === STATUS BARS === */ .status-bar { position:fixed; bottom:0; left:0; right:0; z-index:99996; padding:8px 16px; text-align:center; font-size:12px; font-weight:700; color:white; border-top:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(4px); transition:all 0.3s; } #offline-bar { background:rgba(239,68,68,0.95); display:none; } #syncing-bar { background:rgba(59,130,246,0.95); display:none; } #synced-bar { background:rgba(16,185,129,0.95); display:none; } /* === LOADING SCREEN === */ #app-loading-screen { position:fixed; inset:0; z-index:999999; display:flex; justify-content:center; align-items:center; background:#020617; font-family:'Segoe UI',system-ui,sans-serif; overflow:hidden; transition:opacity 0.55s ease,visibility 0.55s ease; } #app-loading-screen.hide{opacity:0;visibility:hidden;pointer-events:none;} #app-loading-screen::before{ content:'';position:absolute;width:100%;height:100%; background-image:radial-gradient(white 1px,transparent 1px); background-size:50px 50px;opacity:0.05;z-index:1; } .unique-loader{position:relative;z-index:2;text-align:center;} .data-core{position:relative;width:120px;height:120px;margin:0 auto 50px;} .core-hex{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%); width:80px;height:80px; background:rgba(14,165,233,0.05); border:2px solid rgba(14,165,233,0.2); clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); animation:corePulse 2s infinite ease-in-out; } .particle{ position:absolute;width:6px;height:6px; background:#0ea5e9;border-radius:50%; box-shadow:0 0 10px #0ea5e9;opacity:0; } .particle:nth-child(1){top:-20px;left:-20px;animation:assemble 2.5s infinite 0.1s;} .particle:nth-child(2){top:-20px;left:140px;animation:assemble 2.5s infinite 0.3s;} .particle:nth-child(3){top:60px;left:160px;animation:assemble 2.5s infinite 0.5s;} .particle:nth-child(4){top:140px;left:140px;animation:assemble 2.5s infinite 0.7s;} .particle:nth-child(5){top:140px;left:-20px;animation:assemble 2.5s infinite 0.9s;} .particle:nth-child(6){top:60px;left:-40px;animation:assemble 2.5s infinite 1.1s;} .brand-frame{margin-top:20px;position:relative;} .tag{ font-size:12px;font-weight:700; color:rgba(255,255,255,0.4); text-transform:uppercase;letter-spacing:5px; margin-bottom:6px;display:inline-block; } .name-reveal{ font-size:38px;font-weight:800;letter-spacing:-1px; position:relative;display:inline-block; } .name-part-1{color:#f8fafc;} .name-part-2{color:#0ea5e9;} .name-reveal::after{ content:'';position:absolute;left:0;bottom:-5px; width:0;height:3px; background:linear-gradient(90deg,#f8fafc,#0ea5e9); border-radius:2px; animation:lineReveal 2.5s infinite ease-out; box-shadow:0 0 10px rgba(14,165,233,0.5); } .status{ font-size:13px;color:#64748b;margin-top:15px; font-weight:500;animation:textFlicker 2.5s infinite; } @keyframes assemble{ 0%{transform:scale(1);opacity:0;} 10%{opacity:1;} 50%{top:50%;left:50%;transform:translate(-50%,-50%) scale(1.5);opacity:1;} 60%{top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);opacity:0;} 100%{top:50%;left:50%;transform:translate(-50%,-50%) scale(0.5);opacity:0;} } @keyframes corePulse{ 0%,100%{background:rgba(14,165,233,0.05);border-color:rgba(14,165,233,0.2);} 50%{background:rgba(14,165,233,0.15);border-color:rgba(14,165,233,0.5);} } @keyframes lineReveal{ 0%{width:0;left:0;}30%{width:100%;left:0;}60%{width:0;left:100%;}100%{width:0;left:100%;} } @keyframes textFlicker{ 0%,15%,20%,30%,100%{opacity:1;}17%{opacity:0.5;}22%{opacity:0.7;} } /* === END LOADING SCREEN === */ .custom-scroll { -webkit-overflow-scrolling: touch; } .custom-scroll::-webkit-scrollbar { width:4px; } .custom-scroll::-webkit-scrollbar-track { background:transparent; } .custom-scroll::-webkit-scrollbar-thumb { background:#334155; border-radius:4px; } /* === INPUT FOCUS RING === */ input:focus, textarea:focus { outline:none; box-shadow:0 0 0 2px rgba(59,130,246,0.3); } /* === OFFLINE BILL BADGE === */ .offline-badge { background:rgba(239,68,68,0.15); border:1px solid rgba(239,68,68,0.3); color:#fca5a5; padding:2px 7px; border-radius:8px; font-size:9px; font-weight:800; } /* === CARD HOVER === */ .bill-card { transition: border-color 0.15s, transform 0.15s; } .bill-card:active { transform: scale(0.99); } /* === RESPONSIVE CONTAINER === */ .app-container { max-width:100%; width:100%; } @media (min-width:768px) { .app-container { max-width:900px; margin:0 auto; padding:24px 32px; } #staff-app header { padding-bottom:18px; margin-bottom:24px; } .app-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; } .app-grid-full { grid-column:1 / -1; } } @media (min-width:1200px) { .app-container { max-width:1200px; padding:28px 40px; } } /* === PAYMENT METHOD === */ .payment-method-group { display:flex; gap:10px; } .pm-btn { flex:1; padding:10px 8px; border-radius:11px; border:1.5px solid #334155; background:#0f172a; color:#64748b; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.18s; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; } .pm-btn.active-cash { border-color:#10b981; background:rgba(16,185,129,0.1); color:#34d399; } .pm-btn.active-bkash { border-color:#e879f9; background:rgba(232,121,249,0.1); color:#e879f9; } .pm-btn.active-home { border-color:#a78bfa; background:rgba(167,139,250,0.12); color:#c084fc; } .pm-btn:hover { border-color:#475569; color:#94a3b8; } /* === CALCULATOR MODAL === */ /* === FULL RESPONSIVE ENHANCEMENTS (Tailwind + Custom) === */ /* Mobile-first base */ #staff-app { padding-bottom: 80px; } .staff-form-section { border-radius:18px; padding:16px; margin-bottom:14px; } /* Tablet (md: 768px+) */ @media (min-width: 768px) { .app-container { max-width: 900px; margin: 0 auto; padding: 24px 32px; } .app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } .app-grid-full { grid-column: 1 / -1; } #staff-app header h1 { font-size: 20px; } .staff-form-section { padding: 20px; } } /* Desktop (lg: 1024px+) */ @media (min-width: 1024px) { .app-container { max-width: 1100px; padding: 28px 40px; } .app-grid { grid-template-columns: 5fr 4fr; gap: 22px; } } /* Desktop XL (xl: 1280px+) */ @media (min-width: 1280px) { .app-container { max-width: 1280px; } .app-grid { grid-template-columns: 3fr 2fr; } } /* Recharge badge */ .recharge-btn { transition: all 0.2s; } .recharge-btn:active { transform: scale(0.95); } /* ================================================ ✨ LIQUID GLASS — Global Design System ================================================ */ /* === GLASS VARIABLES — Ultra Transparent === */ :root { --glass-bg: rgba(255,255,255,0.04); --glass-bg-med: rgba(255,255,255,0.06); --glass-bg-strong: rgba(255,255,255,0.09); --glass-border: rgba(255,255,255,0.18); --glass-border-med: rgba(255,255,255,0.22); /* Performance optimization: blur radius reduced (12px→6px, 18px→8px) — looks nearly identical, but puts far less load on mobile GPUs, so scrolling and animations run much smoother */ --glass-blur: blur(6px) saturate(150%); --glass-blur-heavy: blur(8px) saturate(160%); --glass-shine: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.02) 60%); --glass-shadow: 0 6px 32px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.12) inset; --glass-shadow-lg: 0 16px 48px rgba(0,0,0,0.30), 0 2px 0 rgba(255,255,255,0.14) inset; --glow-blue: 0 0 24px rgba(59,130,246,0.22); --glow-amber: 0 0 24px rgba(245,158,11,0.20); --glow-green: 0 0 24px rgba(16,185,129,0.20); --glow-red: 0 0 24px rgba(239,68,68,0.20); --glow-purple: 0 0 24px rgba(168,85,247,0.20); } /* === GLOBAL BACKGROUND — nature photo handled by #nature-bg div === */ body { background: transparent !important; } /* ================================================ ⚙️ SETTINGS PANELS — Admin Control Center & Staff Account A quieter, more considered pass on both settings modals: an identity "pass" stub for who's signed in, colour-coded section badges instead of bare emoji, and one consistent button language for every action across both panels. ================================================ */ .set-modal { position: relative; background: rgba(8,13,30,0.55) !important; backdrop-filter: var(--glass-blur-heavy) !important; -webkit-backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: var(--glass-shadow-lg); overflow: hidden; } .set-modal::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #f59e0b 0%, #a855f7 50%, #3b82f6 100%); z-index: 1; } .set-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; transition: all 0.2s ease; } .set-close:hover { background: rgba(255,255,255,0.12); color: #fff !important; } .set-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.38); margin-bottom: 4px; } .set-title { font-size: 20px; font-weight: 900; letter-spacing: 0.2px; } .set-section { background: rgba(255,255,255,0.035); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid rgba(255,255,255,0.10); border-left: 2.5px solid var(--set-accent, rgba(255,255,255,0.2)); border-radius: 16px; padding: 16px; } .set-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .set-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 14px; background: var(--set-accent-bg); border: 1px solid var(--set-accent-border); box-shadow: var(--set-accent-glow); } .set-section-title { font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; } .set-purple { --set-accent: #a855f7; --set-accent-bg: rgba(168,85,247,0.14); --set-accent-border: rgba(168,85,247,0.35); --set-accent-glow: var(--glow-purple); } .set-amber { --set-accent: #f59e0b; --set-accent-bg: rgba(245,158,11,0.14); --set-accent-border: rgba(245,158,11,0.35); --set-accent-glow: var(--glow-amber); } .set-blue { --set-accent: #3b82f6; --set-accent-bg: rgba(59,130,246,0.14); --set-accent-border: rgba(59,130,246,0.35); --set-accent-glow: var(--glow-blue); } /* --- Accordion behaviour for settings sections --- */ .set-accordion-toggle { background: transparent; border: none; width: 100%; text-align: left; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; } .set-section:not(.set-open) .set-section-head { margin-bottom: 0; } .set-accordion-toggle:active { opacity: 0.85; } .set-chevron { margin-left: auto; flex-shrink: 0; width: 15px; height: 15px; opacity: 0.55; transition: transform 0.22s ease, opacity 0.22s ease; } .set-section.set-open .set-chevron { transform: rotate(180deg); opacity: 0.95; } .set-section-body { display: none; margin-top: 14px; } .set-section.set-open .set-section-body { display: block; } /* --- Identity "pass" stub (Admin Control Center) --- */ .set-idcard { display: flex; flex-direction: column; gap: 12px; } .set-idcard-top { display: flex; align-items: center; gap: 12px; } .set-avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 900; color: #0b1120; background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 4px 14px rgba(245,158,11,0.25); } .set-idcard-divider { border-top: 1.5px dashed rgba(255,255,255,0.18); position: relative; } .set-idcard-divider::before, .set-idcard-divider::after { content: ''; position: absolute; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: #0b1120; } .set-idcard-divider::before { left: -16px; } .set-idcard-divider::after { right: -16px; } .set-chip-label { font-size: 10px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 5px; } .set-chip { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; letter-spacing: 0.2px; background: rgba(0,0,0,0.22); border: 1px dashed rgba(59,130,246,0.4); border-radius: 10px; padding: 9px 12px; word-break: break-all; } /* --- Shared settings inputs & buttons --- */ .set-input { width: 100%; background: rgba(0,0,0,0.28); border: 1.5px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 11px 13px; font-size: 13px; font-weight: 700; color: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .set-input:focus { outline: none; border-color: var(--set-accent, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--set-accent, #3b82f6) 18%, transparent); } .set-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 12px; border-radius: 13px; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s ease; } .set-btn-solid { background: linear-gradient(135deg, var(--set-accent, #3b82f6), color-mix(in srgb, var(--set-accent, #3b82f6) 70%, black)); color: #fff; box-shadow: 0 4px 16px color-mix(in srgb, var(--set-accent, #3b82f6) 35%, transparent); } .set-btn-solid:hover { filter: brightness(1.08); } .set-btn-danger { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.35); color: #fca5a5; box-shadow: 0 3px 14px rgba(239,68,68,0.10); } .set-btn-danger:hover { background: rgba(239,68,68,0.85); color: #fff; } .set-btn-ghost { background: linear-gradient(135deg, rgba(0,212,255,0.12), rgba(124,58,237,0.12)); border-color: rgba(0,212,255,0.30); color: #7dd8ff; } .set-btn-ghost:hover { background: linear-gradient(135deg, rgba(0,212,255,0.20), rgba(124,58,237,0.20)); } /* --- Staff list rows --- */ .staff-row-avatar { width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #a855f7, #7c3aed); flex-shrink: 0; } /* --- Staff account panel (lang-modal) identity chip --- */ .set-staff-chip { display: flex; align-items: center; gap: 10px; background: rgba(168,85,247,0.10); border: 1px solid rgba(168,85,247,0.28); border-radius: 14px; padding: 12px 14px; margin-top: 14px; } /* === LIQUID GLASS CARD — universal class === */ .glass-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 20px; box-shadow: var(--glass-shadow); position: relative; overflow: hidden; } .glass-card::before { content: ''; position: absolute; inset: 0; background: var(--glass-shine); pointer-events: none; border-radius: inherit; } /* === ALL SECTION CARDS — Ultra Transparent Glass === */ .bg-slate-800, .bg-slate-800\/80, [class*="bg-slate-800"], div[class*="bg-slate-800"] { background: rgba(8,15,35,0.28) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; border-color: rgba(255,255,255,0.20) !important; box-shadow: var(--glass-shadow) !important; position: relative; } .bg-slate-900, .bg-slate-900\/70, [class*="bg-slate-900"] { background: rgba(5,10,25,0.22) !important; backdrop-filter: var(--glass-blur) !important; -webkit-backdrop-filter: var(--glass-blur) !important; } /* === ADMIN DASHBOARD HEADER === */ #admin-app header { background: rgba(255,255,255,0.06); backdrop-filter: blur(7px) saturate(150%); border: 1px solid rgba(255,255,255,0.18); border-radius: 20px; padding: 16px 20px; box-shadow: var(--glass-shadow); } /* === STAFF HEADER === */ #staff-app header { background: rgba(255,255,255,0.06) !important; backdrop-filter: blur(7px) saturate(150%) !important; border: 1px solid rgba(255,255,255,0.18) !important; border-radius: 16px !important; padding: 12px 16px !important; box-shadow: var(--glass-shadow) !important; margin-bottom: 16px !important; } /* === TEXT READABILITY — works regardless of background photo brightness/color === */ h1, h2, h3, h4, .text-amber-400, .text-blue-400, .text-green-400, .text-slate-200, .text-slate-100, .text-white, [class*="text-amber"], [class*="text-blue"], [class*="text-green"], [class*="text-slate-2"], [class*="font-bold"], [class*="font-black"] { text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.75), 0 0 22px rgba(0,0,0,0.55), 0 0 2px rgba(255,255,255,0.12); } /* Muted/secondary text (labels, captions) — also needs to stay legible on any photo */ [class*="text-slate-4"], [class*="text-slate-5"], [class*="text-gray-4"] { text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.55); } /* Input text — no shadow needed */ input, textarea, select { text-shadow: none !important; } /* === LOGIN / SIGNUP CARDS — visible glass === */ #admin-login .bg-slate-900, #admin-signup .bg-slate-900, #admin-forgot .bg-slate-900, #license-blocked .bg-slate-900 { background: rgba(5,10,28,0.35) !important; backdrop-filter: var(--glass-blur-heavy) !important; -webkit-backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(255,255,255,0.20) !important; box-shadow: var(--glass-shadow-lg) !important; } /* === ISP PORTAL PRO — Liquid Glass Lock Screen + bKash Page === (scoped to #license-blocked and #bkash-page only — no effect on the rest of the app) */ #license-blocked .mono, #bkash-page .mono { font-family: 'Space Mono', monospace; } #bkash-page label { font-size: 13px; color: #94a3b8; font-weight: 600; display: block; margin-bottom: 8px; } #bkash-page .input-field { background: rgba(255,255,255,0.10); backdrop-filter: blur(7px) saturate(150%); -webkit-backdrop-filter: blur(7px) saturate(150%); border: 1px solid rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.50); border-radius: 14px; color: #e2e8f0; padding: 14px 16px; width: 100%; font-size: 14px; outline: none; font-family: inherit; transition: all 0.25s; box-shadow: 0 4px 16px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.45) inset, 0 -1px 0 rgba(0,0,0,0.12) inset; } #bkash-page .input-field:focus { border-color: rgba(0,200,255,0.55); border-top-color: rgba(0,220,255,0.80); background: rgba(0,180,255,0.08); box-shadow: 0 0 0 3px rgba(0,200,255,0.15), 0 4px 20px rgba(0,0,0,0.30), 0 1px 0 rgba(255,255,255,0.50) inset, 0 0 20px rgba(0,200,255,0.12); } #bkash-page .bkash-pink { color: #e2136e; } #bkash-page .bkash-bg { background: linear-gradient(145deg, rgba(226,19,110,0.75), rgba(180,10,80,0.70)); backdrop-filter: blur(7px) saturate(150%); -webkit-backdrop-filter: blur(7px) saturate(150%); color: white; border: 1px solid rgba(255,100,160,0.32); border-top-color: rgba(255,160,200,0.60); border-radius: 16px; padding: 14px; font-weight: 700; font-size: 14px; cursor: pointer; width: 100%; transition: all 0.2s; position: relative; overflow: hidden; box-shadow: 0 6px 28px rgba(226,19,110,0.32), 0 1px 0 rgba(255,180,210,0.50) inset, 0 -1px 0 rgba(0,0,0,0.14) inset; } #bkash-page .bkash-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 48%; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, transparent 100%); border-radius: 16px 16px 50% 50%; pointer-events: none; } #bkash-page .bkash-bg:hover { box-shadow: 0 10px 40px rgba(226,19,110,0.48), 0 1px 0 rgba(255,180,210,0.60) inset; transform: translateY(-2px); } /* Staff Login card */ #staff-login div[style*="background:#0f172a"] { background: rgba(10,15,35,0.30) !important; backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(59,130,246,0.28) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(59,130,246,0.08) !important; } /* === HUB SCREEN — fully transparent, video shows through === */ #hub-screen div[style*="max-width:340px"] { background: transparent; border: none; border-radius: 28px; padding: 36px 28px; box-shadow: none; position: relative; overflow: hidden; } #hub-screen div[style*="max-width:340px"]::before { content: none; } /* Hub buttons — lighter glass touch points */ #hub-screen button[data-jbid="jb-73"] { background: linear-gradient(135deg, rgba(245,158,11,0.14), rgba(217,119,6,0.08)) !important; border: 1px solid rgba(245,158,11,0.22) !important; box-shadow: 0 4px 16px rgba(245,158,11,0.08), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: blur(4px) !important; color: #fcd34d !important; transition: all 0.25s !important; } #hub-screen button[data-jbid="jb-74"] { background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(59,130,246,0.08)) !important; border: 1px solid rgba(59,130,246,0.22) !important; box-shadow: 0 4px 16px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,0.06) !important; backdrop-filter: blur(4px) !important; color: #93c5fd !important; transition: all 0.25s !important; } /* === CONFIRM / DIALOG MODALS — Glass === */ #confirm-box, #staff-confirm-box, #reset-pass-box { background: rgba(14,20,45,0.40) !important; backdrop-filter: var(--glass-blur-heavy) !important; -webkit-backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(255,255,255,0.20) !important; box-shadow: var(--glass-shadow-lg) !important; } /* === SETTINGS/LANG MODAL — now styled directly via .set-modal === */ /* === PAY COMMENT MODAL === */ #pay-comment-modal > div { background: rgba(8,18,40,0.38) !important; backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(16,185,129,0.20) !important; box-shadow: var(--glass-shadow-lg), var(--glow-green) !important; } /* === STAFF EDIT BILL MODAL === */ #edit-bill-modal > div { background: rgba(12,20,45,0.40) !important; backdrop-filter: var(--glass-blur-heavy) !important; -webkit-backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(59,130,246,0.28) !important; box-shadow: var(--glass-shadow-lg), var(--glow-blue) !important; } /* === SETTINGS MODAL === */ #settings-modal > div, #settings-modal div[class*="bg-slate"] { background: rgba(8,15,35,0.38) !important; backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(255,255,255,0.16) !important; } /* === STOP MODAL === */ #staff-stop-modal > div { background: rgba(8,15,30,0.38) !important; backdrop-filter: var(--glass-blur-heavy) !important; border: 1px solid rgba(239,68,68,0.28) !important; box-shadow: var(--glass-shadow-lg), var(--glow-red) !important; } #staff-stop-modal div[style*="background:#0f172a"] { background: rgba(15,20,45,0.28) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(239,68,68,0.18) !important; } /* === ADMIN BILL FORM CARD (Staff) === */ .app-grid-full[style*="linear-gradient"] { background: linear-gradient(145deg, rgba(19,31,53,0.30), rgba(26,39,68,0.25), rgba(30,41,59,0.22)) !important; backdrop-filter: var(--glass-blur) !important; border: 1.5px solid rgba(59,130,246,0.25) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.25), 0 0 30px rgba(59,130,246,0.06), inset 0 1px 0 rgba(255,255,255,0.10) !important; } /* === BILL HISTORY CARDS === Performance fix: previously this forced a heavy backdrop-filter blur onto EVERY rendered bill row via !important, silently overriding the solid background already set inline in JS. With many bills in the list, that meant dozens of GPU-heavy blur layers rendering at once — the main cause of app-wide lag. Now it just adds a subtle border/shadow and lets the solid background (set inline per-row) do the work, no blur. */ .bill-card { border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 2px 10px rgba(0,0,0,0.15); } /* === STATUS SUMMARY BADGES (top of admin) === */ .bg-green-500\/5, .bg-pink-500\/5, .bg-purple-500\/5 { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(6px) !important; } /* === TABLE HEADERS === */ thead[style*="background:#0f172a"], thead tr { background: rgba(255,255,255,0.04) !important; backdrop-filter: blur(6px) !important; } /* === PAYMENT METHOD BUTTONS — Glass === */ .pm-btn { background: rgba(255,255,255,0.06) !important; border: 1.5px solid rgba(255,255,255,0.16) !important; backdrop-filter: blur(12px) !important; color: #94a3b8 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10) !important; transition: all 0.2s !important; } .pm-btn.active-cash { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.35) !important; color:#34d399 !important; box-shadow: 0 0 16px rgba(16,185,129,0.15) !important; } .pm-btn.active-bkash { background: rgba(232,121,249,0.12) !important; border-color: rgba(232,121,249,0.35) !important; color:#e879f9 !important; box-shadow: 0 0 16px rgba(232,121,249,0.15) !important; } .pm-btn.active-home { background: rgba(167,139,250,0.12) !important; border-color: rgba(167,139,250,0.35) !important; color:#c084fc !important; box-shadow: 0 0 16px rgba(167,139,250,0.15) !important; } /* === ALL INPUT FIELDS — Liquid Glass === */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], textarea, select { background: rgba(255,255,255,0.08) !important; backdrop-filter: blur(12px) saturate(180%) !important; -webkit-backdrop-filter: blur(12px) saturate(180%) !important; border: 1.5px solid rgba(255,255,255,0.18) !important; border-radius: 13px !important; color: inherit !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.10) !important; transition: all 0.25s ease !important; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, textarea:focus, select:focus { background: rgba(255,255,255,0.08) !important; border-color: rgba(59,130,246,0.50) !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), 0 0 0 3px rgba(59,130,246,0.12), 0 0 20px rgba(59,130,246,0.10) !important; outline: none !important; } /* bill-input-field special glass */ .bill-input-field { background: rgba(255,255,255,0.05) !important; border: 1.5px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.07) !important; } .bill-input-field:focus { background: rgba(59,130,246,0.08) !important; border-color: rgba(59,130,246,0.45) !important; box-shadow: inset 0 2px 10px rgba(0,0,0,0.2), 0 0 0 3px rgba(59,130,246,0.12), 0 0 24px rgba(59,130,246,0.12) !important; } /* Stop modal inline inputs */ #stop-item, #stop-amount, #stop-note { background: rgba(255,255,255,0.05) !important; border: 1.5px solid rgba(255,255,255,0.10) !important; border-radius: 12px !important; box-shadow: inset 0 2px 8px rgba(0,0,0,0.25) !important; color: #e2e8f0 !important; transition: all 0.2s !important; } #stop-item:focus, #stop-amount:focus, #stop-note:focus { border-color: rgba(239,68,68,0.45) !important; background: rgba(239,68,68,0.06) !important; box-shadow: 0 0 0 3px rgba(239,68,68,0.10) !important; } /* Staff login inline inputs */ #input-admin-email, #input-staff-name { background: rgba(255,255,255,0.05) !important; border: 1.5px solid rgba(255,255,255,0.10) !important; border-radius: 14px !important; } /* === TOAST — Glass === */ .toast { backdrop-filter: blur(5px) saturate(180%) !important; -webkit-backdrop-filter: blur(5px) saturate(180%) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08) !important; } .toast-success { background: rgba(16,185,129,0.12) !important; border-color: rgba(16,185,129,0.30) !important; } .toast-error { background: rgba(239,68,68,0.12) !important; border-color: rgba(239,68,68,0.30) !important; } .toast-info { background: rgba(59,130,246,0.12) !important; border-color: rgba(59,130,246,0.30) !important; } /* === OFFLINE STATUS BAR — Glass === */ .status-bar { backdrop-filter: blur(8px) !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.4) !important; } /* === ICON BUTTONS (header) — Glass === */ button[style*="background:#1e293b"], button[class*="bg-slate-800"] { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.18) !important; backdrop-filter: blur(12px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important; transition: all 0.2s !important; } /* === EXTRA SECTIONS TOGGLE BUTTON === */ #extra-sections-toggle { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(8px) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: var(--glass-shadow) !important; } /* === FILTER BUTTONS (Payment filter row) === */ button[id^="pf-"] { backdrop-filter: blur(6px) !important; transition: all 0.2s !important; } /* === LIFETIME MONTHLY GRID CARDS === */ #lifetime-monthly-grid > div, #archive-summary > div { background: rgba(255,255,255,0.05) !important; backdrop-filter: blur(12px) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.20) !important; } /* === GENERAL TEXT READABILITY === */ body, p, span, label, div { text-shadow: 0 1px 4px rgba(0,0,0,0.60); } /* === LOADING SCREEN glass orb === */ .data-core .core-hex { background: rgba(14,165,233,0.08) !important; border: 2px solid rgba(14,165,233,0.25) !important; box-shadow: 0 0 40px rgba(14,165,233,0.12) !important; } /* === COPYRIGHT FOOTER — glass === */ div[style*="background:rgba(2,6,23,0.70)"] { background: rgba(2,6,23,0.35) !important; backdrop-filter: blur(12px) !important; border-top: 1px solid rgba(255,255,255,0.10) !important; } /* === SUBMIT BUTTON — enhanced glass glow === */ .submit-btn-glow { background: linear-gradient(135deg, rgba(5,150,105,0.8), rgba(16,185,129,0.7), rgba(52,211,153,0.6)) !important; backdrop-filter: blur(6px) !important; border: 1px solid rgba(16,185,129,0.35) !important; box-shadow: 0 4px 20px rgba(16,185,129,0.30), inset 0 1px 0 rgba(255,255,255,0.15) !important; } /* === SHIMMER ANIMATION ON CARDS === */ @keyframes glassShimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* === SCROLLBAR — glass styled === */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 4px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); } /* ✅ PERFORMANCE OPTIMIZATIONS */ #nature-bg { transform: translateZ(0); will-change: opacity; } .bill-card { content-visibility: auto; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ================================================ ✨ ULTRA GLASS — Inline Style Override Makes all hardcoded dark divs transparent ================================================ */ /* All section cards that use inline style #0f172a or #1e293b */ #staff-app div[style*="background:#0f172a"], #staff-app div[style*="background: #0f172a"], #admin-app div[style*="background:#0f172a"], #admin-app div[style*="background: #0f172a"] { background: rgba(8,15,35,0.28) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border-color: rgba(255,255,255,0.14) !important; } #staff-app div[style*="background:#1e293b"], #staff-app div[style*="background: #1e293b"], #admin-app div[style*="background:#1e293b"], #admin-app div[style*="background: #1e293b"] { background: rgba(12,20,45,0.28) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; border-color: rgba(255,255,255,0.14) !important; } /* Bill cards (JS-generated) */ div[style*="background:#0f172a"][style*="border-radius:12px"], div[style*="background:#0f172a"][style*="border-radius: 12px"] { background: rgba(8,15,35,0.28) !important; backdrop-filter: blur(14px) saturate(180%) !important; -webkit-backdrop-filter: blur(14px) saturate(180%) !important; } /* Submitted bills section, Admin notice, Sales log */ div[style*="background:#1e293b"][style*="border-radius:18px"], div[style*="background:#1e293b"][style*="border-radius: 18px"], div[style*="background:#1e293b"][style*="border-radius:20px"], div[style*="background:#1e293b"][style*="border-radius: 20px"] { background: rgba(12,20,45,0.25) !important; backdrop-filter: blur(8px) saturate(160%) !important; -webkit-backdrop-filter: blur(8px) saturate(160%) !important; border-color: rgba(255,255,255,0.16) !important; } /* Offline pending section */ #offline-pending-section { background: rgba(20,10,10,0.28) !important; backdrop-filter: blur(14px) !important; border-color: rgba(239,68,68,0.30) !important; } /* Hub screen login card */ div[style*="background:#1e293b"][style*="border-radius:20px"][style*="max-width:340px"], div[style*="background:#1e293b"][style*="max-width:340px"] { background: rgba(12,20,45,0.28) !important; backdrop-filter: blur(18px) saturate(200%) !important; border-color: rgba(59,130,246,0.28) !important; } /* Small inner inputs keep slightly darker for contrast */ div[style*="background:#020617"], input[style*="background:#020617"] { background: rgba(2,6,23,0.30) !important; } /* Stop list inner items */ div[style*="background:#0f172a"][style*="border-radius:12px"] { background: rgba(8,15,35,0.28) !important; backdrop-filter: blur(12px) !important; } /* ================================================ */ /* ============================================================ SECTION 3 — Developer Contact Pulse Animation ============================================================ */ @keyframes devPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,0.5)}70%{box-shadow:0 0 0 5px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}} /* ============================================================ SECTION 4 — Bill Entry Form Animations ============================================================ */ /* ── Form animations ── */ @keyframes formSlideIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } @keyframes inputFocusGlow { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 5px rgba(59,130,246,0.12); } 100% { box-shadow: 0 0 0 3px rgba(59,130,246,0.18); } } @keyframes submitPulse { 0%,100% { box-shadow: 0 4px 20px rgba(16,185,129,0.35); } 50% { box-shadow: 0 6px 30px rgba(16,185,129,0.65); } } @keyframes labelFloat { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:translateX(0); } } @keyframes successRipple { 0% { transform:scale(1); opacity:1; } 100% { transform:scale(2.8); opacity:0; } } .bill-form-wrap { animation: formSlideIn 0.4s cubic-bezier(0.22,1,0.36,1) both; } .bill-form-wrap > div { animation: formSlideIn 0.35s cubic-bezier(0.22,1,0.36,1) both; } .bill-form-wrap > div:nth-child(1) { animation-delay:0.04s; } .bill-form-wrap > div:nth-child(2) { animation-delay:0.08s; } .bill-form-wrap > div:nth-child(3) { animation-delay:0.12s; } .bill-form-wrap > div:nth-child(4) { animation-delay:0.16s; } .bill-form-wrap > div:nth-child(5) { animation-delay:0.20s; } .bill-form-wrap > button { animation: formSlideIn 0.4s 0.24s cubic-bezier(0.22,1,0.36,1) both; } .bill-input-field { width:100%; background: linear-gradient(160deg, #0d1c33, #0a1628); border:1.5px solid #1e3a5f; border-radius:14px; padding:12px 14px; text-align:center; font-weight:900; box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03); transition: border-color 0.22s, box-shadow 0.22s, background 0.22s, transform 0.15s; } .bill-input-field:hover { border-color:#2d4d75; } .bill-input-field:focus { border-color:#3b82f6; background: linear-gradient(160deg, #123055, #0d1f3c); box-shadow: inset 0 2px 6px rgba(0,0,0,0.2), 0 0 0 3px rgba(59,130,246,0.15), 0 0 20px rgba(59,130,246,0.12); animation: inputFocusGlow 0.5s ease forwards; } .bill-input-field::placeholder { color:#475569; font-weight:600; letter-spacing:0.2px; } .bill-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; color:#7c93b8; margin-bottom:7px; letter-spacing:0.6px; text-transform:uppercase; animation: labelFloat 0.3s ease both; } .submit-btn-glow { width:100%; background:linear-gradient(135deg,#059669,#10b981,#34d399); background-size:200% 200%; border:none; color:white; font-weight:900; padding:15px; border-radius:14px; cursor:pointer; font-size:15px; letter-spacing:0.8px; position:relative; overflow:hidden; transition: transform 0.15s, opacity 0.2s; animation: submitPulse 2.5s ease-in-out infinite; } .submit-btn-glow:hover { transform:translateY(-1px); } .submit-btn-glow:active { transform:scale(0.98); } .submit-btn-glow::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent); pointer-events:none; } /* ripple effect on submit */ .btn-ripple { position:absolute; border-radius:50%; background:rgba(255,255,255,0.3); width:60px; height:60px; margin-top:-30px; margin-left:-30px; animation:successRipple 0.6s linear; pointer-events:none; } /* === LOGIN / HUB VIDEO BACKGROUND — Mobile & PC Responsive === */ /* Use dvh where supported so mobile address-bar show/hide doesn't leave a gap or jump at the bottom of the video */ @supports (height: 100dvh) { .login-bg-video { height: 100dvh !important; } } /* Ultra-wide desktop monitors (21:9 etc.) — cap zoom so faces/subject in the video don't get cropped too aggressively */ @media (min-width: 1600px) { .login-bg-video { object-position: center 35%; } } /* Tablet & up — the login/hub cards were sized for phones (24rem / 380px). On bigger screens that looks small and lost in the middle of the video, so we scale the card up a bit. */ @media (min-width: 768px) { #hub-screen > div[style*="max-width:340px"] { max-width: 420px; } #admin-login .max-w-sm { max-width: 420px; } #staff-login > div[style*="max-width:380px"] { max-width: 460px; } } /* Desktop — scale a touch more, and give the video a subtle vignette so the centered card reads clearly against any footage */ @media (min-width: 1200px) { #hub-screen > div[style*="max-width:340px"] { max-width: 460px; } #admin-login .max-w-sm { max-width: 460px; } #staff-login > div[style*="max-width:380px"] { max-width: 500px; } #hub-screen, #admin-login, #staff-login { background-image: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.35) 100%) !important; } }