/*! tailwindcss v4.3.3 | 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)))){*,:before,:after,::backdrop{--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-content:"";--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--font-sans:"Inter", ui-sans-serif, system-ui, "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono:ui-monospace, "Cascadia Mono", "Consolas", monospace;--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-yellow-300:oklch(90.5% .182 98.111);--color-emerald-300:oklch(84.5% .143 164.978);--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-sky-400:oklch(74.6% .16 232.661);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-violet-400:oklch(70.2% .183 293.541);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-md:28rem;--container-3xl:48rem;--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-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-2xl:1rem;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-xl:24px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{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}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{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:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-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{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-x-0{inset-inline:0}.-top-2\.5{top:calc(var(--spacing) * -2.5)}.top-0{top:0}.top-20{top:calc(var(--spacing) * 20)}.top-\[7\%\]{top:7%}.top-\[88px\]{top:88px}.-right-2\.5{right:calc(var(--spacing) * -2.5)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-2\.5{bottom:calc(var(--spacing) * -2.5)}.-left-2\.5{left:calc(var(--spacing) * -2.5)}.z-40{z-index:40}.z-\[9998\]{z-index:9998}.z-\[9999\]{z-index:9999}.order-3{order:3}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-3{margin-inline:calc(var(--spacing) * 3)}.mx-auto{margin-inline:auto}.my-2{margin-block:calc(var(--spacing) * 2)}.my-3{margin-block:calc(var(--spacing) * 3)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-flex{display:inline-flex}.aspect-\[9\/16\]{aspect-ratio:9/16}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-10{height:calc(var(--spacing) * 10)}.h-11{height:calc(var(--spacing) * 11)}.h-56{height:calc(var(--spacing) * 56)}.h-fit{height:fit-content}.h-full{height:100%}.max-h-\[92dvh\]{max-height:92dvh}.\!min-h-9{min-height:calc(var(--spacing) * 9)!important}.min-h-8{min-height:calc(var(--spacing) * 8)}.min-h-11{min-height:calc(var(--spacing) * 11)}.min-h-12{min-height:calc(var(--spacing) * 12)}.min-h-14{min-height:calc(var(--spacing) * 14)}.min-h-screen{min-height:100vh}.w-1\/3{width:33.3333%}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-11{width:calc(var(--spacing) * 11)}.w-60{width:calc(var(--spacing) * 60)}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl)}.max-w-\[260px\]{max-width:260px}.max-w-\[1280px\]{max-width:1280px}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.animate-pulse{animation:var(--animate-pulse)}.cursor-move{cursor:move}.cursor-nesw-resize{cursor:nesw-resize}.cursor-nwse-resize{cursor:nwse-resize}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.\[scrollbar-width\:none\]{scrollbar-width:none}.list-none{list-style-type:none}.grid-cols-2{grid-template-columns:repeat(2,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}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-5{gap:calc(var(--spacing) * 5)}.gap-6{gap:calc(var(--spacing) * 6)}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.rounded-t-\[24px\]{border-top-left-radius:24px;border-top-right-radius:24px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.\!border-emerald-500\/40{border-color:#00bb7f66!important}@supports (color:color-mix(in lab, red, red)){.\!border-emerald-500\/40{border-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)!important}}.border-\[\#09090b\]{border-color:#09090b}.border-amber-500\/25{border-color:#f99c0040}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/25{border-color:color-mix(in oklab, var(--color-amber-500) 25%, transparent)}}.border-blue-500\/25{border-color:#3080ff40}@supports (color:color-mix(in lab, red, red)){.border-blue-500\/25{border-color:color-mix(in oklab, var(--color-blue-500) 25%, transparent)}}.border-emerald-400{border-color:var(--color-emerald-400)}.border-emerald-500\/20{border-color:#00bb7f33}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/20{border-color:color-mix(in oklab, var(--color-emerald-500) 20%, transparent)}}.border-emerald-500\/30{border-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.border-emerald-500\/30{border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.border-red-500\/20{border-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.border-red-500\/20{border-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.border-white{border-color:var(--color-white)}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.border-zinc-800{border-color:var(--color-zinc-800)}.border-zinc-800\/60{border-color:#27272a99}@supports (color:color-mix(in lab, red, red)){.border-zinc-800\/60{border-color:color-mix(in oklab, var(--color-zinc-800) 60%, transparent)}}.border-zinc-800\/70{border-color:#27272ab3}@supports (color:color-mix(in lab, red, red)){.border-zinc-800\/70{border-color:color-mix(in oklab, var(--color-zinc-800) 70%, transparent)}}.\!bg-emerald-500\/5{background-color:#00bb7f0d!important}@supports (color:color-mix(in lab, red, red)){.\!bg-emerald-500\/5{background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)!important}}.bg-\[\#0f201d\]{background-color:#0f201d}.bg-\[\#09090b\]{background-color:#09090b}.bg-\[\#09090b\]\/80{background-color:oklab(14.0765% .00119585 -.00421971/.8)}.bg-\[\#18181b\]{background-color:#18181b}.bg-\[\#26191c\]{background-color:#26191c}.bg-\[\#101014\]{background-color:#101014}.bg-amber-400{background-color:var(--color-amber-400)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}.bg-black\/70{background-color:#000000b3}@supports (color:color-mix(in lab, red, red)){.bg-black\/70{background-color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.bg-blue-500\/10{background-color:#3080ff1a}@supports (color:color-mix(in lab, red, red)){.bg-blue-500\/10{background-color:color-mix(in oklab, var(--color-blue-500) 10%, transparent)}}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-emerald-400\/10{background-color:#00d2941a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/10{background-color:color-mix(in oklab, var(--color-emerald-400) 10%, transparent)}}.bg-emerald-400\/15{background-color:#00d29426}@supports (color:color-mix(in lab, red, red)){.bg-emerald-400\/15{background-color:color-mix(in oklab, var(--color-emerald-400) 15%, transparent)}}.bg-emerald-500{background-color:var(--color-emerald-500)}.bg-emerald-500\/10{background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/10{background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-zinc-700{background-color:var(--color-zinc-700)}.bg-zinc-800{background-color:var(--color-zinc-800)}.bg-zinc-900{background-color:var(--color-zinc-900)}.bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-zinc-800{--tw-gradient-from:var(--color-zinc-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-zinc-900{--tw-gradient-to:var(--color-zinc-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))}.object-cover{object-fit:cover}.\!p-4{padding:calc(var(--spacing) * 4)!important}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-10{padding:calc(var(--spacing) * 10)}.\!px-2{padding-inline:calc(var(--spacing) * 2)!important}.\!px-3{padding-inline:calc(var(--spacing) * 3)!important}.px-1{padding-inline:var(--spacing)}.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)}.py-1{padding-block:var(--spacing)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-6{padding-block:calc(var(--spacing) * 6)}.pt-0{padding-top:0}.pb-1{padding-bottom:var(--spacing)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.pb-\[max\(1\.25rem\,env\(safe-area-inset-bottom\)\)\]{padding-bottom:max(1.25rem, env(safe-area-inset-bottom))}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.\!text-xs{font-size:var(--text-xs)!important;line-height:var(--tw-leading,var(--text-xs--line-height))!important}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--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-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.break-words{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#09090b\]{color:#09090b}.text-amber-400{color:var(--color-amber-400)}.text-black{color:var(--color-black)}.text-blue-400{color:var(--color-blue-400)}.text-emerald-300{color:var(--color-emerald-300)}.text-emerald-400{color:var(--color-emerald-400)}.text-red-400{color:var(--color-red-400)}.text-sky-400{color:var(--color-sky-400)}.text-violet-400{color:var(--color-violet-400)}.text-white{color:var(--color-white)}.text-yellow-300{color:var(--color-yellow-300)}.text-zinc-200{color:var(--color-zinc-200)}.text-zinc-300{color:var(--color-zinc-300)}.text-zinc-400{color:var(--color-zinc-400)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-600{color:var(--color-zinc-600)}.uppercase{text-transform:uppercase}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-zinc-500::placeholder{color:var(--color-zinc-500)}.accent-emerald-500{accent-color:var(--color-emerald-500)}.shadow-\[0_0_0_9999px_rgba\(0\,0\,0\,0\.55\)\]{--tw-shadow:0 0 0 9999px var(--tw-shadow-color,#0000008c);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);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);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-xl{--tw-backdrop-blur:blur(var(--blur-xl));-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-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-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-500{--tw-duration:.5s;transition-duration:.5s}.select-none{-webkit-user-select:none;user-select:none}.group-open\:rotate-180:is(:where(.group):is([open],:popover-open,:open) *){rotate:180deg}.peer-checked\:bg-emerald-500:is(:where(.peer):checked~*){background-color:var(--color-emerald-500)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:top-0\.5:after{content:var(--tw-content);top:calc(var(--spacing) * .5)}.after\:left-0\.5:after{content:var(--tw-content);left:calc(var(--spacing) * .5)}.after\:h-5:after{content:var(--tw-content);height:calc(var(--spacing) * 5)}.after\:w-5:after{content:var(--tw-content);width:calc(var(--spacing) * 5)}.after\:rounded-full:after{content:var(--tw-content);border-radius:3.40282e38px}.after\:bg-white:after{content:var(--tw-content);background-color:var(--color-white)}.after\:transition-transform:after{content:var(--tw-content);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))}.peer-checked\:after\:translate-x-5:is(:where(.peer):checked~*):after{content:var(--tw-content);--tw-translate-x:calc(var(--spacing) * 5);translate:var(--tw-translate-x) var(--tw-translate-y)}@media (hover:hover){.hover\:bg-\[\#16161a\]:hover{background-color:#16161a}.hover\:bg-\[\#18181b\]:hover{background-color:#18181b}.hover\:bg-\[\#202024\]:hover{background-color:#202024}.hover\:bg-emerald-400:hover{background-color:var(--color-emerald-400)}.hover\:bg-emerald-500\/15:hover{background-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.hover\:bg-emerald-500\/15:hover{background-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}}.focus\:border-emerald-500\/40:focus{border-color:#00bb7f66}@supports (color:color-mix(in lab, red, red)){.focus\:border-emerald-500\/40:focus{border-color:color-mix(in oklab, var(--color-emerald-500) 40%, transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-50:disabled{opacity:.5}.has-\[\:checked\]\:border-emerald-500\/30:has(:checked){border-color:#00bb7f4d}@supports (color:color-mix(in lab, red, red)){.has-\[\:checked\]\:border-emerald-500\/30:has(:checked){border-color:color-mix(in oklab, var(--color-emerald-500) 30%, transparent)}}.has-\[\:checked\]\:bg-emerald-500\/5:has(:checked){background-color:#00bb7f0d}@supports (color:color-mix(in lab, red, red)){.has-\[\:checked\]\:bg-emerald-500\/5:has(:checked){background-color:color-mix(in oklab, var(--color-emerald-500) 5%, transparent)}}.has-\[\:checked\]\:bg-emerald-500\/10:has(:checked){background-color:#00bb7f1a}@supports (color:color-mix(in lab, red, red)){.has-\[\:checked\]\:bg-emerald-500\/10:has(:checked){background-color:color-mix(in oklab, var(--color-emerald-500) 10%, transparent)}}.has-\[\:checked\]\:text-emerald-400:has(:checked){color:var(--color-emerald-400)}@media (min-width:40rem){.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:max-w-md{max-width:var(--container-md)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:rounded-\[24px\]{border-radius:24px}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}@media (min-width:48rem){.md\:order-none{order:0}.md\:ml-4{margin-left:calc(var(--spacing) * 4)}.md\:flex{display:flex}.md\:hidden{display:none}.md\:w-auto{width:auto}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\,260px\)_1fr\]{grid-template-columns:minmax(0,260px) 1fr}.md\:p-5{padding:calc(var(--spacing) * 5)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:grid-cols-\[minmax\(0\,300px\)_1fr\]{grid-template-columns:minmax(0,300px) 1fr}}@media (min-width:80rem){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar{display:none}}*{scrollbar-width:thin;scrollbar-color:#3f3f46 transparent}html{color-scheme:dark}body{-webkit-font-smoothing:antialiased}[hidden]{display:none!important}button{cursor:pointer}button:disabled,[data-run][disabled]{cursor:not-allowed}:focus-visible{outline-offset:2px;outline:2px solid #f59e0b99}input[type=range]{appearance:none;background:#27272a;border-radius:9999px;width:100%;height:8px}input[type=range]::-webkit-slider-thumb{appearance:none;cursor:grab;background:#f59e0b;border:3px solid #0e0e11;border-radius:9999px;width:22px;height:22px;box-shadow:0 0 0 1px #f59e0b}input[type=range]::-moz-range-thumb{cursor:grab;background:#f59e0b;border:3px solid #0e0e11;border-radius:9999px;width:18px;height:18px}.fundo-brilho{background:radial-gradient(900px 380px at 85% -10%,#f59e0b14,#0000 60%),radial-gradient(700px 300px at -10% 0,#f59e0b0a,#0000 60%)}@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-content{syntax:"*";inherits:false;initial-value:""}@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}@keyframes pulse{50%{opacity:.5}}

/* --- Estúdio Titan: Tokens da Workstation & Utilitários de Alto Padrão --- */
:root {
  --studio-obsidian: #0c0d12;
  --studio-surface: #12141a;
  --studio-surface-subtle: #161821;
  --studio-border: rgba(255, 255, 255, 0.08);
  --studio-amber: #f59e0b;
  --studio-amber-hover: #d97706;
}

