/*! 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-space-y-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-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, monospace;--color-white:#fff;--spacing:.25rem;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-tight:1.25;--radius-sm:.25rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--drop-shadow-sm:0 1px 2px #00000026;--ease-out:cubic-bezier(0, 0, .2, 1);--blur-sm:8px;--blur-md:12px;--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);--color-ink-50:#f5f7f9;--color-ink-100:#eceff3;--color-ink-200:#dde2e8;--color-ink-300:#c0c7d1;--color-ink-400:#8e99a8;--color-ink-500:#6b7888;--color-ink-600:#46556a;--color-ink-700:#2b3647;--color-ink-800:#1e2a38;--color-ink-900:#17202a;--color-brand-rose-400:#f07682;--color-brand-rose-500:#e24550;--color-brand-rose-600:#b72a33;--color-brand-amber-400:#f5b651;--color-brand-amber-500:#e5941a;--color-brand-amber-600:#b77400;--color-brand-sky-50:#e8f2fb;--color-brand-sky-400:#65a9df;--color-brand-sky-500:#3790d4;--color-brand-sky-600:#1e6fb5;--color-brand-violet-400:#9a82e0;--color-brand-violet-500:#7c5cd1;--color-brand-violet-600:#5d3fb0;--color-bamboo-400:#34c26a;--color-bamboo-500:#00a83b;--color-bamboo-600:#0a8a3b;--shadow-card:0 1px 2px #0f172a0a, 0 0 0 1px #0f172a0d}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,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}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-1\/2{top:50%}.top-5{top:calc(var(--spacing) * 5)}.top-full{top:100%}.right-0{right:calc(var(--spacing) * 0)}.right-2{right:calc(var(--spacing) * 2)}.right-5{right:calc(var(--spacing) * 5)}.bottom-4{bottom:calc(var(--spacing) * 4)}.bottom-5{bottom:calc(var(--spacing) * 5)}.left-0{left:calc(var(--spacing) * 0)}.left-3{left:calc(var(--spacing) * 3)}.left-3\.5{left:calc(var(--spacing) * 3.5)}.left-5{left:calc(var(--spacing) * 5)}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\[120\]{z-index:120}.-mx-5{margin-inline:calc(var(--spacing) * -5)}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.ml-4{margin-left:calc(var(--spacing) * 4)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.h-1{height:calc(var(--spacing) * 1)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.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-11{height:calc(var(--spacing) * 11)}.h-16{height:calc(var(--spacing) * 16)}.h-\[62px\]{height:62px}.h-full{height:100%}.min-h-\[18px\]{min-height:18px}.min-h-\[58px\]{min-height:58px}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-2{width:calc(var(--spacing) * 2)}.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-56{width:calc(var(--spacing) * 56)}.w-\[300px\]{width:300px}.w-full{width:100%}.max-w-\[180px\]{max-width:180px}.max-w-\[260px\]{max-width:260px}.max-w-\[280px\]{max-width:280px}.max-w-\[320px\]{max-width:320px}.max-w-\[360px\]{max-width:360px}.max-w-\[400px\]{max-width:400px}.max-w-\[420px\]{max-width:420px}.max-w-\[1720px\]{max-width:1720px}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[220px\]{min-width:220px}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.scroll-mt-20{scroll-margin-top:calc(var(--spacing) * 20)}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.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}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-0\.5{gap:calc(var(--spacing) * .5)}.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)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-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(.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-ink-100>:not(:last-child)){border-color:var(--color-ink-100)}.self-center{align-self:center}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[2px\]{border-radius:2px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.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-l-\[3px\]{border-left-style:var(--tw-border-style);border-left-width:3px}.border-bamboo-500{border-color:var(--color-bamboo-500)}.border-bamboo-500\/20{border-color:#00a83b33}@supports (color:color-mix(in lab, red, red)){.border-bamboo-500\/20{border-color:color-mix(in oklab, var(--color-bamboo-500) 20%, transparent)}}.border-bamboo-500\/25{border-color:#00a83b40}@supports (color:color-mix(in lab, red, red)){.border-bamboo-500\/25{border-color:color-mix(in oklab, var(--color-bamboo-500) 25%, transparent)}}.border-brand-amber-500{border-color:var(--color-brand-amber-500)}.border-brand-amber-500\/20{border-color:#e5941a33}@supports (color:color-mix(in lab, red, red)){.border-brand-amber-500\/20{border-color:color-mix(in oklab, var(--color-brand-amber-500) 20%, transparent)}}.border-brand-amber-500\/25{border-color:#e5941a40}@supports (color:color-mix(in lab, red, red)){.border-brand-amber-500\/25{border-color:color-mix(in oklab, var(--color-brand-amber-500) 25%, transparent)}}.border-brand-amber-500\/30{border-color:#e5941a4d}@supports (color:color-mix(in lab, red, red)){.border-brand-amber-500\/30{border-color:color-mix(in oklab, var(--color-brand-amber-500) 30%, transparent)}}.border-brand-rose-500{border-color:var(--color-brand-rose-500)}.border-brand-rose-500\/25{border-color:#e2455040}@supports (color:color-mix(in lab, red, red)){.border-brand-rose-500\/25{border-color:color-mix(in oklab, var(--color-brand-rose-500) 25%, transparent)}}.border-brand-rose-500\/30{border-color:#e245504d}@supports (color:color-mix(in lab, red, red)){.border-brand-rose-500\/30{border-color:color-mix(in oklab, var(--color-brand-rose-500) 30%, transparent)}}.border-brand-sky-500{border-color:var(--color-brand-sky-500)}.border-brand-sky-500\/20{border-color:#3790d433}@supports (color:color-mix(in lab, red, red)){.border-brand-sky-500\/20{border-color:color-mix(in oklab, var(--color-brand-sky-500) 20%, transparent)}}.border-brand-sky-500\/25{border-color:#3790d440}@supports (color:color-mix(in lab, red, red)){.border-brand-sky-500\/25{border-color:color-mix(in oklab, var(--color-brand-sky-500) 25%, transparent)}}.border-brand-sky-500\/30{border-color:#3790d44d}@supports (color:color-mix(in lab, red, red)){.border-brand-sky-500\/30{border-color:color-mix(in oklab, var(--color-brand-sky-500) 30%, transparent)}}.border-brand-violet-500{border-color:var(--color-brand-violet-500)}.border-brand-violet-500\/20{border-color:#7c5cd133}@supports (color:color-mix(in lab, red, red)){.border-brand-violet-500\/20{border-color:color-mix(in oklab, var(--color-brand-violet-500) 20%, transparent)}}.border-brand-violet-500\/25{border-color:#7c5cd140}@supports (color:color-mix(in lab, red, red)){.border-brand-violet-500\/25{border-color:color-mix(in oklab, var(--color-brand-violet-500) 25%, transparent)}}.border-brand-violet-500\/30{border-color:#7c5cd14d}@supports (color:color-mix(in lab, red, red)){.border-brand-violet-500\/30{border-color:color-mix(in oklab, var(--color-brand-violet-500) 30%, transparent)}}.border-ink-100{border-color:var(--color-ink-100)}.border-ink-100\/70{border-color:#eceff3b3}@supports (color:color-mix(in lab, red, red)){.border-ink-100\/70{border-color:color-mix(in oklab, var(--color-ink-100) 70%, transparent)}}.border-ink-200{border-color:var(--color-ink-200)}.border-transparent{border-color:#0000}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab, red, red)){.border-white\/20{border-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-bamboo-500{background-color:var(--color-bamboo-500)}.bg-bamboo-500\/10{background-color:#00a83b1a}@supports (color:color-mix(in lab, red, red)){.bg-bamboo-500\/10{background-color:color-mix(in oklab, var(--color-bamboo-500) 10%, transparent)}}.bg-brand-amber-500{background-color:var(--color-brand-amber-500)}.bg-brand-amber-500\/10{background-color:#e5941a1a}@supports (color:color-mix(in lab, red, red)){.bg-brand-amber-500\/10{background-color:color-mix(in oklab, var(--color-brand-amber-500) 10%, transparent)}}.bg-brand-rose-500{background-color:var(--color-brand-rose-500)}.bg-brand-rose-500\/10{background-color:#e245501a}@supports (color:color-mix(in lab, red, red)){.bg-brand-rose-500\/10{background-color:color-mix(in oklab, var(--color-brand-rose-500) 10%, transparent)}}.bg-brand-sky-500{background-color:var(--color-brand-sky-500)}.bg-brand-sky-500\/10{background-color:#3790d41a}@supports (color:color-mix(in lab, red, red)){.bg-brand-sky-500\/10{background-color:color-mix(in oklab, var(--color-brand-sky-500) 10%, transparent)}}.bg-brand-violet-500{background-color:var(--color-brand-violet-500)}.bg-brand-violet-500\/10{background-color:#7c5cd11a}@supports (color:color-mix(in lab, red, red)){.bg-brand-violet-500\/10{background-color:color-mix(in oklab, var(--color-brand-violet-500) 10%, transparent)}}.bg-ink-50{background-color:var(--color-ink-50)}.bg-ink-100{background-color:var(--color-ink-100)}.bg-ink-200{background-color:var(--color-ink-200)}.bg-ink-300{background-color:var(--color-ink-300)}.bg-ink-900{background-color:var(--color-ink-900)}.bg-ink-900\/30{background-color:#17202a4d}@supports (color:color-mix(in lab, red, red)){.bg-ink-900\/30{background-color:color-mix(in oklab, var(--color-ink-900) 30%, transparent)}}.bg-white{background-color:var(--color-white)}.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\/60{background-color:#fff9}@supports (color:color-mix(in lab, red, red)){.bg-white\/60{background-color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.bg-white\/95{background-color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.bg-white\/95{background-color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.bg-linear-to-br{--tw-gradient-position:to bottom right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-br{--tw-gradient-position:to bottom right in oklab}}.bg-linear-to-br{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.from-brand-rose-400{--tw-gradient-from:var(--color-brand-rose-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-brand-sky-50{--tw-gradient-from:var(--color-brand-sky-50);--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-brand-sky-400{--tw-gradient-from:var(--color-brand-sky-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-brand-rose-500{--tw-gradient-via:var(--color-brand-rose-500);--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-brand-sky-500{--tw-gradient-via:var(--color-brand-sky-500);--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-bamboo-500{--tw-gradient-to:var(--color-bamboo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-brand-rose-600{--tw-gradient-to:var(--color-brand-rose-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-brand-sky-600{--tw-gradient-to:var(--color-brand-sky-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-white{--tw-gradient-to:var(--color-white);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.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-3\.5{padding-inline:calc(var(--spacing) * 3.5)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-7{padding-inline:calc(var(--spacing) * 7)}.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-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-3\.5{padding-right:calc(var(--spacing) * 3.5)}.pr-5{padding-right:calc(var(--spacing) * 5)}.pr-11{padding-right:calc(var(--spacing) * 11)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-3{padding-bottom:calc(var(--spacing) * 3)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-7{padding-bottom:calc(var(--spacing) * 7)}.pl-1{padding-left:calc(var(--spacing) * 1)}.pl-3{padding-left:calc(var(--spacing) * 3)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-9{padding-left:calc(var(--spacing) * 9)}.pl-10{padding-left:calc(var(--spacing) * 10)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12\.5px\]{font-size:12.5px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[18px\]{font-size:18px}.text-\[20px\]{font-size:20px}.text-\[22px\]{font-size:22px}.text-\[24px\]{font-size:24px}.text-\[40px\]{font-size:40px}.leading-none{--tw-leading:1;line-height:1}.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-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-bamboo-500{color:var(--color-bamboo-500)}.text-bamboo-600{color:var(--color-bamboo-600)}.text-brand-amber-500{color:var(--color-brand-amber-500)}.text-brand-amber-600{color:var(--color-brand-amber-600)}.text-brand-rose-600{color:var(--color-brand-rose-600)}.text-brand-sky-500{color:var(--color-brand-sky-500)}.text-brand-sky-600{color:var(--color-brand-sky-600)}.text-brand-violet-500{color:var(--color-brand-violet-500)}.text-brand-violet-600{color:var(--color-brand-violet-600)}.text-ink-300{color:var(--color-ink-300)}.text-ink-400{color:var(--color-ink-400)}.text-ink-500{color:var(--color-ink-500)}.text-ink-600{color:var(--color-ink-600)}.text-ink-700{color:var(--color-ink-700)}.text-ink-900{color:var(--color-ink-900)}.text-white{color:var(--color-white)}.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\/75{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.text-white\/75{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.uppercase{text-transform:uppercase}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-50{opacity:.5}.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-card{--tw-shadow:0 1px 2px var(--tw-shadow-color,#0f172a0a), 0 0 0 1px var(--tw-shadow-color,#0f172a0d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-card-hover{--tw-shadow:0 10px 26px var(--tw-shadow-color,#0f172a14), 0 0 0 1px var(--tw-shadow-color,#0f172a0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--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)}.ring-bamboo-500\/30{--tw-ring-color:#00a83b4d}@supports (color:color-mix(in lab, red, red)){.ring-bamboo-500\/30{--tw-ring-color:color-mix(in oklab, var(--color-bamboo-500) 30%, transparent)}}.ring-brand-sky-500\/30{--tw-ring-color:#3790d44d}@supports (color:color-mix(in lab, red, red)){.ring-brand-sky-500\/30{--tw-ring-color:color-mix(in oklab, var(--color-brand-sky-500) 30%, transparent)}}.drop-shadow-sm{--tw-drop-shadow-size:drop-shadow(0 1px 2px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-sm));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,)}.backdrop-blur-\[2px\]{--tw-backdrop-blur:blur(2px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-md{--tw-backdrop-blur:blur(var(--blur-md));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-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))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.placeholder\:text-ink-400::placeholder{color:var(--color-ink-400)}.odd\:bg-ink-50\/40:nth-child(odd){background-color:#f5f7f966}@supports (color:color-mix(in lab, red, red)){.odd\:bg-ink-50\/40:nth-child(odd){background-color:color-mix(in oklab, var(--color-ink-50) 40%, transparent)}}@media (hover:hover){.hover\:bg-bamboo-500\/10:hover{background-color:#00a83b1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-bamboo-500\/10:hover{background-color:color-mix(in oklab, var(--color-bamboo-500) 10%, transparent)}}.hover\:bg-brand-amber-500\/10:hover{background-color:#e5941a1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-amber-500\/10:hover{background-color:color-mix(in oklab, var(--color-brand-amber-500) 10%, transparent)}}.hover\:bg-brand-amber-500\/20:hover{background-color:#e5941a33}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-amber-500\/20:hover{background-color:color-mix(in oklab, var(--color-brand-amber-500) 20%, transparent)}}.hover\:bg-brand-amber-600:hover{background-color:var(--color-brand-amber-600)}.hover\:bg-brand-rose-500:hover{background-color:var(--color-brand-rose-500)}.hover\:bg-brand-rose-500\/10:hover{background-color:#e245501a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-rose-500\/10:hover{background-color:color-mix(in oklab, var(--color-brand-rose-500) 10%, transparent)}}.hover\:bg-brand-rose-600:hover{background-color:var(--color-brand-rose-600)}.hover\:bg-brand-sky-500\/10:hover{background-color:#3790d41a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-sky-500\/10:hover{background-color:color-mix(in oklab, var(--color-brand-sky-500) 10%, transparent)}}.hover\:bg-brand-sky-500\/20:hover{background-color:#3790d433}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-sky-500\/20:hover{background-color:color-mix(in oklab, var(--color-brand-sky-500) 20%, transparent)}}.hover\:bg-brand-sky-500\/\[0\.04\]:hover{background-color:#3790d40a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-sky-500\/\[0\.04\]:hover{background-color:color-mix(in oklab, var(--color-brand-sky-500) 4%, transparent)}}.hover\:bg-brand-violet-500\/10:hover{background-color:#7c5cd11a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-violet-500\/10:hover{background-color:color-mix(in oklab, var(--color-brand-violet-500) 10%, transparent)}}.hover\:bg-brand-violet-500\/20:hover{background-color:#7c5cd133}@supports (color:color-mix(in lab, red, red)){.hover\:bg-brand-violet-500\/20:hover{background-color:color-mix(in oklab, var(--color-brand-violet-500) 20%, transparent)}}.hover\:bg-ink-50:hover{background-color:var(--color-ink-50)}.hover\:bg-ink-100:hover{background-color:var(--color-ink-100)}.hover\:bg-white\/20:hover{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/20:hover{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.hover\:text-ink-700:hover{color:var(--color-ink-700)}.hover\:text-ink-900:hover{color:var(--color-ink-900)}.hover\:text-white:hover{color:var(--color-white)}.hover\:underline:hover{text-decoration-line:underline}.hover\:shadow-card-hover:hover{--tw-shadow:0 10px 26px var(--tw-shadow-color,#0f172a14), 0 0 0 1px var(--tw-shadow-color,#0f172a0f);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-brand-amber-500\/50:focus{border-color:#e5941a80}@supports (color:color-mix(in lab, red, red)){.focus\:border-brand-amber-500\/50:focus{border-color:color-mix(in oklab, var(--color-brand-amber-500) 50%, transparent)}}.focus\:border-brand-rose-500\/60:focus{border-color:#e2455099}@supports (color:color-mix(in lab, red, red)){.focus\:border-brand-rose-500\/60:focus{border-color:color-mix(in oklab, var(--color-brand-rose-500) 60%, transparent)}}.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-brand-amber-500\/30:focus{--tw-ring-color:#e5941a4d}@supports (color:color-mix(in lab, red, red)){.focus\:ring-brand-amber-500\/30:focus{--tw-ring-color:color-mix(in oklab, var(--color-brand-amber-500) 30%, transparent)}}.focus\:ring-brand-rose-500\/40:focus{--tw-ring-color:#e2455066}@supports (color:color-mix(in lab, red, red)){.focus\:ring-brand-rose-500\/40:focus{--tw-ring-color:color-mix(in oklab, var(--color-brand-rose-500) 40%, transparent)}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-brand-rose-600:active{background-color:var(--color-brand-rose-600)}@media (min-width:40rem){.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:gap-2{gap:calc(var(--spacing) * 2)}}@media (min-width:48rem){.md\:flex{display:flex}.md\:hidden{display:none}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}:where(.dark\:divide-ink-700:where(.dark,.dark *)>:not(:last-child)),.dark\:border-ink-700:where(.dark,.dark *){border-color:var(--color-ink-700)}.dark\:border-ink-700\/60:where(.dark,.dark *){border-color:#2b364799}@supports (color:color-mix(in lab, red, red)){.dark\:border-ink-700\/60:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-ink-700) 60%, transparent)}}.dark\:bg-ink-100:where(.dark,.dark *){background-color:var(--color-ink-100)}.dark\:bg-ink-600:where(.dark,.dark *){background-color:var(--color-ink-600)}.dark\:bg-ink-700:where(.dark,.dark *){background-color:var(--color-ink-700)}.dark\:bg-ink-700\/60:where(.dark,.dark *){background-color:#2b364799}@supports (color:color-mix(in lab, red, red)){.dark\:bg-ink-700\/60:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-ink-700) 60%, transparent)}}.dark\:bg-ink-800:where(.dark,.dark *){background-color:var(--color-ink-800)}.dark\:bg-ink-800\/90:where(.dark,.dark *){background-color:#1e2a38e6}@supports (color:color-mix(in lab, red, red)){.dark\:bg-ink-800\/90:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-ink-800) 90%, transparent)}}.dark\:bg-ink-800\/95:where(.dark,.dark *){background-color:#1e2a38f2}@supports (color:color-mix(in lab, red, red)){.dark\:bg-ink-800\/95:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-ink-800) 95%, transparent)}}.dark\:bg-ink-900:where(.dark,.dark *){background-color:var(--color-ink-900)}.dark\:bg-ink-900\/40:where(.dark,.dark *){background-color:#17202a66}@supports (color:color-mix(in lab, red, red)){.dark\:bg-ink-900\/40:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-ink-900) 40%, transparent)}}.dark\:bg-ink-900\/60:where(.dark,.dark *){background-color:#17202a99}@supports (color:color-mix(in lab, red, red)){.dark\:bg-ink-900\/60:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-ink-900) 60%, transparent)}}.dark\:from-ink-900\/60:where(.dark,.dark *){--tw-gradient-from:#17202a99}@supports (color:color-mix(in lab, red, red)){.dark\:from-ink-900\/60:where(.dark,.dark *){--tw-gradient-from:color-mix(in oklab, var(--color-ink-900) 60%, transparent)}}.dark\:from-ink-900\/60:where(.dark,.dark *){--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))}.dark\:to-ink-800\/60:where(.dark,.dark *){--tw-gradient-to:#1e2a3899}@supports (color:color-mix(in lab, red, red)){.dark\:to-ink-800\/60:where(.dark,.dark *){--tw-gradient-to:color-mix(in oklab, var(--color-ink-800) 60%, transparent)}}.dark\:to-ink-800\/60:where(.dark,.dark *){--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))}.dark\:text-bamboo-400:where(.dark,.dark *){color:var(--color-bamboo-400)}.dark\:text-brand-amber-400:where(.dark,.dark *){color:var(--color-brand-amber-400)}.dark\:text-brand-rose-400:where(.dark,.dark *){color:var(--color-brand-rose-400)}.dark\:text-brand-sky-400:where(.dark,.dark *){color:var(--color-brand-sky-400)}.dark\:text-brand-violet-400:where(.dark,.dark *){color:var(--color-brand-violet-400)}.dark\:text-ink-100:where(.dark,.dark *){color:var(--color-ink-100)}.dark\:text-ink-200:where(.dark,.dark *){color:var(--color-ink-200)}.dark\:text-ink-300:where(.dark,.dark *){color:var(--color-ink-300)}.dark\:text-ink-400:where(.dark,.dark *){color:var(--color-ink-400)}.dark\:text-ink-500:where(.dark,.dark *){color:var(--color-ink-500)}.dark\:text-ink-600:where(.dark,.dark *){color:var(--color-ink-600)}.dark\:text-ink-900:where(.dark,.dark *){color:var(--color-ink-900)}.dark\:odd\:bg-ink-900\/30:where(.dark,.dark *):nth-child(odd){background-color:#17202a4d}@supports (color:color-mix(in lab, red, red)){.dark\:odd\:bg-ink-900\/30:where(.dark,.dark *):nth-child(odd){background-color:color-mix(in oklab, var(--color-ink-900) 30%, transparent)}}@media (hover:hover){.dark\:hover\:bg-ink-700:where(.dark,.dark *):hover{background-color:var(--color-ink-700)}.dark\:hover\:bg-ink-700\/40:where(.dark,.dark *):hover{background-color:#2b364766}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-ink-700\/40:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-ink-700) 40%, transparent)}}.dark\:hover\:text-ink-200:where(.dark,.dark *):hover{color:var(--color-ink-200)}.dark\:hover\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}}}html,body{font-family:var(--font-sans);font-feature-settings:"cv11", "tnum";-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.tnum{font-variant-numeric:tabular-nums}.bg-slider{z-index:0;position:fixed;inset:0;overflow:hidden}.bg-slide{opacity:0;will-change:opacity, transform;background-position:50%;background-size:cover;animation:40s linear infinite bgCycle;position:absolute;inset:0}.bg-slide:after{content:"";background:linear-gradient(#17202a26 0%,#17202a8c 100%);position:absolute;inset:0}:where(.dark) .bg-slide:after{background:linear-gradient(#17202a73 0%,#17202acc 100%)}.bg-slide:first-child{animation-delay:0s}.bg-slide:nth-child(2){animation-delay:10s}.bg-slide:nth-child(3){animation-delay:20s}.bg-slide:nth-child(4){animation-delay:30s}@keyframes bgCycle{0%{opacity:0;transform:scale(1.04)}4%{opacity:1}22%{opacity:1;transform:scale(1)}28%{opacity:0}to{opacity:0;transform:scale(1)}}.nav-pill{height:2.25rem;color:var(--color-ink-500);white-space:nowrap;border-radius:9999px;align-items:center;padding:0 .875rem;font-size:13px;font-weight:700;transition:background-color .12s,color .12s;display:inline-flex}.nav-pill:hover{color:var(--color-ink-900);background:var(--color-ink-50)}:where(.dark) .nav-pill{color:var(--color-ink-300)}:where(.dark) .nav-pill:hover{color:#fff;background:#2b364799}.nav-pill.is-active{color:#fff;background:var(--color-ink-900);box-shadow:var(--shadow-card)}:where(.dark) .nav-pill.is-active{color:var(--color-ink-900);background:var(--color-ink-100)}.mdi-spin{animation:1s linear infinite mdiSpin}@keyframes mdiSpin{to{transform:rotate(360deg)}}.dot-live{animation:2s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.5}}#candidatesTable tbody td{padding-top:.625rem;padding-bottom:.625rem}#candidatesTable[data-density=compact] tbody td{padding-top:.3rem;padding-bottom:.3rem}#candidatesTable[data-density=compact] tbody img.thumb{width:1.75rem;height:1.75rem}#candidatesTable[data-density=compact] tbody .ident-model-badge{display:none}#candidatesTable[data-density=compact] tbody .ident-alias{font-size:12px}.pop-enter{transform-origin:100% 100%;animation:.15s ease-out both popIn}@keyframes popIn{0%{opacity:0;transform:scale(.96)translateY(4px)}to{opacity:1;transform:scale(1)translateY(0)}}.card-enter{animation:.38s cubic-bezier(.2,.7,.2,1) both cardIn}@keyframes cardIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.bg-slide,.card-enter,.pop-enter,.dot-live{animation:none!important}.bg-slide:first-child{opacity:1}}@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-space-y-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:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}

/* ============================================================== */
/*    Mission Control redesign  (added without Tailwind rebuild)   */
/* ============================================================== */

/* ----- tab pane transitions ----- */
.tab-pane[hidden] { display: none; }
.fade-in-tab { animation: fadeInTab .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeInTab {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ----- nav-pill tab badges (the small chip with the count) ----- */
.tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-brand-amber-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  line-height: 1; letter-spacing: .02em;
  box-shadow: 0 0 0 2px var(--color-white);
}
:where(.dark) .tab-badge { box-shadow: 0 0 0 2px var(--color-ink-800); }
.nav-pill.is-active .tab-badge {
  background: rgba(255,255,255,.22); color: #fff;
  box-shadow: 0 0 0 2px var(--color-ink-900);
}
:where(.dark) .nav-pill.is-active .tab-badge {
  background: rgba(0,0,0,.18); color: var(--color-ink-900);
  box-shadow: 0 0 0 2px var(--color-ink-100);
}

/* ----- Header user dropdown ----- */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 3px;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-white);
  color: var(--color-ink-700);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}

.user-menu-trigger:hover,
.user-menu-trigger[aria-expanded="true"] {
  background: var(--color-ink-50);
  border-color: var(--color-ink-200);
  box-shadow: var(--shadow-card);
}

:where(.dark) .user-menu-trigger {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
  color: var(--color-ink-200);
}

:where(.dark) .user-menu-trigger:hover,
:where(.dark) .user-menu-trigger[aria-expanded="true"] {
  background: var(--color-ink-700);
  border-color: var(--color-ink-600);
}

.user-menu-avatar {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--color-brand-rose-400), var(--color-brand-rose-600));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.user-menu-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}

.user-menu-chevron {
  font-size: 16px;
  line-height: 1;
  color: var(--color-ink-400);
  transition: transform .15s;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-chevron {
  transform: rotate(180deg);
}

.user-menu-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 90;
  width: min(260px, calc(100vw - 24px));
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--color-ink-100);
  background: rgba(255,255,255,.96);
  box-shadow: 0 18px 45px rgba(15,23,42,.16);
  backdrop-filter: blur(12px);
  animation: popIn .15s ease-out both;
}

:where(.dark) .user-menu-popover {
  border-color: var(--color-ink-700);
  background: rgba(30,42,56,.96);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

.user-menu-details {
  padding: 8px 10px 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-ink-100);
}

:where(.dark) .user-menu-details {
  border-bottom-color: var(--color-ink-700);
}

.user-menu-label {
  display: block;
  color: var(--color-ink-400);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.user-menu-email {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-800);
  font-size: 13px;
  font-weight: 700;
}

:where(.dark) .user-menu-email {
  color: var(--color-ink-100);
}

.user-menu-logout {
  width: 100%;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--color-brand-rose-600);
  font-size: 13px;
  font-weight: 800;
  transition: background-color .15s, color .15s;
}

.user-menu-logout:hover {
  background: var(--color-brand-rose-500);
  color: #fff;
}

:where(.dark) .user-menu-logout {
  color: var(--color-brand-rose-400);
}

@media (max-width: 640px) {
  .user-menu-trigger {
    width: 36px;
    justify-content: center;
    padding: 3px;
  }
  .user-menu-name,
  .user-menu-chevron {
    display: none;
  }
}

/* v28 — Access-code OCR camera / installable PWA affordance */
.access-code-camera {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 13px;
  border-left: 1px solid rgba(53, 148, 219, .18);
  background: rgba(53, 148, 219, .08);
  color: var(--color-brand-sky-600);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.access-code-camera:hover {
  background: var(--color-brand-sky-500);
  color: #fff;
}
:where(.dark) .access-code-camera {
  border-left-color: rgba(80, 163, 217, .2);
  color: var(--color-brand-sky-400);
}
.access-ocr-modal {
  width: min(720px, 100%);
  max-height: min(92vh, 860px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: var(--color-ink-900);
  color: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
}
.access-ocr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.access-ocr-title { font-size: 16px; font-weight: 850; }
.access-ocr-sub { margin-top: 3px; color: rgba(255,255,255,.66); font-size: 12.5px; }
.access-ocr-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: #fff;
}
.access-ocr-icon-btn:hover { background: rgba(255,255,255,.14); }
.access-ocr-view {
  position: relative;
  min-height: 280px;
  aspect-ratio: 4 / 3;
  background: #05070a;
}
.access-ocr-view video,
.access-ocr-view canvas,
#accessOcrStill {
  width: 100%;
  height: 100%;
}
.access-ocr-view video,
#accessOcrStill { object-fit: contain; }
#accessOcrStill {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.access-ocr-status {
  min-height: 34px;
  padding: 9px 16px;
  color: rgba(255,255,255,.72);
  font-size: 12px;
  font-family: var(--font-mono);
  border-top: 1px solid rgba(255,255,255,.08);
}
.access-ocr-status[data-tone="error"] { color: #fecdd3; }
.access-ocr-status[data-tone="ok"] { color: #bbf7d0; }
.access-ocr-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 16px 16px;
}
.access-ocr-primary,
.access-ocr-secondary {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 850;
}
.access-ocr-primary {
  background: var(--color-brand-rose-500);
  color: #fff;
}
.access-ocr-primary:hover { background: var(--color-brand-rose-600); }
.access-ocr-primary:disabled,
.access-ocr-secondary:disabled {
  opacity: .55;
  pointer-events: none;
}
.access-ocr-secondary {
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  background: rgba(255,255,255,.08);
}
.access-ocr-secondary:hover { background: rgba(255,255,255,.14); }
@media (max-width: 760px) {
  .access-code-group { flex-wrap: wrap; }
  .access-code-group > .relative { flex-basis: 100%; }
  .access-code-apply,
  .access-code-camera {
    min-height: 38px;
    flex: 1 1 0;
    border-left: 0 !important;
    border-top: 1px solid rgba(15, 23, 42, .08);
  }
  .access-code-camera span { display: none; }
  .access-ocr-actions { flex-wrap: wrap; }
  .access-ocr-primary,
  .access-ocr-secondary { flex: 1 1 150px; }
}

/* ----- Status strip ----- */
.status-strip {
  position: relative;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-ink-100);
  background: linear-gradient(135deg, #ffffff 0%, var(--color-ink-50) 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
:where(.dark) .status-strip {
  border-color: var(--color-ink-700);
  background: linear-gradient(135deg, var(--color-ink-800) 0%, rgba(23,32,42,.96) 100%);
}
.status-strip-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(54,144,212,.08) 1px, transparent 1.6px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,0) 100%);
}
:where(.dark) .status-strip-bg {
  background-image: radial-gradient(circle at 1px 1px, rgba(101,169,223,.12) 1px, transparent 1.6px);
}
.status-strip-inner {
  position: relative;
  display: flex; align-items: center;
  gap: 14px; padding: 10px 18px;
  flex-wrap: wrap;
}
.status-strip-flow {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--color-brand-sky-500) 30%, var(--color-bamboo-500) 60%, transparent 100%);
  background-size: 220% 100%;
  opacity: .55;
  animation: statusFlow 6s linear infinite;
}
@keyframes statusFlow {
  from { background-position: 200% 0%; }
  to   { background-position: -100% 0%; }
}

.status-pulse {
  position: relative;
  width: 12px; height: 12px;
  flex-shrink: 0;
  cursor: help;
}
.status-pulse-dot {
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: var(--color-bamboo-500);
  box-shadow: 0 0 0 2px rgba(0,168,59,.18);
}
.status-pulse-ring {
  position: absolute; inset: -3px; border-radius: 9999px;
  background: var(--color-bamboo-500);
  opacity: .3;
  animation: statusRing 2.4s ease-out infinite;
}
@keyframes statusRing {
  0%   { transform: scale(.6); opacity: .55; }
  80%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(2.2); opacity: 0; }
}

.status-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  font-size: 12px;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, transform .15s;
}
:where(.dark) .status-stat {
  background: rgba(43,54,71,.55);
  border-color: var(--color-ink-700);
}
.status-stat[role="button"] { cursor: pointer; }
.status-stat[role="button"]:hover {
  background: var(--color-ink-50);
  border-color: var(--color-ink-200);
  transform: translateY(-1px);
}
:where(.dark) .status-stat[role="button"]:hover {
  background: rgba(43,54,71,.85);
  border-color: var(--color-ink-600);
}
.status-stat[role="button"]:focus-visible {
  outline: 2px solid var(--color-brand-sky-500);
  outline-offset: 2px;
}

.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 9999px;
  margin-right: 2px;
}
.status-dot-bamboo { background: var(--color-bamboo-500); }

/* ----- Scanner hero ----- */
.scanner-hero { isolation: isolate; }
.scanner-hero-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(54,144,212,.06) 1px, transparent 1.6px),
    radial-gradient(ellipse at top right, rgba(54,144,212,.10) 0%, transparent 55%);
  background-size: 22px 22px, 100% 100%;
  pointer-events: none;
  z-index: 0;
}
:where(.dark) .scanner-hero-bg {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(101,169,223,.10) 1px, transparent 1.6px),
    radial-gradient(ellipse at top right, rgba(54,144,212,.18) 0%, transparent 55%);
}
.scanner-hero > * { position: relative; z-index: 1; }
@keyframes heroSweep { to { transform: rotate(360deg); } }

/* ----- Scan CTA button — soft pulse to draw attention ----- */
.scan-cta { position: relative; }
.scan-cta::after {
  content: ""; position: absolute; inset: -1px; border-radius: 9999px;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(226,69,80,.30);
  animation: scanCtaPulse 3.2s ease-out infinite;
}
@keyframes scanCtaPulse {
  0%   { box-shadow: 0 0 0 0  rgba(226,69,80,.30); }
  60%  { box-shadow: 0 0 0 7px rgba(226,69,80,0); }
  100% { box-shadow: 0 0 0 0  rgba(226,69,80,0); }
}
.scan-cta:disabled::after, .scan-cta[disabled]::after { animation: none; }

/* ----- keyboard key chip ----- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 4px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-ink-50);
  color: var(--color-ink-600);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 -1px 0 var(--color-ink-200);
}
:where(.dark) .kbd {
  border-color: var(--color-ink-700);
  background: var(--color-ink-900);
  color: var(--color-ink-300);
  box-shadow: inset 0 -1px 0 var(--color-ink-700);
}
.kbd-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-ink-50);
  color: var(--color-ink-700);
  border: 1px solid var(--color-ink-100);
  font-size: 13px;
}
:where(.dark) .kbd-row {
  background: rgba(23,32,42,.5);
  color: var(--color-ink-200);
  border-color: var(--color-ink-700);
}

@media (prefers-reduced-motion: reduce) {
  .status-pulse-ring,
  .status-strip-flow,
  .scan-cta::after,
  .fade-in-tab {
    animation: none !important;
  }
}

/* small margin utils not present in compiled set */
.mr-1 { margin-right: .25rem; }
.ml-1 { margin-left: .25rem; }
.ml-1\.5 { margin-left: .375rem; }
.mr-1\.5 { margin-right: .375rem; }


/* ============================================================== */
/*   Printer list-rows (product-grade design for printers tab)    */
/* ============================================================== */

