/*! Lufycore static utility CSS. Generated by tools/build-static-css.js. */
*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0deg;--tw-skew-x:0deg;--tw-skew-y:0deg;--tw-scale-x:1;--tw-scale-y:1;--tw-gradient-from:transparent;--tw-gradient-via:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to);--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;}
html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:Inter,ui-sans-serif,system-ui,sans-serif;scroll-behavior:auto;}
body{margin:0;line-height:inherit;background:#111827;color:#f3f4f6;}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;}
a{color:inherit;text-decoration:inherit;}
button,input,optgroup,select,textarea{font:inherit;color:inherit;margin:0;padding:0;background-color:transparent;background-image:none;}
button,[role=button]{cursor:pointer;}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle;}
img,video{max-width:100%;height:auto;}
table{text-indent:0;border-color:inherit;border-collapse:collapse;}
textarea{resize:vertical;}
::placeholder{color:#6b7280;opacity:1;}
@keyframes ping{75%,100%{transform:scale(2);opacity:0;}}
@keyframes blob{0%{transform:translate(0,0) scale(1);}100%{transform:translate(20px,-50px) scale(1.1);}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);}}
@keyframes fadeIn{0%{opacity:0;transform:translateY(5px);}100%{opacity:1;transform:translateY(0);}}
@keyframes shimmer{0%{left:-100%;}100%{left:150%;}}
.space-x-2 > :not([hidden]) ~ :not([hidden]){margin-left: 0.5rem;}
.space-x-6 > :not([hidden]) ~ :not([hidden]){margin-left: 1.5rem;}
.space-y-2 > :not([hidden]) ~ :not([hidden]){margin-top: 0.5rem;}
.space-y-3 > :not([hidden]) ~ :not([hidden]){margin-top: 0.75rem;}
.space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top: 1rem;}
.divide-y > :not([hidden]) ~ :not([hidden]){border-top-width:1px;}
.divide-\[\#374151\] > :not([hidden]) ~ :not([hidden]){border-color:#374151;}
.\!m-0{margin: 0px !important;}
.\!px-2{padding-left: 0.5rem !important; padding-right: 0.5rem !important;}
.\!py-1{padding-top: 0.25rem !important; padding-bottom: 0.25rem !important;}
.\!text-xs{font-size: 0.75rem !important; line-height: 1rem !important;}
.-right-2{right: -0.5rem;}
.-top-2{top: -0.5rem;}
.absolute{position: absolute;}
.accent-\[\#d97706\]{accent-color: #d97706;}
.animate-fade-in{animation: fadeIn 0.3s ease-out forwards;}
.appearance-none{appearance: none;}
.bg-\[\#020617\]{background-color: #020617;}
.bg-\[\#047857\]\/20{background-color: #04785733;}
.bg-\[\#064e3b\]{background-color: #064e3b;}
.bg-\[\#064e3b\]\/20{background-color: #064e3b33;}
.bg-\[\#064e3b\]\/30{background-color: #064e3b4d;}
.bg-\[\#065f46\]{background-color: #065f46;}
.bg-\[\#0b0f19\]{background-color: #0b0f19;}
.bg-\[\#0b1220\]{background-color: #0b1220;}
.bg-\[\#10b981\]\/20{background-color: #10b98133;}
.bg-\[\#111827\]{background-color: #111827;}
.bg-\[\#1a1b1e\]{background-color: #1a1b1e;}
.bg-\[\#1e293b\]{background-color: #1e293b;}
.bg-\[\#1e3a8a\]\/20{background-color: #1e3a8a33;}
.bg-\[\#1f2937\]{background-color: #1f2937;}
.bg-\[\#2563eb\]\/20{background-color: #2563eb33;}
.bg-\[\#27272a\]{background-color: #27272a;}
.bg-\[\#374151\]{background-color: #374151;}
.bg-\[\#3b82f6\]\/5{background-color: #3b82f60d;}
.bg-\[\#3f3f46\]{background-color: #3f3f46;}
.bg-\[\#78350f\]{background-color: #78350f;}
.bg-\[\#7f1d1d\]{background-color: #7f1d1d;}
.bg-\[\#7f1d1d\]\/20{background-color: #7f1d1d33;}
.bg-\[\#991b1b\]{background-color: #991b1b;}
.bg-\[\#b45309\]\/20{background-color: #b4530933;}
.bg-\[\#d1d5db\]{background-color: #d1d5db;}
.bg-\[\#d97706\]\/20{background-color: #d9770633;}
.bg-\[\#d97706\]\/5{background-color: #d977060d;}
.bg-\[\#ef4444\]\/20{background-color: #ef444433;}
.bg-\[\#f97316\]\/20{background-color: #f9731633;}
.bg-black{background-color: #000000;}
.bg-black\/60{background-color: #00000099;}
.bg-gradient-to-b{background-image: linear-gradient(to bottom, var(--tw-gradient-stops));}
.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));}
.bg-gray-800{background-color: #1f2937;}
.bg-gray-900{background-color: #111827;}
.bg-red-500{background-color: #ef4444;}
.bg-transparent{background-color: transparent;}
.bg-white\/10{background-color: #ffffff1a;}
.block{display: block;}
.border{border-width: 1px;}
.border-2{border-width: 2px;}
.border-\[\#047857\]{border-color: #047857;}
.border-\[\#047857\]\/50{border-color: #04785780;}
.border-\[\#064e3b\]{border-color: #064e3b;}
.border-\[\#10b981\]{border-color: #10b981;}
.border-\[\#10b981\]\/50{border-color: #10b98180;}
.border-\[\#1e3a8a\]{border-color: #1e3a8a;}
.border-\[\#1f2937\]{border-color: #1f2937;}
.border-\[\#334155\]{border-color: #334155;}
.border-\[\#374151\]{border-color: #374151;}
.border-\[\#374151\]\/50{border-color: #37415180;}
.border-\[\#3b82f6\]{border-color: #3b82f6;}
.border-\[\#3b82f6\]\/30{border-color: #3b82f64d;}
.border-\[\#3b82f6\]\/50{border-color: #3b82f680;}
.border-\[\#3f3f46\]{border-color: #3f3f46;}
.border-\[\#475569\]{border-color: #475569;}
.border-\[\#4b5563\]{border-color: #4b5563;}
.border-\[\#52525b\]{border-color: #52525b;}
.border-\[\#7f1d1d\]{border-color: #7f1d1d;}
.border-\[\#7f1d1d\]\/50{border-color: #7f1d1d80;}
.border-\[\#92400e\]{border-color: #92400e;}
.border-\[\#b45309\]{border-color: #b45309;}
.border-\[\#b45309\]\/50{border-color: #b4530980;}
.border-\[\#b91c1c\]{border-color: #b91c1c;}
.border-\[\#d97706\]{border-color: #d97706;}
.border-\[\#d97706\]\/30{border-color: #d977064d;}
.border-\[\#e5e7eb\]{border-color: #e5e7eb;}
.border-\[\#ef4444\]\/40{border-color: #ef444466;}
.border-\[\#ef4444\]\/50{border-color: #ef444480;}
.border-\[\#f59e0b\]{border-color: #f59e0b;}
.border-\[\#fb923c\]\/50{border-color: #fb923c80;}
.border-\[\#fcd34d\]{border-color: #fcd34d;}
.border-b{border-bottom-width: 1px;}
.border-b-2{border-bottom-width: 2px;}
.border-collapse{border-collapse: collapse;}
.border-gray-500{border-color: #6b7280;}
.border-gray-700{border-color: #374151;}
.border-none{border-style: none;}
.border-r{border-right-width: 1px;}
.border-t{border-top-width: 1px;}
.border-transparent{border-color: transparent;}
.border-white\/20{border-color: #ffffff33;}
.bottom-0{bottom: 0px;}
.break-all{word-break: break-all;}
.checked\:bg-\[\#eab308\]:checked{background-color: #eab308;}
.checked\:border-\[\#eab308\]:checked{border-color: #eab308;}
.cursor-not-allowed{cursor: not-allowed;}
.cursor-pointer{cursor: pointer;}
.duration-300{transition-duration: 300ms;}
.duration-500{transition-duration: 500ms;}
.file\:bg-\[\#374151\]::file-selector-button{background-color: #374151;}
.file\:border-0::file-selector-button{border-width: 0px;}
.file\:mr-3::file-selector-button{margin-right: 0.75rem;}
.file\:mr-4::file-selector-button{margin-right: 1rem;}
.file\:px-3::file-selector-button{padding-left: 0.75rem; padding-right: 0.75rem;}
.file\:py-1::file-selector-button{padding-top: 0.25rem; padding-bottom: 0.25rem;}
.file\:rounded::file-selector-button{border-radius: 0.25rem;}
.file\:text-white::file-selector-button{color: #ffffff;}
.file\:text-xs::file-selector-button{font-size: 0.75rem; line-height: 1rem;}
.fixed{position: fixed;}
.flex{display: flex;}
.flex-1{flex: 1 1 0%;}
.flex-2{flex: 2 1 0%;}
.flex-col{flex-direction: column;}
.flex-grow{flex-grow: 1;}
.flex-wrap{flex-wrap: wrap;}
.focus\:border-\[\#d97706\]:focus{border-color: #d97706;}
.focus\:border-\[\#f59e0b\]:focus{border-color: #f59e0b;}
.focus\:border-gray-500:focus{border-color: #6b7280;}
.focus\:outline-none:focus{outline: 2px solid transparent; outline-offset: 2px;}
.focus\:ring-2:focus{box-shadow: 0 0 0 2px var(--tw-ring-color, currentColor);}
.focus\:ring-\[\#d97706\]:focus{--tw-ring-color: #d97706;}
.focus\:ring-\[\#f59e0b\]:focus{--tw-ring-color: #f59e0b;}
.focus\:ring-\[\#fcd34d\]:focus{--tw-ring-color: #fcd34d;}
.focus\:ring-offset-2:focus{outline-offset: 2px;}
.focus\:ring-offset-\[\#1f2937\]:focus{--tw-ring-offset-color: #1f2937;}
.font-bold{font-weight: 700;}
.font-medium{font-weight: 500;}
.font-mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}
.font-sans{font-family: Inter, sans-serif;}
.font-semibold{font-weight: 600;}
.from-\[\#34d399\]{--tw-gradient-from: #34d399; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.from-\[\#38bdf8\]{--tw-gradient-from: #38bdf8; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.from-\[\#d97706\]{--tw-gradient-from: #d97706; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.from-\[\#fcd34d\]{--tw-gradient-from: #fcd34d; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.from-blue-600{--tw-gradient-from: #2563eb; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.gap-1{gap: 0.25rem;}
.gap-2{gap: 0.5rem;}
.gap-3{gap: 0.75rem;}
.gap-4{gap: 1rem;}
.gap-6{gap: 1.5rem;}
.gap-8{gap: 2rem;}
.gap-x-12{column-gap: 3rem;}
.gap-x-8{column-gap: 2rem;}
.gap-y-2{row-gap: 0.5rem;}
.gap-y-4{row-gap: 1rem;}
.grid{display: grid;}
.grid-cols-1{grid-template-columns: repeat(1, minmax(0, 1fr));}
.grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid-cols-4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.group:has(:checked) .group-has-\[\:checked\]\:inline{display: inline;}
.h-10{height: 2.5rem;}
.h-20{height: 5rem;}
.h-3{height: 0.75rem;}
.h-4{height: 1rem;}
.h-5{height: 1.25rem;}
.h-6{height: 1.5rem;}
.h-8{height: 2rem;}
.h-\[38px\]{height: 38px;}
.h-full{height: 100%;}
.h-px{height: 1px;}
.has-\[\:checked\]\:border-\[\#eab308\]:has(:checked){border-color: #eab308;}
.hidden{display: none;}
.hover\:bg-\[\#10b981\]:hover{background-color: #10b981;}
.hover\:bg-\[\#1e3a8a\]\/40:hover{background-color: #1e3a8a66;}
.hover\:bg-\[\#1f2937\]:hover{background-color: #1f2937;}
.hover\:bg-\[\#2563eb\]:hover{background-color: #2563eb;}
.hover\:bg-\[\#374151\]:hover{background-color: #374151;}
.hover\:bg-\[\#3f3f46\]:hover{background-color: #3f3f46;}
.hover\:bg-\[\#4b5563\]:hover{background-color: #4b5563;}
.hover\:bg-\[\#52525b\]:hover{background-color: #52525b;}
.hover\:bg-\[\#991b1b\]:hover{background-color: #991b1b;}
.hover\:bg-\[\#b91c1c\]:hover{background-color: #b91c1c;}
.hover\:bg-\[\#ef4444\]:hover{background-color: #ef4444;}
.hover\:bg-\[\#f97316\]:hover{background-color: #f97316;}
.hover\:bg-red-600:hover{background-color: #dc2626;}
.hover\:bg-white:hover{background-color: #ffffff;}
.hover\:bg-white\/20:hover{background-color: #ffffff33;}
.hover\:border-gray-500:hover{border-color: #6b7280;}
.hover\:file\:bg-\[\#4b5563\]:hover::file-selector-button{background-color: #4b5563;}
.hover\:from-\[\#6ee7b7\]:hover{--tw-gradient-from: #6ee7b7; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.hover\:from-\[\#f59e0b\]:hover{--tw-gradient-from: #f59e0b; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.hover\:from-\[\#fde68a\]:hover{--tw-gradient-from: #fde68a; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.hover\:from-blue-500:hover{--tw-gradient-from: #3b82f6; --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);}
.hover\:text-\[\#fcd34d\]:hover{font-size: #fcd34d;}
.hover\:text-black:hover{color: #000000;}
.hover\:text-gray-200:hover{color: #e5e7eb;}
.hover\:text-white:hover{color: #ffffff;}
.hover\:to-\[\#10b981\]:hover{--tw-gradient-to: #10b981;}
.hover\:to-\[\#d97706\]:hover{--tw-gradient-to: #d97706;}
.hover\:to-indigo-500:hover{--tw-gradient-to: #6366f1;}
.inline-flex{display: inline-flex;}
.inset-0{top: 0px; right: 0px; bottom: 0px; left: 0px;}
.inset-x-0{left: 0px; right: 0px;}
.items-center{align-items: center;}
.items-end{align-items: flex-end;}
.items-start{align-items: flex-start;}
.justify-between{justify-content: space-between;}
.justify-center{justify-content: center;}
.justify-end{justify-content: flex-end;}
.last\:border-0:last-child{border-width: 0px;}
.leading-none{line-height: 1;}
.leading-relaxed{line-height: 1.625;}
.leading-tight{line-height: 1.25;}
.left-1{left: 0.25rem;}
.left-2{left: 0.5rem;}
@media (min-width: 1024px){.lg\:col-span-2{grid-column: span 2 / span 2;}
}
@media (min-width: 1024px){.lg\:grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1024px){.lg\:grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 1024px){.lg\:px-8{padding-left: 2rem; padding-right: 2rem;}
}
.list-disc{list-style-type: disc;}
.list-inside{list-style-position: inside;}
.m-0{margin: 0px;}
.max-h-64{max-height: 16rem;}
.max-w-7xl{max-width: 80rem;}
.max-w-\[180px\]{max-width: 180px;}
.max-w-\[200px\]{max-width: 200px;}
.max-w-\[400px\]{max-width: 400px;}
.max-w-\[52vw\]{max-width: 52vw;}
.max-w-lg{max-width: 32rem;}
.max-w-sm{max-width: 24rem;}
.mb-0{margin-bottom: 0px;}
.mb-1{margin-bottom: 0.25rem;}
.mb-2{margin-bottom: 0.5rem;}
.mb-3{margin-bottom: 0.75rem;}
.mb-4{margin-bottom: 1rem;}
.mb-6{margin-bottom: 1.5rem;}
@media (min-width: 768px){.md\:col-span-1{grid-column: span 1 / span 1;}
}
@media (min-width: 768px){.md\:col-span-2{grid-column: span 2 / span 2;}
}
@media (min-width: 768px){.md\:col-span-3{grid-column: span 3 / span 3;}
}
@media (min-width: 768px){.md\:flex-row{flex-direction: row;}
}
@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 768px){.md\:grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 768px){.md\:grid-cols-4{grid-template-columns: repeat(4, minmax(0, 1fr));}
}
@media (min-width: 768px){.md\:grid-cols-5{grid-template-columns: repeat(5, minmax(0, 1fr));}
}
.min-h-0{min-height: 0px;}
.min-h-\[260px\]{min-height: 260px;}
.min-h-\[3\.5rem\]{min-height: 3.5rem;}
.min-h-\[32px\]{min-height: 32px;}
.min-h-\[360px\]{min-height: 360px;}
.min-h-\[40px\]{min-height: 40px;}
.min-h-\[560px\]{min-height: 560px;}
.min-h-screen{min-height: 100vh;}
.min-w-0{min-width: 0px;}
.min-w-\[120px\]{min-width: 120px;}
.min-w-\[220px\]{min-width: 220px;}
.min-w-\[260px\]{min-width: 260px;}
.ml-1{margin-left: 0.25rem;}
.ml-2{margin-left: 0.5rem;}
.ml-auto{margin-left: auto;}
.mt-0\.5{margin-top: 0.125rem;}
.mt-1{margin-top: 0.25rem;}
.mt-2{margin-top: 0.5rem;}
.mt-3{margin-top: 0.75rem;}
.mt-4{margin-top: 1rem;}
.mt-6{margin-top: 1.5rem;}
.mx-1{margin-left: 0.25rem; margin-right: 0.25rem;}
.mx-auto{margin-left: auto; margin-right: auto;}
.my-3{margin-top: 0.75rem; margin-bottom: 0.75rem;}
.object-contain{object-fit: contain;}
.object-cover{object-fit: cover;}
.opacity-0{opacity: 0;}
.opacity-60{opacity: 0.6;}
.opacity-70{opacity: 0.7;}
.opacity-80{opacity: 0.8;}
.outline-none{outline: 2px solid transparent; outline-offset: 2px;}
.overflow-hidden{overflow: hidden;}
.overflow-x-auto{overflow-x: auto;}
.overflow-y-auto{overflow-y: auto;}
.p-1{padding: 0.25rem;}
.p-2{padding: 0.5rem;}
.p-2\.5{padding: 0.625rem;}
.p-3{padding: 0.75rem;}
.p-4{padding: 1rem;}
.p-5{padding: 1.25rem;}
.p-6{padding: 1.5rem;}
.pb-8{padding-bottom: 2rem;}
.pl-4{padding-left: 1rem;}
.pointer-events-none{pointer-events: none;}
.pr-4{padding-right: 1rem;}
.pt-1{padding-top: 0.25rem;}
.pt-20{padding-top: 5rem;}
.pt-3{padding-top: 0.75rem;}
.pt-4{padding-top: 1rem;}
.pt-5{padding-top: 1.25rem;}
.px-1{padding-left: 0.25rem; padding-right: 0.25rem;}
.px-1\.5{padding-left: 0.375rem; padding-right: 0.375rem;}
.px-2{padding-left: 0.5rem; padding-right: 0.5rem;}
.px-3{padding-left: 0.75rem; padding-right: 0.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: 0.125rem; padding-bottom: 0.125rem;}
.py-1{padding-top: 0.25rem; padding-bottom: 0.25rem;}
.py-1\.5{padding-top: 0.375rem; padding-bottom: 0.375rem;}
.py-16{padding-top: 4rem; padding-bottom: 4rem;}
.py-2{padding-top: 0.5rem; padding-bottom: 0.5rem;}
.py-2\.5{padding-top: 0.625rem; padding-bottom: 0.625rem;}
.py-3{padding-top: 0.75rem; padding-bottom: 0.75rem;}
.py-4{padding-top: 1rem; padding-bottom: 1rem;}
.py-8{padding-top: 2rem; padding-bottom: 2rem;}
.relative{position: relative;}
.resize-none{resize: none;}
.resize-y{resize: vertical;}
.rounded{border-radius: 0.25rem;}
.rounded-2xl{border-radius: 1rem;}
.rounded-b{border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;}
.rounded-full{border-radius: 9999px;}
.rounded-lg{border-radius: 0.5rem;}
.rounded-md{border-radius: 0.375rem;}
.rounded-sm{border-radius: 0.125rem;}
.rounded-t{border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem;}
.rounded-xl{border-radius: 0.75rem;}
.scale-105{--tw-scale-x: 1.05; --tw-scale-y: 1.05; 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));}
.shadow{box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);}
.shadow-2xl{box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);}
.shadow-inner{box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);}
.shadow-lg{box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.shadow-sm{box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}
.shadow-xl{box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);}
.shrink-0{flex-shrink: 0;}
@media (min-width: 640px){.sm\:gap-3{gap: 0.75rem;}
}
@media (min-width: 640px){.sm\:grid-cols-3{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 640px){.sm\:inline{display: inline;}
}
@media (min-width: 640px){.sm\:max-w-none{max-width: none;}
}
@media (min-width: 640px){.sm\:ml-4{margin-left: 1rem;}
}
@media (min-width: 640px){.sm\:p-4{padding: 1rem;}
}
@media (min-width: 640px){.sm\:p-8{padding: 2rem;}
}
@media (min-width: 640px){.sm\:px-6{padding-left: 1.5rem; padding-right: 1.5rem;}
}
@media (min-width: 640px){.sm\:text-base{font-size: 1rem; line-height: 1.5rem;}
}
@media (min-width: 640px){.sm\:w-auto{width: auto;}
}
.text-2xl{font-size: 1.5rem; line-height: 2rem;}
.text-\[\#34d399\]{font-size: #34d399;}
.text-\[\#60a5fa\]{font-size: #60a5fa;}
.text-\[\#60a5fa\]\/70{color: #60a5fab3;}
.text-\[\#93c5fd\]{font-size: #93c5fd;}
.text-\[\#d1d5db\]{font-size: #d1d5db;}
.text-\[\#d1fae5\]{font-size: #d1fae5;}
.text-\[\#d97706\]{font-size: #d97706;}
.text-\[\#eab308\]{font-size: #eab308;}
.text-\[\#f59e0b\]{font-size: #f59e0b;}
.text-\[\#f87171\]{font-size: #f87171;}
.text-\[\#fbbf24\]{font-size: #fbbf24;}
.text-\[\#fbbf24\]\/70{color: #fbbf24b3;}
.text-\[\#fcd34d\]{font-size: #fcd34d;}
.text-\[\#fdba74\]{font-size: #fdba74;}
.text-\[\#fde68a\]{font-size: #fde68a;}
.text-\[0\.65rem\]{font-size: 0.65rem;}
.text-\[10px\]{font-size: 10px;}
.text-\[11px\]{font-size: 11px;}
.text-\[9px\]{font-size: 9px;}
.text-base{font-size: 1rem; line-height: 1.5rem;}
.text-black{color: #000000;}
.text-blue-300{color: #93c5fd;}
.text-blue-400{color: #60a5fa;}
.text-center{text-align: center;}
.text-gray-100{color: #f3f4f6;}
.text-gray-200{color: #e5e7eb;}
.text-gray-300{color: #d1d5db;}
.text-gray-400{color: #9ca3af;}
.text-gray-500{color: #6b7280;}
.text-left{text-align: left;}
.text-lg{font-size: 1.125rem; line-height: 1.75rem;}
.text-red-400{color: #f87171;}
.text-sm{font-size: 0.875rem; line-height: 1.25rem;}
.text-white{color: #ffffff;}
.text-xs{font-size: 0.75rem; line-height: 1rem;}
.to-\[\#059669\]{--tw-gradient-to: #059669;}
.to-\[\#b45309\]{--tw-gradient-to: #b45309;}
.to-\[\#ec4899\]{--tw-gradient-to: #ec4899;}
.to-indigo-600{--tw-gradient-to: #4f46e5;}
.top-1{top: 0.25rem;}
.top-2{top: 0.5rem;}
.transition{transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.transition-colors{transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.transition-opacity{transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.transition-transform{transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms;}
.truncate{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.uppercase{text-transform: uppercase;}
.via-\[\#6366f1\]{--tw-gradient-via: #6366f1; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to);}
.w-10{width: 2.5rem;}
.w-12{width: 3rem;}
.w-20{width: 5rem;}
.w-24{width: 6rem;}
.w-3{width: 0.75rem;}
.w-32{width: 8rem;}
.w-4{width: 1rem;}
.w-5{width: 1.25rem;}
.w-6{width: 1.5rem;}
.w-64{width: 16rem;}
.w-8{width: 2rem;}
.w-full{width: 100%;}
.whitespace-nowrap{white-space: nowrap;}
.whitespace-pre-wrap{white-space: pre-wrap;}
.xl\:grid-cols-6{grid-template-columns: repeat(6, minmax(0, 1fr));}
.z-0{z-index: 0;}
.z-10{z-index: 10;}
.z-20{z-index: 20;}
.z-50{z-index: 50;}

/* Glassmorphism utilities */
.glass-panel {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.75rem;
}

.glass-header {
    background: rgba(11, 15, 25, 0.8);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* Tab active state styles */
.tab-btn.active {
    background-color: rgba(31, 41, 55, 0.8);
    color: white;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* Scrollbar styling for a premium feel */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #0b0f19;
}
::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* =======================================================================
   GRADIO REPLICATION THEME (PHASE 6)
   ======================================================================= */
   
/* Base dark background for Gradio panels */
.gr-bg {
    background-color: #0b0f19;
    color: #e5e7eb;
}

/* The sub-tabs at the top */
.gr-tabs-nav {
    display: flex;
    gap: 1rem;
    border-bottom: 1px solid #374151;
    padding: 0 1rem;
    margin-bottom: 1rem;
}
.gr-tab-btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-weight: 500;
}
.gr-tab-btn.active {
    color: #eab308; /* Golden text */
    border-bottom-color: #eab308;
}

/* Panel Box with rounded borders (like Prompt area) */
.gr-panel-box {
    border: 1px solid #374151;
    border-radius: 0.5rem;
    background: #1f2937;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

/* Form Labels */
.gr-label {
    display: block;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* Radios as pills */
.gr-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.gr-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #374151;
    border-radius: 0.375rem;
    background: #111827;
    cursor: pointer;
    font-size: 0.875rem;
    color: #d1d5db;
    transition: all 0.2s;
}
.gr-radio-label:has(input:checked) {
    border-color: #eab308; /* Golden border */
}
.gr-radio-label input[type="radio"] {
    appearance: none;
    margin: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.gr-radio-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #4b5563; /* Inactive dot */
}
.gr-radio-label input[type="radio"]:checked ~ .gr-radio-dot {
    background: #eab308; /* Active golden dot */
}
.gr-radio-text-selected {
    display: none;
    color: #eab308;
    font-size: 0.65rem;
    margin-left: 0.25rem;
}
.gr-radio-label input[type="radio"]:checked ~ .gr-radio-text-selected {
    display: inline;
}

/* Primary Generate Button (Golden Gradient) */
.gr-btn-primary {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #854d0e;
    background: linear-gradient(180deg, #fcd34d 0%, #b45309 100%);
    color: #fffbeb;
    font-weight: 600;
    font-size: 1rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin: 1rem 0;
    transition: opacity 0.2s;
}
.gr-btn-primary:hover {
    opacity: 0.9;
}

/* Sliders */
.gr-slider-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.gr-slider {
    flex-grow: 1;
    appearance: none;
    height: 4px;
    background: #374151;
    border-radius: 2px;
    outline: none;
}
.gr-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid #eab308;
}
.gr-slider-val {
    background: #111827;
    border: 1px solid #374151;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    min-width: 2.5rem;
    text-align: center;
}

/* Magic Wand Button */
.gr-btn-magic {
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 0.375rem;
    color: #eab308;
    padding: 0.5rem;
    cursor: pointer;
}
.gr-btn-magic:hover {
    background: #4b5563;
}

/* Upload Box */
.gr-upload-box {
    border: 1px dashed #4b5563;
    border-radius: 0.5rem;
    background: #111827;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    cursor: pointer;
    color: #9ca3af;
    text-align: center;
    min-height: 100px;
    position: relative;
    overflow: hidden;
}
.gr-upload-box:hover {
    border-color: #6b7280;
    background: #1f2937;
}
.gr-upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 20;
}
.gr-upload-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.gr-upload-box.has-file {
    border-style: solid;
}

.gr-upload-box.has-file > p.ref-file-name {
    position: relative;
    z-index: 25;
    max-width: 100%;
    padding: 0.25rem 0.45rem;
    border-radius: 0.45rem;
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ref-clear-btn {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 45;
    display: none;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(127, 29, 29, 0.92);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gr-upload-box.has-file .ref-clear-btn {
    display: inline-flex;
}

.rtv-img-preview,
#flf-start-preview,
#flf-end-preview {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.rtv-media-preview,
.rtv-audio-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: rgba(2, 6, 23, 0.88);
}

.rtv-media-preview {
    object-fit: cover;
}

.rtv-audio-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem;
    color: #f8fafc;
    text-align: center;
}

.rtv-audio-preview .audio-mark {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(236, 72, 153, 0.18);
    border: 1px solid rgba(236, 72, 153, 0.48);
    color: #facc15;
    font-weight: 900;
}

.rtv-audio-preview .audio-name {
    max-width: 100%;
    font-size: 0.63rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =======================================================================
   FASE 4: SAAS AI CREDIT SYSTEM STYLES
   ======================================================================= */

/* Premium Credit Badge */
.credit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(11, 15, 25, 0.85);
    border: 1px solid #d97706; /* Rich gold border */
    box-shadow: 0 0 15px rgba(217, 119, 6, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fef3c7; /* Warm bright text */
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 0.9rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.credit-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 20px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: #f59e0b;
}

/* Credit deduction pulse animation */
@keyframes creditDeducting {
    0% { opacity: 1; transform: scale(1); border-color: #ef4444; }
    50% { opacity: 0.7; transform: scale(0.96); border-color: #dc2626; box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
    100% { opacity: 1; transform: scale(1); border-color: #ef4444; }
}

.credit-deducting {
    animation: creditDeducting 1s infinite ease-in-out;
    color: #fca5a5 !important;
}

/* Responsive QR Code Display */
.qr-container {
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    display: inline-block;
    margin: 1rem auto;
    border: 3px solid #f59e0b;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    max-width: 100%;
}

#qr-display {
    max-width: 240px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 0.375rem;
}

/* Voucher form elements */
.voucher-input-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.voucher-input {
    flex-grow: 1;
    background: rgba(17, 24, 39, 0.8);
    border: 1px solid #4b5563;
    color: white;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.voucher-input:focus {
    border-color: #d97706;
}

.voucher-btn {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.voucher-btn:hover {
    opacity: 0.9;
}

/* =======================================================================
   AUTH SCREEN
   Stable static styles for the login/register/reset overlay.
   ======================================================================= */

.auth-shell {
    min-height: 100vh;
    overflow: auto;
    isolation: isolate;
    padding: clamp(1rem, 3vw, 3rem);
    background: #050507 !important;
}

.auth-video-pane {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 18%, rgba(14, 165, 233, 0.22), transparent 34rem),
        radial-gradient(circle at 76% 45%, rgba(236, 72, 153, 0.2), transparent 32rem),
        linear-gradient(135deg, #050507, #09090b 52%, #111827);
}

.auth-bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.2;
    transition: opacity 0.45s ease;
    pointer-events: none;
}

.auth-bg-video.auth-video-ready {
    opacity: 0.46;
}

.auth-video-vignette {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5, 5, 7, 0.42), rgba(5, 5, 7, 0.28) 48%, rgba(5, 5, 7, 0.9)),
        radial-gradient(circle at 50% 48%, transparent 0, rgba(5, 5, 7, 0.5) 76%);
    pointer-events: none;
}

.auth-language-wrap {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 4;
}

.auth-lang-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 9, 11, 0.72);
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-globe {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #22d3ee, #ec4899);
    box-shadow: 0 0 18px rgba(236, 72, 153, 0.5);
}

.auth-lang-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    width: 11rem;
    max-height: min(60vh, 24rem);
    overflow: auto;
    border-radius: 0.75rem;
    border: 1px solid rgba(236, 72, 153, 0.35);
    background: rgba(9, 9, 11, 0.94);
    padding: 0.35rem;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.auth-lang-menu button {
    width: 100%;
    display: block;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    color: #d4d4d8;
    text-align: left;
    font-size: 0.84rem;
}

.auth-lang-menu button:hover {
    background: rgba(236, 72, 153, 0.18);
    color: #ffffff;
}

.auth-panel-wrap {
    position: relative;
    z-index: 3;
    width: min(100%, 28rem);
    min-height: calc(100vh - clamp(2rem, 6vw, 6rem));
    margin-left: auto;
    display: flex;
    align-items: center;
}

.auth-panel {
    width: 100%;
    border: 1px solid rgba(236, 72, 153, 0.38);
    border-radius: 1.35rem;
    background: rgba(9, 9, 11, 0.76);
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #f8fafc;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.48), 0 0 55px rgba(236, 72, 153, 0.18);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.auth-logo {
    width: 5.75rem;
    height: 5.75rem;
    object-fit: cover;
    border-radius: 1.25rem;
    margin: 0 auto 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.18);
}

.auth-title {
    font-size: clamp(1.8rem, 4vw, 2.55rem);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: 0;
    text-align: center;
}

.auth-switch {
    margin-top: 0.55rem;
    color: #a1a1aa;
    text-align: center;
    font-size: 0.9rem;
}

.auth-switch button,
.auth-forgot button {
    color: #38bdf8;
    font-weight: 700;
}

.auth-social-stack,
.auth-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1.1rem;
}

.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(30, 41, 59, 0.64);
    color: #f8fafc;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.auth-social-btn:hover {
    border-color: rgba(56, 189, 248, 0.55);
    background: rgba(30, 41, 59, 0.86);
}

.auth-social-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: #71717a;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255, 255, 255, 0.12);
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 3.05rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(236, 72, 153, 0.34);
    background: rgba(9, 9, 11, 0.72);
    color: #f8fafc;
    overflow: hidden;
}

.auth-input-wrap > svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.9rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #a1a1aa;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-input-wrap input {
    min-width: 0;
    flex: 1;
    height: 100%;
    padding: 0.85rem 0.9rem;
    color: #f8fafc;
    outline: none;
}

.auth-input-wrap input:-webkit-autofill,
.auth-input-wrap input:-webkit-autofill:hover,
.auth-input-wrap input:-webkit-autofill:focus,
.auth-input-wrap input:-webkit-autofill:active {
    -webkit-text-fill-color: #f8fafc !important;
    caret-color: #f8fafc !important;
    box-shadow: 0 0 0 1000px rgba(9, 9, 11, 0.86) inset !important;
    transition: background-color 9999s ease-out 0s;
}

.auth-eye-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-grid;
    place-items: center;
    color: #a1a1aa;
}

.auth-eye-btn svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.auth-forgot {
    margin-top: -0.25rem;
    text-align: right;
    font-size: 0.84rem;
}

.auth-primary-btn,
.auth-code-btn {
    min-height: 3.05rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #ec4899, #8b5cf6 54%, #22d3ee);
    color: #ffffff;
    font-weight: 900;
    box-shadow: 0 18px 45px rgba(236, 72, 153, 0.28);
}

.auth-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
}

.auth-code-btn {
    padding: 0 1rem;
    white-space: nowrap;
}

.auth-terms,
.auth-reset-status {
    margin-top: 0.9rem;
    color: #a1a1aa;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.85rem;
    color: #a1a1aa;
    font-size: 0.78rem;
    line-height: 1.45;
}

.auth-check input {
    margin-top: 0.15rem;
    accent-color: #ec4899;
}

.login-mobile-client .auth-video-pane {
    opacity: 0.38;
}

@media (max-width: 720px) {
    .auth-shell {
        padding: 1rem;
    }

    .auth-language-wrap {
        top: 0.75rem;
        right: 0.75rem;
    }

    .auth-panel-wrap {
        min-height: calc(100vh - 2rem);
        margin: 0 auto;
        align-items: center;
    }

    .auth-panel {
        padding: 1.2rem;
        border-radius: 1rem;
    }

    .auth-logo {
        width: 4.8rem;
        height: 4.8rem;
    }

    .auth-code-row {
        grid-template-columns: 1fr;
    }
}

/* =======================================================================
   APP THEME LAYER
   Keeps the current layout/functionality, only restyles colors and surfaces.
   ======================================================================= */

html[data-app-theme="soft-ivory"] {
    --app-bg: #F8FAFC;
    --app-bg-soft: #EEF2F7;
    --app-page-bg:
        radial-gradient(circle at 18% 0%, rgba(79, 70, 229, 0.08) 0, transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(139, 92, 246, 0.07) 0, transparent 30rem),
        linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%);
    --app-surface: #FFFFFF;
    --app-surface-strong: #FFFFFF;
    --app-surface-soft: #F1F5F9;
    --app-layer: #EEF2F7;
    --app-layer-strong: #FFFFFF;
    --app-border: #CBD5E1;
    --app-border-strong: #4F46E5;
    --app-text: #334155;
    --app-muted: #64748B;
    --app-faint: #94A3B8;
    --app-accent: #4F46E5;
    --app-accent-2: #6366F1;
    --app-accent-3: #8B5CF6;
    --app-success: #059669;
    --app-warning: #B45309;
    --app-danger: #DC2626;
    --app-shadow: 0 18px 55px rgba(51, 65, 85, 0.12);
    --app-inner: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

html[data-app-theme="midnight-ocean"] {
    --app-bg: #0F172A;
    --app-bg-soft: #111C31;
    --app-page-bg:
        radial-gradient(circle at 18% 0%, rgba(14, 165, 233, 0.16) 0, transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(56, 189, 248, 0.12) 0, transparent 30rem),
        linear-gradient(180deg, #0F172A 0%, #111C31 100%);
    --app-surface: #1E293B;
    --app-surface-strong: #1E293B;
    --app-surface-soft: #26364D;
    --app-layer: #111C31;
    --app-layer-strong: #1E293B;
    --app-border: #334155;
    --app-border-strong: #0EA5E9;
    --app-text: #F8FAFC;
    --app-muted: #CBD5E1;
    --app-faint: #94A3B8;
    --app-accent: #0EA5E9;
    --app-accent-2: #0284C7;
    --app-accent-3: #38BDF8;
    --app-success: #34D399;
    --app-warning: #FBBF24;
    --app-danger: #F87171;
    --app-shadow: 0 18px 50px rgba(2, 8, 23, 0.42);
    --app-inner: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-app-theme="cyberpunk"] {
    --app-bg: #09090B;
    --app-bg-soft: #0D0A12;
    --app-page-bg:
        radial-gradient(circle at 18% 0%, rgba(236, 72, 153, 0.10) 0, transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(34, 211, 238, 0.08) 0, transparent 30rem),
        linear-gradient(180deg, #09090B 0%, #0D0A12 100%);
    --app-surface: rgba(18, 18, 24, 0.72);
    --app-surface-strong: rgba(24, 24, 30, 0.88);
    --app-surface-soft: rgba(236, 72, 153, 0.08);
    --app-layer: rgba(13, 10, 18, 0.94);
    --app-layer-strong: rgba(24, 24, 30, 0.92);
    --app-border: rgba(236, 72, 153, 0.34);
    --app-border-strong: #EC4899;
    --app-text: #D4D4D8;
    --app-muted: #A1A1AA;
    --app-faint: #71717A;
    --app-accent: #EC4899;
    --app-accent-2: #A855F7;
    --app-accent-3: #22D3EE;
    --app-success: #22C55E;
    --app-warning: #FACC15;
    --app-danger: #FB7185;
    --app-shadow: 0 24px 80px rgba(236, 72, 153, 0.16);
    --app-inner: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 22px rgba(236, 72, 153, 0.10);
}

html[data-app-theme="matcha-latte"] {
    --app-bg: #F1F5F3;
    --app-bg-soft: #E7EFEA;
    --app-page-bg:
        radial-gradient(circle at 18% 0%, rgba(5, 150, 105, 0.08) 0, transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(132, 204, 22, 0.08) 0, transparent 30rem),
        linear-gradient(180deg, #F1F5F3 0%, #E7EFEA 100%);
    --app-surface: #FAFAFA;
    --app-surface-strong: #FAFAFA;
    --app-surface-soft: #EAF3EE;
    --app-layer: #E7EFEA;
    --app-layer-strong: #FAFAFA;
    --app-border: #BBD3C5;
    --app-border-strong: #059669;
    --app-text: #064E3B;
    --app-muted: #376B58;
    --app-faint: #6B8F7F;
    --app-accent: #059669;
    --app-accent-2: #10B981;
    --app-accent-3: #84CC16;
    --app-success: #047857;
    --app-warning: #B45309;
    --app-danger: #BE123C;
    --app-shadow: 0 18px 55px rgba(6, 78, 59, 0.12);
    --app-inner: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

html[data-app-theme],
html[data-app-theme] body {
    min-height: 100%;
    background-color: var(--app-bg);
}

html[data-app-theme] body {
    background: var(--app-page-bg) !important;
    background-attachment: fixed !important;
    color: var(--app-text);
}

html[data-app-theme] #login-modal {
    background:
        radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--app-accent) 20%, transparent), transparent 34rem),
        rgba(5, 7, 10, 0.88);
}

html[data-app-theme="soft-ivory"] #login-modal,
html[data-app-theme="matcha-latte"] #login-modal {
    background:
        radial-gradient(circle at 50% 20%, rgba(2, 132, 199, 0.16), transparent 34rem),
        rgba(241, 245, 249, 0.9);
}

html[data-app-theme] #app-content {
    min-height: 100vh;
    background: var(--app-page-bg) !important;
    background-attachment: fixed !important;
    color: var(--app-text) !important;
}

html[data-app-theme] .gr-bg,
html[data-app-theme] main {
    background: transparent !important;
    color: var(--app-text) !important;
}

html[data-app-theme] header,
html[data-app-theme] .glass-header,
html[data-app-theme] .gr-panel-box,
html[data-app-theme] .gr-upload-box,
html[data-app-theme] .qr-container,
html[data-app-theme] body [class*="bg-[#111827]"],
html[data-app-theme] body [class*="bg-[#1f2937]"],
html[data-app-theme] body [class*="bg-[#0b0f19]"],
html[data-app-theme] body [class*="bg-[#2a2a2a]"],
html[data-app-theme] body [class*="bg-[#27272a]"],
html[data-app-theme] body [class*="bg-gray-900"],
html[data-app-theme] body [class*="bg-gray-800"] {
    background: var(--app-surface) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text);
    box-shadow: var(--app-inner);
}

html[data-app-theme="cyberpunk"] header,
html[data-app-theme="cyberpunk"] .gr-panel-box,
html[data-app-theme="cyberpunk"] .gr-upload-box,
html[data-app-theme="cyberpunk"] #login-modal > div,
html[data-app-theme="cyberpunk"] body [class*="bg-[#111827]"],
html[data-app-theme="cyberpunk"] body [class*="bg-[#1f2937]"] {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-app-theme] #login-modal > div,
html[data-app-theme] #profile-dropdown,
html[data-app-theme] #user-credits-display,
html[data-app-theme] [class*="shadow-xl"],
html[data-app-theme] [class*="shadow-2xl"] {
    box-shadow: var(--app-shadow) !important;
}

html[data-app-theme] #profile-dropdown,
html[data-app-theme] #profile-dropdown > div,
html[data-app-theme] #profile-dropdown [style*="background"] {
    background: var(--app-layer) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme] #profile-dropdown #user-credits-display,
html[data-app-theme] #profile-dropdown select,
html[data-app-theme] #profile-dropdown button:not(#profile-topup-button) {
    background: var(--app-layer-strong) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme] #profile-dropdown #profile-topup-button {
    background: color-mix(in srgb, var(--app-accent) 16%, var(--app-layer-strong)) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme] input,
html[data-app-theme] textarea,
html[data-app-theme] select {
    background: var(--app-surface-strong) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme] input:focus,
html[data-app-theme] textarea:focus,
html[data-app-theme] select:focus,
html[data-app-theme] .gr-radio-label:has(input:checked) {
    border-color: var(--app-border-strong) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--app-accent) 40%, transparent), 0 0 22px color-mix(in srgb, var(--app-accent) 18%, transparent);
}

html[data-app-theme] [class*="border-[#374151]"],
html[data-app-theme] [class*="border-[#1f2937]"],
html[data-app-theme] [class*="border-[#4b5563]"],
html[data-app-theme] [class*="border-gray-"] {
    border-color: var(--app-border) !important;
}

html[data-app-theme] [class*="text-gray-300"],
html[data-app-theme] [class*="text-gray-400"],
html[data-app-theme] [class*="text-gray-500"] {
    color: var(--app-muted) !important;
}

html[data-app-theme] [class*="text-white"],
html[data-app-theme] [class*="text-gray-100"] {
    color: var(--app-text) !important;
}

html[data-app-theme] [class*="text-[#fcd34d]"],
html[data-app-theme] [class*="text-[#f59e0b]"],
html[data-app-theme] [class*="text-[#d97706]"],
html[data-app-theme] .gr-tab-btn.active,
html[data-app-theme] .tab-btn.active,
html[data-app-theme] .admin-tab-btn[class*="border-[#fcd34d]"] {
    color: var(--app-accent) !important;
}

html[data-app-theme] [class*="border-[#fcd34d]"],
html[data-app-theme] [class*="border-[#f59e0b]"],
html[data-app-theme] [class*="border-[#d97706]"],
html[data-app-theme] .gr-tab-btn.active,
html[data-app-theme] .tab-btn.active {
    border-color: var(--app-accent) !important;
}

html[data-app-theme] [class*="text-[#34d399]"] {
    color: var(--app-success) !important;
}

html[data-app-theme] [class*="text-[#fbbf24]"],
html[data-app-theme] [class*="text-[#eab308]"] {
    color: var(--app-warning) !important;
}

html[data-app-theme] [class*="text-red-400"],
html[data-app-theme] [class*="text-[#f87171]"] {
    color: var(--app-danger) !important;
}

html[data-app-theme] .gr-btn-primary,
html[data-app-theme] .btn-gradient,
html[data-app-theme] button[class*="from-[#d97706]"],
html[data-app-theme] button[class*="from-[#fcd34d]"],
html[data-app-theme] button[class*="from-[#34d399]"],
html[data-app-theme] button[class*="bg-[#374151]"],
html[data-app-theme] button[class*="bg-gradient"] {
    background: linear-gradient(135deg, var(--app-accent) 0%, var(--app-accent-2) 58%, var(--app-accent-3) 100%) !important;
    border-color: color-mix(in srgb, var(--app-accent) 55%, transparent) !important;
    color: #fff !important;
    text-shadow: none !important;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--app-accent-2) 24%, transparent), var(--app-inner) !important;
}

html[data-app-theme="soft-ivory"] .gr-btn-primary,
html[data-app-theme="matcha-latte"] .gr-btn-primary,
html[data-app-theme="soft-ivory"] .btn-gradient,
html[data-app-theme="matcha-latte"] .btn-gradient,
html[data-app-theme="soft-ivory"] button[class*="from-[#d97706]"],
html[data-app-theme="matcha-latte"] button[class*="from-[#d97706]"],
html[data-app-theme="soft-ivory"] button[class*="from-[#fcd34d]"],
html[data-app-theme="matcha-latte"] button[class*="from-[#fcd34d]"],
html[data-app-theme="soft-ivory"] button[class*="from-[#34d399]"],
html[data-app-theme="matcha-latte"] button[class*="from-[#34d399]"],
html[data-app-theme="soft-ivory"] button[class*="bg-[#374151]"],
html[data-app-theme="matcha-latte"] button[class*="bg-[#374151]"],
html[data-app-theme="soft-ivory"] button[class*="bg-gradient"],
html[data-app-theme="matcha-latte"] button[class*="bg-gradient"] {
    color: #ffffff !important;
}

html[data-app-theme] button[class*="bg-[#7f1d1d]"],
html[data-app-theme] button[class*="hover:bg-[#991b1b]"] {
    background: linear-gradient(135deg, #F87171, #DC2626) !important;
    border-color: rgba(248, 113, 113, 0.45) !important;
}

html[data-app-theme] button:hover,
html[data-app-theme] a:hover {
    filter: brightness(1.08);
}

html[data-app-theme] .gr-tabs-nav,
html[data-app-theme] .gr-tab-btn,
html[data-app-theme] .tab-btn,
html[data-app-theme] .admin-tab-btn {
    background: transparent !important;
}

html[data-app-theme] .tab-btn.active,
html[data-app-theme] .gr-tab-btn.active {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--app-accent) 45%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--app-accent) 60%, transparent);
}

html[data-app-theme] .gr-radio-label,
html[data-app-theme] .gr-slider-val,
html[data-app-theme] .voucher-input,
html[data-app-theme] .credit-badge {
    background: var(--app-surface-soft) !important;
    border-color: var(--app-border) !important;
    color: var(--app-text) !important;
}

html[data-app-theme] .gr-radio-dot,
html[data-app-theme] .gr-slider {
    background: color-mix(in srgb, var(--app-muted) 35%, transparent) !important;
}

html[data-app-theme] .gr-radio-label input[type="radio"]:checked ~ .gr-radio-dot,
html[data-app-theme] .gr-slider::-webkit-slider-thumb {
    background: var(--app-accent) !important;
    border-color: var(--app-accent-2) !important;
}

html[data-app-theme] table,
html[data-app-theme] thead,
html[data-app-theme] tbody,
html[data-app-theme] tr,
html[data-app-theme] td,
html[data-app-theme] th {
    border-color: var(--app-border) !important;
}

html[data-app-theme] thead {
    background: var(--app-surface-soft) !important;
}

html[data-app-theme="midnight-ocean"] table {
    background: #0B1220 !important;
}

html[data-app-theme="midnight-ocean"] thead {
    color: #E5EDF8 !important;
}

html[data-app-theme="midnight-ocean"] tbody tr:nth-child(odd) {
    background: rgba(15, 23, 42, 0.72) !important;
}

html[data-app-theme="midnight-ocean"] tbody tr:nth-child(even) {
    background: rgba(30, 41, 59, 0.46) !important;
}

html[data-app-theme="midnight-ocean"] td,
html[data-app-theme="midnight-ocean"] th {
    color: #D7E1EF !important;
}

html[data-app-theme="midnight-ocean"] .gr-panel-box,
html[data-app-theme="midnight-ocean"] body [class*="bg-[#111827]"],
html[data-app-theme="midnight-ocean"] body [class*="bg-[#1f2937]"] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045), 0 16px 36px rgba(0,0,0,0.18);
}

html[data-app-theme="cyberpunk"] header,
html[data-app-theme="cyberpunk"] .gr-panel-box,
html[data-app-theme="cyberpunk"] .gr-upload-box,
html[data-app-theme="cyberpunk"] table {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(236,72,153,0.16), 0 0 32px rgba(236,72,153,0.10) !important;
}

html[data-app-theme="soft-ivory"] table,
html[data-app-theme="matcha-latte"] table {
    background: var(--app-surface) !important;
}

html[data-app-theme="soft-ivory"] tbody tr:nth-child(odd),
html[data-app-theme="matcha-latte"] tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0.74) !important;
}

html[data-app-theme="soft-ivory"] tbody tr:nth-child(even) {
    background: #F8FAFC !important;
}

html[data-app-theme="matcha-latte"] tbody tr:nth-child(even) {
    background: #F1F5F3 !important;
}

html[data-app-theme] #qr-display {
    background: #fff;
}

html[data-app-theme="soft-ivory"] ::placeholder,
html[data-app-theme="matcha-latte"] ::placeholder {
    color: #94A3B8;
}

.gallery-masonry-shell {
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background: color-mix(in srgb, var(--app-bg) 84%, #000 16%);
    padding: 14px;
}

.gallery-masonry {
    column-count: 2;
    column-gap: 14px;
}

@media (min-width: 768px) {
    .gallery-masonry { column-count: 3; }
}

@media (min-width: 1180px) {
    .gallery-masonry { column-count: 5; }
}

.meigen-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 14px;
    break-inside: avoid;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: #05070d;
    cursor: pointer;
    box-shadow: 0 16px 40px rgba(0,0,0,0.24);
}

.meigen-card img,
.meigen-card video {
    display: block;
    width: 100%;
    height: auto;
    min-height: 180px;
    object-fit: cover;
}

.meigen-card-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 42px 12px 12px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.86));
    color: white;
}

.meigen-card-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 7px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .16s ease, transform .16s ease;
}

.meigen-card:hover .meigen-card-actions {
    opacity: 1;
    transform: translateY(0);
}

.meigen-chip-btn {
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(8,13,24,.72);
    color: white;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

.social-viewer-shell {
    height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    background: radial-gradient(circle at 42% 45%, #f3f6f8, #dfe6ea 62%, #cfd8df);
}

.social-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 72px 40px;
}

.social-viewer-stage img,
.social-viewer-stage video {
    max-width: min(760px, 72vw);
    max-height: calc(100vh - 140px);
    border-radius: 18px;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(15,23,42,.20);
}

.social-viewer-side {
    background: #fff;
    color: #111827;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-left: 1px solid rgba(15,23,42,.08);
}

.social-viewer-top {
    position: absolute;
    top: 18px;
    right: 410px;
    left: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    z-index: 2;
}

.social-viewer-pill {
    border: 1px solid rgba(15,23,42,.08);
    background: rgba(255,255,255,.88);
    color: #111827;
    border-radius: 999px;
    padding: 10px 14px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
}

.social-prompt-box {
    background: #fbf7f0;
    border-radius: 18px;
    padding: 18px;
    line-height: 1.55;
    font-size: 14px;
}

.social-bottom-actions {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ai-chat-layout {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.ai-chat-layout.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
}

.ai-chat-sidebar {
    border: 1px solid var(--border, rgba(236,72,153,.45));
    border-radius: 14px;
    background: rgba(8, 10, 18, .74);
    padding: 14px;
    min-height: 560px;
}

.ai-chat-layout.sidebar-collapsed .ai-chat-sidebar {
    display: none;
}

.ai-chat-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow: auto;
}

.ai-chat-history-item {
    width: 100%;
    text-align: left;
    border: 1px solid rgba(148,163,184,.18);
    border-radius: 10px;
    background: rgba(15,23,42,.68);
    color: var(--text, #f8fafc);
    padding: 10px;
    transition: border-color .16s ease, background .16s ease;
}

.ai-chat-history-item:hover,
.ai-chat-history-item.active {
    border-color: var(--app-accent, #ec4899);
    background: color-mix(in srgb, var(--app-accent, #ec4899) 12%, rgba(15,23,42,.86));
}

.ai-chat-history-title {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.ai-chat-history-meta {
    font-size: 11px;
    color: var(--muted, #94a3b8);
    margin-top: 4px;
}

.ai-agent-picker {
    position: relative;
}

.ai-agent-popover {
    position: absolute;
    z-index: 40;
    left: 0;
    bottom: calc(100% + 8px);
    width: min(320px, 86vw);
    border: 1px solid var(--border, rgba(236,72,153,.45));
    border-radius: 12px;
    background: rgba(8, 10, 18, .96);
    box-shadow: 0 18px 50px rgba(0,0,0,.45);
    padding: 12px;
}

.chat-bubble-images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.chat-bubble-image {
    width: min(180px, 42vw);
    height: 128px;
    max-width: 180px;
    max-height: 128px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(148,163,184,.28);
    box-shadow: 0 8px 24px rgba(0,0,0,.20);
}

.chat-loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 42px;
    min-height: 18px;
}

.chat-loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--app-accent, #ec4899);
    opacity: .35;
    animation: chatPulse 1s infinite ease-in-out;
}

.chat-loading-dots span:nth-child(2) { animation-delay: .14s; }
.chat-loading-dots span:nth-child(3) { animation-delay: .28s; }

@keyframes chatPulse {
    0%, 80%, 100% { transform: translateY(0); opacity: .35; }
    40% { transform: translateY(-4px); opacity: 1; }
}

.gallery-play-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(2,6,23,.72);
    border: 1px solid rgba(255,255,255,.28);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.24);
    backdrop-filter: blur(8px);
}

.gallery-play-badge::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;
    margin-left: 3px;
}

.gallery-card-stats {
    font-size: 11px;
    color: rgba(255,255,255,.78);
    margin-top: 6px;
}

.social-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid var(--border, rgba(236,72,153,.28));
    background: color-mix(in srgb, var(--panel, #111827) 86%, transparent);
    border-radius: 18px;
}

.social-pill-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.social-model-pill,
.social-sort-pill {
    border: 1px solid var(--border, rgba(236,72,153,.28));
    background: color-mix(in srgb, var(--panel, #111827) 92%, transparent);
    color: var(--muted, #a1a1aa);
    border-radius: 999px;
    padding: 8px 13px;
    font-size: 12px;
    font-weight: 800;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.social-model-pill.active,
.social-sort-pill.active {
    color: #fff;
    background: var(--button, linear-gradient(90deg,#ec4899,#22d3ee));
    border-color: transparent;
}

.meigen-feature-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(2,6,23,.58);
    color: #f8fafc;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.meigen-feature-btn.is-featured {
    background: rgba(250,204,21,.94);
    color: #111827;
}

.gallery-load-more {
    width: 100%;
    margin: 16px 0 0;
    border: 1px solid var(--border, rgba(236,72,153,.28));
    background: color-mix(in srgb, var(--panel, #111827) 88%, transparent);
    color: var(--text, #fff);
    border-radius: 14px;
    padding: 12px;
    font-weight: 800;
}

.overlay-tool-shell {
    border: 1px solid var(--border, rgba(236,72,153,.45));
    border-radius: 14px;
    background: rgba(8, 10, 18, .72);
    padding: 18px;
}

.overlay-tool-head,
.overlay-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.overlay-tool-note,
.overlay-small-label,
.overlay-status {
    color: var(--muted, #94a3b8);
    font-size: 12px;
}

.overlay-tool-title,
.overlay-card-title {
    color: var(--text, #f8fafc);
    font-weight: 800;
}

.overlay-tool-size {
    color: var(--muted, #94a3b8);
    font-size: 12px;
}

.overlay-canvas-wrap {
    position: relative;
    min-height: 430px;
    border-radius: 12px;
    overflow: hidden;
    background:
        linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%);
    background-size: 24px 24px;
    background-position: 0 0, 0 12px, 12px -12px, -12px 0;
    border: 1px solid rgba(148,163,184,.22);
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-canvas-wrap canvas,
.overlay-canvas {
    max-width: 100%;
    max-height: 68vh;
    display: block;
}

.overlay-empty,
.overlay-upload-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    color: var(--muted, #94a3b8);
    background: rgba(2, 6, 23, .45);
}

.overlay-empty-icon,
.overlay-upload-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(14, 165, 233, .16);
    color: #22d3ee;
    font-size: 28px;
}

.overlay-upload-btn,
.overlay-primary-btn,
.overlay-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,.25);
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 800;
}

.overlay-upload-btn,
.overlay-primary-btn {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #22d3ee);
    color: white;
}

.overlay-secondary-btn {
    background: rgba(15,23,42,.72);
    color: var(--text, #f8fafc);
}

.overlay-editor-state {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
}

.overlay-side-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.overlay-control-card,
.overlay-panel-card {
    border: 1px solid rgba(148,163,184,.16);
    border-radius: 14px;
    background: rgba(15, 23, 42, .62);
    padding: 16px;
}

.overlay-preset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.overlay-preset-btn {
    position: relative;
    min-height: 86px;
    border: 1px solid rgba(148,163,184,.24);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(15,23,42,.68);
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-weight: 800;
    cursor: pointer;
}

.overlay-preset-btn img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
}

.overlay-preset-btn span {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 8px 6px;
    background: linear-gradient(180deg, transparent, rgba(2,6,23,.72));
    text-align: center;
    font-size: 12px;
}

.overlay-preset-btn.active {
    border-color: #22d3ee;
    box-shadow: 0 0 0 2px rgba(34,211,238,.25), 0 0 24px rgba(34,211,238,.18);
}

.overlay-upload-tile,
.overlay-upload-preset {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-style: dashed;
}

.overlay-range-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    color: var(--text, #f8fafc);
    font-size: 13px;
}

.overlay-range,
.overlay-control-card input[type="range"] {
    width: 100%;
    accent-color: #22d3ee;
    margin-top: 10px;
}

.overlay-number {
    width: 70px;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,.2);
    background: rgba(2,6,23,.72);
    color: var(--text, #f8fafc);
    padding: 6px 8px;
    text-align: right;
}

@media (max-width: 900px) {
    .ai-chat-layout,
    .ai-chat-layout.sidebar-collapsed { grid-template-columns: 1fr; }
    .ai-chat-sidebar { min-height: 220px; }
    .overlay-editor-state { grid-template-columns: 1fr; }
    .overlay-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overlay-canvas-wrap { min-height: 300px; }
}

@media (max-width: 900px) {
    .social-viewer-shell { grid-template-columns: 1fr; overflow:auto; }
    .social-viewer-stage { padding: 76px 18px 18px; min-height: 58vh; }
    .social-viewer-side { min-height: 42vh; }
    .social-viewer-top { right: 18px; left: 18px; }
    .social-viewer-stage img,
    .social-viewer-stage video { max-width: 94vw; }
}

#global-support-chat-root {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.global-chat-launcher {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(56, 189, 248, .45);
    border-radius: 999px;
    padding: 12px 16px;
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #8b5cf6 52%, #22d3ee);
    box-shadow: 0 18px 44px rgba(14, 165, 233, .24), 0 14px 40px rgba(236, 72, 153, .18);
    font-weight: 800;
    cursor: pointer;
}

.global-chat-launcher-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, .16);
}

.global-chat-panel {
    display: none;
    width: min(380px, calc(100vw - 28px));
    height: min(620px, calc(100vh - 104px));
    overflow: hidden;
    border: 1px solid rgba(236, 72, 153, .42);
    border-radius: 22px;
    background: rgba(9, 9, 11, .94);
    color: #f8fafc;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .52), 0 0 48px rgba(236, 72, 153, .14);
    backdrop-filter: blur(18px);
}

#global-support-chat-root.is-open .global-chat-panel { display: grid; grid-template-rows: auto 1fr auto; }
#global-support-chat-root.is-open .global-chat-launcher { display: none; }

.global-chat-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid rgba(236, 72, 153, .28);
    background: linear-gradient(135deg, rgba(236, 72, 153, .13), rgba(34, 211, 238, .08));
}

.global-chat-head strong { display: block; font-size: 15px; }
.global-chat-head small { display: block; margin-top: 2px; color: #94a3b8; font-size: 12px; }
.global-chat-close {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, .22);
    background: rgba(15, 23, 42, .72);
    color: #f8fafc;
    cursor: pointer;
    font-size: 22px;
}

.global-chat-messages {
    overflow-y: auto;
    padding: 16px;
    background: radial-gradient(circle at 10% 0%, rgba(34, 211, 238, .08), transparent 240px);
}

.global-chat-message { margin-bottom: 13px; }
.global-chat-message.is-user { text-align: right; }
.global-chat-role {
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.global-chat-bubble {
    display: inline-block;
    max-width: 88%;
    padding: 11px 13px;
    border-radius: 15px;
    border: 1px solid rgba(148, 163, 184, .17);
    background: rgba(15, 23, 42, .9);
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1.5;
    text-align: left;
}

.global-chat-message.is-user .global-chat-bubble {
    border-color: rgba(56, 189, 248, .34);
    background: linear-gradient(135deg, rgba(37, 99, 235, .78), rgba(139, 92, 246, .78));
    color: #fff;
}

.global-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(236, 72, 153, .24);
    background: rgba(2, 6, 23, .7);
}

.global-chat-form textarea {
    min-height: 46px;
    max-height: 110px;
    resize: vertical;
    border-radius: 14px;
    border: 1px solid rgba(236, 72, 153, .32);
    background: rgba(15, 23, 42, .88);
    color: #f8fafc;
    outline: none;
    padding: 11px 12px;
    font: inherit;
    font-size: 13px;
}

.global-chat-form button {
    align-self: end;
    border: 0;
    border-radius: 14px;
    padding: 0 16px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #22d3ee);
    font-weight: 900;
    cursor: pointer;
}

.global-chat-loader {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 7px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .36);
    border-top-color: #22d3ee;
    animation: globalChatSpin .8s linear infinite;
    vertical-align: -1px;
}

@keyframes globalChatSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    #global-support-chat-root { right: 12px; bottom: 12px; }
    .global-chat-panel { width: calc(100vw - 24px); height: min(620px, calc(100vh - 24px)); }
}