/* AI Project Universe V6.2 — native-color professional design, reliable light/dark mode and multilingual UI. */
:root {
  --apu-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
  --apu-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --apu-radius: 16px;
  --apu-control-height: 42px;
  --apu-transition: 220ms cubic-bezier(.4,0,.2,1);
  color-scheme: light dark;
}

html[data-apu-theme='dark'] {
  --apu-bg: #0a0a0b;
  --apu-bg-2: #111113;
  --apu-surface: #18181b;
  --apu-surface-2: #202024;
  --apu-surface-glass: rgba(24,24,24,.90);
  --apu-text: #f4f4f5;
  --apu-text-soft: #d4d4d8;
  --apu-muted: #a2a2a2;
  --apu-border: rgba(255,255,255,.07);
  --apu-border-strong: rgba(255,255,255,.12);
  --apu-grid: rgba(255,255,255,.025);
  --apu-accent: #f4f4f5;
  --apu-accent-rgb: 244,244,245;
  --apu-accent-contrast: #0a0a0b;
  --apu-clay-shadow: rgba(0,0,0,.90);
  --apu-clay-highlight: rgba(255,255,255,.075);
  --apu-clay-inset-light: rgba(255,255,255,.045);
  --apu-clay-inset-dark: rgba(0,0,0,.62);
  --apu-shadow: 8px 8px 18px rgba(0,0,0,.70), -3px -3px 10px rgba(255,255,255,.018), inset 1px 1px 2px rgba(255,255,255,.035);
  --apu-page-bg: var(--apu-bg);
  --apu-page-bg-2: var(--apu-bg-2);
  --apu-surface-solid: var(--apu-surface);
  --apu-surface-soft: var(--apu-surface-2);
  --apu-muted-text: var(--apu-muted);
  --apu-nav-bg: rgba(10,10,11,.86);
  --apu-line: var(--apu-border);
  --background: 240 0% 4%;
  --foreground: 0 0% 96%;
  --card: 240 0% 10%;
  --card-foreground: 0 0% 96%;
  --popover: 240 0% 10%;
  --popover-foreground: 0 0% 96%;
  --primary: 0 0% 96%;
  --primary-foreground: 240 0% 4%;
  --secondary: 240 0% 13%;
  --secondary-foreground: 0 0% 96%;
  --muted: 240 0% 13%;
  --muted-foreground: 240 0% 65%;
  --accent: 240 0% 13%;
  --accent-foreground: 0 0% 96%;
  --border: 240 0% 16%;
  --input: 240 0% 16%;
  --ring: 240 0% 84%;
}

html[data-apu-theme='light'] {
  --apu-bg: #f4f4f5;
  --apu-bg-2: #e4e4e7;
  --apu-surface: #ffffff;
  --apu-surface-2: #f7f7f8;
  --apu-surface-glass: rgba(244,244,245,.90);
  --apu-text: #18181b;
  --apu-text-soft: #27272a;
  --apu-muted: #535353;
  --apu-border: rgba(24,24,24,.11);
  --apu-border-strong: rgba(24,24,24,.18);
  --apu-grid: rgba(24,24,24,.045);
  --apu-accent: #18181b;
  --apu-accent-rgb: 24,24,27;
  --apu-accent-contrast: #f4f4f5;
  --apu-clay-shadow: rgba(39,39,39,.22);
  --apu-clay-highlight: rgba(255,255,255,.96);
  --apu-clay-inset-light: rgba(255,255,255,.92);
  --apu-clay-inset-dark: rgba(24,24,24,.10);
  --apu-shadow: 8px 8px 18px rgba(39,39,39,.14), -5px -5px 14px rgba(255,255,255,.92), inset 1px 1px 2px rgba(255,255,255,.9);
  --apu-page-bg: var(--apu-bg);
  --apu-page-bg-2: var(--apu-bg-2);
  --apu-surface-solid: var(--apu-surface);
  --apu-surface-soft: var(--apu-surface-2);
  --apu-muted-text: var(--apu-muted);
  --apu-nav-bg: rgba(244,244,245,.88);
  --apu-line: var(--apu-border);
  --background: 240 0% 96%;
  --foreground: 240 0% 10%;
  --card: 0 0% 100%;
  --card-foreground: 240 0% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 0% 10%;
  --primary: 240 0% 10%;
  --primary-foreground: 0 0% 96%;
  --secondary: 240 0% 90%;
  --secondary-foreground: 240 0% 10%;
  --muted: 240 0% 90%;
  --muted-foreground: 240 0% 35%;
  --accent: 240 0% 90%;
  --accent-foreground: 240 0% 10%;
  --border: 240 0% 84%;
  --input: 240 0% 84%;
  --ring: 240 0% 10%;
}

html[data-apu-project-scroll] {
  min-height: 100%;
  background: var(--apu-bg);
  color-scheme: light dark;
  accent-color: var(--apu-accent);
  scroll-behavior: smooth;
  scrollbar-color: var(--apu-muted) transparent;
}

html[data-apu-project-scroll] body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--apu-text);
  background:
    radial-gradient(circle at 50% -20%, rgba(var(--apu-accent-rgb),.055), transparent 38rem),
    var(--apu-bg) !important;
  font-family: var(--apu-font-ui) !important;
  line-height: 1.5;
  transition: background-color var(--apu-transition), color var(--apu-transition);
}