.printer-list { display: flex; flex-direction: column; gap: 6px; }
.printer-list-loading,
.printer-list-empty,
.printer-list-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 28px 16px;
  border: 1px dashed var(--color-ink-200);
  border-radius: 12px;
  background: var(--color-ink-50);
  color: var(--color-ink-500);
  font-size: 12px;
}
:where(.dark) .printer-list-loading,
:where(.dark) .printer-list-empty,
:where(.dark) .printer-list-error {
  border-color: var(--color-ink-700);
  background: rgba(23,32,42,.4);
  color: var(--color-ink-400);
}
.printer-list-loading { flex-direction: row; }
.printer-list-error {
  border-style: solid;
  border-color: rgba(226,69,80,.30);
  background: rgba(226,69,80,.06);
  color: var(--color-brand-rose-600);
  flex-direction: row;
}
:where(.dark) .printer-list-error { color: var(--color-brand-rose-400); }

.printer-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 18px;
  border-radius: 14px;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  transition: border-color .15s, box-shadow .15s;
}
:where(.dark) .printer-row {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
}
.printer-row:hover {
  border-color: var(--color-ink-200);
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.05);
}
:where(.dark) .printer-row:hover {
  border-color: var(--color-ink-600);
  box-shadow: 0 6px 16px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.04);
}

/* Left state-accent bar (3px) */
.printer-row::before {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--color-ink-200);
  transition: background-color .15s;
}
:where(.dark) .printer-row::before { background: var(--color-ink-700); }
.printer-row[data-state="printing"]::before { background: var(--color-brand-sky-500); }
.printer-row[data-state="online"]::before   { background: var(--color-bamboo-500); }
.printer-row[data-state="stale"]::before    { background: var(--color-brand-amber-500); }
.printer-row[data-state="offline"]::before,
.printer-row[data-state="attention"]::before { background: var(--color-brand-rose-500); }

.printer-row-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: contain;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  padding: 4px;
}
:where(.dark) .printer-row-thumb {
  background: rgba(23,32,42,.55);
  border-color: var(--color-ink-700);
}

.printer-row-identity {
  flex: 1 1 200px;
  min-width: 0;
}
.printer-row-title {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.printer-row-title .alias {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.dark) .printer-row-title .alias { color: var(--color-ink-100); }

.printer-row-meta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-ink-500);
  min-width: 0;
  flex-wrap: wrap;
}
:where(.dark) .printer-row-meta { color: var(--color-ink-400); }
.printer-row-meta .sep { color: var(--color-ink-300); }
:where(.dark) .printer-row-meta .sep { color: var(--color-ink-600); }
.printer-row-meta .meta-model { font-weight: 600; color: var(--color-ink-600); }
:where(.dark) .printer-row-meta .meta-model { color: var(--color-ink-300); }
.printer-row-meta .meta-serial { font-size: 11px; opacity: .85; }

/* Live dot — small pulsing indicator next to alias */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: var(--color-ink-300);
}
.live-dot-bamboo { background: var(--color-bamboo-500); box-shadow: 0 0 0 2px rgba(0,168,59,.18); }
.live-dot-sky    { background: var(--color-brand-sky-500); box-shadow: 0 0 0 2px rgba(54,144,212,.20); animation: liveDotPulse 1.8s ease-in-out infinite; }
.live-dot-amber  { background: var(--color-brand-amber-500); box-shadow: 0 0 0 2px rgba(229,148,26,.20); }
.live-dot-rose   { background: var(--color-brand-rose-500); box-shadow: 0 0 0 2px rgba(226,69,80,.22); }
.live-dot-ink    { background: var(--color-ink-400); }
@keyframes liveDotPulse {
  0%,100% { transform: scale(1);   opacity: 1;  }
  50%     { transform: scale(.78); opacity: .55; }
}

/* Pill chip used inside the row (status pill, error/no-code badges) */
.printer-row-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid;
}
.printer-row-chip[data-tone="bamboo"] { background: rgba(0,168,59,.10);   color: var(--color-bamboo-600);      border-color: rgba(0,168,59,.22); }
.printer-row-chip[data-tone="sky"]    { background: rgba(54,144,212,.10); color: var(--color-brand-sky-600);   border-color: rgba(54,144,212,.22); }
.printer-row-chip[data-tone="amber"]  { background: rgba(229,148,26,.10); color: var(--color-brand-amber-600); border-color: rgba(229,148,26,.28); }
.printer-row-chip[data-tone="rose"]   { background: rgba(226,69,80,.10);  color: var(--color-brand-rose-600);  border-color: rgba(226,69,80,.30); }
.printer-row-chip[data-tone="ink"]    { background: var(--color-ink-100); color: var(--color-ink-600);         border-color: var(--color-ink-200); }
:where(.dark) .printer-row-chip[data-tone="bamboo"] { color: var(--color-bamboo-400); }
:where(.dark) .printer-row-chip[data-tone="sky"]    { color: var(--color-brand-sky-400); }
:where(.dark) .printer-row-chip[data-tone="amber"]  { color: var(--color-brand-amber-400); }
:where(.dark) .printer-row-chip[data-tone="rose"]   { color: var(--color-brand-rose-400); }
:where(.dark) .printer-row-chip[data-tone="ink"]    { background: var(--color-ink-700); color: var(--color-ink-300); border-color: var(--color-ink-600); }

.printer-row-status-cell { flex: 0 0 auto; }

/* Metrics block: temps + progress */
.printer-row-metrics {
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.printer-temps {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.temp-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-700);
  white-space: nowrap;
}
:where(.dark) .temp-cell { color: var(--color-ink-200); }
.temp-cell .mdi { font-size: 15px; line-height: 1; }
.temp-cell.temp-nozzle .mdi { color: var(--color-brand-amber-500); }
.temp-cell.temp-bed    .mdi { color: var(--color-brand-rose-400); }
.temp-cell.is-faint        { color: var(--color-ink-400); }
.temp-cell.is-faint .mdi   { opacity: .55; }
:where(.dark) .temp-cell.is-faint { color: var(--color-ink-500); }

/* Progress block */
.printer-progress {
  flex: 1 1 220px;
  min-width: 160px;
  min-height: 0;
}
.progress-line {
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress-bar {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  overflow: hidden;
}
:where(.dark) .progress-bar { background: var(--color-ink-700); }
.progress-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-bamboo-400) 0%, var(--color-bamboo-500) 100%);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.progress-fill::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 220% 100%;
  animation: progressShimmer 1.8s linear infinite;
}
@keyframes progressShimmer {
  from { background-position: 220% 0; }
  to   { background-position: -120% 0; }
}
.progress-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-bamboo-600);
  min-width: 36px;
  text-align: right;
}
:where(.dark) .progress-pct { color: var(--color-bamboo-400); }
.progress-eta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-ink-600);
  background: var(--color-ink-50);
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--color-ink-100);
  white-space: nowrap;
}
:where(.dark) .progress-eta {
  color: var(--color-ink-300);
  background: rgba(23,32,42,.5);
  border-color: var(--color-ink-700);
}

.progress-caption {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--color-ink-500);
  min-width: 0;
}
:where(.dark) .progress-caption { color: var(--color-ink-400); }
.progress-state {
  font-weight: 600;
  color: var(--color-ink-700);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
:where(.dark) .progress-state { color: var(--color-ink-200); }
.progress-state.muted { color: var(--color-ink-500); font-weight: 500; }
:where(.dark) .progress-state.muted { color: var(--color-ink-400); }
.progress-filename {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.progress-filename.muted { color: var(--color-ink-400); }
:where(.dark) .progress-filename.muted { color: var(--color-ink-500); }
.progress-layer {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-ink-100);
  color: var(--color-ink-600);
}
:where(.dark) .progress-layer {
  background: var(--color-ink-700);
  color: var(--color-ink-300);
}

/* Side cluster — observer + last-seen time */
.printer-row-side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.printer-observer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-ink-500);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.dark) .printer-observer { color: var(--color-ink-400); }
.printer-observer .mdi { font-size: 14px; line-height: 1; flex-shrink: 0; }
.printer-observer.is-ok  .mdi { color: var(--color-bamboo-500); }
.printer-observer.is-bad .mdi { color: var(--color-brand-rose-500); }
.printer-observer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.printer-row-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-ink-500);
  white-space: nowrap;
  text-align: right;
  min-width: 38px;
}
:where(.dark) .printer-row-time { color: var(--color-ink-400); }
.printer-row-time.is-fresh {
  color: var(--color-bamboo-600);
  position: relative;
}
:where(.dark) .printer-row-time.is-fresh { color: var(--color-bamboo-400); }
.printer-row-time.is-fresh::before {
  content: ""; display: inline-block;
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: var(--color-bamboo-500);
  margin-right: 6px;
  vertical-align: middle;
  animation: liveDotPulse 1.8s ease-in-out infinite;
}

/* Wrap to multi-line on narrower viewports */
@media (max-width: 1180px) {
  .printer-row {
    flex-wrap: wrap;
  }
  .printer-row-identity { flex: 1 1 200px; }
  .printer-row-metrics  { flex: 1 1 100%; padding-left: 58px; }
  .printer-row-side     { flex: 0 0 auto; padding-left: 58px; }
}
@media (max-width: 640px) {
  .printer-row { padding-left: 14px; gap: 10px; }
  .printer-row-thumb { width: 38px; height: 38px; }
  .printer-row-metrics { padding-left: 50px; gap: 12px; flex-wrap: wrap; }
  .printer-row-side { padding-left: 50px; flex-wrap: wrap; gap: 10px; }
  .printer-observer { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill::after,
  .live-dot-sky,
  .printer-row-time.is-fresh::before { animation: none !important; }
}


/* ============================================================== */
/*   v2 — subgrid alignment + icon-only status                     */
/* ============================================================== */

/* Parent becomes the grid; rows use subgrid so columns align across all rows */
@supports (grid-template-columns: subgrid) {
  .printer-list {
    display: grid;
    grid-template-columns:
      44px               /* thumb */
      minmax(180px, 1.4fr) /* identity */
      28px               /* status icon */
      auto               /* temps */
      minmax(220px, 1.6fr) /* progress */
      minmax(140px, 200px) /* observer */
      52px;              /* relative time */
    gap: 6px 16px;
  }
  .printer-row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: center;
    /* drop the old flex behaviour */
    flex-wrap: nowrap;
  }
}

/* Drop legacy wrapper styles no longer in DOM */
.printer-row-status-cell,
.printer-row-metrics,
.printer-row-side {
  display: contents;
}

/* The new icon-only status indicator */
.printer-row-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: help;
  flex-shrink: 0;
}
.printer-row-status-icon .mdi {
  font-size: 22px;
  line-height: 1;
  display: block;
}
.printer-row-status-icon[data-tone="sky"]    .mdi { color: var(--color-brand-sky-500); }
.printer-row-status-icon[data-tone="bamboo"] .mdi { color: var(--color-bamboo-500); }
.printer-row-status-icon[data-tone="amber"]  .mdi { color: var(--color-brand-amber-500); }
.printer-row-status-icon[data-tone="rose"]   .mdi { color: var(--color-brand-rose-500); }
.printer-row-status-icon[data-tone="ink"]    .mdi { color: var(--color-ink-400); }
:where(.dark) .printer-row-status-icon[data-tone="sky"]    .mdi { color: var(--color-brand-sky-400); }
:where(.dark) .printer-row-status-icon[data-tone="bamboo"] .mdi { color: var(--color-bamboo-400); }
:where(.dark) .printer-row-status-icon[data-tone="amber"]  .mdi { color: var(--color-brand-amber-400); }
:where(.dark) .printer-row-status-icon[data-tone="rose"]   .mdi { color: var(--color-brand-rose-400); }

/* In subgrid mode each cluster is a direct child — drop the inner flex glue */
@supports (grid-template-columns: subgrid) {
  .printer-temps     { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
  .printer-progress  { min-width: 0; }
  .printer-observer  { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
  .printer-temps.is-empty,
  .printer-progress.is-empty,
  .printer-observer.is-empty { visibility: hidden; }
}

/* Narrow viewports: drop subgrid back to single-column flex */
@media (max-width: 1180px) {
  .printer-list {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
  }
  .printer-row {
    display: flex !important;
    flex-wrap: wrap;
    grid-template-columns: none;
  }
  .printer-row-status-icon { order: 0; }
  .printer-row-identity    { flex: 1 1 200px; }
  .printer-temps,
  .printer-progress,
  .printer-observer {
    flex: 1 1 220px;
  }
  .printer-temps.is-empty,
  .printer-progress.is-empty,
  .printer-observer.is-empty { display: none !important; }
  .printer-row-time { margin-left: auto; }
}


/* ============================================================== */
/*   Virtual Printer Gateway redesign                              */
/* ============================================================== */

/* ---- Overview strip (status + ports) ---- */
.vpg-overview {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--color-ink-100);
  background: linear-gradient(135deg, rgba(124,92,209,.04) 0%, var(--color-white) 60%);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) auto;
  gap: 16px;
  align-items: center;
}
:where(.dark) .vpg-overview {
  border-color: var(--color-ink-700);
  background: linear-gradient(135deg, rgba(124,92,209,.10) 0%, var(--color-ink-800) 70%);
}
.vpg-overview-state {
  display: flex; align-items: center; gap: 12px; min-width: 0;
}
.vpg-overview-pulse {
  position: relative;
  width: 12px; height: 12px;
  flex-shrink: 0;
}
.vpg-overview-pulse::before {
  content: ""; position: absolute; inset: 2px;
  border-radius: 9999px;
  background: var(--color-bamboo-500);
  box-shadow: 0 0 0 3px rgba(0,168,59,.18);
}
.vpg-overview-pulse::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 9999px;
  background: var(--color-bamboo-500);
  opacity: .35;
  animation: liveDotPulse 2s ease-in-out infinite;
}
.vpg-overview[data-state="stopped"] .vpg-overview-pulse::before { background: var(--color-brand-rose-500); box-shadow: 0 0 0 3px rgba(226,69,80,.18); }
.vpg-overview[data-state="stopped"] .vpg-overview-pulse::after  { background: var(--color-brand-rose-500); animation: none; opacity: .35; }
.vpg-overview-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -.01em;
}
:where(.dark) .vpg-overview-title { color: var(--color-ink-100); }
.vpg-overview-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--color-ink-500);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
:where(.dark) .vpg-overview-sub { color: var(--color-ink-400); }
.vpg-overview-sub .sep { color: var(--color-ink-300); }
:where(.dark) .vpg-overview-sub .sep { color: var(--color-ink-600); }
.vpg-overview-sub .mono { color: var(--color-ink-700); }
:where(.dark) .vpg-overview-sub .mono { color: var(--color-ink-200); }

.vpg-overview-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-self: end;
}
.vpg-port-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-ink-50);
  font-size: 11px;
  color: var(--color-ink-700);
  transition: background-color .15s, border-color .15s;
}
:where(.dark) .vpg-port-chip {
  border-color: var(--color-ink-700);
  background: rgba(43,54,71,.5);
  color: var(--color-ink-200);
}
.vpg-port-chip .mdi {
  font-size: 14px;
  line-height: 1;
  color: var(--color-brand-sky-500);
}
.vpg-port-chip .vpg-port-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-port-chip .vpg-port-label { color: var(--color-ink-400); }
.vpg-port-chip .vpg-port-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12px;
}
.vpg-port-chip[data-tone="amber"] {
  border-color: rgba(229,148,26,.35);
  background: rgba(229,148,26,.08);
  color: var(--color-brand-amber-600);
}
.vpg-port-chip[data-tone="amber"] .mdi { color: var(--color-brand-amber-500); }
:where(.dark) .vpg-port-chip[data-tone="amber"] { color: var(--color-brand-amber-400); }
.vpg-port-chip[data-tone="rose"] {
  border-color: rgba(226,69,80,.35);
  background: rgba(226,69,80,.08);
  color: var(--color-brand-rose-600);
}
.vpg-port-chip[data-tone="rose"] .mdi { color: var(--color-brand-rose-500); }
:where(.dark) .vpg-port-chip[data-tone="rose"] { color: var(--color-brand-rose-400); }
.vpg-port-chip[data-tone="bamboo"] {
  border-color: rgba(0,168,59,.30);
  background: rgba(0,168,59,.08);
  color: var(--color-bamboo-600);
}
.vpg-port-chip[data-tone="bamboo"] .mdi { color: var(--color-bamboo-500); }
:where(.dark) .vpg-port-chip[data-tone="bamboo"] { color: var(--color-bamboo-400); }

@media (max-width: 900px) {
  .vpg-overview { grid-template-columns: 1fr; }
  .vpg-overview-ports { justify-self: stretch; }
}

/* ---- Dark Virtual Printers panel ---- */
.vpg-panel {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--color-ink-700);
  background: linear-gradient(180deg, var(--color-ink-900) 0%, #11171f 100%);
  color: var(--color-ink-100);
  overflow: hidden;
  margin-top: 14px;
}
.vpg-panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.vpg-panel-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(0,168,59,.15);
  color: var(--color-bamboo-400);
}
.vpg-panel-header-title {
  font-size: 14px; font-weight: 700;
  letter-spacing: -.01em;
}
.vpg-panel-header-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-400);
}
.vpg-panel-header-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 9999px;
  background: rgba(0,168,59,.15);
  color: var(--color-bamboo-300);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.vpg-panel-header-status[data-state="stopped"] {
  background: rgba(226,69,80,.15);
  color: #f4a3a8;
}
.vpg-panel-header-status .live-dot {
  width: 7px; height: 7px;
  background: var(--color-bamboo-400);
  animation: liveDotPulse 1.8s ease-in-out infinite;
}
.vpg-panel-header-status[data-state="stopped"] .live-dot {
  background: var(--color-brand-rose-400);
  animation: none;
}

.vpg-panel-body { padding: 14px 16px; }
.vpg-panel-hint {
  font-size: 11.5px;
  color: var(--color-ink-400);
  margin-bottom: 12px;
}
.vpg-panel-hint .mono { color: var(--color-ink-300); }

.vpg-printers { display: flex; flex-direction: column; gap: 8px; }

.vpg-printer-row {
  display: grid;
  grid-template-columns: 44px 110px minmax(150px, 1fr) minmax(180px, 1.3fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.02);
  transition: border-color .15s, background-color .15s;
}
.vpg-printer-row:hover {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
}
.vpg-printer-row[data-enabled="true"] {
  border-color: rgba(0,168,59,.32);
  background: rgba(0,168,59,.07);
}
.vpg-printer-row[data-enabled="true"]:hover {
  border-color: rgba(0,168,59,.50);
  background: rgba(0,168,59,.10);
}

/* iOS-style toggle */
.vpg-switch {
  position: relative;
  width: 36px; height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-block;
}
.vpg-switch input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.vpg-switch-track {
  position: absolute; inset: 0;
  border-radius: 9999px;
  background: rgba(255,255,255,.18);
  transition: background-color .2s;
}
.vpg-switch-knob {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .2s cubic-bezier(.2,.7,.2,1);
}
.vpg-switch input:checked ~ .vpg-switch-track { background: var(--color-bamboo-500); }
.vpg-switch input:checked ~ .vpg-switch-track .vpg-switch-knob { transform: translateX(16px); }
.vpg-switch input:focus-visible ~ .vpg-switch-track {
  box-shadow: 0 0 0 3px rgba(0,168,59,.30);
}

/* Model badge cluster */
.vpg-model-badge { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vpg-model-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-50);
}
.vpg-model-code {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-ink-400);
  text-transform: uppercase;
}

/* IP input — clean dark look */
.vpg-ip-input {
  display: flex; align-items: center; gap: 6px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  transition: border-color .15s, background-color .15s;
}
.vpg-ip-input:focus-within {
  border-color: var(--color-bamboo-500);
  background: rgba(0,0,0,.40);
}
.vpg-ip-input .mdi {
  font-size: 14px;
  color: var(--color-ink-500);
  line-height: 1;
  flex-shrink: 0;
}
.vpg-ip-input input {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--color-ink-100);
  height: 100%;
}
.vpg-ip-input input::placeholder { color: var(--color-ink-500); }

/* Hostname/serial cluster */
.vpg-printer-meta { min-width: 0; }
.vpg-printer-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vpg-printer-sub {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-ink-400);
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.vpg-printer-sub .sep { color: var(--color-ink-600); }
.vpg-printer-sub .vpg-code-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vpg-printer-sub .vpg-code-tag.ok { color: var(--color-bamboo-400); }
.vpg-printer-sub .vpg-code-tag.missing { color: var(--color-brand-amber-400); }

.vpg-status-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  cursor: help;
  flex-shrink: 0;
}
.vpg-status-icon .mdi { font-size: 22px; line-height: 1; }
.vpg-status-icon[data-tone="bamboo"] .mdi { color: var(--color-bamboo-400); }
.vpg-status-icon[data-tone="amber"]  .mdi { color: var(--color-brand-amber-400); }
.vpg-status-icon[data-tone="ink"]    .mdi { color: var(--color-ink-500); }

.vpg-row-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--color-ink-300);
  transition: background-color .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.vpg-row-action:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}
.vpg-row-action .mdi { font-size: 16px; line-height: 1; }

@media (max-width: 1080px) {
  .vpg-printer-row {
    grid-template-columns: 44px 110px 1fr auto auto;
    grid-template-rows: auto auto;
  }
  .vpg-printer-row > .vpg-ip-input { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) {
  .vpg-printer-row {
    grid-template-columns: 44px 1fr auto;
  }
  .vpg-printer-row > .vpg-model-badge { grid-column: 2; }
  .vpg-printer-row > .vpg-printer-meta { grid-column: 1 / -1; grid-row: 2; padding-left: 58px; }
  .vpg-printer-row > .vpg-ip-input { grid-column: 1 / -1; grid-row: 3; }
  .vpg-printer-row > .vpg-status-icon { grid-column: 3; grid-row: 1; }
  .vpg-printer-row > .vpg-row-action { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
}

/* ---- Cert card ---- */
.vpg-cert-card {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-white);
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: start;
}
:where(.dark) .vpg-cert-card {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
}
.vpg-cert-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-500);
}
.vpg-cert-card[data-state="missing"] .vpg-cert-icon {
  background: rgba(229,148,26,.10);
  color: var(--color-brand-amber-500);
}
.vpg-cert-icon .mdi { font-size: 24px; line-height: 1; }
.vpg-cert-body { min-width: 0; }
.vpg-cert-title-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.vpg-cert-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -.01em;
}
:where(.dark) .vpg-cert-title { color: var(--color-ink-100); }
.vpg-cert-sublabel {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.vpg-cert-sublabel.ok { color: var(--color-bamboo-600); }
:where(.dark) .vpg-cert-sublabel.ok { color: var(--color-bamboo-400); }
.vpg-cert-sublabel.warn { color: var(--color-brand-amber-600); }
:where(.dark) .vpg-cert-sublabel.warn { color: var(--color-brand-amber-400); }
.vpg-cert-paths {
  margin-top: 8px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 4px 16px;
  font-size: 11.5px;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-cert-paths { color: var(--color-ink-400); }
.vpg-cert-paths .vpg-path-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-ink-400);
  font-weight: 700;
}
:where(.dark) .vpg-cert-paths .vpg-path-label { color: var(--color-ink-500); }
.vpg-cert-paths .mono {
  font-size: 11px;
  color: var(--color-ink-700);
  word-break: break-all;
}
:where(.dark) .vpg-cert-paths .mono { color: var(--color-ink-200); }
.vpg-cert-counters {
  margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-cert-counters { color: var(--color-ink-400); }
.vpg-cert-counters span.mono { color: var(--color-ink-700); }
:where(.dark) .vpg-cert-counters span.mono { color: var(--color-ink-200); }
.vpg-cert-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.vpg-cert-warn {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--color-brand-amber-600);
}
:where(.dark) .vpg-cert-warn { color: var(--color-brand-amber-400); }
.vpg-cert-warn .mono {
  background: rgba(229,148,26,.10);
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid rgba(229,148,26,.25);
}

@media (max-width: 760px) {
  .vpg-cert-card {
    grid-template-columns: 44px 1fr;
  }
  .vpg-cert-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .vpg-cert-paths { grid-template-columns: 1fr; }
}

/* Action buttons used in cert card */
.vpg-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-700);
}
:where(.dark) .vpg-action-btn {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
  color: var(--color-ink-200);
}
.vpg-action-btn:hover {
  border-color: var(--color-ink-300);
  background: var(--color-ink-50);
}
:where(.dark) .vpg-action-btn:hover {
  border-color: var(--color-ink-600);
  background: rgba(43,54,71,.5);
}
.vpg-action-btn .mdi { font-size: 16px; line-height: 1; }
.vpg-action-btn[data-variant="primary"] {
  border-color: transparent;
  background: var(--color-brand-sky-500);
  color: #fff;
}
.vpg-action-btn[data-variant="primary"]:hover {
  background: var(--color-brand-sky-600);
}


/* ============================================================== */
/*   VPG v2 — light theme for Virtual Printers panel + thumbs      */
/* ============================================================== */

/* panel itself: white card matching the rest of the page */
.vpg-panel {
  background: var(--color-white);
  border-color: var(--color-ink-100);
  color: var(--color-ink-900);
}
:where(.dark) .vpg-panel {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
  color: var(--color-ink-100);
}

.vpg-panel-header {
  border-bottom-color: var(--color-ink-100);
  background: var(--color-ink-50);
}
:where(.dark) .vpg-panel-header {
  border-bottom-color: var(--color-ink-700);
  background: rgba(43,54,71,.30);
}
.vpg-panel-header-title { color: var(--color-ink-900); }
:where(.dark) .vpg-panel-header-title { color: var(--color-ink-100); }
.vpg-panel-header-count { color: var(--color-ink-500); }
:where(.dark) .vpg-panel-header-count { color: var(--color-ink-400); }
.vpg-panel-header-icon {
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-600);
}
:where(.dark) .vpg-panel-header-icon {
  background: rgba(0,168,59,.15);
  color: var(--color-bamboo-400);
}
.vpg-panel-header-status {
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-600);
}
:where(.dark) .vpg-panel-header-status {
  background: rgba(0,168,59,.15);
  color: var(--color-bamboo-400);
}
.vpg-panel-header-status[data-state="stopped"] {
  background: rgba(226,69,80,.10);
  color: var(--color-brand-rose-600);
}
:where(.dark) .vpg-panel-header-status[data-state="stopped"] {
  background: rgba(226,69,80,.15);
  color: var(--color-brand-rose-400);
}

.vpg-panel-hint { color: var(--color-ink-500); }
:where(.dark) .vpg-panel-hint { color: var(--color-ink-400); }
.vpg-panel-hint .mono { color: var(--color-ink-700); }
:where(.dark) .vpg-panel-hint .mono { color: var(--color-ink-200); }

/* row layout — extend grid to add a thumb column */
.vpg-printer-row {
  grid-template-columns: 44px 44px auto minmax(150px, 1fr) minmax(180px, 1.3fr) auto auto;
  background: var(--color-ink-50);
  border-color: var(--color-ink-100);
}
:where(.dark) .vpg-printer-row {
  background: rgba(43,54,71,.30);
  border-color: var(--color-ink-700);
}
.vpg-printer-row:hover {
  background: var(--color-white);
  border-color: var(--color-ink-200);
}
:where(.dark) .vpg-printer-row:hover {
  background: rgba(43,54,71,.50);
  border-color: var(--color-ink-600);
}
.vpg-printer-row[data-enabled="true"] {
  border-color: rgba(0,168,59,.32);
  background: rgba(0,168,59,.04);
}
.vpg-printer-row[data-enabled="true"]:hover {
  border-color: rgba(0,168,59,.50);
  background: rgba(0,168,59,.08);
}

/* the new thumb */
.vpg-printer-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  object-fit: contain;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  padding: 4px;
}
:where(.dark) .vpg-printer-thumb {
  background: rgba(23,32,42,.55);
  border-color: var(--color-ink-700);
}

.vpg-model-name { color: var(--color-ink-900); }
:where(.dark) .vpg-model-name { color: var(--color-ink-100); }
.vpg-model-code { color: var(--color-ink-500); }
:where(.dark) .vpg-model-code { color: var(--color-ink-400); }

/* light-theme switch track */
.vpg-switch-track { background: var(--color-ink-200); }
:where(.dark) .vpg-switch-track { background: rgba(255,255,255,.18); }
.vpg-switch input:checked ~ .vpg-switch-track { background: var(--color-bamboo-500); }

/* light IP input */
.vpg-ip-input {
  border-color: var(--color-ink-200);
  background: var(--color-white);
}
:where(.dark) .vpg-ip-input {
  border-color: var(--color-ink-700);
  background: rgba(0,0,0,.30);
}
.vpg-ip-input:focus-within {
  border-color: var(--color-bamboo-500);
  background: var(--color-white);
}
:where(.dark) .vpg-ip-input:focus-within {
  background: rgba(0,0,0,.40);
}
.vpg-ip-input .mdi { color: var(--color-ink-400); }
.vpg-ip-input input { color: var(--color-ink-900); }
:where(.dark) .vpg-ip-input input { color: var(--color-ink-100); }
.vpg-ip-input input::placeholder { color: var(--color-ink-400); }

.vpg-printer-name { color: var(--color-ink-900); }
:where(.dark) .vpg-printer-name { color: var(--color-ink-100); }
.vpg-printer-sub { color: var(--color-ink-500); }
:where(.dark) .vpg-printer-sub { color: var(--color-ink-400); }
.vpg-printer-sub .sep { color: var(--color-ink-300); }
:where(.dark) .vpg-printer-sub .sep { color: var(--color-ink-600); }

.vpg-status-icon[data-tone="bamboo"] .mdi { color: var(--color-bamboo-500); }
.vpg-status-icon[data-tone="amber"]  .mdi { color: var(--color-brand-amber-500); }
.vpg-status-icon[data-tone="ink"]    .mdi { color: var(--color-ink-400); }
:where(.dark) .vpg-status-icon[data-tone="bamboo"] .mdi { color: var(--color-bamboo-400); }
:where(.dark) .vpg-status-icon[data-tone="amber"]  .mdi { color: var(--color-brand-amber-400); }
:where(.dark) .vpg-status-icon[data-tone="ink"]    .mdi { color: var(--color-ink-500); }

.vpg-row-action {
  border-color: var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-500);
}
:where(.dark) .vpg-row-action {
  border-color: var(--color-ink-700);
  background: rgba(255,255,255,.04);
  color: var(--color-ink-300);
}
.vpg-row-action:hover {
  background: var(--color-ink-50);
  border-color: var(--color-ink-300);
  color: var(--color-ink-700);
}
:where(.dark) .vpg-row-action:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: #fff;
}

@media (max-width: 1080px) {
  .vpg-printer-row {
    grid-template-columns: 44px 44px 110px 1fr auto auto;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 640px) {
  .vpg-printer-row {
    grid-template-columns: 44px 44px 1fr auto;
  }
  .vpg-printer-row > .vpg-model-badge { grid-column: 3; }
  .vpg-printer-row > .vpg-status-icon { grid-column: 4; grid-row: 1; }
  .vpg-printer-row > .vpg-printer-meta { grid-column: 1 / -1; grid-row: 2; padding-left: 100px; }
  .vpg-printer-row > .vpg-ip-input { grid-column: 1 / -1; grid-row: 3; }
  .vpg-printer-row > .vpg-row-action { grid-column: 1 / -1; grid-row: 4; justify-self: end; }
}

/* VPG v3 — subgrid alignment for printer rows (kill the staircase) */
@supports (grid-template-columns: subgrid) {
  .vpg-printers {
    display: grid;
    grid-template-columns:
      44px               /* toggle */
      44px               /* thumb */
      120px              /* model badge */
      minmax(150px, 1fr) /* IP */
      minmax(180px, 1.3fr) /* meta */
      28px               /* status icon */
      32px;              /* action */
    gap: 8px 14px;
  }
  .vpg-printer-row {
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
}
@media (max-width: 1080px) {
  .vpg-printers { display: flex !important; flex-direction: column; gap: 8px; }
  .vpg-printer-row {
    display: grid;
    grid-column: auto;
    grid-template-columns: 44px 44px 110px 1fr auto auto;
    grid-template-rows: auto auto;
  }
  .vpg-printer-row > .vpg-ip-input { grid-column: 1 / -1; grid-row: 2; }
}

/* VPG v4 — kill subgrid (buttons were overflowing past row padding) */
@supports (grid-template-columns: subgrid) {
  .vpg-printers { display: flex; flex-direction: column; gap: 8px; }
  .vpg-printer-row {
    grid-template-columns: 44px 44px 120px minmax(150px, 1fr) minmax(180px, 1.3fr) auto auto;
    grid-column: auto;
  }
}


/* ============================================================== */
/*   Bambu Studio Cert v2 — two-step setup with drag&drop         */
/* ============================================================== */

.vpg-cert-v2 {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-white);
  overflow: hidden;
}
:where(.dark) .vpg-cert-v2 { border-color: var(--color-ink-700); background: var(--color-ink-800); }

.vpg-cert-v2-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-ink-100);
  background: var(--color-ink-50);
}
:where(.dark) .vpg-cert-v2-header { border-bottom-color: var(--color-ink-700); background: rgba(43,54,71,.30); }
.vpg-cert-v2-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-600);
  flex-shrink: 0;
}
.vpg-cert-v2[data-state="missing"] .vpg-cert-v2-icon { background: rgba(229,148,26,.10); color: var(--color-brand-amber-600); }
:where(.dark) .vpg-cert-v2-icon { color: var(--color-bamboo-400); }
:where(.dark) .vpg-cert-v2[data-state="missing"] .vpg-cert-v2-icon { color: var(--color-brand-amber-400); }
.vpg-cert-v2-icon .mdi { font-size: 20px; line-height: 1; }
.vpg-cert-v2-headline { flex: 1; min-width: 0; }
.vpg-cert-v2-title { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--color-ink-900); }
:where(.dark) .vpg-cert-v2-title { color: var(--color-ink-100); }
.vpg-cert-v2-subtitle { margin-top: 2px; font-size: 11.5px; color: var(--color-ink-500); }
:where(.dark) .vpg-cert-v2-subtitle { color: var(--color-ink-400); }
.vpg-cert-v2-badges { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }

.vpg-cert-mini-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid;
  white-space: nowrap;
}
.vpg-cert-mini-badge.ok   { background: rgba(0,168,59,.10);   color: var(--color-bamboo-600);      border-color: rgba(0,168,59,.22); }
.vpg-cert-mini-badge.warn { background: rgba(229,148,26,.10); color: var(--color-brand-amber-600); border-color: rgba(229,148,26,.30); }
:where(.dark) .vpg-cert-mini-badge.ok   { color: var(--color-bamboo-400); }
:where(.dark) .vpg-cert-mini-badge.warn { color: var(--color-brand-amber-400); }

/* Steps */
.vpg-cert-v2-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
@media (max-width: 760px) { .vpg-cert-v2-steps { grid-template-columns: 1fr; } }

.vpg-cert-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-ink-50);
  transition: border-color .15s, background-color .15s;
}
:where(.dark) .vpg-cert-step { border-color: var(--color-ink-700); background: rgba(43,54,71,.30); }
.vpg-cert-step[data-state="done"] { border-color: rgba(0,168,59,.32); background: rgba(0,168,59,.04); }
.vpg-cert-step[data-state="todo"] { border-color: rgba(229,148,26,.35); background: rgba(229,148,26,.05); }

.vpg-cert-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 9999px;
  background: var(--color-white);
  border: 1px solid var(--color-ink-200);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-ink-500);
  align-self: start;
}
:where(.dark) .vpg-cert-step-num { background: var(--color-ink-800); border-color: var(--color-ink-700); color: var(--color-ink-400); }
.vpg-cert-step[data-state="done"] .vpg-cert-step-num {
  background: var(--color-bamboo-500);
  border-color: var(--color-bamboo-500);
  color: #fff;
  font-size: 0;
}
.vpg-cert-step[data-state="done"] .vpg-cert-step-num::before {
  content: "✓"; font-size: 14px; line-height: 1;
}

.vpg-cert-step-body { min-width: 0; }
.vpg-cert-step-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-900);
}
:where(.dark) .vpg-cert-step-title { color: var(--color-ink-100); }
.vpg-cert-step-title .mdi { font-size: 16px; line-height: 1; color: var(--color-ink-500); }
.vpg-cert-step[data-state="done"] .vpg-cert-step-title .mdi { color: var(--color-bamboo-500); }
.vpg-cert-step[data-state="todo"] .vpg-cert-step-title .mdi { color: var(--color-brand-amber-500); }

.vpg-cert-step-meta {
  margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
.vpg-cert-step-meta .mono {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-700);
  background: var(--color-white);
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--color-ink-100);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .vpg-cert-step-meta .mono { color: var(--color-ink-200); background: var(--color-ink-900); border-color: var(--color-ink-700); }

