@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/cce080f35d014443-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Lato;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/4de1fea1a954a5b6-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/39969fcf98a3026e-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Lato;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/6d664cce900333ee-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Lato Fallback;src:local("Arial");ascent-override:101.03%;descent-override:21.80%;line-gap-override:0.00%;size-adjust:97.69%}.__className_47a102{font-family:Lato,Lato Fallback;font-style:normal}.__variable_47a102{--font-lato:"Lato","Lato Fallback"}@font-face{font-family:Urbanist;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/680d078f20ab2e33-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Urbanist;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/a22b1dc24103c00d-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Urbanist;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/680d078f20ab2e33-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Urbanist;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/a22b1dc24103c00d-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Urbanist;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/680d078f20ab2e33-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Urbanist;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/a22b1dc24103c00d-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Urbanist Fallback;src:local("Arial");ascent-override:95.93%;descent-override:25.24%;line-gap-override:0.00%;size-adjust:99.04%}.__className_d12f13{font-family:Urbanist,Urbanist Fallback;font-style:normal}.__variable_d12f13{--font-urbanist:"Urbanist","Urbanist Fallback"}@font-face{font-family:Signika;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/c83c15ef45bc319e-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Signika;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/8d2f405481d2c906-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Signika;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/a1ead154ff661e2f-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Signika;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/c83c15ef45bc319e-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Signika;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/8d2f405481d2c906-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Signika;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/a1ead154ff661e2f-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Signika;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/c83c15ef45bc319e-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Signika;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/8d2f405481d2c906-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Signika;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/a1ead154ff661e2f-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Signika Fallback;src:local("Arial");ascent-override:98.02%;descent-override:30.45%;line-gap-override:0.00%;size-adjust:95.89%}.__className_68261c{font-family:Signika,Signika Fallback;font-style:normal}.__variable_68261c{--font-signika:"Signika","Signika Fallback"}