html {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: auto;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: visible;
  overscroll-behavior-y: auto;
}

body:has(#app:not([hidden])) {
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

/* Permite seleção de texto apenas onde o usuário precisa copiar, ler dados técnicos ou editar */
input, textarea, [contenteditable="true"], pre, code, .console-log-box, .terminal-log, .selectable-text, .mono-data {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Impede o arrasto fantasma nativo de imagens e ícones típico de navegadores */
img, svg {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Conteúdo longo (caminhos de pasta) não pode sangrar da caixa e criar rolagem lateral na página */
input { overflow: hidden; text-overflow: ellipsis; }
button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

code, kbd, samp, pre, .font-mono, .code-text, .mono-data {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace !important;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }

/* Timeline Scrubber de Estúdio */
.timeline-scrubber {
  appearance: none;
  background: #22252b;
  border-radius: 9999px;
  width: 100%;
  height: 6px;
  outline: none;
  transition: background 150ms ease;
}
.timeline-scrubber:hover {
  background: #2f343d;
}
.timeline-scrubber::-webkit-slider-thumb {
  appearance: none;
  cursor: grab;
  background: #f59e0b;
  border: 2px solid #0c0d12;
  border-radius: 9999px;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 1px #f59e0b, 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: transform 100ms ease;
}
.timeline-scrubber::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.2);
}
.timeline-scrubber::-moz-range-thumb {
  cursor: grab;
  background: #f59e0b;
  border: 2px solid #0c0d12;
  border-radius: 9999px;
  width: 16px;
  height: 16px;
  box-shadow: 0 0 0 1px #f59e0b;
}
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4); }
.border-t-white\/\[0\.12\],
.border-t-white\/\[0\.07\] { border-top-color: inherit; }
.shadow-\[0_2px_10px_rgba\(245\,158\,11\,0\.2\)\] { box-shadow: 0 2px 10px rgba(245, 158, 11, 0.2); }
.shadow-\[0_0_12px_rgba\(245\,158\,11\,0\.15\)\] { box-shadow: 0 0 12px rgba(245, 158, 11, 0.15); }
.shadow-\[inset_4px_0_12px_rgba\(245\,158\,11\,0\.08\)\] { box-shadow: inset 4px 0 12px rgba(245, 158, 11, 0.08); }
.focus\:border-amber-500\/60:focus { border-color: rgba(245, 158, 11, 0.6); }
.focus\:ring-1:focus { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(245, 158, 11, 0.3)); }
.focus\:ring-amber-500\/30:focus { --tw-ring-color: rgba(245, 158, 11, 0.3); }
.active\:scale-\[0\.985\]:active { transform: scale(0.985); }
.active\:scale-\[0\.98\]:active { transform: scale(0.98); }
.active\:scale-95:active { transform: scale(0.95); }

@media (hover: hover) {
  .hover\:translate-x-1:hover { transform: translateX(0.25rem); }
  .hover\:shadow-\[0_4px_20px_rgba\(245\,158\,11\,0\.3\)\]:hover { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3); }
  .hover\:bg-\[\#202028\]:hover { background-color: #202028; }
  .hover\:bg-\[\#1a1a20\]:hover { background-color: #1a1a20; }
  .hover\:border-zinc-700\/80:hover { border-color: rgba(63, 63, 70, 0.8); }
  .hover\:border-zinc-700:hover { border-color: rgb(63 63 70); }
  .hover\:border-amber-500\/40:hover { border-color: rgba(245, 158, 11, 0.4); }
  .hover\:text-zinc-100:hover { color: rgb(244 244 245); }
}

/* --- Switches Liga/Desliga & Checkboxes --- */
.switch-card {
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(63, 63, 70, 0.75) !important;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 100ms ease;
}
.switch-card:hover {
  background-color: #191922;
  border-color: rgba(113, 113, 122, 0.9) !important;
}
.switch-card:hover .switch-title {
  color: #ffffff;
}
.switch-card:hover .switch-desc {
  color: #a1a1aa;
}
.switch-card:hover .switch-icon {
  color: #f59e0b;
}
.switch-card:active {
  transform: scale(0.99);
}
.switch-card:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background-color: rgba(245, 158, 11, 0.05);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
}
.switch-card:has(input:checked) .switch-icon {
  color: #fbbf24;
}
.switch-card:hover:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.75) !important;
  background-color: rgba(245, 158, 11, 0.09);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.12);
}

.switch-pill {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 9999px;
  background-color: #3f3f46;
  margin-left: auto;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-card:hover .switch-pill {
  background-color: #52525b;
}
.switch-pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-card:hover .switch-pill::after {
  transform: scale(1.05);
}
.switch-card:has(input:checked) .switch-pill {
  background-color: #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
.switch-card:has(input:checked) .switch-pill::after {
  transform: translateX(16px);
}
.switch-card:hover:has(input:checked) .switch-pill::after {
  transform: translateX(16px) scale(1.05);
}

.checkbox-card {
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(63, 63, 70, 0.75) !important;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 100ms ease;
}
.checkbox-card:hover {
  background-color: #1a1a22;
  border-color: rgba(113, 113, 122, 0.9) !important;
  color: #ffffff;
}
.checkbox-card:active {
  transform: scale(0.97);
}
.checkbox-card:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.55) !important;
  background-color: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}