.vpg-cert-copy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-500);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
:where(.dark) .vpg-cert-copy-btn { border-color: var(--color-ink-700); background: var(--color-ink-800); color: var(--color-ink-400); }
.vpg-cert-copy-btn:hover { background: var(--color-ink-50); color: var(--color-ink-700); }
:where(.dark) .vpg-cert-copy-btn:hover { background: rgba(43,54,71,.5); color: var(--color-ink-200); }
.vpg-cert-copy-btn.is-copied { border-color: var(--color-bamboo-500); color: var(--color-bamboo-600); background: rgba(0,168,59,.10); }
.vpg-cert-copy-btn .mdi { font-size: 14px; line-height: 1; }

.vpg-cert-step-stats {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-cert-step-stats { color: var(--color-ink-400); }

/* Drop zone for Step 1 */
.vpg-cert-dropzone {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  border-radius: 10px;
  border: 2px dashed var(--color-ink-200);
  background: var(--color-white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink-500);
  transition: border-color .15s, background-color .15s, color .15s;
}
:where(.dark) .vpg-cert-dropzone { border-color: var(--color-ink-700); background: rgba(0,0,0,.20); color: var(--color-ink-400); }
.vpg-cert-dropzone:hover { border-color: var(--color-bamboo-500); background: rgba(0,168,59,.04); color: var(--color-bamboo-600); }
:where(.dark) .vpg-cert-dropzone:hover { color: var(--color-bamboo-400); }
.vpg-cert-dropzone.is-dragover {
  border-color: var(--color-bamboo-500);
  border-style: solid;
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-600);
}
.vpg-cert-dropzone .mdi { font-size: 18px; line-height: 1; }
.vpg-cert-dropzone input[type="file"] { display: none; }

/* Step 2 download CTA */
.vpg-cert-step-cta {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 60px;
  border-radius: 10px;
  background: var(--color-brand-sky-500);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, transform .12s;
  text-decoration: none;
}
.vpg-cert-step-cta:hover { background: var(--color-brand-sky-600); }
.vpg-cert-step-cta:active { transform: translateY(1px); }
.vpg-cert-step-cta .mdi { font-size: 18px; line-height: 1; }

/* Diagnostics (collapsible) */
.vpg-cert-diag { border-top: 1px solid var(--color-ink-100); }
:where(.dark) .vpg-cert-diag { border-top-color: var(--color-ink-700); }
.vpg-cert-diag summary {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-700);
  list-style: none;
  user-select: none;
}
.vpg-cert-diag summary::-webkit-details-marker { display: none; }
:where(.dark) .vpg-cert-diag summary { color: var(--color-ink-200); }
.vpg-cert-diag summary::before {
  content: "›";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--color-ink-400);
  transition: transform .15s;
}
.vpg-cert-diag[open] summary::before { transform: rotate(90deg); }
.vpg-cert-diag summary > .mdi { font-size: 16px; color: var(--color-ink-500); }
.vpg-cert-diag-summary {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-cert-diag-summary { color: var(--color-ink-400); }
.vpg-cert-diag-body {
  padding: 4px 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.vpg-cert-counter-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--color-ink-50);
  font-size: 12px;
  flex-wrap: wrap;
}
:where(.dark) .vpg-cert-counter-row { background: rgba(43,54,71,.30); }
.vpg-cert-counter-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink-500);
  width: 50px;
}
.vpg-cert-counter-val {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-ink-600);
}
:where(.dark) .vpg-cert-counter-val { color: var(--color-ink-300); }
.vpg-cert-counter-val .mono {
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-900);
}
:where(.dark) .vpg-cert-counter-val .mono { color: var(--color-ink-100); }
.vpg-cert-counter-row .vpg-action-btn {
  margin-left: auto;
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
}
.vpg-cert-trust-warn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--color-brand-amber-600);
  font-weight: 600;
}
:where(.dark) .vpg-cert-trust-warn { color: var(--color-brand-amber-400); }
.vpg-cert-trust-warn .mdi { font-size: 14px; }

.vpg-cert-message {
  padding: 0 16px 12px;
  font-size: 12px;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-cert-message { color: var(--color-ink-400); }
.vpg-cert-message:empty { padding: 0; }


/* ============================================================== */
/*   Scanner — unified host grid (live thumbnails, no separate rail) */
/* ============================================================== */

.scan-grid-wrap { display: flex; flex-direction: column; gap: 8px; }

.scan-grid-legend {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-400);
  flex-wrap: wrap;
  gap: 8px 12px;
}
.scan-grid-legend-items { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scan-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.scan-legend-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-ink-100);
  flex-shrink: 0;
}
:where(.dark) .scan-legend-swatch { background: var(--color-ink-700); border-color: var(--color-ink-600); }
.scan-legend-swatch.is-pending { }
.scan-legend-swatch.is-scanned { background: var(--color-ink-200); border-color: var(--color-ink-300); }
:where(.dark) .scan-legend-swatch.is-scanned { background: var(--color-ink-600); border-color: var(--color-ink-500); }
.scan-legend-swatch.is-found { background: rgba(0,168,59,.20); border-color: var(--color-bamboo-500); }
.scan-legend-swatch.is-registered { background: rgba(54,144,212,.20); border-color: var(--color-brand-sky-500); }

.scan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(54,144,212,.025) 0%, transparent 100%),
    var(--color-white);
  border: 1px solid var(--color-ink-100);
  min-height: 80px;
  position: relative;
}
:where(.dark) .scan-grid {
  background:
    linear-gradient(180deg, rgba(54,144,212,.04) 0%, transparent 100%),
    rgba(23,32,42,.40);
  border-color: var(--color-ink-700);
}

.scan-cell {
  position: relative;
  height: 46px;
  border-radius: 8px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s, background-color .2s, border-color .2s;
}
:where(.dark) .scan-cell { background: rgba(43,54,71,.30); border-color: var(--color-ink-700); }

.scan-cell .scan-cell-octet {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-ink-400);
  line-height: 1;
}
:where(.dark) .scan-cell .scan-cell-octet { color: var(--color-ink-500); }

.scan-cell.is-scanned {
  background: var(--color-ink-100);
  border-color: var(--color-ink-200);
}
:where(.dark) .scan-cell.is-scanned { background: rgba(43,54,71,.55); border-color: var(--color-ink-600); }
.scan-cell.is-scanned .scan-cell-octet { color: var(--color-ink-500); }
:where(.dark) .scan-cell.is-scanned .scan-cell-octet { color: var(--color-ink-400); }

.scan-cell.is-found {
  background: var(--color-white);
  border-color: var(--color-bamboo-500);
  box-shadow: 0 2px 8px rgba(0,168,59,.18), inset 0 0 0 1px rgba(0,168,59,.18);
  padding: 3px;
  flex-direction: column;
  gap: 0;
}
:where(.dark) .scan-cell.is-found {
  background: var(--color-ink-800);
  box-shadow: 0 2px 8px rgba(0,168,59,.30), inset 0 0 0 1px rgba(0,168,59,.30);
}
.scan-cell.is-found.is-registered {
  border-color: var(--color-brand-sky-500);
  box-shadow: 0 2px 8px rgba(54,144,212,.20), inset 0 0 0 1px rgba(54,144,212,.20);
}
:where(.dark) .scan-cell.is-found.is-registered {
  box-shadow: 0 2px 8px rgba(54,144,212,.30), inset 0 0 0 1px rgba(54,144,212,.30);
}
.scan-cell.is-found .scan-cell-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex: 1;
  min-height: 0;
}
.scan-cell.is-found .scan-cell-octet {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--color-ink-500);
  background: rgba(255,255,255,.85);
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.2;
  pointer-events: none;
}
:where(.dark) .scan-cell.is-found .scan-cell-octet {
  background: rgba(23,32,42,.85);
  color: var(--color-ink-300);
}

/* status corner dot for found cells (extra signal beyond border color) */
.scan-cell.is-found::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: var(--color-bamboo-500);
  box-shadow: 0 0 0 2px rgba(0,168,59,.18);
  z-index: 2;
}
.scan-cell.is-found.is-registered::before {
  background: var(--color-brand-sky-500);
  box-shadow: 0 0 0 2px rgba(54,144,212,.18);
}
.scan-cell.is-found.is-auth-failed {
  border-color: var(--color-brand-rose-500);
  box-shadow: 0 2px 8px rgba(226,69,80,.20), inset 0 0 0 1px rgba(226,69,80,.22);
}
.scan-cell.is-found.is-auth-failed::before {
  background: var(--color-brand-rose-500);
  box-shadow: 0 0 0 2px rgba(226,69,80,.20);
}
.scan-cell.is-found.is-needs-code,
.scan-cell.is-found.is-warning {
  border-color: var(--color-brand-amber-500);
  box-shadow: 0 2px 8px rgba(229,148,26,.18), inset 0 0 0 1px rgba(229,148,26,.22);
}
.scan-cell.is-found.is-needs-code::before,
.scan-cell.is-found.is-warning::before {
  background: var(--color-brand-amber-500);
  box-shadow: 0 0 0 2px rgba(229,148,26,.20);
}

/* hover lift */
.scan-cell:hover {
  transform: translateY(-2px);
  z-index: 3;
}
.scan-cell.is-found:hover {
  box-shadow: 0 6px 14px rgba(0,168,59,.30), inset 0 0 0 1px rgba(0,168,59,.30);
}
.scan-cell.is-found.is-registered:hover {
  box-shadow: 0 6px 14px rgba(54,144,212,.30), inset 0 0 0 1px rgba(54,144,212,.30);
}
.scan-cell.is-found.is-auth-failed:hover {
  box-shadow: 0 6px 14px rgba(226,69,80,.30), inset 0 0 0 1px rgba(226,69,80,.30);
}
.scan-cell.is-found.is-needs-code:hover,
.scan-cell.is-found.is-warning:hover {
  box-shadow: 0 6px 14px rgba(229,148,26,.28), inset 0 0 0 1px rgba(229,148,26,.30);
}

/* pop-in animation when a printer is just found */
.scan-cell.just-found {
  animation: scanCellPop .42s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes scanCellPop {
  0%   { transform: scale(.5);  opacity: .2; }
  55%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

/* live ring on the just-found cell to draw the eye */
.scan-cell.just-found::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  pointer-events: none;
  border: 2px solid var(--color-bamboo-500);
  opacity: 0;
  animation: scanCellRing .9s ease-out both;
}
.scan-cell.is-registered.just-found::after { border-color: var(--color-brand-sky-500); }
@keyframes scanCellRing {
  0%   { opacity: .6; transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-cell.just-found,
  .scan-cell.just-found::after { animation: none !important; }
}


/* ============================================================== */
/*   Printer detail drawer                                         */
/* ============================================================== */

.printer-row { cursor: pointer; }
.printer-row:focus-visible {
  outline: 2px solid var(--color-brand-sky-500);
  outline-offset: 2px;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(23,32,42,.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;
  animation: drawerBackdropIn .2s ease-out both;
}
@keyframes drawerBackdropIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  width: 100%;
  max-width: 520px;
  height: 100%;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(15,23,42,.12);
  animation: drawerSlideIn .26s cubic-bezier(.2,.7,.2,1) both;
}
:where(.dark) .drawer { background: var(--color-ink-800); box-shadow: -10px 0 30px rgba(0,0,0,.50); }
@keyframes drawerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.drawer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-ink-100);
  flex-shrink: 0;
}
:where(.dark) .drawer-header { border-bottom-color: var(--color-ink-700); }
.drawer-thumb {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: contain;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  padding: 4px;
}
:where(.dark) .drawer-thumb { background: rgba(23,32,42,.55); border-color: var(--color-ink-700); }
.drawer-headline { flex: 1; min-width: 0; }
.drawer-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--color-ink-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.dark) .drawer-title { color: var(--color-ink-100); }
.drawer-subtitle {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-ink-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.dark) .drawer-subtitle { color: var(--color-ink-400); }
.drawer-close {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-500);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
:where(.dark) .drawer-close { border-color: var(--color-ink-700); background: var(--color-ink-800); color: var(--color-ink-300); }
.drawer-close:hover { background: var(--color-ink-50); color: var(--color-ink-900); border-color: var(--color-ink-300); }
:where(.dark) .drawer-close:hover { background: var(--color-ink-700); color: var(--color-ink-100); border-color: var(--color-ink-600); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 18px;
}

.drawer-section { display: flex; flex-direction: column; gap: 8px; }
.drawer-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--color-ink-500);
}
:where(.dark) .drawer-section-title { color: var(--color-ink-400); }

.drawer-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.drawer-state-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: var(--color-ink-500);
}
:where(.dark) .drawer-state-meta { color: var(--color-ink-400); }
.drawer-state-meta .mono {
  font-family: var(--font-mono);
  color: var(--color-ink-700);
}
:where(.dark) .drawer-state-meta .mono { color: var(--color-ink-200); }

/* Print snapshot block */
.drawer-progress {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .drawer-progress { background: rgba(43,54,71,.30); border-color: var(--color-ink-700); }
.drawer-progress-state {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-900);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .03em;
}
:where(.dark) .drawer-progress-state { color: var(--color-ink-100); }
.drawer-progress-state.muted { color: var(--color-ink-500); font-weight: 500; }
.drawer-progress-state .muted-prefix {
  color: var(--color-brand-amber-600);
  font-size: 10px;
}
:where(.dark) .drawer-progress-state .muted-prefix { color: var(--color-brand-amber-400); }

.drawer-progress-bar {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: var(--color-ink-200);
  overflow: hidden;
}
:where(.dark) .drawer-progress-bar { background: var(--color-ink-700); }
.drawer-progress-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-bamboo-400) 0%, var(--color-bamboo-500) 100%);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.drawer-progress-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 220% 100%;
  animation: progressShimmer 1.8s linear infinite;
}
.drawer-progress-meta {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 11.5px;
  color: var(--color-ink-500);
}
:where(.dark) .drawer-progress-meta { color: var(--color-ink-400); }
.drawer-progress-pct {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bamboo-600);
  font-variant-numeric: tabular-nums;
}
:where(.dark) .drawer-progress-pct { color: var(--color-bamboo-400); }
.drawer-progress-layer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-ink-100);
  color: var(--color-ink-600);
}
:where(.dark) .drawer-progress-layer { background: var(--color-ink-700); color: var(--color-ink-300); }
.drawer-progress-filename {
  flex: 1; min-width: 0;
  font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.drawer-empty-line {
  font-size: 12px;
  color: var(--color-ink-500);
  font-style: italic;
}
:where(.dark) .drawer-empty-line { color: var(--color-ink-400); }

.drawer-temp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.drawer-temp-cell {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .drawer-temp-cell { background: rgba(43,54,71,.30); border-color: var(--color-ink-700); }
.drawer-temp-cell .mdi { font-size: 24px; line-height: 1; flex-shrink: 0; }
.drawer-temp-cell[data-tone="amber"] .mdi { color: var(--color-brand-amber-500); }
.drawer-temp-cell[data-tone="rose"]  .mdi { color: var(--color-brand-rose-400); }
.drawer-temp-cell-info { display: flex; flex-direction: column; min-width: 0; }
.drawer-temp-cell-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-500);
}
:where(.dark) .drawer-temp-cell-label { color: var(--color-ink-400); }
.drawer-temp-cell-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink-900);
  margin-top: 2px;
}
:where(.dark) .drawer-temp-cell-value { color: var(--color-ink-100); }
.drawer-temp-cell-target {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-500);
  font-weight: 500;
  margin-left: 6px;
}
:where(.dark) .drawer-temp-cell-target { color: var(--color-ink-400); }

/* Identity grid (dl) */
.drawer-data-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 6px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .drawer-data-grid { background: rgba(43,54,71,.30); border-color: var(--color-ink-700); }
.drawer-data-grid dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--color-ink-500);
  font-weight: 700;
  align-self: center;
}
:where(.dark) .drawer-data-grid dt { color: var(--color-ink-400); }
.drawer-data-grid dd {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  color: var(--color-ink-900);
  min-width: 0;
  font-size: 12px;
}
:where(.dark) .drawer-data-grid dd { color: var(--color-ink-100); }
.drawer-data-grid dd .drawer-field-val {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.drawer-data-grid dd .vpg-cert-copy-btn {
  width: 22px; height: 22px;
  flex-shrink: 0;
}
.drawer-data-grid dd .vpg-cert-copy-btn .mdi { font-size: 12px; }

/* Observer block */
.drawer-observer-state {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  font-size: 12px;
}
:where(.dark) .drawer-observer-state { background: rgba(43,54,71,.30); border-color: var(--color-ink-700); }
.drawer-observer-state.is-ok  { background: rgba(0,168,59,.06);  border-color: rgba(0,168,59,.24); }
.drawer-observer-state.is-bad { background: rgba(226,69,80,.06); border-color: rgba(226,69,80,.28); }
.drawer-observer-line {
  display: flex; align-items: center; gap: 8px;
}
.drawer-observer-state.is-ok  .drawer-observer-line .mdi { color: var(--color-bamboo-500); }
.drawer-observer-state.is-bad .drawer-observer-line .mdi { color: var(--color-brand-rose-500); }
.drawer-observer-line .mdi { font-size: 18px; }
.drawer-observer-headline {
  font-weight: 700;
  color: var(--color-ink-900);
}
:where(.dark) .drawer-observer-headline { color: var(--color-ink-100); }

.drawer-observer-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 4px 12px;
}
.drawer-observer-grid > span:nth-child(odd) {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-500);
  font-weight: 700;
}
:where(.dark) .drawer-observer-grid > span:nth-child(odd) { color: var(--color-ink-400); }
.drawer-observer-grid .mono {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-ink-700);
}
:where(.dark) .drawer-observer-grid .mono { color: var(--color-ink-200); }
.drawer-observer-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--color-white);
  color: var(--color-ink-700);
  border: 1px solid var(--color-ink-100);
  word-break: break-word;
}
:where(.dark) .drawer-observer-detail {
  background: var(--color-ink-900);
  color: var(--color-ink-200);
  border-color: var(--color-ink-700);
}

.drawer-error-line {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(226,69,80,.06);
  border: 1px solid rgba(226,69,80,.25);
  color: var(--color-brand-rose-600);
  font-size: 12px;
  font-family: var(--font-mono);
  word-break: break-word;
}
:where(.dark) .drawer-error-line { color: var(--color-brand-rose-400); }
.drawer-error-line .mdi { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* Raw JSON */
.drawer-raw {
  border-radius: 10px;
  background: var(--color-ink-900);
  color: var(--color-ink-100);
  overflow: hidden;
}
.drawer-raw summary {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  color: var(--color-ink-300);
  list-style: none;
}
.drawer-raw summary::-webkit-details-marker { display: none; }
.drawer-raw summary::before {
  content: "›";
  font-size: 14px;
  transition: transform .15s;
}
.drawer-raw[open] summary::before { transform: rotate(90deg); }
.drawer-raw pre {
  padding: 0 12px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-ink-200);
  max-height: 300px;
  overflow: auto;
  margin: 0;
}

@media (max-width: 600px) {
  .drawer { max-width: 100%; }
  .drawer-temp-grid { grid-template-columns: 1fr; }
}


/* ============================================================== */
/*   Printer row v3 — recognizable thumb, halo, ext badge          */
/* ============================================================== */

/* Thumb wrap with state-tinted halo + presence dot overlay */
.printer-row-thumb-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-white);
  border: 1px solid var(--color-ink-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: border-color .15s, box-shadow .25s;
}
:where(.dark) .printer-row-thumb-wrap {
  background: var(--color-ink-900);
  border-color: var(--color-ink-700);
}

/* state-tinted glow visible behind the thumb */
.printer-row-thumb-wrap[data-state="printing"] {
  border-color: rgba(54,144,212,.30);
  box-shadow: 0 0 0 4px rgba(54,144,212,.07), 0 4px 16px rgba(54,144,212,.18);
}
.printer-row-thumb-wrap[data-state="online"] {
  border-color: rgba(0,168,59,.25);
  box-shadow: 0 0 0 4px rgba(0,168,59,.06), 0 2px 10px rgba(0,168,59,.14);
}
.printer-row-thumb-wrap[data-state="stale"] {
  border-color: rgba(229,148,26,.30);
  box-shadow: 0 0 0 4px rgba(229,148,26,.06);
}
.printer-row-thumb-wrap[data-state="offline"],
.printer-row-thumb-wrap[data-state="attention"] {
  border-color: rgba(226,69,80,.30);
  box-shadow: 0 0 0 4px rgba(226,69,80,.06);
}

/* override old .printer-row-thumb sizing — now fills the wrap */
.printer-row .printer-row-thumb-wrap > .printer-row-thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  padding: 5px;
  border-radius: 12px;
}

/* presence dot top-right of thumb (replaces in-title live-dot) */
.printer-row-thumb-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: 2px solid var(--color-white);
  z-index: 2;
}
:where(.dark) .printer-row-thumb-dot { border-color: var(--color-ink-800); }
.printer-row-thumb-dot.live-dot-bamboo { background: var(--color-bamboo-500); }
.printer-row-thumb-dot.live-dot-sky    { background: var(--color-brand-sky-500); animation: liveDotPulse 1.6s ease-in-out infinite; }
.printer-row-thumb-dot.live-dot-amber  { background: var(--color-brand-amber-500); }
.printer-row-thumb-dot.live-dot-rose   { background: var(--color-brand-rose-500); }
.printer-row-thumb-dot.live-dot-ink    { background: var(--color-ink-400); }

/* hover: slight lift on the thumb wrap to reinforce clickability */
.printer-row:hover .printer-row-thumb-wrap[data-state="printing"] {
  box-shadow: 0 0 0 5px rgba(54,144,212,.10), 0 6px 18px rgba(54,144,212,.22);
}

/* Title size bump and clean up — alias is now bigger */
.printer-row-title .alias { font-size: 15px; }

/* File extension pill next to filename */
.progress-fileext {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 0 5px;
  height: 14px;
  border-radius: 4px;
  background: var(--color-ink-100);
  color: var(--color-ink-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: .02em;
  vertical-align: middle;
  flex-shrink: 0;
}
:where(.dark) .progress-fileext {
  background: var(--color-ink-700);
  color: var(--color-ink-200);
}

/* Temperature target ghost */
.temp-target {
  margin-left: 3px;
  font-size: 10px;
  color: var(--color-ink-400);
  font-weight: 500;
}
:where(.dark) .temp-target { color: var(--color-ink-500); }
.temp-cell.is-faint .temp-target { opacity: .55; }

/* Slightly fatter progress bar for printing rows */
.printer-progress.is-active .progress-bar { height: 7px; }
.printer-progress.is-active .progress-pct { font-size: 13px; }

/* Update the v2 grid template to fit the bigger thumb (was 44px) */
@supports (grid-template-columns: subgrid) {
  .printer-list {
    grid-template-columns:
      56px               /* thumb wrap */
      minmax(180px, 1.4fr)
      28px
      auto
      minmax(220px, 1.6fr)
      minmax(140px, 200px)
      52px;
  }
}


/* ============================================================== */
/*   Printer row v4 — iOS-style 3-line grid (final concept α)      */
/* ============================================================== */

/* Override v1/v2/v3: row is now a 2-col × 3-row grid with named areas.
   Thumb spans all rows. Right side has header / activity / footer. */
.printer-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumb header"
    "thumb activity"
    "thumb footer";
  align-items: stretch;
  gap: 4px 14px;
  padding: 12px 16px 12px 18px;
}

.printer-row > .printer-row-thumb-wrap {
  grid-area: thumb;
  align-self: center;
}

/* ===== Header (alias + chips + status icon + time) ===== */
.printer-row-header {
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.printer-row-header > .alias {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
:where(.dark) .printer-row-header > .alias { color: var(--color-ink-100); }

.printer-row-header > .printer-row-chip {
  height: 22px;
  padding: 0 8px;
  font-size: 10px;
  flex-shrink: 0;
}

.printer-row-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.printer-row-header-right > .printer-row-status-icon {
  width: 24px; height: 24px;
}
.printer-row-header-right > .printer-row-status-icon .mdi {
  font-size: 20px;
}
.printer-row-header-right > .printer-row-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-ink-500);
  white-space: nowrap;
}
:where(.dark) .printer-row-header-right > .printer-row-time { color: var(--color-ink-400); }
.printer-row-header-right > .printer-row-time.is-fresh { color: var(--color-bamboo-600); }
:where(.dark) .printer-row-header-right > .printer-row-time.is-fresh { color: var(--color-bamboo-400); }

/* ===== Activity row (state-adaptive) ===== */
.printer-row-activity {
  grid-area: activity;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Progress block */
.activity-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 240px;
  min-width: 200px;
}
.activity-progress > .progress-bar {
  flex: 1 1 auto;
  min-width: 80px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  overflow: hidden;
  position: relative;
}
:where(.dark) .activity-progress > .progress-bar { background: var(--color-ink-700); }
.activity-progress > .progress-bar > .progress-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-bamboo-400) 0%, var(--color-bamboo-500) 100%);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.activity-progress > .progress-bar > .progress-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 220% 100%;
  animation: progressShimmer 1.8s linear infinite;
}
.activity-progress > .progress-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-bamboo-600);
}
:where(.dark) .activity-progress > .progress-pct { color: var(--color-bamboo-400); }
.activity-progress > .progress-eta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-ink-700);
  background: var(--color-ink-100);
  padding: 1px 6px;
  border-radius: 4px;
}
:where(.dark) .activity-progress > .progress-eta { color: var(--color-ink-200); background: var(--color-ink-700); }
.activity-progress > .progress-layer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-ink-500);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--color-ink-200);
}
:where(.dark) .activity-progress > .progress-layer { color: var(--color-ink-400); border-color: var(--color-ink-700); }

/* Activity state pill (idle/stale/offline) */
.activity-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-700);
  flex-shrink: 0;
}
:where(.dark) .activity-state { color: var(--color-ink-200); }
.activity-state .mdi { font-size: 14px; line-height: 1; }
.activity-state.is-stale { color: var(--color-brand-amber-600); }
:where(.dark) .activity-state.is-stale { color: var(--color-brand-amber-400); }
.activity-state.is-warn { color: var(--color-brand-amber-600); }
:where(.dark) .activity-state.is-warn { color: var(--color-brand-amber-400); }
.activity-state.is-bad  { color: var(--color-brand-rose-600); }
:where(.dark) .activity-state.is-bad  { color: var(--color-brand-rose-400); }
.activity-state .mdi { color: currentColor; }

.activity-detail {
  font-size: 12px;
  color: var(--color-ink-600);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .activity-detail { color: var(--color-ink-300); }
.activity-detail .activity-detail-emph {
  color: var(--color-ink-900);
  font-weight: 600;
  font-family: var(--font-mono);
}
:where(.dark) .activity-detail .activity-detail-emph { color: var(--color-ink-100); }
.activity-detail.is-bad { color: var(--color-brand-rose-600); }
:where(.dark) .activity-detail.is-bad { color: var(--color-brand-rose-400); }

.activity-filename {
  font-size: 12px;
  color: var(--color-ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
  max-width: 320px;
}
:where(.dark) .activity-filename { color: var(--color-ink-300); }

/* Temps inside activity row — push to right */
.printer-row-activity > .printer-temps {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ===== Footer (ip · serial · observer) ===== */
.printer-row-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  color: var(--color-ink-500);
  min-width: 0;
}
:where(.dark) .printer-row-footer { color: var(--color-ink-400); }
.printer-row-footer .footer-mono {
  color: var(--color-ink-700);
  white-space: nowrap;
}
:where(.dark) .printer-row-footer .footer-mono { color: var(--color-ink-200); }
.printer-row-footer .footer-serial {
  color: var(--color-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
:where(.dark) .printer-row-footer .footer-serial { color: var(--color-ink-400); }
.printer-row-footer .footer-sep { color: var(--color-ink-300); }
:where(.dark) .printer-row-footer .footer-sep { color: var(--color-ink-600); }
.printer-row-footer .footer-spacer { flex: 1; }
.printer-row-footer .printer-observer {
  font-family: var(--font-sans);
  font-size: 10.5px;
  flex-shrink: 0;
  max-width: 240px;
}

/* Subgrid block from earlier no longer applies (we set explicit grid-template-columns above) */
@supports (grid-template-columns: subgrid) {
  .printer-list { display: flex; flex-direction: column; gap: 8px; grid-template-columns: none; }
}

/* Mobile */
@media (max-width: 640px) {
  .printer-row {
    grid-template-columns: 48px 1fr;
    padding: 10px 12px 10px 14px;
  }
  .printer-row-thumb-wrap { width: 48px; height: 48px; }
  .printer-row-header > .alias { font-size: 14px; }
  .printer-row-activity > .printer-temps { margin-left: 0; }
}


/* ============================================================== */
/*   Printer row v5 — printing rows: 2-row activity + stacked temps */
/* ============================================================== */

/* When activity is in printing state, lay out as: */
/*   [block (bar+pct top, meta below) ........... ] [temps stacked] */
.printer-row-activity[data-state="printing"] {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
  row-gap: 0;
}

.activity-printing-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-progress-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.activity-progress-line > .progress-bar {
  flex: 1 1 auto;
  min-width: 80px;
  height: 8px;  /* slightly fatter on its own row */
  border-radius: 9999px;
  background: var(--color-ink-100);
  overflow: hidden;
  position: relative;
}
:where(.dark) .activity-progress-line > .progress-bar { background: var(--color-ink-700); }
.activity-progress-line > .progress-bar > .progress-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-bamboo-400) 0%, var(--color-bamboo-500) 100%);
  transition: width .35s cubic-bezier(.2,.7,.2,1);
}
.activity-progress-line > .progress-bar > .progress-fill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
  background-size: 220% 100%;
  animation: progressShimmer 1.8s linear infinite;
}
.activity-progress-line > .progress-pct {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-bamboo-600);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}
:where(.dark) .activity-progress-line > .progress-pct { color: var(--color-bamboo-400); }

.activity-meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--color-ink-500);
  min-width: 0;
}
:where(.dark) .activity-meta-line { color: var(--color-ink-400); }
.activity-meta-line > .progress-eta {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--color-ink-700);
  background: var(--color-ink-100);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
:where(.dark) .activity-meta-line > .progress-eta { color: var(--color-ink-200); background: var(--color-ink-700); }
.activity-meta-line > .progress-layer {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--color-ink-500);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--color-ink-200);
  flex-shrink: 0;
}
:where(.dark) .activity-meta-line > .progress-layer { color: var(--color-ink-400); border-color: var(--color-ink-700); }
.activity-meta-line > .activity-filename {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink-600);
}
:where(.dark) .activity-meta-line > .activity-filename { color: var(--color-ink-300); }
.activity-meta-sep { color: var(--color-ink-300); }
:where(.dark) .activity-meta-sep { color: var(--color-ink-600); }

/* Temps stacked vertically — for printing rows on the right */
.printer-temps-stacked {
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 4px !important;
  margin-left: 0 !important;
  flex-shrink: 0;
}
.printer-temps-stacked .temp-cell { font-size: 12px; white-space: nowrap; }

/* Mobile: collapse temps to a single row below if too narrow */
@media (max-width: 720px) {
  .printer-row-activity[data-state="printing"] {
    flex-wrap: wrap;
  }
  .printer-temps-stacked {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100%;
    margin-left: 0 !important;
  }
}

/* footer inline temp pills (replaces stacked-right temps) */
.printer-row-footer .footer-temp {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--color-ink-600);
  white-space: nowrap;
}
:where(.dark) .printer-row-footer .footer-temp { color: var(--color-ink-300); }
.printer-row-footer .footer-temp .mdi {
  font-size: 13px;
  line-height: 1;
}
.printer-row-footer .footer-temp:nth-of-type(1) .mdi { color: var(--color-brand-amber-500); }
.printer-row-footer .footer-temp:nth-of-type(2) .mdi { color: var(--color-brand-rose-400); }


/* ============================================================== */
/*   Header temps — top-right, colored, glowing when hot            */
/* ============================================================== */

.header-temps {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 4px;
}

.header-temp-cell {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  height: 22px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.header-temp-cell .mdi {
  font-size: 14px;
  line-height: 1;
}

/* Nozzle — amber */
.header-temp-cell.temp-nozzle { color: var(--color-brand-amber-600); }
:where(.dark) .header-temp-cell.temp-nozzle { color: var(--color-brand-amber-400); }
.header-temp-cell.temp-nozzle .mdi { color: var(--color-brand-amber-500); }
.header-temp-cell.temp-nozzle.is-hot {
  background: rgba(229,148,26,.10);
  border-color: rgba(229,148,26,.35);
  animation: tempGlowAmber 2.2s ease-in-out infinite;
}

/* Bed — rose */
.header-temp-cell.temp-bed { color: var(--color-brand-rose-500); }
:where(.dark) .header-temp-cell.temp-bed { color: var(--color-brand-rose-400); }
.header-temp-cell.temp-bed .mdi { color: var(--color-brand-rose-400); }
.header-temp-cell.temp-bed.is-hot {
  background: rgba(226,69,80,.08);
  border-color: rgba(226,69,80,.30);
  animation: tempGlowRose 2.6s ease-in-out infinite;
}

/* Cold variant — muted */
.header-temp-cell.is-cold {
  color: var(--color-ink-400);
}
.header-temp-cell.is-cold .mdi {
  opacity: .5;
}

@keyframes tempGlowAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,148,26,.18); }
  50%      { box-shadow: 0 0 10px 1px rgba(229,148,26,.42); }
}
@keyframes tempGlowRose {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226,69,80,.16); }
  50%      { box-shadow: 0 0 9px 1px rgba(226,69,80,.36); }
}

/* mobile: hide temps in header to save space */
@media (max-width: 640px) {
  .header-temps { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .header-temp-cell.is-hot { animation: none !important; }
}


/* ============================================================== */
/*   Header temps v2 — naked icon, nozzle red, bed sky, glow on icon */
/* ============================================================== */

.header-temp-cell {
  /* drop the pill: no bg, no border, no padding */
  padding: 0 !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: none !important;
  font-size: 12px;
  gap: 4px;
}
.header-temp-cell .mdi {
  font-size: 17px;
  line-height: 1;
  transition: filter .25s;
}

/* nozzle — красное */
.header-temp-cell.temp-nozzle,
.header-temp-cell.temp-nozzle .mdi {
  color: var(--color-brand-rose-500);
}
:where(.dark) .header-temp-cell.temp-nozzle,
:where(.dark) .header-temp-cell.temp-nozzle .mdi {
  color: var(--color-brand-rose-400);
}

/* bed — голубенький */
.header-temp-cell.temp-bed,
.header-temp-cell.temp-bed .mdi {
  color: var(--color-brand-sky-500);
}
:where(.dark) .header-temp-cell.temp-bed,
:where(.dark) .header-temp-cell.temp-bed .mdi {
  color: var(--color-brand-sky-400);
}

/* cold variant — dim */
.header-temp-cell.is-cold,
.header-temp-cell.is-cold .mdi {
  color: var(--color-ink-400);
  opacity: .85;
}
.header-temp-cell.is-cold .mdi { opacity: .5; }

/* hot — pulsing glow on the ICON only (no pill) */
.header-temp-cell.temp-nozzle.is-hot .mdi {
  animation: iconGlowNozzle 2.2s ease-in-out infinite;
}
.header-temp-cell.temp-bed.is-hot .mdi {
  animation: iconGlowBed 2.6s ease-in-out infinite;
}
@keyframes iconGlowNozzle {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(226,69,80,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(226,69,80,.65)); }
}
@keyframes iconGlowBed {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(54,144,212,0)); }
  50%      { filter: drop-shadow(0 0 5px rgba(54,144,212,.55)); }
}

@media (prefers-reduced-motion: reduce) {
  .header-temp-cell .mdi { animation: none !important; }
}

/* Premium operator additions */
.printer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.printer-search {
  flex: 1 1 320px;
  min-width: 240px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--color-ink-100);
  border-radius: 999px;
  background: var(--color-ink-50);
  color: var(--color-ink-500);
}
:where(.dark) .printer-search {
  border-color: var(--color-ink-700);
  background: color-mix(in oklab, var(--color-ink-900) 60%, transparent);
}
.printer-search input {
  width: 100%;
  min-width: 0;
  outline: none;
  color: var(--color-ink-900);
  font-size: 13px;
}
:where(.dark) .printer-search input { color: var(--color-ink-100); }
.printer-model-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.model-filter {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-ink-100);
  background: #fff;
  color: var(--color-ink-600);
  font-size: 12px;
  font-weight: 800;
}
:where(.dark) .model-filter {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
  color: var(--color-ink-300);
}
.model-filter.is-active {
  border-color: color-mix(in oklab, var(--color-brand-sky-500) 35%, transparent);
  background: color-mix(in oklab, var(--color-brand-sky-500) 12%, transparent);
  color: var(--color-brand-sky-600);
}
:where(.dark) .model-filter.is-active { color: var(--color-brand-sky-400); }

