/* Responsibility: Centralize the Nocturne dark theme and cross-page controls; the top bar no longer shows a workspace badge.
 * Implementation: Follow frontend_example's blue-gray surfaces, purple accents, and fine borders; semantic colors distinguish failure, warning, and success.
 * Relationships: Every HTML entry loads this before page layout styles; page modules consume shared variables rather than maintaining separate palettes.
 * Directory: No functions or classes; sections cover design tokens, interaction foundations, top bar, language selection, and responsive layout.
 * Variable index: --bg is the page background; --surface cards; --surface-raised overlays; --surface-hover hover surfaces;
 * --ink body text; --muted secondary text; --line/--line-strong borders; --accent primary color; --accent-hover its hover color;
 * --soft accent background; --success/--warning/--danger semantic foregrounds with corresponding -soft backgrounds; --shadow overlay shadow; --shadow-color shadow color;
 * --header-height combined top/language bar height; --language-height language bar height; --sidebar-width navigation width; --map-land/--map-border base-map colors;
 * --green aliases the accent color used by existing interaction classes; --industry-* provides readable labels for four industries. */
:root {
  color-scheme: dark;
  --bg: #161826;
  --surface: #232532;
  --surface-raised: #292c3c;
  --surface-hover: #2d3042;
  --ink: #e9e9ed;
  --muted: #a0a5bd;
  --line: #333646;
  --line-strong: #494c62;
  --accent: #b5abfc;
  --accent-hover: #cec6ff;
  --soft: #332e4b;
  --green: var(--accent);
  --success: #91d6b5;
  --success-soft: #203b35;
  --warning: #e6c18b;
  --warning-soft: #3c3329;
  --danger: #f2a29e;
  --danger-soft: #402b33;
  --shadow-color: #00000030;
  --shadow: 0 16px 48px #00000045;
  --header-height: 108px;
  --language-height: 44px;
  --sidebar-width: 212px;
  --map-land: #202230;
  --map-border: #323547;
  --industry-semiconductor: #b5abfc;
  --industry-metrology: #e6c18b;
  --industry-optics: #9dc3ef;
  --industry-industrial: #eca9b5;
  font: 14px/1.55 Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--bg);
}
::selection { background: var(--soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
input, select, textarea { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
dialog { background: var(--surface); }
dialog::backdrop { background: #080a14b3; backdrop-filter: blur(4px); }
salesmate-header { display: block; height: calc(var(--header-height) - var(--language-height)); }
.product-header {
  position: fixed; inset: var(--language-height) 0 auto; z-index: 1500; height: calc(var(--header-height) - var(--language-height));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px; padding: 0 24px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.product-brand { display: inline-flex; align-items: center; gap: 10px; width: fit-content; color: var(--ink); font-size: 18px; font-weight: 650; text-decoration: none; }
.product-brand::before { content: ''; width: 9px; height: 9px; background: var(--accent); border-radius: 2px; }
.product-tabs { display: flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; }
.product-tabs a { display: block; padding: 8px 15px; color: var(--muted); font-size: 12px; border-radius: 0; text-decoration: none; white-space: nowrap; }
.product-tabs a:hover { background: var(--surface); color: var(--ink); }
.product-tabs a[aria-current=page] { color: var(--accent); background: var(--soft); box-shadow: inset 0 0 0 1px var(--accent); font-weight: 500; }
@media(max-width:760px) {
  .product-header { grid-template-columns: auto 1fr; gap: 12px; padding: 0 16px; }
  .product-brand { font-size: 16px; gap: 7px; }
  .product-tabs { justify-self: end; }
  .product-tabs a { padding: 8px; font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto!important; animation: none!important; transition: none!important; } }

/* Language selection is accessible on all three pages and before login. It occupies document flow above the fixed product header; shared total height keeps the sidebar and assistant clear of tool buttons. */
.language-bar { position: sticky; top: 0; z-index: 1501; height: var(--language-height); display: flex; align-items: center; justify-content: flex-end; gap: .75rem; padding: .4rem 1.25rem; min-height: 44px; background: var(--bg); color: var(--muted); border-bottom: 1px solid var(--line); font-size: .8rem; }
.language-bar select { width: auto; min-width: 140px; padding: .35rem .65rem; }
/* English headings may wrap naturally; preserve density without allowing long status labels to overflow cards. */
html[lang=en] .product-tabs a { white-space: normal; text-align: center; }
html[lang=en] .workspace-task span, html[lang=en] .stat-card { overflow-wrap: anywhere; }
@media (max-width: 640px) { .language-bar { padding-inline: .75rem; } }