@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");*,: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:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;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:JetBrains Mono,Fira Code,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%!important}.container{width:100%}@media (min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media (min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media (min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media (min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media (min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{top:0;bottom:0}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.right-3{right:.75rem}.top-0{top:0}.top-1\/2{top:50%}.top-3{top:.75rem}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.mx-1\.5{margin-left:.375rem;margin-right:.375rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-4{margin-top:1rem;margin-bottom:1rem}.-ml-1{margin-left:-.25rem}.-ml-2{margin-left:-.5rem}.mb-0\.5{margin-bottom:.125rem}.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}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mr-1\.5{margin-right:.375rem}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-auto{margin-top:auto}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-64{height:16rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-10{width:2.5rem}.w-11{width:2.75rem}.w-12{width:3rem}.w-14{width:3.5rem}.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-48{width:12rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[700px\]{min-width:700px}.min-w-full{min-width:100%}.max-w-2xl{max-width:42rem}.max-w-7xl{max-width:80rem}.max-w-\[200px\]{max-width:200px}.max-w-\[220px\]{max-width:220px}.max-w-\[50\%\]{max-width:50%}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{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))}.-translate-y-1\/2{--tw-translate-y:-50%}.rotate-180{--tw-rotate:180deg}.rotate-180,.scale-100{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))}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.scale-95,.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 pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance: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))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.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}.gap-6{gap:1.5rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem*var(--tw-space-x-reverse));margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px*var(--tw-space-y-reverse))}.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-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem*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-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))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem*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-neutral-800>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(38 38 38/var(--tw-divide-opacity,1))}.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}.overflow-x-hidden{overflow-x:hidden}.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-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-4{border-left-width:4px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-amber-500\/20{border-color:rgba(245,158,11,.2)}.border-amber-500\/40{border-color:rgba(245,158,11,.4)}.border-amber-700{--tw-border-opacity:1;border-color:rgb(180 83 9/var(--tw-border-opacity,1))}.border-blue-500\/20{border-color:rgba(59,130,246,.2)}.border-emerald-500\/20{border-color:rgba(16,185,129,.2)}.border-green-500\/20{border-color:rgba(34,197,94,.2)}.border-green-500\/40{border-color:rgba(34,197,94,.4)}.border-green-700{--tw-border-opacity:1;border-color:rgb(21 128 61/var(--tw-border-opacity,1))}.border-green-800\/40{border-color:rgba(22,101,52,.4)}.border-indigo-500\/20{border-color:rgba(99,102,241,.2)}.border-neutral-100{--tw-border-opacity:1;border-color:rgb(245 245 245/var(--tw-border-opacity,1))}.border-neutral-200{--tw-border-opacity:1;border-color:rgb(229 229 229/var(--tw-border-opacity,1))}.border-neutral-300{--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}.border-neutral-500\/20{border-color:hsla(0,0%,45%,.2)}.border-neutral-600{--tw-border-opacity:1;border-color:rgb(82 82 82/var(--tw-border-opacity,1))}.border-neutral-700{--tw-border-opacity:1;border-color:rgb(64 64 64/var(--tw-border-opacity,1))}.border-neutral-700\/30{border-color:rgba(64,64,64,.3)}.border-neutral-700\/50{border-color:rgba(64,64,64,.5)}.border-neutral-800{--tw-border-opacity:1;border-color:rgb(38 38 38/var(--tw-border-opacity,1))}.border-orange-500\/20{border-color:rgba(249,115,22,.2)}.border-primary-500\/30{border-color:rgba(245,166,35,.3)}.border-red-200{--tw-border-opacity:1;border-color:rgb(254 202 202/var(--tw-border-opacity,1))}.border-red-500\/30{border-color:rgba(239,68,68,.3)}.border-red-500\/40{border-color:rgba(239,68,68,.4)}.border-red-700{--tw-border-opacity:1;border-color:rgb(185 28 28/var(--tw-border-opacity,1))}.border-red-700\/50{border-color:rgba(185,28,28,.5)}.border-red-800\/40{border-color:rgba(153,27,27,.4)}.border-rose-500\/20{border-color:rgba(244,63,94,.2)}.border-teal-500\/20{border-color:rgba(20,184,166,.2)}.border-white\/10{border-color:hsla(0,0%,100%,.1)}.border-l-primary-500{--tw-border-opacity:1;border-left-color:rgb(245 166 35/var(--tw-border-opacity,1))}.bg-amber-500\/10{background-color:rgba(245,158,11,.1)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity,1))}.bg-blue-500\/10{background-color:rgba(59,130,246,.1)}.bg-blue-500\/20{background-color:rgba(59,130,246,.2)}.bg-emerald-500\/10{background-color:rgba(16,185,129,.1)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.bg-green-500\/10{background-color:rgba(34,197,94,.1)}.bg-green-500\/20{background-color:rgba(34,197,94,.2)}.bg-green-950\/20{background-color:rgba(5,46,22,.2)}.bg-indigo-500\/10{background-color:rgba(99,102,241,.1)}.bg-neutral-100{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.bg-neutral-200{--tw-bg-opacity:1;background-color:rgb(229 229 229/var(--tw-bg-opacity,1))}.bg-neutral-50{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.bg-neutral-500\/10{background-color:hsla(0,0%,45%,.1)}.bg-neutral-700{--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}.bg-neutral-800{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.bg-neutral-800\/40{background-color:rgba(38,38,38,.4)}.bg-neutral-800\/50{background-color:rgba(38,38,38,.5)}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23/var(--tw-bg-opacity,1))}.bg-neutral-900\/50{background-color:hsla(0,0%,9%,.5)}.bg-neutral-950\/40{background-color:hsla(0,0%,4%,.4)}.bg-orange-500\/10{background-color:rgba(249,115,22,.1)}.bg-primary-100{--tw-bg-opacity:1;background-color:rgb(254 243 226/var(--tw-bg-opacity,1))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgb(255 251 245/var(--tw-bg-opacity,1))}.bg-primary-500\/20{background-color:rgba(245,166,35,.2)}.bg-primary-600{--tw-bg-opacity:1;background-color:rgb(219 143 16/var(--tw-bg-opacity,1))}.bg-purple-500\/20{background-color:rgba(168,85,247,.2)}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-500\/10{background-color:rgba(239,68,68,.1)}.bg-red-500\/20{background-color:rgba(239,68,68,.2)}.bg-red-900\/30{background-color:rgba(127,29,29,.3)}.bg-red-950\/20{background-color:rgba(69,10,10,.2)}.bg-rose-500\/10{background-color:rgba(244,63,94,.1)}.bg-slate-800{--tw-bg-opacity:1;background-color:rgb(30 41 59/var(--tw-bg-opacity,1))}.bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))}.bg-slate-900\/80{background-color:rgba(15,23,42,.8)}.bg-slate-900\/95{background-color:rgba(15,23,42,.95)}.bg-teal-500\/10{background-color:rgba(20,184,166,.1)}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/10{background-color:hsla(0,0%,100%,.1)}.bg-white\/5{background-color:hsla(0,0%,100%,.05)}.bg-white\/\[0\.01\]{background-color:hsla(0,0%,100%,.01)}.bg-white\/\[0\.02\]{background-color:hsla(0,0%,100%,.02)}.bg-white\/\[0\.03\]{background-color:hsla(0,0%,100%,.03)}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity,1))}.bg-yellow-500\/20{background-color:rgba(234,179,8,.2)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-green-100{--tw-gradient-from:#dcfce7 var(--tw-gradient-from-position);--tw-gradient-to:rgba(220,252,231,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e var(--tw-gradient-from-position);--tw-gradient-to:rgba(34,197,94,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary-100{--tw-gradient-from:#fef3e2 var(--tw-gradient-from-position);--tw-gradient-to:hsla(36,93%,94%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-primary-500{--tw-gradient-from:#f5a623 var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,166,35,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-red-100{--tw-gradient-from:#fee2e2 var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,93%,94%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.to-green-200{--tw-gradient-to:#bbf7d0 var(--tw-gradient-to-position)}.to-green-600{--tw-gradient-to:#16a34a var(--tw-gradient-to-position)}.to-primary-200{--tw-gradient-to:#fde4bf var(--tw-gradient-to-position)}.to-primary-600{--tw-gradient-to:#db8f10 var(--tw-gradient-to-position)}.to-red-200{--tw-gradient-to:#fecaca var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-12{padding:3rem}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.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-4{padding-left:1rem;padding-right:1rem}.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-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-12{padding-top:3rem;padding-bottom:3rem}.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}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-4{padding-bottom:1rem}.pl-9{padding-left:2.25rem}.pr-3{padding-right:.75rem}.pr-8{padding-right:2rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:JetBrains Mono,Fira Code,monospace}.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-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.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-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-relaxed{line-height:1.625}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.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-400{--tw-text-opacity:1;color:rgb(96 165 250/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-emerald-400{--tw-text-opacity:1;color:rgb(52 211 153/var(--tw-text-opacity,1))}.text-green-300{--tw-text-opacity:1;color:rgb(134 239 172/var(--tw-text-opacity,1))}.text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity,1))}.text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity,1))}.text-neutral-100{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.text-neutral-200{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.text-neutral-300{--tw-text-opacity:1;color:rgb(212 212 212/var(--tw-text-opacity,1))}.text-neutral-400{--tw-text-opacity:1;color:rgb(163 163 163/var(--tw-text-opacity,1))}.text-neutral-500{--tw-text-opacity:1;color:rgb(115 115 115/var(--tw-text-opacity,1))}.text-neutral-600{--tw-text-opacity:1;color:rgb(82 82 82/var(--tw-text-opacity,1))}.text-neutral-700{--tw-text-opacity:1;color:rgb(64 64 64/var(--tw-text-opacity,1))}.text-neutral-900{--tw-text-opacity:1;color:rgb(23 23 23/var(--tw-text-opacity,1))}.text-orange-400{--tw-text-opacity:1;color:rgb(251 146 60/var(--tw-text-opacity,1))}.text-primary{--tw-text-opacity:1;color:rgb(245 166 35/var(--tw-text-opacity,1))}.text-primary-400{--tw-text-opacity:1;color:rgb(248 188 92/var(--tw-text-opacity,1))}.text-primary-500{--tw-text-opacity:1;color:rgb(245 166 35/var(--tw-text-opacity,1))}.text-primary-600{--tw-text-opacity:1;color:rgb(219 143 16/var(--tw-text-opacity,1))}.text-primary-700{--tw-text-opacity:1;color:rgb(181 117 13/var(--tw-text-opacity,1))}.text-purple-400{--tw-text-opacity:1;color:rgb(192 132 252/var(--tw-text-opacity,1))}.text-red-200{--tw-text-opacity:1;color:rgb(254 202 202/var(--tw-text-opacity,1))}.text-red-300{--tw-text-opacity:1;color:rgb(252 165 165/var(--tw-text-opacity,1))}.text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-red-700{--tw-text-opacity:1;color:rgb(185 28 28/var(--tw-text-opacity,1))}.text-rose-400{--tw-text-opacity:1;color:rgb(251 113 133/var(--tw-text-opacity,1))}.text-teal-400{--tw-text-opacity:1;color:rgb(45 212 191/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.text-white\/20{color:hsla(0,0%,100%,.2)}.text-white\/30{color:hsla(0,0%,100%,.3)}.text-white\/40{color:hsla(0,0%,100%,.4)}.text-white\/50{color:hsla(0,0%,100%,.5)}.text-white\/60{color:hsla(0,0%,100%,.6)}.text-white\/70{color:hsla(0,0%,100%,.7)}.text-white\/80{color:hsla(0,0%,100%,.8)}.text-yellow-400{--tw-text-opacity:1;color:rgb(250 204 21/var(--tw-text-opacity,1))}.text-yellow-600{--tw-text-opacity:1;color:rgb(202 138 4/var(--tw-text-opacity,1))}.text-yellow-800{--tw-text-opacity:1;color:rgb(133 77 14/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-white\/40::-moz-placeholder{color:hsla(0,0%,100%,.4)}.placeholder-white\/40::placeholder{color:hsla(0,0%,100%,.4)}.opacity-0{opacity:0}.opacity-100{opacity:1}.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-2xl,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-md,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-green-500\/30{--tw-shadow-color:rgba(34,197,94,.3);--tw-shadow:var(--tw-shadow-colored)}.shadow-primary-200\/50{--tw-shadow-color:hsla(36,94%,87%,.5);--tw-shadow:var(--tw-shadow-colored)}.shadow-primary-500\/30{--tw-shadow-color:rgba(245,166,35,.3);--tw-shadow:var(--tw-shadow-colored)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.blur{--tw-blur:blur(8px)}.blur,.grayscale{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)}.grayscale{--tw-grayscale:grayscale(100%)}.invert{--tw-invert:invert(100%)}.filter,.invert{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-md{--tw-backdrop-blur:blur(12px)}.backdrop-blur-md,.backdrop-blur-sm{-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)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px)}.backdrop-blur-xl,.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-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-100{transition-duration:.1s}.duration-150{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.duration-75{transition-duration:75ms}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.htmx-indicator{opacity:0;transition:opacity .2s ease-in}.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}.file\:mr-3::file-selector-button{margin-right:.75rem}.file\:rounded-md::file-selector-button{border-radius:.375rem}.file\:border-0::file-selector-button{border-width:0}.file\:bg-neutral-700::file-selector-button{--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}.file\:px-3::file-selector-button{padding-left:.75rem;padding-right:.75rem}.file\:py-2::file-selector-button{padding-top:.5rem;padding-bottom:.5rem}.file\:text-xs::file-selector-button{font-size:.75rem;line-height:1rem}.file\:font-semibold::file-selector-button{font-weight:600}.file\:text-white::file-selector-button{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:left-\[2px\]:after{content:var(--tw-content);left:2px}.after\:top-\[2px\]:after{content:var(--tw-content);top:2px}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:w-5:after{content:var(--tw-content);width:1.25rem}.after\:rounded-full:after{content:var(--tw-content);border-radius:9999px}.after\:border:after{content:var(--tw-content);border-width:1px}.after\:border-neutral-300:after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(212 212 212/var(--tw-border-opacity,1))}.after\:bg-white:after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.after\:transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:content-\[\'\'\]:after{--tw-content:"";content:var(--tw-content)}.hover\:border-primary-500\/30:hover{border-color:rgba(245,166,35,.3)}.hover\:border-white\/20:hover{border-color:hsla(0,0%,100%,.2)}.hover\:bg-amber-500\/10:hover{background-color:rgba(245,158,11,.1)}.hover\:bg-green-400:hover{--tw-bg-opacity:1;background-color:rgb(74 222 128/var(--tw-bg-opacity,1))}.hover\:bg-green-500\/10:hover{background-color:rgba(34,197,94,.1)}.hover\:bg-neutral-100:hover{--tw-bg-opacity:1;background-color:rgb(245 245 245/var(--tw-bg-opacity,1))}.hover\:bg-neutral-50:hover{--tw-bg-opacity:1;background-color:rgb(250 250 250/var(--tw-bg-opacity,1))}.hover\:bg-neutral-600:hover{--tw-bg-opacity:1;background-color:rgb(82 82 82/var(--tw-bg-opacity,1))}.hover\:bg-neutral-700:hover{--tw-bg-opacity:1;background-color:rgb(64 64 64/var(--tw-bg-opacity,1))}.hover\:bg-neutral-800:hover{--tw-bg-opacity:1;background-color:rgb(38 38 38/var(--tw-bg-opacity,1))}.hover\:bg-neutral-800\/20:hover{background-color:rgba(38,38,38,.2)}.hover\:bg-neutral-800\/40:hover{background-color:rgba(38,38,38,.4)}.hover\:bg-primary-500:hover{--tw-bg-opacity:1;background-color:rgb(245 166 35/var(--tw-bg-opacity,1))}.hover\:bg-primary-600\/20:hover{background-color:rgba(219,143,16,.2)}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:bg-red-500\/10:hover{background-color:rgba(239,68,68,.1)}.hover\:bg-white\/10:hover{background-color:hsla(0,0%,100%,.1)}.hover\:bg-white\/15:hover{background-color:hsla(0,0%,100%,.15)}.hover\:bg-white\/\[0\.04\]:hover{background-color:hsla(0,0%,100%,.04)}.hover\:bg-white\/\[0\.06\]:hover{background-color:hsla(0,0%,100%,.06)}.hover\:from-green-600:hover{--tw-gradient-from:#16a34a var(--tw-gradient-from-position);--tw-gradient-to:rgba(22,163,74,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:from-primary-600:hover{--tw-gradient-from:#db8f10 var(--tw-gradient-from-position);--tw-gradient-to:rgba(219,143,16,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:to-green-700:hover{--tw-gradient-to:#15803d var(--tw-gradient-to-position)}.hover\:to-primary-700:hover{--tw-gradient-to:#b5750d var(--tw-gradient-to-position)}.hover\:text-amber-300:hover{--tw-text-opacity:1;color:rgb(252 211 77/var(--tw-text-opacity,1))}.hover\:text-neutral-100:hover{--tw-text-opacity:1;color:rgb(245 245 245/var(--tw-text-opacity,1))}.hover\:text-neutral-200:hover{--tw-text-opacity:1;color:rgb(229 229 229/var(--tw-text-opacity,1))}.hover\:text-primary-300:hover{--tw-text-opacity:1;color:rgb(251 208 143/var(--tw-text-opacity,1))}.hover\:text-primary-600:hover{--tw-text-opacity:1;color:rgb(219 143 16/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-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.hover\:text-white\/70:hover{color:hsla(0,0%,100%,.7)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px 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-green-500\/40:hover{--tw-shadow-color:rgba(34,197,94,.4);--tw-shadow:var(--tw-shadow-colored)}.hover\:shadow-primary-500\/40:hover{--tw-shadow-color:rgba(245,166,35,.4);--tw-shadow:var(--tw-shadow-colored)}.hover\:file\:bg-neutral-600::file-selector-button:hover{--tw-bg-opacity:1;background-color:rgb(82 82 82/var(--tw-bg-opacity,1))}.focus\:border-primary-500:focus{--tw-border-opacity:1;border-color:rgb(245 166 35/var(--tw-border-opacity,1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-1:focus,.focus\:ring-2:focus{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.focus\:ring-primary-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(245 166 35/var(--tw-ring-opacity,1))}.focus\:ring-primary-500\/20:focus{--tw-ring-color:rgba(245,166,35,.2)}.focus-visible\:outline:focus-visible{outline-style:solid}.focus-visible\:outline-2:focus-visible{outline-width:2px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-primary-600:focus-visible{outline-color:#db8f10}.group:hover .group-hover\:text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.peer:checked~.peer-checked\:bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity,1))}.peer:checked~.peer-checked\:after\:translate-x-full:after{content:var(--tw-content);--tw-translate-x:100%;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))}.peer:checked~.peer-checked\:after\:border-white:after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity,1))}.peer:focus~.peer-focus\:outline-none{outline:2px solid transparent;outline-offset:2px}.peer:focus~.peer-focus\:ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus~.peer-focus\:ring-primary-300{--tw-ring-opacity:1;--tw-ring-color:rgb(251 208 143/var(--tw-ring-opacity,1))}@media (min-width:640px){.sm\:inline{display:inline}.sm\:w-64{width:16rem}.sm\:w-auto{width:auto}.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-end{align-items:flex-end}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:p-5{padding:1.25rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}.sm\:py-4{padding-top:1rem;padding-bottom:1rem}.sm\:text-2xl{font-size:1.5rem;line-height:2rem}.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}@media (min-width:768px){.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}}@media (min-width:1024px){.lg\:block{display:block}.lg\:flex{display:flex}.lg\:table-cell{display:table-cell}.lg\:hidden{display:none}.lg\:translate-x-0{--tw-translate-x:0px;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))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:p-6{padding:1.5rem}.lg\:p-8{padding:2rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1280px){.xl\:block{display:block}.xl\:table-cell{display:table-cell}.xl\:hidden{display:none}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1536px){.\32xl\:table-cell{display:table-cell}}
/* ==========================================================================
   Finderr — design tokens
   Aligned to Finderr Brand Guidelines v1.0
   Black = Charcoal #191919 · White = Smoke #F7F7F7
   ========================================================================== */