.attention-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.attention-stat {
  border: 1px solid var(--color-ink-100);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(135deg, #fff, var(--color-ink-50));
}
:where(.dark) .attention-stat {
  border-color: var(--color-ink-700);
  background: linear-gradient(135deg, var(--color-ink-800), color-mix(in oklab, var(--color-ink-900) 68%, transparent));
}
.attention-stat span {
  display: block;
  color: var(--color-ink-500);
  font: 700 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.attention-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 26px;
  line-height: 1;
}
.attention-stat[data-tone="bamboo"] strong { color: var(--color-bamboo-600); }
.attention-stat[data-tone="sky"] strong { color: var(--color-brand-sky-600); }
.attention-stat[data-tone="amber"] strong { color: var(--color-brand-amber-600); }
.attention-stat[data-tone="rose"] strong { color: var(--color-brand-rose-600); }
:where(.dark) .attention-stat[data-tone="bamboo"] strong { color: var(--color-bamboo-400); }
:where(.dark) .attention-stat[data-tone="sky"] strong { color: var(--color-brand-sky-400); }
:where(.dark) .attention-stat[data-tone="amber"] strong { color: var(--color-brand-amber-400); }
:where(.dark) .attention-stat[data-tone="rose"] strong { color: var(--color-brand-rose-400); }
.attention-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
}
@media (max-width: 980px) { .attention-layout { grid-template-columns: 1fr; } }
.attention-card {
  border: 1px solid var(--color-ink-100);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
:where(.dark) .attention-card {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
}
.attention-card > header {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-bottom: 1px solid var(--color-ink-100);
  font-size: 13px;
  font-weight: 900;
}
:where(.dark) .attention-card > header { border-color: var(--color-ink-700); }
.attention-list, .event-timeline { padding: 10px; display: grid; gap: 8px; }
.attention-item {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--color-ink-100);
  border-radius: 12px;
  background: var(--color-ink-50);
  text-align: left;
}
:where(.dark) .attention-item {
  border-color: var(--color-ink-700);
  background: color-mix(in oklab, var(--color-ink-900) 42%, transparent);
}
.attention-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--color-ink-500) 10%, transparent);
}
.attention-item-copy strong, .event-row strong {
  display: block;
  color: var(--color-ink-900);
  font-size: 13px;
}
:where(.dark) .attention-item-copy strong, :where(.dark) .event-row strong { color: var(--color-ink-100); }
.attention-item-copy small, .event-row small {
  display: block;
  margin-top: 2px;
  color: var(--color-ink-500);
  font-size: 11px;
}
.attention-item[data-tone="amber"] .attention-item-icon { color: var(--color-brand-amber-600); background: rgba(229,148,26,.12); }
.attention-item[data-tone="rose"] .attention-item-icon { color: var(--color-brand-rose-600); background: rgba(226,69,80,.12); }
.attention-item[data-tone="sky"] .attention-item-icon { color: var(--color-brand-sky-600); background: rgba(55,144,212,.12); }
.attention-clean, .attention-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-ink-500);
  font-size: 12px;
}
.attention-clean i {
  display: block;
  margin-bottom: 6px;
  color: var(--color-bamboo-500);
  font-size: 28px;
}
.attention-clean strong, .attention-clean span { display: block; }
.event-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 12px;
  background: var(--color-ink-50);
}
:where(.dark) .event-row { background: color-mix(in oklab, var(--color-ink-900) 42%, transparent); }
.event-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--color-ink-400);
}
.event-row[data-tone="rose"] .event-dot { background: var(--color-brand-rose-500); }
.event-row[data-tone="amber"] .event-dot { background: var(--color-brand-amber-500); }
.event-row[data-tone="sky"] .event-dot { background: var(--color-brand-sky-500); }
.event-row[data-tone="bamboo"] .event-dot { background: var(--color-bamboo-500); }
.event-row time {
  color: var(--color-ink-400);
  font: 700 11px var(--font-mono);
}

.vpg-scenario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.vpg-scenario-step {
  min-height: 88px;
  border: 1px solid var(--color-ink-100);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  position: relative;
}
:where(.dark) .vpg-scenario-step {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
}
.vpg-scenario-icon {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  background: color-mix(in oklab, var(--color-ink-500) 10%, transparent);
  color: var(--color-ink-500);
}
.vpg-scenario-step strong { display: block; font-size: 13px; }
.vpg-scenario-step small { display: block; margin-top: 3px; color: var(--color-ink-500); font-size: 11px; }
.vpg-scenario-step[data-state="ok"] .vpg-scenario-icon { color: var(--color-bamboo-600); background: rgba(0,168,59,.12); }
.vpg-scenario-step[data-state="warn"] .vpg-scenario-icon { color: var(--color-brand-rose-600); background: rgba(226,69,80,.12); }
.vpg-upload-file {
  max-width: 360px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 800;
}
.vpg-upload-sub {
  margin-top: 2px;
  color: var(--color-ink-400);
  font-size: 10px;
}
.vpg-upload-list {
  display: grid;
  gap: 10px;
  padding: 12px;
}
.vpg-upload-card {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: stretch;
  padding: 10px;
  border: 1px solid var(--color-ink-100);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
:where(.dark) .vpg-upload-card {
  border-color: var(--color-ink-700);
  background: rgba(23,32,42,.24);
}
.vpg-upload-preview {
  min-height: 86px;
  border: 1px solid var(--color-ink-100);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-ink-50);
}
:where(.dark) .vpg-upload-preview {
  border-color: var(--color-ink-700);
  background: var(--color-ink-900);
}
.vpg-upload-preview-img {
  width: 100%;
  height: 100%;
  min-height: 86px;
  object-fit: cover;
}
.vpg-upload-preview-empty {
  height: 100%;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  color: var(--color-ink-400);
  text-align: center;
  font-size: 10px;
  font-family: var(--font-mono);
}
.vpg-upload-preview-empty .mdi {
  font-size: 24px;
  color: var(--color-brand-violet-400);
}
.vpg-upload-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vpg-upload-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.vpg-upload-status {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}
.vpg-upload-meta,
.vpg-upload-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.vpg-upload-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  max-width: 260px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--color-ink-50);
  color: var(--color-ink-500);
  font-size: 10.5px;
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.dark) .vpg-upload-meta span {
  background: var(--color-ink-700);
  color: var(--color-ink-300);
}
.vpg-upload-meta .mdi {
  flex-shrink: 0;
  color: var(--color-ink-400);
}
.vpg-upload-richmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vpg-upload-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 320px;
  min-height: 23px;
  padding: 0 8px;
  border: 1px solid rgba(53, 148, 219, .16);
  border-radius: 999px;
  background: rgba(53, 148, 219, .07);
  color: var(--color-ink-700);
  font-size: 10.5px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpg-upload-meta-pill b {
  color: var(--color-ink-500);
  font-weight: 800;
}
.vpg-upload-meta-pill .mdi {
  flex-shrink: 0;
  color: var(--color-brand-blue-500);
}
:where(.dark) .vpg-upload-meta-pill {
  border-color: rgba(80, 163, 217, .2);
  background: rgba(80, 163, 217, .1);
  color: var(--color-ink-200);
}
:where(.dark) .vpg-upload-meta-pill b {
  color: var(--color-ink-400);
}
.vpg-upload-meta-note {
  color: var(--color-ink-400);
  font-size: 11px;
  font-family: var(--font-mono);
}
.vpg-upload-rawmeta {
  margin-top: 2px;
  border: 1px dashed var(--color-ink-200);
  border-radius: 10px;
  background: rgba(248, 250, 252, .62);
}
:where(.dark) .vpg-upload-rawmeta {
  border-color: var(--color-ink-700);
  background: rgba(15, 23, 42, .28);
}
.vpg-upload-rawmeta summary {
  cursor: pointer;
  padding: 7px 9px;
  color: var(--color-ink-500);
  font-size: 11px;
  font-weight: 800;
}
.vpg-upload-rawmeta pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 9px;
  border-top: 1px dashed var(--color-ink-200);
  color: var(--color-ink-600);
  font-size: 10px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
:where(.dark) .vpg-upload-rawmeta pre {
  border-color: var(--color-ink-700);
  color: var(--color-ink-300);
}
.vpg-upload-actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.vpg-upload-action {
  height: 34px;
  min-width: 92px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--color-ink-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-ink-700);
  background: #fff;
  font-size: 11px;
  font-weight: 800;
  transition: background-color .15s, border-color .15s, color .15s;
}
.vpg-upload-action:hover {
  background: var(--color-ink-50);
}
.vpg-upload-action.is-danger {
  border-color: rgba(226,69,80,.28);
  color: var(--color-brand-rose-600);
  background: rgba(226,69,80,.06);
}
.vpg-upload-action.is-danger:hover {
  background: rgba(226,69,80,.12);
}
.vpg-upload-action.is-disabled {
  opacity: .48;
  pointer-events: none;
}
:where(.dark) .vpg-upload-action {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
  color: var(--color-ink-200);
}
:where(.dark) .vpg-upload-action:hover {
  background: var(--color-ink-700);
}
.vpg-upload-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--color-ink-400);
  font-size: 12px;
}
@media (max-width: 760px) {
  .vpg-upload-card {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .vpg-upload-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
  .vpg-upload-preview,
  .vpg-upload-preview-img,
  .vpg-upload-preview-empty {
    min-height: 74px;
  }
}

.settings-shell {
  overflow: hidden;
  border: 1px solid var(--color-ink-100);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
:where(.dark) .settings-shell {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
}
.settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  border-bottom: 1px solid var(--color-ink-100);
  background: linear-gradient(135deg, rgba(55,144,212,.10), rgba(0,168,59,.08));
}
:where(.dark) .settings-hero { border-color: var(--color-ink-700); }
.settings-hero h2 { font-size: 22px; font-weight: 900; letter-spacing: 0; }
.settings-hero p { max-width: 720px; margin-top: 6px; color: var(--color-ink-500); font-size: 13px; }
.settings-hero > i { font-size: 46px; color: var(--color-brand-sky-500); }
.settings-kicker {
  color: var(--color-brand-sky-600);
  font: 800 11px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  padding: 16px;
}
.settings-control-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid var(--color-ink-100);
}
:where(.dark) .settings-control-panel { border-color: var(--color-ink-700); }
@media (max-width: 720px) {
  .settings-control-panel { align-items: stretch; flex-direction: column; }
}
.settings-control-title {
  font-size: 14px;
  font-weight: 900;
  color: var(--color-ink-900);
}
:where(.dark) .settings-control-title { color: var(--color-ink-100); }
.settings-control-sub {
  margin-top: 3px;
  color: var(--color-ink-500);
  font-size: 12px;
}
.settings-control-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-control-actions-wide {
  flex: 1 1 420px;
  justify-content: flex-end;
}
.settings-input {
  height: 38px;
  min-width: min(100%, 260px);
  flex: 1 1 260px;
  padding: 0 13px;
  border: 1px solid var(--color-ink-100);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink-800);
  font-size: 12px;
  font-weight: 800;
  outline: none;
}
.settings-input:focus {
  border-color: var(--color-brand-sky-400);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-brand-sky-500) 16%, transparent);
}
:where(.dark) .settings-input {
  border-color: var(--color-ink-700);
  background: var(--color-ink-900);
  color: var(--color-ink-100);
}
.settings-action-btn {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid color-mix(in oklab, var(--color-bamboo-500) 35%, transparent);
  border-radius: 999px;
  background: var(--color-bamboo-500);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.settings-action-btn.secondary {
  border-color: var(--color-ink-100);
  background: var(--color-ink-50);
  color: var(--color-ink-700);
}
:where(.dark) .settings-action-btn.secondary {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
  color: var(--color-ink-100);
}
.settings-action-btn:disabled,
.settings-input:disabled {
  opacity: .62;
  cursor: wait;
}
.settings-toggle {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  border: 1px solid var(--color-ink-100);
  border-radius: 999px;
  background: var(--color-ink-50);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
:where(.dark) .settings-toggle {
  border-color: var(--color-ink-700);
  background: color-mix(in oklab, var(--color-ink-900) 54%, transparent);
}
.settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.settings-toggle span {
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-ink-200);
  position: relative;
  transition: background-color .16s;
}
:where(.dark) .settings-toggle span { background: var(--color-ink-700); }
.settings-toggle span::after {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .22);
  transition: transform .16s;
}
.settings-toggle input:checked + span { background: var(--color-bamboo-500); }
.settings-toggle input:checked + span::after { transform: translateX(14px); }
.settings-select {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-ink-100);
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink-700);
  font-size: 12px;
  font-weight: 900;
  outline: none;
}
:where(.dark) .settings-select {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
  color: var(--color-ink-100);
}
.settings-kv {
  border: 1px solid var(--color-ink-100);
  border-radius: 14px;
  padding: 12px;
  background: var(--color-ink-50);
}
:where(.dark) .settings-kv {
  border-color: var(--color-ink-700);
  background: color-mix(in oklab, var(--color-ink-900) 48%, transparent);
}
.settings-kv span {
  display: block;
  color: var(--color-ink-500);
  font: 800 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.settings-kv strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
  font: 800 13px var(--font-mono);
}


/* ============================================================== */
/*   Segmented-control top nav (replaces nav-pill row on desktop)  */
/* ============================================================== */

.seg-nav {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  height: 42px;
}
:where(.dark) .seg-nav { background: rgba(43,54,71,.5); }

/* Sliding white indicator behind the active tab */
.seg-nav-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 9999px;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(15,23,42,.10), 0 0 0 1px rgba(15,23,42,.04);
  transition: transform .28s cubic-bezier(.22,1,.36,1), width .28s cubic-bezier(.22,1,.36,1);
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
:where(.dark) .seg-nav-indicator {
  background: var(--color-ink-100);
  box-shadow: 0 1px 2px rgba(0,0,0,.40);
}

.seg-nav-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--color-ink-500);
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s;
  border: 0;
  background: transparent;
}
:where(.dark) .seg-nav-tab { color: var(--color-ink-300); }
.seg-nav-tab:hover { color: var(--color-ink-900); }
:where(.dark) .seg-nav-tab:hover { color: var(--color-ink-100); }
.seg-nav-tab.is-active { color: var(--color-ink-900); }
:where(.dark) .seg-nav-tab.is-active { color: var(--color-ink-900); }
.seg-nav-tab .mdi { font-size: 15px; line-height: 1; }
.seg-nav-tab:focus-visible {
  outline: 2px solid var(--color-brand-sky-500);
  outline-offset: 2px;
}

/* Tab badge — small chip after the label */
.seg-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: var(--color-brand-amber-500);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  margin-left: 2px;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--color-ink-100);
  transition: background-color .15s, box-shadow .15s;
}
:where(.dark) .seg-nav-badge {
  box-shadow: 0 0 0 2px rgba(43,54,71,.8);
}
/* When tab is active (white pill behind), give the badge a different ring color */
.seg-nav-tab.is-active .seg-nav-badge {
  box-shadow: 0 0 0 2px var(--color-white);
}
:where(.dark) .seg-nav-tab.is-active .seg-nav-badge {
  box-shadow: 0 0 0 2px var(--color-ink-100);
}

@media (max-width: 760px) {
  .seg-nav { display: none !important; }
}


/* ============================================================== */
/*   Seg-nav badge v2 — circular, neutral ink (no amber)           */
/* ============================================================== */

.seg-nav-badge {
  /* perfect circle, fixed size — no ovals */
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  font-size: 10.5px !important;
  /* neutral dark in light, light in dark */
  background: var(--color-ink-900);
  color: var(--color-white);
  /* removing the white ring around badge — cleaner */
  box-shadow: none !important;
}
:where(.dark) .seg-nav-badge {
  background: var(--color-ink-100);
  color: var(--color-ink-900);
}
/* On active tab (white pill bg in light / light pill in dark) keep contrast */
.seg-nav-tab.is-active .seg-nav-badge {
  background: var(--color-ink-900);
  color: var(--color-white);
}
:where(.dark) .seg-nav-tab.is-active .seg-nav-badge {
  background: var(--color-ink-900);
  color: var(--color-ink-100);
}


/* ============================================================== */
/*   Candidate / printer filter pills v2 — neutral + tone dot      */
/* ============================================================== */

.cand-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 28px;
  padding: 0 9px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  border: 1px solid transparent;
  color: var(--color-ink-700);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
:where(.dark) .cand-filter { background: rgba(43,54,71,.5); color: var(--color-ink-200); }
.cand-filter:hover {
  background: var(--color-ink-200);
  color: var(--color-ink-900);
}
:where(.dark) .cand-filter:hover {
  background: rgba(43,54,71,.85);
  color: var(--color-ink-100);
}
.cand-filter:focus-visible {
  outline: 2px solid var(--color-brand-sky-500);
  outline-offset: 2px;
}

/* Tone dot before the label */
.cand-filter::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: var(--color-ink-400);
  flex-shrink: 0;
}
.cand-filter.tone-bamboo::before { background: var(--color-bamboo-500); }
.cand-filter.tone-amber::before  { background: var(--color-brand-amber-500); }
.cand-filter.tone-rose::before   { background: var(--color-brand-rose-500); }
.cand-filter.tone-sky::before    { background: var(--color-brand-sky-500); }
.cand-filter.tone-violet::before { background: var(--color-brand-violet-500); }
.cand-filter.tone-ink::before    { background: var(--color-ink-400); }

/* Count number (uses existing .tnum class) */
.cand-filter .tnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink-500);
}
:where(.dark) .cand-filter .tnum { color: var(--color-ink-400); }
.cand-filter-label:empty { display: none; }
.cand-filter-label {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state — dark filled */
.cand-filter.is-active {
  background: var(--color-ink-900);
  color: var(--color-white);
  border-color: var(--color-ink-900);
}
:where(.dark) .cand-filter.is-active {
  background: var(--color-ink-100);
  color: var(--color-ink-900);
  border-color: var(--color-ink-100);
}
.cand-filter.is-active .tnum { color: rgba(255,255,255,.65); }
:where(.dark) .cand-filter.is-active .tnum { color: rgba(23,32,42,.55); }
/* keep tone dot visible on dark active bg */
.cand-filter.is-active::before {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.20);
}
:where(.dark) .cand-filter.is-active::before {
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.20);
}


/* ============================================================== */
/*   Discovery setup card (CIDR + access code)                     */
/* ============================================================== */

.discovery-setup {
  display: grid;
  grid-template-columns: minmax(200px, auto) 1px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(54,144,212,.04) 0%, var(--color-ink-50) 100%);
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .discovery-setup {
  background: linear-gradient(135deg, rgba(54,144,212,.08) 0%, rgba(43,54,71,.40) 100%);
  border-color: var(--color-ink-700);
}

.discovery-setup-cidr,
.discovery-setup-access {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.discovery-setup-divider {
  width: 1px;
  align-self: stretch;
  background: linear-gradient(180deg, transparent 0%, var(--color-ink-200) 30%, var(--color-ink-200) 70%, transparent 100%);
}
:where(.dark) .discovery-setup-divider {
  background: linear-gradient(180deg, transparent 0%, var(--color-ink-700) 30%, var(--color-ink-700) 70%, transparent 100%);
}

.discovery-setup-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--color-ink-500);
}
:where(.dark) .discovery-setup-label { color: var(--color-ink-400); }
.discovery-setup-label .mdi {
  font-size: 14px;
  line-height: 1;
  color: var(--color-brand-sky-500);
}
.discovery-setup-cidr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.discovery-setup-access-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .discovery-setup {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 12px 14px;
  }
  .discovery-setup-divider { display: none; }
}


/* ============================================================== */
/*   Discovery setup v2 — single horizontal row                    */
/* ============================================================== */

.discovery-setup {
  display: flex !important;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px !important;
  flex-wrap: wrap;
  grid-template-columns: none !important;
  border-color: rgba(55,144,212,.20);
  background: linear-gradient(135deg, rgba(55,144,212,.08), rgba(255,255,255,.86));
}
:where(.dark) .discovery-setup {
  border-color: rgba(101,169,223,.20);
  background: linear-gradient(135deg, rgba(55,144,212,.10), rgba(23,32,42,.62));
}

.discovery-network-row {
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.discovery-setup-cidr,
.discovery-setup-access {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.discovery-setup-cidr { flex-shrink: 0; }
.discovery-setup-access {
  width: auto;
  flex: 1 1 280px;
  justify-content: flex-start;
}

.discovery-setup-icon {
  font-size: 16px;
  line-height: 1;
  color: var(--color-brand-sky-500);
  flex-shrink: 0;
}

.discovery-setup-mini {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-ink-500);
}
:where(.dark) .discovery-setup-mini { color: var(--color-ink-400); }

.discovery-setup-divider {
  width: 1px !important;
  height: 28px !important;
  align-self: center !important;
  background: linear-gradient(180deg, transparent 0%, var(--color-ink-200) 30%, var(--color-ink-200) 70%, transparent 100%);
}
:where(.dark) .discovery-setup-divider {
  background: linear-gradient(180deg, transparent 0%, var(--color-ink-700) 30%, var(--color-ink-700) 70%, transparent 100%);
}

.discovery-setup-cidr-chips {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.scan-cidr-chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  max-width: 220px;
  padding: 0 9px;
  border-radius: 9999px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-message {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-ink-100);
  background: rgba(255,255,255,.72);
  color: var(--color-ink-600);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.result-message:empty {
  display: none;
}

:where(.dark) .result-message {
  border-color: var(--color-ink-700);
  background: rgba(23,32,42,.42);
  color: var(--color-ink-300);
}

.result-message.is-info {
  border-color: rgba(55,144,212,.24);
  background: rgba(55,144,212,.08);
  color: var(--color-brand-sky-600);
}
:where(.dark) .result-message.is-info { color: var(--color-brand-sky-400); }

.result-message.is-success {
  border-color: rgba(0,168,59,.24);
  background: rgba(0,168,59,.08);
  color: var(--color-bamboo-600);
}
:where(.dark) .result-message.is-success { color: var(--color-bamboo-400); }

.result-message.is-warn {
  border-color: rgba(229,148,26,.28);
  background: rgba(229,148,26,.10);
  color: var(--color-brand-amber-600);
}
:where(.dark) .result-message.is-warn { color: var(--color-brand-amber-400); }

.result-message.is-error {
  border-color: rgba(226,69,80,.28);
  background: rgba(226,69,80,.10);
  color: var(--color-brand-rose-600);
}
:where(.dark) .result-message.is-error { color: var(--color-brand-rose-400); }

.access-code-group {
  width: min(100%, 380px);
  min-width: 250px;
  height: 38px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

.access-code-group:focus-within {
  border-color: rgba(226,69,80,.58);
  box-shadow: 0 0 0 3px rgba(226,69,80,.16);
}

:where(.dark) .access-code-group {
  border-color: var(--color-ink-700);
  background: rgba(23,32,42,.60);
}

.access-code-apply {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 14px;
  border-left: 1px solid rgba(226,69,80,.20);
  color: var(--color-brand-rose-600);
  background: rgba(226,69,80,.08);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}

:where(.dark) .access-code-apply {
  color: var(--color-brand-rose-400);
  border-left-color: rgba(240,118,130,.22);
}

.access-code-apply:hover {
  background: var(--color-brand-rose-500);
  color: #fff;
}

#btnProbe {
  border-color: rgba(226,69,80,.24) !important;
  background: rgba(226,69,80,.08) !important;
  color: var(--color-brand-rose-600) !important;
}
:where(.dark) #btnProbe {
  color: var(--color-brand-rose-400) !important;
}
#btnProbe:hover {
  background: var(--color-brand-rose-500) !important;
  color: #fff !important;
}

@media (max-width: 880px) {
  .discovery-setup { gap: 10px; }
  .discovery-setup-divider { display: none; }
  .discovery-setup-access { flex: 1 1 220px; }
  .discovery-network-row {
    align-items: stretch;
  }
  .scan-cidr-chip {
    max-width: min(150px, 34vw);
  }
  .access-code-group {
    width: 100%;
    min-width: 0;
  }
}


/* ============================================================== */
/*   MOBILE polish — admin as field-onboarding tool (≤ 640px)      */
/* ============================================================== */

@keyframes bottomSheetIn {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@media (max-width: 640px) {

  /* ===== Top nav: keep seg-nav, drop the legacy md:hidden mobile-nav ===== */
  .seg-nav {
    display: inline-flex !important;
    padding: 3px !important;
    gap: 1px !important;
    height: 36px !important;
    margin-left: 0 !important;
  }
  .seg-nav-tab {
    padding: 0 9px !important;
    height: 30px !important;
    gap: 5px !important;
  }
  .seg-nav-tab .mdi { font-size: 17px !important; }
  /* hide labels by default; only active shows label so user sees current tab */
  .seg-nav-tab > span:not(.seg-nav-badge) { display: none; }
  .seg-nav-tab.is-active > span:not(.seg-nav-badge) {
    display: inline;
    font-size: 12px;
  }
  .seg-nav-badge {
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
  }
  nav.md\:hidden { display: none !important; }

  /* ===== Status strip: only the essentials ===== */
  .status-strip-inner {
    padding: 8px 14px !important;
    gap: 12px !important;
  }
  /* hide DB size + last MQTT timestamp on mobile (low-value field info) */
  .status-stat[title="Розмір бази даних"],
  .status-stat[title="Останнє повідомлення MQTT"] {
    display: none !important;
  }
  /* hide keyboard-shortcut help on mobile (no keyboard) */
  #btnKbdHelp { display: none !important; }

  /* ===== Filter pills: horizontal scroll instead of wrap ===== */
  #candidatesFilters,
  #printerStatusFilters {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  #candidatesFilters > *,
  #printerStatusFilters > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  #candidatesFilters::-webkit-scrollbar,
  #printerStatusFilters::-webkit-scrollbar { display: none; }
  #candidatesFilters,
  #printerStatusFilters {
    scrollbar-width: none;  /* Firefox */
  }

  /* ===== Scanner CTA: big, finger-friendly ===== */
  #btnScan {
    height: 44px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
  }
  /* header refresh buttons */
  #btnPrintersRefresh, #btnVpgRefresh {
    height: 38px !important;
    width: 38px !important;
  }

  /* ===== Discovery setup: full-width controls when stacked ===== */
  .discovery-setup {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .discovery-setup-cidr,
  .discovery-setup-access {
    flex-wrap: wrap !important;
  }
  .access-code-group {
    height: 44px;
  }
  .access-code-group #btnProbe {
    height: 100% !important;
  }
  .access-code-input {
    height: 44px !important;
  }
  /* ===== Candidates table → card stack ===== */
  #candidatesTable { overflow-x: visible; }
  #candidatesTable thead { display: none !important; }
  #candidatesTable,
  #candidatesTable > tbody { display: block !important; }
  #candidatesTable > tbody > tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
      "ip status"
      "ident ident"
      "time action" !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--color-ink-100);
    border-radius: 12px;
    margin: 0 0 8px 0 !important;
    background: var(--color-white);
  }
  :where(.dark) #candidatesTable > tbody > tr {
    background: var(--color-ink-800);
    border-color: var(--color-ink-700);
  }
  /* preserve state-tone via left-border accent */
  #candidatesTable > tbody > tr > td:nth-child(1) {
    grid-area: ip !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    padding-left: 8px !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    line-height: 1.3 !important;
    align-self: center !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(2) {
    grid-area: status !important;
    padding: 0 !important;
    align-self: center !important;
    justify-self: end !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(3) {
    grid-area: ident !important;
    padding: 0 !important;
    white-space: normal !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(4) {
    grid-area: time !important;
    padding: 0 !important;
    align-self: center !important;
    white-space: nowrap !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(5) {
    grid-area: action !important;
    padding: 0 !important;
    text-align: right !important;
    align-self: center !important;
  }
  /* drop the parent overflow-wrapper edges since cards now own the spacing */
  .tab-pane[data-tab-pane="scanner"] .overflow-x-auto.-mx-5 {
    margin-left: 0;
    margin-right: 0;
    overflow-x: visible;
  }

  /* ===== Probe popover & detail popover → bottom sheet ===== */
  #probePopover,
  #detailPopover {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #probePopover > div,
  #detailPopover > div {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    animation: bottomSheetIn .25s cubic-bezier(.2,.7,.2,1) both;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  /* visual handle at the top */
  #probePopover > div::before,
  #detailPopover > div::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-ink-200);
    margin: 6px auto 8px;
  }

  /* ===== Printer detail drawer → bottom sheet ===== */
  .drawer-backdrop {
    justify-content: stretch !important;
    align-items: flex-end !important;
  }
  .drawer {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 88vh !important;
    border-radius: 16px 16px 0 0 !important;
    animation: bottomSheetIn .26s cubic-bezier(.2,.7,.2,1) both !important;
  }
  .drawer-header { padding: 14px 16px !important; }
  /* visual handle */
  .drawer::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-ink-200);
    margin: 6px auto 4px;
  }
  :where(.dark) .drawer::before { background: var(--color-ink-600); }

  /* ===== Tighter spacing on cards/sections ===== */
  main.max-w-\[1720px\] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 12px !important;
  }
  .scanner-hero header {
    padding: 12px 14px !important;
  }

  /* Bottom-fixed action bar approach for sticky scan button (optional, future) */
}

/* tablet (641-880): slight adaptions, keep desktop layout where possible */
@media (min-width: 641px) and (max-width: 880px) {
  #candidatesFilters,
  #printerStatusFilters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  #candidatesFilters::-webkit-scrollbar,
  #printerStatusFilters::-webkit-scrollbar { display: none; }
}


/* Mobile fix-ups (≤ 640px) */
@media (max-width: 640px) {
  /* Pure icon-only seg-nav — even active hides label so all 4 tabs fit */
  .seg-nav-tab.is-active > span:not(.seg-nav-badge) {
    display: none !important;
  }

  /* Drop the orphan section-icon in discovery-setup access on narrow viewports
     — the input's own key-icon prefix is enough */
  .discovery-setup-access > .discovery-setup-icon {
    display: none !important;
  }
  /* Same for cidr — keep CIDR label, drop the duplicate icon */
  .discovery-setup-cidr > .discovery-setup-icon {
    display: none !important;
  }

  /* Bigger candidate action buttons (apply-code circle + kebab) */
  #candidatesTable [data-open-probe-ip],
  #candidatesTable [data-manual-verify-ip],
  #candidatesTable [data-confirm-ip-change],
  #candidatesTable [data-row-menu-toggle] {
    width: 40px !important;
    height: 40px !important;
  }

  /* Scanner header: stack tighter, controls full row */
  .scanner-hero header {
    gap: 10px !important;
  }

  /* Hide the IP "ipChanged" registry hint on mobile if it overflows */
  #candidatesTable .ident-model-badge { font-size: 9px !important; }
}


/* ============================================================== */
/*   Mobile density pass — flatten nested cards, tighten spacing    */
/* ============================================================== */

@media (max-width: 640px) {
  /* ===== flatten outer page padding ===== */
  main.max-w-\[1720px\] {
    padding: 8px !important;
  }
  main > section.tab-pane,
  main > section.tab-pane.mb-10 {
    margin-bottom: 0 !important;
  }
  main {
    gap: 8px !important;
  }
  main > * + * { margin-top: 0 !important; }

  /* ===== Status strip: single row, hide overflow chips ===== */
  .status-strip-inner {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding: 7px 12px !important;
    gap: 10px !important;
  }
  .status-strip-inner::-webkit-scrollbar { display: none; }
  .status-strip-inner { scrollbar-width: none; }
  .status-stat {
    padding: 3px 8px !important;
    font-size: 11px !important;
  }
  .status-stat .text-\[15px\] { font-size: 13px !important; }

  /* ===== Scanner-hero: tighter padding, no nested card for setup ===== */
  .scanner-hero {
    border-radius: 12px !important;
  }
  .scanner-hero header {
    padding: 10px 12px !important;
  }
  .scanner-hero > div.px-5,
  .scanner-hero > div[class*='px-5'] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Discovery setup: drop the nested card style — flow flat with the parent */
  .discovery-setup {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .discovery-setup > * + *::before { display: none; }
  .discovery-network-row {
    flex: 0 0 auto;
    width: auto !important;
  }
  .discovery-setup-access {
    width: auto !important;
    flex: 1 1 0 !important;
    min-width: 0;
    padding: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  #btnScan {
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .scan-cidr-chip {
    max-width: 98px !important;
    padding: 0 7px;
    font-size: 10px;
  }
  .access-code-group {
    min-width: 0 !important;
  }
  .access-code-apply {
    padding: 0 9px;
  }
  .access-code-apply span {
    display: none;
  }

  /* ===== Candidate cards: drop inner card chrome, use dividers ===== */
  #candidatesTable > tbody > tr {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-ink-100) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    gap: 6px 10px !important;
  }
  :where(.dark) #candidatesTable > tbody > tr {
    border-bottom-color: var(--color-ink-700) !important;
  }
  #candidatesTable > tbody > tr:last-child {
    border-bottom: 0 !important;
  }
  /* IP column: pull state-tone left border in flush with card edge */
  #candidatesTable > tbody > tr > td:nth-child(1) {
    padding-left: 8px !important;
    border-left-width: 3px !important;
    font-size: 14px !important;
  }
  /* Center-collapse the 3rd row visually — show meta+actions inline-ish */
  #candidatesTable > tbody > tr {
    grid-template-areas:
      "ip status"
      "ident action"
      "ident time" !important;
    grid-template-columns: 1fr auto !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(3) {
    grid-area: ident !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(4) {
    grid-area: time !important;
    justify-self: end !important;
    align-self: end !important;
  }
  #candidatesTable > tbody > tr > td:nth-child(5) {
    grid-area: action !important;
    align-self: start !important;
  }

  /* auto-scan label compact */
  /* Filter pills row: shorter pills */
  .cand-filter {
    height: 26px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
  .cand-filter::before {
    width: 6px !important;
    height: 6px !important;
  }
  .cand-filter .tnum {
    font-size: 10px !important;
  }

  /* Remove separate space below empty/list messages */
  .printer-list-loading, .printer-list-empty {
    padding: 8px 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
}


/* Mobile: hide brand text (just logo), tighten header right-side */
@media (max-width: 640px) {
  /* Brand: logo only, no text */
  header a[href="/admin"] > span {
    display: none !important;
  }
  header a[href="/admin"] {
    gap: 0 !important;
  }
  /* Header inner: tighter gaps */
  header > div.max-w-\[1720px\] {
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  header > div > nav#topNav {
    margin-left: 0 !important;
  }
  /* Right cluster: tighter spacing + smaller icon buttons */
  header > div > div.ml-auto {
    gap: 4px !important;
  }
  header > div > div.ml-auto > button,
  header > div > div.ml-auto > form > button {
    height: 34px !important;
    width: 34px !important;
    padding: 0 !important;
  }
  /* Hide the email pill on mobile (low value, takes space) */
  header > div > div.ml-auto > span.hidden.sm\:inline-flex {
    display: none !important;
  }
}


/* ============================================================== */
/*   v6 — beef up access-code apply, restore mobile chips,         */
/*        compact cards for non-printing printers                   */
/* ============================================================== */

/* === Access code apply: solid dark filled, not pale ============ */
.access-code-group {
  height: 42px !important;
  border-width: 1.5px !important;
  background: var(--color-white) !important;
}
:where(.dark) .access-code-group { background: rgba(23,32,42,.60) !important; }

.access-code-input {
  font-size: 14px !important;
  font-family: var(--font-mono) !important;
  padding-left: 38px !important;
}
.access-code-input::placeholder {
  font-family: var(--font-sans);
  font-size: 13px;
}

.access-code-apply,
#btnProbe {
  height: 100% !important;
  padding: 0 18px !important;
  background: var(--color-ink-900) !important;
  color: var(--color-white) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  border: 0 !important;
  border-left: 1px solid var(--color-ink-900) !important;
  letter-spacing: -.01em !important;
  transition: background-color .15s !important;
}
:where(.dark) .access-code-apply,
:where(.dark) #btnProbe {
  background: var(--color-ink-100) !important;
  color: var(--color-ink-900) !important;
  border-left-color: var(--color-ink-100) !important;
}
.access-code-apply:hover,
#btnProbe:hover {
  background: var(--color-brand-rose-500) !important;
  color: #fff !important;
  border-left-color: var(--color-brand-rose-500) !important;
}
:where(.dark) .access-code-apply:hover,
:where(.dark) #btnProbe:hover {
  background: var(--color-brand-rose-500) !important;
  color: #fff !important;
  border-left-color: var(--color-brand-rose-500) !important;
}
.access-code-apply .mdi,
#btnProbe .mdi {
  font-size: 16px !important;
  margin-right: 4px;
}

/* When input has focus, the whole pill glows stronger */
.access-code-group:focus-within {
  border-color: var(--color-ink-900) !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,.10) !important;
}
:where(.dark) .access-code-group:focus-within {
  border-color: var(--color-ink-100) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
}

/* === Restore DB MB + last-msg chips on mobile (compact) ======== */
@media (max-width: 640px) {
  .status-stat[title="Розмір бази даних"],
  .status-stat[title="Останнє повідомлення MQTT"] {
    display: inline-flex !important;
  }
  .status-stat[title="Останнє повідомлення MQTT"] .mono {
    font-size: 10px !important;
  }
}

