html,
body {
  margin: 0;
  min-height: 100%;
  background: #eceff3;
}
#root {
  min-height: 100vh;
}

.rk-boot {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  background: #eceff3;
  color: #0f172a;
  font-family:
    'Inter',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.rk-boot *,
.rk-boot *::before,
.rk-boot *::after {
  box-sizing: border-box;
}

/*
 * Static boot follows the application-wide 300/500 contract. The shell
 * surfaces reserve geometry immediately; only loader-shaped content is
 * revealed after the threshold.
 */
.rk-boot-sidebar > *,
.rk-boot-content > *,
.rk-boot-bottom {
  opacity: 0;
  animation: rk-boot-indicator-reveal 1ms step-end 300ms forwards;
}

@keyframes rk-boot-indicator-reveal {
  to {
    opacity: 1;
  }
}

.rk-boot-sidebar {
  width: 320px;
  flex: 0 0 320px;
  min-height: 100vh;
  padding: 22px;
  border-right: 1px solid #dde2e8;
  background: #fff;
}

.rk-boot-line,
.rk-boot-block,
.rk-boot-nav span,
.rk-boot-cards span {
  display: block;
  border-radius: 10px;
  background: #e6eaee;
}

.rk-boot-line--button {
  width: 118px;
  height: 44px;
}

.rk-boot-block--address {
  width: 100%;
  height: 74px;
  margin-top: 12px;
  border-radius: 14px;
}

.rk-boot-nav {
  display: grid;
  gap: 18px;
  margin-top: 44px;
}

.rk-boot-nav span {
  width: 72%;
  height: 18px;
}

.rk-boot-main {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.rk-boot-mobile-head,
.rk-boot-bottom {
  display: none;
}

.rk-boot-content {
  padding: 34px 40px;
}

.rk-boot-line--title {
  width: 220px;
  height: 22px;
}

.rk-boot-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.rk-boot-requests-content,
.rk-boot-profile-content {
  display: none;
}

.rk-boot-route--profile .rk-boot-content > .rk-boot-line--title,
.rk-boot-route--profile .rk-boot-content > .rk-boot-cards {
  display: none;
}

.rk-boot-route--profile .rk-boot-profile-content {
  display: block;
}

.rk-boot-route--profile .rk-boot-content {
  padding: 0 40px 56px;
}

.rk-boot-profile-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0 16px;
}

.rk-boot-profile-avatar,
.rk-boot-profile-name,
.rk-boot-profile-role,
.rk-boot-profile-actions > span,
.rk-boot-profile-column > span {
  display: block;
  border-radius: 8px;
  background: #e6eaee;
}

.rk-boot-profile-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
}

.rk-boot-profile-name {
  width: min(220px, 28vw);
  height: 18px;
}

.rk-boot-profile-role {
  width: 110px;
  height: 24px;
}

.rk-boot-profile-actions {
  display: none;
}

.rk-boot-profile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.rk-boot-profile-column {
  display: grid;
  align-content: start;
  gap: 16px;
}

.rk-boot-profile-column > span {
  min-height: 190px;
  border: 1px solid #e6e9ee;
  border-radius: 16px;
  background: #fff;
}

.rk-boot-profile-column > span:nth-child(2) {
  min-height: 156px;
}

.rk-boot-profile-column > span:nth-child(3) {
  min-height: 180px;
}

.rk-boot-cards span {
  min-height: 184px;
  border: 1px solid #e0e5ea;
  background: #f7f8fa;
}

