@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;500;600;700&display=swap');@import "https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap";
  .sidebar-link-container.svelte-129uls2 {
    position: relative;
    width: 100%;
  }

  /* Ensure the container doesn't interfere with existing layout */
  .sidebar-link-container.svelte-129uls2 .sidebar-link {
    width: 100%;
  }

  .tooltip.svelte-129uls2 {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    margin-left: 0.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }

  .sidebar-link-container.svelte-129uls2:hover .tooltip:where(.svelte-129uls2) {
    opacity: 1;
  }

  .tooltip.svelte-129uls2::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.25rem;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 0.25rem solid transparent;
    border-bottom: 0.25rem solid transparent;
    border-right: 0.25rem solid rgba(0, 0, 0, 0.9);
  }

  .sidebar-logo {
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .sidebar-brand-link.svelte-8t269v {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .sidebar-brand-logo.svelte-8t269v {
    width: 13rem;
    max-width: 100%;
    height: auto;
  }

  .sidebar-toggle {
    position: relative;
    z-index: 2;
    margin-left: auto;
    min-width: auto;
    color: var(--nav-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    border: 1px solid var(--nav-toggle-border);
    background: var(--nav-toggle-bg);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
    transition:
      transform 0.16s ease,
      background-color 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease;
  }

  .sidebar-toggle:hover {
    color: var(--nav-text);
    border-color: color-mix(in srgb, var(--nav-toggle-border) 70%, #ffffff);
    background: var(--nav-toggle-hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
  }

  .sidebar-toggle[aria-expanded='true'] {
    color: var(--nav-text);
    border-color: color-mix(in srgb, var(--nav-toggle-border) 85%, #ffffff);
    background: var(--nav-toggle-active-bg);
  }

  .sidebar-toggle-icon {
    color: var(--nav-text);
    font-size: 20px;
    line-height: 1;
  }

  .sidebar-theme-action.svelte-8t269v {
    margin-top: 0.6rem;
    min-height: 34px;
    padding: 0.35rem 0.55rem;
    border-radius: 0.6rem;
    gap: 0.35rem;
  }

  .sidebar-theme-action.svelte-8t269v .material-icons:where(.svelte-8t269v) {
    font-size: 18px;
    line-height: 1;
  }

  .toast-stack.svelte-1wueq5e {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
  }

  /* Error toasts stack just above permission toasts */
  .toast-stack--error.svelte-1wueq5e {
    bottom: 6rem;
    right: 1.5rem;
  }

  .toast-item.svelte-1wueq5e {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    background: #1b2e47;
    color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.32);
    font-size: 0.875rem;
    font-weight: 600;
    min-width: 280px;
    max-width: 420px;
    animation: svelte-1wueq5e-slide-in 0.18s ease;
  }

  .toast-item--permission.svelte-1wueq5e {
    background: #1b2e47;
    border-left-color: #ef4444;
  }

  .toast-item--permission.svelte-1wueq5e .toast-icon:where(.svelte-1wueq5e) {
    color: #fca5a5;
  }

  .toast-item--warning.svelte-1wueq5e {
    background: #3b2f09;
    border-left-color: #f59e0b;
  }

  .toast-item--warning.svelte-1wueq5e .toast-icon:where(.svelte-1wueq5e) {
    color: #fbbf24;
  }

  .toast-item--info.svelte-1wueq5e {
    background: #0f3550;
    border-left-color: #38bdf8;
  }

  .toast-item--info.svelte-1wueq5e .toast-icon:where(.svelte-1wueq5e) {
    color: #7dd3fc;
  }

  .toast-item--warning.svelte-1wueq5e {
    border-left: 3px solid #f59e0b;
  }

  .toast-item--warning.svelte-1wueq5e .toast-icon:where(.svelte-1wueq5e) {
    color: #f59e0b;
  }

  .toast-item--error.svelte-1wueq5e {
    border-left: 3px solid #ef4444;
  }

  .toast-item--error.svelte-1wueq5e .toast-icon:where(.svelte-1wueq5e) {
    color: #ef4444;
  }

  .toast-icon.svelte-1wueq5e {
    flex-shrink: 0;
    display: flex;
  }

  .toast-msg.svelte-1wueq5e {
    flex: 1;
    line-height: 1.4;
  }

  .toast-close.svelte-1wueq5e {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
  }

  .toast-close.svelte-1wueq5e:hover {
    color: #fff;
  }

  @keyframes svelte-1wueq5e-slide-in {
    from {
      opacity: 0;
      transform: translateX(1.5rem);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }


.button-root {
	background-color: #1ca5ce;
	color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;

    border-radius: 5px;
}

.button-root:hover {
    background-color: #1695bb; /* subtle blue hover */
    transform: none;
}

.button-root-dark {
	background-color: #162e46;
	color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;

    border-radius: 5px;
}

.button-root-dark:hover {
    background-color: #1f3d5c; /* slightly lighter navy */
    transform: none;
}

.button-root-red {
    background-color: #cb3a28;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;

    border-radius: 5px;
}

.button-root-red:hover {
    background-color: #1ca5ce;
    transform: scale(1.10);
}

.button-root-outline {
	background-color: white;
    border: 2px solid #162e46;
	color: #162e46;;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;

    border-radius: 5px;
}

.button-root-outline:hover {
    background-color: #f0f6fb; /* very light blue */
    color: #162e46;
    transform: none;
}

.navigation-menu-link {
    color: #182e46;
    
	font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.navigation-menu-link:hover {
    color: #1ca5ce;
    text-decoration: none;
}

.navigation-menu-link-home {
    color: white;
    
	font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
}

.navigation-menu-link-home:hover {
    color: #1ca5ce;
    text-decoration: none;
}

.navigation-menu-link-active {
    color: #1ca5ce;
}

.hero-parent {
    height: 100vh;
}

p {
    color: #4D4D4D;
}

h1 {
    color: #353535;
}

.separator-root {
    background-color: rgb(191, 65, 44);
}

/* Files tab chips (Assets-style) */
.files-tab {
  background-color: #ffffff;
  color: #162e46;
  border: 1px solid #d9dee5;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.2s ease;
  cursor: pointer;
}

/* Hover: match Assets page vibe (blue) */
.files-tab:hover {
  background-color: #1ca5ce;
  color: #fff;
  transform: none; /* keep stable like Assets chips */
}

/* Selected state */
.files-tab[data-state="on"] {
  background-color: #162e46;
  color: #fff;
  border-color: #162e46;
}

/* Selected + hover */
.files-tab[data-state="on"]:hover {
  background-color: #1ca5ce;
  border-color: #1ca5ce;
}/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-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-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial}}}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.top-\[8vh\]{top:8vh}.top-\[50\%\]{top:50%}.top-full{top:100%}.left-1\/2,.left-\[50\%\]{left:50%}.isolate{isolation:isolate}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[51\]{z-index:51}.z-\[1000\]{z-index:1000}.z-\[1001\]{z-index:1001}.z-\[1100\]{z-index:1100}.col-1{grid-column:1}.container{width:100%}.mx-auto{margin-inline:auto}.block{display:block}.contents{display:contents}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.list-item{display:list-item}.table{display:table}.h-\[85vh\]{height:85vh}.h-\[calc\(100vh-180px\)\]{height:calc(100vh - 180px)}.h-full{height:100%}.h-px{height:1px}.max-h-\[84vh\]{max-height:84vh}.max-h-\[85vh\]{max-height:85vh}.min-h-\[2\.15rem\]{min-height:2.15rem}.min-h-\[72px\]{min-height:72px}.min-h-\[500px\]{min-height:500px}.w-\[90\%\]{width:90%}.w-\[90vw\]{width:90vw}.w-\[92vw\]{width:92vw}.w-\[94vw\]{width:94vw}.w-\[520px\]{width:520px}.max-w-\[42vw\]{max-width:42vw}.max-w-\[48rem\]{max-width:48rem}.max-w-\[240px\]{max-width:240px}.max-w-\[400px\]{max-width:400px}.max-w-\[450px\]{max-width:450px}.max-w-\[460px\]{max-width:460px}.max-w-\[500px\]{max-width:500px}.max-w-\[520px\]{max-width:520px}.max-w-\[600px\]{max-width:600px}.max-w-\[700px\]{max-width:700px}.max-w-\[1700px\]{max-width:1700px}.flex-\[0\.6\]{flex:.6}.flex-shrink,.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-x-\[50\%\]{--tw-translate-x:calc(50% * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-help{cursor:help}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}.rounded-\[22px\]{border-radius:22px}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-solid{--tw-border-style:solid;border-style:solid}.border-\[rgba\(255\,255\,255\,0\.2\)\]{border-color:#fff3}.border-current{border-color:currentColor}.border-r-transparent{border-right-color:#0000}.bg-\[rgba\(255\,255\,255\,0\.2\)\]{background-color:#fff3}.bg-\[rgba\(255\,255\,255\,0\.6\)\]{background-color:#fff9}.bg-\[rgba\(255\,255\,255\,0\.45\)\]{background-color:#ffffff73}.bg-\[var\(--background\)\]{background-color:var(--background)}.bg-transparent{background-color:#0000}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.to-\[\#053652\]{--tw-gradient-to:#053652;--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))}.bg-center{background-position:50%}.bg-no-repeat{background-repeat:no-repeat}.px-\[21px\]{padding-inline:21px}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.align-\[-0\.125em\]{vertical-align:-.125em}.text-\[4rem\]{font-size:4rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[14px\]{font-size:14px}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.leading-none{--tw-leading:1;line-height:1}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[var\(--color-theme-1\)\]{color:var(--color-theme-1)}.text-\[var\(--text-secondary\)\]{color:var(--text-secondary)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.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,ease);transition-duration:var(--tw-duration,0s)}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.duration-300{--tw-duration:.3s;transition-duration:.3s}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.focus-within\:ring-2:focus-within{--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-within\:outline-none:focus-within{--tw-outline-style:none;outline-style:none}@media (hover:hover){.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-100:hover{opacity:1}}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--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-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.active\:scale-\[0\.98\]:active{scale:.98}.active\:transition-all:active{transition-property:all;transition-timing-function:var(--tw-ease,ease);transition-duration:var(--tw-duration,0s)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.data-\[selected\]\:bg-\[\#1b2e47\][data-selected]{background-color:#1b2e47}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-\[spin_1\.5s_linear_infinite\]{animation:1.5s linear infinite spin}}:root{--font-body:"Roboto", sans-serif;--font-heading:"Roboto", sans-serif;--font-mono:"Fira Mono", monospace;--color-primary-600:#09192d;--color-primary-500:#1b2e47;--color-primary-400:#4b627e;--color-primary-300:#8da1b9;--color-secondary-500:#3fa6d1;--color-secondary-400:#187498;--color-secondary-300:#8cc7de;--color-secondary-200:#cce9f5;--color-tertiary-500:#ca3727;--color-tertiary-400:#a31506;--color-tertiary-300:#df6255;--color-tertiary-200:#eea59d;--text-primary:#353535;--text-secondary:#4d4d4d;--background:#f2f3f5;--surface-1:#fff;--surface-2:#e1e3e7;--radius-card-sm:.375rem;--shadow-mini:0 1px 2px 0 #0000000d;--column-width:42rem;--column-margin-top:4rem;font-family:var(--font-body);color:var(--text-primary);--spatial-panel-bg:#fff;--spatial-panel-border:#d1d9e0;--spatial-text:#1e293b;--spatial-text-muted:#64748b;--spatial-item-hover:#f1f5f9;--spatial-active-bg:#e0f2fe;--spatial-active-color:#0369a1;--spatial-input-bg:#f8fafc;--spatial-section-border:#e2e8f0;--border-light:#e0e0e0;--border-medium:#bbb;--border-subtle:#f0f0f0;--accent:#007bff;--accent-hover-overlay:#007bff1a;--accent-active-overlay:#007bff33;--accent-dark:#0056b3;--danger:#dc3545;--danger-dark:#c82333;--danger-hover-overlay:#dc35451a;--danger-active-overlay:#dc354533;--success:#28a745;--success-dark:#1e7e34;--success-hover-overlay:#28a7451a;--success-active-overlay:#28a74533;--hover-overlay:#0000000d}:root.smui-theme-dark{--spatial-panel-bg:#161b22;--spatial-panel-border:#30363d;--spatial-text:#cdd9e5;--spatial-text-muted:#8b949e;--spatial-item-hover:#21262d;--spatial-active-bg:#1f3a4a;--spatial-active-color:#3fa6d1;--spatial-input-bg:#21262d;--spatial-section-border:#21262d}:root.dark{--app-bg:var(--color-primary-600);--background:var(--color-primary-600);--surface-1:var(--color-primary-500);--surface-2:var(--color-primary-400);--text-primary:#f8fafc;--text-secondary:#ffffffb3;--border-light:#3a4450;--border-medium:#4a5563;--border-subtle:#2a313a;--accent:#3fa6d1;--accent-hover-overlay:#3fa6d126;--accent-active-overlay:#3fa6d140;--accent-dark:#187498;--danger:#f85149;--danger-dark:#da3633;--danger-hover-overlay:#f8514926;--danger-active-overlay:#f8514940;--success:#3fb950;--success-dark:#2ea043;--success-hover-overlay:#3fb95026;--success-active-overlay:#3fb95040;--hover-overlay:#ffffff0d}body{background-color:var(--background);min-height:100vh;font-family:var(--font-body);color:var(--text-primary);margin:0;line-height:1.5}.flex{display:flex}.flex-col{flex-direction:column}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}.w-full{width:100%}.h-screen{height:100vh}.min-h-0{min-height:0}.min-h-full{min-height:100%}.min-h-screen{min-height:100vh}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}h1,h2{font-family:var(--font-heading);color:var(--text-primary);font-weight:700}h1{text-align:center;font-size:2rem}h2{font-size:1.25rem}p{color:var(--text-secondary);font-weight:400}a{color:var(--color-secondary-500);text-decoration:none}a:hover,a:focus{text-decoration:underline}input,button{font-size:inherit;font-family:inherit}button{cursor:pointer}button:focus-visible{outline:2px solid var(--color-secondary-500);outline-offset:2px}pre{font-size:16px;font-family:var(--font-mono);color:var(--text-primary);background-color:#ffffff73;border-radius:3px;padding:.5em;overflow-x:auto;box-shadow:2px 2px 6px #ffffff40}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:auto;margin:0;padding:0;position:absolute;overflow:hidden}.home-hero{background-color:var(--color-primary-500);color:#fff;font-family:var(--font-heading);background-image:url(../../../slider-2024-v2.jpg);background-position:top;background-repeat:no-repeat;background-size:cover}.home-hero h1{color:#f2f3f5;font-size:70px;font-weight:700;line-height:77px}.home-hero p{color:var(--color-supplemental-1)}.home-hero .genoa-underline{border-bottom:var(--color-tertiary-500) 4px solid;font-weight:700}.grid-container{background:var(--surface-1);border-radius:var(--radius-card-sm);transition:box-shadow .3s;box-shadow:0 4px 12px #00000014}aside{color:#f2f3f5;background-color:#1b2e47}.nav-link{color:#f2f3f5;border-radius:.5rem;align-items:center;padding:.75rem;transition:background .2s;display:flex}.nav-link:hover{color:#f2f3f5;background-color:#3fa6d1}.nav-link:hover .material-icons{color:#f2f3f5}.sidebar-fixed{z-index:10;flex-shrink:0;height:100vh;position:sticky;top:0}.layout-main{will-change:width;height:100vh;transition:flex .3s;overflow-y:auto}.layout-main>*{transition:width .3s}@media (min-width:720px){h1{font-size:2.4rem}}#viewer-main-container{background-color:var(--background)!important}#viewer-main-container>div{background-color:var(--background);color:var(--text-primary)}:root.dark #viewer-main-container{background-color:var(--color-primary-600)!important}:root.dark #viewer-main-container>div{background-color:var(--color-primary-600);color:var(--text-primary)}#viewer-main-container canvas{display:block}.hierarchy-panel-container{z-index:100!important}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-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-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-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<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}
/*
 * Shared hierarchy-tree style contract.
 *
 * Four panels render a hierarchy: the Assets sidebar, the Graph Explorer, the ISS
 * Parts Browser and the GLB viewer. They used to each own a copy of the row CSS,
 * which is how they drifted apart. The values below are the Assets sidebar's —
 * it is the baseline — and every panel now consumes them from here.
 *
 * This is a plain global stylesheet rather than a Svelte component for one
 * reason: the GLB viewer's rows are not Svelte. TreeNodeComponent.ts builds them
 * with document.createElement into a recycled pool so that an 80k-part ship costs
 * the same as an 80-part one, and CSS is the only thing that renderer and the
 * three declarative panels can both consume.
 *
 * Consequences worth knowing:
 * - Svelte's scoped styles carry a hash class and therefore outrank this file.
 *   A panel that keeps a local copy of a rule here will silently win. Delete the
 *   local copy instead of layering on top of it.
 * - `.hier-row` indents via `margin-left` from `--level`. The GLB viewer cannot
 *   use margin (its rows are absolutely positioned and stepped by translateY, so
 *   a margin would shift them without changing offsetHeight and they would
 *   drift); it sets an equivalent inline paddingLeft instead and never sets
 *   `--level`, which resolves the margin to 0. Keep it that way.
 * - Nothing here may change a row's vertical metrics per state. The GLB viewer
 *   measures one plain row once per attach and steps every other row by that
 *   height, so a hover/selected rule that adds vertical padding, a vertical
 *   border or a different line-height desyncs those rows from the scroll math.
 *   That is why `.selected` uses an inset box-shadow rather than a border.
 */

/* ── Panel shell ─────────────────────────────────────────────────────────── */

/* Shell only. Docked panels (Graph Explorer, ISS Parts Browser) sit flush against
   the canvas, so the rounded-card decoration is opt-in via .hier-panel-card —
   rounding a flush dock leaves a visible gutter around the canvas. */
.hier-panel {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.hier-panel-card {
  border: 1px solid rgba(27, 46, 71, 0.14);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Owns only the chrome. What sits inside the head genuinely differs per panel —
   Assets stacks a mode toggle over a chip row, the docks are a title beside icon
   buttons — so each panel sets its own display/direction/gap. */
.hier-panel-head {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(27, 46, 71, 0.12);
  padding: 0.75rem;
}

.hier-panel-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1b2e47;
}

/* ── Mode / breakdown pill group ─────────────────────────────────────────── */
/* The blue pill row every hierarchy panel uses to switch what the tree shows:
   Collections/Locations on Assets, the breakdown on the Graph Explorer and ISS
   Parts Browser, and the panel tabs in the GLB viewer. */

.hier-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(27, 46, 71, 0.16);
  border-radius: 999px;
  padding: 0.24rem;
  max-width: 100%;
}

.hier-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 0;
  border-radius: 999px;
  padding: 0.34rem 0.72rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #37506d;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.hier-tab:hover:not(:disabled) {
  color: #1b2e47;
  background: #e4f0f8;
}

.hier-tab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hier-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #368fb5, #1b2e47);
  box-shadow: 0 6px 12px rgba(27, 46, 71, 0.22);
}

/* ── Search / filter bar ─────────────────────────────────────────────────── */

.hier-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(27, 46, 71, 0.1);
  flex-shrink: 0;
}

.hier-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 0.78rem;
  color: #1b2e47;
}

.hier-search input::-moz-placeholder {
  color: #8da1b9;
  opacity: 0.8;
}

.hier-search input::placeholder {
  color: #8da1b9;
  opacity: 0.8;
}

.hier-search .material-icons {
  font-size: 16px;
  line-height: 1;
  color: #4b627e;
}

/* ── Scrolling list ──────────────────────────────────────────────────────── */

/* Split in two because the panels nest differently: the Assets sidebar scrolls
   and lays out rows on one element (it takes both classes), while the docked
   panels scroll on `.panel-content` and lay out rows on an inner `.tree-list`. */

.hier-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.hier-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.5rem;
}

/* ── Row ─────────────────────────────────────────────────────────────────── */

.hier-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.28rem;
  padding: 0.28rem 0.34rem;
  border: 1px solid rgba(27, 46, 71, 0.1);
  border-radius: 8px;
  background: #f8fbfd;
  margin-left: calc(var(--level, 0) * 16px);
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition:
    background-color 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease;
}