/* === Compact card grid for non-printing printers =============== */
.printer-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  padding: 4px 0;
}
@media (max-width: 640px) {
  .printer-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
}

.printer-list-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-ink-500);
  padding: 14px 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
:where(.dark) .printer-list-section-label { color: var(--color-ink-400); }
.printer-list-section-label::before,
.printer-list-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-ink-100);
}
:where(.dark) .printer-list-section-label::before,
:where(.dark) .printer-list-section-label::after {
  background: var(--color-ink-700);
}

.printer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--color-ink-100);
  border-radius: 12px;
  background: var(--color-white);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  min-width: 0;
}
:where(.dark) .printer-card {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
}
.printer-card:hover {
  border-color: var(--color-ink-200);
  box-shadow: 0 4px 10px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
}
.printer-card::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-ink-200);
}
:where(.dark) .printer-card::before { background: var(--color-ink-700); }
.printer-card[data-state="online"]::before  { background: var(--color-bamboo-500); }
.printer-card[data-state="stale"]::before   { background: var(--color-brand-amber-500); }
.printer-card[data-state="offline"]::before,
.printer-card[data-state="attention"]::before { background: var(--color-brand-rose-500); }

.printer-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.printer-card-thumb {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: contain;
  background: var(--color-ink-50);
  padding: 3px;
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .printer-card-thumb {
  background: rgba(23,32,42,.60);
  border-color: var(--color-ink-700);
}
.printer-card-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-900);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .printer-card-name { color: var(--color-ink-100); }

.printer-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.printer-card-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-ink-700);
  flex-shrink: 0;
}
.printer-card-state .mdi { font-size: 12px; }
.printer-card-state.is-online { color: var(--color-bamboo-600); }
.printer-card-state.is-stale  { color: var(--color-brand-amber-600); }
.printer-card-state.is-bad    { color: var(--color-brand-rose-600); }
.printer-card-state.is-warn   { color: var(--color-brand-amber-600); }
:where(.dark) .printer-card-state.is-online { color: var(--color-bamboo-400); }
:where(.dark) .printer-card-state.is-stale  { color: var(--color-brand-amber-400); }
:where(.dark) .printer-card-state.is-bad    { color: var(--color-brand-rose-400); }
:where(.dark) .printer-card-state.is-warn   { color: var(--color-brand-amber-400); }

.printer-card-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-ink-500);
  white-space: nowrap;
}
:where(.dark) .printer-card-time { color: var(--color-ink-400); }

.printer-card-detail {
  font-size: 11px;
  color: var(--color-ink-500);
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .printer-card-detail { color: var(--color-ink-400); }
.printer-card-detail.is-bad { color: var(--color-brand-rose-600); }
:where(.dark) .printer-card-detail.is-bad { color: var(--color-brand-rose-400); }


/* ============================================================== */
/*   Candidate cards (replaces candidates table)                   */
/* ============================================================== */

.candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.candidate-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
  border: 1px dashed var(--color-ink-200);
  border-radius: 12px;
  color: var(--color-ink-400);
}
:where(.dark) .candidate-empty { border-color: var(--color-ink-700); }

.candidate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--color-ink-100);
  border-radius: 12px;
  background: var(--color-white);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
:where(.dark) .candidate-card {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
}
.candidate-card:hover {
  border-color: var(--color-ink-200);
  box-shadow: 0 4px 12px rgba(15,23,42,.06), 0 0 0 1px rgba(15,23,42,.04);
}
:where(.dark) .candidate-card:hover {
  border-color: var(--color-ink-600);
}

/* state-toned left accent bar */
.candidate-card::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-ink-200);
}
:where(.dark) .candidate-card::before { background: var(--color-ink-700); }
.candidate-card[data-tone="bamboo"]::before { background: var(--color-bamboo-500); }
.candidate-card[data-tone="amber"]::before  { background: var(--color-brand-amber-500); }
.candidate-card[data-tone="rose"]::before   { background: var(--color-brand-rose-500); }
.candidate-card[data-tone="sky"]::before    { background: var(--color-brand-sky-500); }
.candidate-card[data-tone="violet"]::before { background: var(--color-brand-violet-500); }

/* ===== header ===== */
.candidate-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.candidate-card-ip {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.dark) .candidate-card-ip { color: var(--color-ink-100); }
/* the chip from chip() helper sits next to the IP */
.candidate-card-head > span.inline-flex {
  flex-shrink: 0;
}

/* ===== body: thumb + identity ===== */
.candidate-card-body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.candidate-card-thumb {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 8px;
  background: var(--color-ink-50);
  padding: 3px;
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .candidate-card-thumb {
  background: rgba(23,32,42,.55);
  border-color: var(--color-ink-700);
}
.candidate-card-ident {
  flex: 1;
  min-width: 0;
}
.candidate-card-ident-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.candidate-card-alias {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
:where(.dark) .candidate-card-alias { color: var(--color-ink-100); }
.candidate-card-model {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  color: var(--color-ink-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  flex-shrink: 0;
}
:where(.dark) .candidate-card-model { background: var(--color-ink-700); color: var(--color-ink-300); }
.candidate-card-serial {
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .candidate-card-serial { color: var(--color-ink-400); }
.candidate-card-ipchange {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--color-brand-violet-600);
}
:where(.dark) .candidate-card-ipchange { color: var(--color-brand-violet-400); }

/* ===== footer ===== */
.candidate-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-ink-100);
}
:where(.dark) .candidate-card-foot { border-top-color: var(--color-ink-700); }
.candidate-card-time {
  font-size: 11px;
  color: var(--color-ink-500);
  white-space: nowrap;
}
:where(.dark) .candidate-card-time { color: var(--color-ink-400); }
.candidate-card-detail-btn {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-400);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.candidate-card-detail-btn:hover {
  color: var(--color-ink-700);
  background: var(--color-ink-100);
}
:where(.dark) .candidate-card-detail-btn:hover {
  color: var(--color-ink-100);
  background: var(--color-ink-700);
}
.candidate-card-foot-spacer { flex: 1; }

/* Action buttons (apply-code / kebab) inherit existing tone classes */
.candidate-card-foot > div[data-row-menu-root],
.candidate-card-foot > button[data-open-probe-ip],
.candidate-card-foot > button[data-confirm-ip-change],
.candidate-card-foot > button[data-manual-verify-ip],
.candidate-card-foot > div.flex {
  flex-shrink: 0;
}

/* On mobile: wider gap, tighter cards */
@media (max-width: 640px) {
  .candidate-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .candidate-card { padding: 10px 12px; }
}

/* override prior table-targeting mobile rules — table no longer exists */
@media (max-width: 640px) {
  #candidatesTable, #candidatesTable thead, #candidatesTable tbody, #candidatesTable tr, #candidatesTable td {
    /* no-op — these selectors no longer match */
  }
}


/* ============================================================== */
/*   v7 — status-strip compact, scan-banner, smaller radii          */
/* ============================================================== */

/* === Status strip: drop "КОЛЕКТОР" sub-label, keep one line ==== */
.status-headline > .text-\[11px\].mono.uppercase {
  display: none !important;  /* drop "КОЛЕКТОР" small label */
}
.status-headline > .text-\[14px\] {
  font-size: 12.5px !important;
  font-weight: 700;
}
.status-headline {
  margin-right: 0 !important;
  line-height: 1 !important;
}
.status-strip-inner {
  gap: 12px !important;
  padding: 8px 14px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.status-strip-inner::-webkit-scrollbar { display: none; }
.status-stat {
  padding: 3px 9px !important;
  font-size: 11.5px !important;
  flex-shrink: 0;
}
.status-stat .text-\[15px\] { font-size: 13px !important; }
.status-stat .text-\[13px\] { font-size: 12px !important; }

/* === Scan result banner (replaces flat one-line message) ======= */
.result-message.has-banner {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.scan-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-ink-100);
  background: linear-gradient(135deg, rgba(0,168,59,.04) 0%, var(--color-white) 70%);
}
:where(.dark) .scan-banner {
  background: linear-gradient(135deg, rgba(0,168,59,.10) 0%, var(--color-ink-800) 70%);
  border-color: var(--color-ink-700);
}
.scan-banner[data-tone="amber"] {
  background: linear-gradient(135deg, rgba(229,148,26,.08) 0%, var(--color-white) 70%);
  border-color: rgba(229,148,26,.30);
}
:where(.dark) .scan-banner[data-tone="amber"] {
  background: linear-gradient(135deg, rgba(229,148,26,.14) 0%, var(--color-ink-800) 70%);
}

.scan-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scan-banner-icon {
  font-size: 18px;
  color: var(--color-bamboo-500);
}
.scan-banner[data-tone="amber"] .scan-banner-icon {
  color: var(--color-brand-amber-500);
}
.scan-banner-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -.01em;
}
:where(.dark) .scan-banner-title { color: var(--color-ink-100); }

.scan-banner-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.scan-banner-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border-radius: 9999px;
  background: var(--color-ink-100);
  color: var(--color-ink-700);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
}
:where(.dark) .scan-banner-chip {
  background: rgba(43,54,71,.5);
  color: var(--color-ink-200);
}
.scan-banner-chip strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-ink-900);
}
:where(.dark) .scan-banner-chip strong { color: var(--color-ink-100); }
.scan-banner-chip .mdi { font-size: 12px; line-height: 1; }

.scan-banner-chip[data-chip-tone="bamboo"] {
  background: rgba(0,168,59,.10);
  color: var(--color-bamboo-600);
  border-color: rgba(0,168,59,.20);
}
.scan-banner-chip[data-chip-tone="bamboo"] strong { color: var(--color-bamboo-600); }
:where(.dark) .scan-banner-chip[data-chip-tone="bamboo"],
:where(.dark) .scan-banner-chip[data-chip-tone="bamboo"] strong { color: var(--color-bamboo-400); }

.scan-banner-chip[data-chip-tone="sky"] {
  background: rgba(54,144,212,.10);
  color: var(--color-brand-sky-600);
  border-color: rgba(54,144,212,.20);
}
.scan-banner-chip[data-chip-tone="sky"] strong { color: var(--color-brand-sky-600); }
:where(.dark) .scan-banner-chip[data-chip-tone="sky"],
:where(.dark) .scan-banner-chip[data-chip-tone="sky"] strong { color: var(--color-brand-sky-400); }

.scan-banner-chip[data-chip-tone="amber"] {
  background: rgba(229,148,26,.10);
  color: var(--color-brand-amber-600);
  border-color: rgba(229,148,26,.30);
}
.scan-banner-chip[data-chip-tone="amber"] strong { color: var(--color-brand-amber-600); }
:where(.dark) .scan-banner-chip[data-chip-tone="amber"],
:where(.dark) .scan-banner-chip[data-chip-tone="amber"] strong { color: var(--color-brand-amber-400); }

.scan-banner-chip[data-chip-tone="rose"] {
  background: rgba(226,69,80,.10);
  color: var(--color-brand-rose-600);
  border-color: rgba(226,69,80,.25);
}
.scan-banner-chip[data-chip-tone="rose"] strong { color: var(--color-brand-rose-600); }

.scan-banner-hint {
  font-size: 11.5px;
  color: var(--color-brand-amber-600);
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(229,148,26,.08);
  border: 1px solid rgba(229,148,26,.20);
}
:where(.dark) .scan-banner-hint { color: var(--color-brand-amber-400); }


/* === Smaller radii on big surfaces (less rounded) ============== */
.scanner-hero,
.vpg-overview,
.vpg-panel,
.vpg-cert-v2,
.printer-row,
.candidate-card,
.printer-card,
.discovery-setup,
.printer-list-loading,
.printer-list-empty,
.printer-list-error,
.candidate-empty,
.scan-banner,
#kbdHelpOverlay > div,
#probePopover > div,
#detailPopover > div,
.drawer {
  border-radius: 10px !important;
}
/* even smaller on small inner panels */
.vpg-printer-row,
.vpg-cert-step,
.drawer-progress,
.drawer-temp-cell,
.drawer-data-grid,
.drawer-observer-state,
.drawer-error-line,
.drawer-raw,
.scan-grid {
  border-radius: 8px !important;
}
/* keep round shapes that are intentionally pills (chips, buttons-pill, status-stat) */


/* ============================================================== */
/*   v8 — ultra-compact status strip + tighter radii                */
/* ============================================================== */

/* Drop the "Колектор Онлайн" headline entirely — pulse alone is enough */
.status-headline { display: none !important; }
.status-pulse { margin-right: 4px; }

/* Tighter chips */
.status-strip-inner {
  gap: 8px !important;
  padding: 8px 12px !important;
}
.status-stat {
  padding: 3px 8px !important;
  font-size: 11px !important;
  gap: 4px !important;
}
.status-stat .text-\[15px\] { font-size: 12px !important; }
.status-stat .text-\[13px\] { font-size: 11.5px !important; }
.status-stat .text-\[12px\] { font-size: 10.5px !important; }
.status-stat .mdi { font-size: 12px !important; }

/* Tighter radii — global pass: 10px → 8px on big, 8px → 6px on inner */
.scanner-hero,
.vpg-overview,
.vpg-panel,
.vpg-cert-v2,
.printer-row,
.candidate-card,
.printer-card,
.discovery-setup,
.printer-list-loading,
.printer-list-empty,
.printer-list-error,
.candidate-empty,
.scan-banner,
#kbdHelpOverlay > div,
#probePopover > div,
#detailPopover > div,
.drawer,
.status-strip {
  border-radius: 8px !important;
}
.vpg-printer-row,
.vpg-cert-step,
.drawer-progress,
.drawer-temp-cell,
.drawer-data-grid,
.drawer-observer-state,
.drawer-error-line,
.drawer-raw,
.scan-grid,
.candidate-grid > * {
  border-radius: 6px !important;
}
/* Bambu cert dropzone, scanner-hero-icon — keep slightly rounded */
.vpg-cert-dropzone,
.scanner-hero-icon {
  border-radius: 8px !important;
}

/* Give printing rows a little air between cards. */
.printer-list,
.printer-list-rows {
  gap: 10px !important;
}

@media (max-width: 600px) {
  .status-strip-inner { padding: 6px 10px !important; gap: 6px !important; }
  .status-stat { padding: 2px 7px !important; font-size: 10.5px !important; }
}


/* v9 — smaller status pulse radius + tighter mobile chips */
.status-pulse { width: 8px !important; height: 8px !important; }
.status-pulse-dot { width: 6px !important; height: 6px !important; box-shadow: 0 0 0 1.5px rgba(0,168,59,.18) !important; }
.status-pulse-ring { inset: -2px !important; }
@keyframes statusRing {
  0%   { transform: scale(.6); opacity: .55; }
  80%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Mobile (≤ 640px): even smaller font on the right-side chips so MB + time fit */
@media (max-width: 640px) {
  .status-strip-inner { gap: 5px !important; padding: 5px 8px !important; }
  .status-stat { padding: 2px 6px !important; font-size: 10px !important; gap: 3px !important; }
  .status-stat .text-\[15px\],
  .status-stat .text-\[13px\] { font-size: 10.5px !important; }
  .status-stat .text-\[12px\] { font-size: 9.5px !important; }
  .status-stat .text-\[11px\] { font-size: 9.5px !important; }
  .status-stat .mdi { font-size: 11px !important; }
  /* the last-msg chip uses mono with date+time — shrink hard */
  .status-stat[title="Останнє повідомлення MQTT"] .mono { font-size: 9.5px !important; }
}


/* v10 — taller status strip + tighter candidate cards */

/* Status strip: more vertical breathing room */
.status-strip-inner {
  padding: 11px 14px !important;
}
.status-strip { min-height: 44px; }
@media (max-width: 640px) {
  .status-strip-inner { padding: 10px 10px !important; }
  .status-strip { min-height: 40px; }
}

/* Candidate card: drop dashed footer border, reduce padding/gaps */
.candidate-card {
  padding: 10px 12px !important;
  gap: 6px !important;
}
.candidate-card::before {
  top: 10px !important;
  bottom: 10px !important;
}
.candidate-card-body {
  gap: 8px !important;
}
.candidate-card-thumb {
  width: 36px !important;
  height: 36px !important;
  padding: 2px !important;
}
.candidate-card-foot {
  padding-top: 4px !important;
  border-top: 0 !important;
  gap: 6px !important;
}
.candidate-card-ip { font-size: 13px !important; }
.candidate-card-alias { font-size: 12.5px !important; }
.candidate-card-serial { font-size: 10.5px !important; margin-top: 1px !important; }
.candidate-card-ipchange { font-size: 10px !important; margin-top: 2px !important; }
.candidate-card-time { font-size: 10px !important; }

/* Apply-code action button + kebab — slightly smaller in compact card */
.candidate-card-foot button[data-open-probe-ip],
.candidate-card-foot button[data-confirm-ip-change],
.candidate-card-foot button[data-manual-verify-ip],
.candidate-card-foot button[data-row-menu-toggle] {
  width: 32px !important;
  height: 32px !important;
}
.candidate-card-foot button[data-open-probe-ip] .mdi,
.candidate-card-foot button[data-confirm-ip-change] .mdi,
.candidate-card-foot button[data-manual-verify-ip] .mdi,
.candidate-card-foot button[data-row-menu-toggle] .mdi {
  font-size: 14px !important;
}

@media (max-width: 640px) {
  .candidate-card { padding: 8px 10px !important; gap: 5px !important; }
  .candidate-card-thumb { width: 32px !important; height: 32px !important; }
  .candidate-card-ip { font-size: 13px !important; }
  .candidate-card-alias { font-size: 12px !important; }
}


/* v11 — candidate-card single 2-row layout (more compact) */
.candidate-card {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "thumb content actions"
    "thumb content actions" !important;
  align-items: center;
  gap: 4px 10px !important;
  padding: 8px 10px 8px 12px !important;
}
.candidate-card > .candidate-card-thumb {
  grid-area: thumb;
  align-self: center;
  width: 36px !important;
  height: 36px !important;
}
.candidate-card > .candidate-card-content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.candidate-card > .candidate-card-actions {
  grid-area: actions;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}

.candidate-card-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.candidate-card-row-top .candidate-card-ip {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-ink-900);
  white-space: nowrap;
}
:where(.dark) .candidate-card-row-top .candidate-card-ip { color: var(--color-ink-100); }
/* shrink the chip slightly */
.candidate-card-row-top > span.inline-flex {
  height: 18px !important;
  font-size: 9.5px !important;
  padding: 0 6px !important;
}
.candidate-card-grow { flex: 1; }
.candidate-card-time {
  font-size: 10.5px !important;
  color: var(--color-ink-500);
  white-space: nowrap;
}
:where(.dark) .candidate-card-time { color: var(--color-ink-400); }

.candidate-card-row-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.candidate-card-row-meta .candidate-card-alias {
  font-size: 11.5px !important;
  font-weight: 600;
  color: var(--color-ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
:where(.dark) .candidate-card-row-meta .candidate-card-alias { color: var(--color-ink-200); }
.candidate-card-row-meta .candidate-card-serial {
  font-size: 10.5px !important;
  color: var(--color-ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
:where(.dark) .candidate-card-row-meta .candidate-card-serial { color: var(--color-ink-400); }
.candidate-card-meta-sep { color: var(--color-ink-300); flex-shrink: 0; }
:where(.dark) .candidate-card-meta-sep { color: var(--color-ink-600); }
.candidate-card-row-meta .candidate-card-model {
  height: 16px !important;
  padding: 0 5px !important;
  font-size: 9px !important;
  flex-shrink: 0;
}
.candidate-card-row-meta .candidate-card-ipchange {
  font-size: 10px !important;
  flex-shrink: 0;
}

/* Detail-info button compacter */
.candidate-card-detail-btn {
  width: 20px !important;
  height: 20px !important;
}

/* Action buttons (apply / kebab) — compact circle */
.candidate-card-actions button[data-open-probe-ip],
.candidate-card-actions button[data-confirm-ip-change],
.candidate-card-actions button[data-manual-verify-ip],
.candidate-card-actions button[data-row-menu-toggle] {
  width: 30px !important;
  height: 30px !important;
}
.candidate-card-actions button .mdi { font-size: 13px !important; }

.candidate-card::before {
  top: 8px !important;
  bottom: 8px !important;
}

@media (max-width: 640px) {
  .candidate-card {
    padding: 7px 8px 7px 10px !important;
    gap: 3px 8px !important;
  }
  .candidate-card > .candidate-card-thumb { width: 32px !important; height: 32px !important; }
  .candidate-card-actions button[data-open-probe-ip],
  .candidate-card-actions button[data-confirm-ip-change],
  .candidate-card-actions button[data-manual-verify-ip],
  .candidate-card-actions button[data-row-menu-toggle] {
    width: 28px !important;
    height: 28px !important;
  }
  .candidate-card-actions { gap: 4px !important; }
}


/* ============================================================== */
/*   v12 — candidate cards: 3-row content, wider grid columns      */
/* ============================================================== */

.candidate-grid {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 8px !important;
}
@media (max-width: 880px) {
  .candidate-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; }
}
@media (max-width: 640px) {
  .candidate-grid { grid-template-columns: 1fr !important; }
}

/* Card content gets 3 conceptual rows: header(IP+time), status chip, meta(alias+serial) */
.candidate-card > .candidate-card-content {
  gap: 4px !important;
}

.candidate-card-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.candidate-card-row-top .candidate-card-ip {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--color-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  letter-spacing: -.02em;
}
:where(.dark) .candidate-card-row-top .candidate-card-ip { color: var(--color-ink-100); }

.candidate-card-row-status {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* The new short status chip — wraps if too long, but with shortened text it shouldn't */
.candidate-card-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 18px;
  padding: 0 8px;
  border-radius: 9999px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  border: 1px solid;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.candidate-card-status-chip[data-tone="bamboo"] { background: rgba(0,168,59,.10);   color: var(--color-bamboo-600);      border-color: rgba(0,168,59,.22); }
.candidate-card-status-chip[data-tone="amber"]  { background: rgba(229,148,26,.10); color: var(--color-brand-amber-600); border-color: rgba(229,148,26,.30); }
.candidate-card-status-chip[data-tone="rose"]   { background: rgba(226,69,80,.10);  color: var(--color-brand-rose-600);  border-color: rgba(226,69,80,.30); }
.candidate-card-status-chip[data-tone="sky"]    { background: rgba(54,144,212,.10); color: var(--color-brand-sky-600);   border-color: rgba(54,144,212,.22); }
.candidate-card-status-chip[data-tone="violet"] { background: rgba(124,92,209,.10); color: var(--color-brand-violet-600); border-color: rgba(124,92,209,.22); }
.candidate-card-status-chip[data-tone="ink"]    { background: var(--color-ink-100); color: var(--color-ink-600);         border-color: var(--color-ink-200); }
:where(.dark) .candidate-card-status-chip[data-tone="bamboo"] { color: var(--color-bamboo-400); }
:where(.dark) .candidate-card-status-chip[data-tone="amber"]  { color: var(--color-brand-amber-400); }
:where(.dark) .candidate-card-status-chip[data-tone="rose"]   { color: var(--color-brand-rose-400); }
:where(.dark) .candidate-card-status-chip[data-tone="sky"]    { color: var(--color-brand-sky-400); }
:where(.dark) .candidate-card-status-chip[data-tone="violet"] { color: var(--color-brand-violet-400); }
:where(.dark) .candidate-card-status-chip[data-tone="ink"]    { background: var(--color-ink-700); color: var(--color-ink-300); border-color: var(--color-ink-600); }

/* Meta line — alias, model, serial, ipchange — single line with ellipsis */
.candidate-card-row-meta {
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  flex-wrap: nowrap !important;
}
.candidate-card-row-meta .candidate-card-alias {
  font-size: 11.5px !important;
  font-weight: 600;
  color: var(--color-ink-700);
  flex-shrink: 0;
}
.candidate-card-row-meta .candidate-card-model {
  flex-shrink: 0;
}
.candidate-card-row-meta .candidate-card-serial {
  font-size: 10.5px !important;
  color: var(--color-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .candidate-card-row-top .candidate-card-ip { font-size: 13px !important; }
}


/* v13 — candidate IP no-truncate, time pushed right */
.candidate-card-row-top {
  gap: 6px !important;
}
.candidate-card-row-top .candidate-card-ip {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.candidate-card-grow { display: none !important; }
.candidate-card-row-top .candidate-card-time {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.candidate-card-row-top .candidate-card-detail-btn {
  flex-shrink: 0 !important;
}
/* In the very tight 320-380px card width, allow tiny IP shrink only as last resort */
@media (max-width: 480px) {
  .candidate-card-row-top .candidate-card-ip { font-size: 13px !important; }
}

/* Final spacing override for the live printing list. */
.printer-list-rows {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}


/* ============================================================== */
/*   v14 — printer filter compact, header spacer, wider progress   */
/* ============================================================== */

/* === Printer filters: same ultra-compact pill as candidates === */
#printerStatusFilters .cand-filter {
  height: 24px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  gap: 6px !important;
}
#printerStatusFilters .cand-filter::before {
  width: 6px !important;
  height: 6px !important;
}
#printerStatusFilters .cand-filter .tnum {
  font-size: 10.5px !important;
}

/* Same for candidates filters — uniform tight density */
#candidatesFilters .cand-filter {
  height: 24px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
  gap: 6px !important;
}
#candidatesFilters .cand-filter::before { width: 6px !important; height: 6px !important; }
#candidatesFilters .cand-filter .tnum { font-size: 10.5px !important; }

/* === Printer row header: explicit spacer pushes status+time to far right === */
.printer-row-header-spacer {
  flex: 1;
  min-width: 8px;
}

/* === Mobile: progress bar wider, tighter % column === */
@media (max-width: 640px) {
  .activity-progress-line {
    gap: 6px !important;
  }
  .activity-progress-line > .progress-bar {
    height: 9px !important;  /* fatter on mobile for visibility */
  }
  .activity-progress-line > .progress-pct {
    font-size: 13px !important;
    min-width: 32px !important;
  }
  /* Make sure header right-cluster is far right on mobile */
  .printer-row-header { gap: 6px !important; }
  .printer-row-header-right {
    gap: 8px !important;
    margin-left: auto !important;
  }
}


/* v15 — bulletproof header right cluster with absolute positioning */
.printer-row-header {
  position: relative !important;
  padding-right: 88px;  /* reserve space for status icon + time */
}
.printer-row-header-right {
  position: absolute !important;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0 !important;
  flex-shrink: 0 !important;
}
.printer-row-header-spacer { display: none !important; }

@media (max-width: 640px) {
  .printer-row-header {
    padding-right: 80px;
  }
  /* widen the progress bar even more — full row, percentage smaller */
  .activity-progress-line { gap: 6px !important; }
  .activity-progress-line > .progress-bar {
    flex: 1 1 100% !important;
    height: 9px !important;
  }
  .activity-progress-line > .progress-pct {
    font-size: 12.5px !important;
    min-width: 30px !important;
    flex-shrink: 0 !important;
  }
}


/* v16 — model-filter pills match cand-filter style (neutral + dark active) */
.model-filter {
  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 9999px !important;
  border: 1px solid transparent !important;
  background: var(--color-ink-100) !important;
  color: var(--color-ink-700) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
:where(.dark) .model-filter {
  background: rgba(43,54,71,.5) !important;
  color: var(--color-ink-200) !important;
}
.model-filter:hover {
  background: var(--color-ink-200) !important;
  color: var(--color-ink-900) !important;
}
:where(.dark) .model-filter:hover {
  background: rgba(43,54,71,.85) !important;
  color: var(--color-ink-100) !important;
}
.model-filter .tnum {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10.5px !important;
  font-weight: 700;
  color: var(--color-ink-500) !important;
}
:where(.dark) .model-filter .tnum { color: var(--color-ink-400) !important; }
.model-filter.is-active {
  background: var(--color-ink-900) !important;
  color: var(--color-white) !important;
  border-color: var(--color-ink-900) !important;
}
:where(.dark) .model-filter.is-active {
  background: var(--color-ink-100) !important;
  color: var(--color-ink-900) !important;
  border-color: var(--color-ink-100) !important;
}
.model-filter.is-active .tnum { color: rgba(255,255,255,.65) !important; }
:where(.dark) .model-filter.is-active .tnum { color: rgba(23,32,42,.55) !important; }


/* v17 — printer-row-header uses 2-group flex with justify-content: space-between */
.printer-row-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
  padding-right: 0 !important;
  position: static !important;
}
.printer-row-header-left {
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.printer-row-header-left > .alias {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.printer-row-header-left > .printer-row-chip {
  flex-shrink: 0;
}
.printer-row-header-right {
  position: static !important;
  transform: none !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.printer-row-header-spacer { display: none !important; }


/* v18 — make mobile printer cards use the full available row width */
.printer-row {
  grid-template-columns: 56px minmax(0, 1fr) !important;
}
.printer-row-header,
.printer-row-activity,
.printer-row-footer {
  width: 100% !important;
  justify-self: stretch !important;
  min-width: 0 !important;
}
.printer-row-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 10px !important;
}
.printer-row-header-left {
  width: 100% !important;
  min-width: 0 !important;
}
.printer-row-header-right {
  justify-self: end !important;
}
.activity-printing-block,
.activity-progress-line {
  width: 100% !important;
}

@media (max-width: 640px) {
  .printer-row {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
  .printer-row-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: 8px !important;
  }
  .printer-row-header-right {
    gap: 7px !important;
  }
  .activity-printing-block {
    flex: 1 1 100% !important;
  }
  .activity-progress-line {
    gap: 5px !important;
  }
  .activity-progress-line > .progress-bar {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .activity-progress-line > .progress-pct {
    min-width: 26px !important;
    font-size: 12px !important;
  }
}


/* ============================================================== */
/*   v18 — caustics, 3D-tilt thumbs, branded splash                 */
/* ============================================================== */

/* === 1. Caustics on progress fill =========================== */
/* Adds layered scattered light spots that drift across the bar. */
.progress-fill {
  position: relative;
  overflow: hidden;
}
.progress-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 40% 80% at 20% 50%, rgba(255,255,255,.30) 0%, transparent 60%),
    radial-gradient(ellipse 25% 60% at 70% 30%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(ellipse 30% 70% at 90% 70%, rgba(255,255,255,.18) 0%, transparent 65%);
  background-size: 50% 100%, 35% 100%, 45% 100%;
  background-repeat: repeat-x;
  mix-blend-mode: overlay;
  opacity: .9;
  animation: causticsDrift 5.5s linear infinite;
}
@keyframes causticsDrift {
  from {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%;
  }
  to {
    background-position:
      150% 0%,
      -120% 0%,
      90% 0%;
  }
}
/* slower, softer secondary layer for depth */
.progress-fill::after {
  /* keep the existing shimmer, but soften so caustics breathe */
  opacity: .7;
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill::before { animation: none !important; }
}

/* === 2. 3D tilt on printer thumbs =========================== */
.printer-row-thumb-wrap,
.printer-card-thumb,
.candidate-card-thumb,
.vpg-printer-thumb {
  transform: perspective(360px);
  transform-style: preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .15s;
  will-change: transform;
}
/* Reset on hover to allow JS to take over (overrides transition for snappier follow) */
.printer-row-thumb-wrap:hover,
.printer-card-thumb:hover,
.candidate-card-thumb:hover,
.vpg-printer-thumb:hover {
  transition: transform .12s cubic-bezier(.2,.7,.2,1), box-shadow .15s;
}
/* Touch devices — no tilt */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .printer-row-thumb-wrap,
  .printer-card-thumb,
  .candidate-card-thumb,
  .vpg-printer-thumb {
    transform: none !important;
    transition: box-shadow .15s !important;
  }
}

/* === 3. Branded loading splash ============================== */
.admin-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(54,144,212,.18) 0%, transparent 60%),
    var(--color-ink-900);
  animation: splashIn .25s ease-out both;
}
.admin-splash.is-hiding {
  animation: splashOut .38s cubic-bezier(.4,0,.2,1) both;
  pointer-events: none;
}
@keyframes splashIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.05); } }

.admin-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.admin-splash-logo-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-splash-logo {
  position: relative;
  z-index: 3;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(54,144,212,.35));
  animation: splashLogoFloat 1.8s ease-in-out infinite;
}

/* primary radar sweep — fast outer */
.admin-splash-radar {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(54,144,212,.0) 30deg,
    rgba(54,144,212,.65) 60deg,
    rgba(54,144,212,.0) 110deg,
    transparent 360deg);
  animation: splashRadar 1.4s linear infinite;
  z-index: 2;
  filter: blur(1px);
}
/* slower inner rim, opposite direction */
.admin-splash-radar-2 {
  position: absolute;
  inset: 14px;
  border-radius: 9999px;
  background: conic-gradient(from 180deg,
    transparent 0deg,
    rgba(0,168,59,.40) 70deg,
    transparent 130deg,
    transparent 360deg);
  animation: splashRadarReverse 2.6s linear infinite;
  z-index: 1;
  filter: blur(2px);
  opacity: .6;
}
@keyframes splashRadar { to { transform: rotate(360deg); } }
@keyframes splashRadarReverse { to { transform: rotate(-360deg); } }
@keyframes splashLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.admin-splash-name {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-ink-100);
  background: linear-gradient(120deg, #fff 0%, #bcd5ee 50%, #fff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: splashShimmer 2.4s ease-in-out infinite;
}
@keyframes splashShimmer {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

.admin-splash-tagline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: rgba(143,154,170,.85);
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

/* dots animation in tagline (connecting · · ·) */
.admin-splash-dots {
  display: inline-flex;
  margin-left: 6px;
}
.admin-splash-dots > span {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--color-brand-sky-400);
  margin: 0 1.5px;
  opacity: .3;
  animation: splashDotPulse 1.2s ease-in-out infinite;
}
.admin-splash-dots > span:nth-child(2) { animation-delay: .2s; }
.admin-splash-dots > span:nth-child(3) { animation-delay: .4s; }
@keyframes splashDotPulse {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-splash-radar,
  .admin-splash-radar-2,
  .admin-splash-logo,
  .admin-splash-name,
  .admin-splash-dots > span { animation: none !important; }
}


/* v19 — beefier 3D-tilt with glare highlight */
.printer-row-thumb-wrap,
.printer-card-thumb,
.candidate-card-thumb,
.vpg-printer-thumb {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.printer-row-thumb-wrap.is-tilting,
.printer-card-thumb.is-tilting,
.candidate-card-thumb.is-tilting,
.vpg-printer-thumb.is-tilting {
  transition: transform .04s linear;
  z-index: 5;
}

/* Glare highlight — bright spot tracking the cursor */
.printer-row-thumb-wrap::after,
.printer-card-thumb::after,
.candidate-card-thumb::after,
.vpg-printer-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.55) 0%,
    rgba(255,255,255,.18) 18%,
    transparent 45%);
  opacity: 0;
  transition: opacity .18s;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 4;
}
.printer-row-thumb-wrap.is-tilting::after,
.printer-card-thumb.is-tilting::after,
.candidate-card-thumb.is-tilting::after,
.vpg-printer-thumb.is-tilting::after {
  opacity: 1;
}

/* On dark backgrounds, lighter glare is too washed-out — use screen blend */
:where(.dark) .printer-row-thumb-wrap.is-tilting::after,
:where(.dark) .printer-card-thumb.is-tilting::after,
:where(.dark) .candidate-card-thumb.is-tilting::after,
:where(.dark) .vpg-printer-thumb.is-tilting::after {
  mix-blend-mode: screen;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .printer-row-thumb-wrap::after,
  .printer-card-thumb::after,
  .candidate-card-thumb::after,
  .vpg-printer-thumb::after { display: none !important; }
  .printer-row-thumb-wrap,
  .printer-card-thumb,
  .candidate-card-thumb,
  .vpg-printer-thumb {
    transform: none !important;
  }
}


/* v20 — disable 3D tilt + glare (revert) */
.printer-row-thumb-wrap,
.printer-card-thumb,
.candidate-card-thumb,
.vpg-printer-thumb {
  transform: none !important;
  transform-style: flat !important;
  transition: box-shadow .15s, border-color .15s !important;
}
.printer-row-thumb-wrap::after,
.printer-card-thumb::after,
.candidate-card-thumb::after,
.vpg-printer-thumb::after {
  display: none !important;
  content: none !important;
}


