/*
 * Chloé professional interface theme - 30 August 2026
 * Palette sampled from the approved blue, aqua, mint and mist reference artwork.
 * This file is deliberately loaded last so legacy screens share one visual system.
 */
:root {
  color-scheme: light;
  --chloe-navy: #1C4D58;
  --chloe-deep-blue: #276D98;
  --chloe-blue: #2B66BA;
  --chloe-aqua: #38A0BE;
  --chloe-water: #6CACCD;
  --chloe-steel: #92B4C7;
  --chloe-mist: #A8CFD7;
  --chloe-cloud: #D3E0E5;
  --chloe-mint: #9DC9B1;
  --chloe-green: #4A9379;
  --chloe-ink: #173540;
  --chloe-text: #35525D;
  --chloe-muted: #5F7780;
  --chloe-page: #F3F8F9;
  --chloe-surface: #FFFFFF;
  --chloe-surface-soft: #F7FBFC;
  --chloe-line: rgba(103, 160, 171, .28);
  --chloe-line-strong: rgba(39, 109, 152, .34);
  --chloe-focus: rgba(56, 160, 190, .20);
  --chloe-shadow: 0 22px 58px rgba(28, 77, 88, .12);
  --chloe-shadow-soft: 0 10px 28px rgba(28, 77, 88, .08);
  --chloe-radius: 18px;
  --chloe-control-height: 44px;
  --chloe-control-height-compact: 38px;
  --chloe-control-radius: 11px;
  --chloe-control-border: rgba(103, 160, 171, .42);
  --chloe-control-border-hover: rgba(39, 109, 152, .58);
  --chloe-form-gap: 16px;
  --chloe-button-text: #2D5666;
  --chloe-button-text-hover: #173540;
  --chloe-button-on-brand: #FFFFFF;
  --chloe-button-disabled-text: #5B6E76;
  --chloe-button-disabled-bg: #E9EFF1;
  --chloe-button-danger-text: #8A303A;
  --chloe-button-danger-bg: #FFF4F5;
  --chloe-danger: #98424C;
  --chloe-danger-line: #DCAEB4;
  --chloe-danger-soft: #FFF4F5;
  --chloe-brand-gradient: linear-gradient(135deg, #2B66BA 0%, #276D98 52%, #1C6B5D 100%);
  --chloe-brand-gradient-soft: linear-gradient(135deg, rgba(43,102,186,.12), rgba(56,160,190,.11) 54%, rgba(157,201,177,.16));

  /* Compatibility aliases used by older Chloé styles. */
  --blue: var(--chloe-blue);
  --navy: var(--chloe-navy);
  --teal: var(--chloe-aqua);
  --ink: var(--chloe-ink);
  --muted: var(--chloe-muted);
  --line: var(--chloe-line);
  --surface: var(--chloe-surface);
  --page: var(--chloe-page);
  --green: var(--chloe-green);
  --chloe-white: #FFFFFF;
  --chloe-pearl: #F7FBFC;
  --chloe-soft: #EDF6F7;
  --chloe-cyan: var(--chloe-aqua);
  --chloe-silver: var(--chloe-steel);
  --chloe-red: var(--chloe-blue);
}

html {
  background: var(--chloe-page) !important;
  scrollbar-color: var(--chloe-steel) var(--chloe-page) !important;
}

body {
  color: var(--chloe-text) !important;
  background:
    radial-gradient(circle at 2% 2%, rgba(108,172,205,.20), transparent 34rem),
    radial-gradient(circle at 98% 0%, rgba(157,201,177,.20), transparent 31rem),
    radial-gradient(circle at 86% 94%, rgba(168,207,215,.15), transparent 35rem),
    linear-gradient(155deg, #FFFFFF 0%, #F3F8F9 56%, #EDF5F6 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  background-image: radial-gradient(circle, rgba(39,109,152,.07) 1px, transparent 1.2px) !important;
  background-size: 30px 30px !important;
}

::selection { background: rgba(56,160,190,.24) !important; color: var(--chloe-ink) !important; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--chloe-focus) !important;
  outline-offset: 2px !important;
}

a { color: var(--chloe-deep-blue); }
a:hover { color: var(--chloe-blue); }

h1, h2, h3, h4, h5, h6,
.hero-copy h1, .hero-copy h1 span,
.signed-user strong, .user-mini strong,
.summary-card strong, td strong {
  color: var(--chloe-ink) !important;
}

.chloe-icon {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  color: currentColor;
  stroke-width: 1.8;
}

/* Shared brand treatment */
.brand-avatar {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(103,160,171,.30) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, #FFFFFF, #F0F7F8) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.85), 0 10px 24px rgba(28,77,88,.12) !important;
}

.brand-avatar::before,
.brand-avatar::after { display: none !important; }

.brand-avatar img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 43px !important;
  height: 43px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

.brand-copy strong {
  color: var(--chloe-ink) !important;
  background: none !important;
  font-size: 26px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  letter-spacing: -.04em !important;
  animation: none !important;
}

.brand-copy small {
  color: var(--chloe-muted) !important;
  font-weight: var(--font-weight-interface, 500) !important;
  letter-spacing: .09em !important;
}

.sidebar-brand-lockup {
  width: 100% !important;
  max-width: 212px !important;
  height: auto !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Main product shell */
.shell { background: transparent !important; }

.sidebar {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 14px 0 40px rgba(28,77,88,.06) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

.sidebar .brand { border-color: var(--chloe-line) !important; }
.nav-section { color: #58717B !important; }
.nav a, .nav .nav-disabled { color: #526D77 !important; }
.nav a .nav-icon { color: var(--chloe-deep-blue) !important; }
.nav a:hover {
  border-color: rgba(56,160,190,.22) !important;
  background: #F1F9FA !important;
  color: var(--chloe-ink) !important;
}
.nav a.active {
  border-color: rgba(39,109,152,.25) !important;
  background: linear-gradient(90deg, rgba(43,102,186,.11), rgba(56,160,190,.09), rgba(157,201,177,.10)) !important;
  color: var(--chloe-navy) !important;
  box-shadow: inset 3px 0 0 var(--chloe-aqua) !important;
}
.nav a.active .nav-icon { color: var(--chloe-blue) !important; }
.sidebar-foot { border-color: var(--chloe-line) !important; }
.signout { color: var(--chloe-deep-blue) !important; }

.mobile-top,
.topbar,
.app-header {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 9px 28px rgba(28,77,88,.08) !important;
  backdrop-filter: blur(22px) saturate(125%) !important;
}

.content {
  background:
    radial-gradient(circle at 8% 5%, rgba(108,172,205,.13), transparent 29rem),
    radial-gradient(circle at 95% 4%, rgba(157,201,177,.11), transparent 27rem),
    linear-gradient(155deg, rgba(255,255,255,.88), rgba(243,248,249,.94)) !important;
}

.crumb, .hero p, .sub, .muted, .hint, .foot { color: var(--chloe-muted) !important; }
.environment, .header-system-status, .system-status-pill {
  border-color: var(--chloe-line) !important;
  background: #F5FAFA !important;
  color: #536F79 !important;
}
.live-dot, .status-live-dot { background: var(--chloe-green) !important; box-shadow: 0 0 0 4px rgba(74,147,121,.11) !important; }

/* Shared live-status heartbeat for the header control and System Status page - September 2026.
 * Each component supplies its existing semantic colour through the custom property.
 * Opacity, transform and filter are paint-only, so the animation cannot shift layout.
 */
.header-system-status.ok { --chloe-live-status-colour: #4A9379; }
.header-system-status.attention { --chloe-live-status-colour: #D88322; }
.system-status-row { --chloe-live-status-colour: #26B56F; }
.system-status-row.configured { --chloe-live-status-colour: #6C55E8; }
.system-status-row.warning { --chloe-live-status-colour: #D88322; }
.system-status-row.error { --chloe-live-status-colour: #D74A55; }

.header-system-status .status-live-dot,
.system-status-indicator {
  background: var(--chloe-live-status-colour) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--chloe-live-status-colour) 11%, transparent) !important;
  transform-origin: center;
  animation: chloe-operational-heartbeat 2.2s ease-in-out infinite;
  will-change: opacity, transform, filter;
}

@keyframes chloe-operational-heartbeat {
  0%, 100% {
    opacity: .62;
    transform: scale(.92);
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--chloe-live-status-colour) 18%, transparent));
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chloe-live-status-colour) 36%, transparent));
  }
}

@media (prefers-reduced-motion: reduce) {
  .header-system-status .status-live-dot,
  .system-status-indicator {
    animation: none !important;
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }
}

/* Administrator Role Preview - September 2026. */
.header-role-preview-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid rgba(73, 91, 214, .34);
  border-radius: var(--chloe-button-radius, 6px);
  background: rgba(124, 157, 244, .10);
  color: var(--chloe-deep-blue, #030E35);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--font-weight-interface, 500);
  line-height: 1;
  white-space: nowrap;
}
.header-role-preview-link:hover {
  border-color: #495BD6;
  background: rgba(124, 157, 244, .18);
  color: #030E35;
}
.header-role-preview-link .chloe-icon {
  width: 17px;
  height: 17px;
}

.chloe-role-preview-banner {
  position: sticky;
  top: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid rgba(255, 255, 255, .30);
  background: linear-gradient(100deg, #030E35 0%, #263A91 58%, #495BD6 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 24px rgba(3, 14, 53, .20);
}
.chloe-role-preview-copy {
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
}
.chloe-role-preview-copy strong {
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: var(--font-weight-emphasis, 600);
}
.chloe-role-preview-copy span {
  font-size: 14px;
  font-weight: var(--font-weight-interface, 500);
}
.chloe-role-preview-copy small {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}
.chloe-role-preview-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chloe-role-preview-actions form {
  margin: 0;
}
.chloe-role-preview-actions a,
.chloe-role-preview-actions button {
  min-height: 34px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px !important;
  border: 1px solid rgba(255, 255, 255, .54) !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  font: inherit;
  font-size: 12px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  text-decoration: none;
  cursor: pointer;
}
.chloe-role-preview-actions button {
  background: #FFFFFF !important;
  color: #030E35 !important;
}

.role-preview-safety {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid rgba(73, 91, 214, .25);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(173, 211, 250, .24), rgba(181, 141, 246, .10));
}
.role-preview-safety h2 {
  margin: 6px 0;
}
.role-preview-safety p {
  max-width: 850px;
  margin: 0;
}
.role-preview-mode {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: #030E35;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: var(--font-weight-interface, 500);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.role-preview-current {
  margin-bottom: 18px;
}
.role-preview-context-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0 20px 20px;
}
.role-preview-context-grid div {
  min-width: 0;
  padding: 14px;
  background: rgba(173, 211, 250, .14);
}
.role-preview-context-grid dt {
  color: #61708E;
  font-size: 11px;
  font-weight: var(--font-weight-interface, 500);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.role-preview-context-grid dd {
  margin: 5px 0 0;
  color: #030E35;
  font-weight: var(--font-weight-body, 400);
}
.role-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr);
  gap: 18px;
}
.role-preview-role-list {
  display: grid;
  gap: 10px;
  padding: 0 20px 20px;
}
.role-preview-role-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px;
  border: 1px solid rgba(3, 14, 53, .10);
  border-radius: 9px;
  background: #FFFFFF;
}
.role-preview-role-card h3,
.role-preview-role-card p {
  margin: 0 0 5px;
}
.role-preview-role-card p,
.role-preview-role-card small {
  color: #61708E;
}
.role-preview-user-form {
  display: grid;
  gap: 9px;
  padding: 0 20px 20px;
}
.role-preview-user-form label {
  color: #030E35;
  font-size: 13px;
  font-weight: var(--font-weight-interface, 500);
}
.role-preview-user-form input,
.role-preview-user-form select {
  width: 100%;
  border: 1px solid rgba(3, 14, 53, .18);
  border-radius: 6px;
  background: #FFFFFF;
  color: #030E35;
}
.role-preview-user-form input {
  min-height: 42px;
  padding: 0 12px;
}
.role-preview-user-form select {
  min-height: 280px;
  padding: 5px;
}
.role-preview-user-form option {
  padding: 8px;
}
.role-preview-blocked {
  width: min(620px, calc(100% - 32px));
  margin: 10vh auto;
  padding: 28px;
  border: 1px solid rgba(73, 91, 214, .24);
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 18px 50px rgba(3, 14, 53, .12);
}