.checkbox-card:hover:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.75) !important;
  background-color: rgba(245, 158, 11, 0.15);
}
.checkbox-card input[type="checkbox"] {
  accent-color: #f59e0b;
  cursor: pointer;
}

/* Fallback utilities Tailwind Âmbar */
.peer-checked\:bg-amber-500:is(:where(.peer):checked~*) { background-color: #f59e0b; }
.peer-checked\:text-amber-400:is(:where(.peer):checked~*) { color: #fbbf24; }
.has-\[\:checked\]\:border-amber-500\/40:has(:checked) { border-color: rgba(245, 158, 11, 0.4); }
.has-\[\:checked\]\:border-amber-500\/30:has(:checked) { border-color: rgba(245, 158, 11, 0.3); }
.has-\[\:checked\]\:bg-amber-500\/\[0\.06\]:has(:checked) { background-color: rgba(245, 158, 11, 0.06); }
.has-\[\:checked\]\:bg-amber-500\/5:has(:checked) { background-color: rgba(245, 158, 11, 0.05); }
.has-\[\:checked\]\:bg-amber-500\/10:has(:checked) { background-color: rgba(245, 158, 11, 0.1); }
.has-\[\:checked\]\:text-amber-400:has(:checked) { color: #fbbf24; }
.accent-amber-500 { accent-color: #f59e0b; }

/* --- Rodapé Dock de Status & Console Retrátil --- */
.bottom-status-dock {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background-color: rgba(12, 13, 18, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.console-header-bar {
  height: 38px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  user-select: none;
  background: rgba(18, 20, 28, 0.6);
}

.console-header-bar:hover {
  background: rgba(24, 27, 38, 0.85);
}

.console-log-box {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  padding: 12px 18px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  color: #d4d4d8 !important;
  background-color: #08090d !important;
}

/* --- Rail Mode Barra Lateral Retrátil --- */
.nav-rail {
  transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Tooltips Visuais de Alta Precisão --- */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border-radius: 10px;
  background-color: #16161c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f4f4f5;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(245, 158, 11, 0.1);
}
[data-tooltip]::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border-width: 6px 5px 0 5px;
  border-style: solid;
  border-color: #16161c transparent transparent transparent;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
  z-index: 10000;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Posicionamento à direita para ícones do Rail Mode na borda esquerda da tela */
.nav-rail [data-tooltip]::before {
  bottom: auto;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
.nav-rail [data-tooltip]::after {
  bottom: auto;
  left: calc(100% + 4px);
  top: 50%;
  border-width: 5px 6px 5px 0;
  border-color: transparent #16161c transparent transparent;
  transform: translateY(-50%) translateX(4px);
}
.nav-rail [data-tooltip]:hover::before,
.nav-rail [data-tooltip]:hover::after {
  transform: translateY(-50%) translateX(0);
}
[data-tooltip-pos="bottom"]::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-width: 0 5px 6px 5px;
  border-color: transparent transparent #16161c transparent;
  transform: translateX(-50%) translateY(-4px);
}
[data-tooltip-pos="bottom"]:hover::before,
[data-tooltip-pos="bottom"]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* --- Correção Estrita de Fundo Escuro para Selects & Options --- */
select {
  color-scheme: dark !important;
  background-color: #111114 !important;
  color: #f4f4f5 !important;
}
select option,
select optgroup {
  background-color: #16161a !important;
  color: #f4f4f5 !important;
  padding: 8px 12px !important;
}
select option:hover,
select option:focus,
select option:checked {
  background-color: #27272a !important;
  color: #fbbf24 !important;
}

/* --- Central Multi-Contas Dinâmica --- */
.conta-card {
  border: 1px solid rgba(63, 63, 70, 0.75) !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.conta-card:hover {
  border-color: rgba(113, 113, 122, 0.9) !important;
  background-color: #181820;
}

/* Chips de Seleção de Contas (Padrão Titan & Âmbar) */
.conta-chip {
  cursor: pointer;
  user-select: none;
  background-color: #111114;
  border: 1px solid rgba(63, 63, 70, 0.75) !important;
  color: #d4d4d8;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.conta-chip:hover {
  background-color: #1a1a22;
  border-color: rgba(113, 113, 122, 0.9) !important;
  color: #ffffff;
}
.conta-chip:active {
  transform: scale(0.98);
}
.conta-chip:has(input:checked) {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.55) !important;
  color: #fbbf24;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.15);
}
.conta-chip .conta-check-status {
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  border: 1.5px solid #52525b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.conta-chip:hover .conta-check-status {
  border-color: #a1a1aa;
}
.conta-chip:has(input:checked) .conta-check-status {
  background-color: #f59e0b;
  border-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.conta-chip:has(input:checked) .conta-check-status::after {
  content: "";
  display: block;
  width: 4px;
  height: 8px;
  border: solid #0e0e11;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
}

/* --- Modal Adicionar Nova Conta, Autenticação e Upsell (Titan & Âmbar Dialog) --- */
[hidden] {
  display: none !important;
}
.hidden {
  display: none;
}

.titan-modal-backdrop,
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: rgba(0, 0, 0, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  padding: 1rem !important;
  overflow-y: auto !important;
  animation: titanFadeIn 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.titan-modal-backdrop.hidden,
.titan-modal-backdrop[hidden],
.modal-overlay.hidden,
.modal-overlay[hidden] {
  display: none !important;
}

.titan-modal-card,
.modal-card {
  position: relative !important;
  width: 100% !important;
  max-width: 480px !important;
  background-color: #12141c !important;
  border: 1px solid rgba(63, 63, 70, 0.85) !important;
  border-radius: 1.25rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.08) !important;
  animation: titanZoomIn 180ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-input-field {
  width: 100% !important;
  background: #08090d !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  padding: 0.65rem 0.9rem !important;
  font-size: 0.82rem !important;
  color: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-sizing: border-box !important;
}
.auth-input-field:focus {
  outline: none !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25) !important;
}
.auth-input-field.has-action-right {
  padding-right: 4.5rem !important;
}

.auth-pass-wrapper {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.auth-pass-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #71717a !important;
  font-size: 11px !important;
  font-family: 'JetBrains Mono', monospace !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  z-index: 5 !important;
  transition: color 0.15s ease !important;
}
.auth-pass-toggle:hover {
  color: #fbbf24 !important;
}

.auth-btn-gold {
  display: block !important;
  width: 100% !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #090a0f !important;
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 0.75rem 1rem !important;
  border-radius: 12px !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25) !important;
  transition: all 0.2s ease !important;
}
.auth-btn-gold:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-1px) !important;
}
@keyframes titanFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes titanZoomIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.titan-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}
.titan-modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.titan-modal-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0.75rem;
  background-color: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #f59e0b;
  flex-shrink: 0;
}
.titan-modal-title {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}
.titan-modal-desc {
  font-size: 0.75rem;
  color: #a1a1aa;
  margin-top: 2px;
}
.titan-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 0.75rem;
  border: 1px solid rgba(63, 63, 70, 0.6);
  background-color: #111114;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 150ms ease;
  flex-shrink: 0;
}
.titan-modal-close-btn:hover {
  background-color: #202028;
  border-color: rgba(113, 113, 122, 0.8);
  color: #ffffff;
}
.titan-modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.titan-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.titan-plat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}
.titan-plat-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(63, 63, 70, 0.75) !important;
  background-color: #111114;
  cursor: pointer;
  user-select: none;
  transition: all 150ms ease;
  text-align: center;
}
.titan-plat-option:hover {
  background-color: #181820;
  border-color: rgba(113, 113, 122, 0.9) !important;
}
.titan-plat-option:has(input:checked) {
  border-color: rgba(245, 158, 11, 0.7) !important;
  background-color: rgba(245, 158, 11, 0.1);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}
.titan-plat-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: #e4e4e7;
}
.titan-plat-option:has(input:checked) .titan-plat-name {
  color: #fbbf24;
}
.titan-plat-radio-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
  border: 1.5px solid #52525b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
}
.titan-plat-option:has(input:checked) .titan-plat-radio-dot {
  border-color: #f59e0b;
  background-color: #f59e0b;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.titan-plat-option:has(input:checked) .titan-plat-radio-dot::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background-color: #0e0e11;
}
.titan-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(63, 63, 70, 0.4);
}

/* Garantia de bordas uniformes em todos os containers escuros */
.border-zinc-800,
.border-zinc-800\/80,
.border-zinc-800\/70 {
  border-color: rgba(63, 63, 70, 0.75) !important;
}

/* --- Timeline Visual Cinematográfica (Corte & Duração) --- */
.timeline-track-wrap {
  position: relative;
  height: 52px;
  width: 100%;
  border-radius: 0.75rem;
  background-color: #0c0c10;
  border: 1px solid rgba(63, 63, 70, 0.75);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}