/* v21 — compact printer cards reuse candidate-card visuals */
/* Slightly smaller thumb on mini cards since they're for stale/offline */
.printer-mini.candidate-card .candidate-card-thumb {
  width: 36px;
  height: 36px;
}
/* Mini cards may have many — denser grid */
.printer-mini-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 6px !important;
}
@media (max-width: 880px) {
  .printer-mini-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; }
}
@media (max-width: 640px) {
  .printer-mini-grid { grid-template-columns: 1fr !important; }
}
/* Tone-dot color for status-chip on mini cards */
.printer-mini .candidate-card-status-chip[data-tone="bamboo"] { background: rgba(0,168,59,.10); color: var(--color-bamboo-600); border-color: rgba(0,168,59,.22); }
.printer-mini .candidate-card-status-chip[data-tone="amber"]  { background: rgba(229,148,26,.10); color: var(--color-brand-amber-600); border-color: rgba(229,148,26,.30); }
.printer-mini .candidate-card-status-chip[data-tone="rose"]   { background: rgba(226,69,80,.10); color: var(--color-brand-rose-600); border-color: rgba(226,69,80,.30); }
.printer-mini .candidate-card-status-chip[data-tone="sky"]    { background: rgba(54,144,212,.10); color: var(--color-brand-sky-600); border-color: rgba(54,144,212,.22); }
.printer-mini .candidate-card-status-chip[data-tone="ink"]    { background: var(--color-ink-100); color: var(--color-ink-600); border-color: var(--color-ink-200); }
:where(.dark) .printer-mini .candidate-card-status-chip[data-tone="bamboo"] { color: var(--color-bamboo-400); }
:where(.dark) .printer-mini .candidate-card-status-chip[data-tone="amber"]  { color: var(--color-brand-amber-400); }
:where(.dark) .printer-mini .candidate-card-status-chip[data-tone="rose"]   { color: var(--color-brand-rose-400); }
:where(.dark) .printer-mini .candidate-card-status-chip[data-tone="sky"]    { color: var(--color-brand-sky-400); }
/* primary name on mini-card uses regular sans (alias is human name) */
.printer-mini .candidate-card-ip {
  font-family: var(--font-sans);
}


/* v22 — discovery/mini cards need a little more vertical air */
.candidate-card {
  min-height: 74px !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  gap: 6px 12px !important;
}
.candidate-card > .candidate-card-content {
  gap: 5px !important;
}
.candidate-card-row-top {
  min-height: 18px !important;
}
.candidate-card-row-status {
  min-height: 20px !important;
}
.candidate-card-status-chip {
  height: 20px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.candidate-card-row-meta {
  gap: 6px !important;
  line-height: 1.35 !important;
}
.candidate-card > .candidate-card-actions {
  gap: 8px !important;
}
.candidate-card::before {
  top: 10px !important;
  bottom: 10px !important;
}

/* v23 — keep discovery metadata readable after removing the info button */
.candidate-card-row-top .candidate-card-time {
  margin-left: auto !important;
  padding-left: 8px !important;
  flex-shrink: 0 !important;
}
.candidate-card-row-meta {
  min-height: 16px !important;
}
.candidate-card-row-meta .candidate-card-alias,
.candidate-card-row-meta .candidate-card-serial,
.candidate-card-row-meta .candidate-card-ipchange {
  line-height: 1.35 !important;
}
.candidate-card > .candidate-card-actions {
  min-width: 68px !important;
}


/* v24 — stop squeezing discovery cards: max 3 per row, cleaner meta line */
.candidate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
.candidate-card {
  min-height: 84px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.candidate-card > .candidate-card-content {
  min-width: 0 !important;
  gap: 6px !important;
}
.candidate-card-row-meta {
  overflow: visible !important;
  min-height: 18px !important;
  padding-bottom: 1px !important;
}
.candidate-card-row-meta .candidate-card-alias {
  max-width: 44% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.candidate-card-row-meta .candidate-card-serial,
.candidate-card-row-meta .candidate-card-ipchange {
  max-width: 52% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.candidate-card-row-meta .candidate-card-model {
  line-height: 16px !important;
}

@media (max-width: 1180px) {
  .candidate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px) {
  .candidate-grid {
    grid-template-columns: 1fr !important;
  }
  .candidate-card-row-meta .candidate-card-alias {
    max-width: 48% !important;
  }
  .candidate-card-row-meta .candidate-card-serial,
  .candidate-card-row-meta .candidate-card-ipchange {
    max-width: 48% !important;
  }
}

@media (max-width: 640px) {
  .candidate-card {
    min-height: 80px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .candidate-card > .candidate-card-content {
    gap: 5px !important;
  }
}


/* ============================================================== */
/*   v22 — Uploads card: 3-section hierarchy (Print / Slice / Archive) */
/* ============================================================== */

/* Header */
.vpg-upload-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.vpg-upload-titlewrap { flex: 1; min-width: 0; }
.vpg-upload-file {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
:where(.dark) .vpg-upload-file { color: var(--color-ink-100); }
.vpg-upload-identity {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-500);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
:where(.dark) .vpg-upload-identity { color: var(--color-ink-400); }
.vpg-upload-sep { color: var(--color-ink-300); }
:where(.dark) .vpg-upload-sep { color: var(--color-ink-600); }
.vpg-upload-warnings {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.vpg-upload-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* === Sections (Print / Slice config) === */
.vpg-upload-section {
  position: relative;
  padding: 10px 12px 10px 14px;
  margin-top: 10px;
  border-radius: 8px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
}
:where(.dark) .vpg-upload-section {
  background: rgba(43,54,71,.30);
  border-color: var(--color-ink-700);
}
.vpg-upload-section::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-ink-300);
}
.vpg-upload-section[data-tone="sky"]::before    { background: var(--color-brand-sky-500); }
.vpg-upload-section[data-tone="violet"]::before { background: var(--color-brand-violet-500); }
.vpg-upload-section[data-tone="amber"]::before  { background: var(--color-brand-amber-500); }

.vpg-upload-section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-ink-500);
  margin-bottom: 6px;
}
:where(.dark) .vpg-upload-section-label { color: var(--color-ink-400); }
.vpg-upload-section-sub {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--color-ink-600);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
:where(.dark) .vpg-upload-section-sub { color: var(--color-ink-300); }

/* === Print stats: 4 big metrics === */
.vpg-upload-print-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 14px;
}
.vpg-upload-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.vpg-upload-stat .mdi {
  font-size: 18px;
  line-height: 1;
  color: var(--color-brand-sky-500);
  flex-shrink: 0;
}
.vpg-upload-stat-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-width: 0;
}
.vpg-upload-stat-value strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink-900);
  letter-spacing: -.01em;
}
:where(.dark) .vpg-upload-stat-value strong { color: var(--color-ink-100); }
.vpg-upload-stat-unit {
  font-size: 11px;
  color: var(--color-ink-500);
  font-weight: 500;
}

/* === Slice config text lines === */
.vpg-upload-config-line {
  font-size: 12px;
  color: var(--color-ink-700);
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
:where(.dark) .vpg-upload-config-line { color: var(--color-ink-200); }
.vpg-upload-config-line.vpg-upload-config-dim,
.vpg-upload-config-line .vpg-upload-config-dim {
  color: var(--color-ink-500);
  font-size: 11.5px;
}
:where(.dark) .vpg-upload-config-line.vpg-upload-config-dim,
:where(.dark) .vpg-upload-config-line .vpg-upload-config-dim { color: var(--color-ink-400); }
.vpg-upload-config-emph {
  font-weight: 700;
  color: var(--color-ink-900);
}
:where(.dark) .vpg-upload-config-emph { color: var(--color-ink-100); }
.vpg-upload-config-line .mono {
  font-family: var(--font-mono);
  color: var(--color-ink-900);
  font-weight: 600;
}
:where(.dark) .vpg-upload-config-line .mono { color: var(--color-ink-100); }
.vpg-upload-config-line.vpg-upload-config-dim .mono,
.vpg-upload-config-line .vpg-upload-config-dim .mono {
  color: var(--color-ink-700);
  font-weight: 500;
}
:where(.dark) .vpg-upload-config-line.vpg-upload-config-dim .mono,
:where(.dark) .vpg-upload-config-line .vpg-upload-config-dim .mono { color: var(--color-ink-200); }

/* === Archive details (collapsible) === */
.vpg-upload-archive {
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-ink-100);
  background: var(--color-white);
}
:where(.dark) .vpg-upload-archive {
  border-color: var(--color-ink-700);
  background: var(--color-ink-800);
}
.vpg-upload-archive > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
}
.vpg-upload-archive > summary::-webkit-details-marker { display: none; }
.vpg-upload-archive > summary::before {
  content: "›";
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-ink-400);
  transition: transform .15s;
}
.vpg-upload-archive[open] > summary::before { transform: rotate(90deg); }
.vpg-upload-archive > summary > .vpg-upload-section-label { margin-bottom: 0; }
.vpg-upload-archive-summary {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-ink-500);
}
:where(.dark) .vpg-upload-archive-summary { color: var(--color-ink-400); }
.vpg-upload-archive-body {
  padding: 4px 12px 12px;
  border-top: 1px solid var(--color-ink-100);
}
:where(.dark) .vpg-upload-archive-body { border-top-color: var(--color-ink-700); }
.vpg-upload-archive-grid {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
  padding: 0;
  font-size: 11px;
}
.vpg-upload-archive-grid dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--color-ink-500);
  font-weight: 700;
  align-self: center;
  margin: 0;
}
:where(.dark) .vpg-upload-archive-grid dt { color: var(--color-ink-400); }
.vpg-upload-archive-grid dd {
  margin: 0;
  font-size: 11px;
  color: var(--color-ink-700);
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:where(.dark) .vpg-upload-archive-grid dd { color: var(--color-ink-200); }

.vpg-upload-rawmeta {
  margin-top: 10px;
  border-radius: 6px;
  background: var(--color-ink-900);
  color: var(--color-ink-100);
  overflow: hidden;
}
.vpg-upload-rawmeta > summary {
  padding: 6px 10px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-400);
  list-style: none;
}
.vpg-upload-rawmeta > summary::-webkit-details-marker { display: none; }
.vpg-upload-rawmeta pre {
  margin: 0;
  padding: 0 10px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 280px;
  overflow: auto;
}

@media (max-width: 760px) {
  .vpg-upload-header { flex-direction: column; gap: 8px; }
  .vpg-upload-status { align-self: flex-start; }
  .vpg-upload-print-stats { grid-template-columns: repeat(2, 1fr); }
  .vpg-upload-archive-grid { grid-template-columns: 90px 1fr; }
}

/* v23 — preview thumb keeps square aspect (no stretch with tall cards) */
.vpg-upload-preview {
  align-self: start !important;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
}
.vpg-upload-preview-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  min-height: 0 !important;
}
.vpg-upload-preview-empty {
  height: 100% !important;
  min-height: 0 !important;
}


/* ============================================================== */
/*   v24 — mobile fixes for Virtual Printers + Uploads             */
/* ============================================================== */

@media (max-width: 640px) {
  /* === Virtual Printers row: clean stacked layout, no overlaps === */
  .vpg-printer-row {
    display: grid !important;
    grid-template-columns: 36px 40px 1fr auto !important;
    grid-template-rows: auto auto !important;
    grid-template-areas:
      "toggle thumb model status"
      "ip ip ip ip" !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    align-items: center;
  }
  .vpg-printer-row > .vpg-switch        { grid-area: toggle; align-self: center; }
  .vpg-printer-row > .vpg-printer-thumb { grid-area: thumb; width: 36px !important; height: 36px !important; }
  .vpg-printer-row > .vpg-model-badge   { grid-area: model; min-width: 0; }
  .vpg-printer-row > .vpg-status-icon   { grid-area: status; align-self: center; justify-self: end; }
  .vpg-printer-row > .vpg-ip-input      { grid-area: ip; }
  /* meta + action move INSIDE the model cell as small text below model name */
  .vpg-printer-row > .vpg-printer-meta {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    padding-left: 0 !important;
    font-size: 10px !important;
    margin-top: 0;
  }
  .vpg-printer-row > .vpg-printer-meta .vpg-printer-name { font-size: 11.5px !important; }
  .vpg-printer-row > .vpg-printer-meta .vpg-printer-sub  { font-size: 9.5px !important; gap: 4px !important; }
  /* action button hidden on mobile (action available via SSDP restart in cert section) */
  .vpg-printer-row > .vpg-row-action { display: none !important; }
  .vpg-model-badge .vpg-model-name { font-size: 12.5px !important; }
  .vpg-model-badge .vpg-model-code { font-size: 9px !important; }


  /* === Uploads card: compact vertical stack === */
  .vpg-upload-card {
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .vpg-upload-card > .vpg-upload-preview {
    width: 110px !important;
    align-self: center !important;
    margin: 0 auto;
  }
  .vpg-upload-card > .vpg-upload-main {
    grid-column: 1 / -1 !important;
  }
  .vpg-upload-card > .vpg-upload-actions {
    grid-column: 1 / -1 !important;
    flex-direction: row !important;
    justify-content: stretch !important;
    gap: 6px !important;
  }
  .vpg-upload-card > .vpg-upload-actions > .vpg-upload-action {
    flex: 1 !important;
    justify-content: center;
  }

  /* Header — vertical stack on narrow */
  .vpg-upload-header {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
  }
  .vpg-upload-status { align-self: flex-start !important; }
  .vpg-upload-file { font-size: 14px !important; }
  .vpg-upload-identity { font-size: 10.5px !important; }

  /* Print stats — always 2x2, smaller font */
  .vpg-upload-print-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
  }
  .vpg-upload-stat .mdi { font-size: 16px !important; }
  .vpg-upload-stat-value strong { font-size: 13px !important; }
  .vpg-upload-stat-unit { font-size: 10px !important; }

  /* Slice config — better text wrap */
  .vpg-upload-config-line {
    font-size: 11.5px !important;
    line-height: 1.45;
  }

  /* Archive summary — wrap chips below label, never overflow */
  .vpg-upload-archive > summary {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .vpg-upload-archive-summary {
    margin-left: 0 !important;
    width: 100% !important;
    padding-left: 16px;
    font-size: 10px !important;
    flex-wrap: wrap;
  }

  /* Sections tighter padding */
  .vpg-upload-section {
    padding: 8px 10px 8px 12px !important;
  }
  .vpg-upload-section-sub { font-size: 11px !important; }
}


/* ============================================================== */
/*   v25 — mobile fixes for VPG section headers + Bambu cert card  */
/* ============================================================== */

@media (max-width: 640px) {
  /* === VPG section header: stack title above subtitle, avoid 3-line wrap === */
  #vpg > div > header {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  #vpg > div > header > div:first-child {
    flex-wrap: wrap !important;
    flex: 1 1 100%;
    min-width: 0;
  }
  #vpg > div > header > div:first-child > h2 {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px !important;
  }
  #vpg > div > header > div:first-child > span {
    flex: 1 1 100%;
    font-size: 11px !important;
    line-height: 1.35;
  }

  /* === Bambu Studio Certificate header: stack badges below title === */
  .vpg-cert-v2-header {
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  .vpg-cert-v2-headline {
    flex: 1 1 calc(100% - 48px);
    min-width: 0;
  }
  .vpg-cert-v2-title {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .vpg-cert-v2-subtitle {
    font-size: 11px !important;
    line-height: 1.35;
  }
  .vpg-cert-v2-badges {
    flex: 1 1 100% !important;
    margin-left: 48px;
  }

  /* === Gateway state card: tighter, sub-line wraps cleanly === */
  .vpg-overview {
    padding: 12px 14px !important;
  }
  .vpg-overview-title { font-size: 13.5px !important; }
  .vpg-overview-sub {
    font-size: 11px !important;
    line-height: 1.5 !important;
    gap: 4px 6px !important;
  }
  .vpg-overview-ports {
    gap: 4px !important;
  }
  .vpg-port-chip {
    height: 24px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }
  .vpg-port-chip .mdi { font-size: 12px !important; }
  .vpg-port-chip .vpg-port-label { font-size: 9px !important; }
  .vpg-port-chip .vpg-port-value { font-size: 11px !important; }

  /* === Diagnostic stat boxes (SSDP discovery / MQTT TLS / etc) === */
  .vpg-cert-diag-body {
    padding: 4px 12px 12px !important;
  }
  .vpg-cert-counter-row {
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .vpg-cert-counter-label { width: 42px !important; }

  /* === Cert step cards: tighter padding === */
  .vpg-cert-v2-steps {
    padding: 12px !important;
    gap: 10px !important;
  }
  .vpg-cert-step {
    padding: 12px !important;
  }
  .vpg-cert-step-title { font-size: 12.5px !important; }
  .vpg-cert-step-meta .mono { font-size: 10.5px !important; }
  .vpg-cert-step-stats { font-size: 11px !important; }
  .vpg-cert-dropzone {
    height: 52px !important;
    font-size: 11px !important;
  }
  .vpg-cert-step-cta {
    height: 52px !important;
    font-size: 12px !important;
  }

  /* === Cert action buttons in footer should fit === */
  .vpg-cert-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .vpg-action-btn {
    flex: 1 1 calc(50% - 3px);
    justify-content: center;
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
  }
}

/* ===== general mobile polish across blocks ===== */
@media (max-width: 640px) {
  /* tighter section headers everywhere */
  section > div > header,
  .scanner-hero header {
    padding: 10px 12px !important;
  }
  /* refresh / density buttons compact on mobile */
  button[aria-label*="Оновити"],
  button[aria-label="Щільність таблиці"] {
    height: 34px !important;
    width: 34px !important;
  }
  /* Settings / Реєстр section text size */
  #registry h2,
  #vpg h2 { font-size: 14px !important; }
}


/* v26 — fix vpg-printer-row mobile overlap (model badge + meta) */
@media (max-width: 640px) {
  .vpg-printer-row {
    grid-template-columns: 36px 40px 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "toggle thumb model  status"
      "toggle thumb meta   meta"
      "ip     ip    ip     ip" !important;
    align-items: center;
  }
  .vpg-printer-row > .vpg-switch        { grid-area: toggle !important; align-self: center; }
  .vpg-printer-row > .vpg-printer-thumb { grid-area: thumb !important; align-self: center; }
  .vpg-printer-row > .vpg-model-badge   { grid-area: model !important; align-self: end; min-width: 0; }
  .vpg-printer-row > .vpg-printer-meta  {
    grid-area: meta !important;
    grid-column: auto !important;
    grid-row: auto !important;
    align-self: start !important;
    padding-left: 0 !important;
    padding-top: 2px;
  }
  .vpg-printer-row > .vpg-status-icon   { grid-area: status !important; align-self: center; justify-self: end; }
  .vpg-printer-row > .vpg-ip-input      { grid-area: ip !important; }
}


/* v27 — VPG header mobile: refresh button stays top-right */
@media (max-width: 640px) {
  #vpg > div > header {
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
  }
  #vpg > div > header > div:first-child {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-areas:
      "icon title"
      "icon subtitle" !important;
    align-items: center;
    column-gap: 8px !important;
    row-gap: 2px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #vpg > div > header > div:first-child > i { grid-area: icon; align-self: start; margin-top: 2px; }
  #vpg > div > header > div:first-child > h2 { grid-area: title; min-width: 0; }
  #vpg > div > header > div:first-child > span {
    grid-area: subtitle;
    flex: 0 1 auto !important;
    line-height: 1.35;
  }
  #vpg > div > header > #btnVpgRefresh {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 0;
  }
}


/* v28 — mobile: stack access-code input + apply button instead of one cramped pill */
@media (max-width: 640px) {
  .access-code-group {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
    gap: 6px;
  }
  .access-code-group:focus-within {
    box-shadow: none !important;
  }
  .access-code-group > .relative {
    width: 100% !important;
    max-width: 100% !important;
  }
  .access-code-input {
    width: 100% !important;
    height: 42px !important;
    border-radius: 9999px !important;
    border: 1.5px solid var(--color-ink-200) !important;
    background: var(--color-white) !important;
    padding: 0 14px 0 36px !important;
    font-family: var(--font-mono) !important;
  }
  :where(.dark) .access-code-input {
    background: rgba(23,32,42,.60) !important;
    border-color: var(--color-ink-700) !important;
  }
  .access-code-input:focus {
    border-color: var(--color-ink-900) !important;
    box-shadow: 0 0 0 3px rgba(15,23,42,.10) !important;
  }
  :where(.dark) .access-code-input:focus {
    border-color: var(--color-ink-100) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
  }
  .access-code-apply,
  #btnProbe {
    width: 100% !important;
    height: 42px !important;
    border-radius: 9999px !important;
    border: 0 !important;
    border-left: 0 !important;
    justify-content: center !important;
  }
  /* the inline 🔑 prefix icon — keep visible at left of input */
  .discovery-setup-access > .relative > .mdi-key-outline {
    left: 14px !important;
  }
}


/* v29 — mobile: clean stack of Scan / input / Apply / Camera */
@media (max-width: 640px) {
  .discovery-setup {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    align-items: stretch !important;
  }
  .discovery-setup-cidr,
  .discovery-setup-access,
  .discovery-network-row {
    width: 100% !important;
  }
  .discovery-setup-divider { display: none !important; }

  /* Scan CTA full-width */
  .scan-cta, #btnScan {
    width: 100% !important;
    height: 44px !important;
    justify-content: center !important;
  }

  /* Access code group — vertical stack */
  .access-code-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
    height: auto !important;
    box-shadow: none !important;
  }
  .access-code-group:focus-within {
    box-shadow: none !important;
  }
  .access-code-group > .relative {
    width: 100% !important;
    max-width: none !important;
  }
  .access-code-input {
    width: 100% !important;
    height: 44px !important;
    border-radius: 9999px !important;
    border: 1.5px solid var(--color-ink-200) !important;
    background: var(--color-white) !important;
    padding: 0 14px 0 38px !important;
    font-family: var(--font-mono) !important;
    font-size: 14px !important;
  }
  :where(.dark) .access-code-input {
    background: rgba(23,32,42,.60) !important;
    border-color: var(--color-ink-700) !important;
  }
  .access-code-input:focus {
    border-color: var(--color-ink-900) !important;
    box-shadow: 0 0 0 3px rgba(15,23,42,.10) !important;
    outline: 0 !important;
  }
  :where(.dark) .access-code-input:focus {
    border-color: var(--color-ink-100) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
  }
  /* the inline 🔑 prefix icon position */
  .access-code-group > .relative > .mdi {
    left: 14px !important;
    font-size: 16px !important;
  }

  /* Apply button — primary dark */
  .access-code-apply,
  #btnProbe {
    width: 100% !important;
    height: 44px !important;
    border-radius: 9999px !important;
    border: 0 !important;
    border-left: 0 !important;
    justify-content: center !important;
    background: var(--color-ink-900) !important;
    color: var(--color-white) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 6px !important;
  }
  :where(.dark) .access-code-apply,
  :where(.dark) #btnProbe {
    background: var(--color-ink-100) !important;
    color: var(--color-ink-900) !important;
  }
  .access-code-apply span,
  #btnProbe span { display: inline !important; }

  /* Camera scan button — secondary outline */
  .access-code-camera,
  #btnAccessCodeCamera {
    width: 100% !important;
    height: 44px !important;
    border-radius: 9999px !important;
    border: 1px solid var(--color-ink-200) !important;
    background: var(--color-white) !important;
    color: var(--color-ink-700) !important;
    justify-content: center !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    padding: 0 14px !important;
  }
  :where(.dark) .access-code-camera,
  :where(.dark) #btnAccessCodeCamera {
    background: var(--color-ink-800) !important;
    color: var(--color-ink-200) !important;
    border-color: var(--color-ink-700) !important;
  }
  .access-code-camera span,
  #btnAccessCodeCamera span {
    display: inline !important;
  }
}


/* v30 — user menu items (theme + settings) + hide standalone on mobile */
.user-menu-item {
  width: 100%;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--color-ink-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  text-align: left;
}
:where(.dark) .user-menu-item { color: var(--color-ink-200); }
.user-menu-item:hover {
  background: var(--color-ink-100);
  color: var(--color-ink-900);
}
:where(.dark) .user-menu-item:hover {
  background: var(--color-ink-700);
  color: var(--color-ink-100);
}
.user-menu-item .mdi {
  color: var(--color-ink-500);
  flex-shrink: 0;
}
:where(.dark) .user-menu-item .mdi { color: var(--color-ink-400); }
.user-menu-item:hover .mdi { color: inherit; }

/* On mobile: hide standalone theme + settings buttons (they live in the user-menu now) */
@media (max-width: 640px) {
  header > div > div.ml-auto > #themeToggle,
  header > div > div.ml-auto > button[data-tab="settings"] {
    display: none !important;
  }
}


/* ============================================================== */
/*   v31 — Access code: single button → modal (camera + manual)     */
/* ============================================================== */

/* Trigger button replaces the input+apply+camera stack */
.access-code-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-900);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
:where(.dark) .access-code-open-btn {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
  color: var(--color-ink-100);
}
.access-code-open-btn:hover {
  background: var(--color-ink-900);
  color: var(--color-white);
  border-color: var(--color-ink-900);
}
:where(.dark) .access-code-open-btn:hover {
  background: var(--color-ink-100);
  color: var(--color-ink-900);
  border-color: var(--color-ink-100);
}
.access-code-open-btn .mdi {
  font-size: 16px;
  line-height: 1;
  color: var(--color-brand-amber-500);
}
.access-code-open-btn:hover .mdi { color: inherit; }

@media (max-width: 640px) {
  .access-code-open-btn {
    width: 100%;
    height: 44px;
  }
}

/* === Modal === */
.acm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(23,32,42,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: acmIn .2s ease-out both;
}
@keyframes acmIn { from { opacity: 0; } to { opacity: 1; } }

.acm-card {
  width: 100%;
  max-width: 440px;
  background: var(--color-white);
  border-radius: 14px;
  box-shadow: 0 25px 60px rgba(15,23,42,.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: acmCardIn .25s cubic-bezier(.2,.7,.2,1) both;
}
:where(.dark) .acm-card { background: var(--color-ink-800); }
@keyframes acmCardIn {
  from { opacity: 0; transform: translateY(20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.acm-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-ink-100);
}
:where(.dark) .acm-header { border-bottom-color: var(--color-ink-700); }
.acm-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(229,148,26,.12);
  color: var(--color-brand-amber-600);
  flex-shrink: 0;
}
:where(.dark) .acm-header-icon { color: var(--color-brand-amber-400); }
.acm-header-icon .mdi { font-size: 22px; }
.acm-header-text { flex: 1; min-width: 0; }
.acm-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-ink-900);
  margin: 0;
}
:where(.dark) .acm-title { color: var(--color-ink-100); }
.acm-subtitle {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--color-ink-500);
  line-height: 1.4;
}
:where(.dark) .acm-subtitle { color: var(--color-ink-400); }
.acm-close {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  background: transparent;
  color: var(--color-ink-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s, color .15s;
}
.acm-close:hover {
  background: var(--color-ink-100);
  color: var(--color-ink-700);
}
:where(.dark) .acm-close:hover { background: var(--color-ink-700); color: var(--color-ink-100); }
.acm-close .mdi { font-size: 18px; }

.acm-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.acm-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.acm-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--color-ink-400);
  pointer-events: none;
}
.acm-input {
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  border: 1.5px solid var(--color-ink-200);
  background: var(--color-white);
  padding: 0 14px 0 38px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--color-ink-900);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
:where(.dark) .acm-input {
  background: rgba(23,32,42,.60);
  border-color: var(--color-ink-700);
  color: var(--color-ink-100);
}
.acm-input:focus {
  border-color: var(--color-ink-900);
  box-shadow: 0 0 0 3px rgba(15,23,42,.10);
}
:where(.dark) .acm-input:focus {
  border-color: var(--color-ink-100);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}
.acm-input::placeholder {
  color: var(--color-ink-400);
  font-family: var(--font-sans);
}

.acm-or {
  position: relative;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-ink-400);
  margin: 2px 0;
}
.acm-or::before, .acm-or::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 28px);
  height: 1px;
  background: var(--color-ink-100);
}
.acm-or::before { left: 0; }
.acm-or::after  { right: 0; }
:where(.dark) .acm-or::before, :where(.dark) .acm-or::after { background: var(--color-ink-700); }
.acm-or span { background: var(--color-white); padding: 0 8px; }
:where(.dark) .acm-or span { background: var(--color-ink-800); }

.acm-camera-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--color-ink-200);
  background: var(--color-white);
  color: var(--color-ink-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
:where(.dark) .acm-camera-btn {
  background: var(--color-ink-800);
  border-color: var(--color-ink-700);
  color: var(--color-ink-200);
}
.acm-camera-btn:hover {
  background: var(--color-ink-50);
  border-color: var(--color-ink-300);
  color: var(--color-ink-900);
}
:where(.dark) .acm-camera-btn:hover {
  background: var(--color-ink-700);
  color: var(--color-ink-100);
}
.acm-camera-btn .mdi {
  font-size: 18px;
  color: var(--color-brand-sky-500);
}

.acm-footer {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-ink-100);
  background: var(--color-ink-50);
}
:where(.dark) .acm-footer {
  border-top-color: var(--color-ink-700);
  background: rgba(23,32,42,.40);
}
.acm-cancel,
.acm-apply {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
  border: 1px solid transparent;
}
.acm-cancel {
  background: transparent;
  color: var(--color-ink-700);
  border-color: var(--color-ink-200);
}
:where(.dark) .acm-cancel { color: var(--color-ink-200); border-color: var(--color-ink-700); }
.acm-cancel:hover { background: var(--color-ink-100); }
:where(.dark) .acm-cancel:hover { background: var(--color-ink-700); }
.acm-apply {
  background: var(--color-ink-900);
  color: var(--color-white);
  border-color: var(--color-ink-900);
  flex: 2;
}
:where(.dark) .acm-apply {
  background: var(--color-ink-100);
  color: var(--color-ink-900);
  border-color: var(--color-ink-100);
}
.acm-apply:hover {
  background: var(--color-brand-rose-500);
  border-color: var(--color-brand-rose-500);
}
.acm-apply:disabled { opacity: .65; cursor: progress; }
.acm-apply .mdi { font-size: 16px; }

@media (max-width: 480px) {
  .acm-backdrop { align-items: flex-end; padding: 0; }
  .acm-card { max-width: 100%; border-radius: 16px 16px 0 0; }
  .acm-card::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-ink-200);
    margin: 6px auto 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .acm-backdrop, .acm-card { animation: none !important; }
}


/* v32 — recolor access-code-open-btn to sky-tinted outline */
.access-code-open-btn {
  background: rgba(54,144,212,.08) !important;
  border: 1px solid rgba(54,144,212,.30) !important;
  color: var(--color-brand-sky-600) !important;
}
:where(.dark) .access-code-open-btn {
  background: rgba(54,144,212,.12) !important;
  border-color: rgba(54,144,212,.35) !important;
  color: var(--color-brand-sky-400) !important;
}
.access-code-open-btn:hover {
  background: var(--color-brand-sky-500) !important;
  border-color: var(--color-brand-sky-500) !important;
  color: var(--color-white) !important;
  box-shadow: 0 4px 12px rgba(54,144,212,.30) !important;
}
:where(.dark) .access-code-open-btn:hover {
  background: var(--color-brand-sky-500) !important;
  color: var(--color-white) !important;
}
.access-code-open-btn .mdi {
  color: var(--color-brand-sky-500) !important;
}
.access-code-open-btn:hover .mdi {
  color: var(--color-white) !important;
}


/* v33 — push time + action all the way right on candidate cards */
.candidate-card-row-top .candidate-card-ip {
  flex: 0 1 auto !important;  /* don't grow — leave room for margin-left:auto on time */
  min-width: 0 !important;
}
.candidate-card-row-top .candidate-card-grow { display: none !important; }
.candidate-card-row-top .candidate-card-time {
  margin-left: auto !important;
  flex-shrink: 0 !important;
}
.candidate-card-row-top .candidate-card-detail-btn {
  flex-shrink: 0 !important;
}
.candidate-card > .candidate-card-actions {
  justify-self: end !important;
  align-self: center !important;
}


/* v34 — actually flush time + action right (drop min-width on actions cell) */
.candidate-card > .candidate-card-actions {
  min-width: 0 !important;
  justify-self: end !important;
  align-self: center !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
  flex-shrink: 0;
}
.candidate-card > .candidate-card-actions > div {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}
.candidate-card-row-top {
  padding-right: 2px;
}


/* v35 — integrated camera scanner inside accessCodeModal */
.acm-card { transition: max-width .2s ease-out; }
.acm-card[data-acm-mode="camera"] { max-width: 480px; }

/* Camera body */
.acm-body.acm-mode-camera {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}
.acm-camera-view {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.acm-camera-view > video,
.acm-camera-view > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.acm-camera-view > #accessOcrStill[hidden] { display: none !important; }
.acm-camera-view > #accessOcrStill {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #000;
}

.acm-camera-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-ink-500);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  text-align: center;
}
:where(.dark) .acm-camera-status {
  background: rgba(43,54,71,.30);
  border-color: var(--color-ink-700);
  color: var(--color-ink-300);
}
.acm-camera-status.is-ok    { color: var(--color-bamboo-600); border-color: rgba(0,168,59,.25); background: rgba(0,168,59,.06); }
.acm-camera-status.is-error { color: var(--color-brand-rose-600); border-color: rgba(226,69,80,.25); background: rgba(226,69,80,.06); }

/* Footer rows for each mode */
.acm-footer { padding: 0 !important; background: transparent !important; border: 0 !important; }
.acm-footer-row {
  display: flex;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--color-ink-100);
  background: var(--color-ink-50);
}
:where(.dark) .acm-footer-row {
  border-top-color: var(--color-ink-700);
  background: rgba(23,32,42,.40);
}
.acm-footer-row[hidden] { display: none !important; }

/* Subtitle swapping */
.acm-subtitle-input[hidden],
.acm-subtitle-camera[hidden] { display: none !important; }

@media (max-width: 480px) {
  .acm-camera-view { aspect-ratio: 3 / 4; }
}


/* v36 — clean up camera-mode footer buttons (consistent height, balanced widths) */
.acm-footer-row.acm-mode-camera {
  gap: 10px !important;
  align-items: stretch !important;
}
.acm-footer-row.acm-mode-camera > .acm-cancel,
.acm-footer-row.acm-mode-camera > .acm-apply {
  flex: 1 1 auto !important;
  height: 44px !important;
  min-width: 0;
  font-size: 13px !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
.acm-footer-row.acm-mode-camera > .acm-cancel {
  flex-grow: 1;
}
.acm-footer-row.acm-mode-camera > .acm-apply {
  flex-grow: 2;  /* primary slightly wider */
}
.acm-footer-row.acm-mode-camera > .acm-cancel .mdi,
.acm-footer-row.acm-mode-camera > .acm-apply .mdi {
  font-size: 16px !important;
  line-height: 1;
}


/* v37 — footer-row must fill the footer width (was sizing to content) */
.acm-footer { display: block !important; }
.acm-footer-row {
  width: 100% !important;
  box-sizing: border-box;
  align-items: stretch;
}
.acm-footer-row > .acm-cancel,
.acm-footer-row > .acm-apply {
  flex: 1 1 0 !important;  /* equal share by default */
  min-width: 0;
}
.acm-footer-row > .acm-apply {
  flex-grow: 2 !important;  /* primary slightly wider */
}


/* v38 — mobile: put Scan + Access-code side-by-side as rectangular buttons */
@media (max-width: 640px) {
  .discovery-setup {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .discovery-network-row,
  .discovery-setup-access {
    flex: 1 1 0 !important;
    width: auto !important;
    display: flex !important;
  }
  .scan-cta, #btnScan,
  .access-code-open-btn {
    width: 100% !important;
    height: 48px !important;
    border-radius: 12px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.06);
    transition: transform .12s, box-shadow .15s, background-color .15s;
  }
  .scan-cta:active, #btnScan:active,
  .access-code-open-btn:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(15,23,42,.10);
  }
  .scan-cta .mdi, #btnScan .mdi,
  .access-code-open-btn .mdi {
    font-size: 18px !important;
    line-height: 1;
  }
  /* hide CIDR chip text on mobile (visible in title tooltip) */
  #btnScan .scan-cidr-chip {
    display: none !important;
  }
  /* slightly stronger shadow on the primary red scan button */
  .scan-cta, #btnScan {
    box-shadow: 0 4px 12px rgba(226,69,80,.25) !important;
  }
  .scan-cta:active, #btnScan:active {
    box-shadow: 0 2px 6px rgba(226,69,80,.20) !important;
  }
}


/* ============================================================== */
/*   v39 — redesigned Scan + Access-code buttons                   */
/*   - rectangular (12px radius)                                    */
/*   - 2-line: title + subline                                      */
/*   - Scan: rose gradient with rectangular pulse                   */
/*   - Code: dark slate with sky accent                             */
/*   - bigger / fills available width                               */
/* ============================================================== */