:root {
  /* Brand — Tiger
     Tiger is the primary. Tiger Deep (--primary-700) is the only orange
     approved for text and fine detail on light backgrounds. */
  --primary: #F58A1F;              /* Tiger */
  --primary-dark: #B3600F;         /* Tiger Deep */
  --primary-light: #FCD8AE;
  --primary-50: #FFF9F2;
  --primary-100: #FEEFDC;
  --primary-200: #FCD8AE;
  --primary-500: #F58A1F;          /* Tiger */
  --primary-600: #D97710;
  --primary-700: #B3600F;          /* Tiger Deep */

  /* Secondary — Charcoal */
  --secondary: #191919;            /* Charcoal */
  --secondary-dark: #0F0F0F;
  --secondary-light: #4A4A4A;
  --secondary-50: #F7F7F7;         /* Smoke */
  --secondary-100: #EDEDED;

  /* Neutrals — a single warmth-neutral ramp from Smoke to Charcoal.
     --white is Smoke, per brand. Use --pure-white only where a true
     255 white is technically required (print plates, image mattes). */
  --white: #F7F7F7;                /* Smoke */
  --pure-white: #FFFFFF;
  --gray-25: #FBFBFB;
  --gray-50: #F7F7F7;              /* Smoke */
  --gray-100: #F0F0F0;
  --gray-200: #E3E3E3;
  --gray-300: #CFCFCF;
  --gray-400: #A3A3A3;
  --gray-500: #757575;
  --gray-600: #545454;
  --gray-700: #3D3D3D;
  --gray-800: #292929;
  --gray-900: #191919;             /* Charcoal */

  /* Semantic — tuned to sit beside Tiger without competing with it */
  --success: #0F7038;
  --success-light: #F1F9F4;
  --success-50: #F1F9F4;
  --warning: #7F5E00;
  --warning-light: #FBF6E8;
  --danger: #B1301F;
  --danger-light: #FCF1EF;
  --info: #0A6A80;
  --info-light: #EFF7F9;

  /* Category colours — five hues, each with a single-hue gradient.
     Gradient rule: 135deg, two stops, same hue, one step apart in
     lightness only. No hue rotation, no third stop, and never on Tiger —
     the brand colour stays flat so it reads as the identity, not decoration. */
  --pet-color: #6D3DD1;
  --pet-light: #F4F1FC;
  --pet-gradient: linear-gradient(135deg, #6D3DD1 0%, #8F63E0 100%);

  --child-color: #D6337C;
  --child-light: #FCF0F5;
  --child-gradient: linear-gradient(135deg, #D6337C 0%, #E85F9B 100%);

  --elder-color: #0B7E96;
  --elder-light: #EFF8FA;
  --elder-gradient: linear-gradient(135deg, #0B7E96 0%, #16A3BE 100%);

  --car-color: #C64A11;
  --car-light: #FDF3EE;
  --car-gradient: linear-gradient(135deg, #C64A11 0%, #E4763A 100%);

  --item-color: #17803D;
  --item-light: #F1F8F3;
  --item-gradient: linear-gradient(135deg, #17803D 0%, #29A857 100%);

  /* Typography — Author for headings and subheads, Satoshi for everything
     else. No tracking at any size, including uppercase labels. */
  --font-family: 'Satoshi', system-ui, sans-serif;
  --font-display: 'Author', 'Satoshi', system-ui, sans-serif;
  --font-weight-heading: 600;      /* Author Semibold */
  --font-weight-subheading: 500;   /* Author Medium */
  --font-weight-body: 400;         /* Satoshi Regular */
  --letter-spacing: 0;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* Shadows — cast in Charcoal rather than blue-black */
  --shadow-xs: 0 1px 2px rgba(25, 25, 25, 0.05);
  --shadow-sm: 0 1px 3px rgba(25, 25, 25, 0.10), 0 1px 2px rgba(25, 25, 25, 0.06);
  --shadow-md: 0 4px 8px -2px rgba(25, 25, 25, 0.10), 0 2px 4px -2px rgba(25, 25, 25, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(25, 25, 25, 0.08), 0 4px 6px -2px rgba(25, 25, 25, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(25, 25, 25, 0.08), 0 8px 8px -4px rgba(25, 25, 25, 0.03);
  --shadow-2xl: 0 24px 48px -12px rgba(25, 25, 25, 0.18);
  --shadow-glow: 0 0 0 4px var(--primary-100);
  --shadow-glow-secondary: 0 0 0 4px var(--secondary-100);

  /* Glass Effect */
  --glass-bg: rgba(247, 247, 247, 0.80);
  --glass-border: rgba(247, 247, 247, 0.50);
  --glass-blur: blur(20px);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   Dark theme
   Charcoal is the ground, Smoke is the type. Tiger stays the accent, but
   lightens for text — Tiger Deep is a light-background colour only.
   Spacing, radii, type and transitions are unchanged.
   ========================================================================== */

:root[data-theme="dark"],
[data-theme="dark"] {
  /* Neutrals — the Smoke→Charcoal ramp, inverted. Charcoal #191919 is the
     page; surfaces step up in lightness rather than down. */
  --white: #232323;                /* default surface (cards, sheets) */
  --gray-25: #141414;
  --gray-50: #191919;              /* Charcoal — page ground */
  --gray-100: #232323;
  --gray-200: #2F2F2F;
  --gray-300: #3D3D3D;
  --gray-400: #6B6B6B;
  --gray-500: #9A9A9A;
  --gray-600: #BDBDBD;
  --gray-700: #D6D6D6;
  --gray-800: #EDEDED;
  --gray-900: #F7F7F7;             /* Smoke — primary text */

  /* Brand — Tiger holds as the accent fill. For orange TEXT on Charcoal,
     use --primary-dark: Tiger Deep is unreadable here, so it flips up. */
  --primary-dark: #FAA84A;
  --primary-light: #FAA84A;
  --primary-50: rgba(245, 138, 31, 0.10);
  --primary-100: rgba(245, 138, 31, 0.18);
  --primary-200: rgba(245, 138, 31, 0.28);
  --primary-700: #FAA84A;

  /* Secondary — inverts: Charcoal's role is now carried by Smoke */
  --secondary: #F7F7F7;            /* Smoke */
  --secondary-dark: #FFFFFF;
  --secondary-light: #BDBDBD;
  --secondary-50: #232323;
  --secondary-100: #2F2F2F;

  /* Semantic — bases lightened to stay legible on Charcoal, tints as
     low-alpha washes over the ground rather than solid pale fills */
  --success: #3FBF74;
  --success-light: rgba(63, 191, 116, 0.12);
  --success-50: rgba(63, 191, 116, 0.12);
  --warning: #DFA92A;
  --warning-light: rgba(223, 169, 42, 0.12);
  --danger: #E8695C;
  --danger-light: rgba(232, 105, 92, 0.12);
  --info: #35B0CE;
  --info-light: rgba(53, 176, 206, 0.12);

  /* Category colours — same five hues, lifted for dark ground.
     Gradients keep the rule: 135deg, two stops, single hue. */
  --pet-color: #9A78E6;
  --pet-light: rgba(154, 120, 230, 0.12);
  --pet-gradient: linear-gradient(135deg, #8256DE 0%, #A98FEC 100%);

  --child-color: #F06BA4;
  --child-light: rgba(240, 107, 164, 0.12);
  --child-gradient: linear-gradient(135deg, #E64F8F 0%, #F58BB8 100%);

  --elder-color: #35B0CE;
  --elder-light: rgba(53, 176, 206, 0.12);
  --elder-gradient: linear-gradient(135deg, #1B9BBA 0%, #4FC3DC 100%);

  --car-color: #E4763A;
  --car-light: rgba(228, 118, 58, 0.12);
  --car-gradient: linear-gradient(135deg, #D65E23 0%, #EE9260 100%);

  --item-color: #35B96A;
  --item-light: rgba(53, 185, 106, 0.12);
  --item-gradient: linear-gradient(135deg, #1FA455 0%, #4FCB82 100%);

  /* Glass Effect */
  --glass-bg: rgba(35, 35, 35, 0.80);
  --glass-border: rgba(247, 247, 247, 0.12);

  /* Shadows — deeper and softer; on a dark ground elevation reads from
     the surface step above, not from the shadow */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.50), 0 4px 6px -2px rgba(0, 0, 0, 0.30);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.55), 0 8px 8px -4px rgba(0, 0, 0, 0.30);
  --shadow-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 4px rgba(245, 138, 31, 0.20);
  --shadow-glow-secondary: 0 0 0 4px rgba(247, 247, 247, 0.14);
}

/* ============================= */
/* Reset & Base                  */
/* ============================= */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--gray-900);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-6);
  gap: var(--space-6);
}

/* ============================= */
/* Demo Navigation               */
/* ============================= */

.demo-nav {
  position: fixed;
  top: var(--space-6);
  left: var(--space-6);
  width: 220px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  z-index: 1000;
}

.demo-nav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
}

.demo-nav-title {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}

.demo-nav-toggle {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: none;
  transition: var(--transition-fast);
}

.demo-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
}

.demo-nav-menu {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: var(--space-3);
}

.demo-nav-menu::-webkit-scrollbar {
  width: 6px;
}

.demo-nav-menu::-webkit-scrollbar-track {
  background: transparent;
}

.demo-nav-menu::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: var(--radius-full);
}

.demo-nav-section {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-400);
  padding: var(--space-3) var(--space-2) var(--space-1);
  margin-top: var(--space-2);
}

.demo-nav-section:first-child {
  margin-top: 0;
}

.demo-nav button:not(.demo-nav-toggle) {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.demo-nav button:not(.demo-nav-toggle):hover {
  background: var(--primary-50);
  color: var(--primary);
}

/* ============================= */
/* Phone Frame - Premium         */
/* ============================= */

.phone-frame {
  width: 390px;
  min-height: 844px;
  background: linear-gradient(145deg, #2d2d2d 0%, #1a1a1a 100%);
  border-radius: 54px;
  padding: 14px;
  box-shadow:
    var(--shadow-2xl),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  margin-left: 240px;
  position: relative;
}

.phone-frame::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 32px;
  background: #1a1a1a;
  border-radius: 20px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 816px;
  background: var(--white);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* ============================= */
/* Screen System                 */
/* ============================= */

.screen {
  display: none;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--white);
  scroll-behavior: smooth;
}

.screen::-webkit-scrollbar {
  width: 0;
}

.screen.active {
  display: flex;
  flex-direction: column;
  animation: screenFadeIn 0.4s ease;
}

@keyframes screenFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* Header - Refined              */
/* ============================= */

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  padding-top: var(--space-12);
  background: var(--white);
  flex-shrink: 0;
  position: relative;
  z-index: 5;
}

.back-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-full);
  font-size: 18px;
  cursor: pointer;
  color: var(--gray-700);
  transition: var(--transition-base);
}

.back-btn:hover {
  background: var(--gray-100);
  transform: translateX(-2px);
}

.back-btn:active {
  transform: scale(0.95);
}

.header-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

.header-spacer {
  width: 44px;
}

.header-action {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.header-action:hover {
  background: var(--primary-50);
}

/* ============================= */
/* Buttons - Premium             */
/* ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: var(--transition-base);
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: var(--transition-fast);
}

.btn:hover::before {
  opacity: 1;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  color: white;
  box-shadow:
    0 1px 2px rgba(14, 95, 150, 0.3),
    0 4px 12px rgba(14, 95, 150, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-primary:hover {
  box-shadow:
    0 1px 2px rgba(14, 95, 150, 0.4),
    0 8px 20px rgba(14, 95, 150, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

.btn-secondary {
  background: var(--gray-50);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}

.btn-secondary:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.btn-outline {
  background: var(--white);
  border: 2px solid var(--gray-200);
  color: var(--gray-700);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-50);
}

.btn-danger-outline {
  background: var(--white);
  border: 2px solid var(--danger);
  color: var(--danger);
}

.btn-danger-outline:hover {
  background: var(--danger-light);
}

.btn-large {
  padding: var(--space-4) var(--space-6);
  font-size: 16px;
  border-radius: var(--radius-lg);
}

.btn-small {
  padding: var(--space-2) var(--space-4);
  font-size: 14px;
}

.btn-full {
  width: 100%;
}

.btn-icon {
  font-size: 18px;
  line-height: 1;
}

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.btn-link:hover {
  background: var(--primary-50);
}

/* ============================= */
/* Scanner Screens - Premium     */
/* ============================= */

.scan-header {
  padding: var(--space-12) var(--space-5) var(--space-8);
  text-align: center;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.scan-header::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, currentColor 0%, transparent 70%);
  opacity: 0.08;
}

.scan-header-pet {
  color: var(--pet-color);
  background: linear-gradient(180deg, var(--pet-light) 0%, var(--white) 100%);
}

.scan-header-child {
  color: var(--child-color);
  background: linear-gradient(180deg, var(--child-light) 0%, var(--white) 100%);
}

.scan-header-elder {
  color: var(--elder-color);
  background: linear-gradient(180deg, var(--elder-light) 0%, var(--white) 100%);
}

.scan-header-car {
  color: var(--car-color);
  background: linear-gradient(180deg, var(--car-light) 0%, var(--white) 100%);
}

.scan-header-item {
  color: var(--item-color);
  background: linear-gradient(180deg, var(--item-light) 0%, var(--white) 100%);
}

.scan-badge {
  width: 72px;
  height: 72px;
  background: var(--white);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    box-shadow: var(--shadow-lg), 0 0 0 0 rgba(0, 0, 0, 0.1);
  }

  50% {
    box-shadow: var(--shadow-lg), 0 0 0 8px rgba(0, 0, 0, 0.05);
  }
}

.scan-badge-icon {
  font-size: 36px;
}

.scan-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  margin-bottom: var(--space-2);
}

