.footer-last-login-link {
    font-weight: bold !important;
  }
/* All icons black except checkmark (green) */
.select-table tbody td img[src$='.svg'],
.vault-copy-btn img[src$='.svg'],
.vault-settings-btn img[src$='.svg'],
.vault-secret-toggle img[src$='.svg'] {
  filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%) !important;
}
/* Never filter the green checkmark icon so it stays green */
.vault-copy-btn img[src$='check-green.svg'],
.vault-copy-btn img[src$='check-green.svg']:not([src$='check.svg']) {
  filter: none !important;
}
@media (min-width: 770px) {
  .vault-actions-bottom {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
  }
  .vault-actions-row1 {
    order: 2;
    justify-content: flex-end;
  }
  .vault-actions-row2 {
    order: 1;
    justify-content: flex-start;
  }
  .vault-actions-group {
    width: auto;
  }
}
@media (max-width: 769px) {
  .vault-actions-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5em !important;
  }
  .vault-actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
    justify-content: stretch;
  }
  .vault-actions-row1 {
    order: 1;
    margin-bottom: 0.5em;
  }
  .vault-actions-row2 {
    order: 2;
    margin-bottom: 0;
  }
  .vault-actions-group .vault-btn {
    flex: 1 1 40%;
    min-width: 120px;
    height: 2.75em;
    padding-left: 1.309em;
    padding-right: 1.309em;
  }
}
@media (max-width: 600px) {
  .vault-actions-bottom {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5em !important;
  }
  .vault-actions-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    width: 100%;
    justify-content: stretch;
  }
  .vault-actions-row1 {
    margin-bottom: 0.5em;
  }
  .vault-actions-row2 {
    margin-bottom: 0;
  }
  .vault-actions-group .vault-btn {
    flex: 1 1 40%;
    min-width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
    padding: 0.5em 0.7em;
  }
}
@media (max-width: 413px) {
  .brand-script {
    font-size: 1.7em !important;
  }
}

@media (max-width: 374px) {
  .brand-script {
    font-size: 1.3em !important;
  }
}

/* Match modal pop-up background to main content card */
/* .modal-box background moved to correct selector elsewhere */
.select-table tbody td img[src*='check.svg'],
.vault-copy-btn img[src*='check.svg'] {
  filter: invert(29%) sepia(94%) saturate(1100%) hue-rotate(56deg) brightness(90%) contrast(101%) !important;
}
/* Exception: lock icons in table header row should be black */
.select-table thead th .vault-secret-toggle img[src$='lock-closed.svg'],
.select-table thead th .vault-secret-toggle img[src$='lock-open.svg'] {
  filter: none !important;
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}
/* Vault table row action icons */
.select-table tbody td svg,
.select-table tbody td .utility-icon,
.vault-copy-btn svg,
.vault-settings-btn svg,
.vault-secret-toggle svg {
  color: #003366 !important;
  fill: #003366 !important;
  stroke: #003366 !important;
}

/* For external SVGs as <img>, use filter to approximate #003366 */

/* Only apply filter to copy.svg and check.svg, never check-green.svg */
.vault-copy-btn img[src$='copy.svg'],
.vault-copy-btn img[src$='check.svg'] {
  filter: invert(17%) sepia(99%) saturate(747%) hue-rotate(176deg) brightness(92%) contrast(101%) !important;
}
.vault-copy-btn img[src$='check-green.svg'] {
  filter: none !important;
}
.vault-identifier {
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.22em;
    font-size: 1.15em;
    color: #003366;
    user-select: none;
  }
  .vault-identifier-unlocked {
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.22em;
    font-size: 1.15em;
    color: #003366;
    user-select: none;
  }
  .vault-link {
    color: #003366;
    text-decoration: none;
  }
  .vault-link:hover,
  .vault-link:focus {
    color: #003366;
    text-decoration: none;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  html[data-theme="dark"] .vault-identifier,
  html[data-theme="dark"] .vault-identifier-unlocked,
  html[data-theme="dark"] .vault-secret,
  html[data-theme="dark"] .vault-secret.masked,
  html[data-theme="dark"] .row-input,
  html[data-theme="dark"] .vault-link,
  html[data-theme="dark"] .vault-link:hover,
  html[data-theme="dark"] .vault-link:focus {
    color: #6b1f2e;
  }
  .vault-state-label {
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.12em;
    font-size: 1.08em;
    color: #003366;
    user-select: text;
    margin-left: 0.2em;
    font-weight: bold;
    vertical-align: middle;
    text-transform: uppercase;
    display: inline-block;
}
  /* Purge modal output styling */
  .purge-modal-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
  }
  .purge-modal-output {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background: #f8f8fa;
    border: 1.5px solid #b0b0b0;
    border-radius: 5px;
    padding: 0.5em 0.75em;
    margin-top: 0.25em;
    font-size: 1.08em;
    color: #222;
    user-select: all;
    white-space: pre-wrap;
    outline: none;
  }
  .purge-modal-output:focus {
    box-shadow: 0 0 0 2px #b0b0b0;
  }

  /* Dark red for modal purge button */
  /* Use the same color as .vault-btn.danger for modal purge button */
  .modal-btn-danger-dark, .modal-btn-danger {
    background: #660033;
    color: #fff;
    border: 1.5px solid #660033;
  }
  .modal-btn-danger-dark:hover, .modal-btn-danger-dark:focus,
  .modal-btn-danger:hover, .modal-btn-danger:focus {
    background: #4d0026;
    border-color: #4d0026;
  }
  .vault-secret {
    font-family: 'Times New Roman', serif;
    letter-spacing: 0.22em;
    font-size: 1.15em;
    color: #003366;
    user-select: none;
  }
  .vault-secret.masked {
    letter-spacing: 0.22em;
    font-size: 1.15em;
    color: #003366;
  }
  .vault-secret-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  .vault-secret-toggle .lock-icon {
    width: 1.2em;
    height: 1.2em;
    display: block;
  }

  .vault-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .vault-copy-btn img {
    width: 1.2em;
    height: 1.2em;
    display: block;
  }


  /* Only apply filter to check.svg, not check-green.svg */
  .vault-copy-btn img[src$="check.svg"] {
    filter: invert(28%) sepia(79%) saturate(1050%) hue-rotate(62deg) brightness(95%) contrast(101%);
  }
  .vault-copy-btn img[src$="check-green.svg"] {
    filter: none !important;
  }

  .vault-copy-btn img {
    width: 1.2em !important;
    height: 1.2em !important;
    display: block;
  }

  .vault-copy-btn:hover,
  .vault-copy-btn:focus {
    color: #4d87c7;
  }

  .vault-copy-cell {
    width: 3rem;
    height: 3rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }

  .vault-settings-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }

  .vault-settings-btn img {
    width: 1.2em;
    height: 1.2em;
    display: block;
  }

  .vault-settings-btn:hover,
  .vault-settings-btn:focus {
    color: #4d87c7;
  }

  .vault-settings-cell {
    width: 3rem;
    height: 3rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }


