#ubacare-maintenance { padding: 24px 12px; }
    #ubacare-maintenance * { box-sizing: border-box; }
    #ubacare-maintenance .maintenance-surface {
      --maint-bg: var(--ub-neutral-surface, light-dark(#ffffff, #201d2c));
      --maint-text: var(--ub-neutral-text, light-dark(#2c2444, #f1edf9));
      --maint-muted: var(--ub-neutral-muted, light-dark(#665e77, #c2bace));
      --maint-violet: light-dark(#7851ba, #b093ea);
      --maint-soft: light-dark(#f3eefb, #31283e);
      --maint-line: light-dark(#e7dff1, #4e405f);
      --maint-steel: light-dark(#655875, #b8a7cb);
      --maint-yellow: light-dark(#f2b95c, #edbc73);
      --maint-ink: light-dark(#47324f, #281933);
      --cycle: 10s;
      max-width: 600px; margin: 0 auto; padding: 30px 28px 24px;
      border-radius: 18px; background: var(--maint-bg); color: var(--maint-text);
      font-family: "Segoe UI", Arial, sans-serif; text-align: center;
      box-shadow: 0 8px 32px light-dark(#3823430a, #00000020);
    }
    #ubacare-maintenance .maintenance-surface button { font: inherit; }
    #ubacare-maintenance .eyebrow { margin: 0; color: var(--maint-muted); font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
    #ubacare-maintenance .scene { position: relative; container-type: inline-size; width: 100%; max-width: 480px; aspect-ratio: 480 / 250; margin: 0 auto 4px; overflow: hidden; }
    #ubacare-maintenance .scene div { position: absolute; }
    #ubacare-maintenance .backdrop { width: 59%; height: 84%; left: 27%; top: 10%; border-radius: 50% 50% 12% 12%; background: var(--maint-soft); }
    #ubacare-maintenance .ground { height: .55cqw; width: 90%; left: 5%; bottom: 10%; background: var(--maint-line); border-radius: 1cqw; }
    #ubacare-maintenance .tower { left: 19%; top: 29%; width: 5%; height: 60%; border: .7cqw solid var(--maint-violet); background: repeating-linear-gradient(45deg, transparent 0 2.2cqw, var(--maint-violet) 2.25cqw 2.65cqw, transparent 2.7cqw 4.9cqw); }
    #ubacare-maintenance .mast { left: 21%; top: 8%; width: .8%; height: 21%; background: var(--maint-violet); border-radius: .5cqw; }
    #ubacare-maintenance .stay { height: .4cqw; background: var(--maint-steel); transform-origin: left center; }
    #ubacare-maintenance .stay.front { left: 21.5%; top: 9%; width: 61%; transform: rotate(10deg); }
    #ubacare-maintenance .stay.back { left: 9%; top: 27%; width: 15%; transform: rotate(-41deg); }
    #ubacare-maintenance .jib { left: 8%; top: 27%; width: 77%; height: 5%; border: .6cqw solid var(--maint-violet); background: repeating-linear-gradient(-45deg, transparent 0 2cqw, var(--maint-violet) 2.05cqw 2.4cqw, transparent 2.45cqw 4.5cqw); border-radius: .45cqw; }
    #ubacare-maintenance .counterweight { left: 8.5%; top: 31%; width: 9%; height: 8%; background: var(--maint-violet); border-radius: 0 0 1cqw 1cqw; }
    #ubacare-maintenance .cab { left: 18%; top: 25%; width: 9%; height: 12%; border: .6cqw solid var(--maint-violet); background: var(--maint-yellow); border-radius: 1.5cqw .8cqw .8cqw .8cqw; }
    #ubacare-maintenance .cab::after { content: ""; position: absolute; inset: .7cqw .7cqw 1.6cqw; border-radius: .6cqw; background: var(--maint-ink); }
    #ubacare-maintenance .foot { left: 15%; top: 85%; width: 13%; height: 5%; background: var(--maint-violet); border-radius: 1cqw 1cqw .4cqw .4cqw; }
    #ubacare-maintenance .rig { left: 66%; top: 30%; width: 2.3%; height: 47%; animation: maint-travel var(--cycle) infinite; }
    #ubacare-maintenance .trolley { width: 100%; height: 2cqw; top: -.3cqw; border-radius: .5cqw; background: var(--maint-steel); }
    #ubacare-maintenance .rope { left: 43%; width: .45cqw; height: 18.3cqw; background: var(--maint-steel); transform-origin: top; animation: maint-lower var(--cycle) infinite; }
    #ubacare-maintenance .hook { width: 2.3cqw; height: 2.7cqw; left: .1cqw; top: 17.7cqw; border: .55cqw solid var(--maint-steel); border-top: 0; border-radius: 0 0 1.5cqw 1.5cqw; animation: maint-hook var(--cycle) infinite; }
    #ubacare-maintenance .word { top: 68%; font-size: 9cqw; line-height: 1; letter-spacing: -.35cqw; font-weight: 800; color: var(--maint-violet); }
    #ubacare-maintenance .built { left: 33%; }
    #ubacare-maintenance .piece { left: 52.5%; transform-origin: 50% -2cqw; animation: maint-place var(--cycle) infinite; }
    #ubacare-maintenance .sling { width: 12cqw; height: 3cqw; left: 5.5cqw; top: -3.4cqw; border-left: .45cqw solid var(--maint-steel); border-right: .45cqw solid var(--maint-steel); border-top: .45cqw solid var(--maint-steel); border-radius: 45% 45% 0 0; animation: maint-unhook var(--cycle) infinite; }
    #ubacare-maintenance .foundation { left: 32%; top: 86%; width: 52%; height: 2.5%; background: var(--maint-line); border-radius: .6cqw; }
    #ubacare-maintenance .cone { left: 85%; top: 77%; width: 4%; height: 11%; background: linear-gradient(to bottom, var(--maint-yellow) 0 35%, var(--maint-bg) 35% 52%, var(--maint-yellow) 52%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); }
    #ubacare-maintenance .cone-base { left: 84%; top: 88%; width: 6%; height: 1.5%; background: var(--maint-steel); border-radius: 1cqw; }
    #ubacare-maintenance h1 { font-size: clamp(24px, 4vw, 30px); line-height: 1.2; letter-spacing: -.7px; margin: 6px 0 12px; color: var(--maint-text); font-weight: 650; }
    #ubacare-maintenance .message { font-size: 15px; line-height: 1.6; color: var(--maint-muted); max-width: 380px; margin: 0 auto; }
    #ubacare-maintenance .timing { margin: 22px auto 0; font-size: 14px; line-height: 1.7; }
    #ubacare-maintenance .timing span { display: block; color: var(--maint-muted); font-size: 13px; }
    #ubacare-maintenance .actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; }
    #ubacare-maintenance .bypass { color: light-dark(#ffffff, #20132d); background: var(--maint-violet); border: 0; border-radius: 7px; padding: 12px 20px; min-height: 44px; font-weight: 600; max-width: 100%; }
    #ubacare-maintenance .motion { color: var(--maint-muted); background: transparent; border: 0; padding: 10px; min-height: 44px; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
    #ubacare-maintenance [hidden] { display: none !important; }
    #ubacare-maintenance .is-paused .scene * { animation-play-state: paused; }
    @keyframes maint-travel {
      0%, 5% { transform: translateX(10cqw); opacity: 1; }
      22%, 55% { transform: translateX(0); opacity: 1; }
      76%, 94% { transform: translateX(-28cqw); opacity: 1; }
      97% { transform: translateX(-28cqw); opacity: 0; }
      98% { transform: translateX(10cqw); opacity: 0; }
      100% { transform: translateX(10cqw); opacity: 1; }
    }
    @keyframes maint-lower { 0%, 22%, 73%, 100% { transform: scaleY(.19); } 46%, 55% { transform: scaleY(1); } }
    @keyframes maint-hook { 0%, 22%, 73%, 100% { transform: translateY(-14.8cqw); } 46%, 55% { transform: translateY(0); } }
    @keyframes maint-place {
      0%, 5% { transform: translate(10cqw, -14.8cqw) rotate(-3deg); opacity: 1; }
      22% { transform: translate(0, -14.8cqw) rotate(2deg); opacity: 1; }
      46% { transform: translate(0, 0) rotate(0); opacity: 1; }
      49% { transform: translate(0, .5cqw) rotate(0); opacity: 1; }
      53%, 90% { transform: translate(0, 0) rotate(0); opacity: 1; }
      97% { transform: translate(0, 0) rotate(0); opacity: 0; }
      98% { transform: translate(10cqw, -14.8cqw) rotate(-3deg); opacity: 0; }
      100% { transform: translate(10cqw, -14.8cqw) rotate(-3deg); opacity: 1; }
    }
    @keyframes maint-unhook { 0%, 48%, 100% { opacity: 1; } 54%, 97% { opacity: 0; } }
    @media (prefers-reduced-motion: reduce) {
      #ubacare-maintenance .scene * { animation: none !important; }
      #ubacare-maintenance .rig { transform: translateX(-28cqw); }
      #ubacare-maintenance .rope { transform: scaleY(.19); }
      #ubacare-maintenance .hook { transform: translateY(-14.8cqw); }
      #ubacare-maintenance .sling { opacity: 0; }
    }
    @media (max-width: 420px) {
      #ubacare-maintenance { padding: 12px 4px; }
      #ubacare-maintenance .maintenance-surface { padding: 26px 18px 18px; }
    }

.maintenance-page { margin: 0; min-height: 100vh; background: var(--bs-body-bg, #f7f5fa); }
#ubacare-maintenance { display: grid; min-height: 100vh; align-items: center; box-sizing: border-box; }
#ubacare-maintenance .maintenance-surface { width: 100%; }
#ubacare-maintenance .timing p { margin: 0 0 4px; }
#ubacare-maintenance a { color: var(--maint-violet); text-underline-offset: 3px; }
#ubacare-maintenance .bypass { display: inline-block; color: light-dark(#fff, #20132d); text-decoration: none; cursor: pointer; }
#ubacare-maintenance .maintenance-link { color: var(--maint-violet); border: 0; background: none; text-decoration: underline; min-height: 44px; cursor: pointer; }
#ubacare-maintenance :is(a, button):focus-visible { outline: 3px solid var(--ub-focus, #47324f); outline-offset: 4px; }
#ubacare-maintenance button:disabled { opacity: .65; cursor: wait; }
.maintenance-banner { position: sticky; top: var(--maintenance-recovery-offset, 0px); z-index: 1046; padding: 12px 20px; font: 14px/1.6 "Segoe UI", Arial, sans-serif; background: var(--ub-amber-surface, #fff3d6); color: var(--ub-amber-text, #5b3d0e); border-bottom: 1px solid var(--ub-amber-border, #d9af58); }
.maintenance-banner a { display: inline-block; margin-left: 8px; color: inherit; text-decoration: underline; font-weight: 600; }
.maintenance-banner p { margin: 6px 0 0; font-weight: 600; }
.maintenance-banner[hidden], .maintenance-banner [hidden], .maintenance-management [hidden] { display: none !important; }
#maintenance-banner ~ .cstm-warning-outer { top: 0; }
body.primary-navigation-shell,
body.primary-navigation-shell.cstm-warn { --primary-navigation-shell-offset: calc(var(--primary-navigation-height) + var(--maintenance-banner-height, 0px) + var(--maintenance-recovery-offset, 0px)); }
body.primary-navigation-shell .primary-navigation,
body.primary-navigation-shell.cstm-warn .primary-navigation,
body.legacy-side-menu-shell .main-nav--bg { top: calc(var(--maintenance-banner-height, 0px) + var(--maintenance-recovery-offset, 0px)); }
body.legacy-side-menu-shell .sidebar { top: var(--maintenance-banner-height, 0px); height: calc(100vh - var(--maintenance-banner-height, 0px)); min-height: 0; }
.maintenance-management { max-width: 960px; }
.maintenance-error { color: var(--ub-red-text, #a12836); }
.maintenance-confirmation { padding: 12px; background: var(--ub-violet-surface, #f3eefb); border-radius: 6px; }
@media (max-width: 420px) { .maintenance-banner { padding: 10px 12px; } }