.scan-subtitle {
  font-size: 15px;
  color: var(--gray-500);
  font-weight: 450;
}

.scan-content {
  flex: 1;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.scan-profile {
  text-align: center;
  margin-bottom: var(--space-6);
}

.scan-avatar {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto var(--space-4);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-xl);
  position: relative;
}

.scan-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.scan-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  font-weight: 700;
  color: white;
}

.scan-avatar-child {
  background: var(--child-gradient);
}

.scan-avatar-elder {
  background: var(--elder-gradient);
}

.scan-avatar-car {
  background: var(--car-gradient);
}

.scan-avatar-item {
  background: var(--item-gradient);
}

.scan-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
}

.scan-detail {
  font-size: 15px;
  color: var(--gray-500);
  font-weight: 450;
}

.scan-alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--warning-light);
  border: 1px solid rgba(247, 144, 9, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  font-weight: 500;
  color: var(--gray-800);
  font-size: 14px;
}

.scan-alert-critical {
  background: var(--danger-light);
  border-color: rgba(240, 68, 56, 0.2);
}

.scan-alert-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.scan-info-card {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}

.scan-info-row {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--gray-200);
}

.scan-info-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.scan-info-row:first-child {
  padding-top: 0;
}

.scan-info-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

.scan-info-value {
  display: block;
  font-size: 15px;
  color: var(--gray-800);
  font-weight: 450;
}

