/* Navbar menus lack Popper positioning. Override Front's absolute/animated
   position only for notifications and their settings; measured coordinates are
   viewport-clamped by ds-shell without changing menu behavior or requests. */
:where(.sky-ds) #header [aria-labelledby="navbarNotificationsDropdown"],
:where(.sky-ds) #header [aria-labelledby="navbarNotificationsDropdownSettings"] {
  /* Override Bootstrap navbar positioning and Front's translate animation. */
  position: fixed !important; left: var(--sky-notification-left,var(--sky-space-4)) !important; right: auto !important; top: var(--sky-notification-top,var(--sky-space-10)) !important; bottom: auto !important; transform: none !important; margin: 0 !important;
  max-width: calc(100vw - var(--sky-space-4) * 2); max-height: calc(100dvh - var(--sky-notification-top,var(--sky-space-10)) - var(--sky-space-4)); overflow-y: auto;
}
:where(.sky-ds) #header [aria-labelledby="navbarNotificationsDropdownSettings"] .dropdown-item { white-space: normal; }
/* R57: Bootstrap/Front compatibility belongs here, never in vendor or tokens.
   Existing markup, grid, endpoints and behavior hooks remain unchanged. */
.sky-ds {
  /* Preserve Front's 5.75rem desktop mini rail; only its logical axis changes. */
  --sky-sidebar-mini-width: 5.75rem;
  --sky-dialog-sm: 25rem;
  --sky-dialog-md: 35rem;
  --sky-dialog-lg: 45rem;
  --bs-primary: var(--sky-primary);
  --bs-secondary: var(--sky-text-2);
  --bs-success: var(--sky-success-700);
  --bs-warning: var(--sky-warning-700);
  --bs-danger: var(--sky-danger-700);
  --bs-info: var(--sky-info-700);
  --bs-dark: var(--sky-text-strong);
  --bs-body-color: var(--sky-text);
  --bs-body-bg: var(--sky-bg);
  --bs-body-font-family: var(--sky-font-family);
  --bs-body-font-size: var(--sky-font-md);
  --bs-body-line-height: var(--sky-line-md);
  --bs-secondary-color: var(--sky-text-2);
  --bs-heading-color: var(--sky-text-strong);
  --bs-link-color: var(--sky-link);
  --bs-link-hover-color: var(--sky-primary-hover);
  --bs-border-color: var(--sky-border);
  --bs-border-radius: var(--sky-radius-md);
  --bs-border-radius-sm: var(--sky-radius-sm);
  --bs-border-radius-lg: var(--sky-radius-lg);
  --bs-border-radius-pill: var(--sky-radius-pill);
}
.sky-ds body {
  font-family: var(--sky-font-family); font-size: var(--sky-font-md); line-height: var(--sky-line-md);
  color: var(--sky-text); background-color: var(--sky-bg);
}
/* Reserve icon-font geometry before its bytes arrive, including the inline
   baseline. This is presentation only; keep the existing glyph and hook. */
.sky-ds body :is(.bi,[class^="bi-"],[class*=" bi-"])::before {
  width: 1em; height: 1em; overflow: hidden;
}
.sky-ds body :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { color: var(--sky-text-strong); }
.sky-ds body a { color: var(--sky-link); }
.sky-ds body a:hover { color: var(--sky-primary-hover); }
.sky-ds body :is(button,input,select,textarea) { font-family: var(--sky-font-family); }
.sky-ds body :is(.small,small,.text-cap) { font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
.sky-ds body :is(.text-muted,.text-secondary,.text-body-secondary) {
  /* Override legacy Bootstrap !important color utilities without changing templates' semantics. */
  color: var(--sky-text-2) !important;
}
.sky-ds body .text-primary {
  /* Override legacy Bootstrap utility. */
  color: var(--sky-link) !important;
}
.sky-ds body :is(.text-info,.text-success,.text-warning,.text-danger) {
  --sky-utility-ink: var(--sky-info-700);
  /* Override legacy Bootstrap utility; meaning is retained through the local ink alias. */
  color: var(--sky-utility-ink) !important;
}
.sky-ds body .text-success { --sky-utility-ink: var(--sky-success-700); }
.sky-ds body .text-warning { --sky-utility-ink: var(--sky-warning-700); }
.sky-ds body .text-danger { --sky-utility-ink: var(--sky-danger-700); }
.sky-ds body .bg-white {
  /* Override Bootstrap's fixed white utility, including the dark shell. */
  background-color: var(--sky-surface) !important;
}
.sky-ds body .btn {
  --bs-btn-color: var(--sky-text); --bs-btn-bg: var(--sky-surface);
  --bs-btn-border-color: var(--sky-border-strong); --bs-btn-border-radius: var(--sky-radius-md);
  --bs-btn-font-size: var(--sky-font-md); --bs-btn-font-weight: var(--sky-weight-medium);
  --bs-btn-line-height: var(--sky-line-md); --bs-btn-focus-box-shadow: var(--sky-focus-ring);
  min-height: 0; max-width: 100%; height: var(--sky-btn-md); padding-block: 0;
  border-radius: var(--sky-radius-md); font-size: var(--sky-font-md); line-height: var(--sky-line-md);
  box-shadow: var(--sky-shadow-0); text-decoration: none;
  transition: color var(--sky-duration-fast) var(--sky-ease-standard), background-color var(--sky-duration-fast) var(--sky-ease-standard), border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard);
}
.sky-ds body .btn.btn-sm { height: var(--sky-btn-sm); border-radius: var(--sky-radius-sm); font-size: var(--sky-font-sm); }
.sky-ds body .btn.btn-lg { height: var(--sky-btn-lg); font-size: var(--sky-font-lg); }
.sky-ds body .btn.btn-icon { width: var(--sky-btn-md); padding: 0; flex-shrink: 0; }
.sky-ds body .btn.btn-icon.btn-sm { width: var(--sky-btn-sm); }
.sky-ds body .btn.btn-icon.btn-lg { width: var(--sky-btn-lg); }
.sky-ds body .btn.btn-primary { color: var(--sky-primary-ink); background: var(--sky-primary); border-color: var(--sky-primary); }
.sky-ds body .btn.btn-primary:hover { color: var(--sky-primary-ink); background: var(--sky-primary-hover); border-color: var(--sky-primary-hover); }
.sky-ds body .btn.btn-primary:active { color: var(--sky-primary-ink); background: var(--sky-primary-active); }
.sky-ds body .btn.btn-secondary { color: var(--sky-text); background: var(--sky-surface); border-color: var(--sky-border-strong); }
.sky-ds body .btn.btn-secondary:hover { color: var(--sky-text); background: var(--sky-fill); }
.sky-ds body .btn.btn-secondary:active { background: var(--sky-fill-active); }
.sky-ds body :is(.btn-tertiary,.btn-link) { color: var(--sky-link); background: transparent; border-color: transparent; }
.sky-ds body .btn.btn-tertiary:hover { background: var(--sky-brand-50); }
.sky-ds body .btn.btn-tertiary:active { background: var(--sky-brand-100); }
.sky-ds body .btn.btn-link:is(:hover,:active) { color: var(--sky-link); background: transparent; text-decoration: underline; }
.sky-ds body .btn.btn-danger { color: var(--sky-danger-ink); background: var(--sky-danger-solid); border-color: var(--sky-danger-solid); }
.sky-ds body .btn.btn-danger:hover { color: var(--sky-danger-ink); background: var(--sky-danger-hover); }
.sky-ds body .btn.btn-danger:active { background: var(--sky-danger-active); }
.sky-ds body .btn.btn-danger-secondary { color: var(--sky-danger-700); background: var(--sky-surface); border-color: var(--sky-danger-200); }
.sky-ds body .btn.btn-danger-secondary:hover { background: var(--sky-danger-50); }
.sky-ds body .btn.btn-danger-secondary:active { background: var(--sky-danger-100); }
.sky-ds body .btn:is(:disabled,[aria-disabled="true"]) { color: var(--sky-text-3); background: var(--sky-fill); border-color: transparent; box-shadow: var(--sky-shadow-0); }
.sky-ds body .btn:not(:disabled):focus-visible { outline: 2px solid var(--sky-focus-color); outline-offset: 2px; box-shadow: var(--sky-focus-ring); }
.sky-ds body .card {
  --bs-card-bg: var(--sky-surface); --bs-card-color: var(--sky-text); --bs-card-border-color: var(--sky-border);
  --bs-card-border-radius: var(--sky-radius-lg); --bs-card-cap-bg: var(--sky-surface);
  padding: 0; gap: 0; border-radius: var(--sky-radius-lg); color: var(--sky-text);
  border: 1px solid var(--sky-border); background: var(--sky-surface); box-shadow: var(--sky-shadow-0);
}
.sky-ds body :is(.card-body,.card-header,.card-footer) { padding: var(--sky-space-card); background: transparent; }
.sky-ds body .card-header { border-block-end: 1px solid var(--sky-divider); }
/* R61 answer-9: order-list header rhythm, also on the non-A page route. */
.sky-ds body.sky-page-my_order main .card > .card-header { padding-block: var(--sky-space-3); }
.sky-ds body .card-header > .row { row-gap: var(--sky-space-3); }
.sky-ds body .card-header > .row > .col { flex: 1 1 12rem; min-width: 0; }
.sky-ds body .card-footer { border-block-start: 1px solid var(--sky-divider); }
.sky-ds body :is(.card-title,.card-header-title) { font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); font-weight: var(--sky-weight-semibold); }
.sky-ds body .card :is(.card-title,.card-header-title) { overflow-wrap: anywhere; }
.sky-ds body :is(.form-control,.form-select,.input-group-text) {
  font-size: var(--sky-font-md); line-height: var(--sky-line-md); color: var(--sky-text);
  background-color: var(--sky-surface); border-color: var(--sky-border-strong); border-radius: var(--sky-radius-md);
  box-shadow: var(--sky-shadow-0); transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard);
}
.sky-ds body .form-control:focus { border-color: var(--sky-primary); box-shadow: var(--sky-focus-ring); }
.sky-ds body [data-wallet-amount][aria-pressed="true"] { color: var(--sky-primary-ink); background: var(--sky-primary); border-color: var(--sky-primary); }
.sky-ds body :is(.form-control,.form-select):disabled { background-color: var(--sky-fill); color: var(--sky-text-2); }
.sky-ds body textarea.form-control { height: auto; min-height: 7.5rem; padding-block: var(--sky-space-3); }
/* R58 approved token exception: iOS focus zoom, without disabling user zoom.
   Keep the 40px control box and existing textarea height; 22px line + 8px gaps. */