.timeline-range-highlight {
  position: absolute;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.22), rgba(245, 158, 11, 0.35));
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  box-shadow: inset 0 0 16px rgba(245, 158, 11, 0.2);
}
.timeline-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22px;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 30;
  touch-action: none;
}
.timeline-handle-bar {
  width: 8px;
  height: 100%;
  background: #f59e0b;
  border: 1px solid #fbbf24;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
  transition: transform 100ms ease, background-color 100ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline-handle:hover .timeline-handle-bar,
.timeline-handle:active .timeline-handle-bar {
  background: #fbbf24;
  transform: scaleY(1.06);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.9);
}
.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  pointer-events: none;
  z-index: 25;
}
.timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* --- Safe Zone Guides (Área Segura 9:16) --- */
.safe-zone-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 40;
}
.safe-zone-top {
  position: absolute;
  inset-inline: 0.5rem;
  top: 0;
  height: 14%;
  border-bottom: 1.5px dashed rgba(16, 185, 129, 0.7);
  background-color: rgba(16, 185, 129, 0.04);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
}
.safe-zone-side {
  position: absolute;
  right: 0;
  top: 14%;
  bottom: 20%;
  width: 18%;
  border-left: 1.5px dashed rgba(16, 185, 129, 0.7);
  background-color: rgba(16, 185, 129, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.safe-zone-bottom {
  position: absolute;
  inset-inline: 0.5rem;
  bottom: 0;
  height: 20%;
  border-top: 1.5px dashed rgba(16, 185, 129, 0.7);
  background-color: rgba(16, 185, 129, 0.04);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.safe-zone-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #34d399;
  background-color: rgba(5, 5, 8, 0.85);
  border: 1px solid rgba(16, 185, 129, 0.4);
  padding: 2px 6px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* --- Caixa Interativa de Legenda & Gancho --- */
.box-legenda-drag {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.box-legenda-drag:active {
  cursor: grabbing;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
  border-color: #f59e0b !important;
}

/* --- Manipulador Direto Moldura Canva --- */
.mock-box-drag {
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow 150ms ease, border-color 150ms ease;
}
.mock-box-drag:active {
  cursor: grabbing;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
}

/* --- Studio Canvas: Visualizador Profissional 9:16 (Substitui carcaças de plástico) --- */
.studio-canvas-v,
.mockup-celular {
  position: relative;
  width: 260px;
  height: 462px; /* Proporção 9:16 vertical cinematográfica */
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 18px; /* Cantos elegantes de monitor/player moderno */
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  background-color: #070709;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05);
  user-select: none;
  touch-action: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.studio-canvas-v:hover,
.mockup-celular:hover {
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.95), 0 0 20px rgba(245, 158, 11, 0.12);
}

/* Remove completamente qualquer notch, auto-falante ou adorno de plástico */
.studio-canvas-v::before,
.mockup-celular::before {
  display: none !important;
  content: none !important;
}

/* Studio Canvas Horizontal Widescreen (Corte e Delogo) */
.studio-canvas-h {
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  background-color: #070709 !important;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  transition: border-color 200ms ease;
}
.studio-canvas-h:hover {
  border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Linha-guia magnética inteligente de centralização (Smart Guide Branca) */
.studio-snap-guide-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 3px #ffffff;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.studio-snap-guide-v.active {
  opacity: 1;
}

/* --- Seletores Padronizados Estilo Figma / CapCut (Precisos e Minimalistas) --- */
.seletor-box {
  position: absolute;
  border: 1.5px solid #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 0 14px rgba(245, 158, 11, 0.25);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.seletor-box:active {
  cursor: grabbing;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.5);
}
.seletor-box.tarja-preta {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

/* Alças Minimalistas Estilo Figma (Quadradas, precisas e discretas) */
.seletor-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background-color: #ffffff;
  border: 1.5px solid #f59e0b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  pointer-events: auto;
  z-index: 30;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.seletor-box:active .seletor-handle {
  border-color: #ffffff !important;
  background-color: #f59e0b;
}
.seletor-handle:hover,
.seletor-handle:active {
  transform: scale(1.4);
  background-color: #fbbf24;
}

.seletor-handle-nw { top: -5px; left: -5px; cursor: nwse-resize; }
.seletor-handle-ne { top: -5px; right: -5px; cursor: nesw-resize; }
.seletor-handle-sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
.seletor-handle-se { bottom: -5px; right: -5px; cursor: nwse-resize; }
.seletor-handle-w  { top: 50%; left: -5px; transform: translateY(-50%); cursor: ew-resize; }
.seletor-handle-e  { top: 50%; right: -5px; transform: translateY(-50%); cursor: ew-resize; }
.seletor-handle-w:hover, .seletor-handle-w:active,
.seletor-handle-e:hover, .seletor-handle-e:active {
  transform: translateY(-50%) scale(1.4);
}

/* Simulação visual em tempo real para Delogo */
#delogo-live-preview.modo-blur {
  backdrop-filter: blur(8px) brightness(0.85);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(245, 158, 11, 0.4);
}
#delogo-live-preview.modo-tarja {
  background-color: #000000;
}

/* --- Cores de Identidade Visual Multi-Contas (Instagram, TikTok, YouTube) --- */
/* Instagram: Magenta Vibrante / Rosa Choque (Inconfundível com o Vermelho) */
.platform-instagram,
.text-pink-400 {
  color: #e0248a !important;
}
.platform-instagram svg {
  fill: #e0248a !important;
}

/* TikTok: Ciano Elétrico / Azul Neon */
.platform-tiktok,
.text-cyan-400 {
  color: #22d3ee !important;
}
.platform-tiktok svg {
  fill: #22d3ee !important;
}

/* YouTube: Vermelho Puro */
.platform-youtube,
.text-red-400 {
  color: #ef4444 !important;
}
.platform-youtube svg {
  fill: #ef4444 !important;
}

/* Badges e Molduras de Plataforma */
.badge-instagram,
.bg-pink-500\/10 {
  background-color: rgba(224, 36, 138, 0.15) !important;
  border-color: rgba(224, 36, 138, 0.45) !important;
  color: #e0248a !important;
}
.badge-instagram svg {
  fill: #e0248a !important;
}

.badge-tiktok,
.bg-cyan-500\/10 {
  background-color: rgba(34, 211, 238, 0.14) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  color: #22d3ee !important;
}
.badge-tiktok svg {
  fill: #22d3ee !important;
}

.badge-youtube,
.bg-red-500\/10 {
  background-color: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  color: #ef4444 !important;
}
.badge-youtube svg {
  fill: #ef4444 !important;
}

.border-pink-500\/30 {
  border-color: rgba(224, 36, 138, 0.45) !important;
}
.border-cyan-500\/30 {
  border-color: rgba(34, 211, 238, 0.45) !important;
}
.border-red-500\/30 {
  border-color: rgba(239, 68, 68, 0.45) !important;
}

/* Video Preview & Player */
.preview-video-element {
  object-fit: cover;
  background-color: #000;
  transition: opacity 150ms ease;
}
.studio-canvas-h .preview-video-element {
  object-fit: contain;
}

/* Menu Dropdown de Idiomas */
#menu-idioma {
  animation: dropdownFadeIn 120ms ease-out forwards;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   FIGMA DASHBOARD SIDEBAR (Andrew Mamontov Style)
   ========================================================================== */
.studio-sidebar {
  width: 272px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #0c0d12;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  user-select: none;
  transition: width 180ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.studio-sidebar.rail-mode {
  width: 68px;
  padding: 10px;
  align-items: center;
}

@media (max-width: 768px) {
  .studio-sidebar {
    display: none !important;
  }
}

/* Header da Sidebar */
.sidebar-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 12px 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}

.studio-sidebar.rail-mode .sidebar-header {
  justify-content: center;
  padding: 4px 0 10px 0;
}

.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #14161d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none;
  padding: 0;
}
.sidebar-toggle-btn:hover {
  background: #1f232d;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}

/* Categorias */
.sidebar-category-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a5f6e;
  padding: 0 12px;
  margin-top: 22px;
  margin-bottom: 6px;
  box-sizing: border-box;
}
.studio-sidebar.rail-mode .sidebar-category-title {
  display: none;
}

/* Itens de Navegação */
.sidebar-nav-item {
  width: 100%;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #a1a1aa;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  outline: none !important;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  box-sizing: border-box;
  margin-bottom: 2px;
}

.sidebar-nav-item:hover {
  background-color: #161821;
  color: #f4f4f5;
}

.sidebar-nav-item.active {
  background-color: #1e222d;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar-nav-item.active .nav-icon {
  color: #f59e0b;
}

.sidebar-nav-item .nav-icon {
  font-size: 20px;
  color: #71717a;
  flex-shrink: 0;
  transition: color 150ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav-item:hover .nav-icon {
  color: #d4d4d8;
}

/* Rail Mode Botões */
.studio-sidebar.rail-mode .sidebar-nav-item {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  justify-content: center;
  margin: 3px auto;
}

.studio-sidebar.rail-mode .sidebar-nav-item .nav-text,
.studio-sidebar.rail-mode .sidebar-nav-item .sidebar-badge {
  display: none;
}

/* Badges */
.sidebar-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.sidebar-badge.badge-ia {
  background: rgba(14, 165, 233, 0.15);
  border: 1px solid rgba(14, 165, 233, 0.35);
  color: #38bdf8;
}
.sidebar-badge.badge-pro {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}
.sidebar-badge.badge-batch {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #c084fc;
}

/* Rodapé / Pasta do Projeto */
.sidebar-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  width: 100%;
  box-sizing: border-box;
}
.sidebar-project-btn {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 12px;
  background: #12141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 600;
  color: #d4d4d8;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none !important;
  box-sizing: border-box;
}
.sidebar-project-btn:hover {
  background: #181c24;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.16);
}
.studio-sidebar.rail-mode .sidebar-project-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0 auto;
}
.studio-sidebar.rail-mode .sidebar-project-btn span {
  display: none;
}

/* ==========================================================================
   TOPBAR WORKSTATION (CABEÇALHO PROFISSIONAL DE ESTÚDIO)
   3 Zonas: Identidade/Status (Esq) | Telemetria/Motores (Centro) | Utilitários/Salvar (Dir)
   ========================================================================== */