/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:host,:root{--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-200:oklch(88.5% .062 18.334);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-orange-500:oklch(70.5% .213 47.604);--color-amber-600:oklch(66.6% .179 58.318);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-800:oklch(44.8% .119 151.328);--color-emerald-50:oklch(97.9% .021 166.113);--color-emerald-200:oklch(90.5% .093 164.15);--color-emerald-700:oklch(50.8% .118 165.612);--color-sky-400:oklch(74.6% .16 232.661);--color-blue-50:oklch(97% .014 254.604);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-900:oklch(37.9% .146 265.522);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-pink-200:oklch(89.9% .061 343.231);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-pink-700:oklch(52.5% .223 3.958);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height:calc(1.5/1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25/1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-2xl:1rem;--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--animate-bounce:bounce 1s infinite;--blur-sm:8px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-lato);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,:after,:before{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}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;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.-top-1{top:calc(var(--spacing)*-1)}.-top-2{top:calc(var(--spacing)*-2)}.top-0{top:calc(var(--spacing)*0)}.top-1\/2{top:50%}.top-2{top:calc(var(--spacing)*2)}.top-4{top:calc(var(--spacing)*4)}.-right-1{right:calc(var(--spacing)*-1)}.right-0{right:calc(var(--spacing)*0)}.right-2{right:calc(var(--spacing)*2)}.right-4{right:calc(var(--spacing)*4)}.right-6{right:calc(var(--spacing)*6)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-6{bottom:calc(var(--spacing)*6)}.bottom-32{bottom:calc(var(--spacing)*32)}.left-0{left:calc(var(--spacing)*0)}.left-1\/2{left:50%}.left-4{left:calc(var(--spacing)*4)}.z-10{z-index:10}.z-50{z-index:50}.order-1{order:1}.order-2{order:2}.col-span-1{grid-column:span 1/span 1}.mx-auto{margin-inline:auto}.-mt-3{margin-top:calc(var(--spacing)*-3)}.mt-1{margin-top:calc(var(--spacing)*1)}.mt-2{margin-top:calc(var(--spacing)*2)}.mt-6{margin-top:calc(var(--spacing)*6)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-12{margin-top:calc(var(--spacing)*12)}.mt-16{margin-top:calc(var(--spacing)*16)}.mr-3{margin-right:calc(var(--spacing)*3)}.mr-4{margin-right:calc(var(--spacing)*4)}.mb-1{margin-bottom:calc(var(--spacing)*1)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.mb-16{margin-bottom:calc(var(--spacing)*16)}.ml-1{margin-left:calc(var(--spacing)*1)}.ml-2{margin-left:calc(var(--spacing)*2)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-square{aspect-ratio:1}.h-1{height:calc(var(--spacing)*1)}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-5{height:calc(var(--spacing)*5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-24{height:calc(var(--spacing)*24)}.h-32{height:calc(var(--spacing)*32)}.h-48{height:calc(var(--spacing)*48)}.h-64{height:calc(var(--spacing)*64)}.h-96{height:calc(var(--spacing)*96)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-\[90vh\]{max-height:90vh}.max-h-full{max-height:100%}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-5{width:calc(var(--spacing)*5)}.w-6{width:calc(var(--spacing)*6)}.w-8{width:calc(var(--spacing)*8)}.w-10{width:calc(var(--spacing)*10)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-20{width:calc(var(--spacing)*20)}.w-24{width:calc(var(--spacing)*24)}.w-32{width:calc(var(--spacing)*32)}.w-48{width:calc(var(--spacing)*48)}.w-64{width:calc(var(--spacing)*64)}.w-96{width:calc(var(--spacing)*96)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-full{max-width:100%}.max-w-md{max-width:var(--container-md)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1)}.-translate-x-1\/2,.translate-x-1{translate:var(--tw-translate-x)var(--tw-translate-y)}.translate-x-1{--tw-translate-x:calc(var(--spacing)*1)}.translate-x-6{--tw-translate-x:calc(var(--spacing)*6)}.-translate-y-1\/2,.translate-x-6{translate:var(--tw-translate-x)var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1)}.translate-y-1\/2{--tw-translate-y:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.rotate-45{rotate:45deg}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.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))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-items-center{justify-items:center}.gap-0{gap:calc(var(--spacing)*0)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-8{gap:calc(var(--spacing)*8)}.gap-12{gap:calc(var(--spacing)*12)}.gap-16{gap:calc(var(--spacing)*16)}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1.5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1.5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*3)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*4)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*5)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*5)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*12)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*12)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-1>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*1)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-3>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*3)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*3)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*4)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*4)*calc(1 - var(--tw-space-x-reverse)))}:where(.space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*6)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap}.overflow-hidden,.truncate{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e+38px}.rounded-lg{border-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-b-4{border-bottom-style:var(--tw-border-style);border-bottom-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-emerald-200{border-color:var(--color-emerald-200)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-600{border-color:var(--color-gray-600)}.border-gray-800{border-color:var(--color-gray-800)}.border-green-200{border-color:var(--color-green-200)}.border-red-200{border-color:var(--color-red-200)}.border-white{border-color:var(--color-white)}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab,red,red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-black{background-color:var(--color-black)}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-emerald-50{background-color:var(--color-emerald-50)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-500{background-color:var(--color-red-500)}.bg-sky-400{background-color:var(--color-sky-400)}.bg-slate-900{background-color:var(--color-slate-900)}.bg-white{background-color:var(--color-white)}.bg-gradient-to-bl{--tw-gradient-position:to bottom left in oklab}.bg-gradient-to-bl,.bg-gradient-to-br{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab}.bg-gradient-to-l{--tw-gradient-position:to left in oklab}.bg-gradient-to-l,.bg-gradient-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab}.bg-gradient-to-t{--tw-gradient-position:to top in oklab}.bg-gradient-to-t,.bg-gradient-to-tr{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-tr{--tw-gradient-position:to top right in oklab}.from-blue-200{--tw-gradient-from:var(--color-blue-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-300{--tw-gradient-from:var(--color-gray-300);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-600{--tw-gradient-from:var(--color-gray-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-gray-700{--tw-gradient-from:var(--color-gray-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-orange-500{--tw-gradient-from:var(--color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-slate-900{--tw-gradient-from:var(--color-slate-900);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-blue-900{--tw-gradient-via:var(--color-blue-900);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-purple-200{--tw-gradient-via:var(--color-purple-200);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black{--tw-gradient-to:var(--color-black);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-gray-400{--tw-gradient-to:var(--color-gray-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-200{--tw-gradient-to:var(--color-pink-200);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-500{--tw-gradient-to:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-500{--tw-gradient-to:var(--color-purple-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-red-500{--tw-gradient-to:var(--color-red-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-slate-800{--tw-gradient-to:var(--color-slate-800);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1{padding:calc(var(--spacing)*1)}.p-2{padding:calc(var(--spacing)*2)}.p-3{padding:calc(var(--spacing)*3)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.px-1{padding-inline:calc(var(--spacing)*1)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.px-12{padding-inline:calc(var(--spacing)*12)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-1\.5{padding-block:calc(var(--spacing)*1.5)}.py-2{padding-block:calc(var(--spacing)*2)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.py-16{padding-block:calc(var(--spacing)*16)}.py-20{padding-block:calc(var(--spacing)*20)}.pt-4{padding-top:calc(var(--spacing)*4)}.pt-8{padding-top:calc(var(--spacing)*8)}.pb-4{padding-bottom:calc(var(--spacing)*4)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-display{font-family:var(--font-signika)}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-lato)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-amber-600{color:var(--color-amber-600)}.text-black{color:var(--color-black)}.text-blue-600{color:var(--color-blue-600)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-800{color:var(--color-gray-800)}.text-gray-900{color:var(--color-gray-900)}.text-green-800{color:var(--color-green-800)}.text-pink-600{color:var(--color-pink-600)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-20{opacity:.2}.opacity-30{opacity:.3}.opacity-60{opacity:.6}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a)}.shadow,.shadow-lg{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px)}.blur,.blur-3xl{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,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl))}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-1000{--tw-duration:1s;transition-duration:1s}@media (hover:hover){.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-gray-700:hover{background-color:var(--color-gray-700)}.hover\:bg-gray-800:hover{background-color:var(--color-gray-800)}.hover\:bg-gray-900:hover{background-color:var(--color-gray-900)}.hover\:bg-green-600:hover{background-color:var(--color-green-600)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:text-gray-300:hover{color:var(--color-gray-300)}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:text-pink-700:hover{color:var(--color-pink-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a)}.hover\:shadow-lg:hover,.hover\:shadow-md:hover{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus\:border-gray-500:focus{border-color:var(--color-gray-500)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width:40rem){.sm\:block{display:block}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:px-6{padding-inline:calc(var(--spacing)*6)}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:col-span-2{grid-column:span 2/span 2}.md\:mt-0{margin-top:calc(var(--spacing)*0)}.md\:mb-0{margin-bottom:calc(var(--spacing)*0)}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-56{width:calc(var(--spacing)*56)}.md\:shrink-0{flex-shrink:0}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}}@media (min-width:64rem){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,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))}.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}:where(.lg\:space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*6)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-x-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing)*8)}.lg\:px-16{padding-inline:calc(var(--spacing)*16)}.lg\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.lg\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.lg\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.lg\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:80rem){:where(.xl\:space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*8)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-x-reverse)))}}}:root{--background:#fff;--foreground:#171717;--primary:#1a365d;--secondary:#2d3748;--accent:#e53e3e;--neutral:#f7fafc;--woodmart-primary:#1a365d;--woodmart-secondary:#2d3748;--woodmart-accent:#e53e3e}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}body{background:var(--background);color:var(--foreground);font-family:var(--font-lato),Arial,Helvetica,sans-serif;line-height:1.6}*{box-sizing:border-box}h1,h2,h3,h4,h5,h6{font-family:var(--font-urbanist),sans-serif;font-weight:600;line-height:1.2}.text-woodmart-primary{color:var(--woodmart-primary)}.bg-woodmart-primary{background-color:var(--woodmart-primary)}.text-woodmart-secondary{color:var(--woodmart-secondary)}.bg-woodmart-secondary{background-color:var(--woodmart-secondary)}.text-woodmart-accent{color:var(--woodmart-accent)}.bg-woodmart-accent{background-color:var(--woodmart-accent)}.fixed .animate-spin:not(.portfolio-loading),.fixed>div:has(.animate-spin):not(.portfolio-container){display:none!important}.fixed .bg-white:not(.chat-bubble):not([class*=whatsapp]):not([class*=chat]),.fixed .rounded-full.bg-white:not(.chat-bubble){opacity:0!important;visibility:hidden!important;display:none!important}.fixed .animate-pulse.bg-white,.fixed .bg-white.rounded-full:not(.chat-bubble),.fixed .w-16.h-16.bg-white,.fixed button:after,.fixed button:before{z-index:-1!important;opacity:0!important}.fixed.bottom-6.right-6{z-index:9999!important}.__next-loading,.fixed .backdrop-blur-sm,.fixed .bg-white.bg-opacity-20,.fixed.bottom-6.right-6.z-50.bg-white.bg-opacity-20.backdrop-blur-sm,.next-loading,[data-nextjs-scroll-focus-boundary]:after{display:none!important}.fixed>.bg-white.rounded-full,.fixed>div>.bg-white.rounded-full{opacity:0!important;pointer-events:none!important;display:none!important}.scroll-to-top-btn{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;background:#1f2937e6!important;border:none!important}.scroll-to-top-btn:hover{background:#111827f2!important}.fixed button:not(.whatsapp-btn):not(.scroll-to-top-btn):after,.fixed button:not(.whatsapp-btn):not(.scroll-to-top-btn):before,.fixed.bottom-6.right-6>:not(.chat-bubble):not(.whatsapp-btn):not(.scroll-to-top-btn){display:none!important}.bsi-auth{color:#e8eaed;-webkit-font-smoothing:antialiased;background:#15161a;grid-template-columns:1.05fr .95fr;min-height:100dvh;font-family:inherit;display:grid}.bsi-auth__brand{background:radial-gradient(880px 520px at 16% 10%,#0080c042,#0000 62%),radial-gradient(720px 460px at 90% 94%,#0080c021,#0000 60%),#1a1c21;border-right:1px solid #262a31;flex-direction:column;justify-content:flex-end;gap:16px;padding:60px 64px;display:flex;position:relative;overflow:hidden}.bsi-auth__brand:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff08 1px,#0000 0),linear-gradient(90deg,#ffffff08 1px,#0000 0);background-size:56px 56px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(720px 520px at 22% 26%,#000,#0000 78%);mask-image:radial-gradient(720px 520px at 22% 26%,#000,#0000 78%)}.bsi-auth__brand>*{position:relative}.bsi-auth__chip{background:#f1f3f6;border-radius:14px;align-self:flex-start;margin-bottom:10px;padding:15px 22px;box-shadow:inset 0 1px #ffffffb3,0 20px 44px #00000061}.bsi-auth__logo{width:auto;height:46px;display:block}.bsi-auth__eyebrow{letter-spacing:.16em;text-transform:uppercase;color:#4aa6d8;margin:0;font-size:11.5px;font-weight:700}.bsi-auth__brandTitle{letter-spacing:-.02em;color:#f5f7f9;margin:0;font-size:38px;font-weight:650;line-height:1.12}.bsi-auth__brandText{color:#8f97a2;max-width:34ch;margin:0;font-size:15px;line-height:1.62}.bsi-auth__panel{flex-direction:column;justify-content:center;width:100%;max-width:520px;padding:60px 64px;display:flex}.bsi-auth__title{letter-spacing:-.02em;color:#f4f6f8;margin:0 0 6px;font-size:30px;font-weight:650}.bsi-auth__sub{color:#878e99;margin:0 0 32px;font-size:14.5px}.bsi-field{margin-bottom:18px}.bsi-field__label{letter-spacing:.1em;text-transform:uppercase;color:#7c838e;margin-bottom:8px;font-size:11.5px;font-weight:700;display:block}.bsi-field__wrap{align-items:center;display:flex;position:relative}.bsi-field__input{color:#e8eaed;background:#1c1e23;border:1px solid #2c3037;border-radius:10px;width:100%;padding:13px 15px;font-family:inherit;font-size:15px;line-height:1.4;transition:border-color .16s,box-shadow .16s,background .16s}.bsi-field__input::placeholder{color:#5f6670}.bsi-field__input:hover{border-color:#3a3f48}.bsi-field__input:focus{background:#1f2228;border-color:#0080c0;outline:none;box-shadow:0 0 0 3px #0080c038}.bsi-field__input:disabled{opacity:.55;cursor:not-allowed}.bsi-field__input--pw{padding-right:104px}.bsi-field__eye{color:#7c838e;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:9px 11px;font-family:inherit;font-size:12px;font-weight:700;transition:color .15s,background .15s;position:absolute;right:5px}.bsi-field__eye:hover:not(:disabled){color:#d2d7dd;background:#ffffff0e}.bsi-field__eye:disabled{opacity:.45;cursor:not-allowed}.bsi-alert{color:#f0b6b6;background:#d645451a;border:1px solid #d6454552;border-left:3px solid #d64545;border-radius:8px;margin:0 0 18px;padding:11px 13px;font-size:13.5px;line-height:1.5}.bsi-btn{color:#fff;letter-spacing:.01em;cursor:pointer;background:#0080c0;border:1px solid #0b93d6;border-radius:10px;width:100%;margin-top:4px;padding:13px 18px;font-family:inherit;font-size:14.5px;font-weight:650;transition:transform .12s,background .16s,box-shadow .16s;box-shadow:inset 0 1px #ffffff29,0 10px 26px #0080c03d}.bsi-btn:hover:not(:disabled){background:#0a8fd0;box-shadow:inset 0 1px #fff3,0 14px 30px #0080c052}.bsi-btn:active:not(:disabled){transform:translateY(1px)}.bsi-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.bsi-btn.is-busy{cursor:progress}.bsi-auth__panel :focus-visible{outline-offset:2px;outline:2px solid #4aa6d8}@media (max-width:900px){.bsi-auth{grid-template-columns:1fr}.bsi-auth__brand{border-bottom:1px solid #262a31;border-right:0;padding:40px 28px 34px}.bsi-auth__brandTitle{font-size:30px}.bsi-auth__panel{max-width:none;padding:40px 28px 56px}}@media (prefers-reduced-motion:reduce){.bsi-btn,.bsi-field__eye,.bsi-field__input{transition:none}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
/* bsi-hp:start */



/* ---------------------------------------------------------------- tokens --- */

/* The dropdown panel, the password dialog and the section modal are appended
   to <body>, so they sit outside .bsi-hp and would resolve every var() below to
   nothing -- transparent background, no border, near-white inherited text. They
   have to be listed here or the overlays render invisible. */
.bsi-hp,
.bsi-cb,
.bsi-pw,
.bsi-dt-modal {
  --hp-primary: #673de6;
  --hp-primary-hover: #5a2fd0;
  --hp-primary-active: #4d28b4;
  --hp-primary-soft: rgba(103, 61, 230, 0.1);
  --hp-ring: rgba(103, 61, 230, 0.3);

  --hp-sidebar: #14141a;
  --hp-sidebar-text: #b9b9c6;
  --hp-sidebar-muted: #74747f;
  --hp-sidebar-hover: #1f1f28;

  --hp-canvas: #f5f5f9;
  --hp-card: #ffffff;
  --hp-border: #e7e7ee;
  --hp-border-strong: #d5d5e0;
  --hp-text: #16161a;
  --hp-muted: #6b6b7b;

  --hp-success: #1fae66;
  --hp-success-soft: #e9f9f1;
  --hp-danger: #d92d3c;
  --hp-danger-soft: #fdeced;

  --hp-radius: 12px;
  --hp-radius-sm: 8px;
  --hp-shadow: 0 1px 2px rgba(20, 20, 26, 0.04), 0 4px 16px rgba(20, 20, 26, 0.05);
  --hp-sidebar-w: 264px;

  display: grid;
  /* Kolom 1 = sidebar gelap, kolom 2 = area konten.
     Baris 1 = topbar putih, baris 2 = isi panel. */
  grid-template-columns: var(--hp-sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  background: var(--hp-canvas);
  color: var(--hp-text);
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------- layout --- */

/* Topbar: putih, menempel di atas, judul halaman + logout. */
.bsi-hp > header {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hp-border);
  padding: 14px 28px;
}

.bsi-hp > header > div {
  max-width: none !important;
  margin: 0;
}

.bsi-hp > header h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hp-text);
}

/* Baris pembungkus nav + main. `display: contents` membuatnya "@seolah-olah"
   tidak ada, sehingga nav dan main bisa langsung jadi item grid dan kita
   tidak perlu mengubah struktur JSX sama sekali.

   Hanya untuk dashboard: di halaman Section Settings, anak pertama root
   adalah kartu konten, bukan baris pembungkus -- Making it contents akan
   membuat kartu itu kehilangan lebar. */
.bsi-hp:not(.bsi-hp--page) > div {
  display: contents;
}

/* Sidebar gelap, setinggi layar, menempel saat halaman di-scroll. */
.bsi-hp nav {
  grid-column: 1;
  grid-row: 1 / span 2;
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  /* Utility `md:w-56` milik Tailwind masih menempel pada <nav>; kolom grid
     sudah menentukan lebarnya, jadi biarkan nav mengikuti kolom. */
  width: auto;
  max-width: none;
  background: var(--hp-sidebar);
  padding: 20px 14px 28px;
  color: var(--hp-sidebar-text);
}

/* Logo + nama, dibuat dari CSS supaya tidak perlu menambah elemen baru. */
.bsi-hp nav::before {
  content: '';
  display: block;
  height: 34px;
  width: 34px;
  margin: 0 0 0 4px;
  border-radius: 9px;
  background: #fff url('/logo.png') center / 24px 24px no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.bsi-hp nav > div {
  margin-top: 20px;
}

.bsi-hp nav > div:first-of-type {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.bsi-hp nav p {
  margin-bottom: 8px;
  padding: 0 12px;
  color: var(--hp-sidebar-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.bsi-hp nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bsi-hp nav li {
  margin: 0;
}

.bsi-hp nav li > button {
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--hp-radius-sm);
  background: transparent;
  color: var(--hp-sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.bsi-hp nav li > button:hover {
  background: var(--hp-sidebar-hover);
  color: #fff;
}

.bsi-hp nav li > button:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

/* Tombol tab yang sedang aktif. */
.bsi-hp nav li > button.bg-gray-900 {
  background: var(--hp-primary);
  color: #fff;
  font-weight: 600;
}

/* Panel konten: kartu putih di atas canvas abu-abu. */
.bsi-hp main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  max-width: 100% !important;
  margin: 0;
  padding: 24px 28px 56px;
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-top: 0;
  border-radius: 0 0 var(--hp-radius) var(--hp-radius);
  box-shadow: var(--hp-shadow);
}


/* --------------------------------------------------------------- topbar --- */

.bsi-hp > header button {
  padding: 8px 14px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bsi-hp > header button:hover {
  background: var(--hp-canvas);
  border-color: #c4c4d2;
}

.bsi-hp > header button:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}


/* ---------------------------------------------------------------- fields --- */

/* Semua field dinormalkan di satu tempat. Enam editor memakai pola class
   yang berbeda-beda (`w-full ... px-3 py-2 text-sm`,
   `flex-1 rounded ... px-3 py-2`, `w-32 ...`, `w-16 ...` text-center),
   jadi menata satu per satu akan melelahkan dan rawan miss.

   :where() dipakai dengan sengaja. Argumen :not() ikut menambah specificity,
   sehingga tanpa :where() selector ini (0,4,1) mengalahkan hampir semua
   override kecil di bawah -- input "Urutan" tidak pernah bisa disempitkan.
   :where() membungkusnya jadi nol, jadi aturan khusus di bawah menang. */
.bsi-hp :where(input:not([type='checkbox']):not([type='radio']):not([type='file'])),
.bsi-hp textarea,
.bsi-hp select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bsi-hp textarea {
  min-height: 88px;
  resize: vertical;
}

.bsi-hp input::placeholder,
.bsi-hp textarea::placeholder {
  color: #9a9aa8;
}

.bsi-hp input:focus,
.bsi-hp textarea:focus,
.bsi-hp select:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

.bsi-hp input:disabled,
.bsi-hp textarea:disabled,
.bsi-hp button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bsi-hp label {
  display: block;
  margin-bottom: 6px;
  color: var(--hp-text);
  font-size: 12.5px;
  font-weight: 600;
  /* hPanel memakai label sentence-case. Utility `uppercase` milik Tailwind
     ikut menempel, jadi dibatalkan di sini -- bukan dihapus dari markup. */
  text-transform: none;
  letter-spacing: normal;
}

/* Tombol unggah React juga berupa <label>, jadi aturan `.bsi-hp label` di atas
   ikut menimpanya dan specificity-nya (0,1,1) mengalahkan utility Tailwind
   (0,1,0). Akibatnya `text-white` kalah: teks jadi `var(--hp-text)` yang gelap
   di atas `bg-gray-800` yang gelap, dan `inline-flex` berubah jadi block.
   Bukan sekadar "kurang menarik" — teksnya praktis tidak terbaca.

   specificity `:has()` ikut dihitung, jadi (0,2,2) dan menang atas `.bsi-hp
   label`. Nilai di bawah mengembalikan persis apa yang deklarasi utility itu. */
.bsi-hp label:has(> input[type='file']) {
  display: inline-flex;
  margin-bottom: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

/* Sub-label locale (EN / ID) dan caption kecil. Markup memakai kelas
   `uppercase tracking-wide` yang PUNYA dengan label utama, jadi keduanya
   dibedakan lewat elemen: sub-label berupa <span>, label utama <label>. */
.bsi-hp span.uppercase,
.bsi-hp span.tracking-wide,
.bsi-hp .text-\[10px\] {
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Input urutan tampil — tetap sempit dan rata tengah. */
.bsi-hp input.w-16[type='number'],
.bsi-hp input[aria-label^='Urutan'] {
  width: 68px;
  text-align: center;
  padding: 8px 6px;
}


/* --------------------------------------------------------------- buttons --- */

.bsi-hp button {
  font-family: inherit;
  cursor: pointer;
}

.bsi-hp button[class*='bg-blue-600'] {
  background: var(--hp-primary);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  border-radius: var(--hp-radius-sm);
  transition: background 0.15s ease;
}

.bsi-hp button[class*='bg-blue-600']:hover:not(:disabled) {
  background: var(--hp-primary-hover);
}

.bsi-hp button[class*='bg-blue-600']:active:not(:disabled) {
  background: var(--hp-primary-active);
}

.bsi-hp button[class*='bg-gray-800'] {
  background: var(--hp-primary);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  border-radius: var(--hp-radius-sm);
  transition: background 0.15s ease;
}

.bsi-hp button[class*='bg-gray-800']:hover:not(:disabled) {
  background: var(--hp-primary-hover);
}

/* Tombol kecil netral: "Naik", "Turun", "Hapus gambar". */
.bsi-hp button[class*='border-gray-300'] {
  border-radius: var(--hp-radius-sm);
  border-color: var(--hp-border-strong);
  background: #fff;
  color: var(--hp-text);
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bsi-hp button[class*='border-gray-300']:hover:not(:disabled) {
  background: var(--hp-canvas);
  border-color: #c4c4d2;
}

.bsi-hp button[class*='border-red-200'] {
  border-radius: var(--hp-radius-sm);
  border-color: #f6cfd3;
  background: var(--hp-danger-soft);
  color: var(--hp-danger);
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.bsi-hp button[class*='border-red-200']:hover:not(:disabled) {
  background: #fbdadd;
  border-color: #f0b9bf;
}

.bsi-hp button[class*='text-red-600']:hover,
.bsi-hp button[class*='text-red-700']:hover {
  color: #b9242f;
}

/* Link "Back to Admin" di halaman Section Settings. */
.bsi-hp a[class*='text-blue-600'],
.bsi-hp button[class*='text-blue-600'] {
  color: var(--hp-primary);
  font-weight: 600;
  text-decoration: none;
}

.bsi-hp a[class*='text-blue-600']:hover,
.bsi-hp button[class*='text-blue-600']:hover {
  color: var(--hp-primary-hover);
  text-decoration: underline;
}


/* ---------------------------------------------------------------- toggle --- */

/* Switch on/off untuk visibilitas section. Bentuknya sudah benar (pill +
   knob), jadi hanya warnanya yang diganti ke hijau hPanel. */
.bsi-hp .h-6.w-12 {
  border: 1px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.bsi-hp button.bg-green-500 {
  background: var(--hp-success);
}

.bsi-hp button.bg-gray-300 {
  background: #b6b6c4;
}


/* ------------------------------------------------------------------ chip --- */

/* Badge status: "Tayang" / "Disembunyikan". */
.bsi-hp button.bg-green-100 {
  background: var(--hp-success-soft);
  color: #127a47;
  border-radius: 999px;
  border: 1px solid #bfe9d4;
}

.bsi-hp button[class*='bg-gray-100'] {
  background: #f1f1f5;
  color: var(--hp-muted);
  border-radius: 999px;
  border: 1px solid var(--hp-border);
}


/* ----------------------------------------------------------------- cards --- */

/* Baris tiap section/menu di daftar. */
.bsi-hp div[class*='justify-between'][class*='rounded'][class*='bg-gray-50'] {
  background: #fff;
  border-color: var(--hp-border);
  border-radius: var(--hp-radius);
  padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(20, 20, 26, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bsi-hp div[class*='justify-between'][class*='rounded'][class*='bg-gray-50']:hover {
  border-color: #d9d9e6;
  box-shadow: 0 2px 10px rgba(20, 20, 26, 0.05);
}

/* Kartu nested di dalam editor. */
.bsi-hp div[class*='bg-white'][class*='rounded'][class*='border'],
.bsi-hp div[class*='rounded'][class*='border-gray-200'][class*='p-3'] {
  border-radius: var(--hp-radius);
  border-color: var(--hp-border);
}

.bsi-hp div[class*='bg-gray-50'][class*='rounded'][class*='p-2'] {
  background: var(--hp-canvas);
  border-radius: var(--hp-radius-sm);
  border: 1px solid var(--hp-border);
}

/* Pemilih gambar / thumbnail. */
.bsi-hp div[class*='group'][class*='relative'] {
  border-radius: var(--hp-radius-sm);
  border-color: var(--hp-border);
}


/* ---------------------------------------------------------------- alerts --- */

.bsi-hp .bsi-alert {
  border-radius: var(--hp-radius-sm);
  font-size: 13.5px;
  padding: 11px 14px;
}

.bsi-hp [class*='border-green-200'] {
  background: var(--hp-success-soft);
  border-color: #bfe9d4;
  color: #127a47;
  border-radius: var(--hp-radius-sm);
}

.bsi-hp [class*='border-red-200'][class*='bg-red-50'],
.bsi-hp [class*='border-red-200']:not(button) {
  color: #a41f2b;
  border-radius: var(--hp-radius-sm);
}

.bsi-hp [class*='bg-red-50'] {
  background: var(--hp-danger-soft);
  border-color: #f6cfd3;
}

.bsi-hp [class*='bg-emerald-50'] {
  background: var(--hp-success-soft);
  border-color: #bfe9d4;
  border-radius: var(--hp-radius-sm);
  color: #127a47;
}


/* ------------------------------------------------------- text normalizing --- */

/* Utility warna lama yang perlu diselaraskan ke palet baru.
   `text-black` muncul ~20 kali di markup dashboard, `text-gray-500` ~10 kali;
   hPanel tidak pernah memakai hitam murni.

   Dibungkus :where() supaya specificity-nya turun ke (0,1,0). Tanpa itu,
   `text-gray-500` akan mengalahkan `.bsi-hp label` dan semua label field
   ikut jadiabu-abu pucat. */
.bsi-hp :where(.text-black) {
  color: var(--hp-text);
}

.bsi-hp :where(.text-gray-500, .text-gray-600, .text-gray-400) {
  color: var(--hp-muted);
}

.bsi-hp :where(.text-green-800) {
  color: #127a47;
}

.bsi-hp :where(.text-red-600, .text-red-700) {
  color: var(--hp-danger);
}


/* ------------------------------------------------- halaman section settings --- */

/* Halaman ini tidak punya nav, jadi root-nya jadi canvas polos dan
   kartu maks-nya jadi panel konten. override display karena `.bsi-hp` di
   atas perishedak grid dua kolom untuk dashboard; tanpa ini kartuunya
   terjatuh ke kolom pertama dan lebarnya nol. */
.bsi-hp--page {
  display: block;
  background: var(--hp-canvas);
  padding: 0 !important;
}

.bsi-hp--page > div {
  display: block;
  max-width: 880px !important;
  margin: 32px auto !important;
  background: var(--hp-card);
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  padding: 26px 28px 32px !important;
}

.bsi-hp--page h1 {
  font-size: 20px !important;
  letter-spacing: -0.01em;
}

/* Deretan tab section (hero, services, about, ...). */
.bsi-hp--page [class*='flex'][class*='gap-2'][class*='flex-wrap'] > button {
  padding: 7px 14px;
  border: 1px solid var(--hp-border-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--hp-muted);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bsi-hp--page [class*='flex'][class*='gap-2'][class*='flex-wrap'] > button:hover {
  border-color: var(--hp-primary);
  color: var(--hp-primary);
}

.bsi-hp--page [class*='flex'][class*='gap-2'][class*='flex-wrap'] > button.bg-blue-600 {
  background: var(--hp-primary) !important;
  border-color: var(--hp-primary) !important;
  color: #fff !important;
  font-weight: 600;
}

.bsi-hp--page [class*='flex'][class*='gap-2'][class*='flex-wrap'] > button.bg-gray-200 {
  background: #fff;
  color: var(--hp-muted);
}

.bsi-hp--page button[class*='bg-blue-600'] {
  background: var(--hp-primary);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  border-radius: var(--hp-radius-sm);
}

.bsi-hp--page button[class*='bg-blue-600']:hover:not(:disabled) {
  background: var(--hp-primary-hover);
}


/* ------------------------------------------------------------ responsive --- */

@media (max-width: 900px) {
  .bsi-hp {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }

  .bsi-hp > header {
    grid-column: 1;
    grid-row: 1;
    padding: 12px 16px;
  }

  .bsi-hp nav {
    grid-column: 1;
    grid-row: 2;
    position: static;
    height: auto;
    padding: 14px 12px 18px;
  }

  .bsi-hp nav::before {
    display: none;
  }

  .bsi-hp main {
    grid-column: 1;
    grid-row: 3;
    padding: 18px 16px 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bsi-hp *,
  .bsi-hp *::before,
  .bsi-hp *::after {
    transition: none !important;
  }
}



/* ==========================================================================
   Select + searchable dropdown (cms-styles/select.js)
   --------------------------------------------------------------------------
   Two layers:

   1. The native <select> is restyled so it matches every other field. This
      applies whether or not the searchable panel is available, so a short
      service list and a touch device still look consistent.

   2. The panel itself is an overlay in <body>, outside React's tree, because
      anything inserted into the editor's own DOM would be destroyed on the
      next re-render (which fires on every keystroke).
   ========================================================================== */

.bsi-hp select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b6b7b' stroke-width='2'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  cursor: pointer;
}

.bsi-hp select[data-bsi-open] {
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

/* ----------------------------------------------------------------- panel --- */

.bsi-cb {
  position: fixed;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: 0 12px 32px rgba(20, 20, 26, 0.16);
}

.bsi-cb[hidden] {
  display: none;
}

.bsi-cb__searchwrap {
  padding: 8px;
  border-bottom: 1px solid var(--hp-border);
  background: #fbfbfd;
}

.bsi-cb__searchwrap[hidden] {
  display: none;
}

.bsi-cb__search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  /* 16px, not 14px: iOS Safari zooms the page on focus for any focused
     input below 16px and does not zoom back out. */
  font-size: 16px;
  line-height: 1.4;
}

.bsi-cb__search:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

.bsi-cb__list {
  overflow-y: auto;
  padding: 4px;
}

.bsi-cb__list[hidden] {
  display: none;
}

.bsi-cb__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--hp-radius-sm);
  font-size: 14px;
  color: var(--hp-text);
  cursor: pointer;
  transition: background 0.12s ease;
}

.bsi-cb__opt.is-active {
  background: var(--hp-primary-soft);
}

.bsi-cb__opt.is-selected {
  font-weight: 600;
}

/* The tick column is fixed width so labels stay aligned whether or not the
   current option is ticked. */
.bsi-cb__tick {
  flex: 0 0 14px;
  color: var(--hp-primary);
  font-size: 13px;
  opacity: 0;
}

.bsi-cb__opt.is-selected .bsi-cb__tick {
  opacity: 1;
}

.bsi-cb__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bsi-cb__mark {
  background: #ffe9a8;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.bsi-cb__empty {
  padding: 16px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--hp-muted);
}

.bsi-cb__empty[hidden] {
  display: none;
}

/* ==========================================================================
   Data table (cms-styles/datatable.js)
   --------------------------------------------------------------------------
   Mirrors the Hostinger panel density: compact rows, clear separation, and a
   hover state that reads as one row rather than a striped block.
   ========================================================================== */

.bsi-dt {
  margin-bottom: 20px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  overflow: hidden;
}

/* ------------------------------------------------------------- toolbar --- */

.bsi-dt__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hp-border);
  background: #fbfbfd;
}

.bsi-dt__searchwrap {
  position: relative;
  flex: 0 1 320px;
}

.bsi-dt__search {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b6b7b' stroke-width='2'%3E%3Ccircle cx='9' cy='9' r='6'/%3E%3Cpath d='m14 14 4 4'/%3E%3C/svg%3E")
    no-repeat 10px center / 15px;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 14px;
}

.bsi-dt__search:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

.bsi-dt__count {
  font-size: 13px;
  color: var(--hp-muted);
}

.bsi-dt__status {
  margin-left: auto;
  font-size: 13px;
  color: var(--hp-primary);
  font-weight: 600;
}

/* Tambah lives at the far right of the bar, after the status text that takes
   margin-left:auto, so the row order still reads search → info → action. */
.bsi-dt__new {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid var(--hp-primary);
  border-radius: var(--hp-radius-sm);
  background: var(--hp-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.bsi-dt__new:hover {
  background: var(--hp-primary-hover);
  border-color: var(--hp-primary-hover);
}

.bsi-dt__new:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

.bsi-dt__new[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- table --- */

.bsi-dt__scroll {
  overflow-x: auto;
}

.bsi-dt__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.bsi-dt__head {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hp-muted);
  background: #fff;
  border-bottom: 1px solid var(--hp-border);
  white-space: nowrap;
}

.bsi-dt__head--actions {
  text-align: right;
}

.bsi-dt__cell {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hp-border);
  color: var(--hp-text);
  vertical-align: middle;
}

.bsi-dt__cell--name {
  font-weight: 500;
}

.bsi-dt__cell--num,
.bsi-dt__cell--center {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  color: var(--hp-muted);
}

.bsi-dt__cell--actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.bsi-dt__cell--logo {
  width: 1%;
}

/* A menu target is a path, not prose. Monospace plus a slightly smaller size
   makes "/#ourServices" and "/home" scannable, and the em dash placeholder
   keeps the column aligned when a row has no target set. */
.bsi-dt__cell--path {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--hp-muted);
  word-break: break-all;
}

/* Baris diberi jarak yang jelas dan hover menyatu sebagai satu blok -- ini
   yang bikin tabel panjang tetap enak dibaca tanpa zebra yang ramai. */
.bsi-dt__row:hover .bsi-dt__cell {
  background: var(--hp-primary-soft);
}

.bsi-dt__name {
  display: block;
  font-weight: 500;
}

.bsi-dt__sub {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--hp-muted);
}

.bsi-dt__empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--hp-muted);
  font-size: 14px;
}

.bsi-dt__thumb {
  display: block;
  width: 56px;
  height: 40px;
  object-fit: contain;
  padding: 3px;
  border: 1px solid var(--hp-border);
  border-radius: 6px;
  background: #fff;
}

.bsi-dt__order {
  width: 64px;
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--hp-border-strong);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--hp-text);
}

.bsi-dt__order:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

/* --------------------------------------------------------------- switch --- */

.bsi-dt__switch {
  position: relative;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #b6b6c4;
  transition: background 0.18s ease;
}

.bsi-dt__switch[aria-checked='true'] {
  background: var(--hp-success);
}

.bsi-dt__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}

.bsi-dt__switch[aria-checked='true']::after {
  transform: translateX(18px);
}

/* -------------------------------------------------------------- actions --- */

.bsi-dt__act {
  margin-left: 6px;
  padding: 5px 10px;
  border: 1px solid var(--hp-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bsi-dt__act:hover {
  background: var(--hp-canvas);
  border-color: #c4c4d2;
}

.bsi-dt__act--primary {
  background: var(--hp-primary);
  border-color: var(--hp-primary);
  color: #fff;
}

.bsi-dt__act--primary:hover {
  background: var(--hp-primary-hover);
  border-color: var(--hp-primary-hover);
}

.bsi-dt__act--danger {
  color: var(--hp-danger);
  border-color: #f0d3d6;
  background: var(--hp-danger-soft);
}

.bsi-dt__act--danger:hover {
  background: #fbdadd;
}

/* A destructive action disables its own button while the request is in flight,
   otherwise a second click fires a second DELETE against a row that is already
   gone. */
.bsi-dt__act:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.bsi-dt__act--danger:disabled:hover,
.bsi-dt__act--primary:disabled:hover {
  background: inherit;
  border-color: inherit;
}

/* ----------------------------------------------------------------- foot --- */

.bsi-dt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: #fbfbfd;
  border-top: 1px solid var(--hp-border);
}

.bsi-dt__summary {
  font-size: 13px;
  color: var(--hp-muted);
}

.bsi-dt__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bsi-dt__page {
  min-width: 32px;
  padding: 5px 9px;
  border: 1px solid var(--hp-border-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bsi-dt__page:hover:not(:disabled) {
  background: var(--hp-canvas);
  border-color: #c4c4d2;
}

.bsi-dt__page.is-current {
  background: var(--hp-primary);
  border-color: var(--hp-primary);
  color: #fff;
  font-weight: 600;
}

.bsi-dt__page:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------- states --- */

/* Elemen React yang disembunyikan selagi tabel yang mengelola data.
   Wajib top-level. Aturan ini pernah tersangkut di dalam
   `@media (prefers-reduced-motion: reduce)` karena blok media itu tidak pernah
   ditutup, jadi `hide()` diam-diam tidak melakukan apa-apa untuk pengguna
   biasa — daftar React tampil berdampingan dengan tabel. */
.bsi-dt__hidden {
  display: none !important;
}

/* ------------------------------------------------------------- loading --- */

/* The branded wait state. It covers the viewport rather than the table, because
   the operations it stands in for -- a save that ends in a page reload, a first
   load of a tab -- are not scoped to the table. The scrim is translucent and the
   page keeps its scroll position underneath, so it reads as "working on it" and
   not as "you have left". */
.bsi-load {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(247, 247, 250, 0.78);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.bsi-load[hidden] {
  display: none;
}

/* Set on <html> while the indicator is up. The overlay covers the viewport on
   its own, but without this the page still scrolls underneath a translucent
   scrim, which looks like the content sliding while it is supposedly busy. */
html.bsi-load-on,
html.bsi-load-on body {
  overflow: hidden;
}

.bsi-load__card {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 14px;
  padding: 26px 34px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: 0 18px 44px rgba(10, 10, 20, 0.16);
}

/* The logo is the one asset already cached by the page preload, so raising this
   costs no request. */
.bsi-load__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  animation: bsi-load-pulse 1.1s ease-in-out infinite;
}

.bsi-load__text {
  margin: 0;
  color: var(--hp-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@keyframes bsi-load-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bsi-load__logo {
    animation: none;
    opacity: 0.7;
  }
}

@media (max-width: 720px) {
  .bsi-dt__bar {
    flex-wrap: wrap;
  }

  .bsi-dt__searchwrap {
    flex: 1 1 100%;
  }

  .bsi-dt__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .bsi-dt__pages {
    justify-content: flex-end;
  }
}

/* ------------------------------------------------------------- nav / shell --- */

/* Below the shell's own breakpoint the nav is a full-width block: eleven buttons
   stack to about 610px, which on an 800px phone leaves the content the admin came
   for entirely below the fold. So the groups collapse behind a hamburger, and the
   sidebar comes back at 901px and up.

   900px is not a round number to pick -- it is the width the shell's existing
   `@media (max-width: 900px)` block above switches `.bsi-hp` from two grid
   columns to one. Using Tailwind's 768px `md:` here instead, which is what the
   nav's own class names suggest, left a 132px band between 768 and 900 where the
   nav was stacked *and* the hamburger was hidden: a 610px menu with no way to
   collapse it. The two have to move together or not at all. */
@media (max-width: 900px) {
  .bsi-hp nav .bsi-nav__group {
    display: none;
  }

  .bsi-hp nav.is-open .bsi-nav__group {
    display: block;
  }

  .bsi-nav__toggle {
    display: block;
  }
}

@media (min-width: 901px) {
  .bsi-nav__toggle {
    display: none;
  }
}

.bsi-nav__toggle {
  margin-bottom: 12px;
}

.bsi-nav__burger {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  cursor: pointer;
}

.bsi-nav__burger:hover {
  background: var(--hp-canvas);
}

.bsi-nav__burger:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

/* Three rules rather than three elements with a transform between states: the
   bars need to hold their width while the button is pressed, and an element
   that is removed from the layout on open is a button that changes size under
   the finger. */
.bsi-nav__bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--hp-text);
}

/* --------------------------------------------------------------- password --- */

/* The two header buttons are wrapped so that justify-between on the header row
   still pushes them to the right edge. The buttons themselves are styled by
   the generic ".bsi-hp > header button" rule above, which outranks anything
   scoped to a single class, so this block deliberately adds no button skin. */
.bsi-pw__trigger-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Dialog. Appended to <body>, so the token block above lists .bsi-pw. */
.bsi-pw {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 14, 0.55);
  overflow-y: auto;
}

.bsi-pw[hidden] {
  display: none;
}

body.bsi-pw-open {
  overflow: hidden;
}

.bsi-pw__card {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: 0 24px 60px rgba(10, 10, 20, 0.28);
}

.bsi-pw__head {
  position: relative;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--hp-border);
}

.bsi-pw__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--hp-text);
}

.bsi-pw__sub {
  margin: 6px 0 0;
  padding-right: 28px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--hp-muted);
}

.bsi-pw__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bsi-pw__close:hover {
  background: var(--hp-canvas);
  color: var(--hp-text);
}

.bsi-pw__form {
  padding: 18px 20px 20px;
}

.bsi-pw__field + .bsi-pw__field {
  margin-top: 14px;
}

.bsi-pw__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hp-text);
}

.bsi-pw__control {
  position: relative;
  display: flex;
  align-items: center;
}

.bsi-pw__input {
  width: 100%;
  padding: 10px 78px 10px 12px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  /* 16px keeps iOS from zooming the page when the field is focused. */
  font-size: 16px;
  line-height: 1.4;
}

.bsi-pw__input:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

.bsi-pw__input.is-invalid {
  border-color: var(--hp-danger);
}

.bsi-pw__input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(217, 45, 60, 0.2);
}

.bsi-pw__input:disabled {
  background: var(--hp-canvas);
  color: var(--hp-muted);
}

.bsi-pw__eye {
  position: absolute;
  right: 6px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--hp-muted);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.bsi-pw__eye:hover {
  background: var(--hp-canvas);
  color: var(--hp-text);
}

.bsi-pw__error {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hp-danger);
}

.bsi-pw__error[hidden] {
  display: none;
}

.bsi-pw__meterwrap {
  margin-top: 16px;
}

.bsi-pw__meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.bsi-pw__seg {
  height: 4px;
  border-radius: 999px;
  background: var(--hp-border);
  transition: background 0.15s ease;
}

.bsi-pw__meter[data-score="1"] .bsi-pw__seg:nth-child(-n + 1) {
  background: var(--hp-danger);
}

.bsi-pw__meter[data-score="2"] .bsi-pw__seg:nth-child(-n + 2) {
  background: #e8a33d;
}

.bsi-pw__meter[data-score="3"] .bsi-pw__seg:nth-child(-n + 3),
.bsi-pw__meter[data-score="4"] .bsi-pw__seg:nth-child(-n + 4) {
  background: var(--hp-success);
}

.bsi-pw__meterlabel {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hp-muted);
}

.bsi-pw__status {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: var(--hp-radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.bsi-pw__status[hidden] {
  display: none;
}

.bsi-pw__status.is-error {
  background: var(--hp-danger-soft);
  color: var(--hp-danger);
}

.bsi-pw__status.is-ok {
  background: var(--hp-success-soft);
  color: var(--hp-success);
}

.bsi-pw__status.is-info {
  background: var(--hp-primary-soft);
  color: var(--hp-primary);
}

.bsi-pw__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.bsi-pw__btn {
  padding: 9px 16px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.bsi-pw__btn:hover {
  background: var(--hp-canvas);
}

.bsi-pw__btn--primary {
  border-color: var(--hp-primary);
  background: var(--hp-primary);
  color: #fff;
}

.bsi-pw__btn--primary:hover {
  background: var(--hp-primary-hover);
}

.bsi-pw__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .bsi-pw__actions {
    flex-direction: column-reverse;
  }

  .bsi-pw__btn {
    width: 100%;
  }
}

/* ------------------------------------------------- sections: order + toggle --- */

/* The slug is shown under the name because the name is editable while the slug
   is the key every write uses; seeing both stops them being confused. */
.bsi-dt__slug {
  display: block;
  font-size: 11px;
  color: var(--hp-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bsi-dt__nav {
  display: inline-flex;
  gap: 4px;
}

.bsi-dt__navbtn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.bsi-dt__navbtn:hover:not(:disabled) {
  background: var(--hp-primary-soft);
  border-color: var(--hp-primary);
  color: var(--hp-primary);
}

.bsi-dt__navbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.bsi-dt__navbtn:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 1px;
}

/* Urutan di Services/Portfolio memakai wrapper yang sama, plus angka
   sort_order-nya. Angkanya sengaja kecil dan redup: posisi baris adalah
   kontrol yang utama, angkanya hanya informasi. */
.bsi-dt__navwrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bsi-dt__navval {
  min-width: 18px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--hp-muted);
  text-align: right;
}

/* A labelled button rather than a switch: the state is the whole message here,
   so it is written out instead of inferred from a slider position. */
.bsi-dt__toggle {
  min-width: 84px;
  padding: 6px 12px;
  border: 1px solid var(--hp-border-strong);
  border-radius: 999px;
  background: var(--hp-canvas);
  color: var(--hp-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.bsi-dt__toggle.is-on {
  border-color: var(--hp-success);
  background: var(--hp-success-soft);
  color: var(--hp-success);
}

.bsi-dt__toggle:hover {
  border-color: var(--hp-primary);
}

.bsi-dt__toggle:focus-visible {
  outline: 2px solid var(--hp-primary);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- section modal --- */

.bsi-dt-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 10, 14, 0.55);
  overflow-y: auto;
}

.bsi-dt-modal[hidden] {
  display: none;
}

/* The backdrop keeps 16px on every side so the card never touches the screen
   edge. Below 480px that is 32px of 360 spent on air, and the media table is
   the one thing in here that already needs the width -- its five columns scroll
   horizontally rather than squash. Half the margin buys back 16px of table. */
@media (max-width: 480px) {
  .bsi-dt-modal {
    padding: 8px;
  }

  .bsi-dt-modal__form {
    padding: 14px 14px 16px;
  }
}

body.bsi-dt-modal-open {
  overflow: hidden;
}

.bsi-dt-modal__card {
  width: 100%;
  /* The two record dialogs -- a service and a portfolio folder -- carry nine
     fields each, and at 440px every line of a description was wrapped to
     roughly thirty characters. The width is what makes the two-column grid
     below possible at all; without it there is nothing to spend the extra
     space on and the fields just get longer. */
  max-width: 760px;
  /* Form layanan punya sembilan field; tanpa batas tinggi, card akan lebih
     tinggi dari viewport dan tombol Simpan berada di luar layar. */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius);
  background: var(--hp-card);
  box-shadow: 0 24px 60px rgba(10, 10, 20, 0.28);
}

.bsi-dt-modal__head {
  position: relative;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--hp-border);
}

.bsi-dt-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--hp-text);
}

.bsi-dt-modal__sub {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hp-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.bsi-dt-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hp-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bsi-dt-modal__close:hover {
  background: var(--hp-canvas);
  color: var(--hp-text);
}

.bsi-dt-modal__form {
  padding: 18px 20px 20px;
}

.bsi-dt-modal__field + .bsi-dt-modal__field {
  margin-top: 14px;
}

/* Two columns once the card is wide enough for them to be readable.
 *
 * The fields are already declared in pairs -- the two languages of a title, of
 * a description, then media and its type -- so the grid lands each pair side by
 * side without a single field having to know it is paired. Anything that is not
 * a pair spans the full width, which is what the media table below the fields
 * needs. */
@media (min-width: 680px) {
  .bsi-dt-modal__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
  }

  .bsi-dt-modal__field,
  .bsi-dt-modal__field + .bsi-dt-modal__field {
    margin-top: 0;
  }

  .bsi-dt-modal__media,
  .bsi-dt-modal__status,
  .bsi-dt-modal__actions {
    grid-column: 1 / -1;
  }
}

.bsi-dt-modal__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hp-text);
}

.bsi-dt-modal__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.bsi-dt-modal__input:focus {
  outline: none;
  border-color: var(--hp-primary);
  box-shadow: 0 0 0 3px var(--hp-ring);
}

.bsi-dt-modal__input.is-invalid {
  border-color: var(--hp-danger);
}

/* Deskripsi dipakai di dua bahasa, jadi form butuh area teks yang tidak
  setinggi satu baris. `min-height` cukup: field tetap bisa tumbuh mengikuti
   isinya dan tidak memaksa halaman scroll. */
.bsi-dt-modal__input--area {
  min-height: 76px;
  resize: vertical;
}

/* `<select>` di dalam modal: panah bawaan browser menutupi teks pada field
   yang sudah punya padding dan font besar, jadi ruang kanan diberi. */
select.bsi-dt-modal__input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--hp-muted) 50%),
    linear-gradient(135deg, var(--hp-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px),
    calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.bsi-dt-modal__err {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--hp-danger);
}

.bsi-dt-modal__err[hidden] {
  display: none;
}

/* Petunjuk di bawah field: dipakai untuk hal yang tidak boleh ditebak, misalnya
   "mengubah folder membuat ulang slug". Bukan error, jadi warnanya netral. */
.bsi-dt-modal__help {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hp-muted);
}

/* Checkbox tidak memakai Layout row yang sama dengan input teks, jadi checkbox
   dilebarkan penuh agar labelnya sejajar dengan field lain. */
.bsi-dt-modal__check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  color: var(--hp-text);
  cursor: pointer;
}

.bsi-dt-modal__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--hp-primary);
  cursor: pointer;
}