.scan-info-reward {
  background: linear-gradient(135deg, rgba(245, 166, 35, 0.15) 0%, rgba(245, 166, 35, 0.05) 100%);
  margin: var(--space-3) calc(-1 * var(--space-4)) 0;
  margin-bottom: calc(-1 * var(--space-4));
  padding: var(--space-4);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  border-top: 1px solid rgba(245, 166, 35, 0.2);
}

.scan-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: auto;
}

.scan-footer-note {
  text-align: center;
  font-size: 13px;
  color: var(--gray-400);
  margin-top: var(--space-4);
  font-weight: 450;
}

/* Car-specific actions */
.scan-car-prompt {
  text-align: center;
  font-size: 15px;
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  font-weight: 450;
}

.scan-car-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.btn-car-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--white);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
}

.btn-car-action:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
  transform: translateY(-2px);
}

.btn-car-action.selected {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: var(--shadow-glow);
}

.btn-car-icon {
  font-size: 28px;
}

.btn-car-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  text-align: center;
  line-height: 1.3;
}

/* ============================= */
/* Message Owner Screen          */
/* ============================= */

.message-recipient {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
}

.message-recipient-avatar {
  width: 52px;
  height: 52px;
  background: var(--pet-gradient);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 22px;
  box-shadow: var(--shadow-sm);
}

.message-recipient-label {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 500;
}

.message-recipient-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--gray-900);
}

/* ============================= */
/* Forms - Premium               */
/* ============================= */

.form-container {
  flex: 1;
  padding: var(--space-5);
  overflow-y: auto;
}

.form-scrollable {
  padding-bottom: 120px;
}

.form-intro {
  margin-bottom: var(--space-6);
}

.form-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
  color: var(--gray-900);
}

.form-subtitle {
  font-size: 15px;
  color: var(--gray-500);
  font-weight: 450;
}

.form-visibility-note {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--info-light) 0%, rgba(11, 165, 236, 0.05) 100%);
  border: 1px solid rgba(11, 165, 236, 0.15);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--gray-700);
  font-weight: 450;
}

.visibility-icon {
  font-size: 20px;
}

.form-section {
  margin-bottom: var(--space-6);
}

.form-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-row {
  display: flex;
  gap: var(--space-4);
}

.form-group-half {
  flex: 1;
}

.form-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
}

.form-label-row .form-label {
  margin-bottom: 0;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 450;
  color: var(--gray-900);
  background: var(--white);
  transition: var(--transition-base);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--gray-300);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--gray-400);
  font-weight: 400;
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23667085' viewBox='0 0 20 20'%3E%3Cpath d='M10 12.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
  cursor: pointer;
}

.form-hint {
  font-size: 13px;
  color: var(--gray-400);
  margin-top: var(--space-2);
  font-weight: 450;
}

.form-hint-important {
  color: var(--warning);
}

.form-terms {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  margin-top: var(--space-6);
  line-height: 1.6;
}

.form-terms a {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.form-terms a:hover {
  text-decoration: underline;
}

.form-privacy-note {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  margin-top: var(--space-5);
  font-weight: 450;
}

/* Form Error Message */
.form-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--danger-light);
  border: 1px solid rgba(240, 68, 56, 0.2);
  border-radius: var(--radius-lg);
  font-size: 14px;
  color: var(--danger);
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.form-error-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--danger);
  font-weight: 500;
  margin-top: var(--space-2);
}

/* Checkbox Card Content */
.checkbox-card-content {
  flex: 1;
}

/* Phone Input Group */
.phone-input-group {
  display: flex;
  gap: var(--space-3);
}

.phone-country-code {
  width: 90px;
  flex-shrink: 0;
}

.phone-input {
  flex: 1;
}

/* Visibility Toggle - Premium */
.visibility-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.visibility-toggle input {
  display: none;
}

.toggle-slider {
  width: 48px;
  height: 28px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  position: relative;
  transition: var(--transition-base);
}

.toggle-slider::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--white);
  border-radius: var(--radius-full);
  top: 3px;
  left: 3px;
  transition: var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.visibility-toggle input:checked+.toggle-slider {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.visibility-toggle input:checked+.toggle-slider::after {
  left: 23px;
}

.visibility-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-500);
  letter-spacing: 0.02em;
}

.visibility-badge.visible {
  background: linear-gradient(135deg, var(--info-light) 0%, rgba(11, 165, 236, 0.15) 100%);
  color: var(--primary);
}

/* Photo Upload - Premium */
.photo-upload {
  width: 100%;
  height: 200px;
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

#photo-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 200px;
  overflow: hidden;
}

#photo-preview-img {
  width: 100%;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
}

.photo-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-8);
  width: 100%;
  height: 100%;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  z-index: 1;
}

.photo-upload-placeholder:hover {
  border-color: var(--primary);
  background: var(--primary-50);
  border-style: solid;
}

.photo-upload-icon {
  font-size: 40px;
  opacity: 0.8;
}

.photo-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
}

/* Radio Cards - Premium */
.radio-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-base);
  margin-bottom: var(--space-3);
  background: var(--white);
}

.radio-card:hover {
  border-color: var(--gray-300);
  background: var(--gray-50);
}

.radio-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-50);
  box-shadow: var(--shadow-glow);
}

.radio-card input {
  margin-top: 2px;
  accent-color: var(--primary);
  width: 18px;
  height: 18px;
}

.radio-card-content {
  flex: 1;
}

.radio-card-title {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 2px;
  color: var(--gray-900);
}

.radio-card-desc {
  display: block;
  font-size: 13px;
  color: var(--gray-500);
  font-weight: 450;
}

/* Checkbox Cards */
.checkbox-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: var(--transition-base);
}

.checkbox-card:hover {
  border-color: var(--gray-300);
}

.checkbox-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-50);
}

.checkbox-card input {
  accent-color: var(--primary);
  width: 20px;
  height: 20px;
}

.checkbox-card-title {
  font-weight: 500;
  font-size: 15px;
}

/* OTP Input - Premium */
.otp-input-group {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: var(--space-6);
  box-sizing: border-box;
}

.otp-input {
  flex: 1;
  max-width: 52px;
  min-width: 0;
  height: 64px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  font-family: var(--font-family);
  color: var(--gray-900);
  transition: var(--transition-base);
  box-sizing: border-box;
}

.otp-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

@media (max-width: 480px) {
  .otp-input-group {
    gap: 6px;
  }
  .otp-input {
    font-size: 22px;
    height: 54px;
  }
}

.otp-resend {
  text-align: center;
  margin-top: var(--space-6);
}

.otp-resend p {
  font-size: 14px;
  color: var(--gray-400);
  margin-bottom: var(--space-2);
}

.otp-timer {
  font-size: 14px;
  color: var(--gray-400);
  margin-left: var(--space-1);
  font-weight: 500;
}

/* Emergency Contact Card */
.emergency-contact-card {
  padding: var(--space-4);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  background: var(--gray-50);
}

.emergency-contact-card .form-group:last-child {
  margin-bottom: 0;
}

/* ============================= */
/* Welcome Screen - Premium      */
/* ============================= */

.welcome-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-5);
  background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
}

.login-card .welcome-container {
  background: transparent !important;
  padding: 0 !important;
}

.welcome-logo {
  text-align: center;
  margin-top: var(--space-8);
  margin-bottom: var(--space-10);
}

.logo-icon {
  margin-bottom: var(--space-4);
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.logo-text {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: var(--space-3);
  color: var(--gray-900);
}

.welcome-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  text-align: center;
  max-width: 300px;
  margin-bottom: var(--space-8);
  font-weight: 450;
  line-height: 1.5;
}

