.logo {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: max-content
}

.logo-mark {
  width: 30px;
  height: 45px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--blue), var(--cyan));
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(23, 104, 255, .21);
  color: #fff;
  font-size: 21px;
  font-weight: 950;

  background: none;
  box-shadow: none;
}

.logo-copy {
  line-height: 1
}

.logo-copy b {
  display: block;
  color: var(--navy);
  font-size: 18px;
  letter-spacing: -.03em
}

.logo-copy small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
  letter-spacing: .03em;
  text-transform: uppercase
}

.mobile-menu-btn {
    display: none;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The public header also contains persistent locale/theme controls. Collapse
   the long desktop navigation before those controls can force the shell past
   the viewport edge on compact laptops and browser side-by-side layouts. */
@media (max-width: 1320px) {
    .public-body .site-nav {
        display: none !important;
    }

    .public-body .mobile-menu-btn,
    .public-body .site-actions .mobile-menu-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Generated page bundles can contain an older, more-specific guest-action
       rule. The shared shell remains authoritative for the mobile trigger. */
    .site-actions .mobile-menu-btn {
        display: inline-flex !important;
    }

    .public-body .site-nav.mobile-open {
        display: flex !important;
        position: absolute;
        top: 64px;
        left: 14px;
        right: 14px;
        flex-direction: column;
        align-items: stretch;
        background: #fff;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 16px;
        box-shadow: var(--shadow-lg);
        z-index: 100;
    }
}

@media (max-width: 780px) {
    .site-actions > a {
        display: none;
    }

    .mobile-menu-btn {
        display: inline-flex;
    }

    .site-actions > [data-guest-actions],
    .site-actions > [data-user-actions] {
        display: none !important;
    }
}

.site-actions > [data-guest-actions]:not([hidden]),
.site-actions > [data-user-actions]:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

[data-public-mobile-actions] {
  display: none;
}

@keyframes kontrum-surface-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.public-body .auth-surface,
.auth-flow-body .auth-flow-card,
.auth-flow-body .auth-flow-panel,
.public-body > main,
.public-body > section {
  animation: kontrum-surface-enter 420ms cubic-bezier(.22, 1, .36, 1) both;
}

@media (max-width: 1100px) {
  [data-public-mobile-actions] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding-top: 10px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
  }

  [data-public-mobile-actions] > a {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-body .auth-surface,
  .auth-flow-body .auth-flow-card,
  .auth-flow-body .auth-flow-panel,
  .public-body > main,
  .public-body > section {
    animation: none;
  }
}

/* Public and guest auth pages honor the saved appearance preference too. */
html[data-theme="dark"] body.public-body {
  --bg: #0b1220;
  --surface: #111b2b;
  --surface-2: #172235;
  --line: #2a3950;
  --navy: #f4f7fc;
  --text: #d8e2f0;
  --muted: #9aabc2;
  --muted-2: #71839c;
  --blue-soft: #142d57;
  --green-soft: #12372d;
  --amber-soft: #3a2a12;
  --red-soft: #3a1d25;
  --violet-soft: #281f4b;
  color-scheme: dark;
  color: var(--text);
  background: var(--bg);
}

html[data-theme="dark"] .public-body .site-header {
  border-color: var(--line) !important;
  background: rgba(11, 18, 32, .9) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
}

html[data-theme="dark"] .public-body .site-nav,
html[data-theme="dark"] .public-body .section.alt,
html[data-theme="dark"] .public-body .site-card,
html[data-theme="dark"] .public-body .public-mock,
html[data-theme="dark"] .public-body .auth-surface,
html[data-theme="dark"] .public-body .auth-form-panel {
  border-color: var(--line) !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .public-body .auth-experience {
  background:
    radial-gradient(circle at 12% 20%, rgba(23, 104, 255, .18), transparent 31%),
    linear-gradient(180deg, #0e1829 0%, #0b1220 100%) !important;
}

html[data-theme="dark"] .public-body > .hero,
html[data-theme="dark"] .public-body > .page-hero,
html[data-theme="dark"] .public-body > .catalog-hero {
  background:
    radial-gradient(circle at 86% 14%, rgba(23, 104, 255, .18), transparent 32%),
    linear-gradient(180deg, #0e1829 0%, #0b1220 100%) !important;
}

html[data-theme="dark"] .public-body > .section {
  background-color: var(--bg) !important;
}

html[data-theme="dark"] .public-body .mock-bar,
html[data-theme="dark"] .public-body .mock-body,
html[data-theme="dark"] .public-body .mock-kpi,
html[data-theme="dark"] .public-body .mock-panel {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .public-body .site-nav a,
html[data-theme="dark"] .public-body .hero-note,
html[data-theme="dark"] .public-body .check-list li {
  color: var(--muted) !important;
}

html[data-theme="dark"] .public-body .site-nav a.active,
html[data-theme="dark"] .public-body .site-nav a:hover {
  color: #73a5ff !important;
}

html[data-theme="dark"] .public-body .mock-row {
  border-color: var(--line) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .public-body .auth-brand-link:hover {
  background: rgba(23, 34, 53, .82) !important;
}

html[data-theme="dark"] .public-body .auth-form-panel .field label,
html[data-theme="dark"] .public-body .auth-form-options,
html[data-theme="dark"] .public-body .auth-help,
html[data-theme="dark"] .public-body .auth-form-lead {
  color: var(--muted) !important;
}

html[data-theme="dark"] .public-body input,
html[data-theme="dark"] .public-body select,
html[data-theme="dark"] .public-body textarea,
html[data-theme="dark"] .public-body .password-wrap {
  border-color: var(--line) !important;
  background: var(--surface-2) !important;
  color: var(--navy) !important;
}

html[data-theme="dark"] .public-body .btn:not(.primary):not(.danger):not(.success) {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

@media (prefers-reduced-motion: no-preference) {
  .public-body .site-header,
  .public-body .auth-brand-header {
    animation: kontrum-public-header-enter 360ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .public-body .auth-context {
    animation: kontrum-public-context-enter 520ms cubic-bezier(.22, 1, .36, 1) 50ms both;
  }

  .public-body .auth-form-panel {
    animation: kontrum-public-panel-enter 480ms cubic-bezier(.22, 1, .36, 1) 110ms both;
  }

  .public-body .register-heading {
    animation: kontrum-public-context-enter 460ms cubic-bezier(.22, 1, .36, 1) 50ms both;
  }

  .public-body .register-surface {
    animation: kontrum-public-panel-enter 520ms cubic-bezier(.22, 1, .36, 1) 100ms both;
  }

  .public-body .register-form-column,
  .public-body .register-summary {
    animation: kontrum-public-section-enter 520ms cubic-bezier(.22, 1, .36, 1) 170ms both;
  }

  .public-body > .hero > .container,
  .public-body > .page-hero > .container,
  .public-body > .catalog-hero > .container {
    animation: kontrum-public-hero-enter 520ms cubic-bezier(.22, 1, .36, 1) 50ms both;
  }

  .public-body > .section > .container,
  .public-body > main > .section > .container,
  .public-body .site-footer > .container {
    animation: kontrum-public-section-enter 520ms cubic-bezier(.22, 1, .36, 1) 120ms both;
  }
}

@keyframes kontrum-public-header-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kontrum-public-context-enter {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes kontrum-public-panel-enter {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes kontrum-public-hero-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes kontrum-public-section-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Public/auth preferences and the explicit saved-account chooser live in the
   public layer. Authenticated product styling remains isolated in
   friendly-unified-ui.css. */
.public-preferences {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.public-preference-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.public-language-button {
  width: auto;
  min-width: 46px;
  padding: 0 10px;
}

.public-preference-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.public-preference-button:is(:hover, :focus-visible) {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.public-preference-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--blue) 38%, transparent);
  outline-offset: 2px;
}

.auth-brand-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-account-chooser {
  display: grid;
  gap: 18px;
  padding: 34px;
  background: var(--surface);
  color: var(--text);
}

.public-account-chooser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.public-account-chooser-head h2 {
  margin: 8px 0 6px;
}

.public-account-chooser-head p {
  margin: 0;
  color: var(--muted);
}

.public-account-chooser-list {
  display: grid;
  gap: 10px;
}

.public-account-option {
  width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.public-account-option:hover,
.public-account-option:focus-visible {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.public-account-option > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.public-account-option :is(b, small) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.public-account-option small {
  color: var(--muted);
}

.public-account-option strong {
  color: var(--blue);
  white-space: nowrap;
}

html[data-theme="dark"] :is(.site-header, .site-nav, .site-actions, .auth-surface, .auth-form-panel, .public-mock, .site-card, .mock-panel, .mock-kpi) {
  border-color: var(--line) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] :is(.site-nav a, .site-actions a) {
  color: var(--text) !important;
}

html[data-theme="dark"] .site-nav a:is(:hover, .active) {
  background: var(--blue-soft) !important;
  color: #8bb9ff !important;
}

@media (max-width: 760px) {
  .public-body .site-header-inner {
    gap: 8px;
  }

  .public-body .site-actions {
    min-width: 0;
    gap: 5px;
  }

  .public-preferences {
    gap: 5px;
  }

  .public-preference-button {
    width: 34px;
    height: 34px;
    font-size: 10px;
  }

  .public-language-button {
    width: auto;
    min-width: 40px;
    padding: 0 8px;
  }

  .public-preference-button svg {
    width: 17px;
    height: 17px;
  }

  .public-account-chooser,
  .auth-form-panel {
    padding: 22px;
  }

  .public-account-chooser-head {
    display: grid;
  }

  .public-account-option {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .public-account-option > strong {
    grid-column: 2;
  }
}
/* Public feature pages show a sanitized image of the actual working module. */
.module-interface-preview {
  padding-bottom: 32px !important;
}

.module-interface-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line, #dfe6f0);
  border-radius: 24px;
  background: var(--surface, #fff);
  box-shadow: 0 28px 72px rgba(15, 38, 78, .12);
}

.module-interface-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 780;
  object-fit: cover;
  object-position: top left;
}

.module-interface-frame figcaption {
  padding: 12px 18px;
  border-top: 1px solid var(--line, #dfe6f0);
  color: var(--muted, #64748b);
  background: var(--surface, #fff);
  font-size: 12px;
}

html[data-theme="dark"] .module-interface-frame {
  border-color: #2b3b51;
  background: #111d2d;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .module-interface-frame img {
  opacity: .92;
}

html[data-theme="dark"] .module-interface-frame figcaption {
  border-color: #2b3b51;
  color: #a9b7ca;
  background: #111d2d;
}

@media (max-width: 720px) {
  .module-interface-frame {
    overflow-x: auto;
    border-radius: 16px;
  }

  .module-interface-frame img {
    width: 920px;
    max-width: none;
  }
}
/* Returning users reach the form first; desktop keeps its two-column layout. */
@media(max-width:600px){
  .public-body .auth-login-surface .auth-form-panel{order:-1}
  .public-body .auth-login-surface .auth-context{padding:20px}
  .public-body .auth-login-surface .auth-context h1{font-size:22px}
}