@media (max-width: 980px) {
  .role-preview-grid { grid-template-columns: 1fr; }
  .role-preview-context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .header-role-preview-link {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
  }
  .header-role-preview-link > span { display: none !important; }
  .chloe-role-preview-banner {
    position: relative;
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 14px;
  }
  .chloe-role-preview-actions {
    width: 100%;
  }
  .chloe-role-preview-actions a,
  .chloe-role-preview-actions form,
  .chloe-role-preview-actions button {
    flex: 1 1 0;
  }
  .role-preview-safety,
  .role-preview-role-card {
    align-items: stretch;
    flex-direction: column;
  }
  .role-preview-context-grid { grid-template-columns: 1fr; }
}
.eyebrow, .tool-kicker, .section-label { color: var(--chloe-deep-blue) !important; }

/* Heroes and working surfaces */
.hero,
.register-hero,
.onboarding-hero,
.queue-head,
.request-title,
.tool-hero,
.auth-identity,
.info-hero {
  border-color: var(--chloe-line) !important;
  background:
    radial-gradient(circle at 12% 88%, rgba(108,172,205,.20), transparent 36%),
    radial-gradient(circle at 86% 18%, rgba(157,201,177,.20), transparent 34%),
    radial-gradient(circle at 55% 15%, rgba(56,160,190,.08), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(243,248,249,.95) 62%, rgba(211,224,229,.42)) !important;
  color: var(--chloe-text) !important;
  box-shadow: var(--chloe-shadow) !important;
}

.register-hero { overflow: hidden !important; }
.register-hero::before,
.onboarding-hero::before,
.queue-head::before,
.request-title::before,
.tool-hero::before {
  background: radial-gradient(circle, rgba(56,160,190,.18), transparent 68%) !important;
}
.register-hero::after { border-color: rgba(108,172,205,.16) !important; box-shadow: 0 0 0 55px rgba(108,172,205,.05), 0 0 0 110px rgba(157,201,177,.04) !important; }
.hero-copy > p:not(.eyebrow), .onboarding-hero p, .queue-head p, .request-title p, .tool-hero p { color: var(--chloe-muted) !important; }
.hero-badges span, .tool-pill {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.78) !important;
  color: #55727C !important;
}

/* Cards, panels and data tables */
.card, .panel, .metric, .summary-card, .device-register,
.form-section, .queue-panel, .request-card, .tool-panel,
.asset-choice, .asset-option, .asset-portal-card, .asset-request-card,
.asset-confirm-card, .asset-admin-card, .assignment-card,
.accessory-editor, .accessory-row, .workflow-strip, .detail,
.danger-zone, .info-card, .system-box, .queue-card, .register-card {
  border-color: var(--chloe-line) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(247,251,252,.98)) !important;
  color: var(--chloe-text) !important;
  box-shadow: var(--chloe-shadow-soft) !important;
}