.welcome-features {
  width: 100%;
  max-width: 300px;
}

.welcome-feature {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--gray-100);
}

.welcome-feature:last-child {
  border-bottom: none;
}

.welcome-feature-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-50);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.welcome-feature-text {
  font-size: 15px;
  color: var(--gray-700);
  font-weight: 500;
}

.welcome-actions {
  margin-top: auto;
  width: 100%;
}

.welcome-login-link {
  text-align: center;
  font-size: 14px;
  color: var(--gray-400);
  margin-top: var(--space-5);
  font-weight: 450;
}

.welcome-login-link a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.welcome-login-link a:hover {
  text-decoration: underline;
}

.login-form {
  margin-top: var(--space-6);
}

/* ============================= */
/* Tag Type Selection - Premium  */
/* ============================= */

.tag-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.tag-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-6) var(--space-4);
  background: var(--white);
  border: 2px solid var(--gray-100);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.tag-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gray-200);
  transition: var(--transition-base);
}

.tag-type-card:nth-child(1)::before {
  background: var(--pet-gradient);
  opacity: 0;
}

.tag-type-card:nth-child(2)::before {
  background: var(--child-gradient);
  opacity: 0;
}

.tag-type-card:nth-child(3)::before {
  background: var(--elder-gradient);
  opacity: 0;
}

.tag-type-card:nth-child(4)::before {
  background: var(--car-gradient);
  opacity: 0;
}

.tag-type-card:nth-child(5)::before {
  background: var(--item-gradient);
  opacity: 0;
}

.tag-type-card:nth-child(6)::before {
  background: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-500) 100%);
  opacity: 0;
}

.tag-type-card:hover {
  border-color: var(--gray-200);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.tag-type-card:hover::before {
  opacity: 1;
}

.tag-type-icon {
  font-size: 44px;
  margin-bottom: var(--space-3);
}

.tag-type-label {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-1);
  color: var(--gray-900);
}

.tag-type-desc {
  font-size: 12px;
  color: var(--gray-400);
  text-align: center;
  font-weight: 450;
}

/* ============================= */
/* Success Screen - Premium      */
/* ============================= */

.success-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  background: linear-gradient(180deg, var(--success-light) 0%, var(--white) 30%);
}

.success-animation {
  margin-top: var(--space-10);
  margin-bottom: var(--space-8);
}

.success-circle {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(18, 183, 106, 0.3);
  animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes successPop {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.success-checkmark {
  width: 56px;
  height: 56px;
}

.success-checkmark-circle {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
}

.success-checkmark-check {
  stroke: var(--white);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkDraw 0.5s ease 0.3s forwards;
}

@keyframes checkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.success-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
  color: var(--gray-900);
}

.success-subtitle {
  font-size: 16px;
  color: var(--gray-500);
  margin-bottom: var(--space-8);
  font-weight: 450;
}

.success-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.success-summary-icon {
  width: 56px;
  height: 56px;
  background: var(--pet-light);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.success-summary-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
}

.success-summary-type {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 450;
}

.success-tips {
  text-align: left;
  width: 100%;
  padding: var(--space-5);
  background: linear-gradient(135deg, var(--primary-50) 0%, rgba(14, 95, 150, 0.02) 100%);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-xl);
  margin-bottom: var(--space-8);
}

.success-tips-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.success-tips-list {
  list-style: none;
}

.success-tips-list li {
  position: relative;
  padding-left: 0;
  font-size: 14px;
  color: var(--gray-700);
  margin-bottom: var(--space-2);
  font-weight: 450;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.success-tips-list li:last-child {
  margin-bottom: 0;
}

.success-actions {
  width: 100%;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ============================= */
/* Dashboard - Premium           */
/* ============================= */

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5);
  padding-top: var(--space-12);
  border-bottom: none;
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--white) 100%);
}

.dashboard-greeting {
  display: flex;
  flex-direction: column;
}

.greeting-text {
  font-size: 14px;
  color: var(--gray-400);
  font-weight: 450;
}

.greeting-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gray-900);
}

.profile-btn {
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.profile-avatar {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 20px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

.profile-btn:hover .profile-avatar {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.dashboard-content {
  flex: 1;
  padding: var(--space-5);
  padding-bottom: 120px;
  overflow-y: auto;
}

.dashboard-section {
  margin-bottom: var(--space-8);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

.tag-count {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 500;
  background: var(--gray-100);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.tag-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.tag-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}

.tag-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gray-200);
  transition: var(--transition-fast);
}

.tag-card:hover {
  border-color: var(--gray-200);
  box-shadow: var(--shadow-md);
  transform: translateX(4px);
}

.tag-card:hover::before {
  width: 6px;
}

.tag-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}

.tag-card-icon-pet {
  background: var(--pet-light);
}

.tag-card:has(.tag-card-icon-pet)::before {
  background: var(--pet-gradient);
}

.tag-card-icon-elder {
  background: var(--elder-light);
}

.tag-card:has(.tag-card-icon-elder)::before {
  background: var(--elder-gradient);
}

.tag-card-icon-car {
  background: var(--car-light);
}

.tag-card:has(.tag-card-icon-car)::before {
  background: var(--car-gradient);
}

.tag-card-icon-item {
  background: var(--item-light);
}

.tag-card:has(.tag-card-icon-item)::before {
  background: var(--item-gradient);
}

.tag-card-content {
  flex: 1;
  min-width: 0;
}

.tag-card-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--gray-900);
}

.tag-card-type {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 4px;
  font-weight: 450;
}

.tag-card-status {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 500;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.status-active {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-50);
}

.status-inactive {
  background: var(--gray-400);
}

.tag-card-arrow {
  color: var(--gray-300);
  font-size: 20px;
  transition: var(--transition-fast);
}

.tag-card:hover .tag-card-arrow {
  color: var(--gray-400);
  transform: translateX(2px);
}

.add-tag-btn {
  margin-top: var(--space-2);
}

/* Activity List - Premium */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
}

.activity-item:hover {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.activity-icon {
  width: 40px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 450;
}

.activity-text strong {
  font-weight: 600;
}

.activity-meta {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 450;
}

/* Bottom Navigation - Premium */
.bottom-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: var(--space-2) var(--space-5);
  padding-bottom: var(--space-6);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--gray-100);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  transition: var(--transition-base);
  border-radius: var(--radius-lg);
  position: relative;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: var(--primary);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.nav-item.active {
  color: var(--primary);
}

.nav-item.active::before {
  width: 24px;
}

.nav-item:hover {
  color: var(--primary);
}

.nav-icon {
  font-size: 24px;
  line-height: 1;
}

.nav-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================= */
/* Tag Detail Screen - Premium   */
/* ============================= */

.detail-container {
  flex: 1;
  padding: var(--space-5);
  padding-bottom: var(--space-10);
  overflow-y: auto;
}

.detail-hero {
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-100);
}

.detail-avatar {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 0 auto var(--space-4);
  border: 4px solid var(--white);
  box-shadow: var(--shadow-lg);
}

.detail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-name {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-1);
  color: var(--gray-900);
}

.detail-type {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: var(--space-4);
  font-weight: 450;
}

.detail-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 14px;
  color: var(--gray-600);
  background: var(--white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--gray-200);
  font-weight: 500;
}

.detail-section {
  margin-bottom: var(--space-6);
}

.detail-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.detail-info-list {
  background: var(--gray-50);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.detail-info-row {
  display: flex;
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--gray-100);
  background: var(--white);
}

.detail-info-row:last-child {
  border-bottom: none;
}

.detail-info-label {
  font-size: 13px;
  color: var(--gray-500);
  width: 100px;
  flex-shrink: 0;
  font-weight: 500;
}

.detail-info-value {
  flex: 1;
  font-size: 14px;
  font-weight: 450;
  color: var(--gray-900);
}

.visibility-indicator {
  font-size: 16px;
}

.visibility-indicator.hidden {
  opacity: 0.4;
}

.detail-secondary-info {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: var(--space-4);
  font-weight: 450;
}

.mini-activity-list {
  margin-bottom: var(--space-3);
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mini-activity-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}

.mini-activity-item:last-child {
  border-bottom: none;
}

.mini-activity-date {
  color: var(--gray-700);
  font-weight: 450;
}

.mini-activity-location {
  color: var(--gray-400);
  font-weight: 450;
}

.detail-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ============================= */
/* Scan History Screen - Premium */
/* ============================= */

.history-container {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  padding-bottom: 120px;
  overflow-y: auto;
}

.history-filter {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  overflow-x: auto;
  margin-bottom: var(--space-4);
  -webkit-overflow-scrolling: touch;
}

.history-filter::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  padding: var(--space-2) var(--space-4);
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
}

.filter-chip:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.filter-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(14, 95, 150, 0.3);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.history-date-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.history-date {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.history-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  transition: var(--transition-fast);
}

.history-item:hover {
  box-shadow: var(--shadow-sm);
}

.history-item-icon {
  width: 44px;
  height: 44px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.history-item-content {
  flex: 1;
  min-width: 0;
}

.history-item-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--gray-900);
}

.history-item-meta {
  font-size: 13px;
  color: var(--gray-400);
  font-weight: 450;
}

.history-item-action {
  padding: var(--space-2) var(--space-3);
  background: var(--primary-50);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  transition: var(--transition-fast);
}

.history-item-action:hover {
  background: var(--primary-100);
}

/* ============================= */
/* Profile Screen - Premium      */
/* ============================= */

.profile-container {
  flex: 1;
  padding: var(--space-5);
  padding-bottom: 120px;
  overflow-y: auto;
}

.profile-header {
  text-align: center;
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--white) 100%);
  border-radius: var(--radius-2xl);
}

.profile-avatar-large {
  width: 88px;
  height: 88px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 36px;
  margin: 0 auto var(--space-4);
  box-shadow: var(--shadow-lg);
}

.profile-name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-1);
  color: var(--gray-900);
}

.profile-phone {
  font-size: 15px;
  color: var(--gray-500);
  font-weight: 450;
}

.profile-section {
  margin-bottom: var(--space-6);
}

.profile-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.profile-menu {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--gray-100);
  font-family: var(--font-family);
  transition: var(--transition-fast);
}

.profile-menu-item:last-child {
  border-bottom: none;
}

.profile-menu-item:hover {
  background: var(--gray-50);
}

.profile-menu-icon {
  width: 40px;
  height: 40px;
  background: var(--gray-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.profile-menu-text {
  flex: 1;
  font-size: 15px;
  color: var(--gray-800);
  font-weight: 500;
}

.profile-menu-value {
  font-size: 14px;
  color: var(--gray-400);
  font-weight: 450;
}

.profile-menu-arrow {
  color: var(--gray-300);
  font-size: 18px;
}

/* Toggle Switch - Premium */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 30px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--gray-200);
  transition: var(--transition-base);
  border-radius: var(--radius-full);
}