@media (max-width: 1199.98px), (pointer: coarse) {
  .sky-ds body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select,[contenteditable]:not([contenteditable="false"])) {
    font-size: var(--sky-font-input-mobile);
    line-height: var(--sky-line-md);
    min-width: 0;
  }
  .sky-ds body :is(input.form-control,select.form-select) {
    height: var(--sky-btn-md); min-height: var(--sky-btn-md); padding-block: var(--sky-space-2);
  }
}
.sky-ds body :is(.form-control,.form-select)::placeholder { color: var(--sky-text-3); }
.sky-ds body .modal :is(.form-label,.input-label,label:has(+ .form-control)) { display: block; margin-block-end: var(--sky-space-2); }
.sky-ds body :is(.form-label,.input-label) { font-size: var(--sky-font-md); line-height: var(--sky-line-md); font-weight: var(--sky-weight-medium); color: var(--sky-text); }
.sky-ds body :is(.form-text,.form-text small) { color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
.sky-ds body :is(.input-group,.input-group-merge,.form-control,.form-select):has(+ .form-text) { margin-block-end: 0 !important; /* Override mb utilities; helper owns its single 4px gap. */ }
.sky-ds body :is(.input-group,.input-group-merge,.form-control,.form-select) + .form-text { display: block; margin-block-start: var(--sky-space-1); }
.sky-ds body .modal :is(.form-control,.input-group):has(+ :is(.sky-email-hint,p.small)) { margin-block-end: 0 !important; /* Helper owns the gap, including legacy mb-3 fields. */ }
.sky-ds body .modal :is(.form-control,.input-group) + :is(.sky-email-hint,p.small) { margin-block-start: var(--sky-space-1); }
.sky-ds body .modal .sky-email-hint { margin-block-end: var(--sky-space-3); }
.sky-ds body :is(.invalid-feedback,.form-error) { color: var(--sky-danger-700); font-size: var(--sky-font-sm); }
.sky-ds body .form-check-input { border-color: var(--sky-border-strong); transition: background-color var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body .form-check-input:checked { background-color: var(--sky-primary); border-color: var(--sky-primary); }
.sky-ds body .form-check-input:focus-visible { outline: 2px solid var(--sky-focus-color); outline-offset: 2px; box-shadow: var(--sky-focus-ring); }
.sky-ds body .table {
  --bs-table-color: var(--sky-text); --bs-table-bg: var(--sky-surface); --bs-table-border-color: var(--sky-divider);
  --bs-table-striped-bg: var(--sky-fill-hover); --bs-table-hover-bg: var(--sky-fill);
  color: var(--sky-text); font-size: var(--sky-font-md); line-height: var(--sky-line-md);
}
.sky-ds body .table :is(th,td) { padding-block: var(--sky-space-3); padding-inline: var(--sky-space-4); border-color: var(--sky-divider); }
.sky-ds body .table thead th { height: 2.75rem; background: var(--sky-fill); color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); font-weight: var(--sky-weight-medium); text-transform: none; }
.sky-ds body :is(.badge,.sky-status-pill) { display: inline-flex; align-items: center; gap: var(--sky-space-1); min-height: 1.375rem; font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); border-radius: var(--sky-radius-sm); padding-block: 0; padding-inline: var(--sky-space-2); }
.sky-ds body :is(.alert,.badge) { --sky-tone-bg: var(--sky-fill); --sky-tone-ink: var(--sky-text-2); --sky-tone-border: var(--sky-border); }
.sky-ds body :is(.alert-info,.alert-primary,.bg-soft-info,.bg-soft-primary) { --sky-tone-bg: var(--sky-info-50); --sky-tone-ink: var(--sky-info-700); --sky-tone-border: var(--sky-info-200); }
.sky-ds body :is(.alert-warning,.bg-soft-warning) { --sky-tone-bg: var(--sky-warning-50); --sky-tone-ink: var(--sky-warning-700); --sky-tone-border: var(--sky-warning-200); }
.sky-ds body :is(.alert-success,.bg-soft-success) { --sky-tone-bg: var(--sky-success-50); --sky-tone-ink: var(--sky-success-700); --sky-tone-border: var(--sky-success-200); }
.sky-ds body :is(.alert-danger,.bg-soft-danger) { --sky-tone-bg: var(--sky-danger-50); --sky-tone-ink: var(--sky-danger-700); --sky-tone-border: var(--sky-danger-200); }
.sky-ds body :is(.alert,.badge) {
  /* Override old color utilities which otherwise defeat semantic dark palettes. */
  color: var(--sky-tone-ink) !important;
  /* Override old background utilities. */
  background: var(--sky-tone-bg) !important;
  border-color: var(--sky-tone-border);
}
.sky-ds body .alert { border-radius: var(--sky-radius-md); padding-block: var(--sky-space-3); padding-inline: var(--sky-space-4); }
.sky-ds body .dropdown-menu {
  --bs-dropdown-bg: var(--sky-surface); --bs-dropdown-color: var(--sky-text); --bs-dropdown-link-color: var(--sky-text);
  --bs-dropdown-link-hover-bg: var(--sky-fill); --bs-dropdown-link-hover-color: var(--sky-text);
  --bs-dropdown-link-active-bg: var(--sky-brand-50); --bs-dropdown-link-active-color: var(--sky-link);
  border: 1px solid var(--sky-border); border-radius: var(--sky-radius-lg); padding: var(--sky-space-1);
  background: var(--sky-surface); box-shadow: var(--sky-shadow-2); color: var(--sky-text);
  transition: opacity var(--sky-duration-fast) var(--sky-ease-standard), transform var(--sky-duration-fast) var(--sky-ease-standard);
}
.sky-ds body .dropdown-item { display: flex; align-items: center; min-height: 2.25rem; padding-block: var(--sky-space-2); padding-inline: var(--sky-space-3); border-radius: var(--sky-radius-md); color: var(--sky-text); font-size: var(--sky-font-md); line-height: var(--sky-line-md); }
.sky-ds body .dropdown-item:is(.active,:active) { color: var(--sky-link); background: var(--sky-brand-50); }
.sky-ds body .dropdown-header { color: var(--sky-text-2); font-size: var(--sky-font-xs); }
.sky-ds body .dropdown-menu.show { animation: sky-ds-menu-enter var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body .sky-filter-collapse { display: grid; grid-template-rows: 1fr; margin-block-start: var(--sky-space-3); visibility: visible; transition: grid-template-rows var(--sky-duration-base) var(--sky-ease-standard), margin-block-start var(--sky-duration-base) var(--sky-ease-standard), visibility var(--sky-duration-base) var(--sky-ease-standard); }
.sky-ds body .sky-filter-collapse > div { min-height: 0; overflow: hidden; }
.sky-ds body .sky-filter-collapse[hidden] {
  /* Override the global hidden display rule only for this inert animated presentation wrapper. */
  display: grid !important; grid-template-rows: 0fr; margin-block-start: 0; visibility: hidden;
}
.sky-ds body [data-toggle-filter]::after { content: ""; width: 0.5rem; height: 0.5rem; margin-inline-start: var(--sky-space-2); border-inline-end: 1px solid currentColor; border-block-end: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--sky-duration-base) var(--sky-ease-standard); }
.sky-ds body [data-toggle-filter][aria-expanded="true"]::after { transform: rotate(225deg); }
@keyframes sky-ds-menu-enter {
  from { opacity: 0; translate: 0 var(--sky-space-1); }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-ds body .dropdown-menu.show { animation: none; translate: none; }
}
.sky-ds body .list-group-item.active { color: var(--sky-primary-ink); background: var(--sky-primary); border-color: var(--sky-primary); }
.sky-ds body .list-group-item.active .text-white-50 {
  /* Override Bootstrap's translucent utility to keep selected mirrors readable. */
  color: var(--sky-primary-ink) !important;
}
.sky-ds body .input-group-merge:has(> .js-toggle-password) { flex-wrap: nowrap; }
.sky-ds body .input-group-merge > .js-toggle-password { padding-inline-end: var(--sky-space-3); }
.sky-ds body .input-group-merge:has(> .js-toggle-password) > button.input-group-append { position: static; inset: auto; flex: 0 0 var(--sky-btn-md); width: var(--sky-btn-md); margin-inline: 0; justify-content: center; }
.sky-ds body .modal { --bs-modal-bg: var(--sky-surface); --bs-modal-color: var(--sky-text); --bs-modal-border-color: var(--sky-border); --bs-modal-border-radius: var(--sky-radius-xl); }
.sky-ds body .modal-content { color: var(--sky-text); background: var(--sky-surface); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-xl); box-shadow: var(--sky-shadow-3); }
.sky-ds body :is(.modal-header,.modal-body,.modal-footer) { padding: var(--sky-space-6); border-color: var(--sky-divider); }
.sky-ds body .modal-title { font-size: var(--sky-font-xl); line-height: var(--sky-line-xl); font-weight: var(--sky-weight-semibold); }
.sky-ds body .modal-dialog { max-width: var(--sky-dialog-md); }
.sky-ds body .modal-dialog.modal-sm, .sky-ds body :is(#qrModal,#qrpay) .modal-dialog { max-width: var(--sky-dialog-sm); }
.sky-ds body :is(#qrcodediv img,#qrurl) { width: 15.25rem; height: 15.25rem; max-width: 100%; padding: var(--sky-space-3); border-radius: var(--sky-radius-md); background: var(--sky-white); object-fit: contain; }
.sky-ds body .modal-dialog.modal-lg { max-width: var(--sky-dialog-lg); }
.sky-ds body .modal-content { min-height: 0; max-height: calc(100dvh - var(--sky-space-7)); overflow: hidden; }
.sky-ds body :is(.modal-header,.modal-footer) { flex-shrink: 0; }
.sky-ds body .modal-body { overflow-y: auto; flex: 1 1 auto; }
.sky-ds body .modal-backdrop { background: var(--sky-overlay); }
.sky-ds body .modal-backdrop.show { opacity: 1; }
.sky-ds body .modal .modal-dialog { opacity: 0; transform: scale(var(--sky-motion-scale)); transition: opacity var(--sky-duration-fast) var(--sky-ease-exit), transform var(--sky-duration-fast) var(--sky-ease-exit); }
.sky-ds body .modal.show .modal-dialog { opacity: 1; transform: none; transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); }
.sky-ds body :is(.fade,.collapsing,.offcanvas) { transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); }
.sky-ds body .btn-close { display: inline-flex; align-items: center; justify-content: center; width: var(--sky-btn-sm); height: var(--sky-btn-sm); padding: 0; color: var(--sky-text-2); background: transparent; border-radius: var(--sky-radius-sm); opacity: 1; }
.sky-ds body .btn-close .bi { font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); }
.sky-ds body .toast { --bs-toast-bg: var(--sky-surface); --bs-toast-color: var(--sky-text); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-lg); box-shadow: var(--sky-shadow-2); }
.sky-ds body :is(.toast-header,.toast-body) { color: var(--sky-text); background: var(--sky-surface); padding: var(--sky-space-4); }
.sky-ds body .sky-toast-region { position: fixed; inset-block-start: var(--sky-space-4); inset-inline-end: var(--sky-space-4); z-index: var(--sky-z-toast); width: 22.5rem; max-width: calc(100% - var(--sky-space-7)); }
.sky-ds body .toast { width: 100%; opacity: 0; transform: translateY(var(--sky-motion-toast)); transition: opacity var(--sky-duration-fast) var(--sky-ease-exit), transform var(--sky-duration-fast) var(--sky-ease-exit); }
.sky-ds body .toast.show { opacity: 1; transform: none; transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-standard); animation: sky-ds-toast-enter var(--sky-duration-base) var(--sky-ease-standard); }
.sky-ds body .toast.show.sky-toast-leaving { opacity: 0; transition-duration: var(--sky-duration-fast); transition-timing-function: var(--sky-ease-exit); animation: none; }
@keyframes sky-ds-toast-enter {
  from { opacity: 0; transform: translateY(var(--sky-motion-toast)); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sky-ds body .toast.show { animation: none; transform: none; }
}
.sky-ds body .toast-header { gap: var(--sky-space-2); border-color: var(--sky-divider); }
.sky-ds body .toast [data-sky-toast-icon] { color: var(--sky-success-700); }
.sky-ds body .toast.sky-toast-error [data-sky-toast-icon] { color: var(--sky-danger-700); }
.sky-ds body .toast-body p { margin: 0; }
/* Shell: one axis and one container, with the existing desktop mini preference. */
.sky-ds body.sky-compact-shell #header { min-height: var(--sky-header-height); height: var(--sky-header-height); padding-inline: var(--sky-space-page); border: 0; background: var(--sky-surface); transition: box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body.sky-compact-shell #header.sky-is-scrolled { box-shadow: var(--sky-shadow-1); }
.sky-ds body.sky-compact-shell #header .navbar-nav-wrap { min-height: 0; height: 100%; width: 100%; max-width: calc(var(--sky-content-max) - var(--sky-space-page) * 2); margin-inline: auto; }
.sky-ds body.sky-compact-shell #header .sky-shell-page-heading { margin: 0; }
.sky-ds body.sky-compact-shell .sky-shell-page-heading h1 { font-size: var(--sky-font-2xl); line-height: var(--sky-line-2xl); font-weight: var(--sky-weight-semibold); color: var(--sky-text-strong); }
.sky-ds body.sky-compact-shell .sky-shell-page-heading p { margin-block-start: var(--sky-space-1); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); color: var(--sky-text-2); }
.sky-ds body.sky-compact-shell .main { padding-block-start: var(--sky-header-height); }
.sky-ds body.sky-compact-shell .main > .content { width: 100%; max-width: var(--sky-content-max); margin-inline: auto; padding: var(--sky-space-page); }
@media (min-width: 90.0625rem) {
  .sky-ds { --sky-space-page: 2rem; }
}
.sky-ds body.sky-compact-shell .main > .content > .page-header { border: 0; padding: 0; margin-block-end: var(--sky-space-4); }
/* Heading text owns the card axis; no negative-gutter cancellation is needed. */
.sky-ds body.sky-compact-shell .page-header > .row { --bs-gutter-x: 0; margin-inline: 0; column-gap: var(--sky-space-3); }
.sky-ds body.sky-compact-shell .page-header > .row > [class*="col"] { padding-inline: 0; }
.sky-ds body.sky-compact-shell .page-header-title { font-size: var(--sky-font-2xl); line-height: var(--sky-line-2xl); font-weight: var(--sky-weight-semibold); }
.sky-ds body.sky-compact-shell :is(.sky-docs-container,.sky-knowledge-container,.sky-status-container,.sky-docs-page-header) { max-width: none; margin-inline: 0; }
.sky-ds #navbarVerticalAside { width: var(--sky-sidebar-width); background: var(--sky-surface); border-color: var(--sky-divider); }
.sky-ds body #navbarVerticalAside { left: auto; right: auto; inset-inline-start: 0; margin-inline: 0; }
.sky-ds body.sky-compact-shell .main { padding-inline: 0; margin-inline: 0; }
.sky-ds body.sky-compact-shell #header { left: auto; right: auto; inset-inline: 0; width: auto; margin-inline: 0; }
.sky-ds body.sky-compact-shell .main > .content > .row:has(> .card) { margin-inline: 0; }
.sky-ds #navbarVerticalAside .navbar-brand { height: var(--sky-header-height); padding-inline: var(--sky-space-5); }
.sky-ds #navbarVerticalAside #navbarVerticalMenu > .nav-item > .nav-link { min-height: var(--sky-btn-md); height: var(--sky-btn-md); padding-block: 0; padding-inline: var(--sky-space-3); gap: var(--sky-space-3); border-radius: var(--sky-radius-md); color: var(--sky-text); font-size: var(--sky-font-md); line-height: var(--sky-line-md); font-weight: var(--sky-weight-medium); }
.sky-ds #navbarVerticalAside #navbarVerticalMenu > .nav-item > .nav-link:hover { background: var(--sky-fill); }
.sky-ds body #navbarVerticalAside #navbarVerticalMenu > .nav-item > .nav-link { transition: color var(--sky-duration-fast) var(--sky-ease-standard), background-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds #navbarVerticalAside #navbarVerticalMenu > .nav-item > .nav-link.active { color: var(--sky-link); background: var(--sky-brand-50); }
.sky-ds body #navbarVerticalAside #navbarVerticalMenu > .nav-item > .nav-link.active::before,
.sky-ds body #navbarVerticalAside #navbarVerticalMenu > .sky-nav-heading::after { display: none; }
.sky-ds #navbarVerticalAside .nav-icon { font-size: var(--sky-font-xl); width: var(--sky-icon-md); margin: 0; }
.sky-ds #navbarVerticalAside .nav-link-title { text-transform: none; font: inherit; }
.sky-ds #navbarVerticalAside #navbarVerticalMenu > .sky-nav-heading { margin-block-start: var(--sky-space-5); margin-block-end: var(--sky-space-label); font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); color: var(--sky-text-2); }
.sky-ds body #navbarVerticalAside .navbar-vertical-footer { display: flex; align-items: center; gap: var(--sky-space-1); height: var(--sky-btn-lg); padding-inline: var(--sky-space-3); padding-block: 0; }
.sky-ds body #navbarVerticalAside .sky-sidebar-footer-meta { display: flex; flex: 1; align-items: center; gap: var(--sky-space-2); min-width: 0; }
.sky-ds body #navbarVerticalAside .sky-sidebar-footer-version { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); color: var(--sky-text-2); }
.sky-ds #navbarVerticalAside .sky-sidebar-footer-link { flex-shrink: 0; font-size: var(--sky-font-xs); color: var(--sky-text-2); }
.sky-ds body #navbarVerticalAside .navbar-vertical-footer-list { display: flex; align-items: center; gap: var(--sky-space-1); margin: 0; padding: 0; }
.sky-ds body #navbarVerticalAside .navbar-vertical-footer-list-item { margin: 0; }
.sky-ds #navbarVerticalAside .navbar-vertical-footer .btn { width: var(--sky-btn-sm); height: var(--sky-btn-sm); border-radius: var(--sky-radius-sm); padding: 0; }
.sky-ds .sky-drawer-close { display: none; }
.sky-ds body.sky-drawer-open { overflow: hidden; }
.sky-ds body :is(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--sky-focus-color); outline-offset: 2px; }
@media (min-width: 1200px) {
  .sky-ds body #navbarVerticalAside .navbar-aside-toggler { left: auto; right: auto; inset-inline-start: auto; inset-inline-end: calc(var(--sky-space-4) * -1); width: var(--sky-btn-sm); height: var(--sky-btn-sm); border-radius: var(--sky-radius-sm); }
  .sky-ds body #navbarVerticalAside { transition: width var(--sky-duration-base) var(--sky-ease-standard); }
  .sky-ds body.sky-compact-shell:not(.navbar-vertical-aside-mini-mode) .main { padding-inline-start: var(--sky-sidebar-width); }
  .sky-ds body.sky-compact-shell:not(.navbar-vertical-aside-mini-mode) #header { inset-inline-start: var(--sky-sidebar-width); }
  .sky-ds body.sky-compact-shell.navbar-vertical-aside-mini-mode #navbarVerticalAside { width: var(--sky-sidebar-mini-width); }
  .sky-ds body.sky-compact-shell.navbar-vertical-aside-mini-mode .main { padding-inline-start: var(--sky-sidebar-mini-width); }
  .sky-ds body.sky-compact-shell.navbar-vertical-aside-mini-mode #header { inset-inline-start: var(--sky-sidebar-mini-width); }
  /* Mini navigation has its own logo row and toggle row, never overlapping. */
  .sky-ds body.sky-compact-shell.navbar-vertical-aside-mini-mode #navbarVerticalAside .navbar-brand { display: flex; justify-content: center; padding-inline: var(--sky-space-2); width: 100%; }
  .sky-ds body.sky-compact-shell.navbar-vertical-aside-mini-mode #navbarVerticalAside .navbar-aside-toggler { position: static; margin: 0 auto var(--sky-space-2); transform: none; }
  .sky-ds body .navbar-vertical-aside-mobile-overlay { visibility: hidden; pointer-events: none; }
}
@media (max-width: 1199.98px) {
  .sky-ds body.sky-compact-shell #header .sky-mobile-menu-trigger { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; white-space: nowrap; width: auto; min-height: var(--sky-btn-md); height: var(--sky-btn-md); }
  .sky-ds body.sky-compact-shell #header { height: var(--sky-header-mobile-height); min-height: var(--sky-header-mobile-height); padding-inline: var(--sky-space-4); }
  .sky-ds body.sky-compact-shell .main { padding-block-start: var(--sky-header-mobile-height); }
  .sky-ds body.sky-compact-shell .main > .content { padding-inline: var(--sky-space-4); }
  .sky-ds body #navbarVerticalAside { inset-inline-start: 0; inset-inline-end: auto; transform: translateX(0); visibility: visible; transition: transform var(--sky-duration-slow) var(--sky-ease-standard); z-index: var(--sky-z-drawer); }
  .sky-ds body.navbar-vertical-aside-closed-mode #navbarVerticalAside { transform: translateX(-100%); visibility: hidden; transition-property: transform, visibility; transition-duration: var(--sky-duration-base); transition-timing-function: var(--sky-ease-exit); }
  .sky-ds[dir="rtl"] body.navbar-vertical-aside-closed-mode #navbarVerticalAside { transform: translateX(100%); }
  /* Override Front's more-specific open-state z-index:99; keep sticky < backdrop < drawer. */
  .sky-ds body .navbar-vertical-aside-mobile-overlay { display: block; position: fixed; inset: 0; visibility: visible; opacity: 1; background: var(--sky-overlay); z-index: var(--sky-z-drawer-backdrop) !important; transition: opacity var(--sky-duration-slow) var(--sky-ease-standard), visibility var(--sky-duration-slow) var(--sky-ease-standard); }
  /* Contain background descendants (menus, chat and toasts) only while the
     drawer is open. Sticky elements keep their own level and normal behavior. */
  .sky-ds body.sky-drawer-open > :not(#navbarVerticalAside,.navbar-vertical-aside-mobile-overlay) { isolation: isolate; z-index: var(--sky-z-sidebar); }
  .sky-ds body.navbar-vertical-aside-closed-mode .navbar-vertical-aside-mobile-overlay { opacity: 0; visibility: hidden; pointer-events: none; transition-duration: var(--sky-duration-base); }
  .sky-ds body:not(.sky-drawer-ready) :is(#navbarVerticalAside,.navbar-vertical-aside-mobile-overlay) { visibility: hidden; transition: none; }
  .sky-ds #navbarVerticalAside .sky-drawer-close { display: inline-flex; position: absolute; inset-inline-end: var(--sky-space-3); inset-block-start: var(--sky-space-4); }
}
@media (max-width: 767.98px) {
  .sky-ds body .sky-toast-region { inset-inline: var(--sky-space-4); margin-inline: auto; }
  .sky-ds body .modal-dialog { width: auto; height: auto; min-height: calc(100dvh - var(--sky-space-7)); margin: var(--sky-space-4); }
  .sky-ds body .modal-dialog-scrollable { height: calc(100dvh - var(--sky-space-7)); }
  .sky-ds body .btn.btn-sm { margin-block: var(--sky-space-1); }
  .sky-ds body :is(.btn-sm,.btn-close)::after { content: ""; position: absolute; min-width: 2.5rem; min-height: 2.5rem; inset: calc(var(--sky-space-1) * -1); }
  .sky-ds body :is(.form-check,.form-switch) { min-height: 2.5rem; display: flex; align-items: center; gap: var(--sky-space-2); }
  .sky-ds body .form-check-label { min-height: 2.5rem; display: inline-flex; align-items: center; }
  .sky-ds body :is(.modal-header,.modal-body,.modal-footer) { padding: var(--sky-space-5); }
  .sky-ds body .dropdown-item { min-height: 2.5rem; }
}
/* Native controls and the remaining high-specificity legacy presentation rules. */
.sky-ds body .text-body {
  /* Override the Bootstrap text-body utility in semantic callouts and footers. */
  color: var(--sky-text-2) !important;
}
.sky-ds body #accountNavbarDropdown { width: var(--sky-btn-md); height: var(--sky-btn-md); border-radius: var(--sky-radius-md); transition: box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body #accountNavbarDropdown > .avatar { width: var(--sky-btn-md); height: var(--sky-btn-md); border-radius: var(--sky-radius-md); background: var(--sky-brand-50); color: var(--sky-link); box-shadow: var(--sky-shadow-0); transition: box-shadow var(--sky-duration-fast) var(--sky-ease-standard), background-color var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body :is(.list-separator-link,.landing-footer,.landing-poetry,.landing-hero p,.sky-auth-switch__divider,.form-check-label) { color: var(--sky-text-2); }
.sky-ds body footer bdi { color: var(--sky-text-2); }
.sky-ds body .landing-tag { color: var(--sky-link); background: var(--sky-brand-50); }
.sky-ds body.sky-landing .landing-hero p { font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); }
.sky-ds body.sky-landing .landing-hero .landing-poetry { font-size: var(--sky-font-md); line-height: var(--sky-line-md); }
.sky-ds body.sky-landing .landing-footer { font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
.sky-ds body.sky-auth-page--card h1.display-5 { font-size: var(--sky-font-3xl); line-height: var(--sky-line-3xl); }
.sky-ds body h1.display-1 { font-size: var(--sky-font-5xl); line-height: var(--sky-line-5xl); }
.sky-ds body h1.display-1 + p.lead { font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); }
.sky-ds body .sky-service-retry { color: var(--sky-primary-ink); }
.sky-ds.sky-public-state body { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--sky-space-6); }
.sky-ds.sky-public-state body > main { width: 100%; max-width: 35rem; padding: var(--sky-space-6); background: var(--sky-surface); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-xl); box-shadow: var(--sky-shadow-3); overflow-wrap: anywhere; }
.sky-ds.sky-public-state body h1 { margin-block: var(--sky-space-4); font-size: var(--sky-font-3xl); line-height: var(--sky-line-3xl); font-weight: var(--sky-weight-semibold); }
.sky-ds.sky-public-state body p { color: var(--sky-text-2); font-size: var(--sky-font-md); line-height: var(--sky-line-md); }
.sky-ds.sky-public-state body .label { color: var(--sky-link); font-size: var(--sky-font-md); font-weight: var(--sky-weight-semibold); }
.sky-ds.sky-public-state body .notice { margin-block-start: var(--sky-space-6); padding-block-start: var(--sky-space-5); border-block-start: 1px solid var(--sky-border); }
.sky-ds.sky-public-state body .btn { min-height: var(--sky-btn-md); }
.sky-ds.sky-public-state body form .btn { width: 100%; }
.sky-ds.sky-public-state body .sky-import__icon { width: var(--sky-btn-lg); height: var(--sky-btn-lg); margin-block-end: var(--sky-space-5); font-size: var(--sky-font-3xl); background: var(--sky-brand-50); color: var(--sky-link); border-radius: var(--sky-radius-lg); }
.sky-ds body .sky-service-brand { display: flex; align-items: center; gap: var(--sky-space-3); margin-block-end: var(--sky-space-6); }
.sky-ds body .sky-service-brand img { width: 2.75rem; height: 2.75rem; }
.sky-ds body .sky-service-brand strong { font-size: var(--sky-font-xl); }
.sky-ds body .sky-service-status { display: inline-flex; align-items: center; gap: var(--sky-space-2); padding-block: var(--sky-space-1); padding-inline: var(--sky-space-2); border-radius: var(--sky-radius-pill); background: var(--sky-warning-50); }
.sky-ds body .sky-service-safety { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--sky-space-3); margin-block-start: var(--sky-space-6); padding: var(--sky-space-4); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-md); background: var(--sky-fill); }
.sky-ds body .sky-service-safety > .bi { color: var(--sky-link); font-size: var(--sky-font-xl); }
.sky-ds body .sky-service-safety strong { display: block; margin-block-end: var(--sky-space-1); }
.sky-ds body .sky-service-safety p { margin: 0; }
.sky-ds body .sky-service-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sky-space-4); margin-block-start: var(--sky-space-6); }
.sky-ds body .sky-service-retry-status { margin: 0; font-size: var(--sky-font-sm); }
@media (max-width: 575.98px) {
  .sky-ds.sky-public-state body { padding: var(--sky-space-4); }
  .sky-ds.sky-public-state body > main { padding: var(--sky-space-5); }
}
.sky-ds body #set_gcode { border-radius: var(--sky-radius-md); }
.sky-ds body .sky-shop-card.card-hover-shadow { transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard), transform var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body .sky-checkout-payment-card :is(.sky-payment-methods > label.btn,.sky-wallet-payment-option > label.btn) {
  height: auto; min-height: 3.5rem; padding-block: var(--sky-space-2); padding-inline: var(--sky-space-3) var(--sky-space-10); font-weight: var(--sky-weight-medium);
  /* Override the old payment option's forced radius and border; fields and selection stay native. */
  border-radius: var(--sky-radius-md) !important;
  /* Override the old important selected-border rule. */
  border-color: var(--sky-border) !important;
  background: var(--sky-surface); color: var(--sky-text); box-shadow: var(--sky-shadow-0);
  transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard), background-color var(--sky-duration-fast) var(--sky-ease-standard);
}
.sky-ds body .sky-checkout-payment-card .btn-check:checked + label.btn { background: var(--sky-brand-50); box-shadow: var(--sky-shadow-selected); }
.sky-ds body .sky-payment-method-name { text-align: start; }
/* Preserve the existing payment action-row placement; DS button reset clears it. */
.sky-ds body .sky-checkout-actions > .sky-checkout-submit { margin-left: auto; }
.sky-ds body.sky-page-invoice dd { margin-inline: 0; min-width: 0; overflow-wrap: anywhere; }
.sky-ds body #skyAccountCloseLosses dd { margin-inline: 0; min-width: 0; }
.sky-ds body #addtickm .btn-group label.btn { height: var(--sky-btn-lg); border-radius: var(--sky-radius-md); }
.sky-ds body .sky-wallet-auto-header label[for] { display: inline-flex; align-items: center; min-height: var(--sky-btn-md); }
.sky-ds body .sky-invoice-items { width: 100%; table-layout: fixed; }
.sky-ds body .sky-invoice-items :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
.sky-ds body .sky-invoice-items tr > :first-child { width: 45%; }
.sky-ds body .sky-invoice-items tr > :nth-child(2) { width: 25%; }
.sky-ds body .sky-invoice-items tr > :last-child { width: 30%; }
.sky-ds body .sky-invoice-items tbody tr > :last-child { white-space: nowrap; overflow-wrap: normal; font-variant-numeric: tabular-nums; }
.sky-ds body .sky-payment-method-check { inset-inline-end: var(--sky-space-3); transition-duration: var(--sky-duration-fast); }
.sky-ds body.sky-auth-page #emailgetbt { height: var(--sky-btn-md); }
.sky-ds body .sky-auth-logo { width: 8rem; }
.sky-ds body .sky-auth-background { width: 100%; height: 100%; }
.sky-ds body .sky-auth-split__media { position: relative; }
.sky-ds body .sky-auth-background-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.sky-ds body .sky-order-success-image { max-width: 15rem; }
.sky-ds body.sky-page-download .step { margin-inline: 0; padding-inline: 0; }
.sky-ds body.sky-page-download .card-hover-shadow { transition: box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body [data-sky-ticket-native] { height: 18.75rem; overflow-y: auto; }
.sky-ds body #skyChatraButton { z-index: var(--sky-z-drawer); }
.sky-ds body .dropdown-menu:is([aria-labelledby="navbarNotificationsDropdown"],[aria-labelledby="navbarAppsDropdown"]) { width: 25rem; }
.sky-ds body .dropdown-menu[aria-labelledby="accountNavbarDropdown"] { width: 16rem; }
.sky-ds body .btn[aria-disabled="true"] { color: var(--sky-text-2); }
.sky-ds body :is(.form-check,.form-switch) { position: relative; }
.sky-ds body .form-check-label { min-width: 2.5rem; }
.sky-ds body.sky-page-gift-card .table { white-space: normal; width: 100%; table-layout: fixed; }
.sky-ds body.sky-page-gift-card .table :is(td,th) { white-space: normal; overflow-wrap: anywhere; }
.sky-ds body .sky-invite-link { display: inline-flex; align-items: center; min-height: 2.5rem; }
/* Shared data components. Existing grids and all business hooks are retained. */
.sky-ds body .sky-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sky-space-3); text-align: center; padding-block: var(--sky-space-8); padding-inline: var(--sky-space-4); }
.sky-ds body .sky-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--sky-btn-lg); height: var(--sky-btn-lg); border-radius: var(--sky-radius-pill); background: var(--sky-fill); color: var(--sky-text-3); font-size: var(--sky-font-3xl); }
.sky-ds body .sky-empty h3 { margin: 0; font-size: var(--sky-font-lg); line-height: var(--sky-line-lg); font-weight: var(--sky-weight-semibold); }
.sky-ds body .sky-empty p { max-width: 22.5rem; margin: 0; color: var(--sky-text-2); }
.sky-ds body .sky-page-subtitle { color: var(--sky-text-2); margin-block: var(--sky-space-2) 0; font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
.sky-ds body :is(.sky-dashboard-metric-card,.sky-accent-card,.sky-dashboard-notice-card,.sky-subscription-summary-card,.sky-subscription-import-card,.sky-dashboard-shortcuts)::before { display: none; }
.sky-ds body :is(.sky-dashboard-metric-card,.sky-accent-card,.sky-dashboard-notice-card,.sky-subscription-summary-card,.sky-subscription-import-card,.sky-dashboard-shortcuts) { background: var(--sky-surface); border-color: var(--sky-border); box-shadow: var(--sky-shadow-0); }
.sky-ds body.sky-page-dashboard :is(.sky-subscription-summary-card,.sky-subscription-import-card,.sky-dashboard-shortcuts) > .card-header { background: var(--sky-surface); border-color: var(--sky-divider); }
.sky-ds body .sky-dashboard-stats-row .card { transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body .sky-stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--sky-space-4); margin: 0 0 var(--sky-space-6); }
.sky-ds body .sky-stats-grid > .sky-stat-card { min-width: 0; margin: 0; }
.sky-ds body .sky-stat-card .card-body { padding: var(--sky-space-card); }
.sky-ds body .sky-stat-card__main { display: flex; flex-direction: column; gap: var(--sky-space-2); min-width: 0; }
.sky-ds body .sky-stat-card__main > :is(.card-subtitle,.card-title) { display: block; margin: 0; }
.sky-ds body .sky-stat-card__detail { color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); }
.sky-ds body .sky-site-announcement__action { color: var(--sky-link); }
.sky-ds body .sky-docs-group { background: var(--sky-surface); border-color: var(--sky-border); border-radius: var(--sky-radius-lg); box-shadow: var(--sky-shadow-0); }
.sky-ds body .sky-docs-group__header { padding: var(--sky-space-4); background: var(--sky-surface); border-color: var(--sky-divider); }
.sky-ds body .sky-docs-group__icon { color: var(--sky-link); background: var(--sky-brand-50); border-color: var(--sky-border); border-radius: var(--sky-radius-md); }
.sky-ds body .sky-docs-group__count { color: var(--sky-text-2); background: var(--sky-fill); font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); border-radius: var(--sky-radius-pill); }
.sky-ds body .sky-docs-card { padding: var(--sky-space-4); gap: var(--sky-space-3); transition: border-color var(--sky-duration-fast) var(--sky-ease-standard), box-shadow var(--sky-duration-fast) var(--sky-ease-standard), background-color var(--sky-duration-fast) var(--sky-ease-standard); }
.sky-ds body .sky-docs-card:hover { transform: none; background: var(--sky-fill); border-color: var(--sky-border-strong); box-shadow: var(--sky-shadow-1); }
.sky-ds body :is(.sky-dashboard-metric-card,.sky-stat-card) :is(.card-subtitle,.sky-dashboard-metric-card__mobile-label) { color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); font-weight: var(--sky-weight-medium); }
.sky-ds body :is(.sky-dashboard-metric-card,.sky-stat-card) :is(.card-title,.sky-dashboard-metric-card__mobile-value) { color: var(--sky-text-strong); font-size: var(--sky-font-3xl); line-height: var(--sky-line-3xl); font-weight: var(--sky-weight-semibold); font-variant-numeric: tabular-nums; }
.sky-ds body .sky-profile-overview .sky-profile-metric-label { color: var(--sky-text-2); font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); font-weight: var(--sky-weight-medium); }
.sky-ds body .sky-profile-overview strong { color: var(--sky-text-strong); font-size: var(--sky-font-3xl); line-height: var(--sky-line-3xl); font-weight: var(--sky-weight-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sky-ds body .sky-stat-card .card-subtitle { text-transform: none; overflow-wrap: anywhere; }
@media (max-width: 1199.98px) {
  .sky-ds body .sky-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
  .sky-ds body .sky-stat-card__main.sky-dashboard-metric-card__desktop { display: none; }
  .sky-ds body .sky-stat-card .sky-dashboard-metric-card__mobile { height: auto; gap: var(--sky-space-2); }
  .sky-ds body .sky-dashboard-metric-card__mobile-value > bdi { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.sky-ds body .sky-shop-card { background: var(--sky-surface); border-color: var(--sky-border); }
.sky-ds body .sky-shop-period-radio:checked + .sky-shop-period-option__surface { border-color: var(--sky-primary); background: var(--sky-brand-50); color: var(--sky-text); box-shadow: var(--sky-shadow-selected); }
.sky-ds body .sky-subscription-client-actions .btn {
  /* Legacy mobile import selectors have five class terms; never wrap a client name. */
  white-space: nowrap !important;
}
.sky-ds body #skyImportClash { padding-inline: var(--sky-space-2); gap: var(--sky-space-1); }
.sky-ds body .sky-client-app-icon { flex: 0 0 var(--sky-icon-md); width: var(--sky-icon-md); height: var(--sky-icon-md); border-radius: var(--sky-radius-xs); object-fit: contain; }
.sky-ds body .sky-client-app-icon-frame { display: inline-flex; flex: 0 0 var(--sky-line-md); width: var(--sky-line-md); height: var(--sky-line-md); align-items: center; justify-content: center; border-radius: var(--sky-radius-xs); background: var(--sky-fill-active); border: 1px solid var(--sky-border-strong); }
.sky-ds body .sky-client-app-icon-frame--shadowrocket { background: var(--sky-primary); border-color: var(--sky-primary); }
/* Keep the official raster bytes; render its outline in white on the brand fill. */
.sky-ds body .sky-client-app-icon-frame--shadowrocket img { filter: grayscale(1) invert(1) brightness(3); mix-blend-mode: screen; }
.sky-ds body .sky-dashboard-announcement__email-copy { min-width: var(--sky-btn-lg); min-height: var(--sky-touch-min); height: auto; padding: var(--sky-space-2); border: 1px solid var(--sky-border); border-radius: var(--sky-radius-md); background: var(--sky-surface); color: var(--sky-link); font-size: var(--sky-font-md); line-height: var(--sky-line-md); }
.sky-ds body .sky-dashboard-announcement__email-copy.is-copy-success { color: var(--sky-success-700); background: var(--sky-success-50); border-color: var(--sky-success-200); opacity: var(--sky-opacity-visible); }
.sky-ds body .sky-dashboard-announcement__email-copy.is-copy-failed { color: var(--sky-danger-700); background: var(--sky-danger-50); border-color: var(--sky-danger-200); white-space: normal; overflow-wrap: anywhere; opacity: var(--sky-opacity-visible); }
.sky-ds body .sky-new-user-guide::before { display: none; }
.sky-ds body.sky-page-onboarding .col-md-4 .card-body > p { margin-block-end: var(--sky-space-4); }
.sky-ds body .sky-badge-brand { --sky-tone-bg: var(--sky-brand-50); --sky-tone-ink: var(--sky-link); --sky-tone-border: var(--sky-brand-200); }
.sky-ds body .sky-tag-neutral::before { display: none; }
.sky-ds body .sky-wallet-auto-toggle .form-check-input:disabled { opacity: 1; border-color: var(--sky-border-strong); background-color: var(--sky-fill); background-image: none; position: relative; }
.sky-ds body .sky-wallet-auto-toggle .form-check-input:disabled::before { content: ""; position: absolute; width: var(--sky-space-3); height: var(--sky-space-3); top: 50%; left: var(--sky-space-1); transform: translateY(-50%); border-radius: var(--sky-radius-pill); background: var(--sky-text-3); }
.sky-ds body .sky-wallet-auto-toggle .form-check-input:disabled:checked::before { left: auto; right: var(--sky-space-1); }
.sky-ds body :is(time,[dir="ltr"],.sky-ui-value,.sky-flow-upload,.sky-flow-download,.sky-flow-total,.sky-flow-rate,.sky-commission-ref,.sky-commission-full dd,.sky-wallet-record__copy > strong,#skyPlanCreditAmounts dd,[data-email-next-time]) { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.sky-ds body .sky-shop-card .sky-shop-card__buy:not(:disabled) { background: var(--sky-primary); border-color: var(--sky-primary); color: var(--sky-primary-ink); }
.sky-ds body .sky-shop-card .sky-shop-card__buy:not(:disabled):hover { background: var(--sky-primary-hover); border-color: var(--sky-primary-hover); }
.sky-ds body .sky-shop-card .sky-shop-card__badge { background: var(--sky-warning-50); border-color: var(--sky-warning-200); color: var(--sky-warning-700); border-radius: var(--sky-radius-sm); box-shadow: var(--sky-shadow-0); font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); }
.sky-ds body .btn.is-copy-success { color: var(--sky-success-700); background: var(--sky-success-50); border-color: var(--sky-success-200); }
.sky-ds body .btn.is-copy-failed { color: var(--sky-danger-700); background: var(--sky-danger-50); border-color: var(--sky-danger-200); }
.sky-ds body .btn:is(.is-copy-success,.is-copy-failed) { flex-shrink: 0; opacity: var(--sky-opacity-visible); }
.sky-ds body .btn.is-copy-failed { height: auto; min-height: var(--sky-btn-md); white-space: normal; overflow-wrap: anywhere; padding-block: var(--sky-space-2); }
.sky-ds body .btn.is-copy-failed > [data-sky-copy-label] { min-width: 0; }
.sky-ds body :is(.alert-soft-warning,.alert-soft-danger,.alert-soft-success,.alert-soft-info,.alert-soft-primary,.alert-soft-dark) { --sky-tone-bg: var(--sky-fill); --sky-tone-border: var(--sky-border); }
.sky-ds body .alert-soft-warning { --sky-tone-bg: var(--sky-warning-50); --sky-tone-border: var(--sky-warning-200); }
.sky-ds body .alert-soft-danger { --sky-tone-bg: var(--sky-danger-50); --sky-tone-border: var(--sky-danger-200); }
.sky-ds body .alert-soft-success { --sky-tone-bg: var(--sky-success-50); --sky-tone-border: var(--sky-success-200); }
.sky-ds body :is(.alert-soft-info,.alert-soft-primary) { --sky-tone-bg: var(--sky-info-50); --sky-tone-border: var(--sky-info-200); }
.sky-ds body .alert {
  /* Body copy uses neutral text, not the low-contrast legacy tone utility. */
  color: var(--sky-text) !important;
  border: 1px solid var(--sky-tone-border);
}
.sky-ds body .badge:is(.bg-success,.bg-warning,.bg-danger) { --sky-tone-bg: var(--sky-warning-50); --sky-tone-ink: var(--sky-warning-700); }
.sky-ds body .badge.bg-success { --sky-tone-bg: var(--sky-success-50); --sky-tone-ink: var(--sky-success-700); }
.sky-ds body .badge.bg-danger { --sky-tone-bg: var(--sky-danger-50); --sky-tone-ink: var(--sky-danger-700); }
.sky-ds body .sky-mobile-list .badge { border-radius: var(--sky-radius-pill); }
.sky-ds body .sky-mobile-list .badge:not(.sky-tag-neutral)::before { vertical-align: middle; }
/* Status is a dot capsule in every surface; percentages/regions remain labels. */
.sky-ds body :is(.sky-subscription-plan-heading > .badge,.sky-node-count .badge,.sky-node-status > .badge,.sky-wallet-record > .badge,.sky-mobile-list .badge:not(.sky-tag-neutral),.sky-important-notice-launcher__status) { display: inline-flex; align-items: center; gap: var(--sky-space-1); min-height: 1.375rem; border-radius: var(--sky-radius-pill); padding-block: 0; padding-inline: var(--sky-space-2); font-size: var(--sky-font-xs); line-height: var(--sky-line-xs); font-weight: var(--sky-weight-medium); }
.sky-ds body :is(.sky-subscription-plan-heading > .badge,.sky-node-count .badge,.sky-node-status > .badge,.sky-wallet-record > .badge,.sky-mobile-list .badge:not(.sky-tag-neutral),.sky-important-notice-launcher__status)::before { content: ''; display: inline-block; flex: 0 0 0.375rem; width: 0.375rem; height: 0.375rem; margin: 0; border-radius: var(--sky-radius-pill); background: currentColor; }
.sky-ds body .sky-important-notice-launcher__status { color: var(--sky-text-2); background: var(--sky-fill); }
.sky-ds body .sky-mobile-list { display: table; }
.sky-ds body.sky-page-ticket .sky-mobile-list { width: 100%; table-layout: fixed; }
.sky-ds body.sky-page-ticket .sky-mobile-list :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
.sky-ds body .sky-flow-table { width: 100%; table-layout: fixed; }
.sky-ds body .sky-flow-table :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
.sky-ds body.sky-page-my_order .sky-mobile-list { width: 100%; table-layout: fixed; }
.sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td) { white-space: normal; overflow-wrap: anywhere; }
.sky-ds body.sky-page-my_order .sky-mobile-list .badge { display: inline-flex; align-items: center; gap: var(--sky-space-1); max-width: 100%; white-space: normal; }
.sky-ds body.sky-page-my_order .sky-mobile-list .badge::before { flex-shrink: 0; margin: 0; }
.sky-ds body.sky-page-my_order .sky-mobile-list td:nth-child(3) { text-align: end; font-variant-numeric: tabular-nums; }
.sky-ds body.sky-page-my_order .sky-mobile-list td:first-child { white-space: nowrap; overflow-wrap: normal; font-size: var(--sky-font-sm); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
/* R61 answer-9 overrides the legacy card-table first-row top padding. */
@media (min-width: 48rem) {
  .sky-ds body.sky-page-my_order .sky-mobile-list.card-table > tbody > tr > td { padding-block: var(--sky-space-2); }
}
.sky-ds body :is(.table time,.table bdi[dir="ltr"],.sky-flow-date,.sky-commission-full > div:last-child dd,#skyWalletAutoHistory td:first-child,#giftCardHistory td:nth-child(4)) { white-space: nowrap; overflow-wrap: normal; }
@media (min-width: 768px) {
  .sky-ds body .table tbody tr { height: 3.25rem; }
  .sky-ds body .sky-mobile-list tbody td { border-block-end: 1px solid var(--sky-divider); }
  .sky-ds body .sky-mobile-list tbody tr:hover td { background: var(--sky-fill-hover); }
  .sky-ds body .sky-flow-table :is(th,td):not(:first-child) { text-align: end; font-variant-numeric: tabular-nums; }
  .sky-ds body.sky-page-my_order .sky-mobile-list { table-layout: auto; }
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):first-child { width: auto; }
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):nth-child(2),
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):nth-child(3) { width: 12%; }
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):nth-child(4) { width: 23%; }
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):nth-child(5) { width: 13%; }
  .sky-ds body.sky-page-my_order .sky-mobile-list :is(th,td):last-child { width: 22%; text-align: end; }
  .sky-ds body.sky-page-my_order .sky-mobile-list td:last-child .btn { margin-block: var(--sky-space-1); }
  .sky-ds body.sky-page-ticket .sky-mobile-list { table-layout: auto; }
  .sky-ds body.sky-page-ticket .sky-mobile-list :is(th,td):first-child { width: 4rem; min-width: 4rem; white-space: nowrap; }
  .sky-ds body.sky-page-ticket .sky-mobile-list :is(th,td):nth-child(2) { width: 100%; min-width: 10rem; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sky-ds body.sky-page-ticket .sky-mobile-list :is(th,td):nth-child(n+3) { width: 1%; white-space: nowrap; overflow-wrap: normal; }
  /* Seven non-wrapping ticket columns can exceed a narrow desktop viewport.
     Keep the overflow inside an accessible scroller; phones remain card lists. */
  .sky-ds body.sky-page-ticket .sky-table-scroll::before,
  .sky-ds body.sky-page-ticket .sky-table-scroll::after { content: ''; position: absolute; inset-block: 0; width: 1.5rem; pointer-events: none; z-index: var(--sky-z-raised); }
  .sky-ds body.sky-page-ticket .sky-table-scroll::before { inset-inline-start: 0; opacity: 0; background: linear-gradient(to right, var(--sky-surface), transparent); }
  .sky-ds body.sky-page-ticket .sky-table-scroll::after { inset-inline-end: 0; opacity: 0; background: linear-gradient(to left, var(--sky-surface), transparent); }
  .sky-ds body.sky-page-ticket .sky-table-scroll--back::before,
  .sky-ds body.sky-page-ticket .sky-table-scroll--more::after { opacity: 1; }
  .sky-ds[dir="rtl"] body.sky-page-ticket .sky-table-scroll::before { background: linear-gradient(to left, var(--sky-surface), transparent); }
  .sky-ds[dir="rtl"] body.sky-page-ticket .sky-table-scroll::after { background: linear-gradient(to right, var(--sky-surface), transparent); }
  .sky-ds body.sky-page-ticket [data-scroll-container]:focus-visible { outline-offset: -2px; }
}
.sky-ds body .sky-table-scroll { border: 0; }
.sky-ds body .sky-table-scroll :is(.sky-table-scroll-hint,.sky-table-scroll-edge) { display: none; }
@media (max-width: 767.98px) {
  .sky-ds body .sky-invoice-items tr > :is(th,td) { padding-inline: var(--sky-space-2); }
  .sky-ds body .sky-empty { padding-block: var(--sky-space-6); }
  .sky-ds body :is(.sky-dashboard-metric-card,.sky-stat-card) :is(.card-title,.sky-dashboard-metric-card__mobile-value) { font-size: var(--sky-font-2xl); line-height: var(--sky-line-2xl); }
  .sky-ds body .sky-profile-overview strong { font-size: var(--sky-font-2xl); line-height: var(--sky-line-2xl); }
  .sky-ds body .sky-mobile-list-wrap { overflow: visible; }
  .sky-ds body .sky-mobile-list { display: block; width: 100%; min-width: 0; white-space: normal; }
  .sky-ds body .sky-mobile-list thead { display: table-header-group; position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .sky-ds body .sky-mobile-list tbody { display: block; }
  .sky-ds body .sky-mobile-list tbody tr { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,2fr); gap: var(--sky-space-2); padding: var(--sky-space-4); border-block-end: 1px solid var(--sky-divider); }
  .sky-ds body.sky-page-my_order .sky-mobile-list tbody tr { padding-block: var(--sky-space-2); }
  .sky-ds body.sky-page-my_order .sky-mobile-list tbody td:last-child .btn { margin-block: 0; }
  .sky-ds body .sky-mobile-list tbody td { display: flex; flex-wrap: wrap; gap: var(--sky-space-2); grid-column: 1 / -1; grid-row: auto; border: 0; padding: 0; min-width: 0; white-space: normal; overflow-wrap: anywhere; font-size: var(--sky-font-sm); line-height: var(--sky-line-sm); text-align: start; }
  .sky-ds body .sky-mobile-list tbody td:first-child { grid-column: 1; grid-row: 1; font-size: var(--sky-font-md); font-weight: var(--sky-weight-semibold); }
  .sky-ds body .sky-mobile-list.card-table > tbody > tr > td { padding: 0; }
  .sky-ds body .sky-mobile-list tbody td[data-sky-label]::before { content: attr(data-sky-label); color: var(--sky-text-2); font-weight: var(--sky-weight-regular); }
  .sky-ds body .sky-mobile-list tbody td:first-child::before,
  .sky-ds body .sky-mobile-list tbody td:last-child:has(.btn)::before { display: none; }
  .sky-ds body .sky-mobile-list tbody td:has(>.badge) { grid-column: 2; grid-row: 1; align-self: start; justify-content: end; }
  .sky-ds body .sky-mobile-list tbody td:has(>.badge)::before { display: none; }
  .sky-ds body .sky-mobile-list tbody td:last-child:has(.btn) { justify-content: end; }
  .sky-ds body .sky-mobile-list tbody td[colspan] { grid-column: 1 / -1; display: block; }
  .sky-ds body .sky-mobile-list .sky-empty { width: 100%; }
  .sky-ds body .sky-mobile-list .sky-invite-link { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
  .sky-ds body.sky-page-ticket .sky-mobile-list tbody td:first-child { grid-column: 1 / -1; grid-row: 2; color: var(--sky-text-2); font-size: var(--sky-font-sm); font-weight: var(--sky-weight-regular); }
  .sky-ds body.sky-page-ticket .sky-mobile-list tbody td:first-child::before { display: inline; }
  .sky-ds body.sky-page-ticket .sky-mobile-list tbody td:nth-child(2) { grid-column: 1; grid-row: 1; font-size: var(--sky-font-md); font-weight: var(--sky-weight-semibold); }
  .sky-ds body.sky-page-ticket .sky-mobile-list tbody td:nth-child(2)::before { display: none; }
}
@media (max-width: 1199.98px) {
  .sky-ds body.sky-page-order .page-header .row > .col { flex-basis: 100%; }
  .sky-ds body.sky-page-order .page-header .col-auto { display: flex; flex-wrap: wrap; gap: var(--sky-space-2); max-width: 100%; margin-block-start: var(--sky-space-3); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-ds body *, .sky-ds body *::before, .sky-ds body *::after {
    /* Override vendor and historical transforms for the explicit accessibility preference. */
    transition-property: color, background-color, border-color, opacity !important;
    /* Override nonessential legacy animations; native busy semantics remain visible. */
    animation: none !important;
    transition-duration: var(--sky-duration-reduced);
  }
}