.summary-card:hover, .summary-card.active,
.asset-choice:hover, .asset-choice:has(input:checked),
.asset-option:hover, .asset-option:has(input:checked) {
  border-color: rgba(56,160,190,.48) !important;
  background: linear-gradient(145deg, #FFFFFF, #EFF8F9) !important;
}
.summary-card.active { box-shadow: inset 0 3px 0 var(--chloe-aqua), var(--chloe-shadow-soft) !important; }

.register-head, .tool-panel-head, .section-head, .panel-head,
.asset-list-head, .asset-confirm-top, .asset-admin-top {
  border-color: var(--chloe-line) !important;
  background: linear-gradient(180deg, #FFFFFF, #F5FAFA) !important;
}

.table-wrap, .tool-table-wrap { background: #FFFFFF !important; }
table, .tool-table, .queue-table, .access-users-table { background: transparent !important; }
th, .tool-table th, .queue-table th, .access-users-table th {
  border-color: var(--chloe-line) !important;
  background: #EEF5F6 !important;
  color: #58717B !important;
}
td, .tool-table td, .queue-table td, .access-users-table td {
  border-color: rgba(103,160,171,.19) !important;
  background: transparent !important;
  color: #36515B !important;
}
tbody tr:hover td, .tool-table tr:hover td { background: #F1F9FA !important; }
code, .code-token {
  border-color: var(--chloe-line) !important;
  background: #EEF6F7 !important;
  color: var(--chloe-deep-blue) !important;
}

/* Forms */
label, .tool-field label, .tool-label, .field label,
.choice-title, .accessory-name { color: #294A56 !important; }
input, select, textarea,
.tool-field input, .tool-field select, .tool-field textarea,
.tool-search input, .tool-search select,
.queue-filters input, .queue-filters select,
.inline-form input, .inline-form select {
  border-color: rgba(103,160,171,.42) !important;
  background: #FFFFFF !important;
  color: var(--chloe-ink) !important;
}
input::placeholder, textarea::placeholder { color: #657D86 !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--chloe-aqua) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 4px var(--chloe-focus) !important;
  outline: 0 !important;
}
option { background: #FFFFFF; color: var(--chloe-ink); }

.choice, .tool-check, .tool-stat, .tool-note, .privacy-note,
.approval-box, .asset-preview, .standard-apps span,
.requirement-list span, .workflow-step, .read-only-fields {
  border-color: var(--chloe-line) !important;
  background: #F4F9FA !important;
  color: #47636D !important;
}
.choice:hover, .choice:has(input:checked) {
  border-color: rgba(56,160,190,.55) !important;
  background: #EDF8F9 !important;
}
.choice:has(input:checked) { box-shadow: inset 3px 0 0 var(--chloe-aqua) !important; }

/* Buttons and icon tiles */
.button, .tool-button, .btn, .refresh, .register-clear,
.manage, .side-link, .secondary, .header-signout, .back {
  border-color: rgba(103,160,171,.38) !important;
  background: #FFFFFF !important;
  color: var(--chloe-button-text) !important;
  box-shadow: none !important;
}
.button:hover, .tool-button:hover, .btn:hover, .refresh:hover,
.register-clear:hover, .manage:hover, .side-link:hover,
.secondary:hover, .header-signout:hover, .back:hover {
  border-color: var(--chloe-aqua) !important;
  background: #EFF8F9 !important;
  color: var(--chloe-button-text-hover) !important;
}
.button.primary, .tool-button.primary, .btn-primary, .btn.primary,
.primary-action, button[type="submit"], input[type="submit"] {
  border-color: transparent !important;
  background: var(--chloe-brand-gradient) !important;
  color: var(--chloe-button-on-brand) !important;
  box-shadow: 0 10px 24px rgba(39,109,152,.20) !important;
}
.button.primary:hover, .tool-button.primary:hover, .btn-primary:hover, .btn.primary:hover,
.primary-action:hover, button[type="submit"]:hover, input[type="submit"]:hover {
  filter: saturate(1.08) brightness(.97);
  box-shadow: 0 14px 30px rgba(39,109,152,.25) !important;
  transform: translateY(-1px);
}
.btn-danger { border-color: #DCAEB4 !important; background: var(--chloe-button-danger-bg) !important; color: var(--chloe-button-danger-text) !important; }

.action-panel {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: 0 24px 58px rgba(28,77,88,.16) !important;
}
.action-panel a, .action-panel button { color: var(--chloe-text) !important; }
.action-panel a:hover, .action-panel button:hover { border-color: var(--chloe-line) !important; background: #F0F8F9 !important; }
.action-panel i, .quick-icon, .summary-icon, .section-icon, .status-summary-icon,
.auth-benefit-icon {
  border-color: rgba(103,160,171,.25) !important;
  background: linear-gradient(145deg, #F3F9FA, #E6F2F4) !important;
  color: var(--chloe-deep-blue) !important;
}
.action-panel i.teal, .summary-icon.teal, .quick-icon.teal { background: #E7F5F1 !important; color: var(--chloe-green) !important; }
.action-panel i.purple, .summary-icon.purple, .quick-icon.violet { background: #EDF4FA !important; color: var(--chloe-blue) !important; }
.action-panel i.green, .summary-icon.green, .quick-icon.green { background: #E9F5EE !important; color: var(--chloe-green) !important; }
.action-panel i.orange, .summary-icon.orange, .quick-icon.orange { background: #F7F1E7 !important; color: #8A681F !important; }
.action-panel i.pink, .quick-icon.pink { background: #EEF7F6 !important; color: #3E8170 !important; }

/* Status and condition badges */
.status, .status-pill, .asset-status, .request-status,
.type-pill, .condition, .warranty, .badge {
  border: 1px solid rgba(103,160,171,.28) !important;
  background: #EEF4F6 !important;
  color: #506A74 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.status-available-for-allocation, .status-in-storage-ready,
.status-reserved-for-allocation, .available {
  border-color: rgba(43,102,186,.28) !important;
  background: #EDF4FB !important;
  color: #285F93 !important;
}
.status-allocated-in-use, .status-completed, .status-ok,
.status-approved, .asset-status-approved, .asset-status-confirmed,
.condition-good, .condition-new, .good, .success {
  border-color: rgba(74,147,121,.30) !important;
  background: #EAF5EF !important;
  color: #397760 !important;
}
.status-allocated-not-in-use, .status-temporary-loan-device,
.status-in-transit, .status-in-progress, .status-submitted,
.status-awaiting-approval, .asset-status-ready-for-collection {
  border-color: rgba(56,160,190,.32) !important;
  background: #EAF6F8 !important;
  color: #2E788C !important;
}
.status-it-support-wip, .status-it-support-awaiting-user,
.status-it-support-awaiting-parts, .status-it-support-awaiting-decision,
.status-in-storage-requires-attention, .status-third-party-repair,
.status-third-party-assessment, .status-third-party-awaiting-parts,
.status-third-party-refurb, .status-returned-to-supplier,
.warning, .warn, .attention {
  border-color: #E4D09C !important;
  background: #FBF7EA !important;
  color: #806322 !important;
}
.status-lost, .status-stolen, .status-lost-stolen,
.status-damaged-not-usable, .status-cancelled,
.asset-status-cancelled, .asset-status-declined,
.asset-status-issue-reported, .asset-status-not-mine,
.condition-bad, .bad, .danger, .error {
  border-color: #E7BDC2 !important;
  background: #FFF4F5 !important;
  color: #98424C !important;
}
.status-retired, .status-retired-in-storage, .status-pending-disposal,
.status-decommissioned, .status-scrapped, .status-scrapped-parts-only {
  border-color: #CBD8DD !important;
  background: #F1F5F6 !important;
  color: #61737B !important;
}
.status-disposed-e-waste { border-color: rgba(74,147,121,.28) !important; background: #ECF5F0 !important; color: #3E725D !important; }
.eol { color: #9B4650 !important; font-weight: var(--font-weight-interface, 500) !important; }

/* Authentication and account pages */
body.auth-page, body.auth-login {
  background:
    radial-gradient(circle at 14% 18%, rgba(108,172,205,.34), transparent 31rem),
    radial-gradient(circle at 86% 14%, rgba(157,201,177,.31), transparent 30rem),
    radial-gradient(circle at 52% 88%, rgba(56,160,190,.18), transparent 35rem),
    linear-gradient(145deg, #F8FCFD 0%, #EAF4F6 54%, #E2EFF0 100%) !important;
}
body.auth-page::before, body.auth-login::before {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  background:
    radial-gradient(ellipse at 18% 62%, rgba(39,109,152,.17), transparent 34%),
    radial-gradient(ellipse at 78% 24%, rgba(157,201,177,.20), transparent 32%),
    radial-gradient(ellipse at 58% 70%, rgba(56,160,190,.13), transparent 37%),
    linear-gradient(118deg, rgba(255,255,255,.72), rgba(211,224,229,.32)) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  content: "" !important;
}
body.auth-page::after, body.auth-login::after { background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.18)) !important; }
.auth-shell { position: relative !important; z-index: 2 !important; }
.auth-identity {
  border: 1px solid rgba(103,160,171,.24) !important;
  background: rgba(255,255,255,.42) !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
}
.auth-identity::before { display: none !important; }
.auth-brand-lockup > img, .twofa-logo {
  width: min(560px, 88%) !important;
  max-height: 220px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 14px 28px rgba(28,77,88,.12)) !important;
}
.auth-company { color: var(--chloe-deep-blue) !important; font-weight: var(--font-weight-interface, 500) !important; }
.auth-status {
  border-color: rgba(74,147,121,.30) !important;
  background: rgba(235,247,240,.90) !important;
  color: #397760 !important;
}
.auth-shell > .card {
  border-color: rgba(103,160,171,.32) !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--chloe-text) !important;
  box-shadow: 0 28px 68px rgba(28,77,88,.17) !important;
  backdrop-filter: blur(24px) saturate(115%) !important;
}
.auth-purpose {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.76) !important;
  box-shadow: var(--chloe-shadow-soft) !important;
}
.auth-purpose h2 { color: var(--chloe-ink) !important; }
.auth-purpose p, .auth-benefits li { color: var(--chloe-text) !important; }
.auth-benefits li { border-color: var(--chloe-line) !important; background: rgba(255,255,255,.82) !important; }
.auth-benefits li:nth-child(1) .auth-benefit-icon { border-color: rgba(43,102,186,.28) !important; background: #EDF4FB !important; color: var(--chloe-blue) !important; }
.auth-benefits li:nth-child(2) .auth-benefit-icon { border-color: rgba(56,160,190,.30) !important; background: #EAF6F8 !important; color: var(--chloe-aqua) !important; }
.auth-benefits li:nth-child(3) .auth-benefit-icon { border-color: rgba(74,147,121,.28) !important; background: #EAF5EF !important; color: var(--chloe-green) !important; }
.auth-help a, .forgot-link { color: var(--chloe-deep-blue) !important; }
.auth-help a:hover, .auth-help a:focus, .forgot-link:hover, .forgot-link:focus { color: var(--chloe-blue) !important; }
.register { border-color: var(--chloe-line) !important; }
.register strong { color: var(--chloe-ink) !important; }
.register a { border-color: var(--chloe-aqua) !important; color: var(--chloe-deep-blue) !important; }
.register a:hover { background: #EFF8F9 !important; }

.twofa-card {
  border-color: var(--chloe-line) !important;
  background: rgba(255,255,255,.96) !important;
  color: var(--chloe-text) !important;
  box-shadow: var(--chloe-shadow) !important;
}
.steps li::before { background: #EAF6F8 !important; color: var(--chloe-deep-blue) !important; }
.secret, .codes code { border-color: var(--chloe-line) !important; background: #F4F9FA !important; }
.uri { color: var(--chloe-deep-blue) !important; }

/*
 * Unified Chloé form component system
 * One control geometry, type hierarchy and state model is shared by requests,
 * onboarding, asset management, access control and account screens.
 */
form {
  accent-color: var(--chloe-deep-blue);
}

:where(.field, .tool-field, .chloe-field) {
  min-width: 0;
  display: grid;
  gap: 7px;
  align-content: start;
}

:where(label, .tool-field label, .tool-label, .field label, .chloe-field-label) {
  color: #294A56 !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.35;
  letter-spacing: .012em !important;
  text-transform: none !important;
}

.chloe-field-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
}

/* Standard required-field markers */
.required,
.field-required,
.required-marker,
:is(.field, .tool-field, .chloe-field) > label:not(:has(.required, .field-required, .required-marker)):has(+ :is(input, select, textarea)[required])::after,
form > label:not(:has(.required, .field-required, .required-marker)):has(+ :is(input, select, textarea)[required])::after,
:is(.choice, .tool-check):has(> input[required]) > span::after {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 0 3px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #B84550 !important;
  box-shadow: none !important;
  font-size: 1em !important;
  font-weight: var(--font-weight-emphasis, 600) !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  vertical-align: baseline;
  white-space: nowrap;
  flex: 0 0 auto;
}

:is(.field, .tool-field, .chloe-field) > label:not(:has(.required, .field-required, .required-marker)):has(+ :is(input, select, textarea)[required])::after,
form > label:not(:has(.required, .field-required, .required-marker)):has(+ :is(input, select, textarea)[required])::after,
:is(.choice, .tool-check):has(> input[required]) > span::after {
  content: "*";
}

.required-legend {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--chloe-muted) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-body, 400) !important;
  line-height: 1.4;
  white-space: nowrap;
}

.required-legend .required-marker {
  margin-left: 0 !important;
}

.field-help,
.field-message,
.tool-field small,
.hint {
  display: block;
  margin: 0;
  color: var(--chloe-muted) !important;
  font-size: 11px !important;
  line-height: 1.45;
}

:where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
  select,
  textarea
) {
  width: 100%;
  max-width: 100%;
  min-height: var(--chloe-control-height) !important;
  box-sizing: border-box;
  padding: 10px 12px !important;
  border: 1px solid var(--chloe-control-border) !important;
  border-radius: var(--chloe-control-radius) !important;
  background-color: #FFFFFF !important;
  color: var(--chloe-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.76), 0 1px 2px rgba(28,77,88,.035) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-body, 400) !important;
  line-height: 1.35;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

:where(select) {
  appearance: none;
  padding-right: 40px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #50717C 50%),
    linear-gradient(135deg, #50717C 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50% !important;
  background-repeat: no-repeat !important;
  background-size: 5px 5px, 5px 5px !important;
}

:where(textarea) {
  min-height: 112px !important;
  resize: vertical;
}

:where(input, textarea)::placeholder {
  color: #789099 !important;
  opacity: 1;
}

:where(
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(:disabled):not([readonly]),
  select:not(:disabled),
  textarea:not(:disabled):not([readonly])
):hover {
  border-color: var(--chloe-control-border-hover) !important;
}

:where(input, select, textarea):focus {
  border-color: var(--chloe-aqua) !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 0 0 4px var(--chloe-focus), 0 4px 12px rgba(28,77,88,.06) !important;
  outline: 0 !important;
}

:where(input, select, textarea):disabled,
:where(input, textarea)[readonly],
fieldset:disabled :where(input, select, textarea) {
  border-color: rgba(103,160,171,.24) !important;
  background-color: #EEF4F5 !important;
  color: #6C8087 !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .82;
}

:where(input, select, textarea)[aria-invalid="true"],
:where(input, select, textarea).is-invalid,
:where(input, select, textarea):user-invalid {
  border-color: var(--chloe-danger-line) !important;
  background-color: var(--chloe-danger-soft) !important;
  box-shadow: 0 0 0 4px rgba(152,66,76,.09) !important;
}

.field-error,
.validation-message,
.error-message,
.required-message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  color: var(--chloe-danger) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.45;
}

:where(input[type="checkbox"], input[type="radio"]) {
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--chloe-deep-blue) !important;
}

input[type="file"]::file-selector-button {
  min-height: 34px;
  margin: -6px 10px -6px -8px;
  padding: 0 11px;
  border: 1px solid var(--chloe-line-strong);
  border-radius: 8px;
  background: #F0F7F8;
  color: var(--chloe-navy);
  font: inherit;
  font-weight: var(--font-weight-interface, 500);
  cursor: pointer;
}

input[type="file"]:hover::file-selector-button {
  border-color: var(--chloe-control-border-hover);
  background: #E7F3F5;
  color: var(--chloe-button-text-hover);
}

input[type="file"]:disabled::file-selector-button {
  border-color: rgba(103,160,171,.22);
  background: var(--chloe-button-disabled-bg);
  color: var(--chloe-button-disabled-text);
  cursor: not-allowed;
}

:where(.tool-form-grid, .form-grid, .asset-form-grid) {
  gap: var(--chloe-form-gap) !important;
}

:where(.button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link, .secondary, .header-signout, .back, button[type="submit"], input[type="submit"]) {
  min-height: var(--chloe-control-height) !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px !important;
  border-radius: var(--chloe-control-radius) !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.2;
  letter-spacing: .008em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

:where(.inline-form, .workstation-user-edit) :where(input:not([type="hidden"]), select, .tool-button),
.directory-search :where(input, .tool-button) {
  min-height: var(--chloe-control-height-compact) !important;
}

:where(button, .button, .tool-button, .btn, input[type="submit"]):active:not(:disabled) {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(28,77,88,.10) !important;
}

:where(button, .button, .tool-button, .btn, input[type="submit"]):disabled,
:where(button, .button, .tool-button, .btn, input[type="submit"])[aria-disabled="true"] {
  border-color: rgba(103,160,171,.22) !important;
  background: var(--chloe-button-disabled-bg) !important;
  color: var(--chloe-button-disabled-text) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Unified high-contrast Chloé button colour system.
 * Keep nested labels and icons tied to the control colour so older component
 * rules cannot place blue or purple content on a chromatic button background.
 */
:is(.button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link, .secondary, .header-signout, .back)
  :is(span, strong, small, .chloe-icon, svg) {
  color: currentColor !important;
}

:is(.button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action, button[type="submit"])
  :is(span, strong, small, i, .chloe-icon, svg) {
  color: currentColor !important;
}

:is(.button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action, button[type="submit"], input[type="submit"]),
:is(.button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action, button[type="submit"], input[type="submit"]):is(:hover, :focus-visible, :active) {
  color: var(--chloe-button-on-brand) !important;
}

:is(.button, .tool-button, .btn)[aria-pressed="true"]:not(.danger, .btn-danger) {
  border-color: transparent !important;
  background: var(--chloe-brand-gradient) !important;
  color: var(--chloe-button-on-brand) !important;
  box-shadow: 0 10px 24px rgba(39,109,152,.20) !important;
}

:is(.button, .tool-button, .btn)[aria-pressed="true"]:not(.danger, .btn-danger)
  :is(span, strong, small, i, .chloe-icon, svg) {
  color: currentColor !important;
}

:is(button, .button, .tool-button, .btn, input[type="submit"])[aria-busy="true"]:not(:disabled, [aria-disabled="true"]) {
  cursor: progress !important;
}

:is(button.danger, .button.danger, .tool-button.danger, .btn.danger, .btn-danger, [data-variant="danger"]),
:is(button.danger, .button.danger, .tool-button.danger, .btn.danger, .btn-danger, [data-variant="danger"]):is(:hover, :focus-visible, :active) {
  border-color: var(--chloe-danger-line) !important;
  background: var(--chloe-button-danger-bg) !important;
  color: var(--chloe-button-danger-text) !important;
  box-shadow: none !important;
  filter: none !important;
}

:is(button.danger, .button.danger, .tool-button.danger, .btn.danger, .btn-danger, [data-variant="danger"])
  :is(span, strong, small, i, .chloe-icon, svg) {
  color: currentColor !important;
}

:is(button, .button, .tool-button, .btn, input[type="submit"]):is(:disabled, [aria-disabled="true"]),
:is(button, .button, .tool-button, .btn, input[type="submit"]):is(:disabled, [aria-disabled="true"]):is(:hover, :focus-visible, :active) {
  border-color: rgba(103,160,171,.22) !important;
  background: var(--chloe-button-disabled-bg) !important;
  color: var(--chloe-button-disabled-text) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

:is(button, .button, .tool-button, .btn, input[type="submit"]):is(:disabled, [aria-disabled="true"])
  :is(span, strong, small, i, .chloe-icon, svg) {
  color: currentColor !important;
}

.tool-flash {
  padding: 13px 15px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  line-height: 1.5;
  box-shadow: 0 6px 18px rgba(28,77,88,.055);
}

.tool-flash.error,
.tool-flash[role="alert"] {
  border-color: var(--chloe-danger-line) !important;
  background: var(--chloe-danger-soft) !important;
  color: var(--chloe-danger) !important;
}

.tool-flash ul {
  margin: 7px 0 0;
  padding-left: 19px;
}

/* My Requests and shared personal asset-service components */
.asset-portal-grid {
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr) !important;
  gap: 24px !important;
}

.asset-portal-card,
.asset-history-panel,
.asset-request-card,
.asset-confirm-card,
.asset-admin-card {
  border: 1px solid var(--chloe-line) !important;
  background: linear-gradient(145deg, #FFFFFF, #F8FBFC) !important;
  box-shadow: var(--chloe-shadow-soft) !important;
}

.asset-portal-card,
.asset-history-panel {
  overflow: hidden;
  border-radius: 17px !important;
}

.asset-portal-card {
  padding: 24px !important;
}

.asset-portal-card h2,
.asset-list-head h2 {
  color: var(--chloe-ink) !important;
  font-size: 20px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  letter-spacing: -.018em;
}

.asset-portal-card > p,
.asset-list-head p {
  color: var(--chloe-muted) !important;
  font-size: 12px !important;
  line-height: 1.55;
}

.asset-form-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 17px;
  padding: 10px 12px;
  border: 1px solid var(--chloe-line);
  border-radius: 11px;
  background: #F1F8F9;
  color: var(--chloe-muted);
  font-size: 11px;
  line-height: 1.4;
}

.asset-request-form {
  gap: var(--chloe-form-gap) !important;
}

.asset-form-grid {
  grid-template-columns: minmax(0, 1fr) minmax(112px, .38fr) !important;
}

.asset-request-form textarea {
  min-height: 124px !important;
}

.asset-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 2px;
  padding-top: 2px;
}

.asset-form-actions .button {
  min-width: 190px;
}

.asset-history-panel {
  min-width: 0;
}

.asset-history-panel .asset-list-head {
  align-items: center !important;
  margin: 0 !important;
  padding: 19px 21px 17px;
  border-bottom: 1px solid var(--chloe-line) !important;
  background: linear-gradient(180deg, #FFFFFF, #F5FAFA) !important;
}

.asset-history-panel .asset-list-head p {
  margin-bottom: 0;
}

.asset-history-panel .asset-request-list {
  gap: 12px;
  padding: 15px;
}

.asset-request-card {
  padding: 17px !important;
  border-radius: 14px !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.asset-request-card:hover {
  border-color: rgba(56,160,190,.45) !important;
  box-shadow: 0 13px 30px rgba(28,77,88,.10) !important;
  transform: translateY(-1px);
}

.asset-reference {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(39,109,152,.20);
  border-radius: 8px;
  background: #EEF5FA;
  color: var(--chloe-deep-blue) !important;
  font-size: 10px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  letter-spacing: .055em !important;
}

.asset-request-card h3,
.asset-confirm-card h3,
.asset-admin-card h3 {
  margin-top: 8px !important;
  color: var(--chloe-ink) !important;
  font-size: 16px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.3;
}

.asset-request-meta,
.asset-confirm-meta,
.asset-admin-meta {
  gap: 7px 8px !important;
}

.asset-request-meta span,
.asset-confirm-meta span,
.asset-admin-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 7px;
  background: #F0F5F6;
  color: #59717A;
  font-size: 10px;
  line-height: 1.3;
}

.asset-progress {
  margin-top: 14px !important;
  padding: 12px 13px !important;
  border: 1px solid rgba(56,160,190,.24) !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(108,172,205,.13), rgba(157,201,177,.16)) !important;
  color: var(--chloe-text) !important;
  font-size: 12px !important;
  line-height: 1.55;
}

.asset-progress strong {
  color: var(--chloe-ink) !important;
  font-weight: var(--font-weight-interface, 500);
}

.asset-progress small {
  display: inline-block;
  margin-top: 5px;
  color: var(--chloe-muted) !important;
  font-size: 10px !important;
}

.asset-status {
  min-height: 27px !important;
  padding: 4px 9px !important;
  font-size: 10px !important;
  font-weight: var(--font-weight-interface, 500) !important;
}

.asset-empty {
  border-color: rgba(103,160,171,.40) !important;
  border-radius: 13px !important;
  background: #F4F9FA !important;
  color: var(--chloe-muted) !important;
  font-size: 12px;
  line-height: 1.55;
}

.asset-admin-toolbar {
  gap: 10px !important;
  padding: 13px !important;
  border-color: var(--chloe-line) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 6px 18px rgba(28,77,88,.05);
}

.asset-admin-form,
.asset-confirm-form {
  gap: 14px !important;
  border-color: var(--chloe-line) !important;
}

.asset-confirm-option {
  min-height: var(--chloe-control-height) !important;
  padding: 8px 12px !important;
  border-radius: var(--chloe-control-radius) !important;
  font-size: 12px !important;
}

.asset-confirm-option:hover {
  border-color: var(--chloe-control-border-hover) !important;
  background: #F3F9FA !important;
}

.asset-confirm-option:has(input:checked) {
  border-color: var(--chloe-aqua) !important;
  background: #EAF6F8 !important;
  box-shadow: inset 3px 0 0 var(--chloe-aqua) !important;
}

/* Public information and canonical condensed platform footer */
.info-header { border-color: var(--chloe-line) !important; background: rgba(255,255,255,.94) !important; box-shadow: 0 8px 24px rgba(28,77,88,.07) !important; }
.info-tabs a.active { border-color: var(--chloe-aqua) !important; background: #EEF8F9 !important; color: var(--chloe-navy) !important; }

.chloe-site-footer {
  position: relative;
  z-index: 20;
  isolation: isolate;
  clear: both;
  width: min(1500px, calc(100% - 48px));
  margin: clamp(14px, 2vh, 24px) auto clamp(8px, 1.2vh, 14px);
  padding: clamp(11px, 1.6vh, 17px) 26px;
  border-top: 1px solid var(--chloe-line) !important;
  color: var(--chloe-muted) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--font-weight-body, 400);
  line-height: 1.42;
  text-align: center;
  pointer-events: auto;
}
.chloe-footer-brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  color: var(--chloe-ink) !important;
}
.chloe-footer-brand strong {
  font-size: 15px;
  font-weight: var(--font-weight-interface, 500);
  letter-spacing: .08em;
}
.chloe-footer-brand span {
  color: var(--chloe-deep-blue) !important;
  font-size: 12px;
}
.chloe-site-footer p {
  max-width: 960px;
  margin: 2px auto;
}
.chloe-footer-version {
  color: #526D77 !important;
  font-weight: var(--font-weight-body, 400);
}
.chloe-footer-legal {
  margin-top: 5px !important;
  color: #738A92 !important;
  font-size: clamp(10.5px, 1.15vh, 11px);
  line-height: 1.35;
}
.chloe-footer-links {
  position: relative;
  z-index: 21;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  color: #526D77 !important;
  pointer-events: auto;
}
.chloe-footer-links a {
  position: relative;
  z-index: 22;
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
  pointer-events: auto;
}
.chloe-footer-links a:hover,
.chloe-footer-links a:focus-visible {
  color: var(--chloe-deep-blue) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 761px) and (max-height: 950px) {
  body.auth-login { padding-block: clamp(12px, 2vh, 22px) !important; }
  body.auth-login .auth-shell { min-height: min(650px, 72vh); }
}
@media (max-width: 760px) {
  .chloe-site-footer {
    width: calc(100% - 28px);
    margin: 18px auto 10px;
    padding: 14px;
  }
}
@media (max-width: 420px) {
  .chloe-site-footer { width: calc(100% - 20px); padding-inline: 8px; }
  .chloe-footer-brand { gap: 5px 7px; }
  .chloe-footer-links { gap: 5px 7px; }
}

@media (max-width: 900px) {
  .sidebar-brand-lockup { max-width: 176px !important; }
  .auth-brand-lockup > img { width: min(470px, 92%) !important; }
  .asset-portal-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .asset-portal-card { position: static !important; }
}

@media (max-width: 560px) {
  .brand-avatar { width: 44px !important; height: 44px !important; flex-basis: 44px !important; border-radius: 14px !important; }
  .brand-avatar img { width: 38px !important; height: 38px !important; }
  .auth-shell > .card { border-radius: 20px !important; }
  :where(.tool-form-grid, .form-grid, .asset-form-grid) { grid-template-columns: 1fr !important; }
  .asset-portal-card { padding: 19px !important; }
  .asset-history-panel .asset-list-head { padding: 17px; }
  .asset-history-panel .asset-request-list { padding: 11px; }
  .asset-request-top,
  .asset-confirm-top,
  .asset-admin-top { gap: 11px !important; }
  .asset-status { align-self: flex-start; }
  .asset-form-actions,
  .asset-form-actions .button,
  .asset-request-form > .button { width: 100%; }
  .asset-form-actions .button { min-width: 0; }
}

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

@media print {
  body { background: #FFFFFF !important; }
  .sidebar, .topbar, .mobile-top, .app-header, .no-print { display: none !important; }
  .card, .panel, .device-register, .tool-panel, .form-section { border-color: #C9D6DA !important; box-shadow: none !important; }
}

/* Unified Chloé semantic status system.
 * All modules render status meaning through app/status_ui.php and these tones.
 */
.chloe-status {
  --chloe-status-bg: #EEF2F4;
  --chloe-status-text: #475D66;
  --chloe-status-border: #C7D1D5;
  min-height: 27px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 5px 10px !important;
  border: 1px solid var(--chloe-status-border) !important;
  border-radius: 999px !important;
  background: var(--chloe-status-bg) !important;
  color: var(--chloe-status-text) !important;
  font-family: var(--font-sf, inherit) !important;
  font-size: 11px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: none !important;
  vertical-align: middle;
}

.chloe-status--success,
.chloe-status-select[data-status-tone="success"],
.asset-confirm-option[data-status-tone="success"] {
  --chloe-status-bg: #E6F4EB;
  --chloe-status-text: #205F43;
  --chloe-status-border: #A7D5BA;
}
.chloe-status--info,
.chloe-status-select[data-status-tone="info"],
.asset-confirm-option[data-status-tone="info"] {
  --chloe-status-bg: #E8F1FB;
  --chloe-status-text: #245A86;
  --chloe-status-border: #B0CCE6;
}
.chloe-status--progress,
.chloe-status-select[data-status-tone="progress"],
.asset-confirm-option[data-status-tone="progress"] {
  --chloe-status-bg: #FFF0DD;
  --chloe-status-text: #81470D;
  --chloe-status-border: #E5C28B;
}
.chloe-status--warning,
.chloe-status-select[data-status-tone="warning"],
.asset-confirm-option[data-status-tone="warning"] {
  --chloe-status-bg: #FFF6D8;
  --chloe-status-text: #6E5700;
  --chloe-status-border: #DCC66C;
}
.chloe-status--aqua,
.chloe-status-select[data-status-tone="aqua"],
.asset-confirm-option[data-status-tone="aqua"] {
  --chloe-status-bg: #E4F4F5;
  --chloe-status-text: #245D67;
  --chloe-status-border: #A6D1D6;
}
.chloe-status--storage,
.chloe-status-select[data-status-tone="storage"],
.asset-confirm-option[data-status-tone="storage"] {
  --chloe-status-bg: #EDF2F5;
  --chloe-status-text: #405D6B;
  --chloe-status-border: #BECED5;
}
.chloe-status--external,
.chloe-status-select[data-status-tone="external"],
.asset-confirm-option[data-status-tone="external"] {
  --chloe-status-bg: #F1EAF8;
  --chloe-status-text: #60417A;
  --chloe-status-border: #CDB9DF;
}
.chloe-status--retired,
.chloe-status-select[data-status-tone="retired"],
.asset-confirm-option[data-status-tone="retired"] {
  --chloe-status-bg: #E4E8EA;
  --chloe-status-text: #2F434B;
  --chloe-status-border: #AFBCC1;
}
.chloe-status--danger,
.chloe-status-select[data-status-tone="danger"],
.asset-confirm-option[data-status-tone="danger"] {
  --chloe-status-bg: #FAE9EB;
  --chloe-status-text: #85313A;
  --chloe-status-border: #DCAEB4;
}
.chloe-status--neutral,
.chloe-status-select[data-status-tone="neutral"],
.asset-confirm-option[data-status-tone="neutral"] {
  --chloe-status-bg: #F0F3F4;
  --chloe-status-text: #51666E;
  --chloe-status-border: #CAD3D6;
}

:is(a, button).chloe-status {
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease !important;
}
:is(a, button).chloe-status:hover {
  filter: saturate(1.08) brightness(.98);
  box-shadow: 0 5px 14px rgba(28,77,88,.12) !important;
  transform: translateY(-1px);
}

.chloe-status-select {
  border-color: var(--chloe-status-border, var(--chloe-control-border)) !important;
  background-color: var(--chloe-status-bg, #FFFFFF) !important;
  color: var(--chloe-status-text, var(--chloe-text)) !important;
  font-weight: var(--font-weight-interface, 500) !important;
}
.asset-confirm-option[data-status-tone] {
  border-color: var(--chloe-status-border) !important;
  background: var(--chloe-status-bg) !important;
  color: var(--chloe-status-text) !important;
}
.asset-confirm-option[data-status-tone]:has(input:checked) {
  box-shadow: inset 3px 0 0 var(--chloe-status-text) !important;
}

.chloe-status-select option[data-status-tone="success"] { background: #E6F4EB; color: #205F43; }
.chloe-status-select option[data-status-tone="info"] { background: #E8F1FB; color: #245A86; }
.chloe-status-select option[data-status-tone="progress"] { background: #FFF0DD; color: #81470D; }
.chloe-status-select option[data-status-tone="warning"] { background: #FFF6D8; color: #6E5700; }
.chloe-status-select option[data-status-tone="aqua"] { background: #E4F4F5; color: #245D67; }
.chloe-status-select option[data-status-tone="storage"] { background: #EDF2F5; color: #405D6B; }
.chloe-status-select option[data-status-tone="external"] { background: #F1EAF8; color: #60417A; }
.chloe-status-select option[data-status-tone="retired"] { background: #E4E8EA; color: #2F434B; }
.chloe-status-select option[data-status-tone="danger"] { background: #FAE9EB; color: #85313A; }
.chloe-status-select option[data-status-tone="neutral"] { background: #F0F3F4; color: #51666E; }

/* Compatibility for older status markup while pages transition to the helper. */
.tool-pill.good { border-color: #A7D5BA !important; background: #E6F4EB !important; color: #205F43 !important; }
.tool-pill.warn { border-color: #DCC66C !important; background: #FFF6D8 !important; color: #6E5700 !important; }
.tool-pill.bad { border-color: #DCAEB4 !important; background: #FAE9EB !important; color: #85313A !important; }

.audit-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}
.audit-statuses > span {
  display: inline-grid;
  gap: 4px;
}
.audit-statuses small {
  color: var(--chloe-muted);
  font-size: 9px;
  font-weight: var(--font-weight-interface, 500);
  text-transform: uppercase;
}
.dashboard-copy .chloe-status {
  align-self: flex-start;
  margin-top: 7px;
}
.header-system-status.chloe-status {
  min-height: 36px;
}

@media (max-width: 700px) {
  .chloe-status {
    min-height: 25px;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
}



/* Unified Chloé action button geometry
 * One compact rectangular standard for every interactive action control.
 * Status badges, service-tag links, avatars and informational cards are excluded.
 */
:root {
  --chloe-button-radius: 6px;
  --chloe-button-height: 40px;
  --chloe-button-padding-inline: 14px;
  --chloe-button-gap: 8px;
  --chloe-button-font-size: 12px;
  --chloe-button-font-weight: var(--font-weight-interface, 500);
  --chloe-button-border-width: 1px;
}

:where(
  button:not(.chloe-status),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .tool-button,
  .btn,
  .refresh,
  .register-clear,
  .manage,
  .side-link,
  .secondary,
  .header-signout,
  .signout,
  .signed-user,
  .primary-action,
  .add-device,
  .chloe-back-button,
  .passkey-button,
  .portal-shortcuts a,
  .queue-tools a,
  .tool-hero-actions a,
  .info-home,
  .info-tabs a,
  .action-panel a,
  .action-panel button,
  .register a
) {
  min-height: var(--chloe-button-height) !important;
  height: auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chloe-button-gap) !important;
  padding: 0 var(--chloe-button-padding-inline) !important;
  border-width: var(--chloe-button-border-width) !important;
  border-style: solid;
  border-radius: var(--chloe-button-radius) !important;
  font-family: inherit !important;
  font-size: var(--chloe-button-font-size) !important;
  font-weight: var(--chloe-button-font-weight) !important;
  line-height: 1.2 !important;
  letter-spacing: .008em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease, filter .16s ease !important;
}

:where(
  button:not(.chloe-status),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .tool-button,
  .btn,
  .refresh,
  .register-clear,
  .manage,
  .side-link,
  .secondary,
  .header-signout,
  .signout,
  .signed-user,
  .primary-action,
  .add-device,
  .chloe-back-button,
  .passkey-button,
  .portal-shortcuts a,
  .queue-tools a,
  .tool-hero-actions a,
  .info-home,
  .info-tabs a,
  .action-panel a,
  .action-panel button,
  .register a
):focus-visible {
  outline: 3px solid var(--chloe-focus) !important;
  outline-offset: 2px !important;
}

:where(
  button:not(.chloe-status),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .tool-button,
  .btn,
  .refresh,
  .register-clear,
  .manage,
  .side-link,
  .secondary,
  .header-signout,
  .signout,
  .signed-user,
  .primary-action,
  .add-device,
  .chloe-back-button,
  .passkey-button,
  .portal-shortcuts a,
  .queue-tools a,
  .tool-hero-actions a,
  .info-home,
  .info-tabs a,
  .action-panel a,
  .action-panel button,
  .register a
):active:not(:disabled, [aria-disabled="true"]) {
  transform: translateY(0) !important;
}

:where(
  button:not(.chloe-status),
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .button,
  .tool-button,
  .btn,
  .refresh,
  .register-clear,
  .manage,
  .side-link,
  .secondary,
  .header-signout,
  .signout,
  .primary-action,
  .add-device,
  .chloe-back-button,
  .passkey-button
):is(:disabled, [aria-disabled="true"]) {
  border-color: rgba(103,160,171,.22) !important;
  background: var(--chloe-button-disabled-bg) !important;
  color: var(--chloe-button-disabled-text) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: .72;
}

:where(
  button:not(.chloe-status),
  .button,
  .tool-button,
  .btn,
  .refresh,
  .register-clear,
  .manage,
  .side-link,
  .header-signout,
  .signout,
  .primary-action,
  .add-device,
  .chloe-back-button,
  .passkey-button,
  .portal-shortcuts a,
  .queue-tools a,
  .tool-hero-actions a,
  .info-home,
  .info-tabs a,
  .action-panel a
) :where(.chloe-icon, svg) {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 0 !important;
}

@media (max-width: 680px) {
  :root {
    --chloe-button-padding-inline: 12px;
  }

  :where(.button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link, .primary-action, .add-device, .chloe-back-button) {
    max-width: 100%;
  }
}


/* Specificity-safe geometry enforcement for legacy module styles. */
button:not(.chloe-status),
input[type="submit"],
input[type="button"],
input[type="reset"],
.button,
.tool-button,
.btn,
.refresh,
.register-clear,
.manage,
.side-link,
.secondary,
.header-signout,
.signout,
.signed-user,
.primary-action,
.add-device,
.chloe-back-button,
.passkey-button,
.portal-shortcuts a,
.queue-tools a,
.tool-hero-actions a,
.info-home,
.info-tabs a,
.action-panel a,
.action-panel button,
.register a,
.app-header .signed-user,
.app-header .header-signout,
.queue-filters .button,
.register-tools .refresh,
.workstation-user-edit .tool-button,
.access-create-panel .tool-actions .tool-button,
.directory-search .tool-button {
  min-height: var(--chloe-button-height) !important;
  height: auto;
  padding: 0 var(--chloe-button-padding-inline) !important;
  border-width: var(--chloe-button-border-width) !important;
  border-radius: var(--chloe-button-radius) !important;
  gap: var(--chloe-button-gap) !important;
  font-size: var(--chloe-button-font-size) !important;
  font-weight: var(--chloe-button-font-weight) !important;
  line-height: 1.2 !important;
}

/* Authenticated Dashboard and home navigation - September 2026. */
.header-dashboard-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border: 1px solid var(--chloe-control-border);
  border-radius: var(--chloe-button-radius, 6px);
  background: #FFFFFF;
  color: var(--chloe-button-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--font-weight-interface, 500);
  line-height: 1;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.header-dashboard-link:hover {
  border-color: var(--chloe-aqua);
  background: #EFF8F9;
  color: var(--chloe-button-text-hover);
  transform: translateY(-1px);
}
.header-dashboard-link .chloe-icon {
  width: 17px;
  height: 17px;
}
.app-header .header-user {
  min-width: 0;
  flex-wrap: nowrap;
}
.sidebar-brand-home,
.mobile-brand-home {
  display: block;
  color: inherit;
  text-decoration: none;
  line-height: 0;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 7px;
}
.crumb a {
  color: var(--chloe-deep-blue);
  font-weight: var(--font-weight-interface, 500);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--chloe-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 680px) {
  .app-header .header-user {
    gap: 4px;
  }
  .header-dashboard-link,
  .app-header .header-signout {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0 !important;
  }
  .header-dashboard-link > span,
  .app-header .header-signout > span,
  .app-header .signed-user > span:last-child {
    display: none !important;
  }
  .app-header .signed-user {
    padding: 4px !important;
  }
}

/* Unified Chloé header brand lockup
 * Every visible header uses the same complete SVG through chloe_brand_logo().
 * Compact fluid limits keep the complete artwork visible without allowing it
 * to dominate or overlap page content at any supported viewport.
 */
:root {
  --chloe-compact-header-height: 68px;
  --chloe-compact-logo-width: clamp(160px, 12vw, 190px);
  --chloe-compact-logo-mobile-width: clamp(128px, 36vw, 145px);
}

.chloe-brand-logo {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 10 / 3;
  object-fit: contain !important;
  object-position: left center !important;
  image-rendering: auto;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

.app-header {
  min-height: var(--chloe-compact-header-height) !important;
  height: var(--chloe-compact-header-height) !important;
  padding: 5px 14px !important;
}
.app-header .brand {
  min-width: 0;
  max-width: min(190px, 32vw);
  padding: 0 !important;
  flex: 0 1 190px;
  line-height: 0;
}
.app-header .chloe-header-logo {
  width: var(--chloe-compact-logo-width) !important;
  max-width: 100% !important;
  max-height: 56px !important;
}

.sidebar .brand {
  padding: 0 4px 18px !important;
}
.sidebar-brand-lockup {
  width: clamp(145px, 14vw, 165px) !important;
  max-width: 100% !important;
  max-height: 54px !important;
}

.mobile-brand-logo {
  width: var(--chloe-compact-logo-mobile-width) !important;
  max-width: 42vw !important;
  max-height: 44px !important;
}

.info-header {
  min-height: 68px !important;
  padding-block: 6px !important;
}
.info-brand {
  width: clamp(170px, 18vw, 210px) !important;
  height: auto !important;
  line-height: 0;
}
.info-brand .info-brand-logo {
  width: 100% !important;
  max-height: 58px !important;
}

.auth-brand-lockup > .auth-logo {
  width: min(320px, 100%) !important;
  max-height: 96px !important;
  margin-inline: auto;
}

.twofa-logo {
  width: min(245px, 100%) !important;
  max-height: 74px !important;
  margin-inline: auto;
}

@media (max-width: 900px) {
  :root {
    --chloe-compact-logo-width: clamp(150px, 20vw, 175px);
  }
  .app-header .brand {
    max-width: min(175px, 34vw);
    flex-basis: 175px;
  }
  .sidebar-brand-lockup {
    width: 150px !important;
  }
}

@media (max-width: 680px) {
  :root {
    --chloe-compact-header-height: 60px;
  }
  .app-header {
    padding: 4px 9px !important;
  }
  .app-header .brand {
    max-width: min(145px, 38vw);
    flex-basis: 145px;
  }
  .app-header .chloe-header-logo {
    width: var(--chloe-compact-logo-mobile-width) !important;
    max-height: 44px !important;
  }
  .mobile-brand-logo {
    max-height: 42px !important;
  }
  .info-header {
    min-height: 62px !important;
  }
  .info-brand {
    width: clamp(145px, 42vw, 175px) !important;
  }
  .auth-brand-lockup > .auth-logo {
    width: min(280px, 100%) !important;
    max-height: 84px !important;
  }
  .twofa-logo {
    width: min(220px, 100%) !important;
    max-height: 66px !important;
  }
}

@media (max-width: 420px) {
  .app-header .brand {
    max-width: min(130px, 36vw);
    flex-basis: 130px;
  }
  .app-header .chloe-header-logo,
  .mobile-brand-logo {
    width: 130px !important;
    max-height: 39px !important;
  }
}

/* Header system status is an action control, not an informational badge.
 * Keep its semantic status colours and indicator while matching the shared
 * rectangular header-button geometry in every interaction state.
 */
.header-system-status.chloe-status,
.header-system-status.chloe-status:hover,
.header-system-status.chloe-status:focus-visible,
.header-system-status.chloe-status:active {
  min-height: var(--chloe-button-height) !important;
  height: auto !important;
  padding: 0 var(--chloe-button-padding-inline) !important;
  border-width: var(--chloe-button-border-width) !important;
  border-style: solid !important;
  border-radius: var(--chloe-button-radius) !important;
  gap: var(--chloe-button-gap) !important;
  font-size: var(--chloe-button-font-size) !important;
  font-weight: var(--chloe-button-font-weight) !important;
  line-height: 1.2 !important;
}


/* Chloe semantic action button design system - September 2026 */
:root {
  --chloe-brand-deep-navy: #030E35;
  --chloe-brand-strong-blue: #495BD6;
  --chloe-brand-soft-blue: #7C9DF4;
  --chloe-brand-ice-blue: #ADD3FA;
  --chloe-brand-lavender: #B58DF6;
  --chloe-action-primary: #495BD6;
  --chloe-action-primary-hover: #3D4FC4;
  --chloe-action-primary-active: #3445B2;
  --chloe-action-primary-text: #FFFFFF;
  --chloe-action-secondary-bg: #FFFFFF;
  --chloe-action-secondary-hover: #F3F7FF;
  --chloe-action-secondary-active: #E8EFFF;
  --chloe-action-secondary-text: #030E35;
  --chloe-action-secondary-border: #9ABCF8;
  --chloe-action-danger: #B42318;
  --chloe-action-danger-hover: #922018;
  --chloe-action-danger-active: #7A1B14;
  --chloe-action-disabled-bg: #E9EDF5;
  --chloe-action-disabled-text: #596278;
  --chloe-action-focus: rgba(124, 157, 244, .58);
  --chloe-action-shadow: 0 7px 18px rgba(3, 14, 53, .12);
  --chloe-action-shadow-hover: 0 11px 24px rgba(3, 14, 53, .18);
  --chloe-action-duration: 180ms;
  --chloe-action-easing: cubic-bezier(.2, .8, .2, 1);
}

html body :is(
  button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
  .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
  .secondary, .header-signout, .signout, .signed-user, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .portal-shortcuts a, .queue-tools a,
  .tool-hero-actions a, .info-home, .info-tabs a, .action-panel a, .action-panel button,
  .register a, .contact-action, .contact-submit, .access-save-button
) {
  position: relative;
  min-height: var(--chloe-button-height, 40px) !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chloe-button-gap, 8px) !important;
  padding: 0 var(--chloe-button-padding-inline, 14px) !important;
  overflow: hidden;
  border: 1px solid var(--chloe-action-secondary-border) !important;
  border-radius: var(--chloe-button-radius, 6px) !important;
  outline: 3px solid transparent !important;
  outline-offset: 1px !important;
  background: var(--chloe-action-secondary-bg) !important;
  background-image: none !important;
  color: var(--chloe-action-secondary-text) !important;
  box-shadow: 0 2px 8px rgba(3, 14, 53, .06) !important;
  filter: none !important;
  transform: translateY(0);
  transition: background-color var(--chloe-action-duration) var(--chloe-action-easing),
    border-color var(--chloe-action-duration) var(--chloe-action-easing),
    color var(--chloe-action-duration) var(--chloe-action-easing),
    box-shadow var(--chloe-action-duration) var(--chloe-action-easing),
    transform var(--chloe-action-duration) var(--chloe-action-easing),
    outline-color var(--chloe-action-duration) ease,
    outline-offset var(--chloe-action-duration) ease !important;
}

html body :is(
  button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
  .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
  .secondary, .header-signout, .signout, .signed-user, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .portal-shortcuts a, .queue-tools a,
  .tool-hero-actions a, .info-home, .info-tabs a, .action-panel a, .action-panel button,
  .register a, .contact-action, .contact-submit, .access-save-button
):hover:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  border-color: var(--chloe-brand-strong-blue) !important;
  background: var(--chloe-action-secondary-hover) !important;
  color: var(--chloe-action-secondary-text) !important;
  box-shadow: var(--chloe-action-shadow) !important;
  filter: none !important;
  transform: translateY(-1px);
}

html body :is(
  .button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action,
  .add-device, .contact-submit, .access-save-button, button[type="submit"], input[type="submit"]
) {
  border-color: var(--chloe-action-primary) !important;
  background: var(--chloe-action-primary) !important;
  background-image: none !important;
  color: var(--chloe-action-primary-text) !important;
  box-shadow: var(--chloe-action-shadow) !important;
  text-shadow: none;
}

html body :is(
  .button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action,
  .add-device, .contact-submit, .access-save-button, button[type="submit"], input[type="submit"]
):hover:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  border-color: var(--chloe-action-primary-hover) !important;
  background: var(--chloe-action-primary-hover) !important;
  background-image: none !important;
  color: var(--chloe-action-primary-text) !important;
  box-shadow: var(--chloe-action-shadow-hover) !important;
  filter: none !important;
  transform: translateY(-1px);
}

html body :is(
  .btn-danger, .button.danger, .tool-button.danger, button.danger, input.danger,
  [data-variant="danger"], [data-action="delete"]
) {
  border-color: var(--chloe-action-danger) !important;
  background: var(--chloe-action-danger) !important;
  color: #FFFFFF !important;
  box-shadow: 0 7px 18px rgba(180, 35, 24, .18) !important;
  text-shadow: none;
}

html body :is(
  .btn-danger, .button.danger, .tool-button.danger, button.danger, input.danger,
  [data-variant="danger"], [data-action="delete"]
):hover:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  border-color: var(--chloe-action-danger-hover) !important;
  background: var(--chloe-action-danger-hover) !important;
  color: #FFFFFF !important;
  box-shadow: 0 11px 24px rgba(146, 32, 24, .24) !important;
  filter: none !important;
  transform: translateY(-1px);
}

html body :is(
  button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
  .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
  .secondary, .header-signout, .signout, .signed-user, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .portal-shortcuts a, .queue-tools a,
  .tool-hero-actions a, .info-home, .info-tabs a, .action-panel a, .action-panel button,
  .register a, .contact-action, .contact-submit, .access-save-button
):focus-visible {
  outline-color: var(--chloe-action-focus) !important;
  outline-offset: 3px !important;
}

html body :is(
  button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
  .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
  .secondary, .header-signout, .signout, .signed-user, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .portal-shortcuts a, .queue-tools a,
  .tool-hero-actions a, .info-home, .info-tabs a, .action-panel a, .action-panel button,
  .register a, .contact-action, .contact-submit, .access-save-button
):active:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  box-shadow: 0 3px 9px rgba(3, 14, 53, .14) !important;
  transform: translateY(0) scale(.985) !important;
  transition-duration: 80ms !important;
}

html body :is(
  .button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action,
  .add-device, .contact-submit, .access-save-button, button[type="submit"], input[type="submit"]
):active:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  border-color: var(--chloe-action-primary-active) !important;
  background: var(--chloe-action-primary-active) !important;
  background-image: none !important;
}

html body :is(
  .btn-danger, .button.danger, .tool-button.danger, button.danger, input.danger,
  [data-variant="danger"], [data-action="delete"]
):active:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) {
  border-color: var(--chloe-action-danger-active) !important;
  background: var(--chloe-action-danger-active) !important;
}

html body :is(
  button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
  .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
  .secondary, .header-signout, .signout, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .contact-action, .contact-submit, .access-save-button
):is(:disabled, [aria-disabled="true"]) {
  border-color: #CDD5E5 !important;
  background: var(--chloe-action-disabled-bg) !important;
  background-image: none !important;
  color: var(--chloe-action-disabled-text) !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none;
}

html body :is(
  button:not(.chloe-status), .button, .tool-button, .btn, .primary-action,
  .add-device, .passkey-button, .contact-action, .contact-submit, .access-save-button
):is(.is-loading, .loading, [aria-busy="true"]) {
  cursor: wait !important;
  pointer-events: none;
}

html body :is(
  button:not(.chloe-status), .button, .tool-button, .btn, .primary-action,
  .add-device, .passkey-button, .contact-action, .contact-submit, .access-save-button
):is(.is-loading, .loading, [aria-busy="true"])::after {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  opacity: .82;
  animation: chloe-button-spin .72s linear infinite;
}

html body :is(
  button:not(.chloe-status), .button, .tool-button, .btn, .refresh, .register-clear,
  .manage, .side-link, .header-signout, .signout, .primary-action, .add-device,
  .chloe-back-button, .passkey-button, .contact-action, .contact-submit, .access-save-button
) :is(.chloe-icon, svg, i) {
  color: currentColor !important;
  transition: transform var(--chloe-action-duration) var(--chloe-action-easing) !important;
}

html body :is(
  button:not(.chloe-status), .button, .tool-button, .btn, .primary-action,
  .add-device, .passkey-button, .contact-action, .contact-submit, .access-save-button
):hover:not(:disabled, [aria-disabled="true"], .is-loading, .loading, [aria-busy="true"]) :is(.chloe-icon, svg, i) {
  transform: translateX(1px);
}

html body :is(.back, .chloe-back-button):hover :is(.chloe-icon, svg, i) {
  transform: translateX(-1px);
}

html body :is(
  .button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action,
  .add-device, .contact-submit, .access-save-button, button[type="submit"], input[type="submit"],
  .btn-danger, .button.danger, .tool-button.danger, button.danger,
  [data-variant="danger"], [data-action="delete"]
) :is(span, strong, small, i, svg, .chloe-icon) {
  color: currentColor !important;
}

html body :is(
  .button.primary, .tool-button.primary, .btn-primary, .btn.primary, .primary-action,
  .add-device, .contact-submit, .access-save-button, button[type="submit"], input[type="submit"]
)::before {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

@keyframes chloe-button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html body :is(
    button:not(.chloe-status), input[type="submit"], input[type="button"], input[type="reset"],
    .button, .tool-button, .btn, .refresh, .register-clear, .manage, .side-link,
    .secondary, .header-signout, .signout, .signed-user, .primary-action, .add-device,
    .chloe-back-button, .passkey-button, .contact-action, .contact-submit, .access-save-button
  ) {
    transition-duration: .01ms !important;
  }

  html body :is(
    button:not(.chloe-status), .button, .tool-button, .btn, .primary-action,
    .add-device, .passkey-button, .contact-action, .contact-submit, .access-save-button
  ):is(.is-loading, .loading, [aria-busy="true"])::after {
    animation: none;
  }
}
/* End Chloe semantic action button design system */

/* Heading weights are owned by chloe-typography.css. */

/* Shared compact Technology Register header. Keep legacy hero geometry out of
 * these views; colours, typography and scenic backgrounds remain shared. */
body main.chloe-register-shell {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 16px 8px 28px;
}

.tool-hero.chloe-compact-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 0;
  gap: 12px 20px;
  margin: 0 0 12px;
  padding: 14px 18px;
  border: 1px solid;
  border-radius: 17px;
}

.chloe-compact-header .chloe-header-copy {
  flex: 1 1 520px;
  min-width: 0;
  text-align: left;
  overflow-wrap: anywhere;
}

.chloe-compact-header .eyebrow {
  margin: 0 0 3px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .14em;
}

.chloe-compact-header h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.chloe-compact-header .chloe-header-copy > p:not(.eyebrow) {
  display: block;
  max-width: none;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.chloe-compact-header .tool-hero-actions {
  align-self: center;
  min-width: 0;
  max-width: 100%;
}

.chloe-compact-header .tool-hero-actions a {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  body main.chloe-register-shell { padding-top: 10px; }
  .tool-hero.chloe-compact-header { padding: 12px 14px; }
  .chloe-compact-header h1 { font-size: 27px; }
}

@media print {
  body main.chloe-register-shell { padding: 0; }
  .page-shell > .chloe-compact-header { display: none; }
}



/* Secure platform ready live status - 2 September 2026
 * Login-only styling keeps the indicator blue and leaves other status components unchanged.
 */
@keyframes chloe-secure-status-dot {
  0%, 100% {
    opacity: .84;
    box-shadow:
      0 0 0 4px rgba(73, 91, 214, .10),
      0 0 8px rgba(73, 91, 214, .24);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 0 5px rgba(73, 91, 214, .14),
      0 0 13px rgba(73, 91, 214, .46);
  }
}

@keyframes chloe-secure-status-halo {
  0% {
    opacity: .46;
    transform: translate(-50%, -50%) scale(.8);
  }
  72%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3);
  }
}

body.auth-login .auth-status {
  position: relative;
  isolation: isolate;
  gap: 10px;
  min-height: 44px;
  margin-top: 20px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(73, 91, 214, .30) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #FFFFFF, rgba(173, 211, 250, .28)) !important;
  color: #030E35 !important;
  font-size: 13px !important;
  font-weight: var(--font-weight-interface, 500) !important;
  line-height: 1.2 !important;
  box-shadow:
    0 8px 22px rgba(3, 14, 53, .08),
    inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}

body.auth-login .auth-status::before {
  position: relative;
  z-index: 2;
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #495BD6 !important;
  content: "";
  transform-origin: center;
  animation: chloe-secure-status-dot 2.6s ease-in-out infinite;
}

body.auth-login .auth-status::after {
  position: absolute;
  top: 50%;
  left: 24.5px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 1.5px solid rgba(73, 91, 214, .58);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: chloe-secure-status-halo 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  body.auth-login .auth-status::before {
    animation: none !important;
    opacity: 1;
  }

  body.auth-login .auth-status::after {
    display: none;
    animation: none !important;
  }
}



}


/* Critical lifecycle badges follow the 2.2s system-status cadence, without
 * its scaling or glow. Opacity alone preserves badge and table geometry. */
@keyframes chloe-critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .75; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  .chloe-status.chloe-status--end-of-life,
  .chloe-status.chloe-status--expired,
  .chloe-status.chloe-status--out-of-warranty {
    animation: chloe-critical-pulse 2.2s ease-in-out infinite;
  }
}

@media (prefers-reduced-motion: reduce), print {
  .chloe-status.chloe-status--end-of-life,
  .chloe-status.chloe-status--expired,
  .chloe-status.chloe-status--out-of-warranty {
    animation: none !important;
    opacity: 1;
  }
}