@import url('https://fonts.googleapis.com/css2?family=Cookie&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.17 | 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:Archivo,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,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:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-2{bottom:.5rem}.bottom-full{bottom:100%}.left-3{left:.75rem}.right-2{right:.5rem}.top-3{top:.75rem}.top-full{top:100%}.z-20{z-index:20}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-0{margin-bottom:0}.mb-1\.5{margin-bottom:.375rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-7{margin-bottom:1.75rem}.ml-auto{margin-left:auto}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-2\.5{margin-top:.625rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-8{margin-top:2rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[16\/8\]{aspect-ratio:16/8}.aspect-\[16\/9\]{aspect-ratio:16/9}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[110px\]{height:110px}.h-\[15px\]{height:15px}.h-\[16px\]{height:16px}.h-\[18px\]{height:18px}.h-\[19px\]{height:19px}.h-full{height:100%}.max-h-\[60vh\]{max-height:60vh}.min-h-\[23px\]{min-height:23px}.min-h-\[240px\]{min-height:240px}.min-h-\[40px\]{min-height:40px}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[15px\]{width:15px}.w-\[16px\]{width:16px}.w-\[18px\]{width:18px}.w-\[19px\]{width:19px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[1060px\]{min-width:1060px}.min-w-\[700px\]{min-width:700px}.min-w-\[760px\]{min-width:760px}.min-w-\[780px\]{min-width:780px}.min-w-\[840px\]{min-width:840px}.min-w-\[900px\]{min-width:900px}.min-w-\[940px\]{min-width:940px}.min-w-\[960px\]{min-width:960px}.max-w-\[170px\]{max-width:170px}.max-w-\[180px\]{max-width:180px}.max-w-\[190px\]{max-width:190px}.max-w-\[200px\]{max-width:200px}.max-w-\[210px\]{max-width:210px}.max-w-\[240px\]{max-width:240px}.max-w-\[250px\]{max-width:250px}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[340px\]{max-width:340px}.max-w-\[420px\]{max-width:420px}.max-w-full{max-width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.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-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-y-1{row-gap:.25rem}.space-y-2\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.625rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.625rem*var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px*var(--tw-divide-y-reverse))}.divide-line>:not([hidden])~:not([hidden]){border-color:var(--line)}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-\[10px\]{border-radius:10px}.rounded-\[12px\]{border-radius:12px}.rounded-\[14px\]{border-radius:14px}.rounded-\[7px\]{border-radius:7px}.rounded-\[8px\]{border-radius:8px}.rounded-\[9px\]{border-radius:9px}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t-\[4px\]{border-top-left-radius:4px;border-top-right-radius:4px}.border{border-width:1px}.border-x-4{border-left-width:4px;border-right-width:4px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-t{border-top-width:1px}.border-t-4{border-top-width:4px}.border-dashed{border-style:dashed}.border-brand-200{border-color:var(--brand-border)}.border-danger-200{--tw-border-opacity:1;border-color:rgb(243 184 184/var(--tw-border-opacity,1))}.border-line{border-color:var(--line)}.border-line-input{border-color:var(--line-input)}.border-line-strong{border-color:var(--line-strong)}.border-success-200{--tw-border-opacity:1;border-color:rgb(198 233 198/var(--tw-border-opacity,1))}.border-warn-200{--tw-border-opacity:1;border-color:rgb(243 217 164/var(--tw-border-opacity,1))}.border-x-transparent{border-left-color:transparent;border-right-color:transparent}.border-t-ink-900{border-top-color:var(--ink)}.bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity,1))}.bg-brand-50{background-color:var(--brand-tint)}.bg-brand-600{background-color:var(--brand-strong)}.bg-cream-100{background-color:var(--surface-muted)}.bg-cream-200{background-color:var(--surface-hover)}.bg-cream-50{background-color:var(--canvas)}.bg-danger-100{--tw-bg-opacity:1;background-color:rgb(253 236 236/var(--tw-bg-opacity,1))}.bg-danger-50{--tw-bg-opacity:1;background-color:rgb(254 244 244/var(--tw-bg-opacity,1))}.bg-emerald-50{--tw-bg-opacity:1;background-color:rgb(236 253 245/var(--tw-bg-opacity,1))}.bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity,1))}.bg-ink-900{background-color:var(--ink)}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240/var(--tw-bg-opacity,1))}.bg-success-100{--tw-bg-opacity:1;background-color:rgb(238 249 238/var(--tw-bg-opacity,1))}.bg-success-50{--tw-bg-opacity:1;background-color:rgb(243 251 244/var(--tw-bg-opacity,1))}.bg-warn-100{--tw-bg-opacity:1;background-color:rgb(253 243 224/var(--tw-bg-opacity,1))}.bg-warn-50{--tw-bg-opacity:1;background-color:rgb(253 248 238/var(--tw-bg-opacity,1))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-11{padding-top:2.75rem;padding-bottom:2.75rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}.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-8{padding-top:2rem;padding-bottom:2rem}.pb-1{padding-bottom:.25rem}.pb-12{padding-bottom:3rem}.pb-3{padding-bottom:.75rem}.pl-10{padding-left:2.5rem}.pr-3{padding-right:.75rem}.pt-0{padding-top:0}.pt-2{padding-top:.5rem}.pt-2\.5{padding-top:.625rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.font-sans{font-family:Archivo,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.text-\[10\.5px\]{font-size:10.5px}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13\.5px\]{font-size:13.5px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[21px\]{font-size:21px}.text-\[23px\]{font-size:23px}.text-\[24px\]{font-size:24px}.text-\[29px\]{font-size:29px}.text-\[9\.5px\]{font-size:9.5px}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-4{line-height:1rem}.leading-5{line-height:1.25rem}.leading-\[18px\]{line-height:18px}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.tracking-\[-0\.035em\]{letter-spacing:-.035em}.tracking-\[-0\.04em\]{letter-spacing:-.04em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-\[0\.07em\]{letter-spacing:.07em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-\[0\.12em\]{letter-spacing:.12em}.text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity,1))}.text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity,1))}.text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity,1))}.text-brand-600{color:var(--brand-strong)}.text-brand-700{color:var(--brand-deep)}.text-danger-600{--tw-text-opacity:1;color:rgb(180 35 35/var(--tw-text-opacity,1))}.text-danger-700{--tw-text-opacity:1;color:rgb(145 32 32/var(--tw-text-opacity,1))}.text-emerald-600{--tw-text-opacity:1;color:rgb(5 150 105/var(--tw-text-opacity,1))}.text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity,1))}.text-ink-300{color:var(--ink-300)}.text-ink-400{color:var(--faint)}.text-ink-500{color:var(--muted)}.text-ink-600{color:var(--ink-600)}.text-ink-700{color:var(--ink-strong)}.text-ink-800{color:var(--ink-800)}.text-ink-900{color:var(--ink)}.text-success-700{--tw-text-opacity:1;color:rgb(20 102 74/var(--tw-text-opacity,1))}.text-warn-700{--tw-text-opacity:1;color:rgb(138 90 0/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.shadow-card{--tw-shadow:var(--shadow-card);--tw-shadow-colored:var(--shadow-card)}.shadow-card,.shadow-control{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-control{--tw-shadow:var(--shadow-control);--tw-shadow-colored:var(--shadow-control)}.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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.grayscale{--tw-grayscale:grayscale(100%)}.filter,.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)}.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}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.placeholder\:text-ink-400::-moz-placeholder{color:var(--faint)}.placeholder\:text-ink-400::placeholder{color:var(--faint)}.first\:pt-0:first-child{padding-top:0}.last\:pb-0:last-child{padding-bottom:0}.hover\:border-danger-200:hover{--tw-border-opacity:1;border-color:rgb(243 184 184/var(--tw-border-opacity,1))}.hover\:bg-brand-50:hover{background-color:var(--brand-tint)}.hover\:bg-brand-700:hover{background-color:var(--brand-deep)}.hover\:bg-cream-100:hover{background-color:var(--surface-muted)}.hover\:bg-danger-50:hover{--tw-bg-opacity:1;background-color:rgb(254 244 244/var(--tw-bg-opacity,1))}.hover\:bg-success-50:hover{--tw-bg-opacity:1;background-color:rgb(243 251 244/var(--tw-bg-opacity,1))}.hover\:text-brand-700:hover{color:var(--brand-deep)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lift:hover{--tw-shadow:var(--shadow-lift);--tw-shadow-colored:var(--shadow-lift);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.focus\:border-brand-500:focus{--tw-border-opacity:1;border-color:rgb(var(--brand-rgb)/var(--tw-border-opacity,1))}.focus\:opacity-100:focus{opacity:1}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.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);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-brand-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(var(--brand-rgb)/var(--tw-ring-opacity,1))}.focus\:ring-brand-500\/15:focus{--tw-ring-color:rgb(var(--brand-rgb)/0.15)}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.group:hover .group-hover\:flex{display:flex}.group:hover .group-hover\: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))}.group:hover .group-hover\:text-ink-700{color:var(--ink-strong)}.group:hover .group-hover\:opacity-100{opacity:1}.group:hover .group-hover\: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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:brightness-95{--tw-brightness:brightness(.95);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)}@media (min-width:640px){.sm\:col-span-2{grid-column:span 2/span 2}.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\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:grid-cols-\[minmax\(0\2c 1fr\)_220px\]{grid-template-columns:minmax(0,1fr) 220px}.sm\:flex-row{flex-direction:row}.sm\:items-start{align-items:flex-start}.sm\:items-center{align-items:center}.sm\:justify-between{justify-content:space-between}.sm\:p-5{padding:1.25rem}.sm\:p-7{padding:1.75rem}.sm\:text-right{text-align:right}.sm\:text-\[23px\]{font-size:23px}.sm\:text-\[25px\]{font-size:25px}}@media (min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media (min-width:1280px){.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}

:root {
  color-scheme: light;
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --surface: #ffffff;
  --canvas: #fbfbfb;
  --surface-muted: var(--canvas);
  --surface-hover: #f6f6f6;
  --surface-subtle: #f3f3f3;
  --line: #e3e3e3;
  --line-input: var(--line);
  --line-strong: #d4d4d4;
  --line-hover: #c2c2c2;
  --ink: #171717;
  --ink-800: #262626;
  --ink-strong: #313131;
  --ink-600: #525252;
  --muted: #737373;
  --faint: #999999;
  --ink-300: #bdbdbd;
  --brand-rgb: 219 39 119;
  --brand: rgb(var(--brand-rgb));
  --brand-top: #ec4899;
  --brand-strong: #be185d;
  --brand-deep: #9d174d;
  --brand-soft: #f472b6;
  --brand-border: #fbcfe8;
  --brand-subtle: #fdf2f8;
  --brand-tint: #fdf2f8;
  --sidebar-width: 259px;
  --sidebar-width-collapsed: 56px;
  --topbar-height: 57px;
  --shadow-card: 0 1px 1px rgb(23 23 23 / 0.04);
  --shadow-control: 0 1px 2px rgb(23 23 23 / 0.04);
  --shadow-lift: 0 8px 24px -8px rgb(23 23 23 / 0.16);
  --shadow-menu: 0 16px 40px -16px rgb(23 23 23 / 0.24);
  --shadow-modal: 0 24px 80px -12px rgb(23 23 23 / 0.3);
}

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

html {
  min-width: 320px;
  scrollbar-color: var(--line-hover) transparent;
  scrollbar-width: thin;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  flex: 0 0 auto;
}

/* Buttons and links keep a visible ring; inputs own their focus chrome via wrappers. */
:where(button, a, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

input,
textarea,
select {
  outline: none;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--line-hover);
}

*::-webkit-scrollbar-track {
  background: transparent;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Animations ---------- */
@keyframes cfFadeUp {
  from { opacity: 0; transform: translateY(6px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cfFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Shell ---------- */
.app-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: clip;
  background: var(--canvas);
}

.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 560px;
  flex: 0 0 var(--sidebar-width);
  flex-direction: column;
  border-right: 1px solid var(--line);
  background: var(--surface-muted);
  transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1), flex-basis 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms ease;
}

.sidebar-brand {
  display: flex;
  height: var(--topbar-height);
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.brand-mark {
  display: inline-block;
  width: 32px;
  height: 24px;
  max-width: 32px;
  max-height: 24px;
  flex: 0 0 32px;
  border-radius: 0 !important;
  background: url('img/logo-mark.png?v=4') center / contain no-repeat transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  text-indent: -9999px;
}

.brand-mark.mx-auto {
  width: 60px !important;
  height: 38px !important;
  max-width: 60px !important;
  max-height: 38px !important;
  margin-bottom: 8px !important;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 0;
}

.brand-title {
  font-family: 'Cookie', cursive !important;
  color: var(--ink);
  font-size: 30px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
  line-height: 1 !important;
  display: inline-block;
}

.brand-subtitle {
  display: none !important;
}

/* Quick search — opens the command palette. */
.sidebar-search {
  display: flex;
  width: 100%;
  height: 34px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--line-input);
  border-radius: 10px;
  background: var(--surface);
  color: var(--faint);
  font-size: 13px;
  text-align: left;
  box-shadow: var(--shadow-control);
  transition: border-color 140ms ease, color 140ms ease;
}

.sidebar-search:hover {
  border-color: var(--line-hover);
  color: var(--muted);
}

.sidebar-search span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-search kbd,
.palette-footer kbd,
.palette-input-row kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-subtle);
  color: var(--faint);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.sidebar-search-wrap {
  flex: 0 0 auto;
  padding: 12px 12px 0;
}

.sidebar-navigation {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px;
}

.sidebar-section-label {
  margin: 14px 10px 4px;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

.sidebar-section-label:first-child {
  margin-top: 2px;
}

.sidebar-link {
  position: relative;
  display: flex;
  height: 32px;
  align-items: center;
  gap: 10px;
  margin: 1px 0;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--ink-strong);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 140ms ease, color 140ms ease;
}

.sidebar-link svg {
  color: var(--muted);
  transition: color 140ms ease;
}

.sidebar-link:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.sidebar-link:hover svg {
  color: var(--ink);
}

.sidebar-link:active {
  background: var(--line);
}

.sidebar-link span {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-link[aria-current="page"] {
  background: var(--surface-subtle);
  color: var(--ink);
  font-weight: 500;
}

.sidebar-link[aria-current="page"] svg {
  color: var(--ink);
}

.sidebar-footer {
  display: flex;
  min-height: 48px;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
  font-weight: 500;
}

.sidebar-footer-mark {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sidebar-collapse-wrap {
  flex: 0 0 auto;
  height: 48px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  box-sizing: border-box;
}

.sidebar-collapse-button {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.sidebar-collapse-button:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.sidebar-collapse-button svg {
  color: var(--muted);
}

/* Desktop-only collapse affordance; the mobile drawer is always expanded. */
@media (min-width: 1024px) {
  .sidebar-collapse-button {
    display: flex;
  }

  .app-sidebar.is-collapsed {
    width: var(--sidebar-width-collapsed);
    flex-basis: var(--sidebar-width-collapsed);
  }

  .app-sidebar.is-collapsed .sidebar-brand {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar.is-collapsed .brand-copy,
  .app-sidebar.is-collapsed .sidebar-footer,
  .app-sidebar.is-collapsed .sidebar-search span,
  .app-sidebar.is-collapsed .sidebar-search kbd {
    display: none;
  }

  .app-sidebar.is-collapsed .sidebar-search-wrap {
    padding: 12px 8px 0;
  }

  .app-sidebar.is-collapsed .sidebar-search {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar.is-collapsed .sidebar-navigation {
    padding: 12px 8px;
  }

  .app-sidebar.is-collapsed .sidebar-link {
    justify-content: center;
    padding: 0;
  }

  .app-sidebar.is-collapsed .sidebar-link span {
    display: none;
  }

  .app-sidebar.is-collapsed .sidebar-section-label {
    height: 1px;
    margin: 12px 10px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: var(--line);
    overflow: hidden;
  }

  .app-sidebar.is-collapsed .sidebar-section-label:first-child {
    display: none;
  }

  .app-sidebar.is-collapsed .sidebar-collapse-wrap {
    justify-content: center;
    padding: 0;
  }

}

/* ---------- Topbar ---------- */
.app-main {
  display: flex;
  min-width: 0;
  min-height: 100vh;
  flex: 1 1 auto;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  height: var(--topbar-height);
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
}

.topbar-start {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.topbar-context {
  color: var(--ink-strong);
  font-size: 13.5px;
  font-weight: 500;
}

.mobile-menu-button {
  display: none;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-strong);
}

.mobile-menu-button:hover {
  background: var(--surface-subtle);
}

/* ---------- Dropdowns ---------- */
.dropdown-container {
  position: relative;
}

.profile-trigger {
  display: flex;
  height: 34px;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-strong);
  font-size: 13px;
  font-weight: 500;
  transition: background 140ms ease;
}

.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] {
  background: var(--surface-subtle);
  color: var(--ink);
}

.profile-avatar {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brand-top), var(--brand));
  color: var(--surface);
  font-size: 11px;
  font-weight: 600;
}

.profile-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 100;
  min-width: 230px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-menu);
}