.bsi-dt-modal__status {
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: var(--hp-radius-sm);
  font-size: 13px;
  line-height: 1.5;
}

.bsi-dt-modal__status[hidden] {
  display: none;
}

.bsi-dt-modal__status.is-error {
  background: var(--hp-danger-soft);
  color: var(--hp-danger);
}

.bsi-dt-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

/* The extra-files manager inside the edit dialog. It saves each change as it
   happens rather than with the form, so it reads as its own block below the
   fields instead of looking like more inputs. */
.bsi-dt-modal__media:not(:empty) {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hp-border);
}

.bsi-dt-modal__media .bsi-file__gallery {
  margin-top: 0;
}

.bsi-dt-modal__btn {
  padding: 9px 16px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.bsi-dt-modal__btn:hover {
  background: var(--hp-canvas);
}

.bsi-dt-modal__btn--primary {
  border-color: var(--hp-primary);
  background: var(--hp-primary);
  color: #fff;
}

.bsi-dt-modal__btn--primary:hover {
  background: var(--hp-primary-hover);
}

.bsi-dt-modal__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ----------------------------------------------------------- file manager --- */

/* The upload button sits next to a path input React already owns, so the host
   becomes the flex row. The input keeps full width: an editor can still paste a
   path by hand, the button only fills the field in when a file is chosen.

   Everything React already had in this box -- the field's label, and the hint
   paragraph under Video URL -- would otherwise be pulled in as flex items and
   squashed beside the input. They are given the full row back, and `order`
   pins the button directly after the input so the row still reads
   "label / input + Unggah / hint". */
.bsi-file__host {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.bsi-file__host > label {
  order: 0;
  flex: 0 0 100%;
  margin-bottom: 0 !important;
}

.bsi-file__host > input:not([type="file"]) {
  order: 1;
  flex: 1 1 260px;
  min-width: 0;
}

.bsi-file__host > .bsi-file__btn {
  order: 2;
  flex: 0 0 auto;
}

.bsi-file__host > *:not(input):not(.bsi-file__btn) {
  order: 3;
  flex: 0 0 100%;
}

.bsi-file__input[hidden] {
  display: none;
}

/* Used as a <button> for the single uploader and as the <label> that wraps the
   hidden file input in the gallery picker, so one set of rules covers both. */
.bsi-file__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 1px solid var(--hp-border-strong);
  border-radius: var(--hp-radius-sm);
  background: #fff;
  color: var(--hp-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.bsi-file__btn:hover {
  background: var(--hp-canvas);
}

/* The gallery picker dims while a batch upload is running; a click mid-upload
   would otherwise start a second one. */
.bsi-file__btn.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.bsi-file__btn--sm {
  padding: 6px 12px;
  font-size: 13px;
}

.bsi-file__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* The ceiling and the accepted extensions, stated before a file is picked. */
.bsi-file__hint {
  flex: 1 0 100%;
  order: 3;
  margin: 0;
  color: var(--hp-muted);
  font-size: 12px;
  line-height: 1.5;
}

.bsi-file__bar {
  flex: 1 0 100%;
  order: 4;
  height: 6px;
  margin: 2px 0 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hp-border);
}

.bsi-file__bar[hidden] {
  display: none;
}

.bsi-file__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--hp-primary);
  transition: width 140ms linear;
}