html[data-apu-project-scroll] body > #root {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  min-height: 100dvh;
}

.apu-grid-overlay-v62 {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--apu-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--apu-grid) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 1;
}

html[data-apu-project-scroll] body > :not(.apu-grid-overlay-v62):not(#apu-ui-dock-v62):not(#apu-ui-toast-v62) {
  position: relative;
}

html[data-apu-project-scroll] ::selection {
  background: rgba(var(--apu-accent-rgb),.18);
  color: var(--apu-text);
}

html[data-apu-project-scroll] :where(button,input,textarea,select,option) { font: inherit; }
html[data-apu-project-scroll] :where(h1,h2,h3,h4,h5,h6) { font-weight: 500; letter-spacing: -.03em; }
html[data-apu-project-scroll] :where(code,pre,kbd,samp) { font-family: var(--apu-font-mono) !important; }
html[data-apu-project-scroll] :where(a,button,input,select,textarea,[role='button']):focus-visible {
  outline: 3px solid rgba(var(--apu-accent-rgb),.28) !important;
  outline-offset: 3px;
}
html[data-apu-project-scroll] * { scrollbar-width: thin; scrollbar-color: var(--apu-muted) transparent; }
html[data-apu-project-scroll] *::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-apu-project-scroll] *::-webkit-scrollbar-track { background: transparent; }
html[data-apu-project-scroll] *::-webkit-scrollbar-thumb { background: var(--apu-muted); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }

html[data-apu-project-scroll] :where(button,[role='button']) {
  border-color: var(--apu-border-strong) !important;
  transition: transform var(--apu-transition), box-shadow var(--apu-transition), background-color var(--apu-transition), color var(--apu-transition), border-color var(--apu-transition);
}
@media (hover:hover) and (pointer:fine) {
  html[data-apu-project-scroll] :where(button,[role='button']):not(:disabled):hover { transform: translateY(-1px); }
}

/* Tailwind/shadcn dark-to-light mapping. */
html[data-apu-theme='light'][data-apu-project-scroll] :where(
  [class~='bg-black'],[class~='bg-slate-950'],[class~='bg-slate-900'],[class~='bg-slate-800'],
  [class~='bg-gray-950'],[class~='bg-gray-900'],[class~='bg-gray-800'],[class~='bg-zinc-950'],[class~='bg-zinc-900'],[class~='bg-zinc-800'],
  [class~='bg-neutral-950'],[class~='bg-neutral-900'],[class~='bg-neutral-800']
) { background-color: var(--apu-surface) !important; color: var(--apu-text) !important; }
html[data-apu-theme='light'][data-apu-project-scroll] :where([class~='text-white'],[class~='text-slate-100'],[class~='text-slate-200'],[class~='text-gray-100'],[class~='text-gray-200'],[class~='text-zinc-100'],[class~='text-zinc-200']) { color: var(--apu-text) !important; }
html[data-apu-theme='light'][data-apu-project-scroll] :where([class~='text-slate-300'],[class~='text-slate-400'],[class~='text-slate-500'],[class~='text-gray-300'],[class~='text-gray-400'],[class~='text-gray-500'],[class~='text-zinc-300'],[class~='text-zinc-400'],[class~='text-zinc-500']) { color: var(--apu-muted) !important; }
html[data-apu-theme='light'][data-apu-project-scroll] :where([class~='border-slate-700'],[class~='border-slate-800'],[class~='border-gray-700'],[class~='border-gray-800'],[class~='border-zinc-700'],[class~='border-zinc-800'],[class~='border-white/10']) { border-color: var(--apu-border) !important; }

html[data-apu-theme='dark'][data-apu-project-scroll] :where(
  [class~='bg-white'],[class~='bg-white/80'],[class~='bg-gray-50'],[class~='bg-gray-100'],[class~='bg-slate-50'],[class~='bg-slate-100'],[class~='bg-zinc-50'],[class~='bg-zinc-100'],[class~='bg-neutral-50'],[class~='bg-neutral-100']
) { background-color: var(--apu-surface) !important; color: var(--apu-text) !important; }
html[data-apu-theme='dark'][data-apu-project-scroll] :where([class~='text-gray-900'],[class~='text-gray-800'],[class~='text-gray-700'],[class~='text-slate-900'],[class~='text-slate-800'],[class~='text-slate-700'],[class~='text-zinc-900'],[class~='text-zinc-800'],[class~='text-zinc-700']) { color: var(--apu-text) !important; }
html[data-apu-theme='dark'][data-apu-project-scroll] :where([class~='text-gray-600'],[class~='text-gray-500'],[class~='text-slate-600'],[class~='text-slate-500'],[class~='text-zinc-600'],[class~='text-zinc-500']) { color: var(--apu-muted) !important; }
html[data-apu-theme='dark'][data-apu-project-scroll] :where([class~='border-gray-100'],[class~='border-gray-200'],[class~='border-slate-100'],[class~='border-slate-200'],[class~='border-zinc-100'],[class~='border-zinc-200'],[class~='border-white/30']) { border-color: var(--apu-border) !important; }