.topbar-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(12, 13, 18, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
}

.topbar-container {
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .topbar-container {
    padding: 0 24px;
  }
}

/* --- Zona 1: Identidade da Marca & Status (Esquerda) --- */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  user-select: none;
}

.topbar-brand-interactive {
  cursor: pointer;
  transition: opacity 150ms ease;
}

.topbar-brand-interactive:hover {
  opacity: 0.92;
}

.topbar-brand-interactive:hover .brand-title-titan {
  color: #fbbf24;
}

.topbar-logo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, #181920 0%, #0c0d12 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.topbar-logo-badge:hover {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
  transform: scale(1.03);
}

.topbar-logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.35));
}

.topbar-brand-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  user-select: none;
  cursor: pointer;
}

.brand-title-titan {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: color 150ms ease;
}

.brand-title-divider {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
}

.brand-title-estudio {
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #d4d4d8;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transform: translateY(-0.5px); /* Alinhamento óptico perfeito com Bebas Neue */
}

/* Indicador de Projeto Ativo */
.topbar-project-divider {
  color: rgba(255, 255, 255, 0.16);
  font-size: 13px;
  font-weight: 300;
  user-select: none;
}

.topbar-project-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #a1a1aa;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.topbar-project-badge:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #e4e4e7;
}

.topbar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(18, 20, 24, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: #a1a1aa;
  white-space: nowrap;
}

.topbar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topbar-status-dot.is-ready {
  background-color: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

.topbar-status-dot.is-busy {
  background-color: #fbbf24;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
  animation: pulse-dot 1.2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* --- Zona 2: Telemetria & Motores (Centro) --- */
.topbar-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

@media (max-width: 860px) {
  .topbar-center {
    display: none;
  }
}

.topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9999px;
  background: #12141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #d4d4d8;
  cursor: default;
  transition: all 150ms ease;
  user-select: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.topbar-chip:hover {
  background: #181c24;
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.topbar-chip-btn {
  cursor: pointer;
  outline: none !important;
}

.topbar-chip-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
}

.topbar-chip-pro {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.topbar-chip-pro .chip-icon {
  color: #f59e0b;
}

.topbar-chip-engines {
  background: #12141a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e4e4e7;
}

.topbar-chip-engines.is-warning {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
}

.topbar-chip-engines .chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

.topbar-chip-engines.is-warning .chip-dot {
  background-color: #fbbf24;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

/* --- Zona 3: Utilitários & Ação Salvar (Direita) --- */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  background: #141722;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #d4d4d8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none !important;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.topbar-icon-btn:hover {
  background: #1b2030;
  border-color: rgba(245, 158, 11, 0.35);
  color: #ffffff;
  transform: translateY(-1px);
}

.topbar-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  background: #141722;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
  color: #d4d4d8;
  cursor: pointer;
  transition: all 150ms ease;
  outline: none !important;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.topbar-lang-btn:hover {
  background: #1b2030;
  border-color: rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  transform: translateY(-1px);
}

.topbar-lang-arrow {
  font-size: 8px;
  color: #71717a;
  transition: transform 150ms ease;
}

.topbar-lang-dropdown {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 6px;
  width: 170px;
  border-radius: 12px;
  background: #141418;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  z-index: 50;
  backdrop-filter: blur(16px);
  box-sizing: border-box;
}

.topbar-lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #d4d4d8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 120ms ease;
  box-sizing: border-box;
}

.topbar-lang-item:hover {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
}

.topbar-lang-item.is-selected {
  color: #ffffff;
}

.topbar-lang-item .check-mark {
  color: #f59e0b;
  font-size: 12px;
}

.topbar-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid #fbbf24;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0c0d12;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.25);
  transition: all 150ms ease;
  outline: none !important;
  box-sizing: border-box;
  white-space: nowrap;
}

.topbar-save-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.45);
  transform: translateY(-1px);
}

.topbar-save-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.3);
}

.topbar-save-btn .btn-shortcut {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  padding: 1px 5px;
  color: #0c0d12;
}

/* --- Hero Card de Boas-Vindas & Emblema 3D --- */
.hero-welcome-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(245, 158, 11, 0.28) !important;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, #12141a 45%, #0c0d12 100%) !important;
}

.hero-emblem-badge {
  display: none;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, #181c24 0%, #0c0d12 100%);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 8px;
}

@media (min-width: 640px) {
  .hero-emblem-badge {
    display: flex;
  }
}

.hero-emblem-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.4));
}

.hero-watermark-bg {
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 200px;
  height: 200px;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-watermark-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(245, 158, 11, 0.4));
}

/* --- Terminal Edge Tab (Removido do canto direito por solicitação do usuário) --- */
.dock-edge-tab {
  display: none !important;
}

/* --- Terminal Trigger Destacado (Canto Inferior Esquerdo) --- */
.terminal-left-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 9px;
  background: rgba(22, 25, 34, 0.95);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 9px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 180ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  user-select: none;
}

.terminal-left-trigger:hover {
  background: rgba(30, 35, 48, 0.98);
  border-color: rgba(245, 158, 11, 0.65);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.terminal-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.9);
  flex-shrink: 0;
  animation: pulse 2s infinite;
}

.terminal-code-icon {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 11.5px;
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.terminal-label-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.terminal-count-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 6px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- Card de Usuário / Titan PRO na Sidebar --- */
.sidebar-user-card {
  width: 100%;
  padding: 10px 12px;
  margin-top: auto;
  margin-bottom: 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(24, 27, 36, 0.8) 0%, rgba(16, 18, 25, 0.9) 100%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  box-sizing: border-box;
  transition: all 150ms ease;
  cursor: pointer;
}

.sidebar-user-card:hover {
  background: linear-gradient(180deg, rgba(30, 35, 48, 0.9) 0%, rgba(20, 23, 32, 0.95) 100%);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
  transform: translateY(-1px);
}

.studio-sidebar.rail-mode .sidebar-user-card {
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-sidebar.rail-mode .sidebar-user-card .user-card-details,
.studio-sidebar.rail-mode .sidebar-user-card .user-card-badge {
  display: none;
}

/* --- Pipeline de Produção (Métricas Unificadas) --- */
.pipeline-card {
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.pipeline-card:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background-color: #12141c;
}

/* --- Cards de Ferramentas Secundárias (Acordeão) --- */
.ferramenta-sec-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #0f1015;
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 150ms ease;
  user-select: none;
}

.ferramenta-sec-card:hover {
  background: #151720;
  border-color: rgba(245, 158, 11, 0.4);
  transform: translateY(-1px);
}

/* --- Miniatura Vertical 9:16 para Card de Mídia --- */
.thumb-vertical-916 {
  width: 54px;
  height: 80px;
  border-radius: 10px;
  background: #181a22;
  border: 1px solid rgba(245, 158, 11, 0.35);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

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

/* --- Sistema de Autenticação e Planos --- */
.badge-pro {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-free {
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #94a3b8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.topbar-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #12131b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  color: #d4d4d8;
  cursor: pointer;
  transition: all 150ms ease;
}

.topbar-user-btn:hover {
  background: #181a24;
  border-color: rgba(245, 158, 11, 0.3);
}

.quota-indicator {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: #a1a1aa;
}

/* --- Titan Workstation: Menu Suspenso de Usuário (Topbar) --- */
.titan-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 260px;
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 20px 40px -4px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(245, 158, 11, 0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 8px;
  z-index: 1000;
  box-sizing: border-box;
  animation: titanDropdownFadeIn 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes titanDropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.titan-dropdown-header {
  padding: 10px 12px;
  background: #161926;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  margin-bottom: 6px;
}

.titan-dropdown-user-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titan-dropdown-user-email {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #71717a;
  margin-top: 2px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.titan-dropdown-badge-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.titan-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #d4d4d8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 120ms ease;
  box-sizing: border-box;
  text-align: left;
}

.titan-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.titan-dropdown-item.item-upgrade {
  color: #fbbf24;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  margin-top: 4px;
  margin-bottom: 4px;
}

.titan-dropdown-item.item-upgrade:hover {
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fde68a;
}

.titan-dropdown-item.item-danger {
  color: #fb7185;
}

.titan-dropdown-item.item-danger:hover {
  background: rgba(244, 63, 94, 0.1);
  color: #fda4af;
}

.titan-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 0;
}

/* --- Titan Workstation: Sidebar User Card Refinado --- */
.user-card-badge-pill {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  letter-spacing: 0.03em;
}

.user-card-badge-pill.badge-pill-free {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a1a1aa;
}

.user-card-badge-pill.badge-pill-pro {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.user-card-footer-action {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fbbf24;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  transition: transform 140ms ease;
}

.sidebar-user-card:hover .user-card-footer-action {
  transform: translateX(2px);
  color: #fde68a;
}

/* --- Titan Workstation: Dock de Autenticação Google & Status --- */
.titan-auth-dock {
  margin-top: 12px;
  padding: 14px 16px;
  background: #121420;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  box-shadow: 0 10px 24px -4px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: titanFadeIn 150ms ease;
}

.titan-auth-dock-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.titan-auth-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.titan-auth-pulse-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.35);
  animation: titanPulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes titanPulse {
  0% { transform: scale(0.8); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}

.titan-auth-dock-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
}

.titan-auth-dock-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  line-height: 1.45;
  color: #a1a1aa;
  margin: 0;
}

.titan-auth-dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.titan-auth-btn-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  background: #181b28;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  cursor: pointer;
  transition: all 120ms ease;
  text-decoration: none;
}

.titan-auth-btn-secondary svg,
.titan-auth-btn-ghost svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0;
  display: inline-block;
}

