@import "https://fonts.googleapis.com/css2?family=Righteous&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"; /* Base glassy look */ .glassy[data-v-f575a936] { background: rgba(17, 24, 39, 0.35); /* var(--color-bg-primary) with alpha */ backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); border-color: var(--color-bg-secondary); } /* Type accents (border + icon color via currentColor) */ .is-success[data-v-f575a936] { color: var(--color-button-Simulation-Green); } .is-error[data-v-f575a936] { color: var(--color-action-red); } .is-warning[data-v-f575a936] { color: var(--color-button-header-Contrast-Yellow); } .is-info[data-v-f575a936] { color: var(--color-accent); } /* Progress bar with gradient */ .life[data-v-f575a936] { background: linear-gradient(90deg, #3B82F6, #EC4899, #FFC300); animation: life-f575a936 var(--life) linear forwards; } .life.paused[data-v-f575a936] { animation-play-state: paused; } @keyframes life-f575a936 { from { width: 100% } to { width: 0% } } /* Transitions for stacking (top-right) */ .toast-enter-active[data-v-f575a936], .toast-leave-active[data-v-f575a936] { transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease; } .toast-enter-from[data-v-f575a936], .toast-leave-to[data-v-f575a936] { opacity: 0; transform: translateY(-8px) scale(0.98); filter: blur(2px); } .toast-move[data-v-f575a936] { transition: transform 180ms ease; } .app-loader-overlay[data-v-05ef7a10] { position: fixed; inset: 0; background: rgba(7, 11, 25, 0.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; z-index: 999; color: var(--color-text-primary); } .app-loader-overlay__sr[data-v-05ef7a10] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .app-loader-fade-enter-active[data-v-05ef7a10], .app-loader-fade-leave-active[data-v-05ef7a10] { transition: opacity 0.2s ease; } .app-loader-fade-enter-from[data-v-05ef7a10], .app-loader-fade-leave-to[data-v-05ef7a10] { opacity: 0; } .llbuilder-loader-fade-enter-active[data-v-05ef7a10], .llbuilder-loader-fade-leave-active[data-v-05ef7a10] { transition: opacity 220ms ease; } .llbuilder-loader-fade-enter-from[data-v-05ef7a10], .llbuilder-loader-fade-leave-to[data-v-05ef7a10] { opacity: 0; } .llbuilder-loader-overlay[data-v-05ef7a10] { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; background: radial-gradient(circle at center, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 60%), var(--color-bg-primary); } .llbuilder-loader-shell[data-v-05ef7a10] { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .llbuilder-loader-hero-stack[data-v-05ef7a10] { position: relative; width: 10.75rem; height: 10.75rem; display: grid; place-items: center; } .llbuilder-loader-hero-ring[data-v-05ef7a10] { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid color-mix(in srgb, var(--color-accent-contrast) 44%, transparent); box-shadow: 0 0 0.9rem color-mix(in srgb, var(--color-accent) 42%, transparent), inset 0 0 0.9rem color-mix(in srgb, var(--color-accent) 24%, transparent); animation: llbuilder-loader-ring-05ef7a10 2.2s ease-in-out infinite; } .llbuilder-loader-hero[data-v-05ef7a10] { width: 7.5rem; height: 7.5rem; border-radius: 9999px; -o-object-fit: cover; object-fit: cover; border: 1px solid color-mix(in srgb, var(--color-accent-contrast) 62%, transparent); box-shadow: 0 0 1.4rem color-mix(in srgb, var(--color-accent) 58%, transparent); animation: llbuilder-loader-pulse-05ef7a10 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .llbuilder-loader-label[data-v-05ef7a10] { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.92; font-family: 'Righteous', sans-serif; } .llbuilder-loader-label-contrast[data-v-05ef7a10] { color: var(--color-accent-contrast); } .llbuilder-loader-label-accent[data-v-05ef7a10] { color: var(--color-accent); } @keyframes llbuilder-loader-pulse-05ef7a10 { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.04); opacity: 1; } } @keyframes llbuilder-loader-ring-05ef7a10 { 0%, 100% { transform: scale(0.95); opacity: 0.45; } 50% { transform: scale(1.05); opacity: 0.85; } } /*! tailwindcss v4.2.4 | 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-outline-style:solid;--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-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-500:oklch(70.5% .213 47.604);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-yellow-200:oklch(94.5% .129 101.54);--color-green-200:oklch(92.5% .084 155.995);--color-green-500:oklch(72.3% .219 149.579);--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-cyan-400:oklch(78.9% .154 211.53);--color-sky-200:oklch(90.1% .058 230.902);--color-sky-300:oklch(82.8% .111 230.318);--color-sky-500:oklch(68.5% .169 237.323);--color-purple-500:oklch(62.7% .265 303.9);--color-rose-300:oklch(81% .117 11.638);--color-rose-400:oklch(71.2% .194 13.428);--color-rose-500:oklch(64.5% .246 16.439);--color-slate-100:oklch(96.8% .007 247.896);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-5xl:64rem;--container-6xl:72rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-snug:1.375;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--blur-md:12px;--blur-xl:24px;--blur-3xl:64px;--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%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-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{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}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::-moz-placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}::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]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance: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}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.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}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.-top-40{top:calc(var(--spacing) * -40)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-2\.5{top:calc(var(--spacing) * 2.5)}.top-3\.5{top:calc(var(--spacing) * 3.5)}.top-4{top:calc(var(--spacing) * 4)}.top-full{top:100%}.-right-32{right:calc(var(--spacing) * -32)}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-2\.5{right:calc(var(--spacing) * 2.5)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.-bottom-40{bottom:calc(var(--spacing) * -40)}.bottom-0{bottom:calc(var(--spacing) * 0)}.bottom-3{bottom:calc(var(--spacing) * 3)}.-left-32{left:calc(var(--spacing) * -32)}.left-0{left:calc(var(--spacing) * 0)}.left-3{left:calc(var(--spacing) * 3)}.isolate{isolation:isolate}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.z-\[60\]{z-index:60}.z-\[9999\]{z-index:9999}.z-\[99999\]{z-index:99999}.order-1{order:1}.order-2{order:2}.col-span-2{grid-column:span 2/span 2}.col-span-full{grid-column:1/-1}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mx-2{margin-inline:calc(var(--spacing) * 2)}.mx-auto{margin-inline:auto}.-mt-1{margin-top:calc(var(--spacing) * -1)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-10{margin-top:calc(var(--spacing) * 10)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-auto{margin-top:auto}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-8{margin-right:calc(var(--spacing) * 8)}.mb-0{margin-bottom:calc(var(--spacing) * 0)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-5{margin-bottom:calc(var(--spacing) * 5)}.mb-6{margin-bottom:calc(var(--spacing) * 6)}.mb-8{margin-bottom:calc(var(--spacing) * 8)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.mb-16{margin-bottom:calc(var(--spacing) * 16)}.ml-1{margin-left:calc(var(--spacing) * 1)}.ml-2{margin-left:calc(var(--spacing) * 2)}.ml-7{margin-left:calc(var(--spacing) * 7)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-4{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.aspect-\[16\/9\]{aspect-ratio:16/9}.\!h-5{height:calc(var(--spacing) * 5)!important}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-40{height:calc(var(--spacing) * 40)}.h-44{height:calc(var(--spacing) * 44)}.h-56{height:calc(var(--spacing) * 56)}.h-80{height:calc(var(--spacing) * 80)}.h-\[2px\]{height:2px}.h-\[calc\(var\(--llbuilder-vh\,1svh\)\*100\)\]{height:calc(var(--llbuilder-vh,1svh) * 100)}.h-full{height:100%}.max-h-52{max-height:calc(var(--spacing) * 52)}.max-h-56{max-height:calc(var(--spacing) * 56)}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-80{max-height:calc(var(--spacing) * 80)}.max-h-96{max-height:calc(var(--spacing) * 96)}.max-h-\[32rem\]{max-height:32rem}.max-h-\[42vh\]{max-height:42vh}.max-h-\[52vh\]{max-height:52vh}.max-h-\[86vh\]{max-height:86vh}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-\[10rem\]{min-height:10rem}.min-h-\[44px\]{min-height:44px}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.\!w-5{width:calc(var(--spacing) * 5)!important}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2{width:calc(var(--spacing) * 2)}.w-2\/3{width:66.6667%}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-10{width:calc(var(--spacing) * 10)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-40{width:calc(var(--spacing) * 40)}.w-48{width:calc(var(--spacing) * 48)}.w-64{width:calc(var(--spacing) * 64)}.w-80{width:calc(var(--spacing) * 80)}.w-\[72rem\]{width:72rem}.w-\[76rem\]{width:76rem}.w-\[82rem\]{width:82rem}.w-\[640px\]{width:640px}.w-full{width:100%}.w-max{width:-moz-max-content;width:max-content}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-6xl{max-width:var(--container-6xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-\[16rem\]{max-width:16rem}.max-w-\[32rem\]{max-width:32rem}.max-w-\[45\%\]{max-width:45%}.max-w-\[min\(16rem\,calc\(100vw-2rem\)\)\]{max-width:min(16rem,100vw - 2rem)}.max-w-full{max-width:100%}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[5\.5rem\]{min-width:5.5rem}.min-w-\[7rem\]{min-width:7rem}.min-w-\[11rem\]{min-width:11rem}.min-w-\[18rem\]{min-width:18rem}.min-w-\[24rem\]{min-width:24rem}.min-w-\[140px\]{min-width:140px}.min-w-\[150px\]{min-width:150px}.min-w-\[180px\]{min-width:180px}.min-w-full{min-width:100%}.min-w-max{min-width:-moz-max-content;min-width:max-content}.flex-1{flex:1}.flex-none{flex:none}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.origin-top{transform-origin:top}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scale-90{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.resize-y{resize:vertical}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.list-none{list-style-type:none}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-nowrap{flex-wrap:nowrap}.flex-wrap{flex-wrap:wrap}.place-items-center{place-items:center}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.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)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-1\.5{-moz-column-gap:calc(var(--spacing) * 1.5);column-gap:calc(var(--spacing) * 1.5)}:where(.space-x-4>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)))}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[rgba\(255\,255\,255\,0\.06\)\]>:not(:last-child)){border-color:#ffffff0f}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.overflow-y-hidden{overflow-y:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.\!border-2{border-style:var(--tw-border-style)!important;border-width:2px!important}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[hsla\(197\,98\%\,49\%\,0\.55\)\]{border-color:#02b2f78c}.border-\[hsla\(210\,100\%\,60\%\,0\.75\)\]{border-color:#3399ffbf}.border-\[hsla\(220\,13\%\,96\%\,0\.08\)\]{border-color:#f3f4f614}.border-\[rgba\(59\,130\,246\,0\.6\)\]{border-color:#3b82f699}.border-\[rgba\(59\,130\,246\,0\.35\)\]{border-color:#3b82f659}.border-\[rgba\(59\,130\,246\,0\.55\)\]{border-color:#3b82f68c}.border-\[rgba\(148\,163\,184\,0\.2\)\]{border-color:#94a3b833}.border-\[rgba\(148\,163\,184\,0\.4\)\]{border-color:#94a3b866}.border-\[rgba\(148\,163\,184\,0\.18\)\]{border-color:#94a3b82e}.border-\[rgba\(148\,163\,184\,0\.24\)\]{border-color:#94a3b83d}.border-\[rgba\(148\,163\,184\,0\.25\)\]{border-color:#94a3b840}.border-\[rgba\(148\,163\,184\,0\.32\)\]{border-color:#94a3b852}.border-\[rgba\(148\,163\,184\,0\.35\)\]{border-color:#94a3b859}.border-\[rgba\(148\,163\,184\,0\.45\)\]{border-color:#94a3b873}.border-\[rgba\(245\,158\,11\,0\.5\)\]{border-color:#f59e0b80}.border-\[rgba\(255\,87\,87\,0\.35\)\]{border-color:#ff575759}.border-\[rgba\(255\,255\,255\,0\.1\)\]{border-color:#ffffff1a}.border-\[rgba\(255\,255\,255\,0\.06\)\]{border-color:#ffffff0f}.border-\[rgba\(255\,255\,255\,0\.08\)\]{border-color:#ffffff14}.border-\[rgba\(255\,255\,255\,0\.12\)\]{border-color:#ffffff1f}.border-\[rgba\(255\,255\,255\,0\.14\)\]{border-color:#ffffff24}.border-\[var\(--color-accent\)\],.border-\[var\(--color-accent\)\]\/20{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--color-accent\)\]\/20{border-color:color-mix(in oklab, var(--color-accent) 20%, transparent)}}.border-\[var\(--color-bg-primary\)\]{border-color:var(--color-bg-primary)}.border-\[var\(--color-bg-secondary\)\]{border-color:var(--color-bg-secondary)}.border-\[var\(--color-text-primary\)\]{border-color:var(--color-text-primary)}.border-amber-300\/40{border-color:#ffd23666}@supports (color:color-mix(in lab, red, red)){.border-amber-300\/40{border-color:color-mix(in oklab, var(--color-amber-300) 40%, transparent)}}.border-orange-300\/35{border-color:#ffb96d59}@supports (color:color-mix(in lab, red, red)){.border-orange-300\/35{border-color:color-mix(in oklab, var(--color-orange-300) 35%, transparent)}}.border-sky-300\/30{border-color:#77d4ff4d}@supports (color:color-mix(in lab, red, red)){.border-sky-300\/30{border-color:color-mix(in oklab, var(--color-sky-300) 30%, transparent)}}.border-slate-200\/35{border-color:#e2e8f059}@supports (color:color-mix(in lab, red, red)){.border-slate-200\/35{border-color:color-mix(in oklab, var(--color-slate-200) 35%, transparent)}}.border-transparent{border-color:#0000}.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-white\/15{border-color:#ffffff26}@supports (color:color-mix(in lab, red, red)){.border-white\/15{border-color:color-mix(in oklab, var(--color-white) 15%, transparent)}}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.border-white\/60{border-color:#fff9}@supports (color:color-mix(in lab, red, red)){.border-white\/60{border-color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.border-t-transparent{border-top-color:#0000}.\!border-b-\[var\(--color-accent-contrast\)\]{border-bottom-color:var(--color-accent-contrast)!important}.bg-\[hsla\(197\,98\%\,49\%\,0\.14\)\]{background-color:#02b2f724}.bg-\[hsla\(210\,100\%\,60\%\,0\.2\)\]{background-color:#39f3}.bg-\[hsla\(220\,13\%\,96\%\,0\.12\)\]{background-color:#f3f4f61f}.bg-\[hsla\(220\,13\%\,96\%\,0\.14\)\]{background-color:#f3f4f624}.bg-\[rgba\(0\,0\,0\,0\.6\)\]{background-color:#0009}.bg-\[rgba\(0\,0\,0\,0\.8\)\]{background-color:#000c}.bg-\[rgba\(0\,0\,0\,0\.15\)\]{background-color:#00000026}.bg-\[rgba\(0\,0\,0\,0\.18\)\]{background-color:#0000002e}.bg-\[rgba\(0\,0\,0\,0\.25\)\]{background-color:#00000040}.bg-\[rgba\(0\,0\,0\,0\.35\)\]{background-color:#00000059}.bg-\[rgba\(2\,6\,23\,0\.2\)\]{background-color:#02061733}.bg-\[rgba\(2\,6\,23\,0\.4\)\]{background-color:#02061766}.bg-\[rgba\(2\,6\,23\,0\.32\)\]{background-color:#02061752}.bg-\[rgba\(2\,6\,23\,0\.35\)\]{background-color:#02061759}.bg-\[rgba\(2\,6\,23\,0\.45\)\]{background-color:#02061773}.bg-\[rgba\(2\,6\,23\,0\.72\)\]{background-color:#020617b8}.bg-\[rgba\(15\,23\,42\,0\.3\)\]{background-color:#0f172a4d}.bg-\[rgba\(15\,23\,42\,0\.4\)\]{background-color:#0f172a66}.bg-\[rgba\(15\,23\,42\,0\.5\)\]{background-color:#0f172a80}.bg-\[rgba\(15\,23\,42\,0\.6\)\]{background-color:#0f172a99}.bg-\[rgba\(15\,23\,42\,0\.22\)\]{background-color:#0f172a38}.bg-\[rgba\(15\,23\,42\,0\.25\)\]{background-color:#0f172a40}.bg-\[rgba\(15\,23\,42\,0\.28\)\]{background-color:#0f172a47}.bg-\[rgba\(15\,23\,42\,0\.35\)\]{background-color:#0f172a59}.bg-\[rgba\(15\,23\,42\,0\.45\)\]{background-color:#0f172a73}.bg-\[rgba\(15\,23\,42\,0\.55\)\]{background-color:#0f172a8c}.bg-\[rgba\(15\,23\,42\,0\.95\)\]{background-color:#0f172af2}.bg-\[rgba\(17\,24\,39\,0\.92\)\]{background-color:#111827eb}.bg-\[rgba\(34\,197\,94\,0\.16\)\]{background-color:#22c55e29}.bg-\[rgba\(34\,197\,94\,0\.18\)\]{background-color:#22c55e2e}.bg-\[rgba\(59\,130\,246\,0\.12\)\]{background-color:#3b82f61f}.bg-\[rgba\(59\,130\,246\,0\.14\)\]{background-color:#3b82f624}.bg-\[rgba\(74\,222\,128\,0\.18\)\]{background-color:#4ade802e}.bg-\[rgba\(120\,53\,15\,0\.25\)\]{background-color:#78350f40}.bg-\[rgba\(220\,38\,38\,0\.12\)\]{background-color:#dc26261f}.bg-\[rgba\(239\,68\,68\,0\.18\)\]{background-color:#ef44442e}.bg-\[rgba\(244\,63\,94\,0\.16\)\]{background-color:#f43f5e29}.bg-\[rgba\(248\,113\,113\,0\.18\)\]{background-color:#f871712e}.bg-\[rgba\(250\,204\,21\,0\.18\)\]{background-color:#facc152e}.bg-\[rgba\(255\,255\,255\,0\.02\)\]{background-color:#ffffff05}.bg-\[rgba\(255\,255\,255\,0\.03\)\]{background-color:#ffffff08}.bg-\[rgba\(255\,255\,255\,0\.06\)\]{background-color:#ffffff0f}.bg-\[rgba\(255\,255\,255\,0\.08\)\]{background-color:#ffffff14}.bg-\[var\(--color-accent\)\],.bg-\[var\(--color-accent\)\]\/20{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-accent\)\]\/20{background-color:color-mix(in oklab, var(--color-accent) 20%, transparent)}}.bg-\[var\(--color-accent\)\]\/80{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-accent\)\]\/80{background-color:color-mix(in oklab, var(--color-accent) 80%, transparent)}}.bg-\[var\(--color-action-red\)\]\/20{background-color:var(--color-action-red)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--color-action-red\)\]\/20{background-color:color-mix(in oklab, var(--color-action-red) 20%, transparent)}}.bg-\[var\(--color-bg-primary\)\]{background-color:var(--color-bg-primary)}.bg-\[var\(--color-bg-secondary\)\]{background-color:var(--color-bg-secondary)}.bg-\[var\(--color-surface\)\]{background-color:var(--color-surface)}.bg-\[var\(--color-surface-muted\)\]{background-color:var(--color-surface-muted)}.bg-amber-400\/20{background-color:#fcbb0033}@supports (color:color-mix(in lab, red, red)){.bg-amber-400\/20{background-color:color-mix(in oklab, var(--color-amber-400) 20%, transparent)}}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-emerald-400{background-color:var(--color-emerald-400)}.bg-emerald-500\/15{background-color:#00bb7f26}@supports (color:color-mix(in lab, red, red)){.bg-emerald-500\/15{background-color:color-mix(in oklab, var(--color-emerald-500) 15%, transparent)}}.bg-orange-500\/20{background-color:#fe6e0033}@supports (color:color-mix(in lab, red, red)){.bg-orange-500\/20{background-color:color-mix(in oklab, var(--color-orange-500) 20%, transparent)}}.bg-rose-400{background-color:var(--color-rose-400)}.bg-rose-500\/15{background-color:#ff235726}@supports (color:color-mix(in lab, red, red)){.bg-rose-500\/15{background-color:color-mix(in oklab, var(--color-rose-500) 15%, transparent)}}.bg-sky-500\/15{background-color:#00a5ef26}@supports (color:color-mix(in lab, red, red)){.bg-sky-500\/15{background-color:color-mix(in oklab, var(--color-sky-500) 15%, transparent)}}.bg-slate-300\/20{background-color:#cad5e233}@supports (color:color-mix(in lab, red, red)){.bg-slate-300\/20{background-color:color-mix(in oklab, var(--color-slate-300) 20%, transparent)}}.bg-transparent{background-color:#0000}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-white\/\[0\.045\]{background-color:#ffffff0b}@supports (color:color-mix(in lab, red, red)){.bg-white\/\[0\.045\]{background-color:color-mix(in oklab, var(--color-white) 4.5%, transparent)}}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[linear-gradient\(135deg\,rgba\(14\,165\,233\,0\.14\)\,rgba\(15\,23\,42\,0\.35\)\)\]{background-image:linear-gradient(135deg,#0ea5e924,#0f172a59)}.from-\[\#0055A4\]{--tw-gradient-from:#0055a4;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-\[var\(--color-accent\)\]\/30{--tw-gradient-from:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.from-\[var\(--color-accent\)\]\/30{--tw-gradient-from:color-mix(in oklab, var(--color-accent) 30%, transparent)}}.from-\[var\(--color-accent\)\]\/30{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-cyan-400\/10{--tw-gradient-via:#00d2ef1a}@supports (color:color-mix(in lab, red, red)){.via-cyan-400\/10{--tw-gradient-via:color-mix(in oklab, var(--color-cyan-400) 10%, transparent)}}.via-cyan-400\/10{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-white{--tw-gradient-via:var(--color-white);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[\#EF4135\]{--tw-gradient-to:#ef4135;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-500\/30{--tw-gradient-to:#ac4bff4d}@supports (color:color-mix(in lab, red, red)){.to-purple-500\/30{--tw-gradient-to:color-mix(in oklab, var(--color-purple-500) 30%, transparent)}}.to-purple-500\/30{--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))}.mask-repeat{-webkit-mask-repeat:repeat;mask-repeat:repeat}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.\!py-1\.5{padding-block:calc(var(--spacing) * 1.5)!important}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-1{padding-top:calc(var(--spacing) * 1)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-20{padding-top:calc(var(--spacing) * 20)}.pt-\[clamp\(1rem\,2vw\,1\.5rem\)\]{padding-top:clamp(1rem,2vw,1.5rem)}.pr-0{padding-right:calc(var(--spacing) * 0)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pr-10{padding-right:calc(var(--spacing) * 10)}.pr-24{padding-right:calc(var(--spacing) * 24)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pl-1{padding-left:calc(var(--spacing) * 1)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-5{padding-left:calc(var(--spacing) * 5)}.pl-6{padding-left:calc(var(--spacing) * 6)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-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-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.7rem\]{font-size:.7rem}.text-\[0\.8rem\]{font-size:.8rem}.text-\[0\.9rem\]{font-size:.9rem}.text-\[0\.65rem\]{font-size:.65rem}.text-\[0\.68rem\]{font-size:.68rem}.text-\[0\.72rem\]{font-size:.72rem}.text-\[0\.75rem\]{font-size:.75rem}.text-\[0\.85rem\]{font-size:.85rem}.text-\[0\.875rem\]{font-size:.875rem}.text-\[0\.6875rem\]{font-size:.6875rem}.text-\[0\.9375rem\]{font-size:.9375rem}.text-\[1\.05rem\]{font-size:1.05rem}.text-\[1rem\]{font-size:1rem}.text-\[10px\]{font-size:10px}.text-\[11\.5px\]{font-size:11.5px}.text-\[11px\]{font-size:11px}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.leading-7{--tw-leading:calc(var(--spacing) * 7);line-height:calc(var(--spacing) * 7)}.leading-8{--tw-leading:calc(var(--spacing) * 8);line-height:calc(var(--spacing) * 8)}.leading-\[1\.05\]{--tw-leading:1.05;line-height:1.05}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-snug{--tw-leading:var(--leading-snug);line-height:var(--leading-snug)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-\[0\.04em\]{--tw-tracking:.04em;letter-spacing:.04em}.tracking-\[0\.06em\]{--tw-tracking:.06em;letter-spacing:.06em}.tracking-\[0\.08em\]{--tw-tracking:.08em;letter-spacing:.08em}.tracking-\[0\.16em\]{--tw-tracking:.16em;letter-spacing:.16em}.tracking-\[0\.22em\]{--tw-tracking:.22em;letter-spacing:.22em}.tracking-\[0\.25em\]{--tw-tracking:.25em;letter-spacing:.25em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.text-\[\#3B82F6\]{color:#3b82f6}.text-\[\#0055A4\]{color:#0055a4}.text-\[\#EF4135\]{color:#ef4135}.text-\[rgb\(134\,239\,172\)\]{color:#86efac}.text-\[rgb\(253\,164\,175\)\]{color:#fda4af}.text-\[var\(--color-accent\)\]{color:var(--color-accent)}.text-\[var\(--color-accent-contrast\)\]{color:var(--color-accent-contrast)}.text-\[var\(--color-action-red\)\]{color:var(--color-action-red)}.text-\[var\(--color-danger\)\]{color:var(--color-danger)}.text-\[var\(--color-success\)\]{color:var(--color-success)}.text-\[var\(--color-text-muted\)\]{color:var(--color-text-muted)}.text-\[var\(--color-text-primary\)\]{color:var(--color-text-primary)}.text-\[var\(--color-text-secondary\)\]{color:var(--color-text-secondary)}.text-\[var\(--color-warning\,\#fbbf24\)\]{color:var(--color-warning,#fbbf24)}.text-amber-200{color:var(--color-amber-200)}.text-emerald-300{color:var(--color-emerald-300)}.text-green-200{color:var(--color-green-200)}.text-green-500{color:var(--color-green-500)}.text-orange-200{color:var(--color-orange-200)}.text-red-200{color:var(--color-red-200)}.text-red-400{color:var(--color-red-400)}.text-red-500{color:var(--color-red-500)}.text-rose-300{color:var(--color-rose-300)}.text-sky-200{color:var(--color-sky-200)}.text-slate-100{color:var(--color-slate-100)}.text-white{color:var(--color-white)}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-yellow-200{color:var(--color-yellow-200)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.placeholder-slate-400::-moz-placeholder{color:var(--color-slate-400)}.placeholder-slate-400::placeholder{color:var(--color-slate-400)}.accent-\[var\(--color-accent\)\]{accent-color:var(--color-accent)}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-85{opacity:.85}.opacity-90{opacity:.9}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_0_0_1px_hsla\(210\,100\%\,60\%\,0\.25\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#3399ff40);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[0_28px_70px_rgba\(15\,23\,42\,0\.35\)\]{--tw-shadow:0 28px 70px var(--tw-shadow-color,#0f172a59);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)}.ring,.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[rgba\(59\,130\,246\,0\.35\)\]{--tw-ring-color:#3b82f659}.ring-\[var\(--color-bg-primary\)\]{--tw-ring-color:var(--color-bg-primary)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.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,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);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,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter\!{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)!important}.backdrop-blur{--tw-backdrop-blur:blur(8px);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-xl{--tw-backdrop-blur:blur(var(--blur-xl));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{backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.\[watch\:getLadderLogic\]{watch:getLadderLogic}.block-1{block-size:calc(var(--spacing) * 1)}.placeholder\:text-\[var\(--color-text-secondary\)\]::-moz-placeholder{color:var(--color-text-secondary)}.placeholder\:text-\[var\(--color-text-secondary\)\]::placeholder{color:var(--color-text-secondary)}.placeholder\:opacity-60::-moz-placeholder{opacity:.6}.placeholder\:opacity-60::placeholder{opacity:.6}.first\:border-t-0:first-child{border-top-style:var(--tw-border-style);border-top-width:0}.first\:pt-0:first-child{padding-top:calc(var(--spacing) * 0)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media (hover:hover){.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-y-\[-1px\]:hover{--tw-translate-y:-1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:border-\[var\(--color-accent\)\]:hover,.hover\:border-\[var\(--color-accent\)\]\/40:hover{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--color-accent\)\]\/40:hover{border-color:color-mix(in oklab, var(--color-accent) 40%, transparent)}}.hover\:bg-\[hsla\(220\,13\%\,96\%\,0\.1\)\]:hover{background-color:#f3f4f61a}.hover\:bg-\[hsla\(220\,13\%\,96\%\,0\.2\)\]:hover{background-color:#f3f4f633}.hover\:bg-\[rgba\(30\,64\,175\,0\.2\)\]:hover{background-color:#1e40af33}.hover\:bg-\[rgba\(59\,130\,246\,0\.2\)\]:hover{background-color:#3b82f633}.hover\:bg-\[rgba\(59\,130\,246\,0\.08\)\]:hover{background-color:#3b82f614}.hover\:bg-\[rgba\(255\,255\,255\,0\.04\)\]:hover{background-color:#ffffff0a}.hover\:bg-\[rgba\(255\,255\,255\,0\.05\)\]:hover{background-color:#ffffff0d}.hover\:bg-\[rgba\(255\,255\,255\,0\.06\)\]:hover{background-color:#ffffff0f}.hover\:bg-\[rgba\(255\,255\,255\,0\.08\)\]:hover{background-color:#ffffff14}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:text-\[var\(--color-accent\)\]:hover{color:var(--color-accent)}.hover\:text-\[var\(--color-text-primary\)\]:hover{color:var(--color-text-primary)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[0_10px_30px_rgba\(59\,130\,246\,0\.25\)\]:hover{--tw-shadow:0 10px 30px var(--tw-shadow-color,#3b82f640);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--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)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-\[var\(--color-accent\)\]:focus{--tw-ring-color:var(--color-accent)}.focus\:outline-none:focus,.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.disabled\:opacity-70:disabled{opacity:.7}@media (min-width:40rem){.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:w-72{width:calc(var(--spacing) * 72)}.sm\:w-auto{width:auto}.sm\:min-w-\[6rem\]{min-width:6rem}.sm\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:justify-between{justify-content:space-between}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:gap-3{gap:calc(var(--spacing) * 3)}.sm\:p-5{padding:calc(var(--spacing) * 5)}.sm\:px-3{padding-inline:calc(var(--spacing) * 3)}.sm\:px-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.sm\:px-4{padding-inline:calc(var(--spacing) * 4)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.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\:sticky{position:sticky}.md\:top-0{top:calc(var(--spacing) * 0)}.md\:top-6{top:calc(var(--spacing) * 6)}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:col-span-full{grid-column:1/-1}.md\:mt-0{margin-top:calc(var(--spacing) * 0)}.md\:mt-6{margin-top:calc(var(--spacing) * 6)}.md\:mt-7{margin-top:calc(var(--spacing) * 7)}.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:h-72{height:calc(var(--spacing) * 72)}.md\:w-56{width:calc(var(--spacing) * 56)}.md\:w-auto{width:auto}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:grid-cols-\[minmax\(0\,1\.45fr\)_minmax\(20rem\,0\.85fr\)\]{grid-template-columns:minmax(0,1.45fr) minmax(20rem,.85fr)}.md\:grid-cols-\[minmax\(0\,12rem\)_minmax\(0\,1fr\)\]{grid-template-columns:minmax(0,12rem) minmax(0,1fr)}.md\:flex-row{flex-direction:row}.md\:items-center{align-items:center}.md\:items-start{align-items:flex-start}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:calc(var(--spacing) * 4)}:where(.md\:space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}.md\:p-4{padding:calc(var(--spacing) * 4)}.md\:p-5{padding:calc(var(--spacing) * 5)}.md\:p-6{padding:calc(var(--spacing) * 6)}.md\:p-8{padding:calc(var(--spacing) * 8)}.md\:p-10{padding:calc(var(--spacing) * 10)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:px-4{padding-inline:calc(var(--spacing) * 4)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.md\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.md\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.md\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.md\:text-\[0\.95rem\]{font-size:.95rem}.md\:text-\[2\.15rem\]{font-size:2.15rem}}@media (min-width:64rem){.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-end{align-items:flex-end}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}:where(.lg\:space-x-6>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)))}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\:text-right{text-align:right}.lg\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.lg\:text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.lg\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}@media (min-width:80rem){.xl\:col-span-1{grid-column:span 1/span 1}.xl\:row-span-2{grid-row:span 2/span 2}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:flex-row{flex-direction:row}.xl\:justify-between{justify-content:space-between}}}:root{--font-family-sans:"Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--color-bg-primary:#111827;--color-bg-secondary:#1f2937;--color-panel:#111827e6;--color-panel-strong:#0f172af5;--color-panel-soft:#1f2937b8;--color-accent:#3b82f6;--color-accent-contrast:#ec4899;--color-text-primary:#f9fafb;--color-text-secondary:#afb3bc;--color-action-red:#f43f5e;--color-button-header-Contrast-Yellow:#ffc300;--color-button-header-Contrast-Blue:#3b82f6;--color-button-Simulation-Green:#14b8a6;--color-button-Simulation-Red:#f43f5e;--color-borders-dividers:#e6c4fb;--color-focus-ring:#3b82f65c;--color-soft-glow:#ec489929;--llb-bg:#0b1220;--llb-bg-soft:#111827;--llb-panel:#111827;--llb-panel-strong:#0f172a;--llb-panel-soft:#1f2937;--llb-text-strong:#f9fafb;--llb-text-muted:#afb3bc;--llb-border:#e6c4fb;--llb-border-strong:#e6c4fb;--llb-accent:#3b82f6;--llb-accent-strong:#ec4899;--webhmi-bg:var(--llb-bg);--webhmi-panel:var(--color-panel);--webhmi-panel-strong:var(--color-panel-strong);--webhmi-panel-soft:var(--color-panel-soft);--webhmi-border:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--webhmi-border:color-mix(in srgb, var(--color-borders-dividers) 24%, transparent)}}:root{--webhmi-border-strong:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--webhmi-border-strong:color-mix(in srgb, var(--color-borders-dividers) 42%, transparent)}}:root{--webhmi-confirm:var(--color-button-Simulation-Green);--webhmi-confirm-dark:var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){:root{--webhmi-confirm-dark:color-mix(in srgb, var(--color-button-Simulation-Green) 70%, #020617 30%)}}:root{--webhmi-glow-blue:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){:root{--webhmi-glow-blue:color-mix(in srgb, var(--color-accent) 24%, transparent)}}:root{--webhmi-glow-pink:var(--color-accent-contrast)}@supports (color:color-mix(in lab, red, red)){:root{--webhmi-glow-pink:color-mix(in srgb, var(--color-accent-contrast) 18%, transparent)}}:root{--llb-action-ease:cubic-bezier(.16, 1, .3, 1);--llb-control-bg:var(--color-panel)}@supports (color:color-mix(in lab, red, red)){:root{--llb-control-bg:color-mix(in srgb, var(--color-panel) 78%, transparent)}}:root{--llb-control-bg-hover:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){:root{--llb-control-bg-hover:color-mix(in srgb, var(--color-panel-soft) 84%, transparent)}}:root{--llb-control-border:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--llb-control-border:color-mix(in srgb, var(--color-borders-dividers) 22%, transparent)}}:root{--llb-control-border-strong:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--llb-control-border-strong:color-mix(in srgb, var(--color-borders-dividers) 42%, transparent)}}:root{--llb-control-shadow:0 10px 24px #0206172e;--llb-dialog-radius:.875rem;--llb-dialog-border:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-border:color-mix(in srgb, var(--color-borders-dividers) 30%, transparent)}}:root{--llb-dialog-surface:linear-gradient(180deg, var(--color-panel-strong), var(--color-panel))}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-surface:linear-gradient(180deg, color-mix(in srgb, var(--color-panel-strong) 96%, transparent), color-mix(in srgb, var(--color-panel) 94%, transparent))}}:root{--llb-dialog-section-bg:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-section-bg:color-mix(in srgb, var(--color-panel-soft) 84%, transparent)}}:root{--llb-dialog-section-bg-hover:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-section-bg-hover:color-mix(in srgb, var(--color-panel-soft) 92%, transparent)}}:root{--llb-dialog-section-border:var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-section-border:color-mix(in srgb, var(--color-borders-dividers) 26%, transparent)}}:root{--llb-dialog-table-row:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-table-row:color-mix(in srgb, var(--color-panel-soft) 46%, transparent)}}:root{--llb-dialog-table-row-hover:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){:root{--llb-dialog-table-row-hover:color-mix(in srgb, var(--color-accent) 8%, transparent)}}:root{--avatar-core-start:#9ee7ff;--avatar-core-mid:#4f46e5;--avatar-core-end:#111827;--avatar-halo:#22d3ee8a;--avatar-ring:#38bdf894;--avatar-caption-bg:linear-gradient(170deg, #0f172af0, #111827e6);--avatar-caption-border:#94a3b85c;--avatar-caption-text:#f8fafcfa}:root[data-platform-theme=light],body[data-platform-theme=light],#app[data-platform-theme=light]{--color-bg-primary:#f8fafc;--color-bg-secondary:#fff;--color-panel:#ffffffeb;--color-panel-strong:#eef2f7f5;--color-panel-soft:#e2e8f0b8;--color-accent:#2563eb;--color-accent-contrast:#be185d;--color-text-primary:#111827;--color-text-secondary:#526173;--color-action-red:#be123c;--color-button-header-Contrast-Yellow:#b45309;--color-button-header-Contrast-Blue:#2563eb;--color-button-Simulation-Green:#0f766e;--color-button-Simulation-Red:#be123c;--color-borders-dividers:#cbd5e1;--color-focus-ring:#2563eb57;--color-soft-glow:#2563eb1f;--llb-bg:#f8fafc;--llb-bg-soft:#eef2f7;--llb-panel:#fff;--llb-panel-strong:#eef2f7;--llb-panel-soft:#e2e8f0;--llb-text-strong:#111827;--llb-text-muted:#526173;--llb-border:#cbd5e1;--llb-border-strong:#94a3b8;--llb-accent:#2563eb;--llb-accent-strong:#be185d;--webhmi-bg:#f8fafc;--webhmi-panel:#ffffffeb;--webhmi-panel-strong:#eef2f7f5;--webhmi-panel-soft:#e2e8f0b8;--webhmi-border:#cbd5e1b3;--webhmi-border-strong:#94a3b8d1;--webhmi-confirm:#0f766e;--webhmi-confirm-dark:#115e59;--webhmi-glow-blue:#2563eb24;--webhmi-glow-pink:#be185d1a;--llb-control-bg:#ffffffbd;--llb-control-bg-hover:#eef2f7e6;--llb-control-border:#94a3b861;--llb-control-border-strong:#2563eb5c;--llb-control-shadow:0 10px 24px #0f172a1a;--avatar-core-start:#dbeafe;--avatar-core-mid:#2563eb;--avatar-core-end:#eff6ff;--avatar-halo:#2563eb38;--avatar-ring:#2563eb80;--avatar-caption-bg:linear-gradient(170deg, #fffffff5, #eef2f7f0);--avatar-caption-border:#2563eb3d;--avatar-caption-text:#111827}:root[data-platform-theme=pink],body[data-platform-theme=pink],#app[data-platform-theme=pink]{--color-bg-primary:#fff7fb;--color-bg-secondary:#fff;--color-panel:#ffffffeb;--color-panel-strong:#fff1f7f5;--color-panel-soft:#fde6f2b3;--color-accent:#be185d;--color-accent-contrast:#7c3aed;--color-text-primary:#251923;--color-text-secondary:#6f5a68;--color-action-red:#be123c;--color-button-header-Contrast-Yellow:#a16207;--color-button-header-Contrast-Blue:#7c3aed;--color-button-Simulation-Green:#0f766e;--color-button-Simulation-Red:#be123c;--color-borders-dividers:#f3c4d8;--color-focus-ring:#be185d57;--color-soft-glow:#be185d29;--llb-bg:#fff7fb;--llb-bg-soft:#fff1f7;--llb-panel:#fff;--llb-panel-strong:#fff1f7;--llb-panel-soft:#fde6f2;--llb-text-strong:#251923;--llb-text-muted:#6f5a68;--llb-border:#f3c4d8;--llb-border-strong:#e78fb6;--llb-accent:#be185d;--llb-accent-strong:#7c3aed;--webhmi-bg:#fff7fb;--webhmi-panel:#ffffffeb;--webhmi-panel-strong:#fff1f7f5;--webhmi-panel-soft:#fde6f2b8;--webhmi-border:#f3c4d8b8;--webhmi-border-strong:#e78fb6d6;--webhmi-confirm:#0f766e;--webhmi-confirm-dark:#115e59;--webhmi-glow-blue:#7c3aed1f;--webhmi-glow-pink:#be185d29;--llb-control-bg:#ffffffbd;--llb-control-bg-hover:#fff1f7e6;--llb-control-border:#e78fb65c;--llb-control-border-strong:#be185d61;--llb-control-shadow:0 10px 24px #be185d1a;--avatar-core-start:#ffe4f0;--avatar-core-mid:#be185d;--avatar-core-end:#7c3aed;--avatar-halo:#be185d3d;--avatar-ring:#7c3aed75;--avatar-caption-bg:linear-gradient(170deg, #fffffff5, #fff1f7f0);--avatar-caption-border:#be185d42;--avatar-caption-text:#251923}:root[data-platform-theme=dynamic],body[data-platform-theme=dynamic],#app[data-platform-theme=dynamic]{--color-bg-primary:#060912;--color-bg-secondary:#0b1020;--color-panel:#0b1020eb;--color-panel-strong:#10172af5;--color-panel-soft:#0a1223c2;--color-accent:#00e5ff;--color-accent-contrast:#ff3df2;--color-text-primary:#e6f7ff;--color-text-secondary:#8fb7c9;--color-action-red:#ff3864;--color-button-header-Contrast-Yellow:#facc15;--color-button-header-Contrast-Blue:#00e5ff;--color-button-Simulation-Green:#39ff88;--color-button-Simulation-Red:#ff3864;--color-borders-dividers:#2de2e6;--color-focus-ring:#00e5ff6b;--color-soft-glow:#ff3df22e;--llb-bg:#060912;--llb-bg-soft:#0b1020;--llb-panel:#0b1020;--llb-panel-strong:#10172a;--llb-panel-soft:#111a34;--llb-text-strong:#e6f7ff;--llb-text-muted:#8fb7c9;--llb-border:#2de2e6;--llb-border-strong:#00e5ff;--llb-accent:#00e5ff;--llb-accent-strong:#ff3df2;--webhmi-bg:#060912;--webhmi-panel:#0b1020eb;--webhmi-panel-strong:#10172af5;--webhmi-panel-soft:#111a34c2;--webhmi-border:#2de2e647;--webhmi-border-strong:#00e5ff75;--webhmi-confirm:#39ff88;--webhmi-confirm-dark:#118c62;--webhmi-glow-blue:#00e5ff3d;--webhmi-glow-pink:#ff3df233;--llb-control-bg:#0b1020bd;--llb-control-bg-hover:#111a34e6;--llb-control-border:#2de2e647;--llb-control-border-strong:#00e5ff7a;--llb-control-shadow:0 10px 24px #00e5ff1a;--avatar-core-start:#ccfbff;--avatar-core-mid:#00e5ff;--avatar-core-end:#38106b;--avatar-halo:#00e5ff6b;--avatar-ring:#ff3df294;--avatar-caption-bg:linear-gradient(170deg, #060912fa, #10172af0);--avatar-caption-border:#2de2e661;--avatar-caption-text:#e6f7ff}body{font-family:var(--font-family-sans);background-color:var(--color-bg-primary);color:var(--color-text-primary);overflow-x:hidden}body>.relative.min-h-screen{animation:12s ease-in-out infinite alternate subtle-glow}.aurora-effect{background:radial-gradient(600px circle at 50% 50%, var(--llb-accent,var(--color-accent)), var(--llb-accent-strong,var(--color-accent-contrast)), var(--color-action-red), transparent 80%);width:100%;height:100%;position:fixed;top:0;left:0}@supports (color:color-mix(in lab, red, red)){.aurora-effect{background:radial-gradient(600px circle at 50% 50%, color-mix(in srgb, var(--llb-accent,var(--color-accent)) 18%, transparent), color-mix(in srgb, var(--llb-accent-strong,var(--color-accent-contrast)) 12%, transparent), color-mix(in srgb, var(--color-action-red) 7%, transparent), transparent 80%)}}.aurora-effect{z-index:0;pointer-events:none;transition:background .2s linear}#main-header{backdrop-filter:blur(12px)saturate(150%);z-index:50;background-color:#11182726;width:100%;margin:0 auto;padding:.75rem 1rem;transition:background-color .3s,box-shadow .3s,transform .3s;animation:8s ease-in-out infinite alternate header-glow;position:fixed;top:0;left:0;right:0;overflow:visible;box-shadow:0 4px 16px #3b77f71a,0 2px 8px #f43e590d}#main-header:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;z-index:-1;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background:linear-gradient(120deg,#3b82f666,#ffc30033,#ec48994d);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}#main-header.scrolled{background-color:#111827cc;box-shadow:0 4px 16px #3b77f71a,0 2px 8px #f43e590d}.accent-strip{background:linear-gradient(90deg,#3b82f6,#ec4899,#ffc300) 0 0/200% 200%;border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;width:100%;height:2px;animation:4s infinite shimmer;position:absolute;bottom:0;left:0}.accent-strip-top{background:linear-gradient(90deg,#3b82f6,#ec4899,#ffc300) 0 0/200% 200%;border-top-left-radius:1rem;border-top-right-radius:1rem;width:100%;height:2px;animation:4s infinite shimmer;position:absolute;top:0;left:0}.accent-strip-left{border-top-right-radius:inherit;border-bottom-right-radius:inherit;pointer-events:none;background:linear-gradient(#3b82f6,#ec4899,#ffc300) 0 0/200% 200%;width:2px;animation:4s infinite shimmer;position:absolute;top:0;bottom:0;right:0}#main-footer{backdrop-filter:blur(12px)saturate(150%);z-index:50;background-color:#11182726;width:100%;margin:0 auto;padding:.75rem 1rem;transition:background-color .3s,box-shadow .3s,transform .3s;animation:8s ease-in-out infinite alternate header-glow;position:relative;bottom:0;left:0;right:0;overflow:visible;box-shadow:0 4px 16px #3b77f71a,0 2px 8px #f43e590d}#main-footer:before{content:"";border-radius:inherit;-webkit-mask-composite:xor;pointer-events:none;z-index:-1;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;background:linear-gradient(120deg,#3b82f666,#ffc30033,#ec48994d);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.analog-header{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.dialog-title{letter-spacing:.01em;color:var(--color-accent-contrast);justify-content:center;align-items:center;gap:.6rem;font-family:Righteous,sans-serif;font-size:1.5rem;font-weight:800;display:inline-flex}.dialog-title svg{width:1.5rem;height:1.5rem;color:var(--color-accent)}.title-text{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35rem;display:inline-flex}.title-primary{color:var(--color-accent-contrast)}.title-secondary{color:var(--color-accent)}.header-subtitle{max-width:48rem;color:var(--color-text-secondary);margin:0;font-size:.95rem}.header-helper{max-width:48rem;color:var(--color-text-secondary);margin:.25rem 0 0;font-size:.85rem}.header-actions{justify-content:center;align-items:center;gap:.75rem;display:flex}.status-banner{color:#cfe4ff;background:#3b82f626;border:1px solid #3b82f659;border-radius:999px;padding:.35rem .75rem;font-size:.85rem}.status-banner.error{color:var(--color-action-red);background:#ff575729;border-color:#ff575759}.status-banner.success{color:#d1fae5;background:#10b98129;border-color:#10b98159}.analog-tabs{background:#0f172a59;border:1px solid #ffffff14;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.35rem;display:inline-flex}.analog-tab-btn{color:#ffffffa6;cursor:pointer;background:0 0;border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .9rem;font-weight:600;transition:background .18s,color .18s,transform .18s;display:inline-flex}.analog-tab-btn:hover,.analog-tab-btn:focus-visible{color:#ffffffe6;background:#ffffff14}.analog-tab-btn.active{color:#fff;background:#4884ff40;box-shadow:0 8px 20px #4884ff52}.analog-tab-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.analog-tab-step{color:#0f172abf;letter-spacing:.02em;background:#ffffff24;border-radius:9999px;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.75rem;font-weight:700;transition:background .18s,color .18s;display:inline-flex}.analog-tab-btn.active .analog-tab-step{background:var(--color-accent);color:var(--color-bg-elevated,#0f172a)}.preset-table{border-collapse:separate;border-spacing:0;width:100%;min-width:100%}.preset-table thead{text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-secondary);background:#ffffff08;font-size:.75rem}.preset-table th,.preset-table td{text-align:left;padding:.85rem 1rem}.preset-table thead th{border-bottom:1px solid #ffffff0f}.preset-table tbody td{border-top:1px solid #ffffff0a}.preset-table tbody tr:first-child td{border-top-color:#0000}.preset-row{isolation:isolate;border-radius:.85rem;position:relative}.preset-row:after{content:"";opacity:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 20% 20%,#3b82f624,#0000 55%),linear-gradient(120deg,#3b82f633,#3b82f61a);border:1px solid #3b82f659;border-radius:.75rem;transition:opacity .22s,transform .22s,box-shadow .22s;position:absolute;inset:.15rem;transform:scale(.975)}.preset-row--selected:after{opacity:1;transform:scale(1);box-shadow:0 14px 30px #3b82f63d}.preset-empty-row{text-align:center;color:var(--color-text-secondary);padding:2.5rem 1rem;font-size:.95rem}.section{padding-top:3rem;padding-bottom:3rem}@media (min-width:1024px){.section{padding-top:4rem;padding-bottom:4rem}}.section-sep{background:linear-gradient(90deg,#0000,#f3f4f624,#0000);width:100%;height:1px;margin:1.25rem 0}.eyebrow{text-transform:uppercase;letter-spacing:.3em;color:var(--color-text-secondary);opacity:.95;font-size:.75rem}.panel{backdrop-filter:blur(10px);background:#f3f4f608;border:1px solid #f3f4f61f;border-radius:1.25rem}.card{background:#f3f4f608;border:1px solid #f3f4f61f;border-radius:.75rem}.card-hover{transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}.card-hover:hover{background:#f3f4f60f;border-color:#f3f4f640;transform:translateY(-2px)}.chip{letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-secondary);background:#f3f4f60f;border:1px solid #f3f4f62e;border-radius:9999px;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.mk-btn-primary,.mk-btn-secondary{cursor:pointer;border:1px solid #0000;border-radius:.9rem;justify-content:center;align-items:center;padding:1rem 2rem;font-weight:700;transition:opacity .18s,transform .18s,background .18s,border-color .18s;display:inline-flex}.mk-btn-primary{color:#fff;background:var(--color-action-red)}.mk-btn-primary:hover,.mk-btn-primary:focus-visible{opacity:.92;outline:none;transform:translateY(-1px)}.mk-btn-secondary{color:var(--color-text-primary);background:#f3f4f60d;border-color:#f3f4f61a}.mk-btn-secondary:hover,.mk-btn-secondary:focus-visible{background:#f3f4f61a;border-color:#f3f4f62e;outline:none;transform:translateY(-1px)}.mk-btn-primary:disabled,.mk-btn-secondary:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-primary,.btn-secondary{cursor:pointer;border:1px solid #0000;border-radius:.75rem;padding:.75rem 1.1rem;font-size:.95rem;font-weight:700;transition:transform .16s,box-shadow .18s,background .16s,border-color .16s}.btn-primary{color:#0b1224;background:linear-gradient(120deg,#3b82f6e6,#38bdf8e6);border-color:#3b82f699;box-shadow:0 12px 30px #3b82f659}.btn-primary:hover,.btn-primary:focus-visible{outline:none;transform:translateY(-1px);box-shadow:0 14px 36px #3b82f66b}.btn-secondary{color:var(--color-accent-contrast);background:#ffffff0a;border-color:#ffffff1f}.btn-secondary:hover,.btn-secondary:focus-visible{background:#ffffff14;outline:none;transform:translateY(-1px);box-shadow:0 10px 24px #00000038}@keyframes shimmer{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes header-glow{0%,to{background-color:#11182726}50%{background-color:#11182740}}@keyframes subtle-glow{0%,to{background-color:#1a202d40}50%{background-color:#22293a59}}#main-header nav a{transition:color .3s}#main-header.scrolled nav a{color:var(--color-text-primary)}.glass-panel{-webkit-overflow-scrolling:touch;background-clip:padding-box;background-color:var(--color-panel);-webkit-backdrop-filter:blur(32px);box-shadow:0 18px 44px var(--color-accent), 0 10px 26px var(--color-accent-contrast);border:1px solid #0000;border-radius:1rem;position:relative;overflow-x:hidden}@supports (color:color-mix(in lab, red, red)){.glass-panel{box-shadow:0 18px 44px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 10px 26px color-mix(in srgb, var(--color-accent-contrast) 8%, transparent)}}.glass-panel{z-index:0;transition:background-color .3s,border-color .3s,transform .3s;animation:6s ease-in-out infinite alternate subtle-glow}.glass-panel:before{content:"";border-radius:inherit;background:linear-gradient(120deg, var(--color-accent), var(--color-button-header-Contrast-Yellow), var(--color-accent-contrast));padding:1px;position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.glass-panel:before{background:linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 42%, transparent), color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 24%, transparent), color-mix(in srgb, var(--color-accent-contrast) 34%, transparent))}}.glass-panel:before{-webkit-mask-composite:xor;pointer-events:none;z-index:-1;-webkit-mask-composite:xor;-webkit-mask-source-type:auto,auto;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.glass-panel:after{content:"";background:linear-gradient(90deg, var(--color-accent), var(--color-accent-contrast), var(--color-button-header-Contrast-Yellow));border-top-left-radius:inherit;border-top-right-radius:inherit;pointer-events:none;z-index:1;background-size:200% 200%;width:100%;height:3px;animation:4s infinite shimmer;position:absolute;top:0;left:0}.glass-panel-light{background-color:var(--color-panel-soft);-webkit-backdrop-filter:blur(24px);border:1px solid var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){.glass-panel-light{border:1px solid color-mix(in srgb, var(--color-borders-dividers) 34%, transparent)}}.glass-panel-light{border-radius:.75rem;transition:background-color .3s,border-color .3s,transform .3s}.glass-panel-subtle{background-color:var(--color-panel-soft);-webkit-backdrop-filter:blur(20px);box-shadow:0 12px 30px var(--color-accent), 0 6px 16px var(--color-accent);position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.glass-panel-subtle{box-shadow:0 12px 30px color-mix(in srgb, var(--color-accent) 12%, transparent), 0 6px 16px color-mix(in srgb, var(--color-accent) 8%, transparent)}}.glass-panel-subtle{z-index:0;transition:background-color .3s,border-color .3s,transform .3s}.glass-panel-subtle:before{content:"";border-radius:inherit;pointer-events:none;background:linear-gradient(120deg, var(--color-accent), var(--color-accent-contrast));position:absolute;inset:0}@supports (color:color-mix(in lab, red, red)){.glass-panel-subtle:before{background:linear-gradient(120deg, color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent-contrast) 12%, transparent))}}.glass-panel-subtle:before{opacity:.6;z-index:-1}.solid-mode .glass-panel,.solid-mode #main-header.scrolled{background-color:var(--color-bg-secondary);-webkit-backdrop-filter:none;border-color:var(--color-text-secondary)}.solid-mode .glass-panel-light{-webkit-backdrop-filter:none;background-color:#2c3a4b}.solid-mode .glass-panel-subtle{-webkit-backdrop-filter:none;box-shadow:none;background-color:#2c3a4b}.solid-mode .aurora-effect{display:none}.llb-dialog{flex-direction:column;gap:1rem;width:100%;display:flex}.llb-dialog__header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.llb-dialog__heading{align-items:flex-start;gap:.75rem;min-width:0;display:flex}.llb-dialog__icon{border:1px solid var(--color-borders-dividers);border-radius:.75rem;flex:none;place-items:center;width:2.35rem;height:2.35rem;display:inline-grid}@supports (color:color-mix(in lab, red, red)){.llb-dialog__icon{border:1px solid color-mix(in srgb, var(--color-borders-dividers) 34%, transparent)}}.llb-dialog__icon{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog__icon{background:color-mix(in srgb, var(--color-accent) 14%, transparent)}}.llb-dialog__icon{color:var(--color-accent);box-shadow:inset 0 1px #ffffff14}.llb-dialog__title{color:var(--color-text-primary);letter-spacing:0;margin:0;font-size:clamp(1.15rem,2vw,1.45rem);font-weight:850;line-height:1.15}.llb-dialog__subtitle{color:var(--color-text-secondary);margin:.35rem 0 0;font-size:.88rem;line-height:1.45}.llb-dialog__body,.llb-dialog__section{min-width:0}.llb-dialog__section{border:1px solid var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){.llb-dialog__section{border:1px solid color-mix(in srgb, var(--color-borders-dividers) 28%, transparent)}}.llb-dialog__section{background:var(--color-panel-soft);border-radius:.75rem}@supports (color:color-mix(in lab, red, red)){.llb-dialog__section{background:color-mix(in srgb, var(--color-panel-soft) 88%, transparent)}}.llb-dialog__section{padding:.9rem;box-shadow:inset 0 1px #ffffff0b}.llb-dialog__section-title{color:var(--color-text-primary);text-transform:uppercase;margin:0 0 .55rem;font-size:.82rem;font-weight:800;line-height:1.25}.llb-dialog__footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.7rem;padding-top:.2rem;display:flex}.llb-control{isolation:isolate;border:1px solid var(--llb-control-border);background:var(--llb-control-bg);min-height:2.45rem;color:var(--color-text-primary);box-shadow:inset 0 1px 0 #ffffff0f, var(--llb-control-shadow);-webkit-backdrop-filter:blur(18px);transition:transform .36s var(--llb-action-ease), border-color .22s ease, background .22s ease, box-shadow .3s ease, color .18s ease;border-radius:.55rem;justify-content:center;align-items:center;gap:.45rem;padding:.55rem .95rem;font-size:.86rem;font-weight:800;line-height:1;display:inline-flex;position:relative;overflow:hidden;transform:translateZ(0)}.llb-control:before{content:"";z-index:-1;border-radius:inherit;opacity:0;background:#ffffff14;transition:opacity .26s;position:absolute;inset:0}.llb-control:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff29,#0000);width:52%;position:absolute;top:-80%;bottom:-80%;left:-70%;transform:translate(-120%)rotate(12deg)}.llb-control:not(:disabled):hover{border-color:var(--llb-control-border-strong);background:var(--llb-control-bg-hover);box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #02061742, 0 0 18px var(--color-accent);transform:translateY(-1px)scale(1.012)}@supports (color:color-mix(in lab, red, red)){.llb-control:not(:disabled):hover{box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #02061742, 0 0 18px color-mix(in srgb, var(--color-accent) 10%, transparent)}}.llb-control:not(:disabled):hover:before,.llb-control.is-active:before,.llb-control[aria-pressed=true]:before{opacity:.2}.llb-control:not(:disabled):hover:after,.llb-control.is-active:after,.llb-control[aria-pressed=true]:after{animation:llb-glass-sheen .76s var(--llb-action-ease)}.llb-control:active:not(:disabled){transform:translateY(0)scale(.968);box-shadow:inset 0 1px #ffffff0f,0 8px 18px #0206173d}.llb-control:disabled{opacity:.5;cursor:not-allowed}.llb-control--primary{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-control--primary{border-color:color-mix(in srgb, var(--color-accent) 52%, transparent)}}.llb-control--primary{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-control--primary{background:color-mix(in srgb, var(--color-accent) 22%, var(--color-panel-strong))}}.llb-control--primary{color:#f8fafc;box-shadow:inset 0 1px 0 #ffffff1a, 0 14px 34px var(--color-accent), 0 0 18px var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-control--primary{box-shadow:inset 0 1px 0 #ffffff1a, 0 14px 34px color-mix(in srgb, var(--color-accent) 20%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 16%, transparent)}}.llb-control--danger{border-color:var(--color-action-red)}@supports (color:color-mix(in lab, red, red)){.llb-control--danger{border-color:color-mix(in srgb, var(--color-action-red) 62%, transparent)}}.llb-control--danger{background:var(--color-action-red);color:#fff;box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px var(--color-action-red), 0 0 35px var(--color-action-red)}@supports (color:color-mix(in lab, red, red)){.llb-control--danger{box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px color-mix(in srgb, var(--color-action-red) 46%, transparent), 0 0 35px color-mix(in srgb, var(--color-action-red) 26%, transparent)}}.llb-control--success{border-color:var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){.llb-control--success{border-color:color-mix(in srgb, var(--color-button-Simulation-Green) 58%, transparent)}}.llb-control--success{background:var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){.llb-control--success{background:color-mix(in srgb, var(--color-button-Simulation-Green) 68%, #020617 32%)}}.llb-control--success{color:#ecfdf5;box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px var(--color-button-Simulation-Green), 0 0 34px var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){.llb-control--success{box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px color-mix(in srgb, var(--color-button-Simulation-Green) 36%, transparent), 0 0 34px color-mix(in srgb, var(--color-button-Simulation-Green) 16%, transparent)}}.llb-control--warning{border-color:var(--color-button-header-Contrast-Yellow)}@supports (color:color-mix(in lab, red, red)){.llb-control--warning{border-color:color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 62%, transparent)}}.llb-control--warning{background:var(--color-button-header-Contrast-Yellow)}@supports (color:color-mix(in lab, red, red)){.llb-control--warning{background:color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 72%, #020617 28%)}}.llb-control--warning{color:#fff7d6}.llb-segmented-control{isolation:isolate;border:1px solid var(--llb-control-border);background:var(--color-panel-strong);border-radius:.55rem;align-items:center;gap:.25rem;min-height:2.45rem;display:inline-flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.llb-segmented-control{background:color-mix(in srgb, var(--color-panel-strong) 66%, transparent)}}.llb-segmented-control{-webkit-backdrop-filter:blur(18px);padding:.25rem;box-shadow:inset 0 1px #ffffff0e,0 14px 28px #02061729}.llb-field{gap:.4rem;min-width:0;display:grid}.llb-status-chip{border:1px solid var(--color-borders-dividers);border-radius:999px;align-items:center;gap:.4rem;min-height:1.65rem;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.llb-status-chip{border:1px solid color-mix(in srgb, var(--color-borders-dividers) 28%, transparent)}}.llb-status-chip{background:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){.llb-status-chip{background:color-mix(in srgb, var(--color-panel-soft) 82%, transparent)}}.llb-status-chip{color:var(--color-text-secondary);padding:.25rem .65rem;font-size:.72rem;font-weight:800}.llb-field-label{color:var(--color-text-secondary);text-transform:uppercase;margin-bottom:.38rem;font-size:.74rem;font-weight:800;display:block}.llb-field__error{color:var(--color-action-red);font-size:.78rem;font-weight:700;line-height:1.35}.llb-input,.llb-select{border:1px solid var(--color-borders-dividers);border-radius:.55rem;width:100%;min-height:2.5rem}@supports (color:color-mix(in lab, red, red)){.llb-input,.llb-select{border:1px solid color-mix(in srgb, var(--color-borders-dividers) 28%, transparent)}}.llb-input,.llb-select{background:var(--color-panel-strong)}@supports (color:color-mix(in lab, red, red)){.llb-input,.llb-select{background:color-mix(in srgb, var(--color-panel-strong) 90%, transparent)}}.llb-input,.llb-select{color:var(--color-text-primary);font:inherit;padding:.55rem .75rem}.llb-input:focus-visible,.llb-select:focus-visible,.llb-control:focus-visible{box-shadow:0 0 0 3px var(--color-focus-ring);outline:none}.llb-theme-preview-grid{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.75rem;display:grid}.llb-theme-option{isolation:isolate;border:1px solid var(--llb-control-border);background:var(--llb-control-bg);min-height:8.5rem;color:var(--color-text-primary);text-align:left;box-shadow:inset 0 1px 0 #ffffff0e, var(--llb-control-shadow);-webkit-backdrop-filter:blur(18px);transition:transform .36s var(--llb-action-ease), border-color .22s ease, background .22s ease, box-shadow .3s ease;border-radius:.75rem;flex-direction:column;gap:.55rem;padding:.85rem;display:flex;position:relative;overflow:hidden}.llb-theme-option:after{content:"";opacity:0;pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff29,#0000);width:52%;position:absolute;top:-80%;bottom:-80%;left:-70%;transform:translate(-120%)rotate(12deg)}.llb-theme-option:hover{border-color:var(--llb-control-border-strong);background:var(--llb-control-bg-hover);transform:translateY(-1px)scale(1.01)}.llb-theme-option:hover:after{animation:llb-glass-sheen .76s var(--llb-action-ease)}.llb-theme-option[aria-checked=true]{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-theme-option[aria-checked=true]{border-color:color-mix(in srgb, var(--color-accent) 62%, transparent)}}.llb-theme-option[aria-checked=true]{background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-theme-option[aria-checked=true]{background:color-mix(in srgb, var(--color-accent) 14%, var(--color-panel-strong))}}.llb-theme-option[aria-checked=true]{box-shadow:inset 0 1px 0 #ffffff1a, 0 14px 34px var(--color-accent), 0 0 18px var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-theme-option[aria-checked=true]{box-shadow:inset 0 1px 0 #ffffff1a, 0 14px 34px color-mix(in srgb, var(--color-accent) 18%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 14%, transparent)}}.llb-theme-option__name{font-weight:850;line-height:1.15}.llb-theme-option__description{color:var(--color-text-secondary);font-size:.78rem;line-height:1.35}.llb-theme-swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:.25rem;margin-top:auto;display:grid}.llb-theme-swatch{border:1px solid #ffffff24;border-radius:999px;min-height:.55rem}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item){isolation:isolate;border:1px solid var(--llb-control-border);background:var(--llb-control-bg);min-height:2.45rem;color:var(--color-text-primary);box-shadow:inset 0 1px 0 #ffffff0f, var(--llb-control-shadow);-webkit-backdrop-filter:blur(18px);transition:transform .36s var(--llb-action-ease), border-color .22s ease, background .22s ease, box-shadow .3s ease, color .18s ease, opacity .18s ease;border-radius:.55rem;position:relative;overflow:hidden;transform:translateZ(0)}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):before{content:"";z-index:-1;border-radius:inherit;opacity:0;background:#ffffff14;transition:opacity .26s;position:absolute;inset:0}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):after{content:"";opacity:0;pointer-events:none;background:linear-gradient(100deg,#0000,#ffffff29,#0000);width:52%;position:absolute;top:-80%;bottom:-80%;left:-70%;transform:translate(-120%)rotate(12deg)}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):hover:not(:disabled){border-color:var(--llb-control-border-strong);background:var(--llb-control-bg-hover);box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #02061742, 0 0 18px var(--color-accent);transform:translateY(-1px)scale(1.012)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):hover:not(:disabled){box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #02061742, 0 0 18px color-mix(in srgb, var(--color-accent) 10%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):hover:not(:disabled):before,.llb-dialog-panel.llb-dialog-panel :is(.btn-cta.active,.btn-secondary.active,.btn-glass.active,.btn-danger.active,.footer-secondary.active,.primary-button.active,.ghost-button.active,.accent-glow-button.active,.stripe-cta-btn.active,.quick-chip.active,.suggestion-chip.active,.chip-button.active,.pager-btn.active,.tab-chip.is-active,.role-dropdown__item.is-active,.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,[role=tab][aria-selected=true],[aria-pressed=true]):before{opacity:.2}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):hover:not(:disabled):after,.llb-dialog-panel.llb-dialog-panel :is(.btn-cta.active,.btn-secondary.active,.btn-glass.active,.btn-danger.active,.footer-secondary.active,.primary-button.active,.ghost-button.active,.accent-glow-button.active,.stripe-cta-btn.active,.quick-chip.active,.suggestion-chip.active,.chip-button.active,.pager-btn.active,.tab-chip.is-active,.role-dropdown__item.is-active,.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,[role=tab][aria-selected=true],[aria-pressed=true]):after{animation:llb-glass-sheen .76s var(--llb-action-ease)}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){border-color:var(--llb-accent,var(--color-accent))}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){border-color:color-mix(in srgb, var(--llb-accent,var(--color-accent)) 34%, #ffffff2e)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){background:radial-gradient(circle at 50% -80%, #ffffff3d, transparent 56%), linear-gradient(180deg, var(--color-panel-strong), var(--color-bg-primary))}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){background:radial-gradient(circle at 50% -80%, #ffffff3d, transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--color-panel-strong) 74%, #fff 5%), color-mix(in srgb, var(--color-bg-primary) 82%, var(--llb-accent,var(--color-accent)) 18%))}}.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){color:#f8fafc;text-shadow:0 1px #02061747;box-shadow:inset 0 1px 0 #ffffff29, inset 0 -1px 0 #0206175c, 0 14px 30px #02061738, 0 0 20px var(--llb-accent,var(--color-accent))}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-cta,.primary-button,.accent-glow-button,.stripe-cta-btn--high-priority):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger){box-shadow:inset 0 1px 0 #ffffff29, inset 0 -1px 0 #0206175c, 0 14px 30px #02061738, 0 0 20px color-mix(in srgb, var(--llb-accent,var(--color-accent)) 8%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-green,.llb-control--success){border-color:var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-green,.llb-control--success){border-color:color-mix(in srgb, var(--color-button-Simulation-Green) 52%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-green,.llb-control--success){background:var(--color-button-Simulation-Green)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-green,.llb-control--success){background:color-mix(in srgb, var(--color-button-Simulation-Green) 68%, #020617 32%)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-green,.llb-control--success){color:#ecfdf5}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.btn-danger,.llb-control--danger){border-color:var(--color-action-red)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.btn-danger,.llb-control--danger){border-color:color-mix(in srgb, var(--color-action-red) 58%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.btn-danger,.llb-control--danger){background:var(--color-action-red);color:#fff;box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px var(--color-action-red), 0 0 35px var(--color-action-red)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.btn-danger,.llb-control--danger){box-shadow:inset 0 1px 0 #ffffff1f, 0 0 20px color-mix(in srgb, var(--color-action-red) 44%, transparent), 0 0 35px color-mix(in srgb, var(--color-action-red) 24%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(button,.btn-cta,.llb-control):disabled,.llb-dialog-panel.llb-dialog-panel :is(button,.btn-cta,.llb-control)[aria-disabled=true]{cursor:not-allowed;opacity:.52;box-shadow:none;transform:none}.llb-dialog-panel.llb-dialog-panel :is(.dialog-tabs,.feedback-tabs,.dashboard-tabs,.analog-tabs,.llb-segmented-control,[role=tablist]){isolation:isolate;border:1px solid var(--llb-control-border);background:var(--color-panel-strong);border-radius:.55rem;justify-content:center;align-items:center;gap:.35rem;display:inline-flex;position:relative;overflow:hidden}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.dialog-tabs,.feedback-tabs,.dashboard-tabs,.analog-tabs,.llb-segmented-control,[role=tablist]){background:color-mix(in srgb, var(--color-panel-strong) 66%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.dialog-tabs,.feedback-tabs,.dashboard-tabs,.analog-tabs,.llb-segmented-control,[role=tablist]){-webkit-backdrop-filter:blur(18px);padding:.28rem;box-shadow:inset 0 1px #ffffff0e,0 14px 28px #02061729}.llb-dialog-panel.llb-dialog-panel :is(.tab-btn,.feedback-tab-btn,.analog-tab-btn,.tab-chip,[role=tab]){z-index:1;color:var(--color-text-secondary);box-shadow:none;letter-spacing:0;background:0 0;border-color:#0000;border-radius:.48rem;min-height:2.15rem;padding:.46rem .82rem;font-weight:850;position:relative}.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){border-color:color-mix(in srgb, var(--color-accent) 52%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){background:color-mix(in srgb, var(--color-accent) 22%, var(--color-panel-strong))}}.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){color:#f8fafc;text-shadow:0 0 18px #ffffff2e;box-shadow:inset 0 1px 0 #ffffff1f, 0 10px 24px var(--color-accent), 0 0 18px var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.tab-btn.active,.feedback-tab-btn.active,.analog-tab-btn.active,.tab-chip.is-active,[role=tab][aria-selected=true]){box-shadow:inset 0 1px 0 #ffffff1f, 0 10px 24px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 12%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.chip,.llb-status-chip,.coupon-chip,.coupon-meta-chip,.trust-chip,.success-chip,.warning-chip,.sentiment-chip,.status-chip,.score-chip,.severity-chip,.language-chip){border:1px solid var(--llb-control-border);background:var(--color-panel-soft)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip,.llb-status-chip,.coupon-chip,.coupon-meta-chip,.trust-chip,.success-chip,.warning-chip,.sentiment-chip,.status-chip,.score-chip,.severity-chip,.language-chip){background:color-mix(in srgb, var(--color-panel-soft) 82%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.chip,.llb-status-chip,.coupon-chip,.coupon-meta-chip,.trust-chip,.success-chip,.warning-chip,.sentiment-chip,.status-chip,.score-chip,.severity-chip,.language-chip){color:var(--color-text-secondary);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px #ffffff0e}.llb-dialog-panel.llb-dialog-panel :is(.glass-panel-light,.glass-panel-subtle,.diagram-card,.preset-card,.preview-card,.table-shell,.assistance-table-card,.feedback-table-card){border-color:var(--llb-control-border)!important;background:radial-gradient(circle at 12% 0%, var(--color-accent), transparent 30%), var(--color-panel-soft)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.glass-panel-light,.glass-panel-subtle,.diagram-card,.preset-card,.preview-card,.table-shell,.assistance-table-card,.feedback-table-card){background:radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 30%), color-mix(in srgb, var(--color-panel-soft) 84%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.glass-panel-light,.glass-panel-subtle,.diagram-card,.preset-card,.preview-card,.table-shell,.assistance-table-card,.feedback-table-card){box-shadow:inset 0 1px #ffffff0e,0 14px 32px #02061729}.llb-dialog-panel.llb-dialog-panel .diagram-card:hover{transform:translateY(-1px);border-color:var(--llb-control-border-strong)!important}.llb-dialog-panel.llb-dialog-panel :is(.dialog-title,.headline.dialog-title){color:var(--color-text-primary);letter-spacing:0;justify-content:center;align-items:center;gap:.55rem;margin-block:0 .85rem;font-size:clamp(1.12rem,1.7vw,1.42rem);font-weight:850;line-height:1.15}.llb-dialog-panel.llb-dialog-panel .llb-dialog-content>:is(section,form,div):first-child{width:100%;min-width:0;max-width:100%}.llb-dialog-panel.llb-dialog-panel :is([class*="w-[72rem]"],[class*="w-[76rem]"],[class*="w-[82rem]"],.ladder-library-root,.dashboard-shell,.pid-loop-dialog,.dialog-container,.revision-dialog,.accessibility-settings-dialog,.profile-settings-dialog,.registration-dialog,.feedback-dialog){width:100%!important;min-width:0!important;max-width:100%!important}.llb-dialog-panel.llb-dialog-panel :is(.dashboard-shell,.demographics-grid){width:100%;min-width:0!important}.llb-dialog-panel.llb-dialog-panel :is(.dialog-subtitle,.subtitle,.section-subtitle,.card-subtitle,.field-helper,.field-help,.table-subtitle,.header-subtitle,.timeframe-subtext){color:var(--color-text-secondary);line-height:1.45}.llb-dialog-panel.llb-dialog-panel :is(.section-title,.section-heading,.card-title,.metric-head h3,.chart-title h3,.assistance-table-head h3,.feedback-table-head h3,.pid-timeline-panel__header h3,.assist-panel__eyebrow){color:var(--color-text-primary);letter-spacing:0;font-weight:850}.llb-dialog-panel.llb-dialog-panel :is(.footer-button,.icon-btn,.info-btn,.grade-btn,.retry-btn,.timeframe-btn,.group-filter-button,.filter-select-btn,.mode-toggle__btn,.guided-rung-btn,.assist-panel__action,.social-follow-btn,.affiliate-actions__button){isolation:isolate;border:1px solid var(--llb-control-border);background:var(--llb-control-bg);min-height:2.35rem;color:var(--color-text-primary);box-shadow:inset 0 1px 0 #ffffff0f, var(--llb-control-shadow);-webkit-backdrop-filter:blur(18px);transition:transform .36s var(--llb-action-ease), border-color .22s ease, background .22s ease, box-shadow .3s ease, color .18s ease, opacity .18s ease;border-radius:.55rem;position:relative;overflow:hidden}.llb-dialog-panel.llb-dialog-panel :is(.footer-button,.icon-btn,.info-btn,.grade-btn,.retry-btn,.timeframe-btn,.group-filter-button,.filter-select-btn,.mode-toggle__btn,.guided-rung-btn,.assist-panel__action,.social-follow-btn,.affiliate-actions__button):hover:not(:disabled){border-color:var(--llb-control-border-strong);background:var(--llb-control-bg-hover);box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #0206173d, 0 0 18px var(--color-accent);transform:translateY(-1px)scale(1.01)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.footer-button,.icon-btn,.info-btn,.grade-btn,.retry-btn,.timeframe-btn,.group-filter-button,.filter-select-btn,.mode-toggle__btn,.guided-rung-btn,.assist-panel__action,.social-follow-btn,.affiliate-actions__button):hover:not(:disabled){box-shadow:inset 0 1px 0 #ffffff1a, 0 16px 32px #0206173d, 0 0 18px color-mix(in srgb, var(--color-accent) 10%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.dialog-close,.close-btn,.status-close,.chip-x){border:1px solid var(--llb-control-border);background:var(--llb-control-bg);min-width:2.15rem;min-height:2.15rem;color:var(--color-text-secondary);border-radius:.55rem;place-items:center;display:inline-grid;box-shadow:inset 0 1px #ffffff0e}.llb-dialog-panel.llb-dialog-panel :is(.dialog-close,.close-btn,.status-close,.chip-x):hover:not(:disabled){border-color:var(--llb-control-border-strong);background:var(--llb-control-bg-hover);color:var(--color-text-primary)}.llb-dialog-panel.llb-dialog-panel :is(.glass-card,.card,.panel,.state-card,.metric-card,.chart-card,.kpi-card,.coupon-hero-card,.coupon-observability-panel,.stripe-status-card,.tier-progress-card,.status-card,.summary-card,.selected-card,.step-card,.step-output-card,.example-card,.dictionary-card,.description-card,.outcome-card,.hint-card,.io-card,.quickstart-panel,.verify-panel,.pid-warning-panel,.pid-timeline-panel,.assist-panel,.assist-panel__card,.role-card,.empty-card,.warning-card,.callout-panel,.code-shell,.payment-element-shell,.express-checkout-shell,.table-surface,.data-shell,.table-container,.state-shell){border-radius:.75rem;border:1px solid var(--llb-dialog-section-border)!important;background:radial-gradient(circle at 10% 0%, var(--llb-accent), transparent 34%), var(--llb-dialog-section-bg)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.glass-card,.card,.panel,.state-card,.metric-card,.chart-card,.kpi-card,.coupon-hero-card,.coupon-observability-panel,.stripe-status-card,.tier-progress-card,.status-card,.summary-card,.selected-card,.step-card,.step-output-card,.example-card,.dictionary-card,.description-card,.outcome-card,.hint-card,.io-card,.quickstart-panel,.verify-panel,.pid-warning-panel,.pid-timeline-panel,.assist-panel,.assist-panel__card,.role-card,.empty-card,.warning-card,.callout-panel,.code-shell,.payment-element-shell,.express-checkout-shell,.table-surface,.data-shell,.table-container,.state-shell){background:radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--llb-accent) 6%, transparent), transparent 34%), var(--llb-dialog-section-bg)!important}}.llb-dialog-panel.llb-dialog-panel :is(.glass-card,.card,.panel,.state-card,.metric-card,.chart-card,.kpi-card,.coupon-hero-card,.coupon-observability-panel,.stripe-status-card,.tier-progress-card,.status-card,.summary-card,.selected-card,.step-card,.step-output-card,.example-card,.dictionary-card,.description-card,.outcome-card,.hint-card,.io-card,.quickstart-panel,.verify-panel,.pid-warning-panel,.pid-timeline-panel,.assist-panel,.assist-panel__card,.role-card,.empty-card,.warning-card,.callout-panel,.code-shell,.payment-element-shell,.express-checkout-shell,.table-surface,.data-shell,.table-container,.state-shell){color:var(--color-text-primary);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px #ffffff0e,0 14px 32px #02061726}.llb-dialog-panel.llb-dialog-panel :is(.filter-bar,.toolbar,.data-toolbar,.history-toolbar,.footer-bar,.dialog-footer,.form-footer,.dialog-actions,.footer-actions,.analytics-controls,.revenue-filter-controls,.preset-card__filters,.role-card__controls){border-radius:.75rem;border:1px solid var(--llb-dialog-section-border)!important;background:var(--color-panel-strong)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.filter-bar,.toolbar,.data-toolbar,.history-toolbar,.footer-bar,.dialog-footer,.form-footer,.dialog-actions,.footer-actions,.analytics-controls,.revenue-filter-controls,.preset-card__filters,.role-card__controls){background:color-mix(in srgb, var(--color-panel-strong) 58%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.filter-bar,.toolbar,.data-toolbar,.history-toolbar,.footer-bar,.dialog-footer,.form-footer,.dialog-actions,.footer-actions,.analytics-controls,.revenue-filter-controls,.preset-card__filters,.role-card__controls){-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px #ffffff0d}.llb-dialog-panel.llb-dialog-panel :is(.info-banner,.highlight-card,.preset-banner,.analog-header,.dashboard-header,.guided-header,.coupon-observability-grid>*,.payout-grid>*,.revenue-detail-grid>*,.page-metrics>*,.feedback-secondary-grid>*,.assistance-secondary-grid>*,.role-list>*,.channel-empty,.goal-empty,.page-empty,.sentiment-empty,.assistance-empty,.revenue-empty,.empty-helper,.dropdown-empty,.state-box){color:var(--color-text-primary);-webkit-backdrop-filter:blur(16px);border-radius:.75rem;box-shadow:inset 0 1px #ffffff0e;border:1px solid var(--llb-dialog-section-border)!important;background:var(--llb-dialog-section-bg)!important}.llb-dialog-panel.llb-dialog-panel :is(.dropdown-menu,.role-dropdown,.lifecycle-menu,.preset-select-menu,.select-menu){border:1px solid var(--llb-control-border)!important;background:var(--color-panel-strong)!important;border-radius:.65rem!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.dropdown-menu,.role-dropdown,.lifecycle-menu,.preset-select-menu,.select-menu){background:color-mix(in srgb, var(--color-panel-strong) 92%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.dropdown-menu,.role-dropdown,.lifecycle-menu,.preset-select-menu,.select-menu){color:var(--color-text-primary);-webkit-backdrop-filter:blur(20px);box-shadow:0 18px 42px #02061747}.llb-dialog-panel.llb-dialog-panel :is(.dropdown-option,.role-dropdown__item,.select-option,.lifecycle-option,.delete-mode-option){color:var(--color-text-primary);border-radius:.5rem}.llb-dialog-panel.llb-dialog-panel :is(.dropdown-option:hover,.dropdown-option--active,.role-dropdown__item:hover,.role-dropdown__item--active,.select-option--focus,.lifecycle-option:hover,.delete-mode-option:hover){background:var(--color-accent)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.dropdown-option:hover,.dropdown-option--active,.role-dropdown__item:hover,.role-dropdown__item--active,.select-option--focus,.lifecycle-option:hover,.delete-mode-option:hover){background:color-mix(in srgb, var(--color-accent) 13%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.dropdown-option:hover,.dropdown-option--active,.role-dropdown__item:hover,.role-dropdown__item--active,.select-option--focus,.lifecycle-option:hover,.delete-mode-option:hover){box-shadow:inset 0 0 0 1px var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.dropdown-option:hover,.dropdown-option--active,.role-dropdown__item:hover,.role-dropdown__item--active,.select-option--focus,.lifecycle-option:hover,.delete-mode-option:hover){box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 24%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.timeframe-selector,.mode-toggle,.feedback-tabs,.dialog-tabs,.dashboard-tabs,.analog-tabs){width:-moz-fit-content;width:fit-content;max-width:100%}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control){border:1px solid var(--llb-control-border)!important;background:var(--color-panel-strong)!important;border-radius:.55rem!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control){background:color-mix(in srgb, var(--color-panel-strong) 72%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control){box-shadow:inset 0 1px #ffffff0e,0 10px 24px #0206171f;color:var(--color-text-primary)!important}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap,.field-shell,.select-shell,.textarea-shell,.wise-input-shell,.role-card__field,.code-shell){border:1px solid var(--llb-control-border)!important;background:var(--color-panel-strong)!important;border-radius:.65rem!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap,.field-shell,.select-shell,.textarea-shell,.wise-input-shell,.role-card__field,.code-shell){background:color-mix(in srgb, var(--color-panel-strong) 66%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap,.field-shell,.select-shell,.textarea-shell,.wise-input-shell,.role-card__field,.code-shell){color:var(--color-text-primary);box-shadow:inset 0 1px #ffffff0e,0 10px 24px #0206171a}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap:focus-within,.field-shell:focus-within,.select-shell:focus-within,.textarea-shell:focus-within,.wise-input-shell:focus-within,.role-card__field:focus-within,.code-shell:focus-within){border-color:var(--color-accent)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap:focus-within,.field-shell:focus-within,.select-shell:focus-within,.textarea-shell:focus-within,.wise-input-shell:focus-within,.role-card__field:focus-within,.code-shell:focus-within){border-color:color-mix(in srgb, var(--color-accent) 28%, var(--color-borders-dividers) 18%)!important}}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap:focus-within,.field-shell:focus-within,.select-shell:focus-within,.textarea-shell:focus-within,.wise-input-shell:focus-within,.role-card__field:focus-within,.code-shell:focus-within){box-shadow:inset 0 1px 0 #fff1, 0 12px 24px #02061724, 0 0 0 1px var(--color-accent), 0 0 18px var(--color-accent)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.input-wrap:focus-within,.field-shell:focus-within,.select-shell:focus-within,.textarea-shell:focus-within,.wise-input-shell:focus-within,.role-card__field:focus-within,.code-shell:focus-within){box-shadow:inset 0 1px 0 #fff1, 0 12px 24px #02061724, 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 4%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control):focus{border-color:var(--color-accent)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control):focus{border-color:color-mix(in srgb, var(--color-accent) 28%, var(--color-borders-dividers) 18%)!important}}.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control):focus{box-shadow:inset 0 1px 0 #fff1, 0 10px 22px #0206171f, 0 0 0 1px var(--color-accent), 0 0 16px var(--color-accent)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type=checkbox]):not([type=radio]):not([type=color]),textarea,select,.glass-input,.input-glass,.filter-input,.wise-input,.text-input,.analog-input,.code-input,.select-input,.field-control):focus{box-shadow:inset 0 1px 0 #fff1, 0 10px 22px #0206171f, 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.field-label,label,.toolbar-label,.filter-label){color:var(--color-text-secondary);letter-spacing:0;font-weight:800}.llb-dialog-panel.llb-dialog-panel :is(.text-white,.text-slate-50,.text-gray-50):not(.btn-cta):not(.btn-danger):not(.llb-control--primary):not(.llb-control--danger){color:var(--color-text-primary)!important}.llb-dialog-panel.llb-dialog-panel :is(.text-slate-300,.text-slate-400,.text-gray-300,.text-gray-400){color:var(--color-text-secondary)!important}.llb-dialog-panel.llb-dialog-panel :is(.chip,.llb-status-chip,.coupon-chip,.coupon-meta-chip,.trust-chip,.success-chip,.warning-chip,.sentiment-chip,.status-chip,.score-chip,.severity-chip,.language-chip,.state-chip,.meta-chip,.meta-chip-small,.chip-current,.chip-history) :is(.text-white,.text-slate-50){color:var(--color-text-primary)!important}.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){border-color:var(--color-button-Simulation-Green)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){border-color:color-mix(in srgb, var(--color-button-Simulation-Green) 42%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){background:var(--color-button-Simulation-Green)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){background:color-mix(in srgb, var(--color-button-Simulation-Green) 14%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){color:var(--color-button-Simulation-Green)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-on,.success-chip,.status-pill--success,.state-chip--success){color:color-mix(in srgb, var(--color-button-Simulation-Green) 74%, var(--color-text-primary) 26%)!important}}.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){border-color:var(--color-button-header-Contrast-Yellow)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){border-color:color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 42%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){background:var(--color-button-header-Contrast-Yellow)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){background:color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 13%, transparent)!important}}.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){color:var(--color-button-header-Contrast-Yellow)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.chip-off,.warning-chip,.warning-card,.status-pill--warning,.state-chip--warning){color:color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 70%, var(--color-text-primary) 30%)!important}}.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.status-pill--danger,.state-chip--danger,.field-help--danger){color:var(--color-action-red)!important}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.btn-sim-red,.status-pill--danger,.state-chip--danger,.field-help--danger){color:color-mix(in srgb, var(--color-action-red) 82%, #fff 18%)!important}}.llb-dialog-panel.llb-dialog-panel :is(.data-body,.table-scroll){scrollbar-width:thin;scrollbar-color:var(--color-borders-dividers) transparent;border-radius:.7rem}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.data-body,.table-scroll){scrollbar-color:color-mix(in srgb, var(--color-borders-dividers) 36%, transparent) transparent}}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table){border-collapse:separate;border-spacing:0;width:100%;color:var(--color-text-primary)}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) :is(th,td){border-bottom:1px solid var(--color-borders-dividers)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) :is(th,td){border-bottom:1px solid color-mix(in srgb, var(--color-borders-dividers) 20%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) th{background:var(--color-panel-strong)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) th{background:color-mix(in srgb, var(--color-panel-strong) 72%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) th{color:var(--color-text-secondary);letter-spacing:0;font-weight:850}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) tbody tr{background:0 0;transition:background .18s}.llb-dialog-panel.llb-dialog-panel :is(table,.fancy-table,.yaga-table,.preset-table,.assistance-table,.feedback-table,.revenue-customer-table) tbody tr:hover{background:var(--llb-dialog-table-row-hover)}.llb-dialog-panel.llb-dialog-panel :is(.spinner,.loader,.animate-spin){color:var(--color-accent);border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.llb-dialog-panel.llb-dialog-panel :is(.spinner,.loader,.animate-spin){border-color:color-mix(in srgb, var(--color-accent) 70%, transparent)}}.llb-dialog-panel.llb-dialog-panel :is(.spinner,.loader,.animate-spin){border-top-color:#0000}.llb-dialog-panel.llb-dialog-panel :is(.btn-animate:hover,.card-hover:hover,.metric-card:hover,.chart-card:hover,.dictionary-card:hover,.description-card:hover,.outcome-card:hover,.step-card:hover,.role-card:hover,.preset-card:hover){transform:translateY(-1px)!important}@media (prefers-reduced-motion:reduce){.llb-dialog-panel.llb-dialog-panel :is(.btn-animate,.card-hover,.metric-card,.chart-card,.dictionary-card,.description-card,.outcome-card,.step-card,.role-card,.preset-card,.dropdown-fade-enter-active,.dropdown-fade-leave-active,.dropdown-float-enter-active,.dropdown-float-leave-active,.refresh-icon--spinning){transition:none!important;animation:none!important}}@container (max-width:520px){.llb-dialog-panel.llb-dialog-panel :is(.dialog-tabs,.feedback-tabs,.dashboard-tabs,.analog-tabs,[role=tablist]){justify-content:flex-start;width:100%;overflow-x:auto}.llb-dialog-panel.llb-dialog-panel :is(.tab-btn,.feedback-tab-btn,.analog-tab-btn,.tab-chip,[role=tab]){white-space:nowrap}}@keyframes llb-glass-sheen{0%{opacity:0;transform:translate(-120%)rotate(12deg)}28%{opacity:1}to{opacity:0;transform:translate(360%)rotate(12deg)}}body[data-platform-theme=dynamic]:before{content:"";z-index:-1;pointer-events:none;background:linear-gradient(#2de2e60b 1px,#0000 1px) 0 0/42px 42px,linear-gradient(90deg,#ff3df209 1px,#0000 1px) 0 0/42px 42px,radial-gradient(circle at 18% 10%,#00e5ff29,#0000 34%),radial-gradient(circle at 82% 8%,#ff3df21f,#0000 30%);animation:18s linear infinite dynamic-theme-grid;position:fixed;inset:0}@keyframes dynamic-theme-grid{0%{background-position:0 0,0 0,50%,50%}to{background-position:42px 42px,-42px 42px,50%,50%}}.accent-glow{box-shadow:0 0 25px #3b77f766,0 0 40px #3b77f733}.accent-glow-button{box-shadow:0 0 20px #f43e5980,0 0 35px #f43e594d}.highlight-card{backdrop-filter:blur(24px);z-index:0;background-color:#1f293766;border:1px solid #1f2937;border-radius:1rem;transition:transform .3s,box-shadow .3s,border-color .3s;position:relative;box-shadow:0 10px 25px #3b77f726,0 4px 12px #f43e5914}.highlight-card:hover{border-color:#3b77f780;transform:translateY(-8px)scale(1.03);box-shadow:0 15px 30px #3b77f740,0 6px 18px #f43e591f}.section-header{margin-bottom:1rem;padding-top:.5rem;position:relative}.section-header:before{content:"";width:100%;height:4px;position:absolute;top:0;left:0}.section-separator{background:linear-gradient(90deg,#3b82f6,#ec4899,#ffc300) 0 0/200% 200%;width:33%;height:2px;margin:4rem auto;animation:4s infinite shimmer}.glass-panel h2{margin-bottom:1.5rem;padding-bottom:.25rem;position:relative}.glass-panel h2:after{content:"";border-radius:9999px;width:60%;height:3px;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}.btn-animate{transition:transform .3s}.btn-animate:hover{transform:translateY(-2px)}.btn-animate:active{transform:translateY(0)}.animate-on-scroll{opacity:0;transition:opacity .6s ease-out,transform .6s ease-out;transform:translateY(30px)}.animate-on-scroll.is-visible{opacity:1;transform:translateY(0)}.french-flag-text{letter-spacing:.02em;align-items:center;gap:0;font-weight:800;display:inline-flex}.french-flag-text .flag-blue{color:#0055a4}.french-flag-text .flag-white{color:#fff;text-shadow:0 0 8px #ffffff59}.french-flag-text .flag-red{color:#ef4135}#ai-ideas-input{border:1px solid var(--color-bg-secondary);color:var(--color-text-primary);background-color:#0003}#ai-ideas-input:focus{box-shadow:0 0 0 2px var(--color-bg-primary), 0 0 0 4px var(--color-accent);outline:none}.loader{border:5px solid var(--color-bg-secondary);border-bottom-color:var(--color-accent);box-sizing:border-box;border-radius:50%;width:48px;height:48px;animation:1s linear infinite rotation;display:inline-block}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header-panel{border-radius:1rem;overflow:visible}.header-panel:after{display:none}#language-selector-container{position:relative}#language-dropdown{background-color:var(--color-bg-secondary);border:1px solid var(--color-bg-primary);z-index:60;border-radius:.5rem;margin-top:8px;position:absolute;top:100%;right:0}.builder-button{border:1px solid var(--color-bg-secondary);border-radius:9999px;justify-content:center;align-items:center;width:3rem;height:3rem;transition:background-color .25s,box-shadow .25s;display:flex}.builder-button-small{border:.5px solid var(--color-bg-secondary);border-radius:9999px;justify-content:center;align-items:center;width:1rem;height:1rem;transition:background-color .25s;display:flex}.dragging{filter:drop-shadow(0 0 10px var(--color-bg-secondary))}.builder-button-large{width:calc(var(--btn-scale,1) * 3rem);height:calc(var(--btn-scale,1) * 3rem);border:.5px solid var(--color-bg-secondary);border-radius:9999px;justify-content:center;align-items:center;transition:background-color .3s cubic-bezier(.4,0,.2,1),box-shadow .25s,color .25s;display:flex}.builder-button-large img,.builder-button-large svg{width:calc(var(--btn-scale,1) * var(--icon-size,1.75rem))!important;height:calc(var(--btn-scale,1) * var(--icon-size,1.75rem))!important}.builder-button-extralarge img,.builder-button-extralarge svg{width:calc(var(--btn-scale,1) * var(--icon-size,2.25rem))!important;height:calc(var(--btn-scale,1) * var(--icon-size,2.25rem))!important}.btn-yellow{background-color:var(--color-button-header-Contrast-Yellow);color:#000814}.btn-yellow:hover{background-color:#ffda3c}.btn-yellow:active{background-color:#e6b800}.btn-blue{background-color:var(--color-button-header-Contrast-Blue);color:var(--color-bg-primary)}.btn-blue:hover{background-color:#5aa1ff}.btn-blue:active{background-color:#2d7ae4}.btn-accent{background-color:var(--color-accent);color:var(--color-bg-primary)}.btn-accent:hover{color:#5aa1ff}.btn-accent:active{color:#2d7ae4}.btn-accent-contrast{background-color:var(--color-accent-contrast);color:var(--color-bg-primary)}.btn-accent-contrast:hover{color:#f472b6}.btn-accent-contrast:active{color:#db2777}.btn-sim-green{background-color:var(--color-button-Simulation-Green);color:var(--color-bg-primary)}.btn-sim-green:hover{background-color:#1ed0bd}.btn-sim-green:active{background-color:#0fa595}.btn-sim-red{background-color:var(--color-button-Simulation-Red);color:var(--color-bg-primary)}.btn-sim-red:hover{background-color:#f06ebc}.btn-sim-red:active{background-color:#fa3758}.btn-onboarding{color:#e5e7eb;background:linear-gradient(145deg,#0a0b0f 0%,#151821 45%,#262a35 100%);box-shadow:0 0 0 1px #94a3b859,0 10px 24px #02061780}.btn-onboarding:hover{color:#f8fafc;background:linear-gradient(145deg,#111318 0%,#1b1f2a 48%,#303646 100%)}.btn-onboarding:active{color:#dbe3f1;background:linear-gradient(145deg,#080a0e 0%,#141822 48%,#242b3a 100%)}.btn-onboarding svg{color:#5aa1ff}.btn-onboarding svg .fillable{fill:url(#accent-gradient)!important}.btn-onboarding svg path,.btn-onboarding svg line,.btn-onboarding svg polyline,.btn-onboarding svg rect,.btn-onboarding svg circle,.btn-onboarding svg ellipse{stroke:url(#accent-gradient)!important}.btn-cta{color:#fff;background-color:var(--color-action-red);cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;padding:1rem 1.25rem;font-size:.875rem;font-weight:600;line-height:1;transition:opacity .3s,transform .3s;display:inline-flex}.btn-cta:hover{opacity:.9;transform:translateY(-2px)}.btn-cta:active{transform:translateY(0)}.btn-cta.btn-sim-green{background-color:var(--color-button-Simulation-Green);color:var(--color-bg-primary)}.btn-cta.btn-sim-red{background-color:var(--color-button-Simulation-Red);color:var(--color-bg-primary)}.header-panel .btn-accent:hover{background-color:var(--color-accent);color:var(--color-bg-primary)}.header-panel .btn-accent-contrast:hover{background-color:var(--color-accent-contrast);color:var(--color-bg-primary)}.header-panel .btn-sim-green:hover{background-color:var(--color-button-Simulation-Green);color:var(--color-bg-primary)}.header-panel .btn-sim-red:hover{background-color:var(--color-button-Simulation-Red);color:var(--color-bg-primary)}.header-panel .btn-yellow:hover{background-color:var(--color-button-header-Contrast-Yellow);color:#000814}.header-panel .btn-onboarding:hover{color:#f8fafc;background:linear-gradient(145deg,#111318 0%,#1b1f2a 48%,#303646 100%)}.header-panel .builder-button-large svg .fillable{fill:var(--color-bg-primary)}.header-panel .builder-button-large:hover svg .fillable{fill:url(#accent-gradient)!important}.header-panel .builder-button-large svg{color:var(--color-bg-primary)}.header-panel .builder-button-large:hover svg path,.header-panel .builder-button-large:hover svg line,.header-panel .builder-button-large:hover svg polyline,.header-panel .builder-button-large:hover svg rect,.header-panel .builder-button-large:hover svg circle,.header-panel .builder-button-large:hover svg ellipse{stroke:url(#accent-gradient)!important}.header-panel .builder-button-large svg *{transition:stroke .2s cubic-bezier(.215,.61,.355,1)}.btn-glow{filter:brightness()drop-shadow(0 0 6px)}.cta-button{border-radius:.5rem;justify-content:center;align-items:center;padding:1rem 1.25rem;font-size:.875rem;font-weight:600;line-height:1;transition:all .3s;display:inline-flex;box-shadow:0 0 20px #f43e5980,0 0 35px #f43e594d}.cta-button:hover{opacity:.9;transform:translateY(-2px)}.cta-button:active{transform:translateY(0)}.dialog-enter-active,.dialog-leave-active{transition:opacity .3s,transform .3s}.dialog-enter-from,.dialog-leave-to{opacity:0;transform:scale(.95)}.dialog-overlay-enter-active,.dialog-overlay-leave-active{transition:opacity .3s}.dialog-overlay-enter-from,.dialog-overlay-leave-to{opacity:0}.dialog-panel-enter-active,.dialog-panel-leave-active{transform-origin:50%;transition:transform .3s}.dialog-panel-enter-from,.dialog-panel-leave-to{transform:scaleY(0)}.dialog-content-enter-active,.dialog-content-leave-active{transition:opacity .3s}.dialog-content-enter-from,.dialog-content-leave-to{opacity:0}.logo{align-items:center;gap:.4rem;font-family:Righteous,sans-serif;font-size:1.75rem;font-style:normal;font-weight:400;display:flex}.logo .medusa{color:#ec4899}.logo .digital{color:#3b82f6}@keyframes logo-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.logo-animate{animation:4s ease-in-out infinite alternate logo-pulse;display:inline-block}.header-gradient-bg{background:0 0;position:relative;overflow:visible}@keyframes aurora-shift{0%{background-position:0 0,100% 100%}to{background-position:100% 100%,0 0}}.header-gradient-border{background-clip:padding-box;border:2px solid #0000;position:relative}.header-gradient-border:before{content:"";border-radius:inherit;background:linear-gradient(45deg, var(--color-accent) 0%, var(--color-accent-contrast) 50%, var(--color-button-header-Contrast-Yellow) 100%);pointer-events:none;z-index:-1;background-size:300% 300%;animation:8s infinite gradient-move;position:absolute;inset:-2px}.header-pulse-shadow{animation:4s ease-in-out infinite alternate pulse-shadow}@keyframes pulse-shadow{0%{box-shadow:0 0 12px var(--color-accent)}to{box-shadow:0 0 24px var(--color-accent-contrast)}}.header-inset-accent{position:relative}.header-inset-accent:after{content:"";background:linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-contrast) 50%, var(--color-button-header-Contrast-Yellow) 100%);pointer-events:none;background-size:300% 300%;border-radius:2px;width:4px;height:80%;animation:8s infinite gradient-move;position:absolute;top:10%;right:0}.sub-menu{z-index:100;-webkit-backdrop-filter:blur(8px);background:#11182733 padding-box padding-box;border:2px solid #0000;border-radius:.5rem;position:fixed;overflow:visible}.sub-menu:before{content:"";border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(120deg,#3b82f699 0%,#ec489999 50%,#ffc30099 100%) 0 0/300% 300%;animation:8s infinite gradient-move,4s ease-in-out infinite alternate fade-opacity;position:absolute;inset:-2px}@keyframes gradient-move{0%,to{background-position:0%}50%{background-position:100%}}@keyframes fade-opacity{0%,to{opacity:.3}50%{opacity:.7}}input[type=checkbox]{accent-color:var(--color-accent)}.dropdown-menu{-webkit-backdrop-filter:blur(12px);border:1px solid var(--color-bg-primary);background:#111827eb;border-radius:.75rem;padding:.5rem;box-shadow:0 10px 30px #00000059,0 4px 12px #00000040}.dropdown-float-enter-active,.dropdown-float-leave-active{transform-origin:top;will-change:transform, opacity;transition:opacity .22s,transform .26s cubic-bezier(.16,1,.3,1)}.dropdown-float-enter-from,.dropdown-float-leave-to{opacity:0;transform:translateY(-6px)scale(.98)}.dropdown-menu::-webkit-scrollbar{width:8px}.dropdown-menu::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:8px}.dropdown-menu::-webkit-scrollbar-thumb:hover{background:#ffffff47}.glass-google-btn{-webkit-backdrop-filter:blur(8px);color:#fff;background:#fff3;border:1px solid #fff6;border-radius:12px;align-items:center;padding:.75rem 1rem;transition:background-color .2s,transform .2s;display:flex}.glass-google-btn img{width:20px;margin-right:.5rem}.glass-google-btn:hover{background:#ffffff40;transform:translateY(-1px)}.google-signin-container--glass{width:100%}.google-signin-container--glass .glass-google-native{justify-content:center;align-items:center;gap:.75rem;transition:transform .25s,box-shadow .25s,background .25s;box-shadow:0 18px 45px #3b82f638;-webkit-backdrop-filter:blur(12px)!important;color:#fff!important;background:linear-gradient(135deg,#3b82f6bf 0%,#ec4899bf 50%,#ffc400a6 100%)!important;border:1px solid #ffffff59!important;border-radius:14px!important;width:100%!important;padding:.8rem 1rem!important;display:flex!important}.google-signin-container--glass .glass-google-native:hover{transform:translateY(-2px);box-shadow:0 22px 55px #ec489940;background:linear-gradient(135deg,#3b82f6d9 0%,#ec4899d9 45%,#ffc400bf 100%)!important}.google-signin-container--glass .glass-google-native>div:first-child{border-radius:999px;justify-content:center;align-items:center;padding:.35rem;display:flex;background:#ffffff38!important}.google-signin-container--glass .glass-google-native svg,.google-signin-container--glass .glass-google-native img{width:20px!important;height:20px!important}.google-signin-container--glass .glass-google-native__text{letter-spacing:.01em;font-weight:600;color:inherit!important}@media (prefers-reduced-motion:reduce){body[data-platform-theme=dynamic]:before,.llb-control:after,.llb-theme-option:after,.llb-dialog-panel :is(.btn-cta,.btn-secondary,.btn-glass,.btn-danger,.footer-secondary,.primary-button,.ghost-button,.accent-glow-button,.stripe-cta-btn,.quick-chip,.suggestion-chip,.chip-button,.pager-btn,.tab-chip,.role-dropdown__item):after{animation:none!important}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"";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:"";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"";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-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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:"";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:"";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:"";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-outline-style{syntax:"*";inherits:false;initial-value:solid}@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:"";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-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}} /* ---------- Overlay fade ---------- */ .dialog-overlay-enter-active, .dialog-overlay-leave-active { transition: opacity 300ms ease; } .dialog-overlay-enter-from, .dialog-overlay-leave-to { opacity: 0; } .llb-dialog-overlay { padding: clamp(0.75rem, 2vw, 1.5rem); background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--llb-accent, var(--color-accent)) 16%, transparent), transparent 34%), radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--llb-accent-strong, var(--color-accent-contrast)) 14%, transparent), transparent 32%), rgba(2, 6, 23, 0.66); } /* ---------- Panel reveal: smooth, from center ---------- */ .panel-anim { transform-origin: 50% 50%; transform: translateY(14px) scale(0.968); opacity: 0; backface-visibility: hidden; contain: paint; transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease; } .panel-anim.is-open { transform: translateY(0) scale(1); opacity: 1; } .llb-dialog-shell { box-sizing: border-box; width: min(calc(100vw - 1.5rem), var(--llb-dialog-width, 28rem)); max-width: calc(100vw - 1.5rem); } .llb-dialog-panel { isolation: isolate; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 1.5rem); padding: clamp(1.1rem, 2vw, 1.75rem) !important; border-radius: var(--llb-dialog-radius, 0.875rem); border: 1px solid var(--llb-dialog-border, var(--llb-control-border)); background: radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--llb-accent) 12%, transparent), transparent 34%), radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--llb-accent-strong) 10%, transparent), transparent 32%), var(--llb-dialog-surface, linear-gradient(180deg, var(--color-panel-strong), var(--color-panel))); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.085), 0 24px 72px rgba(0, 0, 0, 0.42), 0 0 42px color-mix(in srgb, var(--llb-accent) 10%, transparent); } .llb-dialog-panel.glass-panel::before { background: linear-gradient( 120deg, color-mix(in srgb, var(--llb-accent) 54%, transparent), color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 18%, transparent), color-mix(in srgb, var(--llb-accent-strong) 42%, transparent) ); opacity: 0.92; } .llb-dialog-panel.glass-panel::after { height: 2px; background: linear-gradient( 90deg, color-mix(in srgb, var(--llb-accent) 84%, transparent), color-mix(in srgb, var(--llb-accent-strong) 72%, transparent), color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 54%, transparent) ); opacity: 0.88; } .llb-dialog-panel[data-dialog-size="6xl"], .llb-dialog-panel[data-dialog-size="7xl"], .llb-dialog-panel[data-dialog-size="none"] { padding: clamp(1rem, 1.4vw, 1.35rem) !important; } .llb-dialog-density--compact { padding: clamp(0.85rem, 1.6vw, 1.2rem) !important; } .llb-dialog-density--compact .dialog-body { padding-right: 0.1rem; } .llb-dialog-variant--data, .llb-dialog-variant--dashboard, .llb-dialog-variant--library, .llb-dialog-variant--workflow, .llb-dialog-variant--settings, .llb-dialog-variant--auth, .llb-dialog-variant--commerce { --llb-dialog-radius: 0.75rem; } .llb-dialog-variant--data, .llb-dialog-variant--dashboard { --llb-dialog-width: min(82rem, calc(100vw - 1.25rem)); width: min(82rem, calc(100vw - 1.25rem)); } .llb-dialog-variant--library, .llb-dialog-variant--workflow { --llb-dialog-width: min(76rem, calc(100vw - 1.25rem)); width: min(76rem, calc(100vw - 1.25rem)); } .llb-dialog-variant--settings, .llb-dialog-variant--commerce { --llb-dialog-width: min(64rem, calc(100vw - 1.25rem)); width: min(64rem, calc(100vw - 1.25rem)); } .llb-dialog-variant--auth { --llb-dialog-width: min(30rem, calc(100vw - 1.25rem)); width: min(30rem, calc(100vw - 1.25rem)); } .llb-dialog-variant--destructive { --llb-dialog-border: color-mix(in srgb, var(--color-action-red) 34%, transparent); } .llb-dialog-variant--workspace { --llb-dialog-width: min(96rem, calc(100vw - 1rem)); width: min(96rem, calc(100vw - 1rem)); max-height: calc(100vh - 0.75rem); border-radius: 0.75rem; } .llb-dialog-shell:focus { outline: none; } .llb-dialog-shell :is(button, [role="button"], input, select, textarea):focus-visible { outline: 2px solid color-mix(in srgb, var(--llb-accent, var(--color-accent)) 76%, white 24%); outline-offset: 2px; } /* ---------- Content fade/slide (kept mounted) ---------- */ .content-fade { opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); } .content-fade.is-visible { opacity: 1; transform: translateY(0); } .llb-dialog-content { min-width: 0; container-type: inline-size; display: flow-root; } /* ---------- Shared dialog title alignment ---------- */ .glass-panel .dialog-title { width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .glass-panel .dialog-title > span, .glass-panel .dialog-title-text { text-align: center; } .llb-dialog-panel .dialog-title, .llb-dialog-panel .headline.dialog-title { margin-block: 0 1rem; color: var(--color-text-primary); font-family: var(--font-family-sans); font-size: clamp(1.18rem, 1.8vw, 1.45rem); font-weight: 850; letter-spacing: 0; line-height: 1.16; } .llb-dialog-panel .dialog-title :is(i, svg, [data-lucide]) { color: var(--llb-accent, var(--color-accent)); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--llb-accent) 28%, transparent)); } .llb-dialog-panel .glass-panel-light, .llb-dialog-panel .glass-panel-subtle { border-color: color-mix(in srgb, var(--color-borders-dividers) 28%, transparent); background: color-mix(in srgb, var(--color-panel-soft) 88%, transparent); color: var(--color-text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); } .llb-dialog-panel:not(.llb-dialog-variant--auth) :is(input:not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select, .filter-input) { min-height: 2.45rem; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 34%, transparent); border-radius: 0.55rem; background: color-mix(in srgb, var(--color-bg-primary) 72%, transparent); color: var(--color-text-primary); } .llb-dialog-panel :is(input, textarea, select)::-moz-placeholder { color: color-mix(in srgb, var(--color-text-secondary) 78%, transparent); } .llb-dialog-panel :is(input, textarea, select)::placeholder { color: color-mix(in srgb, var(--color-text-secondary) 78%, transparent); } .llb-dialog-panel :is(.accent-glow-button, .btn-cta):not(:disabled):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger) { border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 34%, rgba(255, 255, 255, 0.18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 28px rgba(2, 6, 23, 0.18), 0 0 18px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 7%, transparent); } .llb-dialog-panel :is(.accent-glow-button, .btn-cta):disabled { cursor: not-allowed; opacity: 0.56; } /* Make inner body scroll smoothly on touch devices */ .dialog-body { flex: 1 1 auto; min-height: 0; max-height: var(--llb-dialog-body-max-height, calc(100vh - 4rem)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.4) transparent; } .dialog-body::-webkit-scrollbar { width: 6px; } .dialog-body::-webkit-scrollbar-track { background: transparent; } .dialog-body::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.4); border-radius: 3px; } /* ---------- Premium dialog system contract ---------- */ .llb-dialog-panel.llb-dialog-panel :is(.llb-dialog, .llb-dialog--content, .llb-dialog--data) { width: 100%; max-width: 100%; min-width: 0; } .llb-dialog-panel.llb-dialog-panel :is(.llb-dialog__header, .dialog-header, header.dialog-header) { display: flex; flex-direction: column; align-items: center; gap: 0.38rem; margin-bottom: clamp(0.9rem, 1.5vw, 1.25rem); text-align: center; } .llb-dialog-panel.llb-dialog-panel :is(.llb-dialog__subtitle, .dialog-subtitle, .section-subtitle) { max-width: 42rem; margin-inline: auto; color: var(--color-text-secondary); font-size: 0.9rem; line-height: 1.45; } .llb-dialog-panel.llb-dialog-panel :is( .llb-dialog__footer, .dialog-action-row, .dialog-actions, .open-diagram-footer, .dialog-footer, .form-footer, .footer-bar ), .llb-dialog-panel.llb-dialog-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; margin-top: clamp(1.15rem, 2vw, 1.6rem); padding-top: clamp(0.85rem, 1.4vw, 1.1rem); border-top: 1px solid color-mix(in srgb, var(--color-borders-dividers) 16%, transparent); } .llb-dialog-panel.llb-dialog-panel :is(.dialog-actions, .footer-actions) { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; width: 100%; } .llb-dialog-panel.llb-dialog-panel .llb-dialog__footer.justify-center, .llb-dialog-panel.llb-dialog-panel footer.justify-center { justify-content: center; } .llb-dialog-panel.llb-dialog-panel .llb-dialog__footer.justify-end, .llb-dialog-panel.llb-dialog-panel footer.justify-end { justify-content: flex-end; } .llb-dialog-panel.llb-dialog-panel :is(.dialog-action-row, .dialog-actions, .open-diagram-footer) > :is(button, a), .llb-dialog-panel.llb-dialog-panel :is(.llb-dialog__footer, .dialog-footer, .form-footer) > :is(button, a) { min-width: 7rem; } .llb-dialog-panel.llb-dialog-panel :is(.btn-cta, .accent-glow-button, .llb-control--primary):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger) { position: relative; isolation: isolate; overflow: hidden; border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 34%, rgba(255, 255, 255, 0.18)) !important; background: radial-gradient(circle at 50% -80%, rgba(255, 255, 255, 0.24), transparent 56%), linear-gradient(180deg, color-mix(in srgb, var(--color-panel-strong) 74%, #ffffff 5%), color-mix(in srgb, var(--color-bg-primary) 82%, var(--llb-accent, var(--color-accent)) 18%)) !important; color: #f8fafc !important; text-shadow: 0 1px 0 rgba(2, 6, 23, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(2, 6, 23, 0.36), 0 14px 30px rgba(2, 6, 23, 0.22), 0 0 20px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 8%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel :is(.btn-cta, .accent-glow-button, .llb-control--primary):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger)::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.22) 42%, rgba(255, 255, 255, 0.08) 50%, transparent 62%); opacity: 0; transform: translateX(-145%) skewX(-18deg); transition: opacity 220ms ease, transform 760ms cubic-bezier(.16, 1, .3, 1); } .llb-dialog-panel.llb-dialog-panel :is(.btn-cta, .accent-glow-button, .llb-control--primary):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger):hover:not(:disabled)::before { opacity: 1; transform: translateX(145%) skewX(-18deg); } .llb-dialog-panel.llb-dialog-panel :is(.btn-cta, .accent-glow-button, .llb-control--primary):not(.btn-glass):not(.btn-secondary):not(.btn-sim-green):not(.btn-sim-red):not(.btn-danger):not(.llb-control--success):not(.llb-control--danger) > * { position: relative; z-index: 1; } .llb-dialog-panel.llb-dialog-panel :is(.btn-glass, .btn-secondary, .footer-secondary, .llb-control):not(.llb-control--primary):not(.llb-control--danger) { border-color: color-mix(in srgb, var(--color-borders-dividers) 22%, transparent) !important; background: color-mix(in srgb, var(--color-panel-strong) 58%, transparent) !important; color: var(--color-text-primary) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 10px 24px rgba(2, 6, 23, 0.12) !important; } .llb-dialog-panel.llb-dialog-panel :is(.llb-field) { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .llb-dialog-panel.llb-dialog-panel footer button:not(.btn-cta):not(.accent-glow-button):not(.btn-sim-red):not(.btn-danger):not(.llb-control--primary):not(.llb-control--danger) { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; min-width: 7rem; min-height: 2.45rem; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 22%, transparent) !important; border-radius: 0.55rem !important; background: color-mix(in srgb, var(--color-panel-strong) 58%, transparent) !important; color: var(--color-text-primary) !important; padding: 0.68rem 1.2rem; font-weight: 750; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 10px 24px rgba(2, 6, 23, 0.12) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: transform 280ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 260ms ease, opacity 180ms ease; } .llb-dialog-panel.llb-dialog-panel footer button:not(.btn-cta):not(.accent-glow-button):not(.btn-sim-red):not(.btn-danger):not(.llb-control--primary):not(.llb-control--danger):hover:not(:disabled) { transform: translateY(-1px); border-color: var(--llb-control-border-strong) !important; background: var(--llb-control-bg-hover) !important; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell, .input-wrap, .filter-bar, .open-diagram-control, .open-diagram-sort-trigger, .role-card, .select-shell, .textarea-shell, .wise-input-shell, .lifecycle-trigger, .delete-mode-trigger ) { position: relative; isolation: isolate; overflow: hidden; min-height: 2.75rem; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 16%, transparent) !important; border-radius: 0.72rem !important; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 44%, transparent), color-mix(in srgb, var(--color-panel-strong) 42%, transparent)), color-mix(in srgb, var(--color-panel-strong) 62%, transparent) !important; color: var(--color-text-primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 18px rgba(2, 6, 23, 0.1) !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: border-color 240ms ease, background 240ms ease, box-shadow 280ms ease, transform 220ms ease; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell, .input-wrap, .filter-bar, .open-diagram-control, .open-diagram-sort-trigger, .role-card, .select-shell, .textarea-shell, .wise-input-shell, .lifecycle-trigger, .delete-mode-trigger )::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(130% 120% at 0% 50%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 44%), linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--color-accent) 4%, transparent) 38%, color-mix(in srgb, var(--color-accent-contrast) 3%, transparent) 58%, transparent 78%); background-size: 160% 100%, 170% 100%; background-position: 0 0, 100% 0; opacity: 0; transform: translate3d(-4%, 0, 0); } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell, .input-wrap, .filter-bar, .open-diagram-control, .open-diagram-sort-trigger, .role-card, .select-shell, .textarea-shell, .wise-input-shell, .lifecycle-trigger, .delete-mode-trigger )::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 42%, transparent), color-mix(in srgb, var(--color-accent-contrast) 15%, transparent), color-mix(in srgb, var(--color-accent) 24%, transparent)); opacity: 0; transform: scale(0.988); transform-origin: center; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell, .input-wrap, .filter-bar, .open-diagram-control, .open-diagram-sort-trigger, .role-card, .select-shell, .textarea-shell, .wise-input-shell, .lifecycle-trigger, .delete-mode-trigger ) > * { position: relative; z-index: 2; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .open-diagram-sort-trigger:focus-visible, .role-card:focus-within, .role-card.role-card--open, .select-shell:focus-within, .textarea-shell:focus-within, .wise-input-shell:focus-within, .lifecycle-trigger:focus-visible, .delete-mode-trigger:focus-visible ) { border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-borders-dividers) 18%) !important; background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 12px 24px rgba(2, 6, 23, 0.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 7%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 6%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell.is-invalid, .input-wrap.is-invalid, .select-shell.is-invalid, .textarea-shell.is-invalid, .wise-input-shell.is-invalid ) { border-color: color-mix(in srgb, var(--color-action-red) 54%, var(--color-borders-dividers) 18%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 22px rgba(2, 6, 23, 0.12), 0 0 0 1px color-mix(in srgb, var(--color-action-red) 8%, transparent), 0 0 16px color-mix(in srgb, var(--color-action-red) 7%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .open-diagram-sort-trigger:focus-visible, .role-card:focus-within, .role-card.role-card--open, .select-shell:focus-within, .textarea-shell:focus-within, .wise-input-shell:focus-within, .lifecycle-trigger:focus-visible, .delete-mode-trigger:focus-visible )::before { animation: llb-dialog-field-focus-glide 880ms cubic-bezier(.16, 1, .3, 1) both; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( .field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .open-diagram-sort-trigger:focus-visible, .role-card:focus-within, .role-card.role-card--open, .select-shell:focus-within, .textarea-shell:focus-within, .wise-input-shell:focus-within, .lifecycle-trigger:focus-visible, .delete-mode-trigger:focus-visible )::after { animation: llb-dialog-field-hairline-settle 620ms cubic-bezier(.16, 1, .3, 1) 80ms both; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.field-shell, .input-wrap, .filter-bar, .open-diagram-control, .role-card) :is( input:not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select, .field-control, .filter-input, .open-diagram-input, .code-input ) { border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( input:not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select, .glass-input, .input-glass, .text-input, .analog-input, .wise-input, .select-input ):not(.field-control):not(.filter-input):not(.open-diagram-input):not(.code-input) { border-color: color-mix(in srgb, var(--color-borders-dividers) 18%, transparent) !important; border-radius: 0.72rem !important; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 40%, transparent), color-mix(in srgb, var(--color-panel-strong) 40%, transparent)), color-mix(in srgb, var(--color-panel-strong) 62%, transparent) !important; color: var(--color-text-primary) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 18px rgba(2, 6, 23, 0.1) !important; transition: border-color 240ms ease, background 240ms ease, box-shadow 280ms ease; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is( input:not([type='checkbox']):not([type='radio']):not([type='color']), textarea, select, .glass-input, .input-glass, .text-input, .analog-input, .wise-input, .select-input ):not(.field-control):not(.filter-input):not(.open-diagram-input):not(.code-input):focus { outline: none !important; border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-borders-dividers) 18%) !important; background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 12px 24px rgba(2, 6, 23, 0.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 7%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 6%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.field-shell, .input-wrap, .filter-bar, .open-diagram-control, .role-card) > :is(svg, i, [data-lucide], .input-icon, .filter-icon) { color: var(--color-accent); opacity: 0.78; filter: none; transition: opacity 220ms ease, filter 240ms ease; } .llb-dialog-panel.llb-dialog-panel:not(.llb-dialog-variant--auth) :is(.field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .role-card:focus-within) > :is(svg, i, [data-lucide], .input-icon, .filter-icon) { opacity: 0.96; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 14%, transparent)); } .llb-dialog-panel.llb-dialog-panel :is(.abs-toggle, .icon-btn, .chip-x) { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; } .llb-dialog-panel.llb-dialog-panel :is(.field-shell, .input-wrap) :is(.abs-toggle, .icon-btn) { right: 0.85rem; } .llb-dialog-panel.llb-dialog-panel :is(.abs-toggle) { position: absolute; top: 50%; width: 2rem; height: 2rem; color: var(--color-text-secondary); transform: translateY(-50%); transition: background-color 180ms ease, color 180ms ease, transform 180ms ease; } .llb-dialog-panel.llb-dialog-panel :is(.abs-toggle):hover:not(:disabled) { color: var(--color-text-primary); background: color-mix(in srgb, var(--color-panel-soft) 72%, transparent); transform: translateY(-50%) translateY(-1px); } .llb-dialog-panel.llb-dialog-panel :is(.field-info, .llb-field-help, .field-help) { color: var(--color-text-secondary); font-size: 0.76rem; line-height: 1.4; } .llb-dialog-panel.llb-dialog-panel :is(.field-error, .llb-field__error, [role='alert']) { color: color-mix(in srgb, var(--color-action-red) 86%, #fff 14%); } .llb-dialog-panel.llb-dialog-panel :is(.dialog-tabs, .feedback-tabs, [role='tablist']) { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; max-width: 100%; margin-inline: auto; padding: 0.32rem; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 18%, transparent); border-radius: 0.78rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 34%, transparent), color-mix(in srgb, var(--color-panel-strong) 40%, transparent)), color-mix(in srgb, var(--color-bg-primary) 50%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(2, 6, 23, 0.1); } .llb-dialog-panel.llb-dialog-panel :is(.tab-chip, .tab-btn, .feedback-tab, .feedback-tab-btn, [role='tab']) { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; min-height: 2.32rem; border: 1px solid transparent !important; border-radius: 0.55rem !important; background: transparent !important; color: color-mix(in srgb, var(--color-text-secondary) 88%, transparent) !important; padding: 0.48rem 0.9rem; font-size: 0.86rem; font-weight: 760; letter-spacing: 0; box-shadow: none !important; transition: color 200ms ease, background 220ms ease, border-color 220ms ease, box-shadow 260ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1); } .llb-dialog-panel.llb-dialog-panel :is(.tab-chip, .tab-btn, .feedback-tab, .feedback-tab-btn, [role='tab'])::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(110% 100% at 20% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 50%), linear-gradient(135deg, color-mix(in srgb, var(--color-panel-strong) 82%, transparent), color-mix(in srgb, var(--color-panel-soft) 58%, transparent)); opacity: 0; transform: scaleX(0.86); transform-origin: center; transition: opacity 260ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1); } .llb-dialog-panel.llb-dialog-panel :is(.tab-chip, .tab-btn, .feedback-tab, .feedback-tab-btn, [role='tab']):hover:not(:disabled) { color: var(--color-text-primary) !important; transform: translateY(-1px); } .llb-dialog-panel.llb-dialog-panel :is( .tab-chip.active, .tab-chip.is-active, .tab-btn.active, .tab-btn.is-active, .feedback-tab.active, .feedback-tab.is-active, .feedback-tab-btn.active, .feedback-tab-btn.is-active, [role='tab'][aria-selected='true'] ) { border-color: color-mix(in srgb, var(--color-accent) 30%, transparent) !important; color: var(--color-text-primary) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 22px color-mix(in srgb, var(--color-accent) 12%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel :is( .tab-chip.active, .tab-chip.is-active, .tab-btn.active, .tab-btn.is-active, .feedback-tab.active, .feedback-tab.is-active, .feedback-tab-btn.active, .feedback-tab-btn.is-active, [role='tab'][aria-selected='true'] )::before { opacity: 1; transform: scaleX(1); } .llb-dialog-panel.llb-dialog-panel :is( .llb-option--focused, .select-option--focus, .lifecycle-option.is-focused, .delete-mode-option.is-focused, .role-dropdown__item--active ) { background: color-mix(in srgb, var(--color-accent) 9%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel :is(.diagram-card:hover, .diagram-card:focus-visible) { outline: none !important; border-color: color-mix(in srgb, var(--color-accent) 28%, var(--color-borders-dividers) 18%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 30px rgba(2, 6, 23, 0.18), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent) !important; } .llb-dialog-panel.llb-dialog-panel :is(.data-shell, .table-surface, .table-container, .open-diagram-list, .history-list) { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.36) transparent; } .llb-dialog-panel.llb-dialog-panel :is(.table-scroll, .history-list, .open-diagram-list, .max-h-64, .max-h-80, .max-h-96) { overscroll-behavior: contain; } @keyframes llb-dialog-field-focus-glide { 0% { opacity: 0; background-position: 0 0, 120% 0; transform: translate3d(-4%, 0, 0); } 42% { opacity: 0.42; } 100% { opacity: 0.34; background-position: 0 0, 48% 0; transform: translate3d(0, 0, 0); } } @keyframes llb-dialog-field-hairline-settle { 0% { opacity: 0; transform: scale(0.986); } 58% { opacity: 0.48; } 100% { opacity: 0.38; transform: scale(1); } } @media (max-width: 540px) { .llb-dialog-panel.llb-dialog-panel :is( .llb-dialog__footer, .dialog-action-row, .dialog-actions, .open-diagram-footer, .dialog-footer, .form-footer, .footer-bar ), .llb-dialog-panel.llb-dialog-panel footer { align-items: stretch; flex-direction: column-reverse; } .llb-dialog-panel.llb-dialog-panel :is( .llb-dialog__footer, .dialog-action-row, .open-diagram-footer, .dialog-footer, .form-footer, .footer-bar ) > :is(button, a), .llb-dialog-panel.llb-dialog-panel footer button { width: 100%; } } /* ---------- Respect reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .dialog-overlay-enter-active, .dialog-overlay-leave-active, .panel-anim, .content-fade { transition: none !important; } .llb-dialog-panel.llb-dialog-panel :is( .field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .open-diagram-sort-trigger:focus-visible, .role-card:focus-within, .role-card.role-card--open, .select-shell:focus-within, .textarea-shell:focus-within, .wise-input-shell:focus-within, .lifecycle-trigger:focus-visible, .delete-mode-trigger:focus-visible )::before, .llb-dialog-panel.llb-dialog-panel :is( .field-shell:focus-within, .input-wrap:focus-within, .filter-bar:focus-within, .open-diagram-control:focus-within, .open-diagram-sort-trigger:focus-visible, .role-card:focus-within, .role-card.role-card--open, .select-shell:focus-within, .textarea-shell:focus-within, .wise-input-shell:focus-within, .lifecycle-trigger:focus-visible, .delete-mode-trigger:focus-visible )::after { animation: none; } } .registration-form[data-v-13834049]{ display:flex; flex-direction:column; gap:.95rem; } .glass-field[data-v-13834049]{ position:relative; padding: 0; border: 0; background: transparent; } .field-shell[data-v-13834049]{ position:relative; display:flex; align-items:center; gap:.68rem; min-height:2.95rem; overflow:hidden; padding:.24rem .95rem .24rem .85rem; border-radius:.72rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 48%, transparent), color-mix(in srgb, var(--color-panel-strong) 42%, transparent)), var(--llb-control-bg); border:1px solid color-mix(in srgb, var(--color-borders-dividers) 14%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 14px rgba(2,6,23,.08); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease; } .field-shell[data-v-13834049]::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background: radial-gradient(140% 120% at 0% 50%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 44%), linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--color-accent) 4%, transparent) 36%, color-mix(in srgb, var(--color-accent-contrast) 3%, transparent) 58%, transparent 78%); background-size: 160% 100%, 170% 100%; background-position: 0 0, 100% 0; opacity:0; transform:translate3d(-5%,0,0); transition:opacity .28s ease; } .field-shell[data-v-13834049]::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 42%, transparent), color-mix(in srgb, var(--color-accent-contrast) 15%, transparent), color-mix(in srgb, var(--color-accent) 24%, transparent)); opacity:0; transform:scale(.988); transform-origin:center; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .2s ease; } .field-shell[data-v-13834049] > *{ position:relative; z-index:2; } .field-shell > [data-lucide][data-v-13834049]{ flex:0 0 auto; width:1.05rem !important; height:1.05rem !important; color: var(--color-accent); opacity:.72; filter:none; } .field-shell[data-v-13834049]:focus-within{ border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-borders-dividers) 18%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(2,6,23,.13), 0 0 0 1px color-mix(in srgb, var(--color-accent) 7%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 6%, transparent); background: var(--llb-control-bg-hover); transform: none; } .field-shell[data-v-13834049]:focus-within::before{ animation: auth-field-focus-glide-13834049 900ms var(--llb-action-ease) both; } .field-shell[data-v-13834049]:focus-within::after{ animation: auth-field-hairline-settle-13834049 620ms var(--llb-action-ease) 80ms both; } .field-shell:focus-within > [data-lucide][data-v-13834049]{ opacity:.96; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 14%, transparent)); } .filter-input[data-v-13834049]{ position:relative; z-index:1; flex:1 1 auto; width:100%; min-height:2.35rem !important; padding:.35rem .5rem .35rem .45rem !important; background:transparent !important; border:0 !important; border-radius:0 !important; outline:none; box-shadow:none !important; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-13834049]::-moz-placeholder{ color: rgba(255,255,255,.55); } .filter-input[data-v-13834049]::placeholder{ color: rgba(255,255,255,.55); } .field-shell.relative .filter-input[data-v-13834049]{ padding-right:3.75rem !important; } .field-shell .filter-input[data-v-13834049]:focus, .field-shell .filter-input[data-v-13834049]:focus-visible{ outline:none !important; box-shadow:none !important; } .role-card[data-v-13834049]{ position:relative; display:flex; align-items:center; gap:.68rem; min-height:2.95rem; overflow:hidden; border:1px solid color-mix(in srgb, var(--color-borders-dividers) 14%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 48%, transparent), color-mix(in srgb, var(--color-panel-strong) 42%, transparent)), var(--llb-control-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius:.72rem; padding:.24rem .95rem .24rem .85rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 14px rgba(2,6,23,.08); transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .role-card[data-v-13834049]::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background: radial-gradient(140% 120% at 0% 50%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 44%), linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--color-accent) 3%, transparent) 38%, color-mix(in srgb, var(--color-accent-contrast) 3%, transparent) 58%, transparent 78%); background-size:160% 100%, 170% 100%; background-position:0 0, 100% 0; opacity:0; transform:translate3d(-5%,0,0); transition:opacity .28s ease; } .role-card[data-v-13834049]::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 40%, transparent), color-mix(in srgb, var(--color-accent-contrast) 15%, transparent), color-mix(in srgb, var(--color-accent) 22%, transparent)); opacity:0; transform:scale(.988); transform-origin:center; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .2s ease; } .role-card[data-v-13834049] > *{ position:relative; z-index:2; } .role-card[data-v-13834049]:focus-within, .role-card.role-card--open[data-v-13834049]{ border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-borders-dividers) 18%); background: var(--llb-control-bg-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(2,6,23,.13), 0 0 0 1px color-mix(in srgb, var(--color-accent) 7%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 6%, transparent); } .role-card[data-v-13834049]:focus-within::before, .role-card.role-card--open[data-v-13834049]::before{ animation: auth-field-focus-glide-13834049 900ms var(--llb-action-ease) both; } .role-card[data-v-13834049]:focus-within::after, .role-card.role-card--open[data-v-13834049]::after{ animation: auth-field-hairline-settle-13834049 620ms var(--llb-action-ease) 80ms both; } .role-card:focus-within .role-card__icon[data-v-13834049], .role-card.role-card--open .role-card__icon[data-v-13834049]{ opacity:.96; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 14%, transparent)); } .role-card__header[data-v-13834049]{ display:flex; align-items:center; gap:.55rem; font-size:.85rem; font-weight:600; color: var(--color-text-primary); letter-spacing:.01em; } .role-card__title[data-v-13834049]{ flex:1 1 auto; } .role-card__icon[data-v-13834049]{ width:1.05rem; height:1.05rem; color: var(--color-accent); flex:0 0 auto; opacity:.72; filter:none; } .role-card__controls[data-v-13834049]{ display:flex; align-items:center; width:100%; } .role-card__field[data-v-13834049]{ position:relative; width:100%; } .role-trigger[data-v-13834049]{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:2.35rem; padding:.35rem .05rem .35rem .45rem; border-radius:0; background: transparent; border:0; color: var(--color-text-primary); font-size:.95rem; transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .2s ease; cursor:pointer; } .role-trigger[data-v-13834049]:hover{ color: var(--color-text-primary); transform:none; } .role-trigger[data-v-13834049]:focus-visible{ outline:none; box-shadow:none !important; } .role-trigger__label[data-v-13834049]{ flex:1 1 auto; display:flex; align-items:center; min-height:1.6rem; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .role-trigger__chevron[data-v-13834049]{ width:1.25rem; height:1.25rem; opacity:.7; transition: transform .25s ease; color: var(--color-text-primary); } .role-dropdown[data-v-13834049]{ padding:.35rem; border-radius:.85rem; } .role-dropdown__item[data-v-13834049]{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.45rem .6rem; border-radius:.55rem; cursor:pointer; font-size:.85rem; color: var(--color-text-primary); transition: background-color .2s ease, box-shadow .2s ease; } .role-dropdown__item[data-v-13834049]:hover{ background: rgba(255,255,255,0.08); } .role-dropdown__item--active[data-v-13834049]{ background: color-mix(in srgb, var(--color-accent) 9%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); } .role-dropdown__check[data-v-13834049]{ width:1.1rem; height:1.1rem; color: var(--color-accent); } /* Field helper copy */ .field-info[data-v-13834049]{ max-height:0; margin-top:0; font-size:.75rem; line-height:1.35; color: var(--color-text-secondary); opacity:0; overflow:hidden; transform:translateY(-.25rem); transition: max-height .24s ease, margin-top .24s ease, opacity .24s ease, transform .24s ease; } .glass-field:focus-within .field-info[data-v-13834049], .glass-field:hover .field-info[data-v-13834049], .glass-field.glass-field--active .field-info[data-v-13834049]{ max-height:3.4rem; margin-top:.45rem; opacity:.78; transform:translateY(0); } .abs-toggle[data-v-13834049]{ position:absolute; z-index:2; right:.9rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2.05rem; height:2.05rem; border-radius:.48rem; color: var(--color-text-secondary); transition: background-color .2s ease, color .2s ease, transform .15s ease; } .abs-toggle[data-v-13834049]:hover{ background: color-mix(in srgb, var(--color-accent) 9%, transparent); color: var(--color-text-primary); transform: translateY(-50%) translateY(-1px); } @keyframes auth-field-focus-glide-13834049{ 0%{ opacity:0; background-position:0 0, 120% 0; transform:translate3d(-5%,0,0); } 42%{ opacity:.46; } 100%{ opacity:.34; background-position:0 0, 48% 0; transform:translate3d(0,0,0); } } @keyframes auth-field-hairline-settle-13834049{ 0%{ opacity:0; transform:scale(.986); } 58%{ opacity:.48; } 100%{ opacity:.38; transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .field-shell[data-v-13834049]:focus-within::before, .field-shell[data-v-13834049]:focus-within::after, .role-card[data-v-13834049]:focus-within::before, .role-card.role-card--open[data-v-13834049]::before, .role-card[data-v-13834049]:focus-within::after, .role-card.role-card--open[data-v-13834049]::after{ animation:none; } .field-shell[data-v-13834049]:focus-within::before, .role-card[data-v-13834049]:focus-within::before, .role-card.role-card--open[data-v-13834049]::before{ opacity:.32; background-position:0 0, 48% 0; transform:none; } .field-shell[data-v-13834049]:focus-within::after{ opacity:.34; transform:scale(1); } .role-card[data-v-13834049]:focus-within::after, .role-card.role-card--open[data-v-13834049]::after{ opacity:.34; transform:scale(1); } } .legal-note[data-v-13834049]{ padding:.7rem .05rem .1rem; border-top:1px solid color-mix(in srgb, var(--color-borders-dividers) 18%, transparent); color: var(--color-text-secondary); font-size:.75rem; line-height:1.4; } .terms-consent__checkbox[data-v-13834049]{ border:1px solid color-mix(in srgb, var(--color-text-secondary) 72%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 42%, transparent); accent-color: var(--color-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .2s ease, box-shadow .24s ease, background-color .2s ease; } .terms-consent__checkbox[data-v-13834049]:focus-visible{ outline: none; border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-text-secondary)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 2px color-mix(in srgb, var(--color-accent) 8%, transparent); } /* OR separator (shared aesthetic with LoginDialog) */ .hr-or[data-v-13834049]{ display:flex; align-items:center; gap:.75rem; color: var(--color-text-secondary); } .hr-or[data-v-13834049]::before, .hr-or[data-v-13834049]::after{ content:''; flex:1; height:1px; background: rgba(255,255,255,0.18); border-radius: 9999px; } .hr-or span[data-v-13834049]{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; } .google-signin-container[data-v-13834049]{ display:flex; justify-content:center; width:100%; min-height:42px; } .google-signin-container--native-hidden[data-v-13834049]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Google button (glassy) */ .glass-google-btn[data-v-13834049]{ display:inline-flex; align-items:center; gap:.6rem; min-height:2.45rem; padding:.6rem .95rem; border-radius:.55rem; background: var(--llb-control-bg); border: 1px solid var(--llb-control-border); color: var(--color-text-primary); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--llb-control-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .glass-google-btn[data-v-13834049]:hover{ background: var(--llb-control-bg-hover); transform: translateY(-1px); border-color: var(--llb-control-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px rgba(2,6,23,.24); } .glass-google-btn img[data-v-13834049]{ width: 18px; height: 18px; } /* A11y helper */ .sr-only[data-v-13834049]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .field-shell[data-v-76727aa3]{ display:flex; align-items:center; gap:.6rem; } .filter-input[data-v-76727aa3]{ flex:1 1 auto; width:100%; background:transparent; border:0; outline:none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-76727aa3]::-moz-placeholder{ color: rgba(255,255,255,.55); } .filter-input[data-v-76727aa3]::placeholder{ color: rgba(255,255,255,.55); } .sr-only[data-v-76727aa3]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .glass-field[data-v-a260ba4c]{ padding: 0; border: 0; background: transparent; } .field-shell[data-v-a260ba4c]{ position:relative; display:flex; align-items:center; gap:.68rem; min-height:2.95rem; overflow:hidden; padding:.24rem .95rem .24rem .85rem; border-radius:.72rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 48%, transparent), color-mix(in srgb, var(--color-panel-strong) 42%, transparent)), var(--llb-control-bg); border:1px solid color-mix(in srgb, var(--color-borders-dividers) 14%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 14px rgba(2,6,23,.08); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease, transform .2s ease; } .field-shell[data-v-a260ba4c]::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background: radial-gradient(140% 120% at 0% 50%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 44%), linear-gradient(105deg, transparent 0%, color-mix(in srgb, var(--color-accent) 4%, transparent) 36%, color-mix(in srgb, var(--color-accent-contrast) 3%, transparent) 58%, transparent 78%); background-size: 160% 100%, 170% 100%; background-position: 0 0, 100% 0; opacity:0; transform:translate3d(-5%,0,0); transition:opacity .28s ease; } .field-shell[data-v-a260ba4c]::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; padding:1px; background:linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 42%, transparent), color-mix(in srgb, var(--color-accent-contrast) 15%, transparent), color-mix(in srgb, var(--color-accent) 24%, transparent)); opacity:0; transform:scale(.988); transform-origin:center; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transition:opacity .2s ease; } .field-shell[data-v-a260ba4c] > *{ position:relative; z-index:2; } .field-shell > [data-lucide][data-v-a260ba4c]{ flex:0 0 auto; width:1.05rem !important; height:1.05rem !important; color: var(--color-accent); opacity:.72; filter:none; } .field-shell[data-v-a260ba4c]:focus-within{ border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-borders-dividers) 18%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px rgba(2,6,23,.13), 0 0 0 1px color-mix(in srgb, var(--color-accent) 7%, transparent), 0 0 20px color-mix(in srgb, var(--color-accent) 6%, transparent); background: var(--llb-control-bg-hover); transform: none; } .field-shell[data-v-a260ba4c]:focus-within::before{ animation: auth-field-focus-glide-a260ba4c 900ms var(--llb-action-ease) both; } .field-shell[data-v-a260ba4c]:focus-within::after{ animation: auth-field-hairline-settle-a260ba4c 620ms var(--llb-action-ease) 80ms both; } .field-shell:focus-within > [data-lucide][data-v-a260ba4c]{ opacity:.96; filter:drop-shadow(0 0 8px color-mix(in srgb, var(--color-accent) 14%, transparent)); } .filter-input[data-v-a260ba4c]{ position:relative; z-index:1; flex:1 1 auto; width:100%; min-height:2.35rem !important; padding:.35rem .5rem .35rem .45rem !important; background:transparent !important; border:0 !important; border-radius:0 !important; outline:none; box-shadow:none !important; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-a260ba4c]::-moz-placeholder{ color: rgba(255,255,255,.55); } .filter-input[data-v-a260ba4c]::placeholder{ color: rgba(255,255,255,.55); } .field-shell.relative .filter-input[data-v-a260ba4c]{ padding-right:3.75rem !important; } .field-shell .filter-input[data-v-a260ba4c]:focus, .field-shell .filter-input[data-v-a260ba4c]:focus-visible{ outline:none !important; box-shadow:none !important; } /* Prevent browser autofill paint from clashing with glass theme */ .filter-input[data-v-a260ba4c]:-webkit-autofill, .filter-input[data-v-a260ba4c]:-webkit-autofill:hover, .filter-input[data-v-a260ba4c]:-webkit-autofill:focus{ -webkit-text-fill-color: var(--color-text-primary); box-shadow: 0 0 0px 1000px transparent inset; -webkit-transition: background-color 9999s ease-out 0s; transition: background-color 9999s ease-out 0s; caret-color: var(--color-text-primary); } .abs-toggle[data-v-a260ba4c]{ position:absolute; z-index:2; right:.9rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2.05rem; height:2.05rem; border-radius:.48rem; color: var(--color-text-secondary); transition: background-color .2s ease, color .2s ease, transform .15s ease; } .abs-toggle[data-v-a260ba4c]:hover{ background: color-mix(in srgb, var(--color-accent) 9%, transparent); color: var(--color-text-primary); transform: translateY(-50%) translateY(-1px); } @keyframes auth-field-focus-glide-a260ba4c{ 0%{ opacity:0; background-position:0 0, 120% 0; transform:translate3d(-5%,0,0); } 42%{ opacity:.46; } 100%{ opacity:.34; background-position:0 0, 48% 0; transform:translate3d(0,0,0); } } @keyframes auth-field-hairline-settle-a260ba4c{ 0%{ opacity:0; transform:scale(.986); } 58%{ opacity:.48; } 100%{ opacity:.38; transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .field-shell[data-v-a260ba4c]:focus-within::before, .field-shell[data-v-a260ba4c]:focus-within::after{ animation:none; } .field-shell[data-v-a260ba4c]:focus-within::before{ opacity:.32; background-position:0 0, 48% 0; transform:none; } .field-shell[data-v-a260ba4c]:focus-within::after{ opacity:.34; transform:scale(1); } } /* Error alert chip */ .alert-error[data-v-a260ba4c]{ display:flex; align-items:center; gap:.45rem; justify-content:center; padding:.5rem .75rem; border-radius:.65rem; color: var(--color-action-red); background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.35); font-weight: 600; font-size: .875rem; } /* OR separator */ .hr-or[data-v-a260ba4c]{ display:flex; align-items:center; gap:.75rem; color: var(--color-text-secondary); } .hr-or[data-v-a260ba4c]::before, .hr-or[data-v-a260ba4c]::after{ content:''; flex:1; height:1px; background: rgba(255,255,255,0.18); border-radius: 9999px; } .hr-or span[data-v-a260ba4c]{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; } .auth-registration-entry[data-v-a260ba4c]{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:.9rem; margin:-.25rem 0 1.1rem; padding:.55rem .58rem .55rem .82rem; border-radius:.8rem; background: linear-gradient(135deg, color-mix(in srgb, var(--color-panel-soft) 40%, transparent), color-mix(in srgb, var(--color-panel-strong) 34%, transparent)), color-mix(in srgb, var(--llb-control-bg) 82%, transparent); border:1px solid color-mix(in srgb, var(--color-borders-dividers) 13%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(2,6,23,.08); overflow:hidden; } .auth-registration-entry[data-v-a260ba4c]::before{ content:''; position:absolute; inset:0; pointer-events:none; background: radial-gradient(130% 110% at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent), transparent 42%), linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent-contrast) 4%, transparent), transparent); opacity:.72; } .auth-registration-entry__copy[data-v-a260ba4c], .auth-registration-entry__button[data-v-a260ba4c]{ position:relative; z-index:1; } .auth-registration-entry__copy[data-v-a260ba4c]{ display:flex; flex-direction:column; min-width:0; gap:.12rem; } .auth-registration-entry__eyebrow[data-v-a260ba4c]{ color: var(--color-text-secondary); font-size:.72rem; line-height:1.1; } .auth-registration-entry__title[data-v-a260ba4c]{ color: var(--color-text-primary); font-size:.92rem; line-height:1.15; font-weight:680; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .auth-registration-entry__button[data-v-a260ba4c]{ display:inline-flex; align-items:center; justify-content:center; gap:.42rem; flex:0 0 auto; min-height:2.1rem; padding:.45rem .72rem; border-radius:.6rem; border:1px solid color-mix(in srgb, var(--color-accent) 28%, transparent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent-contrast); font-weight:720; font-size:.86rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .auth-registration-entry__button[data-v-a260ba4c]:hover{ background: color-mix(in srgb, var(--color-accent) 16%, transparent); border-color: color-mix(in srgb, var(--color-accent) 42%, transparent); color: var(--color-text-primary); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 22px color-mix(in srgb, var(--color-accent) 12%, transparent); } .auth-registration-entry__button[data-v-a260ba4c]:focus-visible{ outline:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px color-mix(in srgb, var(--color-accent) 22%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 12%, transparent); } .auth-secondary[data-v-a260ba4c]{ margin-top:1.25rem; } .auth-secondary__actions[data-v-a260ba4c]{ display:flex; align-items:center; justify-content:center; gap:.85rem; margin-top:1rem; flex-wrap:wrap; } .glass-google-btn[data-v-a260ba4c]{ display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:2.45rem; padding:.6rem .95rem; border-radius:.55rem; background: var(--llb-control-bg); border: 1px solid var(--llb-control-border); color: var(--color-text-primary); transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--llb-control-shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .glass-google-btn[data-v-a260ba4c]:hover{ background: var(--llb-control-bg-hover); transform: translateY(-1px); border-color: var(--llb-control-border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px rgba(2,6,23,.2); } .glass-google-btn img[data-v-a260ba4c]{ width:18px; height:18px; } @media (max-width: 420px){ .auth-registration-entry[data-v-a260ba4c]{ align-items:stretch; flex-direction:column; padding:.75rem; } .auth-registration-entry__button[data-v-a260ba4c]{ width:100%; } } /* Small utility for screen readers */ .sr-only[data-v-a260ba4c]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .google-signin-container[data-v-a260ba4c] { display: flex; justify-content: center; width: 100%; min-height: 42px; } .google-signin-container--native-hidden[data-v-a260ba4c] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Success pill */ .success-chip[data-v-182df2d8]{ display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .75rem; border-radius: 9999px; font-weight: 700; font-size: .85rem; letter-spacing:.015em; color: var(--color-button-Simulation-Green); background: rgba(20,184,166,.1); /* --color-button-Simulation-Green @ ~10% */ border: 1px solid rgba(20,184,166,.35); box-shadow: 0 0 0 2px rgba(17,24,39,0.35) inset; } .success-chip i[data-v-182df2d8]{ color: inherit; } /* Button base uses your global .btn-cta + .btn-accent */ .field-shell[data-v-d3f922e3]{ display:flex; align-items:center; gap:.6rem; } .filter-input[data-v-d3f922e3]{ flex:1 1 auto; width:100%; background:transparent; border:0; outline:none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-d3f922e3]::-moz-placeholder{ color: rgba(255,255,255,.55); } .filter-input[data-v-d3f922e3]::placeholder{ color: rgba(255,255,255,.55); } .abs-toggle[data-v-d3f922e3]{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:9999px; color: var(--color-text-secondary); transition: background-color .2s ease, transform .15s ease; } .abs-toggle[data-v-d3f922e3]:hover{ background: rgba(255,255,255,0.08); transform: translateY(-50%) translateY(-1px); } .sr-only[data-v-d3f922e3]{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .social-follow-btn[data-v-b1e99fdf] { --social-gradient: linear-gradient(90deg, #ffffff, #ffffff); position: relative; border: 1px solid transparent; border-radius: 9999px; background: linear-gradient(var(--color-bg-primary), var(--color-bg-primary)) padding-box, var(--social-gradient) border-box; transition: transform 180ms ease, filter 180ms ease; } .social-follow-btn__content[data-v-b1e99fdf] { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; color: hsla(220, 20%, 92%, 0.95); } .social-follow-btn__label[data-v-b1e99fdf] { background: var(--social-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .social-follow-btn[data-v-b1e99fdf]:hover { transform: translateY(-1px); filter: brightness(1.08); } .social-follow-btn--tiktok[data-v-b1e99fdf] { --social-gradient: linear-gradient(90deg, #ffffff, #00d9cf, #7ff8f3); } .social-follow-btn--instagram[data-v-b1e99fdf] { --social-gradient: linear-gradient(90deg, #833ab4, #c13584, #f7b545); } .input[data-v-b1e99fdf] { width: 100%; border-radius: 0.9rem; padding: 0.85rem 1.1rem; color: var(--color-text-primary); background: hsla(220, 13%, 96%, 0.04); border: 1px solid hsla(220, 13%, 96%, 0.12); transition: border-color 180ms ease, background 180ms ease; } .input[data-v-b1e99fdf]:focus { outline: none; border-color: hsla(197, 98%, 49%, 0.55); background: hsla(220, 13%, 96%, 0.06); } [data-v-b1e99fdf]:focus-visible { outline: 2px solid hsla(197, 98%, 49%, 0.55); outline-offset: 2px; } .activity-dashboard[data-v-b1e99fdf] { background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.65) 45%), hsla(220,13%,96%,0.04); } .activity-kpi-card[data-v-b1e99fdf] { border: 1px solid hsla(220, 13%, 96%, 0.12); background: hsla(220, 13%, 96%, 0.03); border-radius: 0.8rem; padding: 0.85rem 0.95rem; } .features-showcase[data-v-b1e99fdf] { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .features-list[data-v-b1e99fdf] { display: grid; gap: 0.75rem; } .feature-tab[data-v-b1e99fdf] { display: flex; align-items: flex-start; width: 100%; text-align: left; gap: 0.9rem; padding: 1rem; border-radius: 0.9rem; border: 1px solid hsla(220, 13%, 96%, 0.12); background: hsla(220, 13%, 96%, 0.04); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .feature-tab[data-v-b1e99fdf]:hover { border-color: hsla(220, 13%, 96%, 0.25); background: hsla(220, 13%, 96%, 0.06); transform: translateY(-2px); } .feature-tab-active[data-v-b1e99fdf] { border-color: hsla(197, 98%, 49%, 0.5); background: linear-gradient(145deg, rgba(14, 116, 144, 0.2), rgba(15, 23, 42, 0.55)); box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.15); } .feature-step[data-v-b1e99fdf] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; border-radius: 9999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-text-primary); background: hsla(220, 13%, 96%, 0.12); } .feature-copy[data-v-b1e99fdf] { display: grid; gap: 0.3rem; } .feature-title[data-v-b1e99fdf] { color: var(--color-text-primary); font-weight: 600; } .feature-description[data-v-b1e99fdf] { color: var(--color-text-secondary); line-height: 1.45; font-size: 0.95rem; } .feature-preview[data-v-b1e99fdf] { border: 1px solid hsla(220, 13%, 96%, 0.12); background: linear-gradient(160deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.5)); border-radius: 0.75rem; padding: 1rem; } .feature-video-shell[data-v-b1e99fdf] { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0.8rem; overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.25), rgba(15, 23, 42, 0.95) 60%); border: 1px solid hsla(220, 13%, 96%, 0.14); } .feature-video[data-v-b1e99fdf] { position: relative; z-index: 2; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .feature-video-poster[data-v-b1e99fdf] { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: 1; } .feature-video-loading-overlay[data-v-b1e99fdf] { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; background: linear-gradient(180deg, rgba(2, 6, 23, 0.18), rgba(2, 6, 23, 0.55)); backdrop-filter: blur(1px); } .feature-video-loading-spinner[data-v-b1e99fdf] { width: 2rem; height: 2rem; border-radius: 9999px; border: 2px solid hsla(0, 0%, 100%, 0.25); border-top-color: rgba(255, 255, 255, 0.95); animation: feature-video-spin-b1e99fdf 800ms linear infinite; } .feature-video-loading-text[data-v-b1e99fdf] { color: rgba(255, 255, 255, 0.92); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; } .feature-video-overlay-fade-enter-active[data-v-b1e99fdf], .feature-video-overlay-fade-leave-active[data-v-b1e99fdf] { transition: opacity 220ms ease; } .feature-video-overlay-fade-enter-from[data-v-b1e99fdf], .feature-video-overlay-fade-leave-to[data-v-b1e99fdf] { opacity: 0; } @keyframes feature-video-spin-b1e99fdf { to { transform: rotate(360deg); } } @media (min-width: 1024px) { .features-showcase[data-v-b1e99fdf] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } } .coming-soon-plan[data-v-b1e99fdf] { background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.72)); border: 1px solid rgba(148, 163, 184, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .coming-soon-chip[data-v-b1e99fdf] { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(148, 163, 184, 0.2); color: rgba(226, 232, 240, 0.85); border: 1px solid rgba(148, 163, 184, 0.35); } .coming-soon-button[data-v-b1e99fdf] { background: rgba(51, 65, 85, 0.75); border-color: rgba(148, 163, 184, 0.35); color: rgba(226, 232, 240, 0.8); cursor: not-allowed; transition: none; } .coming-soon-button[data-v-b1e99fdf]:disabled { opacity: 1; } .coming-soon-plan .feature-icon[data-v-b1e99fdf] { color: rgba(148, 163, 184, 0.75); } .plan-heading[data-v-b1e99fdf] { display: flex; flex-direction: column; gap: 0.5rem; } @media (min-width: 640px) { .plan-heading[data-v-b1e99fdf] { flex-direction: row; justify-content: space-between; align-items: flex-start; } } .plan-heading .coming-soon-chip[data-v-b1e99fdf] { align-self: flex-start; } .geniai-video-shell[data-v-b1e99fdf] { width: 100%; aspect-ratio: 16 / 9; border-radius: 0.8rem; overflow: hidden; background: radial-gradient(circle at 20% 20%, rgba(14, 165, 233, 0.22), rgba(15, 23, 42, 0.95) 60%); border: 1px solid hsla(220, 13%, 96%, 0.14); display: flex; align-items: center; justify-content: center; } .geniai-video-placeholder[data-v-b1e99fdf] { text-align: center; padding: 1.25rem; } @media (prefers-reduced-motion: reduce) { .btn-animate[data-v-b1e99fdf], .card-hover[data-v-b1e99fdf], .animate-on-scroll[data-v-b1e99fdf] { transition: none !important; } .card-hover[data-v-b1e99fdf]:hover { transform: none !important; } .feature-video-loading-spinner[data-v-b1e99fdf] { animation: none; } } .llbuilder-topbar[data-v-a0c99c61] { min-height: calc(var(--btn-scale, 1) * 3.65rem); gap: clamp(0.6rem, 1.1vw, 1rem); border-bottom: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 84%, transparent), color-mix(in srgb, var(--llb-panel, var(--color-bg-primary)) 90%, transparent)), var(--color-bg-primary); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24); backdrop-filter: blur(16px); } .llbuilder-brand-link[data-v-a0c99c61] { min-width: clamp(10rem, 16vw, 15rem); } .builder-button-large img[data-v-a0c99c61], .builder-button-large svg[data-v-a0c99c61] { transition: filter 0.3s ease; } .llbuilder-action-buttons[data-v-a0c99c61] { gap: calc(var(--btn-scale, 1) * 0.5rem); } .logo[data-v-a0c99c61] { font-size: calc(var(--btn-scale, 1) * 1.48rem); gap: calc(var(--btn-scale, 1) * 0.4rem); } .llbuilder-project-region[data-v-a0c99c61] { min-width: 0; } .llbuilder-project-strip[data-v-a0c99c61] { width: min(100%, 38rem); display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto auto; align-items: center; gap: 0.45rem; padding: 0.36rem 0.62rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 72%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent); } .llbuilder-project-kicker[data-v-a0c99c61] { font-size: 0.66rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--llb-text-muted, var(--color-text-secondary)); } .llbuilder-project-name[data-v-a0c99c61] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--llb-text-strong, var(--color-text-primary)); font-size: calc(var(--btn-scale, 1) * 0.92rem); line-height: 1.15; } .llbuilder-project-badge[data-v-a0c99c61] { display: inline-flex; align-items: center; justify-content: center; min-height: 1.28rem; padding: 0 0.48rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.62rem; font-weight: 750; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; } .llbuilder-project-badge--saved[data-v-a0c99c61], .llbuilder-project-badge--editable[data-v-a0c99c61] { color: var(--llb-success, var(--color-button-Simulation-Green)); background: color-mix(in srgb, var(--llb-success, var(--color-button-Simulation-Green)) 13%, transparent); border-color: color-mix(in srgb, var(--llb-success, var(--color-button-Simulation-Green)) 38%, transparent); } .llbuilder-project-badge--unsaved[data-v-a0c99c61], .llbuilder-project-badge--readonly[data-v-a0c99c61] { color: var(--llb-warning, var(--color-button-header-Contrast-Yellow)); background: color-mix(in srgb, var(--llb-warning, var(--color-button-header-Contrast-Yellow)) 13%, transparent); border-color: color-mix(in srgb, var(--llb-warning, var(--color-button-header-Contrast-Yellow)) 38%, transparent); } .llbuilder-project-badge--readonly[data-v-a0c99c61] { color: var(--llb-danger, var(--color-button-Simulation-Red)); background: color-mix(in srgb, var(--llb-danger, var(--color-button-Simulation-Red)) 13%, transparent); border-color: color-mix(in srgb, var(--llb-danger, var(--color-button-Simulation-Red)) 38%, transparent); } .llbuilder-top-action[data-v-a0c99c61] { --icon-size: calc(var(--btn-scale, 1) * 1.22rem); --llbuilder-action-ease: cubic-bezier(.16, 1, .3, 1); width: auto; min-width: calc(var(--btn-scale, 1) * 4.45rem); height: calc(var(--btn-scale, 1) * 2.08rem); gap: 0.34rem; padding-inline: 0.62rem; position: relative; isolation: isolate; overflow: hidden; border-radius: 0.48rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.025)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 72%, transparent); color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(2, 6, 23, 0.18); font-size: calc(var(--btn-scale, 1) * 0.7rem); font-weight: 760; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0); transition: transform 360ms var(--llbuilder-action-ease), border-color 220ms ease, background 220ms ease, box-shadow 300ms ease, color 180ms ease; } .llbuilder-top-action[data-v-a0c99c61]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, 0.08); opacity: 0; transition: opacity 260ms ease; } .llbuilder-top-action[data-v-a0c99c61]::after { content: ""; position: absolute; top: -80%; bottom: -80%; left: -70%; width: 52%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent); opacity: 0; transform: translateX(-120%) rotate(12deg); pointer-events: none; } .llbuilder-top-action svg[data-v-a0c99c61] { flex: 0 0 auto; width: var(--icon-size) !important; height: var(--icon-size) !important; color: inherit !important; } .llbuilder-top-action[data-v-a0c99c61] svg [stroke] { stroke: currentColor !important; } .llbuilder-top-action[data-v-a0c99c61] svg [fill]:not([fill="none"]) { fill: currentColor !important; } .llbuilder-top-action[data-v-a0c99c61] svg path:not([fill="none"]), .llbuilder-top-action[data-v-a0c99c61] svg rect:not([fill="none"]), .llbuilder-top-action[data-v-a0c99c61] svg circle:not([fill="none"]), .llbuilder-top-action[data-v-a0c99c61] svg ellipse:not([fill="none"]), .llbuilder-top-action[data-v-a0c99c61] svg polygon:not([fill="none"]), .llbuilder-top-action[data-v-a0c99c61] svg text { fill: currentColor !important; } .llbuilder-top-action[data-v-a0c99c61] svg.svg-inline--fa path { fill: currentColor !important; } .llbuilder-top-action[data-v-a0c99c61]:hover:not(:disabled) { transform: translateY(-1px) scale(1.012); border-color: color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 30%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 76%, transparent); color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 16px 32px rgba(2, 6, 23, 0.26), 0 0 18px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 12%, transparent); } .llbuilder-top-action[data-v-a0c99c61]:hover:not(:disabled)::before, .llbuilder-top-action[aria-pressed="true"][data-v-a0c99c61]::before { opacity: 0.2; } .llbuilder-top-action[data-v-a0c99c61]:hover:not(:disabled)::after, .llbuilder-top-action[aria-pressed="true"][data-v-a0c99c61]::after { animation: llbuilder-glass-sheen-a0c99c61 760ms var(--llbuilder-action-ease); } .llbuilder-top-action[data-v-a0c99c61]:active:not(:disabled) { transform: translateY(0) scale(0.968); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 18px rgba(2, 6, 23, 0.24); } .llbuilder-top-action.btn-sim-green[data-v-a0c99c61] { color: #ecfdf5 !important; border-color: rgba(20, 184, 166, 0.5); background: linear-gradient(180deg, rgba(45, 212, 191, 0.98), rgba(15, 118, 110, 0.98)), #0f766e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(2, 6, 23, 0.2), 0 14px 30px rgba(20, 184, 166, 0.24); } .llbuilder-top-action.btn-sim-green[data-v-a0c99c61]:hover:not(:disabled) { border-color: rgba(45, 212, 191, 0.62); background: linear-gradient(180deg, rgba(94, 234, 212, 1), rgba(13, 148, 136, 0.98)), #0d9488 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(2, 6, 23, 0.2), 0 16px 34px rgba(20, 184, 166, 0.32); } .llbuilder-top-action.btn-sim-red[data-v-a0c99c61] { color: #fff !important; border-color: rgba(244, 63, 94, 0.55); background: linear-gradient(180deg, rgba(251, 113, 133, 1), rgba(225, 29, 72, 0.98)), #e11d48 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(2, 6, 23, 0.18), 0 14px 30px rgba(244, 63, 94, 0.26); } .llbuilder-top-action.btn-sim-red[data-v-a0c99c61]:hover:not(:disabled) { border-color: rgba(255, 143, 166, 0.72); background: linear-gradient(180deg, rgba(253, 164, 175, 1), rgba(244, 63, 94, 0.98)), #f43f5e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(2, 6, 23, 0.18), 0 16px 34px rgba(244, 63, 94, 0.34); } .llbuilder-top-action.btn-accent[data-v-a0c99c61] { color: #f8fafc !important; border-color: rgba(59, 130, 246, 0.52); background: linear-gradient(180deg, rgba(59, 130, 246, 0.92), rgba(30, 64, 175, 0.92)), rgba(20, 35, 62, 0.94) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(2, 6, 23, 0.2), 0 14px 30px rgba(37, 99, 235, 0.24); } .llbuilder-top-action.btn-accent[data-v-a0c99c61]:hover:not(:disabled) { border-color: rgba(96, 165, 250, 0.66); background: linear-gradient(180deg, rgba(96, 165, 250, 0.96), rgba(37, 99, 235, 0.94)), rgba(29, 53, 91, 0.96) !important; } @keyframes llbuilder-glass-sheen-a0c99c61 { 0% { opacity: 0; transform: translateX(-120%) rotate(12deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translateX(340%) rotate(12deg); } } @media (orientation: landscape) and (max-height: 420px) { .llbuilder-action-buttons[data-v-a0c99c61] { gap: calc(var(--btn-scale, 1) * 0.3rem); } .llbuilder-top-action span[data-v-a0c99c61], .llbuilder-project-kicker[data-v-a0c99c61], .llbuilder-project-badge[data-v-a0c99c61] { display: none; } .llbuilder-project-strip[data-v-a0c99c61] { grid-template-columns: minmax(8rem, 1fr); } } .info-dot[data-v-00be57ae] { width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); color: var(--color-text-secondary); font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .info-dot[data-v-00be57ae]:hover, .info-dot[data-v-00be57ae]:focus-visible { border-color: var(--color-accent); color: var(--color-accent); background: rgba(59, 130, 246, 0.16); transform: translateY(-1px); } .info-dot--active[data-v-00be57ae] { animation: infoDotPulse-00be57ae 0.36s ease; border-color: var(--color-accent); color: var(--color-accent); background: rgba(59, 130, 246, 0.2); } @keyframes infoDotPulse-00be57ae { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .helper-dialog[data-v-27e69aaa] { width: min(38rem, 100%); border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.36); background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 48%), linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.98)); box-shadow: 0 24px 45px rgba(2, 6, 23, 0.5), inset 0 1px 0 rgba(148, 163, 184, 0.18); padding: 1.15rem; color: var(--color-text-primary); } .helper-dialog__header[data-v-27e69aaa] { margin-bottom: 0.9rem; } .helper-dialog__title[data-v-27e69aaa] { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.12rem; font-weight: 800; line-height: 1.28; margin-bottom: 0.45rem; } .helper-dialog__title-icon[data-v-27e69aaa] { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border-radius: 999px; border: 1px solid rgba(125, 211, 252, 0.58); background: rgba(14, 116, 144, 0.3); color: rgba(224, 242, 254, 0.95); font-size: 0.75rem; font-weight: 800; } .helper-dialog__description[data-v-27e69aaa] { color: var(--color-text-secondary); font-size: 0.86rem; line-height: 1.5; } .helper-dialog__takeaway[data-v-27e69aaa] { border: 1px solid rgba(56, 189, 248, 0.45); background: linear-gradient(180deg, rgba(8, 47, 73, 0.42), rgba(8, 47, 73, 0.26)); border-radius: 0.75rem; padding: 0.7rem 0.8rem; margin-bottom: 0.85rem; } .helper-dialog__takeaway-label[data-v-27e69aaa], .helper-dialog__section-label[data-v-27e69aaa] { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.67rem; font-weight: 800; color: rgba(125, 211, 252, 0.96); margin-bottom: 0.35rem; } .helper-dialog__takeaway-text[data-v-27e69aaa], .helper-dialog__tip[data-v-27e69aaa] { color: var(--color-text-primary); font-size: 0.84rem; line-height: 1.48; } .helper-dialog__section[data-v-27e69aaa] { margin-top: 0.72rem; border: 1px solid rgba(148, 163, 184, 0.18); background: rgba(15, 23, 42, 0.35); border-radius: 0.7rem; padding: 0.7rem 0.75rem; } .helper-dialog__list[data-v-27e69aaa] { margin: 0; padding: 0; list-style: none; color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.45; display: grid; gap: 0.45rem; } .helper-dialog__list li[data-v-27e69aaa] { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.45rem; } .helper-dialog__list-dot[data-v-27e69aaa] { display: inline-flex; width: 0.48rem; height: 0.48rem; border-radius: 999px; margin-top: 0.32rem; background: linear-gradient(135deg, #38bdf8, #a78bfa); box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.24); } .helper-dialog__actions[data-v-27e69aaa] { margin-top: 0.95rem; display: flex; justify-content: flex-end; } @media (max-width: 640px) { .helper-dialog[data-v-27e69aaa] { padding: 0.95rem; } .helper-dialog__section[data-v-27e69aaa] { padding: 0.62rem 0.66rem; } } .input-icon[data-v-92ae9c92] { position: absolute; left: .75rem; width: 16px; height: 16px; opacity: .75; pointer-events: none; } .input-wrap[data-v-92ae9c92] { transition: box-shadow 200ms ease, border-color 200ms ease; } /* compact spinner, reuses global @keyframes rotation */ .loader--sm[data-v-92ae9c92] { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--color-bg-secondary); border-bottom-color: var(--color-accent); border-radius: 50%; box-sizing: border-box; animation: rotation 1s linear infinite; } /* Pagination pills with neon accent for active page (matches OpenShowUserDialog) */ .pager-btn[data-v-fb330678] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .pager-btn[data-v-fb330678]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-fb330678]:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-fb330678] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } /* Disabled state for CTA buttons */ .btn-cta[data-v-fb330678]:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .filter-bar[data-v-fb330678] { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: .85rem; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(15,23,42,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .filter-icon[data-v-fb330678] { width: 1.1rem; height: 1.1rem; color: var(--color-accent); opacity: .9; flex: 0 0 auto; } .filter-input[data-v-fb330678] { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-fb330678]::-moz-placeholder { color: rgba(255,255,255,.5); } .filter-input[data-v-fb330678]::placeholder { color: rgba(255,255,255,.5); } /* small polish that matches your global look */ .list-row[data-v-203ee2af] { border-radius: .5rem; } /* Minimal – relies on global.css. Extra polish for caret/field. */ /* Section title: white, normal capitalization, no accent strip */ .section-title[data-v-eb9a5943] { display:flex; align-items:center; gap:.6rem; } .section-title__text[data-v-eb9a5943] { font-weight: 800; letter-spacing:.02em; font-size: 1rem; color: var(--color-text-primary); text-transform: none; } .section-title__text[data-v-eb9a5943]::after { display: none !important; } /* Chips: neutral glass, label blue, count white (icons already pink via inline class) */ .chip[data-v-eb9a5943]{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:9999px; font-size:.85rem; line-height:1; background: rgba(31,41,55,.45); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } /* Glassy table surface + scroll */ .table-surface[data-v-eb9a5943]{ border:1px solid var(--color-bg-primary); border-radius:.9rem; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)); backdrop-filter:blur(8px); } .table-scroll[data-v-eb9a5943]{ max-height:22rem; overflow:auto; } .table-scroll--4rows[data-v-eb9a5943]{ max-height:14.75rem; } /* Slim scrollbars */ .thin-scroll[data-v-eb9a5943]{ scrollbar-width: thin; scrollbar-color: var(--color-accent) rgba(255,255,255,0.08); } .thin-scroll[data-v-eb9a5943]::-webkit-scrollbar{height:8px;width:8px} .thin-scroll[data-v-eb9a5943]::-webkit-scrollbar-track{background: rgba(255,255,255,0.06)} .thin-scroll[data-v-eb9a5943]::-webkit-scrollbar-thumb{ background: var(--color-accent); border-radius: 8px; } /* Table styling: sticky header, zebra rows, column separators */ .yaga-table[data-v-eb9a5943]{ width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; font-size:.92rem; } .yaga-table thead th[data-v-eb9a5943]{ position:sticky; top:0; z-index:1; text-align:left; padding:.6rem .7rem; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); color: var(--color-text-primary); border-bottom:1px solid rgba(255,255,255,.08); box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); } .yaga-table thead th[data-v-eb9a5943]:not(:last-child), .yaga-table tbody td[data-v-eb9a5943]:not(:last-child){ box-shadow: inset -1px 0 0 rgba(255,255,255,.06); } .yaga-table tbody tr[data-v-eb9a5943]{ transition: background-color .2s ease, filter .2s ease; } .yaga-table tbody tr[data-v-eb9a5943]:nth-child(odd){ background: rgba(255,255,255,.02); } .yaga-table tbody tr[data-v-eb9a5943]:hover{ background: rgba(56,189,248,.06); filter: brightness(1.03); } .yaga-table tbody td[data-v-eb9a5943]{ padding:.55rem .7rem; color: var(--color-text-primary); border-bottom:1px solid rgba(255,255,255,.06); vertical-align: middle; } /* Empty state */ .empty-cell[data-v-eb9a5943]{ text-align:center; color:var(--color-text-secondary); padding:1rem .5rem; } /* Filter bar */ .filter-bar[data-v-63ed2713] { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: .85rem; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(15,23,42,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .filter-icon[data-v-63ed2713] { width: 1.1rem; height: 1.1rem; color: var(--color-accent); opacity: .9; flex: 0 0 auto; } .filter-input[data-v-63ed2713] { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-63ed2713]::-moz-placeholder { color: rgba(255,255,255,.5); } .filter-input[data-v-63ed2713]::placeholder { color: rgba(255,255,255,.5); } .lifecycle-select[data-v-63ed2713] { position: relative; width: 11rem; flex: 0 0 auto; } .lifecycle-trigger[data-v-63ed2713] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; border-radius: .65rem; border: 1px solid rgba(255,255,255,.22); background: rgba(15,23,42,0.62); color: var(--color-text-primary); font-size: .82rem; padding: .45rem .6rem; transition: border-color .2s ease, box-shadow .2s ease, transform .18s ease; } .lifecycle-trigger[data-v-63ed2713]:hover { transform: translateY(-1px); border-color: rgba(148,163,184,0.55); box-shadow: 0 8px 16px rgba(15,23,42,0.3); } .lifecycle-trigger[data-v-63ed2713]:focus-visible { outline: none; border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } .lifecycle-menu[data-v-63ed2713] { position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0; z-index: 120; padding: .4rem; border-radius: .85rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(15,23,42,0.92); box-shadow: 0 18px 40px rgba(15,23,42,0.45), 0 6px 20px rgba(59,130,246,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .lifecycle-option[data-v-63ed2713] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: .65rem; color: var(--color-text-primary); font-size: .85rem; cursor: pointer; transition: background-color .18s ease, box-shadow .2s ease, color .18s ease; } .lifecycle-option[data-v-63ed2713]:hover { background: rgba(255,255,255,0.06); } .lifecycle-option.is-focused[data-v-63ed2713] { background: color-mix(in srgb, var(--color-accent) 9%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); } .lifecycle-option.is-selected[data-v-63ed2713] { color: var(--color-accent); font-weight: 600; } /* Unified shell for tabs + table */ .data-shell[data-v-63ed2713] { border: 1px solid rgba(255,255,255,0.12); border-radius: .875rem; overflow: hidden; background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .data-toolbar[data-v-63ed2713] { display: flex; align-items: center; gap: .35rem; padding: .5rem; background: rgba(255,255,255,0.045); border-bottom: 1px solid rgba(255,255,255,0.08); } .tab-chip[data-v-63ed2713] { padding: .5rem .9rem; border-radius: .6rem; background: transparent; color: var(--color-text-secondary); border: 1px solid transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .18s ease; } .tab-chip[data-v-63ed2713]:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.06); transform: translateY(-1px); } .tab-chip.is-active[data-v-63ed2713] { color: var(--color-text-primary); background: rgba(255,255,255,0.085); border-color: rgba(255,255,255,0.12); box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 16px rgba(59,130,246,0.28), 0 2px 10px rgba(236,72,153,0.22); } .tab-chip[data-v-63ed2713]:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } /* Table container */ .table-scroll[data-v-63ed2713] { max-height: 24rem; overflow: auto; } /* Table aesthetics */ .fancy-table[data-v-63ed2713] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; } .fancy-table thead[data-v-63ed2713] { position: sticky; top: 0; background: rgba(0,0,0,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1; } .fancy-table thead th[data-v-63ed2713] { text-align: left; font-weight: 600; padding: .6rem .75rem; color: var(--color-text-primary); border-bottom: 1px solid rgba(255,255,255,0.08); } .fancy-table tbody td[data-v-63ed2713] { padding: .6rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--color-text-primary); } .fancy-table tbody tr[data-v-63ed2713]:hover { background: rgba(255,255,255,0.04); } /* Chip counters */ .chip[data-v-63ed2713]{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:9999px; font-size:.85rem; line-height:1; background: rgba(31,41,55,.45); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } /* Pagination pills with neon accent for active page */ .pager-btn[data-v-63ed2713] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .pager-btn[data-v-63ed2713]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-63ed2713]:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-63ed2713] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } /* Info button */ .info-btn[data-v-63ed2713] { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; color: var(--color-accent); transition: background-color .2s ease, transform .2s ease; } .info-btn[data-v-63ed2713]:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } /* Delete mode dropdown */ .delete-mode-select[data-v-63ed2713] { position: relative; width: 12rem; } .user-list-footer__actions[data-v-63ed2713] { display: flex; align-items: center; justify-content: flex-end; gap: 0.85rem; flex-wrap: wrap; } .delete-mode-group[data-v-63ed2713] { display: flex; align-items: center; gap: 0.65rem; } .delete-mode-trigger[data-v-63ed2713] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .75rem; border-radius: .75rem; background: var(--color-bg-secondary); border: 1px solid var(--color-bg-primary); color: var(--color-text-primary); font-size: .85rem; line-height: 1.1; transition: background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .18s ease; } .delete-mode-trigger[data-v-63ed2713]:hover { transform: translateY(-1px); border-color: rgba(148,163,184,0.5); background: rgba(255,255,255,0.06); } .delete-mode-trigger[data-v-63ed2713]:focus-visible { outline: none; border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } .delete-mode-menu[data-v-63ed2713] { position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0; z-index: 40; padding: .4rem; border-radius: .85rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(15,23,42,0.92); box-shadow: 0 18px 40px rgba(15,23,42,0.45), 0 6px 20px rgba(59,130,246,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-height: 12rem; overflow-y: auto; } .delete-mode-option[data-v-63ed2713] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .65rem; border-radius: .65rem; color: var(--color-text-primary); font-size: .85rem; cursor: pointer; transition: background-color .18s ease, box-shadow .2s ease, color .18s ease, transform .18s ease; } .delete-mode-option[data-v-63ed2713]:hover { background: rgba(255,255,255,0.06); } .delete-mode-option.is-focused[data-v-63ed2713] { background: color-mix(in srgb, var(--color-accent) 9%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); } .delete-mode-option.is-selected[data-v-63ed2713] { color: var(--color-accent); font-weight: 600; } .dropdown-fade-enter-active[data-v-63ed2713], .dropdown-fade-leave-active[data-v-63ed2713] { transition: opacity .18s ease, transform .18s ease; transform-origin: top; } .dropdown-fade-enter-from[data-v-63ed2713], .dropdown-fade-leave-to[data-v-63ed2713] { opacity: 0; transform: translateY(-4px) scale(0.98); } /* Disabled state for CTA buttons */ .btn-cta[data-v-63ed2713]:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } @media (max-width: 760px) { .user-list-footer[data-v-63ed2713], .user-list-footer__actions[data-v-63ed2713], .delete-mode-group[data-v-63ed2713] { align-items: stretch; flex-direction: column-reverse; } .delete-mode-select[data-v-63ed2713] { width: 100%; } } /* Minimal extras; most styling is from global.css */ /* Pagination pills with neon accent for active page (matches OpenShowUserDialog) */ .pager-btn[data-v-76bf3883] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .pager-btn[data-v-76bf3883]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-76bf3883]:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-76bf3883] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } /* Disabled state for CTA buttons */ .btn-cta[data-v-76bf3883]:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .filter-bar[data-v-76bf3883] { display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: .85rem; background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(15,23,42,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .filter-icon[data-v-76bf3883] { width: 1.1rem; height: 1.1rem; color: var(--color-accent); opacity: .9; flex: 0 0 auto; } .filter-input[data-v-76bf3883] { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-76bf3883]::-moz-placeholder { color: rgba(255,255,255,.5); } .filter-input[data-v-76bf3883]::placeholder { color: rgba(255,255,255,.5); } .selected-diagrams-summary[data-v-167eb02d] { margin-bottom: 1rem; color: var(--color-text-secondary); font-size: 0.86rem; line-height: 1.45; text-align: center; } .selected-diagrams-summary__list[data-v-167eb02d] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.55rem; } .selected-diagrams-summary__list li[data-v-167eb02d] { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-controls[data-v-167eb02d] { margin-bottom: 1rem; padding: 0.85rem; } .share-controls__row[data-v-167eb02d] { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; align-items: center; gap: 0.75rem; } .share-search[data-v-167eb02d] { min-width: 0; } .share-recipient-shell[data-v-167eb02d] { overflow: hidden; } .share-footer-actions[data-v-167eb02d] { justify-content: flex-end; width: auto; } @media (max-width: 720px) { .share-controls__row[data-v-167eb02d] { grid-template-columns: 1fr; } .share-footer-actions[data-v-167eb02d] { width: 100%; flex-direction: column-reverse; align-items: stretch; } } /* ----- Glassy bits reused from your style language ----- */ .chip[data-v-95b8b677] { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: 9999px; font-size: .85rem; line-height: 1; background: rgba(31,41,55,.45); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } /* Inline search */ .filter-bar[data-v-95b8b677] { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border-radius: .875rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; } .filter-bar[data-v-95b8b677]:focus-within { border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } .filter-icon[data-v-95b8b677] { width: 1.1rem; height: 1.1rem; color: var(--color-accent); opacity: .9; flex: 0 0 auto; } .filter-input[data-v-95b8b677] { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-95b8b677]::-moz-placeholder { color: rgba(255,255,255,.5); } .filter-input[data-v-95b8b677]::placeholder { color: rgba(255,255,255,.5); } /* Table container */ .table-scroll[data-v-95b8b677] { max-height: 22rem; overflow: auto; } /* Table aesthetics */ .fancy-table[data-v-95b8b677] { width: 100%; border-collapse: separate; border-spacing: 0; } .fancy-table thead[data-v-95b8b677] { position: sticky; top: 0; background: rgba(0,0,0,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1; } .fancy-table thead th[data-v-95b8b677] { font-weight: 700; color: var(--color-text-primary); border-bottom: 1px solid rgba(255,255,255,0.08); } .fancy-table tbody td[data-v-95b8b677] { color: var(--color-text-primary); border-bottom: 1px solid rgba(255,255,255,0.06); } .fancy-table thead th[data-v-95b8b677], .fancy-table tbody td[data-v-95b8b677] { padding: .6rem .75rem; } /* Sortable headers */ .th-sort[data-v-95b8b677] { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-primary); background: transparent; border: 0; padding: 0; cursor: pointer; transition: opacity .2s ease, text-shadow .2s ease, transform .18s ease; } .th-sort[data-v-95b8b677]:hover { opacity: .9; transform: translateY(-1px); } .th-sort.active[data-v-95b8b677] { text-shadow: 0 0 10px rgba(236,72,153,.55), 0 0 18px rgba(59,130,246,.35); } .arrow[data-v-95b8b677] { opacity: .85; } /* Avatars */ .avatar[data-v-95b8b677] { width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; letter-spacing: .02em; color: var(--color-accent-contrast); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 0 14px rgba(236,72,153,0.28) inset; } /* Icon button (copy / mail) */ .icon-btn[data-v-95b8b677] { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: var(--color-accent); transition: background-color .2s ease, transform .18s ease, color .2s ease; } .icon-btn[data-v-95b8b677]:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } /* Pagination pills */ .pager-btn[data-v-95b8b677] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .pager-btn[data-v-95b8b677]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-95b8b677]:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-95b8b677] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } /* Empty state card */ .empty-card[data-v-95b8b677] { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: .875rem; padding: 2rem; text-align: center; border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.03); color: var(--color-text-secondary); } .empty-card i[data-v-95b8b677] { color: var(--color-accent); opacity: .8; } .chip[data-v-4314a8d5]{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:9999px; font-size:.85rem; line-height:1; background: rgba(31,41,55,.45); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } /* Fields */ .glass-field[data-v-4314a8d5] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: .875rem; padding: .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .field-shell[data-v-4314a8d5], .textarea-shell[data-v-4314a8d5] { display: flex; gap: .6rem; padding: .5rem .75rem; border-radius: .65rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; } /* Ensure inputs and textareas fill the available width */ .field-shell input[data-v-4314a8d5], .textarea-shell textarea[data-v-4314a8d5] { flex: 1; width: 100%; } .field-shell[data-v-4314a8d5]:focus-within, .textarea-shell[data-v-4314a8d5]:focus-within { border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } /* Feedback area: a bit shorter, scrollbar appears only if needed */ .feedback-area[data-v-4314a8d5] { min-height: 4.25rem; max-height: 12rem; overflow: auto; /* shows scrollbar only when content exceeds box */ resize: vertical; } /* Single-line, horizontally scrollable chip rows */ .chips-row[data-v-4314a8d5]{ display:flex; align-items:center; gap:.45rem; overflow-x:auto; -webkit-overflow-scrolling: touch; white-space: nowrap; padding-bottom: .15rem; } .chips-row[data-v-4314a8d5]::-webkit-scrollbar { height: 8px; } .chips-row[data-v-4314a8d5]::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 8px; } .chips-row[data-v-4314a8d5]::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); } /* Compact chips */ .quick-chip[data-v-4314a8d5], .suggestion-chip[data-v-4314a8d5] { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .55rem; border-radius: 9999px; font-size: .78rem; line-height: 1; background: rgba(31,41,55,.45); color: var(--color-text-primary); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; } .quick-chip.other[data-v-4314a8d5] { border-style: dashed; opacity: .9; } .quick-chip[data-v-4314a8d5]:hover, .suggestion-chip[data-v-4314a8d5]:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); box-shadow: 0 0 12px rgba(236,72,153,0.28); } /* Letter badge by title (muted until valid) */ .letter-badge[data-v-4314a8d5]{ display:inline-flex; align-items:center; justify-content:center; min-width: 2.25rem; padding: .15rem .5rem; border-radius: 9999px; font-size: .75rem; font-weight: 800; letter-spacing: .02em; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--color-text-secondary); } .letter-badge.ok[data-v-4314a8d5]{ color: var(--color-accent-contrast); box-shadow: 0 0 12px rgba(236,72,153,.28) inset; } /* Loader */ .loader[data-v-4314a8d5] { width: 20px; height: 20px; border: 3px solid var(--color-bg-secondary); border-bottom-color: var(--color-accent-contrast); border-radius: 50%; animation: rotation-4314a8d5 1s linear infinite; } @keyframes rotation-4314a8d5 { to { transform: rotate(360deg); } } /* ---------- Chips ---------- */ .chip[data-v-472de4a4] { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .6rem; border-radius: 9999px; font-size: .85rem; line-height: 1; background: rgba(31,41,55,.45); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } .sortable[data-v-472de4a4] { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .arrow[data-v-472de4a4] { margin-left: .25rem; } /* ---------- Inline glass search ---------- */ .filter-row[data-v-472de4a4] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 0.75rem; } .filter-bar[data-v-472de4a4] { display: flex; align-items: center; gap: .6rem; height: 2.5rem; padding: 0 .8rem; border-radius: .875rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; min-width: 0; /* prevent overflow on tiny screens */ } .filter-bar[data-v-472de4a4]:focus-within { border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } .filter-icon[data-v-472de4a4] { width: 1.1rem; height: 1.1rem; color: var(--color-accent); opacity: .9; flex: 0 0 auto; } .filter-input[data-v-472de4a4] { flex: 1 1 auto; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .filter-input[data-v-472de4a4]::-moz-placeholder { color: rgba(255,255,255,.5); } .filter-input[data-v-472de4a4]::placeholder { color: rgba(255,255,255,.5); } .group-filter-button[data-v-472de4a4] { height: 2.5rem; } /* ---------- Unified shell for tabs + table ---------- */ .data-shell[data-v-472de4a4] { border: 1px solid rgba(255,255,255,0.12); border-radius: .875rem; overflow: hidden; /* keeps everything perfectly aligned */ background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .data-toolbar[data-v-472de4a4] { display: flex; align-items: center; gap: .35rem; padding: .5rem; background: rgba(255,255,255,0.045); border-bottom: 1px solid rgba(255,255,255,0.08); } .tab-chip[data-v-472de4a4] { padding: .5rem .9rem; border-radius: .6rem; background: transparent; color: var(--color-text-secondary); border: 1px solid transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .25s ease, transform .18s ease; } .tab-chip[data-v-472de4a4]:hover { color: var(--color-text-primary); background: rgba(255,255,255,0.06); transform: translateY(-1px); } .tab-chip.is-active[data-v-472de4a4] { color: var(--color-text-primary); background: rgba(255,255,255,0.085); border-color: rgba(255,255,255,0.12); /* soft glow, no gradients */ box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 6px 16px rgba(59,130,246,0.28), 0 2px 10px rgba(236,72,153,0.22); } .tab-chip[data-v-472de4a4]:focus-visible { outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } /* ---------- Table container ---------- */ .table-scroll[data-v-472de4a4] { max-height: 24rem; /* similar to max-h-96 */ overflow: auto; } /* ---------- Table aesthetics (glass, subtle dividers) ---------- */ .fancy-table[data-v-472de4a4] { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; } .fancy-table thead[data-v-472de4a4] { position: sticky; top: 0; background: rgba(0,0,0,0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1; } .fancy-table thead th[data-v-472de4a4] { text-align: left; font-weight: 600; padding: .6rem .75rem; color: var(--color-text-primary); border-bottom: 1px solid rgba(255,255,255,0.08); } .fancy-table tbody td[data-v-472de4a4] { padding: .6rem .75rem; border-bottom: 1px solid rgba(255,255,255,0.06); color: var(--color-text-primary); } .fancy-table tbody tr[data-v-472de4a4]:hover { background: rgba(255,255,255,0.04); } /* ---------- Info button ---------- */ .info-btn[data-v-472de4a4] { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; color: var(--color-accent); transition: background-color .2s ease, transform .2s ease; } .info-btn[data-v-472de4a4]:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } /* ---------- Grade button (numeric) ---------- */ .grade-btn[data-v-472de4a4] { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .5rem; border-radius: .375rem; color: var(--color-accent); font-weight: 600; transition: background-color .2s ease, transform .2s ease; } .grade-btn[data-v-472de4a4]:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } /* ---------- Inner footer (pagination) matches shell ---------- */ .data-footer[data-v-472de4a4] { display: flex; gap: .35rem; justify-content: center; align-items: center; padding: .6rem; border-top: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); } /* ---------- Neon pagination pills ---------- */ .pager-btn[data-v-472de4a4] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform .15s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease, filter .2s ease; } .pager-btn[data-v-472de4a4]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-472de4a4]:disabled { opacity: .5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-472de4a4] { background: rgba(236,72,153,0.95); /* solid but no gradient */ color: var(--color-bg-primary); border-color: rgba(236,72,153,0.95); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } .ladder-library-root[data-v-23fd5673] { color: var(--color-text-primary); min-width: min(72rem, 100%); } .ladder-library[data-v-23fd5673] { padding: 1.5rem; } .preset-card__header[data-v-23fd5673] { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-bg-primary); background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(99, 102, 241, 0.05)); } .preset-card__title[data-v-23fd5673] { font-size: 1.1rem; font-weight: 700; color: var(--color-accent); } .preset-card__subtitle[data-v-23fd5673] { color: var(--color-text-secondary); font-size: 0.9rem; } .preset-card__filters[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.75rem; min-width: 100%; } .filter-grid[data-v-23fd5673] { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; } .filter-label[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.35rem; color: var(--color-text-secondary); font-size: 0.85rem; } .filter-bar[data-v-23fd5673] { display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--color-bg-primary); border-radius: 0.75rem; padding: 0.4rem 0.75rem; } .filter-input[data-v-23fd5673] { width: 100%; background: transparent; outline: none; color: var(--color-text-primary); } .filter-icon[data-v-23fd5673] { width: 1rem; height: 1rem; color: var(--color-text-secondary); } .filter-select-btn[data-v-23fd5673] { width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: 1px solid var(--color-bg-primary); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.85rem; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .filter-select-btn[data-v-23fd5673]:focus-visible { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25); } .dropdown-menu[data-v-23fd5673] { padding: 0.35rem; border-radius: 0.75rem; background: var(--color-bg-secondary); border: 1px solid var(--color-bg-primary); box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22); } .dropdown-option[data-v-23fd5673] { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; padding: 0.45rem 0.55rem; cursor: pointer; border-radius: 0.6rem; color: var(--color-text-primary); font-size: 0.85rem; transition: background 0.18s ease, box-shadow 0.18s ease; } .dropdown-option[data-v-23fd5673]:hover { background: rgba(255, 255, 255, 0.06); } .dropdown-option--active[data-v-23fd5673] { background: rgba(59, 130, 246, 0.12); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35); } .dropdown-empty[data-v-23fd5673] { padding: 0.45rem 0.55rem; font-size: 0.85rem; color: var(--color-text-secondary); } .preset-count[data-v-23fd5673] { text-align: right; } .table-scroll[data-v-23fd5673] { max-height: 26rem; overflow: auto; } .preset-table[data-v-23fd5673] { font-size: 0.95rem; } .preset-table tbody td[data-v-23fd5673] { vertical-align: top; } .description-card[data-v-23fd5673] { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)); border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); } .description-header[data-v-23fd5673] { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .description-title-block[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.35rem; min-width: 16rem; } .description-eyebrow[data-v-23fd5673] { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .description-title-row[data-v-23fd5673] { display: flex; align-items: baseline; gap: 0.6rem; } .description-title[data-v-23fd5673] { font-size: 1.75rem; line-height: 1.2; font-weight: 800; color: var(--color-accent); } .description-subtitle[data-v-23fd5673] { font-size: 0.95rem; color: var(--color-text-secondary); } .preset-select-toggle[data-v-23fd5673] { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(59, 130, 246, 0.08)); color: var(--color-accent-contrast); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .preset-select-toggle[data-v-23fd5673]:hover, .preset-select-toggle[data-v-23fd5673]:focus-visible { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.75); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28); transform: translateY(-1px); } .preset-select-toggle[data-v-23fd5673]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .preset-select-toggle__icon[data-v-23fd5673] { color: inherit; display: inline-flex; align-items: center; justify-content: center; } .preset-select-toggle--active[data-v-23fd5673] { background: rgba(59, 130, 246, 0.22); border-color: var(--color-accent); box-shadow: 0 12px 28px rgba(59, 130, 246, 0.32); color: var(--color-accent); } .sr-only[data-v-23fd5673] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .footer-bar[data-v-23fd5673] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; } .footer-buttons[data-v-23fd5673] { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .footer-button[data-v-23fd5673] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 0.9rem; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; cursor: pointer; } .footer-button[data-v-23fd5673]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .footer-button.secondary[data-v-23fd5673] { border: 1px solid rgba(226, 232, 240, 0.4); background: transparent; color: rgba(226, 232, 240, 0.95); } .footer-button.secondary[data-v-23fd5673]:hover, .footer-button.secondary[data-v-23fd5673]:focus-visible { transform: translateY(-1px); border-color: rgba(226, 232, 240, 0.65); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35); } .meta-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .meta-chip[data-v-23fd5673] { position: relative; padding: 0.85rem 1rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.85rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); overflow: hidden; display: flex; flex-direction: column; gap: 0.3rem; } .meta-chip[data-v-23fd5673]::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.14), transparent 55%); opacity: 0.75; pointer-events: none; } .meta-label[data-v-23fd5673] { color: var(--color-text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em; z-index: 1; } .meta-value[data-v-23fd5673] { font-weight: 800; font-size: 1.05rem; color: var(--color-accent-contrast); z-index: 1; } .description-body[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.5rem; } .section-title[data-v-23fd5673] { font-weight: 700; color: var(--color-accent); text-shadow: 0 0 8px rgba(59, 130, 246, 0.2); } .description-text[data-v-23fd5673] { color: var(--color-text-primary); line-height: 1.5; } .outcome-card[data-v-23fd5673] { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--color-bg-primary); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.02); } .detail-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .detail-column[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.35rem; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--color-bg-primary); border-radius: 0.75rem; padding: 0.75rem; } .detail-label[data-v-23fd5673] { font-weight: 700; color: var(--color-accent); } .detail-list[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 1rem; color: var(--color-text-primary); } .chip-row[data-v-23fd5673] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .chip-collection[data-v-23fd5673] { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip[data-v-23fd5673] { display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: 999px; background: rgba(59, 130, 246, 0.12); color: var(--color-accent-contrast); border: 1px solid rgba(59, 130, 246, 0.25); font-weight: 600; font-size: 0.9rem; } .dictionary-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .dictionary-card[data-v-23fd5673] { border: 1px solid var(--color-bg-primary); border-radius: 0.85rem; padding: 0.75rem; background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); } .dictionary-row[data-v-23fd5673] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; } .dictionary-id[data-v-23fd5673] { font-weight: 800; color: var(--color-accent-contrast); } .dictionary-type[data-v-23fd5673] { padding: 0.15rem 0.45rem; background: rgba(255, 255, 255, 0.06); border-radius: 0.5rem; font-size: 0.8rem; color: var(--color-text-secondary); } .dictionary-name[data-v-23fd5673] { font-weight: 700; margin-bottom: 0.25rem; } .dictionary-description[data-v-23fd5673] { color: var(--color-text-secondary); line-height: 1.4; } /* ---------- v2 readability enhancements ---------- */ .preview-card[data-v-23fd5673] { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)); border: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14); } .preview-card__header[data-v-23fd5673] { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-bg-primary); } .preview-eyebrow[data-v-23fd5673] { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .preview-title[data-v-23fd5673] { font-size: 1.15rem; font-weight: 800; color: var(--color-accent); line-height: 1.2; } .preview-subtitle[data-v-23fd5673] { color: var(--color-text-secondary); font-size: 0.9rem; margin-top: 0.25rem; max-width: 56rem; } .preview-actions[data-v-23fd5673] { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; align-items: center; } .preview-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .preview-block[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.85rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); } .preview-label[data-v-23fd5673] { font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: 0.35rem; } .preview-text[data-v-23fd5673] { color: var(--color-text-primary); line-height: 1.45; } .preview-outcome-list[data-v-23fd5673] { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; } .preview-outcome[data-v-23fd5673] { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--color-text-primary); } .spec-line[data-v-23fd5673] { color: var(--color-text-secondary); font-size: 0.85rem; margin-top: 0.25rem; } .mode-toggle[data-v-23fd5673] { display: inline-flex; gap: 0.35rem; padding: 0.35rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .mode-toggle__btn[data-v-23fd5673] { padding: 0.45rem 0.8rem; border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--color-text-secondary); transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .mode-toggle__btn[data-v-23fd5673]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--color-accent-contrast); transform: translateY(-1px); } .mode-toggle__btn.active[data-v-23fd5673] { background: rgba(59, 130, 246, 0.18); color: var(--color-accent); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.18); } .mode-toggle__btn[data-v-23fd5673]:disabled { opacity: 0.55; cursor: not-allowed; } .quickstart-panel[data-v-23fd5673] { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .quickstart-item[data-v-23fd5673] { padding: 0.85rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)); } .quickstart-label[data-v-23fd5673] { color: var(--color-text-secondary); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; margin-bottom: 0.35rem; } .callout-panel[data-v-23fd5673] { padding: 0.9rem 1rem; border-radius: 0.85rem; border: 1px dashed rgba(226, 232, 240, 0.25); background: rgba(255, 255, 255, 0.02); } .callout-title[data-v-23fd5673] { font-weight: 800; color: var(--color-accent-contrast); margin-bottom: 0.25rem; } .callout-text[data-v-23fd5673] { color: var(--color-text-secondary); } .guided-layout[data-v-23fd5673] { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 1rem; } @media (max-width: 900px) { .guided-layout[data-v-23fd5673] { grid-template-columns: 1fr; } } .guided-sidebar[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } .guided-sidebar__label[data-v-23fd5673] { font-weight: 800; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: 0.25rem; } .guided-rung-btn[data-v-23fd5673] { width: 100%; display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.65rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); color: var(--color-text-primary); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease; text-align: left; } .guided-rung-btn[data-v-23fd5673]:hover { background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); } .guided-rung-btn.active[data-v-23fd5673] { border-color: rgba(59, 130, 246, 0.55); background: rgba(59, 130, 246, 0.12); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.16); } .guided-rung-badge[data-v-23fd5673] { width: 1.75rem; height: 1.75rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(59, 130, 246, 0.14); border: 1px solid rgba(59, 130, 246, 0.25); color: var(--color-accent); } .guided-rung-title[data-v-23fd5673] { font-weight: 700; } .guided-main[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.02); padding: 0.9rem; } .guided-header[data-v-23fd5673] { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .guided-eyebrow[data-v-23fd5673] { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .guided-title[data-v-23fd5673] { font-size: 1.1rem; font-weight: 900; color: var(--color-accent); margin-top: 0.25rem; } .guided-subtitle[data-v-23fd5673] { color: var(--color-text-secondary); margin-top: 0.25rem; line-height: 1.45; } .step-list[data-v-23fd5673] { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .step-card[data-v-23fd5673] { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.75rem; align-items: start; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .step-card[data-v-23fd5673]:hover { background: rgba(255, 255, 255, 0.05); transform: translateY(-1px); } .step-checkbox[data-v-23fd5673] { margin-top: 0.3rem; } .step-top[data-v-23fd5673] { display: flex; align-items: baseline; gap: 0.6rem; } .step-number[data-v-23fd5673] { font-weight: 900; color: var(--color-accent); width: 1.6rem; } .step-title[data-v-23fd5673] { font-weight: 700; color: var(--color-accent-contrast); } .step-why[data-v-23fd5673] { margin-top: 0.45rem; border-left: 3px solid rgba(59, 130, 246, 0.4); padding-left: 0.65rem; } .step-why__label[data-v-23fd5673] { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); } .step-why__text[data-v-23fd5673] { color: var(--color-text-secondary); margin-top: 0.2rem; line-height: 1.45; } .step-meta[data-v-23fd5673] { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.4rem; } .meta-chip-small[data-v-23fd5673] { display: inline-flex; padding: 0.25rem 0.55rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; } .verify-panel[data-v-23fd5673] { margin-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.85rem; } .verify-title[data-v-23fd5673] { font-weight: 900; color: var(--color-accent-contrast); margin-bottom: 0.45rem; } .verify-list[data-v-23fd5673] { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; } .verify-item[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; } .verify-test[data-v-23fd5673] { font-weight: 800; color: var(--color-text-primary); } .verify-expected[data-v-23fd5673] { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; } .state-chip[data-v-23fd5673] { display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.25); background: rgba(59, 130, 246, 0.1); color: var(--color-accent-contrast); font-weight: 800; font-size: 0.8rem; } .verify-note[data-v-23fd5673] { color: var(--color-text-secondary); margin-top: 0.45rem; } .io-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .io-card[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; } .io-list[data-v-23fd5673] { margin: 0.35rem 0 0; padding-left: 1rem; display: flex; flex-direction: column; gap: 0.35rem; } .io-tag[data-v-23fd5673] { font-weight: 900; color: var(--color-accent-contrast); } .io-note[data-v-23fd5673] { color: var(--color-text-secondary); } .hint-grid[data-v-23fd5673] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; } .hint-card[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.85rem; background: rgba(255, 255, 255, 0.02); padding: 0.75rem; } .reference-stack[data-v-23fd5673] { display: flex; flex-direction: column; gap: 0.75rem; } .accordion[data-v-23fd5673] { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0.9rem; background: rgba(255, 255, 255, 0.02); overflow: hidden; } .accordion-summary[data-v-23fd5673] { cursor: pointer; padding: 0.85rem 1rem; font-weight: 900; color: var(--color-accent-contrast); list-style: none; } .accordion-summary[data-v-23fd5673]::-webkit-details-marker { display: none; } .accordion-summary[data-v-23fd5673]::after { content: '▾'; float: right; opacity: 0.75; transform: translateY(2px); } details[open].accordion .accordion-summary[data-v-23fd5673]::after { content: '▴'; } .accordion-content[data-v-23fd5673] { padding: 0 1rem 1rem; color: var(--color-text-primary); } .dictionary-search[data-v-23fd5673] { margin-bottom: 0.75rem; } .dictionary-card--active[data-v-23fd5673] { border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18), 0 14px 30px rgba(59, 130, 246, 0.12); } .demographics-grid[data-v-d2de9ced] { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.1rem; margin-top: 1.1rem; } .chart-card.glass[data-v-d2de9ced] { position: relative; padding: 1.1rem 1.15rem; border-radius: 0.75rem; border: 1px solid var(--llb-dialog-section-border); background: var(--llb-dialog-section-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 32px rgba(2, 6, 23, 0.15); display: flex; flex-direction: column; gap: 0.8rem; min-height: 260px; } .chart-header[data-v-d2de9ced] { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .chart-title[data-v-d2de9ced] { display: inline-flex; align-items: center; gap: 0.45rem; } .chart-header h3[data-v-d2de9ced] { font-weight: 700; font-size: 1.05rem; letter-spacing: 0; color: var(--color-text-primary); } .chart-subtitle[data-v-d2de9ced] { font-size: 0.85rem; color: var(--color-text-secondary); } .canvas-container[data-v-d2de9ced] { position: relative; flex: 1; width: 100%; min-height: 180px; } .doughnut-container[data-v-d2de9ced] { display: flex; align-items: center; justify-content: center; } :root { --sparkline-stroke: #4884ff; } /* Shell */ .dashboard-shell[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 1.25rem; min-width: min(64rem, 100vw - 2rem); color: var(--color-text-primary, #f8fbff); } .dashboard-body[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 1.5rem; } .analytics-controls[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.5rem; } .timeframe-selector[data-v-a8348e4a] { display: flex; flex-wrap: wrap; gap: .5rem; } .timeframe-btn[data-v-a8348e4a] { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .35rem .85rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(15,23,42,.45); color: rgba(255,255,255,.78); font-size: .85rem; font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; } .timeframe-btn[data-v-a8348e4a]:hover, .timeframe-btn[data-v-a8348e4a]:focus-visible { background: rgba(72,132,255,.18); color: #fff; } .timeframe-btn.active[data-v-a8348e4a] { background: rgba(72,132,255,.35); border-color: rgba(72,132,255,.45); color: #fff; box-shadow: 0 10px 24px rgba(72,132,255,.25); } .timeframe-btn[data-v-a8348e4a]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .timeframe-details[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .35rem; color: rgba(255,255,255,.78); } .timeframe-meta[data-v-a8348e4a] { margin: 0; font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.88); } .timeframe-subtext[data-v-a8348e4a] { margin: 0; font-size: .8rem; color: rgba(255,255,255,.65); } .realtime-note[data-v-a8348e4a] { color: rgba(56,189,248,.9); } .dashboard-tabs[data-v-a8348e4a] { display: flex; gap: .5rem; padding: .35rem; border-radius: 999px; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255,255,255,.08); align-self: flex-start; } .tab-btn[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; border-radius: 999px; background: transparent; border: none; color: rgba(255,255,255,.65); font-weight: 600; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .tab-btn[data-v-a8348e4a]:hover, .tab-btn[data-v-a8348e4a]:focus-visible { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); } .tab-btn.active[data-v-a8348e4a] { background: rgba(72,132,255,.25); color: #fff; box-shadow: 0 8px 20px rgba(72,132,255,.32); } .tab-btn[data-v-a8348e4a]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Header */ .dialog-title[data-v-a8348e4a] { letter-spacing: .01em; font-family: 'Righteous', sans-serif; } .dialog-title-text[data-v-a8348e4a] { display: inline-block; background: linear-gradient( 90deg, var(--color-accent-contrast) 0%, var(--color-accent-contrast) 50%, var(--color-accent) 50%, var(--color-accent) 100% ); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .dashboard-header[data-v-a8348e4a] { position: relative; width: 100%; padding: 3rem 0 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; } .title-group[data-v-a8348e4a] { display: flex; flex-direction: column; align-items: center; gap: .75rem; max-width: 42rem; } .subtitle[data-v-a8348e4a] { margin: 0; color: var(--color-text-secondary, rgba(255,255,255,.72)); font-size: .95rem; } .title-meta[data-v-a8348e4a] { display: flex; justify-content: center; margin-top: .25rem; } /* Chip */ .chip[data-v-a8348e4a]{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:9999px; font-size:.78rem; line-height:1; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--color-text-primary); } .chip-on[data-v-a8348e4a]{ color: var(--color-accent-contrast); box-shadow: 0 0 0 1px rgba(236,72,153,.22) inset, 0 0 14px rgba(236,72,153,.22); } .chip-off[data-v-a8348e4a]{ color: var(--color-text-secondary); } /* Close button */ .close-btn[data-v-a8348e4a] { position: absolute; top: 0; right: 0; display: inline-flex; align-items:center; justify-content:center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.9); transition: transform .18s ease, background .18s ease; } .close-btn[data-v-a8348e4a]:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px); } .close-btn[data-v-a8348e4a]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* KPI grid */ .metrics-grid[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; } .state-card[data-v-a8348e4a] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; min-height: 12rem; text-align: center; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); backdrop-filter: blur(8px); box-shadow: 0 12px 34px rgba(15,23,42,.28); padding: 2rem 1.5rem; color: var(--color-text-secondary, rgba(255,255,255,.72)); } .warning-card[data-v-a8348e4a] { align-items: flex-start; text-align: left; gap: 1rem; color: rgba(255,255,255,.88); border-color: rgba(239,68,68,.35); background: linear-gradient(180deg, rgba(239,68,68,0.22), rgba(239,68,68,0.08)); box-shadow: 0 16px 36px rgba(239,68,68,.28); } .warning-card .retry-btn[data-v-a8348e4a] { align-self: flex-start; } .error-list[data-v-a8348e4a] { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .45rem; list-style: disc; color: inherit; font-size: .95rem; } .error-list li[data-v-a8348e4a] { line-height: 1.4; } .retry-btn[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: inherit; font-weight: 600; transition: transform .18s ease, background .18s ease; } .retry-btn[data-v-a8348e4a]:hover { background: rgba(255,255,255,0.16); transform: translateY(-1px); } .retry-btn[data-v-a8348e4a]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .animate-spin[data-v-a8348e4a] { animation: dashboard-spin-a8348e4a 1s linear infinite; } @keyframes dashboard-spin-a8348e4a { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .metric-card.glass[data-v-a8348e4a]{ border-radius: 1rem; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); backdrop-filter: blur(8px); padding: 1rem 1.1rem; box-shadow: 0 12px 34px rgba(15,23,42,.28); } .metric-head[data-v-a8348e4a] { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; } .metric-head h3[data-v-a8348e4a] { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.72); } .metric-value[data-v-a8348e4a] { font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 800; color:#fff; letter-spacing:.01em; } .metric-footnote[data-v-a8348e4a] { margin-top: .2rem; font-size: .86rem; color: rgba(255,255,255,.65); display: inline-flex; align-items: center; gap: .35rem; } .metric-footnote.trend i[data-v-a8348e4a] { color: currentColor; } .metric-footnote.positive[data-v-a8348e4a] { color: #55d2a0; } .metric-footnote.negative[data-v-a8348e4a] { color: #ff7a7a; } .teacher-stepper.glass[data-v-a8348e4a] { margin-top: 1rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); box-shadow: 0 12px 34px rgba(15,23,42,.28); padding: .9rem 1rem; } .teacher-stepper-head[data-v-a8348e4a] { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .teacher-stepper-head h3[data-v-a8348e4a] { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,0.72); } .teacher-stepper-tooltip[data-v-a8348e4a] { border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); font-size: .72rem; padding: .28rem .6rem; } .teacher-stepper-list[data-v-a8348e4a] { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .65rem .6rem; margin: 0; padding: 0; } .teacher-stepper-item[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .2rem; padding: .55rem .6rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(15,23,42,0.35); } .teacher-stepper-item.complete[data-v-a8348e4a] { border-color: rgba(85, 210, 160, 0.5); background: rgba(85, 210, 160, 0.14); } .teacher-stepper-item.active[data-v-a8348e4a] { border-color: rgba(45, 212, 191, 0.8); background: rgba(45, 212, 191, 0.18); box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.25) inset; } .teacher-stepper-dot[data-v-a8348e4a] { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,0.45); } .teacher-stepper-item.active .teacher-stepper-dot[data-v-a8348e4a], .teacher-stepper-item.complete .teacher-stepper-dot[data-v-a8348e4a] { background: #55d2a0; } .teacher-stepper-label[data-v-a8348e4a] { color: #fff; font-weight: 700; font-size: .82rem; } .teacher-stepper-hint[data-v-a8348e4a] { color: rgba(255,255,255,.7); font-size: .72rem; line-height: 1.25; } /* Charts grid */ .chart-grid[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.1rem; } .chart-card.glass[data-v-a8348e4a]{ position: relative; padding: 1.1rem 1.15rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); box-shadow: 0 18px 42px rgba(15,23,42,.28); display: flex; flex-direction: column; gap: .8rem; } .chart-card.span-2[data-v-a8348e4a] { grid-column: span 2; } .span-full[data-v-a8348e4a] { grid-column: 1 / -1; width: 100%; } .list-grid[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .6rem; } .list-item[data-v-a8348e4a] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; color: rgba(255,255,255,.78); font-size: .9rem; } .list-label[data-v-a8348e4a] { font-weight: 600; } .list-value[data-v-a8348e4a] { font-variant-numeric: tabular-nums; color: #fff; font-weight: 700; } .list-item.muted[data-v-a8348e4a] { color: rgba(255,255,255,.6); font-style: italic; } .chart-header[data-v-a8348e4a] { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; } .chart-title[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: .45rem; } .chart-header h3[data-v-a8348e4a] { font-weight: 700; font-size: 1.05rem; letter-spacing: .01em; } .chart-subtitle[data-v-a8348e4a] { font-size: .85rem; color: rgba(255,255,255,.6); } /* Bars */ .bar-chart[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.4rem, 1fr)); align-items: end; gap: .75rem; height: 12rem; } .bar[data-v-a8348e4a] { position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; color: rgba(255,255,255,.75); } .bar[data-v-a8348e4a]::before { content: ''; width: 100%; height: var(--bar-height, 10%); border-radius: .8rem .8rem .4rem .4rem; background: linear-gradient(180deg, rgba(72,169,255,.95), rgba(72,132,255,.65)), radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.18), transparent 70%); box-shadow: 0 8px 14px rgba(72,132,255,.28), inset 0 0 0 1px rgba(255,255,255,.15); transition: height .4s ease; } .bar-value[data-v-a8348e4a] { font-weight: 600; font-size: .8rem; } .bar-label[data-v-a8348e4a] { font-size: .74rem; color: rgba(255,255,255,.58); } /* Line */ .line-chart[data-v-a8348e4a] { position: relative; width: 100%; height: 12rem; } .line-chart svg[data-v-a8348e4a] { width: 100%; height: 100%; } /* Legend */ .chart-legend[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .45rem; font-size: .86rem; color: rgba(255,255,255,.7); } .chart-legend li[data-v-a8348e4a] { display: flex; align-items: center; gap: .5rem; justify-content: space-between; } .legend-dot[data-v-a8348e4a] { width: .6rem; height: .6rem; border-radius: 50%; background: var(--sparkline-stroke); box-shadow: 0 0 10px rgba(72,132,255,.55); } .legend-label[data-v-a8348e4a] { opacity: .9; } .legend-value[data-v-a8348e4a] { color: #fff; font-weight: 700; } /* Roles */ .role-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .75rem; } .role-label[data-v-a8348e4a] { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; font-weight: 600; } .role-bar[data-v-a8348e4a] { margin-top: .45rem; width: 100%; height: .75rem; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .role-bar-fill[data-v-a8348e4a] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(91,214,157,.95), rgba(72,169,255,.95)); transition: width .45s ease; } .channel-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .85rem; color: rgba(255,255,255,.78); font-size: .92rem; } .channel-label[data-v-a8348e4a] { display: flex; justify-content: space-between; font-weight: 600; color: #fff; } .channel-label strong[data-v-a8348e4a] { font-variant-numeric: tabular-nums; } .channel-footnote[data-v-a8348e4a] { margin-top: .2rem; color: rgba(255,255,255,.62); font-size: .85rem; } .channel-empty[data-v-a8348e4a] { color: rgba(255,255,255,.6); font-style: italic; } .page-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .75rem; } .page-label[data-v-a8348e4a] { font-weight: 600; color: rgba(255,255,255,.88); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-metrics[data-v-a8348e4a] { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .85rem; color: rgba(255,255,255,.7); } .pageviews[data-v-a8348e4a] { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .page-share[data-v-a8348e4a] { color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; } .page-empty[data-v-a8348e4a] { color: rgba(255,255,255,.6); font-style: italic; } .goal-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .85rem; } .goal-heading[data-v-a8348e4a] { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-weight: 600; color: rgba(255,255,255,.88); } .goal-name[data-v-a8348e4a] { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .goal-rate[data-v-a8348e4a] { font-size: .85rem; color: rgba(255,255,255,.65); font-variant-numeric: tabular-nums; } .goal-bar[data-v-a8348e4a] { position: relative; height: .9rem; border-radius: .75rem; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); overflow: hidden; } .goal-bar-fill[data-v-a8348e4a] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(72,169,255,.92), rgba(91,214,157,.95)); transition: width .35s ease; } .goal-count[data-v-a8348e4a] { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.9); color: #0f172a; font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: .75rem; font-variant-numeric: tabular-nums; } .goal-empty[data-v-a8348e4a] { color: rgba(255,255,255,.6); font-style: italic; } .segmentation-note[data-v-a8348e4a] { margin-top: 1.1rem; padding: .85rem 1rem; border-radius: .85rem; border: 1px dashed rgba(255,255,255,.22); color: rgba(255,255,255,.72); font-size: .85rem; background: rgba(15,23,42,.38); } .revenue-detail-grid[data-v-a8348e4a] { align-items: stretch; } .revenue-controls[data-v-a8348e4a] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border-radius: 12px; background: var(--glass-bg); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); } .revenue-refresh-meta[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.35rem; } .revenue-filter-controls[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.6rem; flex: 1; } .revenue-custom-range[data-v-a8348e4a] { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; } .revenue-custom-range label[data-v-a8348e4a] { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--color-text-muted); } .revenue-custom-range input[data-v-a8348e4a] { border-radius: 0.55rem; border: 1px solid rgba(255,255,255,.2); background: rgba(15,23,42,.42); color: #fff; padding: 0.3rem 0.5rem; } .revenue-update[data-v-a8348e4a] { font-weight: 600; color: var(--color-text-strong); margin: 0; } .revenue-source[data-v-a8348e4a] { margin: 0; color: var(--color-text-muted); } .revenue-controls .refresh-btn[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: 0.4rem; border: none; padding: 0.65rem 0.9rem; border-radius: 10px; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-contrast)); color: #0c1018; font-weight: 700; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); cursor: pointer; } .revenue-controls .refresh-btn[disabled][data-v-a8348e4a] { opacity: 0.7; cursor: not-allowed; } .revenue-controls .refresh-btn i[data-v-a8348e4a] { color: inherit; } .revenue-trend-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 1rem; } .revenue-trend-item[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .5rem; } .revenue-trend-head[data-v-a8348e4a] { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; font-weight: 600; color: #fff; } .revenue-trend-head span[data-v-a8348e4a] { color: rgba(255,255,255,.78); font-weight: 500; } .revenue-trend-bars[data-v-a8348e4a] { position: relative; height: .55rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; } .revenue-trend-bar[data-v-a8348e4a] { position: absolute; inset: 0; border-radius: inherit; } .revenue-trend-bar.recognized[data-v-a8348e4a] { background: linear-gradient(90deg, rgba(72,132,255,.85), rgba(72,132,255,.35)); width: var(--bar-width, 0%); } .revenue-trend-bar.deferred[data-v-a8348e4a] { background: linear-gradient(90deg, rgba(255,183,77,.9), rgba(255,183,77,.4)); width: var(--bar-width, 0%); } .revenue-trend-meta[data-v-a8348e4a] { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .75rem; color: rgba(255,255,255,.65); } .revenue-plan-list .list-value[data-v-a8348e4a], .revenue-currency-list .list-value[data-v-a8348e4a] { font-weight: 600; } .revenue-customer-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .85rem; } .revenue-customer-item[data-v-a8348e4a] { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; } .revenue-customer-info span[data-v-a8348e4a] { font-weight: 600; color: #fff; } .revenue-customer-info small[data-v-a8348e4a] { font-size: .75rem; color: rgba(255,255,255,.65); } .revenue-customer-amount[data-v-a8348e4a] { font-weight: 600; color: var(--color-accent); } .revenue-customer-table td[data-v-a8348e4a]:last-child, .revenue-customer-table th[data-v-a8348e4a]:last-child { text-align: right; } .revenue-kpi-grid[data-v-a8348e4a] { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); margin: .5rem 0 1rem; } .revenue-kpi[data-v-a8348e4a] { display: flex; flex-direction: column; gap: .25rem; padding: .75rem; border-radius: .75rem; background: rgba(255,255,255,.05); } .revenue-kpi span[data-v-a8348e4a] { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); } .revenue-kpi strong[data-v-a8348e4a] { font-size: 1.05rem; color: #fff; } .revenue-empty[data-v-a8348e4a] { color: rgba(255,255,255,.65); font-size: .85rem; } @media (max-width: 768px) { .chart-card.span-2[data-v-a8348e4a] { grid-column: span 1; } } /* a11y */ .sr-only[data-v-a8348e4a] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Feedback tab */ .feedback-layout[data-v-a8348e4a], .assistance-layout[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 1.25rem; } .feedback-summary-grid[data-v-a8348e4a], .assistance-summary-grid[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 1rem; } .feedback-card.glass[data-v-a8348e4a], .assistance-card.glass[data-v-a8348e4a] { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15,23,42,0.55)); backdrop-filter: blur(10px); padding: 1.1rem 1.2rem; box-shadow: 0 16px 40px rgba(15,23,42,0.32); display: flex; flex-direction: column; gap: 0.45rem; } .feedback-card-head[data-v-a8348e4a], .assistance-card-head[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: 0.45rem; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); } .feedback-metric[data-v-a8348e4a], .assistance-metric[data-v-a8348e4a] { font-size: clamp(1.8rem, 2.5vw, 2.2rem); font-weight: 800; color: #fff; } .feedback-subtext[data-v-a8348e4a], .assistance-subtext[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.65); } .feedback-secondary-grid[data-v-a8348e4a], .assistance-secondary-grid[data-v-a8348e4a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; } .feedback-languages[data-v-a8348e4a], .feedback-sentiment[data-v-a8348e4a] { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(15,23,42,0.5)); backdrop-filter: blur(12px); padding: 1.2rem 1.3rem; box-shadow: 0 16px 38px rgba(15,23,42,0.3); display: flex; flex-direction: column; gap: 0.85rem; } .assistance-breakdown.glass[data-v-a8348e4a] { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(15,23,42,0.5)); backdrop-filter: blur(12px); padding: 1.2rem 1.3rem; box-shadow: 0 16px 38px rgba(15,23,42,0.3); display: flex; flex-direction: column; gap: 0.85rem; } .assistance-status-list[data-v-a8348e4a], .assistance-severity-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.75rem; } .assistance-status-item[data-v-a8348e4a], .assistance-severity-item[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.45rem; color: rgba(255,255,255,0.85); } .assistance-status-label[data-v-a8348e4a], .assistance-severity-label[data-v-a8348e4a] { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; } .assistance-status-meta[data-v-a8348e4a], .assistance-severity-meta[data-v-a8348e4a] { font-size: 0.8rem; color: rgba(255,255,255,0.6); } .assistance-status-bar[data-v-a8348e4a], .assistance-severity-bar[data-v-a8348e4a] { position: relative; width: 100%; height: 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .assistance-status-bar-fill[data-v-a8348e4a], .assistance-severity-bar-fill[data-v-a8348e4a] { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(72,132,255,0.85), rgba(72,132,255,0.25)); transition: width 0.35s ease; } .assistance-severity-item.muted .assistance-severity-bar-fill[data-v-a8348e4a] { background: rgba(148,163,184,0.25); } .assistance-severity-item.muted .assistance-severity-label[data-v-a8348e4a] { color: rgba(255,255,255,0.55); } .assistance-sentiment-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.75rem; } .assistance-sentiment-item[data-v-a8348e4a] { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .assistance-sentiment-meta[data-v-a8348e4a] { font-size: 0.8rem; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; } .assistance-empty[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.6); font-style: italic; } .language-list[data-v-a8348e4a], .sentiment-list[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.75rem; } .language-label[data-v-a8348e4a], .sentiment-label[data-v-a8348e4a] { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; color: rgba(255,255,255,0.85); } .language-meta[data-v-a8348e4a], .sentiment-meta[data-v-a8348e4a] { font-size: 0.8rem; color: rgba(255,255,255,0.6); } .language-bar[data-v-a8348e4a], .sentiment-bar[data-v-a8348e4a] { position: relative; width: 100%; height: 0.55rem; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); } .language-bar-fill[data-v-a8348e4a], .sentiment-bar-fill[data-v-a8348e4a] { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(59,130,246,0.85), rgba(236,72,153,0.85)); transition: width 0.35s ease; } .sentiment-chip[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.85); } .sentiment-chip.sentiment-positive[data-v-a8348e4a] { background: rgba(34,197,94,0.15); color: #4ade80; } .sentiment-chip.sentiment-neutral[data-v-a8348e4a] { background: rgba(148,163,184,0.15); color: rgba(226,232,240,0.9); } .sentiment-chip.sentiment-negative[data-v-a8348e4a] { background: rgba(248,113,113,0.18); color: #fca5a5; } .sentiment-chip.sentiment-unrated[data-v-a8348e4a] { background: rgba(148,163,184,0.1); color: rgba(226,232,240,0.75); } .sentiment-bar-fill.sentiment-positive[data-v-a8348e4a] { background: linear-gradient(90deg, rgba(34,197,94,0.95), rgba(16,185,129,0.9)); } .sentiment-bar-fill.sentiment-neutral[data-v-a8348e4a] { background: linear-gradient(90deg, rgba(148,163,184,0.9), rgba(148,163,184,0.6)); } .sentiment-bar-fill.sentiment-negative[data-v-a8348e4a] { background: linear-gradient(90deg, rgba(248,113,113,0.95), rgba(239,68,68,0.85)); } .sentiment-empty[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.6); } .feedback-table-card.glass[data-v-a8348e4a], .assistance-table-card.glass[data-v-a8348e4a] { border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15,23,42,0.5)); backdrop-filter: blur(12px); padding: 1.25rem 1.35rem; box-shadow: 0 18px 44px rgba(15,23,42,0.32); display: flex; flex-direction: column; gap: 1rem; } .feedback-table-head[data-v-a8348e4a], .assistance-table-head[data-v-a8348e4a] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .feedback-total-pill[data-v-a8348e4a], .assistance-total-pill[data-v-a8348e4a] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.08); font-size: 0.78rem; color: rgba(255,255,255,0.85); } .table-subtitle[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.65); margin-top: 0.35rem; } .table-container[data-v-a8348e4a] { width: 100%; overflow-x: auto; } .feedback-table[data-v-a8348e4a], .assistance-table[data-v-a8348e4a] { width: 100%; border-collapse: collapse; min-width: 52rem; } .feedback-table th[data-v-a8348e4a], .feedback-table td[data-v-a8348e4a], .assistance-table th[data-v-a8348e4a], .assistance-table td[data-v-a8348e4a] { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.9rem; color: rgba(255,255,255,0.85); } .feedback-table th[data-v-a8348e4a], .assistance-table th[data-v-a8348e4a] { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.6); } .topic-cell[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.35rem; } .topic-title[data-v-a8348e4a] { font-weight: 600; color: #fff; } .topic-comments[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.65); line-height: 1.45; max-width: 32ch; } .user-cell[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.25rem; } .user-name[data-v-a8348e4a] { font-weight: 600; } .user-meta[data-v-a8348e4a] { font-size: 0.82rem; color: rgba(255,255,255,0.6); } .language-chip[data-v-a8348e4a] { display: inline-flex; align-items: center; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgba(59,130,246,0.16); color: rgba(191,219,254,0.95); font-size: 0.78rem; font-weight: 600; } .score-chips[data-v-a8348e4a] { display: flex; flex-wrap: wrap; gap: 0.4rem; } .score-chip[data-v-a8348e4a] { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 0.6rem; font-size: 0.78rem; font-weight: 600; background: rgba(236,72,153,0.18); color: rgba(255,241,242,0.9); } .score-chip.muted[data-v-a8348e4a] { background: rgba(148,163,184,0.12); color: rgba(226,232,240,0.65); } .submitted-at[data-v-a8348e4a] { font-size: 0.85rem; color: rgba(255,255,255,0.65); } .severity-chip[data-v-a8348e4a] { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 0.6rem; background: rgba(147,197,253,0.15); color: rgba(219,234,254,0.95); font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; } .status-chip[data-v-a8348e4a] { display: inline-flex; align-items: center; padding: 0.2rem 0.7rem; border-radius: 999px; background: rgba(165,180,252,0.18); color: rgba(224,231,255,0.95); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .assistance-date-cell[data-v-a8348e4a] { display: flex; flex-direction: column; gap: 0.25rem; } .assistance-created[data-v-a8348e4a] { font-size: 0.78rem; color: rgba(255,255,255,0.5); } .glass-card[data-v-22c814f7] { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.875rem; padding: 1.5rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .glass-input[data-v-5eb6b19f] { color: var(--color-text-primary); padding: 0.5rem; width: 100%; } .glass-card[data-v-5eb6b19f] { background-color: hsla(220, 13%, 96%, 0.04); border: 1px solid hsla(220, 13%, 96%, 0.08); border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); } .section[data-v-5eb6b19f] { display: flex; flex-direction: column; gap: 1rem; } .section-header[data-v-5eb6b19f] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .section-title[data-v-5eb6b19f] { font-size: 1.05rem; font-weight: 700; color: var(--color-accent); } .section-subtitle[data-v-5eb6b19f] { font-size: 0.9rem; color: var(--color-text-secondary); } .field-label[data-v-5eb6b19f] { font-size: 0.9rem; font-weight: 600; color: var(--color-accent-contrast); } .help-text[data-v-5eb6b19f] { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-text-secondary); } .abs-toggle[data-v-5eb6b19f] { top: 2.35rem !important; } /* Glassy field container (matches the rest of your system) */ .glass-field[data-v-1863cd82]{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: .875rem; padding: .9rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* Input/select shells */ .field-shell[data-v-1863cd82]{ display:flex; align-items:center; gap:.6rem; padding:.55rem .75rem; border-radius:.65rem; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease; } .field-shell[data-v-1863cd82]:focus-within{ border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } /* Controls inside shells */ .field-control[data-v-1863cd82]{ flex:1 1 auto; width:100%; background: transparent; border:0; outline: none; color: var(--color-text-primary); font-size: .95rem; } .field-control[data-v-1863cd82]::-moz-placeholder{ color: rgba(255,255,255,.5); } .field-control[data-v-1863cd82]::placeholder{ color: rgba(255,255,255,.5); } /* Invitation code specifics */ .code-shell.is-empty[data-v-1863cd82]{ opacity:.8; } .code-input[data-v-1863cd82]{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; letter-spacing: .02em; caret-color: var(--color-accent); } /* Subtle icon button (copy) */ .icon-btn[data-v-1863cd82]{ width:1.9rem; height:1.9rem; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; color: var(--color-accent); transition: background-color .2s ease, transform .18s ease, color .2s ease, opacity .2s ease; } .icon-btn[data-v-1863cd82]:hover{ background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } .icon-btn[data-v-1863cd82]:disabled{ opacity:.45; cursor: not-allowed; transform:none; } /* Chip (reused aesthetic) */ .chip[data-v-1863cd82]{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .6rem; border-radius:9999px; font-size:.85rem; line-height:1; background: rgba(31,41,55,.45); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); } /* ----- Title + subtitles */ .dialog-title[data-v-9f492db6] { letter-spacing: .01em; font-family: 'Righteous', sans-serif; } .dialog-title-text[data-v-9f492db6]{ display: inline-block; color: var(--color-accent); background: linear-gradient( 90deg, var(--color-accent-contrast) 0%, var(--color-accent-contrast) 50%, var(--color-accent) 50%, var(--color-accent) 100% ); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } /* ----- Tabs (shared pill style) */ .feedback-tabs[data-v-9f492db6]{ display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .35rem; border-radius: 9999px; background: rgba(15,23,42,0.35); border: 1px solid rgba(255,255,255,0.08); } .feedback-tab-btn[data-v-9f492db6]{ display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .95rem; border-radius: 9999px; background: transparent; border: none; color: rgba(255,255,255,0.65); font-weight: 700; font-size: .95rem; line-height: 1; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; } .feedback-tab-btn[data-v-9f492db6]:hover, .feedback-tab-btn[data-v-9f492db6]:focus-visible{ background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); } .feedback-tab-btn.active[data-v-9f492db6]{ background: rgba(72,132,255,0.25); color: #fff; box-shadow: 0 8px 20px rgba(72,132,255,0.32); } .feedback-tab-btn[data-v-9f492db6]:focus-visible{ outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ----- Card shell (glass) */ .dialog-form[data-v-9f492db6]{ display:flex; flex-direction:column; gap:1rem; } .glass-card[data-v-9f492db6]{ border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(15,23,42,0.55)); backdrop-filter: blur(12px); padding: 1.25rem; box-shadow: 0 18px 44px rgba(15,23,42,0.35); } .card-header[data-v-9f492db6]{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; } .card-title[data-v-9f492db6]{ display:inline-flex; align-items:center; gap:.5rem; font-weight: 800; letter-spacing:.08em; text-transform:uppercase; color: rgba(255,255,255,.9); } .card-subtitle[data-v-9f492db6]{ color: rgba(255,255,255,.65); font-size:.9rem; } /* ----- Grid */ .form-grid[data-v-9f492db6]{ display:grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; } .field[data-v-9f492db6]{ display:flex; flex-direction:column; gap:.45rem; } .field.span-2[data-v-9f492db6]{ grid-column: span 2; } @media (max-width: 640px){ .field.span-2[data-v-9f492db6]{ grid-column: span 1; } } .field-label[data-v-9f492db6]{ font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color: rgba(255,255,255,.75); } /* ----- Inputs (glassy, clearly visible) */ .field-shell[data-v-9f492db6]{ display:flex; align-items:center; gap:.6rem; padding:.65rem .8rem; border-radius:.85rem; background: rgba(15,23,42,0.6); border:1px solid rgba(255,255,255,0.15); transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .field-shell[data-v-9f492db6]:focus-within{ border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255,255,255,0.16)); box-shadow: inset 0 1px 0 rgba(255,255,255,.065), 0 10px 22px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } .filter-input[data-v-9f492db6]{ flex:1 1 auto; width:100%; background:transparent; border:0; outline:none; color: var(--color-text-primary); font-size:.95rem; } .filter-input[data-v-9f492db6]::-moz-placeholder{ color: rgba(255,255,255,.5); } .filter-input[data-v-9f492db6]::placeholder{ color: rgba(255,255,255,.5); } .select-shell[data-v-9f492db6]{ padding:0; } .select-trigger[data-v-9f492db6]{ display:flex; align-items:center; gap:.6rem; width:100%; padding:.65rem .8rem; border-radius:.85rem; background:transparent; border:0; color: var(--color-text-primary); font-size:.95rem; text-align:left; cursor:pointer; transition: color .2s ease, transform .2s ease; } .select-trigger[data-v-9f492db6]:focus-visible{ outline:none; } .select-trigger[data-v-9f492db6]:hover{ transform: translateY(-1px); } .select-trigger__leading[data-v-9f492db6]{ display:inline-flex; align-items:center; justify-content:center; color: var(--color-accent); } .select-trigger__label[data-v-9f492db6]{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .select-trigger__chevron[data-v-9f492db6]{ width:1rem; height:1rem; opacity:.75; transition: transform .25s ease; } .select-trigger[aria-expanded='true'] .select-trigger__chevron[data-v-9f492db6]{ transform: rotate(180deg); } .select-option[data-v-9f492db6]{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .55rem; border-radius:.6rem; cursor:pointer; color: var(--color-text-primary); transition: background-color .2s ease, box-shadow .2s ease; } .select-option[data-v-9f492db6]:hover{ background: rgba(255,255,255,0.06); } .select-option--focus[data-v-9f492db6]{ background: color-mix(in srgb, var(--color-accent) 9%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px color-mix(in srgb, var(--color-accent) 18%, transparent); } .select-option__check[data-v-9f492db6]{ width:1rem; height:1rem; color: var(--color-accent); } .field-helper[data-v-9f492db6]{ margin-top:.25rem; font-size:.75rem; color: rgba(255,255,255,0.6); } /* Make textareas taller & comfy */ .textarea-shell[data-v-9f492db6]{ align-items:flex-start; } .filter-input.textarea[data-v-9f492db6]{ min-height:7rem; resize:vertical; } /* ----- Footer buttons */ .form-footer[data-v-9f492db6]{ display:flex; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; margin-top:.25rem; } .submit-group[data-v-9f492db6]{ position:relative; display:inline-flex; flex-direction:column; align-items:flex-end; gap:.5rem; padding-top:.25rem; } .submission-tooltip[data-v-9f492db6]{ --tooltip-bg: rgba(15,23,42,0.88); --tooltip-border: rgba(255,255,255,0.25); --tooltip-color: rgba(241,245,249,0.95); position:absolute; bottom: calc(100% + .8rem); right:0; z-index:5; padding:.55rem .85rem; border-radius:.75rem; border:1px solid var(--tooltip-border); background: var(--tooltip-bg); color: var(--tooltip-color); font-size:.85rem; font-weight:600; line-height:1.3; max-width:min(22rem, 80vw); box-shadow: 0 12px 30px rgba(15,23,42,0.45); pointer-events:none; text-align:left; } .submission-tooltip[data-v-9f492db6]::after{ content:""; position:absolute; bottom:-6px; right:1.5rem; width:10px; height:10px; transform: rotate(45deg); background: var(--tooltip-bg); border-right:1px solid var(--tooltip-border); border-bottom:1px solid var(--tooltip-border); } .submission-tooltip--success[data-v-9f492db6]{ --tooltip-bg: rgba(34,197,94,0.22); --tooltip-border: rgba(34,197,94,0.55); --tooltip-color: #dcfce7; } .submission-tooltip--error[data-v-9f492db6]{ --tooltip-bg: rgba(248,113,113,0.22); --tooltip-border: rgba(248,113,113,0.55); --tooltip-color: #fee2e2; } .submission-tooltip--warning[data-v-9f492db6]{ --tooltip-bg: rgba(250,204,21,0.2); --tooltip-border: rgba(250,204,21,0.55); --tooltip-color: #fef08a; } .submission-tooltip-fade-enter-active[data-v-9f492db6], .submission-tooltip-fade-leave-active[data-v-9f492db6]{ transition: opacity .2s ease, transform .2s ease; } .submission-tooltip-fade-enter-from[data-v-9f492db6], .submission-tooltip-fade-leave-to[data-v-9f492db6]{ opacity:0; transform: translateY(6px); } .btn-cancel-outline[data-v-9f492db6]{ padding:.65rem 1.5rem; border-radius:.85rem; border:1px solid var(--color-text-primary); background: transparent; color: var(--color-text-primary); font-weight:700; transition: transform .2s ease, background .2s ease; } .btn-cancel-outline[data-v-9f492db6]:hover{ transform: translateY(-1px); } .btn-cta[data-v-9f492db6]{ padding:.65rem 1.75rem; border-radius:.85rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:none; color:#fff; transition: transform .2s ease, box-shadow .2s ease; } .btn-cta[data-v-9f492db6]:hover:enabled{ transform: translateY(-1px); } /* Red confirm/send CTA to match the “correct” design */ .btn-cta[data-v-9f492db6]:disabled{ opacity:.6; cursor:not-allowed; } /* Utility */ .loading[data-v-9f492db6]{ display:inline-flex; align-items:center; gap:.5rem; } .accessibility-settings-dialog[data-v-497b94ce] { min-width: min(100%, 19rem); } .accessibility-section-header[data-v-497b94ce] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; } .accessibility-section-copy[data-v-497b94ce] { margin: 0; color: var(--color-text-secondary); font-size: 0.86rem; line-height: 1.45; } .llbuilder-palette-preview[data-v-497b94ce] { margin-top: 0.85rem; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 28%, transparent); border-radius: 0.75rem; overflow: hidden; background: var(--preview-canvas); } .llbuilder-palette-preview svg[data-v-497b94ce] { display: block; width: 100%; height: auto; } .llbuilder-custom-palette[data-v-497b94ce] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.85rem; } .llbuilder-custom-palette__header[data-v-497b94ce] { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .llbuilder-custom-palette__header .llb-control[data-v-497b94ce] { min-height: 2rem; padding: 0.4rem 0.7rem; font-size: 0.74rem; } .llbuilder-color-field[data-v-497b94ce] { display: grid; grid-template-columns: 1fr 2.25rem 5.6rem; align-items: center; gap: 0.45rem; min-width: 0; padding: 0.48rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--color-panel-strong) 72%, transparent); border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 22%, transparent); } .llbuilder-color-field span[data-v-497b94ce] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); font-size: 0.78rem; } .llbuilder-color-field input[type="color"][data-v-497b94ce] { width: 2.25rem; height: 1.9rem; padding: 0; border: 0; border-radius: 0.4rem; background: transparent; } .llbuilder-color-field input[type="text"][data-v-497b94ce] { width: 100%; min-width: 0; border: 1px solid color-mix(in srgb, var(--color-borders-dividers) 28%, transparent); border-radius: 0.45rem; background: color-mix(in srgb, var(--color-panel-strong) 88%, transparent); color: var(--color-text-primary); padding: 0.35rem 0.45rem; font-size: 0.78rem; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .llb-dialog__header[data-v-497b94ce], .accessibility-section-header[data-v-497b94ce] { flex-direction: column; } .llbuilder-custom-palette[data-v-497b94ce] { grid-template-columns: 1fr; } } /* Inner shell */ .field-shell[data-v-6f581544]{ display:flex; gap:.6rem; } /* State chip */ .chip[data-v-6f581544]{ display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .55rem; border-radius:9999px; font-size:.78rem; line-height:1; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--color-text-primary); } .chip-on[data-v-6f581544]{ color: var(--color-accent-contrast); box-shadow: 0 0 12px rgba(236,72,153,.28) inset; } .chip-off[data-v-6f581544]{ color: var(--color-text-secondary); opacity:.95; } /* Toggle switch */ .toggle[data-v-6f581544]{ position: relative; width: 2.5rem; /* 40px */ height: 1.4rem; /* 22px */ border-radius: 9999px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; } .toggle .knob[data-v-6f581544]{ position: absolute; top: 50%; left: 2px; width: 1rem; height: 1rem; transform: translateY(-50%); border-radius: 9999px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.35); transition: left .2s ease; } .toggle.on[data-v-6f581544]{ background: var(--color-accent); border-color: var(--color-accent); box-shadow: 0 0 12px rgba(59,130,246,.45); } .toggle.on .knob[data-v-6f581544]{ left: calc(100% - 1rem - 2px); } .settings-select[data-v-6f581544]{ width: 100%; min-height: 2.5rem; border-radius: .65rem; border: 1px solid rgba(255,255,255,0.14); background: rgba(17,24,39,0.88); color: var(--color-text-primary); padding: .55rem .75rem; font-size: .9rem; outline: none; } .settings-select[data-v-6f581544]:focus-visible{ border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,.26); } .panel[data-v-2c7b1f56] { border: 1px solid hsla(220, 13%, 96%, 0.12); background: hsla(220, 13%, 96%, 0.03); border-radius: 1.25rem; backdrop-filter: blur(10px); } .card[data-v-2c7b1f56] { border: 1px solid hsla(220, 13%, 96%, 0.12); background: hsla(220, 13%, 96%, 0.03); border-radius: 0.75rem; } .card-hover[data-v-2c7b1f56] { transition: background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .card-hover[data-v-2c7b1f56]:hover { border-color: hsla(220, 13%, 96%, 0.25); background: hsla(220, 13%, 96%, 0.06); transform: translateY(-2px); } .chip[data-v-2c7b1f56] { display: inline-flex; align-items: center; border-radius: 9999px; border: 1px solid hsla(220, 13%, 96%, 0.18); background: hsla(220, 13%, 96%, 0.06); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; color: var(--color-text-secondary); } .eyebrow[data-v-2c7b1f56] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.30em; color: var(--color-text-secondary); opacity: 0.95; } .social-follow-btn[data-v-2c7b1f56] { --social-gradient: linear-gradient(90deg, #ffffff, #ffffff); position: relative; border: 1px solid transparent; border-radius: 9999px; background: linear-gradient(var(--color-bg-primary), var(--color-bg-primary)) padding-box, var(--social-gradient) border-box; transition: transform 180ms ease, filter 180ms ease; } .social-follow-btn__content[data-v-2c7b1f56] { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; color: hsla(220, 20%, 92%, 0.95); } .social-follow-btn__label[data-v-2c7b1f56] { background: var(--social-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .social-follow-btn[data-v-2c7b1f56]:hover { transform: translateY(-1px); filter: brightness(1.08); } .social-follow-btn--tiktok[data-v-2c7b1f56] { --social-gradient: linear-gradient(90deg, #ffffff, #00d9cf, #7ff8f3); } .social-follow-btn--instagram[data-v-2c7b1f56] { --social-gradient: linear-gradient(90deg, #833ab4, #c13584, #f7b545); } .trust-chip[data-v-bf7a9392] { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-radius: .75rem; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--color-text-secondary); } .express-checkout-shell[data-v-bf7a9392] { border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; background: rgba(255,255,255,0.02); padding: 0.65rem; min-height: 62px; } .express-checkout-target[data-v-bf7a9392] { min-height: 44px; } .payment-element-shell[data-v-bf7a9392] { position: relative; min-height: 180px; } .payment-element-target[data-v-bf7a9392] { transition: opacity 200ms ease; } .payment-element-target.is-loading[data-v-bf7a9392] { opacity: 0; pointer-events: none; } .payment-loading-overlay[data-v-bf7a9392] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; border-radius: 0.75rem; background: linear-gradient(180deg, rgba(17, 24, 39, 0.65), rgba(17, 24, 39, 0.35)); } .payment-loading-indicator[data-v-bf7a9392] { width: 44px; height: 44px; border-radius: 9999px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--color-accent, #3B82F6); animation: checkout-spin-bf7a9392 0.9s linear infinite; } .payment-loading-copy[data-v-bf7a9392] { font-size: 0.8125rem; color: var(--color-text-secondary); text-align: center; line-height: 1.4; max-width: 240px; } @keyframes checkout-spin-bf7a9392 { to { transform: rotate(360deg); } } .fade-enter-active[data-v-bf7a9392], .fade-leave-active[data-v-bf7a9392] { transition: opacity 180ms ease; } .fade-enter-from[data-v-bf7a9392], .fade-leave-to[data-v-bf7a9392] { opacity: 0; } .glass-card[data-v-53261ef7] { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.875rem; padding: 1.75rem; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .section-heading[data-v-53261ef7] { display: flex; flex-direction: column; gap: 0.35rem; } .section-heading h3[data-v-53261ef7] { font-size: 1.15rem; font-weight: 700; color: var(--color-text-primary); } .section-heading p[data-v-53261ef7] { font-size: 0.9rem; color: var(--color-text-secondary); } .info-banner[data-v-53261ef7] { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.045); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .toolbar[data-v-53261ef7] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; } .toolbar-field[data-v-53261ef7] { flex: 1 1 14rem; min-width: 14rem; display: flex; flex-direction: column; } .toolbar-label[data-v-53261ef7] { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.65); } .filter-bar[data-v-53261ef7] { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 0.75rem; border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .filter-icon[data-v-53261ef7] { width: 1rem; height: 1rem; color: var(--color-accent); opacity: 0.85; flex: 0 0 auto; } .filter-input[data-v-53261ef7] { flex: 1 1 auto; border: 0; background: transparent; color: var(--color-text-primary); font-size: 0.95rem; outline: none; } .filter-input[data-v-53261ef7]::-moz-placeholder { color: rgba(255, 255, 255, 0.45); } .filter-input[data-v-53261ef7]::placeholder { color: rgba(255, 255, 255, 0.45); } .select-wrap[data-v-53261ef7] { position: relative; } .select-input[data-v-53261ef7] { width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); padding: 0.65rem 0.9rem; font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .select-input[data-v-53261ef7]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); } .select-wrap[data-v-53261ef7]::after { content: ''; position: absolute; top: 50%; right: 0.75rem; width: 0.6rem; height: 0.6rem; border-right: 2px solid rgba(255, 255, 255, 0.6); border-bottom: 2px solid rgba(255, 255, 255, 0.6); transform: translateY(-50%) rotate(45deg); pointer-events: none; } .state-box[data-v-53261ef7] { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.85rem; padding: 1.5rem; text-align: center; font-size: 0.95rem; color: var(--color-text-secondary); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .state-box.state-error[data-v-53261ef7] { border-color: rgba(220, 38, 38, 0.4); color: #fecaca; background: rgba(220, 38, 38, 0.08); } .table-shell[data-v-53261ef7] { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.9rem; overflow: hidden; background: rgba(255, 255, 255, 0.035); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .table-scroll[data-v-53261ef7] { max-height: 28rem; overflow: auto; } .fancy-table[data-v-53261ef7] { width: 100%; border-collapse: collapse; min-width: 64rem; font-size: 0.95rem; } .fancy-table thead[data-v-53261ef7] { background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .fancy-table th[data-v-53261ef7] { text-align: left; padding: 0.75rem 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fancy-table td[data-v-53261ef7] { padding: 0.85rem 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--color-text-primary); } .fancy-table tbody tr[data-v-53261ef7]:hover { background: rgba(255, 255, 255, 0.04); } .pagination-nav[data-v-53261ef7] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .pager-btn[data-v-53261ef7] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .pager-btn[data-v-53261ef7]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-53261ef7]:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .pager-btn.is-active[data-v-53261ef7] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236, 72, 153, 0.55), 0 0 28px rgba(236, 72, 153, 0.35); filter: brightness(1.05); } .dialog-footer[data-v-53261ef7] { display: flex; justify-content: flex-end; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 768px) { .toolbar-field[data-v-53261ef7] { flex: 1 1 100%; min-width: unset; } .fancy-table[data-v-53261ef7] { min-width: 48rem; } } .coupon-observability-panel[data-v-53261ef7] { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.75rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); } .coupon-observability-grid[data-v-53261ef7] { margin-top: 0.75rem; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } .coupon-observability-grid .label[data-v-53261ef7] { display: block; font-size: 0.75rem; opacity: 0.75; text-transform: uppercase; } .coupon-observability-grid strong[data-v-53261ef7] { font-size: 1.1rem; } .floating-select[data-v-973a9421] { width: 100%; } .floating-select__field[data-v-973a9421] { width: 100%; } .floating-select__trigger[data-v-973a9421] { width: 100%; padding: 0.55rem 2.5rem 0.55rem 0.85rem; border-radius: 0.75rem; border: 1px solid var(--color-bg-primary); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.85rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } .floating-select__trigger[data-v-973a9421]:hover:not(:disabled) { transform: translateY(-1px); } .floating-select__trigger[data-v-973a9421]:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent); } .floating-select__trigger.is-disabled[data-v-973a9421] { opacity: 0.5; cursor: not-allowed; } .floating-select__icon[data-v-973a9421] { width: 1rem; height: 1rem; opacity: 0.85; transition: transform 0.25s ease; } .floating-select__option[data-v-973a9421] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 0.5rem; font-size: 0.8rem; color: var(--color-text-primary); cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .floating-select__option[data-v-973a9421]:hover { background: rgba(255, 255, 255, 0.06); } .floating-select__option.is-focused[data-v-973a9421] { background: rgba(59, 130, 246, 0.12); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35); } .floating-select__option.is-disabled[data-v-973a9421] { opacity: 0.5; cursor: not-allowed; } .floating-select__empty[data-v-973a9421] { padding: 0.5rem; font-size: 0.8rem; color: var(--color-text-secondary); } .affiliate-row + .affiliate-row td[data-v-837a63ed] { border-top: 1px solid rgba(148, 163, 184, 0.22); } .affiliate-actions__bar[data-v-837a63ed] { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; } .affiliate-actions__select[data-v-837a63ed] { min-width: 11rem; flex: 1 1 11rem; } .affiliate-actions__button[data-v-837a63ed] { flex: 0 0 auto; white-space: nowrap; } @media (min-width: 1280px) { .affiliate-actions__bar[data-v-837a63ed] { flex-wrap: nowrap; } } .refresh-icon[data-v-d2582bd6] { font-size: 0.95rem; line-height: 1; } .refresh-icon--spinning[data-v-d2582bd6] { animation: refreshSpin-d2582bd6 0.7s linear infinite; } @keyframes refreshSpin-d2582bd6 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .coupon-chip[data-v-d2582bd6] { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 0.9rem; border: 1px solid var(--color-accent); background: var(--color-bg-secondary); color: #fff; padding: 1rem; text-align: left; cursor: pointer; } .coupon-chip__code[data-v-d2582bd6] { letter-spacing: 0.08em; font-size: clamp(1.65rem, 4vw, 2.3rem); font-weight: 900; line-height: 1.15; overflow-wrap: anywhere; } .coupon-chip__copy-icon[data-v-d2582bd6] { font-size: 1rem; color: var(--color-accent); flex: 0 0 auto; } .coupon-chip[data-v-d2582bd6]:hover, .coupon-chip[data-v-d2582bd6]:focus-visible { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3) inset; } .coupon-hero-card[data-v-d2582bd6] { border-radius: 1rem; border: 1px solid var(--color-accent); background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.9)); padding: 1rem; } .coupon-meta-chip[data-v-d2582bd6] { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.4); background: rgba(148, 163, 184, 0.14); color: var(--color-accent-contrast); font-size: 0.74rem; line-height: 1; font-weight: 700; padding: 0.5rem 0.75rem; } [data-v-d2582bd6] .affiliate-floating-trigger, .wise-input[data-v-d2582bd6] { border-radius: 0.75rem; border: 1px solid var(--color-bg-primary); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)), var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.8rem; line-height: 1.25rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease, color .2s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-v-d2582bd6] .affiliate-floating-trigger { padding: 0.5rem 0.75rem; font-size: 0.8rem; line-height: 1.25rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .wise-input[data-v-d2582bd6] { padding: 0.5rem 0.75rem; outline: none; } .wise-input-shell[data-v-d2582bd6] { position: relative; } .wise-input--with-toggle[data-v-d2582bd6] { padding-right: 2.4rem; } .wise-eye-toggle[data-v-d2582bd6] { position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--color-text-secondary); cursor: pointer; font-size: 0.95rem; line-height: 1; } .wise-eye-toggle[data-v-d2582bd6]:hover, .wise-eye-toggle[data-v-d2582bd6]:focus-visible { color: var(--color-text-primary); outline: none; } .wise-stepper[data-v-d2582bd6] { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .wise-stepper__item[data-v-d2582bd6] { display: flex; align-items: center; gap: 0.55rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.65rem; padding: 0.45rem 0.55rem; font-size: 0.72rem; color: var(--color-text-secondary); } .wise-stepper__item--active[data-v-d2582bd6] { border-color: var(--color-accent); color: var(--color-text-primary); } .wise-stepper__item--complete[data-v-d2582bd6] { border-color: rgba(34, 197, 94, 0.5); color: var(--color-text-primary); } .wise-stepper__index[data-v-d2582bd6] { width: 1.1rem; height: 1.1rem; border-radius: 999px; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } [data-v-d2582bd6] .affiliate-floating-trigger:hover:not(:disabled), .wise-input[data-v-d2582bd6]:hover { border-color: rgba(148, 163, 184, 0.58); transform: translateY(-1px); } [data-v-d2582bd6] .affiliate-floating-trigger:focus-visible, .wise-input[data-v-d2582bd6]:focus { outline: none; border-color: rgba(59, 130, 246, 0.75); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28); transform: none; } [data-v-d2582bd6] .affiliate-floating-trigger.is-disabled, .wise-input[data-v-d2582bd6]:disabled { opacity: 0.65; cursor: not-allowed; transform: none; } [data-v-d2582bd6] .wise-field-error, .wise-field-error[data-v-d2582bd6] { border-color: rgba(248, 113, 113, 0.9) !important; box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.32); } .wise-submit-btn--inactive[data-v-d2582bd6] { opacity: 0.58; filter: saturate(0.68); } .status-badge[data-v-d2582bd6] { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.2rem 0.55rem; font-size: 0.65rem; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .status-badge--not_started[data-v-d2582bd6] { background: rgba(148, 163, 184, 0.2); color: rgb(203, 213, 225); } .status-badge--in_review[data-v-d2582bd6] { background: rgba(251, 191, 36, 0.2); color: rgb(252, 211, 77); } .status-badge--action_required[data-v-d2582bd6] { background: rgba(248, 113, 113, 0.2); color: rgb(248, 113, 113); } .status-badge--done[data-v-d2582bd6] { background: rgba(74, 222, 128, 0.2); color: rgb(74, 222, 128); } .coupon-meta-chip--action[data-v-d2582bd6] { cursor: pointer; } .coupon-meta-chip--action[data-v-d2582bd6]:hover, .coupon-meta-chip--action[data-v-d2582bd6]:focus-visible { box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.35) inset; } .coupon-hero-copy[data-v-d2582bd6] { color: var(--color-text-secondary); font-size: 0.82rem; line-height: 1.4; } .compare-toggle[data-v-d2582bd6] { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .affiliate-console-controls[data-v-d2582bd6] { display: flex; align-items: center; justify-content: center; gap: 0.5rem 0.75rem; flex-wrap: wrap; } .affiliate-period-select[data-v-d2582bd6] { width: auto; min-width: -moz-max-content; min-width: max-content; } [data-v-d2582bd6] .affiliate-period-select .affiliate-floating-trigger { width: auto; min-width: -moz-max-content; min-width: max-content; max-width: 100%; } @media (min-width: 768px) { .affiliate-console-controls[data-v-d2582bd6] { flex-wrap: nowrap; justify-content: space-between; gap: 0.75rem; } } .compare-toggle:focus-within .compare-toggle__track[data-v-d2582bd6] { outline: none; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28); } .compare-toggle__track[data-v-d2582bd6] { width: 2.2rem; height: 1.2rem; border-radius: 999px; background: rgba(148, 163, 184, 0.35); position: relative; } .compare-toggle__track[data-v-d2582bd6]::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.95rem; height: 0.95rem; border-radius: 999px; background: #fff; transition: transform 0.2s ease; } .compare-toggle input:checked + .compare-toggle__track[data-v-d2582bd6] { background: rgba(59, 130, 246, 0.7); } .compare-toggle input:checked + .compare-toggle__track[data-v-d2582bd6]::after { transform: translateX(1rem); } .kpi-card[data-v-d2582bd6] { border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.24); background: rgba(15, 23, 42, 0.45); padding: 0.75rem; } .kpi-label[data-v-d2582bd6] { color: var(--color-text-secondary); font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; } .kpi-helper[data-v-d2582bd6] { color: var(--color-text-secondary); font-size: 0.72rem; margin-top: 0.35rem; line-height: 1.35; } .kpi-timing[data-v-d2582bd6] { color: var(--color-text-secondary); font-size: 0.7rem; margin-top: 0.25rem; } .info-dot[data-v-d2582bd6] { width: 1.35rem; height: 1.35rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.45); color: var(--color-text-secondary); font-size: 0.7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .info-dot[data-v-d2582bd6]:hover, .info-dot[data-v-d2582bd6]:focus-visible { border-color: var(--color-accent); color: var(--color-accent); background: rgba(59, 130, 246, 0.16); transform: translateY(-1px); } .sales-breakdown-stack[data-v-d2582bd6] { display: flex; width: 100%; min-height: 1rem; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); } .sales-breakdown-stack__segment[data-v-d2582bd6] { min-height: 1rem; } .sales-breakdown-row[data-v-d2582bd6] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .sales-breakdown-dot[data-v-d2582bd6] { width: 0.75rem; height: 0.75rem; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.4); flex: 0 0 auto; } .payout-grid[data-v-d2582bd6] { display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 1024px) { .payout-grid[data-v-d2582bd6] { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-areas: 'recipient status'; align-items: start; } .payout-grid__recipient[data-v-d2582bd6] { grid-area: recipient; } .payout-grid__status[data-v-d2582bd6] { grid-area: status; } } .stripe-status-card[data-v-d2582bd6] { border: 1px solid rgba(148, 163, 184, 0.24); border-radius: 0.75rem; background: rgba(2, 6, 23, 0.3); padding: 0.75rem; } .stripe-status-card--action[data-v-d2582bd6] { border-color: rgba(250, 204, 21, 0.55); box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.22) inset; } .stripe-connected-badge[data-v-d2582bd6] { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(16, 185, 129, 0.45); background: rgba(16, 185, 129, 0.18); color: #d1fae5; font-size: 0.68rem; font-weight: 700; padding: 0.2rem 0.55rem; } .stripe-warning[data-v-d2582bd6] { border: 1px solid rgba(248, 113, 113, 0.45); background: rgba(127, 29, 29, 0.24); color: #fecaca; border-radius: 0.5rem; padding: 0.45rem 0.55rem; font-size: 0.75rem; line-height: 1.3; } .stripe-cta-btn[data-v-d2582bd6] { min-height: 2.4rem; border-radius: 0.65rem; border: 1px solid var(--color-accent); font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.85rem; } .stripe-cta-btn--high-priority[data-v-d2582bd6] { background: linear-gradient(135deg, #22c55e, #3b82f6); color: #f8fafc; border-color: rgba(34, 197, 94, 0.75); } .stripe-cta-btn--high-priority[data-v-d2582bd6]:hover, .stripe-cta-btn--high-priority[data-v-d2582bd6]:focus-visible { filter: brightness(1.08); transform: translateY(-1px); } .stripe-cta-btn--secondary[data-v-d2582bd6] { background: rgba(30, 41, 59, 0.55); color: var(--color-text-secondary); border-color: rgba(148, 163, 184, 0.4); } .tier-progress-card[data-v-d2582bd6] { position: relative; overflow: visible; } .tier-progress-header[data-v-d2582bd6] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .tier-badge[data-v-d2582bd6] { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(56, 189, 248, 0.45); background: rgba(56, 189, 248, 0.15); color: #e0f2fe; font-size: 0.75rem; font-weight: 700; line-height: 1; padding: 0.35rem 0.65rem; } .tier-track[data-v-d2582bd6] { position: relative; height: 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.09); overflow: hidden; margin-bottom: 0.75rem; } .tier-track__fill[data-v-d2582bd6] { height: 100%; background: linear-gradient(90deg, #a78bfa, #38bdf8); transition: width 0.2s ease; } .tier-track__tick[data-v-d2582bd6] { position: absolute; top: -0.2rem; width: 2px; height: 1rem; background: rgba(255, 255, 255, 0.45); transform: translateX(-1px); } .tier-track-labels[data-v-d2582bd6] { position: relative; min-height: 1.2rem; margin-bottom: 0.75rem; } .tier-track-labels__item[data-v-d2582bd6] { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.68rem; color: var(--color-text-secondary); white-space: nowrap; } .info-dot--active[data-v-d2582bd6] { animation: infoDotPulse-d2582bd6 0.36s ease; border-color: var(--color-accent); color: var(--color-accent); background: rgba(59, 130, 246, 0.2); } @keyframes infoDotPulse-d2582bd6 { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .stripe-helper-trigger[data-v-d2582bd6] { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--color-accent); font-size: 0.75rem; text-decoration: underline; text-underline-offset: 2px; } .glass-field[data-v-3aed89b8]{ background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: .875rem; padding: 1rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .info-row[data-v-3aed89b8] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px dashed rgba(255,255,255,0.12); } .info-row[data-v-3aed89b8]:last-child { border-bottom: 0; padding-bottom: 0; } .label[data-v-3aed89b8] { color: var(--color-text-secondary); font-size: .9rem; } .value[data-v-3aed89b8] { color: var(--color-text-primary); font-weight: 600; text-align: right; } .shapeshifter-avatar-root[data-v-a519fd17] { --avatar-core-size: 56px; --avatar-halo-size: 76px; --avatar-ripple-size: 66px; --avatar-blob-inset: -8px; --avatar-control-bg: radial-gradient(circle at 30% 25%, var(--avatar-core-start), var(--avatar-core-mid) 64%, var(--avatar-core-end) 100%); --avatar-control-text: #ffffff; --avatar-focus-border: var(--avatar-ring); --avatar-face-glow: var(--avatar-ring); position: fixed; right: calc(108px + env(safe-area-inset-right, 0px)); bottom: max(52px, calc(28px + env(safe-area-inset-bottom, 0px))); transform: scale(var(--avatar-ui-scale, 1)); transform-origin: bottom right; z-index: 900; pointer-events: none; } .shapeshifter-avatar-root.is-docked[data-v-a519fd17] { --avatar-core-size: calc(var(--btn-scale, 1) * 3rem); --avatar-halo-size: calc(var(--btn-scale, 1) * 3rem); --avatar-ripple-size: calc(var(--btn-scale, 1) * 3rem); --avatar-blob-inset: 0; position: relative; right: auto; bottom: auto; transform-origin: bottom center; z-index: 1201; } .shapeshifter-avatar-shell[data-v-a519fd17] { pointer-events: none; position: relative; width: var(--avatar-core-size); height: var(--avatar-core-size); display: grid; place-items: center; justify-items: center; } .shapeshifter-avatar-root.is-docked .shapeshifter-avatar-shell[data-v-a519fd17] { width: calc(var(--avatar-core-size) + 30px); height: calc(var(--avatar-core-size)); } .avatar-core[data-v-a519fd17], .avatar-dot-control[data-v-a519fd17] { pointer-events: auto; touch-action: manipulation; } .avatar-controls-slot[data-v-a519fd17] { position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: -moz-max-content; width: max-content; min-height: 20px; display: flex; align-items: flex-start; justify-content: center; } .avatar-idle-tasks-slot[data-v-a519fd17] { position: absolute; inset: 0; pointer-events: none; } .avatar-idle-tasks-slot.is-active[data-v-a519fd17] { pointer-events: none; } .avatar-idle-tasks[data-v-a519fd17] { position: absolute; inset: 0; } .avatar-orbit-overlay[data-v-a519fd17] { position: fixed; inset: 0; pointer-events: none; z-index: 901; } .avatar-controls--overlay[data-v-a519fd17], .avatar-idle-tasks--overlay[data-v-a519fd17] { position: static; inset: auto; } .avatar-controls-slot[data-v-a519fd17]:not(.is-active) { pointer-events: none; } @media (max-width: 1440px) { .shapeshifter-avatar-root[data-v-a519fd17] { right: calc(96px + env(safe-area-inset-right, 0px)); } } @media (max-width: 1100px) { .shapeshifter-avatar-root[data-v-a519fd17] { right: calc(84px + env(safe-area-inset-right, 0px)); } } @media (max-height: 860px) { .shapeshifter-avatar-root[data-v-a519fd17] { bottom: max(60px, calc(36px + env(safe-area-inset-bottom, 0px))); } } @media (orientation: portrait) { .shapeshifter-avatar-root[data-v-a519fd17] { display: none; } } .avatar-core[data-v-a519fd17] { position: relative; z-index: 2; overflow: visible; display: grid; place-items: center; width: var(--avatar-core-size); height: var(--avatar-core-size); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--avatar-ring) 52%, rgba(255, 255, 255, 0.18)); background: transparent; color: var(--avatar-control-text); cursor: pointer; transition: opacity 260ms ease, transform 320ms ease; } .avatar-core--access-focus[data-v-a519fd17] { border-color: var(--avatar-focus-border); filter: saturate(1.22) brightness(1.12); opacity: 1 !important; } .avatar-core.is-collapsed[data-v-a519fd17] { opacity: 0; transform: scale(0.45); pointer-events: none; } .avatar-goo-svg[data-v-a519fd17] { position: absolute; width: 0; height: 0; pointer-events: none; } .avatar-blob-stack[data-v-a519fd17] { position: absolute; inset: var(--avatar-blob-inset); display: grid; place-items: center; filter: url('#avatar-goo-filter'); } .avatar-blob[data-v-a519fd17] { position: absolute; border-radius: 999px; transition: background 220ms ease, opacity 220ms ease, transform 280ms ease; } .avatar-blob--core[data-v-a519fd17] { width: var(--avatar-core-size); height: var(--avatar-core-size); background: var(--avatar-control-bg); animation: avatar-pulse-a519fd17 5s ease-in-out infinite; } .avatar-blob--halo[data-v-a519fd17] { width: var(--avatar-halo-size); height: var(--avatar-halo-size); background: radial-gradient(circle, var(--avatar-halo), transparent 70%); opacity: 0.8; animation: avatar-halo-breathe-a519fd17 4.5s ease-in-out infinite; } .avatar-blob--ripple[data-v-a519fd17] { width: var(--avatar-ripple-size); height: var(--avatar-ripple-size); border: 2px solid var(--avatar-ring); background: color-mix(in srgb, var(--avatar-halo) 24%, transparent); animation: avatar-ripple-a519fd17 3.2s ease-out infinite; } .avatar-face[data-v-a519fd17] { position: relative; z-index: 2; font-size: 0.84rem; font-weight: 900; letter-spacing: 0; text-shadow: 0 0 14px var(--avatar-face-glow); } .avatar-controls[data-v-a519fd17] { position: absolute; inset: 0; } .avatar-dot-control[data-v-a519fd17] { --avatar-task-dot-size: 17.33px; position: absolute; display: grid; place-items: center; top: calc(50% - (var(--avatar-task-dot-size) / 2)); left: calc(50% - (var(--avatar-task-dot-size) / 2)); width: var(--avatar-task-dot-size); height: var(--avatar-task-dot-size); border-radius: 999px; border: 1px solid var(--avatar-ring); background: var(--avatar-control-bg); color: var(--avatar-control-text); font-size: 12px; cursor: pointer; box-shadow: 0 2px 10px color-mix(in srgb, var(--avatar-ring) 36%, rgba(0, 0, 0, 0.26)); } .avatar-dot-control--task[data-v-a519fd17] { font-weight: 700; } .avatar-dot-control--access-focus[data-v-a519fd17] { border-color: var(--avatar-focus-border); box-shadow: 0 0 0 1px color-mix(in srgb, var(--avatar-ring) 72%, transparent), 0 6px 16px color-mix(in srgb, var(--avatar-ring) 46%, rgba(0, 0, 0, 0.18)); filter: saturate(1.2) brightness(1.12); opacity: 1 !important; } .avatar-dot-control--disabled[data-v-a519fd17] { opacity: 0.38; filter: saturate(0.1) brightness(0.78); cursor: not-allowed; pointer-events: none; } .avatar-caption-bubble[data-v-a519fd17] { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, 72vw); padding: 10px 12px; border-radius: 14px; border: 1px solid var(--avatar-caption-border); background: var(--avatar-caption-bg); color: var(--avatar-caption-text); font-size: 0.81rem; line-height: 1.35; letter-spacing: 0.01em; box-shadow: 0 10px 30px color-mix(in srgb, var(--color-shadow) 68%, transparent); z-index: 1202; } .avatar-caption-bubble--access-focus[data-v-a519fd17] { border-color: var(--avatar-focus-border); background: var(--avatar-caption-bg); color: var(--avatar-caption-text); opacity: 1 !important; } .shapeshifter-avatar-root--access-focus[data-v-a519fd17] { opacity: 1 !important; filter: none !important; } .avatar-caption-fade-enter-active[data-v-a519fd17], .avatar-caption-fade-leave-active[data-v-a519fd17] { transition: opacity 220ms ease, transform 220ms ease; } .avatar-caption-fade-enter-from[data-v-a519fd17], .avatar-caption-fade-leave-to[data-v-a519fd17] { opacity: 0; transform: translateY(6px); } .avatar-task-label[data-v-a519fd17] { font-size: 0.6rem; line-height: 1; font-weight: 700; } .avatar-task-icon[data-v-a519fd17] { font-size: 10px; line-height: 1; } .sr-only[data-v-a519fd17] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .avatar-controls-fade-enter-active[data-v-a519fd17], .avatar-controls-fade-leave-active[data-v-a519fd17] { transition: opacity 240ms ease, transform 240ms ease; } .avatar-controls-fade-enter-from[data-v-a519fd17], .avatar-controls-fade-leave-to[data-v-a519fd17] { opacity: 0; transform: translateY(-4px) scale(0.9); } .shapeshifter-avatar-shell[data-mode='guiding'] .avatar-blob--core[data-v-a519fd17] { background: radial-gradient(circle at 30% 25%, #c7fbff, #22d3ee 62%, #0f172a 100%); animation-duration: 3.2s; } .shapeshifter-avatar-shell[data-mode='guiding'] .avatar-blob--halo[data-v-a519fd17] { background: radial-gradient(circle, rgba(34, 211, 238, 0.75), rgba(34, 211, 238, 0.15) 72%); } .shapeshifter-avatar-shell[data-mode='speaking'] .avatar-blob--core[data-v-a519fd17] { background: radial-gradient(circle at 30% 25%, #dcfce7, #22c55e 60%, #052e16 100%); animation: avatar-speaking-glow-a519fd17 1.05s ease-in-out infinite; } .shapeshifter-avatar-shell[data-mode='speaking'] .avatar-blob--halo[data-v-a519fd17] { background: radial-gradient(circle, rgba(74, 222, 128, 0.68), rgba(74, 222, 128, 0.08) 72%); animation: avatar-speaking-halo-a519fd17 1.05s ease-in-out infinite; } .shapeshifter-avatar-shell[data-mode='speaking'] .avatar-blob--ripple[data-v-a519fd17] { border-color: rgba(74, 222, 128, 0.72); background: rgba(74, 222, 128, 0.16); animation: avatar-ripple-speaking-a519fd17 1.05s ease-in-out infinite; } .shapeshifter-avatar-shell[data-mode='alert'] .avatar-core[data-v-a519fd17] { animation: avatar-jitter-a519fd17 460ms steps(2, end) 3; } .shapeshifter-avatar-shell[data-mode='alert'] .avatar-blob--core[data-v-a519fd17] { background: radial-gradient(circle at 30% 25%, #fde68a, #f59e0b 58%, #451a03 100%); } .shapeshifter-avatar-shell[data-mode='alert'] .avatar-blob--halo[data-v-a519fd17] { background: radial-gradient(circle, rgba(251, 191, 36, 0.74), rgba(217, 119, 6, 0.12) 74%); } .shapeshifter-avatar-shell[data-mode='success'] .avatar-blob--core[data-v-a519fd17] { background: radial-gradient(circle at 30% 25%, #dcfce7, #22c55e 58%, #052e16 100%); animation: avatar-splash-a519fd17 900ms ease-out 1,avatar-pulse-a519fd17 5s ease-in-out 900ms infinite; } .shapeshifter-avatar-shell[data-mode='success'] .avatar-blob--ripple[data-v-a519fd17] { animation: avatar-success-ripple-a519fd17 1s ease-out 1; } @keyframes avatar-pulse-a519fd17 { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(2deg); } } @keyframes avatar-halo-breathe-a519fd17 { 0%, 100% { transform: scale(0.96); opacity: 0.48; } 50% { transform: scale(1.04); opacity: 0.84; } } @keyframes avatar-ripple-a519fd17 { 0% { transform: scale(0.82); opacity: 0.9; } 80% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1.26); opacity: 0; } } @keyframes avatar-membrane-a519fd17 { 0% { transform: scale(1, 1); border-radius: 48% 52% 58% 42% / 43% 40% 60% 57%; } 35% { transform: scale(1.08, 0.94); border-radius: 58% 42% 49% 51% / 56% 45% 55% 44%; } 70% { transform: scale(0.95, 1.08); border-radius: 46% 54% 39% 61% / 42% 58% 42% 58%; } 100% { transform: scale(1, 1); border-radius: 48% 52% 58% 42% / 43% 40% 60% 57%; } } @keyframes avatar-ripple-speaking-a519fd17 { 0% { transform: scale(0.72); opacity: 1; } 60% { transform: scale(1.15); opacity: 0.15; } 100% { transform: scale(1.28); opacity: 0; } } @keyframes avatar-speaking-glow-a519fd17 { 0%, 100% { transform: scale(0.98); filter: brightness(0.9); } 45% { transform: scale(1.08); filter: brightness(1.2); } } @keyframes avatar-speaking-halo-a519fd17 { 0%, 100% { transform: scale(0.9); opacity: 0.3; } 50% { transform: scale(1.15); opacity: 0.95; } } @keyframes avatar-jitter-a519fd17 { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(0, 0); } } @keyframes avatar-splash-a519fd17 { 0% { transform: scale(0.9); filter: brightness(1.5); } 50% { transform: scale(1.13); filter: brightness(1.2); } 100% { transform: scale(1); filter: brightness(1); } } @keyframes avatar-success-ripple-a519fd17 { 0% { transform: scale(0.92); opacity: 1; border-color: rgba(74, 222, 128, 0.85); } 100% { transform: scale(1.36); opacity: 0; border-color: rgba(74, 222, 128, 0); } } /* -------- Shell animation -------- Animate height + vertical padding (so it can fully collapse), and fade the shell while collapsing to avoid a “border sliver”. */ .popover-shell[data-v-4e4dc0cd] { --pad-y: 0.5rem; /* vertical padding when open */ --llb-submenu-edge-a: #38bdf8; --llb-submenu-edge-b: #14b8a6; --llb-submenu-edge-c: #818cf8; padding: var(--pad-y) 0.5rem; overflow: hidden; transition: height 520ms ease, padding 520ms ease, opacity 180ms ease; backdrop-filter: blur(14px); background: var(--llb-menu-surface, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 94%, #020617 6%)); border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 22%, transparent); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.025), 0 24px 56px rgba(0,0,0,.42); } .popover-shell.sub-menu[data-v-4e4dc0cd]::before { inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--llb-submenu-edge-a) 44%, transparent) 0%, color-mix(in srgb, var(--llb-submenu-edge-b) 32%, transparent) 52%, color-mix(in srgb, var(--llb-submenu-edge-c) 26%, transparent) 100% ); background-size: 160% 160%; animation: none; opacity: 0.72; z-index: -1; } .popover-shell.header-inset-accent[data-v-4e4dc0cd]::after { background: linear-gradient( 180deg, color-mix(in srgb, var(--llb-submenu-edge-a) 64%, transparent), color-mix(in srgb, var(--llb-submenu-edge-b) 48%, transparent) ); background-size: 100% 100%; animation: none; opacity: 0.56; } /* Use OPEN padding during measuring so our height target includes padding */ .popover-shell.is-measuring[data-v-4e4dc0cd] { padding-top: var(--pad-y) !important; padding-bottom: var(--pad-y) !important; } /* While expanding/collapsing, set vertical padding to 0 so height can truly hit zero */ .popover-shell.is-expanding[data-v-4e4dc0cd], .popover-shell.is-collapsing[data-v-4e4dc0cd] { padding-top: 0 !important; padding-bottom: 0 !important; } /* Fade the shell itself while collapsing */ .popover-shell.is-collapsing[data-v-4e4dc0cd] { opacity: 0; } /* -------- Content fade & interaction gating -------- */ .menu-content[data-v-4e4dc0cd] { opacity: 0; pointer-events: none; /* no hover/tooltip until visible */ transition: opacity 180ms ease; } /* When height finished, fade content in and enable interactions */ .popover-shell.is-content-in .menu-content[data-v-4e4dc0cd], .popover-shell.is-open .menu-content[data-v-4e4dc0cd] { opacity: 1; pointer-events: auto; } /* Fade content out before collapsing */ .popover-shell.is-content-out .menu-content[data-v-4e4dc0cd] { opacity: 0; pointer-events: none; } /* keep your existing icon glow behavior */ .builder-button-large img[data-v-4e4dc0cd], .builder-button-large svg[data-v-4e4dc0cd] { transition: filter 0.3s ease; } .file-controls-root[data-v-4e4dc0cd] { gap: calc(var(--btn-scale, 1) * 0.35rem); } .llbuilder-left-rail[data-v-4e4dc0cd] { min-width: calc(var(--btn-scale, 1) * 3.35rem); border-right: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 86%, transparent), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 82%, transparent)), var(--color-bg-primary); box-shadow: inset -1px 0 0 rgba(255,255,255,.06); } .file-controls-group[data-v-4e4dc0cd] { margin-top: 0; } .file-controls-root .builder-button-large[data-v-4e4dc0cd], .popover-shell .builder-button-large[data-v-4e4dc0cd] { --icon-size: calc(var(--btn-scale, 1) * 1.22rem); width: calc(var(--btn-scale, 1) * 2.3rem); min-width: calc(var(--btn-scale, 1) * 2.3rem); height: auto; min-height: calc(var(--btn-scale, 1) * 2.3rem); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.34rem; padding: 0; position: relative; isolation: isolate; overflow: hidden; border-radius: 0.48rem; border: 1px solid var(--llb-control-border, color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 20%, transparent)); background: var(--llb-control-bg, color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 72%, transparent)); color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--llb-control-shadow, 0 10px 24px rgba(2, 6, 23, 0.18)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); letter-spacing: 0; transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease; } .file-controls-root .builder-button-large[data-v-4e4dc0cd]::before, .popover-shell .builder-button-large[data-v-4e4dc0cd]::before { content: ""; position: absolute; inset: -45% auto -45% -78%; z-index: 0; width: 52%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity: 0; pointer-events: none; transition: transform 430ms ease, opacity 180ms ease; } .popover-shell .builder-button-large[aria-label][data-v-4e4dc0cd]::after { content: attr(aria-label); display: block; flex: 1 1 auto; min-width: 0; width: auto; overflow: hidden; text-overflow: ellipsis; color: currentColor; font-size: calc(var(--btn-scale, 1) * 0.64rem); font-weight: 750; line-height: 1.05; text-align: left; text-transform: uppercase; white-space: nowrap; } .file-controls-root .builder-button-large svg[data-v-4e4dc0cd], .popover-shell .builder-button-large svg[data-v-4e4dc0cd] { width: var(--icon-size) !important; height: var(--icon-size) !important; color: inherit !important; flex: 0 0 auto; } .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg [stroke], .popover-shell .builder-button-large[data-v-4e4dc0cd] svg [stroke] { stroke: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg [fill]:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg [fill]:not([fill="none"]) { fill: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg path:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg rect:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg circle:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg ellipse:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg polygon:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg text, .popover-shell .builder-button-large[data-v-4e4dc0cd] svg path:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg rect:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg circle:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg ellipse:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg polygon:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd] svg text { fill: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd] svg.svg-inline--fa path, .popover-shell .builder-button-large[data-v-4e4dc0cd] svg.svg-inline--fa path { fill: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [stroke], .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg path, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg rect, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg circle, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg ellipse, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polygon, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg line, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polyline, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [stroke], .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg path, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg rect, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg circle, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg ellipse, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polygon, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg line, .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polyline { stroke: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg .fillable:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [fill]:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg path:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg rect:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg circle:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg ellipse:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polygon:not([fill="none"]), .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg text, .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg.svg-inline--fa path, .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg .fillable:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [fill]:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg path:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg rect:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg circle:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg ellipse:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg polygon:not([fill="none"]), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg text, .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg.svg-inline--fa path { fill: currentColor !important; } .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg .fillable[fill="none"], .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [fill="none"], .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg .fillable[fill="none"], .popover-shell.header-panel .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) svg [fill="none"] { fill: none !important; } .file-controls-root .builder-button-large.btn-accent[data-v-4e4dc0cd], .popover-shell .builder-button-large.btn-accent[data-v-4e4dc0cd], .popover-shell .builder-button-large.btn-yellow[data-v-4e4dc0cd] { background: var(--llb-menu-item, color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 64%, transparent)) !important; color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; } .file-controls-root .builder-button-large.btn-yellow[data-v-4e4dc0cd] { color: var(--llb-icon-active, var(--llb-text-strong, var(--color-text-primary))) !important; border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 52%, transparent); background: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 18%, var(--llb-panel-strong, var(--color-bg-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 24px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 16%, transparent), 0 0 18px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 12%, transparent) !important; } .file-controls-root .builder-button-large.btn-sim-red[data-v-4e4dc0cd], .popover-shell .builder-button-large.btn-sim-red[data-v-4e4dc0cd] { color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; border-color: color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 18%, transparent); } .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled), .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled) { transform: translateY(-1px) scale(1.012) !important; color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))) !important; border-color: var(--llb-control-border-strong, color-mix(in srgb, var(--llb-accent, var(--color-accent)) 38%, transparent)); background: var(--llb-control-bg-hover, color-mix(in srgb, var(--llb-panel-soft, var(--color-bg-secondary)) 76%, transparent)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 14px 30px rgba(0,0,0,.26), 0 0 0 1px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 12%, transparent); } .file-controls-root .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled)::before, .popover-shell .builder-button-large[data-v-4e4dc0cd]:hover:not(:disabled)::before { opacity: 1; transform: translateX(360%) skewX(-18deg); } .popover-shell .menu-content[data-v-4e4dc0cd] { gap: 0.45rem; padding: 0.5rem; } .popover-shell .builder-button-large[data-v-4e4dc0cd] { width: calc(var(--btn-scale, 1) * 7.8rem); min-width: calc(var(--btn-scale, 1) * 7.8rem); min-height: calc(var(--btn-scale, 1) * 2.34rem); justify-content: flex-start; padding-inline: 0.62rem; } @media (orientation: landscape) and (max-height: 420px) { .file-controls-root[data-v-4e4dc0cd] { gap: calc(var(--btn-scale, 1) * 0.3rem); } .llbuilder-left-rail[data-v-4e4dc0cd] { min-width: calc(var(--btn-scale, 1) * 3.45rem); } .file-controls-root .builder-button-large[data-v-4e4dc0cd], .popover-shell .builder-button-large[data-v-4e4dc0cd] { width: calc(var(--btn-scale, 1) * 2.75rem); min-width: calc(var(--btn-scale, 1) * 2.75rem); min-height: calc(var(--btn-scale, 1) * 2.75rem); padding: 0; } .file-controls-root .builder-button-large[aria-label][data-v-4e4dc0cd]::after, .popover-shell .builder-button-large[aria-label][data-v-4e4dc0cd]::after { display: none; } } .llbuilder-actionbar[data-v-5b93bf01] { min-height: calc(var(--btn-scale, 1) * 3.35rem); gap: clamp(0.55rem, 1.1vw, 1rem); padding-inline: clamp(0.6rem, 1vw, 0.9rem); border-bottom: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 86%, transparent), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 82%, transparent)), var(--color-bg-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter: blur(16px); } .builder-button-large img[data-v-5b93bf01], .builder-button-large svg[data-v-5b93bf01] { transition: filter 0.3s ease; } .action-categories-group[data-v-5b93bf01], .action-history-group[data-v-5b93bf01] { gap: calc(var(--btn-scale, 1) * 0.3rem); } .action-categories-group[data-v-5b93bf01] { max-width: -moz-fit-content; max-width: fit-content; padding: 0.24rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); border-radius: 0.58rem; background: color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 66%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); } .llbuilder-category-button[data-v-5b93bf01], .llbuilder-utility-button[data-v-5b93bf01], .llbuilder-tool-button[data-v-5b93bf01] { --icon-size: calc(var(--btn-scale, 1) * 1.42rem); width: auto; min-width: calc(var(--btn-scale, 1) * 2.12rem); height: calc(var(--btn-scale, 1) * 2.05rem); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.34rem; padding-inline: 0.45rem; position: relative; isolation: isolate; overflow: hidden; border-radius: 0.45rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 10%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 48%, transparent); color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); letter-spacing: 0; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .llbuilder-category-button[data-v-5b93bf01]::after, .llbuilder-utility-button[data-v-5b93bf01]::after, .llbuilder-tool-button[data-v-5b93bf01]::after, .action-history-group > .builder-button-large[data-v-5b93bf01]::after { content: ""; position: absolute; inset: -45% auto -45% -78%; z-index: 0; width: 52%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity: 0; pointer-events: none; transition: transform 430ms ease, opacity 180ms ease; } .llbuilder-category-button svg[data-v-5b93bf01], .llbuilder-utility-button svg[data-v-5b93bf01], .llbuilder-tool-button svg[data-v-5b93bf01] { width: var(--icon-size) !important; height: var(--icon-size) !important; color: inherit !important; flex: 0 0 auto; } .llbuilder-category-button[data-v-5b93bf01] svg [stroke], .llbuilder-utility-button[data-v-5b93bf01] svg [stroke], .llbuilder-tool-button[data-v-5b93bf01] svg [stroke], .action-history-group > .builder-button-large[data-v-5b93bf01] svg [stroke] { stroke: currentColor !important; } .llbuilder-category-button[data-v-5b93bf01] svg [fill]:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg [fill]:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg [fill]:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg [fill]:not([fill="none"]) { fill: currentColor !important; } .llbuilder-category-button[data-v-5b93bf01] svg path:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01] svg rect:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01] svg circle:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01] svg ellipse:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01] svg polygon:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01] svg text, .llbuilder-utility-button[data-v-5b93bf01] svg path:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg rect:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg circle:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg ellipse:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg polygon:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01] svg text, .llbuilder-tool-button[data-v-5b93bf01] svg path:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg rect:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg circle:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg ellipse:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg polygon:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01] svg text, .action-history-group > .builder-button-large[data-v-5b93bf01] svg path:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg rect:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg circle:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg ellipse:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg polygon:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01] svg text { fill: currentColor !important; } .llbuilder-category-button[data-v-5b93bf01] svg.svg-inline--fa path, .llbuilder-utility-button[data-v-5b93bf01] svg.svg-inline--fa path, .llbuilder-tool-button[data-v-5b93bf01] svg.svg-inline--fa path, .action-history-group > .builder-button-large[data-v-5b93bf01] svg.svg-inline--fa path { fill: currentColor !important; } .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg [stroke], .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg path, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg rect, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg circle, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg line, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg polyline, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg [stroke], .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg path, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg rect, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg circle, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg line, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg polyline, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg [stroke], .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg path, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg rect, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg circle, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg line, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg polyline, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg [stroke], .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg path, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg rect, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg circle, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg ellipse, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg polygon, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg line, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg polyline { stroke: url(#llbuilder-icon-amber-gradient) #ffc247 !important; } .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill]:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg path:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg rect:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg circle:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon:not([fill="none"]), .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg text, .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg.svg-inline--fa path, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill]:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg path:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg rect:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg circle:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon:not([fill="none"]), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg text, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg.svg-inline--fa path, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill]:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg path:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg rect:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg circle:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg ellipse:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg polygon:not([fill="none"]), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg text, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg.svg-inline--fa path, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg .fillable:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg [fill]:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg path:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg rect:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg circle:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg ellipse:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg polygon:not([fill="none"]), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg text, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg.svg-inline--fa path { fill: url(#llbuilder-icon-amber-gradient) #ffc247 !important; } .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable[fill="none"], .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill="none"], .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable[fill="none"], .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill="none"], .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg .fillable[fill="none"], .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) svg [fill="none"], .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg .fillable[fill="none"], .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) svg [fill="none"] { fill: none !important; } .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled), .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled), .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled), .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled) { transform: translateY(-1px) scale(1.012) !important; color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))); border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 38%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.028)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 66%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 28px rgba(0,0,0,.24), 0 0 0 1px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 12%, transparent); } .llbuilder-category-button[data-v-5b93bf01]:hover:not(:disabled)::after, .llbuilder-utility-button[data-v-5b93bf01]:hover:not(:disabled)::after, .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled)::after, .action-history-group > .builder-button-large[data-v-5b93bf01]:hover:not(:disabled)::after { opacity: 1; transform: translateX(360%) skewX(-18deg); } .llbuilder-category-button.btn-accent[data-v-5b93bf01] { background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)), color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 48%, transparent) !important; color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important; } .llbuilder-category-button.btn-accent[data-v-5b93bf01]:hover:not(:disabled) { color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))) !important; } .llbuilder-category-button.btn-yellow[data-v-5b93bf01], .llbuilder-category-button[aria-pressed="true"][data-v-5b93bf01] { color: var(--llb-icon-active, var(--llb-text-strong, var(--color-text-primary))) !important; border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 38%, transparent); background: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 9%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 -1px 0 color-mix(in srgb, var(--llb-accent, var(--color-accent)) 16%, transparent), 0 0 0 1px color-mix(in srgb, var(--llb-accent, var(--color-accent)) 10%, transparent) !important; } .llbuilder-utility-button[data-v-5b93bf01], .action-history-group > .builder-button-large[data-v-5b93bf01] { --icon-size: calc(var(--btn-scale, 1) * 1.34rem); min-width: calc(var(--btn-scale, 1) * 2.3rem); height: calc(var(--btn-scale, 1) * 2.05rem); padding-inline: 0.5rem; position: relative; isolation: isolate; overflow: hidden; border-radius: 0.45rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 70%, transparent); color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))); transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease; } .llbuilder-utility-button.btn-accent[data-v-5b93bf01], .action-history-group > .builder-button-large.btn-accent[data-v-5b93bf01] { background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 70%, transparent) !important; color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; } .action-history-group > .builder-button-large svg[data-v-5b93bf01] { width: var(--icon-size) !important; height: var(--icon-size) !important; color: inherit !important; } .llbuilder-category-label[data-v-5b93bf01] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .llbuilder-tool-label[data-v-5b93bf01], .llbuilder-utility-button span[data-v-5b93bf01] { max-width: 7.75rem; overflow: hidden; text-overflow: ellipsis; color: currentColor; font-size: calc(var(--btn-scale, 1) * 0.64rem); font-weight: 750; line-height: 1.05; text-transform: uppercase; white-space: nowrap; } .llbuilder-utility-button span[data-v-5b93bf01] { max-width: 8.5rem; } .ai-pill-button[data-v-5b93bf01] { display: inline-flex; align-items: center; gap: 0.5rem; padding: calc(var(--btn-scale, 1) * 0.42rem) calc(var(--btn-scale, 1) * 1rem); min-height: calc(var(--btn-scale, 1) * 2.15rem); border-radius: 0.48rem; font-family: 'Righteous', sans-serif; font-size: calc(var(--btn-scale, 1) * 0.9rem); font-weight: 700; line-height: 1; transition: transform 0.2s ease, box-shadow 0.2s ease; background: color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 72%, transparent); border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 18%, transparent); box-shadow: 0 8px 22px rgba(0,0,0,.2); } .ai-pill-button[data-v-5b93bf01]:hover:not(:disabled):not(.is-policy-disabled) { transform: translateY(-1px); box-shadow: 0 14px 32px color-mix(in srgb, var(--color-bg-primary) 72%, transparent); } .ai-pill-button[data-v-5b93bf01]:disabled { pointer-events: none; box-shadow: none; } .ai-pill-button.is-policy-disabled[data-v-5b93bf01] { box-shadow: none; } .ai-pill-accent[data-v-5b93bf01] { color: var(--color-accent-contrast); } .ai-pill-brand[data-v-5b93bf01] { display: inline-flex; align-items: center; gap: 0; } .ai-pill-main[data-v-5b93bf01] { color: var(--color-accent); } .ai-pill-separator[data-v-5b93bf01] { color: var(--color-text-secondary); font-weight: 700; } .ai-pill-token-text[data-v-5b93bf01] { display: inline-flex; align-items: center; font-size: 1em; font-weight: 700; line-height: 1; letter-spacing: 0.02em; opacity: 0.72; } .ai-pill-token-text--available[data-v-5b93bf01] { color: var(--color-button-Simulation-Green); } .ai-pill-token-text--empty[data-v-5b93bf01] { color: var(--color-button-Simulation-Red); } @media (orientation: landscape) and (max-height: 420px) { .action-categories-group[data-v-5b93bf01], .action-history-group[data-v-5b93bf01] { gap: calc(var(--btn-scale, 1) * 0.3rem); } } /* -------- Shell animation (HORIZONTAL) -------- Animate width + horizontal padding (so it can fully collapse), and keep opacity fade for polish. */ .popover-shell[data-v-5b93bf01] { --pad-x: 0.5rem; /* horizontal padding when open */ --llb-submenu-edge-a: #38bdf8; --llb-submenu-edge-b: #14b8a6; --llb-submenu-edge-c: #818cf8; padding: 0 var(--pad-x); overflow: hidden; transition: width 520ms ease, padding 520ms ease, opacity 180ms ease; backdrop-filter: blur(14px); background: var(--llb-menu-surface, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 94%, #020617 6%)); border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 22%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.025), 0 24px 56px rgba(0,0,0,.42); } .popover-shell.sub-menu[data-v-5b93bf01]::before { inset: -1px; border-radius: inherit; background: linear-gradient( 135deg, color-mix(in srgb, var(--llb-submenu-edge-a) 44%, transparent) 0%, color-mix(in srgb, var(--llb-submenu-edge-b) 32%, transparent) 52%, color-mix(in srgb, var(--llb-submenu-edge-c) 26%, transparent) 100% ); background-size: 160% 160%; animation: none; opacity: 0.72; z-index: -1; } .popover-shell.header-inset-accent[data-v-5b93bf01]::after { background: linear-gradient( 180deg, color-mix(in srgb, var(--llb-submenu-edge-a) 64%, transparent), color-mix(in srgb, var(--llb-submenu-edge-b) 48%, transparent) ); background-size: 100% 100%; animation: none; opacity: 0.56; } .llbuilder-tool-shelf[data-v-5b93bf01] { border-radius: 8px; } .llbuilder-tool-shelf-content[data-v-5b93bf01] { align-items: stretch; padding: 0.45rem; } .llbuilder-tool-button[data-v-5b93bf01] { --icon-size: calc(var(--btn-scale, 1) * 1.4rem); min-width: calc(var(--btn-scale, 1) * 6.15rem); height: calc(var(--btn-scale, 1) * 2.42rem); justify-content: flex-start; padding-inline: 0.56rem; border-color: color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 14%, transparent); background: var(--llb-menu-item, color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 64%, transparent)); color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))); } .llbuilder-tool-button.btn-yellow[data-v-5b93bf01] { color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; border-color: color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 14%, transparent); background: var(--llb-menu-item, color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 64%, transparent)) !important; } .llbuilder-tool-button.btn-accent[data-v-5b93bf01], .llbuilder-tool-button.btn-pink[data-v-5b93bf01], .llbuilder-tool-button.btn-sim-green[data-v-5b93bf01], .llbuilder-tool-button.btn-sim-red[data-v-5b93bf01] { background: var(--llb-menu-item, color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 64%, transparent)) !important; color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important; } .llbuilder-tool-button[data-v-5b93bf01]:hover:not(:disabled) { color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))) !important; background: var(--llb-menu-item-hover, color-mix(in srgb, var(--llb-panel-soft, var(--color-bg-secondary)) 76%, transparent)) !important; } /* Use OPEN padding during measuring so width target includes padding */ .popover-shell.is-measuring[data-v-5b93bf01] { padding-left: var(--pad-x) !important; padding-right: var(--pad-x) !important; } /* While expanding/collapsing, set horizontal padding to 0 so width can hit 0 */ .popover-shell.is-expanding[data-v-5b93bf01], .popover-shell.is-collapsing[data-v-5b93bf01] { padding-left: 0 !important; padding-right: 0 !important; } /* Fade the shell itself lightly while collapsing */ .popover-shell.is-collapsing[data-v-5b93bf01] { opacity: 0; } /* -------- Content fade & no-wrap to keep height stable -------- */ .menu-content[data-v-5b93bf01] { opacity: 0; pointer-events: none; /* no hover/tooltip until visible */ transition: opacity 180ms ease; white-space: nowrap; flex-wrap: nowrap; } /* When width finished, fade content in and enable interactions */ .popover-shell.is-content-in .menu-content[data-v-5b93bf01], .popover-shell.is-open .menu-content[data-v-5b93bf01] { opacity: 1; pointer-events: auto; } /* Fade content out before/during collapsing */ .popover-shell.is-content-out .menu-content[data-v-5b93bf01] { opacity: 0; pointer-events: none; } @media (max-width: 1240px), (orientation: landscape) and (max-height: 420px) { .llbuilder-category-label[data-v-5b93bf01], .llbuilder-tool-label[data-v-5b93bf01], .llbuilder-utility-button span[data-v-5b93bf01] { display: none; } .llbuilder-category-button[data-v-5b93bf01], .llbuilder-utility-button[data-v-5b93bf01], .llbuilder-tool-button[data-v-5b93bf01] { width: calc(var(--btn-scale, 1) * 2.85rem); min-width: calc(var(--btn-scale, 1) * 2.85rem); justify-content: center; padding-inline: 0; } } /* Match HeaderActions height */ .sim-header[data-v-b82a1f5d]{ /* Pink aurora centered on global --color-accent-contrast (#EC4899) */ --aurora-core: var(--color-accent-contrast, #EC4899); /* Slightly darker & lighter companions (fallback hex + color-mix for modern engines) */ --aurora-low: #c13a7d; --aurora-high: #ff6fb5; /* Yellow pop highlight from global */ --aurora-pop: var(--color-button-header-Contrast-Yellow, #ffc300); /* Modern engines refine the above using color-mix; fallbacks remain for others */ --aurora-low: color-mix(in oklab, var(--aurora-core) 78%, black); --aurora-high: color-mix(in oklab, var(--aurora-core) 82%, white); /* Gaussian-like opacity mask across beam width: 0% at edges → 100% at center (50%) → 0% at end. */ --gauss-mask: linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 8%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0.32) 30%, rgba(0,0,0,0.62) 40%, rgba(0,0,0,1.00) 50%, rgba(0,0,0,0.62) 60%, rgba(0,0,0,0.32) 70%, rgba(0,0,0,0.12) 82%, rgba(0,0,0,0.03) 92%, rgba(0,0,0,0) 100% ); min-height: calc(var(--btn-scale, 1) * 3rem + 1rem); border-radius: 1rem; overflow: hidden !important; position: relative; isolation: isolate; } /* ── Multi-beam sweep (pink aurora) ───────────────────────── */ .sim-gleam[data-v-b82a1f5d]{ position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; opacity: .40; /* toned for elegance */ animation: hueDrift-b82a1f5d 9s ease-in-out infinite alternate; } .beam[data-v-b82a1f5d]{ position: absolute; top: -35%; bottom: -35%; left: 0; transform: translateX(-520%) skewX(-18deg); will-change: transform, opacity; mix-blend-mode: screen; pointer-events: none; /* Gaussian amplitude mask across beam width */ -webkit-mask-image: var(--gauss-mask); mask-image: var(--gauss-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; mask-mode: alpha; } /* Core beam with a tight pink center */ .beam-main[data-v-b82a1f5d]{ width: 24%; /* fallback gradient */ background: linear-gradient( 90deg, rgba(0,0,0,0) 0%, rgba(193,58,125,.85) 42%, /* --aurora-low */ var(--aurora-core) 50%, /* center pink */ rgba(255,111,181,.85) 58%, /* --aurora-high */ rgba(0,0,0,0) 100% ); /* color-mix version for modern engines */ background: linear-gradient( 90deg, transparent 0%, color-mix(in oklab, var(--aurora-low) 85%, transparent) 42%, var(--aurora-core) 50%, color-mix(in oklab, var(--aurora-high) 85%, transparent) 58%, transparent 100% ); /* Add subtle yellow sparkle to the glow */ filter: drop-shadow(0 0 16px var(--aurora-low)) drop-shadow(0 0 22px var(--aurora-high)) drop-shadow(0 0 28px color-mix(in oklab, var(--aurora-pop) 60%, transparent)); animation: sweepMain-b82a1f5d 3.8s cubic-bezier(.42,0,.58,1) infinite; /* ease-in-out */ } /* Soft body of the aurora */ .beam-soft[data-v-b82a1f5d]{ width: 42%; transform: translateX(-560%) skewX(-18deg); /* fallback */ background: radial-gradient( 50% 120% at 50% 50%, rgba(193,58,125,.28) 0%, /* --aurora-low */ rgba(236,72,153,.28) 50%, /* --aurora-core */ rgba(255,195,0, .12) 70%, /* yellow kiss */ rgba(255,255,255,0) 85% ); /* color-mix version */ background: radial-gradient( 50% 120% at 50% 50%, color-mix(in oklab, var(--aurora-low) 28%, transparent) 0%, color-mix(in oklab, var(--aurora-core) 28%, transparent) 50%, color-mix(in oklab, var(--aurora-pop) 12%, transparent) 70%, transparent 85% ); animation: sweepSoft-b82a1f5d 4.4s cubic-bezier(.42,0,.58,1) infinite .12s,breathe-b82a1f5d 6s ease-in-out infinite; } /* Full-width crossing with linger near center */ @keyframes sweepMain-b82a1f5d{ 0% { transform: translateX(-520%) skewX(-18deg); opacity:.95; } 45% { transform: translateX( -10%) skewX(-18deg); opacity:1; } 55% { transform: translateX( 10%) skewX(-18deg); opacity:1; } 100% { transform: translateX( 520%) skewX(-18deg); opacity:.95; } } @keyframes sweepSoft-b82a1f5d{ 0% { transform: translateX(-560%) skewX(-18deg); } 50% { transform: translateX( 0%) skewX(-18deg); } 100% { transform: translateX( 560%) skewX(-18deg); } } @keyframes sweepGhost-b82a1f5d{ 0% { transform: translateX(-540%) skewX(-18deg); opacity:.9; } 50% { transform: translateX( 0%) skewX(-18deg); opacity:1; } 100% { transform: translateX( 540%) skewX(-18deg); opacity:.9; } } /* Subtle breathing + hue drift around pinks/yellows */ @keyframes breathe-b82a1f5d{ 0%,100%{ opacity:.24 } 50% { opacity:.34 } } @keyframes hueDrift-b82a1f5d{ 0% { filter: hue-rotate(-4deg) saturate(1.05) } 100%{ filter: hue-rotate( 4deg) saturate(1.05) } } /* Title + status light */ .sim-title[data-v-b82a1f5d]{ font-family: 'Righteous', sans-serif; font-weight: 400; letter-spacing: .02em; font-size: clamp(1rem, 2.2vw, 1.375rem); line-height: 1.2; } .sim-title .accent[data-v-b82a1f5d]{ color: var(--color-accent); } .sim-title .accent-contrast[data-v-b82a1f5d]{ color: var(--color-accent-contrast); } .sim-title .scenario[data-v-b82a1f5d]{ margin-left: .75rem; opacity: .9; color: var(--color-text-primary); } /* Status dot: switch to accent pink with a yellow halo */ .sim-dot[data-v-b82a1f5d]{ width: 12px; height: 12px; border-radius: 999px; background: var(--color-accent-contrast); box-shadow: 0 0 6px var(--color-accent-contrast), 0 0 12px color-mix(in oklab, var(--aurora-pop) 65%, transparent); animation: simPulse-b82a1f5d 1.4s ease-in-out infinite; } @keyframes simPulse-b82a1f5d{ 0%,100%{ transform: scale(1); opacity: 1 } 60% { transform: scale(1.55); opacity: .45 } } /* Reduced motion accessibility */ @media (prefers-reduced-motion: reduce){ .sim-gleam[data-v-b82a1f5d], .beam[data-v-b82a1f5d], .beam-main[data-v-b82a1f5d], .beam-soft[data-v-b82a1f5d], .beam-ghost[data-v-b82a1f5d]{ animation: none !important; } } /* ---------- Header width animation ---------- */ .header-panel[data-v-2fb28d58] { box-sizing: border-box; transition: width 520ms ease, max-width 520ms ease; } .header-panel.is-transitioning[data-v-2fb28d58] { transition: width 520ms ease, max-width 520ms ease !important; } .llbuilder-variable-inspector[data-v-2fb28d58] { border-left: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(270deg, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 86%, transparent), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 82%, transparent)), var(--color-bg-primary); box-shadow: inset 1px 0 0 rgba(255,255,255,.06); } .controls-dock[data-v-2fb28d58] { width: 100%; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; padding-inline: calc(var(--btn-scale, 1) * 0.22rem); overflow: visible; overscroll-behavior: contain; } .controls-button-group[data-v-2fb28d58] { width: -moz-fit-content; width: fit-content; display: flex; flex-direction: column; align-items: center; gap: calc(var(--btn-scale, 1) * 0.35rem); } .controls-button-group > .builder-button-large[data-v-2fb28d58] { flex: 0 0 auto; } .controls-button-group > .builder-button-large[data-v-2fb28d58] { --icon-size: calc(var(--btn-scale, 1) * 1.22rem); width: calc(var(--btn-scale, 1) * 2.3rem); min-width: calc(var(--btn-scale, 1) * 2.3rem); height: auto; min-height: calc(var(--btn-scale, 1) * 2.3rem); display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0.34rem; padding: 0; position: relative; isolation: isolate; overflow: hidden; border-radius: 0.48rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 16%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 72%, transparent) !important; color: var(--llb-icon-muted, var(--llb-text-muted, var(--color-text-secondary))) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; letter-spacing: 0; transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .2s ease; } .controls-button-group > .builder-button-large[data-v-2fb28d58]::before { content: ""; position: absolute; inset: -45% auto -45% -78%; z-index: 0; width: 52%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); opacity: 0; pointer-events: none; transition: transform 430ms ease, opacity 180ms ease; } .controls-button-group > .builder-button-large[aria-label][data-v-2fb28d58]::after { display: none; } .controls-button-group > .builder-button-large svg[data-v-2fb28d58] { width: var(--icon-size) !important; height: var(--icon-size) !important; color: inherit !important; flex: 0 0 auto; } .controls-button-group > .builder-button-large[data-v-2fb28d58] svg [stroke] { stroke: currentColor !important; } .controls-button-group > .builder-button-large[data-v-2fb28d58] svg [fill]:not([fill="none"]) { fill: currentColor !important; } .controls-button-group > .builder-button-large[data-v-2fb28d58] svg path:not([fill="none"]), .controls-button-group > .builder-button-large[data-v-2fb28d58] svg rect:not([fill="none"]), .controls-button-group > .builder-button-large[data-v-2fb28d58] svg circle:not([fill="none"]), .controls-button-group > .builder-button-large[data-v-2fb28d58] svg ellipse:not([fill="none"]), .controls-button-group > .builder-button-large[data-v-2fb28d58] svg polygon:not([fill="none"]), .controls-button-group > .builder-button-large[data-v-2fb28d58] svg text { fill: currentColor !important; } .controls-button-group > .builder-button-large[data-v-2fb28d58] svg.svg-inline--fa path { fill: currentColor !important; } .controls-button-group > .builder-button-large.btn-yellow[data-v-2fb28d58] { color: var(--llb-icon-active, var(--llb-text-strong, var(--color-text-primary))) !important; border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 34%, transparent); background: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 8%, transparent) !important; } .controls-button-group > .builder-button-large[data-v-2fb28d58]:hover:not(:disabled) { transform: translateY(-1px) scale(1.012) !important; color: var(--llb-icon-hover, var(--llb-text-strong, var(--color-text-primary))) !important; border-color: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 32%, transparent); background: linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.03)), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 76%, transparent) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px rgba(0,0,0,.22) !important; } .controls-button-group > .builder-button-large[data-v-2fb28d58]:hover:not(:disabled)::before { opacity: 1; transform: translateX(360%) skewX(-18deg); } .header-variables--policy-restricted .variables-menu[data-v-2fb28d58], .header-variables--policy-restricted .controls-button-group[data-v-2fb28d58] { opacity: 0.5; } .avatar-stack[data-v-2fb28d58] { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(-0.35rem, 0.25vh, 0rem); display: flex; flex-direction: column; align-items: center; gap: calc(var(--btn-scale, 1) * 0.1rem); overflow: visible; z-index: 1200; } .avatar-dock[data-v-2fb28d58] { width: 100%; max-width: 100%; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; min-height: clamp(40px, calc(var(--btn-scale, 1) * 3.6rem), 72px); overflow: visible; } .avatar-dock[data-v-2fb28d58] * { pointer-events: auto; } .onboarding-avatar-visibility-btn[data-v-2fb28d58] { width: calc(var(--btn-scale, 1) * 1.083rem); height: calc(var(--btn-scale, 1) * 1.083rem); margin-top: calc(var(--btn-scale, 1) * 0.55rem); border-radius: 9999px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.26); transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .onboarding-avatar-visibility-btn--collapsed[data-v-2fb28d58] { background: linear-gradient( 140deg, color-mix(in srgb, var(--color-button-Simulation-Green) 84%, #0f172a), color-mix(in srgb, var(--color-button-Simulation-Green) 62%, #0f172a) ); border-color: color-mix(in srgb, var(--color-button-Simulation-Green) 78%, #ffffff 22%); color: var(--color-bg-primary); box-shadow: 0 0 10px color-mix(in srgb, var(--color-button-Simulation-Green) 48%, transparent), 0 2px 10px rgba(0, 0, 0, 0.26); } .onboarding-avatar-visibility-btn--expanded[data-v-2fb28d58] { background: linear-gradient( 140deg, color-mix(in srgb, #ef4444 84%, #0f172a), color-mix(in srgb, #ef4444 62%, #0f172a) ); border-color: color-mix(in srgb, #ef4444 78%, #ffffff 22%); color: #ffffff; box-shadow: 0 0 10px color-mix(in srgb, #ef4444 48%, transparent), 0 2px 10px rgba(0, 0, 0, 0.26); } @media (orientation: landscape) and (max-height: 420px) { .controls-dock[data-v-2fb28d58] { padding-block: calc(var(--btn-scale, 1) * 0.2rem); } .controls-button-group[data-v-2fb28d58] { gap: calc(var(--btn-scale, 1) * 0.3rem); } .controls-button-group > .builder-button-large[data-v-2fb28d58] { width: calc(var(--btn-scale, 1) * 2.75rem); min-width: calc(var(--btn-scale, 1) * 2.75rem); min-height: calc(var(--btn-scale, 1) * 2.75rem); padding: 0; } .controls-button-group > .builder-button-large[aria-label][data-v-2fb28d58]::after { display: none; } .avatar-stack[data-v-2fb28d58] { gap: calc(var(--btn-scale, 1) * 0.1rem); bottom: clamp(-0.25rem, 0.2vh, 0rem); } .avatar-dock[data-v-2fb28d58] { min-height: clamp(30px, calc(var(--btn-scale, 1) * 2.8rem), 56px); } } @media (orientation: landscape) and (max-height: 380px) { .controls-button-group[data-v-2fb28d58] { transform: translateY(-1rem); } } .onboarding-avatar-visibility-btn__icon[data-v-2fb28d58] { width: calc(var(--btn-scale, 1) * 0.6rem); height: calc(var(--btn-scale, 1) * 0.6rem); } .onboarding-avatar-visibility-btn--hidden[data-v-2fb28d58] { visibility: hidden; opacity: 0; pointer-events: none; } /* ---------- Menu animation ---------- */ .variables-menu-enter-active[data-v-2fb28d58], .variables-menu-leave-active[data-v-2fb28d58] { transition: opacity 420ms ease, transform 420ms ease !important; } .variables-menu-enter-from[data-v-2fb28d58], .variables-menu-leave-to[data-v-2fb28d58] { opacity: 0; transform: translateX(14px); } /* Prevent inherited slow 'transition: all' from glass-panel */ .variables-menu.glass-panel[data-v-2fb28d58] { transition: opacity 420ms ease, transform 420ms ease !important; background: linear-gradient(180deg, color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 90%, transparent), color-mix(in srgb, var(--llb-panel, var(--color-bg-secondary)) 84%, transparent)), var(--color-bg-primary); border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 18%, transparent); border-radius: 8px; backdrop-filter: blur(12px); box-shadow: 0 18px 44px rgba(0,0,0,.34); } /* ---------- Title ---------- */ .variables-title[data-v-2fb28d58] { font-family: 'Righteous', sans-serif; font-weight: 400; font-size: calc(1.125rem * var(--variables-text-scale)); letter-spacing: .02em; } .variables-title[data-v-2fb28d58] .variables-title__contrast { color: var(--color-accent-contrast); } .variables-title[data-v-2fb28d58] .variables-title__accent { color: var(--color-accent); } .section-label[data-v-2fb28d58] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ---------- Table text ---------- */ .variables-menu table[data-v-2fb28d58] { font-size: calc(0.875rem * var(--variables-text-scale)); border-collapse: separate; border-spacing: 0; } .variables-menu thead[data-v-2fb28d58] { color: var(--llb-text-muted, var(--color-text-secondary)); text-transform: uppercase; letter-spacing: 0; } .variables-menu th[data-v-2fb28d58], .variables-menu td[data-v-2fb28d58] { border-bottom: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 48%, transparent); } .variables-menu tbody tr:last-child td[data-v-2fb28d58] { border-bottom: 0; } /* ---------- Info button ---------- */ .info-btn[data-v-2fb28d58] { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 9999px; color: var(--color-accent); transition: background-color .2s ease, transform .2s ease; } .info-btn[data-v-2fb28d58]:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); color: var(--color-accent-contrast); } /* ---------- Scenario select ---------- */ .scenario-card[data-v-2fb28d58] { border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 72%, transparent); background: color-mix(in srgb, var(--llb-panel-muted, var(--color-bg-secondary)) 86%, transparent); backdrop-filter: blur(10px); border-radius: 8px; padding: 0.75rem; } .scenario-card__label[data-v-2fb28d58] { display: flex; align-items: center; gap: .25rem; margin-bottom: .5rem; font-size: .8rem; font-weight: 600; opacity: .8; } .scenario-card__controls[data-v-2fb28d58] { display: flex; align-items: center; gap: .5rem; width: 100%; } .cell-id[data-v-2fb28d58] { width: 5.5rem; opacity: .95; font-variant-numeric: tabular-nums; } .cell-tight[data-v-2fb28d58]{ width: 5.5rem; text-align: center; } .cell-grow[data-v-2fb28d58] { width: auto; } /* Simulation: toggles + LEDs */ .slot-toggle-btn[data-v-2fb28d58] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: .35rem .5rem; border-radius: .55rem; border: 1px solid rgba(255,255,255,0.14); transition: transform .2s ease, box-shadow .2s ease, color .25s ease, background-color .25s ease; } .slot-toggle--on[data-v-2fb28d58] { color: var(--color-button-Simulation-Red); background: color-mix(in oklab, var(--color-button-Simulation-Red) 15%, transparent); border-color: color-mix(in oklab, var(--color-button-Simulation-Red) 40%, transparent); } .slot-toggle--off[data-v-2fb28d58] { color: var(--color-button-Simulation-Green); background: color-mix(in oklab, var(--color-button-Simulation-Green) 15%, transparent); border-color: color-mix(in oklab, var(--color-button-Simulation-Green) 40%, transparent); } .slot-toggle-btn[data-v-2fb28d58]:hover { transform: translateY(-1px); } .slot-metric[data-v-2fb28d58] { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; padding: .35rem .6rem; border-radius: .55rem; background: rgba(255,255,255,0.08); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-primary); } .slot-metric--timer[data-v-2fb28d58] { color: var(--color-button-Simulation-Green); } .slot-metric--counter[data-v-2fb28d58] { color: var(--color-accent); } .led[data-v-2fb28d58] { font-size: 1.05rem; vertical-align: middle; filter: drop-shadow(0 0 10px rgba(236,72,153,0.35)); } .led--on[data-v-2fb28d58] { color: #34d399; } .led--off[data-v-2fb28d58] { color: #f43f5e; } /* Quick view indicator */ .quickview-dot[data-v-2fb28d58] { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; animation: pulse-2fb28d58 1.5s infinite; } .quickview-dot--on[data-v-2fb28d58] { background: var(--color-button-Simulation-Green); box-shadow: 0 0 6px color-mix(in oklab, var(--color-button-Simulation-Green) 60%, transparent); } .quickview-dot--off[data-v-2fb28d58] { background: var(--color-button-Simulation-Red); box-shadow: 0 0 6px color-mix(in oklab, var(--color-button-Simulation-Red) 60%, transparent); } @keyframes pulse-2fb28d58 { 0%,100%{transform:scale(.9);opacity:.8} 50%{transform:scale(1.2);opacity:1} } /* ---------- Swap table transition ---------- */ .variables-swap-enter-active[data-v-2fb28d58], .variables-swap-leave-active[data-v-2fb28d58] { transition: opacity 300ms ease; } .variables-swap-enter-from[data-v-2fb28d58], .variables-swap-leave-to[data-v-2fb28d58] { opacity: 0; } .orientation-warning-overlay[data-v-d82f5517] { position: fixed; inset: 0; z-index: 10000; width: 100vw; min-height: 100svh; width: 100dvw; height: 100dvh; box-sizing: border-box; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(17, 24, 39, 0.98); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .portrait-dialog[data-v-d82f5517] { width: min(100%, 26rem); min-height: min(52dvh, 20rem); max-width: calc(100dvw - 1rem); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, 3vh, 2rem); padding: clamp(0.5rem, 1.5vh, 0.875rem); box-sizing: border-box; text-align: center; } .orientation-title[data-v-d82f5517] { font-size: clamp(1rem, 3.2vw, 1.35rem); line-height: 1.25; } .orientation-icon[data-v-d82f5517] { width: clamp(1rem, 4vw, 1.5rem); height: clamp(1rem, 4vw, 1.5rem); flex-shrink: 0; } .orientation-helper-trigger[data-v-d82f5517] { flex-shrink: 0; } @media (max-width: 640px) { .portrait-dialog[data-v-d82f5517] { width: min(100%, 22rem); max-width: calc(100dvw - 0.75rem); } } body.orientation-warning-open { overflow: hidden; touch-action: none; } .orientation-overlay-fade-enter-active[data-v-d82f5517], .orientation-overlay-fade-leave-active[data-v-d82f5517] { transition: opacity 220ms ease; } .orientation-overlay-fade-enter-from[data-v-d82f5517], .orientation-overlay-fade-leave-to[data-v-d82f5517] { opacity: 0; } .webhmi-three-scene[data-v-865fc179] { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: #0b111b; } .webhmi-three-scene__canvas[data-v-865fc179] { display: block; width: 100%; height: 100%; outline: none; } .webhmi-three-scene__toolbar[data-v-865fc179] { position: absolute; left: 0.75rem; top: 0.75rem; z-index: 4; display: inline-flex; gap: 0.28rem; border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 0.5rem; background: rgba(15, 23, 42, 0.86); padding: 0.3rem; backdrop-filter: blur(14px); } .webhmi-three-scene__toolbar button[data-v-865fc179] { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 0.35rem; background: transparent; color: #cbd5e1; } .webhmi-three-scene__toolbar button[data-v-865fc179]:hover:not(:disabled), .webhmi-three-scene__toolbar button.is-active[data-v-865fc179] { border-color: rgba(96, 165, 250, 0.42); background: rgba(37, 99, 235, 0.38); color: #eff6ff; } .webhmi-three-scene__toolbar button[data-v-865fc179]:disabled { opacity: 0.45; } .webhmi-three-scene__toolbar svg[data-v-865fc179] { width: 1rem; height: 1rem; } .webhmi-three-scene__empty[data-v-865fc179], .webhmi-three-scene__issue[data-v-865fc179] { position: absolute; left: 50%; z-index: 3; transform: translateX(-50%); text-align: center; pointer-events: none; } .webhmi-three-scene__empty[data-v-865fc179] { top: 42%; display: flex; min-width: min(28rem, calc(100% - 2rem)); flex-direction: column; align-items: center; gap: 0.35rem; color: #cbd5e1; } .webhmi-three-scene__empty svg[data-v-865fc179] { width: 2.3rem; height: 2.3rem; color: #93c5fd; } .webhmi-three-scene__empty strong[data-v-865fc179] { color: #f8fafc; font-size: 0.94rem; font-weight: 950; } .webhmi-three-scene__empty span[data-v-865fc179], .webhmi-three-scene__issue[data-v-865fc179] { color: #94a3b8; font-size: 0.76rem; font-weight: 780; } .webhmi-three-scene__issue[data-v-865fc179] { bottom: 0.8rem; max-width: min(34rem, calc(100% - 2rem)); border: 1px solid rgba(248, 113, 113, 0.32); border-radius: 0.45rem; background: rgba(127, 29, 29, 0.58); color: #fecaca; padding: 0.45rem 0.65rem; } .webhmi-editor-surface[data-v-99e73dd6] { display: flex; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: linear-gradient(rgba(230, 196, 251, 0.052) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 196, 251, 0.052) 1px, transparent 1px), var(--webhmi-bg, #0b111b); background-size: 28px 28px; color: #e2e8f0; } .webhmi-stage-shell[data-v-99e73dd6] { position: relative; display: grid; width: 100%; min-width: 0; gap: 0.75rem; padding: 0.75rem; transition: grid-template-columns 420ms cubic-bezier(.16, 1, .3, 1); } .webhmi-stage-shell--2d[data-v-99e73dd6], .webhmi-stage-shell--3d[data-v-99e73dd6], .webhmi-stage-shell--preview[data-v-99e73dd6] { grid-template-columns: minmax(0, 1fr); } .webhmi-stage-shell--split-side[data-v-99e73dd6] { gap: 0; grid-template-columns: minmax(0, var(--split-ratio)) 0.7rem minmax(0, calc(100% - var(--split-ratio))); } .webhmi-stage-shell--split-pip[data-v-99e73dd6] { grid-template-columns: minmax(0, 1fr); } .webhmi-stage-panel[data-v-99e73dd6] { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.18)); border-radius: 0.6rem; background: var(--webhmi-panel, #111827); transition: border-color 260ms ease, box-shadow 360ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1), background 260ms ease; } .webhmi-stage-panel.is-guided[data-v-99e73dd6] { border-color: rgba(59, 130, 246, 0.38); box-shadow: 0 22px 60px rgba(37, 99, 235, 0.12); } .webhmi-stage-panel.is-guided[data-v-99e73dd6]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(96, 165, 250, 0.16); animation: webhmi-stage-focus-99e73dd6 2300ms ease-in-out infinite; pointer-events: none; } .webhmi-stage-shell--split-pip .webhmi-stage-panel.is-primary[data-v-99e73dd6] { grid-area: 1 / 1; } .webhmi-stage-shell--split-pip .webhmi-stage-panel.is-pip[data-v-99e73dd6] { position: absolute; right: 1.35rem; bottom: 1.35rem; z-index: 30; width: min(31rem, 38%); height: min(22rem, 42%); min-height: 14rem; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(230, 196, 251, 0.1); } .webhmi-stage-titlebar[data-v-99e73dd6] { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 3rem; border-bottom: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); background: var(--webhmi-panel-strong, #0f172a); padding: 0.55rem 0.75rem; } .webhmi-stage-titlebar div[data-v-99e73dd6]:first-child { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; } .webhmi-stage-titlebar strong[data-v-99e73dd6] { overflow: hidden; color: #f8fafc; font-size: 0.82rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-stage-titlebar span[data-v-99e73dd6], .webhmi-stage-titlebar small[data-v-99e73dd6] { color: var(--webhmi-muted, #94a3b8); font-size: 0.68rem; font-weight: 800; } .webhmi-stage-actions[data-v-99e73dd6], .webhmi-focus-toolbar[data-v-99e73dd6] { display: inline-flex; align-items: center; gap: 0.35rem; } .webhmi-viewport-button[data-v-99e73dd6] { display: inline-flex; align-items: center; justify-content: center; gap: 0.32rem; min-height: 1.8rem; border-radius: 0.45rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.18)); background: rgba(15, 23, 42, 0.72); color: #cbd5e1; padding: 0.32rem 0.46rem; font-size: 0.68rem; font-weight: 850; transition: transform 260ms cubic-bezier(.16, 1, .3, 1), border-color 180ms ease, background 180ms ease, box-shadow 220ms ease, color 180ms ease; } .webhmi-viewport-button svg[data-v-99e73dd6] { width: 0.9rem; height: 0.9rem; } .webhmi-viewport-button[data-v-99e73dd6]:hover { transform: translateY(-1px); border-color: rgba(230, 196, 251, 0.3); background: rgba(24, 34, 52, 0.86); } .webhmi-viewport-button[data-v-99e73dd6]:active { transform: translateY(0) scale(0.96); } .webhmi-viewport-button.is-active[data-v-99e73dd6], .webhmi-viewport-button--restore[data-v-99e73dd6] { border-color: rgba(20, 184, 166, 0.5); background: #0a5f55; color: #ecfdf5; box-shadow: 0 0 20px rgba(20, 184, 166, 0.3); } .webhmi-canvas-viewport[data-v-99e73dd6] { display: grid; flex: 1 1 auto; min-height: 0; overflow: hidden; place-items: center; padding: 1.25rem; } .webhmi-canvas-viewport.is-panning[data-v-99e73dd6], .webhmi-canvas-viewport.is-pan-active[data-v-99e73dd6] { cursor: grab; } .webhmi-canvas-viewport.is-pan-active[data-v-99e73dd6] { cursor: grabbing; } .webhmi-canvas[data-v-99e73dd6] { position: relative; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(230, 196, 251, 0.28); border-radius: 0.35rem; background: linear-gradient(rgba(230, 196, 251, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(230, 196, 251, 0.08) 1px, transparent 1px), #182337; background-size: 24px 24px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34); transform-origin: center center; transition: box-shadow 360ms ease, border-color 260ms ease, transform 180ms ease; } .webhmi-element[data-v-99e73dd6] { position: absolute; display: flex; align-items: center; justify-content: center; overflow: visible; border: 1px solid rgba(230, 196, 251, 0.22); border-radius: 0.35rem; background: var(--webhmi-panel-soft, #172033); color: #f8fafc; box-shadow: 0 8px 22px rgba(2, 6, 23, 0.32); touch-action: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; transform: rotate(var(--element-rotation, 0deg)); animation: webhmi-element-in-99e73dd6 480ms cubic-bezier(.16, 1, .3, 1); transition: left 80ms linear, top 80ms linear, width 80ms linear, height 80ms linear, transform 360ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 320ms ease, filter 260ms ease; } .webhmi-element[data-v-99e73dd6]:hover { transform: rotate(var(--element-rotation, 0deg)) translateY(-1px) scale(1.01); border-color: rgba(203, 213, 225, 0.44); box-shadow: 0 14px 30px rgba(2, 6, 23, 0.36); } .webhmi-element.is-selected[data-v-99e73dd6] { border-color: var(--webhmi-blue, #60a5fa); outline: 2px solid rgba(59, 130, 246, 0.28); outline-offset: 2px; box-shadow: 0 16px 38px rgba(37, 99, 235, 0.25); } .webhmi-element.is-moving[data-v-99e73dd6], .webhmi-element.is-resizing[data-v-99e73dd6] { z-index: 20; filter: saturate(1.1); box-shadow: 0 24px 54px rgba(2, 6, 23, 0.48), 0 0 0 1px rgba(96, 165, 250, 0.32); } .webhmi-element.is-step-target[data-v-99e73dd6]:not(.is-selected) { border-color: rgba(94, 234, 212, 0.48); box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.12), 0 12px 28px rgba(20, 184, 166, 0.12); } .webhmi-element-label[data-v-99e73dd6] { position: relative; z-index: 2; max-width: calc(100% - 1rem); overflow: hidden; font-size: 0.8rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-element--text[data-v-99e73dd6] { justify-content: flex-start; padding: 0 0.85rem; background: rgba(15, 23, 42, 0.76); } .webhmi-element--image[data-v-99e73dd6], .webhmi-element--model3d[data-v-99e73dd6] { overflow: hidden; padding: 0; background: rgba(15, 23, 42, 0.6); } .webhmi-element--image .webhmi-element-label[data-v-99e73dd6], .webhmi-element--model3d .webhmi-element-label[data-v-99e73dd6] { position: absolute; left: 0.45rem; top: 0.38rem; z-index: 3; max-width: calc(100% - 0.9rem); border-radius: 0.3rem; background: rgba(15, 23, 42, 0.72); padding: 0.16rem 0.35rem; font-size: 0.62rem; } .webhmi-image-asset[data-v-99e73dd6] { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; } .webhmi-model2d-placeholder[data-v-99e73dd6] { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; color: #bfdbfe; } .webhmi-model2d-placeholder svg[data-v-99e73dd6] { width: 2.2rem; height: 2.2rem; } .webhmi-model2d-placeholder small[data-v-99e73dd6] { max-width: calc(100% - 1rem); overflow: hidden; color: #dbeafe; font-size: 0.68rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .webhmi-element--value[data-v-99e73dd6] { flex-direction: column; gap: 0.35rem; } .webhmi-value-readout[data-v-99e73dd6] { color: #5eead4; font-size: 1.32rem; font-weight: 950; } .webhmi-element--button[data-v-99e73dd6], .webhmi-element--nav-button[data-v-99e73dd6], .webhmi-element--switch[data-v-99e73dd6] { border-color: rgba(59, 130, 246, 0.42); background: linear-gradient(180deg, rgba(59, 130, 246, 0.42), rgba(21, 34, 57, 0.98)); } .webhmi-element--alarm-banner[data-v-99e73dd6], .webhmi-element--alarm-table[data-v-99e73dd6] { border-color: rgba(255, 195, 0, 0.38); background: linear-gradient(180deg, rgba(255, 195, 0, 0.12), #231f16); } .webhmi-element--pipe[data-v-99e73dd6] { border-radius: 999px; background: linear-gradient(180deg, #64748b, #334155); } .webhmi-tank-shape[data-v-99e73dd6] { position: absolute; inset: 2.5rem 2rem 1rem; border: 3px solid rgba(203, 213, 225, 0.8); border-radius: 0.8rem 0.8rem 1.2rem 1.2rem; background: linear-gradient(to top, rgba(20, 184, 166, 0.78) var(--level), rgba(15, 23, 42, 0.8) var(--level)); } .webhmi-rotary-symbol[data-v-99e73dd6], .webhmi-lamp-symbol[data-v-99e73dd6], .webhmi-gauge-symbol[data-v-99e73dd6] { position: absolute; display: grid; place-items: center; } .webhmi-rotary-symbol[data-v-99e73dd6] { width: 3.8rem; height: 3.8rem; border: 0.45rem solid #94a3b8; border-radius: 999px; } .webhmi-lamp-symbol[data-v-99e73dd6] { width: 2.2rem; height: 2.2rem; bottom: 0.85rem; border-radius: 999px; background: #22c55e; box-shadow: 0 0 24px rgba(34, 197, 94, 0.4); } .webhmi-valve-symbol[data-v-99e73dd6] { position: absolute; width: 4.3rem; height: 2.6rem; clip-path: polygon(0 0, 50% 48%, 100% 0, 100% 100%, 50% 52%, 0 100%); background: #94a3b8; } .webhmi-gauge-symbol[data-v-99e73dd6] { width: 5.8rem; height: 5.8rem; border: 0.5rem solid #38bdf8; border-bottom-color: rgba(56, 189, 248, 0.18); border-radius: 999px; color: #e0f2fe; font-size: 1rem; font-weight: 950; } .webhmi-trend-symbol[data-v-99e73dd6] { position: absolute; inset: 3rem 1rem 1rem; background: linear-gradient(135deg, transparent 20%, rgba(34, 197, 94, 0.6) 21%, rgba(34, 197, 94, 0.6) 24%, transparent 25%), linear-gradient(25deg, transparent 42%, rgba(96, 165, 250, 0.7) 43%, rgba(96, 165, 250, 0.7) 46%, transparent 47%); } .webhmi-alarm-table-symbol[data-v-99e73dd6] { display: grid; width: calc(100% - 1.5rem); grid-template-columns: 0.8fr 0.8fr 1.6fr; gap: 1px; margin-top: 2.5rem; background: rgba(148, 163, 184, 0.18); } .webhmi-alarm-table-symbol i[data-v-99e73dd6] { background: #111827; color: #fbbf24; padding: 0.35rem; font-size: 0.62rem; font-style: normal; font-weight: 850; } .webhmi-binding-dot[data-v-99e73dd6] { position: absolute; top: 0.35rem; right: 0.35rem; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #5eead4; } .webhmi-resize-handle[data-v-99e73dd6] { position: absolute; right: -0.4rem; bottom: -0.4rem; width: 0.85rem; height: 0.85rem; border: 2px solid #0f172a; border-radius: 999px; background: #60a5fa; cursor: nwse-resize; animation: webhmi-handle-pop-99e73dd6 420ms cubic-bezier(.16, 1, .3, 1); } .webhmi-empty-canvas[data-v-99e73dd6] { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; color: #cbd5e1; text-align: center; } .webhmi-empty-canvas strong[data-v-99e73dd6] { color: #f8fafc; font-size: 1.05rem; font-weight: 950; } .webhmi-empty-canvas span[data-v-99e73dd6] { max-width: 26rem; color: #94a3b8; font-size: 0.82rem; font-weight: 700; } .webhmi-split-divider[data-v-99e73dd6] { display: grid; order: 2; width: 0.7rem; min-width: 0.7rem; cursor: col-resize; place-items: center; border: 0; background: transparent; } .webhmi-split-divider span[data-v-99e73dd6] { width: 0.18rem; height: 4.8rem; border-radius: 999px; background: rgba(148, 163, 184, 0.38); transition: background 220ms ease, box-shadow 220ms ease; } .webhmi-split-divider:hover span[data-v-99e73dd6] { background: rgba(20, 184, 166, 0.8); box-shadow: 0 0 18px rgba(20, 184, 166, 0.28); } .webhmi-focus-toolbar[data-v-99e73dd6] { position: absolute; z-index: 50; border-radius: 0.55rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.18)); background: rgba(15, 23, 42, 0.86); padding: 0.35rem; box-shadow: 0 18px 42px rgba(2, 6, 23, 0.34); backdrop-filter: blur(18px); } .webhmi-focus-toolbar[data-v-99e73dd6] { right: 1rem; top: 1rem; } .webhmi-focus-toolbar > span[data-v-99e73dd6] { color: var(--webhmi-muted, #94a3b8); padding: 0 0.35rem; font-size: 0.68rem; font-weight: 900; text-transform: uppercase; } .webhmi-3d-workbench[data-v-99e73dd6] { display: grid; grid-template-rows: minmax(0, 1fr) auto; flex: 1; min-height: 0; padding: 0; animation: webhmi-scene-in-99e73dd6 520ms cubic-bezier(.16, 1, .3, 1); } .webhmi-3d-scene[data-v-99e73dd6] { min-height: 0; } .webhmi-3d-machine[data-v-99e73dd6] { position: relative; width: 14rem; height: 9rem; transform: perspective(500px) rotateX(58deg) rotateZ(-34deg) scale(var(--scene-scale, 1)); border-radius: 0.7rem; background: linear-gradient(135deg, #334155, #64748b); box-shadow: 2rem 2rem 0 rgba(15, 23, 42, 0.82); transform-origin: center center; transition: transform 260ms cubic-bezier(.16, 1, .3, 1); } .webhmi-3d-workbench.is-orbiting .webhmi-3d-machine[data-v-99e73dd6] { animation: webhmi-subtle-orbit-99e73dd6 6200ms ease-in-out infinite; } .webhmi-3d-machine span[data-v-99e73dd6], .webhmi-3d-machine i[data-v-99e73dd6] { position: absolute; border-radius: 999px; background: #38bdf8; } .webhmi-3d-machine span[data-v-99e73dd6] { inset: 2rem auto auto 2rem; width: 3rem; height: 3rem; } .webhmi-3d-machine i[data-v-99e73dd6] { right: 2rem; bottom: 1.5rem; width: 4.2rem; height: 1.1rem; } .webhmi-3d-bindings[data-v-99e73dd6] { max-width: 28rem; margin: 0 auto; padding: 0.7rem 1rem 0.85rem; text-align: center; } .webhmi-3d-bindings strong[data-v-99e73dd6] { color: #f8fafc; font-size: 0.9rem; font-weight: 950; } .webhmi-3d-bindings p[data-v-99e73dd6] { color: #94a3b8; font-size: 0.78rem; font-weight: 700; line-height: 1.45; } @keyframes webhmi-stage-focus-99e73dd6 { 0%, 100% { opacity: 0.32; } 50% { opacity: 0.88; } } @keyframes webhmi-element-in-99e73dd6 { 0% { opacity: 0; transform: scale(0.94); filter: blur(8px); } 68% { opacity: 1; transform: scale(1.018); filter: blur(0); } 100% { opacity: 1; transform: scale(1); filter: blur(0); } } @keyframes webhmi-handle-pop-99e73dd6 { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes webhmi-scene-in-99e73dd6 { 0% { opacity: 0; transform: translateY(10px) scale(0.985); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes webhmi-subtle-orbit-99e73dd6 { 0%, 100% { transform: perspective(500px) rotateX(58deg) rotateZ(-34deg) scale(var(--scene-scale, 1)); } 50% { transform: perspective(500px) rotateX(58deg) rotateZ(-24deg) scale(var(--scene-scale, 1)); } } @media (max-width: 1180px) { .webhmi-stage-shell--split-side[data-v-99e73dd6] { grid-template-columns: minmax(0, 1fr); } .webhmi-split-divider[data-v-99e73dd6] { display: none; } .webhmi-stage-shell--split-side .webhmi-stage-panel[data-v-99e73dd6] { min-height: 18rem; } } @media (prefers-reduced-motion: reduce) { .webhmi-stage-shell[data-v-99e73dd6], .webhmi-stage-panel[data-v-99e73dd6], .webhmi-canvas[data-v-99e73dd6], .webhmi-element[data-v-99e73dd6], .webhmi-3d-machine[data-v-99e73dd6] { transition: none; } .webhmi-stage-panel.is-guided[data-v-99e73dd6]::after, .webhmi-element[data-v-99e73dd6], .webhmi-resize-handle[data-v-99e73dd6], .webhmi-3d-workbench[data-v-99e73dd6], .webhmi-3d-workbench.is-orbiting .webhmi-3d-machine[data-v-99e73dd6] { animation: none; } } .webhmi-floating-select[data-v-84b77a3e] { min-width: 0; width: 100%; } .webhmi-floating-select__trigger[data-v-84b77a3e] { display: flex; width: 100%; min-height: 2rem; align-items: center; justify-content: space-between; gap: 0.45rem; border-radius: 0.45rem; padding: 0.34rem 0.48rem; color: var(--webhmi-ink, #f8fafc); font-size: 0.74rem; font-weight: 820; text-align: left; } .webhmi-floating-select__trigger span[data-v-84b77a3e] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .webhmi-floating-select__trigger svg[data-v-84b77a3e] { width: 0.92rem; height: 0.92rem; flex: 0 0 auto; opacity: 0.82; transition: transform 240ms cubic-bezier(.16, 1, .3, 1); } .webhmi-floating-select__menu[data-v-84b77a3e] { border-color: rgba(230, 196, 251, 0.18); background: rgba(17, 24, 39, 0.9); box-shadow: 0 18px 42px rgba(2, 6, 23, 0.44), 0 0 24px rgba(20, 184, 166, 0.08); } .webhmi-floating-select__option[data-v-84b77a3e] { display: flex; min-height: 2.15rem; align-items: center; justify-content: space-between; gap: 0.75rem; border-radius: 0.5rem; color: var(--webhmi-ink, #f8fafc); cursor: pointer; padding: 0.46rem 0.55rem; font-size: 0.76rem; font-weight: 780; transition: background 180ms ease, color 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), box-shadow 220ms ease; } .webhmi-floating-select__option span[data-v-84b77a3e] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .webhmi-floating-select__option svg[data-v-84b77a3e] { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; color: var(--webhmi-teal, var(--color-button-Simulation-Green)); filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.35)); } .webhmi-floating-select__option[data-v-84b77a3e]:hover, .webhmi-floating-select__option.is-focused[data-v-84b77a3e] { background: rgba(255, 255, 255, 0.07); transform: translateY(-1px); } .webhmi-floating-select__option.is-selected[data-v-84b77a3e] { background: rgba(10, 95, 85, 0.28); box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.34); } .webhmi-floating-select__empty[data-v-84b77a3e] { color: var(--webhmi-muted, #94a3b8); padding: 0.46rem 0.55rem; font-size: 0.76rem; font-weight: 760; } .webhmi-topbar[data-v-970a0298] { gap: calc(var(--btn-scale, 1) * 0.85rem); min-height: calc(var(--btn-scale, 1) * 4rem); color: var(--webhmi-ink, var(--color-text-primary)); background: rgba(17, 24, 39, 0.84); border-bottom: 1px solid var(--webhmi-border, rgba(230, 196, 251, 0.16)); } .webhmi-header-actions[data-v-970a0298], .webhmi-project-strip[data-v-970a0298] { display: flex; align-items: center; } .webhmi-logo-link[data-v-970a0298] { display: inline-flex; flex: 0 0 auto; align-items: center; } .logo[data-v-970a0298] { font-size: calc(var(--btn-scale, 1) * 1.75rem); gap: calc(var(--btn-scale, 1) * 0.4rem); } .webhmi-project-picker span[data-v-970a0298] { color: var(--webhmi-muted, #94a3b8); font-size: 0.64rem; font-weight: 800; letter-spacing: 0; line-height: 1; text-transform: uppercase; } .webhmi-readonly-badge[data-v-970a0298] { color: #ef4444; font-size: 0.66rem; font-weight: 900; text-transform: uppercase; } .webhmi-storage-state[data-v-970a0298] { display: inline-flex; align-items: center; justify-content: center; min-height: 1.45rem; border-radius: 0.55rem; border: 1px solid rgba(20, 184, 166, 0.32); background: rgba(10, 95, 85, 0.18); color: #5eead4; padding: 0.25rem 0.55rem; font-size: 0.66rem; font-weight: 800; white-space: nowrap; } .webhmi-project-strip[data-v-970a0298] { flex: 1 1 auto; justify-content: center; gap: 0.7rem; min-width: 0; } .webhmi-project-picker[data-v-970a0298] { display: grid; grid-template-columns: auto minmax(9rem, 16rem); align-items: center; gap: 0.45rem; min-width: 0; } .webhmi-project-picker select[data-v-970a0298] { min-height: 2rem; min-width: 0; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.24)); border-radius: 0.45rem; background: var(--webhmi-panel-strong, #0f172a); color: var(--webhmi-ink, #e2e8f0); padding: 0.35rem 0.55rem; font-size: 0.78rem; font-weight: 750; } .webhmi-storage-state--saving[data-v-970a0298], .webhmi-storage-state--loading[data-v-970a0298] { border-color: rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.12); color: #fbbf24; } .webhmi-header-actions[data-v-970a0298] { flex: 0 0 auto; justify-content: flex-end; gap: 0.4rem; } .webhmi-icon-action[data-v-970a0298], .webhmi-close[data-v-970a0298] { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; border-radius: 0.45rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.22)); background: var(--webhmi-panel, #111827); color: var(--webhmi-ink, #e2e8f0); font-size: 0.74rem; font-weight: 850; line-height: 1; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 280ms ease; } .webhmi-icon-action[data-v-970a0298] { gap: 0.35rem; padding: 0.4rem 0.62rem; } .webhmi-icon-action[data-v-970a0298]:hover, .webhmi-close[data-v-970a0298]:hover { transform: translateY(-1px) scale(1.018); box-shadow: 0 12px 26px rgba(2, 6, 23, 0.24); } .webhmi-icon-action[data-v-970a0298]:active, .webhmi-close[data-v-970a0298]:active { transform: translateY(0) scale(0.97); } .webhmi-icon-action svg[data-v-970a0298], .webhmi-close svg[data-v-970a0298] { width: 0.9rem; height: 0.9rem; } .webhmi-icon-action--primary[data-v-970a0298] { border-color: rgba(59, 130, 246, 0.45); color: #f8fafc; } .webhmi-icon-action--publish[data-v-970a0298] { border-color: rgba(59, 130, 246, 0.48); color: #f8fafc; } .webhmi-close[data-v-970a0298] { width: 2rem; } @media (max-width: 1180px) { .webhmi-storage-state[data-v-970a0298] { display: none; } .webhmi-project-picker[data-v-970a0298] { grid-template-columns: minmax(8rem, 13rem); } .webhmi-project-picker span[data-v-970a0298] { display: none; } } @media (prefers-reduced-motion: reduce) { .webhmi-icon-action[data-v-970a0298], .webhmi-close[data-v-970a0298] { transition: none; } } .webhmi-left-panel[data-v-55b6e262] { display: flex; width: 19rem; min-width: 19rem; flex-direction: column; gap: 0.7rem; overflow: hidden; border-right: 1px solid var(--webhmi-border, rgba(230, 196, 251, 0.16)); background: var(--webhmi-panel-strong, #0f1722); color: var(--webhmi-ink, #e2e8f0); padding: 0.7rem; --workflow-accent: var(--webhmi-blue, #60a5fa); --workflow-success: var(--webhmi-teal, #5eead4); --workflow-warning: var(--webhmi-amber, #fbbf24); } .webhmi-section[data-v-55b6e262] { display: flex; min-height: 0; flex-direction: column; gap: 0.55rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); border-radius: 0.55rem; background: var(--webhmi-panel, #111a27); padding: 0.65rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); transition: border-color 240ms ease, background 240ms ease, box-shadow 280ms ease, opacity 220ms ease; } .webhmi-section--workflow[data-v-55b6e262] { flex: 1 1 auto; min-height: 0; } .webhmi-section.is-guided[data-v-55b6e262] { border-color: rgba(59, 130, 246, 0.34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 32px var(--webhmi-glow-blue, rgba(59, 130, 246, 0.16)); } .webhmi-section-heading[data-v-55b6e262], .webhmi-screen-actions[data-v-55b6e262], .webhmi-category-tabs[data-v-55b6e262] { display: flex; align-items: center; } .webhmi-section-heading[data-v-55b6e262] { justify-content: space-between; gap: 0.5rem; } .webhmi-section-heading span[data-v-55b6e262] { color: var(--webhmi-muted, #94a3b8); font-size: 0.68rem; font-weight: 900; text-transform: uppercase; } .webhmi-section-heading strong[data-v-55b6e262] { color: var(--webhmi-ink, #e2e8f0); font-size: 0.72rem; font-weight: 900; } .webhmi-section-heading button[data-v-55b6e262] { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 0.35rem; background: rgba(59, 130, 246, 0.16); color: #bfdbfe; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), background 220ms ease, box-shadow 260ms ease; } .webhmi-section-heading button[data-v-55b6e262]:hover, .webhmi-screen-actions button[data-v-55b6e262]:hover, .webhmi-category-tabs button[data-v-55b6e262]:hover { transform: translateY(-1px) scale(1.018); } .webhmi-section-heading button[data-v-55b6e262]:active, .webhmi-screen-actions button[data-v-55b6e262]:active, .webhmi-category-tabs button[data-v-55b6e262]:active { transform: translateY(0) scale(0.97); } .webhmi-section-heading svg[data-v-55b6e262], .webhmi-workflow-button svg[data-v-55b6e262] { width: 0.92rem; height: 0.92rem; } .webhmi-workflow[data-v-55b6e262] { display: grid; align-content: start; gap: 0.26rem; min-height: auto; margin: 0; overflow: visible; padding: 0; list-style: none; } .webhmi-workflow-button[data-v-55b6e262] { position: relative; display: grid; width: 100%; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: 0.38rem; min-height: 1.84rem; border-radius: 0.45rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); background: var(--webhmi-panel-strong, #0f172a); color: #cbd5e1; padding: 0.26rem 0.42rem; text-align: left; transform: translateZ(0); transition: transform 420ms cubic-bezier(.16, 1, .3, 1), border-color 260ms ease, background 260ms ease, box-shadow 360ms ease, color 220ms ease; overflow: hidden; } .webhmi-workflow-button[data-v-55b6e262]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 44%, transparent 72%); opacity: 0; transform: translateX(-110%); pointer-events: none; } .webhmi-workflow-button[data-v-55b6e262]:hover { transform: translateY(-1px) scale(1.008); border-color: var(--webhmi-border-strong, rgba(148, 163, 184, 0.26)); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22); } .webhmi-workflow-button[data-v-55b6e262]:active { transform: translateY(0) scale(0.985); } .webhmi-workflow-button span[data-v-55b6e262] { display: grid; width: 1.14rem; height: 1.14rem; place-items: center; border-radius: 999px; background: var(--webhmi-panel-soft, #1e293b); color: #cbd5e1; font-size: 0.62rem; font-weight: 900; transition: background 260ms ease, color 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1); } .webhmi-workflow-button strong[data-v-55b6e262] { overflow: hidden; font-size: 0.7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .webhmi-workflow-button.is-active[data-v-55b6e262] { border-color: rgba(59, 130, 246, 0.55); background: rgba(20, 35, 62, 0.92); color: #f8fafc; box-shadow: 0 12px 34px rgba(37, 99, 235, 0.2); transform: translateY(-1px) scale(1.015); } .webhmi-workflow-button.is-active[data-v-55b6e262]::after { animation: webhmi-highlight-sweep-55b6e262 820ms cubic-bezier(.16, 1, .3, 1); } .webhmi-workflow-button.is-active span[data-v-55b6e262] { background: var(--workflow-accent); color: #07111f; transform: scale(1.07); } .webhmi-workflow-button.has-warning svg[data-v-55b6e262] { color: var(--workflow-warning); animation: webhmi-warning-breathe-55b6e262 2200ms ease-in-out infinite; } .webhmi-workflow-button:not(.has-warning) svg[data-v-55b6e262] { color: var(--workflow-success); } .webhmi-workflow-button.is-complete span[data-v-55b6e262] { background: rgba(20, 184, 166, 0.18); color: #99f6e4; } .webhmi-screen-manager[data-v-55b6e262] { display: grid; gap: 0.45rem; } .webhmi-screen-picker[data-v-55b6e262], .webhmi-screen-name-field[data-v-55b6e262] { display: grid; gap: 0.22rem; min-width: 0; } .webhmi-screen-picker span[data-v-55b6e262], .webhmi-screen-name-field span[data-v-55b6e262] { color: var(--webhmi-muted, #94a3b8); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; } .webhmi-screen-picker select[data-v-55b6e262], .webhmi-screen-name-field input[data-v-55b6e262] { min-width: 0; min-height: 2rem; border-radius: 0.45rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); background: var(--webhmi-panel-strong, #0f172a); color: #f8fafc; padding: 0.34rem 0.48rem; font-size: 0.74rem; font-weight: 820; transition: border-color 220ms ease, box-shadow 260ms ease, background 220ms ease; } .webhmi-screen-picker > select[data-v-55b6e262] { display: none; } .webhmi-screen-picker select[data-v-55b6e262]:focus, .webhmi-screen-name-field input[data-v-55b6e262]:focus { outline: none; border-color: rgba(59, 130, 246, 0.48); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14); } .webhmi-screen-name-field input[data-v-55b6e262] { border-color: rgba(20, 184, 166, 0.34); background: rgba(10, 95, 85, 0.16); } .webhmi-screen-meta[data-v-55b6e262] { display: flex; justify-content: space-between; align-items: center; gap: 0.45rem; color: var(--webhmi-muted, #94a3b8); font-size: 0.64rem; font-weight: 850; } .webhmi-screen-actions[data-v-55b6e262] { flex: 1 1 auto; gap: 0.28rem; min-width: 0; } .webhmi-screen-actions button[data-v-55b6e262], .webhmi-category-tabs button[data-v-55b6e262] { min-height: 1.5rem; border-radius: 0.45rem; background: #172033; color: #cbd5e1; padding: 0.24rem 0.42rem; font-size: 0.6rem; font-weight: 850; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), background 220ms ease, color 220ms ease; } .webhmi-screen-actions button.danger[data-v-55b6e262] { color: #fecaca; } .webhmi-category-tabs[data-v-55b6e262] { flex-wrap: wrap; gap: 0.3rem; } @keyframes webhmi-highlight-sweep-55b6e262 { 0% { opacity: 0; transform: translateX(-110%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(110%); } } @keyframes webhmi-warning-breathe-55b6e262 { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); } 50% { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.24)); } } @media (prefers-reduced-motion: reduce) { .webhmi-workflow-button[data-v-55b6e262], .webhmi-workflow-button span[data-v-55b6e262], .webhmi-screen-picker select[data-v-55b6e262], .webhmi-screen-name-field input[data-v-55b6e262], .webhmi-screen-actions button[data-v-55b6e262], .webhmi-category-tabs button[data-v-55b6e262], .webhmi-section-heading button[data-v-55b6e262], .webhmi-section[data-v-55b6e262] { transition: none; } .webhmi-workflow-button[data-v-55b6e262]::after, .webhmi-workflow-button.has-warning svg[data-v-55b6e262] { animation: none; } } .webhmi-commandbar[data-v-e331d010] { display: flex; flex-direction: column; gap: 0.45rem; min-height: 6.5rem; overflow: hidden; border-bottom: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); background: var(--webhmi-panel, #111827); color: var(--webhmi-ink, #e2e8f0); padding: 0.55rem 0.75rem; } .webhmi-commandbar-row[data-v-e331d010] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-width: 0; width: 100%; } .webhmi-commandbar-row--tools[data-v-e331d010] { min-height: 2.25rem; border-top: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.1)); padding-top: 0.45rem; } .webhmi-project-config[data-v-e331d010], .webhmi-view-controls[data-v-e331d010], .webhmi-screen-context[data-v-e331d010], .webhmi-tool-label[data-v-e331d010] { position: relative; display: flex; align-items: center; min-width: 0; } .webhmi-project-config.is-guided[data-v-e331d010], .webhmi-view-controls.is-guided[data-v-e331d010], .webhmi-screen-context.is-guided[data-v-e331d010], .webhmi-tool-label.is-guided[data-v-e331d010] { animation: webhmi-context-lift-e331d010 560ms cubic-bezier(.16, 1, .3, 1); } .webhmi-project-config.is-guided[data-v-e331d010]::after, .webhmi-view-controls.is-guided[data-v-e331d010]::after, .webhmi-screen-context.is-guided[data-v-e331d010]::after, .webhmi-tool-label.is-guided[data-v-e331d010]::after { content: ''; position: absolute; inset: -0.35rem; z-index: -1; border-radius: 0.65rem; border: 1px solid rgba(96, 165, 250, 0.32); background: rgba(59, 130, 246, 0.08); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 0 14px 34px rgba(37, 99, 235, 0.16); animation: webhmi-context-pulse-e331d010 2100ms ease-in-out infinite; pointer-events: none; } .webhmi-project-config[data-v-e331d010] { flex: 1 1 auto; gap: 0.55rem; min-width: 0; } .webhmi-field[data-v-e331d010] { display: flex; flex: 0 1 9rem; min-width: 7.5rem; flex-direction: column; gap: 0.2rem; } .webhmi-field--name[data-v-e331d010] { flex-basis: 16rem; min-width: 12rem; } .webhmi-field--resolution[data-v-e331d010] { flex-basis: 15rem; min-width: 12rem; } .webhmi-field--short[data-v-e331d010] { flex-basis: 6.6rem; min-width: 6.6rem; } .webhmi-field span[data-v-e331d010] { color: var(--webhmi-muted, #94a3b8); font-size: 0.62rem; font-weight: 900; line-height: 1; text-transform: uppercase; } .webhmi-field input[data-v-e331d010], .webhmi-field select[data-v-e331d010] { min-height: 2rem; min-width: 0; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.22)); border-radius: 0.4rem; background: var(--webhmi-panel-strong, #0f172a); color: var(--webhmi-ink, #e2e8f0); padding: 0.3rem 0.45rem; font-size: 0.74rem; font-weight: 760; transition: border-color 220ms ease, box-shadow 260ms ease, background 220ms ease; } .webhmi-field input[data-v-e331d010]:focus, .webhmi-field select[data-v-e331d010]:focus { outline: none; border-color: rgba(236, 72, 153, 0.46); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16), 0 0 22px rgba(236, 72, 153, 0.08); } .webhmi-view-controls[data-v-e331d010] { gap: 0.32rem; flex: 0 0 auto; } .webhmi-view-mode-cluster[data-v-e331d010] { --mode-padding: 0.2rem; --mode-radius: 0.55rem; --mode-item-width: 4.35rem; --mode-step: calc(var(--mode-item-width) + 0.12rem); --mode-active-index: 0; position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.12rem; overflow: hidden; border: 1px solid rgba(230, 196, 251, 0.16); border-radius: var(--mode-radius); background: rgba(15, 23, 42, 0.62); padding: var(--mode-padding); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 28px rgba(2, 6, 23, 0.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(0); transition: transform 320ms cubic-bezier(.16, 1, .3, 1), border-color 260ms ease, box-shadow 360ms ease; } .webhmi-view-mode-cluster[data-v-e331d010]::before { content: ''; position: absolute; top: var(--mode-padding); bottom: var(--mode-padding); left: var(--mode-padding); z-index: 0; width: var(--mode-item-width); border-radius: calc(var(--mode-radius) - 0.12rem); background: rgba(20, 35, 62, 0.94); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(37, 99, 235, 0.16), 0 0 18px rgba(59, 130, 246, 0.12); transform: translateX(calc(var(--mode-active-index, 0) * var(--mode-step))); transition: transform 520ms cubic-bezier(.16, 1, .3, 1), width 260ms ease, box-shadow 260ms ease, background 260ms ease; } .webhmi-view-mode-cluster.is-pip[data-v-e331d010] { border-color: rgba(20, 184, 166, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 18px 34px rgba(2, 6, 23, 0.2); transform: translateX(-0.36rem); } .webhmi-view-mode-cluster.is-pip[data-v-e331d010]::before { background: rgba(10, 95, 85, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 10px 24px rgba(20, 184, 166, 0.18), 0 0 20px rgba(20, 184, 166, 0.18); } .webhmi-tool-label[data-v-e331d010] { flex-direction: column; align-items: flex-start; gap: 0.1rem; } .webhmi-tool-label span[data-v-e331d010] { color: var(--webhmi-muted, #94a3b8); font-size: 0.62rem; font-weight: 900; line-height: 1; text-transform: uppercase; } .webhmi-tool-label strong[data-v-e331d010] { overflow: hidden; max-width: 24rem; color: #f8fafc; font-size: 0.76rem; font-weight: 850; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .webhmi-mode-button[data-v-e331d010], .webhmi-square-button[data-v-e331d010] { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; border-radius: 0.4rem; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.18)); background: var(--webhmi-panel-strong, #0f172a); color: #cbd5e1; font-size: 0.72rem; font-weight: 850; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 280ms ease, color 220ms ease; } .webhmi-mode-button[data-v-e331d010]:hover:not(:disabled), .webhmi-square-button[data-v-e331d010]:hover:not(:disabled) { transform: translateY(-1px) scale(1.018); border-color: rgba(148, 163, 184, 0.32); box-shadow: 0 10px 24px rgba(2, 6, 23, 0.22); } .webhmi-mode-button[data-v-e331d010]:active:not(:disabled), .webhmi-square-button[data-v-e331d010]:active:not(:disabled) { transform: translateY(0) scale(0.972); } .webhmi-mode-button[data-v-e331d010] { position: relative; z-index: 1; gap: 0.32rem; width: var(--mode-item-width); border: 0; padding: 0.35rem 0.55rem; background: transparent; box-shadow: none; } .webhmi-mode-button.is-active[data-v-e331d010], .webhmi-mode-button[aria-pressed='true'][data-v-e331d010] { color: #f8fafc; text-shadow: 0 0 18px rgba(255, 255, 255, 0.18); } .webhmi-mode-button--swap[data-v-e331d010] { width: 0; min-width: 0; opacity: 0; overflow: hidden; padding-right: 0; padding-left: 0; pointer-events: none; transform: translateX(-0.4rem) scale(0.94); transition: width 420ms cubic-bezier(.16, 1, .3, 1) 190ms, min-width 420ms cubic-bezier(.16, 1, .3, 1) 190ms, padding 420ms cubic-bezier(.16, 1, .3, 1) 190ms, opacity 260ms ease 260ms, transform 420ms cubic-bezier(.16, 1, .3, 1) 220ms, border-color 220ms ease, background 220ms ease, box-shadow 280ms ease, color 220ms ease; } .webhmi-view-mode-cluster.is-pip .webhmi-mode-button--swap[data-v-e331d010] { width: var(--mode-item-width); min-width: var(--mode-item-width); opacity: 1; padding: 0.35rem 0.55rem; pointer-events: auto; transform: translateX(0) scale(1); } .webhmi-mode-button--swap[data-v-e331d010]:disabled { cursor: not-allowed; } .webhmi-square-button[data-v-e331d010] { width: 2rem; } .webhmi-square-button[data-v-e331d010]:disabled { cursor: not-allowed; opacity: 0.42; } .webhmi-square-button.danger[data-v-e331d010] { color: #fecaca; } .webhmi-mode-button svg[data-v-e331d010], .webhmi-square-button svg[data-v-e331d010] { width: 0.9rem; height: 0.9rem; } .webhmi-screen-context[data-v-e331d010] { flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 0.12rem; text-align: right; } .webhmi-screen-context strong[data-v-e331d010] { max-width: 12rem; overflow: hidden; color: #f8fafc; font-size: 0.82rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-screen-context span[data-v-e331d010], .webhmi-screen-context small[data-v-e331d010] { color: var(--webhmi-muted, #94a3b8); font-size: 0.66rem; font-weight: 800; } .webhmi-screen-context small.has-errors[data-v-e331d010] { color: #fca5a5; } @media (max-width: 1180px) { .webhmi-field[data-v-e331d010] { min-width: 6.8rem; } .webhmi-field--name[data-v-e331d010] { flex-basis: 13rem; } .webhmi-field--resolution[data-v-e331d010] { flex-basis: 12rem; } .webhmi-mode-button span[data-v-e331d010] { display: none; } .webhmi-view-mode-cluster[data-v-e331d010] { --mode-item-width: 2rem; --mode-step: calc(var(--mode-item-width) + 0.12rem); } .webhmi-mode-button[data-v-e331d010] { width: 2rem; padding: 0.35rem; } .webhmi-mode-button--swap[data-v-e331d010] { width: 0; min-width: 0; padding-right: 0; padding-left: 0; } .webhmi-view-mode-cluster.is-pip .webhmi-mode-button--swap[data-v-e331d010] { width: var(--mode-item-width); min-width: var(--mode-item-width); padding: 0.35rem; } } @keyframes webhmi-context-lift-e331d010 { 0% { transform: translateY(4px) scale(0.99); filter: saturate(0.9); } 100% { transform: translateY(0) scale(1); filter: saturate(1); } } @keyframes webhmi-context-pulse-e331d010 { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .webhmi-project-config.is-guided[data-v-e331d010], .webhmi-view-controls.is-guided[data-v-e331d010], .webhmi-screen-context.is-guided[data-v-e331d010], .webhmi-tool-label.is-guided[data-v-e331d010], .webhmi-project-config.is-guided[data-v-e331d010]::after, .webhmi-view-controls.is-guided[data-v-e331d010]::after, .webhmi-screen-context.is-guided[data-v-e331d010]::after, .webhmi-tool-label.is-guided[data-v-e331d010]::after, .webhmi-view-mode-cluster[data-v-e331d010], .webhmi-view-mode-cluster[data-v-e331d010]::before, .webhmi-mode-button[data-v-e331d010], .webhmi-square-button[data-v-e331d010], .webhmi-field input[data-v-e331d010], .webhmi-field select[data-v-e331d010] { animation: none; transition: none; } } .webhmi-element-library[data-v-aa5b64fd] { display: grid; grid-template-columns: minmax(14rem, 0.58fr) minmax(0, 1fr); gap: 0.65rem; align-items: center; min-height: 5.4rem; border-bottom: 1px solid var(--webhmi-border, rgba(230, 196, 251, 0.16)); background: var(--webhmi-panel, rgba(17, 24, 39, 0.92)); padding: 0.55rem 0.75rem; } .webhmi-element-library.is-contextual[data-v-aa5b64fd] { grid-template-columns: minmax(0, 1fr); min-height: 3.2rem; } .webhmi-element-library__header[data-v-aa5b64fd] { display: flex; min-width: 0; flex-direction: column; gap: 0.42rem; } .webhmi-element-library__header div[data-v-aa5b64fd]:first-child { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; } .webhmi-element-library__header span[data-v-aa5b64fd] { color: var(--webhmi-pink, #ec4899); font-size: 0.64rem; font-weight: 950; text-transform: uppercase; } .webhmi-element-library__header strong[data-v-aa5b64fd] { overflow: hidden; color: var(--webhmi-ink, #f8fafc); font-size: 0.78rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-element-library__tabs[data-v-aa5b64fd], .webhmi-element-library__items[data-v-aa5b64fd] { min-width: 0; gap: 0.35rem; padding-bottom: 0.08rem; } .webhmi-element-library__tabs[data-v-aa5b64fd] { --segment-count: 5; --active-index: 0; --segment-padding: 0.2rem; --segment-radius: 0.5rem; display: grid; grid-template-columns: repeat(var(--segment-count), minmax(0, 1fr)); gap: 0.08rem; padding: var(--segment-padding); } .webhmi-element-library__items[data-v-aa5b64fd] { display: flex; overflow-x: auto; } .webhmi-element-library__tabs button[data-v-aa5b64fd] { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 1.75rem; border-radius: 0.45rem; border: 1px solid transparent; background: transparent; color: #cbd5e1; padding: 0.32rem 0.44rem; font-size: 0.66rem; font-weight: 850; transition: transform 280ms cubic-bezier(.16, 1, .3, 1), background 200ms ease, color 200ms ease; } .webhmi-element-library__tabs button.is-active[data-v-aa5b64fd] { color: #f8fafc; } .webhmi-element-library__tabs button[data-v-aa5b64fd]:hover, .webhmi-element-library__item[data-v-aa5b64fd]:hover { transform: translateY(-1px); } .webhmi-element-library__item[data-v-aa5b64fd] { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 0.38rem; min-width: 6.4rem; min-height: 3.4rem; border-radius: 0.55rem; border: 1px solid var(--webhmi-border, rgba(230, 196, 251, 0.16)); background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.1), transparent 60%), var(--webhmi-panel-strong, #0f172a); color: #dbeafe; padding: 0.42rem 0.58rem; transition: transform 300ms cubic-bezier(.16, 1, .3, 1), border-color 200ms ease, box-shadow 260ms ease; } .webhmi-element-library__item[data-v-aa5b64fd]:hover { border-color: rgba(96, 165, 250, 0.36); box-shadow: 0 12px 24px rgba(2, 6, 23, 0.22); } .webhmi-element-library__item[data-v-aa5b64fd]:active, .webhmi-element-library__tabs button[data-v-aa5b64fd]:active { transform: translateY(0) scale(0.97); } .webhmi-element-library__item svg[data-v-aa5b64fd] { width: 0.95rem; height: 0.95rem; } .webhmi-element-library__item span[data-v-aa5b64fd] { max-width: 7.5rem; overflow: hidden; font-size: 0.7rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { .webhmi-element-library[data-v-aa5b64fd] { grid-template-columns: minmax(0, 1fr); } } .webhmi-element-library--inspector[data-v-aa5b64fd] { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 0.65rem; border: 0; background: transparent; padding: 0; } .webhmi-element-library--inspector.is-contextual[data-v-aa5b64fd] { min-height: 0; } .webhmi-element-library--inspector .webhmi-element-library__header[data-v-aa5b64fd] { gap: 0.55rem; } .webhmi-element-library--inspector .webhmi-element-library__tabs[data-v-aa5b64fd] { overflow: hidden; } .webhmi-element-library--inspector .webhmi-element-library__items[data-v-aa5b64fd] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; overflow-y: auto; padding: 0.05rem; } .webhmi-element-library--inspector .webhmi-element-library__item[data-v-aa5b64fd] { min-width: 0; min-height: 4.25rem; flex-direction: column; gap: 0.32rem; } @media (prefers-reduced-motion: reduce) { .webhmi-element-library__tabs button[data-v-aa5b64fd], .webhmi-element-library__item[data-v-aa5b64fd] { transition: none; } } .webhmi-asset-library[data-v-f3a57784] { display: flex; flex-direction: column; gap: 0.65rem; min-height: 0; } .webhmi-asset-library__header[data-v-f3a57784], .webhmi-asset-actions[data-v-f3a57784] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .webhmi-asset-library__header div[data-v-f3a57784] { display: flex; min-width: 0; flex-direction: column; gap: 0.12rem; } .webhmi-asset-library__header span[data-v-f3a57784], .webhmi-asset-meta span[data-v-f3a57784], .webhmi-asset-meta small[data-v-f3a57784] { color: var(--webhmi-muted, #94a3b8); font-size: 0.63rem; font-weight: 850; } .webhmi-asset-library__header strong[data-v-f3a57784] { color: var(--webhmi-ink, #f8fafc); font-size: 0.82rem; font-weight: 950; } .webhmi-asset-upload[data-v-f3a57784] { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; cursor: pointer; padding: 0.35rem 0.55rem; } .webhmi-asset-upload input[data-v-f3a57784] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .webhmi-asset-upload svg[data-v-f3a57784] { width: 0.9rem; height: 0.9rem; } .webhmi-asset-dropzone[data-v-f3a57784] { display: grid; min-height: 5.8rem; place-items: center; gap: 0.18rem; border: 1px dashed rgba(96, 165, 250, 0.42); border-radius: 0.55rem; background: rgba(15, 23, 42, 0.72); color: #dbeafe; text-align: center; } .webhmi-asset-dropzone svg[data-v-f3a57784] { width: 1.2rem; height: 1.2rem; } .webhmi-asset-dropzone span[data-v-f3a57784] { font-size: 0.76rem; font-weight: 900; } .webhmi-asset-dropzone small[data-v-f3a57784] { color: #94a3b8; font-size: 0.62rem; font-weight: 800; } .webhmi-asset-dropzone.is-uploading[data-v-f3a57784] { border-color: rgba(20, 184, 166, 0.72); box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.18), 0 14px 30px rgba(20, 184, 166, 0.08); } .webhmi-asset-grid[data-v-f3a57784] { display: flex; min-height: 0; flex-direction: column; gap: 0.55rem; } .webhmi-asset-card[data-v-f3a57784] { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: 0.6rem; border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 0.5rem; background: rgba(15, 23, 42, 0.68); padding: 0.5rem; } .webhmi-asset-thumb[data-v-f3a57784] { display: grid; width: 4rem; height: 3.4rem; overflow: hidden; place-items: center; border-radius: 0.38rem; background: #0f172a; } .webhmi-asset-thumb img[data-v-f3a57784] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .webhmi-asset-thumb svg[data-v-f3a57784] { width: 1.35rem; height: 1.35rem; color: #93c5fd; } .webhmi-asset-meta[data-v-f3a57784] { display: flex; min-width: 0; flex-direction: column; gap: 0.16rem; } .webhmi-asset-meta strong[data-v-f3a57784] { overflow: hidden; color: #f8fafc; font-size: 0.76rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-asset-meta small.is-ready[data-v-f3a57784] { color: #5eead4; } .webhmi-asset-meta small.is-failed[data-v-f3a57784] { color: #fca5a5; } .webhmi-asset-actions[data-v-f3a57784] { grid-column: 1 / -1; } .webhmi-asset-actions button[data-v-f3a57784] { min-height: 1.8rem; flex: 1 1 0; font-size: 0.68rem; font-weight: 850; } .webhmi-empty-assets[data-v-f3a57784] { display: flex; flex-direction: column; gap: 0.2rem; border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 0.5rem; background: rgba(15, 23, 42, 0.52); padding: 0.75rem; } .webhmi-empty-assets strong[data-v-f3a57784] { color: #f8fafc; font-size: 0.78rem; font-weight: 900; } .webhmi-empty-assets span[data-v-f3a57784] { color: #94a3b8; font-size: 0.7rem; font-weight: 760; line-height: 1.35; } .webhmi-inspector[data-v-8972d54a] { display: flex; width: 23rem; max-width: 23rem; min-width: 23rem; flex-direction: column; overflow: hidden; border-left: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.16)); background: var(--webhmi-panel-strong, #0f1722); color: var(--webhmi-ink, #e2e8f0); padding: 0.7rem; } .webhmi-inspector-tabs[data-v-8972d54a] { --segment-count: 4; --active-index: 0; --segment-padding: 0.22rem; --segment-radius: 0.62rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.12rem; margin-bottom: 0.6rem; padding: var(--segment-padding); } .webhmi-inspector-tabs button[data-v-8972d54a], .webhmi-data-tabs button[data-v-8972d54a], .webhmi-inline-actions button[data-v-8972d54a], .webhmi-import-button[data-v-8972d54a], .webhmi-tag-row button[data-v-8972d54a], .webhmi-inspector-heading button[data-v-8972d54a] { min-height: 1.8rem; border-radius: 0.38rem; border: 1px solid transparent; background: transparent; color: #cbd5e1; padding: 0.35rem 0.45rem; font-size: 0.68rem; font-weight: 850; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), background 220ms ease, color 220ms ease, box-shadow 260ms ease; } .webhmi-inspector-tabs button[data-v-8972d54a], .webhmi-data-tabs button[data-v-8972d54a] { display: inline-flex; align-items: center; justify-content: center; gap: 0.34rem; } .webhmi-inspector-tabs button.is-active[data-v-8972d54a] { color: #f8fafc; } .webhmi-data-tabs[data-v-8972d54a] { --segment-count: 2; --active-index: 0; --segment-padding: 0.22rem; --segment-radius: 0.55rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.12rem; padding: var(--segment-padding); } .webhmi-data-tabs button[data-v-8972d54a] { min-height: 1.7rem; border-radius: 0.35rem; color: #cbd5e1; font-size: 0.68rem; font-weight: 850; } .webhmi-data-tabs button.is-active[data-v-8972d54a] { color: #f8fafc; } .webhmi-inspector-tabs button[data-v-8972d54a]:hover, .webhmi-data-tabs button[data-v-8972d54a]:hover, .webhmi-inline-actions button[data-v-8972d54a]:hover, .webhmi-import-button[data-v-8972d54a]:hover, .webhmi-tag-row button[data-v-8972d54a]:hover:not(:disabled), .webhmi-inspector-heading button[data-v-8972d54a]:hover { transform: translateY(-1px) scale(1.015); } .webhmi-inspector-tabs button[data-v-8972d54a]:active, .webhmi-data-tabs button[data-v-8972d54a]:active, .webhmi-inline-actions button[data-v-8972d54a]:active, .webhmi-import-button[data-v-8972d54a]:active, .webhmi-tag-row button[data-v-8972d54a]:active:not(:disabled), .webhmi-inspector-heading button[data-v-8972d54a]:active { transform: translateY(0) scale(0.97); } .webhmi-inspector-body[data-v-8972d54a] { position: relative; display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: 0.65rem; overflow-y: auto; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.14)); border-radius: 0.55rem; background: var(--webhmi-panel, #111a27); padding: 0.7rem; transition: border-color 260ms ease, box-shadow 340ms ease, background 260ms ease; } .webhmi-inspector-body.is-guided[data-v-8972d54a] { border-color: rgba(236, 72, 153, 0.28); background: var(--webhmi-panel, #111a27); box-shadow: 0 18px 42px rgba(37, 99, 235, 0.11), 0 10px 28px rgba(236, 72, 153, 0.08); } .webhmi-inspector-body.is-guided[data-v-8972d54a]::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(96, 165, 250, 0.16); animation: webhmi-inspector-focus-8972d54a 2200ms ease-in-out infinite; pointer-events: none; } .webhmi-inspector-heading[data-v-8972d54a] { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .webhmi-inspector-heading span[data-v-8972d54a] { color: var(--webhmi-muted, #94a3b8); font-size: 0.66rem; font-weight: 900; text-transform: uppercase; } .webhmi-inspector-heading strong[data-v-8972d54a] { overflow: hidden; color: #f8fafc; font-size: 0.82rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .webhmi-property-field[data-v-8972d54a] { display: flex; flex-direction: column; gap: 0.22rem; } .webhmi-property-field span[data-v-8972d54a] { color: var(--webhmi-muted, #94a3b8); font-size: 0.62rem; font-weight: 900; text-transform: uppercase; } .webhmi-property-field input[data-v-8972d54a], .webhmi-property-field select[data-v-8972d54a], .webhmi-tag-row input[data-v-8972d54a], .webhmi-tag-row select[data-v-8972d54a] { min-height: 2rem; min-width: 0; border: 1px solid var(--webhmi-border, rgba(148, 163, 184, 0.22)); border-radius: 0.4rem; background: var(--webhmi-panel-strong, #0f172a); color: var(--webhmi-ink, #e2e8f0); padding: 0.3rem 0.45rem; font-size: 0.74rem; font-weight: 760; transition: border-color 220ms ease, box-shadow 260ms ease, background 220ms ease; } .webhmi-property-field input[data-v-8972d54a]:focus, .webhmi-property-field select[data-v-8972d54a]:focus, .webhmi-tag-row input[data-v-8972d54a]:focus, .webhmi-tag-row select[data-v-8972d54a]:focus { outline: none; border-color: rgba(96, 165, 250, 0.62); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); } .webhmi-property-grid[data-v-8972d54a] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .webhmi-property-grid--triple[data-v-8972d54a] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .webhmi-inspector-heading--sub[data-v-8972d54a] { margin-top: 0.2rem; padding-top: 0.3rem; border-top: 1px solid rgba(148, 163, 184, 0.14); } .webhmi-inline-actions[data-v-8972d54a] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; } .webhmi-inline-actions .danger[data-v-8972d54a] { color: #fecaca; } .webhmi-empty-panel[data-v-8972d54a], .webhmi-valid-panel[data-v-8972d54a], .webhmi-binding-card[data-v-8972d54a], .webhmi-issue[data-v-8972d54a] { display: flex; flex-direction: column; gap: 0.25rem; border-radius: 0.5rem; padding: 0.75rem; } .webhmi-empty-panel[data-v-8972d54a] { border: 1px dashed var(--webhmi-border-strong, rgba(148, 163, 184, 0.28)); background: var(--webhmi-panel-strong, #0f172a); } .webhmi-valid-panel[data-v-8972d54a], .webhmi-binding-card[data-v-8972d54a] { border: 1px solid rgba(20, 184, 166, 0.26); background: rgba(20, 184, 166, 0.08); } .webhmi-empty-panel strong[data-v-8972d54a], .webhmi-valid-panel strong[data-v-8972d54a], .webhmi-binding-card strong[data-v-8972d54a] { color: #f8fafc; font-size: 0.82rem; font-weight: 900; } .webhmi-empty-panel span[data-v-8972d54a], .webhmi-valid-panel span[data-v-8972d54a], .webhmi-binding-card span[data-v-8972d54a], .webhmi-binding-card small[data-v-8972d54a] { color: var(--webhmi-muted, #94a3b8); font-size: 0.72rem; font-weight: 700; line-height: 1.35; } .webhmi-tag-table[data-v-8972d54a] { display: grid; gap: 0.45rem; min-height: 0; overflow-y: auto; } .webhmi-tag-row[data-v-8972d54a] { display: grid; grid-template-columns: minmax(0, 1fr) 6.2rem 3.6rem; gap: 0.35rem; border-radius: 0.45rem; background: var(--webhmi-panel-strong, #0f172a); padding: 0.45rem; animation: webhmi-row-in-8972d54a 420ms cubic-bezier(.16, 1, .3, 1); } .webhmi-tag-row small[data-v-8972d54a] { grid-column: 1 / -1; color: var(--webhmi-muted, #94a3b8); font-size: 0.65rem; font-weight: 750; } .webhmi-tag-row button[data-v-8972d54a]:disabled { cursor: not-allowed; opacity: 0.42; } .webhmi-issue[data-v-8972d54a] { border: 1px solid rgba(245, 158, 11, 0.28); background: rgba(245, 158, 11, 0.1); } .webhmi-issue--error[data-v-8972d54a] { border-color: rgba(239, 68, 68, 0.32); background: rgba(239, 68, 68, 0.1); } .webhmi-issue strong[data-v-8972d54a] { color: #fbbf24; font-size: 0.64rem; font-weight: 950; text-transform: uppercase; } .webhmi-issue--error strong[data-v-8972d54a] { color: #fca5a5; } .webhmi-issue span[data-v-8972d54a] { color: #e2e8f0; font-size: 0.74rem; font-weight: 760; line-height: 1.35; } .webhmi-inspector-tab-enter-active[data-v-8972d54a], .webhmi-inspector-tab-leave-active[data-v-8972d54a] { transition: opacity 230ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1), filter 280ms ease; } .webhmi-inspector-tab-enter-from[data-v-8972d54a] { opacity: 0; transform: translateX(10px) scale(0.99); filter: blur(8px); } .webhmi-inspector-tab-leave-to[data-v-8972d54a] { opacity: 0; transform: translateX(-8px) scale(0.99); filter: blur(4px); } @keyframes webhmi-inspector-focus-8972d54a { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } @keyframes webhmi-row-in-8972d54a { 0% { opacity: 0; transform: translateY(8px) scale(0.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .webhmi-inspector-tabs button[data-v-8972d54a], .webhmi-data-tabs button[data-v-8972d54a], .webhmi-inline-actions button[data-v-8972d54a], .webhmi-import-button[data-v-8972d54a], .webhmi-tag-row button[data-v-8972d54a], .webhmi-inspector-heading button[data-v-8972d54a], .webhmi-property-field input[data-v-8972d54a], .webhmi-property-field select[data-v-8972d54a], .webhmi-tag-row input[data-v-8972d54a], .webhmi-tag-row select[data-v-8972d54a], .webhmi-inspector-tab-enter-active[data-v-8972d54a], .webhmi-inspector-tab-leave-active[data-v-8972d54a] { transition: none; } .webhmi-inspector-body.is-guided[data-v-8972d54a]::before, .webhmi-tag-row[data-v-8972d54a] { animation: none; } } .webhmi-status-bar[data-v-1483ee48] { display: flex; align-items: stretch; justify-content: space-between; gap: calc(var(--btn-scale, 1) * 0.75rem); min-height: calc(var(--btn-scale, 1) * 3.4rem); padding: calc(var(--btn-scale, 1) * 0.5rem) calc(var(--btn-scale, 1) * 0.75rem); border-top: 1px solid var(--webhmi-border, rgba(255, 255, 255, 0.08)); background: var(--webhmi-panel-strong, #0f1722); color: var(--color-text-secondary); } .webhmi-step-status[data-v-1483ee48] { display: flex; flex-direction: column; justify-content: center; gap: 0.28rem; min-width: 0; flex: 1 1 auto; } .webhmi-step-header[data-v-1483ee48] { display: flex; align-items: center; gap: 0.45rem; min-width: 0; } .webhmi-step-status p[data-v-1483ee48] { margin: 0; overflow: hidden; color: var(--webhmi-muted, var(--color-text-secondary)); font-size: calc(var(--btn-scale, 1) * 0.74rem); font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .webhmi-step-kicker[data-v-1483ee48] { color: var(--webhmi-pink, var(--color-accent)); font-size: calc(var(--btn-scale, 1) * 0.64rem); font-weight: 900; text-transform: uppercase; white-space: nowrap; } .webhmi-step-status strong[data-v-1483ee48] { color: var(--webhmi-ink, var(--color-text-primary)); font-size: calc(var(--btn-scale, 1) * 0.78rem); font-weight: 950; white-space: nowrap; } .webhmi-step-status small[data-v-1483ee48] { border-radius: 0.45rem; border: 1px solid rgba(244, 63, 94, 0.34); background: rgba(244, 63, 94, 0.12); color: #fecaca; padding: 0.12rem 0.42rem; font-size: calc(var(--btn-scale, 1) * 0.62rem); font-weight: 900; white-space: nowrap; } .webhmi-status-controls[data-v-1483ee48] { display: inline-flex; flex: 0 0 auto; align-items: center; align-self: center; gap: calc(var(--btn-scale, 1) * 0.35rem); min-width: 0; } .webhmi-status-pill[data-v-1483ee48] { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--btn-scale, 1) * 1.55rem); border-radius: 0.45rem; border: 1px solid var(--webhmi-border, rgba(255, 255, 255, 0.12)); background: rgba(15, 23, 42, 0.55); color: var(--webhmi-ink, var(--color-text-primary)); font-size: calc(var(--btn-scale, 1) * 0.68rem); font-weight: 850; line-height: 1; transition: transform 340ms cubic-bezier(.16, 1, .3, 1), border-color 220ms ease, background 220ms ease, box-shadow 280ms ease; } .webhmi-status-pill[data-v-1483ee48]:hover { transform: translateY(-1px) scale(1.018); box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22); } .webhmi-status-pill[data-v-1483ee48]:active { transform: translateY(0) scale(0.97); } .webhmi-status-pill[data-v-1483ee48] { padding: 0.3rem 0.6rem; } .webhmi-status-pill--active[data-v-1483ee48] { border-color: rgba(20, 184, 166, 0.45); background: rgba(20, 184, 166, 0.14); color: var(--color-button-Simulation-Green); } .webhmi-status-value[data-v-1483ee48] { color: var(--color-text-secondary); font-size: calc(var(--btn-scale, 1) * 0.68rem); font-weight: 750; white-space: nowrap; } .webhmi-status-value--notice[data-v-1483ee48] { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1180px) { .webhmi-status-value--notice[data-v-1483ee48] { display: none; } } @media (prefers-reduced-motion: reduce) { .webhmi-status-pill[data-v-1483ee48] { transition: none; } } .webhmi-shell[data-v-c97949af], .webhmi-workspace[data-v-c97949af] { width: 100%; height: 100%; } .webhmi-shell[data-v-c97949af] { --webhmi-ink: var(--color-text-primary, #f9fafb); --webhmi-muted: var(--color-text-secondary, #afb3bc); --webhmi-blue: var(--color-accent, #3b82f6); --webhmi-pink: var(--color-accent-contrast, #ec4899); --webhmi-amber: var(--color-button-header-Contrast-Yellow, #ffc300); --webhmi-teal: var(--color-button-Simulation-Green, #14b8a6); --webhmi-red: var(--color-action-red, #f43f5e); --webhmi-focus-ring: 0 0 0 2px color-mix(in srgb, var(--webhmi-blue) 18%, transparent), 0 0 0 4px color-mix(in srgb, var(--webhmi-pink) 18%, transparent); --webhmi-action-ease: cubic-bezier(.16, 1, .3, 1); background: radial-gradient(circle at 18% 8%, var(--webhmi-glow-blue), transparent 30%), radial-gradient(circle at 82% 0%, var(--webhmi-glow-pink), transparent 28%), linear-gradient(180deg, var(--webhmi-panel-strong), var(--webhmi-bg)); } .webhmi-shell[data-v-c97949af] button, .webhmi-shell[data-v-c97949af] select, .webhmi-shell[data-v-c97949af] input { font-family: inherit; } .webhmi-shell[data-v-c97949af] button { -webkit-tap-highlight-color: transparent; } .webhmi-shell[data-v-c97949af] button:not(:disabled) { cursor: pointer; } .webhmi-shell[data-v-c97949af] button:focus-visible, .webhmi-shell[data-v-c97949af] select:focus-visible, .webhmi-shell[data-v-c97949af] input:focus-visible { outline: none; box-shadow: var(--webhmi-focus-ring); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--webhmi-border); background: color-mix(in srgb, var(--webhmi-panel) 78%, transparent); color: var(--webhmi-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(2, 6, 23, 0.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0); transition: transform 360ms var(--webhmi-action-ease), border-color 220ms ease, background 220ms ease, box-shadow 300ms ease, color 180ms ease; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(255, 255, 255, 0.08); opacity: 0; transition: opacity 260ms ease; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control::after { content: ''; position: absolute; top: -80%; bottom: -80%; left: -70%; width: 52%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent); opacity: 0; transform: translateX(-120%) rotate(12deg); pointer-events: none; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control:hover:not(:disabled) { transform: translateY(-1px) scale(1.012); border-color: var(--webhmi-border-strong); background: color-mix(in srgb, var(--webhmi-panel-soft) 88%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 32px rgba(2, 6, 23, 0.26), 0 0 18px color-mix(in srgb, var(--webhmi-blue) 10%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control:hover:not(:disabled)::before, .webhmi-shell[data-v-c97949af] .webhmi-glass-control.is-active::before, .webhmi-shell[data-v-c97949af] .webhmi-glass-control[aria-pressed='true']::before { opacity: 0.2; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control:hover:not(:disabled)::after, .webhmi-shell[data-v-c97949af] .webhmi-glass-control.is-active::after, .webhmi-shell[data-v-c97949af] .webhmi-glass-control[aria-pressed='true']::after { animation: webhmi-glass-sheen-c97949af 760ms var(--webhmi-action-ease); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control:active:not(:disabled) { transform: translateY(0) scale(0.968); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px rgba(2, 6, 23, 0.24); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control:disabled { cursor: not-allowed; opacity: 0.42; box-shadow: none; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control--primary, .webhmi-shell[data-v-c97949af] .webhmi-glass-control.is-active, .webhmi-shell[data-v-c97949af] .webhmi-glass-control[aria-pressed='true'] { border-color: color-mix(in srgb, var(--webhmi-blue) 52%, transparent); background: color-mix(in srgb, var(--webhmi-blue) 22%, var(--webhmi-panel-strong)); color: #f8fafc; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 14px 34px color-mix(in srgb, var(--webhmi-blue) 18%, transparent), 0 0 18px color-mix(in srgb, var(--webhmi-blue) 16%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control--success { border-color: color-mix(in srgb, var(--webhmi-confirm) 50%, transparent); background: var(--webhmi-confirm-dark); color: #ecfdf5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px color-mix(in srgb, var(--webhmi-confirm) 35%, transparent), 0 0 34px color-mix(in srgb, var(--webhmi-confirm) 16%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control--success:hover:not(:disabled) { border-color: color-mix(in srgb, var(--webhmi-confirm) 64%, white 14%); background: var(--webhmi-confirm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 24px color-mix(in srgb, var(--webhmi-confirm) 42%, transparent), 0 0 42px color-mix(in srgb, var(--webhmi-confirm) 18%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control--danger, .webhmi-shell[data-v-c97949af] .webhmi-glass-control.danger { border-color: color-mix(in srgb, var(--webhmi-red) 55%, transparent); background: var(--webhmi-red); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 20px color-mix(in srgb, var(--webhmi-red) 50%, transparent), 0 0 35px color-mix(in srgb, var(--webhmi-red) 30%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-glass-control--danger:hover:not(:disabled), .webhmi-shell[data-v-c97949af] .webhmi-glass-control.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--webhmi-red) 72%, white 18%); background: color-mix(in srgb, var(--webhmi-red) 88%, white 12%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 24px color-mix(in srgb, var(--webhmi-red) 58%, transparent), 0 0 44px color-mix(in srgb, var(--webhmi-red) 34%, transparent); } .webhmi-shell[data-v-c97949af] .webhmi-segmented-control { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--webhmi-border); border-radius: 0.55rem; background: color-mix(in srgb, var(--webhmi-panel-strong) 62%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 28px rgba(2, 6, 23, 0.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .webhmi-shell[data-v-c97949af] .webhmi-segmented-control::before { content: ''; position: absolute; top: var(--segment-padding, 0.25rem); bottom: var(--segment-padding, 0.25rem); left: var(--segment-padding, 0.25rem); z-index: -1; width: var(--segment-item-width, calc((100% - (var(--segment-padding, 0.25rem) * 2)) / var(--segment-count, 2))); border-radius: calc(var(--segment-radius, 0.48rem) - 0.08rem); background: color-mix(in srgb, var(--webhmi-blue) 18%, var(--webhmi-panel-strong)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px color-mix(in srgb, var(--webhmi-blue) 16%, transparent), 0 0 18px color-mix(in srgb, var(--webhmi-blue) 12%, transparent); transform: translateX(calc(var(--active-index, 0) * var(--segment-step, var(--segment-item-width, 100%)))); transition: transform 430ms var(--webhmi-action-ease), width 260ms ease, box-shadow 260ms ease, background 260ms ease; } .webhmi-shell[data-v-c97949af] .webhmi-segmented-control button { position: relative; z-index: 1; border-color: transparent; background: transparent; box-shadow: none; } .webhmi-shell[data-v-c97949af] .webhmi-segmented-control button.is-active, .webhmi-shell[data-v-c97949af] .webhmi-segmented-control button[aria-pressed='true'] { color: #f8fafc; text-shadow: 0 0 18px rgba(255, 255, 255, 0.18); } .webhmi-shell[data-v-c97949af] .webhmi-tab-dot { display: inline-block; width: 0.36rem; height: 0.36rem; border-radius: 999px; background: rgba(148, 163, 184, 0.5); box-shadow: 0 0 0 transparent; } .webhmi-shell[data-v-c97949af] [data-status='ready'] .webhmi-tab-dot { background: var(--webhmi-teal); box-shadow: 0 0 12px color-mix(in srgb, var(--webhmi-teal) 34%, transparent); } .webhmi-shell[data-v-c97949af] [data-status='warning'] .webhmi-tab-dot { background: var(--webhmi-amber); box-shadow: 0 0 12px color-mix(in srgb, var(--webhmi-amber) 32%, transparent); } .webhmi-shell[data-v-c97949af] [data-status='error'] .webhmi-tab-dot { background: var(--webhmi-red); box-shadow: 0 0 12px color-mix(in srgb, var(--webhmi-red) 38%, transparent); } .webhmi-shell--focus .main-container[data-v-c97949af] { overflow: hidden; } [data-v-c97949af] .webhmi-workspace-overlay { padding: 0; align-items: stretch; justify-content: stretch; } .webhmi-workspace-overlay[data-v-c97949af] { display: flex; align-items: stretch; justify-content: stretch; background: color-mix(in srgb, var(--color-bg-primary) 68%, transparent); backdrop-filter: blur(10px); } .webhmi-workspace-dialog[data-v-c97949af] { width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border-radius: 0; padding: 0; } .dialog-overlay-enter-active[data-v-c97949af], .dialog-overlay-leave-active[data-v-c97949af] { transition: opacity 300ms ease; } .dialog-overlay-enter-from[data-v-c97949af], .dialog-overlay-leave-to[data-v-c97949af] { opacity: 0; } .panel-anim[data-v-c97949af] { transform-origin: 50% 50%; transform: scaleY(0.001); opacity: 0; backface-visibility: hidden; contain: paint; transition: transform 600ms cubic-bezier(.16, 1, .3, 1), opacity 260ms ease; } .panel-anim.is-open[data-v-c97949af] { transform: scaleY(1); opacity: 1; } .content-fade[data-v-c97949af] { opacity: 0; transform: translateY(6px); transition: opacity 360ms ease, transform 520ms cubic-bezier(.16, 1, .3, 1); } .content-fade.is-visible[data-v-c97949af] { opacity: 1; transform: translateY(0); } .webhmi-focus-restore[data-v-c97949af] { position: fixed; top: 1rem; right: 1rem; z-index: 80; display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; border-radius: 0.55rem; border: 1px solid color-mix(in srgb, var(--webhmi-blue) 45%, transparent); background: color-mix(in srgb, var(--webhmi-panel-strong) 86%, transparent); color: var(--color-text-primary); padding: 0.5rem 0.9rem; font-size: 0.78rem; font-weight: 850; box-shadow: 0 14px 32px rgba(2, 6, 23, 0.26); } @keyframes webhmi-glass-sheen-c97949af { 0% { opacity: 0; transform: translateX(-120%) rotate(12deg); } 28% { opacity: 1; } 100% { opacity: 0; transform: translateX(360%) rotate(12deg); } } @media (prefers-reduced-motion: reduce) { .webhmi-shell[data-v-c97949af] .webhmi-glass-control, .webhmi-shell[data-v-c97949af] .webhmi-segmented-control::before { transition: none; } .webhmi-shell[data-v-c97949af] .webhmi-glass-control::after { animation: none !important; } } .new-project-message[data-v-ee888c2a]{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin:.25rem auto 0; max-width:32rem; color:var(--color-text-secondary); text-align:center; line-height:1.45; } .dialog-action-row[data-v-ee888c2a]{ display:flex; justify-content:center; gap:.85rem; margin-top:1.5rem; } @media (max-width: 520px){ .dialog-action-row[data-v-ee888c2a]{ flex-direction:column-reverse; } .dialog-action-row > button[data-v-ee888c2a]{ width:100%; } } .dialog-container[data-v-af7f61c0] { position: relative; } .dialog-overlay[data-v-af7f61c0] { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); z-index: 10; } .dialog-title[data-v-af7f61c0] { letter-spacing: 0.01em; font-family: 'Righteous', sans-serif; } .dialog-title-text[data-v-af7f61c0] { display: inline-flex; gap: 0.35rem; align-items: center; justify-content: center; } .dialog-title-accent[data-v-af7f61c0] { color: var(--color-accent-contrast); } .dialog-title-main[data-v-af7f61c0] { color: var(--color-accent); } .dialog-tabs[data-v-af7f61c0] { display: inline-flex; gap: 0.5rem; padding: 0.35rem; border-radius: 9999px; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); } .tab-btn[data-v-af7f61c0] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 9999px; background: transparent; border: none; color: rgba(255, 255, 255, 0.65); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .tab-btn[data-v-af7f61c0]:hover, .tab-btn[data-v-af7f61c0]:focus-visible { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } .tab-btn.active[data-v-af7f61c0] { background: rgba(72, 132, 255, 0.25); color: #fff; box-shadow: 0 8px 20px rgba(72, 132, 255, 0.32); } .tab-btn[data-v-af7f61c0]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .dialog-form[data-v-af7f61c0] { display: flex; flex-direction: column; gap: 1rem; } .glass-card[data-v-af7f61c0] { border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(15, 23, 42, 0.55)); backdrop-filter: blur(12px); padding: 1.25rem; box-shadow: 0 18px 44px rgba(15, 23, 42, 0.35); } .card-header[data-v-af7f61c0] { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; } .card-title[data-v-af7f61c0] { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9); } .card-subtitle[data-v-af7f61c0] { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; } .hint-list[data-v-af7f61c0] { display: grid; gap: 0.4rem; margin-top: 0.5rem; padding-left: 1rem; color: rgba(226, 232, 240, 0.85); font-size: 0.85rem; list-style: disc; } .form-grid[data-v-af7f61c0] { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; } .field[data-v-af7f61c0] { display: flex; flex-direction: column; gap: 0.45rem; } .field.span-2[data-v-af7f61c0] { grid-column: span 2; } @media (max-width: 640px) { .field.span-2[data-v-af7f61c0] { grid-column: span 1; } } .field-label[data-v-af7f61c0] { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgba(255, 255, 255, 0.75); } .field-shell[data-v-af7f61c0] { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.8rem; border-radius: 0.85rem; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255, 255, 255, 0.15); transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; } .field-shell[data-v-af7f61c0]:focus-within { border-color: color-mix(in srgb, var(--color-accent) 28%, rgba(255, 255, 255, 0.16)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 10px 22px rgba(2, 6, 23, 0.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); background: color-mix(in srgb, var(--color-panel-strong) 70%, transparent); } .textarea-shell[data-v-af7f61c0] { align-items: flex-start; } .filter-input[data-v-af7f61c0] { flex: 1 1 auto; width: 100%; background: transparent; border: 0; outline: none; color: var(--color-text-primary); font-size: 0.95rem; } .filter-input[data-v-af7f61c0]::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .filter-input[data-v-af7f61c0]::placeholder { color: rgba(255, 255, 255, 0.5); } .filter-input.textarea[data-v-af7f61c0] { min-height: 7rem; resize: vertical; } .field-helper[data-v-af7f61c0] { margin-top: 0.25rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); } .suggestions[data-v-af7f61c0] { display: grid; gap: 0.5rem; margin-top: 0.75rem; } .suggestions-label[data-v-af7f61c0] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgba(255, 255, 255, 0.65); } .suggestions-list[data-v-af7f61c0] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip[data-v-af7f61c0] { background: rgba(59, 130, 246, 0.12); color: var(--color-accent); border: 1px solid rgba(59, 130, 246, 0.35); } .chip[data-v-af7f61c0]:hover { box-shadow: 0 6px 16px hsla(221, 92%, 60%, 0.18), 0 2px 8px hsla(351, 89%, 60%, 0.08); } .example-card[data-v-af7f61c0] { margin-top: 1rem; padding: 1rem; border-radius: 0.9rem; background: rgba(15, 23, 42, 0.45); border: 1px dashed rgba(148, 163, 184, 0.5); display: grid; gap: 0.6rem; } .example-title[data-v-af7f61c0] { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); } .example-list[data-v-af7f61c0] { list-style: disc; padding-left: 1.15rem; color: rgba(226, 232, 240, 0.9); font-size: 0.85rem; } .form-footer[data-v-af7f61c0] { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; } .secondary-action[data-v-af7f61c0], .primary-action[data-v-af7f61c0] { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; font-weight: 700; padding: 0.65rem 1.4rem; font-size: 0.95rem; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .secondary-action[data-v-af7f61c0] { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(148, 163, 184, 0.35); color: rgba(226, 232, 240, 0.85); } .secondary-action[data-v-af7f61c0]:hover { transform: translateY(-1px); } .primary-action[data-v-af7f61c0] { background: linear-gradient(135deg, var(--color-accent-contrast), var(--color-accent)); border: none; color: var(--color-bg-primary); box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35); } .primary-action[data-v-af7f61c0]:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(59, 130, 246, 0.45); } .primary-action[data-v-af7f61c0]:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; } .status-card[data-v-af7f61c0] { margin-top: 1.5rem; padding: 1.25rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.6); display: grid; gap: 0.75rem; } .status-dialog[data-v-af7f61c0] { margin: 0; max-height: calc(100vh - 12rem); overflow-y: auto; } .status-card--active[data-v-af7f61c0] { border-color: rgba(59, 130, 246, 0.45); box-shadow: 0 12px 30px rgba(59, 130, 246, 0.25); } .status-card--success[data-v-af7f61c0] { border-color: rgba(34, 197, 94, 0.45); box-shadow: 0 12px 30px rgba(34, 197, 94, 0.25); } .status-card--error[data-v-af7f61c0] { border-color: rgba(248, 113, 113, 0.45); box-shadow: 0 12px 30px rgba(248, 113, 113, 0.25); } .status-header[data-v-af7f61c0] { display: flex; align-items: flex-start; gap: 0.75rem; } .status-icon[data-v-af7f61c0] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); } .status-icon--spinning svg[data-v-af7f61c0] { animation: spin-af7f61c0 1.1s linear infinite; } .status-title[data-v-af7f61c0] { font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.95); } .status-helper[data-v-af7f61c0] { margin-top: 0.15rem; color: rgba(226, 232, 240, 0.75); font-size: 0.9rem; } .status-progress[data-v-af7f61c0] { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-top: 0.25rem; padding: 0.35rem 0.2rem 0.15rem; border-radius: 0.75rem; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); } .status-progress__step[data-v-af7f61c0] { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; min-width: 0; font-size: 0.75rem; color: rgba(148, 163, 184, 0.75); text-align: center; padding-bottom: 0.35rem; } .status-progress__step[data-v-af7f61c0]::after { content: ''; position: absolute; top: 1.35rem; left: 50%; right: -50%; height: 2px; background: linear-gradient(90deg, rgba(148, 163, 184, 0.25), rgba(148, 163, 184, 0.05)); z-index: 0; } .status-progress__step[data-v-af7f61c0]:last-child::after { display: none; } .status-progress__icon[data-v-af7f61c0] { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.65); color: rgba(148, 163, 184, 0.8); transition: all 0.25s ease; } .status-progress__label[data-v-af7f61c0] { display: block; line-height: 1.1; } .status-progress__step--completed[data-v-af7f61c0]::after { background: linear-gradient(90deg, rgba(59, 130, 246, 0.45), rgba(59, 130, 246, 0.15)); } .status-progress__step--completed .status-progress__icon[data-v-af7f61c0] { border-color: rgba(59, 130, 246, 0.55); background: rgba(37, 99, 235, 0.18); color: rgba(191, 219, 254, 0.95); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25) inset; } .status-progress__step--active[data-v-af7f61c0] { color: rgba(226, 232, 240, 0.95); font-weight: 600; } .status-progress__step--active .status-progress__icon[data-v-af7f61c0] { border-color: rgba(96, 165, 250, 0.85); background: rgba(37, 99, 235, 0.32); color: #fff; box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.4) inset, 0 10px 18px rgba(37, 99, 235, 0.25); } .status-progress__step--upcoming[data-v-af7f61c0] { opacity: 0.9; } .status-progress__step--pulsing .status-progress__icon[data-v-af7f61c0]::after { content: ''; position: absolute; inset: -0.3rem; border-radius: inherit; border: 2px solid rgba(96, 165, 250, 0.4); animation: status-pulse-af7f61c0 1.7s ease-in-out infinite; } @keyframes status-pulse-af7f61c0 { 0% { opacity: 0.7; transform: scale(0.85); } 70% { opacity: 0; transform: scale(1.35); } 100% { opacity: 0; transform: scale(1.35); } } .status-job[data-v-af7f61c0] { font-size: 0.82rem; color: rgba(148, 163, 184, 0.85); word-break: break-all; } .status-timestamps[data-v-af7f61c0] { display: grid; gap: 0.35rem; font-size: 0.82rem; color: rgba(226, 232, 240, 0.75); } .status-timestamps li[data-v-af7f61c0] { display: flex; align-items: center; gap: 0.5rem; } .status-timestamps span[data-v-af7f61c0] { min-width: 4.5rem; font-weight: 600; color: rgba(226, 232, 240, 0.9); } .status-timestamps time[data-v-af7f61c0] { color: rgba(226, 232, 240, 0.75); } .result-summary[data-v-af7f61c0] { display: grid; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .result-name[data-v-af7f61c0] { font-weight: 700; font-size: 1rem; color: rgba(248, 250, 252, 0.95); } .result-meta[data-v-af7f61c0] { display: grid; gap: 0.35rem; font-size: 0.85rem; color: rgba(226, 232, 240, 0.8); } .result-meta li[data-v-af7f61c0] { display: flex; justify-content: space-between; gap: 0.5rem; } .result-meta span[data-v-af7f61c0]:first-child { font-weight: 600; } .diagram-preview h4[data-v-af7f61c0] { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(148, 163, 184, 0.9); margin-bottom: 0.25rem; } .diagram-json[data-v-af7f61c0] { max-height: 220px; overflow: auto; padding: 0.75rem; border-radius: 0.75rem; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); font-family: 'Fira Code', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.75rem; line-height: 1.35; color: rgba(226, 232, 240, 0.9); white-space: pre-wrap; word-break: break-word; } .step-output-list[data-v-af7f61c0] { margin-top: 1.5rem; display: grid; gap: 0.75rem; } .step-output-title[data-v-af7f61c0] { font-weight: 700; color: var(--color-text-primary); } .step-output-card[data-v-af7f61c0] { border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.35); padding: 0.5rem 0.75rem; } .step-output-summary[data-v-af7f61c0] { cursor: pointer; display: flex; justify-content: space-between; gap: 0.75rem; font-weight: 600; color: rgba(255, 255, 255, 0.9); list-style: none; } .step-output-summary[data-v-af7f61c0]::-webkit-details-marker { display: none; } .step-output-key[data-v-af7f61c0] { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .step-output-json[data-v-af7f61c0] { margin-top: 0.75rem; font-size: 0.8rem; line-height: 1.4; background: rgba(15, 23, 42, 0.6); border-radius: 0.65rem; padding: 0.75rem; color: rgba(226, 232, 240, 0.85); max-height: 16rem; overflow: auto; white-space: pre-wrap; word-break: break-word; } .status-error[data-v-af7f61c0] { padding: 0.75rem; border-radius: 0.75rem; background: rgba(248, 113, 113, 0.12); color: rgba(254, 226, 226, 0.95); font-size: 0.9rem; } .status-error__timeout[data-v-af7f61c0] { margin-top: 0.35rem; font-size: 0.82rem; color: rgba(254, 226, 226, 0.8); } .status-actions[data-v-af7f61c0] { display: flex; justify-content: flex-end; margin-top: 0.5rem; } .status-close[data-v-af7f61c0] { padding: 0.55rem 1.2rem; border-radius: 9999px; border: none; cursor: pointer; font-weight: 600; background: linear-gradient(135deg, var(--color-accent-contrast), var(--color-accent)); color: var(--color-bg-primary); box-shadow: 0 10px 28px rgba(59, 130, 246, 0.35); transition: transform 0.2s ease, box-shadow 0.2s ease; } .status-close[data-v-af7f61c0]:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(59, 130, 246, 0.45); } @keyframes spin-af7f61c0 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .chips-title[data-v-d3e0b7e2] { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); } .chip-wrap[data-v-d3e0b7e2] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip[data-v-d3e0b7e2] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); cursor: pointer; } .chip[data-v-d3e0b7e2]:hover { background: rgba(255,255,255,0.18); } .chip-x[data-v-d3e0b7e2] { width: 0.75rem; height: 0.75rem; margin-left: 0.25rem; } .list-row[data-v-d3e0b7e2] { border-radius: 0.5rem; } .chips-title[data-v-7d7a9ab3] { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); } .chip-wrap[data-v-7d7a9ab3] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip[data-v-7d7a9ab3] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); cursor: pointer; } .chip[data-v-7d7a9ab3]:hover { background: rgba(255,255,255,0.18); } .chip-x[data-v-7d7a9ab3] { width: 0.75rem; height: 0.75rem; margin-left: 0.25rem; } .list-row[data-v-7d7a9ab3] { border-radius: 0.5rem; } .chips-title[data-v-9becf695] { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); } .chip-wrap[data-v-9becf695] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .chip[data-v-9becf695] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; border-radius: 9999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); cursor: pointer; } .chip[data-v-9becf695]:hover { background: rgba(255,255,255,0.18); } .chip-x[data-v-9becf695] { width: 0.75rem; height: 0.75rem; margin-left: 0.25rem; } .list-row[data-v-9becf695] { border-radius: 0.5rem; } .open-diagram-toolbar[data-v-24b7ca41]{ display:flex; flex-direction:column; gap:.85rem; margin-bottom:1rem; } .open-diagram-tabs[data-v-24b7ca41]{ max-width:100%; justify-content:flex-start; overflow-x:auto; } .open-diagram-tab[data-v-24b7ca41]{ white-space:nowrap; } .open-diagram-controls[data-v-24b7ca41]{ display:grid; grid-template-columns:minmax(14rem, 1fr) auto minmax(12rem, 16rem) auto; gap:.6rem; align-items:center; } .open-diagram-control[data-v-24b7ca41], .open-diagram-sort-trigger[data-v-24b7ca41]{ position:relative; display:flex; align-items:center; min-height:2.55rem; border:1px solid var(--llb-control-border); border-radius:.55rem; background:var(--llb-control-bg); color:var(--color-text-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--llb-control-shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:border-color .22s ease, background .22s ease, box-shadow .25s ease, transform .2s ease; } .open-diagram-control[data-v-24b7ca41]:focus-within, .open-diagram-sort-trigger[data-v-24b7ca41]:focus-visible{ outline:none; border-color:color-mix(in srgb, var(--color-accent) 28%, var(--color-borders-dividers) 18%); background:var(--llb-control-bg-hover); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 12px 24px rgba(2,6,23,.14), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } .open-diagram-control__icon[data-v-24b7ca41]{ position:absolute; left:.8rem; top:50%; width:1rem; height:1rem; transform:translateY(-50%); color:var(--color-accent); opacity:.85; pointer-events:none; } .open-diagram-input[data-v-24b7ca41]{ width:100%; min-height:2.35rem !important; padding:.35rem .8rem .35rem 2.05rem !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; color:var(--color-text-primary); outline:none; } .open-diagram-sort-trigger[data-v-24b7ca41]{ width:100%; justify-content:space-between; gap:.7rem; padding:.55rem .85rem; cursor:pointer; } .open-diagram-list[data-v-24b7ca41]{ max-height:min(25rem, 48vh); overflow-y:auto; padding-right:.25rem; } .open-diagram-footer[data-v-24b7ca41]{ display:flex; justify-content:center; gap:.85rem; padding-top:1rem; } .diagram-card[data-v-24b7ca41] { border-radius:.55rem; border:1px solid var(--llb-control-border); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--color-accent) 7%, transparent), transparent 30%), color-mix(in srgb, var(--color-panel-soft) 84%, transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.055), 0 14px 32px rgba(2,6,23,.16); color:var(--color-text-primary); } .diagram-card[data-v-24b7ca41]:hover, .diagram-card[data-v-24b7ca41]:focus-visible{ outline:none; border-color:color-mix(in srgb, var(--color-accent) 28%, var(--color-borders-dividers) 18%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 14px 30px rgba(2,6,23,.18), 0 0 0 1px color-mix(in srgb, var(--color-accent) 5%, transparent), 0 0 16px color-mix(in srgb, var(--color-accent) 4%, transparent); } .diagram-card.is-selected[data-v-24b7ca41] { border-color: color-mix(in srgb, var(--color-accent) 58%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 2px color-mix(in srgb, var(--color-accent) 38%, transparent) inset, 0 14px 30px color-mix(in srgb, var(--color-accent) 16%, transparent), 0 0 18px color-mix(in srgb, var(--color-accent) 12%, transparent); transform: translateY(-1px); } .chip[data-v-24b7ca41] { background: rgba(59,130,246,0.18); color: var(--color-accent); border: 1px solid rgba(59,130,246,0.35); } .chip.contrast[data-v-24b7ca41] { background: rgba(236,72,153,0.18); color: var(--color-accent-contrast); border: 1px solid rgba(236,72,153,0.35); } .diagram-card.is-selected[data-v-24b7ca41]:hover { transform: translateY(-1px); } @media (max-width: 720px){ .open-diagram-controls[data-v-24b7ca41]{ grid-template-columns:1fr auto; } .open-diagram-controls > .relative[data-v-24b7ca41]{ grid-column:1 / -1; } .open-diagram-footer[data-v-24b7ca41]{ flex-direction:column-reverse; } .open-diagram-footer > button[data-v-24b7ca41]{ width:100%; } } .chip[data-v-d17d0a51] { color: var(--color-accent); } .chip[data-v-d17d0a51]:hover { box-shadow: 0 6px 16px hsla(221, 92%, 60%, 0.18), 0 2px 8px hsla(351, 89%, 60%, 0.08); } .input-wrap[data-v-d17d0a51] { transition: box-shadow 200ms ease, border-color 200ms ease; } .save-suggestions-label[data-v-d17d0a51] { display: flex; align-items: center; gap: 0.5rem; margin: 1rem 0 0.3rem; color: var(--color-text-secondary); font-size: 0.88rem; } .revision-dialog[data-v-38bd06cb] { padding: 0.25rem; } .data-shell[data-v-38bd06cb] { border: 1px solid rgba(255,255,255,0.12); border-radius: 0.875rem; overflow: hidden; background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .data-toolbar[data-v-38bd06cb] { display: flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; background: rgba(255,255,255,0.045); border-bottom: 1px solid rgba(255,255,255,0.08); } .data-body[data-v-38bd06cb] { padding: 1rem; } .section-toolbar[data-v-38bd06cb] { justify-content: space-between; } .section-body[data-v-38bd06cb] { display: flex; flex-direction: column; } .history-toolbar[data-v-38bd06cb] { flex-wrap: wrap; } .section-title[data-v-38bd06cb] { font-size: 1rem; font-weight: 700; } .section-subtitle[data-v-38bd06cb] { margin-top: 0.25rem; color: var(--color-text-secondary); font-size: 0.875rem; } .field-label[data-v-38bd06cb] { display: block; font-size: 0.875rem; font-weight: 600; } .glass-input[data-v-38bd06cb] { width: 100%; border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.18); color: var(--color-text-primary); padding: 0.85rem 0.95rem; transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .glass-input[data-v-38bd06cb]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(59,130,246,0.2); background: rgba(0,0,0,0.24); } .chip[data-v-38bd06cb] { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.6rem; border-radius: 9999px; font-size: 0.85rem; line-height: 1; background: rgba(31,41,55,0.45); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(6px); } .chip-history[data-v-38bd06cb] { background: rgba(59,130,246,0.14); } .chip-current[data-v-38bd06cb] { background: rgba(16,185,129,0.16); border-color: rgba(16,185,129,0.28); } .summary-grid[data-v-38bd06cb] { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .summary-card[data-v-38bd06cb] { min-width: 0; padding: 0.85rem 1rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)), rgba(15,23,42,0.52); text-align: left; } .summary-card__label[data-v-38bd06cb] { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-accent); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.01em; } .summary-card__value[data-v-38bd06cb] { margin-top: 0.55rem; color: #fff; font-size: 0.95rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; } .metadata-list[data-v-38bd06cb] { display: grid; gap: 0.75rem; } .metadata-item[data-v-38bd06cb] { display: grid; gap: 0.45rem; padding: 0.9rem 1rem; border-radius: 0.95rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); } .metadata-item__label[data-v-38bd06cb] { color: var(--color-accent); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .metadata-item__value[data-v-38bd06cb] { margin: 0; color: var(--color-text-primary); font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; } .history-list[data-v-38bd06cb] { display: flex; flex-direction: column; gap: 0.75rem; max-height: 26rem; overflow: auto; padding: 0.85rem; } .history-item[data-v-38bd06cb], .selected-card[data-v-38bd06cb] { border-radius: 0.9rem; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); } .history-item[data-v-38bd06cb] { width: 100%; padding: 1rem; text-align: left; transition: transform 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease; } .history-item[data-v-38bd06cb]:hover { transform: translateY(-1px); border-color: rgba(59,130,246,0.3); background: rgba(255,255,255,0.05); } .history-item-selected[data-v-38bd06cb] { border-color: rgba(59,130,246,0.45); background: rgba(59,130,246,0.08); box-shadow: 0 0 0 1px rgba(59,130,246,0.15); } .history-item-top[data-v-38bd06cb], .history-item-body[data-v-38bd06cb] { display: flex; gap: 0.75rem; justify-content: space-between; } .history-item-top[data-v-38bd06cb] { align-items: flex-start; } .history-item-body[data-v-38bd06cb] { align-items: flex-start; margin-top: 0.8rem; } .history-author[data-v-38bd06cb] { font-weight: 700; } .history-comment[data-v-38bd06cb] { margin-top: 0.35rem; color: var(--color-text-secondary); line-height: 1.5; } .history-time[data-v-38bd06cb] { color: var(--color-text-secondary); font-size: 0.85rem; white-space: nowrap; } .selected-card[data-v-38bd06cb] { padding: 1rem; } .confirm-row[data-v-38bd06cb] { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.95rem; color: var(--color-text-secondary); } .confirm-row input[data-v-38bd06cb] { margin-top: 0.15rem; } .state-shell[data-v-38bd06cb] { display: flex; align-items: center; gap: 0.85rem; min-height: 8rem; justify-content: center; flex-direction: column; text-align: center; color: var(--color-text-secondary); border: 1px dashed rgba(255,255,255,0.14); border-radius: 0.9rem; padding: 1.5rem; } .state-error[data-v-38bd06cb] { color: #fca5a5; } .loader-dot[data-v-38bd06cb] { width: 1rem; height: 1rem; border-radius: 9999px; border: 2px solid rgba(59,130,246,0.35); border-top-color: var(--color-accent); animation: spin-38bd06cb 0.85s linear infinite; } .empty-helper[data-v-38bd06cb] { color: var(--color-text-secondary); font-size: 0.875rem; } .footer-actions[data-v-38bd06cb], .footer-bar[data-v-38bd06cb] { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .footer-bar[data-v-38bd06cb] { justify-content: flex-end; } .btn-cta[data-v-38bd06cb], .footer-secondary[data-v-38bd06cb] { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; font-weight: 700; padding: 0.75rem 1.5rem; } .btn-cta[data-v-38bd06cb] { color: #fff; transition: transform 0.3s ease, opacity 0.18s ease; } .btn-cta[data-v-38bd06cb]:hover { transform: translateY(-0.25rem); } .btn-cta[data-v-38bd06cb]:disabled { cursor: not-allowed; } .footer-secondary[data-v-38bd06cb] { transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--color-text-primary); } .footer-secondary[data-v-38bd06cb]:hover { transform: translateY(-1px); } .pager-btn[data-v-38bd06cb] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .pager-btn[data-v-38bd06cb]:hover { background-color: var(--color-accent); color: var(--color-accent-contrast); transform: translateY(-1px); } .pager-btn[data-v-38bd06cb]:disabled, .btn-cta[data-v-38bd06cb]:disabled, .footer-secondary[data-v-38bd06cb]:disabled { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .pager-btn.is-active[data-v-38bd06cb] { background: var(--color-accent-contrast); color: var(--color-bg-primary); border-color: var(--color-accent-contrast); box-shadow: 0 0 16px rgba(236,72,153,0.55), 0 0 28px rgba(236,72,153,0.35); filter: brightness(1.05); } @media (max-width: 640px) { .history-item-top[data-v-38bd06cb], .history-item-body[data-v-38bd06cb], .footer-actions[data-v-38bd06cb] { flex-direction: column; align-items: flex-start; } .history-time[data-v-38bd06cb] { white-space: normal; } } @keyframes spin-38bd06cb { to { transform: rotate(360deg); } } .dialog-actions[data-v-bb89ae3c] { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: nowrap; } .dialog-actions[data-v-bb89ae3c] > * { flex: 0 0 auto; } @media (max-width: 640px) { .dialog-actions[data-v-bb89ae3c] { flex-wrap: wrap; } .dialog-actions[data-v-bb89ae3c] > * { flex: 1 1 auto; } } .warning-card[data-v-bb89ae3c] { border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.875rem; background: rgba(255, 255, 255, 0.04); padding: 1rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .warning-list-item[data-v-bb89ae3c] { position: relative; padding-left: 1.1rem; } .warning-list-item[data-v-bb89ae3c]::before { content: ''; position: absolute; left: 0.2rem; top: 0.58rem; height: 0.38rem; width: 0.38rem; border-radius: 9999px; background: var(--color-action-red); } .warning-chip[data-v-bb89ae3c] { display: inline-flex; align-items: center; gap: 0.45rem; border-radius: 9999px; border: 1px solid rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.12); color: var(--color-action-red); padding: 0.45rem 0.75rem; font-size: 0.85rem; font-weight: 700; } .btn-cta[data-v-bb89ae3c], .footer-secondary[data-v-bb89ae3c] { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.75rem; padding: 0.75rem 1.5rem; font-weight: 700; } .btn-cta[data-v-bb89ae3c] { color: #fff; transition: transform 0.3s ease, opacity 0.18s ease; } .btn-cta[data-v-bb89ae3c]:hover { transform: translateY(-0.25rem); } .footer-secondary[data-v-bb89ae3c] { border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--color-text-primary); transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .footer-secondary[data-v-bb89ae3c]:hover { transform: translateY(-1px); } .dialog-actions[data-v-eaac005b] { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; flex-wrap: nowrap; } .input-glass[data-v-d05aa439] { width: 100%; padding: .45rem .55rem; border-radius: .55rem; border: 1px solid var(--color-bg-primary); background: rgba(17,24,39,0.6); color: var(--color-text-primary); outline: none; transition: box-shadow 200ms ease, border-color 200ms ease; } .input-glass--disabled[data-v-d05aa439] { background: rgba(9, 13, 24, 0.85); border-color: color-mix(in oklab, var(--color-bg-primary) 70%, transparent); } .input-glass[disabled][data-v-d05aa439] { opacity: 1; cursor: not-allowed; } .input-glass[data-v-d05aa439]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-accent) 40%, transparent); } .timeline-preview__chart[data-v-764ff56b] { border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.35)), repeating-linear-gradient( to right, rgba(255, 255, 255, 0.05) 0, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 10% ); overflow: hidden; } .timeline-preview__plot-grid[data-v-764ff56b] { display: grid; grid-template-columns: minmax(2.5rem, auto) 1fr; gap: 0.6rem; align-items: stretch; } .timeline-preview__plot-main[data-v-764ff56b] { display: grid; gap: 0.45rem; } .timeline-preview__axis-line[data-v-764ff56b] { stroke: rgba(226, 232, 240, 0.25); stroke-width: 0.7; } .timeline-preview__grid-line[data-v-764ff56b] { stroke: rgba(226, 232, 240, 0.16); stroke-width: 0.4; } .timeline-preview__tick-label[data-v-764ff56b] { fill: rgba(226, 232, 240, 0.82); font-size: 2.1px; font-weight: 500; } .timeline-preview__label[data-v-764ff56b] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .timeline-preview__axis-y[data-v-764ff56b], .timeline-preview__axis-x[data-v-764ff56b] { color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 600; } .timeline-preview__axis-y[data-v-764ff56b] { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; display: flex; align-items: center; justify-content: center; } .timeline-preview__axis-x[data-v-764ff56b] { text-align: right; } .timeline-preview__legend[data-v-764ff56b] { display: flex; flex-wrap: wrap; gap: 0.85rem; font-size: 0.74rem; color: var(--color-text-secondary); } .timeline-preview__legend-item[data-v-764ff56b] { display: inline-flex; align-items: center; gap: 0.45rem; } .timeline-preview__legend-swatch[data-v-764ff56b] { display: inline-block; width: 1.1rem; height: 0.2rem; border-radius: 999px; } .timeline-preview__legend-swatch--base[data-v-764ff56b] { background: linear-gradient(to right, rgba(148,163,184,0.8), rgba(148,163,184,0.8)); opacity: 0.9; } .timeline-preview__legend-swatch--value[data-v-764ff56b] { background: var(--color-accent); } .timeline-preview__value[data-v-764ff56b] { margin-top: 0.2rem; color: var(--color-accent-contrast); font-weight: 600; } .timeline-field[data-v-c2854c68] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--color-accent-contrast); } .timeline-field small[data-v-c2854c68], .timeline-helper-copy[data-v-c2854c68] { color: var(--color-text-secondary); font-size: 0.74rem; line-height: 1.45; } .timeline-input[data-v-c2854c68] { width: 100%; padding: 0.55rem 0.8rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.28); color: var(--color-text-primary); } .timeline-preset-grid[data-v-c2854c68] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; } .timeline-preset[data-v-c2854c68] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.85rem; border-radius: 0.9rem; border: 1px solid rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.12); color: var(--color-accent-contrast); text-align: left; } .timeline-preset__title[data-v-c2854c68] { font-size: 0.82rem; font-weight: 700; } .timeline-preset__meta[data-v-c2854c68] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); } .timeline-preset__description[data-v-c2854c68] { font-size: 0.72rem; color: var(--color-text-secondary); line-height: 1.35; } .timeline-action[data-v-c2854c68] { padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.45); color: var(--color-text-primary); font-size: 0.74rem; font-weight: 600; } .timeline-action--danger[data-v-c2854c68] { border-color: rgba(248, 113, 113, 0.35); color: #fecaca; } .timeline-block-heading[data-v-c2854c68] { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 0.2rem; } .timeline-block-heading__title[data-v-c2854c68] { color: var(--color-accent-contrast); font-size: 0.9rem; font-weight: 700; } .timeline-block-heading__meta[data-v-c2854c68], .timeline-empty-state[data-v-c2854c68] { color: var(--color-text-secondary); font-size: 0.78rem; line-height: 1.45; } .timeline-empty-state[data-v-c2854c68] { border-radius: 0.9rem; border: 1px dashed rgba(148, 163, 184, 0.3); padding: 1rem; background: rgba(15, 23, 42, 0.2); } .timeline-master-toggle[data-v-c2854c68] { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; border-radius: 0.85rem; border: 1px solid rgba(248, 113, 113, 0.28); background: rgba(127, 29, 29, 0.14); } .timeline-master-toggle__title[data-v-c2854c68] { display: block; font-size: 0.82rem; font-weight: 700; color: #fee2e2; } .timeline-master-toggle__description[data-v-c2854c68] { display: block; margin-top: 0.1rem; font-size: 0.74rem; color: var(--color-text-secondary); line-height: 1.35; } .timeline-quick-picks[data-v-c2854c68] { display: flex; flex-wrap: wrap; gap: 0.35rem; } .timeline-quick-pick[data-v-c2854c68] { border-radius: 999px; padding: 0.18rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(15, 23, 42, 0.42); color: var(--color-text-primary); font-size: 0.68rem; font-weight: 700; } .timeline-quick-pick--positive[data-v-c2854c68] { border-color: rgba(16, 185, 129, 0.38); } .timeline-quick-pick--negative[data-v-c2854c68] { border-color: rgba(248, 113, 113, 0.38); } .timeline-impact-feedback[data-v-c2854c68] { border-radius: 0.7rem; border: 1px solid rgba(59, 130, 246, 0.26); background: rgba(30, 64, 175, 0.15); padding: 0.5rem 0.7rem; color: var(--color-accent-contrast); font-size: 0.76rem; font-weight: 600; } .analog-header[data-v-dc0af1b7] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; } .analog-dialog-close-btn[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; flex-shrink: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.55); color: var(--color-text-primary); transition: border-color 180ms ease, color 180ms ease; } .analog-dialog-close-btn[data-v-dc0af1b7]:hover, .analog-dialog-close-btn[data-v-dc0af1b7]:focus-visible { border-color: rgba(59, 130, 246, 0.45); color: var(--color-accent); } .analog-dialog-close-btn[data-v-dc0af1b7]:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; } .dialog-title[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-size: 1.35rem; font-weight: 800; letter-spacing: 0.01em; font-family: 'Righteous', sans-serif; } .dialog-title svg[data-v-dc0af1b7] { color: var(--color-accent); } .title-text[data-v-dc0af1b7] { display: inline-flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 0.35rem; } .title-primary[data-v-dc0af1b7] { color: var(--color-accent-contrast); } .title-secondary[data-v-dc0af1b7] { color: var(--color-accent); } .header-subtitle[data-v-dc0af1b7] { margin: 0; max-width: 48rem; color: var(--color-text-secondary); font-size: 0.95rem; } .analog-tabs[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem; border-radius: 999px; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); } .analog-tab-btn[data-v-dc0af1b7] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: transparent; border: none; color: rgba(255, 255, 255, 0.65); font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .analog-tab-step[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: rgba(15, 23, 42, 0.75); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; transition: background 0.18s ease, color 0.18s ease; } .analog-tab-btn.active .analog-tab-step[data-v-dc0af1b7] { background: rgba(34, 197, 94, 0.24); color: #d1fae5; } .analog-tab-btn[data-v-dc0af1b7]:hover, .analog-tab-btn[data-v-dc0af1b7]:focus-visible { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } .analog-tab-btn.active[data-v-dc0af1b7] { background: rgba(34, 197, 94, 0.22); color: #dcfce7; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22); } .analog-tab-btn--complete[data-v-dc0af1b7] { border-color: rgba(34, 197, 94, 0.28); } .analog-tab-btn--complete .analog-tab-step[data-v-dc0af1b7] { background: rgba(34, 197, 94, 0.24); color: #d1fae5; } .analog-tab-btn--in-progress[data-v-dc0af1b7] { border-color: rgba(59, 130, 246, 0.42); } .analog-tab-btn[data-v-dc0af1b7]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .analog-tab-btn--locked[data-v-dc0af1b7] { cursor: not-allowed; opacity: 0.55; } .analog-tab-btn[data-v-dc0af1b7]:disabled:hover, .analog-tab-btn[data-v-dc0af1b7]:disabled:focus-visible { background: transparent; color: rgba(255, 255, 255, 0.65); } .analog-dialog-footer[data-v-dc0af1b7] { display: flex; flex-direction: column; gap: 1.25rem; } @media (min-width: 768px) { .analog-dialog-footer[data-v-dc0af1b7] { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .footer-controls[data-v-dc0af1b7] { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .footer-summary[data-v-dc0af1b7] { max-width: 36rem; line-height: 1.5; } @media (min-width: 768px) { .footer-controls[data-v-dc0af1b7] { align-items: flex-end; } } .footer-buttons[data-v-dc0af1b7] { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .preset-card__header[data-v-dc0af1b7] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04)); } .preset-card__intro[data-v-dc0af1b7] { flex: 1; min-width: 16rem; } .preset-card__title[data-v-dc0af1b7] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-accent); } .preset-card__subtitle[data-v-dc0af1b7] { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--color-text-secondary); } .preset-card__filters[data-v-dc0af1b7] { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: nowrap; justify-content: flex-end; } .preset-card__meta[data-v-dc0af1b7] { padding: 0.5rem 1rem 0.9rem; text-align: right; } .filter-label[data-v-dc0af1b7] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--color-text-secondary); text-align: right; min-width: 12rem; } @media (max-width: 960px) { .preset-card__header[data-v-dc0af1b7] { flex-direction: column; align-items: stretch; } .preset-card__filters[data-v-dc0af1b7] { flex-wrap: wrap; justify-content: flex-start; } .filter-label[data-v-dc0af1b7] { text-align: left; } .preset-card__meta[data-v-dc0af1b7] { text-align: left; } } .filter-select[data-v-dc0af1b7] { min-width: 12rem; padding: 0.45rem 0.5rem; border-radius: 0.6rem; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-bg-primary); } .llbuilder-dropdown-trigger[data-v-dc0af1b7] { width: 100%; padding: 0.5rem 0.75rem; padding-right: 2.25rem; border-radius: 0.5rem; background: var(--color-bg-secondary); border: 1px solid var(--color-bg-primary); color: var(--color-text-primary); font-size: 0.8rem; outline: none; display: flex; align-items: center; justify-content: space-between; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .llbuilder-dropdown-trigger[data-v-dc0af1b7]:hover { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-bg-primary)); background: color-mix(in srgb, var(--color-bg-secondary) 88%, white 12%); } .llbuilder-dropdown-trigger[data-v-dc0af1b7]:focus-visible, .llbuilder-dropdown-trigger[aria-expanded='true'][data-v-dc0af1b7] { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); } .preset-table[data-v-dc0af1b7] { width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; } .preset-table thead[data-v-dc0af1b7] { background: rgba(255, 255, 255, 0.03); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--color-text-secondary); } .preset-table th[data-v-dc0af1b7], .preset-table td[data-v-dc0af1b7] { padding: 0.85rem 1rem; text-align: left; } .preset-table thead th[data-v-dc0af1b7] { border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .preset-table tbody td[data-v-dc0af1b7] { border-top: 1px solid rgba(255, 255, 255, 0.04); } .preset-table tbody tr:first-child td[data-v-dc0af1b7] { border-top-color: transparent; } .preset-row[data-v-dc0af1b7] { position: relative; isolation: isolate; border-radius: 0.85rem; } .preset-row[data-v-dc0af1b7]::after { content: ''; position: absolute; inset: 0.15rem; background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.14), transparent 55%), linear-gradient(120deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); border: 1px solid rgba(59, 130, 246, 0.35); border-radius: 0.75rem; opacity: 0; transform: scale(0.975); transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease; pointer-events: none; z-index: -1; } .preset-row--selected[data-v-dc0af1b7]::after { opacity: 1; transform: scale(1); box-shadow: 0 14px 30px rgba(59, 130, 246, 0.24); } .preset-select-toggle[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(59, 130, 246, 0.08)); color: var(--color-accent-contrast); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .preset-select-toggle[data-v-dc0af1b7]:hover, .preset-select-toggle[data-v-dc0af1b7]:focus-visible { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.75); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28); transform: translateY(-1px); } .preset-select-toggle[data-v-dc0af1b7]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .preset-select-toggle__icon[data-v-dc0af1b7] { display: inline-flex; align-items: center; justify-content: center; color: inherit; } .preset-select-toggle--active[data-v-dc0af1b7] { background: rgba(59, 130, 246, 0.22); border-color: var(--color-accent); box-shadow: 0 12px 28px rgba(59, 130, 246, 0.32); } .preset-select-toggle--active .preset-select-toggle__icon[data-v-dc0af1b7] { color: var(--color-accent); } .sr-only[data-v-dc0af1b7] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .footer-button[data-v-dc0af1b7] { padding: 0.6rem 1.25rem; border-radius: 0.9rem; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease; cursor: pointer; } .footer-button.secondary[data-v-dc0af1b7] { border: 1px solid rgba(226, 232, 240, 0.4); background: transparent; color: rgba(226, 232, 240, 0.95); } .footer-button.secondary[data-v-dc0af1b7]:hover { transform: translateY(-1px); } .locale-fallback-banner[data-v-dc0af1b7] { margin: -0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.35); color: var(--color-text-primary); font-size: 0.85rem; } .analog-instrument-panel[data-v-e4191f5a] { display: flex; flex-direction: column; gap: 1.5rem; background: var(--surface, #1f2933); border-radius: 16px; padding: 1.5rem; color: var(--text-primary, #f8fafc); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.35); } .panel-header[data-v-e4191f5a] { display: flex; justify-content: flex-end; align-items: flex-start; gap: 1rem; } .status-flags[data-v-e4191f5a] { display: flex; gap: 0.5rem; } .flag[data-v-e4191f5a] { padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.875rem; font-weight: 500; background: rgba(148, 163, 184, 0.15); border: 1px solid rgba(148, 163, 184, 0.2); } .flag-normal[data-v-e4191f5a] { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); } .flag-alarm[data-v-e4191f5a] { background: rgba(249, 115, 22, 0.15); color: #f97316; border-color: rgba(249, 115, 22, 0.35); } .flag-fault[data-v-e4191f5a] { background: rgba(239, 68, 68, 0.15); color: #ef4444; border-color: rgba(239, 68, 68, 0.35); } .readout-section[data-v-e4191f5a] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .readout-card[data-v-e4191f5a] { background: rgba(15, 23, 42, 0.6); border-radius: 12px; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid rgba(100, 116, 139, 0.35); } .readout-card.highlighted[data-v-e4191f5a] { border-color: rgba(59, 130, 246, 0.6); box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2); } .readout-label[data-v-e4191f5a] { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #94a3b8); } .readout-value[data-v-e4191f5a] { font-size: 2.25rem; font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; } .unit[data-v-e4191f5a] { font-size: 1rem; color: var(--text-muted, #94a3b8); } .controls-section[data-v-e4191f5a] { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; } .control[data-v-e4191f5a] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; color: var(--text-secondary, #cbd5f5); } .control-select[data-v-e4191f5a] { width: 100%; max-width: 18rem; } .select-wrapper[data-v-e4191f5a] { position: relative; width: 100%; } .select-field[data-v-e4191f5a] { width: 100%; padding: 0.65rem 2.5rem 0.65rem 0.85rem; border-radius: 0.75rem; border: 1px solid rgba(59, 130, 246, 0.35); background: rgba(15, 23, 42, 0.65); color: var(--color-text-primary); font-size: 0.9rem; font-weight: 500; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.4); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .select-field[data-v-e4191f5a]:focus-visible { outline: none; border-color: rgba(59, 130, 246, 0.75); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .select-icon[data-v-e4191f5a] { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: rgba(255, 255, 255, 0.65); pointer-events: none; } .control-buttons[data-v-e4191f5a] { display: flex; gap: 0.75rem; } button[data-v-e4191f5a] { padding: 0.6rem 1.1rem; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #2563eb, #3b82f6); color: white; transition: transform 0.15s ease, box-shadow 0.15s ease; } button[data-v-e4191f5a]:disabled { cursor: not-allowed; opacity: 0.6; box-shadow: none; } button[data-v-e4191f5a]:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35); } .control-buttons .primary-action[data-v-e4191f5a] { background: var(--color-action-red, #f43f5e); } .control-buttons .primary-action[data-v-e4191f5a]:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--color-action-red, #f43f5e) 45%, transparent); } button.link[data-v-e4191f5a] { background: none; padding: 0; color: #60a5fa; text-decoration: underline; font-weight: 500; } .snapshot-section[data-v-e4191f5a] { display: flex; flex-direction: column; gap: 0.75rem; } .snapshot-header[data-v-e4191f5a] { display: flex; justify-content: space-between; align-items: center; } .snapshot-table[data-v-e4191f5a] { width: 100%; border-collapse: collapse; border: 1px solid rgba(100, 116, 139, 0.35); } .snapshot-table th[data-v-e4191f5a], .snapshot-table td[data-v-e4191f5a] { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid rgba(100, 116, 139, 0.2); } .snapshot-table tbody tr[data-v-e4191f5a]:nth-child(even) { background: rgba(15, 23, 42, 0.35); } @media (max-width: 640px) { .controls-section[data-v-e4191f5a] { flex-direction: column; align-items: stretch; } .control-buttons[data-v-e4191f5a] { width: 100%; justify-content: space-between; } button[data-v-e4191f5a] { flex: 1; } } .pid-dashboard[data-v-a21c2893] { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; --pid-title-size: 1rem; --pid-subtitle-size: 0.85rem; --pid-title-color: var(--color-accent); --pid-subtitle-color: var(--color-accent-contrast); } .dashboard-header[data-v-a21c2893] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; } .eyebrow[data-v-a21c2893] { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.85); } h1[data-v-a21c2893] { font-size: 2rem; font-weight: 800; color: var(--pid-title-color); } .subtitle[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); max-width: 40rem; } .header-actions[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; } .status-banner[data-v-a21c2893] { padding: 0.4rem 0.85rem; border-radius: 0.75rem; font-size: 0.85rem; } .status-banner.success[data-v-a21c2893] { background: rgba(16, 185, 129, 0.15); color: #34d399; } .status-banner.error[data-v-a21c2893] { background: rgba(248, 113, 113, 0.15); color: #f87171; } .status-banner.info[data-v-a21c2893] { background: rgba(59, 130, 246, 0.15); color: #60a5fa; } .time-window-picker[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-end; } .time-window-label[data-v-a21c2893] { font-size: 0.85rem; color: var(--color-text-secondary); } .time-window-options[data-v-a21c2893] { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; } .time-window-option[data-v-a21c2893] { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.35); color: var(--color-text-secondary); font-size: 0.85rem; transition: all 0.15s ease; } .time-window-option.active[data-v-a21c2893], .time-window-option[data-v-a21c2893]:hover { color: #0ea5e9; border-color: rgba(14, 165, 233, 0.6); background: rgba(14, 165, 233, 0.12); } .preset-cta[data-v-a21c2893] { position: relative; } .preset-menu[data-v-a21c2893] { position: absolute; top: calc(100% + 0.5rem); right: 0; width: min(320px, 80vw); padding: 0.85rem; border-radius: 0.75rem; background: rgba(2, 6, 23, 0.95); border: 1px solid rgba(148, 163, 184, 0.2); box-shadow: 0 10px 45px rgba(0, 0, 0, 0.4); z-index: 20; display: flex; flex-direction: column; gap: 0.5rem; } .preset-menu__heading[data-v-a21c2893] { margin: 0; font-weight: 700; } .preset-menu__helper[data-v-a21c2893] { margin: 0; font-size: 0.85rem; color: var(--color-text-secondary); } .preset-menu__list[data-v-a21c2893] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .preset-menu__option[data-v-a21c2893] { width: 100%; text-align: left; border: 1px solid transparent; border-radius: 0.65rem; padding: 0.65rem; background: rgba(30, 41, 59, 0.5); color: inherit; display: flex; flex-direction: column; gap: 0.15rem; } .preset-preview[data-v-a21c2893] { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 1.5rem; padding: 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(148, 163, 184, 0.15); } .preset-preview__list[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.75rem; } .preset-preview__helper[data-v-a21c2893] { font-size: 0.85rem; color: var(--color-text-secondary); margin: 0; } .preset-preview__option[data-v-a21c2893] { width: 100%; text-align: left; border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 0.75rem; padding: 0.75rem; background: rgba(15, 23, 42, 0.45); color: inherit; display: flex; flex-direction: column; gap: 0.15rem; } .preset-preview__option--active[data-v-a21c2893] { border-color: var(--color-accent); background: rgba(59, 130, 246, 0.12); } .preset-preview__detail[data-v-a21c2893] { display: flex; flex-direction: column; gap: 1.25rem; } .preset-preview__header h3[data-v-a21c2893] { margin: 0; font-size: 1.5rem; } .preset-preview__eyebrow[data-v-a21c2893] { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.9); margin-bottom: 0.25rem; } .preset-preview__roles[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 0.5rem; } .preset-preview__roles dt[data-v-a21c2893] { font-size: 0.75rem; color: rgba(148, 163, 184, 0.8); } .preset-preview__roles dd[data-v-a21c2893] { margin: 0; } .preset-preview__notes[data-v-a21c2893], .preset-preview__summary[data-v-a21c2893], .preset-preview__scenarios[data-v-a21c2893] { border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; padding: 1rem; background: rgba(15, 23, 42, 0.4); } .preset-preview__summary dl[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem; margin-bottom: 0.5rem; } .preset-preview__summary-helper[data-v-a21c2893] { font-size: 0.75rem; color: rgba(148, 163, 184, 0.9); margin: 0; } .preset-preview__scenarios-header[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .preset-preview__loop-picker[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.85rem; } .preset-preview__scenario-list[data-v-a21c2893] { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; } .preset-preview__scenario[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .preset-preview__scenario-name[data-v-a21c2893] { font-weight: 600; margin: 0; } .preset-preview__scenario-copy[data-v-a21c2893], .preset-preview__scenario-duration[data-v-a21c2893], .preset-preview__loop-warning[data-v-a21c2893] { display: block; font-size: 0.8rem; color: rgba(148, 163, 184, 0.9); } .preset-preview__actions[data-v-a21c2893] { display: flex; gap: 0.75rem; flex-wrap: wrap; } .preset-preview__placeholder[data-v-a21c2893] { display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: rgba(148, 163, 184, 0.9); } .chip-button[data-v-a21c2893] { border: 1px solid var(--color-text-primary); background: transparent; border-radius: 0.75rem; padding: 0.5rem 1.25rem; font-size: 0.9rem; color: var(--color-text-primary); font-weight: 600; transition: transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .chip-button[data-v-a21c2893]:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.04); } .chip-button[data-v-a21c2893]:disabled { opacity: 0.5; cursor: not-allowed; } .loop-card__quick-actions[data-v-a21c2893] { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; } @media (max-width: 900px) { .preset-preview[data-v-a21c2893] { grid-template-columns: 1fr; } } .preset-menu__option[data-v-a21c2893]:hover { border-color: rgba(59, 130, 246, 0.4); } .preset-menu__label[data-v-a21c2893] { font-weight: 600; } .preset-menu__meta[data-v-a21c2893] { color: var(--color-text-secondary); } .preset-menu__empty[data-v-a21c2893] { color: var(--color-text-secondary); font-style: italic; } .btn-secondary[data-v-a21c2893] { padding: 0.65rem 1.25rem; border-radius: 0.75rem; border: none; font-weight: 600; cursor: pointer; } .btn-secondary[data-v-a21c2893] { background: rgba(148, 163, 184, 0.2); color: var(--color-text-primary); } .btn-secondary[data-v-a21c2893]:disabled { opacity: 0.6; cursor: not-allowed; } .empty-state[data-v-a21c2893] { border: 1px dashed rgba(148, 163, 184, 0.4); border-radius: 1rem; padding: 2rem; text-align: center; color: var(--color-text-secondary); display: flex; flex-direction: column; gap: 1rem; align-items: center; } .loading-state[data-v-a21c2893] { padding: 1.5rem; display: flex; align-items: center; justify-content: center; color: var(--color-text-primary); font-weight: 700; letter-spacing: 0.02em; } .loading-state__text[data-v-a21c2893] { margin: 0; } .loop-grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; } .loop-card[data-v-a21c2893] { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } .loop-card__header[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 1rem; } .loop-card__header h2[data-v-a21c2893] { margin: 0; font-size: var(--pid-title-size); color: var(--pid-title-color); } .loop-card__description[data-v-a21c2893] { color: var(--color-text-secondary); font-size: 0.85rem; } .loop-card__cascade-helper[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); margin: 0.35rem 0 0; } .loop-card__cascade-link[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); margin: 0.25rem 0 0; } .loop-card__preset[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.35rem; } .loop-card__preset-name[data-v-a21c2893] { font-size: 0.85rem; font-weight: 600; color: var(--color-accent); } .loop-card__preset-industries[data-v-a21c2893] { font-size: 0.75rem; color: var(--color-text-secondary); } .loop-card__badges[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; } .status-pill[data-v-a21c2893] { padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; } .status-pill--ok[data-v-a21c2893] { background: rgba(16, 185, 129, 0.15); color: #34d399; } .status-pill--muted[data-v-a21c2893] { background: rgba(148, 163, 184, 0.15); color: rgba(148, 163, 184, 0.95); } .status-pill--alarm[data-v-a21c2893] { background: rgba(248, 113, 113, 0.15); color: #f87171; } .loop-card__partner-pill[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); margin: 0.25rem 0 0; } .loop-card__metrics[data-v-a21c2893] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .loop-card__metrics dt[data-v-a21c2893] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.9); } .loop-card__metrics dd[data-v-a21c2893] { margin: 0; font-size: 1.4rem; font-weight: 700; } .loop-card__metrics small[data-v-a21c2893] { color: var(--color-text-secondary); } .loop-card__limits[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-top: 0.25rem; align-items: flex-start; } .limit-block[data-v-a21c2893] { padding: 0.65rem 0.75rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.75rem; background: rgba(148, 163, 184, 0.05); } .limit-label[data-v-a21c2893] { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.9); margin: 0 0 0.2rem; } .limit-value[data-v-a21c2893] { margin: 0; font-weight: 700; color: var(--color-text-primary); } .limit-flags[data-v-a21c2893] { display: flex; align-items: center; justify-content: flex-end; } .pid-term-panel[data-v-a21c2893] { margin-top: 0.5rem; padding: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1rem; background: rgba(15, 23, 42, 0.35); display: flex; flex-direction: column; gap: 0.75rem; } .pid-term-header[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .pid-term-kicker[data-v-a21c2893] { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--pid-title-size); color: var(--pid-title-color); margin-bottom: 0.25rem; } .pid-term-helper[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); } .pid-term-flags[data-v-a21c2893] { display: flex; gap: 0.5rem; align-items: center; } .pill[data-v-a21c2893] { padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; } .pill--muted[data-v-a21c2893] { background: rgba(148, 163, 184, 0.15); color: rgba(148, 163, 184, 0.95); } .pill--warning[data-v-a21c2893] { background: rgba(251, 191, 36, 0.15); color: #fbbf24; } .pill--info[data-v-a21c2893] { background: rgba(59, 130, 246, 0.15); color: #93c5fd; } .pid-term-grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .pid-term[data-v-a21c2893] { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.85rem; padding: 0.75rem; } .pid-term-label[data-v-a21c2893] { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(148, 163, 184, 0.95); } .pid-term-value[data-v-a21c2893] { font-size: 1.4rem; font-weight: 700; margin: 0.15rem 0; color: var(--color-accent); } .pid-term-value[data-positive="false"][data-v-a21c2893] { color: #f87171; } .pid-term-sub[data-v-a21c2893] { color: var(--color-text-secondary); font-size: 0.85rem; } .pid-term-chart[data-v-a21c2893] { border: 1px dashed rgba(148, 163, 184, 0.35); border-radius: 0.85rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.02); } .pid-term-chart svg[data-v-a21c2893] { width: 100%; height: 110px; } .chart-wrapper[data-v-a21c2893] { position: relative; padding-left: 2.5rem; } .chart-scale[data-v-a21c2893] { position: absolute; inset: 0 auto 0 0; width: 2.4rem; pointer-events: none; } .chart-scale span[data-v-a21c2893] { position: absolute; left: 0; transform: translateY(-50%); font-size: 0.75rem; color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .chart-axis-meta[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; color: var(--color-text-secondary); font-size: 0.85rem; margin-bottom: 0.35rem; } .chart-guides line[data-v-a21c2893] { stroke: rgba(148, 163, 184, 0.18); stroke-width: 0.4; } .pid-trend[data-v-a21c2893] { fill: none; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.9; } .pid-trend--p[data-v-a21c2893] { stroke: #22d3ee; } .pid-trend--i[data-v-a21c2893] { stroke: #f59e0b; } .pid-trend--d[data-v-a21c2893] { stroke: #a78bfa; } .pid-trend-meta[data-v-a21c2893] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; } .pid-trend-legend[data-v-a21c2893] { display: flex; gap: 0.9rem; font-size: 0.85rem; color: var(--color-text-secondary); } .axis-label[data-v-a21c2893] { color: var(--color-text-secondary); font-size: 0.85rem; } .pid-dot[data-v-a21c2893] { width: 0.65rem; height: 0.65rem; border-radius: 999px; display: inline-block; margin-right: 0.35rem; } .pid-dot--p[data-v-a21c2893] { background: #22d3ee; } .pid-dot--i[data-v-a21c2893] { background: #f59e0b; } .pid-dot--d[data-v-a21c2893] { background: #a78bfa; } .pid-trend-placeholder[data-v-a21c2893] { color: var(--color-text-secondary); font-size: 0.85rem; } .tuning-card[data-v-a21c2893] { margin: 1rem 0; padding: 1.25rem; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1rem; background: linear-gradient(180deg, rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.25)); box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25); } .tuning-card__header[data-v-a21c2893] { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.75rem; } .tuning-card__eyebrow[data-v-a21c2893] { text-transform: uppercase; font-size: var(--pid-title-size); letter-spacing: 0.08em; color: var(--pid-title-color); margin: 0; } .tuning-card__helper[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); margin: 0.15rem 0 0; } .tuning-grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.25rem; } .tuning-control[data-v-a21c2893] { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 0.9rem; padding: 0.9rem; background: rgba(15, 23, 42, 0.24); display: grid; gap: 0.35rem; } .tuning-control__label[data-v-a21c2893] { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-weight: 700; } .tuning-control__label-text[data-v-a21c2893] { display: inline-flex; align-items: center; gap: 0.35rem; } .tuning-control__value[data-v-a21c2893] { color: var(--color-accent); font-variant-numeric: tabular-nums; } .tuning-control__helper[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); margin: 0.25rem 0 0.5rem; } .tuning-control__helper--warning[data-v-a21c2893] { color: #f97316; } .tuning-control__helper--info[data-v-a21c2893] { color: #93c5fd; } .tuning-control__inputs[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.4rem; } .input-error[data-v-a21c2893] { color: #f87171; font-size: 0.85rem; margin: 0.35rem 0 0; } .tuning-input[data-v-a21c2893] { width: 100%; padding: 0.7rem 0.65rem; border-radius: 0.65rem; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.35); color: #e2e8f0; font-size: 1rem; font-family: 'SFMono-Regular', 'Roboto Mono', 'Source Code Pro', monospace; font-variant-numeric: tabular-nums; text-align: right; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .tuning-input[data-v-a21c2893]:focus { outline: none; border-color: rgba(34, 211, 238, 0.8); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15); background: rgba(15, 23, 42, 0.45); } .tuning-input[data-v-a21c2893]:disabled { opacity: 0.7; cursor: not-allowed; } .tuning-control__range-hint[data-v-a21c2893] { color: var(--color-text-secondary); font-size: 0.85rem; margin: 0; } .tuning-control--summary .output-summary[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem 1rem; margin: 0; } .output-summary dt[data-v-a21c2893] { font-size: 0.85rem; color: var(--color-text-secondary); } .output-summary dd[data-v-a21c2893] { margin: 0; font-weight: 700; } .tuning-actions[data-v-a21c2893] { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .tuning-actions__resets[data-v-a21c2893] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tuning-actions__apply[data-v-a21c2893] { margin-left: auto; padding: 0.5rem 1.25rem; color: #fff; border: none; border-radius: 0.75rem; transition: transform 0.3s ease; } .tuning-actions__apply[data-v-a21c2893]:disabled { opacity: 0.7; cursor: not-allowed; } .tuning-actions__apply[data-v-a21c2893]:not(:disabled):hover { transform: translateY(-2px); } .loop-card__charts[data-v-a21c2893] { display: grid; gap: 0.75rem; } .loop-card--cascade[data-v-a21c2893] { border-color: rgba(59, 130, 246, 0.35); } .loop-card__header--cascade[data-v-a21c2893] { border-bottom: 1px solid rgba(148, 163, 184, 0.15); padding-bottom: 1rem; margin-bottom: 1rem; } .cascade-card__badge-group[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; align-items: center; } .badge-block[data-v-a21c2893] { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: flex-end; } .cascade-panel-grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; } .cascade-panel[data-v-a21c2893] { padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; background: rgba(15, 23, 42, 0.4); } .cascade-panel__header[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.15rem; } .loop-card__metrics--compact[data-v-a21c2893] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .cascade-panel__limits[data-v-a21c2893] { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin-top: 0.75rem; } .cascade-comparison[data-v-a21c2893] { margin: 1.25rem 0; padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; background: rgba(15, 23, 42, 0.4); } .cascade-comparison__header[data-v-a21c2893] { margin-bottom: 0.5rem; } .cascade-comparison__helper[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); } .cascade-comparison__grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; align-items: center; } .cascade-comparison__label[data-v-a21c2893] { font-weight: 700; color: var(--pid-title-color); font-size: var(--pid-title-size); } .cascade-comparison__metric[data-v-a21c2893] { font-weight: 600; font-size: var(--pid-title-size); color: var(--pid-title-color); } .cascade-pid-terms[data-v-a21c2893], .cascade-tuning[data-v-a21c2893] { margin: 1.25rem 0; padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; background: rgba(15, 23, 42, 0.4); display: grid; gap: 1rem; } .cascade-pid-terms__grid[data-v-a21c2893], .cascade-tuning__grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; } .pid-term--cascade[data-v-a21c2893] { border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; padding: 0.75rem; background: rgba(15, 23, 42, 0.35); display: grid; gap: 0.5rem; } .pid-term__header h3[data-v-a21c2893], .tuning-panel__header h3[data-v-a21c2893] { margin: 0.15rem 0 0; font-size: var(--pid-title-size); color: var(--pid-title-color); } .pid-term-grid--compact[data-v-a21c2893] { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .pid-term__metric[data-v-a21c2893] { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 0.75rem; padding: 0.5rem 0.65rem; } .pid-term-chart--compact svg[data-v-a21c2893] { height: 110px; } .pid-trend-meta--compact[data-v-a21c2893] { flex-direction: column; align-items: flex-start; gap: 0.35rem; } .cascade-tuning__header[data-v-a21c2893] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } .tuning-panel[data-v-a21c2893] { border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; padding: 0.75rem; background: rgba(15, 23, 42, 0.35); display: grid; gap: 0.75rem; } .tuning-panel__body[data-v-a21c2893] { display: grid; gap: 0.75rem; } .tuning-panel__row[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .tuning-panel__metric[data-v-a21c2893] { display: grid; gap: 0.35rem; } .tuning-panel__metric--wide[data-v-a21c2893] { grid-column: span 2; } .tuning-panel__metric--summary[data-v-a21c2893] { align-self: start; } .tuning-panel__label[data-v-a21c2893] { font-weight: 600; font-size: var(--pid-title-size); color: var(--pid-title-color); } .tuning-panel__value[data-v-a21c2893] { font-size: 1.1rem; } .tuning-panel__hint[data-v-a21c2893] { color: var(--pid-subtitle-color); font-size: var(--pid-subtitle-size); } .cascade-charts[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, 0.15); border-radius: 1rem; background: linear-gradient(120deg, rgba(15, 23, 42, 0.6), rgba(30, 41, 59, 0.65)); } .cascade-chart-grid[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; } .loop-card__chart--compact[data-v-a21c2893] { padding: 0.75rem; border-radius: 0.75rem; } .trend-legend--shared[data-v-a21c2893] { justify-content: space-between; align-items: center; } .cascade-actions[data-v-a21c2893] { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; } .cascade-actions__buttons[data-v-a21c2893] { display: flex; flex-wrap: wrap; gap: 0.35rem; } .cascade-actions__cta[data-v-a21c2893] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } .loop-card__chart[data-v-a21c2893] { border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 1rem; padding: 0.75rem; } .loop-card__chart--output[data-v-a21c2893] { background: rgba(15, 23, 42, 0.35); } .loop-card__chart svg[data-v-a21c2893] { width: 100%; height: 120px; } .trend[data-v-a21c2893] { fill: none; stroke-width: 0.95; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: 0.95; } .trend--pv[data-v-a21c2893] { stroke: #38bdf8; } .trend--sp[data-v-a21c2893] { stroke: #fbbf24; } .trend--cv[data-v-a21c2893] { stroke: #34d399; } .trend--master-output[data-v-a21c2893] { stroke: #a78bfa; stroke-dasharray: 3 3; } .trend--slave-pv[data-v-a21c2893] { stroke: #f472b6; stroke-dasharray: 4 2; } .trend-legend[data-v-a21c2893] { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--color-text-secondary); margin-top: 0.5rem; } .trend-legend__labels[data-v-a21c2893] { display: flex; gap: 0.9rem; flex-wrap: wrap; } .chart-axis-scale[data-v-a21c2893] { position: relative; height: 1.1rem; margin-top: 0.35rem; font-size: 0.8rem; color: var(--color-text-secondary); } .chart-axis-scale span[data-v-a21c2893] { position: absolute; transform: translateX(-50%); font-variant-numeric: tabular-nums; } .dot[data-v-a21c2893] { width: 0.75rem; height: 0.75rem; border-radius: 999px; display: inline-block; margin-right: 0.35rem; } .trend-placeholder[data-v-a21c2893] { margin-top: 0.35rem; color: var(--color-text-secondary); font-size: 0.85rem; } .dot--pv[data-v-a21c2893] { background: #38bdf8; } .dot--sp[data-v-a21c2893] { background: #fbbf24; } .dot--cv[data-v-a21c2893] { background: #34d399; } .dot--master-output[data-v-a21c2893] { background: #a78bfa; } .dot--slave-pv[data-v-a21c2893] { background: #f472b6; } .loop-card__footer[data-v-a21c2893] { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } .loop-card__footer-left[data-v-a21c2893] { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; flex: 1; } .loop-card__action-button[data-v-a21c2893] { padding: 0.6rem 1.5rem; border: none; border-radius: 0.75rem; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .loop-card__action-button[data-v-a21c2893]:hover { transform: translateY(-4px); } .loop-card__action-button[data-v-a21c2893]:disabled { opacity: 0.6; cursor: not-allowed; } /*! tailwindcss v4.2.4 | 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)))){[data-v-66332b59],[data-v-66332b59]:before,[data-v-66332b59]:after,[data-v-66332b59]::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial}}}.analog-tile[data-v-66332b59]{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 5);transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#0f172a8c;border-width:1px;border-color:#ffffff1a;box-shadow:inset 0 1px #ffffff0a}.analog-tile.is-warning[data-v-66332b59]{border-color:#fbbf2466}.analog-tile.is-critical[data-v-66332b59]{border-color:#ef444473}.analog-tile.is-success[data-v-66332b59]{border-color:#22c55e4d}.tile-header[data-v-66332b59]{justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);display:flex}.tile-title[data-v-66332b59]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast)}.tile-subtitle[data-v-66332b59]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.tile-actions[data-v-66332b59]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.action-btn[data-v-66332b59]{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background:#3b82f61a;border-width:1px;border-color:#ffffff14;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.action-btn[data-v-66332b59]:hover:not(:disabled){color:var(--color-accent-contrast);border-color:#3b82f673}.action-btn[data-v-66332b59]:disabled{opacity:.5;cursor:not-allowed}.tile-body[data-v-66332b59]{margin-top:calc(var(--spacing,.25rem) * 4);gap:calc(var(--spacing,.25rem) * 6);grid-template-columns:minmax(0,1fr);display:grid}@media (min-width:768px){.tile-body[data-v-66332b59]{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center}}.tile-state[data-v-66332b59]{margin-top:calc(var(--spacing,.25rem) * 6);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:dashed;padding:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary);background-color:#0f172a59;border:1px dashed #ffffff1f;flex-direction:column;display:flex}.state-label[data-v-66332b59]{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.state-indicator[data-v-66332b59]{height:calc(var(--spacing,.25rem) * 2);width:calc(var(--spacing,.25rem) * 2);background-color:var(--color-accent);border-radius:3.40282e38px}.gauge-visual[data-v-66332b59]{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);background-color:#0f172a66;border-width:1px;border-color:#ffffff14;justify-content:center;align-items:center;min-height:12rem;display:flex}.gauge-ring[data-v-66332b59]{justify-content:center;align-items:center;width:100%;display:flex;position:relative}.gauge-svg[data-v-66332b59]{width:min(100%,12rem);height:auto;transform:rotate(-90deg)}.gauge-track[data-v-66332b59]{fill:#0000;stroke:#3b82f626;stroke-width:12px}.gauge-fill[data-v-66332b59]{fill:#0000;stroke:var(--color-accent);stroke-width:12px;stroke-linecap:round;stroke-dasharray:327;stroke-dashoffset:var(--gauge-offset);transition:stroke-dashoffset .6s}.gauge-value[data-v-66332b59]{font-size:var(--text-lg,1.125rem);line-height:var(--tw-leading,var(--text-lg--line-height,calc(1.75 / 1.125)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast);flex-direction:column;align-items:center;display:flex;position:absolute}.gauge-meta[data-v-66332b59]{gap:calc(var(--spacing,.25rem) * 4);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 4);font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-text-secondary);background-color:#0f172a59;border-width:1px;border-color:#ffffff14;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));display:grid}.gauge-meta dt[data-v-66332b59]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);text-transform:uppercase}.status-label[data-v-66332b59]{text-transform:capitalize}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false} /*! tailwindcss v4.2.4 | 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)))){[data-v-355c9510],[data-v-355c9510]:before,[data-v-355c9510]:after,[data-v-355c9510]::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-space-y-reverse:0}}}.analog-tile[data-v-355c9510]{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 5);transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#0f172a8c;border-width:1px;border-color:#ffffff1a;box-shadow:inset 0 1px #ffffff0a}.analog-tile.is-warning[data-v-355c9510]{border-color:#fbbf2466}.analog-tile.is-critical[data-v-355c9510]{border-color:#ef444473}.analog-tile.is-success[data-v-355c9510]{border-color:#22c55e4d}.tile-header[data-v-355c9510]{justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);display:flex}.tile-title[data-v-355c9510]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast)}.tile-subtitle[data-v-355c9510]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.tile-actions[data-v-355c9510]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.action-btn[data-v-355c9510]{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background:#3b82f61a;border-width:1px;border-color:#ffffff14;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.action-btn[data-v-355c9510]:hover:not(:disabled){color:var(--color-accent-contrast);border-color:#3b82f673}.action-btn[data-v-355c9510]:disabled{opacity:.5;cursor:not-allowed}.tile-body[data-v-355c9510]{margin-top:calc(var(--spacing,.25rem) * 4)}:where(.tile-body[data-v-355c9510]>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing,.25rem) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing,.25rem) * 2) * calc(1 - var(--tw-space-y-reverse)))}.tile-value[data-v-355c9510]{font-size:var(--text-3xl,1.875rem);line-height:var(--tw-leading,var(--text-3xl--line-height,calc(2.25 / 1.875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast);font-variant-numeric:tabular-nums}.tile-timestamp[data-v-355c9510]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.tile-state[data-v-355c9510]{margin-top:calc(var(--spacing,.25rem) * 6);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:dashed;padding:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary);background-color:#0f172a59;border:1px dashed #ffffff1f;flex-direction:column;display:flex}.state-label[data-v-355c9510]{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.state-indicator[data-v-355c9510]{height:calc(var(--spacing,.25rem) * 2);width:calc(var(--spacing,.25rem) * 2);background-color:var(--color-accent);border-radius:3.40282e38px}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0} /*! tailwindcss v4.2.4 | 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)))){[data-v-d6b664e4],[data-v-d6b664e4]:before,[data-v-d6b664e4]:after,[data-v-d6b664e4]::backdrop{--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial}}}.analog-tile[data-v-d6b664e4]{border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 5);transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#0f172a8c;border-width:1px;border-color:#ffffff1a;box-shadow:inset 0 1px #ffffff0a}.tile-header[data-v-d6b664e4]{justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);display:flex}.tile-title[data-v-d6b664e4]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast)}.tile-subtitle[data-v-d6b664e4]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.tile-actions[data-v-d6b664e4]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);display:flex}.action-btn[data-v-d6b664e4]{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background:#3b82f61a;border-width:1px;border-color:#ffffff14;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.action-btn[data-v-d6b664e4]:hover:not(:disabled){color:var(--color-accent-contrast);border-color:#3b82f673}.action-btn[data-v-d6b664e4]:disabled{opacity:.5;cursor:not-allowed}.tile-body[data-v-d6b664e4]{margin-top:calc(var(--spacing,.25rem) * 4)}.tile-state[data-v-d6b664e4]{margin-top:calc(var(--spacing,.25rem) * 6);justify-content:center;align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);--tw-border-style:dashed;padding:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary);background-color:#0f172a59;border:1px dashed #ffffff1f;flex-direction:column;display:flex}.state-label[data-v-d6b664e4]{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.state-indicator[data-v-d6b664e4]{height:calc(var(--spacing,.25rem) * 2);width:calc(var(--spacing,.25rem) * 2);background-color:var(--color-accent);border-radius:3.40282e38px}.trend-plot-grid[data-v-d6b664e4]{grid-template-columns:minmax(2.5rem,auto) 1fr;align-items:stretch;gap:.6rem;display:grid}.trend-plot-main[data-v-d6b664e4]{gap:.45rem;display:grid}.trend-chart[data-v-d6b664e4]{background:linear-gradient(#3b82f614,#0f172a59),repeating-linear-gradient(90deg,#ffffff0d 0 1px,#0000 1px 10%);border:1px solid #ffffff14;border-radius:.85rem;overflow:hidden}.trend-svg[data-v-d6b664e4]{height:calc(var(--spacing,.25rem) * 44);width:100%}.trend-axis-line[data-v-d6b664e4]{stroke:#94a3b873;stroke-width:.35px}.trend-grid-line[data-v-d6b664e4]{stroke:#94a3b833;stroke-width:.25px;stroke-dasharray:1 1.2}.trend-tick-label[data-v-d6b664e4]{fill:#94a3b8f2;font-size:1.5px}.trend-axis-title[data-v-d6b664e4]{color:#94a3b8f2;font-size:.72rem;line-height:1}.trend-axis-title--y[data-v-d6b664e4]{writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.08em;justify-content:center;align-items:center;font-weight:600;display:flex;transform:rotate(180deg)}.trend-axis-title--x[data-v-d6b664e4]{text-align:center;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8eb;font-size:.68rem;font-weight:600}.trend-axis-meta[data-v-d6b664e4]{text-align:center;color:#94a3b8d9;font-size:.62rem;line-height:1.1}.trend-dot[data-v-d6b664e4]{stroke:#0f172ae6;stroke-width:.4px}.trend-legend[data-v-d6b664e4]{gap:calc(var(--spacing,.25rem) * 2);display:grid}@media (min-width:40rem){.trend-legend[data-v-d6b664e4]{grid-template-columns:repeat(2,minmax(0,1fr))}}.trend-legend-item[data-v-d6b664e4]{align-items:flex-start;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 2);background-color:#0f172a59;border-width:1px;border-color:#ffffff14;display:flex}.trend-legend-swatch[data-v-d6b664e4]{border-radius:999px;width:.65rem;height:.65rem;margin-top:.35rem;box-shadow:0 0 0 2px #ffffff14}.trend-legend-text[data-v-d6b664e4]{min-width:calc(var(--spacing,.25rem) * 0)}.trend-name[data-v-d6b664e4]{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast);overflow:hidden}.trend-meta[data-v-d6b664e4]{color:var(--color-text-secondary);font-size:.7rem}.trend-separator[data-v-d6b664e4]{margin-inline:calc(var(--spacing,.25rem) * 1);opacity:.7}.trend-status[data-v-d6b664e4]{--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);text-transform:uppercase}.trend-status.is-warning[data-v-d6b664e4]{color:#fbbf24f2}.trend-status.is-critical[data-v-d6b664e4]{color:#ef4444f2}.trend-status.is-success[data-v-d6b664e4]{color:#22c55ef2}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false} .correlation-map[data-v-bda620a1] { display: grid; gap: 1.5rem; background: linear-gradient(160deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.4)); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1.5rem; } .map-header[data-v-bda620a1] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } .map-title[data-v-bda620a1] { font-size: 1.1rem; font-weight: 600; color: var(--color-accent); } .map-subtitle[data-v-bda620a1] { font-size: 0.8rem; color: var(--color-text-secondary); max-width: 52ch; } .legend[data-v-bda620a1] { display: inline-flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--color-text-secondary); } .legend-item[data-v-bda620a1] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.5rem; border-radius: 9999px; background: rgba(59, 130, 246, 0.08); } .legend-dot[data-v-bda620a1] { width: 0.75rem; height: 0.75rem; border-radius: 9999px; background: rgba(59, 130, 246, 0.7); display: inline-block; } .legend-arrow[data-v-bda620a1] { width: 0.85rem; height: 0.3rem; border-radius: 9999px; background: linear-gradient(90deg, rgba(148, 163, 184, 0.4), rgba(148, 163, 184, 0.9)); display: inline-block; } .map-canvas[data-v-bda620a1] { position: relative; min-height: 240px; width: 100%; margin: 0 auto; background: rgba(15, 23, 42, 0.35); border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.15); overflow: hidden; } svg[data-v-bda620a1] { width: 100%; height: 100%; } .edge-layer .map-edge[data-v-bda620a1] { fill: none; stroke: rgba(148, 163, 184, 0.6); stroke-width: 2.5; cursor: pointer; transition: stroke 0.2s ease, stroke-width 0.2s ease; } .edge-layer .map-edge[data-v-bda620a1]:hover, .edge-layer .map-edge.active[data-v-bda620a1] { stroke: rgba(96, 165, 250, 0.85); stroke-width: 3.5; } .edge-layer .map-edge.selected[data-v-bda620a1] { stroke: var(--color-action-red); stroke-width: 3.5; } .node-layer .map-node[data-v-bda620a1] { cursor: pointer; transition: transform 0.2s ease; transform: translate(var(--node-x, 0px), var(--node-y, 0px)) scale(var(--node-scale, 1)); transform-origin: center; transform-box: fill-box; } .node-layer .map-node.selected[data-v-bda620a1] { --node-scale: 1.05; } .node-layer .node-circle[data-v-bda620a1] { fill: rgba(30, 64, 175, 0.4); stroke: rgba(96, 165, 250, 0.9); stroke-width: 2; } .node-layer .map-node.selected .node-circle[data-v-bda620a1] { fill: rgba(59, 130, 246, 0.6); stroke: rgba(191, 219, 254, 0.95); } .node-layer .map-node.targetable .node-circle[data-v-bda620a1] { stroke-dasharray: 4 3; stroke: rgba(248, 113, 113, 0.9); } .node-layer .node-label[data-v-bda620a1] { font-size: 0.7rem; font-weight: 600; fill: var(--color-accent-contrast); text-anchor: middle; pointer-events: none; } .map-tooltip[data-v-bda620a1] { position: absolute; pointer-events: none; background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(59, 130, 246, 0.25); border-radius: 0.75rem; padding: 0.6rem 0.8rem; color: var(--color-text-primary); font-size: 0.75rem; min-width: 12rem; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35); } .tooltip-title[data-v-bda620a1] { font-weight: 600; margin-bottom: 0.35rem; } .tooltip-lines[data-v-bda620a1] { display: grid; gap: 0.2rem; } .fade-enter-active[data-v-bda620a1], .fade-leave-active[data-v-bda620a1] { transition: opacity 0.15s ease; } .fade-enter-from[data-v-bda620a1], .fade-leave-to[data-v-bda620a1] { opacity: 0; } .edge-editor[data-v-bda620a1] { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1rem; display: grid; gap: 1rem; } .edge-editor__title[data-v-bda620a1] { font-size: 0.95rem; font-weight: 600; color: var(--color-accent); display: flex; align-items: center; gap: 0.35rem; } .edge-arrow[data-v-bda620a1] { color: rgba(148, 163, 184, 0.9); } .edge-editor__subtitle[data-v-bda620a1] { font-size: 0.75rem; color: var(--color-text-secondary); } .edge-form[data-v-bda620a1] { display: grid; gap: 1rem; } .form-grid[data-v-bda620a1] { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .form-field[data-v-bda620a1] { display: grid; gap: 0.35rem; font-size: 0.75rem; color: var(--color-text-secondary); } .form-field span[data-v-bda620a1] { font-weight: 600; color: var(--color-accent-contrast); } .form-field input[data-v-bda620a1], .form-field select[data-v-bda620a1] { width: 100%; padding: 0.45rem 0.6rem; border-radius: 0.6rem; border: 1px solid rgba(148, 163, 184, 0.25); background: rgba(15, 23, 42, 0.55); color: var(--color-text-primary); font-size: 0.8rem; } .form-field input[data-v-bda620a1]:focus, .form-field select[data-v-bda620a1]:focus { outline: none; border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3); } .form-actions[data-v-bda620a1] { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } @media (max-width: 768px) { .correlation-map[data-v-bda620a1] { padding: 1.25rem; } .map-subtitle[data-v-bda620a1] { max-width: 100%; } .edge-form[data-v-bda620a1] { gap: 0.75rem; } .form-actions[data-v-bda620a1] { flex-direction: column; align-items: stretch; } } /*! tailwindcss v4.2.4 | 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)))){[data-v-656c6468],[data-v-656c6468]:before,[data-v-656c6468]:after,[data-v-656c6468]::backdrop{--tw-font-weight:initial;--tw-tracking:initial;--tw-border-style:solid}}}.analog-dashboard-dialog[data-v-656c6468]{color:var(--color-text-primary)}.analog-header-container[data-v-656c6468]{padding-top:.5rem;position:relative}.analog-header-container .dialog-close[data-v-656c6468]{z-index:2;position:absolute;top:0;right:0}.analog-header[data-v-656c6468]{text-align:center;flex-direction:column;align-items:center;gap:.75rem;display:flex}.dialog-step[data-v-656c6468]{text-transform:uppercase;letter-spacing:.08em;color:#94a3b8e6;margin-bottom:.25rem;font-size:.75rem}.dialog-title[data-v-656c6468]{letter-spacing:.01em;color:var(--color-accent-contrast);justify-content:center;align-items:center;gap:.6rem;font-family:Righteous,sans-serif;font-size:1.5rem;font-weight:800;display:inline-flex}.dialog-title i[data-v-656c6468]{width:1.5rem;height:1.5rem;color:var(--color-accent)}.title-text[data-v-656c6468]{flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35rem;display:inline-flex}.title-primary[data-v-656c6468]{color:var(--color-accent-contrast)}.title-secondary[data-v-656c6468]{color:var(--color-accent)}.header-subtitle[data-v-656c6468]{max-width:48rem;color:var(--color-text-secondary);margin:0;font-size:.95rem}.dialog-close[data-v-656c6468]{color:#f8fafcd9;background:#0f172a73;border:1px solid #94a3b859;border-radius:999px;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;transition:all .2s;display:inline-flex}.dialog-close[data-v-656c6468]:hover{color:#fff;border-color:#94a3b88c}.analog-tabs[data-v-656c6468]{background:#0f172a59;border:1px solid #ffffff14;border-radius:999px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding:.35rem;display:inline-flex}.analog-tab-btn[data-v-656c6468]{color:#ffffffa6;cursor:pointer;background:0 0;border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.45rem .9rem;font-weight:600;transition:background .18s,color .18s,transform .18s;display:inline-flex}.analog-tab-btn--locked[data-v-656c6468],.analog-tab-btn[data-v-656c6468]:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.analog-tab-btn i[data-v-656c6468]{width:1rem;height:1rem}.analog-tab-btn[data-v-656c6468]:hover,.analog-tab-btn[data-v-656c6468]:focus-visible{color:#ffffffe6;background:#ffffff14}.analog-tab-btn.active[data-v-656c6468]{color:#fff;background:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.analog-tab-btn.active[data-v-656c6468]{background:color-mix(in srgb, var(--color-accent) 30%, transparent)}}.analog-tab-btn.active[data-v-656c6468]{box-shadow:0 8px 20px var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.analog-tab-btn.active[data-v-656c6468]{box-shadow:0 8px 20px color-mix(in srgb, var(--color-accent) 45%, transparent)}}.analog-tab-btn[data-v-656c6468]:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.instrument-panel-tab[data-v-656c6468]{backdrop-filter:blur(16px);background:linear-gradient(#0f172acc,#0f172a8c)}.instrument-panel-header[data-v-656c6468]{flex-direction:column;gap:1rem;margin-bottom:1.5rem;display:flex}.instrument-panel-headline[data-v-656c6468]{flex-direction:column;gap:1rem;display:flex}.instrument-panel-copy[data-v-656c6468]{flex-direction:column;gap:.5rem;display:flex}.instrument-panel-edit[data-v-656c6468]{letter-spacing:.01em;background:var(--color-action-red,#f43f5e);color:#fff;box-shadow:0 10px 25px var(--color-action-red,#f43f5e);border:none;border-radius:.75rem;align-self:flex-start;align-items:center;gap:.5rem;padding:.65rem 1.15rem;font-weight:600;display:inline-flex}@supports (color:color-mix(in lab, red, red)){.instrument-panel-edit[data-v-656c6468]{box-shadow:0 10px 25px color-mix(in srgb, var(--color-action-red,#f43f5e) 35%, transparent)}}.instrument-panel-edit[data-v-656c6468]{cursor:pointer;transition:transform .2s,box-shadow .2s,opacity .2s}.instrument-panel-edit[data-v-656c6468]:hover,.instrument-panel-edit[data-v-656c6468]:focus-visible{box-shadow:0 15px 30px var(--color-action-red,#f43f5e);transform:translateY(-1px)}@supports (color:color-mix(in lab, red, red)){.instrument-panel-edit[data-v-656c6468]:hover,.instrument-panel-edit[data-v-656c6468]:focus-visible{box-shadow:0 15px 30px color-mix(in srgb, var(--color-action-red,#f43f5e) 45%, transparent)}}.instrument-panel-edit[data-v-656c6468]:focus-visible{outline-offset:3px;outline:2px solid #fffc}@media (min-width:768px){.instrument-panel-header[data-v-656c6468]{flex-direction:row;justify-content:space-between;align-items:flex-start}.instrument-panel-headline[data-v-656c6468]{flex-direction:row;flex:1;justify-content:space-between;align-items:center}.instrument-panel-edit[data-v-656c6468]{align-self:auto}}.instrument-panel-title[data-v-656c6468]{color:var(--color-accent);font-size:1.75rem;font-weight:700}.instrument-panel-subtitle[data-v-656c6468]{color:#94a3b8d9;font-size:.95rem}.instrument-panel-picker[data-v-656c6468]{flex-direction:column;gap:.4rem;display:flex}.select-label[data-v-656c6468]{text-transform:uppercase;letter-spacing:.08em;color:var(--color-accent-contrast);font-size:.75rem}.instrument-select-field[data-v-656c6468]{width:100%;position:relative}.instrument-select-trigger[data-v-656c6468]{width:100%;color:var(--color-text-primary);letter-spacing:.01em;text-align:left;cursor:pointer;background:#0f172aa6;border:1px solid #3b82f659;border-radius:.75rem;justify-content:space-between;align-items:center;gap:.75rem;padding:.65rem .85rem;font-size:.9rem;font-weight:600;transition:border-color .2s,box-shadow .2s,color .2s;display:inline-flex;position:relative}.instrument-select-trigger[data-v-656c6468]:hover{color:#fff;border-color:#3b82f68c}.instrument-select-trigger[data-v-656c6468]:focus-visible{outline-offset:2px;border-color:#3b82f6d9;outline:2px solid #3b82f673}.instrument-select-value[data-v-656c6468]{white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;overflow:hidden}.instrument-select-menu[data-v-656c6468]{background:linear-gradient(#0f172af2,#0f172abf);border:1px solid #3b82f659;border-radius:.85rem;padding:.35rem;box-shadow:0 18px 35px #0f172a8c}.instrument-select-option[data-v-656c6468]{cursor:pointer;border-radius:.65rem;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .6rem;font-size:.9rem;transition:background-color .2s,color .2s;display:flex}.instrument-select-option.is-focused[data-v-656c6468]{background:#3b82f626}.instrument-select-option.is-selected[data-v-656c6468]{color:var(--color-accent);font-weight:600}.instrument-select-option svg[data-v-656c6468]{width:1rem;height:1rem;color:var(--color-accent)}.select-icon[data-v-656c6468]{color:#ffffffa6;pointer-events:none;width:1rem;height:1rem;transition:transform .25s;position:absolute;top:50%;right:.85rem;transform:translateY(-50%)}.instrument-panel-empty[data-v-656c6468]{color:#94a3b8d9;border:1px dashed #94a3b859;border-radius:1rem;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:2rem;display:flex}.instrument-panel-empty i[data-v-656c6468]{width:2rem;height:2rem}.instrument-panel-empty p[data-v-656c6468]{text-align:center}.analog-dashboard[data-v-656c6468]{backdrop-filter:blur(24px);background:linear-gradient(#0f172ab3,#0f172a73)}.window-btn[data-v-656c6468]{border-radius:var(--radius-md,.375rem);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.window-btn.active[data-v-656c6468]{color:var(--color-accent-contrast);background-color:#3b82f633}.window-btn[data-v-656c6468]:not(.active):hover{color:var(--color-accent-contrast)}.simulation-status[data-v-656c6468]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);text-transform:uppercase;color:var(--color-text-secondary);background:#0f172a8c;border:1px solid #ffffff14;display:inline-flex}.simulation-status--simulated[data-v-656c6468]{color:var(--color-accent-contrast);border-color:#22c55e66}.simulation-status--external[data-v-656c6468]{color:#fbbf24;border-color:#fbbf2473}.simulation-status--paused[data-v-656c6468]{color:#94a3b8e6;border-color:#94a3b859}.runtime-indicators[data-v-656c6468]{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.75rem;margin-top:.5rem;display:grid}.runtime-indicator[data-v-656c6468]{background:#0f172a73;border:1px solid #ffffff14;border-radius:.75rem;align-items:center;gap:.75rem;padding:.85rem 1rem;transition:border-color .15s,background .15s,transform .15s;display:flex;box-shadow:0 8px 30px #00000026}.runtime-indicator[data-v-656c6468]:hover{border-color:#ffffff26;transform:translateY(-1px)}.runtime-indicator--alert[data-v-656c6468]{background:linear-gradient(135deg,#f871711f,#f8717114);border-color:#f8717173}.runtime-indicator--warning[data-v-656c6468]{background:linear-gradient(135deg,#eab3081f,#eab30814);border-color:#eab30873}.runtime-indicator--muted[data-v-656c6468]{opacity:.85}.runtime-indicator__icon[data-v-656c6468]{width:2.5rem;height:2.5rem;color:var(--color-accent);background:#94a3b826;border-radius:.75rem;justify-content:center;align-items:center;display:inline-flex}.runtime-indicator__icon i[data-v-656c6468]{width:1.25rem;height:1.25rem}.runtime-indicator--alert .runtime-indicator__icon[data-v-656c6468]{color:#f87171;background:#f8717126}.runtime-indicator--warning .runtime-indicator__icon[data-v-656c6468]{color:#eab308;background:#eab30826}.runtime-indicator__label[data-v-656c6468]{color:var(--color-text-primary);font-size:.95rem;font-weight:700;display:block}.runtime-indicator__meta[data-v-656c6468]{color:var(--color-text-secondary);margin-top:.1rem;font-size:.82rem;display:block}.channel-choice[data-v-656c6468]{align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 3);background-color:#0f172a59;border-width:1px;border-color:#ffffff14;display:flex}.channel-label[data-v-656c6468]{align-items:center;gap:calc(var(--spacing,.25rem) * 3);flex:1;display:flex}.channel-checkbox[data-v-656c6468]{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);color:var(--color-accent);background-color:#0f172a73;border-color:#94a3b866;border-radius:.25rem}.channel-name[data-v-656c6468]{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent-contrast)}.channel-meta[data-v-656c6468]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.channel-meta--sub[data-v-656c6468]{font-size:.7rem}.pin-btn[data-v-656c6468]{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 2);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-width:1px;border-color:#0000;justify-content:center;align-items:center;display:flex}.pin-btn[data-v-656c6468]:hover{color:var(--color-accent-contrast);border-color:#3b82f659}.pin-btn.pinned[data-v-656c6468]{color:var(--color-accent-contrast);background-color:#3b82f61a;border-color:#3b82f680}.widget-card[data-v-656c6468]{gap:calc(var(--spacing,.25rem) * 4);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);padding:calc(var(--spacing,.25rem) * 5);border-width:1px;border-color:#ffffff0f;flex-direction:column;display:flex}.widget-header[data-v-656c6468]{justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing,.25rem) * 3);display:flex}.widget-title[data-v-656c6468]{font-size:var(--text-xl,1.25rem);line-height:var(--tw-leading,var(--text-xl--line-height,calc(1.75 / 1.25)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);color:var(--color-accent)}.widget-subtitle[data-v-656c6468]{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));color:var(--color-text-secondary)}.pin-inline[data-v-656c6468]{height:calc(var(--spacing,.25rem) * 8);width:calc(var(--spacing,.25rem) * 8);border-style:var(--tw-border-style);color:var(--color-text-secondary);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));border-width:1px;border-color:#0000;border-radius:3.40282e38px;justify-content:center;align-items:center;display:flex}.pin-inline[data-v-656c6468]:hover{color:var(--color-accent-contrast);border-color:#3b82f659}.pin-inline.active[data-v-656c6468]{color:var(--color-accent-contrast);background-color:#3b82f61a;border-color:#3b82f680}.quick-action-btn[data-v-656c6468]{align-items:center;gap:calc(var(--spacing,.25rem) * 2);border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 4);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);color:var(--color-accent-contrast);text-transform:uppercase;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#3b82f61f;border-width:1px;border-color:#ffffff1f;display:inline-flex}.quick-action-btn[data-v-656c6468]:hover:not(:disabled){background-color:#3b82f62e}.quick-action-btn[data-v-656c6468]:disabled{opacity:.6;cursor:not-allowed}.empty-state[data-v-656c6468]{align-items:center;gap:calc(var(--spacing,.25rem) * 3);border-radius:var(--radius-xl,.75rem);border-style:var(--tw-border-style);--tw-border-style:dashed;padding:calc(var(--spacing,.25rem) * 6);text-align:center;font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)));color:var(--color-text-secondary);background-color:#0f172a59;border:1px dashed #ffffff1f;flex-direction:column;display:flex}.empty-action[data-v-656c6468]{border-radius:var(--radius-lg,.5rem);border-style:var(--tw-border-style);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)));--tw-font-weight:var(--font-weight-semibold,600);font-weight:var(--font-weight-semibold,600);--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em);color:var(--color-accent-contrast);text-transform:uppercase;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s));background-color:#3b82f61f;border-width:1px;border-color:#3b82f659;justify-content:center;align-items:center;display:inline-flex}.empty-action[data-v-656c6468]:hover:not(:disabled){background-color:#3b82f633}.empty-action[data-v-656c6468]:disabled{opacity:.5;cursor:not-allowed}.correlation-placeholder[data-v-656c6468]{background:#0f172a4d;flex-direction:column;justify-content:center;align-items:center;min-height:320px;display:flex}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid} .input-glass[data-v-91d13211] { width: 100%; padding: .45rem .55rem; border-radius: .55rem; border: 1px solid var(--color-bg-primary); background: rgba(17,24,39,0.6); color: var(--color-text-primary); outline: none; transition: box-shadow 200ms ease, border-color 200ms ease; } .input-glass--disabled[data-v-91d13211] { background: rgba(9, 13, 24, 0.85); border-color: color-mix(in oklab, var(--color-bg-primary) 70%, transparent); } .input-glass[disabled][data-v-91d13211] { opacity: 1; cursor: not-allowed; } .input-glass[data-v-91d13211]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-accent) 40%, transparent); } .select-arrow[data-v-91d13211] { transition: transform 200ms ease; } select:focus + .select-arrow[data-v-91d13211] { transform: rotate(180deg); } .analog-input[data-v-72488361] { width: 100%; padding: 0.55rem 0.85rem; border-radius: 0.75rem; border: 1px solid var(--color-bg-primary); background-color: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.85rem; line-height: 1.4; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .analog-input[data-v-72488361]:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 45%, transparent); } .pid-timeline-chart[data-v-18faae77] { display: grid; gap: .75rem; margin-top: 1rem; padding: .85rem; border: 1px solid rgba(148,163,184,.24); border-radius: .85rem; background: rgba(15,23,42,.28); } .pid-timeline-chart__header h4[data-v-18faae77] { margin: 0; color: var(--color-accent-contrast); font-size: .95rem; font-weight: 700; } .pid-timeline-chart__eyebrow[data-v-18faae77] { margin: 0; text-transform: uppercase; font-size: .7rem; letter-spacing: .05em; color: var(--color-text-secondary); } .pid-timeline-chart__subtitle[data-v-18faae77] { margin: .15rem 0 0; color: var(--color-text-secondary); font-size: .72rem; } .pid-timeline-chart__legend[data-v-18faae77] { display: flex; gap: .65rem; flex-wrap: wrap; } .pid-timeline-chart__legend-item[data-v-18faae77] { display: inline-flex; align-items: center; gap: .35rem; color: var(--color-text-secondary); font-size: .75rem; font-weight: 700; } .pid-timeline-chart__swatch[data-v-18faae77] { width: .7rem; height: .7rem; border-radius: 999px; } .pid-timeline-chart__empty[data-v-18faae77] { border: 1px dashed rgba(148,163,184,.4); border-radius: .55rem; padding: .8rem; color: var(--color-text-secondary); font-size: .78rem; } .pid-timeline-chart__panes[data-v-18faae77] { display: grid; gap: .5rem; } .pid-timeline-chart__svg[data-v-18faae77] { width: 100%; min-height: 8.5rem; } .pid-timeline-chart__plot-bg[data-v-18faae77] { fill: rgba(15,23,42,.48); } .pid-timeline-chart__grid[data-v-18faae77] { stroke: rgba(148,163,184,.16); stroke-width: 1; } .pid-timeline-chart__axis[data-v-18faae77] { stroke: rgba(226,232,240,.34); stroke-width: 1; } .pid-timeline-chart__axis-label[data-v-18faae77] { fill: rgba(226,232,240,.72); font-size: .72rem; } .pid-timeline-chart__axis-label--vertical[data-v-18faae77] { font-size: .68rem; } .pid-timeline-chart__line[data-v-18faae77] { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; } .pid-timeline-chart__event-region[data-v-18faae77] { fill: rgba(14,165,233,.12); } .pid-timeline-chart__event-line[data-v-18faae77] { stroke: rgba(14,165,233,.45); stroke-width: 1; stroke-dasharray: 4 4; } .pid-timeline-chart__event-region[data-event-type='sensor-noise'][data-v-18faae77], .pid-timeline-chart__event-line[data-event-type='sensor-noise'][data-v-18faae77] { fill: rgba(52,211,153,.12); stroke: rgba(52,211,153,.45); } .pid-timeline-chart__event-region[data-event-type='actuator-saturation'][data-v-18faae77], .pid-timeline-chart__event-line[data-event-type='actuator-saturation'][data-v-18faae77] { fill: rgba(245,158,11,.12); stroke: rgba(245,158,11,.45); } .pid-timeline-chart__event-region[data-event-type='load-disturbance'][data-v-18faae77], .pid-timeline-chart__event-line[data-event-type='load-disturbance'][data-v-18faae77] { fill: rgba(99,102,241,.12); stroke: rgba(99,102,241,.45); } .pid-timeline-chart__x-axis-title[data-v-18faae77] { margin: 0; text-align: center; font-size: .75rem; color: var(--color-text-secondary); } .pid-timeline-chart__stats[data-v-18faae77] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem .6rem; margin: 0; padding-top: .2rem; font-size: .7rem; color: var(--color-text-secondary); } .pid-timeline-chart__stats p[data-v-18faae77] { margin: 0; display: flex; flex-direction: column; gap: .1rem; } .pid-timeline-chart__stats-label[data-v-18faae77] { text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; color: rgba(226,232,240,.62); } .pid-library[data-v-6e65ed27] { color: var(--color-text-primary); } .dialog-close-btn[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin: 0; flex-shrink: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(15, 23, 42, 0.55); color: var(--color-text-primary); transition: border-color 180ms ease, color 180ms ease; } .dialog-close-btn[data-v-6e65ed27]:hover, .dialog-close-btn[data-v-6e65ed27]:focus-visible { border-color: rgba(59, 130, 246, 0.45); color: var(--color-accent); } .dialog-close-btn[data-v-6e65ed27]:focus-visible { outline: 2px solid rgba(59, 130, 246, 0.45); outline-offset: 2px; } .preset-card__header[data-v-6e65ed27] { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(120deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.04)); } .preset-card__filters[data-v-6e65ed27] { display: grid; grid-template-columns: repeat(4, minmax(11rem, max-content)); align-items: end; gap: 0.75rem; justify-content: end; } .filter-label[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--color-text-secondary); text-align: left; min-width: 0; } .control-type-toggle[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: flex-start; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 0.15rem; gap: 0.25rem; } .control-type-toggle__btn[data-v-6e65ed27] { border: none; background: transparent; color: var(--color-text-secondary); font-weight: 600; border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .control-type-toggle__btn[data-v-6e65ed27]:hover, .control-type-toggle__btn[data-v-6e65ed27]:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--color-text-primary); } .control-type-toggle__btn--active[data-v-6e65ed27] { background: rgba(72, 132, 255, 0.2); color: white; box-shadow: 0 6px 16px rgba(72, 132, 255, 0.25); } .filter-select[data-v-6e65ed27] { min-width: 12rem; padding: 0.45rem 0.5rem; border-radius: 0.6rem; background: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-bg-primary); } .preset-card__title[data-v-6e65ed27] { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--color-accent); } .preset-card__subtitle[data-v-6e65ed27] { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--color-text-secondary); } .filter-count[data-v-6e65ed27] { justify-self: end; align-self: end; white-space: nowrap; } @media (max-width: 1320px) { .preset-card__filters[data-v-6e65ed27] { width: 100%; grid-template-columns: repeat(2, minmax(11rem, 1fr)); justify-content: stretch; } .filter-count[data-v-6e65ed27] { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 900px) { .preset-card__filters[data-v-6e65ed27] { grid-template-columns: 1fr; } } .cascade-label[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--color-accent); font-weight: 700; margin: 0.2rem 0; letter-spacing: 0.02em; } .preset-select-toggle[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: center; width: 2.65rem; height: 2.65rem; border-radius: 999px; border: 1px solid rgba(59, 130, 246, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(59, 130, 246, 0.08)); color: var(--color-accent-contrast); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .preset-select-toggle[data-v-6e65ed27]:hover, .preset-select-toggle[data-v-6e65ed27]:focus-visible { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.75); box-shadow: 0 10px 24px rgba(59, 130, 246, 0.28); transform: translateY(-1px); } .preset-select-toggle[data-v-6e65ed27]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .preset-select-toggle__icon[data-v-6e65ed27] { color: inherit; display: inline-flex; align-items: center; justify-content: center; } .preset-select-toggle--active[data-v-6e65ed27] { background: rgba(59, 130, 246, 0.22); border-color: var(--color-accent); box-shadow: 0 12px 28px rgba(59, 130, 246, 0.32); } .preset-select-toggle--active .preset-select-toggle__icon[data-v-6e65ed27] { color: var(--color-accent); } .role-chip[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); } .role-chip--pv[data-v-6e65ed27] { background: rgba(34, 197, 94, 0.14); border-color: rgba(34, 197, 94, 0.35); color: #bbf7d0; } .role-chip--cv[data-v-6e65ed27] { background: rgba(251, 191, 36, 0.16); border-color: rgba(251, 191, 36, 0.4); color: #fef9c3; } .role-chip--scenario[data-v-6e65ed27] { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.45); color: var(--color-accent); } .legacy-scenario-chip[data-v-6e65ed27] { display: inline-flex; align-items: center; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-top: 0.45rem; padding: 0.3rem 0.55rem; border-radius: 0.5rem; border: 1px solid rgba(234, 179, 8, 0.35); background: rgba(234, 179, 8, 0.12); color: #fcd34d; font-size: 0.72rem; font-weight: 700; line-height: 1.25; } .legacy-scenario-chip--block[data-v-6e65ed27] { display: flex; margin-top: 0.75rem; } .legacy-scenario-chip--inline[data-v-6e65ed27] { margin-top: 0.5rem; } .preset-empty-state[data-v-6e65ed27] { align-items: center; gap: 0.75rem; } .locale-fallback-banner[data-v-6e65ed27] { margin: -0.5rem 0 0; padding: 0.5rem 0.75rem; border-radius: 0.75rem; background: rgba(59, 130, 246, 0.12); border: 1px solid rgba(59, 130, 246, 0.35); color: var(--color-text-primary); font-size: 0.85rem; } .header-subtitle[data-v-6e65ed27] { margin: 0; max-width: 48rem; color: var(--color-text-secondary); font-size: 0.95rem; } .analog-tabs[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.35rem; border-radius: 999px; background: rgba(15, 23, 42, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); } .analog-tab-btn[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border-radius: 999px; background: transparent; border: none; color: rgba(255, 255, 255, 0.65); font-weight: 600; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; } .analog-tab-step[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: rgba(15, 23, 42, 0.75); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em; transition: background 0.18s ease, color 0.18s ease; } .analog-tab-btn.active .analog-tab-step[data-v-6e65ed27] { background: rgba(34, 197, 94, 0.24); color: #d1fae5; } .analog-tab-btn[data-v-6e65ed27]:hover, .analog-tab-btn[data-v-6e65ed27]:focus-visible { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } .analog-tab-btn.active[data-v-6e65ed27] { background: rgba(34, 197, 94, 0.22); color: #dcfce7; box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22); } .analog-tab-btn--complete[data-v-6e65ed27] { border-color: rgba(34, 197, 94, 0.28); } .analog-tab-btn--complete .analog-tab-step[data-v-6e65ed27] { background: rgba(34, 197, 94, 0.24); color: #d1fae5; } .analog-tab-btn--warning .analog-tab-step[data-v-6e65ed27] { background: rgba(245, 158, 11, 0.26); color: #fef3c7; } .analog-tab-btn--warning[data-v-6e65ed27] { color: rgba(254, 243, 199, 0.92); } .analog-tab-btn[data-v-6e65ed27]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .analog-tab-btn--locked[data-v-6e65ed27] { cursor: not-allowed; opacity: 0.55; } .analog-tab-btn[data-v-6e65ed27]:disabled:hover, .analog-tab-btn[data-v-6e65ed27]:disabled:focus-visible { background: transparent; color: rgba(255, 255, 255, 0.65); } .wizard-section-eyebrow[data-v-6e65ed27] { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); } .wizard-section-title[data-v-6e65ed27] { font-size: 1.05rem; font-weight: 600; color: var(--color-accent-contrast); } .wizard-section-copy[data-v-6e65ed27] { font-size: 0.875rem; color: var(--color-text-secondary); } .wizard-section-heading[data-v-6e65ed27] { font-size: 0.95rem; font-weight: 600; color: var(--color-accent); } .wizard-section-helper[data-v-6e65ed27] { font-size: 0.875rem; color: var(--color-text-secondary); } .wizard-step-header[data-v-6e65ed27] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.28); } .wizard-step-header--compact[data-v-6e65ed27] { padding: 0.75rem 0.85rem; } .wizard-step-status-strip[data-v-6e65ed27] { margin: 0; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; border: 1px solid rgba(148, 163, 184, 0.4); color: var(--color-text-secondary); background: rgba(15, 23, 42, 0.45); } .wizard-step-status-strip[data-status='complete'][data-v-6e65ed27] { border-color: rgba(52, 211, 153, 0.45); color: #bbf7d0; background: rgba(6, 78, 59, 0.3); } .wizard-step-context-list[data-v-6e65ed27] { margin: 0; padding-left: 1rem; display: grid; gap: 0.3rem; font-size: 0.78rem; color: var(--color-text-secondary); } .dashboard-header[data-v-6e65ed27] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .eyebrow[data-v-6e65ed27] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: 0.35rem; } .dashboard-header h1[data-v-6e65ed27] { font-size: 1.75rem; font-weight: 700; color: var(--color-accent-contrast); margin: 0; } .subtitle[data-v-6e65ed27] { color: var(--color-text-secondary); margin-top: 0.4rem; } .preset-editor[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)), linear-gradient(210deg, rgba(59, 130, 246, 0.12), rgba(236, 72, 153, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .preset-editor--compact[data-v-6e65ed27] { background: rgba(15, 23, 42, 0.2); border-style: dashed; } .preset-editor--channels[data-v-6e65ed27] { background: transparent; border: 0; box-shadow: none; } .preset-editor__intro-copy[data-v-6e65ed27] { margin: 0; color: color-mix(in srgb, var(--color-text-secondary) 78%, white 22%); font-size: 0.78rem; line-height: 1.45; } .preset-editor__grid[data-v-6e65ed27] { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .preset-editor__section-helper[data-v-6e65ed27] { margin: -0.35rem 0 0.1rem; font-size: 0.72rem; color: color-mix(in srgb, var(--color-text-secondary) 82%, white 18%); } .preset-editor__grid--control[data-v-6e65ed27] { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 900px) { .preset-editor__grid--control[data-v-6e65ed27] { grid-template-columns: 1fr; } } .preset-editor__field[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 0.35rem; color: var(--color-text-secondary); } .preset-editor__field > span[data-v-6e65ed27] { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; } .preset-editor--channels .preset-editor__field > span[data-v-6e65ed27] { color: color-mix(in srgb, var(--color-accent) 42%, white 58%); } .preset-editor__field--full[data-v-6e65ed27] { grid-column: 1 / -1; } .preset-editor__input[data-v-6e65ed27], .preset-editor__textarea[data-v-6e65ed27] { width: 100%; border-radius: 0.65rem; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.12); padding: 0.55rem 0.75rem; font-size: 0.82rem; color: var(--color-text-primary); } .preset-editor__input[data-v-6e65ed27]:focus-visible, .preset-editor__textarea[data-v-6e65ed27]:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-accent) 70%, white 30%); outline-offset: 1px; border-color: color-mix(in srgb, var(--color-accent-contrast) 50%, white 50%); } .llbuilder-dropdown-trigger[data-v-6e65ed27] { width: 100%; padding: 0.5rem 0.75rem; padding-right: 2.25rem; border-radius: 0.5rem; background: var(--color-bg-secondary); border: 1px solid var(--color-bg-primary); color: var(--color-text-primary); font-size: 0.8rem; outline: none; display: flex; align-items: center; justify-content: space-between; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .llbuilder-dropdown-trigger[data-v-6e65ed27]:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-bg-primary)); background: color-mix(in srgb, var(--color-bg-secondary) 88%, white 12%); } .llbuilder-dropdown-trigger[data-v-6e65ed27]:focus-visible, .llbuilder-dropdown-trigger[aria-expanded='true'][data-v-6e65ed27] { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); } .llbuilder-dropdown-trigger[data-v-6e65ed27]:disabled { cursor: not-allowed; opacity: 0.68; } .llbuilder-dropdown-trigger--channel[data-v-6e65ed27] { border-radius: 0.65rem; min-height: 2.3rem; } .preset-editor__textarea[data-v-6e65ed27] { min-height: 72px; } .preset-editor__hint[data-v-6e65ed27] { font-size: 0.75rem; color: color-mix(in srgb, var(--color-text-primary) 78%, white 22%); } .preset-editor--channels .preset-editor__hint[data-v-6e65ed27] { color: color-mix(in srgb, var(--color-text-secondary) 72%, white 28%); } .preset-editor__loading-note[data-v-6e65ed27] { margin: 0.25rem 0 0; padding: 0.5rem 0.7rem; border-radius: 0.65rem; background: color-mix(in srgb, var(--color-accent) 20%, white 80%); border: 1px solid color-mix(in srgb, var(--color-accent-contrast) 32%, white 68%); color: var(--color-bg-primary); font-size: 0.78rem; font-weight: 600; } .preset-editor__clamp[data-v-6e65ed27] { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; } .preset-editor__toggle[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-text-primary); } .preset-editor__summary[data-v-6e65ed27] { padding: 0.75rem; border-radius: 0.8rem; background: rgba(59, 130, 246, 0.08); border: 1px solid rgba(59, 130, 246, 0.2); color: var(--color-text-secondary); } .preset-editor__summary-title[data-v-6e65ed27] { margin: 0 0 0.25rem; color: var(--color-accent-contrast); font-weight: 700; } .preset-editor__summary-detail[data-v-6e65ed27] { margin: 0; font-size: 0.85rem; } .preset-editor__summary-detail--muted[data-v-6e65ed27] { color: var(--color-text-secondary); } .preset-editor__overrides[data-v-6e65ed27] { margin-top: 0.75rem; } .preset-editor__override-list[data-v-6e65ed27] { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.35rem; } .preset-editor__override-item[data-v-6e65ed27] { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 0.65rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.85rem; } .preset-editor__override-key[data-v-6e65ed27] { font-weight: 700; color: var(--color-accent); } .preset-editor__override-value[data-v-6e65ed27] { color: var(--color-text-primary); text-align: right; } .preset-editor__custom[data-v-6e65ed27] { margin-top: 1rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .preset-editor__actions[data-v-6e65ed27] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .pid-timeline-author[data-v-6e65ed27] { display: grid; gap: 1rem; } .pid-timeline-author__intro[data-v-6e65ed27] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.28); } .pid-timeline-author__intro h3[data-v-6e65ed27] { margin: 0; color: var(--color-accent); font-size: 1.05rem; font-weight: 800; } .pid-timeline-author__intro--stacked[data-v-6e65ed27] { display: block; } .pid-timeline-author__windows[data-v-6e65ed27] { display: grid; gap: 0.75rem; } .pid-timeline-window[data-v-6e65ed27] { display: grid; gap: 0.75rem; padding: 1rem; border-radius: 0.85rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.32); } .pid-timeline-window__header[data-v-6e65ed27] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .pid-timeline-window__title[data-v-6e65ed27] { margin: 0; color: var(--color-accent-contrast); font-weight: 800; } .pid-timeline-window__meta[data-v-6e65ed27] { margin: 0.15rem 0 0; color: var(--color-text-secondary); font-size: 0.78rem; } .pid-timeline-window__remove[data-v-6e65ed27] { justify-self: flex-start; border: 1px solid rgba(248, 113, 113, 0.35); border-radius: 999px; background: rgba(127, 29, 29, 0.15); color: #fecaca; padding: 0.35rem 0.8rem; font-size: 0.75rem; font-weight: 700; } .pid-timeline-diagnostics[data-v-6e65ed27] { padding: 0.85rem 1rem; border-radius: 0.85rem; border: 1px solid rgba(248, 113, 113, 0.35); background: rgba(127, 29, 29, 0.14); color: #fecaca; } .pid-timeline-diagnostics__title[data-v-6e65ed27] { margin: 0 0 0.45rem; color: #fee2e2; font-weight: 800; } .pid-timeline-diagnostics ul[data-v-6e65ed27] { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.25rem; font-size: 0.82rem; } .pid-fault-quick-effects[data-v-6e65ed27] { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.65rem; } .pid-fault-section-card[data-v-6e65ed27], .pid-fault-mode-region[data-v-6e65ed27] { display: grid; gap: 0.45rem; padding: 1rem; border-radius: 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.28); } .pid-fault-section-card__title[data-v-6e65ed27] { margin: 0; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-secondary); font-weight: 800; } .pid-fault-section-card__subtitle[data-v-6e65ed27], .pid-fault-mode-region__subtitle[data-v-6e65ed27] { margin: 0; font-size: 0.82rem; color: var(--color-text-secondary); } .pid-fault-mode-toggle[data-v-6e65ed27] { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pid-fault-mode-toggle__chip[data-v-6e65ed27] { display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.24rem 0.65rem; font-size: 0.72rem; font-weight: 700; } .pid-fault-mode-toggle__chip--off[data-v-6e65ed27] { background: rgba(2, 6, 23, 0.42); color: var(--color-text-secondary); } .pid-fault-mode-toggle__chip--on[data-v-6e65ed27] { background: rgba(59, 130, 246, 0.16); border-color: rgba(59, 130, 246, 0.45); color: var(--color-accent-contrast); } .pid-fault-quick-effect[data-v-6e65ed27] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; min-height: 4.2rem; padding: 0.75rem; border-radius: 0.8rem; border: 1px solid rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.12); color: var(--color-accent-contrast); text-align: left; } .pid-fault-quick-effect__label[data-v-6e65ed27] { font-size: 0.82rem; font-weight: 800; } .pid-fault-quick-effect__meta[data-v-6e65ed27] { color: var(--color-text-secondary); font-size: 0.72rem; font-weight: 700; } .pid-fault-chip-row[data-v-6e65ed27] { display: flex; flex-wrap: wrap; gap: 0.35rem; } .pid-fault-mini-chip[data-v-6e65ed27] { border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(15, 23, 42, 0.42); color: var(--color-text-primary); padding: 0.18rem 0.55rem; font-size: 0.68rem; font-weight: 800; } .pid-fault-inline-diagnostic[data-v-6e65ed27] { margin: 0; padding: 0.5rem 0.65rem; border-radius: 0.65rem; border: 1px solid rgba(248, 113, 113, 0.32); background: rgba(127, 29, 29, 0.12); color: #fecaca; font-size: 0.78rem; font-weight: 700; } .preset-preview[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 1.25rem; } .preset-preview__list[data-v-6e65ed27] { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.9rem; padding: 1rem; display: grid; gap: 0.65rem; } .preset-preview__helper[data-v-6e65ed27] { color: var(--color-text-secondary); font-size: 0.95rem; } .preset-preview__list ul[data-v-6e65ed27] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 20rem; overflow-y: auto; } .preset-preview__option[data-v-6e65ed27] { width: 100%; text-align: left; padding: 0.85rem 1rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); color: var(--color-text-primary); display: flex; flex-direction: column; gap: 0.35rem; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; } .preset-preview__option[data-v-6e65ed27]:hover { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.08); transform: translateY(-1px); } .preset-preview__option--active[data-v-6e65ed27] { border-color: rgba(59, 130, 246, 0.6); background: linear-gradient(145deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.05)); } .preset-preview__option-name[data-v-6e65ed27] { font-weight: 600; color: var(--color-accent); } .preset-preview__option-meta[data-v-6e65ed27] { color: var(--color-text-secondary); } .preset-preview__detail[data-v-6e65ed27] { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.9rem; padding: 1.25rem; display: grid; gap: 1rem; } .preset-preview__header h3[data-v-6e65ed27] { font-size: 1.4rem; margin: 0.15rem 0; color: var(--color-accent); } .preset-preview__eyebrow[data-v-6e65ed27] { text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); } .preset-preview__description[data-v-6e65ed27] { color: var(--color-text-secondary); margin: 0.25rem 0 0.75rem; } .preset-preview__roles[data-v-6e65ed27] { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.85rem; margin-top: 0.5rem; } .preset-preview__roles dt[data-v-6e65ed27] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); } .preset-preview__roles dd[data-v-6e65ed27] { margin: 0.1rem 0 0; color: var(--color-text-secondary); } .preset-preview__notes[data-v-6e65ed27], .preset-preview__summary[data-v-6e65ed27], .preset-preview__scenarios[data-v-6e65ed27] { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.85rem; padding: 1rem; } .preset-preview__summary dl[data-v-6e65ed27] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin: 0; } .preset-preview__summary dt[data-v-6e65ed27] { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-accent); } .preset-preview__summary dd[data-v-6e65ed27] { font-weight: 500; color: var(--color-text-secondary); } .preset-preview__notes h4[data-v-6e65ed27], .preset-preview__summary h4[data-v-6e65ed27], .preset-preview__scenarios h4[data-v-6e65ed27] { margin: 0; color: var(--color-accent); } .preset-preview__summary-helper[data-v-6e65ed27] { margin-top: 0.65rem; color: var(--color-text-secondary); font-size: 0.95rem; } .preset-preview__scenarios-header[data-v-6e65ed27] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .preset-preview__scenario-helper[data-v-6e65ed27] { margin-top: 0.75rem; padding: 0.85rem 1rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; color: var(--color-text-secondary); } .preset-preview__scenario-helper-title[data-v-6e65ed27] { margin: 0 0 0.35rem; font-weight: 600; color: var(--color-accent-contrast); } .preset-preview__scenario-helper-list[data-v-6e65ed27] { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; list-style: disc; } .preset-preview__loop-picker[data-v-6e65ed27] { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.95rem; } .preset-preview__loop-picker select[data-v-6e65ed27] { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-primary); padding: 0.35rem 0.6rem; border-radius: 0.5rem; } .preset-preview__scenario-list[data-v-6e65ed27] { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; max-height: 20rem; overflow-y: auto; } .preset-preview__scenario[data-v-6e65ed27] { display: flex; justify-content: space-between; gap: 1rem; align-items: center; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 0.75rem; padding: 0.85rem 1rem; } .preset-preview__scenario-name[data-v-6e65ed27] { font-weight: 600; color: var(--color-accent-contrast); } .preset-preview__scenario-copy[data-v-6e65ed27], .preset-preview__scenario-duration[data-v-6e65ed27] { display: block; color: var(--color-text-secondary); } .preset-preview__scenario-empty[data-v-6e65ed27] { color: var(--color-text-secondary); text-align: center; padding: 0.75rem; background: rgba(15, 23, 42, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; } .preset-preview__loop-warning[data-v-6e65ed27] { color: var(--color-action-yellow, #facc15); font-size: 0.95rem; margin-top: 0.75rem; } .preset-preview__placeholder[data-v-6e65ed27] { text-align: center; color: var(--color-text-secondary); padding: 2rem; font-size: 0.95rem; } .empty-state[data-v-6e65ed27] { text-align: center; padding: 1.75rem; color: var(--color-text-secondary); background: rgba(15, 23, 42, 0.3); border: 1px solid var(--color-bg-primary); border-radius: 1rem; } .inline-help[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.35rem; } .pid-detail-tabs[data-v-6e65ed27] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 1rem; } .pid-detail-tab-btn[data-v-6e65ed27] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: var(--color-text-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .pid-detail-tab-btn.active[data-v-6e65ed27] { border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 10px 30px rgba(59, 130, 246, 0.25); transform: translateY(-1px); background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.06)); } .pid-detail-footer[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .analog-dialog-footer[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 1.25rem; } @media (min-width: 768px) { .analog-dialog-footer[data-v-6e65ed27] { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .footer-controls[data-v-6e65ed27] { display: flex; flex-direction: column; gap: 1rem; width: 100%; } .footer-summary[data-v-6e65ed27] { max-width: 36rem; line-height: 1.5; } @media (min-width: 768px) { .footer-controls[data-v-6e65ed27] { align-items: flex-end; } } .pid-detail-footer__right[data-v-6e65ed27] { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; width: 100%; } .pid-detail-footer__left[data-v-6e65ed27] { max-width: 36rem; line-height: 1.5; } @media (min-width: 768px) { .pid-detail-footer[data-v-6e65ed27] { flex-direction: row; align-items: flex-start; justify-content: space-between; } .pid-detail-footer__right[data-v-6e65ed27] { align-items: flex-end; } } @media (max-width: 768px) { .pid-detail-footer[data-v-6e65ed27] { align-items: stretch; } .pid-detail-footer__right[data-v-6e65ed27], .footer-buttons[data-v-6e65ed27] { justify-content: flex-start; } } .footer-buttons[data-v-6e65ed27] { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-end; } .footer-button[data-v-6e65ed27] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.25rem; border-radius: 0.9rem; font-weight: 600; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; cursor: pointer; } .footer-button[data-v-6e65ed27]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .footer-button.secondary[data-v-6e65ed27] { border: 1px solid rgba(226, 232, 240, 0.4); background: transparent; color: rgba(226, 232, 240, 0.95); } .footer-button.secondary[data-v-6e65ed27]:hover, .footer-button.secondary[data-v-6e65ed27]:focus-visible { transform: translateY(-1px); border-color: rgba(226, 232, 240, 0.65); box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35); } .preset-editor__select-glass[data-v-6e65ed27] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: rgba(2, 6, 23, 0.4); border: 1px solid rgba(148, 163, 184, 0.35); color: var(--color-text-primary); padding-right: 2.4rem; background-image: linear-gradient(45deg, transparent 50%, rgba(226, 232, 240, 0.9) 50%), linear-gradient(135deg, rgba(226, 232, 240, 0.9) 50%, transparent 50%); background-position: calc(100% - 1rem) calc(50% - 0.13rem), calc(100% - 0.7rem) calc(50% - 0.13rem); background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; backdrop-filter: blur(8px); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .preset-editor__select-glass[data-v-6e65ed27]:focus { border-color: rgba(59, 130, 246, 0.7); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); background-color: rgba(15, 23, 42, 0.5); } .pid-library__actions[data-v-6e65ed27] { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; } .pid-library__action-primary[data-v-6e65ed27] { padding: 0.7rem 1.75rem; border-radius: 999px; border: none; color: #fff; font-weight: 800; transition: transform 0.18s ease, box-shadow 0.18s ease; } .pid-library__action-primary[data-v-6e65ed27]:hover:enabled { transform: translateY(-2px); } .pid-library__action-primary[data-v-6e65ed27]:disabled { opacity: 0.6; cursor: not-allowed; } .pid-library__action-secondary[data-v-6e65ed27] { border-radius: 999px; padding: 0.65rem 1.35rem; } .commissioning-loader[data-v-4c47a429] { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, rgba(9, 12, 16, 0.98), rgba(21, 23, 24, 0.96)), #090c10; color: #eef4ef; } .commissioning-loader__backplane[data-v-4c47a429] { position: absolute; inset: 0; background: linear-gradient(rgba(124, 145, 132, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 145, 132, 0.055) 1px, transparent 1px), radial-gradient(circle at 22% 28%, rgba(70, 182, 126, 0.14), transparent 30%), radial-gradient(circle at 78% 68%, rgba(238, 182, 85, 0.12), transparent 34%); background-size: 42px 42px, 42px 42px, 100% 100%, 100% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent); mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent); } .commissioning-loader__shell[data-v-4c47a429] { position: relative; width: min(680px, calc(100vw - 32px)); border: 1px solid rgba(184, 196, 186, 0.18); border-radius: 8px; background: rgba(12, 16, 18, 0.84); box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06); backdrop-filter: blur(18px); } .commissioning-loader__header[data-v-4c47a429] { display: flex; align-items: center; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid rgba(184, 196, 186, 0.12); } .commissioning-loader__mark[data-v-4c47a429] { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(76, 200, 136, 0.38); border-radius: 8px; background: rgba(25, 33, 30, 0.92); box-shadow: 0 0 26px rgba(76, 200, 136, 0.18); color: #9af2bd; font-size: 0.78rem; font-weight: 700; } .commissioning-loader__mark img[data-v-4c47a429] { width: 42px; height: 42px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .commissioning-loader__eyebrow[data-v-4c47a429] { margin: 0 0 4px; color: #9fb0a5; font-size: 0.72rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .commissioning-loader h1[data-v-4c47a429] { margin: 0; color: #f4f7f2; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 650; letter-spacing: 0; line-height: 1.1; } .commissioning-loader__body[data-v-4c47a429] { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr); gap: 18px; padding: 20px 24px 22px; } .commissioning-loader__ladder[data-v-4c47a429] { position: relative; min-height: 220px; border: 1px solid rgba(184, 196, 186, 0.13); border-radius: 8px; background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px), rgba(5, 8, 9, 0.42); background-size: 28px 28px; overflow: hidden; } .commissioning-loader__rail[data-v-4c47a429] { position: absolute; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(to bottom, rgba(184, 196, 186, 0.18), rgba(184, 196, 186, 0.56), rgba(184, 196, 186, 0.18)); } .commissioning-loader__rail--left[data-v-4c47a429] { left: 30px; } .commissioning-loader__rail--right[data-v-4c47a429] { right: 30px; } .commissioning-loader__wire[data-v-4c47a429] { position: absolute; top: 99px; height: 2px; background: rgba(132, 151, 140, 0.5); } .commissioning-loader__wire--in[data-v-4c47a429] { left: 31px; right: calc(50% + 28px); } .commissioning-loader__wire--out[data-v-4c47a429] { left: calc(50% + 58px); right: 31px; } .commissioning-loader__contact[data-v-4c47a429] { position: absolute; top: 74px; left: 50%; width: 90px; height: 52px; transform: translateX(-118px); border: 1px solid rgba(184, 196, 186, 0.28); border-radius: 6px; background: rgba(12, 18, 18, 0.96); color: #e8efe9; font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .commissioning-loader__contact[data-v-4c47a429]::before, .commissioning-loader__contact[data-v-4c47a429]::after { content: ""; position: absolute; top: 10px; width: 2px; height: 30px; background: currentColor; opacity: 0.7; } .commissioning-loader__contact[data-v-4c47a429]::before { left: 26px; transform: rotate(12deg); } .commissioning-loader__contact[data-v-4c47a429]::after { right: 26px; transform: rotate(-12deg); } .commissioning-loader__coil[data-v-4c47a429] { position: absolute; top: 74px; left: calc(50% + 18px); display: grid; place-items: center; width: 70px; height: 52px; border: 1px solid rgba(184, 196, 186, 0.28); border-radius: 6px; color: rgba(232, 239, 233, 0.82); } .commissioning-loader__coil[data-v-4c47a429]::before, .commissioning-loader__coil[data-v-4c47a429]::after { content: ""; position: absolute; top: 13px; width: 2px; height: 26px; background: currentColor; opacity: 0.8; } .commissioning-loader__coil[data-v-4c47a429]::before { left: 16px; } .commissioning-loader__coil[data-v-4c47a429]::after { right: 16px; } .commissioning-loader__coil span[data-v-4c47a429] { position: absolute; width: 18px; height: 28px; border: 2px solid currentColor; border-left: 0; border-radius: 0 999px 999px 0; } .commissioning-loader__coil span[data-v-4c47a429]:first-child { left: 23px; } .commissioning-loader__coil span[data-v-4c47a429]:last-child { right: 23px; transform: rotate(180deg); } .commissioning-loader__tag[data-v-4c47a429] { position: absolute; margin: 0; color: #9fb0a5; font-size: 0.72rem; } .commissioning-loader__tag--input[data-v-4c47a429] { top: 136px; left: calc(50% - 154px); } .commissioning-loader__tag--coil[data-v-4c47a429] { top: 136px; left: calc(50% + 8px); } .commissioning-loader__ladder.is-energized .commissioning-loader__wire[data-v-4c47a429], .commissioning-loader__ladder.is-energized .commissioning-loader__contact[data-v-4c47a429], .commissioning-loader__ladder.is-energized .commissioning-loader__coil[data-v-4c47a429] { color: #96f1b5; border-color: rgba(150, 241, 181, 0.62); background-color: rgba(17, 45, 33, 0.82); box-shadow: 0 0 18px rgba(76, 200, 136, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .commissioning-loader__ladder.is-energized .commissioning-loader__wire[data-v-4c47a429] { background: linear-gradient(90deg, #6ddf9f, #eeb655, #6ddf9f); background-size: 220% 100%; animation: commissioning-wire-flow-4c47a429 1.15s linear infinite; } .commissioning-loader__phases[data-v-4c47a429] { display: grid; gap: 9px; align-content: start; margin: 0; padding: 0; list-style: none; } .commissioning-loader__phase[data-v-4c47a429] { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 42px; padding: 0 12px; border: 1px solid rgba(184, 196, 186, 0.12); border-radius: 6px; background: rgba(255, 255, 255, 0.035); } .commissioning-loader__phase-led[data-v-4c47a429], .commissioning-loader__status-led[data-v-4c47a429] { width: 9px; height: 9px; border-radius: 999px; background: #526057; box-shadow: 0 0 0 4px rgba(82, 96, 87, 0.12); } .commissioning-loader__phase-label[data-v-4c47a429] { min-width: 0; color: #e8efe9; font-size: 0.84rem; font-weight: 650; } .commissioning-loader__phase-state[data-v-4c47a429] { color: #9fb0a5; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; } .commissioning-loader__phase[data-state="done"] .commissioning-loader__phase-led[data-v-4c47a429] { background: #7be7a7; box-shadow: 0 0 0 4px rgba(123, 231, 167, 0.12), 0 0 14px rgba(123, 231, 167, 0.42); } .commissioning-loader__phase[data-state="active"][data-v-4c47a429] { border-color: rgba(238, 182, 85, 0.38); background: rgba(238, 182, 85, 0.07); } .commissioning-loader__phase[data-state="active"] .commissioning-loader__phase-led[data-v-4c47a429], .commissioning-loader__status-led[data-v-4c47a429] { background: #eeb655; box-shadow: 0 0 0 4px rgba(238, 182, 85, 0.12), 0 0 16px rgba(238, 182, 85, 0.48); animation: commissioning-led-breathe-4c47a429 1.45s ease-in-out infinite; } .commissioning-loader__phase[data-state="error"] .commissioning-loader__phase-led[data-v-4c47a429] { background: #f77777; box-shadow: 0 0 0 4px rgba(247, 119, 119, 0.12), 0 0 16px rgba(247, 119, 119, 0.4); } .commissioning-loader__footer[data-v-4c47a429] { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-top: 1px solid rgba(184, 196, 186, 0.12); color: #cfd8d1; font-size: 0.82rem; } @keyframes commissioning-wire-flow-4c47a429 { from { background-position: 0 0; } to { background-position: 220% 0; } } @keyframes commissioning-led-breathe-4c47a429 { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @media (max-width: 680px) { .commissioning-loader__shell[data-v-4c47a429] { width: min(420px, calc(100vw - 24px)); } .commissioning-loader__body[data-v-4c47a429] { grid-template-columns: 1fr; padding: 16px; } .commissioning-loader__header[data-v-4c47a429], .commissioning-loader__footer[data-v-4c47a429] { padding-left: 16px; padding-right: 16px; } } @media (prefers-reduced-motion: reduce) { .commissioning-loader__ladder.is-energized .commissioning-loader__wire[data-v-4c47a429], .commissioning-loader__phase[data-state="active"] .commissioning-loader__phase-led[data-v-4c47a429], .commissioning-loader__status-led[data-v-4c47a429] { animation: none; } } .vr-container[data-v-c2d2f0f4] { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; display: block; } /* En mode plein écran */ .vr-container[data-v-c2d2f0f4]:fullscreen { width: 100vw; height: 100vh; } .vr-container:fullscreen .canvas-container[data-v-c2d2f0f4] { width: 100vw !important; height: 100vh !important; } /* Style du bouton plein écran */ .fullscreen-btn[data-v-c2d2f0f4] { position: absolute; top: 20px; right: 20px; z-index: 100; background: rgba(0, 0, 0, 0.5); border: none; color: white; padding: 10px; border-radius: 5px; cursor: pointer; font-size: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; } .fullscreen-btn[data-v-c2d2f0f4]:hover { background: rgba(0, 0, 0, 0.7); } .canvas-container[data-v-c2d2f0f4] { width: 100%; height: 100%; margin: 0; padding: 0; } /* Loading Screen */ .loading-screen[data-v-c2d2f0f4] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #000814, #0d1b2a); color: #ffd60a; text-align: center; z-index: 10; display: flex; justify-content: center; align-items: center; flex-direction: column; } .loading-logo-container[data-v-c2d2f0f4] { display: flex; flex-direction: column; align-items: center; } .loading-text[data-v-c2d2f0f4] { margin-top: 20px; font-size: 24px; color: #ffd60a; } /* Circular progress bar */ .progress-circle[data-v-c2d2f0f4] { width: 150px; height: 150px; transform: rotate(-90deg); } .circle-bg[data-v-c2d2f0f4] { fill: none; stroke: #444; stroke-width: 2.8; } .circle[data-v-c2d2f0f4] { fill: none; stroke: #ffd60a; stroke-width: 2.8; stroke-linecap: round; transition: stroke-dashoffset 0.3s; } .loading-screen[data-v-b27525aa] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #000814, #0d1b2a); color: #ffd60a; text-align: center; z-index: 10; display: flex; justify-content: center; align-items: center; flex-direction: column; } .loading-logo-container[data-v-b27525aa] { display: flex; flex-direction: column; align-items: center; } .loading-text[data-v-b27525aa] { margin-top: 20px; font-size: 24px; color: #ffd60a; } /* Circular progress bar */ .progress-circle[data-v-b27525aa] { width: 150px; height: 150px; transform: rotate(-90deg); } .circle-bg[data-v-b27525aa] { fill: none; stroke: #444; stroke-width: 2.8; } .circle[data-v-b27525aa] { fill: none; stroke: #ffd60a; stroke-width: 2.8; stroke-linecap: round; transition: stroke-dashoffset 0.3s; } /* Volume Controls */ .controls[data-v-7b9958be] { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; z-index: 100; gap: 15px; /* Espacement entre les éléments */ } /* Volume Slider */ .volume-control[data-v-7b9958be] { display: flex; align-items: center; background-color: rgba(0, 0, 0, 0.6); border-radius: 20px; padding: 5px 10px; } .volume-slider[data-v-7b9958be] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100px; height: 5px; border-radius: 5px; background: #d3d3d3; outline: none; margin-right: 10px; } .volume-slider[data-v-7b9958be]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: white; cursor: pointer; } .volume-slider[data-v-7b9958be]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: white; cursor: pointer; } .volume-icon[data-v-7b9958be] { display: flex; align-items: center; } .volume-icon svg[data-v-7b9958be] { width: 20px; height: 20px; } /* Style des boutons de contrôle */ .control-btn[data-v-7b9958be] { background: rgba(0, 0, 0, 0.6); border: none; width: 44px; height: 44px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .control-btn[data-v-7b9958be]:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.05); } .control-btn svg[data-v-7b9958be] { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .control-btn.active[data-v-7b9958be] { background: rgba(0, 0, 0, 0.8); } /* Styles spécifiques pour le bouton menu */ .menu-btn svg[data-v-7b9958be] { width: 24px; height: 24px; } /* Styles for Start and Stop buttons */ .start-btn[data-v-7b9958be] { background-color: rgba(46, 204, 113, 0.7); /* Green with opacity */ } .start-btn[data-v-7b9958be]:hover { background-color: rgba(39, 174, 96, 0.9); /* Darker green on hover */ } .stop-btn[data-v-7b9958be] { background-color: rgba(231, 76, 60, 0.7); /* Red with opacity */ } .stop-btn[data-v-7b9958be]:hover { background-color: rgba(192, 57, 43, 0.9); /* Darker red on hover */ } /* Language Selector Styles */ .language-selector[data-v-7b9958be] { position: relative; display: inline-block; } .language-btn[data-v-7b9958be] { position: relative; } .language-btn .flag[data-v-7b9958be] { font-size: 24px; line-height: 1; display: block; } /* Nouveau dropdown CSS */ .language-dropdown-new[data-v-7b9958be] { position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 999999; min-width: 160px; max-width: 200px; } .dropdown-content[data-v-7b9958be] { background: rgba(0, 0, 0, 0.95); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); overflow: hidden; animation: dropdownFadeIn-7b9958be 0.2s ease-out; } .dropdown-option[data-v-7b9958be] { display: flex; align-items: center; width: 100%; padding: 8px 12px; border: none; background: transparent; color: white; cursor: pointer; transition: all 0.2s ease; font-size: 13px; text-align: left; gap: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .dropdown-option[data-v-7b9958be]:last-child { border-bottom: none; } .dropdown-option[data-v-7b9958be]:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(2px); } .dropdown-option-active[data-v-7b9958be] { background: rgba(255, 215, 0, 0.15); color: #FFD700; font-weight: 600; } .dropdown-flag[data-v-7b9958be] { font-size: 16px; flex-shrink: 0; width: 20px; text-align: center; } .dropdown-name[data-v-7b9958be] { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @keyframes dropdownFadeIn-7b9958be { from { opacity: 0; transform: translateY(-10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Animation d'apparition pour le dropdown */ .language-dropdown[data-v-7b9958be] { animation: fadeInScale-7b9958be 0.2s ease-out; } @keyframes fadeInScale-7b9958be { from { opacity: 0; transform: scale(0.95) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Desktop Todo List Styles */ .desktop-todo[data-v-7b9958be] { position: absolute; top: 20px; left: 20px; z-index: 100; max-width: 400px; } .todo-content[data-v-7b9958be] { display: flex; align-items: center; gap: 12px; background: rgba(0, 0, 0, 0.6); border-radius: 8px; padding: 12px 16px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .todo-content[data-v-7b9958be]:hover { background: rgba(0, 0, 0, 0.7); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .todo-content.completed[data-v-7b9958be] { background: rgba(76, 175, 80, 0.2); border-color: rgba(76, 175, 80, 0.3); } .todo-icon[data-v-7b9958be] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .todo-icon svg[data-v-7b9958be] { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .todo-text[data-v-7b9958be] { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; /* Pour permettre le text-overflow */ } .todo-label[data-v-7b9958be] { font-size: 11px; color: rgba(255, 255, 255, 0.7); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .todo-description[data-v-7b9958be] { font-size: 14px; color: white; font-weight: 500; line-height: 1.3; word-wrap: break-word; overflow-wrap: break-word; } .todo-content.completed .todo-description[data-v-7b9958be] { color: #4CAF50; font-weight: 600; } /* Animation d'apparition pour la todo-list */ .desktop-todo[data-v-7b9958be] { animation: slideInFromLeft-7b9958be 0.3s ease-out; } @keyframes slideInFromLeft-7b9958be { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .scenario-content[data-v-9f6d7d47] { color: white !important; } h3[data-v-9f6d7d47] { color: #FFD700 !important; margin-bottom: 1rem; } p[data-v-9f6d7d47] { color: white !important; margin-bottom: 1rem; } .chapter-list[data-v-9f6d7d47] { display: flex; flex-direction: column; gap: 2rem; padding: 1rem; } .chapter-card[data-v-9f6d7d47] { display: flex; gap: 2rem; background: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; cursor: pointer; } .chapter-card[data-v-9f6d7d47]:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .chapter-image-container[data-v-9f6d7d47] { width: 200px; height: 150px; overflow: hidden; border-radius: 6px; flex-shrink: 0; } .chapter-image[data-v-9f6d7d47] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .chapter-content[data-v-9f6d7d47] { flex: 1; display: flex; flex-direction: column; justify-content: center; } .chapter-content h3[data-v-9f6d7d47] { font-size: 1.5rem; margin-bottom: 0.5rem; } .chapter-content p[data-v-9f6d7d47] { font-size: 1rem; opacity: 0.9; line-height: 1.5; } .chapter-pages-info[data-v-9f6d7d47] { margin-top: 1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .vr-container[data-v-9ecb100a] { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; display: block; } /* In full screen mode */ .vr-container[data-v-9ecb100a]:fullscreen { width: 100vw; height: 100vh; } .vr-container:fullscreen .canvas-container[data-v-9ecb100a] { width: 100vw !important; height: 100vh !important; } .canvas-container[data-v-9ecb100a] { width: 100%; height: 100%; margin: 0; padding: 0; transition: opacity 0.5s ease; } /* Style of the sound button */ .sound-btn[data-v-9ecb100a] { position: absolute; bottom: 20px; right: 80px; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; } .sound-btn svg[data-v-9ecb100a] { width: 30px; height: 30px; } /* Add the style for the debug info */ .debug-info[data-v-9ecb100a] { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; border-radius: 5px; font-size: 12px; z-index: 100; } .overlay-header[data-v-9ecb100a] { margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; } .overlay-header h2[data-v-9ecb100a] { margin: 0; font-size: 1.2em; } .current-diagram[data-v-9ecb100a] { font-size: 0.9em; color: #aaa; } .control-group[data-v-9ecb100a] { display: flex; gap: 10px; margin-bottom: 10px; } .vr-button[data-v-9ecb100a] { background: #4a90e2; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .vr-button[data-v-9ecb100a]:hover { background: #357abd; } .vr-button[data-v-9ecb100a]:active { background: #2d6da3; } .desktop-tutorial-panel[data-v-9ecb100a] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 108vw; /* Augmenté de 20% (90vw * 1.2 = 108vw) */ max-width: 960px; /* Augmenté de 20% (800px * 1.2 = 960px) */ height: 90vh; max-height: 600px; background: rgba(0, 0, 0, 0.85); border-radius: 12px; backdrop-filter: blur(10px); z-index: 1000; color: white !important; /* Force white color */ box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.1); } .desktop-tutorial-panel[data-v-9ecb100a] * { color: white !important; } .desktop-tutorial-panel h3[data-v-9ecb100a] { color: #FFD700 !important; } .desktop-tutorial-panel p[data-v-9ecb100a], .desktop-tutorial-panel li[data-v-9ecb100a], .desktop-tutorial-panel span[data-v-9ecb100a], .desktop-tutorial-panel div[data-v-9ecb100a] { color: white !important; } .tutorial-content[data-v-9ecb100a] { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 1.25rem; overflow: hidden; } .tutorial-header[data-v-9ecb100a] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9375rem; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; } .tutorial-header h2[data-v-9ecb100a] { margin: 0; font-size: 1.5em; color: white !important; } .close-btn[data-v-9ecb100a] { background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; } .close-btn svg[data-v-9ecb100a] { width: 24px; height: 24px; } .tutorial-body[data-v-9ecb100a] { flex: 1; overflow-y: auto; /* Allow scrolling */ display: flex; flex-direction: column; position: relative; /* min-height: 50vh; Remove fixed min-height */ padding-right: 0.5rem; /* Pour le scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } /* Style personnalisé pour la scrollbar */ .tutorial-body[data-v-9ecb100a]::-webkit-scrollbar { width: 0.5rem; } .tutorial-body[data-v-9ecb100a]::-webkit-scrollbar-track { background: transparent; } .tutorial-body[data-v-9ecb100a]::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 0.625rem; } /* Optimisation des images dans le tutoriel */ .tutorial-body .image-container[data-v-9ecb100a] { width: 100%; display: flex; justify-content: center; align-items: center; margin: 0.9375rem 0; padding: 0.625rem; background-color: rgba(0, 0, 0, 0.3); border-radius: 0.5rem; overflow: hidden; } .tutorial-body .tutorial-image[data-v-9ecb100a] { max-width: 100%; max-height: 43vh; /* Slightly less than container */ -o-object-fit: contain; object-fit: contain; border-radius: 0.375rem; } .nav-buttons-container[data-v-9ecb100a] { display: flex; justify-content: space-between; /* Use space-between for alignment */ align-items: center; width: 100%; /* Take full width */ gap: 1rem; /* Add gap between buttons */ } .nav-button[data-v-9ecb100a], .summary-button[data-v-9ecb100a] { min-width: 6.25rem; height: 2.5rem; } .prev-button[data-v-9ecb100a] { margin-right: auto; } .next-button[data-v-9ecb100a] { margin-left: auto; } .tutorial-navigation[data-v-9ecb100a] { /* position: sticky; Remove sticky positioning if causing issues */ /* bottom: 0; */ /* left: 0; */ /* right: 0; */ background-color: rgba(0, 0, 0, 0.8); /* Ensure background */ padding: 0.9375rem 1.25rem; margin-top: auto; /* Pushes to bottom of flex container */ border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; z-index: 10; flex-shrink: 0; /* Prevent shrinking */ } .tutorial-navigation button[data-v-9ecb100a] { background: rgba(255, 255, 255, 0.2); border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; color: white; cursor: pointer; transition: background-color 0.2s; font-size: 0.875rem; } .tutorial-navigation button[data-v-9ecb100a]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.3); } .tutorial-navigation button[data-v-9ecb100a]:disabled { opacity: 0.5; cursor: not-allowed; } .tutorial-navigation span[data-v-9ecb100a] { color: white; } /* Styles pour la mise en page en deux colonnes du tutoriel */ .tutorial-two-columns[data-v-9ecb100a] { display: flex; flex-direction: row; height: 100%; gap: 20px; } .tutorial-image-column[data-v-9ecb100a] { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 8px; background-color: rgba(0, 0, 0, 0.2); } .tutorial-text-column[data-v-9ecb100a] { flex: 1.5; overflow-y: auto; padding-right: 10px; } .tutorial-image[data-v-9ecb100a] { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } /* Media query pour les petits écrans */ @media (max-width: 768px) { .tutorial-two-columns[data-v-9ecb100a] { flex-direction: column; } .tutorial-image-column[data-v-9ecb100a] { max-height: 40vh; } .tutorial-text-column[data-v-9ecb100a] { max-height: 50vh; } .desktop-tutorial-panel[data-v-9ecb100a] { width: 98vw; /* Slightly wider */ height: 98vh; /* Slightly taller */ border-radius: 0.5rem; } .tutorial-content[data-v-9ecb100a] { padding: 0.75rem; } .tutorial-header h2[data-v-9ecb100a] { font-size: 1.2rem; } .tutorial-body .image-container[data-v-9ecb100a] { min-height: 20vh; } .nav-button[data-v-9ecb100a], .summary-button[data-v-9ecb100a] { min-width: 4.5rem; font-size: 0.8rem; padding: 0.3rem 0.5rem; } .tutorial-navigation[data-v-9ecb100a] { padding: 0.75rem 0.5rem; } } .nav-button[data-v-9ecb100a] { background-color: rgba(255, 215, 0, 0.3); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; margin: 0 0.5rem; } .nav-button[data-v-9ecb100a]:hover:not(:disabled) { background-color: rgba(255, 215, 0, 0.5); } .nav-button[data-v-9ecb100a]:disabled { opacity: 0.3; cursor: not-allowed; } .page-indicator[data-v-9ecb100a] { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0 1rem; } .navigation-controls[data-v-9ecb100a] { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); } .summary-button[data-v-9ecb100a] { margin-left: auto; background-color: rgba(100, 149, 237, 0.3); /* Couleur bleu cornflower */ } .summary-button[data-v-9ecb100a]:hover { background-color: rgba(100, 149, 237, 0.5); } .tutorial-text-column[data-v-9ecb100a] { color: white !important; } .tutorial-text-column h3[data-v-9ecb100a], .tutorial-text-column p[data-v-9ecb100a], .tutorial-text-column li[data-v-9ecb100a], .tutorial-text-column div[data-v-9ecb100a] { color: white !important; } /* Ajouter des styles spécifiques pour les listes et éléments de liste */ .tutorial-text-column ul[data-v-9ecb100a], .tutorial-text-column ol[data-v-9ecb100a] { color: white !important; list-style-position: inside; margin-left: 1.5rem; } .tutorial-text-column li[data-v-9ecb100a] { margin-bottom: 0.5rem; } .chapter-view[data-v-9ecb100a] { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 500px; } .tutorial-content-container[data-v-9ecb100a] { flex: 1; overflow: hidden; position: relative; min-height: 400px; display: flex; flex-direction: column; } .tutorial-two-columns[data-v-9ecb100a] { display: flex; flex-direction: row; flex: 1; overflow: hidden; } .tutorial-image-column[data-v-9ecb100a] { flex: 0.7; /* Augmentation de 0.5 à 0.7 (40% de plus) */ display: flex; justify-content: center; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; margin-right: 1rem; } .tutorial-text-column[data-v-9ecb100a] { flex: 1; padding: 1rem; overflow-y: auto; max-height: 65vh; color: white !important; } .tutorial-image[data-v-9ecb100a] { max-width: 100%; max-height: 65vh; -o-object-fit: contain; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navigation-controls[data-v-9ecb100a] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; margin: 0.5rem 0; z-index: 10; } .top-controls[data-v-9ecb100a] { margin-bottom: 1rem; } .bottom-controls[data-v-9ecb100a] { margin-top: 1rem; } .navigation-controls[data-v-9ecb100a] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.4); border-radius: 8px; z-index: 20; width: 100%; margin-top: 0; border-top: none; } .top-controls[data-v-9ecb100a] { display: none; /* Masquer les contrôles du haut */ } .bottom-controls[data-v-9ecb100a] { position: sticky; bottom: 0; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0 0 12px 12px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); } /* Remplacer tous les styles de .navigation-controls précédents par cette version unifiée */ .navigation-controls[data-v-9ecb100a] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 8px; z-index: 20; width: 100%; } .top-controls[data-v-9ecb100a] { display: none; /* Masquer les contrôles du haut */ } .bottom-controls[data-v-9ecb100a] { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 920px; /* 20% plus large que 800px */ margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); } #tutorial-container[data-v-9ecb100a] { color: white !important; } #tutorial-container[data-v-9ecb100a] * { color: white !important; } #tutorial-container h3[data-v-9ecb100a] { color: #FFD700 !important; } /* Styles spécifiques pour la vue desktop */ .tutorial-body[data-v-9ecb100a] { color: white !important; } .tutorial-body p[data-v-9ecb100a], .tutorial-body li[data-v-9ecb100a], .tutorial-body div[data-v-9ecb100a], .tutorial-body span[data-v-9ecb100a] { color: white !important; font-size: 1.05rem; line-height: 1.6; } .tutorial-body h3[data-v-9ecb100a] { color: #FFD700 !important; font-size: 1.5rem; margin-bottom: 1rem; } /* Amélioration de l'espace de contenu */ .chapter-view[data-v-9ecb100a] { padding-bottom: 80px; /* Espace pour les boutons fixes en bas */ } /* Styles pour les titres */ .tutorial-header h2[data-v-9ecb100a] { color: #FFD700 !important; /* Jaune doré */ font-size: 1.8rem; } .chapter-title[data-v-9ecb100a] { color: #FFD700 !important; } /* Uniformisation des titres h3 avec les titres du SUMMARY */ .tutorial-text-column h3[data-v-9ecb100a] { color: #FFD700 !important; font-size: 1.5rem !important; /* Même taille que dans SUMMARY */ margin-bottom: 1rem; font-weight: bold; } /* Assurer que tous les styles de titres sont cohérents */ .tutorial-body h3[data-v-9ecb100a] { color: #FFD700 !important; font-size: 1.5rem !important; margin-bottom: 1rem; font-weight: bold; } .scenario-content[data-v-50757f54] { color: white !important; } h3[data-v-50757f54] { color: #FFD700 !important; margin-bottom: 1rem; } p[data-v-50757f54] { color: white !important; margin-bottom: 1rem; } .chapter-list[data-v-50757f54] { display: flex; flex-direction: column; gap: 2rem; padding: 1rem; } .chapter-card[data-v-50757f54] { display: flex; gap: 2rem; background: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; cursor: pointer; } .chapter-card[data-v-50757f54]:hover { transform: translateY(-2px); border-color: rgba(255, 215, 0, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .chapter-image-container[data-v-50757f54] { width: 200px; height: 150px; overflow: hidden; border-radius: 6px; flex-shrink: 0; } .chapter-image[data-v-50757f54] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .chapter-content[data-v-50757f54] { flex: 1; display: flex; flex-direction: column; justify-content: center; } .chapter-content h3[data-v-50757f54] { font-size: 1.5rem; margin-bottom: 0.5rem; } .chapter-content p[data-v-50757f54] { font-size: 1rem; opacity: 0.9; line-height: 1.5; } .chapter-pages-info[data-v-50757f54] { margin-top: 1rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); } .vr-container[data-v-caf17f17] { width: 100%; height: 100%; position: relative; margin: 0; padding: 0; display: block; } /* In full screen mode */ .vr-container[data-v-caf17f17]:fullscreen { width: 100vw; height: 100vh; } .vr-container:fullscreen .canvas-container[data-v-caf17f17] { width: 100vw !important; height: 100vh !important; } .canvas-container[data-v-caf17f17] { width: 100%; height: 100%; margin: 0; padding: 0; transition: opacity 0.5s ease; } /* Style of the sound button */ .sound-btn[data-v-caf17f17] { position: absolute; bottom: 20px; right: 80px; background-color: rgba(0, 0, 0, 0.5); border: none; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 100; } .sound-btn svg[data-v-caf17f17] { width: 30px; height: 30px; } /* Add the style for the debug info */ .debug-info[data-v-caf17f17] { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px; border-radius: 5px; font-size: 12px; z-index: 100; } .overlay-header[data-v-caf17f17] { margin-bottom: 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 10px; } .overlay-header h2[data-v-caf17f17] { margin: 0; font-size: 1.2em; } .current-diagram[data-v-caf17f17] { font-size: 0.9em; color: #aaa; } .control-group[data-v-caf17f17] { display: flex; gap: 10px; margin-bottom: 10px; } .vr-button[data-v-caf17f17] { background: #4a90e2; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: background 0.3s; } .vr-button[data-v-caf17f17]:hover { background: #357abd; } .vr-button[data-v-caf17f17]:active { background: #2d6da3; } .desktop-tutorial-panel[data-v-caf17f17] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 108vw; /* Augmenté de 20% (90vw * 1.2 = 108vw) */ max-width: 960px; /* Augmenté de 20% (800px * 1.2 = 960px) */ height: 90vh; max-height: 600px; background: rgba(0, 0, 0, 0.85); border-radius: 12px; backdrop-filter: blur(10px); z-index: 1000; color: white !important; /* Force white color */ box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.1); } .desktop-tutorial-panel[data-v-caf17f17] * { color: white !important; } .desktop-tutorial-panel h3[data-v-caf17f17] { color: #FFD700 !important; } .desktop-tutorial-panel p[data-v-caf17f17], .desktop-tutorial-panel li[data-v-caf17f17], .desktop-tutorial-panel span[data-v-caf17f17], .desktop-tutorial-panel div[data-v-caf17f17] { color: white !important; } .tutorial-content[data-v-caf17f17] { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 1.25rem; overflow: hidden; } .tutorial-header[data-v-caf17f17] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9375rem; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; } .tutorial-header h2[data-v-caf17f17] { margin: 0; font-size: 1.5em; color: white !important; } .close-btn[data-v-caf17f17] { background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; } .close-btn svg[data-v-caf17f17] { width: 24px; height: 24px; } .tutorial-body[data-v-caf17f17] { flex: 1; overflow-y: auto; /* Allow scrolling */ display: flex; flex-direction: column; position: relative; /* min-height: 50vh; Remove fixed min-height */ padding-right: 0.5rem; /* Pour le scrollbar */ scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; } /* Style personnalisé pour la scrollbar */ .tutorial-body[data-v-caf17f17]::-webkit-scrollbar { width: 0.5rem; } .tutorial-body[data-v-caf17f17]::-webkit-scrollbar-track { background: transparent; } .tutorial-body[data-v-caf17f17]::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 0.625rem; } /* Optimisation des images dans le tutoriel */ .tutorial-body .image-container[data-v-caf17f17] { width: 100%; display: flex; justify-content: center; align-items: center; margin: 0.9375rem 0; padding: 0.625rem; background-color: rgba(0, 0, 0, 0.3); border-radius: 0.5rem; overflow: hidden; } .tutorial-body .tutorial-image[data-v-caf17f17] { max-width: 100%; max-height: 43vh; /* Slightly less than container */ -o-object-fit: contain; object-fit: contain; border-radius: 0.375rem; } .nav-buttons-container[data-v-caf17f17] { display: flex; justify-content: space-between; /* Use space-between for alignment */ align-items: center; width: 100%; /* Take full width */ gap: 1rem; /* Add gap between buttons */ } .nav-button[data-v-caf17f17], .summary-button[data-v-caf17f17] { min-width: 6.25rem; height: 2.5rem; } .prev-button[data-v-caf17f17] { margin-right: auto; } .next-button[data-v-caf17f17] { margin-left: auto; } .tutorial-navigation[data-v-caf17f17] { /* position: sticky; Remove sticky positioning if causing issues */ /* bottom: 0; */ /* left: 0; */ /* right: 0; */ background-color: rgba(0, 0, 0, 0.8); /* Ensure background */ padding: 0.9375rem 1.25rem; margin-top: auto; /* Pushes to bottom of flex container */ border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; justify-content: center; align-items: center; z-index: 10; flex-shrink: 0; /* Prevent shrinking */ } .tutorial-navigation button[data-v-caf17f17] { background: rgba(255, 255, 255, 0.2); border: none; padding: 0.5rem 1rem; border-radius: 0.25rem; color: white; cursor: pointer; transition: background-color 0.2s; font-size: 0.875rem; } .tutorial-navigation button[data-v-caf17f17]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.3); } .tutorial-navigation button[data-v-caf17f17]:disabled { opacity: 0.5; cursor: not-allowed; } .tutorial-navigation span[data-v-caf17f17] { color: white; } /* Styles pour la mise en page en deux colonnes du tutoriel */ .tutorial-two-columns[data-v-caf17f17] { display: flex; flex-direction: row; height: 100%; gap: 20px; } .tutorial-image-column[data-v-caf17f17] { flex: 1; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 8px; background-color: rgba(0, 0, 0, 0.2); } .tutorial-text-column[data-v-caf17f17] { flex: 1.5; overflow-y: auto; padding-right: 10px; } .tutorial-image[data-v-caf17f17] { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } /* Media query pour les petits écrans */ @media (max-width: 768px) { .tutorial-two-columns[data-v-caf17f17] { flex-direction: column; } .tutorial-image-column[data-v-caf17f17] { max-height: 40vh; } .tutorial-text-column[data-v-caf17f17] { max-height: 50vh; } .desktop-tutorial-panel[data-v-caf17f17] { width: 98vw; /* Slightly wider */ height: 98vh; /* Slightly taller */ border-radius: 0.5rem; } .tutorial-content[data-v-caf17f17] { padding: 0.75rem; } .tutorial-header h2[data-v-caf17f17] { font-size: 1.2rem; } .tutorial-body .image-container[data-v-caf17f17] { min-height: 20vh; } .nav-button[data-v-caf17f17], .summary-button[data-v-caf17f17] { min-width: 4.5rem; font-size: 0.8rem; padding: 0.3rem 0.5rem; } .tutorial-navigation[data-v-caf17f17] { padding: 0.75rem 0.5rem; } } .nav-button[data-v-caf17f17] { background-color: rgba(255, 215, 0, 0.3); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; margin: 0 0.5rem; } .nav-button[data-v-caf17f17]:hover:not(:disabled) { background-color: rgba(255, 215, 0, 0.5); } .nav-button[data-v-caf17f17]:disabled { opacity: 0.3; cursor: not-allowed; } .page-indicator[data-v-caf17f17] { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; margin: 0 1rem; } .navigation-controls[data-v-caf17f17] { display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.2); } .summary-button[data-v-caf17f17] { margin-left: auto; background-color: rgba(100, 149, 237, 0.3); /* Couleur bleu cornflower */ } .summary-button[data-v-caf17f17]:hover { background-color: rgba(100, 149, 237, 0.5); } .tutorial-text-column[data-v-caf17f17] { color: white !important; } .tutorial-text-column h3[data-v-caf17f17], .tutorial-text-column p[data-v-caf17f17], .tutorial-text-column li[data-v-caf17f17], .tutorial-text-column div[data-v-caf17f17] { color: white !important; } /* Ajouter des styles spécifiques pour les listes et éléments de liste */ .tutorial-text-column ul[data-v-caf17f17], .tutorial-text-column ol[data-v-caf17f17] { color: white !important; list-style-position: inside; margin-left: 1.5rem; } .tutorial-text-column li[data-v-caf17f17] { margin-bottom: 0.5rem; } .chapter-view[data-v-caf17f17] { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 500px; } .tutorial-content-container[data-v-caf17f17] { flex: 1; overflow: hidden; position: relative; min-height: 400px; display: flex; flex-direction: column; } .tutorial-two-columns[data-v-caf17f17] { display: flex; flex-direction: row; flex: 1; overflow: hidden; } .tutorial-image-column[data-v-caf17f17] { flex: 0.7; /* Augmentation de 0.5 à 0.7 (40% de plus) */ display: flex; justify-content: center; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; margin-right: 1rem; } .tutorial-text-column[data-v-caf17f17] { flex: 1; padding: 1rem; overflow-y: auto; max-height: 65vh; color: white !important; } .tutorial-image[data-v-caf17f17] { max-width: 100%; max-height: 65vh; -o-object-fit: contain; object-fit: contain; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .navigation-controls[data-v-caf17f17] { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; background-color: rgba(0, 0, 0, 0.2); border-radius: 8px; margin: 0.5rem 0; z-index: 10; } .top-controls[data-v-caf17f17] { margin-bottom: 1rem; } .bottom-controls[data-v-caf17f17] { margin-top: 1rem; } .navigation-controls[data-v-caf17f17] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.4); border-radius: 8px; z-index: 20; width: 100%; margin-top: 0; border-top: none; } .top-controls[data-v-caf17f17] { display: none; /* Masquer les contrôles du haut */ } .bottom-controls[data-v-caf17f17] { position: sticky; bottom: 0; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0 0 12px 12px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); } /* Remplacer tous les styles de .navigation-controls précédents par cette version unifiée */ .navigation-controls[data-v-caf17f17] { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 8px; z-index: 20; width: 100%; } .top-controls[data-v-caf17f17] { display: none; /* Masquer les contrôles du haut */ } .bottom-controls[data-v-caf17f17] { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); max-width: 920px; /* 20% plus large que 800px */ margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.2); } #tutorial-container[data-v-caf17f17] { color: white !important; } #tutorial-container[data-v-caf17f17] * { color: white !important; } #tutorial-container h3[data-v-caf17f17] { color: #FFD700 !important; } /* Styles spécifiques pour la vue desktop */ .tutorial-body[data-v-caf17f17] { color: white !important; } .tutorial-body p[data-v-caf17f17], .tutorial-body li[data-v-caf17f17], .tutorial-body div[data-v-caf17f17], .tutorial-body span[data-v-caf17f17] { color: white !important; font-size: 1.05rem; line-height: 1.6; } .tutorial-body h3[data-v-caf17f17] { color: #FFD700 !important; font-size: 1.5rem; margin-bottom: 1rem; } /* Amélioration de l'espace de contenu */ .chapter-view[data-v-caf17f17] { padding-bottom: 80px; /* Espace pour les boutons fixes en bas */ } /* Styles pour les titres */ .tutorial-header h2[data-v-caf17f17] { color: #FFD700 !important; /* Jaune doré */ font-size: 1.8rem; } .chapter-title[data-v-caf17f17] { color: #FFD700 !important; } /* Uniformisation des titres h3 avec les titres du SUMMARY */ .tutorial-text-column h3[data-v-caf17f17] { color: #FFD700 !important; font-size: 1.5rem !important; /* Même taille que dans SUMMARY */ margin-bottom: 1rem; font-weight: bold; } /* Assurer que tous les styles de titres sont cohérents */ .tutorial-body h3[data-v-caf17f17] { color: #FFD700 !important; font-size: 1.5rem !important; margin-bottom: 1rem; font-weight: bold; } #llbuilder-root[data-v-38e042fb] { --llb-bg: #0b1220; --llb-bg-soft: #111827; --llb-panel: #111827; --llb-panel-muted: #1f2937; --llb-panel-strong: #0f172a; --llb-panel-soft: #1f2937; --llb-border: #e6c4fb; --llb-border-strong: #e6c4fb; --llb-border-soft: color-mix(in srgb, var(--llb-border) 18%, transparent); --llb-text: var(--llb-text-strong, #f9fafb); --llb-text-strong: #f9fafb; --llb-text-muted: #afb3bc; --llb-accent: #3b82f6; --llb-accent-strong: #ec4899; --llb-warning: #ffc300; --llb-success: #14b8a6; --llb-danger: #f43f5e; --llb-icon-muted: #9fb0c4; --llb-icon-hover: #e8f2ff; --llb-icon-active: #f7fbff; --llb-icon-amber-a: #fff1a8; --llb-icon-amber-b: #ffc247; --llb-icon-amber-c: #ff7a38; --llb-menu-surface: color-mix(in srgb, var(--llb-panel-strong) 96%, #030712 4%); --llb-menu-item: color-mix(in srgb, var(--llb-panel) 68%, transparent); --llb-menu-item-hover: color-mix(in srgb, var(--llb-panel-soft) 82%, transparent); --llb-wire-default: #91a8bd; --llb-wire: var(--llb-wire-default); --llb-wire-live: #14b8a6; --llb-wire-selected: #ffc300; --llb-wire-annotation: #ec4899; --llb-wire-operand: #03e6ff; min-height: 100vh; color: var(--llb-text); background: radial-gradient(circle at 22% 0%, color-mix(in srgb, var(--llb-accent) 13%, transparent), transparent 30rem), linear-gradient(180deg, var(--llb-bg), #060b12 100%); } .llbuilder-icon-gradient-defs[data-v-38e042fb] { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } #llbuilder-root[data-v-38e042fb] .header-gradient-bg, #llbuilder-root[data-v-38e042fb] .header-gradient-border, #llbuilder-root[data-v-38e042fb] .header-pulse-shadow, #llbuilder-root[data-v-38e042fb] .header-inset-accent { animation: none; } #llbuilder-root[data-v-38e042fb] .header-gradient-border { border-color: color-mix(in srgb, var(--llb-border) 16%, transparent) !important; box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent), 0 16px 36px rgba(0, 0, 0, 0.22) !important; } #llbuilder-root[data-v-38e042fb] .header-gradient-border::before, #llbuilder-root[data-v-38e042fb] .header-inset-accent::after { opacity: 0 !important; animation: none !important; } #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled), #llbuilder-root[data-v-38e042fb] .file-controls-root .builder-button-large:hover:not(:disabled), #llbuilder-root[data-v-38e042fb] .controls-button-group > .builder-button-large:hover:not(:disabled) { color: var(--llb-icon-hover) !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg { color: inherit !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg *, #llbuilder-root[data-v-38e042fb] .llbuilder-category-button svg *, #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button svg *, #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button svg *, #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large svg * { transition: fill 180ms ease, stroke 180ms ease, filter 180ms ease; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg [stroke] { stroke: currentColor !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg .fillable:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg [fill]:not([fill="none"]) { fill: currentColor !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg .fillable[fill="none"], #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large svg [fill="none"] { fill: none !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg [stroke], #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg [stroke], #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg [stroke], #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg [stroke], #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg [stroke] { stroke: url(#llbuilder-icon-amber-gradient) #ffc247 !important; } #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg .fillable:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg [fill]:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg path:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg rect:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg circle:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg ellipse:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg polygon:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .header-panel .builder-button-large:hover:not(:disabled) svg text, #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg path:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg rect:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg circle:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg ellipse:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg polygon:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-category-button:hover:not(:disabled) svg text, #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg path:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg rect:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg circle:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg ellipse:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg polygon:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-utility-button:hover:not(:disabled) svg text, #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg path:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg rect:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg circle:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg ellipse:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg polygon:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .llbuilder-tool-button:hover:not(:disabled) svg text, #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg path:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg rect:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg circle:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg ellipse:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg polygon:not([fill="none"]), #llbuilder-root[data-v-38e042fb] .action-history-group > .builder-button-large:hover:not(:disabled) svg text { fill: url(#llbuilder-icon-amber-gradient) #ffc247 !important; } /* Transition for header switching */ [data-v-38e042fb] .fade-enter-active,[data-v-38e042fb] .fade-leave-active { transition: opacity 0.3s ease; } [data-v-38e042fb] .fade-enter-from,[data-v-38e042fb] .fade-leave-to { opacity: 0; } [data-v-38e042fb] .llbuilder-loader-fade-enter-active,[data-v-38e042fb] .llbuilder-loader-fade-leave-active { transition: opacity 220ms ease; } [data-v-38e042fb] .llbuilder-loader-fade-enter-from,[data-v-38e042fb] .llbuilder-loader-fade-leave-to { opacity: 0; } .llbuilder-loader-overlay[data-v-38e042fb] { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; } /* Layout for the header sections */ .header-content[data-v-38e042fb] { display: flex; align-items: center; position: relative; width: 100%; } /* Narrow scrollbar for the main canvas area */ .main-container[data-v-38e042fb] { overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--llb-accent) 34%, transparent) transparent; background: linear-gradient(90deg, rgba(95, 180, 255, 0.05) 1px, transparent 1px), linear-gradient(180deg, rgba(95, 180, 255, 0.04) 1px, transparent 1px), linear-gradient(180deg, color-mix(in srgb, var(--llb-bg-soft) 95%, transparent), var(--llb-bg)); background-size: 3rem 3rem, 3rem 3rem, auto; border-inline: 1px solid color-mix(in srgb, var(--llb-border) 52%, transparent); } .main-container[data-v-38e042fb]::-webkit-scrollbar { width: 8px; height: 8px; } .main-container[data-v-38e042fb]::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--llb-accent) 34%, transparent); border-radius: 8px; } .main-container[data-v-38e042fb]::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--llb-accent) 52%, transparent); } .ladder-logic-area[data-v-38e042fb] { min-height: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; } .ladder-logic-wrapper[data-v-38e042fb] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; overflow-x: hidden; padding: clamp(1rem, 1.8vw, 1.5rem); } .rung-wrapper[data-v-38e042fb] { width: 100%; max-width: 100%; position: relative; isolation: isolate; overflow: hidden; margin-bottom: clamp(0.7rem, 1.2vw, 1.05rem); padding: clamp(0.85rem, 1.4vw, 1.15rem); border: 1px solid color-mix(in srgb, var(--llb-border) 18%, transparent); border-radius: 8px; background: radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--llb-accent) 12%, transparent), transparent 18rem), linear-gradient(180deg, color-mix(in srgb, var(--llb-panel-strong) 78%, transparent), color-mix(in srgb, var(--llb-panel) 92%, transparent)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), inset 0 -1px 0 rgba(0, 0, 0, 0.18), 0 16px 42px rgba(0, 0, 0, 0.24); transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .rung-wrapper[data-v-38e042fb]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--llb-wire-default) 14%, transparent), transparent 16%, transparent 84%, color-mix(in srgb, var(--llb-wire-default) 14%, transparent)), linear-gradient(180deg, color-mix(in srgb, #ffffff 6%, transparent), transparent 40%); opacity: 0.8; } .rung-wrapper[data-v-38e042fb] > * { position: relative; z-index: 1; } .rung-wrapper[data-v-38e042fb]:hover { border-color: color-mix(in srgb, var(--llb-border) 28%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.095), inset 0 -1px 0 rgba(0, 0, 0, 0.16), 0 20px 48px rgba(0, 0, 0, 0.28); } .rung-svg[data-v-38e042fb] { width: 100% !important; max-width: 100%; height: auto !important; display: block; margin-top: 0.55rem; color: var(--llb-wire-default); overflow: visible; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.26)); } .rung-svg line[data-v-38e042fb] { stroke-linecap: round; stroke-linejoin: round; transition: stroke 180ms ease, stroke-width 180ms ease, opacity 180ms ease, filter 180ms ease, stroke-dashoffset 240ms ease; } .rung-wire[data-v-38e042fb], .rung-rail[data-v-38e042fb] { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.32)); } .rung-rail[data-v-38e042fb] { opacity: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.34)) drop-shadow(0 0 3px color-mix(in srgb, var(--llb-wire-default) 12%, transparent)); } .rung-wire--lead-in[data-v-38e042fb] { opacity: 0.96; } .rung-wire--branch[data-v-38e042fb] { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .rung-wire--live[data-v-38e042fb] { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--llb-wire-live) 54%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--llb-wire-live) 22%, transparent)); animation: none; } .rung-wire--live-start[data-v-38e042fb] { animation: llbuilder-live-start-38e042fb 620ms cubic-bezier(.16, 1, .3, 1) 1; } .rung-wire--inactive-sim[data-v-38e042fb] { opacity: 0.52; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 4px color-mix(in srgb, var(--llb-wire-default) 10%, transparent)); animation: none; } .rung-wire--selected[data-v-38e042fb] { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--llb-wire-selected) 54%, transparent)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.28)); animation: llbuilder-wire-dash-38e042fb 1.15s linear infinite; } .rung-wire--fault[data-v-38e042fb] { stroke: var(--llb-danger) !important; opacity: 0.9; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--llb-danger) 50%, transparent)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)); animation: none; } .rung-svg .builder-button-small[data-v-38e042fb] { width: 1.42rem; height: 1.42rem; display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--llb-border) 20%, transparent); border-radius: 0.42rem; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)), color-mix(in srgb, var(--llb-panel-strong) 80%, transparent); color: var(--llb-icon-muted); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 18px rgba(0, 0, 0, 0.24); transition: transform 170ms ease, color 170ms ease, border-color 170ms ease, box-shadow 170ms ease; } .rung-svg .builder-button-small[data-v-38e042fb]::after { content: ""; position: absolute; inset: -45% auto -45% -80%; z-index: 0; width: 58%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); opacity: 0; pointer-events: none; transition: transform 420ms ease, opacity 180ms ease; } .rung-svg .builder-button-small svg[data-v-38e042fb] { width: 0.72rem; height: 0.72rem; color: inherit; } .rung-svg .builder-button-small[data-v-38e042fb]:hover { transform: translateY(-1px); color: var(--llb-icon-hover); border-color: color-mix(in srgb, var(--llb-accent) 36%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 22px rgba(0, 0, 0, 0.3); } .rung-svg .builder-button-small[data-v-38e042fb]:hover::after { opacity: 1; transform: translateX(360%) skewX(-18deg); } .rung-svg .builder-button-small.btn-yellow[data-v-38e042fb] { color: var(--llb-icon-muted); border-color: color-mix(in srgb, var(--llb-border) 22%, transparent); } .rung-svg .builder-button-small.btn-sim-red[data-v-38e042fb] { color: var(--llb-danger); border-color: color-mix(in srgb, var(--llb-danger) 36%, transparent); } .rung-svg .builder-button-small.btn-sim-green[data-v-38e042fb] { color: var(--llb-success); border-color: color-mix(in srgb, var(--llb-success) 36%, transparent); } .rung-svg text[data-v-38e042fb] { paint-order: stroke; font-weight: 700; letter-spacing: 0; } .ladder-rung-toolbar[data-v-38e042fb] { display: flex; align-items: center; gap: calc(0.56rem * var(--toolbar-scale, 1)); } .ladder-rung-action[data-v-38e042fb] { width: calc(2.26rem * var(--toolbar-scale, 1)); height: calc(2.26rem * var(--toolbar-scale, 1)); min-width: calc(2.26rem * var(--toolbar-scale, 1)); display: inline-flex; align-items: center; justify-content: center; position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--llb-border) 18%, transparent); border-radius: 0.5rem; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035)), color-mix(in srgb, var(--llb-panel-strong) 78%, transparent); color: var(--llb-icon-muted); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 10px 24px rgba(0,0,0,.26); transition: transform 170ms ease, color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease; } .ladder-rung-action[data-v-38e042fb]::after { content: ""; position: absolute; inset: -35% auto -35% -78%; z-index: 0; width: 56%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); opacity: 0; pointer-events: none; transition: transform 460ms ease, opacity 180ms ease; } .ladder-rung-action svg[data-v-38e042fb] { width: calc(0.9rem * var(--toolbar-scale, 1)); height: calc(0.9rem * var(--toolbar-scale, 1)); } .ladder-rung-action[data-v-38e042fb]:hover { transform: translateY(-1px); color: var(--llb-icon-hover); border-color: color-mix(in srgb, var(--llb-accent) 34%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 30px rgba(0,0,0,.32); } .ladder-rung-action[data-v-38e042fb]:hover::after { opacity: 1; transform: translateX(360%) skewX(-18deg); } .ladder-rung-action[data-v-38e042fb]:active { transform: translateY(0); } .ladder-rung-action--add[data-v-38e042fb], .ladder-rung-action--clone[data-v-38e042fb] { color: var(--llb-icon-muted); border-color: color-mix(in srgb, var(--llb-border) 22%, transparent); } .ladder-rung-action--danger[data-v-38e042fb] { color: var(--llb-danger); border-color: color-mix(in srgb, var(--llb-danger) 38%, transparent); } .ladder-rung-action--clone.is-active[data-v-38e042fb] { color: #0b1220; border-color: color-mix(in srgb, var(--llb-warning) 72%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--llb-warning) 92%, #ffffff 8%), color-mix(in srgb, var(--llb-warning) 72%, #000000 28%)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px color-mix(in srgb, var(--llb-warning) 24%, transparent), 0 14px 34px color-mix(in srgb, var(--llb-warning) 24%, transparent); } @keyframes llbuilder-wire-dash-38e042fb { to { stroke-dashoffset: -30; } } @keyframes llbuilder-live-start-38e042fb { 0% { opacity: 0.72; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--llb-wire-live) 34%, transparent)) drop-shadow(0 0 8px color-mix(in srgb, var(--llb-wire-live) 14%, transparent)); } 42% { opacity: 1; filter: drop-shadow(0 0 13px color-mix(in srgb, var(--llb-wire-live) 82%, transparent)) drop-shadow(0 0 28px color-mix(in srgb, var(--llb-wire-live) 38%, transparent)); } 100% { opacity: 1; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--llb-wire-live) 54%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--llb-wire-live) 22%, transparent)); } } .llbuilder-status-bar[data-v-38e042fb] { min-height: 2.15rem; display: flex; align-items: center; gap: 0.55rem; overflow-x: auto; padding: 0.35rem 0.75rem; border-top: 1px solid color-mix(in srgb, var(--llb-border) 70%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--llb-panel-strong) 90%, transparent), color-mix(in srgb, var(--llb-panel) 92%, transparent)), var(--llb-bg); box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.18); } .llbuilder-status-item[data-v-38e042fb] { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.35rem; padding: 0 0.55rem; border: 1px solid color-mix(in srgb, var(--llb-border) 54%, transparent); border-radius: 999px; color: var(--llb-text-muted); background: color-mix(in srgb, var(--llb-bg-soft) 78%, transparent); font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; } .llbuilder-status-item[data-state="live"][data-v-38e042fb] { color: var(--llb-success); border-color: color-mix(in srgb, var(--llb-success) 44%, transparent); background: color-mix(in srgb, var(--llb-success) 10%, transparent); } .llbuilder-status-dot[data-v-38e042fb] { width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; box-shadow: 0 0 10px currentColor; } /* Style for "Currently Opened" badge */ .currently-opened-info[data-v-38e042fb] { padding: 4px 12px; border-radius: 6px; margin-left: 8px; font-weight: 600; white-space: nowrap; } .operand-preview[data-v-38e042fb] { font-size: 0.65rem; letter-spacing: 0.05em; } /* visual cue for dragged elements */ .drag-shadow[data-v-38e042fb] { opacity: 0.5; } /* Ladder rung comment styling adapted for new theme */ .rung-comment[data-v-38e042fb] { direction: ltr; unicode-bidi: embed; position: relative; z-index: 2; font-style: normal; color: var(--llb-text); background: color-mix(in srgb, var(--llb-panel-strong) 78%, transparent); padding: calc(var(--btn-scale, 1) * 0.45rem) calc(var(--btn-scale, 1) * 0.7rem); border: 1px solid color-mix(in srgb, var(--llb-border) 76%, transparent); border-left: calc(var(--btn-scale, 1) * 4px) solid var(--llb-accent); border-radius: 8px; cursor: text; outline: none; text-align: left; filter: none; font-size: calc(var(--btn-scale, 1) * 0.92rem); line-height: 1.35; transition: transform 260ms ease, margin 260ms ease, border-color 180ms ease, box-shadow 180ms ease; transform-origin: right center; width: 100%; flex: 1 1 auto; min-width: 0; will-change: transform; } .rung-comment[data-v-38e042fb]:focus { border-color: color-mix(in srgb, var(--llb-accent) 82%, white 18%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--llb-accent) 22%, transparent); } .rung-comment-row[data-v-38e042fb] { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; width: 100%; } .rung-comment--clone-mode[data-v-38e042fb] { transform: scaleX(0.975); margin-left: 0.15rem; } .rung-comment[data-v-38e042fb]::before { content: attr(data-rung-label) " " attr(data-rung-index); display: inline-flex; align-items: center; min-height: 1.25rem; margin-right: 0.55rem; padding: 0 0.45rem; border-radius: 999px; background: color-mix(in srgb, var(--llb-accent) 14%, transparent); color: var(--llb-accent-strong); font-size: 0.72em; font-weight: 800; text-transform: uppercase; } .rung-comment[data-v-38e042fb]::after { content: ""; } .rung-comment[contenteditable="false"][data-v-38e042fb] { opacity: 0.72; cursor: default; } .clone-rung-select-button[data-v-38e042fb] { flex: 0 0 auto; align-self: center; z-index: 10; width: 0; min-width: 0; height: 2rem; padding: 0; border-radius: 9999px; border: 1px solid transparent; background: linear-gradient(165deg, color-mix(in srgb, var(--color-button-header-Contrast-Blue) 26%, transparent), color-mix(in srgb, var(--color-button-header-Contrast-Yellow) 18%, transparent)), color-mix(in srgb, var(--color-bg-primary) 82%, #111111 18%); color: var(--color-button-header-Contrast-Yellow); font-size: 0.95rem; font-weight: 700; opacity: 0; overflow: hidden; pointer-events: none; transform: scale(0.92); box-shadow: 0 0 0 transparent; transition: width 280ms ease, min-width 280ms ease, opacity 240ms ease, transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease; } .clone-rung-select-button--visible[data-v-38e042fb] { width: 2rem; min-width: 2rem; border-color: color-mix(in srgb, var(--color-button-header-Contrast-Blue) 55%, #ffffff 45%); opacity: 1; pointer-events: auto; transform: scale(1); box-shadow: 0 0 0.5rem color-mix(in srgb, var(--color-button-header-Contrast-Blue) 38%, transparent); } .clone-confirm-dialog[data-v-38e042fb] { border-radius: 1rem; } .clone-confirm-dialog__content[data-v-38e042fb] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.2); background: color-mix(in srgb, var(--color-bg-primary) 68%, transparent); box-shadow: 0 18px 42px rgba(2, 6, 23, 0.3); backdrop-filter: blur(14px) saturate(140%); padding: 0.85rem 0.95rem; color: var(--color-text-primary); } .clone-destination-label[data-v-38e042fb] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .clone-destination-trigger[data-v-38e042fb] { min-width: 13rem; width: 100%; border-radius: 0.7rem; border: 1px solid color-mix(in srgb, var(--color-bg-primary) 70%, white 30%); background: color-mix(in srgb, var(--color-bg-secondary) 80%, transparent); color: var(--color-text-primary); padding: 0.45rem 0.7rem; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; } .clone-destination-menu[data-v-38e042fb] { position: absolute; left: 0; right: 0; top: calc(100% + 0.45rem); z-index: 40; border-radius: 0.8rem; padding: 0.3rem; } .clone-destination-menu li[data-v-38e042fb] { border-radius: 0.55rem; padding: 0.45rem 0.55rem; cursor: pointer; font-size: 0.85rem; color: var(--color-text-primary); } .clone-destination-menu li[data-v-38e042fb]:hover, .clone-destination-menu li.is-selected[data-v-38e042fb] { background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35); } .clone-destination-rung-list[data-v-38e042fb] { flex: 1 1 100%; } .clone-destination-rung-list__label[data-v-38e042fb] { display: block; font-size: 0.82rem; margin-bottom: 0.35rem; } .clone-destination-rung-list ul[data-v-38e042fb] { max-height: 11rem; overflow-y: auto; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.35); padding: 0.3rem; } .clone-destination-rung-list li[data-v-38e042fb] { border-radius: 0.55rem; padding: 0.45rem 0.5rem; cursor: pointer; font-size: 0.82rem; } .clone-destination-rung-list li[data-v-38e042fb]:hover, .clone-destination-rung-list li.is-selected[data-v-38e042fb] { background: rgba(59, 130, 246, 0.12); box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.35); } .clone-cta[data-v-38e042fb] { padding: 0.5rem 1.35rem; border-radius: 0.65rem; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; transition: transform 300ms ease; } .clone-cta[data-v-38e042fb]:hover { transform: translateY(-1px); } .clone-cta--cancel[data-v-38e042fb] { border: 1px solid var(--color-text-primary); color: var(--color-text-primary); } .clone-cta--confirm[data-v-38e042fb] { color: #fff; background-color: var(--color-action-red); } [data-v-38e042fb] .clone-glass-dialog-enter-active,[data-v-38e042fb] .clone-glass-dialog-leave-active { transition: opacity 220ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1); } [data-v-38e042fb] .clone-glass-dialog-enter-from,[data-v-38e042fb] .clone-glass-dialog-leave-to { opacity: 0; transform: translateY(10px) scale(0.985); } .clone-trigger-icon[data-v-38e042fb] { display: inline-flex; align-items: center; justify-content: center; } /* Tabs styling */ .tabs-container[data-v-38e042fb] { width: 100%; margin-bottom: 10px; } .full-width-tabs > button[data-v-38e042fb] { flex: 1; } /* Line separator under each tool category */ .section-line[data-v-38e042fb] { width: 90%; height: 1px; margin: 0 auto 5px; margin-bottom: 5px; } /* Tooltip styling */ .tooltip-box[data-v-38e042fb] { position: fixed; z-index: 9999; max-width: min(20rem, calc(100vw - 2rem)); padding: 0.48rem 0.68rem; border: 1px solid color-mix(in srgb, var(--llb-border, var(--color-borders-dividers)) 20%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--llb-panel-strong, var(--color-bg-secondary)) 94%, #020617 6%); color: var(--llb-text-strong, var(--color-text-primary)); font-size: 0.72rem; font-weight: 750; line-height: 1.25; letter-spacing: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 14px 32px rgba(0, 0, 0, 0.34); text-align: center; white-space: pre-line; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); pointer-events: none; } .tooltip-box[data-v-38e042fb]::before { content: ""; position: absolute; top: -1px; left: 0.55rem; right: 0.55rem; height: 1px; background: color-mix(in srgb, var(--llb-accent, var(--color-accent)) 46%, transparent); } /* Container pins both layers on top of each other */ .header-swap-stack[data-v-38e042fb] { position: relative; min-height: calc(var(--btn-scale, 1) * 4rem); } /* Both layers overlap */ .header-swap-layer[data-v-38e042fb] { position: absolute; inset: 0; will-change: opacity; } /* Cross-fade (use :deep with scoped styles) */ [data-v-38e042fb] .header-x-enter-active,[data-v-38e042fb] .header-x-leave-active { transition: opacity 200ms ease; } [data-v-38e042fb] .header-x-enter-from,[data-v-38e042fb] .header-x-leave-to { opacity: 0; } /* Make the entering view sit on top; disable clicks on the leaving one */ [data-v-38e042fb] .header-x-enter-active { z-index: 2; pointer-events: auto; } [data-v-38e042fb] .header-x-leave-active { z-index: 1; pointer-events: none; } /* Optional: respect reduced-motion */ @media (prefers-reduced-motion: reduce) { [data-v-38e042fb] .header-x-enter-active,[data-v-38e042fb] .header-x-leave-active { transition: none; } [data-v-38e042fb] .llbuilder-loader-fade-enter-active,[data-v-38e042fb] .llbuilder-loader-fade-leave-active { transition: none; } } .analog-tools-layout[data-v-550406ec] { display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; min-height: 100vh; background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 45%), radial-gradient(circle at bottom right, rgba(244, 63, 94, 0.12), transparent 40%), rgba(15, 23, 42, 0.65); } .analog-tools-header[data-v-550406ec] { display: flex; flex-direction: column; gap: 1rem; } .analog-breadcrumbs[data-v-550406ec] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: rgba(148, 163, 184, 0.85); } .breadcrumb-link[data-v-550406ec] { color: rgba(191, 219, 254, 0.95); text-decoration: none; font-weight: 600; } .breadcrumb-link[data-v-550406ec]:hover { text-decoration: underline; } .breadcrumb-current[data-v-550406ec] { color: #f8fafc; font-weight: 600; } .analog-header-actions[data-v-550406ec] { display: flex; flex-direction: column; gap: 1rem; } @media (min-width: 960px) { .analog-header-actions[data-v-550406ec] { flex-direction: row; justify-content: space-between; align-items: center; } } .analog-tab-group[data-v-550406ec] { display: inline-flex; flex-wrap: wrap; gap: 0.75rem; padding: 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.55); border: 1px solid rgba(148, 163, 184, 0.25); } .analog-tab[data-v-550406ec] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid transparent; background: rgba(15, 23, 42, 0.35); color: rgba(226, 232, 240, 0.9); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .analog-tab .tab-icon[data-v-550406ec] { width: 1rem; height: 1rem; } .analog-tab[data-v-550406ec]:hover { color: #f8fafc; border-color: rgba(96, 165, 250, 0.4); } .analog-tab.active[data-v-550406ec] { border-color: rgba(59, 130, 246, 0.8); background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(14, 116, 144, 0.25)); color: #ffffff; box-shadow: 0 0 18px rgba(59, 130, 246, 0.22); } .analog-channel-select[data-v-550406ec] { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.55); color: rgba(226, 232, 240, 0.9); } .select-label[data-v-550406ec] { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(148, 163, 184, 0.9); } .select-field[data-v-550406ec] { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0.45rem 0.75rem; border-radius: 0.65rem; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(15, 23, 42, 0.6); color: #e2e8f0; font-weight: 600; min-width: 12rem; } .select-field[data-v-550406ec]:focus-visible { outline: none; border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2); } .analog-tools-body[data-v-550406ec] { flex: 1; min-height: 0; } .scenario-builder[data-v-fddd58e7] { background: rgba(15, 23, 42, 0.45); } .scenario-presets[data-v-fddd58e7] { display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-radius: 1rem; border: 1px solid rgba(59, 130, 246, 0.18); background: rgba(15, 23, 42, 0.55); } .scenario-presets__header[data-v-fddd58e7] { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; } .scenario-presets__actions[data-v-fddd58e7] { display: flex; align-items: center; gap: 0.75rem; } .scenario-presets__title[data-v-fddd58e7] { font-size: 0.95rem; font-weight: 700; color: var(--color-accent-contrast); } .scenario-presets__subtitle[data-v-fddd58e7] { font-size: 0.8rem; color: var(--color-text-secondary); } .scenario-presets__count[data-v-fddd58e7] { font-size: 0.75rem; font-weight: 600; color: var(--color-text-secondary); } .scenario-presets__reset[data-v-fddd58e7] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.35); color: rgba(226, 232, 240, 0.9); font-size: 0.75rem; font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .scenario-presets__reset[data-v-fddd58e7]:hover { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.6); color: var(--color-accent-contrast); } .scenario-presets__grid[data-v-fddd58e7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .scenario-card[data-v-fddd58e7] { border-radius: 1rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.6); padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .scenario-card--applied[data-v-fddd58e7] { border-color: rgba(34, 197, 94, 0.6); box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.35); } .scenario-card__icon[data-v-fddd58e7] { width: 2.5rem; height: 2.5rem; border-radius: 0.9rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--scenario-accent, rgba(59, 130, 246, 0.45)), rgba(15, 23, 42, 0.85)); color: #fff; } .scenario-card__body[data-v-fddd58e7] { display: flex; flex-direction: column; gap: 0.35rem; } .scenario-card__headline[data-v-fddd58e7] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .scenario-card__headline h4[data-v-fddd58e7] { font-size: 0.95rem; font-weight: 700; color: var(--color-accent-contrast); } .scenario-card__badge[data-v-fddd58e7] { font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(34, 197, 94, 0.18); color: #6ee7b7; } .scenario-card__description[data-v-fddd58e7] { font-size: 0.8rem; color: var(--color-text-secondary); min-height: 2.4em; } .scenario-card__meta[data-v-fddd58e7] { font-size: 0.75rem; color: rgba(148, 163, 184, 0.9); display: flex; align-items: center; gap: 0.35rem; } .scenario-card__actions[data-v-fddd58e7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; } .scenario-card__actions button[data-v-fddd58e7] { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; border-radius: 0.75rem; padding: 0.45rem 0.75rem; font-size: 0.8rem; font-weight: 600; transition: background 0.2s ease, color 0.2s ease; } .scenario-card__apply[data-v-fddd58e7] { border: 1px solid rgba(59, 130, 246, 0.8); color: rgba(191, 219, 254, 0.95); background: rgba(37, 99, 235, 0.2); } .scenario-card__adjust[data-v-fddd58e7] { border: 1px solid rgba(148, 163, 184, 0.35); color: rgba(226, 232, 240, 0.9); background: rgba(15, 23, 42, 0.4); } .scenario-card__apply[data-v-fddd58e7]:hover, .scenario-card__adjust[data-v-fddd58e7]:hover { background: rgba(59, 130, 246, 0.25); color: #fff; } .scenario-step[data-v-fddd58e7] { position: relative; transition: border-color 0.2s ease, transform 0.2s ease; } .scenario-step--ghost[data-v-fddd58e7] { opacity: 0.5; } .scenario-step__header[data-v-fddd58e7] { display: flex; align-items: flex-start; gap: 0.75rem; } .scenario-step__drag[data-v-fddd58e7] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(15, 23, 42, 0.6); color: rgba(255, 255, 255, 0.65); cursor: grab; } .scenario-step__name[data-v-fddd58e7] { flex: 1; min-width: 0; padding: 0.35rem 0.75rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-primary); font-size: 0.9rem; } .scenario-step__initial[data-v-fddd58e7] { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: rgba(59, 130, 246, 0.18); color: var(--color-accent); font-size: 0.75rem; font-weight: 600; } .scenario-step__initial input[data-v-fddd58e7] { accent-color: var(--color-accent); } .scenario-step__remove[data-v-fddd58e7] { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid rgba(255, 87, 87, 0.35); background: rgba(248, 113, 113, 0.12); color: var(--color-action-red); } .scenario-step__field[data-v-fddd58e7] { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--color-accent-contrast); } .scenario-step__field input[data-v-fddd58e7], .scenario-step__field select[data-v-fddd58e7], .scenario-step__field textarea[data-v-fddd58e7] { width: 100%; padding: 0.4rem 0.65rem; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.3); color: var(--color-text-primary); font-size: 0.85rem; } .scenario-step__field small[data-v-fddd58e7] { font-size: 0.7rem; font-weight: 400; color: var(--color-text-secondary); } .scenario-step__select-wrapper[data-v-fddd58e7] { position: relative; } .scenario-step__select[data-v-fddd58e7] { width: 100%; border-radius: 0.75rem; border: 1px solid var(--color-bg-primary); background: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.85rem; padding: 0.45rem 2.5rem 0.45rem 0.75rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .scenario-step__select[data-v-fddd58e7]:focus { outline: none; border-color: rgba(59, 130, 246, 0.6); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25); } .scenario-step__select-icon[data-v-fddd58e7] { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255, 255, 255, 0.65); transition: color 0.18s ease; } .scenario-step__select:focus + .scenario-step__select-icon[data-v-fddd58e7] { color: var(--color-accent); } .scenario-step__faults[data-v-fddd58e7] { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; padding: 1rem; background: rgba(15, 23, 42, 0.35); display: grid; gap: 0.75rem; } .scenario-step__faults legend[data-v-fddd58e7] { font-size: 0.85rem; font-weight: 700; color: var(--color-accent-contrast); } .scenario-step__fault[data-v-fddd58e7] { display: flex; flex-direction: column; gap: 0.5rem; } .scenario-step__fault input[type='number'][data-v-fddd58e7] { padding: 0.35rem 0.6rem; border-radius: 0.6rem; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.25); color: var(--color-text-primary); font-size: 0.8rem; } .scenario-step__toggle[data-v-fddd58e7] { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--color-text-primary); } .scenario-builder__add[data-v-fddd58e7] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--color-accent); color: var(--color-accent); background: rgba(59, 130, 246, 0.12); font-weight: 600; } .analog-scenario-view[data-v-f8265bf3] { display: grid; gap: 1.5rem; } .scenario-header[data-v-f8265bf3] { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.55); color: #f8fafc; } .scenario-title[data-v-f8265bf3] { font-size: 1.5rem; font-weight: 700; } .scenario-subtitle[data-v-f8265bf3] { font-size: 0.9rem; color: rgba(148, 163, 184, 0.9); } .scenario-meta[data-v-f8265bf3] { font-size: 0.85rem; color: rgba(148, 163, 184, 0.9); } .scenario-actions[data-v-f8265bf3] { display: flex; flex-direction: column; gap: 0.75rem; } .scenario-buttons[data-v-f8265bf3] { display: flex; flex-wrap: wrap; gap: 0.75rem; } .ghost-btn[data-v-f8265bf3], .accent-btn[data-v-f8265bf3] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .ghost-btn[data-v-f8265bf3] { border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.35); color: rgba(226, 232, 240, 0.9); } .ghost-btn[data-v-f8265bf3]:hover { color: #f8fafc; border-color: rgba(148, 163, 184, 0.55); } .accent-btn[data-v-f8265bf3] { border: 1px solid rgba(59, 130, 246, 0.55); background: rgba(59, 130, 246, 0.18); color: #dbeafe; } .accent-btn[data-v-f8265bf3]:hover { background: rgba(59, 130, 246, 0.28); } .ghost-btn i[data-v-f8265bf3], .accent-btn i[data-v-f8265bf3] { width: 1rem; height: 1rem; } .scenario-empty[data-v-f8265bf3] { font-size: 0.9rem; color: rgba(248, 250, 252, 0.75); font-style: italic; } .scenario-placeholder[data-v-f8265bf3] { display: grid; place-items: center; gap: 0.75rem; padding: 3rem; border-radius: 1.5rem; border: 1px dashed rgba(148, 163, 184, 0.35); color: rgba(148, 163, 184, 0.85); background: rgba(15, 23, 42, 0.35); } .scenario-placeholder i[data-v-f8265bf3] { width: 2rem; height: 2rem; } @media (min-width: 960px) { .scenario-header[data-v-f8265bf3] { flex-direction: row; justify-content: space-between; align-items: center; } .scenario-actions[data-v-f8265bf3] { align-items: flex-end; } } .analog-correlation-view[data-v-46cd9fce] { display: grid; gap: 1.5rem; } .correlation-header[data-v-46cd9fce] { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem 1.5rem; border-radius: 1.5rem; border: 1px solid rgba(148, 163, 184, 0.2); background: rgba(15, 23, 42, 0.55); color: #f8fafc; } .correlation-title[data-v-46cd9fce] { font-size: 1.5rem; font-weight: 700; } .correlation-subtitle[data-v-46cd9fce] { font-size: 0.9rem; color: rgba(148, 163, 184, 0.9); } .correlation-actions[data-v-46cd9fce] { display: flex; flex-direction: column; gap: 0.75rem; } .correlation-meta[data-v-46cd9fce] { font-size: 0.85rem; color: rgba(148, 163, 184, 0.9); } .correlation-buttons[data-v-46cd9fce] { display: flex; flex-wrap: wrap; gap: 0.75rem; } .ghost-btn[data-v-46cd9fce], .accent-btn[data-v-46cd9fce] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .ghost-btn[data-v-46cd9fce] { border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.35); color: rgba(226, 232, 240, 0.9); } .ghost-btn[data-v-46cd9fce]:hover { color: #f8fafc; border-color: rgba(148, 163, 184, 0.55); } .accent-btn[data-v-46cd9fce] { border: 1px solid rgba(59, 130, 246, 0.55); background: rgba(59, 130, 246, 0.18); color: #dbeafe; } .accent-btn[data-v-46cd9fce]:hover { background: rgba(59, 130, 246, 0.28); } .ghost-btn i[data-v-46cd9fce], .accent-btn i[data-v-46cd9fce] { width: 1rem; height: 1rem; } .correlation-empty[data-v-46cd9fce] { font-size: 0.9rem; color: rgba(148, 163, 184, 0.85); font-style: italic; } @media (min-width: 960px) { .correlation-header[data-v-46cd9fce] { flex-direction: row; justify-content: space-between; align-items: center; } .correlation-actions[data-v-46cd9fce] { align-items: flex-end; } } /* subtle fade */ .fade-enter-active[data-v-ea7252d2], .fade-leave-active[data-v-ea7252d2] { transition: opacity .2s ease } .fade-enter-from[data-v-ea7252d2], .fade-leave-to[data-v-ea7252d2] { opacity: 0 } .verification-overlay[data-v-ea7252d2] { position: absolute; inset: 0; display: grid; place-items: center; gap: 1.25rem; padding: 2rem; text-align: center; background: color-mix(in srgb, var(--color-bg-primary) 78%, transparent); backdrop-filter: blur(12px); z-index: 40; pointer-events: auto; } .verification-spinner[data-v-ea7252d2] { width: 3rem; height: 3rem; border-radius: 9999px; border: 3px solid rgba(255, 255, 255, 0.15); border-top-color: var(--color-accent); animation: verification-spin-ea7252d2 .8s linear infinite; } .verification-copy[data-v-ea7252d2] { font-size: 0.95rem; font-weight: 600; letter-spacing: .02em; color: var(--color-text-primary); } @keyframes verification-spin-ea7252d2 { to { transform: rotate(360deg); } } /* Elegant cards */ .card.glass[data-v-ea7252d2] { border-radius: 1.25rem; border: 1px solid rgba(255,255,255,0.10); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); backdrop-filter: blur(6px); padding: 1rem; } /* Card head */ .card .card-head[data-v-ea7252d2] { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; } .head-icon[data-v-ea7252d2] { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1.5rem; color: var(--color-accent); flex-shrink: 0; } .head-title[data-v-ea7252d2] { font-weight: 900; letter-spacing: .01em; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); } /* Steps timeline */ .steps[data-v-ea7252d2] { display: grid; gap: .75rem; margin-top: .15rem; } .step[data-v-ea7252d2] { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; } .step-badge[data-v-ea7252d2] { display:inline-grid; place-items:center; width: 1.75rem; height: 1.75rem; border-radius: .65rem; font-size: .85rem; font-weight: 800; color: var(--color-text-primary); background: radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,0.18), transparent 70%), linear-gradient(180deg, var(--color-accent), color-mix(in oklab, var(--color-accent) 70%, black)); box-shadow: 0 6px 18px color-mix(in oklab, var(--color-accent) 35%, transparent), inset 0 0 0 1px rgba(255,255,255,0.14); } .step-body[data-v-ea7252d2] { display: grid; gap: .1rem; } .step-title[data-v-ea7252d2] { font-weight: 700; letter-spacing: .01em; color: var(--color-text-primary); } .step-text[data-v-ea7252d2] { color: var(--color-text-secondary); font-size: .92rem; } /* Support block */ .support[data-v-ea7252d2] { display: grid; gap: .6rem; } .support-line[data-v-ea7252d2] { color: var(--color-text-secondary); font-size: .95rem; } .support-chip[data-v-ea7252d2] { display:inline-flex; align-items:center; gap:.5rem; padding: .5rem .75rem; border-radius: .75rem; border:1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.05); color: var(--color-text-primary); text-decoration: none; transition: transform .15s ease, background-color .15s ease; } .support-chip[data-v-ea7252d2]:hover { transform: translateY(-1px); background: rgba(255,255,255,0.08); } .support-foot[data-v-ea7252d2] { color: var(--color-text-secondary); font-size: .88rem; } .activity-dashboard[data-v-46599251] { background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), rgba(15, 23, 42, 0.65) 45%), hsla(220,13%,96%,0.04); } .activity-kpi-card[data-v-46599251] { border: 1px solid hsla(220, 13%, 96%, 0.12); background: hsla(220, 13%, 96%, 0.03); border-radius: 0.8rem; padding: 0.85rem 0.95rem; } .blog-breadcrumbs-only[data-v-0cd7748b] { padding: 0; border: 0; background: transparent; box-shadow: none; } .article-shell[data-v-0cd7748b] { max-width: 72ch; margin: 0 auto; } .article-hero[data-v-0cd7748b] { position: relative; padding: 0.25rem; } .article-hero-glow[data-v-0cd7748b] { position: absolute; border-radius: 9999px; filter: blur(64px); opacity: 0.45; } .article-hero-glow-primary[data-v-0cd7748b] { inset: 0 auto auto -4rem; width: 14rem; height: 14rem; background: rgba(14, 165, 233, 0.25); } .article-hero-glow-secondary[data-v-0cd7748b] { inset: auto -3rem 1rem auto; width: 12rem; height: 12rem; background: rgba(168, 85, 247, 0.18); } .article-chip[data-v-0cd7748b] { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); padding: 0.45rem 0.8rem; color: var(--color-text-secondary); transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .article-chip[data-v-0cd7748b]:hover { color: var(--color-text-primary); border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); } .article-meta-inline[data-v-0cd7748b] { display: inline-flex; align-items: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; opacity: .76; } .article-meta-details[data-v-0cd7748b] { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: .9rem; } .article-meta-summary[data-v-0cd7748b] { cursor: pointer; width: -moz-fit-content; width: fit-content; font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: var(--color-text-secondary); } .article-meta-grid[data-v-0cd7748b] { display: grid; gap: .45rem; color: var(--color-text-secondary); font-size: .92rem; line-height: 1.5; } .article-meta-label[data-v-0cd7748b] { color: var(--color-text-primary); font-weight: 600; margin-right: .35rem; } .article-paragraph[data-v-0cd7748b] { color: var(--color-text-secondary); line-height: 1.9; font-size: 1rem; } .article-paragraph + .article-paragraph[data-v-0cd7748b] { margin-top: 1rem; } .article-subheading[data-v-0cd7748b] { margin-top: 1.5rem; color: var(--color-text-primary); font-size: 1.125rem; line-height: 1.6; font-weight: 700; } .article-inline-strong[data-v-0cd7748b] { color: var(--color-text-primary); font-weight: 700; } .article-inline-emphasis[data-v-0cd7748b] { color: rgba(191, 219, 254, 0.92); font-style: italic; } .article-inline-link[data-v-0cd7748b] { color: var(--color-accent); text-decoration: underline; text-decoration-color: rgba(14, 165, 233, 0.45); text-underline-offset: 0.2em; } .article-inline-link[data-v-0cd7748b]:hover { color: var(--color-text-primary); text-decoration-color: currentColor; } .article-table[data-v-0cd7748b] { border-collapse: collapse; } .article-table th[data-v-0cd7748b], .article-table td[data-v-0cd7748b] { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; vertical-align: top; } .article-table th[data-v-0cd7748b] { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-secondary); } .article-table td[data-v-0cd7748b] { color: var(--color-text-primary); line-height: 1.7; } .article-table tbody tr:last-child td[data-v-0cd7748b] { border-bottom: none; }