/* Variable-driven project palettes. */
html[data-scroll-theme='it-helpdesk'] {
  --bg-primary: var(--apu-bg); --bg-secondary: var(--apu-surface); --text-primary: var(--apu-text);
  --text-secondary: var(--apu-muted); --border: var(--apu-border); --shadow: var(--apu-shadow);
}
html[data-scroll-theme='malaysia-cost'] {
  --bg: var(--apu-bg); --surface: var(--apu-surface); --surface-soft: var(--apu-surface-2);
  --ink: var(--apu-text); --muted: var(--apu-muted); --line: var(--apu-border);
}
html[data-scroll-theme='network-subnet'] {
  --bg: var(--apu-bg); --panel: var(--apu-surface); --panel-2: var(--apu-surface-2);
  --ink: var(--apu-text); --muted: var(--apu-muted); --line: var(--apu-border);
}
html[data-scroll-theme='student-performance'] {
  --bg: var(--apu-bg); --panel: var(--apu-surface); --panel-2: var(--apu-surface-2); --panel-3: var(--apu-bg-2);
  --line: var(--apu-border); --text: var(--apu-text); --muted: var(--apu-muted); --shadow: var(--apu-shadow);
}
html[data-scroll-theme='kotlin-policy'] #root { background: var(--apu-bg) !important; }
html[data-scroll-theme='kotlin-policy'] .app-root { background: var(--apu-surface) !important; color: var(--apu-text) !important; }

html[data-apu-theme='dark'][data-apu-project-scroll] :where(input,textarea,select) { color-scheme: dark; }
html[data-apu-theme='light'][data-apu-project-scroll] :where(input,textarea,select) { color-scheme: light; }

/* Clay navigation-inspired appearance/language controller. */
#apu-ui-dock-v62 {
  position: fixed;
  top: max(82px, calc(env(safe-area-inset-top) + 70px));
  right: max(18px, env(safe-area-inset-right));
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 6px;
  border: 1px solid var(--apu-border);
  border-radius: 999px;
  color: var(--apu-text);
  background: var(--apu-surface-glass);
  box-shadow: 5px 5px 14px var(--apu-clay-shadow), inset 1px 1px 2px var(--apu-clay-inset-light), inset -1px -1px 2px var(--apu-clay-inset-dark);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  font-family: var(--apu-font-ui);
  font-style: normal;
  transition: background-color var(--apu-transition), color var(--apu-transition), border-color var(--apu-transition), box-shadow var(--apu-transition);
}

.apu-ui-brand-v62 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 9px 0 10px;
  color: var(--apu-text-soft);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.apu-ui-brand-v62 svg { width: 19px; height: 19px; flex: 0 0 auto; }
.apu-ui-brand-v62 span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

.apu-chunky-v62 {
  min-height: var(--apu-control-height);
  border: 1px solid var(--apu-border-strong) !important;
  border-radius: 999px;
  background: var(--apu-surface-2);
  color: var(--apu-text);
  box-shadow: 0 4px 0 rgba(83, 83, 83,.30), 0 6px 12px rgba(0,0,0,.24), inset 0 -2px 5px var(--apu-clay-inset-dark), inset 0 2px 5px var(--apu-clay-inset-light);
}
.apu-chunky-v62:active { transform: translateY(3px) !important; box-shadow: 0 1px 0 rgba(83, 83, 83,.30), 0 2px 5px rgba(0,0,0,.24), inset 0 -1px 2px var(--apu-clay-inset-dark); }

.apu-ui-theme-v62 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}
.apu-ui-theme-v62 svg { width: 18px; height: 18px; stroke: currentColor; flex: 0 0 auto; }

.apu-ui-language-wrap-v62 { position: relative; display: flex; align-items: center; }
.apu-ui-language-wrap-v62 > svg { position: absolute; left: 13px; width: 17px; height: 17px; pointer-events: none; stroke: currentColor; z-index: 1; }
.apu-ui-language-v62 {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  max-width: 140px;
  padding: 0 34px 0 39px;
  border: 0;
  border-radius: inherit;
  color: var(--apu-text);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
  outline: 0;
}
.apu-ui-language-wrap-v62::after { content: '⌄'; position: absolute; right: 13px; top: 9px; color: var(--apu-muted); pointer-events: none; }
.apu-ui-language-v62 option { color: var(--apu-text); background: var(--apu-surface); }

#apu-ui-toast-v62 {
  position: fixed;
  top: max(146px, calc(env(safe-area-inset-top) + 134px));
  right: max(20px, env(safe-area-inset-right));
  z-index: 2147483000;
  max-width: min(340px, calc(100vw - 32px));
  padding: 11px 15px;
  border: 1px solid var(--apu-border);
  border-radius: 14px;
  color: var(--apu-text);
  background: var(--apu-surface-glass);
  box-shadow: var(--apu-shadow);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--apu-transition), transform var(--apu-transition);
  font: 600 12px/1.4 var(--apu-font-ui);
}
#apu-ui-toast-v62[data-show='true'] { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  #apu-ui-dock-v62 { top: auto; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); }
  #apu-ui-toast-v62 { top: auto; right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 68px); }
  .apu-ui-brand-v62 span { display: none; }
  .apu-ui-brand-v62 { padding-right: 4px; }
}