/* --- Scan button --- */
.scan-cta {
  /* reset legacy utility classes */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 60px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f17886 0%, #e24550 50%, #c9384a 100%) !important;
  color: #fff !important;
  border: 0 !important;
  cursor: pointer;
  text-align: center;
  letter-spacing: -.005em;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 14px rgba(226,69,80,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.scan-cta:hover {
  filter: brightness(1.04);
  box-shadow:
    0 6px 18px rgba(226,69,80,.42),
    inset 0 1px 0 rgba(255,255,255,.20);
}
.scan-cta:active {
  transform: translateY(1px);
  box-shadow:
    0 2px 8px rgba(226,69,80,.30),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.scan-cta-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
}
.scan-cta-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  opacity: .85;
  line-height: 1.1;
}

/* Pulse glow — rectangular now (was round) */
.scan-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 16px;  /* matches button radius + inset offset */
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(226,69,80,.45);
  animation: scanCtaPulseRect 2.6s ease-out infinite;
}
@keyframes scanCtaPulseRect {
  0%   { box-shadow: 0 0 0 0  rgba(226,69,80,.50); }
  60%  { box-shadow: 0 0 0 16px rgba(226,69,80,0); }
  100% { box-shadow: 0 0 0 0  rgba(226,69,80,0); }
}
.scan-cta:disabled::after, .scan-cta[disabled]::after { animation: none; }

/* --- Access code button --- */
.access-code-open-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 100%;
  height: 60px !important;
  padding: 8px 14px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #2b3647 0%, #1e2a38 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(54,144,212,.30) !important;
  cursor: pointer;
  text-align: center;
  letter-spacing: -.005em;
  box-shadow:
    0 4px 14px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
}
.access-code-open-btn:hover {
  background: linear-gradient(135deg, #3a4658 0%, #283645 100%) !important;
  border-color: rgba(101,169,223,.55) !important;
  box-shadow:
    0 6px 18px rgba(15,23,42,.30),
    0 0 0 3px rgba(54,144,212,.12),
    inset 0 1px 0 rgba(255,255,255,.07);
}
.access-code-open-btn:active {
  transform: translateY(1px);
}
.acm-open-title {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  color: #fff;
}
.acm-open-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--color-brand-sky-400);
  line-height: 1.1;
}

/* --- mobile: bigger, less outer padding so they fill width --- */
@media (max-width: 640px) {
  .scanner-hero > div.px-5 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .discovery-setup {
    padding: 4px !important;
    gap: 8px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .scan-cta, .access-code-open-btn {
    height: 64px !important;
  }
  .scan-cta-title, .acm-open-title { font-size: 16px !important; }
  .scan-cta-sub, .acm-open-sub { font-size: 11.5px !important; }
}

/* dark theme: tweak access-code button so it stays distinct */
:where(.dark) .access-code-open-btn {
  background: linear-gradient(135deg, #1e2a38 0%, #11171f 100%) !important;
  border-color: rgba(101,169,223,.40) !important;
}
:where(.dark) .access-code-open-btn:hover {
  background: linear-gradient(135deg, #2b3647 0%, #1e2a38 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
  .scan-cta::after { animation: none !important; }
}


/* v40 — smaller radius + identical height for both buttons */
.scan-cta,
.access-code-open-btn {
  border-radius: 8px !important;
  height: 60px !important;
  box-sizing: border-box !important;
}
.scan-cta::after {
  border-radius: 10px !important;  /* tracks button radius + 2px inset */
}

@media (max-width: 640px) {
  .scan-cta,
  .access-code-open-btn {
    height: 64px !important;
    border-radius: 8px !important;
  }
  .scan-cta::after {
    border-radius: 10px !important;
  }
}


/* v41 — force identical button heights (lock min/max + parent align) */
.discovery-setup {
  align-items: stretch !important;
}
.discovery-network-row,
.discovery-setup-access {
  display: flex !important;
  align-items: stretch !important;
}
.discovery-network-row > .scan-cta,
.discovery-setup-access > .access-code-open-btn {
  flex: 1 1 auto !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  .discovery-network-row > .scan-cta,
  .discovery-setup-access > .access-code-open-btn {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
  }
}


/* v42 — desktop 50/50 width + lock radius identically */
.discovery-network-row,
.discovery-setup-access {
  flex: 1 1 0 !important;   /* equal share on ALL viewports */
  min-width: 0 !important;
  width: auto !important;
}
.discovery-network-row > .scan-cta,
.discovery-setup-access > .access-code-open-btn {
  border-radius: 8px !important;
  width: 100% !important;
}
.scan-cta::after {
  border-radius: 10px !important;
}


/* v43 — force identical heights on modal footer buttons */
.acm-footer-row {
  align-items: center !important;
}
.acm-footer-row > .acm-cancel,
.acm-footer-row > .acm-apply {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  flex: 1 1 0 !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 13px !important;
}
.acm-footer-row > .acm-apply { flex-grow: 2 !important; }


/* ============================================================== */
/*   v44 — "Floating glass tiles" for Scan + Access-code           */
/*   White card · colored glow · left accent bar · bold text       */
/* ============================================================== */

.scan-cta,
.access-code-open-btn {
  /* unified base */
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center;
  gap: 2px;
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 16px 0 22px !important;
  border-radius: 10px !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-ink-100) !important;
  text-align: left !important;
  cursor: pointer;
  overflow: visible !important;
  transition: transform .15s, box-shadow .2s, border-color .15s;
  font-family: var(--font-sans);
}
:where(.dark) .scan-cta,
:where(.dark) .access-code-open-btn {
  background: var(--color-ink-800) !important;
  border-color: var(--color-ink-700) !important;
}

/* left accent bar */
.scan-cta::before,
.access-code-open-btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.scan-cta::before          { background: var(--color-brand-rose-500); }
.access-code-open-btn::before { background: var(--color-brand-sky-500); }

/* Scan tile */
.scan-cta {
  color: var(--color-brand-rose-600) !important;
  box-shadow:
    0 6px 20px rgba(226,69,80,.12),
    0 1px 2px rgba(15,23,42,.04);
}
:where(.dark) .scan-cta {
  color: var(--color-brand-rose-400) !important;
  box-shadow:
    0 6px 20px rgba(226,69,80,.18),
    0 1px 2px rgba(0,0,0,.30);
}
.scan-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(226,69,80,.40) !important;
  box-shadow:
    0 10px 28px rgba(226,69,80,.20),
    0 2px 4px rgba(15,23,42,.06);
}
:where(.dark) .scan-cta:hover {
  border-color: rgba(226,69,80,.50) !important;
  box-shadow:
    0 10px 28px rgba(226,69,80,.30),
    0 2px 4px rgba(0,0,0,.40);
}
.scan-cta:active { transform: translateY(0); }

/* Code tile */
.access-code-open-btn {
  color: var(--color-brand-sky-600) !important;
  box-shadow:
    0 6px 20px rgba(54,144,212,.12),
    0 1px 2px rgba(15,23,42,.04);
}
:where(.dark) .access-code-open-btn {
  color: var(--color-brand-sky-400) !important;
  box-shadow:
    0 6px 20px rgba(54,144,212,.18),
    0 1px 2px rgba(0,0,0,.30);
}
.access-code-open-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(54,144,212,.40) !important;
  box-shadow:
    0 10px 28px rgba(54,144,212,.22),
    0 2px 4px rgba(15,23,42,.06);
}
:where(.dark) .access-code-open-btn:hover {
  border-color: rgba(54,144,212,.50) !important;
  box-shadow:
    0 10px 28px rgba(54,144,212,.32),
    0 2px 4px rgba(0,0,0,.40);
}

/* Titles */
.scan-cta-title,
.acm-open-title {
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
}

/* Sublines */
.scan-cta-sub,
.acm-open-sub {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
  opacity: .70 !important;
}

/* Override: kill the round red pulse — replace with a subtle "live dot" on the accent bar */
.scan-cta::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 3px;
  height: 8px;
  border-radius: 0 3px 3px 0;
  background: var(--color-brand-rose-500);
  animation: scanLivePulse 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scanLivePulse {
  0%, 100% { opacity: 1;   transform: scaleY(1); }
  50%      { opacity: .35; transform: scaleY(.4); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-cta::after { animation: none !important; }
}

/* ================================================================== */
/*   v45 — "Twin tinted glass cards" — Scan + Access-code            */
/*   Harmonized pair · soft tinted gradient · status LED             */
/* ================================================================== */

/* ── kill all conflicting old rules ── */
.scan-cta::after { content: none !important; animation: none !important; }
.scan-cta::before,
.access-code-open-btn::before { content: none !important; }

/* ── shared base ── */
.scan-cta,
.access-code-open-btn {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 100% !important;
  height: 60px !important;
  min-height: 60px !important;
  max-height: 60px !important;
  padding: 0 18px !important;
  border-radius: 12px !important;
  text-align: left !important;
  cursor: pointer !important;
  overflow: hidden !important;
  font-family: var(--font-sans) !important;
  letter-spacing: -.01em !important;
  transition:
    transform .18s cubic-bezier(.4,0,.2,1),
    box-shadow .25s cubic-bezier(.4,0,.2,1),
    border-color .15s ease,
    background .2s ease !important;
}

/* ── soft inner top highlight (gives depth) ── */
.scan-cta::after,
.access-code-open-btn::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Scan tile (rose) ── */
.scan-cta {
  background: linear-gradient(180deg, #fff5f6 0%, #ffe7eb 100%) !important;
  border: 1.5px solid #fecdd3 !important;
  color: #9f1239 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 6px 18px rgba(244,63,94,.10),
    inset 0 0 0 1px rgba(255,255,255,.40) !important;
}
:where(.dark) .scan-cta {
  background: linear-gradient(180deg, rgba(244,63,94,.10) 0%, rgba(225,29,72,.18) 100%) !important;
  border-color: rgba(244,63,94,.35) !important;
  color: #fda4af !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    0 6px 18px rgba(244,63,94,.18) !important;
}
.scan-cta:hover {
  transform: translateY(-1.5px) !important;
  border-color: #fb7185 !important;
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 12px 28px rgba(244,63,94,.22),
    inset 0 0 0 1px rgba(255,255,255,.50) !important;
}
:where(.dark) .scan-cta:hover {
  border-color: rgba(244,63,94,.55) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.40),
    0 12px 28px rgba(244,63,94,.32) !important;
}
.scan-cta:active { transform: translateY(0) !important; }

/* ── Code tile (sky) ── */
.access-code-open-btn {
  background: linear-gradient(180deg, #f0faff 0%, #d9f1ff 100%) !important;
  border: 1.5px solid #bae6fd !important;
  color: #075985 !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 6px 18px rgba(54,144,212,.10),
    inset 0 0 0 1px rgba(255,255,255,.40) !important;
}
:where(.dark) .access-code-open-btn {
  background: linear-gradient(180deg, rgba(56,189,248,.08) 0%, rgba(14,165,233,.18) 100%) !important;
  border-color: rgba(56,189,248,.35) !important;
  color: #7dd3fc !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,.30),
    0 6px 18px rgba(54,144,212,.18) !important;
}
.access-code-open-btn:hover {
  transform: translateY(-1.5px) !important;
  border-color: #38bdf8 !important;
  box-shadow:
    0 2px 4px rgba(15,23,42,.06),
    0 12px 28px rgba(54,144,212,.22),
    inset 0 0 0 1px rgba(255,255,255,.50) !important;
}
:where(.dark) .access-code-open-btn:hover {
  border-color: rgba(56,189,248,.55) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,.40),
    0 12px 28px rgba(54,144,212,.32) !important;
}
.access-code-open-btn:active { transform: translateY(0) !important; }

/* ── status LED (top-right corner) ── */
.scan-cta-title,
.acm-open-title {
  position: relative;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -.01em !important;
  color: inherit !important;
  z-index: 2;
}

.scan-cta-sub,
.acm-open-sub {
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  line-height: 1.1 !important;
  opacity: .72 !important;
  color: inherit !important;
  z-index: 2;
  position: relative;
}

/* ── pulsing LED dot in top-right (only on Scan, signaling "ready") ── */
.scan-cta {
  /* extra padding-right to leave room for LED */
  padding-right: 26px !important;
}
.scan-cta-title::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f43f5e;
  box-shadow:
    0 0 0 0 rgba(244,63,94,.55),
    0 0 6px rgba(244,63,94,.65);
  animation: scanLedPulse 1.8s ease-in-out infinite;
}
@keyframes scanLedPulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(244,63,94,.55),
      0 0 6px rgba(244,63,94,.65);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 0 5px rgba(244,63,94,0),
      0 0 9px rgba(244,63,94,.85);
    transform: scale(1.15);
  }
}

/* code button — small static "key" icon-glyph dot */
.access-code-open-btn { padding-right: 26px !important; }
.acm-open-title::after {
  content: "";
  position: absolute;
  top: -6px;
  right: -14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38bdf8;
  box-shadow: 0 0 6px rgba(56,189,248,.55);
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .scan-cta-title::after { animation: none !important; }
}

/* mobile sizing */
@media (max-width: 640px) {
  .scan-cta, .access-code-open-btn {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding: 0 14px 0 14px !important;
    padding-right: 22px !important;
  }
  .scan-cta-title, .acm-open-title { font-size: 15px !important; }
  .scan-cta-sub, .acm-open-sub { font-size: 11px !important; }
}

/* ============================================================== */
/*   v46 — MOBILE: Hero Scan + Code icon-chip (asymmetric pair)   */
/*   Big primary scan CTA + compact 56px square code icon         */
/* ============================================================== */

@media (max-width: 640px) {
  /* Layout: Scan grows, Code is fixed 56px square */
  .discovery-setup {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 4px !important;
    background: transparent !important;
    border: 0 !important;
  }
  .discovery-network-row {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  .discovery-setup-access {
    flex: 0 0 56px !important;
    width: 56px !important;
    min-width: 56px !important;
  }

  /* === Scan — HERO primary CTA (filled rose gradient) === */
  .scan-cta {
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 18px 0 22px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%) !important;
    border: 1px solid #be123c !important;
    color: #fff !important;
    overflow: hidden !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      inset 0 -1px 0 rgba(0,0,0,.10),
      0 6px 20px rgba(244,63,94,.38),
      0 1px 2px rgba(15,23,42,.10) !important;
  }
  :where(.dark) .scan-cta {
    background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%) !important;
    border-color: rgba(244,63,94,.55) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 6px 20px rgba(244,63,94,.45),
      0 1px 2px rgba(0,0,0,.30) !important;
  }
  .scan-cta:active {
    transform: translateY(1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.22),
      0 3px 10px rgba(244,63,94,.30) !important;
  }

  /* radar sweep — emanating rings from left edge */
  .scan-cta::before {
    content: "" !important;
    position: absolute !important;
    left: 8px !important;
    top: 50% !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 65%) !important;
    transform: translateY(-50%) scale(.4) !important;
    animation: scanRadarMobile 2.4s ease-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  @keyframes scanRadarMobile {
    0%   { transform: translateY(-50%) scale(.3); opacity: .9; }
    100% { transform: translateY(-50%) scale(2.6); opacity: 0; }
  }

  /* shimmer sweep (replaces the inner top-highlight ::after) */
  .scan-cta::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    height: auto !important;
    background: linear-gradient(110deg,
      transparent 35%,
      rgba(255,255,255,.20) 50%,
      transparent 65%) !important;
    transform: translateX(-110%) !important;
    animation: scanShimmerMobile 5s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: inherit !important;
  }
  @keyframes scanShimmerMobile {
    0%   { transform: translateX(-110%); }
    55%  { transform: translateX(110%); }
    100% { transform: translateX(110%); }
  }

  /* Scan text — bold white over the gradient */
  .scan-cta-title {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.18) !important;
    z-index: 2 !important;
    position: relative !important;
  }
  .scan-cta-sub {
    color: rgba(255,255,255,.88) !important;
    font-family: var(--font-mono) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    line-height: 1.1 !important;
    z-index: 2 !important;
    position: relative !important;
  }
  /* hide the LED dot on title — radar pulse already signals "live" */
  .scan-cta-title::after { display: none !important; }

  /* === Code — compact 56×72 icon square === */
  .access-code-open-btn {
    width: 56px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    background: var(--color-white) !important;
    border: 1.5px solid #bae6fd !important;
    color: #0369a1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    overflow: hidden !important;
    box-shadow:
      0 1px 2px rgba(15,23,42,.04),
      0 6px 16px rgba(54,144,212,.14),
      inset 0 1px 0 rgba(255,255,255,.60) !important;
  }
  :where(.dark) .access-code-open-btn {
    background: linear-gradient(180deg, rgba(56,189,248,.10) 0%, rgba(14,165,233,.18) 100%) !important;
    border-color: rgba(56,189,248,.40) !important;
    color: #7dd3fc !important;
  }
  .access-code-open-btn:active {
    transform: translateY(1px) !important;
    background: #f0f9ff !important;
  }
  :where(.dark) .access-code-open-btn:active {
    background: rgba(56,189,248,.16) !important;
  }

  /* hide existing title/sub texts and LED dot */
  .acm-open-title,
  .acm-open-sub { display: none !important; }

  /* render a key icon via ::before */
  .access-code-open-btn::before {
    content: "" !important;
    position: static !important;
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='15' r='4'/><path d='M11.83 12.17 21 3'/><path d='m17 7 3 3'/><path d='m14 10 3 3'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
  }
  :where(.dark) .access-code-open-btn::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237dd3fc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='15' r='4'/><path d='M11.83 12.17 21 3'/><path d='m17 7 3 3'/><path d='m14 10 3 3'/></svg>") !important;
  }

  /* tiny "Код" label under icon, replaces hidden title */
  .access-code-open-btn::after {
    content: "Код" !important;
    position: static !important;
    display: block !important;
    inset: auto !important;
    height: auto !important;
    background: none !important;
    font-family: var(--font-sans) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    color: #0369a1 !important;
    text-transform: uppercase !important;
    z-index: 2 !important;
  }
  :where(.dark) .access-code-open-btn::after { color: #7dd3fc !important; }

  @media (prefers-reduced-motion: reduce) {
    .scan-cta::before,
    .scan-cta::after { animation: none !important; }
  }
}

/* ============================================================== */
/*   v47 — Mobile Tech Refit (Phase 1)                            */
/*   • Status-strip → 3×2 mono grid (no scroll)                   */
/*   • Scan → dark ink + Bambu-green accent (less glaring)        */
/*   • Mobile nav → fixed bottom tab bar                          */
/* ============================================================== */

@media (max-width: 640px) {

  /* ───── 1) Status strip → 3-col grid (auto-wraps to 2 rows) ─── */
  .status-strip { overflow: visible !important; }
  .status-strip-inner {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
    padding: 4px !important;
    overflow-x: visible !important;
    align-items: stretch !important;
  }
  /* hide the pulse + kbd-help corner on mobile */
  .status-strip-inner > .status-pulse,
  .status-strip-inner > .ml-auto { display: none !important; }
  /* unhide the previously-`hidden sm:inline-flex` stats so 2nd row fills */
  .status-strip-inner > .status-stat.hidden {
    display: inline-flex !important;
  }
  /* tile each stat */
  .status-strip-inner > .status-stat {
    flex: unset !important;
    min-width: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 9px 6px !important;
    background: var(--color-ink-50) !important;
    border: 1px solid var(--color-ink-100) !important;
    border-radius: 8px !important;
    font-family: var(--font-mono) !important;
  }
  :where(.dark) .status-strip-inner > .status-stat {
    background: rgba(255,255,255,.03) !important;
    border-color: var(--color-ink-700) !important;
  }

  /* ───── 2) Scan CTA → dark + Bambu-green ────────────────────── */
  .scan-cta {
    background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
    border: 1px solid #374151 !important;
    color: #fff !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 4px 18px rgba(0,0,0,.22),
      0 1px 2px rgba(0,0,0,.10) !important;
  }
  :where(.dark) .scan-cta {
    background: linear-gradient(135deg, #0f172a 0%, #050810 100%) !important;
    border-color: #1f2937 !important;
  }
  .scan-cta:active {
    transform: translateY(1px) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 2px 8px rgba(0,0,0,.18) !important;
  }
  /* Bambu-green radar pulse — replaces the rose one */
  .scan-cta::before {
    background: radial-gradient(circle, rgba(0,174,66,.40) 0%, rgba(0,174,66,0) 65%) !important;
    animation: scanRadarBambu 2.6s ease-out infinite !important;
  }
  @keyframes scanRadarBambu {
    0%   { transform: translateY(-50%) scale(.3); opacity: .9; }
    100% { transform: translateY(-50%) scale(2.6); opacity: 0; }
  }
  /* shimmer becomes very faint (less glare) */
  .scan-cta::after {
    background: linear-gradient(110deg,
      transparent 40%,
      rgba(255,255,255,.10) 50%,
      transparent 60%) !important;
  }
  .scan-cta-title {
    color: #fff !important;
    text-shadow: none !important;
    font-size: 17px !important;
  }
  .scan-cta-sub {
    color: #00ae42 !important;   /* bambu-green subnet */
    opacity: 1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
  }
  /* tiny green LED dot top-right corner */
  .scan-cta {
    padding-right: 28px !important;
  }
  .scan-cta-title::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -6px !important;
    right: -16px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: #00ae42 !important;
    box-shadow:
      0 0 0 0 rgba(0,174,66,.55),
      0 0 8px rgba(0,174,66,.85) !important;
    animation: scanLedBambu 1.8s ease-in-out infinite !important;
  }
  @keyframes scanLedBambu {
    0%, 100% {
      box-shadow:
        0 0 0 0 rgba(0,174,66,.55),
        0 0 8px rgba(0,174,66,.85);
      transform: scale(1);
    }
    50% {
      box-shadow:
        0 0 0 6px rgba(0,174,66,0),
        0 0 12px rgba(0,174,66,.95);
      transform: scale(1.18);
    }
  }

  /* ───── 3) Mobile bottom tab bar ────────────────────────────── */
  header > nav.md\:hidden {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 50 !important;
    background: rgba(255,255,255,.96) !important;
    backdrop-filter: saturate(180%) blur(14px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
    border-top: 1px solid var(--color-ink-100) !important;
    border-bottom: 0 !important;
    box-shadow: 0 -6px 18px rgba(15,23,42,.06) !important;
    padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
    gap: 0 !important;
    justify-content: space-around !important;
    overflow: visible !important;
  }
  :where(.dark) header > nav.md\:hidden {
    background: rgba(11,16,24,.92) !important;
    border-color: var(--color-ink-700) !important;
    box-shadow: 0 -6px 18px rgba(0,0,0,.40) !important;
  }
  /* nav-pill → vertical icon + label */
  header > nav.md\:hidden .nav-pill {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--color-ink-500) !important;
    transition: color .15s, background .15s !important;
    position: relative !important;
  }
  :where(.dark) header > nav.md\:hidden .nav-pill {
    color: var(--color-ink-400) !important;
  }
  header > nav.md\:hidden .nav-pill i {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 0 1px 0 !important;
  }
  header > nav.md\:hidden .nav-pill.is-active {
    color: #00ae42 !important;
    background: rgba(0,174,66,.08) !important;
  }
  :where(.dark) header > nav.md\:hidden .nav-pill.is-active {
    color: #34d171 !important;
    background: rgba(0,174,66,.14) !important;
  }
  /* badge — small dot in top-right of icon */
  header > nav.md\:hidden .nav-pill .tab-badge {
    position: absolute !important;
    top: 4px !important;
    right: 22% !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    background: var(--color-brand-rose-500) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 16px !important;
    text-align: center !important;
  }

  /* clearance for fixed bottom bar */
  main { padding-bottom: 76px !important; }
}

/* ============================================================== */
/*   v48 — Console Panel + Status Grid v2 + bigger Tabs + Filter  */
/*   labels (mobile)                                              */
/* ============================================================== */

/* ───── Console Panel (replaces twin-button row) ─────────────── */
.console-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 14px !important;
  background: var(--color-white) !important;
  border: 1px solid var(--color-ink-100) !important;
  border-radius: 14px !important;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    inset 0 1px 0 rgba(255,255,255,.60);
}
:where(.dark) .console-panel {
  background: rgba(255,255,255,.02) !important;
  border-color: var(--color-ink-700) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* head row: label left + Code link right */
.console-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}
.console-panel-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-ink-400);
}
.console-panel-label i {
  font-size: 14px;
  line-height: 1;
  color: #00ae42;
}
:where(.dark) .console-panel-label { color: var(--color-ink-500); }

/* Code link — pill-style inline, NOT a card anymore */
.console-panel .access-code-open-btn {
  width: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border-radius: 8px !important;
  background: var(--color-ink-50) !important;
  border: 1px solid var(--color-ink-100) !important;
  color: var(--color-ink-600) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s !important;
  overflow: visible !important;
}
.console-panel .access-code-open-btn i {
  font-size: 14px !important;
  line-height: 1 !important;
  color: var(--color-ink-500) !important;
}
.console-panel .access-code-open-btn:hover {
  background: var(--color-ink-100) !important;
  border-color: var(--color-ink-200) !important;
  color: var(--color-ink-900) !important;
  transform: none !important;
}
:where(.dark) .console-panel .access-code-open-btn {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--color-ink-700) !important;
  color: var(--color-ink-300) !important;
}
:where(.dark) .console-panel .access-code-open-btn i { color: var(--color-ink-400) !important; }
:where(.dark) .console-panel .access-code-open-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--color-ink-600) !important;
  color: var(--color-ink-100) !important;
}
.console-panel .access-code-open-btn .acm-open-title {
  display: inline !important;
  position: static !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: inherit !important;
  z-index: auto !important;
}
.console-panel .access-code-open-btn .acm-open-title::after { display: none !important; }
.console-panel .access-code-open-btn::before,
.console-panel .access-code-open-btn::after { content: none !important; display: none !important; }

/* subnet row (mono IP, big and clear) */
.console-panel-subnet {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-ink-50);
  border: 1px solid var(--color-ink-100);
  border-radius: 8px;
}
:where(.dark) .console-panel-subnet {
  background: rgba(255,255,255,.03);
  border-color: var(--color-ink-700);
}
.console-panel-subnet-mono {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--color-ink-900);
}
:where(.dark) .console-panel-subnet-mono { color: var(--color-ink-100); }

/* SCAN button — full-width primary, dark + bambu green */
.console-panel .scan-cta {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
  border: 1px solid #374151 !important;
  color: #fff !important;
  overflow: hidden !important;
  text-align: center !important;
  position: relative !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 16px rgba(0,0,0,.18),
    0 1px 2px rgba(0,0,0,.08) !important;
}
:where(.dark) .console-panel .scan-cta {
  background: linear-gradient(135deg, #0f172a 0%, #050810 100%) !important;
  border-color: #1f2937 !important;
}
.console-panel .scan-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 22px rgba(0,174,66,.18),
    0 1px 2px rgba(0,0,0,.12) !important;
}
.console-panel .scan-cta:active { transform: translateY(0); }

/* radar icon */
.console-panel .scan-cta-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,174,66,.18);
}
.console-panel .scan-cta-icon i {
  font-size: 16px;
  line-height: 1;
  color: #00ae42;
  animation: scanIconSpin 6s linear infinite;
}
@keyframes scanIconSpin {
  to { transform: rotate(360deg); }
}

/* button title */
.console-panel .scan-cta-title {
  position: relative !important;
  z-index: 2 !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* override inherited ::before / ::after — swap to bambu green LED */
.console-panel .scan-cta::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(0,174,66,.28) 0%, rgba(0,174,66,0) 65%) !important;
  transform: translateY(-50%) !important;
  animation: consoleRadar 2.6s ease-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
@keyframes consoleRadar {
  0%   { transform: translateY(-50%) scale(.3); opacity: .9; }
  100% { transform: translateY(-50%) scale(2.2); opacity: 0; }
}
.console-panel .scan-cta::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  background: linear-gradient(110deg,
    transparent 40%,
    rgba(255,255,255,.08) 50%,
    transparent 60%) !important;
  transform: translateX(-110%) !important;
  animation: consoleShimmer 5s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
  border-radius: inherit !important;
}
@keyframes consoleShimmer {
  0%   { transform: translateX(-110%); }
  55%  { transform: translateX(110%); }
  100% { transform: translateX(110%); }
}
/* kill any leftover ::after on title from older versions */
.console-panel .scan-cta-title::after { display: none !important; }

/* ───── Mobile-only refinements ──────────────────────────────── */
@media (max-width: 640px) {
  .console-panel {
    padding: 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
  }
  .console-panel .scan-cta {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    padding-right: 18px !important;
  }
  .console-panel .scan-cta-title { font-size: 14px !important; }
  .console-panel-subnet { padding: 8px 10px !important; }
  .console-panel-subnet-mono { font-size: 13px !important; }
  .console-panel-label { font-size: 10.5px !important; }
}

/* ───── Status pulse: show as 1st tile on mobile ─────────────── */
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    display: inline-flex !important;
    order: -1 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 9px 6px !important;
    background: linear-gradient(180deg, rgba(0,174,66,.06), rgba(0,174,66,.02)) !important;
    border: 1px solid rgba(0,174,66,.20) !important;
    border-radius: 8px !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
  .status-strip-inner > .status-pulse > .status-pulse-dot,
  .status-strip-inner > .status-pulse > .status-pulse-ring {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
  }
  .status-strip-inner > .status-pulse > .status-pulse-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #00ae42 !important;
    box-shadow: 0 0 8px rgba(0,174,66,.85) !important;
  }
  .status-strip-inner > .status-pulse > .status-pulse-ring {
    display: none !important;
  }
  .status-strip-inner > .status-pulse::after {
    content: "OK";
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #00ae42;
  }
}

/* ───── Bigger bottom nav ────────────────────────────────────── */
@media (max-width: 640px) {
  header > nav.md\:hidden {
    padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  header > nav.md\:hidden .nav-pill {
    padding: 8px 4px !important;
    gap: 3px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
  }
  header > nav.md\:hidden .nav-pill i {
    font-size: 26px !important;
    margin: 0 0 2px 0 !important;
  }
  /* clearance bumped for bigger bar */
  main { padding-bottom: 86px !important; }
}

/* ───── Filter pills: show labels on mobile ──────────────────── */
@media (max-width: 640px) {
  /* always show labels (was hidden when not active) */
  .cand-filter .cand-filter-label {
    display: inline !important;
    margin-right: 4px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }
  /* if label is empty (not active), inject from data attribute via tone-aware fallback */
  .cand-filter.tone-bamboo .cand-filter-label:empty::before { content: "OK"; }
  .cand-filter.tone-sky    .cand-filter-label:empty::before { content: "PRINT"; }
  .cand-filter.tone-amber  .cand-filter-label:empty::before { content: "STALE"; }
  .cand-filter.tone-rose   .cand-filter-label:empty::before { content: "ERR"; }
  .cand-filter.tone-violet .cand-filter-label:empty::before { content: "AUTH"; }
  .cand-filter.tone-ink    .cand-filter-label:empty::before { content: "ALL"; }
  /* allow wrap to 2 rows */
  #candidatesFilters,
  #printerStatusFilters {
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .cand-filter {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }
  .cand-filter .tnum {
    font-size: 11px !important;
    font-weight: 700 !important;
  }
}

/* ============================================================== */
/*   v49 — Stacked CTAs (Code + Scan), label fixes, taller nav    */
/* ============================================================== */

/* console-panel becomes a clean 2-row stack of full-width CTAs */
.console-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* === Code-access — secondary, full width === */
.console-panel .access-code-open-btn {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  padding: 0 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border-radius: 8px !important;
  background: var(--color-ink-50) !important;
  border: 1px solid var(--color-ink-100) !important;
  color: var(--color-ink-700) !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s, transform .15s !important;
  overflow: visible !important;
  position: relative !important;
}
:where(.dark) .console-panel .access-code-open-btn {
  background: rgba(255,255,255,.04) !important;
  border-color: var(--color-ink-700) !important;
  color: var(--color-ink-200) !important;
}
.console-panel .access-code-open-btn:hover {
  background: var(--color-ink-100) !important;
  border-color: var(--color-ink-200) !important;
  color: var(--color-ink-900) !important;
  transform: none !important;
}
:where(.dark) .console-panel .access-code-open-btn:hover {
  background: rgba(255,255,255,.08) !important;
  border-color: var(--color-ink-600) !important;
  color: #fff !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(56,144,212,.12);
}
.console-panel .access-code-open-btn .access-code-open-btn-icon i {
  font-size: 14px;
  line-height: 1;
  color: var(--color-brand-sky-600);
}
:where(.dark) .console-panel .access-code-open-btn .access-code-open-btn-icon i {
  color: var(--color-brand-sky-400);
}
.console-panel .access-code-open-btn .acm-open-title {
  display: inline !important;
  position: static !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: inherit !important;
  text-transform: uppercase !important;
}
.console-panel .access-code-open-btn .acm-open-title::after { display: none !important; }
.console-panel .access-code-open-btn::before,
.console-panel .access-code-open-btn::after { content: none !important; display: none !important; }

/* === Scan — primary, smaller corner radius (8px), dark + green === */
.console-panel .scan-cta {
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;          /* smaller per request */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
  border: 1px solid #374151 !important;
  color: #fff !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: center !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 16px rgba(0,0,0,.18) !important;
}
:where(.dark) .console-panel .scan-cta {
  background: linear-gradient(135deg, #0f172a 0%, #050810 100%) !important;
  border-color: #1f2937 !important;
}
.console-panel .scan-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 22px rgba(0,174,66,.18) !important;
}

/* mobile sizing */
@media (max-width: 640px) {
  .console-panel { gap: 8px !important; }
  .console-panel .access-code-open-btn {
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 12.5px !important;
  }
  .console-panel .scan-cta {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-radius: 8px !important;
  }
}

/* ───── Status pulse: "Система" instead of "OK" ──────────────── */
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse::after {
    content: "Система" !important;
    font-family: var(--font-sans) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    color: #00ae42 !important;
    text-transform: none !important;
  }
}

/* ───── Bottom nav: a touch taller ───────────────────────────── */
@media (max-width: 640px) {
  header > nav.md\:hidden {
    padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  header > nav.md\:hidden .nav-pill {
    padding: 10px 4px !important;
    gap: 4px !important;
    font-size: 12.5px !important;
  }
  header > nav.md\:hidden .nav-pill i {
    font-size: 28px !important;
    margin: 0 0 2px 0 !important;
  }
  main { padding-bottom: 96px !important; }
}

/* ============================================================== */
/*   v50 — Bottom nav: bigger height + wider pill padding         */
/* ============================================================== */

@media (max-width: 640px) {
  header > nav.md\:hidden {
    padding: 12px 10px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    gap: 4px !important;
  }
  header > nav.md\:hidden .nav-pill {
    padding: 12px 8px !important;
    gap: 5px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  header > nav.md\:hidden .nav-pill i {
    font-size: 30px !important;
    margin: 0 0 3px 0 !important;
  }
  main { padding-bottom: 108px !important; }
}

/* ============================================================== */
/*   v51 — Bottom nav: bump again                                 */
/* ============================================================== */

@media (max-width: 640px) {
  header > nav.md\:hidden {
    padding: 14px 10px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }
  header > nav.md\:hidden .nav-pill {
    padding: 14px 10px !important;
    gap: 6px !important;
    font-size: 13.5px !important;
  }
  header > nav.md\:hidden .nav-pill i {
    font-size: 32px !important;
    margin: 0 0 3px 0 !important;
  }
  main { padding-bottom: 120px !important; }
}


/* ============================================================== */
/*   v52 — Status tile "Система": tighter gap, smaller font       */
/* ============================================================== */

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    gap: 3px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .status-strip-inner > .status-pulse::after {
    font-size: 11px !important;
  }
}

/* ============================================================== */
/*   v53 — "Система": align dot+text to the left                  */
/* ============================================================== */

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    justify-content: flex-start !important;
    padding-left: 8px !important;
  }
}

/* ============================================================== */
/*   v54 — "Система": shift further left                           */
/* ============================================================== */

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    padding-left: 3px !important;
  }
}

/* ============================================================== */
/*   v55 — "Система" force left-align without media query         */
/* ============================================================== */

.status-strip-inner > .status-pulse {
  justify-content: flex-start !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
  gap: 3px !important;
}
.status-strip-inner > .status-pulse::after {
  content: "Система" !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #00ae42 !important;
  letter-spacing: .02em !important;
}

/* ============================================================== */
/*   v56 — "Система" tile: stretch to full grid column            */
/* ============================================================== */