.titan-auth-btn-secondary:hover {
  background: #202436;
  border-color: rgba(245, 158, 11, 0.5);
  color: #fde68a;
  transform: translateY(-1px);
}

.titan-auth-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #a1a1aa;
  cursor: pointer;
  transition: all 120ms ease;
}

.titan-auth-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* --- Titan Workstation: Vitrine de Planos & Licença (PAGINAS.conta e Modal Upsell) --- */
.titan-plan-card {
  background: #151824;
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 14px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.titan-plan-card.is-pro {
  border-color: rgba(245, 158, 11, 0.45);
  background: linear-gradient(180deg, #181c2d 0%, #131622 100%);
  box-shadow: 0 12px 36px rgba(245, 158, 11, 0.12);
}

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

.titan-plan-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fbbf24;
}

.titan-plan-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.01em;
}

.titan-plan-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #a1a1aa;
  margin: 0 0 16px 0;
}

.titan-quota-meter-box {
  background: #0e1017;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

.titan-quota-meter-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #a1a1aa;
}

.titan-quota-meter-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: #fbbf24;
}

.titan-quota-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  overflow: hidden;
}

.titan-quota-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  border-radius: 9999px;
  transition: width 300ms ease;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.titan-plan-feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.titan-plan-feature-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: #d4d4d8;
}

.titan-plan-feature-icon {
  color: #34d399;
  flex-shrink: 0;
  display: inline-flex;
}

.titan-btn-upgrade-gold {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #0c0d12;
  cursor: pointer;
  text-decoration: none;
  transition: all 160ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.3);
  box-sizing: border-box;
}

.titan-btn-upgrade-gold:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.45);
  color: #000000;
}

.titan-guarantee-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #71717a;
  margin-top: 14px;
  text-align: center;
}

/* --- Layout Responsivo Split para Minha Conta & Planos --- */
.titan-account-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

@media (min-width: 860px) {
  .titan-account-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

/* Card de Autenticação In-App */
.titan-auth-card {
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.titan-auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
}

.titan-auth-tab-btn {
  flex: 1;
  padding-bottom: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #71717a;
  cursor: pointer;
  transition: all 140ms ease;
  text-align: center;
}

.titan-auth-tab-btn.active {
  color: #fbbf24;
  border-bottom-color: #f59e0b;
}

.titan-auth-tab-btn:hover:not(.active) {
  color: #d4d4d8;
}

.titan-auth-divider {
  display: flex;
  align-items: center;
  margin: 18px 0;
  position: relative;
}

.titan-auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.titan-auth-divider-text {
  padding: 0 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #71717a;
}

.titan-btn-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  background: #141722;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e4e4e7;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 140ms ease;
  user-select: none;
}

.titan-btn-google:hover {
  background: #1a1e2e;
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Spinner e Estados de Carregamento */
.titan-spinner-amber {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(245, 158, 11, 0.25);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: titanSpin 0.7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

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

/* Vitrine de Benefícios do Modal de Upsell / Upgrade PRO */
.titan-upsell-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 520px) {
  .titan-upsell-grid {
    grid-template-columns: 1fr;
  }
}

.titan-upsell-tile {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 140ms ease;
}

.titan-upsell-tile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 158, 11, 0.25);
}

.titan-upsell-tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
}

.titan-upsell-tile-icon {
  color: #f59e0b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.titan-upsell-tile-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  line-height: 1.45;
  color: #94a3b8;
  margin: 0;
}

/* Chip de Upgrade na Topbar */
.topbar-chip-upgrade {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.12);
  outline: none;
}

.topbar-chip-upgrade:hover {
  background: rgba(245, 158, 11, 0.22);
  border-color: rgba(245, 158, 11, 0.6);
  color: #fde68a;
  transform: translateY(-1px);
}

/* Botão de Upgrade do Plano Starter no Hero */
.hero-plan-starter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  cursor: pointer;
  transition: all 140ms ease;
  outline: none;
}

.hero-plan-starter-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.25);
}

/* Waveform Visualizer da Barra de Transporte */
.player-waveform {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  padding: 0 4px;
}

.player-waveform-bar {
  width: 2.5px;
  height: 4px;
  background: rgba(245, 158, 11, 0.35);
  border-radius: 2px;
  transition: height 0.15s ease, background-color 0.15s ease;
}

.player-waveform.is-playing .player-waveform-bar:nth-child(1) { animation: wavePulse 0.5s infinite ease-in-out alternate; }
.player-waveform.is-playing .player-waveform-bar:nth-child(2) { animation: wavePulse 0.35s infinite ease-in-out alternate 0.1s; }
.player-waveform.is-playing .player-waveform-bar:nth-child(3) { animation: wavePulse 0.65s infinite ease-in-out alternate 0.2s; }
.player-waveform.is-playing .player-waveform-bar:nth-child(4) { animation: wavePulse 0.45s infinite ease-in-out alternate 0.15s; }
.player-waveform.is-playing .player-waveform-bar:nth-child(5) { animation: wavePulse 0.6s infinite ease-in-out alternate 0.05s; }
.player-waveform.is-playing .player-waveform-bar:nth-child(6) { animation: wavePulse 0.4s infinite ease-in-out alternate 0.25s; }

@keyframes wavePulse {
  0% { height: 4px; background: rgba(245, 158, 11, 0.4); }
  100% { height: 16px; background: #fbbf24; box-shadow: 0 0 6px rgba(245, 158, 11, 0.5); }
}

/* Badges PRO do Design System Titan Dark Gold Workstation */
.badge-pro-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #fbbf24;
  vertical-align: middle;
}

.badge-pro-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.15) 100%);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #f59e0b;
  font-size: 0.68rem;
  font-weight: 800;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.15);
}

/* Switcher Horizontal de Páginas Conectadas (Topbar & Header) */
.topbar-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(14, 16, 22, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 3px;
  margin-left: 0.5rem;
}
.topbar-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #a1a1aa;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.topbar-page-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}
.topbar-page-link.active {
  color: #0c0d12 !important;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

/* Banner de Aviso de Motor Offline */
.offline-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  color: #fbbf24;
}
.offline-banner-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0c0d12;
  font-weight: 700;
  font-size: 0.75rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25);
  transition: all 0.15s;
}
.offline-banner-btn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

/* ==========================================================================
   ECOSSISTEMA TITAN STUDIO • COMPONENTES GLOBAIS DE PÁGINAS E PORTAL
   ========================================================================== */

/* Shell Base de Página */
.titan-page-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #0c0d12;
  color: #e4e4e7;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  background-image: 
    radial-gradient(ellipse at 20% 0%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
}

/* Cabeçalho Global Unificado */
.titan-global-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: rgba(12, 13, 18, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.85rem 1.5rem;
}
.titan-global-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.titan-header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
  white-space: nowrap;
}
.titan-header-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
  flex-shrink: 0;
}
.titan-header-titles {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.titan-header-appname {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  line-height: 1.2;
}
.titan-header-subname {
  font-size: 0.74rem;
  color: #a1a1aa;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: 0.01em;
}

/* Estrutura Oficial Topbar da Landing Page (Desktop e Base) */
.landing-topbar-container {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  width: 100%;
}
.landing-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}
.landing-brand-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  min-width: 0;
  flex: 1 1 auto;
}
.landing-brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(245, 158, 11, 0.25);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  flex-shrink: 0;
}
.landing-brand-text {
  min-width: 0;
  overflow: hidden;
}
.landing-brand-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-brand-sub {
  font-size: 0.7rem;
  color: #71717a;
  white-space: nowrap;
}
.landing-topbar-actions,
.titan-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Topbar estruturada em 2 linhas limpas sem espremer elementos */

/* Seletor de Idiomas Global do Portal */
.titan-lang-wrap {
  position: relative;
  display: inline-block;
  z-index: 1000;
}
.titan-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #d4d4d8;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
.titan-lang-btn * {
  pointer-events: none;
}
.titan-lang-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
  color: #ffffff;
}
.titan-lang-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  padding: 0.35rem;
  z-index: 99999;
  display: none;
}
.titan-lang-dropdown.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Metricas e Telemetria da Vitrine da Landing */
.showcase-metrics {
  position: relative;
  z-index: 10;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #71717a;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.03em;
  width: 100%;
}
.showcase-metrics > div {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.status-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  display: inline-block;
  flex-shrink: 0;
}
.titan-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.5rem 0.65rem;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #a1a1aa;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}
.titan-lang-item:hover, .titan-lang-item.active {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

/* Rodapé Global Unificado */
.titan-global-footer {
  width: 100%;
  margin-top: auto;
  background: #090a0f;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3rem 1.5rem 2rem 1.5rem;
}
.titan-global-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.titan-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.titan-footer-col h4 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #f59e0b;
  margin-bottom: 1rem;
  font-family: 'JetBrains Mono', monospace;
}
.titan-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.titan-footer-col a {
  color: #a1a1aa;
  text-decoration: none;
  font-size: 0.82rem;
  transition: color 0.15s ease;
}
.titan-footer-col a:hover {
  color: #ffffff;
  text-decoration: underline;
}
.titan-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: #71717a;
  font-family: 'JetBrains Mono', monospace;
}
.titan-footer-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fbbf24;
}