.toggle-slider-round::before {
  position: absolute;
  content: '';
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: var(--transition-base);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked+.toggle-slider-round {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
}

.toggle-switch input:checked+.toggle-slider-round::before {
  transform: translateX(22px);
}

.logout-btn {
  margin-top: var(--space-4);
}

.profile-version {
  text-align: center;
  font-size: 12px;
  color: var(--gray-300);
  margin-top: var(--space-6);
  font-weight: 450;
}

/* ============================= */
/* Responsive (for demo nav)     */
/* ============================= */

@media (max-width: 750px) {
  body {
    padding: var(--space-4);
    flex-direction: column;
    align-items: center;
  }

  .demo-nav {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 390px;
    margin-bottom: var(--space-4);
  }

  .demo-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .demo-nav-menu {
    display: none;
    max-height: 320px;
  }

  .demo-nav-menu.open {
    display: block;
  }

  .phone-frame {
    margin-left: 0;
  }
}

/* ============================= */
/* Smooth scrollbar for WebKit   */
/* ============================= */

.form-scrollable::-webkit-scrollbar,
.detail-container::-webkit-scrollbar,
.profile-container::-webkit-scrollbar,
.history-container::-webkit-scrollbar,
.dashboard-content::-webkit-scrollbar {
  width: 4px;
}

.form-scrollable::-webkit-scrollbar-track,
.detail-container::-webkit-scrollbar-track,
.profile-container::-webkit-scrollbar-track,
.history-container::-webkit-scrollbar-track,
.dashboard-content::-webkit-scrollbar-track {
  background: transparent;
}

.form-scrollable::-webkit-scrollbar-thumb,
.detail-container::-webkit-scrollbar-thumb,
.profile-container::-webkit-scrollbar-thumb,
.history-container::-webkit-scrollbar-thumb,
.dashboard-content::-webkit-scrollbar-thumb {
  background: var(--gray-200);
  border-radius: var(--radius-full);
}

/* ============================= */
/* Lucide Icon Sizes             */
/* ============================= */

[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

.icon-xs {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.icon-sm {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.icon-md {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.icon-lg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.icon-xl {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
  color: var(--primary);
}

/* Context-specific icon styles */
.icon-btn {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.icon-btn-sm {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.icon-back {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.icon-action {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.icon-nav {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.icon-tag {
  width: 24px;
  height: 24px;
  stroke-width: 1.75;
}

.icon-tag-type {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.icon-activity {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  color: var(--gray-500);
}

.icon-history {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: var(--gray-600);
}

.icon-menu {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
  color: var(--gray-500);
}

.icon-arrow {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  color: var(--gray-400);
}

.icon-feature {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  color: var(--primary);
}

.icon-alert {
  width: 22px;
  height: 22px;
  stroke-width: 2;
  flex-shrink: 0;
}

.icon-note {
  width: 18px;
  height: 18px;
  stroke-width: 2;
  color: var(--primary);
  flex-shrink: 0;
}

.icon-upload {
  width: 32px;
  height: 32px;
  stroke-width: 1.5;
  color: var(--gray-400);
}

.icon-radio {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: var(--gray-400);
}

.icon-checkbox {
  width: 20px;
  height: 20px;
  stroke-width: 2;
  color: var(--gray-400);
}

.icon-car {
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
  color: var(--gray-600);
}

.icon-success {
  width: 48px;
  height: 48px;
  stroke-width: 3;
  color: white;
}

.icon-summary {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
  color: var(--pet-color);
}

.icon-check {
  width: 16px;
  height: 16px;
  stroke-width: 3;
  color: var(--primary);
  flex-shrink: 0;
}

.avatar-icon {
  width: 48px;
  height: 48px;
  stroke-width: 1.5;
  color: white;
}

.icon-profile {
  width: 24px;
  height: 24px;
  stroke-width: 2;
  color: white;
}

.icon-profile-lg {
  width: 40px;
  height: 40px;
  stroke-width: 1.75;
  color: white;
}

/* Scan badge icon colors per category */
.scan-badge-pet .icon-xl {
  color: var(--pet-color);
}

.scan-badge-child .icon-xl {
  color: var(--child-color);
}

.scan-badge-elder .icon-xl {
  color: var(--elder-color);
}

.scan-badge-car .icon-xl {
  color: var(--car-color);
}

.scan-badge-item .icon-xl {
  color: var(--item-color);
}

/* Tag type icon backgrounds */
.tag-type-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  transition: var(--transition-base);
}

.tag-type-icon-pet {
  background: var(--pet-light);
}

.tag-type-icon-pet .icon-tag-type {
  color: var(--pet-color);
}

.tag-type-icon-child {
  background: var(--child-light);
}

.tag-type-icon-child .icon-tag-type {
  color: var(--child-color);
}

.tag-type-icon-elder {
  background: var(--elder-light);
}

.tag-type-icon-elder .icon-tag-type {
  color: var(--elder-color);
}

.tag-type-icon-car {
  background: var(--car-light);
}

.tag-type-icon-car .icon-tag-type {
  color: var(--car-color);
}

.tag-type-icon-item {
  background: var(--item-light);
}

.tag-type-icon-item .icon-tag-type {
  color: var(--item-color);
}

.tag-type-icon-other {
  background: var(--gray-100);
}

.tag-type-icon-other .icon-tag-type {
  color: var(--gray-500);
}

.tag-type-card:hover .tag-type-icon {
  transform: scale(1.05);
}

/* Tag card icons */
.tag-card-icon .icon-tag {
  color: inherit;
}

.tag-card-icon-pet .icon-tag {
  color: var(--pet-color);
}

.tag-card-icon-elder .icon-tag {
  color: var(--elder-color);
}

.tag-card-icon-car .icon-tag {
  color: var(--car-color);
}

.tag-card-icon-item .icon-tag {
  color: var(--item-color);
}

/* Radio card selected icon color */
.radio-card:has(input:checked) .icon-radio {
  color: var(--primary);
}

/* Checkbox card selected icon color */
.checkbox-card:has(input:checked) .icon-checkbox {
  color: var(--primary);
}

/* Car action selected icon */
.btn-car-action.selected .icon-car {
  color: var(--primary);
}

/* Success tips list icons */
.success-tips-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-left: 0;
}

.success-tips-list li::before {
  display: none;
}

/* Message recipient avatar */
.message-recipient-avatar {
  background: var(--pet-gradient);
  color: white;
}

.message-recipient-avatar .icon-md {
  color: white;
}

/* History item icons per category */
.history-item-icon {
  background: var(--gray-50);
}

/* Footer note icons */
.scan-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.scan-footer-note .icon-xs {
  color: var(--gray-400);
}

/* Form privacy note icon */
.form-privacy-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.form-privacy-note .icon-xs {
  color: var(--gray-400);
}

/* Form hint important icon */
.form-hint-important {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Detail type icon */
.detail-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.detail-type .icon-xs {
  color: var(--gray-400);
}

/* Button link with icon */
.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Header action with icon */
.header-action {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Scan info reward icon */
.scan-info-reward .scan-info-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.scan-info-reward .icon-xs {
  color: var(--secondary);
}

/* ============================= */
/* Avatar Gradient Classes       */
/* ============================= */

.avatar-pet {
  background: var(--pet-gradient);
}

.avatar-child {
  background: var(--child-gradient);
}

.avatar-elder {
  background: var(--elder-gradient);
}

.avatar-car {
  background: var(--car-gradient);
}

.avatar-item {
  background: var(--item-gradient);
}

/* Toggle Icon Classes */
.toggle-icon-active {
  color: var(--success);
}

.toggle-icon-inactive {
  color: var(--gray-400);
}

/* ============================= */
/* Print styles                  */
/* ============================= */

@media print {
  .demo-nav {
    display: none;
  }

  .phone-frame {
    margin: 0;
    box-shadow: none;
    border: 1px solid var(--gray-200);
  }
}

/* ============================= */
/* Modal Styles                  */
/* ============================= */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  padding: var(--space-5);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 340px;
  box-shadow: var(--shadow-2xl);
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-base);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.modal-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}

.modal-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--gray-500);
  transition: var(--transition-fast);
}

.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.modal-body {
  margin-bottom: var(--space-5);
}

.modal-description {
  font-size: 14px;
  color: var(--gray-500);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Tag Code Input */
.tag-code-input {
  width: 100%;
  padding: var(--space-4);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-family: var(--font-family);
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray-900);
  background: var(--white);
  transition: var(--transition-base);
}

.tag-code-input:hover {
  border-color: var(--gray-300);
}

.tag-code-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.tag-code-input::placeholder {
  color: var(--gray-300);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.tag-code-hint {
  font-size: 13px;
  color: var(--gray-400);
  text-align: center;
  margin-top: var(--space-2);
}

.tag-code-error {
  font-size: 13px;
  color: var(--danger);
  text-align: center;
  margin-top: var(--space-2);
  display: none;
}

.tag-code-error.visible {
  display: block;
}

/* Spinning animation for loading icon */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.icon-spin {
  animation: spin 1s linear infinite;
}

.btn-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* ============================= */
/* Premium Page Animations       */
/* ============================= */

/* Animated Page Backgrounds */
.page-bg-animated {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-bg-gradient-dark {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

.page-bg-gradient-light {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--primary-50) 0%, var(--white) 30%, var(--gray-50) 100%);
}

.page-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  animation: orbFloat 20s ease-in-out infinite;
}

.page-bg-orb-1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.6) 0%, transparent 70%);
  top: -100px;
  right: -80px;
  animation-delay: 0s;
}

.page-bg-orb-2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.5) 0%, transparent 70%);
  bottom: 20%;
  left: -80px;
  animation-delay: -7s;
}

.page-bg-orb-3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.5) 0%, transparent 70%);
  bottom: -50px;
  right: 15%;
  animation-delay: -14s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -20px) scale(1.05); }
  50% { transform: translate(-15px, 15px) scale(0.95); }
  75% { transform: translate(15px, 10px) scale(1.02); }
}

.page-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Light version for light-themed pages */
.page-bg-orb-light {
  filter: blur(100px);
  opacity: 0.3;
}

.page-bg-orb-light.page-bg-orb-1 {
  background: radial-gradient(circle, rgba(245, 166, 35, 0.4) 0%, transparent 70%);
}

.page-bg-orb-light.page-bg-orb-2 {
  background: radial-gradient(circle, rgba(14, 95, 150, 0.3) 0%, transparent 70%);
}

/* Glass Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-2xl);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-card-dark {
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Interactive Cards */
.card-interactive {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  cursor: pointer;
}

.card-interactive:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card-interactive:active {
  transform: translateY(-2px);
}

/* Card Lift Effect */
.card-lift {
  transition: all var(--transition-base);
}