.dropdown-menu.hidden {
  display: none;
}

.dropdown-menu.is-open {
  display: block;
  animation: menuIn 140ms ease-out;
}

.profile-summary {
  padding: 9px 10px 11px;
  border-bottom: 1px solid var(--line);
}

.profile-summary-name {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.profile-summary-email {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--faint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-action {
  display: flex;
  width: 100%;
  min-height: 36px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-strong);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  transition: background 120ms ease;
}

.dropdown-action:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.dropdown-action.is-danger {
  color: #b42323;
}

.dropdown-action.is-danger:hover {
  background: #fdecec;
}

/* ---------- Main content ---------- */
.admin-main {
  min-width: 0;
  flex: 1 1 auto;
  padding-bottom: 0;
  background: var(--canvas);
  animation: cfFade 180ms ease-out;
}

/* ==========================================================================
   App Page Footer (Centered with vertical hair lines)
   ========================================================================== */
.app-page-footer {
  flex: 0 0 auto;
  margin-top: 30px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
  font-size: 11.5px;
  color: var(--faint, #6f6b63);
  box-sizing: border-box;
}

.app-page-footer-container {
  width: min(100% - 48px, 1120px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .app-page-footer-container {
    width: min(100% - 32px, 1120px);
  }
}

.app-page-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.app-page-footer-divider {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--line-strong, #d4d4d4);
  flex-shrink: 0;
}

.app-page-footer-link {
  color: var(--faint, #6f6b63);
  text-decoration: none;
  font-weight: 500;
  transition: color 140ms ease;
}

.app-page-footer-link:hover {
  color: var(--ink, #1b1917);
  text-decoration: underline;
}

.app-page-footer-cookie-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--faint, #6f6b63);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 140ms ease;
}

.app-page-footer-cookie-btn:hover {
  color: var(--ink, #1b1917);
}

.cookie-icon-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.app-page-footer-copy {
  color: var(--faint, #6f6b63);
}

.admin-feedback-wrap,
.admin-page-container,
.admin-content,
.admin-tabs-inner {
  width: min(100% - 48px, 1120px);
  margin: 0 auto;
}

.admin-feedback-wrap {
  display: none !important;
}

/* ==========================================================================
   Anvitation Minimalist Professional Snackbar Toast System
   ========================================================================== */
.toast-snackbar-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: min(580px, calc(100vw - 32px));
}

.toast-snackbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 320px;
  width: 100%;
  padding: 12px 18px;
  background-color: #0d0d0f;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.55), 0 4px 12px -2px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.01em;
  pointer-events: auto;
  box-sizing: border-box;
  animation: toastSnackbarSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: transform, opacity;
}

.toast-snackbar.is-hiding {
  animation: toastSnackbarSlideDown 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-snackbar-content {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.toast-snackbar-text {
  flex: 1;
  color: #ffffff;
  word-break: break-word;
}

.toast-snackbar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin: -4px -8px -4px 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.toast-snackbar-close:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.15);
}

.toast-snackbar-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 1px;
}

@keyframes toastSnackbarSlideUp {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastSnackbarSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
}

@media (max-width: 640px) {
  .toast-snackbar-container {
    bottom: 16px;
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }
  .toast-snackbar {
    min-width: 0;
    padding: 11px 14px;
    font-size: 13px;
  }
}

.flash-message {
  display: none !important;
}

/* ---------- Page header ---------- */
.admin-page-heading {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.admin-page-heading.border-b-0,
.admin-page-heading.has-no-border {
  border-bottom: 0 !important;
}

.admin-page-container {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
}

.admin-page-copy {
  min-width: 0;
}

.admin-page-title {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.admin-page-title.is-hero,
.admin-page-title.is-large {
  font-size: clamp(28px, 2.5vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

.admin-page-description {
  max-width: 680px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 20px;
}

.admin-page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 26px 0 12px;
}

.admin-section-title {
  margin: 0;
  color: var(--ink-strong);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.admin-section-link {
  color: var(--brand-strong);
  font-size: 12.5px;
  font-weight: 500;
}

.admin-section-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Tables ---------- */
.data-table-scroll {
  width: 100%;
  overflow-x: auto;
}

table {
  border-collapse: collapse;
}

.data-table th {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.data-table td {
  padding: 11px 16px;
  vertical-align: middle;
}

.data-table tbody tr {
  transition: background 120ms ease;
}

.data-table tbody tr:hover {
  background: var(--surface-muted);
}

.data-table-empty td {
  padding: 40px 18px;
  color: var(--faint);
  text-align: center;
}

.search-toolbar {
  margin-bottom: 18px;
}

.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.search-control {
  display: flex;
  flex: 1 1 320px;
  align-items: center;
  min-width: 0;
  max-width: 400px;
  height: 40px;
  border: 1px solid var(--line-input);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-control);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.search-control:hover {
  border-color: var(--line-hover);
}

.search-control:focus-within {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand), var(--shadow-control);
}

.search-control input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 10px 0 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  box-shadow: none;
}

.search-control input::placeholder {
  color: var(--faint);
}

.search-control input::-webkit-search-cancel-button {
  appearance: none;
}

.search-submit,
.search-clear {
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

.search-submit:hover,
.search-clear:hover {
  color: var(--ink);
}

.search-clear[hidden],
.palette-item[hidden] {
  display: none;
}

.toolbar-filter-trigger {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.toolbar-filter-trigger:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.toolbar-filter-trigger.has-filters {
  color: var(--brand);
}

.filter-active-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.modal-dialog.filter-dialog {
  width: min(100%, 420px);
}

.filter-panel-actions {
  display: flex;
  gap: 8px;
}

.filter-panel-fields {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.filter-field {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 500;
}

.toolbar-select {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-input);
  border-radius: 8px;
  background-color: var(--surface);
  color: var(--ink-strong);
  font-size: 12.5px;
  font-weight: 400;
  text-overflow: ellipsis;
  box-shadow: var(--shadow-control);
  transition: border-color 150ms ease, box-shadow 150ms ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.toolbar-select:hover {
  border-color: var(--line-hover);
}

.toolbar-select:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--brand);
}

.filter-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
}

.toolbar-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  max-width: 100%;
  margin: 0;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.toolbar-meta strong {
  color: var(--ink-strong);
  font-weight: 600;
}

.toolbar-reset {
  flex: 0 0 auto;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.toolbar-reset:hover {
  border-color: var(--line-hover);
  background: var(--surface-subtle);
  color: var(--ink);
}

@media (max-width: 720px) {
  .toolbar-row {
    gap: 8px;
  }

  .search-control {
    max-width: none;
  }
}

/* ---------- Integrated Search Bar & Horizontal Line (Reusable) ---------- */
.admin-search-strip {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.admin-search-strip-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background-color: var(--line, #e3dece);
  z-index: 0;
}

.admin-search-strip-container {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1120px);
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .admin-search-strip-container {
    width: min(100% - 32px, 1120px);
  }
}

.admin-search-dock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: calc(100% + 10px);
  margin-left: -5px;
  margin-right: -5px;
  max-width: none;
  padding: 4px;
  background: #f8f8f8;
  border: 1px solid var(--line, #e3dece);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.admin-search-strip.has-dock-top .admin-search-strip-line {
  top: auto;
  bottom: 24px;
}

.admin-search-dock-top {
  width: 100%;
}

.admin-dock-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px; /* Value gap sama persis dengan value padding container luar (4px) */
  width: 100%;
}

@media (max-width: 1024px) {
  .admin-dock-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .admin-dock-stats-grid {
    grid-template-columns: 1fr;
  }
}

.admin-dock-stat-card {
  min-width: 0;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-dock-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #737373);
  margin: 0;
  line-height: 1.2;
}

.admin-dock-stat-value {
  margin-top: 6px;
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  color: var(--ink, #171717);
  line-height: 1.2;
}

.admin-dock-stat-delta {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--muted, #737373);
}

.admin-dock-stat-delta.is-positive {
  color: #15803d;
}

.admin-dock-stat-delta.is-danger {
  color: #b91c1c;
}

.admin-dock-stat-hint {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 11px;
  line-height: 1.3;
  color: var(--faint, #999999);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-search-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.admin-search-inner:focus-within {
  border-color: #9ca3af;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08);
}

.admin-search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 140px;
  height: 100%;
  padding: 0 14px;
  gap: 9px;
}

.admin-search-field svg,
.admin-search-field i {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
}

.admin-search-input {
  width: 100%;
  height: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-900, #1b1917);
  padding: 0;
  margin: 0;
}

.admin-search-input::placeholder {
  color: #9ca3af;
}

.admin-search-separator {
  width: 1px;
  height: 100%;
  background: #e5e7eb;
  flex-shrink: 0;
  display: block;
}

.admin-search-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background-color 150ms ease;
  box-sizing: border-box;
}

.admin-search-select-wrap:hover {
  background-color: #f9fafb;
}

.admin-search-select-wrap[aria-expanded="true"] {
  background-color: #f3f4f6;
}

.admin-search-select-wrap:focus-visible {
  outline: 2px solid var(--brand, #045ede);
  outline-offset: -2px;
}

.admin-search-select-label {
  font-size: 12.5px;
  font-weight: 500;
  color: #374151;
}

.admin-search-select-wrap svg,
.admin-search-select-wrap i {
  width: 14px;
  height: 14px;
  color: #9ca3af;
  flex-shrink: 0;
}

/* Custom Search Bar Dropdown (Nested Container Besar & Kecil) */
.admin-search-dropdown-dock {
  position: absolute;
  top: calc(100% - 1px);
  padding: 5px;
  background: #f8f8f8;
  border: 1px solid var(--line, #e3dece);
  border-radius: 12px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  z-index: 60;
  min-width: 170px;
  max-width: 280px;
  box-sizing: border-box;
  animation: searchDropFade 120ms ease-out;
}

.admin-search-dropdown-dock[hidden] {
  display: none !important;
}

@keyframes searchDropFade {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-search-dropdown-arrow {
  position: absolute;
  top: -5px;
  width: 12px;
  height: 5px;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.admin-search-dropdown-arrow svg {
  display: block;
  width: 12px;
  height: 5px;
  overflow: visible;
}

.admin-search-dropdown-inner {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  padding: 3px;
}

.admin-search-dropdown-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-search-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-800, #262626);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background-color 100ms ease, color 100ms ease;
  gap: 12px;
  box-sizing: border-box;
}

.admin-search-dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.admin-search-dropdown-item:focus-visible {
  outline: 2px solid var(--brand, #045ede);
  outline-offset: -2px;
}

.admin-search-dropdown-item.is-selected {
  background-color: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
  font-weight: 500;
}

.admin-search-item-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-search-item-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--brand-strong, #045ede);
  visibility: hidden;
}

.admin-search-dropdown-item.is-selected .admin-search-item-check {
  visibility: visible;
}

.admin-search-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: 0;
  color: #4b5563;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
  flex-shrink: 0;
  text-decoration: none;
}

.admin-search-action:hover {
  background-color: #f9fafb;
  color: #111827;
}

.admin-search-action svg,
.admin-search-action i {
  width: 14px;
  height: 14px;
}

@media (max-width: 1279.98px) {
  .admin-search-inner .admin-search-separator.is-filter-2,
  .admin-search-inner .admin-search-select-wrap.is-filter-2 {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .admin-search-inner .admin-search-separator.is-filter-1,
  .admin-search-inner .admin-search-select-wrap.is-filter-1 {
    display: none !important;
  }
}

/* ---------- Tabs (underline, count pills) ---------- */
.admin-tabs {
  border-bottom: 1px solid var(--line);
  background: var(--canvas);
}

.admin-tabs-inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  overflow-y: hidden;
}

.admin-tab {
  position: relative;
  display: inline-flex;
  height: 42px;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 8px 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 130ms ease, background 130ms ease;
}

.admin-tab:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.admin-tab[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.admin-tab[aria-current="page"]::after {
  position: absolute;
  right: 10px;
  bottom: -1px;
  left: 10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  content: "";
}

.admin-tab-count {
  display: inline-flex;
  height: 18px;
  min-width: 18px;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.admin-tab[aria-current="page"] .admin-tab-count {
  background: var(--ink);
  color: var(--surface);
}

/* ---------- Editor sub-navigation (segmented pill tabs, matching FE) ---------- */
.editor-subnav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-hover);
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.editor-subnav::-webkit-scrollbar {
  display: none;
}

.editor-subnav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-600);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.editor-subnav-item:hover {
  color: var(--ink);
}

.editor-subnav-item[aria-current="page"],
.editor-subnav-item.is-active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(20 21 26 / 0.06), 0 1px 1px rgb(20 21 26 / 0.04);
}

.editor-subnav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(23 23 23 / 0.06);
  color: var(--ink-600);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.editor-subnav-item[aria-current="page"] .editor-subnav-count,
.editor-subnav-item.is-active .editor-subnav-count {
  background: var(--surface-subtle);
  color: var(--ink);
}

/* ---------- Empty state ---------- */
.empty-state {
  padding: 52px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-muted);
  text-align: center;
  animation: cfFade 200ms ease-out;
}

.empty-state-icon {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--faint);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.05);
}

.empty-state-title {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.empty-state-description {
  max-width: 380px;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 19px;
}

/* ---------- Modals ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 18px;
  background: rgba(23, 23, 23, 0.45);
  backdrop-filter: blur(2px);
}

.modal-backdrop.is-open {
  display: flex;
  animation: cfFade 140ms ease-out;
}

.modal-dialog {
  width: min(100%, 520px);
  max-height: min(88vh, 780px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  animation: modalIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-dialog.modal-wide {
  width: min(100%, 720px);
}

.modal-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-heading-title {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
}

.icon-button {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  transition: background 120ms ease, color 120ms ease;
}

.icon-button:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

body.modal-open {
  overflow: hidden;
}

.confirm-dialog {
  width: min(100%, 420px);
}

.confirm-message {
  margin: 0;
  padding: 16px 20px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 20px;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
}

.copy-button.is-copied {
  color: #177245;
}

.is-filter-empty {
  display: none;
}

/* ---------- Command palette ---------- */
.palette-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(23, 23, 23, 0.45);
  backdrop-filter: blur(2px);
  animation: cfFade 140ms ease-out;
}

.palette-overlay[hidden] {
  display: none;
}

.palette-dialog {
  width: min(100%, 560px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-modal);
  animation: modalIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: var(--faint);
}

.palette-input {
  height: 48px;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

.palette-input::placeholder {
  color: var(--faint);
}

.palette-list {
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
}

.palette-label {
  margin: 0;
  padding: 8px 10px 4px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.palette-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-strong);
  text-align: left;
  transition: background 100ms ease;
}

.palette-item:hover,
.palette-item.is-active {
  background: var(--brand-tint);
  box-shadow: inset 0 0 0 1px var(--brand-border);
  color: var(--ink);
}

.palette-item-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--muted);
}

.palette-item.is-active .palette-item-icon {
  border-color: var(--brand-border);
  background: var(--surface);
  color: var(--brand-strong);
}

.palette-item-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.palette-item-hint {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--faint);
  font-size: 11px;
}

.palette-empty {
  padding: 28px 12px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}

.palette-empty small {
  display: block;
  margin-top: 4px;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 400;
}

.palette-footer {
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: var(--surface-muted);
  color: var(--faint);
  font-size: 11.5px;
}

.palette-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---------- Mobile drawer ---------- */
.mobile-backdrop {
  display: none;
}

@media (max-width: 1023px) {
  .app-sidebar {
    position: fixed;
    left: 0;
    height: 100dvh;
    min-height: 0;
    transform: translateX(-101%);
    box-shadow: none;
  }

  .app-sidebar.is-open {
    transform: translateX(0);
    box-shadow: 16px 0 42px rgba(23, 23, 23, 0.18);
  }

  .mobile-backdrop.is-visible {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    background: rgba(23, 23, 23, 0.4);
    animation: cfFade 160ms ease-out;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .app-topbar {
    padding: 0 20px;
  }

  .topbar-context {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-topbar {
    height: 57px;
    padding: 0 14px;
  }

  .profile-name {
    display: none;
  }

  .admin-page-container,
  .admin-content,
  .admin-feedback-wrap,
  .admin-tabs-inner {
    width: min(100% - 32px, 1120px);
  }

  .admin-page-container {
    min-height: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 20px 0 18px;
  }

  .admin-page-actions {
    width: 100%;
  }

  .admin-page-actions > * {
    max-width: 100%;
  }

  .admin-section-heading {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.btn,
:where(a, button).inline-flex:is(.bg-brand-600, .border-line-input) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
}

.btn.btn-sm {
  height: 30px;
  padding: 0 10px;
}

.btn-primary,
:where(a, button).inline-flex.bg-brand-600 {
  border-color: var(--brand-strong);
  background-color: var(--brand);
  background-image: linear-gradient(180deg, var(--brand-top), var(--brand));
  color: var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 1px rgb(var(--brand-rgb) / 0.12);
}

.btn-primary:hover,
:where(a, button).inline-flex.bg-brand-600:hover {
  border-color: var(--brand-strong);
  background-color: var(--brand-strong);
  background-image: linear-gradient(180deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(var(--brand-rgb) / 0.18);
}

.btn-primary:active,
:where(a, button).inline-flex.bg-brand-600:active {
  border-color: var(--brand-deep);
  background-color: var(--brand-deep);
  background-image: linear-gradient(180deg, var(--brand-strong), var(--brand-deep));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
  transform: translateY(0.5px);
}

.btn-secondary,
:where(a, button).inline-flex.border-line-input {
  border-color: var(--line-input);
  background: var(--surface);
  color: var(--ink-strong);
  box-shadow: var(--shadow-control);
}

.btn-secondary:hover,
:where(a, button).inline-flex.border-line-input:hover {
  border-color: var(--line-hover);
  background: var(--surface-muted);
}

.btn-secondary:active,
:where(a, button).inline-flex.border-line-input:active {
  background: var(--surface-subtle);
  transform: translateY(0.5px);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--surface-subtle);
  color: var(--ink);
}

.btn-ghost:active {
  background: var(--surface-subtle);
  transform: translateY(0.5px);
}

:where(a, button).inline-flex.border-line-input.text-danger-700 {
  border-color: #f3b8b8;
  color: #b0352e;
}

:where(a, button).inline-flex.border-line-input.text-danger-700:hover {
  border-color: #eda1a1;
  background: #fdecec;
}

.btn:disabled,
:where(a, button).inline-flex:is(.bg-brand-600, .border-line-input):disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

@media (pointer: coarse) {
  .btn,
  .btn.btn-sm,
  :where(a, button).inline-flex:is(.bg-brand-600, .border-line-input) {
    min-height: 40px;
  }
}

/* ==========================================================================
   Admin Overview Cards & Metric Grids (Pure CSS - No Rebuild Needed)
   ========================================================================== */
.overview-top-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .overview-top-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.overview-bottom-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 640px) {
  .overview-bottom-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .overview-bottom-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .overview-bottom-cards.is-two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.overview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--line, #e3dece);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (min-width: 640px) {
  .overview-card {
    padding: 16px 20px;
  }
}

.overview-top-cards .overview-card {
  padding: 14px 16px;
}

@media (min-width: 640px) {
  .overview-top-cards .overview-card {
    padding: 16px 20px;
  }
}

.overview-bottom-cards .overview-card {
  min-height: 236px;
  padding: 16px;
}

@media (min-width: 640px) {
  .overview-bottom-cards .overview-card {
    padding: 16px 20px;
  }
}

.overview-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.overview-card-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint, #6f6b63);
}

.overview-card-value-wrap {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink, #1b1917);
  line-height: 1.35;
}

@media (min-width: 640px) {
  .overview-card-value-wrap {
    font-size: 32px;
  }
}

.overview-card-value-wrap.overview-card-value-currency {
  font-size: 24px;
}

@media (min-width: 640px) {
  .overview-card-value-wrap.overview-card-value-currency {
    font-size: 26px;
  }
}

.overview-card-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  color: var(--faint, #6f6b63);
}

.overview-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
}

.overview-badge-blue {
  background: #eff6ff;
  color: #1d4ed8;
}

.overview-badge-green {
  background: #ecfdf5;
  color: #047857;
}

.overview-badge-amber {
  background: #fffbeb;
  color: #b45309;
}

.overview-badge-gray {
  background: var(--surface-muted, #f4efe4);
  color: var(--ink-muted, #524f48);
}

/* Chart Bars */
.overview-chart-wrap {
  margin-top: 14px;
}

.overview-chart-bars {
  display: flex;
  align-items: flex-end;
  height: 125px;
  gap: 8px;
  padding: 0 4px 4px 4px;
  border-bottom: 1px solid rgba(227, 222, 206, 0.7);
}

.overview-chart-col {
  position: relative;
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.overview-chart-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Blue Bar (Traffic Undangan) - Persis style tombol Pesanan */
.overview-chart-bar.is-blue {
  border-top: 1px solid var(--brand-strong);
  border-left: 1px solid var(--brand-strong);
  border-right: 1px solid var(--brand-strong);
  background: linear-gradient(180deg, var(--brand-top), var(--brand));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(var(--brand-rgb) / 0.16);
}

.overview-chart-bar.is-blue:hover {
  border-top-color: var(--brand-strong);
  border-left-color: var(--brand-strong);
  border-right-color: var(--brand-strong);
  background: linear-gradient(180deg, var(--brand), var(--brand-strong));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 4px rgb(var(--brand-rgb) / 0.25);
  transform: translateY(-1px);
}

/* Green Bar (Lisensi Aktif) - Adaptasi persis sistem gradient tombol dalam palet hijau */
.overview-chart-bar.is-green {
  border-top: 1px solid #059669;
  border-left: 1px solid #059669;
  border-right: 1px solid #059669;
  background: linear-gradient(180deg, #34d399, #10b981);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(16 185 129 / 0.16);
}

.overview-chart-bar.is-green:hover {
  border-top-color: #047857;
  border-left-color: #047857;
  border-right-color: #047857;
  background: linear-gradient(180deg, #10b981, #059669);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 4px rgb(16 185 129 / 0.25);
  transform: translateY(-1px);
}

.overview-chart-bar.is-empty {
  border-top: 1px solid var(--line-strong, #d4d4d4);
  border-left: 1px solid var(--line, #e3e3e3);
  border-right: 1px solid var(--line, #e3e3e3);
  background: var(--surface-muted, #fbfbfb);
}

.overview-chart-tooltip {
  pointer-events: none;
  position: absolute;
  bottom: 100%;
  margin-bottom: 6px;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  background: #1b1917;
  color: #ffffff;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.overview-chart-col:hover .overview-chart-tooltip {
  display: flex;
}

.overview-chart-day {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: var(--faint, #6f6b63);
}

.overview-chart-col:hover .overview-chart-day {
  color: var(--ink, #1b1917);
}

.overview-chart-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--faint, #6f6b63);
}

.overview-list-wrap {
  margin-top: 12px;
  border-top: 1px solid rgba(227, 222, 206, 0.6);
}

.overview-list-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(227, 222, 206, 0.5);
}

.overview-list-item:last-child {
  border-bottom: none;
}

.overview-list-title {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-strong, #2b2823);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-list-title:hover {
  color: var(--brand, #0f766e);
}

.overview-list-meta {
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--faint, #6f6b63);
}

.overview-card-action {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(227, 222, 206, 0.6);
}

.overview-card-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-deep, #0f766e);
  text-decoration: none;
}

.overview-card-link:hover {
  text-decoration: underline;
}

.overview-card-link svg,
.overview-card-link [data-lucide="arrow-up-right"] {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0;
}

/* Chart kumulatif Pendapatan Lunas: grid & label HTML, garis SVG */
.overview-revenue-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.overview-revenue-chart {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
  min-height: 96px;
}

.overview-revenue-plot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.overview-revenue-gridline {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 1px solid rgba(227, 222, 206, 0.7);
}

.overview-revenue-svg {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible;
}

.overview-revenue-line {
  fill: none;
  stroke: var(--brand, #096eff);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.overview-revenue-hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  margin-left: -5px;
}

.overview-revenue-hit:hover .overview-chart-tooltip {
  display: flex;
}

.overview-revenue-axis {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
}

.overview-revenue-axis span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--faint, #999999);
}

/* Table Footer (Overview) */
.overview-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: #ffffff;
  padding: 10px 16px;
  font-size: 11.5px;
  color: var(--muted, #737373);
}

.overview-table-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-deep, #0f766e);
  text-decoration: none;
  transition: color 140ms ease;
}

.overview-table-footer-link:hover {
  text-decoration: underline;
}

.overview-table-footer-link svg,
.overview-table-footer-link [data-lucide="arrow-up-right"] {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  flex-shrink: 0;
}

/* ==========================================================================
   Table Design System — cards, two-line cells, reference links, pills, actions
   ========================================================================== */
.table-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.data-table {
  width: 100%;
  text-align: left;
  font-size: 13px;
}

.data-table td {
  color: var(--ink-600);
  border-bottom: 0;
}

.data-table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.data-table .col-actions {
  text-align: right;
  white-space: nowrap;
}

/* Two-line cell: tight, consistent rhythm between primary and secondary line. */
.cell-stack {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

.cell-primary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.cell-secondary {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.cell-secondary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  line-height: 1.35;
}

.cell-truncate {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Reference links: trailing icon shows direction (internal arrow / external box). */
.cell-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--ink);
  font-size: inherit;
  font-weight: 600;
  line-height: 1.35;
  transition: color 120ms ease;
}

.cell-link:hover {
  color: var(--brand-strong);
}

.cell-link-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-link svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  color: var(--faint);
  transition: color 120ms ease;
}

.cell-link:hover svg {
  color: var(--brand-strong);
}

.cell-link.is-quiet {
  color: var(--ink-600);
  font-weight: 500;
}

.cell-link.is-quiet:hover {
  color: var(--brand-strong);
}

.cell-link.is-mono {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 500;
}

.cell-link.is-small {
  font-size: 11.5px;
}

/* Small icon button inside a cell (copy, etc.) */
.cell-icon-btn {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.cell-icon-btn:hover {
  background: var(--surface-subtle);
  color: var(--brand-strong);
}

.cell-icon-btn svg {
  width: 12px;
  height: 12px;
}

.cell-icon-btn.is-copied {
  color: #6842c2;
}

/* Text-style button inside a cell (opens modal, not a redirect). */
.cell-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.cell-text-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cell-text-btn svg {
  width: 14px;
  height: 14px;
}

/* Status pills: borderless, muted, compact. violet=good, blue=neutral, orange=not good. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.badge-violet {
  background: #efe9fb;
  color: #6842c2;
}

.badge-blue {
  background: #e8edf8;
  color: #415e96;
}

.badge-orange {
  background: #faedde;
  color: #9a5a1e;
}

/* Row actions: max one visible button; the rest lives in the three-dots menu. */
.row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.row-btn {
  display: inline-flex;
  height: 28px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid var(--line-input);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-strong);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.row-btn:hover {
  border-color: var(--line-hover);
  background: var(--surface-muted);
}

.row-btn svg {
  width: 13px;
  height: 13px;
}

.row-btn-primary {
  border-color: var(--brand-strong);
  background-color: var(--brand);
  background-image: linear-gradient(180deg, var(--brand-top), var(--brand));
  color: var(--surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 1px rgb(var(--brand-rgb) / 0.12);
}

.row-btn-primary:hover {
  border-color: var(--brand-strong);
  background-color: var(--brand-strong);
  background-image: linear-gradient(180deg, var(--brand), var(--brand-strong));
}

.row-btn-primary:active {
  border-color: var(--brand-deep);
  background-color: var(--brand-deep);
  background-image: linear-gradient(180deg, var(--brand-strong), var(--brand-deep));
}

.row-btn-icon {
  width: 28px;
  padding: 0;
}

.row-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.row-btn-ghost:hover {
  border-color: transparent;
  background: var(--surface-subtle);
  color: var(--ink);
}

.row-btn-danger {
  color: #b0352e;
}

.row-btn-danger:hover {
  border-color: transparent;
  background: #fdecec;
  color: #b0352e;
}

/* Three-dots menu: same nested-dock visual language as the search bar dropdown, no icons. */
.row-menu {
  position: relative;
}

.row-menu-trigger[aria-expanded="true"] {
  background: var(--surface-subtle);
  color: var(--ink);
}

.row-menu-dock {
  position: fixed;
  z-index: 900;
  min-width: 172px;
  max-width: 240px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8f8f8;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  animation: searchDropFade 120ms ease-out;
}

.row-menu-dock[hidden] {
  display: none !important;
}

.row-menu-inner {
  padding: 3px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

.row-menu-dock form {
  display: contents;
}

.row-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-800);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}

.row-menu-item:hover {
  background: #f3f4f6;
  color: #111827;
}

.row-menu-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.row-menu-item.is-danger {
  color: #b0352e;
}

.row-menu-item.is-danger:hover {
  background: #fdecec;
  color: #b0352e;
}

.row-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.row-menu-item:disabled:hover {
  background: transparent;
  color: var(--ink-800);
}

.row-menu-item.is-copied,
.row-menu-item.is-copied:hover {
  color: #6842c2;
}

/* Overview list rows: title link with trailing internal arrow. */
.overview-list-title {
  display: flex;
  align-items: center;
  gap: 4px;
}

.overview-list-title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-list-title svg {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  color: var(--faint);
}

.overview-list-title:hover svg {
  color: var(--brand-strong);
}

/* ==========================================================================
   Invitation Detail Overview Strip
   ========================================================================== */
.detail-overview-strip {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.detail-overview-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
  font-size: 12px;
}

@media (min-width: 640px) {
  .detail-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .detail-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.detail-overview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint, #999999);
  margin: 0;
}

.detail-overview-val {
  display: block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink, #171717);
  font-weight: 500;
  line-height: 1.4;
  margin: 4px 0 0 0;
}

.detail-overview-sub {
  display: block;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted, #737373);
  line-height: 1.4;
  margin: 2px 0 0 0;
}

.proof-modal-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 8px;
}

.proof-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--line-input, #d6d3d1);
  background-color: var(--surface, #ffffff);
  color: var(--ink, #1c1917);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}

.proof-tool-btn:hover {
  background-color: var(--cream-100, #f5f5f4);
  border-color: var(--line, #e7e5e4);
}

#proofModalImg {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
}

/* ==========================================================================
   Global Search All Dropdown (Spotlight Live Search)
   ========================================================================== */
.admin-search-dropdown-dock.is-search-all {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-width: 100%;
  padding: 5px;
  background: #f8f8f8;
  border: 1px solid var(--line, #e3dece);
  border-radius: 12px;
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
  z-index: 80;
  box-sizing: border-box;
}

.admin-search-dropdown-dock.is-search-all .admin-search-dropdown-inner {
  background: #ffffff;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px;
}

.search-all-category {
  padding: 4px 2px 2px 2px;
}

.search-all-cat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 4px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--faint, #8c887b);
}

.search-all-cat-header svg,
.search-all-cat-header i {
  width: 13px;
  height: 13px;
  color: var(--faint, #8c887b);
  flex-shrink: 0;
}

.search-all-cat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-all-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  background: transparent;
  color: inherit;
  transition: background-color 0.12s ease;
  cursor: pointer;
}

.search-all-item:hover,
.search-all-item:focus {
  background-color: #f3f4f6;
  outline: none;
}

.search-all-item-left {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1 1 auto;
}

.search-all-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: #f5f4ef;
  color: #57534e;
  flex-shrink: 0;
}

.search-all-item-icon svg,
.search-all-item-icon i {
  width: 13px;
  height: 13px;
}

.search-all-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.search-all-item-title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink, #1c1917);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.search-all-item-sub {
  font-size: 11px;
  color: var(--faint, #78716c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.search-all-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-left: 8px;
}

.search-all-hairline {
  height: 1px;
  background-color: #ebe7df;
  margin: 4px 6px;
}

.search-all-empty {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--faint, #78716c);
}

.search-all-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 16px;
  font-size: 12px;
  color: var(--faint, #78716c);
}

.search-all-footer-hint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-top: 4px;
  border-top: 1px solid #f0eee6;
  font-size: 10.5px;
  color: var(--faint, #a8a29e);
  background: #faf9f6;
  border-radius: 0 0 6px 6px;
}

.admin-search-action .animate-spin {
  animation: searchSpin 0.7s linear infinite;
}

@keyframes searchSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Unified Studio Split-Pane, Phone Preview Dock & Public Console Surface
   (Part of Anvitation Backend IP Design System)
   ========================================================================== */

.studio-split-grid,
.studio-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

@media (max-width: 1120px) {
  .studio-split-grid,
  .studio-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.studio-editor-col {
  min-width: 0;
}

.studio-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, #e3e3e3);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--shadow-card);
}

.studio-card + .studio-card {
  margin-top: 16px;
}

.studio-section + .studio-section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line, #e3e3e3);
}

.studio-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.studio-section-head .studio-card-desc {
  margin-bottom: 0;
}

.studio-card-title {
  margin: 0 0 3px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #171717);
  line-height: 1.35;
}

.studio-card-desc {
  margin: 0 0 14px 0;
  font-size: 12px;
  color: var(--muted, #737373);
  line-height: 1.45;
}

.studio-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.studio-form-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}

.studio-col-span-2 {
  grid-column: span 2 / span 2;
}

@media (max-width: 680px) {
  .studio-form-grid,
  .studio-form-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-col-span-2 {
    grid-column: span 1 / span 1;
  }
}

.studio-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.studio-upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.studio-upload-row .studio-input {
  flex: 1 1 auto;
  min-width: 0;
}

.studio-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700, #404040);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--shadow-control);
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.studio-upload-btn:hover {
  background: var(--surface-hover, #f6f6f6);
  color: var(--ink, #171717);
}

.studio-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 640px) {
  .studio-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.studio-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid var(--line, #e3e3e3);
  background: #f6f6f6;
  overflow: hidden;
}

.studio-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.studio-gallery-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.92);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.14s ease;
}

.studio-gallery-remove:hover {
  background: #ffffff;
}

.studio-phone-dock {
  position: sticky;
  top: 72px;
}

.studio-phone-card {
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: var(--surface, #ffffff);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.studio-phone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  background: #fbfbfb;
}

.studio-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #10b981;
  display: inline-block;
}

.studio-phone-bezel {
  padding: 12px;
  background: #f6f6f6;
  display: flex;
  justify-content: center;
}

.studio-phone-frame {
  width: 312px;
  height: 600px;
  border-radius: 26px;
  border: 6px solid #171717;
  background: #ffffff;
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  position: relative;
}

.studio-phone-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #ffffff;
}

.studio-input {
  height: 38px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink, #171717);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.studio-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
  outline: none;
}

.studio-textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink, #171717);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.studio-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
  outline: none;
}

.studio-label {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-800, #262626);
  line-height: 1.35;
}

/* Public Topbar & Landing Surface */
.mkt-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 58px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.mkt-topbar-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.mkt-topbar-inner > *:first-child {
  justify-self: start;
}

.mkt-topbar-inner > *:last-child {
  justify-self: end;
}

.mkt-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .mkt-topbar-inner {
    display: flex;
    justify-content: space-between;
  }
}

.mkt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-600, #525252);
  transition: background-color 0.14s ease, color 0.14s ease;
}

.mkt-nav-link:hover,
.mkt-nav-link[aria-current="page"] {
  background: var(--surface-hover, #f6f6f6);
  color: var(--ink, #171717);
}

@media (max-width: 768px) {
  .mkt-nav-links {
    display: none;
  }
}

.mkt-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.mkt-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 36px;
  align-items: center;
}

@media (max-width: 980px) {
  .mkt-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.studio-autosave-indicator,
.studio-save-indicator,
.studio-save-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--brand-strong, #045ede);
  transition: color 150ms ease, background-color 150ms ease;
}

.studio-autosave-indicator svg,
.studio-save-indicator svg,
.studio-save-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.studio-autosave-indicator.is-saving,
.studio-save-indicator.is-saving,
.studio-save-icon.is-saving {
  color: var(--brand, #096eff);
}

.studio-autosave-indicator.is-saving svg,
.studio-save-indicator.is-saving svg,
.studio-save-icon.is-saving svg,
.is-spinning {
  animation: searchSpin 0.8s linear infinite;
}

.studio-autosave-indicator.is-saved,
.studio-save-indicator.is-saved,
.studio-save-icon.is-saved {
  color: #059669;
}

.studio-autosave-indicator.is-error,
.studio-save-indicator.is-error,
.studio-save-icon.is-error {
  color: #dc2626;
}

.studio-spin {
  animation: searchSpin 0.8s linear infinite;
}

/* WhatsApp Template Editor & Segmented Switcher in Studio */
.wa-templates-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.wa-templates-grid > .studio-card {
  margin-top: 0 !important;
}

@media (max-width: 960px) {
  .wa-templates-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wa-tpl-list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}

.wa-tpl-list-item:hover {
  background: var(--surface-hover, #f6f6f6);
}

.wa-tpl-list-item.is-active {
  background: #f0f6ff;
  border-color: rgba(9, 110, 255, 0.28);
}

.wa-token-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #f8f8f8;
  border: 1px solid var(--line, #e3e3e3);
  margin-bottom: 10px;
}

.wa-token-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-800, #262626);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.wa-token-btn:hover {
  background: #f3f4f6;
  border-color: #d4d4d4;
}

.wa-token-btn code {
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  color: var(--muted, #737373);
}

.wa-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-700, #404040);
  cursor: pointer;
  transition: all 0.14s ease;
}

.wa-cat-chip:hover {
  background: #f6f6f6;
}

.wa-cat-chip.is-active {
  background: #eff6ff;
  border-color: var(--brand, #096eff);
  color: var(--brand-strong, #045ede);
  font-weight: 600;
}

.wa-preview-box {
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  overflow: hidden;
  background: #efeae2;
}

.wa-preview-header {
  padding: 10px 14px;
  background: #075e54;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 9px;
}

.wa-preview-body {
  padding: 16px;
}

.wa-preview-bubble {
  background: #dcf8c6;
  color: #111b21;
  padding: 12px 14px;
  border-radius: 10px 2px 10px 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.wa-preview-time {
  text-align: right;
  font-size: 10.5px;
  color: #536471;
  margin-top: 6px;
}

/* ==========================================================================
   Google OAuth Sign-In Button & Divider (Admin + User Console)
   ========================================================================== */
.oauth-google-btn {
  display: inline-flex;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink-800, #262626);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-control);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.oauth-google-btn:hover {
  background: var(--surface-hover, #f6f6f6);
  border-color: var(--line-strong, #d4d4d4);
  color: var(--ink, #171717);
}

.oauth-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0;
  text-align: center;
}

.oauth-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--line, #e3e3e3);
}

.oauth-divider span {
  position: relative;
  padding: 0 12px;
  background: #ffffff;
  color: var(--faint, #999999);
  font-size: 11.5px;
  font-weight: 500;
}

/* ==========================================================================
   Unified Template Catalog Grid (Max 4 Columns, Portrait Tall Preview)
   ========================================================================== */
.tpl-catalog-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 560px) {
  .tpl-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  .tpl-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1160px) {
  .tpl-catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tpl-card {
  display: flex;
  flex-direction: column;
  min-height: 484px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.tpl-card:hover {
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong, #d4d4d4);
}

.tpl-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.15;
  min-height: 312px;
  overflow: hidden;
  background: #f2f1ed;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.tpl-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.tpl-card:hover .tpl-card-media img {
  transform: scale(1.02);
}

.tpl-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 15px;
}

.tpl-card-desc {
  margin: 10px 0 14px;
  min-height: 40px;
  max-height: 40px;
  font-size: 12.5px;
  line-height: 20px;
  color: var(--ink-600, #525252);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tpl-card-footer {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line, #e3e3e3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ==========================================================================
   Stripe / Link Split-Screen Checkout Experience
   ========================================================================== */
.stripe-checkout-body {
  min-height: 100vh;
  margin: 0;
  background: #ffffff;
  color: var(--ink, #171717);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.stripe-checkout-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

@media (max-width: 960px) {
  .stripe-checkout-shell {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Left Summary Pane */
.stripe-summary-pane {
  background: var(--canvas, #fbfbfb);
  border-right: 1px solid var(--line, #e3e3e3);
  padding: 44px 32px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 960px) {
  .stripe-summary-pane {
    justify-content: center;
    border-right: 0;
    border-bottom: 1px solid var(--line, #e3e3e3);
    padding: 28px 20px;
  }
}

.stripe-summary-inner {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

.stripe-merchant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stripe-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-800, #262626);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 140ms ease;
}

.stripe-back-link:hover {
  color: var(--ink, #171717);
}

.stripe-merchant-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stripe-test-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  color: var(--ink-600, #525252);
  font-size: 11px;
  font-weight: 600;
}

.stripe-price-block {
  margin-top: 32px;
}

.stripe-price-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted, #737373);
}

.stripe-price-amount {
  margin-top: 4px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--ink, #171717);
}

.stripe-product-card {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.stripe-product-thumb {
  width: 68px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line, #e3e3e3);
  background: var(--surface-subtle, #f3f3f3);
  overflow: hidden;
}

.stripe-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.stripe-product-info {
  flex: 1 1 auto;
  min-width: 0;
}

.stripe-product-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.stripe-product-cat {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted, #737373);
}

.stripe-product-price {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #171717);
  white-space: nowrap;
}

.stripe-product-desc {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-600, #525252);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stripe-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-strong, #045ede);
}

.stripe-demo-link:hover {
  text-decoration: underline;
}

.stripe-breakdown {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line, #e3e3e3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stripe-breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-600, #525252);
}

.stripe-breakdown-divider {
  height: 1px;
  background: var(--line, #e3e3e3);
  margin: 4px 0;
}

.stripe-breakdown-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.stripe-order-meta-card {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stripe-order-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted, #737373);
}

.stripe-summary-footer {
  margin-top: auto;
  padding-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--faint, #999999);
}

.stripe-summary-footer a {
  color: var(--muted, #737373);
  text-decoration: none;
}

.stripe-summary-footer a:hover {
  color: var(--ink, #171717);
  text-decoration: underline;
}

/* Right Payment Action Pane */
.stripe-payment-pane {
  background: #ffffff;
  padding: 44px 32px;
  display: flex;
  justify-content: flex-start;
}

@media (max-width: 960px) {
  .stripe-payment-pane {
    justify-content: center;
    padding: 28px 20px 48px;
  }
}

.stripe-payment-inner {
  width: 100%;
  max-width: 440px;
}

/* Stepper */
.stripe-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}

.stripe-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--faint, #999999);
}

.stripe-step-num {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, #d4d4d4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.stripe-step.is-current {
  color: var(--ink, #171717);
  font-weight: 600;
}

.stripe-step.is-current .stripe-step-num {
  border-color: var(--brand, #096eff);
  background: var(--brand, #096eff);
  color: #ffffff;
}

.stripe-step.is-done {
  color: var(--ink-600, #525252);
}

.stripe-step.is-done .stripe-step-num {
  border-color: #10b981;
  background: #ecfdf5;
  color: #059669;
}

.stripe-step-line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #e3e3e3);
}

.stripe-step-line.is-active {
  background: var(--ink-800, #262626);
}

.stripe-pane-header {
  margin-bottom: 18px;
}

.stripe-pane-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink, #171717);
}

.stripe-pane-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-600, #525252);
}

/* Stripe Link Account Identity Bar */
.stripe-link-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  background: #fafafa;
}

.stripe-link-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.stripe-link-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand, #096eff);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stripe-link-avatar.is-guest {
  background: #e5e5e5;
  color: var(--ink-600, #525252);
}

.stripe-link-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #737373);
}

.stripe-link-email {
  margin: 1px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink, #171717);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stripe-link-verified {
  padding: 2px 8px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.stripe-link-login {
  padding: 5px 11px;
  border-radius: 7px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink-800, #262626);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: var(--shadow-control);
}

.stripe-link-login:hover {
  background: var(--surface-hover, #f6f6f6);
}

.stripe-section-label {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800, #262626);
}

/* Payment Method Accordion */
.stripe-pm-accordion {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  overflow: hidden;
}

.stripe-pm-item {
  display: block;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  cursor: pointer;
  transition: background-color 140ms ease;
}

.stripe-pm-item:last-child {
  border-bottom: 0;
}

.stripe-pm-item:hover {
  background: #fafafa;
}

.stripe-pm-item.is-selected {
  background: #f5f9ff;
}

.stripe-pm-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stripe-pm-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--brand, #096eff);
  margin: 0;
  cursor: pointer;
}

.stripe-pm-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-600, #525252);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stripe-pm-item.is-selected .stripe-pm-icon {
  color: var(--brand-strong, #045ede);
}

.stripe-pm-title {
  flex: 1 1 auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.stripe-pm-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted, #737373);
}

.stripe-pm-badge.is-brand {
  padding: 2px 7px;
  border-radius: 5px;
  background: #dbeafe;
  color: var(--brand-strong, #045ede);
  font-weight: 600;
}

.stripe-pm-body {
  display: none;
  margin-top: 8px;
  padding-left: 26px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-600, #525252);
}

.stripe-pm-item.is-selected .stripe-pm-body {
  display: block;
}

/* Primary Submit Button (inherits primary button style from utility hook) */
.stripe-submit-btn.stripe-submit-btn {
  display: flex;
  width: 100%;
  height: 44px;
  margin-top: 24px;
  font-size: 14px;
  text-decoration: none;
}

.stripe-security-note {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--faint, #999999);
}

/* Stage 2 Instructions & QRIS */
.stripe-amount-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  background: #f5f9ff;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.stripe-amount-value {
  margin: 2px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--ink, #171717);
}
.stripe-instruction-box {
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  overflow: hidden;
}

.stripe-qris-box {
  padding: 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--line, #e3e3e3);
  text-align: center;
}

.stripe-qris-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stripe-qris-logo {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 5px;
  background: #171717;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.stripe-qris-code {
  width: 160px;
  height: 160px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
}

.stripe-bank-details {
  padding: 14px 16px;
}

.stripe-bank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.stripe-bank-label {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted, #737373);
}

.stripe-bank-value {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink, #171717);
}

.stripe-bank-sub {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-600, #525252);
}

.stripe-bank-divider {
  height: 1px;
  background: var(--line, #e3e3e3);
  margin: 12px 0;
}

.stripe-copy-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink-800, #262626);
  font-size: 11.5px;
  font-weight: 600;
  box-shadow: var(--shadow-control);
}

.stripe-copy-pill:hover {
  background: var(--surface-hover, #f6f6f6);
}

/* Currency Input Group */
.currency-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  overflow: hidden;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.currency-input-group:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
}

.currency-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  background: var(--surface-muted, #f5f5f5);
  border-right: 1px solid var(--line-input, #e3e3e3);
  color: var(--ink-700, #404040);
  font-size: 13px;
  font-weight: 700;
  user-select: none;
  flex-shrink: 0;
}

.currency-field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 12px !important;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900, #171717);
  outline: none !important;
  box-shadow: none !important;
}

/* Modern Proof Upload Action Card */
.stripe-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.stripe-proof-section {
  margin-top: 24px;
}

.stripe-proof-box {
  position: relative;
  border-radius: 10px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  overflow: hidden;
}

.stripe-proof-box:hover {
  border-color: var(--line-strong, #cfcfcf);
}

.stripe-proof-upload {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background-color 140ms ease;
}

.stripe-proof-upload:hover,
.stripe-proof-upload.is-dragover {
  background: #fbfbfb;
}

.stripe-proof-upload-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.stripe-proof-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-muted, #f5f5f5);
  border: 1px solid var(--line, #e5e5e5);
  color: var(--ink-700, #404040);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.stripe-proof-upload:hover .stripe-proof-icon {
  color: var(--brand-strong, #096eff);
  background: #eff6ff;
  border-color: #dbeafe;
}

.stripe-proof-upload-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stripe-proof-upload-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-900, #171717);
  line-height: 1.35;
}

.stripe-proof-upload-desc {
  font-size: 11.5px;
  color: var(--muted, #737373);
  margin-top: 2px;
}

.stripe-proof-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 13px;
  border-radius: 7px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink-800, #262626);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.stripe-proof-upload:hover .stripe-proof-btn {
  border-color: var(--line-hover, #cfcfcf);
  background: var(--surface-muted, #f5f5f5);
}

/* Selected File State */
.stripe-proof-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fcfcfc;
}

.stripe-proof-file-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.stripe-proof-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stripe-proof-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stripe-proof-fallback {
  color: var(--ink-600, #525252);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stripe-proof-info {
  min-width: 0;
  flex: 1;
}

.stripe-proof-filename {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #171717);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stripe-proof-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}

.stripe-proof-filesize {
  font-size: 11.5px;
  color: var(--muted, #737373);
}

.stripe-proof-status {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  background: #dcfce7;
  color: #15803d;
  font-size: 10.5px;
  font-weight: 600;
}

.stripe-proof-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 11px;
  border-radius: 6px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink-700, #404040);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 140ms ease;
}

.stripe-proof-action-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #dc2626;
}

/* Status Banner & Timeline (Stage 2B / Stage 3) */
.stripe-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
}

.stripe-status-banner.is-review {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.stripe-status-banner.is-paid {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.stripe-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-strong, #045ede);
}

.stripe-status-banner.is-paid .stripe-status-icon {
  color: #059669;
}

.stripe-status-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.stripe-status-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-600, #525252);
}

.stripe-timeline {
  margin-top: 20px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stripe-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.stripe-timeline-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1.5px solid var(--line-strong, #d4d4d4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.stripe-timeline-item.is-done .stripe-timeline-dot {
  border-color: #10b981;
  background: #ecfdf5;
  color: #059669;
}

.stripe-timeline-item.is-current .stripe-timeline-dot {
  border-color: var(--brand, #096eff);
  background: var(--brand, #096eff);
  box-shadow: 0 0 0 3px rgba(9, 110, 255, 0.16);
}

.stripe-timeline-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.stripe-timeline-sub {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--muted, #737373);
}

.stripe-reupload-box {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  background: #fafafa;
}

.stripe-reupload-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700, #404040);
  cursor: pointer;
  list-style: none;
}

.stripe-reupload-summary::-webkit-details-marker {
  display: none;
}






/* ==========================================================================
   Universal SVG & Lucide Icon Enforcement
   ========================================================================== */
svg,
svg.lucide,
[data-lucide],
.lucide,
i[data-lucide] {
  width: 16px;
  height: 16px;
  max-width: 100%;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

svg.h-3, [data-lucide].h-3, .h-3 { height: 12px !important; }
svg.w-3, [data-lucide].w-3, .w-3 { width: 12px !important; }
svg.h-3\.5, [data-lucide].h-3\.5, .h-3\.5 { height: 14px !important; }
svg.w-3\.5, [data-lucide].w-3\.5, .w-3\.5 { width: 14px !important; }
svg.h-4, [data-lucide].h-4, .h-4 { height: 16px !important; }
svg.w-4, [data-lucide].w-4, .w-4 { width: 16px !important; }
svg.h-5, [data-lucide].h-5, .h-5 { height: 20px !important; }
svg.w-5, [data-lucide].w-5, .w-5 { width: 20px !important; }
svg.h-6, [data-lucide].h-6, .h-6 { height: 24px !important; }
svg.w-6, [data-lucide].w-6, .w-6 { width: 24px !important; }
svg.h-8, [data-lucide].h-8, .h-8 { height: 32px !important; }
svg.w-8, [data-lucide].w-8, .w-8 { width: 32px !important; }
svg.h-10, [data-lucide].h-10, .h-10 { height: 40px !important; }
svg.w-10, [data-lucide].w-10, .w-10 { width: 40px !important; }

/* ==========================================================================
   Console FAQ Accordion & Landing Extensions
   ========================================================================== */
.console-faq-list {
  max-width: 760px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.console-faq-item {
  border: 1px solid var(--line, #e3e3e3);
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.console-faq-item:hover {
  border-color: var(--line-strong, #b8b8b8);
}

.console-faq-item[open] {
  border-color: var(--ink-900, #171717);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.console-faq-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900, #171717);
  list-style: none;
  user-select: none;
}

.console-faq-summary::-webkit-details-marker {
  display: none;
}

.console-faq-summary > span:first-child {
  flex: 1 1 auto;
}

.console-faq-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  max-width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink-500, #737373);
  transition: transform 0.2s ease, color 0.15s ease;
}

.console-faq-icon svg,
.console-faq-icon [data-lucide] {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.console-faq-item[open] .console-faq-icon {
  transform: rotate(180deg);
  color: var(--ink-900, #171717);
}

.console-faq-body {
  padding: 0 20px 18px 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600, #525252);
  border-top: 1px solid var(--line, #f0ede8);
  margin-top: 2px;
  padding-top: 14px;
}

.console-cta-card {
  background: var(--ink-900, #171717);
  color: #ffffff;
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
  margin: 56px 0 20px;
}

.console-cta-card h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin-bottom: 8px;
}

.console-cta-card p {
  font-size: 14.5px;
  color: #a3a3a3;
  max-width: 54ch;
  margin: 0 auto 24px;
  line-height: 1.5;
}


/* ==========================================================================
   Anvitation Marketing & Landing Design System (Extracted from globals.css)
   ========================================================================== */
:root {
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: clamp(28px, 3.4vw, 38px);
  --text-5xl: clamp(34px, 5.2vw, 54px);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.018em;
  --tracking-display: -0.028em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-label: 0.07em;

  --weight-regular: 420;
  --weight-medium: 520;
  --weight-semibold: 620;
  --weight-bold: 700;

  --surface-raised: #ffffff;
  --surface-sunken: #f6f6f8;
  --surface-sunken-2: #eeeef1;
  --surface-inverse: #14151a;
  --on-inverse: #ffffff;

  --border-subtle: #eff0f3;
  --border-strong: #d3d5db;

  --brand-hover: #0b3c67;
  --brand-subtle: #eef4fa;
  --brand-border: #c6dcf0;
  --brand-ink: #0b3c67;

  --accent: #a97530;
  --accent-hover: #8d5f22;
  --accent-subtle: #fbf4e9;
  --accent-border: #ecd6b4;

  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --mock-2xs: 8.5px;
  --mock-xs: 9px;
  --mock-sm: 10px;
  --mock-md: 10.5px;
  --mock-base: 11px;
  --mock-lg: 12px;
  --mock-xl: 15px;
  --mock-2xl: 22px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgb(20 21 26 / 0.05);
  --shadow-sm: 0 1px 2px rgb(20 21 26 / 0.05), 0 2px 6px -2px rgb(20 21 26 / 0.06);
  --shadow-md: 0 2px 4px -2px rgb(20 21 26 / 0.06), 0 8px 20px -8px rgb(20 21 26 / 0.14);
  --shadow-lg: 0 12px 32px -12px rgb(20 21 26 / 0.22), 0 2px 6px -2px rgb(20 21 26 / 0.06);

  --container: 1160px;
  --container-narrow: 760px;

  --artifact-paper: #faf7f2;
  --artifact-paper-deep: #e6ddd1;
  --artifact-ink: #382e25;
  --artifact-ink-soft: #755b46;
  --artifact-ink-muted: #786755;
  --artifact-accent: #8c735b;
  --artifact-accent-deep: #79624c;
  --artifact-line: #d5c6b1;
  --artifact-card: #faf5ee;
}

/* Sections */
.section {
  padding-block: var(--space-20);
  border-top: 1px solid var(--border-subtle);
}
.section-flush {
  border-top: 0;
}
.section-sunken {
  background: var(--surface-sunken);
  border-block: 1px solid var(--border);
}
.section-head {
  max-width: 640px;
  margin-bottom: var(--space-10);
}
.section-head-center {
  margin-inline: auto;
  text-align: center;
}
.section-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
  line-height: var(--leading-snug);
  margin-top: var(--space-2);
}
.section-subtitle {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
  max-width: 60ch;
}

/* Layout Containers */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
.split-tight {
  gap: var(--space-8);
}
@media (max-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}

/* Typography & Labels */
.display {
  font-size: var(--text-5xl);
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--ink-600);
  max-width: 58ch;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow-neutral {
  color: var(--ink-500);
}
.meta {
  font-size: var(--text-xs);
  color: var(--ink-500);
  line-height: var(--leading-snug);
}
.label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-500);
}
.numeric {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Cards & Panels */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 6px 14px;
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
}
.btn-lg {
  padding: 11px 22px;
  min-height: 46px;
  font-size: var(--text-md);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
}
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff !important;
  box-shadow: var(--shadow-xs);
}
.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}
.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink-900) !important;
}
.btn-secondary:hover {
  background: var(--surface-sunken);
  border-color: var(--ink-300);
}
.btn-buy {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff !important;
}
.btn-buy:hover {
  background: #000;
  border-color: #000;
}
.btn-block {
  width: 100%;
}

/* Flex rows & Stacks */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.row-nowrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.stack-2 {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* Feature Tick List */
.tick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tick-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-600);
}
.tick-list svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--success);
}

/* Status Dots */
.status-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-400);
}
.status-dot-live {
  background: #1a9b52;
  box-shadow: 0 0 0 3px rgb(26 155 82 / 0.16);
}
.status-dot-draft {
  background: var(--ink-400);
}

/* Price */
.price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.price-amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.price-note {
  font-size: var(--text-xs);
  color: var(--ink-500);
}

/* Universal SVG Icon Enforcement */
svg,
svg.lucide,
[data-lucide],
.lucide,
i[data-lucide] {
  width: 16px;
  height: 16px;
  max-width: 100%;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}


/* ==========================================================================
   Clean Public & Auth Design System (CDN Vault Only — No Nested Containers)
   ========================================================================== */

.mkt-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 62px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line, #e3e3e3);
  transition: background-color 180ms ease, border-color 180ms ease, backdrop-filter 180ms ease, box-shadow 180ms ease;
}

.mkt-topbar.is-hero-overlay {
  margin-bottom: -62px;
}

.mkt-topbar.is-hero-overlay:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.mkt-topbar.is-hero-overlay.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line, #e3e3e3);
  box-shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
}

.mkt-topbar.is-hero-overlay:not(.is-scrolled) .mkt-nav-pill-group,
.mkt-topbar.is-hero-overlay:not(.is-scrolled) .mkt-action-pill-group {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(23, 23, 23, 0.08);
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
}

.mkt-topbar-inner {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.mkt-nav-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
}

@media (max-width: 768px) {
  .mkt-nav-pill-group {
    display: none;
  }
}

.mkt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-600, #525252);
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
}

.mkt-nav-link:hover {
  color: var(--ink, #171717);
  background: rgba(23, 23, 23, 0.04);
}

.mkt-nav-link.is-active,
.mkt-nav-link[aria-current="page"] {
  background: #ffffff;
  color: var(--ink, #171717);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.06);
}

/* ---------- Marketing Topbar Action Pill Group (Nested Pill Group Architecture) ---------- */
.mkt-action-pill-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.mkt-action-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease;
}

.mkt-action-link i,
.mkt-action-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Secondary Action: Masuk (White Pill with High-Contrast Interactive Hover) */
.mkt-action-secondary {
  background: #ffffff;
  color: var(--ink, #171717);
  border-color: rgba(23, 23, 23, 0.05);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.06);
}

.mkt-action-secondary:hover {
  background: #fdf2f8;
  color: var(--brand-strong);
  border-color: var(--brand-border);
  box-shadow: 0 2px 10px -1px rgba(219, 39, 119, 0.28);
  transform: translateY(-0.5px);
}

.mkt-action-secondary:active {
  background: #fce7f3;
  color: var(--brand-deep);
  transform: translateY(0);
}

/* Primary Action: Daftar Akun & Konsol / Dashboard (Brand Pink Pill) */
.mkt-action-primary {
  background-color: var(--brand);
  background-image: linear-gradient(180deg, var(--brand-top), var(--brand));
  border-color: var(--brand-strong);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(219, 39, 119, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.mkt-action-primary:hover {
  background-color: var(--brand-strong);
  background-image: linear-gradient(180deg, var(--brand), var(--brand-strong));
  border-color: var(--brand-deep);
  color: #ffffff;
  box-shadow: 0 3px 10px -1px rgba(219, 39, 119, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-0.5px);
}

.mkt-action-primary:active {
  background-color: var(--brand-deep, #034fb9);
  background-image: linear-gradient(180deg, var(--brand-strong, #045ede), var(--brand-deep, #034fb9));
  transform: translateY(0);
}

/* ---------- Standard Multi-Column Public Footer ---------- */
.mkt-footer {
  margin-top: auto;
  background: #ffffff;
  border-top: 1px solid var(--line, #e3e3e3);
  padding: 56px 0 32px;
}

.mkt-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

@media (max-width: 900px) {
  .mkt-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .mkt-footer-brand-col {
    grid-column: span 2 / span 2;
  }
}

@media (max-width: 540px) {
  .mkt-footer-grid {
    grid-template-columns: 1fr;
  }
  .mkt-footer-brand-col {
    grid-column: span 1 / span 1;
  }
}

.mkt-footer-desc {
  margin: 14px 0 0;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #737373);
}

.mkt-footer-heading {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink, #171717);
}

.mkt-footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mkt-footer-list a {
  font-size: 13px;
  color: var(--ink-600, #525252);
  text-decoration: none;
  transition: color 140ms ease;
}

.mkt-footer-list a:hover {
  color: var(--ink, #171717);
}

.mkt-footer-bottom {
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  color: var(--muted, #737373);
}

.mkt-footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 18px;
}

.mkt-footer-bottom-links a {
  color: var(--muted, #737373);
  text-decoration: none;
}

.mkt-footer-bottom-links a:hover {
  color: var(--ink, #171717);
}

/* ---------- Editorial Hero & Subpage Hero (Wireframe Rounded Hero Card, Top-Breakout Phone, 3 Bottom Cards) ---------- */
.lp-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  background-color: #ff9ed3;
  overflow: hidden;
  border-bottom: 1px solid var(--line, #e3e3e3);
  padding: 86px 0 46px;
}

.lp-hero > .mkt-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Rounded Hero Frame Card */
.lp-hero-card {
  position: relative;
  top: 40px;
  width: 100%;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background-image:
    radial-gradient(ellipse 75% 65% at 78% 18%, rgba(255, 230, 243, 0.9), transparent 70%),
    radial-gradient(ellipse 65% 58% at 15% 84%, rgba(255, 250, 214, 0.28), transparent 70%);
  box-shadow:
    0 24px 60px -20px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* Upper Hero Area: Clips bottom at 0 (the horizontal divider line) while allowing top (-200px) to break out above the card */
.lp-hero-upper {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 28px;
  align-items: center;
  padding: 0 52px;
  clip-path: inset(-220px -40px 0 -40px);
}

.lp-hero-copy {
  max-width: 580px;
  padding: 64px 0;
}

/* Right Column: Single Smartphone Mockup Breaking Out Above Top Border & Cropped Flush at Bottom Divider Line */
.lp-hero-phone-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  pointer-events: none;
}

.lp-hero-phone-img {
  position: absolute;
  left: 0;
  bottom: -270px;
  display: block;
  width: 510px;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(15, 23, 42, 0.18));
  user-select: none;
  pointer-events: none;
}

@media (max-width: 980px) {
  .lp-hero {
    min-height: auto;
    padding: 78px 0 28px;
  }
  .lp-hero-upper {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 24px;
    clip-path: inset(0 0 0 0);
  }
  .lp-hero-copy {
    padding: 36px 0 8px;
    max-width: 100%;
  }
  .lp-hero-phone-stage {
    justify-content: center;
  }
  .lp-hero-phone-img {
    position: relative;
    left: auto;
    bottom: auto;
    margin-bottom: -125px;
    width: min(100%, 375px);
    max-width: 100%;
    margin-top: 0;
  }
}

.lp-page-hero {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse 70% 55% at 80% 20%, rgba(219, 39, 119, 0.08), transparent 70%),
    linear-gradient(to right, rgba(23, 23, 23, 0.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23, 23, 23, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 36px 36px, 36px 36px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  padding: 52px 0 0;
}

.lp-page-hero > .mkt-container:last-child:not(:has(.cat-tab-strip)) {
  padding-bottom: 48px;
}

@media (max-width: 768px) {
  .lp-page-hero {
    padding-top: 36px;
  }
}

.lp-page-title {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.034em;
  color: var(--ink, #171717);
}

.lp-page-lead {
  margin: 12px 0 0;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-600, #525252);
}

.lp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-strong, #045ede);
  margin-bottom: 12px;
}

.lp-hero-title {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--ink, #171717);
  text-wrap: balance;
}

.lp-hero-title-accent {
  color: var(--brand-strong, #045ede);
  font-style: normal;
}

.lp-hero-lead {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-600, #525252);
}

.lp-hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.lp-btn-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 140ms ease;
}

.lp-btn-primary {
  border: 1px solid var(--brand-strong);
  background-color: var(--brand);
  background-image: linear-gradient(180deg, var(--brand-top), var(--brand));
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px -2px rgba(219, 39, 119, 0.28);
}

.lp-btn-primary:hover {
  background-color: var(--brand-strong);
  background-image: linear-gradient(180deg, var(--brand), var(--brand-strong));
  color: #ffffff;
}

.lp-btn-secondary {
  border: 1px solid var(--line-strong, #d4d4d4);
  background: #ffffff;
  color: var(--ink, #171717);
  box-shadow: var(--shadow-control);
}

.lp-btn-secondary:hover {
  background: var(--surface-hover, #f6f6f6);
  border-color: var(--line-hover, #c2c2c2);
  color: var(--ink, #171717);
}

/* Lower Area Inside the Rounded Hero Card: 3 Columns Separated by Vertical Divider Lines */
.lp-hero-lower {
  position: relative;
  z-index: 2;
  width: 100%;
  border-top: 1px solid var(--line-strong, #d4d4d4);
  background: rgba(255, 255, 255, 0.72);
  border-radius: 0 0 25px 25px;
}

.lp-hero-specs-full {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .lp-hero-specs-full {
    grid-template-columns: 1fr;
  }
}

.lp-hero-spec-col {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 28px 36px;
  border-right: 1px solid var(--line-strong, #d4d4d4);
}

.lp-hero-spec-col:last-child {
  border-right: 0;
}

@media (max-width: 820px) {
  .lp-hero-spec-col {
    border-right: 0;
    border-bottom: 1px solid var(--line-strong, #d4d4d4);
    padding: 20px 24px;
  }
  .lp-hero-spec-col:last-child {
    border-bottom: 0;
  }
}

.lp-hero-spec-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  color: var(--brand-strong, #045ede);
  flex-shrink: 0;
}

.lp-hero-spec-glyph svg,
.lp-hero-spec-glyph [data-lucide] {
  width: 18px;
  height: 18px;
}

.lp-hero-spec-text {
  min-width: 0;
}

.lp-hero-spec-col dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #737373);
}

.lp-hero-spec-col .lp-spec-val {
  margin: 3px 0 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #171717);
}

.lp-hero-spec-col .lp-spec-sub {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-600, #525252);
}

/* ---------- Dedicated Catalog Page Search & Filter Header ---------- */
.cat-hero-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
}

.cat-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cat-search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.cat-search-icon {
  position: absolute;
  left: 12px;
  color: var(--faint, #999999);
  pointer-events: none;
}

.cat-search-input {
  width: 260px;
  height: 40px;
  padding: 0 32px 0 36px;
  border-radius: 9px;
  border: 1px solid var(--line-strong, #d4d4d4);
  background: #ffffff;
  color: var(--ink, #171717);
  font-size: 13px;
  box-shadow: var(--shadow-control);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

@media (max-width: 540px) {
  .cat-search-input {
    width: 100%;
  }
  .cat-search-form,
  .cat-search-field {
    width: 100%;
  }
}

.cat-search-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
}

.cat-search-clear {
  position: absolute;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: var(--muted, #737373);
}

.cat-search-clear:hover {
  background: var(--surface-subtle, #f3f3f3);
  color: var(--ink, #171717);
}

.cat-sort-select {
  height: 40px;
  padding: 0 30px 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line-strong, #d4d4d4);
  background-color: #ffffff;
  color: var(--ink, #171717);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-control);
  cursor: pointer;
}

.cat-sort-select:focus {
  border-color: var(--brand, #096eff);
}

.cat-tab-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line, #e3e3e3);
}

.cat-count-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #737373);
  padding: 10px 0;
}

/* ---------- Asymmetric Bento Grid for Fitur Utama (12 Columns, Unique Spans) ---------- */
.feat-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.feat-span-8 {
  grid-column: span 8 / span 8;
}

.feat-span-7 {
  grid-column: span 7 / span 7;
}

.feat-span-5 {
  grid-column: span 5 / span 5;
}

.feat-span-4 {
  grid-column: span 4 / span 4;
}

@media (max-width: 1024px) {
  .feat-span-8,
  .feat-span-7,
  .feat-span-5,
  .feat-span-4 {
    grid-column: span 12 / span 12;
  }
}

.feat-bento-cell {
  border-radius: 14px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.feat-split-horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

@media (max-width: 720px) {
  .feat-split-horizontal {
    grid-template-columns: 1fr;
  }
}

.feat-split-vertical {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feat-bento-copy {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feat-bento-title {
  margin: 16px 0 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--ink, #171717);
}

.feat-bento-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600, #525252);
}

.feat-bento-bullets {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line, #e3e3e3);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feat-bento-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-800, #262626);
}

.feat-bento-bullets li svg,
.feat-bento-bullets li [data-lucide] {
  color: #059669;
}

/* Flush Feature Preview Surfaces (Separated by 1px Hairline, Not Box-in-Box) */
.feat-split-horizontal > .feat-preview-surface {
  border-left: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 720px) {
  .feat-split-horizontal > .feat-preview-surface {
    border-left: 0;
    border-top: 1px solid var(--line, #e3e3e3);
  }
}

.feat-split-vertical > .feat-preview-surface {
  border-top: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
}

.feat-surface-warm {
  background: #faf7f2 !important;
}

.feat-mock-header {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #ffffff;
}

.feat-mock-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink, #171717);
}

.feat-mock-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
}

.feat-mock-rows {
  display: flex;
  flex-direction: column;
}

.feat-mock-field {
  padding: 13px 20px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.feat-mock-field:last-child {
  border-bottom: 0;
}

.feat-mock-label {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #737373);
}

.feat-mock-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.feat-mock-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-strong, #045ede);
}

.feat-url-strip {
  padding: 10px 20px;
  border-bottom: 1px solid #e5dec9;
  background: #f3ede2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: #5c4b3b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.feat-cover-sample {
  padding: 22px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.feat-cover-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8c735b;
  font-weight: 600;
}

.feat-cover-guest {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  color: #382e25;
}

.feat-cover-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #5c4b3b;
}

.feat-rsvp-head {
  padding: 18px 24px 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.feat-rsvp-number {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink, #171717);
}

.feat-rsvp-export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-strong, #045ede);
}

.feat-rsvp-bar {
  margin: 0 24px;
  height: 8px;
  border-radius: 999px;
  background: #e5e5e5;
  display: flex;
  overflow: hidden;
}

.feat-rsvp-legend {
  padding: 12px 24px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 11.5px;
  color: var(--ink-600, #525252);
}

.feat-rsvp-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.feat-rsvp-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

/* ---------- Sections & Headings ---------- */
.lp-section {
  padding: 64px 0;
}

.lp-section-white {
  background: #ffffff;
  border-top: 1px solid var(--line, #e3e3e3);
  border-bottom: 1px solid var(--line, #e3e3e3);
}

@media (max-width: 768px) {
  .lp-section {
    padding: 44px 0;
  }
}

.lp-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.lp-section-header-center {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.lp-h2 {
  margin: 0;
  font-size: clamp(23px, 2.8vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.18;
  color: var(--ink, #171717);
}

.lp-subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-600, #525252);
  max-width: 58ch;
}

.lp-section-header-center .lp-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Category Tabs (Flat Underline Tabs) ---------- */
.lp-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.lp-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.lp-filter-tab {
  padding: 12px 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted, #737373);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 140ms ease, border-color 140ms ease;
}

.lp-filter-tab:hover {
  color: var(--ink, #171717);
}

.lp-filter-tab.is-active {
  color: var(--ink, #171717);
  border-bottom-color: var(--ink, #171717);
  font-weight: 600;
}

.tpl-price-stack {
  text-align: right;
  flex-shrink: 0;
}

.tpl-price-strike {
  display: block;
  font-size: 11px;
  color: var(--faint, #999999);
  text-decoration: line-through;
  line-height: 1.1;
}

.tpl-price-current {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #171717);
  font-variant-numeric: tabular-nums;
}

/* ---------- Connected 3-Step Flow Diagram (Cloudflare Style) ---------- */
.cf-steps-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.cf-steps-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #171717);
}

.cf-steps-learn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand-strong, #045ede);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf-steps-learn:hover {
  color: var(--brand-deep, #034fb9);
}

.cf-steps-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr) 56px minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 920px) {
  .cf-steps-flow {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.cf-step-card {
  border-radius: 12px;
  border: 1px solid var(--line-strong, #d4d4d4);
  background: #ffffff;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px var(--line, #e3e3e3), 0 8px 20px -6px rgba(23, 23, 23, 0.08);
  overflow: hidden;
}

.cf-step-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e3e3e3);
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-600, #525252);
}

.cf-step-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #171717);
}

.cf-step-body {
  padding: 16px 18px 20px;
}

.cf-step-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-600, #525252);
}

.cf-step-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 24px;
}

.cf-step-line {
  position: relative;
  display: block;
  width: 100%;
  height: 1.5px;
  background: #8c8c8c;
}

.cf-step-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 6px solid #8c8c8c;
}

@media (max-width: 920px) {
  .cf-step-connector {
    padding: 4px 0;
  }
  .cf-step-line {
    width: 1.5px;
    height: 24px;
  }
  .cf-step-line::after {
    right: auto;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-top: 6px solid #8c8c8c;
    border-bottom: 0;
  }
}

/* ---------- Single-Layer Cards (Steps — No Nested Boxes) ---------- */
.lp-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 880px) {
  .lp-steps-grid {
    grid-template-columns: 1fr;
  }
}

.lp-step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: var(--shadow-card);
}

.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink, #171717);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lp-feature-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
}

.lp-step-title {
  margin: 16px 0 6px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #171717);
}

.lp-step-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--ink-600, #525252);
}

.lp-step-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e3e3e3);
}

/* ---------- Flat Hairline Feature Grid (Spesifikasi Template Outer Card) ---------- */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line, #e3e3e3);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.lp-feature-item {
  padding: 28px 24px;
  border-right: 1px solid var(--line, #e3e3e3);
  border-bottom: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
}

.lp-feature-item:nth-child(3n) {
  border-right: 0;
}

.lp-feature-item:nth-child(n+4) {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .lp-feature-grid {
    grid-template-columns: 1fr;
  }
  .lp-feature-item {
    border-right: 0;
    border-bottom: 1px solid var(--line, #e3e3e3);
  }
  .lp-feature-item:last-child {
    border-bottom: 0;
  }
}

.lp-feature-item-icon {
  color: var(--brand-strong, #045ede);
  margin-bottom: 14px;
  display: block;
}

.lp-feature-item-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink, #171717);
}

.lp-feature-item-desc {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-600, #525252);
}

/* ---------- FAQ Accordion ---------- */
.lp-faq-wrap {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-faq-item {
  border-radius: 12px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.lp-faq-summary {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink, #171717);
  user-select: none;
}

.lp-faq-summary::-webkit-details-marker {
  display: none;
}

.lp-faq-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--canvas, #fbfbfb);
  border: 1px solid var(--line, #e3e3e3);
  color: var(--muted, #737373);
  font-size: 15px;
  font-weight: 500;
  flex-shrink: 0;
  transition: transform 150ms ease, background-color 150ms ease;
}

.lp-faq-item[open] .lp-faq-icon {
  transform: rotate(45deg);
  background: var(--ink, #171717);
  border-color: var(--ink, #171717);
  color: #ffffff;
}

.lp-faq-body {
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-600, #525252);
}

/* ---------- Closing Dark CTA Banner ---------- */
.lp-cta-banner {
  border-radius: 16px;
  background-color: #141519;
  background-image:
    radial-gradient(ellipse 70% 60% at 85% 20%, rgba(9, 110, 255, 0.24), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 32px 32px, 32px 32px;
  padding: 44px 40px;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 20px 48px -16px rgba(20, 21, 25, 0.3);
}

@media (max-width: 768px) {
  .lp-cta-banner {
    padding: 32px 24px;
  }
}

.lp-cta-title {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.2;
  color: #ffffff;
}

.lp-cta-desc {
  margin: 8px 0 0;
  max-width: 54ch;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.lp-btn-inverse {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.lp-btn-inverse:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* ---------- Split-Screen Auth (Portrait Photo Left, Form Right) ---------- */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(340px, 34%) minmax(0, 1fr);
  min-height: 100dvh;
  background: #ffffff;
}

@media (max-width: 960px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }
}

/* Left Portrait Photo Surface — Floating inset card, 4 rounded corners, bottom overlay copywriting */
.auth-art-pane {
  position: relative;
  overflow: hidden;
  margin: 14px 0 14px 14px;
  border-radius: 20px;
  background-color: #141518;
  color: #ffffff;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.28);
}

.auth-art-pane--gradient {
  background-color: #111317;
  background-image:
    radial-gradient(ellipse 85% 65% at 20% 15%, rgba(9, 110, 255, 0.28), transparent 70%),
    radial-gradient(ellipse 70% 55% at 85% 85%, rgba(4, 94, 222, 0.18), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

@media (max-width: 960px) {
  .auth-art-pane {
    display: none;
  }
}

.auth-art-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
}

.auth-art-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 16, 0.04) 0%,
    rgba(10, 12, 16, 0.16) 44%,
    rgba(10, 12, 16, 0.80) 76%,
    rgba(10, 12, 16, 0.94) 100%
  );
  pointer-events: none;
}

.auth-art-body {
  position: relative;
  z-index: 2;
  max-width: 380px;
  margin: 0;
}

.auth-art-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.auth-art-heading {
  margin: 0;
  font-size: clamp(23px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.22;
  color: #ffffff;
}

.auth-art-points {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-art-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.auth-art-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  color: #ffffff;
  flex-shrink: 0;
}

.auth-art-check svg {
  width: 12px;
  height: 12px;
}

/* Right Form Surface — Direct form, NO nested card */
.auth-form-pane {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 44px;
  background: #ffffff;
}

@media (max-width: 640px) {
  .auth-form-pane {
    padding: 24px 20px;
  }
}

.auth-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-600, #525252);
  text-decoration: none;
}

.auth-back-link:hover {
  color: var(--ink, #171717);
}

.auth-form-main {
  width: 100%;
  max-width: 380px;
  margin: auto;
  padding: 24px 0;
}

.auth-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink, #171717);
}

.auth-subtitle {
  margin: 6px 0 24px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-600, #525252);
}

.auth-oauth-btn {
  display: inline-flex;
  width: 100%;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line-strong, #d4d4d4);
  background: #ffffff;
  color: var(--ink, #171717);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}

.auth-oauth-btn:hover {
  background: var(--surface-hover, #f6f6f6);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-800, #262626);
}

.auth-label-hint {
  font-size: 11.5px;
  color: var(--muted, #737373);
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 12px;
  display: inline-flex;
  color: var(--faint, #999999);
  pointer-events: none;
}

.auth-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border-radius: 8px;
  border: 1px solid var(--line-input, #e3e3e3);
  background: #ffffff;
  color: var(--ink, #171717);
  font-size: 13.5px;
}

.auth-input.has-toggle {
  padding-right: 38px;
}

.auth-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(219, 39, 119, 0.18);
}

.auth-pw-toggle {
  position: absolute;
  right: 8px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint, #999999);
  cursor: pointer;
}

.auth-pw-toggle:hover {
  color: var(--ink, #171717);
}

.auth-switch-box {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line, #e3e3e3);
  text-align: center;
  font-size: 13px;
  color: var(--ink-600, #525252);
}

.auth-switch-link {
  font-weight: 600;
  color: var(--brand-strong, #045ede);
  text-decoration: none;
  margin-left: 4px;
}

.auth-switch-link:hover {
  text-decoration: underline;
}

.auth-foot-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--faint, #999999);
}

/* ---------- Dual-Access Portal Choice Popup Modal ---------- */
.portal-choice-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(4px);
}

.portal-choice-dialog {
  width: 100%;
  max-width: 460px;
  border-radius: 16px;
  border: 1px solid var(--line, #e3e3e3);
  background: #ffffff;
  box-shadow: 0 24px 60px -16px rgba(15, 23, 42, 0.32);
  overflow: hidden;
  animation: portalModalIn 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes portalModalIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.portal-choice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line, #e3e3e3);
}

.portal-choice-heading {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink, #171717);
}

.portal-choice-subheading {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-600, #525252);
}

.portal-choice-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted, #737373);
  text-decoration: none;
  flex-shrink: 0;
}

.portal-choice-close:hover {
  background: var(--surface-hover, #f6f6f6);
  color: var(--ink, #171717);
}

.portal-choice-body {
  padding: 18px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.portal-choice-account {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
}

.portal-choice-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.portal-choice-account-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.portal-choice-account-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #171717);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-choice-account-email {
  font-size: 11.5px;
  color: var(--muted, #737373);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-choice-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.portal-choice-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.portal-choice-form {
  margin: 0;
}

.portal-choice-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-strong, #d4d4d4);
  background: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.portal-choice-card:hover {
  border-color: var(--brand, #096eff);
  background: #f8fbff;
  box-shadow: 0 6px 18px -10px rgba(9, 110, 255, 0.25);
}

.portal-choice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

.portal-choice-icon.is-admin {
  background: #141519;
  color: #ffffff;
}

.portal-choice-icon.is-console {
  background: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
}

.portal-choice-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.portal-choice-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #171717);
}

.portal-choice-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-600, #525252);
}

.portal-choice-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--canvas, #fbfbfb);
  color: var(--ink-600, #525252);
  flex-shrink: 0;
  transition: transform 140ms ease, background-color 140ms ease, color 140ms ease;
}

.portal-choice-card:hover .portal-choice-arrow {
  transform: translateX(2px);
  background: var(--brand, #096eff);
  color: #ffffff;
}

.portal-choice-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--line, #e3e3e3);
  background: var(--canvas, #fbfbfb);
  text-align: center;
}

.portal-choice-cancel {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-600, #525252);
  text-decoration: none;
}

.portal-choice-cancel:hover {
  color: var(--ink, #171717);
  text-decoration: underline;
}

/* ==========================================================================
   Lenis Smooth Scroll Engine
   ========================================================================== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ==========================================================================
   Template Studio — Dynamic Manifest Slot Editor & Cutout Controls
   ========================================================================== */
.studio-slot-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.studio-slot-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-tint, #eff6ff);
  color: var(--brand-strong, #045ede);
  font-size: 11px;
  font-weight: 600;
}

.studio-slot-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.studio-slot-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e5e7eb);
  background: #fafafa;
  transition: border-color 140ms ease, background-color 140ms ease;
}

.studio-slot-item:hover {
  border-color: var(--line-strong, #d4d4d8);
  background: #ffffff;
}

.studio-slot-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.studio-slot-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.studio-slot-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.studio-slot-sec-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  background: #141519;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.studio-slot-aspect-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--line-strong, #d4d4d8);
  background: #ffffff;
  color: var(--ink-600, #525252);
  font-size: 10.5px;
  font-weight: 600;
}

.studio-slot-cutout-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 10.5px;
  font-weight: 600;
}

.studio-slot-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #171717);
  margin: 0;
}

.studio-slot-hint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted, #737373);
}

.studio-slot-thumb-box {
  width: 54px;
  height: 54px;
  border-radius: 8px;
  border: 1px solid var(--line-strong, #d4d4d8);
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.studio-slot-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-slot-thumb-placeholder {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted, #737373);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.studio-slot-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid var(--line-input, #d4d4d8);
  background: #ffffff;
  color: var(--ink-600, #525252);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.studio-slot-reset-btn:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.studio-cutout-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line, #e5e7eb);
}

.studio-cutout-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-600, #525252);
}

.studio-cutout-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line-input, #d4d4d8);
  background: #ffffff;
  color: var(--ink, #171717);
  font-size: 11.5px;
  font-weight: 500;
  flex: 1;
  min-width: 220px;
}

.studio-gate-toggle-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--line-input, #d4d4d8);
  background: #ffffff;
  color: var(--ink-600, #525252);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
}

.studio-gate-toggle-btn:hover {
  border-color: var(--brand, #096eff);
  color: var(--brand-strong, #045ede);
}

.studio-gate-toggle-btn.is-active {
  background: var(--brand, #096eff);
  border-color: var(--brand, #096eff);
  color: #ffffff;
}

/* ==========================================================================
   Hero Pink Eclipse Cinematic Lighting Animation (Power: 50%)
   ========================================================================== */
.lp-hero-scene {
    --power: 0.50;            /* intensitas cahaya */
    --L: 255 244 231;       /* warna cahaya (r g b) */
    --mx: 0;
    --my: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .lp-hero-scene .layer { position: absolute; inset: -7%; pointer-events: none; }

  /* ---------- Rekreasi gradien pink ---------- */
  .lp-hero-scene .base {
    background:
      radial-gradient(ellipse 55% 68% at 28% 6%, rgba(255,255,255,.98) 0%, rgba(255,226,244,.88) 34%, rgba(255,196,228,0) 73%),
      radial-gradient(ellipse 78% 82% at 62% 101%, rgba(255,253,254,1) 0%, rgba(255,232,247,.94) 38%, rgba(255,195,228,0) 78%),
      radial-gradient(ellipse 58% 72% at -8% -12%, #ff43a4 0%, rgba(255,80,170,.88) 28%, rgba(255,122,191,0) 72%),
      radial-gradient(ellipse 62% 74% at 108% -10%, #f5389a 0%, rgba(246,69,158,.88) 30%, rgba(250,113,186,0) 74%),
      radial-gradient(ellipse 72% 76% at -6% 104%, rgba(255, 253, 238, 0.96) 0%, rgba(255, 248, 220, 0.82) 28%, rgba(254, 240, 190, 0.45) 55%, rgba(255, 248, 220, 0) 76%),
      radial-gradient(ellipse 70% 72% at 107% 104%, #ffa7d7 0%, rgba(255,180,222,0) 68%),
      linear-gradient(148deg, #ff68b5 0%, #ffadda 31%, #ffe0f1 63%, #ffc0e1 100%);
    animation: baseBreath 26s ease-in-out infinite alternate;
  }
  .lp-hero-scene .wash {
    background:
      radial-gradient(ellipse 42% 48% at 18% 20%, rgba(255,255,255,.62), transparent 70%),
      radial-gradient(ellipse 48% 55% at 86% 74%, rgba(255,255,255,.42), transparent 72%),
      radial-gradient(ellipse 34% 42% at 52% 48%, rgba(255,245,252,.45), transparent 75%),
      radial-gradient(ellipse 48% 52% at 6% 94%, rgba(255, 252, 225, 0.65), transparent 72%);
    mix-blend-mode: screen;
    animation: washDrift 19s ease-in-out infinite alternate;
  }

  /* ---------- Dua busur raksasa ---------- */
  .lp-hero-scene .arc-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    transform: translate3d(calc(var(--mx) * 12px), calc(var(--my) * 9px), 0);
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  }
  .lp-hero-scene .arcs {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 50% 50%;
    animation: arcFloat 24s ease-in-out infinite alternate;
  }
  /* kilau yang berjalan menyusuri tepi busur */
  .lp-hero-scene .glint {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 16 184;
    stroke-dashoffset: 16;
    animation: glintRun 11s cubic-bezier(.45,.05,.3,1) infinite;
  }
  .lp-hero-scene .glint.right { animation-duration: 14s; animation-delay: -6s; }
  .lp-hero-scene .boost { fill: none; opacity: 0; }

  /* ---------- Bayangan pink lembut (lawan arah cahaya) ---------- */
  .lp-hero-scene .shade {
    position: absolute;
    left: 0; top: 0;
    width: 130vmax; height: 130vmax;
    margin: -65vmax 0 0 -65vmax;
    border-radius: 50%;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle closest-side, rgba(224,58,148,.40) 0%, rgba(236,92,172,.16) 50%, rgba(236,92,172,0) 100%);
    mix-blend-mode: multiply;
    opacity: calc(var(--power) * .55);
    will-change: transform;
  }

  /* ---------- Grup pencahayaan (di-blend "screen") ---------- */
  .lp-hero-scene .lights {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: calc(var(--power) * .8);
    transition: opacity .5s ease;
  }
  .lp-hero-scene .lights-inner {
    position: absolute;
    inset: 0;
    animation: exposure 9s ease-in-out infinite alternate;
  }

  /* sinar volumetrik (god rays) dari arah kiri-atas */
  .lp-hero-scene .fans { position: absolute; inset: 0; transition: opacity 1.2s ease; }
  .lp-hero-scene .fans.off { opacity: 0; }
  .lp-hero-scene .fan {
    position: absolute;
    left: 22%; top: 4%;
    width: 180vmax; height: 180vmax;
    margin: -90vmax 0 0 -90vmax;
    border-radius: 50%;
    transform-origin: 50% 50%;
    -webkit-mask-image: radial-gradient(circle closest-side, transparent 0%, #000 6%, #000 28%, transparent 78%);
            mask-image: radial-gradient(circle closest-side, transparent 0%, #000 6%, #000 28%, transparent 78%);
  }
  .fan-a {
    background: conic-gradient(from 0deg,
      transparent 0deg 82deg,
      rgb(var(--L) / .30) 95deg,  transparent 107deg,
      rgb(var(--L) / .16) 117deg, transparent 125deg,
      rgb(var(--L) / .38) 139deg, transparent 153deg,
      rgb(var(--L) / .12) 161deg, transparent 167deg,
      rgb(var(--L) / .32) 181deg, transparent 195deg,
      rgb(var(--L) / .18) 205deg, transparent 215deg,
      rgb(var(--L) / .26) 229deg, transparent 245deg 360deg);
    animation: fanA 31s ease-in-out infinite alternate;
  }
  .fan-b {
    background: conic-gradient(from 0deg,
      transparent 0deg 88deg,
      rgb(var(--L) / .20) 102deg, transparent 112deg,
      rgb(var(--L) / .28) 128deg, transparent 144deg,
      rgb(var(--L) / .14) 150deg, transparent 158deg,
      rgb(var(--L) / .30) 172deg, transparent 188deg,
      rgb(var(--L) / .22) 214deg, transparent 232deg 360deg);
    animation: fanB 43s ease-in-out infinite alternate;
  }

  /* bloom ambien + sapuan cahaya */
  .lp-hero-scene .bloom {
    position: absolute; inset: -7%;
    background:
      radial-gradient(circle at 24% 14%, rgb(var(--L) / .46), transparent 26%),
      radial-gradient(circle at 80% 76%, rgb(var(--L) / .30), transparent 28%),
      radial-gradient(circle at 60% 98%, rgb(var(--L) / .26), transparent 30%);
    animation: bloomPulse 13s ease-in-out infinite alternate;
  }
  .lp-hero-scene .sweep {
    position: absolute; inset: -60%;
    background: linear-gradient(100deg, transparent 34%, rgb(var(--L) / .05) 42%, rgb(var(--L) / .32) 50%, rgb(var(--L) / .05) 58%, transparent 66%);
    opacity: 0;
    animation: sweep 21s ease-in-out infinite;
  }

  /* bokeh */
  .lp-hero-scene .bokeh { position: absolute; inset: 0; }
  .lp-hero-scene .bokeh span {
    position: absolute;
    left: var(--x); top: var(--y);
    width: var(--s); height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgb(var(--L) / .50) 0%, rgb(var(--L) / .24) 46%, transparent 100%);
    opacity: 0;
    animation: bokehFloat var(--dur) ease-in-out var(--delay) infinite;
  }

  /* key light — mengikuti kursor dengan sangat halus */
  .lp-hero-scene .key, .lp-hero-scene .key-core {
    position: absolute; left: 0; top: 0;
    border-radius: 50%;
    will-change: transform;
  }
  .lp-hero-scene .key {
    width: 120vmax; height: 120vmax;
    margin: -60vmax 0 0 -60vmax;
    background: radial-gradient(circle closest-side, rgb(var(--L) / .46) 0%, rgb(var(--L) / .24) 28%, rgb(var(--L) / .07) 60%, transparent 100%);
  }
  .lp-hero-scene .key-core {
    width: 46vmax; height: 46vmax;
    margin: -23vmax 0 0 -23vmax;
    background: radial-gradient(circle closest-side, rgb(var(--L) / .58) 0%, rgb(var(--L) / .20) 45%, transparent 100%);
  }

  /* gelombang cahaya (klik) */
  .lp-hero-scene .wave, .lp-hero-scene .flare {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
  .lp-hero-scene .wave {
    width: 70vmax; height: 70vmax;
    background: radial-gradient(circle closest-side, transparent 0%, transparent 44%, rgb(var(--L) / .20) 62%, rgb(var(--L) / .55) 78%, rgb(var(--L) / .14) 90%, transparent 100%);
  }
  .lp-hero-scene .flare {
    width: 90vmax; height: 90vmax;
    background: radial-gradient(circle closest-side, rgb(var(--L) / .80) 0%, rgb(var(--L) / .30) 34%, transparent 100%);
  }

  /* ---------- Atmosfer ---------- */
  .lp-hero-scene .particles { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
  .lp-hero-scene .spark {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--size); height: var(--size);
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 9px 2px rgba(255,255,255,.8), 0 0 20px 4px rgba(255,170,220,.35);
    opacity: 0;
    animation: sparkFloat var(--dur) linear var(--delay) infinite;
  }
  .lp-hero-scene .grain {
    z-index: 6;
    background-image: radial-gradient(rgba(255,255,255,.36) .5px, transparent .6px);
    background-size: 4px 4px;
    opacity: .12;
    mix-blend-mode: soft-light;
  }
  .lp-hero-scene .vignette {
    z-index: 6;
    background: radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(170,28,102,.15) 100%);
    animation: vignetteBreath 11s ease-in-out infinite alternate;
  }

  
/* ---------- Keyframes ---------- */
  
@keyframes baseBreath { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.025) translate(.4%,-.3%); } }
  @keyframes washDrift { 0% { transform: translate(-1.5%, 1%) scale(1); opacity: .75; } 100% { transform: translate(1.8%, -1.4%) scale(1.04); opacity: 1; } }
  @keyframes arcFloat { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.015) translate(5px,-4px); } }
  @keyframes glintRun { 0% { stroke-dashoffset: 16; } 62%, 100% { stroke-dashoffset: -100; } }
  @keyframes exposure { 0% { opacity: .8; } 100% { opacity: 1; } }
  @keyframes fanA { 0% { transform: rotate(-5deg); opacity: .65; } 100% { transform: rotate(6deg); opacity: 1; } }
  @keyframes fanB { 0% { transform: rotate(7deg); opacity: 1; } 100% { transform: rotate(-4deg); opacity: .6; } }
  @keyframes bloomPulse { 0% { opacity: .5; transform: scale(.98); } 100% { opacity: 1; transform: scale(1.05); } }
  @keyframes sweep { 0%, 14% { opacity: 0; transform: translateX(-55%) rotate(7deg); } 42% { opacity: .8; } 70%, 100% { opacity: 0; transform: translateX(55%) rotate(7deg); } }
  @keyframes bokehFloat {
    0%   { transform: translate(0,0) scale(.88); opacity: 0; }
    22%  { opacity: var(--o); }
    50%  { transform: translate(var(--dx), var(--dy)) scale(1.08); }
    78%  { opacity: var(--o); }
    100% { transform: translate(calc(var(--dx) * 1.9), calc(var(--dy) * 1.9)) scale(.94); opacity: 0; }
  }
  @keyframes sparkFloat { 0% { transform: translate(0, 45px); opacity: 0; } 18% { opacity: .75; } 40% { opacity: .25; } 58% { opacity: .7; } 80% { opacity: .2; } 100% { transform: translate(var(--drift), -130px); opacity: 0; } }
  @keyframes vignetteBreath { 0% { opacity: .75; } 100% { opacity: 1; } }
  @keyframes livePulse { 0%,100% { box-shadow: 0 0 0 4px rgba(226,58,146,.16); } 50% { box-shadow: 0 0 0 8px rgba(226,58,146,.04); } }
  @keyframes scrollDot { 0%,100% { transform: translate(-50%,0); opacity: 1; } 60% { transform: translate(-50%,7px); opacity: .2; } }

  .lp-hero-scene.paused * { animation-play-state: paused !important; }

/* Hero scene: semua animasi dimatikan (performa) - gradien statis saja */
.lp-hero-scene, .lp-hero-scene * { animation: none !important; transition: none !important; }
.lp-hero-scene .particles, .lp-hero-scene .bokeh, .lp-hero-scene .key, .lp-hero-scene .key-core,
.lp-hero-scene .fans, .lp-hero-scene .sweep, .lp-hero-scene .shade, .lp-hero-scene .grain { display: none !important; }

/* ------------------------------------------------------------------ */
/* Studio: petunjuk sumber musik (file audio / link YouTube)           */
/* ------------------------------------------------------------------ */
.music-source-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-500, #737373);
}
.music-yt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.28);
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.music-yt-badge[hidden] { display: none; }