/* Containers e Seções de Conteúdo */
.titan-content-container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem 1.5rem;
}
.titan-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: #f59e0b;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.titan-page-title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
.titan-page-subtitle {
  font-size: 0.95rem;
  color: #a1a1aa;
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Cards de Conteúdo */
.titan-surface-card {
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.titan-surface-card:hover {
  border-color: rgba(245, 158, 11, 0.3);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

/* Acordeão de FAQ & Busca */
.faq-search-box {
  position: relative;
  max-width: 680px;
  margin: 0 auto 2.5rem auto;
}
.faq-search-input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3rem;
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.faq-search-input:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}
.faq-search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #f59e0b;
  font-size: 1.1rem;
  pointer-events: none;
}
.faq-search-clear {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #a1a1aa;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
}
.faq-search-clear:hover {
  background: rgba(245, 158, 11, 0.3);
  color: #ffffff;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 1rem;
}
.faq-item {
  background: #12141d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, background-color 0.2s;
}
.faq-item:hover {
  border-color: rgba(245, 158, 11, 0.35);
  background: #141622;
}

/* Suporte nativo para <details class="faq-item"> */
details.faq-item summary {
  list-style: none;
  width: 100%;
  text-align: left;
  padding: 1.15rem 1.4rem;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
details.faq-item summary::-webkit-details-marker {
  display: none;
}
details.faq-item summary::after {
  content: '▾';
  font-size: 1.1rem;
  color: #f59e0b;
  transition: transform 0.25s ease;
  margin-left: 0.75rem;
}
details.faq-item[open] summary::after {
  transform: rotate(180deg);
}
details.faq-item[open] {
  border-color: rgba(245, 158, 11, 0.4);
  background: #151824;
}
details.faq-item .faq-answer {
  max-height: none;
  padding: 0 1.4rem 1.25rem 1.4rem;
  font-size: 0.88rem;
  color: #a1a1aa;
  line-height: 1.65;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 0.2rem;
  padding-top: 0.85rem;
}

/* Suporte legado com classes JS .faq-question e .faq-item.open */
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.5rem;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.faq-question:focus {
  outline: none;
}
.faq-chevron {
  color: #f59e0b;
  font-size: 0.85rem;
  transition: transform 0.25s ease;
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-item.open {
  border-color: rgba(245, 158, 11, 0.4);
}
.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 1.5rem 1.25rem 1.5rem;
}

/* Painel de Administração */
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.admin-metric-card {
  background: #12141d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
.admin-metric-label {
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  color: #71717a;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.admin-metric-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #ffffff;
}
.admin-metric-detail {
  font-size: 0.75rem;
  color: #10b981;
  margin-top: 0.35rem;
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.admin-table th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: #090a0f;
  color: #71717a;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
}
.admin-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Gateway de Segurança do Admin */
.admin-lock-screen {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.admin-lock-card {
  width: 100%;
  max-width: 440px;
  background: #11131c;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.admin-lock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem auto;
  border-radius: 20px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

/* Funil de Vendas Visual */
.admin-funnel-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-funnel-step {
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 0.2s ease;
}
.admin-funnel-step:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.admin-funnel-bar-bg {
  width: 100%;
  height: 8px;
  background: #1a1c29;
  border-radius: 9999px;
  overflow: hidden;
}
.admin-funnel-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.6s ease;
}
.admin-funnel-bottleneck {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.04);
}
.admin-bottleneck-badge {
  font-size: 0.68rem;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}

/* Drag and Drop nos Studio Canvases */
.drag-over-active {
  border-color: #f59e0b !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.45), inset 0 0 20px rgba(245, 158, 11, 0.2) !important;
  transform: scale(1.008);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Cookie Consent Banner (LGPD & ANPD) --- */
.titan-cookie-dock {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: 860px;
  background: rgba(17, 19, 28, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(245, 158, 11, 0.12);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  z-index: 99999;
  animation: titanCookiePopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes titanCookiePopIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.titan-cookie-hide {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) !important;
  pointer-events: none !important;
}

.titan-cookie-content {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.titan-cookie-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  flex-shrink: 0;
}

.titan-cookie-text {
  flex: 1;
  min-width: 260px;
}

.titan-cookie-title {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

.titan-cookie-desc {
  font-size: 0.78rem;
  color: #a1a1aa;
  line-height: 1.45;
  margin: 0;
}

.titan-cookie-link {
  color: #f59e0b;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.titan-cookie-link:hover {
  color: #fbbf24;
}

.titan-cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.titan-cookie-btn-pri {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #0c0d12;
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.titan-cookie-btn-pri:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

.titan-cookie-btn-sec {
  background: rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 0.55rem 1.15rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.titan-cookie-btn-sec:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
   SEGMENTED TABS & SELETORES DE SISTEMA OPERACIONAL
   ========================================================================== */
.segmented-tabs-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem;
  box-sizing: border-box;
}
.segmented-tabs {
  display: flex;
  align-items: center;
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 4px;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.segmented-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1.15rem;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #a1a1aa;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  font-family: inherit;
}
.segmented-tab svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.segmented-tab:hover:not(.active) {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}
.segmented-tab:hover:not(.active) svg {
  transform: scale(1.1);
}
.segmented-tab.active {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #0c0d12 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.segmented-tab.active svg {
  fill: #0c0d12 !important;
  stroke: #0c0d12 !important;
}

/* ==========================================================================
   RESPONSIVIDADE COMPLETA E ULTRA-POLIDA PARA MOBILE, CELULAR & TABLET
   ========================================================================== */
@media (max-width: 1080px) {
  .topbar-page-nav {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topbar-page-nav::-webkit-scrollbar {
    display: none;
  }
  .titan-global-header-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  /* Cabeçalho Global Unificado em Telas Médias e Pequenas */
  .titan-global-header {
    padding: 0.6rem 0.75rem;
  }
  .titan-global-header-inner {
    gap: 0.5rem;
    justify-content: space-between;
  }
  .titan-header-brand {
    gap: 0.5rem;
  }
  .titan-header-logo {
    width: 32px;
    height: 32px;
  }
  .titan-header-appname {
    font-size: 0.88rem;
  }
  .titan-header-subname {
    display: none; /* Oculta slogan no mobile para economizar espaço horizontal */
  }

  /* Barra de Navegação Horizontal Swipeable (Estilo App Store / Chips) */
  .topbar-page-nav {
    order: 3;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 5px 8px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    background: rgba(14, 16, 22, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    gap: 6px !important;
    scroll-behavior: smooth !important;
  }
  .topbar-page-nav::-webkit-scrollbar {
    display: none !important;
  }
  .topbar-page-link {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 12px !important;
    font-size: 11.5px !important;
    border-radius: 7px !important;
  }
  .topbar-page-nav::after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 1px;
    flex-shrink: 0;
  }

  /* Estrutura Topbar da Landing Page no Mobile */
  .landing-topbar-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
  }
  .landing-topbar-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
  }
  .landing-brand-title {
    font-size: 0.9rem !important;
  }
  .landing-brand-sub {
    font-size: 0.65rem !important;
  }

  /* Tipografia Fluida e Responsiva */
  .titan-page-title {
    font-size: clamp(1.45rem, 5vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }
  .titan-page-subtitle {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  .titan-hero-badge {
    font-size: 0.68rem !important;
    padding: 0.25rem 0.65rem !important;
  }

  /* Containers e Cards */
  .titan-content-container {
    padding: 1.5rem 1rem !important;
  }
  .titan-surface-card {
    padding: 1.5rem 1rem !important;
    border-radius: 16px !important;
    margin-bottom: 2rem !important;
  }

  /* Segmented OS e Plan Tabs Swipeable no Mobile */
  .segmented-tabs-wrapper {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
    padding: 6px 1rem !important;
    margin-bottom: 1.25rem !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x proximity;
    cursor: grab;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .segmented-tabs-wrapper:active {
    cursor: grabbing;
  }
  .segmented-tabs-wrapper::-webkit-scrollbar {
    display: none !important;
  }
  .segmented-tabs {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    gap: 8px !important;
    padding: 4px !important;
  }
  .segmented-tab {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 140px !important;
    white-space: nowrap !important;
    scroll-snap-align: center;
    padding: 0.75rem 1.15rem !important;
    font-size: 0.82rem !important;
  }
  .os-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #f59e0b;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    margin: -0.75rem 0 2rem 0;
    text-align: center;
    opacity: 0.9;
    animation: pulseSwipeHint 2.2s infinite ease-in-out;
  }
  @keyframes pulseSwipeHint {
    0%, 100% { opacity: 0.7; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
  }

  /* Prevenção de Auto-Zoom do Safari/iOS em inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Banner de Cookies Responsivo */
  .titan-cookie-dock {
    width: calc(100% - 1.25rem) !important;
    bottom: 0.75rem !important;
    padding: 1rem 1.15rem !important;
    border-radius: 14px !important;
  }
  .titan-cookie-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  .titan-cookie-text {
    min-width: 100% !important;
  }
  .titan-cookie-actions {
    width: 100% !important;
    display: flex !important;
    gap: 0.5rem !important;
  }
  .titan-cookie-btn-pri,
  .titan-cookie-btn-sec {
    flex: 1 !important;
    text-align: center !important;
    padding: 0.65rem 0.75rem !important;
    font-size: 0.78rem !important;
  }

  /* Grids de Recursos, FAQ e Planos */
  .titan-grid-cards,
  .plans-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Botões e CTAs com toque acessível (min 44px) */
  .offline-banner-btn,
  .btn-submit-gold,
  .btn-primary-action {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
    line-height: 1.35 !important;
    padding: 0.85rem 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Smartphones Verticais e Telas Estreitas (320px - 480px) */
  .titan-global-header {
    padding: 0.5rem 0.65rem;
  }
  .titan-header-titles {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .badge-status-cloud,
  .titan-status-pill,
  .titan-global-header .offline-banner-btn {
    display: none !important; /* Oculta badges e botões extras para dar destaque à marca e ao seletor de idiomas */
  }
  .titan-lang-btn {
    padding: 0.35rem 0.55rem;
    font-size: 0.72rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  #tab-switcher .segmented-tab {
    flex: 1 1 50% !important;
    width: 50% !important;
  }

  .titan-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    text-align: center;
  }

  /* Modais Adaptativos */
  .modal-desktop-card {
    padding: 1.5rem 1.15rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin: auto !important;
    border-radius: 16px !important;
  }
  .modal-desktop-title {
    font-size: 1.25rem !important;
  }
  .modal-desktop-desc {
    font-size: 0.8rem !important;
  }
  .modal-desktop-actions {
    flex-direction: column !important;
  }
  .btn-desktop-cancel,
  .btn-desktop-open {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tabela Comparativa em Telas Muito Pequenas */
  .compare-table {
    min-width: 540px !important;
  }
  .compare-table th.col-feature,
  .compare-table td:first-child {
    min-width: 120px !important;
    max-width: 135px !important;
  }
}

/* ==========================================================================
   TABELAS COMPARATIVAS E CARDS RESPONSIVOS GLOBAIS
   ========================================================================== */
.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 900px) {
  .compare-table-wrap {
    scrollbar-width: thin;
    border-radius: 14px !important;
  }
  .compare-table {
    min-width: 600px !important;
  }
  .compare-table th.col-feature,
  .compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #0d0f17 !important;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.65);
    min-width: 135px;
    max-width: 155px;
  }
  .compare-table th.col-feature {
    z-index: 3;
    background: #08090d !important;
  }
}
@media (max-width: 600px) {
  #tab-switcher {
    flex-direction: row !important;
  }
  #tab-switcher .segmented-tab {
    flex: 1 1 50% !important;
    width: 50% !important;
  }
}

/* ==========================================================================
   SISTEMA DE MENU LATERAL MOBILE (OFF-CANVAS DRAWER)
   ========================================================================== */
.titan-mobile-menu-btn {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fbbf24;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  min-height: 38px;
  line-height: 1;
}
.titan-mobile-menu-btn:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #ffffff;
}

/* Overlay do Drawer */
.titan-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.titan-mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Painel Lateral Deslizante (Drawer) */
.titan-mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 86vw);
  height: 100vh;
  height: 100dvh;
  background: #11131c;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: -15px 0 45px rgba(0, 0, 0, 0.85);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.28s;
  will-change: transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.titan-mobile-nav-drawer.open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.titan-nav-locked {
  overflow: hidden !important;
  touch-action: none;
}

/* Cabeçalho do Drawer */
.titan-mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.titan-drawer-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.titan-drawer-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: contain;
}
.titan-drawer-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.titan-drawer-sub {
  font-size: 0.65rem;
  color: #f59e0b;
}
.titan-drawer-close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.titan-drawer-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Links do Drawer */
.titan-mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1rem;
  flex: 1;
}
.titan-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  color: #d4d4d8;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  min-height: 48px;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}
.titan-drawer-link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.titan-drawer-link.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18) 0%, rgba(217, 119, 6, 0.12) 100%);
  border-color: rgba(245, 158, 11, 0.35);
  color: #fbbf24;
  font-weight: 700;
}
.drawer-link-icon {
  font-size: 1.15rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.drawer-link-text {
  flex: 1;
}
.drawer-link-pill {
  font-size: 0.65rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  font-weight: 700;
}

/* Rodapé do Drawer */
.titan-mobile-drawer-footer {
  padding: 1rem 1.25rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.drawer-sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: #34d399;
}
.drawer-sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #34d399;
}
.drawer-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #0c0d12;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   CARDS COMPARATIVOS PARA MOBILE (TITAN VS SAAS)
   ========================================================================== */