.card-lift:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow:
    0 20px 40px -12px rgba(0, 0, 0, 0.15),
    0 8px 16px -8px rgba(0, 0, 0, 0.1);
}

/* Section Animations */
.section-animate {
  animation: sectionFadeIn 0.5s ease-out;
}

@keyframes sectionFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered Animation */
.stagger-animate > *:nth-child(1) { animation-delay: 0ms; }
.stagger-animate > *:nth-child(2) { animation-delay: 50ms; }
.stagger-animate > *:nth-child(3) { animation-delay: 100ms; }
.stagger-animate > *:nth-child(4) { animation-delay: 150ms; }
.stagger-animate > *:nth-child(5) { animation-delay: 200ms; }
.stagger-animate > *:nth-child(6) { animation-delay: 250ms; }

.stagger-animate > * {
  animation: staggerItem 0.4s ease-out forwards;
  opacity: 0;
}

@keyframes staggerItem {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Button Shine Effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.5s ease;
}

.btn-shine:hover::after {
  left: 100%;
}

/* Pulse Animation */
.pulse-animate {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(245, 166, 35, 0);
  }
}

/* Icon Pulse */
.icon-pulse {
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Hero Header Animated */
.hero-header-animated {
  position: relative;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  overflow: hidden;
}

.hero-header-animated::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, var(--primary) 0%, transparent 70%);
  opacity: 0.08;
  animation: headerGlow 4s ease-in-out infinite;
}

@keyframes headerGlow {
  0%, 100% { opacity: 0.05; }
  50% { opacity: 0.1; }
}

/* Gradient Text */
.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s linear infinite;
}

@keyframes gradientShift {
  to { background-position: 200% center; }
}

/* Brand Logo Glow */
.logo-glow {
  position: relative;
  display: inline-block;
}

.logo-glow::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: logoGlowPulse 3s ease-in-out infinite;
  z-index: -1;
}

@keyframes logoGlowPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

/* Menu Item Slide */
.menu-item-slide {
  position: relative;
  transition: all var(--transition-base);
}

.menu-item-slide::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--primary-50);
  transition: width var(--transition-base);
  border-radius: inherit;
  z-index: -1;
}

.menu-item-slide:hover::before {
  width: 100%;
}

.menu-item-slide:hover {
  transform: translateX(4px);
}

/* Avatar Glow Ring */
.avatar-glow-ring {
  position: relative;
}

.avatar-glow-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  z-index: -1;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.avatar-glow-ring:hover::after {
  opacity: 1;
}

/* Accordion Animation */
.accordion-item {
  overflow: hidden;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
}

.accordion-icon {
  transition: transform var(--transition-base);
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
}

/* Toggle Switch Premium */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider-round {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.toggle-slider-round::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: var(--white);
  border-radius: var(--radius-full);
  transition: var(--transition-spring);
  box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider-round {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.toggle-switch input:checked + .toggle-slider-round::before {
  transform: translateX(24px);
}

/* Toggle Icon States */
.toggle-icon-active {
  color: var(--success);
}

.toggle-icon-inactive {
  color: var(--gray-400);
}

/* Danger Button Hover */
.btn-danger-hover:hover {
  background: var(--danger-light);
  border-color: var(--danger);
  color: var(--danger);
}

/* Empty State Animation */
.empty-state-icon {
  animation: emptyStatePulse 2s ease-in-out infinite;
}

@keyframes emptyStatePulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Filter Chip Active Animation */
.filter-chip-animated {
  transition: all var(--transition-base);
}

.filter-chip-animated.active {
  animation: chipActivate 0.3s ease-out;
}

@keyframes chipActivate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Form Focus Glow */
.form-input-glow:focus {
  border-color: var(--primary);
  box-shadow:
    var(--shadow-glow),
    0 0 20px rgba(245, 166, 35, 0.15);
}

/* Photo Upload Hover */
.photo-upload-premium {
  position: relative;
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
}

.photo-upload-premium:hover {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-50);
  transform: scale(1.02);
}

/* Save Button Animation */
.btn-save-animate {
  position: relative;
  overflow: hidden;
}

.btn-save-animate.saving::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: savingShine 1.5s infinite;
}

@keyframes savingShine {
  from { left: -100%; }
  to { left: 100%; }
}

/* Section Header Underline Animation */
.section-header-animated {
  position: relative;
  display: inline-block;
}

.section-header-animated::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary);
  transition: width var(--transition-base);
}

.section-header-animated:hover::after {
  width: 100%;
}

/* Contact CTA Gradient */
.cta-gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 15px rgba(245, 166, 35, 0.3);
  transition: all var(--transition-base);
}

.cta-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(245, 166, 35, 0.4);
}

/* Avatar Type Gradients */
.avatar-pet {
  background: var(--pet-gradient);
}

.avatar-child {
  background: var(--child-gradient);
}

.avatar-elder {
  background: var(--elder-gradient);
}

.avatar-car {
  background: var(--car-gradient);
}

.avatar-item {
  background: var(--item-gradient);
}

.avatar-icon {
  color: white;
  width: 48px;
  height: 48px;
}

/* Responsive Animation Reduction */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================= */
/* Global Dark Theme Styles */
/* ============================= */

/* Dark Background */
html, body {
  background: #0F172A !important;
}

/* Animated Background */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.app-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

.app-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: appOrbFloat 20s ease-in-out infinite;
}

.app-bg-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #F5A623 0%, transparent 70%);
  top: -100px;
  right: -100px;
}

.app-bg-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
  bottom: 20%;
  left: -100px;
  animation-delay: -7s;
}

.app-bg-orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #F5A623 0%, transparent 70%);
  bottom: -50px;
  right: 20%;
  animation-delay: -14s;
}

@keyframes appOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.05); }
}

.app-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* App Container Dark Theme */
.app-container {
  width: 100%;
  max-width: 100% !important;
  min-height: 100vh;
  background: transparent !important;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  box-shadow: none !important;
}

.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent !important;
  position: relative;
  z-index: 1;
}

/* Dark Theme Text Colors */
.header-title, .section-title, h1, h2, h3 {
  color: white !important;
}

.greeting-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

.greeting-name, .gradient-text {
  background: linear-gradient(135deg, #F5A623 0%, #FFB347 50%, #F5A623 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Screen Header */
.screen-header {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.back-btn {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* Dashboard Header */
.dashboard-header {
  background: transparent !important;
}

.dashboard-header::before {
  display: none;
}

.profile-avatar, .profile-btn .profile-avatar {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* Glass Cards */
.tag-card, .activity-item, .history-item, .profile-menu, .faq-item,
.dashboard-empty-state, .history-empty-state, .dashboard-activity-empty,
.profile-header, .help-support-section {
  background: rgba(30, 41, 59, 0.8) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tag-card:hover, .activity-item:hover, .history-item:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px);
}

/* Card Content */
.tag-card-name, .tag-card-content .tag-card-name,
.activity-text strong, .history-item-title,
.empty-state-title, .history-empty-title,
.profile-name, .faq-question {
  color: white !important;
}

.tag-card-type, .tag-card-status,
.activity-meta, .history-item-meta,
.empty-state-text, .history-empty-text, .activity-empty-text,
.profile-phone, .profile-menu-value,
.help-hero-text, .help-support-text, .faq-answer p {
  color: rgba(255, 255, 255, 0.5) !important;
}

.tag-count {
  color: black !important;
}

.tag-card-arrow, .profile-menu-arrow {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Icons */
.tag-card-icon, .activity-icon, .history-item-icon,
.empty-state-icon-wrapper, .history-empty-icon-wrapper,
.profile-menu-icon, .help-hero-icon {
  background: rgba(245, 166, 35, 0.2) !important;
}

.tag-card-icon i, .activity-icon i, .history-item-icon i,
.empty-state-icon-inner, .history-empty-icon,
.profile-menu-icon i, .help-hero-icon i,
.faq-section-icon {
  color: var(--primary) !important;
}

/* Filter Chips */
.filter-chip {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

.filter-chip.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: white !important;
}

/* Profile Menu Items */
.profile-menu-item {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: white !important;
}

.profile-menu-item:last-child {
  border-bottom: none !important;
}

.profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.profile-menu-text {
  color: white !important;
}

/* Section Title */
.profile-section-title {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Toggle Switch */
.toggle-slider-round {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%) !important;
  border: none !important;
  box-shadow: 0 10px 30px -10px rgba(245, 166, 35, 0.5);
}

.btn-outline, .add-tag-btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.btn-outline:hover, .add-tag-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.logout-btn, .btn-danger-outline {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.5) !important;
  color: #EF4444 !important;
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Links */
.btn-link {
  color: var(--primary) !important;
}

/* Profile Version */
.profile-version {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* FAQ Styling */
.faq-item[open] {
  border-color: rgba(245, 166, 35, 0.3) !important;
}

.faq-icon {
  color: rgba(255, 255, 255, 0.4) !important;
}

.faq-item[open] .faq-icon {
  color: var(--primary) !important;
}

.faq-answer strong {
  color: white !important;
}

/* Bottom Navigation */
.bottom-nav {
  background: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.nav-item {
  color: rgba(255, 255, 255, 0.5) !important;
}

.nav-item.active {
  color: var(--primary) !important;
}

.nav-label {
  color: inherit !important;
}

/* Modal Styling */
.modal-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

.modal-content, .edit-modal {
  background: rgba(30, 41, 59, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.modal-title, .edit-modal-title {
  color: white !important;
}

.modal-description {
  color: rgba(255, 255, 255, 0.6) !important;
}

.modal-close {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Form Inputs */
.form-label {
  color: rgba(255, 255, 255, 0.8) !important;
}

.form-input, .tag-code-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: white !important;
}

.form-input::placeholder, .tag-code-input::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
}

.form-input:focus, .tag-code-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important;
}

.tag-code-hint, .form-hint {
  color: rgba(255, 255, 255, 0.4) !important;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

/* Help Page Specific */
.help-page, .contact-page {
  background: transparent !important;
}

.help-header, .contact-header {
  background: transparent !important;
}

.help-title, .contact-title {
  color: white !important;
}

.back-button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  box-shadow: none !important;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.15) !important;
}

.faq-section-title {
  color: white !important;
}

.faq-question span {
  color: white !important;
}

/* Contact Page */
.contact-hero-title {
  color: white !important;
}

.contact-hero-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

.contact-option {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.contact-option:hover {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.contact-option-title {
  color: white !important;
}

.contact-option-value {
  color: var(--primary) !important;
}

.contact-option-desc {
  color: rgba(255, 255, 255, 0.5) !important;
}

.contact-option-arrow {
  color: rgba(255, 255, 255, 0.3) !important;
}

.contact-faq-text {
  color: rgba(255, 255, 255, 0.5) !important;
}

.contact-hours {
  background: rgba(30, 41, 59, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.contact-hours-title {
  color: white !important;
}

.contact-hours-day {
  color: rgba(255, 255, 255, 0.6) !important;
}

.contact-hours-time {
  color: white !important;
}

/* ============================= */
/* Shared Animations (Consolidated) */
/* ============================= */

/* Floating orb animation - used across all pages */
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -30px) scale(1.1); }
  50% { transform: translate(-20px, 20px) scale(0.95); }
  75% { transform: translate(20px, 10px) scale(1.05); }
}

/* Pulse glow effect for icons and avatars */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.4); }
  50% { box-shadow: 0 0 20px 10px rgba(245, 166, 35, 0.1); }
}

/* Text shimmer gradient animation */
@keyframes shimmer {
  to { background-position: 200% center; }
}

/* Logo pulse animation */
@keyframes logoPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}

/* Screen fade in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section stagger animation */
.section-animate {
  animation: fadeInUp 0.5s ease-out forwards;
}

.stagger-animate > * {
  animation: fadeInUp 0.4s ease-out forwards;
  opacity: 0;
}

.stagger-animate > *:nth-child(1) { animation-delay: 0ms; }
.stagger-animate > *:nth-child(2) { animation-delay: 50ms; }
.stagger-animate > *:nth-child(3) { animation-delay: 100ms; }
.stagger-animate > *:nth-child(4) { animation-delay: 150ms; }
.stagger-animate > *:nth-child(5) { animation-delay: 200ms; }

/* Card lift effect */
.card-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Button shine effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.btn-shine:hover::after {
  left: 100%;
}

/* ============================= */
/* Admin Pages - Responsive Design */
/* ============================= */

/* Admin page container */
.admin-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .admin-container {
    padding: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .admin-container {
    padding: var(--space-8);
  }
}

/* Admin stats grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .admin-stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Admin info grid */
.admin-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .admin-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Admin table responsive wrapper */
.admin-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.admin-table-wrapper table {
  min-width: 600px;
}

/* Admin card stack for mobile */
.admin-qr-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Admin QR code item - responsive */
.admin-qr-item {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  border-left-width: 3px;
}

.admin-qr-item-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .admin-qr-item-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.admin-qr-code {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: 0.5px;
}

.admin-qr-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

@media (min-width: 640px) {
  .admin-qr-actions {
    flex-direction: column;
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .admin-qr-actions {
    flex-direction: row;
  }
}

/* Admin header responsive */
.admin-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 640px) {
  .admin-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* Admin form grid */
.admin-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .admin-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Status badges - consistent sizing */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.status-badge-valid {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.status-badge-pending {
  background: linear-gradient(135deg, var(--warning) 0%, #d97706 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.status-badge-rejected {
  background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.status-badge-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}

.status-badge-inactive {
  background: linear-gradient(135deg, var(--gray-400) 0%, var(--gray-600) 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(156, 163, 175, 0.3);
}

/* Touch-friendly action buttons for mobile */
@media (max-width: 639px) {
  .admin-action-btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-3) var(--space-4);
  }
}

/* ============================= */
/* Standardized Empty States     */
/* ============================= */

.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  border: 2px dashed rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.empty-state::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(245, 166, 35, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulseGlow 3s ease-in-out infinite;
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  background: rgba(245, 166, 35, 0.2);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-5);
  position: relative;
  z-index: 1;
  animation: pulseGlow 2s ease-in-out infinite;
}

.empty-state-icon i,
.empty-state-icon svg {
  width: 36px;
  height: 36px;
  color: var(--primary);
}

.empty-state-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.empty-state-text {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-6);
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.empty-state-action {
  position: relative;
  z-index: 1;
}

/* Compact variant for inline empty states */
.empty-state-compact {
  padding: var(--space-8) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-style: solid;
}

.empty-state-compact::before {
  display: none;
}

.empty-state-compact .empty-state-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
}

.empty-state-compact .empty-state-icon i,
.empty-state-compact .empty-state-icon svg {
  width: 28px;
  height: 28px;
}

.empty-state-compact .empty-state-title {
  font-size: 16px;
}

.empty-state-compact .empty-state-text {
  font-size: 14px;
  margin-bottom: 0;
}

/* ============================= */
/* Dark Theme Shared Styles      */
/* (Replaces inline duplicates)  */
/* ============================= */

/* Dark theme base - used by dashboard, login, profile, etc. */
.dark-page {
  min-height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Dark theme background with animated orbs */
.dark-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.dark-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

.dark-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: orbFloat 20s ease-in-out infinite;
}

.dark-bg-orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #F5A623 0%, transparent 70%);
  top: -100px;
  right: -100px;
}

.dark-bg-orb-2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
  bottom: 20%;
  left: -100px;
  animation-delay: -7s;
}

.dark-bg-orb-3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #F5A623 0%, transparent 70%);
  bottom: -50px;
  right: 20%;
  animation-delay: -14s;
}

