/* Precision engineering theme
   Cobalt blue is used as a restrained accent; no purple gradients or pure black. */
:root {
  --hosonic-blue: #2B4FE0; --hosonic-blue-2: #1F3EC5; --hosonic-blue-3: #2B4FE0; --hosonic-cyan: #2B4FE0;
  --hosonic-navy: #18212F; --hosonic-navy-2: #222E3F; --ink: #18212F; --ink-2: #334155; --muted: #697586;
  --line: #D6DEE7; --line-2: #E9EEF3; --paper: #FFFFFF; --canvas: #F5F7F8; --canvas-blue: #EEF2FF;
  --success: #1D7A5F; --success-soft: #EAF6F1; --warning: #A56A1D; --warning-soft: #FBF3E6; --danger: #B94757; --danger-soft: #FBEDF0; --violet: #2B4FE0; --violet-soft: #EEF2FF;
  --shadow-sm: 0 1px 2px rgba(24,33,47,.035); --shadow: 0 8px 24px rgba(24,33,47,.06); --shadow-lg: 0 18px 50px rgba(24,33,47,.10);
  --radius-sm: 6px; --radius: 8px; --radius-lg: 10px; --radius-xl: 12px;
  --font: "Inter", "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
html { background: var(--canvas); }
body { color: var(--ink); background: var(--canvas); font-family: var(--font); }
::selection { color: #fff; background: var(--hosonic-blue); }
.mono, .console-id, .part-preview strong, .product-series, .spec-pill, .badge, .status, .eyebrow, .filter-block-title small, .selector-table td strong { font-family: var(--mono); }
.section-title, h1, h2, h3 { font-weight: 620; }
.section-copy, p { color: var(--muted); }
.eyebrow { color: var(--hosonic-blue); letter-spacing: .14em; }
.eyebrow::before { width: 18px; height: 1px; background: var(--hosonic-blue); }
.announcement { color: #DDE3E9; background: #18212F; border-bottom: 1px solid #2A3748; }
.announcement strong { color: #fff; }
.announcement a:hover { color: #AFC0FF; }
.site-header { border-bottom: 1px solid var(--line); background: rgba(245,247,248,.96); backdrop-filter: blur(16px); }
.nav-link { color: #475569; border-radius: 4px; }
.nav-link:hover, .nav-link.active { color: var(--hosonic-blue); background: transparent; }
.nav-link.active { box-shadow: inset 0 -1px 0 var(--hosonic-blue); }
.icon-btn { border-color: var(--line); border-radius: 6px; color: var(--ink-2); background: #fff; }
.icon-btn:hover { color: var(--hosonic-blue); border-color: var(--hosonic-blue); background: #fff; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: #8490A0; background: #fff; font-family: var(--mono); font-size: 10px; font-weight: 650; }
.lang-switch a { color: #687587; }
.lang-switch a:hover, .lang-switch a.active { color: var(--hosonic-blue); }
.lang-switch span { color: #B4BEC9; }
.btn { border-radius: 6px; font-weight: 650; letter-spacing: -.01em; box-shadow: none; }
.btn-primary { color: #fff; background: var(--hosonic-blue); border-color: var(--hosonic-blue); box-shadow: none; }
.btn-primary:hover { color: #fff; background: var(--hosonic-blue-2); border-color: var(--hosonic-blue-2); box-shadow: none; }
.btn-cyan { color: #fff; background: var(--hosonic-blue); border-color: var(--hosonic-blue); box-shadow: none; }
.btn-cyan:hover { background: var(--hosonic-blue-2); }
.btn-ghost { color: var(--ink-2); border-color: var(--line); background: #fff; box-shadow: none; }
.btn-ghost:hover { color: var(--hosonic-blue); border-color: #AEBDF5; background: #fff; }
.btn-quiet { color: var(--hosonic-blue); background: #EEF2FF; }
.badge { border-radius: 4px; font-size: 9px; }
.badge-blue, .badge-violet { color: var(--hosonic-blue); background: #EEF2FF; }
/* Engineering drawing surfaces */
.hero, .selector-hero, .custom-hero { color: var(--ink); background: var(--canvas); border-bottom: 1px solid var(--line); }
.hero::after, .selector-hero::after, .custom-hero::after { border: 1px solid rgba(43,79,224,.14); box-shadow: 0 0 0 48px rgba(43,79,224,.025), 0 0 0 96px rgba(43,79,224,.012); }
.hero::before, .selector-hero::before, .custom-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .75; background-image: linear-gradient(rgba(43,79,224,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(43,79,224,.055) 1px, transparent 1px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='160' viewBox='0 0 420 160'%3E%3Cpath d='M0 80 C35 20 70 20 105 80 S175 140 210 80 S280 20 315 80 S385 140 420 80' fill='none' stroke='%232B4FE0' stroke-opacity='.13' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 28px 28px, 28px 28px, 420px 160px; background-position: 0 0, 0 0, right 6% top 34px; background-repeat: repeat, repeat, no-repeat; }
.hero .container, .selector-hero .container, .custom-hero .container { position: relative; z-index: 2; }
.hero h1, .selector-hero h1, .custom-hero h1 { color: var(--ink); font-weight: 610; letter-spacing: -.055em; }
.hero h1 span { color: var(--hosonic-blue); }
.hero-copy > p, .selector-hero p, .custom-hero p { color: var(--muted); }
.hero-actions .btn-ghost { color: var(--ink-2); border-color: var(--line); background: rgba(255,255,255,.68); }
.hero-actions .btn-ghost:hover { color: var(--hosonic-blue); border-color: #AEBDF5; background: #fff; }
.hero-metric { border-top: 1px solid var(--line); position: relative; }
.hero-metric::before { content: ""; position: absolute; top: -1px; left: 0; width: 16px; height: 1px; background: var(--hosonic-blue); }
.hero-metric strong, .selector-hero-stats strong, .custom-hero-points strong { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.hero-metric span, .selector-hero-stats span, .custom-hero-points span { color: var(--muted); }
.hero-console { border-color: var(--line); background: rgba(255,255,255,.96); box-shadow: var(--shadow); color: var(--ink); }
.console-head strong { color: var(--ink); }
.console-live { color: var(--hosonic-blue); }
.console-live::before { background: var(--hosonic-blue); box-shadow: 0 0 0 5px rgba(43,79,224,.09); }
.console-order { border-color: var(--line); background: #F5F7F8; }
.console-order-top span, .console-product span, .console-footer span { color: var(--muted); }
.console-order-top strong, .console-product strong, .console-footer strong { color: var(--ink); }
.console-progress span { background: #DFE5EC; }
.console-progress span.done { background: var(--hosonic-blue); }
.console-product { background: #fff; border: 1px solid var(--line-2); }
.console-product b, .console-id { color: var(--hosonic-blue); }
.console-footer div { background: #fff; border: 1px solid var(--line-2); }
.selector-hero-stats div, .custom-hero-points div { border-color: var(--line); background: rgba(255,255,255,.72); }
.selector-hero .eyebrow, .custom-hero .eyebrow { color: var(--hosonic-blue); }
.selector-hero .eyebrow::before, .custom-hero .eyebrow::before { background: var(--hosonic-blue); }

/* Product, filter, configurator, and admin surfaces */
.catalog-section, .flow-section, .records-section, .selector-section, .custom-section { background: var(--canvas); }
.catalog-toolbar, .records-panel, .product-card, .flow-card, .solution-card, .faq-grid details, .selector-sidebar, .selector-item, .selector-table-card, .config-card, .config-summary, .success-card, .admin-table-card, .card, .inventory-card, .settings-card { border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
.product-card:hover, .selector-item:hover, .crm-card:hover, .flow-card:hover, .solution-card:hover { transform: translateY(-2px); border-color: #AEBDF5; box-shadow: 0 8px 24px rgba(24,33,47,.06); }
.product-visual, .admin-product-art, .selector-item-visual { background: #EDF1F4; }
.product-visual::before { background-image: linear-gradient(rgba(43,79,224,.075) 1px, transparent 1px), linear-gradient(90deg, rgba(43,79,224,.075) 1px, transparent 1px); background-size: 18px 18px; }
.product-visual::after { border-color: rgba(43,79,224,.16); }
.product-category, .product-name, .selector-item-heading h3, .config-card-head h2 { color: var(--ink); }
.product-category, .selector-item-heading > div > span, .config-card-head > div > span { color: var(--hosonic-blue); }
.sample-price, .admin-product-meta strong, .kpi-card strong, .summary-specs strong { color: var(--ink); }
.spec-pill, .summary-specs div, .selector-param-grid div, .console-product, .console-footer div { background: #F5F7F8; }
.section-head { margin-bottom: 28px; }
.product-grid, .flow-grid, .solution-grid, .parameter-grid { gap: 14px; }
.flow-card::after, .solution-card::after { opacity: .55; }
.selector-sidebar, .filter-sidebar-tools, .filter-block, .selector-sidebar-head { background: #fff; }
.filter-block-title span, .config-field > span, .form-field label { color: var(--ink-2); }
.filter-check, .range-fields label span, .availability-toggle small { color: var(--muted); }
.filter-check input:checked + i, .compare-check input:checked + i, .availability-toggle input:checked + i { background: var(--hosonic-blue); border-color: var(--hosonic-blue); }
.filter-block, .selector-sidebar-head, .filter-sidebar-tools { border-color: var(--line-2); }
.selector-result-head h2 span, .selector-table-product strong, .selector-table td strong { color: var(--hosonic-blue); }
.selector-table th, .admin-table th { background: #F5F7F8; color: #6B7787; }
.selector-table td, .admin-table td { border-color: var(--line-2); }
.part-preview { color: #fff; background: var(--hosonic-blue); }
.part-preview strong { color: #fff; }
.part-preview p, .part-preview small { color: rgba(255,255,255,.72); }
.summary-note { background: #EEF2FF; }
.summary-note strong { color: var(--hosonic-blue); }
.admin-sidebar { background: #18212F; }
.sidebar-project, .admin-user { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
.nav-item.active { background: var(--hosonic-blue); box-shadow: none; }
.admin-topbar { background: rgba(245,247,248,.96); border-color: var(--line); }
.kpi-card, .dash-welcome, .dash-side-card { border-color: var(--line); box-shadow: var(--shadow-sm); }
.dash-welcome { color: var(--ink); background: #fff; }
.dash-welcome::before { border-color: rgba(43,79,224,.14); box-shadow: 0 0 0 44px rgba(43,79,224,.025); }
.dash-welcome .eyebrow, .dash-welcome .eyebrow::before { color: var(--hosonic-blue); background-color: var(--hosonic-blue); }
.dash-welcome h2 { color: var(--ink); }
.dash-welcome p { color: var(--muted); }
.dash-welcome .btn-ghost { color: var(--ink-2); border-color: var(--line); }
.crm-stage-dot, .bar-fill, .progress-mini span { background: var(--hosonic-blue); }
.donut { background: conic-gradient(var(--hosonic-blue) 0 42%, #5C72D9 42% 72%, #B9C5E9 72% 87%, #E2E7ED 87% 100%); }

/* Login and responsive language control */
.login-panel, .login-page { background: var(--canvas); }
.login-side { background: #18212F; }
.login-side::before { background: linear-gradient(0deg, rgba(24,33,47,.88), rgba(24,33,47,.22)), url("assets/official/hero-main.webp") center/cover no-repeat; opacity: .35; mix-blend-mode: normal; }
.login-side::after { border-color: rgba(43,79,224,.22); box-shadow: 0 0 0 60px rgba(43,79,224,.035), 0 0 0 120px rgba(43,79,224,.018); }
.login-side-content .eyebrow, .login-side-content .eyebrow::before { color: #AFC0FF; background-color: #AFC0FF; }
.login-field input, .global-search input { border-color: var(--line); background: #fff; }
.login-field input:focus, .global-search input:focus { border-color: var(--hosonic-blue); box-shadow: 0 0 0 3px rgba(43,79,224,.08); }
.demo-account { border-color: #C7D1F6; background: #F5F7F8; }
@media (max-width: 760px) { .lang-switch { height: 32px; padding: 0 7px; font-size: 9px; } .header-actions { gap: 6px; } .hero, .selector-hero, .custom-hero { background-position: center; } }

.hero-copy .eyebrow, .hero-copy .eyebrow::before { color: var(--hosonic-blue); background-color: var(--hosonic-blue); }

/* Final cool-gray surface normalization */
body.public-page, .catalog-section, .solutions-section, .flow-section, .records-section, .selector-section, .custom-section { background: #F5F7F8; }