.compare-mobile-cards {
  display: none;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}
.compare-feature-card {
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.compare-card-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.compare-card-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.compare-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.compare-card-sub {
  font-size: 0.74rem;
  color: #71717a;
  margin-top: 0.15rem;
}
.compare-card-grid {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.compare-opt-box {
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.compare-opt-box.opt-titan {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.compare-opt-box.opt-cloud {
  background: #090a0f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.opt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.opt-brand {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.opt-titan .opt-brand {
  color: #fbbf24;
}
.opt-cloud .opt-brand {
  color: #71717a;
}
.opt-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.badge-green {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
}
.badge-gray {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
}
.opt-desc {
  font-size: 0.76rem;
  line-height: 1.45;
}
.opt-titan .opt-desc {
  color: #d4d4d8;
}
.opt-cloud .opt-desc {
  color: #71717a;
}

/* ==========================================================================
   TRANSIÇÃO RESPONSIVA MOBILE (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevenção de estouro horizontal e garantia de rolagem vertical fluida */
  html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .split-layout {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .showcase-pane {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 1.25rem 0.85rem !important;
  }
  .auth-pane {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 2rem 1rem !important;
  }

  /* Oculta o menu horizontal espremido */
  .topbar-page-nav {
    display: none !important;
  }
  
  /* Exibe o botão Hamburger do Menu Lateral e oculta botões extras no header */
  .titan-mobile-menu-btn {
    display: inline-flex !important;
  }
  .titan-global-header .offline-banner-btn,
  .badge-status-cloud,
  .titan-status-pill {
    display: none !important;
  }

  /* Substitui a tabela horizontal pelo layout de cards verticais */
  .compare-table-wrap {
    display: none !important;
  }
  .mobile-table-hint {
    display: none !important;
  }
  .compare-mobile-cards {
    display: flex !important;
  }

  /* Botões e CTAs com largura fluida e toque confortável */
  .offline-banner-btn {
    white-space: normal !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cabeçalho global limpo no mobile */
  .titan-global-header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  /* Topbar da Landing Page no Mobile */
  .landing-topbar-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
  }
  .landing-brand-link {
    flex: 0 0 auto !important;
    max-width: calc(100% - 170px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }
  .landing-brand-logo {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  .landing-brand-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .brand-full-name {
    display: none !important;
  }
  .landing-brand-sub {
    display: none !important;
  }
  .landing-brand-title {
    font-size: 0.9rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .landing-topbar-actions,
  .titan-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }
  .titan-lang-btn {
    padding: 0.35rem 0.55rem !important;
    font-size: 0.72rem !important;
    gap: 0.25rem !important;
    min-height: 34px !important;
  }
  .titan-mobile-menu-btn {
    padding: 0.35rem 0.6rem !important;
    font-size: 0.75rem !important;
    gap: 0.3rem !important;
    min-height: 34px !important;
  }

  /* Sliders da Calculadora de ROI */
  .roi-slider-label {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
  }
  .roi-big-number {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
  }
}

/* ==========================================================================
   BREAKPOINTS REFINADOS PARA TELAS ULTRA-COMPACTAS E COMPACTAS
   ========================================================================== */
@media (max-width: 480px) {
  .landing-brand-link {
    max-width: calc(100% - 135px) !important;
  }
  .landing-brand-title {
    font-size: 0.85rem !important;
  }
  .showcase-pane {
    padding: 1.25rem 0.85rem !important;
  }
  .showcase-pane h1 {
    font-size: clamp(1.35rem, 6vw, 1.7rem) !important;
  }
  .showcase-metrics {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.35rem !important;
    text-align: center !important;
    font-size: 0.65rem !important;
  }
}

@media (max-width: 380px) {
  .landing-brand-link {
    max-width: calc(100% - 105px) !important;
  }
  .landing-topbar-actions,
  .titan-header-actions {
    gap: 0.25rem !important;
  }
  .mobile-menu-label {
    display: none !important;
  }
  .titan-mobile-menu-btn {
    padding: 0.35rem 0.45rem !important;
  }
  .titan-lang-btn {
    padding: 0.35rem 0.45rem !important;
  }
}

/* ==========================================================================
   BREAKPOINTS PARA DESKTOP E LAPTOPS (RESTAURAÇÃO TOTAL DE NAVEGAÇÃO HORIZONTAL)
   ========================================================================== */
@media (min-width: 769px) {
  .brand-full-name {
    display: inline !important;
  }
  .landing-brand-sub {
    display: block !important;
  }
  .topbar-page-nav {
    display: flex !important;
  }
  .titan-mobile-menu-btn {
    display: none !important;
  }
}



/* Seletor de Idioma Integrado no Drawer Mobile */
.titan-drawer-lang-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin-bottom: 0.25rem;
}
.titan-drawer-lang-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.titan-drawer-lang-chips {
  display: flex;
  gap: 0.4rem;
}
.titan-drawer-lang-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: 7px;
  background: #11131c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.titan-drawer-lang-chip:hover, .titan-drawer-lang-chip.active {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(245, 158, 11, 0.5);
  color: #fbbf24;
}

/* Prevenção de auto-zoom no iOS Safari (inputs com font-size < 16px causam zoom indesejado) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}