@media (max-width: 1023px) {
  html,
  body,
  #root,
  .rk-boot,
  .rk-boot-main {
    background: #fff;
  }

  .rk-boot-sidebar {
    display: none;
  }

  .rk-boot-mobile-head {
    --rk-boot-unit: clamp(0.888889px, 0.277778vw, 1.194444px);
    --rk-boot-row: calc(var(--rk-boot-unit) * 40);
    --rk-boot-inset: calc(var(--rk-boot-unit) * 12);
    --rk-boot-gap: calc(var(--rk-boot-unit) * 12);
    --rk-boot-radius: calc(var(--rk-boot-unit) * 16);
    position: relative;
    display: flex;
    min-height: calc(
      env(safe-area-inset-top, 0px) + var(--rk-boot-row) + (var(--rk-boot-inset) * 2)
    );
    flex-direction: column;
    gap: var(--rk-boot-gap);
    padding:
      calc(env(safe-area-inset-top, 0px) + var(--rk-boot-inset))
      var(--rk-boot-inset)
      var(--rk-boot-inset);
    border-radius: 0 0 var(--rk-boot-radius) var(--rk-boot-radius);
    background: #0a325b;
    box-shadow: none;
    overflow: hidden;
  }

  .rk-boot-mobile-head-row {
    display: grid;
    width: 100%;
    height: var(--rk-boot-row);
    min-height: var(--rk-boot-row);
    align-items: center;
    gap: 8px;
  }

  .rk-boot-mobile-head-row--main {
    grid-template-columns: minmax(0, 1fr) var(--rk-boot-row) var(--rk-boot-row);
  }

  .rk-boot-mobile-head-row--page {
    grid-template-columns: var(--rk-boot-row) minmax(0, 1fr) 0;
    gap: var(--rk-boot-gap);
  }

  .rk-boot-mobile-head-row--profile {
    display: none;
    height: 51px;
    min-height: 51px;
    grid-template-columns: 51px minmax(0, 1fr);
    gap: 16px;
  }

  .rk-boot-mobile-address,
  .rk-boot-mobile-control,
  .rk-boot-mobile-avatar,
  .rk-boot-mobile-copy b {
    display: block;
    background: rgba(255, 255, 255, 0.22);
  }

  .rk-boot-mobile-address {
    display: flex;
    min-width: 0;
    height: var(--rk-boot-row);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: calc(var(--rk-boot-unit) * 12);
    background: rgba(255, 255, 255, 0.4);
  }

  .rk-boot-mobile-home {
    display: block;
    width: var(--rk-boot-row);
    height: var(--rk-boot-row);
    flex: 0 0 var(--rk-boot-row);
  }

  .rk-boot-mobile-home::before {
    content: '';
    display: block;
    width: calc(var(--rk-boot-unit) * 18);
    height: calc(var(--rk-boot-unit) * 18);
    margin: calc((var(--rk-boot-row) - (var(--rk-boot-unit) * 18)) / 2);
    border: calc(var(--rk-boot-unit) * 2) solid rgba(255, 255, 255, 0.62);
    border-radius: calc(var(--rk-boot-unit) * 4);
  }

  .rk-boot-mobile-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--rk-boot-unit) * 5);
    padding-right: calc(var(--rk-boot-unit) * 10);
  }

  .rk-boot-mobile-copy b {
    width: 42%;
    height: calc(var(--rk-boot-unit) * 7);
    border-radius: 999px;
  }

  .rk-boot-mobile-copy b + b {
    width: 72%;
  }

  .rk-boot-mobile-control {
    width: var(--rk-boot-row);
    height: var(--rk-boot-row);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: calc(var(--rk-boot-unit) * 12);
  }

  .rk-boot-mobile-control--warning {
    background: rgba(246, 175, 61, 0.72);
  }

  .rk-boot-mobile-search {
    display: none;
    width: 100%;
    height: var(--rk-boot-row);
    align-items: center;
    gap: var(--rk-boot-gap);
    padding: 0 calc(var(--rk-boot-unit) * 16);
    border-radius: calc(var(--rk-boot-unit) * 12);
    background: #fff;
  }

  .rk-boot-mobile-search i {
    display: block;
    width: calc(var(--rk-boot-unit) * 14);
    height: calc(var(--rk-boot-unit) * 14);
    flex: 0 0 calc(var(--rk-boot-unit) * 14);
    border: calc(var(--rk-boot-unit) * 2) solid #c6cbd1;
    border-radius: 50%;
  }

  .rk-boot-mobile-search b {
    display: block;
    width: 58%;
    height: calc(var(--rk-boot-unit) * 8);
    border-radius: 999px;
    background: #e3e7eb;
  }

  .rk-boot-route--main .rk-boot-mobile-head-row--page,
  .rk-boot-route--profile .rk-boot-mobile-head-row--page {
    display: none;
  }

  html:not(.rk-boot-route--main) .rk-boot-mobile-head-row--main {
    display: none;
  }

  .rk-boot-route--profile .rk-boot-mobile-head-row--profile {
    display: grid;
  }

  .rk-boot-route--primary .rk-boot-mobile-search {
    display: flex;
  }

  .rk-boot-route--main .rk-boot-mobile-head {
    padding-bottom: var(--rk-boot-radius);
  }

  .rk-boot-route--profile .rk-boot-mobile-head {
    min-height: calc(env(safe-area-inset-top, 0px) + 51px + (var(--rk-boot-inset) * 2));
  }

  .rk-boot-mobile-head-row--page > .rk-boot-mobile-copy b:first-child {
    width: min(68%, calc(var(--rk-boot-unit) * 180));
    height: calc(var(--rk-boot-unit) * 10);
  }

  .rk-boot-mobile-head-row--page > .rk-boot-mobile-copy b:last-child {
    width: min(54%, calc(var(--rk-boot-unit) * 142));
  }

  .rk-boot-mobile-avatar {
    width: 51px;
    height: 51px;
    border-radius: 50%;
  }

  .rk-boot-mobile-head-row--profile > .rk-boot-mobile-copy b:first-child {
    width: min(72%, 220px);
    height: calc(var(--rk-boot-unit) * 11);
  }

  .rk-boot-mobile-head-row--profile > .rk-boot-mobile-copy b:last-child {
    width: min(42%, 116px);
    height: calc(var(--rk-boot-unit) * 8);
  }

  .rk-boot-route--requests .rk-boot-content > .rk-boot-line--title,
  .rk-boot-route--requests .rk-boot-content > .rk-boot-cards {
    display: none;
  }

  .rk-boot-route--requests .rk-boot-content {
    padding: 2px 12px 154px;
  }

  .rk-boot-route--requests .rk-boot-requests-content {
    display: block;
  }

  .rk-boot-requests-segments {
    height: 45px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 2px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .rk-boot-requests-segments > span:first-child {
    border: 1px solid #d2eaf3;
    border-radius: 999px;
    background: #e7f2f8;
  }

  .rk-boot-requests-segments > span::before,
  .rk-boot-requests-segments > span::after,
  .rk-boot-requests-chips > span,
  .rk-boot-requests-group-title,
  .rk-boot-requests-list > span::before,
  .rk-boot-requests-list > span::after {
    content: '';
    display: block;
    border-radius: 5px;
    background: #e6eaee;
  }

  .rk-boot-requests-segments > span {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 4px;
  }

  .rk-boot-requests-segments > span::before {
    width: 74px;
    height: 12px;
  }

  .rk-boot-requests-segments > span::after {
    width: 22px;
    height: 8px;
  }

  .rk-boot-requests-chips {
    height: 32px;
    display: flex;
    gap: 8px;
    margin: 12px -12px 10px;
    padding: 0 12px;
    overflow: hidden;
  }

  .rk-boot-requests-chips > span {
    width: 76px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 8px;
  }

  .rk-boot-requests-chips > span:nth-child(2) {
    width: 94px;
  }

  .rk-boot-requests-chips > span:nth-child(3) {
    width: 108px;
  }

  .rk-boot-requests-group-title {
    width: 64px;
    height: 12px;
    margin-bottom: 8px;
  }

  .rk-boot-requests-list {
    display: grid;
    gap: 8px;
  }

  .rk-boot-requests-list > span {
    position: relative;
    display: block;
    min-height: 104px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.1);
  }

  .rk-boot-requests-list > span::before {
    position: absolute;
    top: 37px;
    left: 16px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
  }

  .rk-boot-requests-list > span::after {
    position: absolute;
    top: 28px;
    right: 52px;
    left: 54px;
    height: 14px;
    box-shadow:
      0 22px 0 -2px #e6eaee,
      0 41px 0 -2px #e6eaee;
  }

  .rk-boot-route--profile .rk-boot-content {
    padding: 8px 0 154px;
  }

  .rk-boot-profile-hero {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: 44px 30px 40px;
    column-gap: 12px;
    row-gap: 10px;
    margin: 0 20px 12px;
    padding: 0;
  }

  .rk-boot-profile-avatar {
    grid-row: 1 / span 2;
    width: 84px;
    height: 84px;
    flex-basis: 84px;
  }

  .rk-boot-profile-name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    width: min(220px, 60%);
    height: 20px;
  }

  .rk-boot-profile-role {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    width: 110px;
    height: 24px;
    border-radius: 999px;
  }

  .rk-boot-profile-actions {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .rk-boot-profile-actions > span {
    height: 40px;
    border-radius: 12px;
  }

  .rk-boot-profile-grid {
    display: contents;
  }

  .rk-boot-profile-column {
    display: contents;
  }

  .rk-boot-profile-column > span {
    min-height: 176px;
    margin: 0 20px 16px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
  }

  .rk-boot-profile-column:first-child > span:first-child {
    min-height: 150px;
  }

  .rk-boot-profile-column > span:nth-child(2) {
    min-height: 156px;
  }

  .rk-boot-content {
    padding: 26px 20px 104px;
  }

  .rk-boot-line--title {
    width: 54%;
    height: 20px;
  }

  .rk-boot-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  .rk-boot-cards span {
    min-height: 168px;
    border-radius: 24px;
  }

  .rk-boot-bottom {
    position: fixed;
    z-index: 1;
    left: 50%;
    right: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: block;
    width: min(328px, calc(100vw - 32px));
    height: 58px;
    border: 1px solid #dde2e8;
    border-radius: 29px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    transform: translateX(-50%);
  }
}