/* Length not computable, so no percentage is known. A sweeping bar says
   "working" honestly; a frozen 0% would read as stalled. */
.bsi-file__bar.is-indeterminate .bsi-file__fill {
  width: 35%;
  animation: bsi-file-sweep 1.1s ease-in-out infinite;
}

@keyframes bsi-file-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(285%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bsi-file__fill {
    transition: none;
  }

  .bsi-file__bar.is-indeterminate .bsi-file__fill {
    animation: none;
    width: 100%;
    opacity: 0.5;
  }
}

/* Spans the full row under the input and button, so a long validation message
   is never squeezed into the remaining space beside them. */
.bsi-file__note {
  flex: 1 0 100%;
  order: 5;
  margin: 2px 0 0;
  padding: 8px 12px;
  border-radius: var(--hp-radius-sm);
  font-size: 13px;
  line-height: 1.5;
  word-break: break-word;
}

.bsi-file__note[hidden] {
  display: none;
}

.bsi-file__note.is-info {
  background: var(--hp-primary-soft);
  color: var(--hp-primary);
}

.bsi-file__note.is-ok {
  background: var(--hp-success-soft);
  color: var(--hp-success);
}

.bsi-file__note.is-error {
  background: var(--hp-danger-soft);
  color: var(--hp-danger);
}