@media (max-width: 470px) {
  #apu-ui-dock-v62 { left: 12px; right: 12px; justify-content: center; }
  .apu-ui-brand-v62 { display: none; }
  .apu-ui-theme-v62 { min-width: 90px; }
  .apu-ui-language-v62 { max-width: 138px; }
}

@media print {
  #apu-ui-dock-v62,#apu-ui-toast-v62,.apu-grid-overlay-v62 { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-apu-project-scroll] { scroll-behavior: auto; }
  html[data-apu-project-scroll] *,html[data-apu-project-scroll] *::before,html[data-apu-project-scroll] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Some bundled apps ship a hard-coded .dark wrapper. The selected global mode wins. */
html[data-apu-theme='light'] .dark {
  --background: 240 0% 96% !important;
  --foreground: 240 0% 10% !important;
  --card: 0 0% 100% !important;
  --card-foreground: 240 0% 10% !important;
  --popover: 0 0% 100% !important;
  --popover-foreground: 240 0% 10% !important;
  --primary: 240 0% 10% !important;
  --primary-foreground: 0 0% 96% !important;
  --secondary: 240 0% 90% !important;
  --secondary-foreground: 240 0% 10% !important;
  --muted: 240 0% 90% !important;
  --muted-foreground: 240 0% 35% !important;
  --accent: 240 0% 90% !important;
  --accent-foreground: 240 0% 10% !important;
  --border: 240 0% 84% !important;
  --input: 240 0% 84% !important;
  --ring: 240 0% 10% !important;
  color-scheme: light !important;
}

html[data-apu-theme='dark'] :where(#root, #root > *, .dark) {
  --background: 240 0% 4% !important;
  --foreground: 0 0% 96% !important;
  --card: 240 0% 10% !important;
  --card-foreground: 0 0% 96% !important;
  --popover: 240 0% 10% !important;
  --popover-foreground: 0 0% 96% !important;
  --primary: 0 0% 96% !important;
  --primary-foreground: 240 0% 4% !important;
  --secondary: 240 0% 13% !important;
  --secondary-foreground: 0 0% 96% !important;
  --muted: 240 0% 13% !important;
  --muted-foreground: 240 0% 65% !important;
  --accent: 240 0% 13% !important;
  --accent-foreground: 0 0% 96% !important;
  --border: 240 0% 16% !important;
  --input: 240 0% 16% !important;
  --ring: 240 0% 84% !important;
  color-scheme: dark !important;
}

/* Sidebar-aware applications (Computer Vision and related dashboard shells). */
html[data-apu-theme='light'] :where(html,body,#root,#root > *,[class~='dark']) {
  --sidebar: 0 0% 100% !important;
  --sidebar-foreground: 240 0% 10% !important;
  --sidebar-primary: 240 0% 10% !important;
  --sidebar-primary-foreground: 0 0% 96% !important;
  --sidebar-accent: 240 0% 92% !important;
  --sidebar-accent-foreground: 240 0% 10% !important;
  --sidebar-border: 240 0% 84% !important;
  --sidebar-ring: 240 0% 10% !important;
}
html[data-apu-theme='dark'] :where(html,body,#root,#root > *,[class~='dark']) {
  --sidebar: 240 0% 7% !important;
  --sidebar-foreground: 240 0% 84% !important;
  --sidebar-primary: 0 0% 96% !important;
  --sidebar-primary-foreground: 240 0% 4% !important;
  --sidebar-accent: 240 0% 13% !important;
  --sidebar-accent-foreground: 0 0% 96% !important;
  --sidebar-border: 240 0% 16% !important;
  --sidebar-ring: 240 0% 84% !important;
}
html[data-apu-theme='light'] [data-slot='sidebar-container'],
html[data-apu-theme='light'] [data-sidebar='sidebar'] {
  background: var(--apu-surface) !important;
  color: var(--apu-text) !important;
  border-color: var(--apu-border) !important;
}
html[data-apu-theme='dark'] [data-slot='sidebar-container'],
html[data-apu-theme='dark'] [data-sidebar='sidebar'] {
  background: #111113 !important;
  color: var(--apu-text) !important;
  border-color: var(--apu-border) !important;
}
html[data-apu-theme='light'] :where(.apu-v54-cv-topbar-title,.apu-v54-cv-topbar-title strong,.apu-v54-cv-mobile-brand-copy,.apu-v54-cv-mobile-brand-copy strong) { color: var(--apu-text) !important; }
html[data-apu-theme='light'] :where(.apu-v54-cv-topbar-title small,.apu-v54-cv-mobile-brand-copy small) { color: var(--apu-muted) !important; }
html[data-apu-theme='dark'] :where(.apu-v54-cv-topbar-title,.apu-v54-cv-topbar-title strong,.apu-v54-cv-mobile-brand-copy,.apu-v54-cv-mobile-brand-copy strong) { color: var(--apu-text) !important; }
html[data-apu-theme='dark'] :where(.apu-v54-cv-topbar-title small,.apu-v54-cv-mobile-brand-copy small) { color: var(--apu-muted) !important; }

@media (max-width: 767px) {
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-header {
    background: rgba(244,244,245,.96) !important;
    color: var(--apu-text) !important;
    border-bottom-color: var(--apu-border-strong) !important;
    box-shadow: 0 8px 24px rgba(39,39,39,.10) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-header .ai-menu-trigger {
    background: #ffffff !important;
    color: var(--apu-text) !important;
    border-color: var(--apu-border-strong) !important;
    box-shadow: 0 4px 0 rgba(83, 83, 83,.18), 0 6px 12px rgba(39,39,39,.10) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-header .ai-menu-trigger[aria-expanded='true'] {
    background: #e4e4e7 !important;
    color: var(--apu-text) !important;
    border-color: rgba(24,24,24,.24) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-drawer {
    background: rgba(244,244,245,.98) !important;
    color: var(--apu-text) !important;
    border-color: var(--apu-border-strong) !important;
    box-shadow: 0 18px 42px rgba(39,39,39,.18) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-drawer-heading {
    background: #ffffff !important;
    color: var(--apu-text) !important;
    border-bottom-color: var(--apu-border) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-drawer nav {
    background: transparent !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-drawer nav > a > div {
    background: #ffffff !important;
    color: var(--apu-text) !important;
    border: 1px solid var(--apu-border) !important;
    box-shadow: 0 4px 0 rgba(83, 83, 83,.13), 0 6px 12px rgba(39,39,39,.08) !important;
  }
  html[data-apu-theme='light'][data-scroll-theme='ai-architect'] .ai-architect-drawer nav > a > div.bg-primary {
    background: #18181b !important;
    color: #f4f4f5 !important;
    border-color: #18181b !important;
  }
}

/* V6.2: controls live in a menu area, never over project content. */
#apu-ui-dock-v62[data-apu-inline='true'] {
  position: static !important;
  inset: auto !important;
  z-index: auto;
  margin: 12px;
  flex: 0 0 auto;
  max-width: calc(100% - 24px);
  align-self: stretch;
  justify-content: center;
}
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-brand-v62 { display: none; }
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-theme-v62,
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62 { min-width: 0; }
html[data-apu-embedded='true'] #apu-ui-dock-v62,
html[data-apu-embedded='true'] #apu-ui-toast-v62 { display:none !important; }
@media (max-width: 900px) {
  #apu-ui-dock-v62[data-apu-inline='true'] { left:auto; right:auto; bottom:auto; width:auto; }
}


/* V6.2 — wider, clearer menu-bound language selector. */
#apu-ui-dock-v62 {
  gap: 9px;
}
.apu-ui-language-wrap-v62 {
  min-width: 190px;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform var(--apu-transition), box-shadow var(--apu-transition), border-color var(--apu-transition);
}
.apu-ui-language-wrap-v62:hover {
  transform: translateY(-1px);
  border-color: var(--apu-text) !important;
  box-shadow: 0 5px 0 rgba(83,83,83,.28), 0 10px 22px rgba(0,0,0,.20), inset 0 1px 0 var(--apu-clay-inset-light);
}
.apu-ui-language-v62 {
  width: 100%;
  min-width: 190px;
  max-width: none;
  min-height: 44px;
  padding-left: 43px;
  padding-right: 38px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}
.apu-ui-language-wrap-v62 > svg { left: 15px; width: 18px; height: 18px; }
.apu-ui-language-wrap-v62::after { right: 15px; top: 11px; font-size: 15px; }
.apu-ui-language-v62:focus-visible { outline: 2px solid var(--apu-text) !important; outline-offset: -4px; }
#apu-ui-dock-v62[data-apu-inline='true'] {
  width: auto;
  min-width: min(100%, 310px);
  max-width: calc(100% - 24px);
  border-radius: 18px;
}
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62 { flex: 1 1 190px; }
@media (max-width: 540px) {
  #apu-ui-dock-v62[data-apu-inline='true'] { flex-wrap: wrap; }
  #apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-theme-v62 { flex: 1 1 96px; }
  #apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62 { flex: 2 1 180px; min-width: 170px; }
  .apu-ui-language-v62 { min-width: 170px; }
}

/* Data visualization palette: interface remains monochrome; data may use color for differentiation. */
:root {
  --apu-chart-blue: #2563eb;
  --apu-chart-cyan: #06b6d4;
  --apu-chart-green: #16a34a;
  --apu-chart-amber: #d97706;
  --apu-chart-red: #dc2626;
  --apu-chart-purple: #7c3aed;
}


/* V6.2 — native project palettes with reliable background/text themes. */
html[data-apu-theme='dark'] {
  --apu-bg:#050608; --apu-bg-2:#0b0d12; --apu-surface:#11141b; --apu-surface-2:#181c25;
  --apu-text:#f8fafc; --apu-text-soft:#e2e8f0; --apu-muted:#a6afbf; --apu-border:rgba(255,255,255,.11); --apu-border-strong:rgba(255,255,255,.20);
  --apu-surface-glass:rgba(8,10,14,.90); --apu-grid:rgba(255,255,255,.025);
}
html[data-apu-theme='light'] {
  --apu-bg:#f7f8fb; --apu-bg-2:#eef1f6; --apu-surface:#ffffff; --apu-surface-2:#f4f6fa;
  --apu-text:#111827; --apu-text-soft:#263244; --apu-muted:#5f6b7c; --apu-border:rgba(15,23,42,.12); --apu-border-strong:rgba(15,23,42,.20);
  --apu-surface-glass:rgba(255,255,255,.92); --apu-grid:rgba(15,23,42,.035);
}
html[data-apu-project-scroll],html[data-apu-project-scroll] body { background-color:var(--apu-bg)!important;color:var(--apu-text); }
html[data-apu-project-scroll] body { background-image:none!important; }
html[data-apu-theme] :where(svg,canvas,img,video) { filter:none!important; }
html[data-apu-theme] :where([class*='gradient'],[class*='glow'],[class*='brand'],[class*='logo']) { filter:none!important; }

/* Preserve project accent classes. Only neutral shell surfaces are remapped for readability. */
html[data-apu-theme='light'][data-apu-project-scroll] :where(
  [class~='bg-black'],[class~='bg-slate-950'],[class~='bg-slate-900'],[class~='bg-gray-950'],[class~='bg-gray-900'],[class~='bg-zinc-950'],[class~='bg-zinc-900'],[class~='bg-neutral-950'],[class~='bg-neutral-900']
) { background-color:var(--apu-surface)!important;color:var(--apu-text)!important; }
html[data-apu-theme='light'][data-apu-project-scroll] :where([class~='text-white'],[class~='text-slate-100'],[class~='text-gray-100'],[class~='text-zinc-100']) { color:var(--apu-text)!important; }
html[data-apu-theme='dark'][data-apu-project-scroll] :where([class~='bg-white'],[class~='bg-gray-50'],[class~='bg-slate-50'],[class~='bg-zinc-50'],[class~='bg-neutral-50']) { background-color:var(--apu-surface)!important;color:var(--apu-text)!important; }
html[data-apu-theme='dark'][data-apu-project-scroll] :where([class~='text-gray-900'],[class~='text-slate-900'],[class~='text-zinc-900']) { color:var(--apu-text)!important; }

/* Standalone controls are integrated into the detected project menu, without a separate floating white container. */
#apu-ui-dock-v62[data-apu-inline='true'] {
  position:static!important;inset:auto!important;z-index:auto!important;
  width:auto!important;max-width:100%!important;min-width:0!important;
  margin:10px 8px!important;padding:0!important;gap:8px!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  justify-content:flex-start!important;align-self:stretch;
}
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-brand-v62 { display:none!important; }
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-theme-v62,
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62 {
  min-height:42px!important;border:1px solid var(--apu-border-strong)!important;border-radius:12px!important;
  background:color-mix(in srgb,var(--apu-surface) 92%,transparent)!important;color:var(--apu-text)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.10)!important;
}
.apu-ui-language-wrap-v62 { min-width:238px!important;overflow:hidden; }
.apu-ui-language-v62 { width:100%!important;min-width:238px!important;max-width:none!important;min-height:44px!important;padding-left:44px!important;padding-right:40px!important;font-size:13px!important;font-weight:760!important; }
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62 { flex:1 1 238px!important; }
#apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-theme-v62 { flex:0 0 104px!important; }
html[data-apu-embedded='true'] #apu-ui-dock-v62,html[data-apu-embedded='true'] #apu-ui-toast-v62 { display:none!important; }
@media(max-width:620px){
  #apu-ui-dock-v62[data-apu-inline='true']{flex-wrap:wrap!important;margin:8px 0!important;}
  #apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-theme-v62{flex:1 1 104px!important;}
  #apu-ui-dock-v62[data-apu-inline='true'] .apu-ui-language-wrap-v62{flex:2 1 210px!important;min-width:190px!important;}
  .apu-ui-language-v62{min-width:190px!important;}
}

/* AI Architect uses only the shared menu controls; its internal theme toggle is removed. */
html[data-scroll-theme='ai-architect'] button[aria-label='Toggle theme'],
html[data-scroll-theme='ai-architect'] button[aria-label*='toggle theme' i],
html[data-scroll-theme='ai-architect'] button[title*='theme' i]:not(#apu-ui-dock-v62 *) { display:none!important; }

/* Data and status colors remain available for fast visual comparison. */
:root{--apu-chart-blue:#2563eb;--apu-chart-cyan:#0891b2;--apu-chart-green:#059669;--apu-chart-amber:#d97706;--apu-chart-red:#e11d48;--apu-chart-purple:#7c3aed;}


/* V6.2 theme contract:
   - Light mode restores bright project-native color systems.
   - Dark mode is deliberately black/white/gray with strong contrast.
*/
html[data-apu-theme='light']{
  color-scheme:light;
  --apu-bg:#f6f9ff;--apu-bg-2:#edf3ff;--apu-surface:#ffffff;--apu-surface-2:#f2f6ff;
  --apu-surface-glass:rgba(255,255,255,.94);--apu-text:#0f172a;--apu-text-soft:#24324a;--apu-muted:#5d6b82;
  --apu-border:rgba(30,64,175,.12);--apu-border-strong:rgba(30,64,175,.22);--apu-grid:rgba(37,99,235,.045);
  --apu-accent:#2563eb;--apu-accent-rgb:37,99,235;--apu-accent-contrast:#fff;
  --background:216 100% 98%;--foreground:222 47% 11%;--card:0 0% 100%;--card-foreground:222 47% 11%;
  --popover:0 0% 100%;--popover-foreground:222 47% 11%;--primary:221 83% 53%;--primary-foreground:0 0% 100%;
  --secondary:214 95% 93%;--secondary-foreground:222 47% 18%;--muted:215 35% 94%;--muted-foreground:215 18% 40%;
  --accent:188 85% 91%;--accent-foreground:191 91% 25%;--border:214 32% 88%;--input:214 32% 88%;--ring:221 83% 53%;
}
html[data-apu-theme='light'][data-apu-project-scroll] body{
  background:linear-gradient(180deg,#fbfdff 0%,#f3f7ff 58%,#eef4ff 100%)!important;color:var(--apu-text)!important;
}
html[data-apu-theme='light'] .apu-grid-overlay-v62{background-image:linear-gradient(rgba(37,99,235,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(14,165,233,.035) 1px,transparent 1px)!important;}
html[data-apu-theme='light'] :where(svg,canvas,img,video,#root){filter:none!important;}

/* Restore each project's original bright variables in light mode. */
html[data-apu-theme='light'][data-scroll-theme='it-helpdesk']{
 --primary:#3b82f6;--primary-dark:#2563eb;--secondary:#64748b;--success:#16a34a;--warning:#f59e0b;--danger:#ef4444;--info:#06b6d4;
 --bg-primary:#f8fafc;--bg-secondary:#ffffff;--text-primary:#1e293b;--text-secondary:#64748b;--border:#e2e8f0;
}
html[data-apu-theme='light'][data-scroll-theme='malaysia-cost']{
 --bg:#eef4f5;--surface:#ffffff;--surface-soft:#f7fafb;--ink:#102a33;--muted:#607984;--line:#d8e5e8;
 --brand:#0e7490;--brand-deep:#075d73;--brand2:#14b8a6;--accent:#f59e0b;--danger:#dc2626;
}
html[data-apu-theme='light'][data-scroll-theme='network-subnet']{
 --bg:#f3f6fb;--panel:#fff;--panel-2:#eef4fb;--surface:#fff;--surface-2:#eef4fb;--ink:#102039;--muted:#64748b;--line:#dce5f0;
 --blue:#0878d1;--blue2:#0ea5e9;--navy:#0b1324;--green:#059669;--amber:#d97706;--red:#dc2626;--brand:#1268a8;--brand-2:#0f8a7b;--brand-soft:#e8f3fb;
}
html[data-apu-theme='light'][data-scroll-theme='student-performance']{
 --bg:#f5f7ff;--panel:#ffffff;--panel-2:#f1f4ff;--panel-3:#e9edfb;--line:rgba(30,41,59,.14);--text:#111827;--muted:#5d687a;
 --brand:#6d4aff;--brand-2:#0f9f91;--cyan:#0891b2;--green:#059669;--amber:#d97706;--red:#e11d48;
}
html[data-apu-theme='light'][data-scroll-theme='sentiment-analysis']{--primary:262 83% 58%;--accent:187 92% 42%;--ring:262 83% 58%;}
html[data-apu-theme='light'][data-scroll-theme='computer-vision']{--primary:217 91% 56%;--accent:188 86% 53%;--ring:217 91% 56%;}
html[data-apu-theme='light'][data-scroll-theme='incident-monitoring']{--primary:221 83% 53%;--accent:160 84% 39%;--ring:221 83% 53%;}
html[data-apu-theme='light'][data-scroll-theme='academic-evidence']{--primary:221 83% 53%;--accent:188 85% 91%;--ring:221 83% 53%;}
html[data-apu-theme='light'][data-scroll-theme='ai-architect']{--primary:199 89% 48%;--accent:262 83% 58%;--ring:199 89% 48%;}
html[data-apu-theme='light'][data-scroll-theme='url-shortener']{--primary:245 58% 51%;--accent:173 80% 40%;--ring:245 58% 51%;}

/* Dark mode intentionally removes chroma but retains luminance differences and readable status hierarchy. */
html[data-apu-theme='dark']{
 color-scheme:dark;--apu-bg:#050505;--apu-bg-2:#0b0b0b;--apu-surface:#111;--apu-surface-2:#1a1a1a;--apu-surface-glass:rgba(10,10,10,.94);
 --apu-text:#fff;--apu-text-soft:#e5e5e5;--apu-muted:#b4b4b4;--apu-border:rgba(255,255,255,.12);--apu-border-strong:rgba(255,255,255,.23);--apu-grid:rgba(255,255,255,.035);
 --apu-accent:#fff;--apu-accent-rgb:255,255,255;--apu-accent-contrast:#000;
 --background:0 0% 2%;--foreground:0 0% 100%;--card:0 0% 7%;--card-foreground:0 0% 100%;--popover:0 0% 7%;--popover-foreground:0 0% 100%;
 --primary:0 0% 100%;--primary-foreground:0 0% 0%;--secondary:0 0% 12%;--secondary-foreground:0 0% 100%;--muted:0 0% 12%;--muted-foreground:0 0% 70%;
 --accent:0 0% 18%;--accent-foreground:0 0% 100%;--border:0 0% 20%;--input:0 0% 20%;--ring:0 0% 85%;
}
html[data-apu-theme='dark'][data-apu-project-scroll] body{background:#050505!important;color:#fff!important;}
html[data-apu-theme='dark'] .apu-grid-overlay-v62{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px)!important;}
html[data-apu-theme='dark'] body>#root{filter:grayscale(1) saturate(0)!important;}
html[data-apu-theme='dark'] :where(input,select,textarea,button){color-scheme:dark;}
html[data-apu-theme='dark'][data-scroll-theme='it-helpdesk']{--primary:#fff;--primary-dark:#d4d4d4;--secondary:#aaa;--success:#eee;--warning:#ccc;--danger:#fff;--info:#bbb;--bg-primary:#050505;--bg-secondary:#111;--text-primary:#fff;--text-secondary:#b4b4b4;--border:#2d2d2d;}
html[data-apu-theme='dark'][data-scroll-theme='malaysia-cost']{--bg:#050505;--surface:#111;--surface-soft:#1a1a1a;--ink:#fff;--muted:#b4b4b4;--line:#2d2d2d;--brand:#fff;--brand-deep:#ddd;--brand2:#bbb;--accent:#eee;--danger:#fff;}
html[data-apu-theme='dark'][data-scroll-theme='network-subnet']{--bg:#050505;--panel:#111;--panel-2:#1a1a1a;--surface:#111;--surface-2:#1a1a1a;--ink:#fff;--muted:#b4b4b4;--line:#2d2d2d;--blue:#fff;--blue2:#ccc;--navy:#050505;--green:#eee;--amber:#ccc;--red:#fff;--brand:#fff;--brand-2:#bbb;--brand-soft:#1a1a1a;}
html[data-apu-theme='dark'][data-scroll-theme='student-performance']{--bg:#050505;--panel:#111;--panel-2:#171717;--panel-3:#202020;--line:#303030;--text:#fff;--muted:#b4b4b4;--brand:#fff;--brand-2:#d4d4d4;--cyan:#bbb;--green:#eee;--amber:#ccc;--red:#fff;}

/* AI Architect: never show a second/local theme toggle inside the project. */
html[data-scroll-theme='ai-architect'] :where([data-testid='btn-toggle-theme'],[data-testid*='theme-toggle' i],button[aria-label*='toggle theme' i],button[aria-label*='switch to light' i],button[aria-label*='switch to dark' i],button[title*='theme' i]){display:none!important;}

/* Language selector is intentionally wide enough for full language names. */
.apu-ui-language-wrap-v62{min-width:268px!important;}
.apu-ui-language-v62{min-width:268px!important;font-size:13px!important;font-weight:750!important;letter-spacing:.01em!important;}


/* V6.2 translation completion gate: no half-translated mixed-language frame. */
#apu-translation-gate-v62{position:fixed;inset:0;z-index:2147483600;display:grid;place-items:center;background:color-mix(in srgb,var(--apu-bg,#fff) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .18s ease;pointer-events:none}
#apu-translation-gate-v62[data-show='true']{opacity:1;pointer-events:auto}
#apu-translation-gate-v62[hidden]{display:none!important}
.apu-translation-gate-card-v62{display:flex;align-items:center;gap:12px;min-width:min(360px,calc(100vw - 32px));padding:16px 18px;border:1px solid var(--apu-border-strong);border-radius:16px;background:var(--apu-surface);color:var(--apu-text);box-shadow:0 20px 55px rgba(15,23,42,.20);font:700 13px/1.4 system-ui,sans-serif}
.apu-translation-gate-card-v62 [data-apu-gate-percent]{margin-left:auto;color:var(--apu-muted);font-variant-numeric:tabular-nums}
.apu-translation-spinner-v62{width:18px;height:18px;border:2px solid color-mix(in srgb,var(--apu-text) 20%,transparent);border-top-color:var(--apu-accent);border-radius:50%;animation:apuSpinV62 .75s linear infinite}
@keyframes apuSpinV62{to{transform:rotate(360deg)}}

/* Custom, fully translatable file input. */
.apu-file-picker-v62{display:flex;align-items:center;gap:10px;min-width:270px;min-height:44px;padding:5px 8px 5px 5px;border:1px solid var(--apu-border-strong);border-radius:13px;background:var(--apu-surface);color:var(--apu-text);box-shadow:0 8px 22px rgba(15,23,42,.10);cursor:pointer;overflow:hidden}
.apu-file-picker-v62 input[type='file']{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.apu-file-picker-button-v62{flex:0 0 auto;padding:8px 12px;border-radius:9px;background:var(--apu-accent);color:var(--apu-accent-contrast);font-weight:800;font-size:12px;white-space:nowrap}
.apu-file-picker-name-v62{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--apu-muted);font-size:12px;font-weight:650}
.apu-file-picker-v62:focus-within{outline:3px solid color-mix(in srgb,var(--apu-accent) 25%,transparent);outline-offset:2px}
@media(max-width:620px){.apu-file-picker-v62{min-width:100%;width:100%}}