/* Themyrion — shared presentation tokens. Operational/status colors stay semantic. */
:root {
  --brand-ink: #182b46;
  --brand-primary: #167b80;
  --brand-primary-hover: #106268;
  --brand-accent: #63cec3;
  --brand-soft: #e8f3f3;
  --brand-canvas: #f5f8fb;
  --brand-muted: #586b7e;
  --brand-line: #dce5ec;
  --ink: var(--brand-ink);
  --muted: var(--brand-muted);
  --canvas: var(--brand-canvas);
  --line: var(--brand-line);
  --green: var(--brand-primary);
  --violet: var(--brand-primary);
  --nav: var(--brand-ink);
  --nav-active: #254b60;
  --control-ink: var(--brand-ink);
  --control-muted: var(--brand-muted);
  --control-border: var(--brand-line);
  --control-purple: var(--brand-primary);
}
.themyrion-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-ink); line-height: 1; white-space: nowrap; vertical-align: middle; }
.themyrion-brand img { display: block; width: 40px; height: 40px; flex: 0 0 40px; }
.themyrion-wordmark { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 27px; font-weight: 750; letter-spacing: -1px; }
.themyrion-brand--light { color: #f5fafb; }
.simple-logo, .login-brand .logo, .control-logo { text-decoration: none; letter-spacing: normal; }
.simple-logo { display: inline-flex; flex-shrink: 0; }
.portal-shell > .simple-logo, .access-card .simple-logo { display: inline-flex; }
.control-logo { display: block; padding: 0; }
.control-logo .themyrion-wordmark { font-size: 23px; letter-spacing: -.8px; }
.control-logo .themyrion-brand { display: inline-flex; gap: 8px; margin: 0; color: #f5fafb; }
.control-logo .themyrion-brand img { width: 32px; height: 32px; flex-basis: 32px; }
.control-logo .themyrion-brand span { display: inline; margin: 0; font-size: 23px; letter-spacing: -.8px; color: inherit; }
.brand-owner-label { display: block; margin: 14px 0 0 40px; color: #b5ccd8; font-size: 9px; font-weight: 650; letter-spacing: 1.5px; }
.security-brand { display: inline-flex; margin-bottom: 24px; }
.security-main > a:not(.security-brand) { display: block; }
.login-brand, .demo-login .login-brand, .hardware-login .login-brand { background: radial-gradient(ellipse at 95% 5%, #226777 0, transparent 56%), linear-gradient(145deg, #182b46, #102035); }
.login-brand .logo { padding: 0; }
.login-brand .logo > .themyrion-brand { position: static; color: #f5fafb; font-size: inherit; letter-spacing: normal; }
.login-brand .themyrion-brand img { width: 48px; height: 48px; flex-basis: 48px; }
.login-brand .themyrion-wordmark { font-size: 34px; }
.login-brand .eyebrow, .login-brand > small { color: #a3d4d4; }
.login-copy h1 { color: #fff; letter-spacing: -1.8px; }
.login-copy p { color: #d1e2eb; }
.login-preview { border-color: #7eb7be40; background: #ffffff0a; }
.login-preview span, .login-preview small { color: #c0dadf; }
.login-brand .login-preview div i:nth-child(n) { background: linear-gradient(0deg, #388c94, #83ded2); }
.control-side { background: linear-gradient(170deg, #182b46, #11263c); }
.control-side nav a.selected, .control-side nav a:hover { background: #ffffff12; color: #b1ede4; }
.nexo-simple, .setup-body, .portal-body, .access-body, .control-body { background: radial-gradient(ellipse at 10% 0, #dceff080, transparent 38%), var(--brand-canvas); }
.simple-header { background: #fffffff2; }
.demo-bar { background: #e8f3f3; border-color: #cde3e3; color: var(--brand-ink); }
.demo-dot { background: var(--brand-primary); }
.role-badge { background: #eaf0f5; color: var(--brand-muted); }
.text-button { color: var(--brand-primary-hover); }
.nexo-simple :is(.welcome-heading h1, .tool-card b, .task-card b, .stat strong, .group-title) { color: var(--brand-ink); }
.nexo-simple .hero-task b { color: white; }
.simple-header, .setup-header { gap: 20px; }
.simple-header .header-actions { flex-shrink: 0; }
.platform-link { background: var(--brand-ink) !important; }
.button.primary, .hero-task, .setup-option.selected .setup-check { background: var(--brand-primary); border-color: var(--brand-primary); color: white; }
.button.primary:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); }
.button.secondary { color: var(--brand-ink); background: #fff; border-color: #d1dfe7; }
.button.secondary:hover { background: var(--brand-soft); border-color: #91bebf; }
.primary-link.active, .nexo-simple .mobile-navigation .active { color: var(--brand-primary-hover); background: var(--brand-soft); }
.primary-link.active::after { background: var(--brand-primary); }
.avatar, .tool-icon, .task-icon, .stat-icon, .help-button > span, .setup-symbol { color: var(--brand-primary-hover); background: var(--brand-soft); }
.demo-entry-link, .demo-owner-link, .access-card .setup-eyebrow, .eyebrow, .setup-eyebrow, .adaptive-label, .control-eyebrow, .portal-mode { color: var(--brand-primary-hover); }
.login-form h2, .page-heading h1, .section-heading h2, .panel-heading h2, .group-title, .tool-card b, .task-card b, .stat strong, .product-name, .inventory-product .product-name { color: var(--brand-ink); }
.product-card-open { color: var(--brand-primary-hover); background: #f3f8f9; border-color: var(--brand-line); }
.product-card-bottom > b, .module-card > strong { color: var(--brand-primary-hover); }
.inventory-product, .module-card, .panel, .access-card, .portal-entry, .demo-start { border-color: var(--brand-line); }
.portal-entry:hover, .setup-option.selected { border-color: var(--brand-primary); background: var(--brand-soft); }
.setup-progress .done, .setup-progress .current { background: var(--brand-primary); }
.setup-check { color: var(--brand-primary); }
.loader { border-color: #d7e7e8; border-top-color: var(--brand-primary); }
.loading-surface { color: var(--brand-muted); }
.loading-surface .themyrion-brand { margin-bottom: 8px; }
.app-footer, .portal-footer, .login-form footer { color: var(--brand-muted); }
.toast { background: var(--brand-ink); border-color: #447582; box-shadow: 0 6px 25px #182b4626; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--brand-primary); }
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px #167b8022; }
@media (max-width: 1150px) { .simple-header { gap: 14px; } .simple-header .primary-link { padding-inline: 11px; } }
@media (min-width: 701px) and (max-width: 1100px) { .control-logo .themyrion-brand span { font-size: 20px; } .control-logo .themyrion-brand img { width: 28px; height: 28px; flex-basis: 28px; } }
@media (max-width: 700px) {
  .themyrion-wordmark { font-size: 24px; letter-spacing: -.8px; }
  .themyrion-brand img { width: 34px; height: 34px; flex-basis: 34px; }
  .simple-header { padding-inline: 16px; gap: 12px; }
  .simple-header .themyrion-brand { gap: 7px; }
  .simple-header .themyrion-wordmark { font-size: 22px; }
  .setup-header { align-items: center; gap: 12px; flex-wrap: wrap; }
  .setup-save { font-size: 12px; }
  .login-brand .themyrion-wordmark { font-size: 29px; }
  .login-brand .themyrion-brand img { width: 40px; height: 40px; flex-basis: 40px; }
  .brand-owner-label { margin-top: 8px; }
}
@media (max-width: 380px) {
  .simple-header { padding-inline: 12px; }
  .simple-header .themyrion-wordmark { font-size: 20px; }
  .simple-header .themyrion-brand img { width: 30px; height: 30px; flex-basis: 30px; }
}
@media (prefers-reduced-motion: reduce) { .loader { animation: none; } }