.hier-row:hover {
  background: #ebf5fb;
  border-color: rgba(54, 143, 181, 0.36);
}

.hier-row.selected {
  background: color-mix(in srgb, #368fb5 14%, #f8fbfd);
  border-color: rgba(54, 143, 181, 0.52);
  box-shadow: inset 2px 0 0 #368fb5;
}

/* "Active" = loaded onto the 3D canvas. Parts Browser only; a row can be both
   active and selected, and the selected tint wins. */
.hier-row.active {
  background: color-mix(in srgb, #368fb5 10%, #f8fbfd);
  border-color: rgba(54, 143, 181, 0.45);
  box-shadow: inset 3px 0 0 #368fb5;
}

.hier-row.active.selected {
  background: color-mix(in srgb, #368fb5 18%, #f8fbfd);
  box-shadow: inset 3px 0 0 #368fb5;
}

.hier-row:focus-visible {
  outline: 2px solid rgba(54, 143, 181, 0.5);
  outline-offset: -2px;
}

/* ── Row contents ────────────────────────────────────────────────────────── */

.hier-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #4b627e;
  border-radius: 4px;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

.hier-chevron:hover {
  background: rgba(54, 143, 181, 0.14);
  color: #187498;
}

.hier-chevron .material-icons {
  font-size: 16px;
  line-height: 1;
}

.hier-chevron-spacer {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.hier-label {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #1b2e47;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Secondary descriptor trailing the label (node type, hierarchy level). */
.hier-meta {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4b627e;
  opacity: 0.6;
}

/* ── Empty / loading ─────────────────────────────────────────────────────── */

.hier-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #5e738d;
  padding: 1.75rem 0.75rem;
  text-align: center;
}

.hier-empty .material-icons {
  font-size: 1.6rem;
  opacity: 0.45;
}

.hier-loading {
  flex-shrink: 0;
  font-size: 0.74rem;
  color: #5e738d;
  text-align: center;
  padding: 0.4rem 0.5rem;
}

/* ── Dark theme ──────────────────────────────────────────────────────────── */
/* `.dark` lives on <html>, so these plain descendant selectors reach every
   panel including the GLB viewer's JS-created rows. */

.dark .hier-panel {
  background: #1a2332;
}

.dark .hier-panel-card {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
}

.dark .hier-panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .hier-panel-title {
  color: #e5eefc;
}

.dark .hier-tabs {
  background: #1a2332;
  border-color: rgba(255, 255, 255, 0.13);
}

.dark .hier-tab {
  color: #c9ddf0;
}

.dark .hier-tab:hover:not(:disabled) {
  color: #e5eefc;
  background: rgba(63, 166, 209, 0.14);
}

.dark .hier-tab.active {
  color: #ffffff;
  background: linear-gradient(135deg, #2a8ab0, #1b3d5c);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.dark .hier-search {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark .hier-search input {
  color: #e5eefc;
}

.dark .hier-search input::-moz-placeholder {
  color: #8da1b9;
}

.dark .hier-search input::placeholder {
  color: #8da1b9;
}

.dark .hier-search .material-icons {
  color: #8da1b9;
}

.dark .hier-row {
  background: #253348;
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .hier-row:hover {
  background: #2c3d52;
  border-color: rgba(63, 166, 209, 0.4);
}

.dark .hier-row.selected {
  background: color-mix(in srgb, #3fa6d1 16%, #253348);
  border-color: rgba(63, 166, 209, 0.5);
  box-shadow: inset 2px 0 0 #3fa6d1;
}

.dark .hier-row.active {
  background: color-mix(in srgb, #3fa6d1 11%, #253348);
  border-color: rgba(63, 166, 209, 0.45);
  box-shadow: inset 3px 0 0 #3fa6d1;
}

.dark .hier-row.active.selected {
  background: color-mix(in srgb, #3fa6d1 20%, #253348);
  box-shadow: inset 3px 0 0 #3fa6d1;
}

.dark .hier-chevron {
  color: #8da1b9;
}

.dark .hier-chevron:hover {
  background: rgba(63, 166, 209, 0.16);
  color: #3fa6d1;
}

.dark .hier-label {
  color: #e5eefc;
}

.dark .hier-meta {
  color: #8da1b9;
}

.dark .hier-empty,
.dark .hier-loading {
  color: #9fb2c8;
}
/* 3D Viewer panel chrome — deliberately theme-independent.
 *
 * The app flips `.dark` on <html> and swaps the `--surface-*` / `--text-*`
 * tokens in routes/styles.css. Viewer popups float over a permanently dark 3D
 * canvas, so following that toggle turns them into white slabs in light mode.
 * These tokens have NO `.dark` counterpart on purpose — that absence *is* the
 * mechanism, the same one the ISS Parts Browser's canvas overlays use
 * (graph/spatial/SpatialViewer.svelte, SpatialHelpOverlay.svelte).
 *
 * Values are lifted verbatim from Viewer/components/HelpPanel.svelte so the
 * panels already using the recipe don't shift.
 */
:root {
  /* Surfaces */
  --viewer-panel-bg: rgba(15, 23, 42, 0.85);
  --viewer-panel-bg-solid: rgba(15, 23, 42, 0.95); /* dropdowns, modals */
  --viewer-panel-raised: rgba(255, 255, 255, 0.05); /* list rows */
  --viewer-panel-border: rgba(255, 255, 255, 0.1);
  --viewer-panel-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --viewer-panel-blur: blur(16px);

  /* Text */
  --viewer-panel-text: #e2e8f0;
  --viewer-panel-muted: #8da1b9;
  --viewer-panel-dim: #94a3b8;
  --viewer-panel-faint: #64748b;
  --viewer-panel-strong: #f8fafc;

  /* Accent (blue) + status */
  --viewer-accent: #3fa6d1;
  /* Lighter tint of the accent, for text/icons sitting on an accent wash.
     #3fa6d1 on that wash is only ~4.6:1, which reads dim at 12px; this is ~8:1. */
  --viewer-accent-text: #9ad4ef;
  --viewer-accent-fill: rgba(63, 166, 209, 0.2);
  --viewer-accent-fill-strong: rgba(63, 166, 209, 0.32);
  --viewer-accent-fill-soft: rgba(63, 166, 209, 0.12);
  --viewer-accent-border: rgba(63, 166, 209, 0.5);
  --viewer-danger: #f87171;
  --viewer-danger-fill: rgba(239, 68, 68, 0.12);
  --viewer-danger-border: rgba(239, 68, 68, 0.3);
  --viewer-hover-overlay: rgba(255, 255, 255, 0.06);
}

/* Re-points the app's theme tokens at the viewer's dark values for everything
 * inside. Any panel already written against `var(--surface-1)` &co. goes dark
 * with no edit of its own. Portalled content (bits-ui Dialog) escapes this
 * subtree and must carry the class on its own Dialog.Content. */
.viewer-dark-scope {
  --surface-1: var(--viewer-panel-bg-solid);
  --surface-2: var(--viewer-panel-border);
  --background: rgba(10, 15, 26, 0.95);
  --app-bg: rgba(10, 15, 26, 0.95);
  --text-primary: var(--viewer-panel-text);
  --text-secondary: var(--viewer-panel-muted);
  --border-light: var(--viewer-panel-border);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.15);
  --accent: var(--viewer-accent);
  --accent-hover-overlay: var(--viewer-accent-fill-soft);
  --accent-active-overlay: var(--viewer-accent-fill);
  --danger: var(--viewer-danger);
  --danger-dark: #da3633;
  --danger-hover-overlay: rgba(248, 81, 73, 0.15);
  --danger-active-overlay: rgba(248, 81, 73, 0.25);
  --accent-dark: #187498;
  --success: #3fb950;
  --success-dark: #2ea043;
  --success-hover-overlay: rgba(63, 185, 80, 0.15);
  --success-active-overlay: rgba(63, 185, 80, 0.25);
  --hover-overlay: var(--viewer-hover-overlay);

  /* Load-bearing. `color` inherits its *computed* value, so text and
     currentColor icons that don't set a colour of their own would keep the dark
     ink resolved on an ancestor outside this scope — redefining --text-primary
     here does not reach them. This re-anchors the inherit chain. */
  color: var(--viewer-panel-text);
}

/* ── Helper classes ──────────────────────────────────────────────────────
   So popups stop re-declaring the six-property glass recipe by hand.

   Navbar panels use the solid tier (0.95) with a 16px blur; the lighter 0.85
   tier is reserved for small always-on overlays (help card, tooltips). Mixed
   blur radii read as different panel colours even when the fill matches, so the
   radius is a token rather than a per-panel choice. */

.viewer-glass-panel {
  background: var(--viewer-panel-bg-solid);
  backdrop-filter: var(--viewer-panel-blur);
  -webkit-backdrop-filter: var(--viewer-panel-blur);
  border: 1px solid var(--viewer-panel-border);
  border-radius: 8px;
  box-shadow: var(--viewer-panel-shadow);
  color: var(--viewer-panel-text);
  font-family: var(--font-body);
}

.viewer-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--viewer-panel-border);
}

.viewer-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--viewer-panel-muted);
}

/* Borderless glyph close, per SpatialHelpOverlay's .nav-help-close. */
.viewer-close-btn {
  background: none;
  border: none;
  color: var(--viewer-panel-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: color 120ms ease;
}

.viewer-close-btn:hover {
  color: var(--viewer-panel-strong);
}

/* Dark-canvas control, per SpatialViewer's .icon-btn / .edge-btn. */
.viewer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--viewer-panel-text);
  cursor: pointer;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease;
}

.viewer-btn:hover {
  border-color: var(--viewer-accent-border);
  color: var(--viewer-accent-text);
}

.viewer-btn.active {
  background: var(--viewer-accent-fill);
  border-color: var(--viewer-accent-border);
  color: var(--viewer-accent-text);
}

.viewer-btn-danger:hover {
  background: var(--viewer-danger-fill);
  border-color: var(--viewer-danger-border);
  color: var(--viewer-danger);
}

/* ── Form controls ───────────────────────────────────────────────────────
   Native inputs/selects render with the OS light chrome regardless of the
   surface they sit on, so they have to be painted explicitly. `color-scheme`
   is what fixes the dropdown list itself and the caret/spinner glyphs. */

.viewer-dark-scope {
  color-scheme: dark;
}

.viewer-dark-scope input[type='text'],
.viewer-dark-scope input[type='number'],
.viewer-dark-scope input[type='search'],
.viewer-dark-scope input[type='url'],
.viewer-dark-scope input:not([type]),
.viewer-dark-scope select,
.viewer-dark-scope textarea {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--viewer-panel-border);
  border-radius: 4px;
  color: var(--viewer-panel-text);
  font-family: inherit;
}

.viewer-dark-scope input::-moz-placeholder, .viewer-dark-scope textarea::-moz-placeholder {
  color: var(--viewer-panel-faint);
}

.viewer-dark-scope input::placeholder,
.viewer-dark-scope textarea::placeholder {
  color: var(--viewer-panel-faint);
}

.viewer-dark-scope input:focus,
.viewer-dark-scope select:focus,
.viewer-dark-scope textarea:focus {
  outline: none;
  border-color: var(--viewer-accent-border);
  box-shadow: 0 0 0 2px var(--viewer-accent-fill-soft);
}

.viewer-dark-scope input:disabled,
.viewer-dark-scope select:disabled,
.viewer-dark-scope textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The popup list is painted by the OS; only a solid colour survives. */
.viewer-dark-scope select option,
.viewer-dark-scope select optgroup {
  background: #0f172a;
  color: var(--viewer-panel-text);
}

.viewer-dark-scope input[type='checkbox'],
.viewer-dark-scope input[type='radio'],
.viewer-dark-scope input[type='range'] {
  accent-color: var(--viewer-accent);
}

/* ── Colour swatch ───────────────────────────────────────────────────────────
   `input[type='color']` is deliberately absent from the form-control selectors
   above: browsers paint it as a bevelled button and the shared rules make it
   look broken. It gets its own treatment, and lives here rather than in a
   component so the four hand-rolled copies in the viewer can converge on it.
   Not scoped to `.viewer-dark-scope` — the graph and spatial toolbars use it
   too, and the `--viewer-*` tokens are on bare `:root`. */

.viewer-color-swatch {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--viewer-panel-border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
}

.viewer-color-swatch::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.viewer-color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}

.viewer-color-swatch::-moz-color-swatch {
  border: none;
  border-radius: 2px;
}

.viewer-color-swatch:hover {
  border-color: var(--viewer-accent-border);
}

.viewer-color-swatch:focus-visible {
  outline: none;
  border-color: var(--viewer-accent-border);
  box-shadow: 0 0 0 2px var(--viewer-accent-fill-soft);
}

/* ── Scrollbars ──────────────────────────────────────────────────────────── */

.viewer-dark-scope {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}

.viewer-dark-scope ::-webkit-scrollbar,
.viewer-glass-panel ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.viewer-dark-scope ::-webkit-scrollbar-track,
.viewer-glass-panel ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.viewer-dark-scope ::-webkit-scrollbar-thumb,
.viewer-glass-panel ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.viewer-dark-scope ::-webkit-scrollbar-thumb:hover,
.viewer-glass-panel ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.viewer-dark-scope ::-webkit-scrollbar-corner,
.viewer-glass-panel ::-webkit-scrollbar-corner {
  background: transparent;
}

/* ── Tooltips ────────────────────────────────────────────────────────────
   The navbar look, applied to every viewer tooltip. The element itself is
   created by $lib/components/Viewer/utils/viewerTooltip.ts and lives in
   <body> — a CSS ::after pseudo-element gets clipped by panels that set
   `overflow: hidden`, which is what cut tooltips off near panel edges. */

.viewer-tooltip-floating {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: 3000;
  pointer-events: none;
  max-width: min(280px, calc(100vw - 16px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--viewer-panel-bg);
  backdrop-filter: var(--viewer-panel-blur);
  -webkit-backdrop-filter: var(--viewer-panel-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: var(--viewer-panel-shadow);
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--viewer-panel-text);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
}

.viewer-tooltip-floating.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* bits-ui renders its tooltip through its own portal; matched to the spec above
   so a portalled tooltip is indistinguishable from the shared one. */
.settings-tooltip {
  background: var(--viewer-panel-bg) !important;
  backdrop-filter: var(--viewer-panel-blur) !important;
  -webkit-backdrop-filter: var(--viewer-panel-blur) !important;
  color: var(--viewer-panel-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  box-shadow: var(--viewer-panel-shadow) !important;
  padding: 4px 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

/* ── Button sizing ───────────────────────────────────────────────────────
   One scale across every viewer panel, so a primary action in one panel is
   not visibly larger than the same action in another. */

.viewer-btn {
  min-height: 30px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
}

/* Square icon-only control on the same 30px rhythm. `min-width` and `padding`
   are pinned so a stray global button rule cannot collapse the icon. */
.viewer-btn-icon {
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
}

/* Icons must never be shrunk by the flex container they sit in. */
.viewer-btn > svg,
.viewer-btn-icon > svg,
.viewer-close-btn > svg {
  flex: 0 0 auto;
}

/* Primary action on a glass panel: a translucent accent wash with accent text,
   matching the Spatial Viewer's `.icon-btn.active`. Deliberately not a solid
   #3fa6d1 fill — a flat blue block reads as a foreign element on frosted glass. */
.viewer-btn-primary {
  background: var(--viewer-accent-fill);
  border-color: var(--viewer-accent-border);
  color: var(--viewer-accent-text);
}

.viewer-btn-primary:hover:not(:disabled) {
  background: var(--viewer-accent-fill-strong);
  border-color: var(--viewer-accent);
  color: var(--viewer-panel-strong);
}

.viewer-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Dropdowns ───────────────────────────────────────────────────────────
   For ViewerSelect (bits-ui). Both the trigger and the portalled listbox are
   styled here: the listbox renders outside the panel subtree, so it cannot
   inherit .viewer-dark-scope. */

.viewer-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--viewer-panel-border);
  border-radius: 6px;
  color: var(--viewer-panel-text);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.viewer-select-trigger:hover:not([data-disabled]) {
  border-color: var(--viewer-accent-border);
  color: var(--viewer-accent-text);
}

.viewer-select-trigger:focus-visible,
.viewer-select-trigger[data-state='open'] {
  outline: none;
  border-color: var(--viewer-accent-border);
  box-shadow: 0 0 0 2px var(--viewer-accent-fill-soft);
}

.viewer-select-trigger[data-disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.viewer-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer-select-content {
  z-index: 2500;
  min-width: var(--bits-select-anchor-width);
  max-height: min(280px, var(--bits-select-content-available-height));
  overflow-y: auto;
  padding: 4px;
  background: var(--viewer-panel-bg-solid);
  backdrop-filter: var(--viewer-panel-blur);
  -webkit-backdrop-filter: var(--viewer-panel-blur);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: var(--viewer-panel-shadow);
  font-family: var(--font-body);
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}

.viewer-select-content::-webkit-scrollbar {
  width: 8px;
}

.viewer-select-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.viewer-select-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.viewer-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--viewer-panel-text);
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: none;
}

.viewer-select-item[data-highlighted] {
  background: var(--viewer-accent-fill-soft);
  color: var(--viewer-accent-text);
}

.viewer-select-item[data-selected] {
  color: var(--viewer-accent-text);
}

.viewer-select-item[data-disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

  .auth-error-overlay.svelte-1loxra3 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
  }

  .auth-error-popup.svelte-1loxra3 {
    width: min(100%, 32rem);
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    border: 1.5px solid rgba(148, 163, 184, 0.3);
  }

  .auth-error-popup.is-401.svelte-1loxra3 {
    border-color: rgba(220, 38, 38, 0.4);
  }

  .auth-error-popup.is-403.svelte-1loxra3 {
    border-color: rgba(217, 119, 6, 0.4);
  }

  .auth-error-header.svelte-1loxra3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  .auth-error-title.svelte-1loxra3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
  }

  .auth-error-icon.svelte-1loxra3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    font-size: 1.1rem;
  }

  .auth-error-icon--401.svelte-1loxra3 {
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
  }

  .auth-error-icon--403.svelte-1loxra3 {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
  }

  .auth-error-close.svelte-1loxra3 {
    background: transparent;
    border: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: #475569;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background 0.15s;
  }

  .auth-error-close.svelte-1loxra3:hover {
    background: rgba(71, 85, 105, 0.1);
  }

  .auth-error-body.svelte-1loxra3 {
    padding: 1.25rem;
  }

  .auth-error-message.svelte-1loxra3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
  }

  .auth-error-sub.svelte-1loxra3 {
    margin: 0.5rem 0 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .auth-error-footer.svelte-1loxra3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
  }

  .auth-error-code.svelte-1loxra3 {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
  }

  .auth-error-btn.svelte-1loxra3 {
    padding: 0.625rem 1.125rem;
    border: 0;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition:
      opacity 0.15s,
      transform 0.1s;
  }

  .auth-error-btn.svelte-1loxra3:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .auth-error-btn.svelte-1loxra3:not(:disabled):hover {
    opacity: 0.88;
    transform: translateY(-1px);
  }

  .auth-error-btn.svelte-1loxra3:not(:disabled):active {
    transform: translateY(0);
  }

  .auth-error-btn--401.svelte-1loxra3 {
    background: #dc2626;
    color: #ffffff;
  }

  .auth-error-btn--403.svelte-1loxra3 {
    background: #0f172a;
    color: #ffffff;
  }

  .dark .auth-error-popup.svelte-1loxra3 {
    background: var(--surface-1);
    border-color: color-mix(in srgb, var(--surface-2) 80%, #ffffff);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }

  .dark .auth-error-popup.is-401.svelte-1loxra3 {
    border-color: rgba(220, 38, 38, 0.5);
  }

  .dark .auth-error-popup.is-403.svelte-1loxra3 {
    border-color: rgba(217, 119, 6, 0.5);
  }

  .dark .auth-error-header.svelte-1loxra3 {
    border-bottom-color: color-mix(in srgb, var(--surface-2) 60%, #ffffff);
  }

  .dark .auth-error-title.svelte-1loxra3 {
    color: var(--text-primary);
  }

  .dark .auth-error-close.svelte-1loxra3 {
    color: var(--text-secondary);
  }

  .dark .auth-error-close.svelte-1loxra3:hover {
    background: color-mix(in srgb, var(--surface-2) 50%, #0a1220);
  }

  .dark .auth-error-message.svelte-1loxra3 {
    color: var(--text-primary);
  }

  .dark .auth-error-sub.svelte-1loxra3 {
    color: var(--text-secondary);
  }

  .dark .auth-error-footer.svelte-1loxra3 {
    border-top-color: color-mix(in srgb, var(--surface-2) 60%, #ffffff);
  }

  .dark .auth-error-code.svelte-1loxra3 {
    color: color-mix(in srgb, var(--text-secondary) 70%, transparent);
  }

  .dark .auth-error-btn--403.svelte-1loxra3 {
    background: var(--color-primary-400);
  }

    .model-viewer.svelte-hik8v3 {
        width: 100%;
        height: 100%;
        overflow: hidden;
        font-family: var(--font-body);
    }

  .webgl2-overlay.svelte-1i9w6uw {
    position: absolute;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
  }

  .webgl2-popup.svelte-1i9w6uw {
    width: min(100%, 32rem);
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    border: 1.5px solid rgba(217, 119, 6, 0.4);
  }

  .webgl2-header.svelte-1i9w6uw {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  }

  .webgl2-title.svelte-1i9w6uw {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
  }

  .webgl2-icon.svelte-1i9w6uw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    font-size: 1.1rem;
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
  }

  .webgl2-body.svelte-1i9w6uw {
    padding: 1.25rem;
  }

  .webgl2-message.svelte-1i9w6uw {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
  }

  .webgl2-sub.svelte-1i9w6uw {
    margin: 0.5rem 0 0;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  .webgl2-list.svelte-1i9w6uw {
    margin: 0.75rem 0 0;
    padding-left: 1.25rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .webgl2-footer.svelte-1i9w6uw {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(226, 232, 240, 0.9);
  }

  .webgl2-code.svelte-1i9w6uw {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
  }

  .loading-progress.svelte-1km5mns {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Same glass recipe as the navbar panels; see $lib/styles/viewer-panel.css. */
    background-color: var(--viewer-panel-bg-solid);
    backdrop-filter: var(--viewer-panel-blur);
    -webkit-backdrop-filter: var(--viewer-panel-blur);
    color: var(--viewer-panel-text);
    padding: 20px;
    border: 1px solid var(--viewer-panel-border);
    border-radius: 8px;
    z-index: 1000;
    box-shadow: var(--viewer-panel-shadow);
    font-family: var(--font-body);
  }
  .progress-container.svelte-1km5mns {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 250px;
  }
  .progress-title.svelte-1km5mns {
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
    font-family: var(--font-heading);
  }
  progress.svelte-1km5mns {
    width: 100%;
    margin-bottom: 10px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--viewer-panel-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255, 255, 255, 0.08);
  }

  /* Webkit browsers (Chrome, Safari, Edge) */
  progress.svelte-1km5mns::-webkit-progress-bar {
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
  }
  progress.svelte-1km5mns::-webkit-progress-value {
    background-color: var(--accent);
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 20px 20px;
    border-radius: 4px;
    -webkit-transition: width 0.3s ease;
    transition: width 0.3s ease;
  }

  /* Firefox */
  progress.svelte-1km5mns::-moz-progress-bar {
    background-color: var(--accent);
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 20px 20px;
    border-radius: 4px;
  }

  /* Fallback for browsers that don't support pseudo-elements */
  progress.svelte-1km5mns {
    color: var(--viewer-accent);
    background-color: rgba(255, 255, 255, 0.08);
  }
  #progress-percent.svelte-1km5mns,
  #progress-eta.svelte-1km5mns {
    font-size: 0.9rem;
  }
  .progress-info.svelte-1km5mns {
    display: flex;
    gap: 5px;
    justify-content: center;
  }
  .ship-quote.svelte-1km5mns {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    max-width: 300px;
    line-height: 1.4;
    min-height: 2.4em;
    transition: opacity 0.4s ease;
  }
  .fade-in.svelte-1km5mns {
    opacity: 1;
  }
  .fade-out.svelte-1km5mns {
    opacity: 0;
  }

  /* ── Section divider before secondary content ─────────── */
  .section-divider.svelte-3np216 {
    height: 1px;
    background: var(--surface-2);
    margin: 8px 0 4px;
  }

  /* ── 3D Geometry accordion toggle ─────────────────────── */
  .accordion-toggle.svelte-3np216 {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 10px;
    border-radius: 8px;
    border: 1px solid var(--surface-2);
    background: var(--background);
    cursor: pointer;
    text-align: left;
    transition:
      border-color 150ms ease,
      background 150ms ease;
  }

  .accordion-toggle.svelte-3np216:hover {
    border-color: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 40%, var(--surface-2));
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 4%, var(--background));
  }

  .accordion-toggle[aria-expanded='true'].svelte-3np216 {
    border-color: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 35%, var(--surface-2));
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
  }

  .accordion-label.svelte-3np216 {
    flex: 1;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    transition: color 150ms ease;
  }

  .accordion-toggle.svelte-3np216:hover .accordion-label:where(.svelte-3np216) {
    color: var(--color-secondary-500, #3fa6d1);
  }

  .accordion-chevron.svelte-3np216 {
    font-size: 11px;
    color: var(--text-secondary);
    opacity: 0.6;
    transition:
      transform 160ms ease,
      opacity 150ms ease;
    flex-shrink: 0;
  }

  .accordion-toggle.svelte-3np216:hover .accordion-chevron:where(.svelte-3np216) {
    opacity: 1;
  }

  .section-label.svelte-3np216 {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    flex: 1;
  }

  /* ── Section content gap ─────────────────────────────────── */
  .section-content.svelte-3np216 {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 4px;
  }

  /* When section-content directly follows the accordion toggle, connect the border */
  .accordion-toggle[aria-expanded='true'].svelte-3np216 + .section-content:where(.svelte-3np216) {
    border: 1px solid color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 35%, var(--surface-2));
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 10px 10px;
    margin-bottom: 2px;
  }

  /* ── Property rows ───────────────────────────────────────── */
  .prop-row.svelte-3np216 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--background);
    border: 1px solid var(--surface-2);
    transition: border-color 0.15s ease;
  }

  .prop-row.svelte-3np216:hover {
    border-color: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 35%, var(--surface-2));
  }

  .prop-key.svelte-3np216 {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
  }

  .prop-val.svelte-3np216 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    word-break: break-word;
  }

  .prop-val.mono.svelte-3np216 {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-secondary);
  }

  .prop-val.path-val.svelte-3np216 {
    font-size: 11px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .custom-data-row.svelte-3np216 {
    gap: 4px;
  }

  .custom-data-content.svelte-3np216 {
    font-size: 11px;
  }

  /* ── Loading / error states ──────────────────────────────── */
  .loading-row.svelte-3np216 {
    padding: 8px 2px;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
  }

  .error-row.svelte-3np216 {
    border-color: color-mix(in srgb, var(--color-error-500, #ca3727) 30%, var(--surface-2));
  }

  .error-text.svelte-3np216 {
    color: var(--color-error-500, #ca3727);
    font-weight: 600;
    font-size: 11px;
  }

  .empty-note.svelte-3np216 {
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
    padding: 4px 2px;
  }

  /* ── Relationship groups ─────────────────────────────────── */
  .rel-section.svelte-3np216 {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
  }

  .rel-toggle.svelte-3np216 {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    text-align: left;
    transition: color 120ms ease;
  }

  .rel-toggle.svelte-3np216:hover {
    color: var(--color-secondary-500, #3fa6d1);
  }

  .rel-count.svelte-3np216 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 16px;
    padding: 0 5px;
    border-radius: 99px;
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 15%, var(--surface-2));
    color: var(--color-secondary-500, #3fa6d1);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .rel-chevron.svelte-3np216 {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.7;
  }

  /* ── Download-list rows (files, drawings, navigable items) ── */
  .download-list.svelte-3np216 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .download-row.svelte-3np216 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid var(--surface-2);
    background: var(--surface-1);
    transition:
      background 120ms ease,
      border-color 120ms ease;
  }

  .download-row.svelte-3np216:hover {
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 6%, var(--surface-1));
    border-color: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 30%, var(--surface-2));
  }

  .download-row-icon.svelte-3np216 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    opacity: 0.6;
  }

  .download-row-name.svelte-3np216 {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .download-row-btn.svelte-3np216 {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 5px;
    border: 1px solid color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 40%, var(--surface-2));
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 12%, var(--surface-1));
    color: var(--color-secondary-500, #3fa6d1);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 120ms ease;
    white-space: nowrap;
  }

  .download-row-btn.svelte-3np216:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 22%, var(--surface-1));
    border-color: var(--color-secondary-500, #3fa6d1);
  }

  .download-row-btn.svelte-3np216:disabled {
    opacity: 0.38;
    cursor: not-allowed;
  }

  /* ── Generic relationship chips (HAS_CONNECTION, etc.) ────── */
  .rel-chips.svelte-3np216 {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-bottom: 2px;
  }

  .rel-chip.svelte-3np216 {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 30%, var(--surface-2));
    background: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 10%, var(--surface-1));
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Sticky footer ───────────────────────────────────────── */
  .footer-nav-btn.svelte-3np216 {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(
      135deg,
      var(--color-secondary-500, #3fa6d1),
      var(--color-primary-500, #1b2e47)
    );
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 150ms ease;
  }

  .footer-nav-btn.svelte-3np216:hover {
    opacity: 0.9;
    box-shadow: 0 0 16px rgba(63, 166, 209, 0.3);
  }

  /* ── Custom data structured rendering ────────────────────── */
  .custom-data-group.svelte-3np216 {
    margin-bottom: 2px;
  }

  .custom-data-header.svelte-3np216 {
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
  }

  .custom-data-header.svelte-3np216:hover {
    background-color: color-mix(in srgb, var(--color-secondary-500, #3fa6d1) 12%, transparent);
  }

  .custom-data-toggle.svelte-3np216 {
    display: inline-flex;
    align-items: center;
    color: var(--color-secondary-500, #3fa6d1);
    transition:
      color 0.2s ease,
      transform 0.2s ease;
    margin-right: 4px;
  }

  .custom-data-parent.svelte-3np216 {
    display: inline-block;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
  }

  .custom-data-children.svelte-3np216 {
    margin: 0;
    padding-left: 10px;
    list-style-type: none;
  }

  .mesh-info-row.svelte-3np216 {
    display: flex;
    width: 100%;
  }

  .info-label.svelte-3np216 {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    flex-shrink: 0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

  .info-value.svelte-3np216 {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
  }

    .object-hierarchy-panel.svelte-thofyh {
        position: relative;
        background: var(--surface-1);
        border: 1px solid var(--surface-2);
        border-radius: 0;
        overflow: hidden;
        font-family: var(--font-body);
        color: var(--text-primary);
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .object-hierarchy-panel.panel-hidden.svelte-thofyh {
        display: none;
    }

    /* Search bar chrome comes from .hier-search; only the clear button is local. */
    .search-clear.svelte-thofyh {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 1px;
        border-radius: 3px;
        cursor: pointer;
        color: #4b627e;
        flex-shrink: 0;
    }
    .search-clear.svelte-thofyh:hover {
        color: #187498;
        background: rgba(54, 143, 181, 0.14);
    }
    .search-clear.svelte-thofyh .material-icons:where(.svelte-thofyh) {
        font-size: 16px;
        line-height: 1;
    }

    /* `overflow-y: auto` is load-bearing: TreeNodeComponent.findScrollParent
       resolves the scroll container by computed overflowY, and the virtual
       spacer only works if that container is this element. */
    .panel-content.svelte-thofyh {
        flex: 1 1 0%;
        overflow-y: auto !important;
        overflow-x: hidden;
        padding: 0.5rem;
        min-height: 0;
        max-height: 100%;
    }

    /* No height/min-height/max-height/overflow here: the inline height set by
       TreeNodeComponent is the virtual scroll spacer. */
    .hierarchy-tree.svelte-thofyh {
        color: var(--text-primary);
        position: relative;
    }
    /* Rows are absolutely positioned inside this layer and recycled on scroll,
       so only the rows intersecting the viewport ever exist in the DOM. */
    .hierarchy-viewport {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
    .tree-node-content > span {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: 100%;
    }
    .tree-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .tree-visibility-btn:hover {
        opacity: 1;
        color: #368fb5;
        background-color: rgba(54, 143, 181, 0.14);
    }
    /* The positioning slot. Its bottom padding is the gap between cards and is
       part of the measured row height — never give it a margin, which would move
       the box without changing offsetHeight and make rows drift. */
    .tree-node {
        padding-bottom: 4px;
    }
    /* Row card visuals (background, border, radius, hover, selected) come from
       .hier-row in $lib/styles/hierarchy-tree.css. */
    /* Uses an inset shadow rather than a border so a match cannot change the
       row's height and desync it from the fixed-step scroll math. */
    .tree-node .hier-row.search-match {
        background-color: rgba(255, 193, 7, 0.25);
        border-color: rgba(255, 193, 7, 0.5);
        box-shadow: inset 3px 0 0 rgba(255, 193, 7, 0.8);
        font-weight: 600;
    }
    .tree-node .hier-row.search-match:hover {
        background-color: rgba(255, 193, 7, 0.35);
    }
    /* Sizing and colour come from .hier-chevron. */
    .tree-node-content {
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Visibility toggle, styled like the ISS Parts Browser's eye button. */
    .tree-visibility-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 2px;
        padding: 2px;
        border-radius: 4px;
        cursor: pointer;
        color: #8da1b9;
        opacity: 0.75;
        flex-shrink: 0;
        transition:
            opacity 0.12s ease,
            background-color 0.12s ease,
            color 0.12s ease;
    }
    .tree-node svg {
        vertical-align: middle;
        position: relative;
        top: -1px;
    }

    .dark .object-hierarchy-panel.svelte-thofyh {
        background: var(--surface-1);
        border-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
        color: var(--text-primary);
    }

    .dark .search-clear.svelte-thofyh {
        color: #8da1b9;
    }

    .dark .search-clear.svelte-thofyh:hover {
        color: #3fa6d1;
        background-color: rgba(63, 166, 209, 0.16);
    }

    .dark .hierarchy-tree.svelte-thofyh {
        color: #e5eefc;
    }

    .dark .tree-node .hier-row.search-match {
        background-color: rgba(245, 158, 11, 0.32);
        border-color: rgba(245, 158, 11, 0.55);
        box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.9);
    }

    .dark .tree-visibility-btn:hover {
        color: #3fa6d1;
        background-color: rgba(63, 166, 209, 0.16);
    }

  @keyframes svelte-sxnuqv-fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes svelte-sxnuqv-scaleIn {
    from {
      opacity: 0;
      transform: translate(-50%, -48%) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  /* Dialog background and text */
  .settings-dialog {
    background: var(--viewer-panel-bg-solid);
    backdrop-filter: var(--viewer-panel-blur);
    -webkit-backdrop-filter: var(--viewer-panel-blur);
    border: 1px solid var(--viewer-panel-border);
    color: var(--viewer-panel-text);
  }

  .settings-title {
    color: var(--text-primary);
  }

  .settings-description {
    color: var(--text-secondary);
  }

  .settings-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid var(--viewer-panel-border);
  }

  /* Tab strip — divider is provided by the header's bottom border */
  .settings-tabstrip {
    margin-bottom: -1px;
  }

  .settings-tab {
    color: var(--viewer-panel-muted);
  }

  .settings-tab:hover {
    color: var(--viewer-panel-strong);
  }

  .settings-tab:focus,
  .settings-tab:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .settings-tab-active {
    color: var(--viewer-accent-text);
    border-bottom: 2px solid var(--viewer-accent);
    margin-bottom: -1px;
  }

  /* Footer */
  .settings-footer {
    border-top: 1px solid var(--viewer-panel-border);
  }

  /* Reload prompt (shown after changing a baked renderer param) */
  .settings-reload-prompt {
    border-top: 1px solid var(--viewer-panel-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--viewer-panel-text);
  }

  /* Device info card in the Performance tab */
  .settings-device-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--viewer-panel-border);
    color: var(--viewer-panel-text);
  }

  .settings-device-name {
    color: var(--text-secondary);
    font-family: monospace;
  }

  .settings-tier-badge {
    background: var(--viewer-accent-fill-soft);
    color: var(--viewer-accent-text);
  }

  .settings-optimize-btn {
    min-height: 30px;
    background: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    border: 1px solid var(--viewer-accent-border);
    transition: all 0.15s;
  }

  .settings-optimize-btn:hover {
    background: var(--viewer-accent-fill-strong);
    border-color: var(--viewer-accent);
    color: var(--viewer-panel-strong);
  }

  .settings-range {
    accent-color: var(--accent);
  }

  .settings-row {
    padding: 6px 8px;
    border-radius: 4px;
  }

  .settings-rows .settings-row:nth-child(odd) {
    background: rgba(128, 128, 128, 0.06);
  }

  /* Labels and text */
  .settings-label {
    color: var(--text-primary);
  }

  .settings-input-label {
    color: var(--text-primary);
  }

  .settings-section-title {
    color: var(--text-primary);
  }

  .settings-hint {
    color: var(--text-secondary);
  }

  .settings-warning {
    color: var(--danger);
  }

  /* Hover tooltip (bits-ui Tooltip.Content) */
  /* Painted by $lib/styles/viewer-panel.css: the tooltip is portalled out of
     the dialog, so it can't inherit the .viewer-dark-scope tokens. */

  /* Checkboxes */
  .settings-checkbox {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: var(--viewer-panel-border);
    accent-color: var(--viewer-accent);
    color: var(--viewer-accent);
  }

  .settings-checkbox:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-hover-overlay);
  }

  /* Input fields */
  .settings-input {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--viewer-panel-text);
    border: 1px solid var(--viewer-panel-border);
  }

  .settings-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-hover-overlay);
  }

  /* Dropdowns use ViewerSelect; see $lib/styles/viewer-panel.css. */



  /* Buttons — same recipe as the Spatial Viewer's .edge-btn / .icon-btn:
     a dark translucent fill with an accent hover, and an accent-filled primary. */
  .settings-btn-cancel {
    min-height: 30px;
    background-color: rgba(0, 0, 0, 0.25);
    color: var(--viewer-panel-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.15s;
  }

  .settings-btn-cancel:hover {
    background-color: var(--viewer-accent-fill-soft);
    border-color: var(--viewer-accent-border);
    color: var(--viewer-accent-text);
  }

  .settings-btn-apply {
    min-height: 30px;
    background-color: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    border: 1px solid var(--viewer-accent-border);
    transition: all 0.15s;
  }

  .settings-btn-apply:hover {
    background-color: var(--viewer-accent-fill-strong);
    border-color: var(--viewer-accent);
    color: var(--viewer-panel-strong);
  }

  .search-panel.svelte-cr9mx6 {
    position: relative;
    background: var(--surface-1);
    border-radius: 0;
    border: 1px solid var(--surface-2);
    overflow: hidden;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    color: var(--text-primary);
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .panel-header.svelte-cr9mx6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--surface-1);
    border-bottom: 1px solid var(--surface-2);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    flex-shrink: 0;
  }

  .panel-header.svelte-cr9mx6:hover {
    background: color-mix(in srgb, var(--color-secondary-500) 10%, transparent);
  }

  .header-title.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-family: var(--font-heading);
  }

  .header-title.svelte-cr9mx6 h3:where(.svelte-cr9mx6) {
    margin: 0;
    font-size: 12px;
  }

  .badge.svelte-cr9mx6 {
    background: var(--color-secondary-500);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .toggle-btn.svelte-cr9mx6 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    color: var(--text-secondary);
  }

  .toggle-btn.svelte-cr9mx6:hover {
    color: var(--text-primary);
    background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    border-radius: 2px;
  }

  .toggle-btn.svelte-cr9mx6 svg.rotate:where(.svelte-cr9mx6) {
    transform: rotate(180deg);
  }

  .panel-content.svelte-cr9mx6 {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--background);
    flex: 1 1 0%;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
  }

  /* ---- Active Filters ---- */
  .active-filters.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filters-header.svelte-cr9mx6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .filters-title.svelte-cr9mx6 {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--font-body);
  }

  .clear-all-btn.svelte-cr9mx6 {
    background: none;
    border: none;
    color: var(--color-tertiary-500);
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
  }

  .clear-all-btn.svelte-cr9mx6:hover {
    background: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .filter-chips.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .filter-chip.svelte-cr9mx6 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--surface-1);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.75rem;
    font-family: var(--font-body);
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .filter-chip.svelte-cr9mx6:hover {
    border-color: color-mix(in srgb, var(--color-secondary-500) 42%, var(--surface-2));
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  .logic-badge.svelte-cr9mx6 {
    font-weight: 700;
    font-size: 0.625rem;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .logic-badge.and.svelte-cr9mx6 {
    background: color-mix(in srgb, var(--color-secondary-500) 20%, transparent);
    color: var(--color-secondary-400);
  }

  .logic-badge.or.svelte-cr9mx6 {
    background: color-mix(in srgb, var(--color-primary-500) 20%, transparent);
    color: var(--color-primary-500);
  }

  .chip-body.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
  }

  .chip-row.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .chip-label.svelte-cr9mx6 {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    flex-shrink: 0;
    width: 24px;
  }

  .chip-key.svelte-cr9mx6 {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-primary-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chip-operator-badge.svelte-cr9mx6 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--color-secondary-500) 18%, transparent);
    color: var(--color-secondary-500);
    font-weight: 700;
    font-size: 0.6875rem;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    min-width: 20px;
  }

  .chip-value.svelte-cr9mx6 {
    color: var(--text-primary);
    font-weight: 500;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .remove-chip.svelte-cr9mx6 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    transition: all 0.15s;
    border-radius: 3px;
    flex-shrink: 0;
  }

  .remove-chip.svelte-cr9mx6:hover {
    color: var(--color-tertiary-500);
    background-color: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .results-summary.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: color-mix(in srgb, var(--color-secondary-500) 10%, var(--surface-1));
    border-radius: 6px;
    font-size: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--color-secondary-500) 35%, var(--surface-2));
    color: var(--color-secondary-400);
  }

  .exec-time.svelte-cr9mx6 {
    color: var(--text-secondary);
    font-size: 0.625rem;
    font-style: italic;
  }

  /* ---- Add Filter Area ---- */
  .add-criteria.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--surface-1);
    border-radius: 8px;
    border: 1px solid var(--surface-2);
    overflow: visible;
  }

  .add-criteria-collapsed.svelte-cr9mx6 {
    padding: 0;
    background: transparent;
    border: none;
  }

  .add-filter-trigger.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    background: var(--surface-1);
    color: var(--color-secondary-500);
    border: 2px dashed color-mix(in srgb, var(--surface-2) 75%, transparent);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    transition: all 0.2s;
  }

  .add-filter-trigger.svelte-cr9mx6:hover {
    border-color: var(--color-secondary-500);
    background: color-mix(in srgb, var(--color-secondary-500) 10%, transparent);
  }

  .add-filter-trigger.svelte-cr9mx6 svg:where(.svelte-cr9mx6) {
    flex-shrink: 0;
  }

  .filter-form-header.svelte-cr9mx6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .section-title.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-heading);
  }

  .form-close-btn.svelte-cr9mx6 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.15s;
  }

  .form-close-btn.svelte-cr9mx6:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
  }

  /* ---- Logic Selector ---- */
  .logic-selector.svelte-cr9mx6 {
    display: flex;
    gap: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--surface-2);
  }

  .logic-option.svelte-cr9mx6 {
    flex: 1;
    padding: 5px 0;
    border: none;
    background: var(--surface-1);
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-body);
    color: var(--text-secondary);
    transition: all 0.15s;
    text-align: center;
    letter-spacing: 0.04em;
  }

  .logic-option.svelte-cr9mx6:first-child {
    border-right: 1px solid var(--surface-2);
  }

  .logic-option.active.svelte-cr9mx6 {
    background: var(--color-secondary-500);
    color: white;
  }

  .logic-option.svelte-cr9mx6:hover:not(.active) {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
    color: var(--text-primary);
  }

  /* ---- Form Groups ---- */
  .form-group.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: visible;
  }

  .form-group.svelte-cr9mx6 label:where(.svelte-cr9mx6) {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-family: var(--font-body);
  }

  .custom-select.svelte-cr9mx6 {
    position: relative;
    overflow: visible;
  }

  .select-input.svelte-cr9mx6 {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--surface-2);
    border-radius: 6px;
    background: var(--surface-1);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    transition: border-color 0.15s, box-shadow 0.15s;
  }

  .select-input.svelte-cr9mx6:focus {
    outline: none;
    border-color: var(--color-secondary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-secondary-500) 22%, transparent);
  }

  .selected-key-tag.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 3px 8px;
    background: color-mix(in srgb, var(--color-secondary-500) 16%, transparent);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--color-secondary-400);
    width: -moz-fit-content;
    width: fit-content;
  }

  .clear-key-btn.svelte-cr9mx6 {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1px;
    display: flex;
    align-items: center;
    color: var(--color-secondary-400);
    opacity: 0.6;
    transition: opacity 0.15s;
    border-radius: 2px;
  }

  .clear-key-btn.svelte-cr9mx6:hover {
    opacity: 1;
  }

  .dropdown.svelte-cr9mx6 {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface-1);
    border: 1px solid var(--surface-2);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  .dropdown-fixed.svelte-cr9mx6 {
    position: fixed;
    top: auto;
    left: auto;
    right: auto;
  }

  .dropdown-item.svelte-cr9mx6 {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: var(--font-body);
    transition: background 0.1s;
    color: var(--text-primary);
  }

  .dropdown-item.svelte-cr9mx6:hover {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
  }

  .dropdown-item.svelte-cr9mx6:first-child {
    border-radius: 7px 7px 0 0;
  }

  .dropdown-item.svelte-cr9mx6:last-child {
    border-radius: 0 0 7px 7px;
  }

  .key-name.svelte-cr9mx6, .value-name.svelte-cr9mx6 {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
  }

  .key-count.svelte-cr9mx6, .value-count.svelte-cr9mx6 {
    color: var(--text-secondary);
    font-size: 0.625rem;
    background: color-mix(in srgb, var(--surface-2) 65%, transparent);
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 500;
  }

  .no-results.svelte-cr9mx6 {
    padding: 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }

  /* ---- Action Buttons ---- */
  .filter-actions.svelte-cr9mx6 {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }

  .apply-btn.svelte-cr9mx6 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    background: var(--color-secondary-500);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    transition: background-color 0.15s, box-shadow 0.15s;
  }

  .apply-btn.svelte-cr9mx6:hover:not(:disabled) {
    background: var(--color-secondary-400);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-secondary-500) 45%, transparent);
  }

  .apply-btn.svelte-cr9mx6:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .cancel-btn.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: var(--surface-1);
    color: var(--text-secondary);
    border: 1px solid var(--surface-2);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8125rem;
    font-family: var(--font-body);
    transition: all 0.15s;
  }

  .cancel-btn.svelte-cr9mx6:hover {
    background: color-mix(in srgb, var(--color-primary-500) 8%, transparent);
    color: var(--text-primary);
  }

  /* ---- Stats ---- */
  .stats.svelte-cr9mx6 {
    padding: 6px 8px;
    background: var(--surface-1);
    border-radius: 6px;
    font-size: 0.6875rem;
    color: var(--text-secondary);
    border: 1px solid var(--surface-2);
  }

  .stats.svelte-cr9mx6 p:where(.svelte-cr9mx6) {
    margin: 0;
  }

  .stat-item.svelte-cr9mx6 strong:where(.svelte-cr9mx6) {
    color: var(--text-primary);
  }

  .save-collection-trigger.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    font-family: var(--font-body);
    transition: all 0.2s;
  }

  .save-collection-trigger.svelte-cr9mx6:hover {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
  }

  .collection-form.svelte-cr9mx6 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: color-mix(in srgb, #10b981 10%, var(--surface-1));
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, #10b981 28%, var(--surface-2));
  }

  .collection-form-header.svelte-cr9mx6 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .collection-form-title.svelte-cr9mx6 {
    font-size: 0.75rem;
    font-weight: 700;
    color: color-mix(in srgb, #059669 70%, var(--text-primary));
    font-family: var(--font-heading);
  }

  .merge-checkbox.svelte-cr9mx6 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-body);
  }

  /* (unused) .merge-checkbox input[type="checkbox"] {
    accent-color: #059669;
    cursor: pointer;
  }*/

  .dark .search-panel.svelte-cr9mx6 {
    border-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  }

  .dark .panel-header.svelte-cr9mx6,
  .dark .panel-content.svelte-cr9mx6 {
    background: color-mix(in srgb, var(--surface-1) 92%, var(--background));
  }

  .dark .panel-header.svelte-cr9mx6 {
    border-bottom-color: color-mix(in srgb, var(--surface-2) 70%, transparent);
  }

  .dark .filter-chip.svelte-cr9mx6,
  .dark .add-criteria.svelte-cr9mx6,
  .dark .stats.svelte-cr9mx6,
  .dark .dropdown.svelte-cr9mx6,
  .dark .select-input.svelte-cr9mx6,
  .dark .cancel-btn.svelte-cr9mx6,
  .dark .logic-option.svelte-cr9mx6 {
    background: color-mix(in srgb, var(--surface-1) 94%, var(--background));
    border-color: color-mix(in srgb, var(--surface-2) 75%, transparent);
    color: var(--text-primary);
  }

  .dark .logic-option.active.svelte-cr9mx6 {
    background: var(--color-secondary-500);
    color: #fff;
  }

  .dark .results-summary.svelte-cr9mx6 {
    background: color-mix(in srgb, var(--color-secondary-500) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-secondary-500) 38%, transparent);
    color: var(--text-primary);
  }

  .dark .dropdown-item.svelte-cr9mx6:hover,
  .dark .logic-option.svelte-cr9mx6:hover:not(.active),
  .dark .cancel-btn.svelte-cr9mx6:hover,
  .dark .form-close-btn.svelte-cr9mx6:hover,
  .dark .toggle-btn.svelte-cr9mx6:hover {
    background: color-mix(in srgb, var(--color-secondary-500) 16%, transparent);
  }

  .dark .chip-key.svelte-cr9mx6,
  .dark .chip-value.svelte-cr9mx6,
  .dark .key-name.svelte-cr9mx6,
  .dark .value-name.svelte-cr9mx6,
  .dark .section-title.svelte-cr9mx6,
  .dark .collection-form-title.svelte-cr9mx6 {
    color: var(--text-primary);
  }

  .dark .chip-label.svelte-cr9mx6,
  .dark .filters-title.svelte-cr9mx6,
  .dark .exec-time.svelte-cr9mx6,
  .dark .form-group.svelte-cr9mx6 label:where(.svelte-cr9mx6),
  .dark .key-count.svelte-cr9mx6,
  .dark .value-count.svelte-cr9mx6,
  .dark .no-results.svelte-cr9mx6,
  .dark .merge-checkbox.svelte-cr9mx6,
  .dark .toggle-btn.svelte-cr9mx6,
  .dark .clear-all-btn.svelte-cr9mx6 {
    color: var(--text-secondary);
  }

  /* Placement comes from use:navbarAnchor, which drops the panel under the
     navbar's sectioning button. */
  .sectioning-control.svelte-1oejfcq {
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  /* Shell, header and button chrome come from $lib/styles/viewer-panel.css. */
  .sectioning-panel.svelte-1oejfcq {
    margin-top: 8px;
    width: 280px;
  }

  .header-actions.svelte-1oejfcq {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .section-menu.svelte-1oejfcq {
    padding: 8px;
  }

  .menu-section-header.svelte-1oejfcq {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #64748b;
    padding: 2px 4px 6px;
  }

  .section-axis.svelte-1oejfcq {
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .section-axis.svelte-1oejfcq:last-of-type {
    border-bottom: none;
  }

  .section-sliders.svelte-1oejfcq {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 4px 2px 22px;
  }

  .section-sliders.disabled.svelte-1oejfcq {
    opacity: 0.4;
  }

  .section-sliders.svelte-1oejfcq input:where(.svelte-1oejfcq) {
    width: 100%;
    cursor: pointer;
    accent-color: #38bdf8;
  }

  .category-row.svelte-1oejfcq {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 5px;
    border-radius: 5px;
    font-size: 0.7rem;
    color: #e2e8f0;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

  .category-row.svelte-1oejfcq:hover {
    background: rgba(255, 255, 255, 0.05);
  }

  .category-row.svelte-1oejfcq input[type='checkbox']:where(.svelte-1oejfcq) {
    -moz-appearance: none;
         appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    min-width: 13px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition:
      background 0.12s,
      border-color 0.12s;
  }

  .category-row.svelte-1oejfcq input[type='checkbox']:where(.svelte-1oejfcq):checked {
    background: #3fa6d1;
    border-color: #3fa6d1;
  }

  .category-row.svelte-1oejfcq input[type='checkbox']:where(.svelte-1oejfcq):checked::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0px;
    width: 5px;
    height: 8px;
    border: 1.5px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
  }

  .category-row.svelte-1oejfcq input[type='checkbox']:where(.svelte-1oejfcq):focus-visible {
    outline: 2px solid #3fa6d1;
    outline-offset: 2px;
  }

  .category-row.svelte-1oejfcq span:where(.svelte-1oejfcq) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-divider.svelte-1oejfcq {
    height: 1px;
    background: rgba(255, 255, 255, 0.07);
    margin: 8px 0;
  }

  .model-dimensions.svelte-1oejfcq {
    margin: 0 4px 8px;
    font-size: 0.7rem;
    color: var(--viewer-panel-dim);
  }

  .dimension-label.svelte-1oejfcq {
    font-weight: bold;
    margin-bottom: 3px;
  }

  .dimension-values.svelte-1oejfcq {
    display: flex;
    justify-content: space-between;
  }

  .category-menu-actions.svelte-1oejfcq {
    display: flex;
    gap: 4px;
    padding-top: 4px;
  }

  .category-menu-actions.svelte-1oejfcq button:where(.svelte-1oejfcq) {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 0.65rem;
    cursor: pointer;
  }

  .category-menu-actions.svelte-1oejfcq button:where(.svelte-1oejfcq):hover {
    border-color: rgba(63, 166, 209, 0.4);
    color: #3fa6d1;
  }

  .sectioning-actions.svelte-1oejfcq {
    padding-bottom: 2px;
  }

  .section-menu.svelte-1oejfcq input[type='range']:where(.svelte-1oejfcq) {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    outline: none;
  }
  .section-menu.svelte-1oejfcq input[type='range']:where(.svelte-1oejfcq)::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--viewer-accent);
    border-radius: 50%;
    cursor: pointer;
  }
  .section-menu.svelte-1oejfcq input[type='range']:where(.svelte-1oejfcq)::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--viewer-accent);
    border-radius: 50%;
    cursor: pointer;
  }

  .context-menu.svelte-1yiz5x0 {
    position: fixed !important;
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 99999 !important;
    min-width: 180px;
    font-size: 14px;
    color: #ffffff;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    overflow: visible;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .context-menu-header.svelte-1yiz5x0 {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
  }
  .object-name.svelte-1yiz5x0 {
    font-weight: 600;
    color: #f0f0f0;
    font-size: 13px;
    opacity: 0.9;
  }
  .context-menu-item.svelte-1yiz5x0 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
  }
  .context-menu-item.svelte-1yiz5x0:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .context-menu-item.svelte-1yiz5x0:active {
    background: rgba(255, 255, 255, 0.15);
  }
  .context-menu-item.svelte-1yiz5x0 span:where(.svelte-1yiz5x0) {
    flex: 1;
  }
  .shortcut.svelte-1yiz5x0 {
    font-size: 12px;
    opacity: 0.6;
    margin-left: auto;
    flex: none !important;
  }
  .arrow.svelte-1yiz5x0 {
    font-size: 10px;
    opacity: 0.7;
    margin-left: auto;
    flex: none !important;
  }
  .context-menu-separator.svelte-1yiz5x0 {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 4px 0;
  }

  .context-menu-section-header.svelte-1yiz5x0 {
    padding: 8px 12px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
  }

  .context-files-list.svelte-1yiz5x0 {
    max-height: 220px;
    overflow-y: auto;
    padding: 0 6px 8px;
  }

  .context-file-row.svelte-1yiz5x0 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    flex-wrap: wrap;
  }

  .context-file-link.svelte-1yiz5x0 {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 0;
    color: #7bc7ff;
    text-decoration: underline;
    text-align: left;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .context-file-link.svelte-1yiz5x0:hover {
    color: #a6dcff;
  }

  .context-file-state.svelte-1yiz5x0 {
    padding: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
  }

  .context-file-state.error.svelte-1yiz5x0 {
    color: #ff9ca3;
  }

  .submenu-trigger.svelte-1yiz5x0 {
    position: relative;
  }
  .context-submenu.svelte-1yiz5x0 {
    position: absolute;
    left: 100%;
    top: 0;
    background: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    min-width: 140px;
    z-index: 100000 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .context-submenu.svelte-1yiz5x0 .context-menu-item:where(.svelte-1yiz5x0) {
    padding: 8px 12px;
  }
  .context-submenu.svelte-1yiz5x0 .context-menu-item:where(.svelte-1yiz5x0):first-child {
    border-radius: 8px 8px 0 0;
  }
  .context-submenu.svelte-1yiz5x0 .context-menu-item:where(.svelte-1yiz5x0):last-child {
    border-radius: 0 0 8px 8px;
  }
  .context-menu.svelte-1yiz5x0:has(.context-submenu:where(.svelte-1yiz5x0)) {
    overflow: visible;
  }
  .collection-color-dot.svelte-1yiz5x0 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none !important;
    margin-right: 4px;
  }

    .pdf-modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 9998;
    }
    .pdf-modal-content {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 1200px;
        height: 85vh;
        background: white;
        border-radius: 12px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .pdf-modal-header.svelte-yzw1w1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid #e5e7eb;
        background: #f9fafb;
    }
    .pdf-modal-title.svelte-yzw1w1 h2:where(.svelte-yzw1w1) {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #111827;
    }
    .object-info.svelte-yzw1w1 {
        margin: 4px 0 0 0;
        font-size: 14px;
        color: #6b7280;
    }
    .pdf-modal-actions.svelte-yzw1w1 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .pdf-modal-actions .action-btn,
    .pdf-modal-actions .close-btn {
        padding: 8px;
        border-radius: 6px;
        color: #6b7280;
        background: transparent;
        border: 1px solid transparent;
        transition: all 0.15s ease;
    }
    .pdf-modal-actions .close-btn:hover {
        background: #f3f4f6;
        color: #374151;
    }
    .pdf-modal-body.svelte-yzw1w1 {
        flex: 1;
        padding: 0;
        overflow: hidden;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
        min-height: 0; 
    }
    .pdf-error.svelte-yzw1w1 {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #6b7280;
    }
    .pdf-modal-body .pdf-viewer {
        height: 100%;
        background: #f8fafc;
        display: flex;
        flex-direction: column;
    }
    .pdf-modal-body .pdf-canvas-container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 20px;
        height: 100%;
        overflow: auto;
        flex: 1;
    }
    .pdf-modal-body canvas {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        background: white;
    }

  .model-manager-panel.svelte-5fmnqa {
    width: 400px;
    background: var(--viewer-panel-bg-solid);
    backdrop-filter: var(--viewer-panel-blur);
    -webkit-backdrop-filter: var(--viewer-panel-blur);
    border: 1px solid var(--viewer-panel-border);
    border-radius: 8px;
    box-shadow: var(--viewer-panel-shadow);
    font-family:
      'Inter',
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    font-size: 13px;
    overflow: hidden;
  }


  .panel-header.svelte-5fmnqa {
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-title.svelte-5fmnqa {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .panel-header.svelte-5fmnqa h3:where(.svelte-5fmnqa) {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .help-btn {
    padding: 2px !important;
    height: auto !important;
    width: 20px !important;
    color: var(--text-secondary) !important;
    opacity: 0.7 !important;
  }

  .help-btn:hover {
    opacity: 1 !important;
    color: var(--accent) !important;
  }

  .header-actions.svelte-5fmnqa {
    display: flex;
    gap: 4px;
  }

  .help-btn {
    padding: 4px !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
  }

  .help-btn:hover {
    background: var(--hover-overlay) !important;
    color: var(--text-primary) !important;
  }

  .load-btn {
    padding: 4px 8px !important;
    height: auto !important;
    font-size: 11px !important;
    color: var(--accent) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .clear-btn {
    padding: 4px 8px !important;
    height: auto !important;
    color: var(--danger) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
  }

  .clear-btn:hover {
    background: var(--danger-hover-overlay) !important;
    border-color: var(--danger) !important;
  }

  .clear-btn:active {
    background: var(--danger-active-overlay) !important;
    transform: translateY(1px) !important;
  }

  .load-btn-simple.svelte-5fmnqa {
    padding: 4px 8px;
    height: auto;
    font-size: 11px;
    color: var(--accent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
  }

  .load-btn-simple.svelte-5fmnqa:hover {
    background: var(--accent-hover-overlay);
    border-color: var(--accent);
  }

  .models-list.svelte-5fmnqa {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .empty-state.svelte-5fmnqa {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
  }

  .empty-state.svelte-5fmnqa .hint:where(.svelte-5fmnqa) {
    font-size: 11px;
    margin-top: 4px;
    opacity: 0.7;
  }

  .model-item.svelte-5fmnqa {
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
    display: flex;
  }

  .model-item.svelte-5fmnqa:hover {
    background: var(--hover-overlay);
  }

  .model-item.active.svelte-5fmnqa {
    background: var(--accent-hover-overlay);
    border-left: 3px solid var(--accent);
  }

  .model-item.hidden.svelte-5fmnqa {
    opacity: 0.5;
  }

  .model-info.svelte-5fmnqa {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    cursor: pointer;
  }

  .model-header.svelte-5fmnqa {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .model-name.svelte-5fmnqa {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .active-indicator.svelte-5fmnqa {
    color: var(--accent);
    font-size: 12px;
  }

  .model-details.svelte-5fmnqa {
    display: flex;
    flex-direction: column;
    gap: 2px;

    --label-col-width: 92px;
  }

  .detail-row.svelte-5fmnqa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .detail-row.svelte-5fmnqa .label:where(.svelte-5fmnqa) {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    min-width: 50px;
  }

  .model-actions.svelte-5fmnqa {
    display: flex;
    flex-direction: column;
    padding: 8px 4px;
    gap: 2px;
    border-left: 1px solid var(--border-subtle);
    min-width: 40px;
  }

  .action-btn {
    padding: 4px !important;
    height: auto !important;
    width: 28px !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .action-btn:hover {
    color: var(--text-primary) !important;
    background: var(--hover-overlay) !important;
  }

  .remove-btn {
    color: var(--danger) !important;
  }

  .remove-btn:hover {
    color: var(--danger-dark) !important;
    background: var(--danger-hover-overlay) !important;
  }

  /* Scrollbar styling */
  .models-list.svelte-5fmnqa::-webkit-scrollbar {
    width: 6px;
  }

  .models-list.svelte-5fmnqa::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
  }

  .models-list.svelte-5fmnqa::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
  }

  .models-list.svelte-5fmnqa::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  .action-btn {
    padding: 4px !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 4px !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .action-btn:hover {
    background: var(--accent-hover-overlay) !important;
    color: var(--accent) !important;
    border-color: transparent !important;
  }

  .remove-btn:hover {
    background: var(--danger-hover-overlay) !important;
    color: var(--danger) !important;
    border-color: transparent !important;
  }

  .export-btn:hover {
    background: var(--success-hover-overlay) !important;
    color: var(--success) !important;
    border-color: transparent !important;
  }

  .export-btn:disabled {
    opacity: 0.4 !important;
    cursor: wait !important;
  }

  /* Position and scale controls */
  .position-controls.svelte-5fmnqa {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .scale-controls.svelte-5fmnqa {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
  }

  .rotation-controls.svelte-5fmnqa {
    display: flex;
    gap: 4px;
    align-items: center;
    flex: 1;
    min-width: 0;
  }

  .position-input.svelte-5fmnqa,
  .rotation-input.svelte-5fmnqa {
    flex: 1;
    min-width: 0;
  }

  .scale-input.svelte-5fmnqa {
    /* Single input in its row - keep it the same size as one axis input */
    width: calc((100% - 8px) / 3);
    flex: none;
  }

  .position-input.svelte-5fmnqa,
  .scale-input.svelte-5fmnqa,
  .rotation-input.svelte-5fmnqa {
    box-sizing: border-box;
    padding: 2px 4px;
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: 10px;
    font-family:
      'Inter',
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;
    background: var(--surface-1);
    color: var(--text-primary);
    text-align: center;
  }

  .position-input.svelte-5fmnqa:focus,
  .scale-input.svelte-5fmnqa:focus,
  .rotation-input.svelte-5fmnqa:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-hover-overlay);
  }

  .position-input.svelte-5fmnqa:hover,
  .scale-input.svelte-5fmnqa:hover,
  .rotation-input.svelte-5fmnqa:hover {
    border-color: var(--border-medium);
  }

  /* Label with reset button styling */
  .label-with-reset.svelte-5fmnqa {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 var(--label-col-width);
    min-width: 0;
  }

  .reset-btn.svelte-5fmnqa {
    padding: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0;
  }

  .reset-btn.svelte-5fmnqa:hover {
    background: var(--accent-hover-overlay);
    border-color: transparent;
    color: var(--accent);
  }

  .reset-btn.svelte-5fmnqa:active {
    transform: scale(0.95);
  }

  .center-btn.svelte-5fmnqa {
    padding: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--success);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0;
  }

  .center-btn.svelte-5fmnqa:hover {
    background: var(--success-hover-overlay);
    border-color: transparent;
    color: var(--success-dark);
  }

  .center-btn.svelte-5fmnqa:active {
    background: var(--success-active-overlay);
    transform: scale(0.95);
  }

    .multi-model-guide-overlay.svelte-1bxxsje {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    .guide-content.svelte-1bxxsje {
        background: white;
        border-radius: 12px;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        position: relative;
    }

    .guide-header.svelte-1bxxsje {
        padding: 20px 24px 16px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .guide-header.svelte-1bxxsje h3:where(.svelte-1bxxsje) {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }

    .close-btn.svelte-1bxxsje {
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

    .close-btn.svelte-1bxxsje:hover {
        background: #f0f0f0;
        color: #666;
    }

    .guide-steps.svelte-1bxxsje {
        padding: 24px;
    }

    .step.svelte-1bxxsje {
        display: flex;
        margin-bottom: 20px;
        align-items: flex-start;
    }

    .step.svelte-1bxxsje:last-child {
        margin-bottom: 0;
    }

    .step-number.svelte-1bxxsje {
        background: #2196f3;
        color: white;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        flex-shrink: 0;
        margin-right: 16px;
        margin-top: 2px;
    }

    .step-content.svelte-1bxxsje h4:where(.svelte-1bxxsje) {
        margin: 0 0 8px 0;
        font-size: 15px;
        font-weight: 600;
        color: #333;
    }

    .step-content.svelte-1bxxsje p:where(.svelte-1bxxsje) {
        margin: 0 0 8px 0;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    .step-content.svelte-1bxxsje ul:where(.svelte-1bxxsje) {
        margin: 8px 0 0 0;
        padding-left: 16px;
        font-size: 14px;
        color: #666;
        line-height: 1.5;
    }

    .step-content.svelte-1bxxsje li:where(.svelte-1bxxsje) {
        margin-bottom: 4px;
    }

    .guide-footer.svelte-1bxxsje {
        padding: 16px 24px 24px;
        border-top: 1px solid #f0f0f0;
        background: #f8f9fa;
        border-radius: 0 0 12px 12px;
    }

    .guide-footer.svelte-1bxxsje p:where(.svelte-1bxxsje) {
        margin: 0;
        font-size: 14px;
        color: #666;
        text-align: center;
    }

    /* Scrollbar styling */
    .guide-content.svelte-1bxxsje::-webkit-scrollbar {
        width: 6px;
    }

    .guide-content.svelte-1bxxsje::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    .guide-content.svelte-1bxxsje::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }

    /* Shell, header, close button and button base come from the shared
       always-dark layer in $lib/styles/viewer-panel.css. */
    .measurement-panel.svelte-wh5rg6 {
        width: 300px;
    }

    .panel-content.svelte-wh5rg6 {
        padding: 12px;
        max-height: 400px;
        overflow-y: auto;
    }

    /* Buttons share the row; with only "Start Measuring" present it stretches
       full width instead of hugging the left edge. */
    .measurement-controls.svelte-wh5rg6 {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
    }

    .measurement-controls.svelte-wh5rg6 > button {
        flex: 1 1 0;
    }

    /* Idle reads as the app accent, active fills solid so the live state is obvious. */
    .measure-toggle.svelte-wh5rg6 {
        background: var(--viewer-accent-fill-soft);
        border-color: var(--viewer-accent-border);
        color: var(--viewer-accent-text);
    }

    .measure-toggle.svelte-wh5rg6:hover {
        background: var(--viewer-accent-fill);
    }

    .measure-toggle.active.svelte-wh5rg6 {
        background: var(--viewer-accent-fill-strong);
        border-color: var(--viewer-accent);
        color: var(--viewer-panel-strong);
    }

    .measurements-list.svelte-wh5rg6 {
        max-height: 300px;
        overflow-y: auto;
    }

    .measurements-header.svelte-wh5rg6 {
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--viewer-panel-border);
    }

    .count.svelte-wh5rg6 {
        font-size: 11px;
        color: var(--viewer-panel-muted);
    }

    .empty-hint.svelte-wh5rg6 {
        margin: 0;
        font-size: 11px;
        line-height: 1.5;
        color: var(--viewer-panel-faint);
    }

    .measurement-item.svelte-wh5rg6 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        margin-bottom: 8px;
        transition: all 0.2s ease;
    }

    .measurement-item.svelte-wh5rg6:hover {
        background: var(--viewer-panel-raised);
        border-color: var(--viewer-panel-border);
    }

    .measurement-info.svelte-wh5rg6 {
        flex: 1;
    }

    /* Matches the red of the measurement line/label drawn in the 3D scene. */
    .distance.svelte-wh5rg6 {
        font-size: 12px;
        font-weight: 600;
        color: #ff4444;
        font-family: monospace;
    }

    .measurement-actions.svelte-wh5rg6 {
        display: flex;
        gap: 4px;
    }

    /* Scrollbar styling */
    .measurements-list.svelte-wh5rg6::-webkit-scrollbar,
    .panel-content.svelte-wh5rg6::-webkit-scrollbar {
        width: 6px;
    }

    .measurements-list.svelte-wh5rg6::-webkit-scrollbar-track,
    .panel-content.svelte-wh5rg6::-webkit-scrollbar-track {
        background: var(--viewer-panel-raised);
        border-radius: 3px;
    }

    .measurements-list.svelte-wh5rg6::-webkit-scrollbar-thumb,
    .panel-content.svelte-wh5rg6::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3px;
    }

    .measurements-list.svelte-wh5rg6::-webkit-scrollbar-thumb:hover,
    .panel-content.svelte-wh5rg6::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }

    .transform-info.svelte-150jcbg {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        background: rgba(30, 30, 30, 0.95);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 8px;
        padding: 12px 16px;
        color: white;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        font-size: 13px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        min-width: 280px;
        text-align: center;
        transition: all 0.2s ease-in-out;
    }

    .transform-header.svelte-150jcbg {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-bottom: 8px;
        font-weight: 600;
    }

    .mode-icon.svelte-150jcbg {
        font-size: 16px;
        font-weight: bold;
        opacity: 0.9;
    }

    .mode-label.svelte-150jcbg {
        color: #ffd700;
        font-weight: 600;
    }

    .axis-info.svelte-150jcbg {
        color: #ccc;
        font-weight: 400;
        font-size: 12px;
    }

    .transform-values.svelte-150jcbg {
        display: flex;
        justify-content: space-around;
        gap: 16px;
    }

    .value-item.svelte-150jcbg {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: 1;
    }

    .axis-label.svelte-150jcbg {
        font-size: 11px;
        font-weight: 600;
        opacity: 0.8;
    }

    .value.svelte-150jcbg {
        font-family: 'JetBrains Mono', 'Fira Code', monospace;
        font-size: 12px;
        font-weight: 500;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        min-width: 50px;
    }

    .x-axis.svelte-150jcbg .axis-label:where(.svelte-150jcbg) {
        color: #ff4444;
    }

    .y-axis.svelte-150jcbg .axis-label:where(.svelte-150jcbg) {
        color: #44ff44;
    }

    .z-axis.svelte-150jcbg .axis-label:where(.svelte-150jcbg) {
        color: #4444ff;
    }

    .x-axis.svelte-150jcbg .value:where(.svelte-150jcbg) {
        border: 1px solid rgba(255, 68, 68, 0.3);
    }

    .y-axis.svelte-150jcbg .value:where(.svelte-150jcbg) {
        border: 1px solid rgba(68, 255, 68, 0.3);
    }

    .z-axis.svelte-150jcbg .value:where(.svelte-150jcbg) {
        border: 1px solid rgba(68, 68, 255, 0.3);
    }

  /* Placement comes from use:navbarAnchor, which drops the panel under the
     navbar's material-editor button and shifts it clear of the detail panel. */
  .material-editor-panel.svelte-1kn5yxe {
    width: 300px;
    max-height: calc(100vh - 100px);
    background: var(--surface-1);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--viewer-panel-shadow);
    display: flex;
    flex-direction: column;
    z-index: 100;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.8rem;
    color: var(--text-primary);
    backdrop-filter: var(--viewer-panel-blur);
    -webkit-backdrop-filter: var(--viewer-panel-blur);
  }

  /* ── Header ─────────────────────────────────────── */
  .panel-header.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
  }
  .header-title.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.85rem;
  }
  .badge.svelte-1kn5yxe {
    background: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 10px;
    font-weight: 600;
  }
  .header-actions.svelte-1kn5yxe {
    display: flex;
    gap: 4px;
    align-items: center;
  }

  /* ── Stats ──────────────────────────────────────── */
  .stats-bar.svelte-1kn5yxe {
    display: flex;
    gap: 6px;
    padding: 4px 12px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
  }
  .dirty-badge.svelte-1kn5yxe {
    color: #fb923c;
    font-weight: 600;
  }

  /* ── Material list ──────────────────────────────── */
  .material-list.svelte-1kn5yxe {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    padding: 4px 0;
  }
  .material-row.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
  }
  .material-row.svelte-1kn5yxe:hover {
    background: var(--accent-hover-overlay);
  }
  .material-row.selected.svelte-1kn5yxe {
    background: var(--accent-active-overlay);
    border-left: 3px solid var(--accent);
  }
  .material-row.dirty.svelte-1kn5yxe .material-label:where(.svelte-1kn5yxe) {
    font-style: italic;
  }

  .color-swatch.svelte-1kn5yxe {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  }

  .material-info.svelte-1kn5yxe {
    flex: 1;
    min-width: 0;
  }
  .material-label.svelte-1kn5yxe {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
  }
  .material-meta.svelte-1kn5yxe {
    font-size: 0.65rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .modified-dot.svelte-1kn5yxe {
    color: #fb923c;
    font-size: 0.6rem;
  }
  .row-actions.svelte-1kn5yxe {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .material-row.svelte-1kn5yxe:hover .row-actions:where(.svelte-1kn5yxe) {
    opacity: 1;
  }

  .empty-state.svelte-1kn5yxe {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
  }

  /* ── Editor pane ────────────────────────────────── */
  .editor-pane.svelte-1kn5yxe {
    border-top: 1px solid var(--border-light);
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 0 0 8px 8px;
  }
  .editor-header.svelte-1kn5yxe {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .editor-label.svelte-1kn5yxe {
    font-weight: 600;
    font-size: 0.8rem;
  }

  .editor-field.svelte-1kn5yxe {
    margin-bottom: 8px;
  }
  .editor-field.svelte-1kn5yxe label:where(.svelte-1kn5yxe) {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 3px;
    font-weight: 500;
  }

  .color-field.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .color-picker.svelte-1kn5yxe {
    width: 32px;
    height: 28px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    background: var(--surface-1);
  }
  .color-text.svelte-1kn5yxe {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.75rem;
    font-family: monospace;
    text-transform: uppercase;
    background: var(--surface-1);
    color: var(--text-primary);
  }

  .slider-field.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .slider-field.svelte-1kn5yxe input[type='range']:where(.svelte-1kn5yxe) {
    flex: 1;
    height: 4px;
    accent-color: var(--accent);
  }
  .slider-value.svelte-1kn5yxe {
    font-size: 0.7rem;
    color: var(--text-secondary);
    min-width: 32px;
    text-align: right;
    font-family: monospace;
  }

  /* ── Buttons ────────────────────────────────────── */
  .btn-icon.svelte-1kn5yxe {
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    padding: 3px;
    border-radius: 4px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn-icon.svelte-1kn5yxe:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
  }
  .btn-icon-sm.svelte-1kn5yxe {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
  }
  .btn-icon-sm.svelte-1kn5yxe:hover {
    background: var(--hover-overlay);
    color: var(--text-primary);
  }

  .editor-actions.svelte-1kn5yxe {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }
  .btn-apply.svelte-1kn5yxe {
    flex: 1;
    padding: 6px;
    background: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    border: 1px solid var(--viewer-accent-border);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .btn-apply.svelte-1kn5yxe:hover {
    background: var(--viewer-accent-fill-strong);
    border-color: var(--viewer-accent);
    color: var(--viewer-panel-strong);
  }

  /* ── Presets ────────────────────────────────────── */
  .presets-section.svelte-1kn5yxe {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .import-notice.svelte-1kn5yxe {
    padding: 5px 12px;
    font-size: 0.68rem;
    color: var(--viewer-accent-text);
    background: var(--viewer-accent-fill-soft);
    border-bottom: 1px solid var(--viewer-panel-border);
    line-height: 1.4;
  }
  .presets-header.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    padding: 0 12px 0 0;
  }
  .presets-toggle.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    color: inherit;
    text-align: left;
  }
  .presets-toggle.svelte-1kn5yxe:hover {
    background: var(--hover-overlay);
  }
  .presets-toggle-icon.svelte-1kn5yxe {
    font-size: 0.65rem;
    width: 12px;
    color: var(--viewer-panel-faint);
  }
  .preset-badge.svelte-1kn5yxe {
    background: rgba(251, 146, 60, 0.25);
    color: #fb923c;
    font-size: 0.6rem;
    padding: 0 5px;
  }
  .presets-spacer.svelte-1kn5yxe {
    flex: 1;
  }
  .save-preset-btn.svelte-1kn5yxe {
    color: var(--viewer-accent-text) !important;
  }
  .save-preset-btn.svelte-1kn5yxe:hover {
    color: var(--viewer-panel-strong) !important;
  }
  .presets-body.svelte-1kn5yxe {
    padding: 0 12px 8px;
  }
  .presets-empty.svelte-1kn5yxe {
    font-size: 0.7rem;
    color: #999;
    text-align: center;
    padding: 6px 0;
    line-height: 1.5;
  }
  .presets-list.svelte-1kn5yxe {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .preset-row.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 0;
  }
  .preset-apply-btn.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--viewer-accent-fill-soft);
    border: 1px solid var(--viewer-accent-border);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 0.72rem;
    color: inherit;
    transition: all 0.15s;
    flex: 1;
    min-width: 0;
  }
  .preset-apply-btn.svelte-1kn5yxe:hover {
    background: var(--viewer-accent-fill);
    border-color: var(--viewer-accent-border);
  }
  .preset-name.svelte-1kn5yxe {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .preset-save-row.svelte-1kn5yxe {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
  }
  .preset-name-input.svelte-1kn5yxe,
  .preset-rename-input.svelte-1kn5yxe {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid var(--viewer-panel-border);
    border-radius: 4px;
    font-size: 0.72rem;
    outline: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--viewer-panel-text);
    min-width: 0;
  }
  .preset-rename-input.svelte-1kn5yxe {
    border-color: var(--viewer-panel-border);
  }
  .preset-name-input.svelte-1kn5yxe:focus,
  .preset-rename-input.svelte-1kn5yxe:focus {
    border-color: var(--viewer-accent-border);
    box-shadow: 0 0 0 2px var(--viewer-accent-fill-soft);
  }
  .btn-preset-save.svelte-1kn5yxe {
    padding: 4px 10px;
    background: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    border: 1px solid var(--viewer-accent-border);
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }
  .btn-preset-save.svelte-1kn5yxe:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .btn-preset-save.svelte-1kn5yxe:not(:disabled):hover {
    background: var(--viewer-accent-fill-strong);
    border-color: var(--viewer-accent);
    color: var(--viewer-panel-strong);
  }


  .import-graph.svelte-fjlqak {
    flex-shrink: 0;
    border-bottom: 1px solid var(--surface-2);
    font-size: 12px;
  }

  .import-toggle.svelte-fjlqak {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    text-align: left;
  }

  .import-toggle.svelte-fjlqak:hover {
    color: var(--color-secondary-500);
  }

  .import-types.svelte-fjlqak {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 10px 6px;
  }

  .type-chip.svelte-fjlqak {
    /* Sized to content and wrapping: the list is whatever types the project
       actually has, which is open-ended once people create their own. */
    flex: 0 1 auto;
    padding: 3px 8px;
    border: 1px solid var(--surface-2);
    border-radius: 3px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-body);
    transition: border-color 0.15s, color 0.15s;
  }

  .type-chip.svelte-fjlqak:hover {
    color: var(--color-secondary-500);
  }

  .type-chip.active.svelte-fjlqak {
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-500);
  }

  .import-search.svelte-fjlqak {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px 6px;
    padding: 4px 6px;
    border: 1px solid var(--surface-2);
    border-radius: 3px;
    color: var(--text-secondary);
  }

  .import-search.svelte-fjlqak input:where(.svelte-fjlqak) {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 11px;
  }

  .import-search.svelte-fjlqak input:where(.svelte-fjlqak)::-moz-placeholder {
    color: var(--text-secondary);
  }

  .import-search.svelte-fjlqak input:where(.svelte-fjlqak)::placeholder {
    color: var(--text-secondary);
  }

  .import-clear.svelte-fjlqak {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    cursor: pointer;
    color: var(--text-secondary);
  }

  .import-list.svelte-fjlqak {
    list-style: none;
    margin: 0 0 6px;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
  }

  .import-row.svelte-fjlqak {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
  }

  .import-row.svelte-fjlqak:hover {
    background: color-mix(in srgb, var(--surface-2) 40%, transparent);
  }

  .import-name.svelte-fjlqak {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 11px;
  }

  .import-count.svelte-fjlqak {
    flex-shrink: 0;
    color: var(--text-secondary);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
  }

  .import-btn.svelte-fjlqak {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 2px;
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    color: var(--text-secondary);
  }

  .import-btn.svelte-fjlqak:hover:not(:disabled) {
    color: var(--color-secondary-500);
  }

  .import-btn.svelte-fjlqak:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .import-note.svelte-fjlqak {
    margin: 0;
    padding: 4px 10px 8px;
    color: var(--text-secondary);
    font-size: 11px;
  }

  .import-note.error.svelte-fjlqak {
    color: var(--color-tertiary-500);
  }

  .collections-panel.svelte-1o8dcsv {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-primary);
    background: var(--surface-1);
    overflow: hidden;
  }

  .collections-header.svelte-1o8dcsv {
    flex-shrink: 0;
    padding: 10px;
    border-bottom: 1px solid var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .search-bar.svelte-1o8dcsv {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--surface-2);
    color: var(--text-secondary);
  }

  .search-input.svelte-1o8dcsv {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-primary);
  }

  .search-input.svelte-1o8dcsv::-moz-placeholder {
    color: var(--text-secondary);
  }

  .search-input.svelte-1o8dcsv::placeholder {
    color: var(--text-secondary);
  }

  .search-clear.svelte-1o8dcsv {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    border-radius: 3px;
    transition: color 0.15s;
  }

  .search-clear.svelte-1o8dcsv:hover {
    color: var(--color-tertiary-500);
  }

  .new-collection-btn.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px dashed color-mix(in srgb, var(--surface-2) 75%, transparent);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.2s, color 0.2s;
    width: 100%;
    justify-content: center;
  }

  .new-collection-btn.svelte-1o8dcsv:hover {
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-500);
    background: color-mix(in srgb, var(--color-secondary-500) 8%, transparent);
  }

  .new-collection-form.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .name-input.svelte-1o8dcsv,
  .rename-input.svelte-1o8dcsv {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid var(--surface-2);
    color: var(--text-primary);
    background: var(--surface-1);
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--font-body);
  }

  .name-input.svelte-1o8dcsv:focus,
  .rename-input.svelte-1o8dcsv:focus {
    outline: none;
    border-color: var(--color-secondary-500);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-secondary-500) 20%, transparent);
  }

  .selection-info.svelte-1o8dcsv {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
  }

  .collections-list.svelte-1o8dcsv {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
  }

  .empty-state.svelte-1o8dcsv {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
  }

  .empty-state.svelte-1o8dcsv p:where(.svelte-1o8dcsv) {
    margin: 0 0 4px 0;
  }

  .empty-state.svelte-1o8dcsv .hint:where(.svelte-1o8dcsv) {
    font-size: 11px;
    color: var(--text-secondary);
  }

  .collection-item.svelte-1o8dcsv {
    border-bottom: 1px solid color-mix(in srgb, var(--surface-2) 65%, transparent);
  }

  .collection-item.active.svelte-1o8dcsv {
    background: color-mix(in srgb, var(--color-secondary-500) 14%, transparent);
    border-left: 3px solid var(--color-secondary-500);
  }

  .collection-item.active.svelte-1o8dcsv .collection-header:where(.svelte-1o8dcsv) {
    font-weight: 600;
  }

  .collection-header.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    cursor: default;
    transition: background 0.15s;
  }

  .collection-header.svelte-1o8dcsv:hover {
    background: color-mix(in srgb, var(--color-secondary-500) 8%, transparent);
  }

  .expand-toggle.svelte-1o8dcsv {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  .expand-toggle.svelte-1o8dcsv:hover {
    color: var(--text-primary);
  }

  .color-dot.svelte-1o8dcsv {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--surface-2) 80%, transparent);
  }

  .collection-name.svelte-1o8dcsv {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary);
  }

  .member-count.svelte-1o8dcsv {
    color: var(--text-secondary);
    font-size: 11px;
    flex-shrink: 0;
    margin-right: 4px;
  }

  .collection-actions.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
  }

  .collection-header.svelte-1o8dcsv:hover .collection-actions:where(.svelte-1o8dcsv) {
    opacity: 1;
  }

  /* Persistent state indicator badges shown inline next to the name */
  .state-indicator.svelte-1o8dcsv {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
  }

  .state-indicator.hidden-state.svelte-1o8dcsv {
    color: color-mix(in srgb, var(--color-tertiary-500) 75%, #fff);
  }

  .state-indicator.hidden-state.svelte-1o8dcsv:hover {
    color: var(--color-tertiary-500);
    background: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .state-indicator.isolated-state.svelte-1o8dcsv {
    color: #ff9800;
  }

  .state-indicator.isolated-state.svelte-1o8dcsv:hover {
    color: #e65100;
    background: rgba(255, 152, 0, 0.2);
  }

  .action-icon-btn.svelte-1o8dcsv {
    background: none;
    border: none;
    cursor: pointer;
    padding: 3px;
    color: var(--text-secondary);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
  }

  .action-icon-btn.svelte-1o8dcsv:hover {
    color: var(--color-secondary-500);
    background: color-mix(in srgb, var(--color-secondary-500) 14%, transparent);
  }

  .action-icon-btn.danger.svelte-1o8dcsv:hover {
    color: var(--color-tertiary-500);
    background: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .action-icon-btn.confirm.svelte-1o8dcsv {
    color: #43a047;
  }

  .action-icon-btn.confirm.svelte-1o8dcsv:hover {
    background: rgba(67, 160, 71, 0.1);
  }

  .action-icon-btn.cancel.svelte-1o8dcsv {
    color: var(--text-secondary);
  }

  .action-icon-btn.cancel.svelte-1o8dcsv:hover {
    color: var(--color-tertiary-500);
    background: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .color-picker-row.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 28px;
    background: color-mix(in srgb, var(--surface-2) 45%, var(--surface-1));
  }

  .color-input.svelte-1o8dcsv {
    width: 28px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--surface-2);
    border-radius: 3px;
    cursor: pointer;
  }

  .color-hex.svelte-1o8dcsv {
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-secondary);
  }

  .member-list.svelte-1o8dcsv {
    padding: 2px 8px 4px 20px;
    border-left: 2px solid color-mix(in srgb, var(--surface-2) 75%, transparent);
    margin-left: 14px;
  }

  .member-row.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 0;
  }

  .member-row.svelte-1o8dcsv:hover .remove-member-btn:where(.svelte-1o8dcsv) {
    color: var(--text-secondary);
  }

  .member-item.svelte-1o8dcsv {
    display: block;
    flex: 1;
    min-width: 0;
    text-align: left;
    padding: 3px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 2px;
    transition: background 0.1s, color 0.1s;
  }

  .member-item.svelte-1o8dcsv:hover {
    background: color-mix(in srgb, var(--color-secondary-500) 12%, transparent);
    color: var(--color-secondary-500);
  }

  .member-name.svelte-1o8dcsv {
    pointer-events: none;
  }

  .remove-member-btn.svelte-1o8dcsv {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-tertiary-500);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
  }

  .remove-member-btn.svelte-1o8dcsv:hover {
    color: var(--color-tertiary-500);
    background: color-mix(in srgb, var(--color-tertiary-500) 12%, transparent);
  }

  .add-selected-btn.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    margin-top: 2px;
    border: 1px dashed color-mix(in srgb, var(--surface-2) 78%, transparent);
    border-radius: 3px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    transition: border-color 0.2s, color 0.2s;
  }

  .add-selected-btn.svelte-1o8dcsv:hover {
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-500);
  }

  .panel-footer.svelte-1o8dcsv {
    flex-shrink: 0;
    padding: 8px;
    border-top: 1px solid var(--surface-2);
    display: flex;
    justify-content: center;
  }

  .show-all-btn.svelte-1o8dcsv {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    border: 1px solid var(--surface-2);
    border-radius: 4px;
    background: var(--surface-1);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: border-color 0.2s, color 0.2s;
  }

  .show-all-btn.svelte-1o8dcsv:hover {
    border-color: var(--color-secondary-500);
    color: var(--color-secondary-500);
  }

  /* ── Merge collections ────────────────────────────────────────────── */

  /* (unused) .merge-trigger-bar {
    flex-shrink: 0;
    padding: 4px 10px;
    border-bottom: 1px solid var(--surface-2);
  }*/

  /* (unused) .merge-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 5px 10px;
    border: 1px dashed color-mix(in srgb, var(--surface-2) 75%, transparent);
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-body);
    transition: all 0.2s;
  }*/

  /* (unused) .merge-trigger-btn:hover {
    border-color: #7c3aed;
    color: #7c3aed;
    background: color-mix(in srgb, #7c3aed 10%, transparent);
  }*/

  /* (unused) .merge-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--surface-2);
    background: color-mix(in srgb, #7c3aed 10%, var(--surface-1));
    color: #6d28d9;
    font-size: 11px;
  }*/

  /* (unused) .merge-hint {
    flex: 1;
    font-family: var(--font-body);
  }*/

  /* (unused) .merge-cancel-btn {
    background: var(--surface-1);
    border: 1px solid #d8b4fe;
    border-radius: 4px;
    padding: 3px 10px;
    color: #7c3aed;
    cursor: pointer;
    font-size: 11px;
    font-family: var(--font-body);
    transition: all 0.15s;
  }*/

  /* (unused) .merge-cancel-btn:hover {
    background: color-mix(in srgb, #7c3aed 14%, transparent);
  }*/

  .collection-item.merge-selectable.svelte-1o8dcsv {
    cursor: pointer;
  }

  .collection-item.merge-selectable.svelte-1o8dcsv:hover {
    background: color-mix(in srgb, #7c3aed 10%, transparent);
  }

  .collection-item.merge-selected.svelte-1o8dcsv {
    background: color-mix(in srgb, #7c3aed 16%, transparent);
    border-left: 3px solid #7c3aed;
  }

  /* (unused) .merge-confirm-btn {
    background: #7c3aed;
    border: none;
    border-radius: 4px;
    padding: 3px 10px;
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font-body);
    transition: all 0.15s;
    white-space: nowrap;
  }*/

  /* (unused) .merge-confirm-btn:hover {
    background: #6d28d9;
  }*/

  .dark .collections-panel.svelte-1o8dcsv {
    background: color-mix(in srgb, var(--surface-1) 94%, var(--background));
  }

  .dark .collections-header.svelte-1o8dcsv,
  .dark .search-bar.svelte-1o8dcsv,
  .dark .panel-footer.svelte-1o8dcsv /* (unused) .dark .merge-trigger-bar,
  .dark .merge-bar*/ {
    border-color: color-mix(in srgb, var(--surface-2) 75%, transparent);
  }

  .dark .collection-item.svelte-1o8dcsv {
    border-bottom-color: color-mix(in srgb, var(--surface-2) 60%, transparent);
  }

  .dark .collection-header.svelte-1o8dcsv:hover,
  .dark .member-item.svelte-1o8dcsv:hover,
  .dark .action-icon-btn.svelte-1o8dcsv:hover,
  .dark .new-collection-btn.svelte-1o8dcsv:hover,
  .dark .add-selected-btn.svelte-1o8dcsv:hover,
  .dark .show-all-btn.svelte-1o8dcsv:hover /* (unused) .dark .merge-trigger-btn:hover*/,
  .dark .collection-item.merge-selectable.svelte-1o8dcsv:hover {
    background: color-mix(in srgb, var(--color-secondary-500) 18%, transparent);
  }

  .dark .name-input.svelte-1o8dcsv,
  .dark .rename-input.svelte-1o8dcsv,
  .dark .show-all-btn.svelte-1o8dcsv /* (unused) .dark .merge-cancel-btn*/ {
    background: color-mix(in srgb, var(--surface-1) 92%, var(--background));
    border-color: color-mix(in srgb, var(--surface-2) 75%, transparent);
    color: var(--text-primary);
  }

  .dark .collection-name.svelte-1o8dcsv,
  .dark .member-item.svelte-1o8dcsv,
  .dark .search-input.svelte-1o8dcsv {
    color: var(--text-primary);
  }

  .dark .search-input.svelte-1o8dcsv::-moz-placeholder {
    color: var(--text-secondary);
  }

  .dark .selection-info.svelte-1o8dcsv,
  .dark .member-count.svelte-1o8dcsv,
  .dark .color-hex.svelte-1o8dcsv,
  .dark .search-input.svelte-1o8dcsv::placeholder,
  .dark .search-clear.svelte-1o8dcsv,
  .dark .expand-toggle.svelte-1o8dcsv,
  .dark .action-icon-btn.svelte-1o8dcsv,
  .dark .add-selected-btn.svelte-1o8dcsv,
  .dark .new-collection-btn.svelte-1o8dcsv {
    color: var(--text-secondary);
  }

  .dark .collection-item.active.svelte-1o8dcsv,
  .dark .collection-item.merge-selected.svelte-1o8dcsv {
    background: color-mix(in srgb, var(--color-secondary-500) 22%, transparent);
  }

  .dark .color-picker-row.svelte-1o8dcsv {
    background: color-mix(in srgb, var(--surface-1) 88%, var(--background));
  }

  .dark .member-list.svelte-1o8dcsv {
    border-left-color: color-mix(in srgb, var(--surface-2) 80%, transparent);
  }

  .perf-nudge.svelte-1xlu04v {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: min(92%, 640px);
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    /* Same glass recipe as the navbar panels; see $lib/styles/viewer-panel.css.
       The light `var(..., #fff)` fallbacks made this a white slab over the
       dark canvas whenever the page theme was light. */
    background: var(--viewer-panel-bg-solid);
    backdrop-filter: var(--viewer-panel-blur);
    -webkit-backdrop-filter: var(--viewer-panel-blur);
    color: var(--viewer-panel-text);
    border: 1px solid rgba(251, 146, 60, 0.4);
    box-shadow: var(--viewer-panel-shadow);
    font-size: 0.8125rem;
  }

  .perf-nudge-icon.svelte-1xlu04v {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
  }

  .perf-nudge-text.svelte-1xlu04v {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
  }

  .perf-nudge-message.svelte-1xlu04v {
    font-weight: 600;
  }

  .perf-nudge-gpu.svelte-1xlu04v {
    color: var(--viewer-panel-muted);
    font-size: 0.6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .perf-nudge-actions.svelte-1xlu04v {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    flex-shrink: 0;
  }

  .perf-nudge-btn.svelte-1xlu04v {
    padding: 0.3125rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.25);
    color: var(--viewer-panel-text);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.15s;
    white-space: nowrap;
  }

  .perf-nudge-btn.svelte-1xlu04v:hover {
    background: var(--viewer-accent-fill-soft);
    border-color: var(--viewer-accent-border);
    color: var(--viewer-accent-text);
  }

  .perf-nudge-btn-primary.svelte-1xlu04v {
    background: var(--viewer-accent-fill);
    color: var(--viewer-accent-text);
    border-color: var(--viewer-accent-border);
  }

  .perf-nudge-btn-primary.svelte-1xlu04v:hover {
    background: var(--viewer-accent-fill-strong);
    border-color: var(--viewer-accent);
    color: var(--viewer-panel-strong);
  }

  .perf-nudge-btn-ghost.svelte-1xlu04v {
    background: transparent;
    border-color: transparent;
    padding: 0.3125rem 0.5rem;
  }

  .viewer-container.svelte-1xw9f2h {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* The WebGL canvas clears transparent, so this is what you actually see
       behind the model. Set from Settings > Environment > Canvas Background. */
    background: var(--viewer-canvas-bg, #17263c);
    font-family: var(--font-body);
  }

  .viewer-container.fullscreen-mode {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
    background: var(--viewer-canvas-bg, #17263c) !important;
  }

  /* Card treatment matches the other hierarchy panels
     (see $lib/styles/hierarchy-tree.css .hier-panel). The container is the card,
     which is why the inner panel is flattened by the override further down. */
  .left-panel-container.svelte-1xw9f2h {
    position: fixed;
    top: 56px;
    left: calc(var(--sidebar-width, 5rem) + 5px);
    z-index: 100;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border-radius: 12px;
    /* Runs to the bottom of the viewport, matching the other hierarchy panels.
       The merged performance overlay is placed to
       its right (see the --viewer-overlay-left effect above). */
    height: calc(100vh - 61px);
    max-height: calc(100vh - 61px);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(27, 46, 71, 0.14);
  }

  .left-panel-container.panel-position-default.svelte-1xw9f2h {
    transition: left 0.3s ease;
  }

  .dark .left-panel-container.svelte-1xw9f2h {
    background-color: #1a2332;
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2);
  }

  /* ---- Panel Resize Handles ---- */
  .rc-handle.svelte-1xw9f2h {
    position: absolute;
    z-index: 110;
  }
  /* Edge handles */
  .rc-n.svelte-1xw9f2h {
    top: -4px;
    left: 8px;
    right: 8px;
    height: 8px;
    cursor: ns-resize;
  }
  .rc-s.svelte-1xw9f2h {
    bottom: -4px;
    left: 8px;
    right: 8px;
    height: 8px;
    cursor: ns-resize;
  }
  .rc-e.svelte-1xw9f2h {
    top: 8px;
    bottom: 8px;
    right: -4px;
    width: 8px;
    cursor: ew-resize;
  }
  .rc-w.svelte-1xw9f2h {
    top: 8px;
    bottom: 8px;
    left: -4px;
    width: 8px;
    cursor: ew-resize;
  }
  /* Corner handles */
  .rc-ne.svelte-1xw9f2h {
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
  }
  .rc-nw.svelte-1xw9f2h {
    top: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
  }
  .rc-se.svelte-1xw9f2h {
    bottom: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
  }
  .rc-sw.svelte-1xw9f2h {
    bottom: -4px;
    left: -4px;
    width: 12px;
    height: 12px;
    cursor: nesw-resize;
  }
  .rc-handle.svelte-1xw9f2h:hover {
    background-color: rgba(28, 165, 206, 0.25);
    border-radius: 2px;
  }

  /* Pill group matching the other hierarchy panels (see .hier-tabs in
     $lib/styles/hierarchy-tree.css); this row only supplies the header chrome. */
  .panel-tabs.svelte-1xw9f2h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
  }

  .panel-tabs.collapsed-mode.svelte-1xw9f2h {
    justify-content: center;
  }

  .panel-section-icon.svelte-1xw9f2h {
    font-size: 18px;
    line-height: 1;
    color: #4b627e;
    text-align: center;
  }

  .dark .panel-section-icon.svelte-1xw9f2h {
    color: #8da1b9;
  }

  .panel-collapse-btn.svelte-1xw9f2h {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 3px;
    border-radius: 6px;
    cursor: pointer;
    color: #4b627e;
    flex-shrink: 0;
    transition:
      color 0.15s ease,
      background-color 0.15s ease;
  }

  .panel-collapse-btn.svelte-1xw9f2h:hover {
    color: #187498;
    background-color: rgba(54, 143, 181, 0.14);
  }

  .panel-collapse-btn.svelte-1xw9f2h .material-icons:where(.svelte-1xw9f2h) {
    font-size: 18px;
    line-height: 1;
  }

  .dark .panel-collapse-btn.svelte-1xw9f2h {
    color: #8da1b9;
  }

  .dark .panel-collapse-btn.svelte-1xw9f2h:hover {
    color: #3fa6d1;
    background-color: rgba(63, 166, 209, 0.16);
  }

  .left-panel-container.panel-collapsed.svelte-1xw9f2h {
    width: 36px !important;
    height: calc(100vh - 61px) !important;
    overflow: hidden;
  }

  .panel-content-area.svelte-1xw9f2h {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .panel-content-area.svelte-1xw9f2h .hidden:where(.svelte-1xw9f2h) {
    display: none;
  }

  .panel-content-area.svelte-1xw9f2h .object-hierarchy-panel,
  .panel-content-area.svelte-1xw9f2h .search-panel,
  .panel-content-area.svelte-1xw9f2h .collections-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0%;
    min-height: 0;
    width: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
  }

  .panel-content-area.svelte-1xw9f2h .object-hierarchy-panel.panel-hidden {
    display: none !important;
  }

  .model-manager-container.svelte-1xw9f2h {
    position: absolute;
    top: 75px; /* Below the centered toggle button */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    max-height: calc(100vh - 90px);
    overflow: hidden;
  }

  .measurement-container.svelte-1xw9f2h {
    /* Placement comes from use:navbarAnchor, which drops the panel under the
       navbar's ruler button. */
    z-index: 120;
    max-height: calc(100vh - 90px);
    overflow: hidden;
  }

  .project-display.svelte-1xw9f2h {
    position: fixed;
    top: 10px;
    left: calc(var(--sidebar-width, 5rem) + 10px); /* Align with left panel container */
    z-index: 50;
    background: color-mix(in srgb, var(--surface-1) 95%, transparent);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 6px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    font-family: var(--font-body);
    max-width: 400px;
    min-width: 200px;
    transition: left 0.3s ease;
  }

  .project-info.svelte-1xw9f2h {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .project-label.svelte-1xw9f2h {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .project-name.svelte-1xw9f2h {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
  }

  .project-id.svelte-1xw9f2h {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0.8;
    white-space: nowrap;
  }

  /* Adjust positioning in fullscreen mode */
  .fullscreen-mode.svelte-1xw9f2h .project-display:where(.svelte-1xw9f2h) {
    top: 15px;
    left: 20px;
  }

  .viewer-viewcube-wrap.svelte-1xw9f2h {
    position: absolute;
    top: 8px;
    right: calc(10px + var(--viewcube-right-offset, 0px));
    z-index: 140;
    pointer-events: none;
  }

  .viewer-viewcube-wrap.svelte-1xw9f2h .viewcube {
    pointer-events: all;
  }

  .viewer-viewcube-wrap.hidden-by-info.svelte-1xw9f2h {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Dark theme support */
  .dark .project-display.svelte-1xw9f2h {
    background: var(--surface-1);
    border-color: var(--border-light);
    color: var(--text-primary);
  }

  .dark .project-label.svelte-1xw9f2h {
    color: var(--text-secondary);
  }

  .dark .project-name.svelte-1xw9f2h {
    color: var(--text-primary);
  }

  .dark .project-id.svelte-1xw9f2h {
    color: var(--text-secondary);
  }

  .no-project.svelte-1xw9f2h {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .no-project-text.svelte-1xw9f2h {
    font-size: 0.85rem;
    color: var(--danger);
    font-weight: 600;
    line-height: 1.2;
  }

  .dark .no-project-text.svelte-1xw9f2h {
    color: var(--danger);
  }

    .viewer-wrapper.svelte-1dg6zlh {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        font-family: var(--font-body);
    }
    .viewer-wrapper h1, 
    .viewer-wrapper h2, 
    .viewer-wrapper h3, 
    .viewer-wrapper h4, 
    .viewer-wrapper h5, 
    .viewer-wrapper h6 {
        font-family: var(--font-heading);
    }

  /* Persistent viewer fills the viewer main-container area (left of the live
     sidebar width). Kept at a stable, non-zero size on every route so the
     Engine's ResizeObserver keeps reporting correct dimensions. */
  .persistent-viewer.svelte-12qhfyh {
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 5rem);
    right: 0;
    bottom: 0;
    transition:
      left 0.3s ease,
      width 0.3s ease;
    will-change: left, width;
  }

  .persistent-viewer.svelte-12qhfyh .viewer-wrapper {
    width: 100%;
    height: 100%;
  }

  body.viewer-fullscreen {
    overflow: hidden;
    background: var(--viewer-canvas-bg, #17263c);
  }

  body.viewer-fullscreen .persistent-viewer.svelte-12qhfyh {
    top: 48px !important;
    left: var(--sidebar-width, 5rem) !important;
    right: 0 !important;
    bottom: 0 !important;
    width: calc(100vw - var(--sidebar-width, 5rem)) !important;
    height: calc(100dvh - 48px) !important;
    z-index: 1 !important;
  }

  body.viewer-fullscreen .layout-container.viewer-layout #viewer-main-container {
    margin-left: var(--sidebar-width, 5rem) !important;
    width: calc(100% - var(--sidebar-width, 5rem)) !important;
  }

  .layout-container {
    /* Guarantee 100vh height independently of Tailwind CDN timing. */
    height: 100vh;
    display: flex;
    background-color: inherit;
  }

  #standard-main-container {
    /* Guarantee flex growth and scroll independently of Tailwind CDN timing. */
    flex: 1;
    min-height: 0;
    height: 100%; /* explicit height so children's height:100% resolves */
    overflow-y: auto;
  }

  .layout-container.viewer-layout {
    display: block !important;
    position: relative;
  }

  .layout-container.viewer-layout .sidebar-fixed {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 30;
    height: 100vh;
  }

  .layout-container.viewer-layout #viewer-main-container {
    margin-left: var(--sidebar-width, 5rem);
    width: calc(100% - var(--sidebar-width, 5rem));
    height: 100vh;
    overflow: hidden;
    transition:
      margin-left 0.3s ease,
      width 0.3s ease;
    will-change: margin-left, width;
  }

  .layout-main {
    transition: width 0.3s ease;
    will-change: width;
  }

  .dark #standard-main-container {
    background:
      radial-gradient(circle at top left, rgba(63, 166, 209, 0.05), transparent 42%),
      linear-gradient(180deg, #0f1724 0%, #13283f 100%) !important;
  }

  .dark .layout-main.bg-background {
    background-color: #0f1724 !important;
  }