.dark-bg-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Dark theme content wrapper */
.dark-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Glass card - dark theme */
.glass-card {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow:
    0 10px 30px -10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow:
    0 15px 40px -10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Dark theme text colors */
.dark-text-primary { color: white; }
.dark-text-secondary { color: rgba(255, 255, 255, 0.8); }
.dark-text-muted { color: rgba(255, 255, 255, 0.5); }
.dark-text-subtle { color: rgba(255, 255, 255, 0.4); }
.dark-text-faint { color: rgba(255, 255, 255, 0.3); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #F5A623 0%, #FFB347 50%, #F5A623 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Icon container - amber glow */
.icon-container {
  background: rgba(245, 166, 35, 0.2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-container i,
.icon-container svg {
  color: var(--primary);
}

/* Dark theme button variants */
.btn-dark-primary {
  background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%);
  border: none;
  color: white;
  font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(245, 166, 35, 0.5);
  transition: all 0.3s ease;
}

.btn-dark-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px -10px rgba(245, 166, 35, 0.6);
}

.btn-dark-outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-dark-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-dark-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.btn-dark-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Dark theme form inputs */
.dark-input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: white;
  border-radius: var(--radius-lg);
  transition: all 0.2s ease;
}

.dark-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.dark-input:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}

.dark-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

/* Dark theme bottom nav */
.dark-bottom-nav {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-bottom-nav .nav-item {
  color: rgba(255, 255, 255, 0.5);
}

.dark-bottom-nav .nav-item.active {
  color: var(--primary);
}

/* Dark theme modal */
.dark-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

.dark-modal-content {
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Avatar with glow ring */
.avatar-glow-ring {
  position: relative;
}

.avatar-glow-ring::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  opacity: 0.3;
  z-index: -1;
}

/* Section headers */
.section-title-dark {
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.section-subtitle-dark {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* Link styling in dark theme */
.link-primary {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.link-primary:hover {
  color: #FFB347;
}

/* Dark theme divider */
.dark-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

/* Dark app container overrides */
[data-theme="dark"] body,
.dark-theme-base {
  background: #0F172A;
}

[data-theme="dark"] .app-container {
  max-width: 100%;
  background: transparent;
  box-shadow: none;
}

[data-theme="dark"] .app-content {
  overflow: visible;
  background: transparent;
}

/* ============================= */
/* Bottom Sheet Component        */
/* (Mobile-friendly alternative  */
/*  to centered modals)          */
/* ============================= */

.bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  transition: background 0.3s ease, visibility 0s 0.3s;
}

.bottom-sheet-overlay.active {
  background: rgba(0, 0, 0, 0.6);
  visibility: visible;
  transition: background 0.3s ease, visibility 0s 0s;
}

.bottom-sheet {
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  background: rgba(30, 41, 59, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bottom-sheet-overlay.active .bottom-sheet {
  transform: translateY(0);
}

/* Drag handle indicator */
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  margin: var(--space-3) auto var(--space-2);
  flex-shrink: 0;
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.bottom-sheet-title {
  font-size: 18px;
  font-weight: 700;
  color: white;
  margin: 0;
}

.bottom-sheet-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}

.bottom-sheet-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.bottom-sheet-body {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
}

.bottom-sheet-description {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: var(--space-5);
}

.bottom-sheet-actions {
  padding: var(--space-4) var(--space-5);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Desktop: Keep modal centered */
@media (min-width: 640px) {
  .bottom-sheet-overlay {
    align-items: center;
    padding: var(--space-6);
  }

  .bottom-sheet {
    max-width: 420px;
    max-height: 85vh;
    border-radius: var(--radius-2xl);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .bottom-sheet-overlay.active .bottom-sheet {
    transform: translateY(0);
    opacity: 1;
  }

  .bottom-sheet-handle {
    display: none;
  }

  .bottom-sheet-actions {
    padding-bottom: var(--space-5);
  }
}

/* Input styling for bottom sheet */
.bottom-sheet-input {
  width: 100%;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  color: white;
  font-size: 16px;
  font-family: inherit;
  transition: all 0.2s ease;
}

.bottom-sheet-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.bottom-sheet-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
  background: rgba(255, 255, 255, 0.1);
}

/* Code input variant - larger, monospace */
.bottom-sheet-input-code {
  font-family: 'Courier New', monospace;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bottom-sheet-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  margin-top: var(--space-2);
  text-align: center;
}

.bottom-sheet-error {
  font-size: 13px;
  color: #EF4444;
  margin-top: var(--space-2);
  text-align: center;
  display: none;
}

.bottom-sheet-error.visible {
  display: block;
}

/* Action buttons in bottom sheet */
.bottom-sheet-btn {
  width: 100%;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.bottom-sheet-btn-primary {
  background: linear-gradient(135deg, #F5A623 0%, #FF6B35 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(245, 166, 35, 0.4);
}

.bottom-sheet-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.5);
}

.bottom-sheet-btn-primary:active {
  transform: translateY(0);
}

.bottom-sheet-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.bottom-sheet-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.bottom-sheet-btn-danger {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.bottom-sheet-btn-danger:hover {
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* ============================= */
/* Mobile Modal → Bottom Sheet   */
/* (Auto-converts existing modals) */
/* ============================= */

@media (max-width: 639px) {
  .modal-overlay {
    align-items: flex-end;
  }

  .modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    margin: 0;
  }

  .modal-overlay.active .modal-content {
    transform: translateY(0);
  }

  /* Add drag handle to existing modals on mobile */
  .modal-content::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    margin: var(--space-3) auto var(--space-1);
  }

  .modal-actions {
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }

  /* Larger touch targets on mobile */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .tag-code-input {
    font-size: 24px;
    padding: var(--space-4);
    text-align: center;
    letter-spacing: 0.1em;
  }
}

/* ============================= */
/* Admin Manage Tags - Table     */
/* ============================= */

.admin-tags-table th {
  white-space: nowrap;
}

.admin-tags-table td {
  vertical-align: middle;
}

/* Dark theme date/select inputs */
.admin-field[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}

.admin-field[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* HTMX loading indicator */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}