.status-strip-inner > .status-pulse {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* ============================================================== */
/*   v57 — Make КОД ДОСТУПУ match SCAN style (dark + colored icon)*/
/* ============================================================== */

.console-panel .access-code-open-btn {
  background: linear-gradient(135deg, #1f2937 0%, #0b1220 100%) !important;
  border: 1px solid #374151 !important;
  color: #fff !important;
  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 4px 16px rgba(0,0,0,.18) !important;
}
:where(.dark) .console-panel .access-code-open-btn {
  background: linear-gradient(135deg, #0f172a 0%, #050810 100%) !important;
  border-color: #1f2937 !important;
}
.console-panel .access-code-open-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 6px 22px rgba(56,144,212,.22) !important;
}
/* coloured icon circle (sky-blue tint to differentiate from green Scan) */
.console-panel .access-code-open-btn .access-code-open-btn-icon {
  background: rgba(56,144,212,.18) !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon i {
  color: #38bdf8 !important;
}
.console-panel .access-code-open-btn .acm-open-title {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

/* ============================================================== */
/*   v58 — Mobile scanner polish: system tile, CTAs, filters      */
/* ============================================================== */

.status-strip-inner > .status-pulse {
  justify-content: flex-start !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  gap: 4px !important;
}
.status-strip-inner > .status-pulse::after {
  transform: translateX(-2px);
}

.console-panel {
  gap: 8px !important;
}
.console-panel .access-code-open-btn,
.console-panel .scan-cta {
  border-radius: 8px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  justify-content: center !important;
  gap: 10px !important;
  letter-spacing: .06em !important;
}
.console-panel .access-code-open-btn {
  background:
    linear-gradient(135deg, rgba(25,34,48,.96), rgba(9,16,28,.98)) !important;
  border: 1px solid rgba(101,169,223,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(15,23,42,.14) !important;
}
.console-panel .access-code-open-btn:hover {
  border-color: rgba(101,169,223,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(55,144,212,.18) !important;
}
.console-panel .scan-cta {
  background:
    linear-gradient(135deg, rgba(24,33,47,.98), rgba(8,14,25,.99)) !important;
  border: 1px solid rgba(52,194,106,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 20px rgba(15,23,42,.14) !important;
}
.console-panel .scan-cta:hover {
  border-color: rgba(52,194,106,.38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,168,59,.18) !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon,
.console-panel .scan-cta-icon {
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon {
  background: rgba(55,144,212,.18) !important;
}
.console-panel .scan-cta-icon {
  background: rgba(0,168,59,.18) !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon i,
.console-panel .scan-cta-icon i {
  font-size: 15px !important;
}
.console-panel .access-code-open-btn .acm-open-title,
.console-panel .scan-cta-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
}

#candidatesFilters,
#printerStatusFilters {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
#candidatesFilters .cand-filter,
#printerStatusFilters .cand-filter {
  height: 28px !important;
  min-width: 0 !important;
  padding: 0 9px !important;
  gap: 5px !important;
  border-radius: 999px !important;
  background: color-mix(in oklab, var(--color-ink-100) 82%, white) !important;
  border: 1px solid color-mix(in oklab, var(--color-ink-200) 70%, transparent) !important;
  color: var(--color-ink-700) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}
:where(.dark) #candidatesFilters .cand-filter,
:where(.dark) #printerStatusFilters .cand-filter {
  background: rgba(43,54,71,.58) !important;
  border-color: rgba(96,112,132,.30) !important;
  color: var(--color-ink-200) !important;
}
#candidatesFilters .cand-filter::before,
#printerStatusFilters .cand-filter::before {
  width: 6px !important;
  height: 6px !important;
}
#candidatesFilters .cand-filter-label,
#printerStatusFilters .cand-filter-label {
  display: inline !important;
  max-width: 72px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
}
#candidatesFilters .cand-filter .tnum,
#printerStatusFilters .cand-filter .tnum {
  font-size: 10.5px !important;
  font-weight: 850 !important;
  color: var(--color-ink-500) !important;
}
#candidatesFilters .cand-filter.is-active,
#printerStatusFilters .cand-filter.is-active {
  background: var(--color-ink-900) !important;
  border-color: var(--color-ink-900) !important;
  color: #fff !important;
}
:where(.dark) #candidatesFilters .cand-filter.is-active,
:where(.dark) #printerStatusFilters .cand-filter.is-active {
  background: var(--color-ink-100) !important;
  border-color: var(--color-ink-100) !important;
  color: var(--color-ink-900) !important;
}
#candidatesFilters .cand-filter.is-active .tnum,
#printerStatusFilters .cand-filter.is-active .tnum {
  color: rgba(255,255,255,.68) !important;
}
:where(.dark) #candidatesFilters .cand-filter.is-active .tnum,
:where(.dark) #printerStatusFilters .cand-filter.is-active .tnum {
  color: rgba(23,32,42,.58) !important;
}

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    padding-left: 0 !important;
  }
  .status-strip-inner > .status-pulse::after {
    transform: translateX(-3px);
    font-size: 11px !important;
  }
  .console-panel .access-code-open-btn,
  .console-panel .scan-cta {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
  .console-panel .access-code-open-btn .acm-open-title,
  .console-panel .scan-cta-title {
    font-size: 14px !important;
  }
  #candidatesFilters,
  #printerStatusFilters {
    gap: 4px !important;
  }
  #candidatesFilters .cand-filter,
  #printerStatusFilters .cand-filter {
    height: 27px !important;
    padding: 0 8px !important;
  }
}

/* ============================================================== */
/*   v59 — Obvious CTA variant: secondary code + primary scan     */
/* ============================================================== */

.status-strip-inner > .status-pulse {
  padding-left: 0 !important;
  gap: 0 !important;
}
.status-strip-inner > .status-pulse > .status-pulse-dot {
  margin-left: 0 !important;
  margin-right: 4px !important;
}
.status-strip-inner > .status-pulse::after {
  margin-left: -3px !important;
  transform: translateX(-3px) !important;
}

.console-panel .access-code-open-btn,
.console-panel .scan-cta {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  border-radius: 8px !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

.console-panel .access-code-open-btn {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f8fc 100%) !important;
  border: 1px solid #cfe3f6 !important;
  color: var(--color-ink-900) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 6px 18px rgba(30,111,181,.10) !important;
}
:where(.dark) .console-panel .access-code-open-btn {
  background:
    linear-gradient(180deg, rgba(30,42,56,.98) 0%, rgba(23,32,42,.98) 100%) !important;
  border-color: rgba(101,169,223,.28) !important;
  color: var(--color-ink-100) !important;
}
.console-panel .access-code-open-btn:hover {
  transform: translateY(-1px) !important;
  border-color: #9ccaf0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 22px rgba(30,111,181,.16) !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon {
  width: 26px !important;
  height: 26px !important;
  flex: 0 0 26px !important;
  background: rgba(55,144,212,.14) !important;
}
.console-panel .access-code-open-btn .access-code-open-btn-icon i {
  color: var(--color-brand-sky-600) !important;
}
.console-panel .access-code-open-btn .acm-open-title {
  color: inherit !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .045em !important;
}

.console-panel .scan-cta {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg, #13bd56 0%, #00a83b 48%, #087632 100%) !important;
  border: 1px solid rgba(0,138,59,.48) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 24px rgba(0,168,59,.22),
    0 0 0 1px rgba(255,255,255,.12) !important;
}
:where(.dark) .console-panel .scan-cta {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, #13bd56 0%, #00a83b 50%, #06692c 100%) !important;
  border-color: rgba(52,194,106,.42) !important;
}
.console-panel .scan-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 28px rgba(0,168,59,.30),
    0 0 0 1px rgba(255,255,255,.14) !important;
}
.console-panel .scan-cta-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  background: rgba(255,255,255,.18) !important;
}
.console-panel .scan-cta-icon i {
  color: #fff !important;
}
.console-panel .scan-cta-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: .045em !important;
}
.console-panel .scan-cta::before,
.console-panel .scan-cta::after,
.console-panel .access-code-open-btn::before,
.console-panel .access-code-open-btn::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse::after {
    margin-left: -5px !important;
    transform: translateX(-4px) !important;
  }
  .console-panel .access-code-open-btn,
  .console-panel .scan-cta {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
  }
}

/* ============================================================== */
/*   v60 — Fix System tile dot/text overlap                       */
/* ============================================================== */
.status-strip-inner > .status-pulse {
  gap: 7px !important;
  padding-left: 7px !important;
  padding-right: 4px !important;
  justify-content: flex-start !important;
}
.status-strip-inner > .status-pulse > .status-pulse-dot {
  margin-left: 0 !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
}
.status-strip-inner > .status-pulse::after {
  margin-left: 0 !important;
  transform: none !important;
  white-space: nowrap !important;
}
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    gap: 6px !important;
    padding-left: 6px !important;
  }
  .status-strip-inner > .status-pulse::after {
    margin-left: 0 !important;
    transform: none !important;
  }
}

/* ============================================================== */
/*   v61 — System tile: make dot a real flex item                  */
/* ============================================================== */
.status-strip-inner > .status-pulse {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  column-gap: 7px !important;
  padding-left: 7px !important;
  padding-right: 6px !important;
}
.status-strip-inner > .status-pulse > .status-pulse-dot {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  flex: 0 0 8px !important;
}
.status-strip-inner > .status-pulse > .status-pulse-ring {
  display: none !important;
}
.status-strip-inner > .status-pulse::after {
  margin: 0 !important;
  transform: none !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    column-gap: 6px !important;
    padding-left: 6px !important;
    padding-right: 5px !important;
  }
}

/* ============================================================== */
/*   v62 — Tiny visual alignment polish                           */
/* ============================================================== */
.status-strip-inner > .status-pulse::after {
  transform: translateX(2px) !important;
}
.console-panel .access-code-open-btn,
.console-panel .scan-cta {
  border-radius: 8px !important;
}
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse::after {
    transform: translateX(2px) !important;
  }
  .console-panel .access-code-open-btn,
  .console-panel .scan-cta {
    border-radius: 8px !important;
  }
}

/* ============================================================== */
/*   v63 — Visible mobile alignment polish                        */
/* ============================================================== */
.status-strip-inner > .status-pulse::after {
  transform: translateX(5px) !important;
}
.console-panel .access-code-open-btn,
.console-panel .scan-cta {
  border-radius: 7px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 7px) !important;
}
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse::after {
    transform: translateX(5px) !important;
  }
  .console-panel .access-code-open-btn,
  .console-panel .scan-cta {
    border-radius: 7px !important;
    overflow: hidden !important;
    clip-path: inset(0 round 7px) !important;
  }
}

/* ============================================================== */
/*   v64 — Final scanner mobile shape overrides                   */
/* ============================================================== */
.status-strip-inner > .status-pulse {
  column-gap: 10px !important;
}
.status-strip-inner > .status-pulse::after {
  transform: none !important;
}
#btnAccessCodeOpen,
#btnScan {
  border-radius: 7px !important;
  clip-path: none !important;
  overflow: hidden !important;
}
#btnScan::before,
#btnScan::after,
#btnAccessCodeOpen::before,
#btnAccessCodeOpen::after {
  content: none !important;
  display: none !important;
}
@media (max-width: 640px) {
  .status-strip-inner > .status-pulse {
    column-gap: 10px !important;
  }
  .status-strip-inner > .status-pulse::after {
    transform: none !important;
  }
  #btnAccessCodeOpen,
  #btnScan {
    border-radius: 7px !important;
    clip-path: none !important;
    overflow: hidden !important;
  }
}

/* ============================================================== */
/*   v65 — Mobile candidate filters: primary row + More            */
/* ============================================================== */
#candidatesFilters .cand-filter-row {
  display: contents;
}
#candidatesFilters .cand-filter-more {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-ink-100) 82%, white);
  border: 1px solid color-mix(in oklab, var(--color-ink-200) 70%, transparent);
  color: var(--color-ink-700);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .015em;
  text-transform: uppercase;
  cursor: pointer;
}
#candidatesFilters .cand-filter-more .tnum {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 850;
  color: var(--color-ink-500);
}
#candidatesFilters .cand-filter-more .mdi {
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
}
#candidatesFilters .cand-filter-more.is-open .mdi {
  transform: rotate(180deg);
}
:where(.dark) #candidatesFilters .cand-filter-more {
  background: rgba(43,54,71,.58);
  border-color: rgba(96,112,132,.30);
  color: var(--color-ink-200);
}

@media (max-width: 640px) {
  #candidatesFilters {
    display: block !important;
  }
  #candidatesFilters .cand-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  #candidatesFilters .cand-filter-row-extra {
    margin-top: 5px !important;
  }
  #candidatesFilters .cand-filter-row-extra[hidden] {
    display: none !important;
  }
  #candidatesFilters .cand-filter-more {
    display: inline-flex !important;
  }
  #candidatesFilters .cand-filter-row-main .cand-filter {
    height: 28px !important;
    padding: 0 9px !important;
  }
  #candidatesFilters .cand-filter-row-extra .cand-filter {
    height: 26px !important;
    padding: 0 8px !important;
    opacity: .92;
  }
}

/* ============================================================== */
/*   v66 — Access code CTA: soft gray gradient                     */
/* ============================================================== */
#btnAccessCodeOpen {
  background:
    linear-gradient(180deg, #ffffff 0%, #f4f7fa 48%, #edf2f7 100%) !important;
  border-color: #cfdbe7 !important;
  color: var(--color-ink-900) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 7px 18px rgba(31,41,55,.08) !important;
}
#btnAccessCodeOpen:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #eef4f9 48%, #e5edf5 100%) !important;
  border-color: #b9cadc !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 9px 22px rgba(31,41,55,.11) !important;
}
#btnAccessCodeOpen .access-code-open-btn-icon {
  background: rgba(55,144,212,.13) !important;
}
#btnAccessCodeOpen .access-code-open-btn-icon i {
  color: var(--color-brand-sky-600) !important;
}
:where(.dark) #btnAccessCodeOpen {
  background:
    linear-gradient(180deg, rgba(42,54,70,.98) 0%, rgba(31,42,56,.98) 52%, rgba(24,34,47,.98) 100%) !important;
  border-color: rgba(116,135,158,.34) !important;
  color: var(--color-ink-100) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 18px rgba(0,0,0,.18) !important;
}

/* ============================================================== */
/*   v68 — Mobile printer status filters: primary row + More      */
/* ============================================================== */
#printerStatusFilters .cand-filter-row {
  display: contents;
}
#printerStatusFilters .cand-filter-more {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-ink-100) 82%, white);
  border: 1px solid color-mix(in oklab, var(--color-ink-200) 70%, transparent);
  color: var(--color-ink-700);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .015em;
  text-transform: uppercase;
  cursor: pointer;
}
#printerStatusFilters .cand-filter-more .tnum {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 850;
  color: var(--color-ink-500);
}
#printerStatusFilters .cand-filter-more .mdi {
  font-size: 14px;
  line-height: 1;
  transition: transform .15s ease;
}
#printerStatusFilters .cand-filter-more.is-open .mdi {
  transform: rotate(180deg);
}
:where(.dark) #printerStatusFilters .cand-filter-more {
  background: rgba(43,54,71,.58);
  border-color: rgba(96,112,132,.30);
  color: var(--color-ink-200);
}

@media (max-width: 640px) {
  #printerStatusFilters {
    display: block !important;
  }
  #printerStatusFilters .cand-filter-row {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
  }
  #printerStatusFilters .cand-filter-row-extra {
    margin-top: 5px !important;
  }
  #printerStatusFilters .cand-filter-row-extra[hidden] {
    display: none !important;
  }
  #printerStatusFilters .cand-filter-more {
    display: inline-flex !important;
  }
  #printerStatusFilters .cand-filter-row-main .cand-filter {
    height: 28px !important;
    padding: 0 8px !important;
  }
  #printerStatusFilters .cand-filter-row-extra .cand-filter {
    height: 26px !important;
    padding: 0 8px !important;
    opacity: .92;
  }
}

/* ============================================================== */
/*   v69 — Mobile printer status filters: icon rail                */
/* ============================================================== */
#printerStatusFilters .printer-filter-icon,
#printerStatusFilters .printer-filter-mobile-label {
  display: none;
}
@media (max-width: 640px) {
  #printerStatusFilters {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 1px !important;
    scrollbar-width: none !important;
  }
  #printerStatusFilters::-webkit-scrollbar {
    display: none;
  }
  #printerStatusFilters .cand-filter {
    height: 30px !important;
    min-width: 48px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }
  #printerStatusFilters .cand-filter::before {
    display: none !important;
  }
  #printerStatusFilters .printer-filter-icon {
    display: inline-flex !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: currentColor !important;
  }
  #printerStatusFilters .cand-filter-label {
    display: none !important;
  }
  #printerStatusFilters .printer-filter-mobile-label {
    display: none !important;
  }
  #printerStatusFilters .cand-filter .tnum {
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #printerStatusFilters .cand-filter.is-active {
    min-width: 54px !important;
  }
}

/* ============================================================== */
/*   v71 — Mobile scanner filters: icon rail                       */
/* ============================================================== */
#candidatesFilters .candidate-filter-icon {
  display: none;
}
@media (max-width: 640px) {
  #candidatesFilters {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding-bottom: 1px !important;
    scrollbar-width: none !important;
  }
  #candidatesFilters::-webkit-scrollbar {
    display: none;
  }
  #candidatesFilters .cand-filter {
    height: 30px !important;
    min-width: 48px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
  }
  #candidatesFilters .cand-filter::before {
    display: none !important;
  }
  #candidatesFilters .candidate-filter-icon {
    display: inline-flex !important;
    font-size: 15px !important;
    line-height: 1 !important;
    color: currentColor !important;
  }
  #candidatesFilters .cand-filter-label {
    display: none !important;
  }
  #candidatesFilters .cand-filter .tnum {
    font-size: 11px !important;
    line-height: 1 !important;
  }
  #candidatesFilters .cand-filter.is-active {
    min-width: 54px !important;
  }
}

/* ============================================================== */
/*   v72 — Mobile scanner filters: reduced semantic groups         */
/* ============================================================== */
#candidatesFilters .candidate-filter-set {
  display: contents;
}
#candidatesFilters .candidate-filter-set-mobile {
  display: none;
}
@media (max-width: 640px) {
  #candidatesFilters {
    display: block !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  #candidatesFilters .candidate-filter-set {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: nowrap !important;
  }
  #candidatesFilters .candidate-filter-set-desktop {
    display: none !important;
  }
  #candidatesFilters .candidate-filter-set-mobile {
    display: flex !important;
  }
  #candidatesFilters .candidate-filter-set-mobile .cand-filter {
    height: 30px !important;
    min-width: 50px !important;
    flex: 1 1 0 !important;
    padding: 0 7px !important;
  }
  #candidatesFilters .candidate-filter-set-mobile .cand-filter.is-active {
    min-width: 52px !important;
  }
}

/* ============================================================== */
/*   v73 — Desktop status strip: keep System compact               */
/* ============================================================== */
@media (min-width: 641px) {
  .status-strip-inner > .status-pulse {
    width: auto !important;
    min-width: auto !important;
    flex: 0 0 auto !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    column-gap: 7px !important;
  }
}

/* ============================================================== */
/*   v74 — Desktop dashboard status tiles + split scanner CTAs     */
/* ============================================================== */
@media (min-width: 768px) {
  .status-strip {
    overflow: visible !important;
  }
  .status-strip-inner {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) auto !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 10px 12px !important;
    overflow: visible !important;
  }
  .status-strip-inner > .status-pulse,
  .status-strip-inner > .status-stat {
    min-width: 0 !important;
    height: 52px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,253,.94) 100%) !important;
    border: 1px solid rgba(207,219,231,.85) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.88),
      0 4px 12px rgba(31,41,55,.04) !important;
  }
  :where(.dark) .status-strip-inner > .status-pulse,
  :where(.dark) .status-strip-inner > .status-stat {
    background:
      linear-gradient(180deg, rgba(31,42,56,.96) 0%, rgba(24,34,47,.96) 100%) !important;
    border-color: rgba(96,112,132,.34) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.06),
      0 4px 12px rgba(0,0,0,.12) !important;
  }
  .status-strip-inner > .status-pulse {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    flex: unset !important;
    order: 0 !important;
  }
  .status-strip-inner > .status-pulse::after {
    font-size: 13px !important;
    font-weight: 850 !important;
    transform: none !important;
  }
  .status-strip-inner > .status-stat {
    display: inline-flex !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    cursor: default;
  }
  .status-strip-inner > .status-stat[role="button"] {
    cursor: pointer;
  }
  .status-strip-inner > .status-stat .mdi {
    font-size: 16px !important;
  }
  .status-strip-inner > .status-stat .tnum {
    font-size: 14px !important;
  }
  .status-strip-inner > .ml-auto {
    margin-left: 0 !important;
    align-self: center !important;
    justify-content: flex-end !important;
  }
  .console-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  #btnAccessCodeOpen,
  #btnScan {
    width: 100% !important;
  }
}

/* ============================================================== */
/*   v75 — Desktop top nav active pill: green scan gradient        */
/* ============================================================== */
.seg-nav-indicator {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg, #13bd56 0%, #00a83b 48%, #087632 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 5px 14px rgba(0,168,59,.24),
    0 0 0 1px rgba(0,138,59,.22) !important;
}
:where(.dark) .seg-nav-indicator {
  background:
    radial-gradient(circle at 18% 50%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(135deg, #13bd56 0%, #00a83b 50%, #06692c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 5px 14px rgba(0,168,59,.28),
    0 0 0 1px rgba(52,194,106,.24) !important;
}
.seg-nav-tab.is-active,
:where(.dark) .seg-nav-tab.is-active {
  color: #fff !important;
}
.seg-nav-tab.is-active .seg-nav-badge {
  background: rgba(255,255,255,.20) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) !important;
}
:where(.dark) .seg-nav-tab.is-active .seg-nav-badge {
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20) !important;
}

/* ============================================================== */
/*   v77 — Splash loading background image                        */
/* ============================================================== */
.admin-splash {
  background:
    linear-gradient(180deg, rgba(8,14,24,.14), rgba(8,14,24,.34)),
    url('/static/bg-load.png') center center / cover no-repeat !important;
}

/* ============================================================== */
/*   v78 — Admin page background image                            */
/* ============================================================== */
.admin-page-body {
  background: url('/static/bg-web.png') center top / cover fixed no-repeat !important;
}
:where(.dark) .admin-page-body {
  background: url('/static/bg-web.png') center top / cover fixed no-repeat !important;
}

/* ============================================================== */
/*   v81 — Larger animated splash logo                            */
/* ============================================================== */
.admin-splash-inner {
  gap: 20px !important;
}
.admin-splash-logo-wrap {
  width: 156px !important;
  height: 156px !important;
}
.admin-splash-logo {
  width: 118px !important;
  height: 118px !important;
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,.28))
    drop-shadow(0 0 20px rgba(54,144,212,.36)) !important;
  animation: splashLogoFloat 1.9s ease-in-out infinite !important;
}
.admin-splash-radar {
  filter: blur(1.2px) !important;
  opacity: .95 !important;
}
.admin-splash-radar-2 {
  inset: 22px !important;
  opacity: .72 !important;
}
@keyframes splashLogoFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.045); }
}
@media (max-width: 640px) {
  .admin-splash-logo-wrap {
    width: 132px !important;
    height: 132px !important;
  }
  .admin-splash-logo {
    width: 102px !important;
    height: 102px !important;
  }
}

/* ============================================================== */
/*   v82 — Brighter splash connecting label                       */
/* ============================================================== */
.admin-splash-tagline {
  color: rgba(255,255,255,.96) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-shadow:
    0 2px 8px rgba(0,0,0,.42),
    0 0 18px rgba(54,144,212,.36) !important;
}
.admin-splash-dots > span {
  background: #fff !important;
  box-shadow: 0 0 8px rgba(255,255,255,.54) !important;
}

/* ============================================================== */
/*   v84 — Collector load score indicator                         */
/* ============================================================== */
.system-load-stat {
  gap: 5px !important;
}
.system-load-stat .mdi,
.system-load-stat .tnum,
.system-load-label {
  color: var(--color-bamboo-600) !important;
}
.system-load-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
}
.system-load-stat[data-tone="sky"] .mdi,
.system-load-stat[data-tone="sky"] .tnum,
.system-load-stat[data-tone="sky"] .system-load-label {
  color: var(--color-brand-sky-600) !important;
}
.system-load-stat[data-tone="amber"] .mdi,
.system-load-stat[data-tone="amber"] .tnum,
.system-load-stat[data-tone="amber"] .system-load-label {
  color: var(--color-brand-amber-600) !important;
}
.system-load-stat[data-tone="rose"] .mdi,
.system-load-stat[data-tone="rose"] .tnum,
.system-load-stat[data-tone="rose"] .system-load-label {
  color: var(--color-brand-rose-600) !important;
}
:where(.dark) .system-load-stat .mdi,
:where(.dark) .system-load-stat .tnum,
:where(.dark) .system-load-label {
  color: var(--color-bamboo-400) !important;
}
:where(.dark) .system-load-stat[data-tone="sky"] .mdi,
:where(.dark) .system-load-stat[data-tone="sky"] .tnum,
:where(.dark) .system-load-stat[data-tone="sky"] .system-load-label {
  color: var(--color-brand-sky-400) !important;
}
:where(.dark) .system-load-stat[data-tone="amber"] .mdi,
:where(.dark) .system-load-stat[data-tone="amber"] .tnum,
:where(.dark) .system-load-stat[data-tone="amber"] .system-load-label {
  color: var(--color-brand-amber-400) !important;
}
:where(.dark) .system-load-stat[data-tone="rose"] .mdi,
:where(.dark) .system-load-stat[data-tone="rose"] .tnum,
:where(.dark) .system-load-stat[data-tone="rose"] .system-load-label {
  color: var(--color-brand-rose-400) !important;
}
@media (min-width: 768px) {
  .status-strip-inner {
    grid-template-columns: repeat(7, minmax(0, 1fr)) auto !important;
  }
}
@media (max-width: 640px) {
  .system-load-label {
    display: none;
  }
}

/* ============================================================== */
/*   v85 — Performance diagnostics page                           */
/* ============================================================== */
.system-load-stat {
  cursor: pointer !important;
}
.performance-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.performance-hero,
.performance-score-card,
.performance-panel,
.performance-metric-card {
  border: 1px solid rgba(207,219,231,.88);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(247,250,253,.94) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 8px 22px rgba(31,41,55,.055);
}
:where(.dark) .performance-hero,
:where(.dark) .performance-score-card,
:where(.dark) .performance-panel,
:where(.dark) .performance-metric-card {
  border-color: rgba(96,112,132,.34);
  background:
    linear-gradient(180deg, rgba(31,42,56,.96) 0%, rgba(24,34,47,.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 22px rgba(0,0,0,.16);
}
.performance-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 14px;
  padding: 18px 20px;
}
.performance-kicker {
  font: 800 11px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
.performance-hero h2 {
  margin-top: 5px;
  font-size: 24px;
  font-weight: 900;
  color: var(--color-ink-900);
}
.performance-hero p {
  margin-top: 5px;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink-500);
}
:where(.dark) .performance-hero h2 { color: var(--color-ink-100); }
:where(.dark) .performance-kicker,
:where(.dark) .performance-hero p { color: var(--color-ink-400); }
.performance-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.performance-refresh {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(207,219,231,.9);
  color: var(--color-ink-700);
  background: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 800;
}
.performance-refresh.secondary {
  color: var(--color-brand-sky-600);
}
.performance-refresh:disabled {
  opacity: .58;
  cursor: wait;
}
:where(.dark) .performance-refresh {
  border-color: rgba(96,112,132,.42);
  color: var(--color-ink-200);
  background: rgba(23,32,42,.52);
}
:where(.dark) .performance-refresh.secondary {
  color: var(--color-brand-sky-400);
}
.performance-score-card {
  --load-deg: 72deg;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 14px;
  padding: 18px;
  border-left-width: 4px;
  border-left-color: var(--color-bamboo-500);
}
.performance-score-card[data-tone="sky"] { border-left-color: var(--color-brand-sky-500); }
.performance-score-card[data-tone="amber"] { border-left-color: var(--color-brand-amber-500); }
.performance-score-card[data-tone="rose"] { border-left-color: var(--color-brand-rose-500); }
.performance-score-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.performance-score-ring {
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--color-bamboo-600);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 0 52%, transparent 53%),
    conic-gradient(currentColor 0deg, currentColor var(--load-deg), rgba(207,219,231,.72) var(--load-deg) 360deg);
  box-shadow: inset 0 0 0 1px rgba(207,219,231,.7);
}
.performance-score-card[data-tone="sky"] .performance-score-ring { color: var(--color-brand-sky-600); }
.performance-score-card[data-tone="amber"] .performance-score-ring { color: var(--color-brand-amber-600); }
.performance-score-card[data-tone="rose"] .performance-score-ring { color: var(--color-brand-rose-600); }
.performance-score-ring span {
  font: 900 34px/1 var(--font-mono);
}
.performance-score-ring small {
  margin-top: -18px;
  font: 800 12px/1 var(--font-mono);
  opacity: .72;
}
.performance-label {
  font-size: 26px;
  font-weight: 900;
  color: var(--color-ink-900);
}
.performance-subtitle {
  margin-top: 4px;
  color: var(--color-ink-500);
  font-size: 13px;
}
:where(.dark) .performance-label { color: var(--color-ink-100); }
:where(.dark) .performance-subtitle { color: var(--color-ink-400); }
.performance-reasons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.performance-reason-pill,
.performance-reason-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(207,219,231,.9);
  background: rgba(255,255,255,.72);
  color: var(--color-ink-700);
  font-size: 12px;
}
.performance-reason-pill span {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-ink-500);
}
:where(.dark) .performance-reason-pill,
:where(.dark) .performance-reason-empty {
  border-color: rgba(96,112,132,.42);
  background: rgba(23,32,42,.5);
  color: var(--color-ink-200);
}
.performance-metric-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.performance-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 12px;
}
.performance-history {
  margin-top: 12px;
}
.performance-history-bars {
  height: 118px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(207,219,231,.72);
  background:
    linear-gradient(180deg, rgba(236,239,243,.32), rgba(255,255,255,.18)),
    repeating-linear-gradient(to top, transparent 0 23px, rgba(142,153,168,.18) 24px);
}
:where(.dark) .performance-history-bars {
  border-color: rgba(96,112,132,.35);
  background:
    linear-gradient(180deg, rgba(23,32,42,.28), rgba(23,32,42,.16)),
    repeating-linear-gradient(to top, transparent 0 23px, rgba(142,153,168,.12) 24px);
}
.performance-history-bars span {
  flex: 1 1 5px;
  min-width: 4px;
  border-radius: 999px 999px 3px 3px;
  background: var(--color-bamboo-500);
  box-shadow: 0 3px 10px rgba(0,168,59,.16);
}
.performance-history-bars span[data-tone="sky"] { background: var(--color-brand-sky-500); box-shadow: 0 3px 10px rgba(55,144,212,.16); }
.performance-history-bars span[data-tone="amber"] { background: var(--color-brand-amber-500); box-shadow: 0 3px 10px rgba(229,148,26,.18); }
.performance-history-bars span[data-tone="rose"] { background: var(--color-brand-rose-500); box-shadow: 0 3px 10px rgba(226,69,80,.18); }
.performance-history-caption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  color: var(--color-ink-500);
  font: 800 11px/1.2 var(--font-mono);
}
:where(.dark) .performance-history-caption { color: var(--color-ink-400); }
.performance-recommendations {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.performance-recommendation {
  border-radius: 11px;
  border: 1px solid rgba(207,219,231,.78);
  border-left: 4px solid var(--color-brand-sky-500);
  background: rgba(255,255,255,.55);
  padding: 10px 11px;
}
.performance-recommendation[data-severity="bamboo"] { border-left-color: var(--color-bamboo-500); }
.performance-recommendation[data-severity="amber"] { border-left-color: var(--color-brand-amber-500); }
.performance-recommendation[data-severity="rose"] { border-left-color: var(--color-brand-rose-500); }
:where(.dark) .performance-recommendation {
  border-color: rgba(96,112,132,.36);
  background: rgba(23,32,42,.42);
}
.performance-recommendation strong {
  display: block;
  color: var(--color-ink-900);
  font-size: 13px;
}
.performance-recommendation span,
.performance-recommendation p {
  display: block;
  margin: 3px 0 0;
  color: var(--color-ink-500);
  font-size: 12px;
  line-height: 1.35;
}
.performance-recommendation p {
  font-weight: 750;
  color: var(--color-ink-700);
}
:where(.dark) .performance-recommendation strong { color: var(--color-ink-100); }
:where(.dark) .performance-recommendation span { color: var(--color-ink-400); }
:where(.dark) .performance-recommendation p { color: var(--color-ink-300); }
.performance-empty {
  border-radius: 11px;
  border: 1px dashed rgba(142,153,168,.45);
  padding: 14px;
  color: var(--color-ink-500);
  font-size: 12px;
}
.performance-metric-card {
  min-height: 96px;
  border-radius: 12px;
  padding: 13px;
}
.performance-metric-label {
  font: 800 10px/1 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-ink-500);
}
.performance-metric-value {
  margin-top: 12px;
  font: 900 22px/1 var(--font-mono);
  color: var(--color-ink-900);
}
.performance-metric-sub {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-ink-500);
}
:where(.dark) .performance-metric-value { color: var(--color-ink-100); }
:where(.dark) .performance-metric-label,
:where(.dark) .performance-metric-sub { color: var(--color-ink-400); }
.performance-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 12px;
}
.performance-panel {
  border-radius: 14px;
  padding: 14px;
}
.performance-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-ink-800);
  font-weight: 900;
}
:where(.dark) .performance-panel-title { color: var(--color-ink-100); }
.performance-ops,
.performance-components {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.performance-op-row,
.performance-component-row {
  border-radius: 10px;
  border: 1px solid rgba(207,219,231,.75);
  background: rgba(255,255,255,.5);
  padding: 10px;
}
:where(.dark) .performance-op-row,
:where(.dark) .performance-component-row {
  border-color: rgba(96,112,132,.36);
  background: rgba(23,32,42,.42);
}
.performance-op-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.performance-op-row strong,
.performance-component-head span {
  display: block;
  color: var(--color-ink-900);
  font-size: 13px;
}
.performance-op-row span,
.performance-component-head strong {
  color: var(--color-ink-500);
  font: 800 11px/1.4 var(--font-mono);
}
:where(.dark) .performance-op-row strong,
:where(.dark) .performance-component-head span { color: var(--color-ink-100); }
:where(.dark) .performance-op-row span,
:where(.dark) .performance-component-head strong { color: var(--color-ink-400); }
.performance-op-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.performance-op-values span {
  border-radius: 7px;
  background: rgba(236,239,243,.78);
  padding: 6px 8px;
  text-align: center;
}
:where(.dark) .performance-op-values span {
  background: rgba(43,54,71,.6);
}
.performance-component-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.performance-component-bar {
  height: 7px;
  margin-top: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(207,219,231,.65);
}
.performance-component-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-bamboo-500), var(--color-brand-sky-500), var(--color-brand-amber-500));
}
@media (max-width: 1100px) {
  .performance-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .performance-insight-grid { grid-template-columns: 1fr; }
  .performance-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .performance-hero,
  .performance-score-card {
    align-items: stretch;
    flex-direction: column;
  }
  .performance-actions { width: 100%; }
  .performance-refresh { width: 100%; }
  .performance-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-op-row { grid-template-columns: 1fr; }
  .performance-op-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .performance-reasons { justify-content: flex-start; }
  .performance-history-bars { height: 92px; gap: 3px; }
}

/* ============================================================== */
/*   v58 — Login page Bambu-green refit + 3DHUB animations         */
/* ============================================================== */

/* logo wrap — provides positioning context for halo + ring */
.brand-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

/* soft expanding green halo pulse behind logo */
.brand-logo-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(0,174,66,.32) 0%,
    rgba(0,174,66,.16) 35%,
    rgba(0,174,66,0) 70%);
  animation: brandLogoPulse 2.4s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
  filter: blur(2px);
}
@keyframes brandLogoPulse {
  0%, 100% { transform: scale(.85); opacity: .55; }
  50%      { transform: scale(1.20); opacity: 1; }
}

/* secondary expanding ring (offset timing for layered effect) */
.brand-logo-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(0,174,66,.45);
  animation: brandLogoRing 2.8s ease-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes brandLogoRing {
  0%   { transform: scale(.8);  opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* logo subtle float */
.brand-logo-3d {
  position: relative;
  z-index: 1;
  animation: brandLogoFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(0,174,66,.18));
}
@keyframes brandLogoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(1.5deg); }
}

/* 3DHUB text — green→ink shimmer sweep */
.brand-name-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--color-ink-900) 0%,
    var(--color-ink-900) 35%,
    #00ae42 50%,
    var(--color-ink-900) 65%,
    var(--color-ink-900) 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: brandShimmer 3.2s ease-in-out infinite;
  letter-spacing: .04em;
}
:where(.dark) .brand-name-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--color-ink-100) 0%,
    var(--color-ink-100) 35%,
    #34d171 50%,
    var(--color-ink-100) 65%,
    var(--color-ink-100) 100%);
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes brandShimmer {
  0%   { background-position: 220% 50%; }
  100% { background-position: -120% 50%; }
}

/* login submit — subtle bambu glow */
.login-submit {
  box-shadow:
    0 6px 18px rgba(0,174,66,.25),
    0 1px 2px rgba(15,23,42,.08) !important;
}
.login-submit:hover {
  box-shadow:
    0 10px 26px rgba(0,174,66,.35),
    0 2px 4px rgba(15,23,42,.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo-halo, .brand-logo-ring, .brand-logo-3d, .brand-name-shimmer {
    animation: none !important;
  }
}