/* The extra-files manager, shown in the edit dialog for a service or a
   portfolio folder.

   It is a table now, so it is trimmed to the table's own edges: the padding and
   the canvas tint made sense around a list of cards, and left the table looking
   like something set inside something else. Overflow is clipped so the footer
   and the last row's bottom rule follow the rounded corners. */
.bsi-file__gallery {
  margin: 16px 0 0;
  overflow: hidden;
  border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm);
  background: #fff;
}

.bsi-file__galleryhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--hp-border);
}

/* The progress and error line sits between the header and the table. It keeps
   the table's own left edge instead of being inset again by the card padding. */
.bsi-file__gallery .bsi-file__note {
  margin: 0;
  border-radius: 0;
}

.bsi-file__gallerytitle {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

/* The thumbnail link is the one piece of the old card list that survives: it
   carries the crop and the file-type tile, and the table has no rule of its own
   for either. */
.bsi-file__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--hp-canvas);
  color: var(--hp-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.bsi-file__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Inside the panel the thumbnail is a row affordance, not the subject. The 56px
   card size makes each table row 78px tall, which is most of a dialog's visible
   height spent on four files; 40px keeps the same crop at row height. */
.bsi-file__gallery .bsi-file__thumb {
  flex-basis: 40px;
  width: 40px;
  height: 40px;
}

/* A video or a pdf has no preview, so the tile carries the extension instead.
   It gets a border to read as a placeholder rather than as a picture that
   failed to load. */
.bsi-file__thumb--file {
  border: 1px dashed var(--hp-border-strong);
  font-size: 9px;
}
/* bsi-hp:end */