@font-face {
  font-family: "Tangerine";
  src: local('Tangerine'), url("../assets/fonts/Tangerine-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Tangerine";
  src: local('Tangerine Bold'), url("../assets/fonts/Tangerine-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}



@media all {
  html,
  body {
    font-family: "Times New Roman", Times, serif;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Times New Roman", Times, serif;
  }

  .brand-script {
    font-family: "Tangerine", "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: 2.1em;
    line-height: 1;
    display: inline-block;
    vertical-align: baseline;
    color: #003366;
  }

  .home-page .brand-script {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    /* Reserve space to prevent layout shift */
    transition: opacity 0.2s linear;
  }

  .home-page .shield-in-triangle {
    opacity: 0;
  }

  html.fonts-loaded .home-page .brand-script {
    animation: brand-script-sweep 1.8s cubic-bezier(0.7, 0, 0.25, 1) forwards;
  }

  html.fonts-loaded .home-page .shield-in-triangle {
    animation: shield-fade 1.4s cubic-bezier(0.7, 0, 0.25, 1) forwards;
  }

  .home-welcome-title,
  .home-welcome-title .welcome-lead,
  .vault-welcome-title {
    color: #003366;
  }

  @keyframes brand-script-sweep {
    0% {
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      -webkit-clip-path: inset(0 100% 0 0);
    }
    30% {
      opacity: 0.45;
    }
    100% {
      opacity: 1;
      clip-path: inset(0 0 0 0);
      -webkit-clip-path: inset(0 0 0 0);
    }
  }

  @keyframes shield-fade {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  input,
  button,
  select,
  textarea {
    font-family: inherit;
  }

  .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  /* Lightweight site-specific styling on top of YAML.
     Keep structure similar to common docs sites: logo + primary nav + footer columns. */

  .site-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: transparent;
  }

    .site-logo {
      font-family: "Tangerine", "Times New Roman", Times, serif;
      font-size: 2.8rem;
      line-height: 1.2;
      font-weight: 700;
      margin: 0;
      color: #003366;
      /* Reserve space for CalyptoKey brand to prevent layout shift */
      /* Use fixed width to robustly reserve space for 'CalyptoKey' in Tangerine */
      width: 220px;
      min-width: 0;
      min-height: 1.2em;
      display: inline-block;
    }

  .site-logo a {
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    text-decoration: none;
  }

  .site-logo a:hover,
  .site-logo a:focus {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
    outline: none;
  }

  .site-tagline {
    margin: 0.25rem 0 0;
    font-size: 0.95rem;
    opacity: 0.85;
  }

  .auth-loader {
    display: none;
    justify-content: center;
    align-items: center;
    height: 28px;
    margin-top: 0.5rem;
    margin-bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2.5rem;
    z-index: 10;
  }

  .auth-loader:not([hidden]) {
    display: flex;
  }

  .auth-spinner {
    width: 28px;
    height: 28px;
  }

  .auth-submit-wrap {
    position: relative;
    width: 100%;
  }

  .auth-submit-wrap .auth-submit {
    transition: opacity 160ms ease;
  }

  .auth-submit-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease;
  }

  .auth-form.login-loading .auth-submit {
    opacity: 0;
    pointer-events: none;
  }

  .auth-form.login-loading .auth-submit-loader {
    opacity: 1;
    visibility: visible;
  }

  .spinner-outer {
    fill: none;
    stroke: #7fb3df;
    stroke-width: 3;
    opacity: 0.65;
    animation: spin 2s linear infinite;
    transform-origin: 50% 50%;
  }

  .spinner-mid {
    fill: none;
    stroke: #bfe3ff;
    stroke-width: 2;
    opacity: 0.85;
    animation: spin 1.5s linear infinite reverse;
    transform-origin: 50% 50%;
  }

  .spinner-core {
    fill: #e6f3ff;
    opacity: 0.98;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .auth-portal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3.75rem 0 4.25rem;
  }

  body.portal-page .auth-portal,
  body.register-page .auth-portal {
    padding: 4.75rem 0 5.75rem;
  }

  .auth-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    text-align: center;
    white-space: pre-line;
  }

  .auth-card {
      border-radius: 5px;
    width: min(92vw, 26rem);
    aspect-ratio: 1.618 / 1;
    box-sizing: border-box;
    background: rgba(141, 167, 195, 0.5); /* Match .tod-box */
    border: 1px solid #e6e6e6;
    padding: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 20rem;
  }

  .auth-welcome,
  .auth-welcome-title,
  .auth-welcome-name {
    display: none;
  }

  .auth-form {
    display: grid;
    gap: 0.9rem;
    justify-items: stretch;
    text-align: left;
    position: relative;
  }

  .auth-form.loading {
    pointer-events: none;
    opacity: 0.7;
  }

  .auth-label {
    text-align: left;
    display: block;
    margin-bottom: 0.45rem;
    font-weight: bold;
    color: #003365;
  }

  .auth-label-note {
    font-weight: normal;
    font-style: italic;
  }

  .auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.6rem;
    border: 1px solid #cfcfcf;
    background: #fff;
  }

  .auth-step-password .auth-input:disabled {
    background: #eceff3;
    color: #666;
    border-color: #c7cbd1;
    cursor: not-allowed;
    opacity: 1;
  }

  .auth-input.ck-flash {
    animation: ck-flash-border 700ms ease;
  }

  @keyframes ck-flash-border {
    0% {
      border-color: #cfcfcf;
    }
    35% {
      border-color: #4d87c7;
    }
    70% {
      border-color: #4d87c7;
    }
    100% {
      border-color: #cfcfcf;
    }
  }

  .auth-input-wrap {
    position: relative;
  }

  .auth-input-wrap .auth-input {
    padding-right: 3.25rem;
  }

  .auth-toggle {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    border: 0;
    background: transparent;
    color: #003365;
    padding: 0.25rem;
    line-height: 1;
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .eye-icon {
    width: 18px;
    height: 18px;
    display: block;
  }

  .eye-icon[hidden] {
    display: none !important;
  }

  /* Hide native password reveal/clear UI so only custom icons show */
  input[type="password"]::-ms-reveal,
  input[type="password"]::-ms-clear {
    display: none;
  }

  input[type="password"]::-webkit-credentials-auto-fill-button,
  input[type="password"]::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
  }

  .auth-toggle:hover,
  .auth-toggle:focus {
    color: #4d87c7;
    outline: none;
  }


  .auth-submit {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    border: 1px solid #29547e;
    background: #29547e;
    color: #fff;
  }

  .auth-back {
    cursor: pointer;
    width: 100%;
    justify-self: stretch;
    display: block;
    margin: 0;
    box-sizing: border-box;
    padding: 0.55rem 0.8rem;
    border: 1px solid #cfcfcf;
    background: #e0e4eb;
    flex-shrink: 0;
  }

  .auth-back[hidden],
  .auth-submit[hidden] {
    display: none !important;
  }

  .auth-back:hover,
  .auth-back:focus {
    background: rgba(0, 0, 0, 0.05);
    color: #4d87c7;
    outline: none;
  }

  /* Reserve space under Start Over so showing backup link does not shift button */
  .auth-backup-link-wrap {
    min-height: 1.35rem;
    text-align: center;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.7rem);
  }

  .auth-backup-link {
    font-weight: bold;
    color: #003365;
    text-decoration: none;
    background: transparent;
  }

  .auth-backup-link:hover,
  .auth-backup-link:focus {
    color: #4d87c7;
    text-decoration: underline;
    background: transparent;
    outline: none;
  }

  .auth-hint {
    margin-top: 0.6rem;
    text-align: left;
  }

  .auth-hint a {
    color: #003365;
    text-decoration: none;
    background: transparent;
  }

  .auth-hint a:hover,
  .auth-hint a:focus {
    color: #4d87c7;
    text-decoration: underline;
    background: transparent;
    outline: none;
  }

  .auth-error {
    margin: 0.65rem 0 0;
    padding: 0;
    text-align: left;
    color: #660033;
    font-weight: bold;
    font-size: 0.95rem;
  }

  .auth-totp-row {
    --totp-gap: 0.45rem;
    --totp-slot-count: 7;
    --totp-row-base-width: calc(100% / 1.618);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: var(--totp-row-base-width);
    max-width: none;
    gap: var(--totp-gap);
    margin: 1em auto;
    padding: 0;
    box-sizing: border-box;
  }

  .auth-step-totp.backup-mode .auth-totp-row {
    --totp-slot-count: 9;
    /* Match Start Over button width in backup mode */
    width: 100%;
    max-width: 100%;
  }

  .auth-step-totp.backup-mode .auth-totp-digit {
    aspect-ratio: 1 / 1;
  }

  .auth-step-totp.backup-mode .auth-totp-separator {
    aspect-ratio: 1 / 1;
  }

  .auth-step-totp .auth-label {
    text-align: center;
  }

  .auth-totp-digit {
    width: calc((100% - ((var(--totp-slot-count) - 1) * var(--totp-gap))) / var(--totp-slot-count));
    height: auto;
    flex: 0 0 calc((100% - ((var(--totp-slot-count) - 1) * var(--totp-gap))) / var(--totp-slot-count));
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    border: 2px solid #003366;
    border-radius: 8px;
    background: #fff;
    outline: none;
    margin: 0;
    padding: 0.2em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    aspect-ratio: 1 / 1.618;
  }

  .auth-totp-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    color: #003366;
    flex: 0 0 calc((100% - ((var(--totp-slot-count) - 1) * var(--totp-gap))) / var(--totp-slot-count));
    width: calc((100% - ((var(--totp-slot-count) - 1) * var(--totp-gap))) / var(--totp-slot-count));
    /* Match digit input height exactly */
    height: 100%;
    line-height: normal;
    aspect-ratio: 1 / 1.618;
    box-sizing: border-box;
    /* Match padding to .auth-totp-digit for vertical alignment */
    padding: 0.2em;
  }

  .auth-totp-digit[hidden] {
    display: none !important;
  }

  .auth-totp-error-row {
    height: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Always reserve space for error label, even when hidden */
    /* Prevent layout shift */
  }

  .auth-totp-error-row .auth-error {
    color: #800000;
    font-weight: bold;
    text-align: center;
    margin: 0;
  }

  .auth-submit:disabled,
  .auth-submit[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    background: #cfcfcf;
    border-color: #cfcfcf;
    color: #666;
  }

  .auth-submit:hover,
  .auth-submit:focus {
    background: #003365;
    color: #fff;
    outline: none;
  }

  .auth-submit:disabled:hover,
  .auth-submit[disabled]:hover {
    background: #cfcfcf;
    color: #666;
  }

  .auth-register {
    margin: 0.9rem 0 0;
    text-align: center;
  }

  .auth-register a {
    color: #003365;
    font-weight: bold;
    text-decoration: none;
    background: transparent;
  }

  .auth-register a:hover,
  .auth-register a:focus {
    color: #4d87c7;
    text-decoration: underline;
    background: transparent;
    outline: none;
  }

  header.site-header {
    background: transparent;
    color: #111;
    border-bottom: 1px solid #e6e6e6;
    padding: 1rem 0;
  }

  /* Welcome paragraph only */
  .site-main h1 + p {
    text-align: justify;
    text-justify: inter-word;
  }

  /* Smooth theme transitions (outer to inner via staggered delays) */
  body {
    background-color: #fafafa;
    background-image: url('../assets/images/clouds.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 650ms ease 0ms, color 650ms ease 0ms;
  }


  .ym-wbox {
    background-color: transparent;
    border-radius: 8px;
  }

  /* Ensure footer-wbox background matches tip of the day styling */
  /* BLUR IMPLEMENTED: Footer wbox */
  footer.site-footer .ym-wbox.footer-wbox {
    background: rgba(141, 167, 195, 0.5) !important; /* Match .tod-box */
    /* BLUR IMPLEMENTED: Footer wbox (disabled) */
    /* backdrop-filter: blur(8px) saturate(1.0); */
    /* -webkit-backdrop-filter: blur(8px) saturate(1.0); */
    /* border removed to prevent layout shift */
    transition: background 0.3s;
    border: 1px solid #e6e6e6;
  }

  /* BLUR IMPLEMENTED: Main content container */
  main.site-main .ym-wbox.main-wbox {
    background-color: rgba(250, 250, 250, 0.66); /* 34% transparent */
    /* BLUR IMPLEMENTED: Main content container (disabled) */
    /* backdrop-filter: blur(8px) saturate(1.0); */
    /* -webkit-backdrop-filter: blur(8px) saturate(1.0); */
    /* border removed to prevent layout shift */
    transition: background 0.3s;
  }

  .home-page .main-wbox p {
    white-space: break-spaces;
  }

  /* Force homepage main paragraph justified on all devices */
  .home-page .main-wbox > p {
    text-align: justify !important;
    text-justify: inter-word !important;
  }

  /* Fully transparent welcome frame on vault page only */
  /* BLUR REMOVED: Welcome container on vault page */
  .site-main:has(.vault-list) > .ym-wrapper:first-child .ym-wbox.main-wbox {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Add base layer to footer wrapper to match double-layer translucency effect */
  footer.site-footer > .ym-wrapper {
    background: rgba(250, 250, 250, 0.05) !important;
  }

  .ym-wrapper {
    background: transparent;
  }

  header.site-header {
    transition: background-color 650ms ease 80ms, color 650ms ease 80ms, border-color 650ms ease 80ms;
  }

  /* BLUR IMPLEMENTED: Utility bar */
  .utility-bar {
    transition: background-color 650ms ease 140ms, color 650ms ease 140ms, border-color 650ms ease 140ms;
    /* BLUR IMPLEMENTED: Utility bar (disabled) */
    /* backdrop-filter: blur(8px) saturate(1.1); */
    /* -webkit-backdrop-filter: blur(8px) saturate(1.0); */
    /* border removed to prevent layout shift */
    transition: background 0.3s;
  }

  footer.site-footer {
    transition: background-color 650ms ease 220ms, color 650ms ease 220ms, border-color 650ms ease 220ms;
  }

  .tod-box {
    transition: background-color 650ms ease 300ms, color 650ms ease 300ms, border-color 650ms ease 300ms;
  }

  .utility-icon-btn {
    transition: background-color 650ms ease 340ms, color 650ms ease 340ms, border-color 650ms ease 340ms;
  }

  @media (prefers-reduced-motion: reduce) {
    body,
    header.site-header,
    .utility-bar,
    footer.site-footer,
    .tod-box,
    .utility-icon-btn {
      transition: none;
    }
  }

  /* Make the YAML nav feel more like a modern “global nav” bar */
  nav.site-nav {
    background: #003366;
  }
    /* position: relative;
    clip-path: polygon(
      12px 0,
      calc(100% - 12px) 0,
      100% 20%,
      100% 80%,
      calc(100% - 12px) 100%,
      12px 100%,
      0 80%,
      0 20%
    );
  } */

  /* .nav-hexagon-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .nav-hexagon {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50px;
    background: #003366;
  }

  .nav-hexagon-left {
    left: 0;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 25% 100%, 12.5% 75%, 0 50%, 0 50%, 12.5% 25%);
  }

  .nav-hexagon-right {
    right: 0;
    clip-path: polygon(0 0, 75% 0, 87.5% 25%, 100% 50%, 100% 50%, 87.5% 75%, 75% 100%, 0 100%);
  } */

  nav.site-nav .ym-hlist {
    background: transparent;
  }

  /* Align nav items with the .ym-wbox padding used in header/content (10px) */
  nav.site-nav .ym-hlist ul {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Default nav items: light gray text */
  nav.site-nav .ym-hlist ul li a,
  nav.site-nav .ym-hlist ul li strong {
    color: #d6d6d6;
  }

  /* Override for current/active page: use white */
  nav.site-nav .ym-hlist ul li.active a,
  nav.site-nav .ym-hlist ul li.active strong,
  nav.site-nav .ym-hlist ul li a[aria-current="page"] {
    color: #fff !important;
  }

  nav.site-nav .ym-hlist ul li {
    background: transparent;
  }

  /* Default nav items: no button highlight; background shows navbar color */
  nav.site-nav .ym-hlist ul li a {
    background: transparent;
    border-radius: 0.2em;
  }

  /* Hover state: make non-current links white */
  nav.site-nav .ym-hlist ul li a:hover,
  nav.site-nav .ym-hlist ul li a:focus,
  nav.site-nav .ym-hlist ul li a:active {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff !important;
  }

  /* Only show button background for active item */
  nav.site-nav .ym-hlist ul li a:visited {
    background: transparent;
    color: #d6d6d6;
  }

  /* Ensure visited links also turn white on hover */
  nav.site-nav .ym-hlist ul li a:visited:hover,
  nav.site-nav .ym-hlist ul li a:visited:focus,
  nav.site-nav .ym-hlist ul li a:visited:active {
    color: #ffffff !important;
  }

  nav.site-nav .ym-hlist ul li.active a {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
  }

  .utility-bar {
    background: rgba(246, 246, 246, 0.66);
    border-bottom: 1px solid #e6e6e6;
  }

  .utility-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 10px;
  }

  .utility-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .utility-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
  }

  .utility-date {
    margin-left: auto;
  }

  /* Desktop layout: language links left, date + buttons right on one row */
  @media (min-width: 512px) {
    .utility-inner {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .utility-date {
      margin-left: 0;
    }

    .utility-right {
      border-left: 1px solid #d0d0d0;
      padding-left: 0.5rem;
      margin-left: 0.5rem;
    }
  }

  /* Mobile layout: force language links into two rows (2+2)
     English | Español
     Français | Português
  */
  @media (max-width: 511px) {
    .utility-left {
      flex-wrap: wrap;
      row-gap: 0.15rem;
      column-gap: 0.5rem;
    }

    /* Use the 2nd divider (between ES and FR) as an invisible line-break.
       This removes the trailing "|" on the first row while keeping markup unchanged. */
    .utility-left .utility-sep:nth-of-type(2) {
      flex: 0 0 100%;
      height: 0;
      line-height: 0;
      margin: 0;
      padding: 0;
      opacity: 0;
      pointer-events: none;
    }
  }

  /* Mobile spacing: add horizontal padding on small screens */
  @media (max-width: 760px) {
    .ym-wrapper {
      padding-left: 12px;
      padding-right: 12px;
    }
    .ym-wbox {
      padding: 5px !important;
    }
  }

  .utility-sep {
    opacity: 0.6;
  }

  .lang-link {
    text-decoration: none;
  }

  .lang-link:hover,
  .lang-link:focus {
    text-decoration: none;
    background: transparent;
    color: inherit;
  }

  .lang-link.active {
    font-weight: bold;
  }

  .utility-date {
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
     transition: none;
  }

  .utility-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid #cfcfcf;
    padding: 0.15rem 0.4rem;
    line-height: 1.2;
  }

  .utility-btn:hover,
  .utility-btn:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
  }

  .utility-icon-btn {
    cursor: pointer;
    background: transparent;
    border: 1px solid #cfcfcf;
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    transition: background-color 0.05s ease-out;
  }

  .utility-bar .utility-icon-btn {
    border-color: #003366;
  }

  .utility-right .utility-icon-btn {
    border-color: #003366;
  }

  .utility-right .utility-icon-btn:hover,
  .utility-right .utility-icon-btn:focus {
    border-color: #4d87c7;
  }

  .utility-icon-btn:hover,
  .utility-icon-btn:focus {
    background: rgba(0, 0, 0, 0.05);
    outline: none;
  }

  .utility-icon-btn:active {
    background: transparent;
  }

  .utility-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    display: block;
  }

  .utility-right .utility-icon {
    filter: invert(17%) sepia(99%) saturate(747%) hue-rotate(176deg) brightness(92%) contrast(101%);
  }

  .page-actions-inner {
     display: flex;
     justify-content: flex-end;
     padding: 0.5rem 10px 0.75rem;
     background: transparent !important;
  }

  .page-actions-stack {
     display: flex;
     flex-direction: row;
     gap: 0.5rem;
     align-items: center;
     background: transparent !important;
    }

    .page-actions-stack .utility-icon-btn {
      background: rgba(0, 51, 102, 0.7); /* #003366 with transparency */
      border-color: rgba(0, 51, 102, 0.7);
      color: #f8f8fa;
    }
    .page-actions-stack .utility-icon-btn:hover,
    .page-actions-stack .utility-icon-btn:focus {
      background: rgba(0, 51, 102, 0.85);
      border-color: rgba(0, 51, 102, 0.85);
      outline: none;
    }
    .page-actions-stack .utility-icon {
      opacity: 1;
      filter: brightness(0) saturate(100%) invert(94%) sepia(20%) saturate(479%) hue-rotate(324deg) brightness(108%) contrast(106%);
    }
    html[data-theme="dark"] .page-actions-stack .utility-icon-btn {
      background: rgba(102, 0, 26, 0.7);
      border-color: rgba(102, 0, 26, 0.7);
      color: #f8f8fa;
    }
    html[data-theme="dark"] .page-actions-stack .utility-icon-btn:hover,
    html[data-theme="dark"] .page-actions-stack .utility-icon-btn:focus {
      background: rgba(102, 0, 26, 0.85);
      border-color: rgba(102, 0, 26, 0.85);
    }
    html[data-theme="dark"] .page-actions-stack .utility-icon {
      opacity: 1;
      filter: brightness(0) saturate(100%) invert(94%) sepia(20%) saturate(479%) hue-rotate(324deg) brightness(108%) contrast(106%);
    }

    /* Bottom page action buttons: match top bar button backgrounds, but only for the buttons, not the bar */
    /* Remove background override so .utility-icon-btn uses its base style (semi-transparent) */
  }

  .page-actions-sep {
    opacity: 0.6;
    line-height: 1;
  }

  a.utility-icon-btn {
    text-decoration: none;
    color: inherit;
  }

  /* Theme toggle shows the action icon (moon when light, sun when dark) */
  #theme-toggle .utility-icon[data-icon="sun"] {
    display: none;
  }

  html[data-theme="dark"] #theme-toggle .utility-icon[data-icon="moon"] {
    display: none;
  }

  html[data-theme="dark"] #theme-toggle .utility-icon[data-icon="sun"] {
    display: block;
  }

  html[data-theme="dark"] body {
    background-color: #111;
    background-image: url('../assets/images/field.jpeg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  html[data-theme="dark"] header.site-header {
    background: transparent;
    border-bottom-color: #2b2b2b;
  }

  html[data-theme="dark"] .utility-bar {
    background: rgba(246, 246, 246, 0.66);
    border-bottom-color: #2b2b2b;
  }

  html[data-theme="dark"] footer.site-footer {
    background: transparent;
    border-top-color: #fff3e6;
  }

  html[data-theme="dark"] footer.site-footer .ym-wbox.footer-wbox {
    background: rgba(195, 141, 141, 0.5) !important;
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] .footer-meta {
    border-top-color: #fff3e6;
  }

  html[data-theme="dark"] .footer-last-login,
  html[data-theme="dark"] .footer-sep-line,
  html[data-theme="dark"] .footer-links a,
  html[data-theme="dark"] .footer-meta a,
  html[data-theme="dark"] .footer-contact a,
  html[data-theme="dark"] .footer-last-login-link,
  html[data-theme="dark"] .footer-last-login-link:visited,
  html[data-theme="dark"] .footer-last-login-link:active {
    color: #fff3e6;
  }

  html[data-theme="dark"] .footer-links a:hover,
  html[data-theme="dark"] .footer-links a:focus,
  html[data-theme="dark"] .footer-meta a:hover,
  html[data-theme="dark"] .footer-meta a:focus,
  html[data-theme="dark"] .footer-contact a:hover,
  html[data-theme="dark"] .footer-contact a:focus,
  html[data-theme="dark"] .footer-last-login-link:hover,
  html[data-theme="dark"] .footer-last-login-link:focus {
    color: #fff3e6;
  }

  html[data-theme="dark"] .tod-box {
    background: rgba(195, 141, 141, 0.5);
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] body.portal-page .auth-card,
  html[data-theme="dark"] body.register-page .auth-card {
    background: rgba(195, 141, 141, 0.5);
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] body.portal-page .auth-label,
  html[data-theme="dark"] body.register-page .auth-label,
  html[data-theme="dark"] body.portal-page .auth-backup-link,
  html[data-theme="dark"] body.register-page .auth-backup-link,
  html[data-theme="dark"] body.portal-page .auth-register a,
  html[data-theme="dark"] body.register-page .auth-register a {
    color: #6b1f2e;
  }

  html[data-theme="dark"] body.portal-page .auth-submit,
  html[data-theme="dark"] body.register-page .auth-submit {
    background: #7e5429;
    border-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] body.portal-page .auth-submit:hover,
  html[data-theme="dark"] body.portal-page .auth-submit:focus,
  html[data-theme="dark"] body.register-page .auth-submit:hover,
  html[data-theme="dark"] body.register-page .auth-submit:focus {
    background: #653300;
    border-color: #653300;
    color: #fff3e6;
  }

  html[data-theme="dark"] body.portal-page .auth-back,
  html[data-theme="dark"] body.register-page .auth-back {
    background: rgba(126, 84, 41, 0.2);
    border-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] body.portal-page .auth-back:hover,
  html[data-theme="dark"] body.portal-page .auth-back:focus,
  html[data-theme="dark"] body.register-page .auth-back:hover,
  html[data-theme="dark"] body.register-page .auth-back:focus {
    background: rgba(126, 84, 41, 0.35);
    color: #fff3e6;
  }

  html[data-theme="dark"] body.portal-page .auth-backup-link:hover,
  html[data-theme="dark"] body.portal-page .auth-backup-link:focus,
  html[data-theme="dark"] body.register-page .auth-backup-link:hover,
  html[data-theme="dark"] body.register-page .auth-backup-link:focus,
  html[data-theme="dark"] body.portal-page .auth-register a:hover,
  html[data-theme="dark"] body.portal-page .auth-register a:focus,
  html[data-theme="dark"] body.register-page .auth-register a:hover,
  html[data-theme="dark"] body.register-page .auth-register a:focus {
    color: #b85a6d;
  }

  html[data-theme="dark"] body.portal-page .auth-totp-separator,
  html[data-theme="dark"] body.register-page .auth-totp-separator {
    color: #6b1f2e;
  }

  html[data-theme="dark"] body.portal-page .spinner-outer,
  html[data-theme="dark"] body.register-page .spinner-outer {
    stroke: #6b1f2e;
  }

  html[data-theme="dark"] body.portal-page .spinner-mid,
  html[data-theme="dark"] body.register-page .spinner-mid {
    stroke: #b85a6d;
  }

  html[data-theme="dark"] body.portal-page .spinner-core,
  html[data-theme="dark"] body.register-page .spinner-core {
    fill: #fff3e6;
  }

  html[data-theme="dark"] .settings-card {
    background: rgba(195, 141, 141, 0.5);
    border-color: #2b2b2b;
  }

  html[data-theme="dark"] .settings-card .settings-label,
  html[data-theme="dark"] .settings-card label {
    color: #6b1f2e;
  }

  html[data-theme="dark"] .settings-card #mfa-method {
    border-color: #7e5429;
    color: #6b1f2e;
    background: #fff;
  }

  html[data-theme="dark"] .settings-card .auth-submit {
    background: #7e5429;
    border-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] .settings-card .auth-submit:hover,
  html[data-theme="dark"] .settings-card .auth-submit:focus {
    background: #653300;
    border-color: #653300;
    color: #fff3e6;
  }

  html[data-theme="dark"] .vault-btn {
    background: #7e5429;
    border-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] .vault-btn.secondary {
    background: rgba(126, 84, 41, 0.2);
    border-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] .vault-btn:hover,
  html[data-theme="dark"] .vault-btn:focus {
    background: #653300;
    border-color: #653300;
    color: #fff3e6;
    filter: none;
  }

  html[data-theme="dark"] .select-table tbody tr:hover {
    background: rgba(126, 84, 41, 0.15);
  }

  html[data-theme="dark"] .select-table tbody td.vault-identifier,
  html[data-theme="dark"] .select-table tbody td.vault-identifier .vault-link,
  html[data-theme="dark"] .select-table tbody td.vault-identifier .vault-link strong,
  html[data-theme="dark"] .select-table tbody td.vault-secret-cell,
  html[data-theme="dark"] .select-table tbody td.vault-secret-cell .vault-secret,
  html[data-theme="dark"] .select-table tbody td .row-input {
    color: #6b1f2e !important;
    -webkit-text-fill-color: #6b1f2e;
  }

  html[data-theme="dark"] .modal-box {
    background-color: rgba(195, 141, 141, 0.66);
  }

  html[data-theme="dark"] .modal-title,
  html[data-theme="dark"] .modal-title-blue,
  html[data-theme="dark"] .modal-label {
    color: #fff3e6;
  }

  html[data-theme="dark"] .modal-btn-ok {
    background-color: #7e5429;
    color: #fff3e6;
  }

  html[data-theme="dark"] .modal-btn-ok:hover {
    background-color: #653300;
  }

  html[data-theme="dark"] .modal-input:focus {
    border-color: #7e5429;
    box-shadow: 0 0 0 2px rgba(126, 84, 41, 0.2);
  }

  html[data-theme="dark"] #totp-modal .totp-digit {
    border-color: #7e5429;
    background: rgba(126, 84, 41, 0.2);
    color: #6b1f2e;
  }

  html[data-theme="dark"] a {
    color: #6b1f2e;
  }

  html[data-theme="dark"] a:hover,
  html[data-theme="dark"] a:focus {
    color: #b85a6d;
  }

  html[data-theme="dark"] .home-welcome-title,
  html[data-theme="dark"] .home-welcome-title .welcome-lead,
  html[data-theme="dark"] .home-welcome-title .brand-script,
  html[data-theme="dark"] .vault-welcome-title,
  html[data-theme="dark"] .vault-welcome-title .brand-script {
    color: #6b1f2e;
  }

  html[data-theme="dark"] .utility-btn {
    border-color: #5a5a5a;
  }

  html[data-theme="dark"] .utility-icon-btn {
    border-color: #5a5a5a;
  }

  html[data-theme="dark"] .utility-icon {
    color: #6b1f2e;
    fill: #6b1f2e;
    stroke: #6b1f2e;
    filter: none;
    opacity: 1;
  }

  html[data-theme="dark"] .utility-btn:hover,
  html[data-theme="dark"] .utility-btn:focus {
    background: rgba(0, 0, 0, 0.05);
  }

  html[data-theme="dark"] .utility-icon-btn:hover,
  html[data-theme="dark"] .utility-icon-btn:focus {
    background: rgba(0, 0, 0, 0.05);
  }

  html[data-theme="dark"] .utility-icon-btn:hover .utility-icon,
  html[data-theme="dark"] .utility-icon-btn:focus .utility-icon {
    color: #b85a6d;
    fill: #b85a6d;
    stroke: #b85a6d;
  }

  html[data-theme="dark"] .utility-right .utility-icon-btn {
    border-color: #6b1f2e;
  }

  html[data-theme="dark"] .utility-right .utility-icon-btn:hover,
  html[data-theme="dark"] .utility-right .utility-icon-btn:focus {
    border-color: #b85a6d;
  }

  html[data-theme="dark"] .utility-right .utility-icon {
    filter: invert(18%) sepia(22%) saturate(2882%) hue-rotate(312deg) brightness(94%) contrast(91%);
  }

  html[data-theme="dark"] nav.site-nav {
    background: #660026;
  }

  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:hover,
  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:focus,
  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a:active {
    background: rgba(255, 184, 199, 0.22);
    color: #ffe8ed !important;
  }

  html[data-theme="dark"] nav.site-nav .ym-hlist ul li.active a,
  html[data-theme="dark"] nav.site-nav .ym-hlist ul li a[aria-current="page"] {
    background: rgba(255, 184, 199, 0.22);
    color: #ffe8ed !important;
  }

  main.site-main {
    padding: 2rem 0;
    flex: 1 0 auto;
    background: transparent;
  }

  .flourish {
    display: flex;
    justify-content: center;
    padding: 1.25rem 0 0.75rem;
    flex-shrink: 0;
  }

  .flourish-svg {
    width: min(66vw, 52rem);
    height: 48px;
    filter: none;
  }

  .flourish-svg path {
    stroke: #003366 !important;
    fill: none !important;
    stroke-width: 3 !important;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 1 !important;
  }

  .flourish-svg path:last-child {
    fill: #003366 !important;
    stroke: none !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] .flourish-svg {
    filter: brightness(0) saturate(100%) invert(94%) sepia(20%) saturate(479%) hue-rotate(324deg) brightness(108%) contrast(106%);
  }

  footer.site-footer {
    background: transparent;
    border-top: 1px solid #e6e6e6;
    flex-shrink: 0;
  }

  .footer-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .footer-last-login {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.95rem;
    color: #003366;
    opacity: 0.9;
  }

  .footer-last-login-link,
  .footer-last-login-link:visited,
  .footer-last-login-link:active {
    color: inherit;
    background: transparent;
    text-decoration: none;
  }

  .footer-last-login-link:hover,
  .footer-last-login-link:focus {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
    outline: none;
  }

  .footer-col {
    flex: 1 1 14rem;
    min-width: 12rem;
  }

  .footer-col h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }

  .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .footer-links li {
    margin: 0.25rem 0;
  }

  .footer-links a {
    color: #003366;
    text-decoration: none;
  }

  .footer-links a:hover,
  .footer-links a:focus {
    color: #4d87c7;
    text-decoration: none;
    outline: none;
  }

  .footer-meta {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e2e2;
    font-size: 0.9rem;
    opacity: 0.9;
    text-align: center;
  }

  .footer-meta a,
  .footer-contact a {
    color: #003366;
    text-decoration: none;
    background: transparent;
  }

  .footer-meta a:hover,
  .footer-meta a:focus,
  .footer-contact a:hover,
  .footer-contact a:focus {
    color: #4d87c7;
    text-decoration: none;
    background: transparent;
    outline: none;
  }

  .footer-sep-line {
    margin: 0.25rem 0;
    text-align: center;
    opacity: 0.9;
    color: #003366;
  }

  .footer-contact {
    margin: 0;
    text-align: center;
  }

  .footer-contact a,
  .footer-contact a:visited,
  .footer-contact a:active {
    color: inherit;
    background: transparent;
  }

  .footer-contact a:hover,
  .footer-contact a:focus {
    color: #4d87c7;
    background: transparent;
    text-decoration: none;
    outline: none;
  }

  footer.site-footer .footer-meta a,
  footer.site-footer .footer-links a,
  footer.site-footer .footer-contact a,
  footer.site-footer .footer-contact a:visited,
  footer.site-footer .footer-contact a:active,
  footer.site-footer .footer-last-login-link,
  footer.site-footer .footer-last-login-link:visited,
  footer.site-footer .footer-last-login-link:active {
    color: #003366;
  }

  footer.site-footer .footer-meta a:hover,
  footer.site-footer .footer-meta a:focus,
  footer.site-footer .footer-links a:hover,
  footer.site-footer .footer-links a:focus,
  footer.site-footer .footer-contact a:hover,
  footer.site-footer .footer-contact a:focus,
  footer.site-footer .footer-last-login-link:hover,
  footer.site-footer .footer-last-login-link:focus {
    color: #4d87c7;
  }

  html[data-theme="dark"] footer.site-footer .footer-meta a,
  html[data-theme="dark"] footer.site-footer .footer-links a,
  html[data-theme="dark"] footer.site-footer .footer-contact a,
  html[data-theme="dark"] footer.site-footer .footer-contact a:visited,
  html[data-theme="dark"] footer.site-footer .footer-contact a:active,
  html[data-theme="dark"] footer.site-footer .footer-last-login-link,
  html[data-theme="dark"] footer.site-footer .footer-last-login-link:visited,
  html[data-theme="dark"] footer.site-footer .footer-last-login-link:active,
  html[data-theme="dark"] footer.site-footer .footer-sep-line {
    color: #fff3e6;
  }

  html[data-theme="dark"] footer.site-footer .footer-meta a:hover,
  html[data-theme="dark"] footer.site-footer .footer-meta a:focus,
  html[data-theme="dark"] footer.site-footer .footer-links a:hover,
  html[data-theme="dark"] footer.site-footer .footer-links a:focus,
  html[data-theme="dark"] footer.site-footer .footer-contact a:hover,
  html[data-theme="dark"] footer.site-footer .footer-contact a:focus,
  html[data-theme="dark"] footer.site-footer .footer-last-login-link:hover,
  html[data-theme="dark"] footer.site-footer .footer-last-login-link:focus {
    color: #fff3e6;
  }

  .tod {
    margin-top: 2.5rem;
  }

  .tod h2 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem;
  }

  .tod-box {
     background: rgba(141, 167, 195, 0.5); /* #8da7c3 at 50% transparent */
    border: 1px solid #e6e6e6;
    padding: 0.75rem;
    text-align: center;
  }

  .tod-box p {
    margin: 0.5rem 0;
  }

  .tod-box p:first-child {
    color: #666;
  }

  .tod-box p:first-child strong {
    font-weight: normal;
  }

  .tod-goodday {
    margin-top: 0.75rem;
    color: #666;
  }

  .triangle-wrap {
    margin: -0.75rem 0 0;
    display: flex;
    justify-content: center;
  }

  .triangle-svg {
    width: min(82vw, 52rem);
    height: auto;
    overflow: visible;
  }

  .tri-glow-outer {
     fill: none;
     /* Original: stroke: #2ea2ff; stroke-width: 22; opacity: 0.22; */
     stroke: #7fb3df;
     stroke-width: 22;
     opacity: 0.65;
    filter: url(#saberGlowOuter);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  .tri-glow-mid {
     fill: none;
     /* Original: stroke: #2ea2ff; stroke-width: 14; opacity: 0.35; */
     stroke: #bfe3ff;
     stroke-width: 14;
     opacity: 0.85;
    filter: url(#saberGlowMid);
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  .tri-core {
     fill: none;
     /* Original: stroke: rgba(235, 250, 255, 0.98); stroke-width: 6; opacity: 0.98; */
     stroke: #e6f3ff;
     stroke-width: 6;
     opacity: 0.98;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 6;
  }

  /* Selectable table in the vault */
  .select-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem 0;
  }

  .select-table th,
  .select-table td {
    border: 1px solid #e6e6e6;
  }

  /* Remove vertical dividers between last 3 header columns, keep outer border */
  .select-table thead th:nth-child(2) {
    border-right: 1px solid #e6e6e6;
  }

  /* Keep borders on toggle-all column (3rd column) */
  .select-table thead th:nth-child(3) {
    border-left: none;
    border-right: 1px solid #e6e6e6;
    width: 3rem;
    text-align: center;
    padding: 0.5rem 0;
    vertical-align: middle;
  }

  #vault-toggle-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  /* Phantom header cells for copy (4th) and settings (5th) columns */
  .select-table thead th:nth-child(4) {
    border-left: none;
    border-right: none;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }

  .select-table thead th:nth-child(5) {
    border-left: none;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
  }

  .select-table td:last-child {
    width: 3rem;
    height: 3rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }

  .vault-state-cell-locked,
  .vault-state-cell-unlocked {
    width: 3rem;
    height: 3rem;
    padding: 0;
    text-align: center;
    vertical-align: middle;
  }

  /* Align header checkbox with row checkboxes */
  .select-table thead th label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: bold;
  }

  /* Vault action buttons */
  .vault-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }

  .vault-actions-bottom {
    margin-top: 1.2rem;
    justify-content: flex-end;
    width: 100%;
  }

  .vault-btn {
    cursor: pointer;
    padding: 0.45rem 0.7rem;
    border: 1px solid #29547e;
    background: #29547e;
    color: #fff;
    font: inherit;
    border-radius: 3px;
  }

  .vault-btn.secondary {
    background: #fff;
    color: #003365;
    border-color: #cfcfcf;
  }

  .vault-btn.danger {
    background: #660033;
    color: #fff;
    border-color: #660033;
  }

  .vault-btn:hover {
    filter: brightness(0.95);
  }

  .row-input {
    font-family: 'Times New Roman', serif;
    color: #00008b;
  }

  .select-table tbody tr:hover {
    background: #f6fbff;
  }

  .select-table .row-select {
    margin-right: 0.6rem;
    transform: translateY(1px);
  }

  /* Custom Modal Styles */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
  }

  .modal-box {
    background-color: rgba(141, 167, 195, 0.66); /* 66% opacity for modal popups */
    /* BLUR IMPLEMENTED: Modal popups */
    backdrop-filter: blur(8px) saturate(1.0);
    -webkit-backdrop-filter: blur(8px) saturate(1.0);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    /* Golden ratio width:height, keep height as is (auto from content + padding) */
    width: calc(1.618 * 340px); /* 340px is approx modal content height incl. padding */
    max-width: 550px;
    min-width: 340px;
    padding: 24px;
    text-align: center;
    border: 4px double #003366;
    box-sizing: border-box;
    margin: 16px;
  }

  /* Rate limit modal: content-based sizing, no fixed aspect ratio */
  #rate-limit-modal .modal-box {
    width: min(90vw, 28rem);
    max-width: 32rem;
    margin: auto;
  }

  /* TOTP disable modal: golden ratio proportions (width:height = 1.618:1) */
  #totp-disable-modal .modal-box {
    aspect-ratio: 1.618 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .modal-title {
    margin: 0 0 16px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #000;
  }
  .modal-title-blue {
    color: #003366;
  }


  .modal-label {
    display: block;
    margin: 12px 0 4px 0;
    font-size: 14px;
    font-weight: 500;
    color: #003366;
    text-align: left;
  }

  .modal-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0 20px 0;
  }

  .modal-input-wrap .modal-input {
    padding-right: 2.6rem;
    margin: 0;
  }

  #modal-toggle-secret {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  #modal-toggle-secret .eye-icon {
    width: 18px;
    height: 18px;
    display: block;
  }

  #modal-toggle-secret .eye-icon[hidden] {
    display: none !important;
  }


  .modal-input {
    font-family: 'Times New Roman', serif;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 8px;
    margin: 0 0 20px 0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 16px;
    color: #000;
  }
  .modal-divider {
    border: none;
    border-top: 1.5px solid #e0e4ea;
    margin: 16px 0 16px 0;
  }


  .modal-input:focus {
    outline: none;
    border-color: #003366;
    box-shadow: 0 0 0 2px rgba(0, 51, 102, 0.1);
  }

  .modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }

  .modal-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .modal-btn-cancel {
    background-color: #f0f0f0;
    color: #333;
  }

  .modal-btn-cancel:hover {
    background-color: #e8e8e8;
  }

  .modal-btn-ok {
    background-color: #003366;
    color: #fff;
  }

  .modal-btn-ok:hover {
    background-color: #002244;
  }

  .tri-label {
    font-family: "Times New Roman", Times, serif;
    font-size: 21px;
    fill: #003365;
  }

  .shield-wrap {
    display: none;
  }

  .shield-svg {
    display: none;
  }

  .shield-in-triangle {
    pointer-events: none;
    /* display: none; */
  }

  .shield-glow {
    fill: none;
    stroke: #7fb3df;
    stroke-width: 18;
    opacity: 0.5;
    filter: url(#shieldGlow);
    stroke-linejoin: miter;
    stroke-miterlimit: 8;
  }

  .shield-body {
    fill: none;
    stroke: #e5f2ff;
    stroke-width: 4;
    opacity: 0.85;
    stroke-linejoin: miter;
    stroke-miterlimit: 8;
  }

  .shield-shading {
    fill: #7fb3df;
    opacity: 0.37;
    filter: url(#shieldGlow);
/* End shield-shading block */


  }

  html[data-theme="dark"] .shield-shading {
    fill: #dfb37f;
  }

  .shield-keyhole {
    fill: rgba(235, 250, 255, 0.75);
    filter: url(#shieldGlow);
  }

/* End tri-label block */

@media screen and (max-width: 760px) {
  header.site-header {
    padding: 0.75rem 0;
  }

  .site-brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .utility-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .utility-right {
    align-self: flex-end;
  }
}
/* Contact page specific styles */
.contact-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.75rem 0 4.25rem;
}

.contact-title {
  margin: 0 0 1.5rem;
  font-size: 1.5rem;
  text-align: center;
  white-space: pre-line;
}

.contact-card {
  border-radius: 5px;
  width: min(92vw, 26rem);
  aspect-ratio: 1.618 / 1;
  box-sizing: border-box;
  background: rgba(141, 167, 195, 0.5); /* Match .tod-box */
  border: 1px solid #e6e6e6;
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-form {
  display: grid;
  gap: 2.8rem;
  justify-items: stretch;
  text-align: left;
}

.contact-form.loading {
  pointer-events: none;
  opacity: 0.7;
}

.contact-label {
  text-align: left;
  display: block;
  margin-bottom: 0.7rem;
  font-weight: bold;
  color: #003365;
}

.contact-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.8rem;
  border: 1px solid #cfcfcf;
  background: #fff;
}

.contact-step {
  display: contents;
}

.contact-step-fields {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-submit-wrap {
  position: relative;
  width: 100%;
}

.contact-submit-wrap .contact-submit {
  transition: opacity 160ms ease;
}

.contact-submit-loader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.contact-form.loading .contact-submit {
  opacity: 0;
  pointer-events: none;
}

.contact-form.loading .contact-submit-loader {
  opacity: 1;
  visibility: visible;
}

.contact-submit {
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.8rem;
  border: 1px solid #29547e;
  background: #29547e;
  color: #fff;
}

.contact-submit:disabled,
.contact-submit[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  background: #cfcfcf;
  border-color: #cfcfcf;
  color: #666;
}

.contact-submit:hover,
.contact-submit:focus {
  background: #003365;
  color: #fff;
  outline: none;
}

.contact-submit:disabled:hover,
.contact-submit[disabled]:hover {
  background: #cfcfcf;
  color: #666;
}

html[data-theme="dark"] .contact-card {
  background: rgba(195, 141, 141, 0.5);
  border-color: #2b2b2b;
}

/* Dark-mode: contact page labels, titles, and submit button use dark red like vault/portal */
html[data-theme="dark"] .contact-label,
html[data-theme="dark"] .contact-title {
  color: #6b1f2e;
}

html[data-theme="dark"] .contact-submit {
  background: #660033;
  border-color: #660033;
  color: #fff;
}

html[data-theme="dark"] .contact-submit:hover,
html[data-theme="dark"] .contact-submit:focus {
  background: #4d0026;
  border-color: #4d0026;
  color: #fff;
}

/* Ensure inputs have readable text in dark mode; keep neutral background */
html[data-theme="dark"] .contact-input {
  color: #f4e9e9;
  background: rgba(255,255,255,0.04);
  border-color: #444;
}

html[data-theme="dark"] .tri-label {
  fill: #653300;
}

html[data-theme="dark"] .contact-input {
  background: #fff;
  border-color: #444;
}

/* Settings Page: TOTP Modal & MFA Card Styling */

/* TOTP modal error row: reserve space below input boxes */
#totp-modal .totp-error-row {
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Always reserve space for error label, even when hidden */
  /* Prevent layout shift */
}

#totp-modal .modal-error {
  color: #800000;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

/* TOTP digit input styling */
#totp-modal .totp-code-row {
  display: flex;
  justify-content: center;
  gap: 0.75em;
  margin: 1em 0;
}

#totp-modal .totp-digit {
  width: 2.2em;
  height: 3.6em;
  font-size: 1.7em;
  font-weight: bold;
  text-align: center;
  border: 2px solid #003366;
  border-radius: 8px;
  background: #e0e4eb;
  outline: none;
  margin: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  aspect-ratio: 1 / 1.618;
}

/* Use the same style as vault modal windows */
#totp-modal .modal-divider {
  border: none;
  border-top: 1.5px solid #e0e4ea;
  margin: 16px 0 16px 0;
}

/* TOTP modal: landscape golden ratio */
#totp-modal .modal-box {
  width: min(90vw, 28rem);
  aspect-ratio: 1.618 / 1;
  min-height: 10rem;
  max-width: 32rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Settings card: portrait golden ratio, only for settings page */
.settings-card {
  border-radius: 5px;
  width: min(92vw, 24rem);
  aspect-ratio: 1 / 1.618;
  min-height: 36rem;
  max-height: 64rem;
  box-sizing: border-box;
  background: rgba(141, 167, 195, 0.5); /* Match .tod-box */
  border: 1px solid #e6e6e6;
  padding: 1.25rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}