:root {
  --nautico-midnight: #07111f;
  --nautico-ocean: #102033;
  --nautico-ivory: #f7f4ee;
  --nautico-mist: #eaf0f4;
  --nautico-ink: #0b1320;
  --nautico-steel: #556273;
  --nautico-aqua: #43c6be;
  --nautico-blue: #4d7cfe;
  --nautico-soft-shadow: 0 18px 55px rgba(7, 17, 31, 0.1);
}

.nautico-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--nautico-midnight);
  line-height: 1;
}

.nautico-logo--inverse {
  color: white;
}

.nautico-logo__mark {
  width: 2.45rem;
  height: 2.3rem;
  -o-object-fit: contain;
     object-fit: contain;
  flex: none;
}

.nautico-logo__word {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.nautico-hero {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(67, 198, 190, 0.2),
      transparent 28rem
    ),
    radial-gradient(
      circle at 85% 8%,
      rgba(77, 124, 254, 0.18),
      transparent 26rem
    ),
    linear-gradient(135deg, #07111f 0%, #0b1d31 52%, #102a43 100%);
}

.nautico-route-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
          mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.nautico-glass {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
}

.nautico-card {
  border: 1px solid rgba(11, 19, 32, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--nautico-soft-shadow);
}

.nautico-shell-header {
  border-bottom: 1px solid rgba(11, 19, 32, 0.07);
  background: rgba(251, 250, 247, 0.9);
  backdrop-filter: blur(18px);
}

.nautico-send-stage {
  min-height: calc(100vh - 74px);
  background:
    radial-gradient(
      circle at 5% 5%,
      rgba(67, 198, 190, 0.12),
      transparent 28rem
    ),
    radial-gradient(
      circle at 95% 12%,
      rgba(77, 124, 254, 0.1),
      transparent 30rem
    ),
    #fbfaf7;
}

.nautico-eyebrow {
  color: var(--nautico-aqua);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.nautico-recipient-stage {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(67, 198, 190, 0.11),
      transparent 26rem
    ),
    linear-gradient(180deg, #fbfaf7 0%, #f2f6f8 100%);
}

@media (max-width: 640px) {
  .nautico-logo__mark {
    width: 2.1rem;
    height: 2rem;
  }
  .nautico-logo__word {
    font-size: 1.12rem;
  }
}

.nautico-success-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 19, 32, 0.08);
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(67, 198, 190, 0.16),
      transparent 24rem
    ),
    linear-gradient(145deg, #fff 0%, #f7faf9 100%);
  box-shadow: 0 24px 80px rgba(7, 17, 31, 0.12);
}
.nautico-success-orbit {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  place-items: center;
  border-radius: 999px;
  background: rgba(67, 198, 190, 0.14);
  box-shadow:
    inset 0 0 0 1px rgba(67, 198, 190, 0.35),
    0 12px 35px rgba(67, 198, 190, 0.18);
}
.nautico-success-orbit span {
  font-size: 1.8rem;
  font-weight: 900;
  color: #148d86;
}
.nautico-journey__step {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 1px solid rgba(11, 19, 32, 0.1);
  padding-top: 0.75rem;
  color: var(--nautico-steel);
  font-size: 0.78rem;
  font-weight: 700;
}
.nautico-journey__step b {
  display: grid;
  width: 1.65rem;
  height: 1.65rem;
  place-items: center;
  border-radius: 999px;
  background: #eaf0f4;
  color: #556273;
}
.nautico-journey__step.is-complete b {
  background: var(--nautico-aqua);
  color: var(--nautico-midnight);
}
.nautico-protection-panel {
  background: linear-gradient(180deg, #fff, #f8fbfb);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
}
.nautico-protection-panel > button {
  min-height: 3.5rem;
}
.nautico-recipient-hero {
  border: 1px solid rgba(11, 19, 32, 0.08);
  background: #fff;
  box-shadow: 0 26px 80px rgba(7, 17, 31, 0.13);
}
.nautico-recipient-hero__top {
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(67, 198, 190, 0.28),
      transparent 22rem
    ),
    linear-gradient(135deg, #07111f, #12314d);
}
.nautico-recipient-stat {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  padding: 0.45rem 0.7rem;
  backdrop-filter: blur(10px);
}
.nautico-detail-stage {
  min-height: calc(100vh - 74px);
  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(67, 198, 190, 0.1),
      transparent 26rem
    ),
    #fbfaf7;
}
.nautico-detail-hero {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(67, 198, 190, 0.24),
      transparent 24rem
    ),
    linear-gradient(135deg, #07111f, #102a43);
  box-shadow: 0 24px 70px rgba(7, 17, 31, 0.18);
}
.nautico-timeline__item {
  position: relative;
  margin-left: 0.45rem;
  border-left: 1px solid rgba(67, 198, 190, 0.34);
  padding: 0 0 1.25rem 1.25rem;
}
.nautico-timeline__item::before {
  content: '';
  position: absolute;
  left: -0.38rem;
  top: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  background: var(--nautico-aqua);
  box-shadow: 0 0 0 5px rgba(67, 198, 190, 0.12);
}
.nautico-timeline__item:last-child {
  padding-bottom: 0.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  .nautico-success-orbit {
    animation: nautico-arrive 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes nautico-arrive {
    from {
      opacity: 0;
      transform: scale(0.82) translateY(6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.nautico-library-stage {
  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(67, 198, 190, 0.11),
      transparent 25rem
    ),
    radial-gradient(
      circle at 96% 10%,
      rgba(77, 124, 254, 0.08),
      transparent 26rem
    ),
    #fbfaf7;
}

.nautico-library-hero {
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(67, 198, 190, 0.24),
      transparent 24rem
    ),
    linear-gradient(135deg, #07111f, #102a43);
  box-shadow: 0 24px 70px rgba(7, 17, 31, 0.16);
}

.nautico-transfer-card {
  position: relative;
  overflow: hidden;
}

.nautico-transfer-card::after {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 9rem;
  height: 9rem;
  border-radius: 999px;
  background: rgba(67, 198, 190, 0.07);
  content: '';
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.nautico-transfer-card:hover::after {
  transform: scale(1.16);
}

.nautico-dropzone {
  position: relative;
  overflow: hidden;
}

.nautico-dropzone::after {
  position: absolute;
  inset: auto -4rem -5rem auto;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  background: rgba(67, 198, 190, 0.08);
  content: '';
  pointer-events: none;
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.nautico-dropzone.is-active::after {
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .nautico-library-hero {
    border-radius: 1.25rem;
  }

  .nautico-transfer-card {
    min-height: 215px;
  }
}

.nautico-notifications-stage {
  background:
    radial-gradient(
      circle at 4% 0%,
      rgba(67, 198, 190, 0.11),
      transparent 26rem
    ),
    radial-gradient(
      circle at 96% 12%,
      rgba(77, 124, 254, 0.08),
      transparent 28rem
    ),
    #fbfaf7;
}
.nautico-notifications-hero {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(67, 198, 190, 0.25),
      transparent 24rem
    ),
    linear-gradient(135deg, #07111f, #102a43);
  box-shadow: 0 24px 70px rgba(7, 17, 31, 0.16);
}
.nautico-claim-stage {
  background:
    radial-gradient(
      circle at 8% 4%,
      rgba(67, 198, 190, 0.13),
      transparent 25rem
    ),
    radial-gradient(
      circle at 94% 10%,
      rgba(77, 124, 254, 0.09),
      transparent 28rem
    ),
    #fbfaf7;
}
.nautico-claim-aside {
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(67, 198, 190, 0.28),
      transparent 22rem
    ),
    linear-gradient(145deg, #07111f, #12314d);
}
.nautico-requests-stage {
  min-height: calc(100vh - 74px);
  background:
    radial-gradient(
      circle at 5% 0%,
      rgba(67, 198, 190, 0.1),
      transparent 26rem
    ),
    #fbfaf7;
}
.nautico-request-card {
  border: 1px solid rgba(11, 19, 32, 0.08);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 45px rgba(7, 17, 31, 0.07);
}
.nautico-public-request-stage {
  background:
    radial-gradient(
      circle at 7% 3%,
      rgba(67, 198, 190, 0.13),
      transparent 25rem
    ),
    radial-gradient(
      circle at 94% 8%,
      rgba(77, 124, 254, 0.08),
      transparent 28rem
    ),
    #fbfaf7;
}
.nautico-public-request-aside {
  background:
    radial-gradient(
      circle at 88% 0%,
      rgba(67, 198, 190, 0.28),
      transparent 23rem
    ),
    linear-gradient(145deg, #07111f, #12314d);
}
.nautico-public-upload {
  background: linear-gradient(
    180deg,
    rgba(234, 240, 244, 0.58),
    rgba(255, 255, 255, 0.92)
  );
}
.progress-circle {
  overflow: hidden;
}
.progress-circle.indeterminate {
    animation: spinner-spin 0.8s ease infinite;
  }
.progress-circle .progress-circle-track {
    height: 100%;
    stroke: rgb(var(--be-fg-base) / var(--be-divider-opacity));
  }
.progress-circle .progress-circle-fill {
    height: 100%;
    stroke: rgb(var(--progress-circle-fill-color, var(--be-primary)));
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
  }

@keyframes spinner-spin {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.be-top-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: rgb(var(--be-primary));
  z-index: 2147483647;
  transition:
    width 300ms ease-out,
    opacity 150ms 150ms ease-in;
  transform: translate3d(0, 0, 0);
}
.skeleton:before {
  content: '\00a0';
}

.skeleton-wave {
  animation: skeleton-wave 2s ease-in-out infinite;
  background-size: 200px 100%;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0)
  );
}

.dark .skeleton-wave {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0)
  );
}

.skeleton-pulsate {
  animation: skeleton-pulsate 1.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes skeleton-wave {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

@keyframes skeleton-pulsate {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}
.dashboard-grid {
  display: grid;
  grid-template-areas:
    'navbar navbar navbar navbar navbar'
    'sidenav-left sidenav-left-2 sidenav-left-3 header header'
    'sidenav-left sidenav-left-2 sidenav-left-3 content sidenav-right'
    'footer footer footer footer footer';
  grid-template-rows: auto auto 1fr;
  grid-template-columns: auto auto auto 1fr auto;
}

.dashboard-grid-content {
  grid-area: content;
}

.dashboard-grid-header {
  grid-area: header;
}

.dashboard-grid-navbar {
  grid-area: navbar;
}

.dashboard-grid-sidenav-left {
  grid-area: sidenav-left;
}

.dashboard-grid-sidenav-left-2 {
  grid-area: sidenav-left-2;
}

.dashboard-grid-sidenav-left-3 {
  grid-area: sidenav-left-3;
}

.dashboard-grid-sidenav-right {
  grid-area: sidenav-right;
}

.dashboard-grid-footer {
  grid-area: footer;
}

.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel {
  border-radius: var(--be-panel-radius, 0.25rem);
  border-width: 1px;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, [class*='rounded'][class*='border']) {
  border-color: rgba(113, 203, 214, 0.12);
}

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(.nautico-card, .nautico-request-card, section.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel) {
  border-color: var(--nautico-card-border);
}

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(section.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, .nautico-card, .nautico-request-card) {
  backdrop-filter: blur(14px);
}

@media (max-width: 767px) {

  html.nautico-futuristic-ui
    .nautico-pro-page
    :is(.nautico-card, .nautico-request-card, section.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel) {
    border-radius: 18px;
  }
}

.nautico-spaces-grid > div:last-child section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg
  :is(h1, h2, h3, h4, legend, label) {
  color: #10283a;
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg
  .text-muted {
  color: #526a79;
}

.nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
  box-shadow:
    0 14px 34px rgba(7, 35, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

.nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg :is(h1, h2, h3, h4, label) {
  color: #10283a;
}

.nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg .text-muted {
  color: #556e7d;
}

.nautico-kpi-grid
  ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg
  :is(.text-center, [class*='empty'])
  .text-muted,
.nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg :is(.text-center.text-muted) {
  color: #536c7c;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 768px) {

  .nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg {
    padding: 16px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {

  .nautico-kpi-grid ~ section.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg {
    padding: 14px;
    margin-top: 14px;
  }
}

.nautico-v2-module
  :is(button, a).dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel:not(.bg-primary):not(.bg-danger):not(.text-danger) {
  color: #18344c;
  background-color: #fff;
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: #163149;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

.nautico-v2-module
  :is(
    .rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: #163149;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}

.nautico-v2-module
  :is(
    .rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}


.nautico-v2-transfer-detail :is(section, .rounded-2xl,.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel) {
  border-color: #d8e4ec;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

.nautico-v2-spaces :is(form, section, .overflow-hidden.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg) {
  border-color: #d8e4ec;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--na-admin-border);
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg-elevated,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .bg-elevated.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel {
  background: #0d1b2b;

  background-image: none;

  border-color: rgba(132, 174, 203, 0.17);

  color: #f5f8fb;

  box-shadow: none;

  filter: none;

  backdrop-filter: none;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, .border-t, .border-b, .border-l, .border-r) {
  border-color: rgba(132, 174, 203, 0.16);
}

@media (min-width: 768px) and (max-width: 1023px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg-elevated {
    border-radius: 16px;
  }
}

@media (max-width: 767px) {

  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg-elevated {
    border-radius: 14px;

    box-shadow: none;
  }
}

@media (max-width: 389px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.bg-elevated {
    border-radius: 12px;
  }
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--account-border);
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel:not(.bg-primary):not(.text-danger):not([class*='danger']) {
  color: #ffffff;

  border-color: rgba(76, 190, 211, 0.34);

  background: #10233a;

  background-image: none;

  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel:not(.bg-primary):not(.text-danger):not(
      [class*='danger']
    ):hover {
    background: #16304b;

    border-color: rgba(76, 198, 216, 0.58);
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel, [class*='rounded-xl'], [class*='rounded-2xl']) {
  border-color: var(--nr-border);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-2xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-lg.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel {
  background: #0b1d30;

  border-color: rgba(107, 164, 201, 0.21);
  border: 1px solid rgba(100, 159, 197, 0.21);

  background: #0a1d30;

  background-image: none;

  color: #ffffff;

  box-shadow: none;
  border: 1px solid rgba(101, 159, 197, 0.22);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(12, 31, 49, 0.92),
    rgba(8, 23, 38, 0.88)
  );
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(10px);
  color: #fff;
}

.nautico-book-protect-page .nautico-r6f-subsection-firewall .rounded-xl.dashboard-grid:not(.dashboard-mobile-mode) .dashboard-rounded-panel.p-14 {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(126, 190, 237, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50));
}

.dashboard-grid .dashboard-rounded-panel {
  height: 100%;
  min-height: 0px;
  min-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-elevated) / var(--tw-bg-opacity, 1));
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(.bg,.dashboard-grid .dashboard-rounded-panel, [class~='bg-elevated']) {
  background: var(--na-admin-panel);

  background-image: none;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .rounded-panel.dashboard-grid .dashboard-rounded-panel,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .dashboard-grid .dashboard-rounded-panel.rounded-panel {
  background: #0d1b2b;

  background-image: none;

  border-color: rgba(132, 174, 203, 0.17);

  color: #f5f8fb;

  box-shadow: none;

  filter: none;

  backdrop-filter: none;
}

html.nautico-futuristic-ui body:has(a[href='#account-details']) .dashboard-grid .dashboard-rounded-panel {
  background: #0d1b2b;

  background-image: none;

  color: #f5f8fb;
}

@media (min-width: 768px) and (max-width: 1023px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.dashboard-grid .dashboard-rounded-panel {
    border-radius: 16px;
  }
}

@media (max-width: 767px) {

  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.dashboard-grid .dashboard-rounded-panel {
    border-radius: 14px;

    box-shadow: none;
  }
}

@media (max-width: 389px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.dashboard-grid .dashboard-rounded-panel {
    border-radius: 12px;
  }
}

html.nautico-futuristic-ui .nautico-account-settings-panel .dashboard-grid .dashboard-rounded-panel {
  background: var(--account-panel-soft);

  background-image: none;

  color: #f5f8fb;

  border-color: var(--account-border);

  box-shadow: none;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.bg,.dashboard-grid .dashboard-rounded-panel, .bg-white, .bg-gray-50, .bg-gray-100) {
  background: var(--nr-panel);

  background-image: none;

  color: #ffffff;
}

.dashboard-layout-with-spacing:not(.dashboard-mobile-mode) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-alt) / var(--tw-bg-opacity, 1));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-right: 0.5rem;
}


.nautico-r6f-advanced .dashboard-layout-with-spacing:not(.dashboard-mobile-mode) {
  color: rgba(222, 238, 246, 0.75);

  background: rgba(255, 255, 255, 0.006);

  border-color: transparent;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.022);
}


html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  .dashboard-layout-with-spacing:not(.dashboard-mobile-mode) {
  background: #0b3040;

  color: #ffffff;
}
.tiptap p.is-editor-empty:first-child::before {
  color: rgb(var(--be-fg-base) / 0.5);
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

.ProseMirror {
  min-height: inherit;
  outline-style: none;
}

.ProseMirror:focus-visible {
    outline: none;
  }

.ProseMirror img.ProseMirror-selectednode,
.ProseMirror iframe.ProseMirror-selectednode {
  border-radius: 0.25rem;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--be-primary-light) / var(--tw-ring-opacity, 1));
}

.prose [data-indent='1'] {
  padding-left: 1.25rem;
}
.prose [data-indent='2'] {
  padding-left: 2.5rem;
}
.prose [data-indent='3'] {
  padding-left: 3.75rem;
}
.prose [data-indent='4'] {
  padding-left: 5rem;
}
.prose [data-indent='5'] {
  padding-left: 6.25rem;
}
.prose [data-indent='6'] {
  padding-left: 8rem;
}

.prose iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.prose iframe {
  border: 1px solid rgba(120, 205, 236, 0.62);

  background: linear-gradient(
    135deg,
    #5667db 0%,
    #4a82df 50%,
    #69c9d5 100%
  );

  background-color: #4a82df;

  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.prose iframe:hover {
    background: linear-gradient(
      135deg,
      #6171e1 0%,
      #528be7 50%,
      #75d1da 100%
    );

    transform: translateY(-1px);
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button:not(.bg-primary):not(.prose iframe) {
  border-color: rgba(92, 184, 207, 0.3);

  color: #ffffff;
}

@media (max-width: 640px) {

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.prose iframe {
    min-height: 48px;
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.prose iframe {
  min-height: 50px;

  border: 1px solid rgba(121, 204, 235, 0.61);

  border-radius: 13px;

  background: linear-gradient(
    135deg,
    #5668db 0%,
    #4b82e0 49%,
    #6bcbd5 100%
  );

  background-color: #4b82e0;

  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  box-shadow: 0 9px 22px rgba(31, 88, 160, 0.18);
}

@media (max-width: 640px) {

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.prose iframe {
    min-height: 46px;
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.prose iframe {
  min-height: 56px;
  border: 1px solid rgba(141, 218, 240, 0.55);
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    #6572e8 0%,
    #5f86eb 48%,
    #8ad3df 100%
  );
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  box-shadow:
    0 12px 26px rgba(42, 98, 176, 0.22),
    0 0 18px rgba(96, 210, 232, 0.1);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.prose iframe:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(42, 98, 176, 0.28),
    0 0 22px rgba(96, 210, 232, 0.14);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button:not(.prose iframe):not(.bg-primary):not([class*='bg-primary']) {
  border: 1px solid rgba(91, 196, 216, 0.24);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(12, 36, 56, 0.9),
    rgba(8, 27, 43, 0.86)
  );
  color: #fff;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

@media (max-width: 768px) {

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.prose iframe {
    min-height: 52px;
  }
}

.info-block {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  max-width: 100%;
  overflow-wrap: break-word;
  border-radius: var(--be-panel-radius, 0.25rem);
  border-width: 1px;
  border-color: rgb(34 197 94 / 0.2);
  background-color: rgb(34 197 94 / var(--be-selected-opacity));
  padding: 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.info-block, [class*='rounded'][class*='border']) {
  border-color: rgba(113, 203, 214, 0.12);
}

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(.nautico-card, .nautico-request-card, section.info-block) {
  border-color: var(--nautico-card-border);
}

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(section.info-block, .nautico-card, .nautico-request-card) {
  backdrop-filter: blur(14px);
}

@media (max-width: 767px) {

  html.nautico-futuristic-ui
    .nautico-pro-page
    :is(.nautico-card, .nautico-request-card, section.info-block) {
    border-radius: 18px;
  }
}

.nautico-spaces-grid > div:last-child section.rounded-2xl.info-block.bg {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.info-block.bg
  :is(h1, h2, h3, h4, legend, label) {
  color: #10283a;
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.info-block.bg
  .text-muted {
  color: #526a79;
}

.nautico-spaces-grid .text-center.info-block.text-muted {
  color: #536c7c;
  font-weight: 500;
  line-height: 1.55;
}

@media (max-width: 767px) {

  .nautico-spaces-grid .text-center.info-block.text-muted {
    padding: 16px;
  }
}

.nautico-kpi-grid ~ section.rounded-2xl.info-block.bg {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
  box-shadow:
    0 14px 34px rgba(7, 35, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

.nautico-kpi-grid ~ section.rounded-2xl.info-block.bg :is(h1, h2, h3, h4, label) {
  color: #10283a;
}

.nautico-kpi-grid ~ section.rounded-2xl.info-block.bg .text-muted {
  color: #556e7d;
}

.nautico-kpi-grid
  ~ section.rounded-2xl.info-block.bg
  :is(.text-center, [class*='empty'])
  .text-muted,
.nautico-kpi-grid ~ section.rounded-2xl.info-block.bg :is(.text-center.text-muted) {
  color: #536c7c;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 768px) {

  .nautico-kpi-grid ~ section.rounded-2xl.info-block.bg {
    padding: 16px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {

  .nautico-kpi-grid ~ section.rounded-2xl.info-block.bg {
    padding: 14px;
    margin-top: 14px;
  }
}

.nautico-v2-module
  :is(button, a).info-block:not(.bg-primary):not(.bg-danger):not(.text-danger) {
  color: #18344c;
  background-color: #fff;
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,.info-block.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: #163149;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

.nautico-v2-module
  :is(
    .rounded-2xl.info-block.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: #163149;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,.info-block.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}

.nautico-v2-module
  :is(
    .rounded-2xl.info-block.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}


.nautico-v2-transfer-detail :is(section, .rounded-2xl,.info-block) {
  border-color: #d8e4ec;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

.nautico-v2-spaces :is(form, section, .overflow-hidden.rounded-2xl.info-block.bg) {
  border-color: #d8e4ec;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}


html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .info-block {
  color: var(--nv10-muted);
}


html.nautico-futuristic-ui body > .nautico-book-protect-page .info-block {
  color: var(--nv10-muted);
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-dropzone
    .info-block {
    font-size: 10.5px;

    line-height: 1.3;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-protection-panel
    .info-block {
    font-size: 9px;

    line-height: 1.25;
  }
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(.info-block, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--na-admin-border);
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .info-block.bg-elevated,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .bg-elevated.info-block {
  background: #0d1b2b;

  background-image: none;

  border-color: rgba(132, 174, 203, 0.17);

  color: #f5f8fb;

  box-shadow: none;

  filter: none;

  backdrop-filter: none;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(.info-block, .border-t, .border-b, .border-l, .border-r) {
  border-color: rgba(132, 174, 203, 0.16);
}

@media (min-width: 768px) and (max-width: 1023px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .info-block.bg-elevated {
    border-radius: 16px;
  }
}

@media (max-width: 767px) {

  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .info-block.bg-elevated {
    border-radius: 14px;

    box-shadow: none;
  }
}

@media (max-width: 389px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .info-block.bg-elevated {
    border-radius: 12px;
  }
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.info-block, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--account-border);
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.info-block:not(.bg-primary):not(.text-danger):not([class*='danger']) {
  color: #ffffff;

  border-color: rgba(76, 190, 211, 0.34);

  background: #10233a;

  background-image: none;

  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button.info-block:not(.bg-primary):not(.text-danger):not(
      [class*='danger']
    ):hover {
    background: #16304b;

    border-color: rgba(76, 198, 216, 0.58);
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.info-block, [class*='rounded-xl'], [class*='rounded-2xl']) {
  border-color: var(--nr-border);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-xl.info-block,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-2xl.info-block,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-lg.info-block {
  background: #0b1d30;

  border-color: rgba(107, 164, 201, 0.21);
  border: 1px solid rgba(100, 159, 197, 0.21);

  background: #0a1d30;

  background-image: none;

  color: #ffffff;

  box-shadow: none;
  border: 1px solid rgba(101, 159, 197, 0.22);
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(12, 31, 49, 0.92),
    rgba(8, 23, 38, 0.88)
  );
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(10px);
  color: #fff;
}

@media (min-width: 1000px) and (min-height: 700px) {

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files
    .info-block {
    font-size: 9px;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    .rounded-xl
    .info-block {
    font-size: 9px;

    line-height: 1.25;
  }
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  .info-block {
  font-size: 8px;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl
  .info-block {

  line-height: 1.2;
  color: #f3f9ff;

  font-size: 12px;
}


.nautico-recipient-v7 .nautico-recipient-files .info-block {
  color: #91a8ba;
}

.nautico-recipient-v7 .nautico-recipient-conversation .rounded-xl .info-block {
  color: #f5f9fc;

  font-size: 11px;
}


html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .info-block {
  color: #839aab;
  color: #8398a9;

  font-size: 7px;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .info-block {
  color: #f3f8fc;

  font-size: 8px;

  line-height: 1.2;
}


html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .info-block {
  color: #98aabd;

  font-size: 9px;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .info-block {
  color: #ffffff;

  font-size: 11px;
}


html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .info-block {
  color: #94a8b8;
  color: #98aabd;

  font-size: 8px;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .info-block {
  color: #ffffff;

  font-size: 9px;
}

.nautico-book-protect-page .nautico-r6f-subsection-firewall .rounded-xl.info-block.p-14 {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(126, 190, 237, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50));
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.info-block.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}

.info-block > :first-child {
    margin-top: 0;
  }

.info-block > :last-child {
    margin-bottom: 0;
  }

.info-block .title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(67 72 77 / var(--tw-text-opacity, 1));
}

.info-block.important {
  border-color: rgb(243 164 50 / 0.2);
  background-color: rgb(243 164 50 / var(--be-selected-opacity));
}

.info-block.warning {
  border-color: rgb(239 68 68 / 0.2);
  background-color: rgb(239 68 68 / var(--be-selected-opacity));
}

.info-block p {
  margin-bottom: 0px;
  margin-top: 0.375rem;
}

@media (min-width: 1100px) {

  
  html.nautico-futuristic-ui .nautico-composer-shell .info-block p {
    margin-top: 5px;
  }
}
.ad-host:empty {
  display: none;
}

.ad-host > *:not(img) {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  min-height: 90px;
  max-height: 600px;
}

.ad-host img {
  margin: auto;
}

@media only screen and (max-width: 600px) {
  .ad-host > *:not(img) {
    max-width: 370px;
  }
}
.image-file-color {
  color: #f44336;
}

.audio-file-color {
  color: #ff9800;
}

.video-file-color {
  color: #f44336;
}

.text-file-color {
  color: #2196f3;
}

.default-file-color {
  color: #757575;
}

.folder-file-color {
  color: #fbc02d;
}

.shared-folder-file-color {
  color: #fbc02d;
}

.archive-file-color {
  color: #fbc02d;
}

.pdf-file-color {
  color: #f44336;
}

.power-point-file-color {
  color: #f57f17;
}

.word-file-color {
  color: #2196f3;
}

.spreadsheet-file-color {
  color: #00897b;
}
.player-bottom-gradient {
  background-image: linear-gradient(
    to top,
    rgb(0 0 0 / 0.5),
    10%,
    transparent,
    95%,
    rgb(0 0 0 / 0.3)
  );
}

.player-bottom-text-shadow {
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.custom-page-body p:empty:before {
  content: '';
  display: inline-block;
}
.dark,
.dark * {
  scrollbar-width: thin;
  scrollbar-color: #5a5a5a #2a2a2a;
}

.dark .compact-scrollbar {
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.compact-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgb(193 193 193) transparent;
}

.hidden-scrollbar {
  scrollbar-width: none;
}

.stable-scrollbar {
  scrollbar-gutter: stable;
}

.prose li > p {
  margin: 0;
}
/*
 * Nautico Futuristic UI layer
 * Global, opt-in skin enabled by resources/client/main.tsx.
 * Keeps existing component behaviour while unifying public, authenticated,
 * BeDrive and Admin surfaces around the visual language of the Nautico homepage.
 */

:root {
  --nf-bg-0: #050b14;
  --nf-bg-1: #07111f;
  --nf-bg-2: #0b1d31;
  --nf-panel: rgba(255, 255, 255, 0.82);
  --nf-panel-strong: rgba(255, 255, 255, 0.94);
  --nf-panel-dark: rgba(8, 20, 34, 0.78);
  --nf-line: rgba(11, 19, 32, 0.1);
  --nf-line-light: rgba(255, 255, 255, 0.14);
  --nf-aqua: #43c6be;
  --nf-blue: #4d7cfe;
  --nf-violet: #8b7cff;
  --nf-text: #0b1320;
  --nf-muted: #657286;
  --nf-radius-sm: 14px;
  --nf-radius-md: 20px;
  --nf-radius-lg: 28px;
  --nf-shadow: 0 22px 70px rgba(7, 17, 31, 0.13);
  --nf-shadow-strong: 0 30px 100px rgba(3, 10, 20, 0.24);
  --nf-glow:
    0 0 0 1px rgba(67, 198, 190, 0.1), 0 18px 60px rgba(77, 124, 254, 0.1);
}

html.nautico-futuristic-ui {
  background: #f5f8fa;
  color-scheme: light;
}

html.nautico-futuristic-ui,
html.nautico-futuristic-ui body,
html.nautico-futuristic-ui #root {
  min-width: 0;
  max-width: 100%;
}

html.nautico-futuristic-ui body {
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 4% -6%,
      rgba(67, 198, 190, 0.13),
      transparent 28rem
    ),
    radial-gradient(
      circle at 96% 2%,
      rgba(77, 124, 254, 0.11),
      transparent 32rem
    ),
    linear-gradient(180deg, #fbfaf7 0%, #f2f6f9 54%, #eef4f7 100%);
}

html.nautico-futuristic-ui body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 19, 32, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 32, 0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
          mask-image: linear-gradient(to bottom, black 0%, transparent 84%);
}

html.nautico-futuristic-ui body::after {
  content: '';
  position: fixed;
  width: 34rem;
  height: 34rem;
  right: -18rem;
  top: 24vh;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(67, 198, 190, 0.13),
    rgba(77, 124, 254, 0.05) 46%,
    transparent 72%
  );
  filter: blur(18px);
  animation: nauticoAmbientFloat 12s ease-in-out infinite alternate;
}

/* Shared surface language */
html.nautico-futuristic-ui .nautico-future-surface,
html.nautico-futuristic-ui .dashboard-rounded-panel,
html.nautico-futuristic-ui [class~='rounded-panel'][class*='bg-elevated'] {
  border-color: var(--nf-line);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95),
    rgba(247, 251, 252, 0.84)
  );
  box-shadow: var(--nf-shadow);
  backdrop-filter: blur(20px) saturate(1.12);
}

html.nautico-futuristic-ui .dashboard-grid {
  background:
    radial-gradient(
      circle at 1% 2%,
      rgba(67, 198, 190, 0.12),
      transparent 26rem
    ),
    radial-gradient(
      circle at 98% 0%,
      rgba(77, 124, 254, 0.09),
      transparent 28rem
    ),
    #f3f7f9;
}

html.nautico-futuristic-ui
  .dashboard-grid:not(.dashboard-mobile-mode)
  .dashboard-rounded-panel {
  border-radius: var(--nf-radius-md);
  border-color: rgba(11, 19, 32, 0.08);
  overflow: clip;
}

html.nautico-futuristic-ui .dashboard-grid-sidenav-left,
html.nautico-futuristic-ui .dashboard-grid-sidenav-right {
  background: rgba(248, 251, 252, 0.76);
  backdrop-filter: blur(22px) saturate(1.12);
}

html.nautico-futuristic-ui
  .dashboard-grid:not(.dashboard-mobile-mode)
  .dashboard-grid-sidenav-left
  > *,
html.nautico-futuristic-ui
  .dashboard-grid:not(.dashboard-mobile-mode)
  .dashboard-grid-sidenav-right
  > * {
  border-color: rgba(11, 19, 32, 0.07);
}

html.nautico-futuristic-ui .dashboard-mobile-mode .dashboard-grid-sidenav-left,
html.nautico-futuristic-ui
  .dashboard-mobile-mode
  .dashboard-grid-sidenav-right {
  max-width: min(88vw, 340px);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(67, 198, 190, 0.12),
      transparent 18rem
    ),
    rgba(248, 251, 252, 0.96);
  box-shadow: 0 28px 100px rgba(7, 17, 31, 0.28);
}

/* Navbar / shell */
html.nautico-futuristic-ui .nautico-shell-header,
html.nautico-futuristic-ui .dashboard-grid-navbar {
  background: rgba(247, 250, 251, 0.76);
  border-color: rgba(11, 19, 32, 0.08);
  backdrop-filter: blur(24px) saturate(1.15);
}

html.nautico-futuristic-ui .nautico-shell-frame {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 7% 0%,
      rgba(67, 198, 190, 0.13),
      transparent 29rem
    ),
    radial-gradient(
      circle at 94% 5%,
      rgba(77, 124, 254, 0.1),
      transparent 31rem
    ),
    linear-gradient(180deg, #fbfaf7, #f2f7f9);
}

html.nautico-futuristic-ui .nautico-shell-frame::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0)),
    linear-gradient(rgba(11, 19, 32, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 19, 32, 0.024) 1px, transparent 1px);
  background-size:
    auto,
    46px 46px,
    46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 90%);
          mask-image: linear-gradient(to bottom, black, transparent 90%);
}

html.nautico-futuristic-ui .nautico-shell-nav-link {
  position: relative;
  border: 1px solid transparent;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

html.nautico-futuristic-ui .nautico-shell-nav-link:hover {
  transform: translateY(-1px);
}

html.nautico-futuristic-ui .nautico-shell-nav-link.is-active {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(67, 198, 190, 0.25),
      transparent 8rem
    ),
    linear-gradient(135deg, #07111f, #102a43);
  color: #fff;
  box-shadow:
    0 10px 28px rgba(7, 17, 31, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

html.nautico-futuristic-ui .nautico-mobile-nav {
  scrollbar-width: none;
  background: rgba(250, 252, 252, 0.86);
  backdrop-filter: blur(20px);
}
html.nautico-futuristic-ui .nautico-mobile-nav::-webkit-scrollbar {
  display: none;
}

/* Authentication */
html.nautico-futuristic-ui .nautico-auth-stage {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  height: auto;
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(67, 198, 190, 0.26),
      transparent 28rem
    ),
    radial-gradient(
      circle at 88% 5%,
      rgba(77, 124, 254, 0.22),
      transparent 30rem
    ),
    linear-gradient(135deg, #050b14 0%, #071727 48%, #102a43 100%);
  color: #eaf5f8;
}

html.nautico-futuristic-ui .nautico-auth-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
          mask-image: linear-gradient(to bottom, black, transparent 88%);
}

html.nautico-futuristic-ui .nautico-auth-logo {
  filter: drop-shadow(0 12px 30px rgba(67, 198, 190, 0.22));
}

html.nautico-futuristic-ui .nautico-auth-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(239, 247, 250, 0.88)
  );
  color: var(--nf-text);
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(26px) saturate(1.15);
}

html.nautico-futuristic-ui .nautico-auth-card::before {
  content: '';
  position: absolute;
  width: 12rem;
  height: 12rem;
  right: -6rem;
  top: -7rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(67, 198, 190, 0.2), transparent 70%);
  pointer-events: none;
}

html.nautico-futuristic-ui .nautico-auth-message,
html.nautico-futuristic-ui .nautico-auth-footer {
  color: rgba(235, 245, 248, 0.72);
}

html.nautico-futuristic-ui .nautico-auth-stage input,
html.nautico-futuristic-ui .nautico-auth-stage textarea,
html.nautico-futuristic-ui .nautico-auth-stage select {
  min-height: 44px;
}

/* Pricing */
html.nautico-futuristic-ui .nautico-pricing-stage {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 7% 0%,
      rgba(67, 198, 190, 0.17),
      transparent 28rem
    ),
    radial-gradient(
      circle at 95% 4%,
      rgba(77, 124, 254, 0.13),
      transparent 30rem
    ),
    linear-gradient(180deg, #f9fbfb 0%, #eef5f8 100%);
}

html.nautico-futuristic-ui .nautico-pricing-hero {
  position: relative;
  margin-inline: auto;
  max-width: 1180px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: clamp(22px, 3vw, 38px);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(67, 198, 190, 0.3),
      transparent 24rem
    ),
    radial-gradient(
      circle at 95% 10%,
      rgba(77, 124, 254, 0.23),
      transparent 26rem
    ),
    linear-gradient(135deg, #07111f, #0b1d31 55%, #12314d);
  color: #fff;
  box-shadow: var(--nf-shadow-strong);
}

html.nautico-futuristic-ui .nautico-pricing-plan {
  min-width: 0;
  border-radius: 24px;
  border: 1px solid rgba(11, 19, 32, 0.09);
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(67, 198, 190, 0.1),
      transparent 14rem
    ),
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.97),
      rgba(245, 250, 251, 0.91)
    );
  box-shadow: 0 20px 60px rgba(7, 17, 31, 0.11);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease;
}

html.nautico-futuristic-ui .nautico-pricing-plan:hover {
  transform: translateY(-5px);
  border-color: rgba(67, 198, 190, 0.34);
  box-shadow:
    0 30px 80px rgba(7, 17, 31, 0.17),
    0 0 0 1px rgba(67, 198, 190, 0.09);
}

html.nautico-futuristic-ui .nautico-pricing-plan.is-recommended {
  border-color: rgba(67, 198, 190, 0.42);
  box-shadow:
    0 28px 90px rgba(7, 17, 31, 0.18),
    0 0 0 1px rgba(67, 198, 190, 0.12);
}

/* File explorer */
html.nautico-futuristic-ui .nautico-drive-shell {
  background:
    radial-gradient(
      circle at 4% 0%,
      rgba(67, 198, 190, 0.12),
      transparent 28rem
    ),
    radial-gradient(
      circle at 96% 8%,
      rgba(77, 124, 254, 0.08),
      transparent 30rem
    ),
    #f2f6f8;
}

html.nautico-futuristic-ui .nautico-drive-shell .dashboard-rounded-panel {
  background: rgba(255, 255, 255, 0.87);
  backdrop-filter: blur(20px) saturate(1.12);
}

html.nautico-futuristic-ui .nautico-drive-shell [role='row'],
html.nautico-futuristic-ui .nautico-drive-shell [role='gridcell'],
html.nautico-futuristic-ui .nautico-drive-shell [class*='file-grid-item'] {
  transition:
    background-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

/* Admin */
html.nautico-futuristic-ui .nautico-admin-shell {
  background:
    radial-gradient(
      circle at 3% 0%,
      rgba(67, 198, 190, 0.15),
      transparent 28rem
    ),
    radial-gradient(
      circle at 98% 7%,
      rgba(77, 124, 254, 0.11),
      transparent 32rem
    ),
    linear-gradient(145deg, #eef6f7 0%, #f6f8fb 48%, #edf3f8 100%);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  > * {
  border-right: 1px solid rgba(18, 50, 67, 0.08);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.94),
    rgba(247, 251, 252, 0.88)
  );
  box-shadow: 14px 0 42px rgba(7, 17, 31, 0.055);
  backdrop-filter: blur(22px) saturate(1.14);
}

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-rounded-panel {
  border: 1px solid rgba(18, 50, 67, 0.075);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(250, 252, 253, 0.88)
  );
  box-shadow:
    0 22px 70px rgba(7, 17, 31, 0.105),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(22px) saturate(1.12);
}

html.nautico-futuristic-ui .nautico-admin-shell h1,
html.nautico-futuristic-ui .nautico-admin-shell h2,
html.nautico-futuristic-ui .nautico-admin-shell h3 {
  letter-spacing: -0.022em;
  color: #102330;
}

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-sidenav-left a,
html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  button {
  border: 1px solid transparent;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  a:hover,
html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  button:hover {
  border-color: rgba(67, 198, 190, 0.13);
  background-color: rgba(67, 198, 190, 0.065);
}

html.nautico-futuristic-ui .nautico-admin-shell table {
  border-color: rgba(18, 50, 67, 0.08);
}

html.nautico-futuristic-ui .nautico-admin-shell [role='row'] {
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

html.nautico-futuristic-ui .nautico-admin-shell [role='row']:hover {
  background-color: rgba(67, 198, 190, 0.035);
}

html.nautico-futuristic-ui .nautico-admin-site-alerts {
  scrollbar-width: thin;
  scrollbar-color: rgba(18, 50, 67, 0.24) transparent;
}

/* Data tables, forms and overlays */
html.nautico-futuristic-ui table {
  max-width: 100%;
}

html.nautico-futuristic-ui [role='dialog'] {
  max-width: min(calc(100vw - 24px), 100%);
}

html.nautico-futuristic-ui [role='dialog'] > div,
html.nautico-futuristic-ui [data-overlay-container] > div {
  border-radius: var(--nf-radius-md);
}

html.nautico-futuristic-ui input,
html.nautico-futuristic-ui textarea,
html.nautico-futuristic-ui select,
html.nautico-futuristic-ui button,
html.nautico-futuristic-ui [role='button'] {
  touch-action: manipulation;
}

html.nautico-futuristic-ui input:focus-visible,
html.nautico-futuristic-ui textarea:focus-visible,
html.nautico-futuristic-ui select:focus-visible,
html.nautico-futuristic-ui button:focus-visible,
html.nautico-futuristic-ui a:focus-visible,
html.nautico-futuristic-ui [tabindex]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--nf-aqua) 75%, white);
  outline-offset: 2px;
}

html.nautico-futuristic-ui button,
html.nautico-futuristic-ui a[class*='rounded'],
html.nautico-futuristic-ui [role='button'] {
  transition-property:
    transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 0.18s;
  transition-timing-function: ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui button:not(:disabled):hover,
  html.nautico-futuristic-ui a[class*='rounded']:hover,
  html.nautico-futuristic-ui [role='button']:not([aria-disabled='true']):hover {
    transform: translateY(-1px);
  }
}

/* Fluid responsive behaviour: cover phones, tablets, desktops and in-between sizes. */
@media (max-width: 1279px) {
  html.nautico-futuristic-ui
    .dashboard-layout-with-spacing:not(.dashboard-mobile-mode) {
    padding: 0.35rem;
  }
}

@media (max-width: 1024px) {
  html.nautico-futuristic-ui .dashboard-grid {
    background: #f5f8fa;
  }

  html.nautico-futuristic-ui .nautico-admin-shell.dashboard-grid {
    background:
      radial-gradient(
        circle at 3% 0%,
        rgba(67, 198, 190, 0.13),
        transparent 24rem
      ),
      radial-gradient(
        circle at 98% 7%,
        rgba(77, 124, 254, 0.09),
        transparent 28rem
      ),
      linear-gradient(145deg, #eef6f7 0%, #f6f8fb 48%, #edf3f8 100%);
  }

  html.nautico-futuristic-ui .dashboard-rounded-panel {
    border-radius: 0;
    box-shadow: none;
  }

  html.nautico-futuristic-ui .nautico-pricing-plan:hover,
  html.nautico-futuristic-ui button:hover,
  html.nautico-futuristic-ui [role='button']:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  /* Nautico settings mobile: desktop secondary settings navigation
     must not consume a grid track in dashboard mobile mode. */
  html.nautico-futuristic-ui
    .nautico-admin-shell.dashboard-mobile-mode
    .dashboard-grid-sidenav-left-2 {
    display: none;
  }

  html.nautico-futuristic-ui
    .nautico-admin-shell.dashboard-mobile-mode
    .dashboard-grid-content {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  html.nautico-futuristic-ui .nautico-admin-site-alerts {
    position: static;
    inset: auto;
    width: auto;
    max-width: none;
    max-height: min(28svh, 180px);
    margin: 12px;
    gap: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
    scroll-padding-block: 4px;
  }

  html.nautico-futuristic-ui .nautico-admin-site-alerts > * {
    flex: 0 0 auto;
  }

  html.nautico-futuristic-ui .nautico-auth-stage {
    padding: max(24px, env(safe-area-inset-top)) 14px
      max(20px, env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  html.nautico-futuristic-ui .nautico-auth-card {
    width: 100%;
    max-width: 520px;
    border-radius: 22px;
    padding: 28px 20px;
  }

  html.nautico-futuristic-ui .nautico-pricing-hero {
    border-radius: 24px;
  }

  html.nautico-futuristic-ui .nautico-pricing-plan {
    border-radius: 20px;
    padding: 24px;
  }

  html.nautico-futuristic-ui [role='dialog'] {
    width: calc(100vw - 16px) !important;
    max-height: calc(100svh - 16px);
  }
}

@media (max-width: 479px) {
  html.nautico-futuristic-ui .nautico-auth-card {
    padding: 24px 16px;
  }

  html.nautico-futuristic-ui .nautico-shell-header {
    padding-inline: 12px;
  }

  html.nautico-futuristic-ui .nautico-shell-user-pill {
    max-width: 44vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html.nautico-futuristic-ui [class*='px-40'],
  html.nautico-futuristic-ui [class*='px-32'] {
    --nautico-mobile-pad: 1rem;
  }
}

@media (pointer: coarse) {
  html.nautico-futuristic-ui button,
  html.nautico-futuristic-ui [role='button'],
  html.nautico-futuristic-ui input,
  html.nautico-futuristic-ui select,
  html.nautico-futuristic-ui textarea {
    min-height: 44px;
  }
}

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

@keyframes nauticoAmbientFloat {
  from {
    transform: translate3d(0, -12px, 0) scale(1);
  }
  to {
    transform: translate3d(-22px, 20px, 0) scale(1.08);
  }
}

/* ========================================================================
   C11-D2A HOMEPAGE PARITY LAYER
   Nautico global visual language derived from the public homepage:
   deep ocean/navy, aqua energy, glass surfaces, luminous edges and depth.
   ======================================================================== */

:root {
  --nh-bg-deep: #040b14;
  --nh-bg-ocean: #071421;
  --nh-bg-ocean-2: #0a1e30;
  --nh-bg-blue: #102d46;

  --nh-cyan: #72dce6;
  --nh-aqua: #67d2ce;
  --nh-blue: #5d91eb;
  --nh-electric: #5f7df8;

  --nh-glass-dark: rgba(8, 22, 36, 0.72);
  --nh-glass-dark-strong: rgba(7, 18, 31, 0.88);
  --nh-glass-light: rgba(255, 255, 255, 0.9);
  --nh-glass-light-soft: rgba(246, 251, 253, 0.83);

  --nh-line-dark: rgba(134, 222, 232, 0.16);
  --nh-line-light: rgba(255, 255, 255, 0.13);

  --nh-text-dark: #0b1726;
  --nh-text-light: #f4fbff;
  --nh-muted-light: rgba(224, 240, 247, 0.7);

  --nh-shadow-card:
    0 28px 90px rgba(0, 8, 18, 0.26), 0 8px 26px rgba(0, 17, 33, 0.12);

  --nh-shadow-glow:
    0 0 0 1px rgba(110, 220, 229, 0.13), 0 24px 80px rgba(44, 130, 187, 0.18);

  --nh-radius-card: 24px;
  --nh-radius-control: 14px;
}

/* ------------------------------------------------------------------------
   GLOBAL OCEAN ENVIRONMENT
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui {
  background: var(--nh-bg-deep);
}

html.nautico-futuristic-ui body {
  position: relative;
  min-height: 100vh;
  color: var(--nh-text-dark);
  background:
    radial-gradient(
      circle at 13% 7%,
      rgba(93, 145, 235, 0.23),
      transparent 30rem
    ),
    radial-gradient(
      circle at 78% 13%,
      rgba(103, 210, 206, 0.18),
      transparent 36rem
    ),
    radial-gradient(
      circle at 50% 96%,
      rgba(28, 84, 127, 0.16),
      transparent 42rem
    ),
    linear-gradient(145deg, #06101c 0%, #0a2033 38%, #0c2a40 62%, #071522 100%);
  background-attachment: fixed;
}

/* luminous water/grid layer */

html.nautico-futuristic-ui body::before {
  opacity: 1;
  background-image:
    linear-gradient(rgba(103, 210, 206, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 145, 235, 0.035) 1px, transparent 1px),
    radial-gradient(
      circle at 18% 16%,
      rgba(116, 223, 231, 0.17) 0 1px,
      transparent 1.7px
    );
  background-size:
    52px 52px,
    52px 52px,
    130px 130px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.94),
    rgba(0, 0, 0, 0.34) 72%,
    transparent
  );
          mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.94),
    rgba(0, 0, 0, 0.34) 72%,
    transparent
  );
}

/* moving ambient energy */

html.nautico-futuristic-ui body::after {
  width: 50rem;
  height: 50rem;
  right: -22rem;
  top: 4vh;
  opacity: 0.82;
  background: radial-gradient(
    circle,
    rgba(105, 217, 222, 0.18),
    rgba(78, 132, 222, 0.09) 38%,
    transparent 68%
  );
  filter: blur(26px);
  animation: nauticoHomepageAmbient 14s cubic-bezier(0.4, 0, 0.2, 1) infinite
    alternate;
}

/* ------------------------------------------------------------------------
   MAIN APP SURFACES
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(
    .nautico-shell-frame,
    .nautico-drive-shell,
    .nautico-admin-shell,
    .dashboard-grid
  ) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 7% 0%,
      rgba(108, 219, 225, 0.13),
      transparent 29rem
    ),
    radial-gradient(
      circle at 94% 4%,
      rgba(86, 139, 226, 0.16),
      transparent 33rem
    ),
    linear-gradient(
      145deg,
      rgba(5, 15, 26, 0.98),
      rgba(9, 30, 47, 0.96) 48%,
      rgba(6, 20, 34, 0.98)
    ) !important;
}

/* atmospheric haze inside authenticated/admin layouts */

html.nautico-futuristic-ui
  :is(.nautico-shell-frame, .nautico-drive-shell, .nautico-admin-shell)::after {
  content: '';
  position: fixed;
  inset: auto -14rem -18rem auto;
  width: 42rem;
  height: 42rem;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(90, 191, 221, 0.14),
    transparent 68%
  );
  filter: blur(18px);
}

/* ------------------------------------------------------------------------
   GLASS PANELS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(.dashboard-rounded-panel, .nautico-future-surface) {
  border: 1px solid rgba(126, 213, 224, 0.13) !important;
  border-radius: var(--nh-radius-card);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(240, 248, 251, 0.86)
  ) !important;
  box-shadow: var(--nh-shadow-card) !important;
  backdrop-filter: blur(26px) saturate(1.14);
}

/* subtle luminous edge */

html.nautico-futuristic-ui .dashboard-rounded-panel {
  position: relative;
}

html.nautico-futuristic-ui .dashboard-rounded-panel::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6),
    rgba(105, 216, 224, 0.18) 34%,
    transparent 60%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.72;
}

/* ------------------------------------------------------------------------
   TOP BARS / NAVIGATION
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui :is(.nautico-shell-header, .dashboard-grid-navbar) {
  color: var(--nh-text-light);
  border-color: rgba(124, 213, 224, 0.13) !important;
  background: linear-gradient(
    180deg,
    rgba(5, 16, 29, 0.92),
    rgba(7, 23, 39, 0.78)
  ) !important;
  box-shadow: 0 12px 46px rgba(0, 8, 18, 0.24);
  backdrop-filter: blur(26px) saturate(1.18);
}

html.nautico-futuristic-ui .nautico-shell-nav-link {
  color: rgba(238, 249, 252, 0.75);
  border-radius: 13px;
}

html.nautico-futuristic-ui .nautico-shell-nav-link:hover {
  color: #fff;
  background: rgba(103, 210, 206, 0.09);
  box-shadow: inset 0 0 0 1px rgba(111, 217, 225, 0.1);
}

html.nautico-futuristic-ui .nautico-shell-nav-link.is-active {
  color: #fff;
  border-color: rgba(124, 224, 231, 0.2);
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(112, 221, 229, 0.28),
      transparent 9rem
    ),
    linear-gradient(135deg, rgba(32, 86, 128, 0.96), rgba(15, 45, 70, 0.98));
  box-shadow:
    0 12px 35px rgba(0, 10, 25, 0.3),
    0 0 24px rgba(79, 183, 212, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------------------
   ADMIN SIDEBAR
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  > * {
  color: rgba(236, 248, 251, 0.86);
  border-right: 1px solid rgba(117, 216, 226, 0.1);
  background: linear-gradient(
    180deg,
    rgba(5, 16, 28, 0.96),
    rgba(7, 25, 40, 0.93)
  ) !important;
  box-shadow: 18px 0 60px rgba(0, 7, 17, 0.26);
  backdrop-filter: blur(26px) saturate(1.15);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  :is(a, button) {
  color: rgba(233, 247, 251, 0.7);
  border-radius: 12px;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  :is(a, button):hover {
  color: #fff;
  border-color: rgba(106, 217, 225, 0.14);
  background: linear-gradient(
    90deg,
    rgba(101, 212, 215, 0.1),
    rgba(82, 142, 225, 0.07)
  );
}

/* ------------------------------------------------------------------------
   TYPOGRAPHY IN DARK SHELLS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(.nautico-shell-frame, .nautico-drive-shell, .nautico-admin-shell)
  > :not(.dashboard-rounded-panel) {
  --nautico-shell-text: rgba(239, 249, 252, 0.92);
}

html.nautico-futuristic-ui
  :is(.nautico-shell-frame, .nautico-drive-shell, .nautico-admin-shell)
  .dashboard-grid-content
  > h1,
html.nautico-futuristic-ui
  :is(.nautico-shell-frame, .nautico-drive-shell, .nautico-admin-shell)
  .dashboard-grid-content
  > h2 {
  color: var(--nh-text-light);
}

/* panel text stays dark for readability */

html.nautico-futuristic-ui
  .dashboard-rounded-panel
  :is(h1, h2, h3, h4, h5, h6) {
  color: #102232;
}

/* ------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui :is(button, [role='button'], a[class*='rounded']) {
  transform: translateZ(0);
}

html.nautico-futuristic-ui button[class*='bg-primary'],
html.nautico-futuristic-ui a[class*='bg-primary'] {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: linear-gradient(
    120deg,
    #5279e8 0%,
    #5f97e8 46%,
    #69d2d0 100%
  ) !important;
  color: #fff !important;
  box-shadow:
    0 14px 36px rgba(61, 127, 207, 0.27),
    0 0 26px rgba(103, 210, 206, 0.1);
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui button[class*='bg-primary']:hover,
  html.nautico-futuristic-ui a[class*='bg-primary']:hover {
    transform: translateY(-2px);
    box-shadow:
      0 19px 46px rgba(58, 128, 210, 0.34),
      0 0 34px rgba(103, 210, 206, 0.16);
  }
}

/* ------------------------------------------------------------------------
   INPUTS / SELECTS / TEXTAREAS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  .dashboard-rounded-panel
  :is(input, textarea, select) {
  border-color: rgba(25, 72, 101, 0.13);
  border-radius: var(--nh-radius-control);
  background: rgba(247, 251, 253, 0.83);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.88);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

html.nautico-futuristic-ui
  .dashboard-rounded-panel
  :is(input, textarea, select):focus {
  border-color: rgba(88, 188, 205, 0.48);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 0 4px rgba(92, 195, 211, 0.08);
}

/* ------------------------------------------------------------------------
   DATA TABLES
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-admin-shell table {
  border-collapse: separate;
  border-spacing: 0;
}

html.nautico-futuristic-ui .nautico-admin-shell thead {
  background: linear-gradient(
    180deg,
    rgba(234, 245, 249, 0.92),
    rgba(244, 249, 251, 0.72)
  );
}

html.nautico-futuristic-ui .nautico-admin-shell tbody tr {
  transition:
    transform 0.14s ease,
    background-color 0.14s ease,
    box-shadow 0.14s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-admin-shell tbody tr:hover {
    background: linear-gradient(
      90deg,
      rgba(94, 198, 209, 0.055),
      rgba(83, 139, 222, 0.035)
    );
  }
}

/* ------------------------------------------------------------------------
   DIALOGS / MODALS / POPOVERS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui [role='dialog'] {
  border: 1px solid rgba(112, 208, 220, 0.14);
  border-radius: 24px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(238, 247, 250, 0.92)
  );
  box-shadow: 0 34px 110px rgba(0, 8, 20, 0.38);
  backdrop-filter: blur(30px) saturate(1.16);
}

/* ------------------------------------------------------------------------
   DRIVE / MY FILES
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-drive-shell [role='row'],
html.nautico-futuristic-ui .nautico-drive-shell [role='gridcell'],
html.nautico-futuristic-ui .nautico-drive-shell [class*='file-grid-item'] {
  border-radius: 15px;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-drive-shell [role='row']:hover,
  html.nautico-futuristic-ui .nautico-drive-shell [role='gridcell']:hover,
  html.nautico-futuristic-ui
    .nautico-drive-shell
    [class*='file-grid-item']:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 13px 34px rgba(3, 18, 31, 0.1);
  }
}

/* ------------------------------------------------------------------------
   AUTH
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-auth-stage {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(100, 213, 218, 0.25),
      transparent 28rem
    ),
    radial-gradient(
      circle at 88% 5%,
      rgba(90, 142, 231, 0.26),
      transparent 31rem
    ),
    linear-gradient(135deg, #030912 0%, #071929 47%, #0d2e47 100%);
}

html.nautico-futuristic-ui .nautico-auth-card {
  border: 1px solid rgba(133, 224, 231, 0.16);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(237, 247, 250, 0.89)
  );
  box-shadow:
    0 38px 120px rgba(0, 5, 15, 0.46),
    0 0 50px rgba(82, 166, 210, 0.08);
}

/* ------------------------------------------------------------------------
   PRICING / BILLING STYLE FAMILY
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-pricing-stage {
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(103, 210, 206, 0.18),
      transparent 30rem
    ),
    radial-gradient(
      circle at 94% 4%,
      rgba(93, 145, 235, 0.18),
      transparent 32rem
    ),
    linear-gradient(145deg, #06111d, #0a2337);
}

html.nautico-futuristic-ui .nautico-pricing-plan {
  overflow: hidden;
}

html.nautico-futuristic-ui .nautico-pricing-plan::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 100% 0%,
    rgba(104, 211, 213, 0.14),
    transparent 14rem
  );
}

/* ------------------------------------------------------------------------
   SCROLLBARS
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui {
  scrollbar-color: rgba(99, 196, 208, 0.42) rgba(4, 14, 24, 0.15);
}

html.nautico-futuristic-ui ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.nautico-futuristic-ui ::-webkit-scrollbar-track {
  background: rgba(3, 13, 23, 0.06);
}

html.nautico-futuristic-ui ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(94, 180, 213, 0.6),
    rgba(101, 210, 208, 0.5)
  );
  background-clip: padding-box;
}

/* ------------------------------------------------------------------------
   ANIMATION
   ------------------------------------------------------------------------ */

@keyframes nauticoHomepageAmbient {
  0% {
    transform: translate3d(0, -18px, 0) scale(1);
  }

  50% {
    transform: translate3d(-30px, 22px, 0) scale(1.07);
  }

  100% {
    transform: translate3d(18px, 48px, 0) scale(1.12);
  }
}

/* ------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  html.nautico-futuristic-ui
    :is(
      .nautico-shell-frame,
      .nautico-drive-shell,
      .nautico-admin-shell,
      .dashboard-grid
    ) {
    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(103, 210, 206, 0.11),
        transparent 24rem
      ),
      linear-gradient(145deg, #071522, #0b263b) !important;
  }

  html.nautico-futuristic-ui .dashboard-rounded-panel {
    border-radius: 18px;
    box-shadow: 0 14px 44px rgba(0, 8, 18, 0.16) !important;
  }
}

@media (max-width: 767px) {
  html.nautico-futuristic-ui body::after {
    width: 30rem;
    height: 30rem;
    right: -18rem;
    top: 8vh;
    opacity: 0.55;
  }

  html.nautico-futuristic-ui .dashboard-rounded-panel {
    border-radius: 16px;
  }

  html.nautico-futuristic-ui
    .nautico-admin-shell
    .dashboard-grid-sidenav-left
    > * {
    background: rgba(5, 17, 29, 0.98) !important;
  }
}

/* Accessibility: preserve reduced motion. */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui body::after {
    animation: none !important;
  }
}

/* ========================================================================
   END C11-D2A HOMEPAGE PARITY LAYER
   ======================================================================== */

/* ========================================================================
   C11-D2B PAGE LEVEL HOMEPAGE PARITY

   Stronger page-specific Nautico treatment:
   cinematic ocean atmosphere + luminous aqua/blue geometry + glass cards.
   ======================================================================== */

/* ------------------------------------------------------------------------
   Shared Nautico page atmosphere
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(
    .nautico-library-stage,
    .nautico-send-stage,
    .nautico-detail-stage,
    .nautico-requests-stage,
    .nautico-notifications-stage,
    .nautico-claim-stage,
    .nautico-public-request-stage
  ) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 9% 2%,
      rgba(100, 216, 222, 0.17),
      transparent 25rem
    ),
    radial-gradient(
      circle at 91% 8%,
      rgba(86, 137, 225, 0.18),
      transparent 31rem
    ),
    radial-gradient(
      ellipse at 50% 110%,
      rgba(48, 136, 176, 0.17),
      transparent 36rem
    ),
    linear-gradient(
      145deg,
      rgba(4, 13, 23, 0.98),
      rgba(7, 28, 44, 0.97) 44%,
      rgba(10, 39, 58, 0.96) 68%,
      rgba(5, 18, 30, 0.99)
    );
}

/* moving water-line / particle field */

html.nautico-futuristic-ui
  :is(
    .nautico-library-stage,
    .nautico-send-stage,
    .nautico-detail-stage,
    .nautico-requests-stage,
    .nautico-notifications-stage,
    .nautico-claim-stage,
    .nautico-public-request-stage
  )::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    linear-gradient(
      112deg,
      transparent 0 44%,
      rgba(115, 225, 231, 0.055) 44.5% 45%,
      transparent 45.5% 100%
    ),
    linear-gradient(
      68deg,
      transparent 0 63%,
      rgba(89, 146, 225, 0.045) 63.5% 64%,
      transparent 64.5% 100%
    ),
    radial-gradient(circle, rgba(131, 227, 233, 0.26) 0 1px, transparent 1.6px);
  background-size:
    220px 90px,
    270px 120px,
    116px 116px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 78%,
    transparent 100%
  );
          mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 12%,
    black 78%,
    transparent 100%
  );
  animation: nauticoPageWaterDrift 22s linear infinite;
}

/* glowing ambient depth */

html.nautico-futuristic-ui
  :is(
    .nautico-library-stage,
    .nautico-send-stage,
    .nautico-detail-stage,
    .nautico-requests-stage,
    .nautico-notifications-stage,
    .nautico-claim-stage,
    .nautico-public-request-stage
  )::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 38rem;
  height: 38rem;
  right: -18rem;
  top: 18%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(103, 210, 206, 0.16),
    rgba(87, 143, 226, 0.07) 42%,
    transparent 70%
  );
  filter: blur(22px);
  animation: nauticoPageGlow 13s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------------------
   Homepage-style page heroes
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(
    .nautico-library-hero,
    .nautico-detail-hero,
    .nautico-notifications-hero
  ) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(127, 221, 230, 0.17);
  background:
    radial-gradient(
      circle at 6% 0%,
      rgba(108, 223, 229, 0.27),
      transparent 21rem
    ),
    radial-gradient(
      circle at 97% 10%,
      rgba(92, 145, 230, 0.25),
      transparent 26rem
    ),
    linear-gradient(
      132deg,
      rgba(4, 16, 29, 0.96),
      rgba(10, 40, 61, 0.94) 54%,
      rgba(10, 29, 47, 0.97)
    ) !important;
  box-shadow:
    0 34px 105px rgba(0, 7, 18, 0.37),
    0 0 0 1px rgba(116, 222, 229, 0.04),
    inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(28px) saturate(1.16);
}

html.nautico-futuristic-ui
  :is(
    .nautico-library-hero,
    .nautico-detail-hero,
    .nautico-notifications-hero
  )::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  z-index: -1;
  opacity: 0.64;
  background:
    linear-gradient(
      110deg,
      transparent 0 63%,
      rgba(111, 219, 228, 0.08) 63.5%,
      transparent 64%
    ),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size:
    auto,
    48px 48px,
    48px 48px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.22));
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.22));
}

html.nautico-futuristic-ui
  :is(.nautico-library-hero, .nautico-detail-hero, .nautico-notifications-hero)
  :is(h1, h2, h3, p) {
  text-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

/* ------------------------------------------------------------------------
   Eyebrows — same visual cue as homepage "SECURE FILE TRANSFER"
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-eyebrow {
  color: #79e2ea !important;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(102, 216, 225, 0.22);
}

/* ------------------------------------------------------------------------
   Nautico glass content cards
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(
    .nautico-card,
    .nautico-request-card,
    .nautico-transfer-card,
    .nautico-success-card
  ) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(121, 212, 222, 0.14) !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(103, 210, 206, 0.1),
      transparent 12rem
    ),
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.965),
      rgba(238, 247, 250, 0.885)
    ) !important;
  box-shadow:
    0 24px 75px rgba(0, 10, 24, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.82) inset !important;
  backdrop-filter: blur(25px) saturate(1.13);
}

html.nautico-futuristic-ui
  :is(
    .nautico-card,
    .nautico-request-card,
    .nautico-transfer-card,
    .nautico-success-card
  )::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.48),
    transparent 22% 72%,
    rgba(103, 210, 206, 0.06)
  );
}

/* Transfer cards behave like premium homepage controls */

html.nautico-futuristic-ui .nautico-transfer-card {
  transform: translateZ(0);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background-color 0.22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-transfer-card:hover {
    transform: translateY(-6px) scale(1.008);
    border-color: rgba(111, 220, 226, 0.4) !important;
    box-shadow:
      0 34px 90px rgba(0, 10, 25, 0.3),
      0 0 40px rgba(82, 181, 208, 0.1) !important;
  }
}

/* ------------------------------------------------------------------------
   Transfer composer
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-dropzone {
  position: relative;
  overflow: hidden;
  border-color: rgba(72, 150, 191, 0.25) !important;
  background:
    radial-gradient(
      circle at 50% 15%,
      rgba(103, 210, 206, 0.1),
      transparent 13rem
    ),
    linear-gradient(
      150deg,
      rgba(249, 253, 254, 0.94),
      rgba(236, 247, 250, 0.86)
    );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

html.nautico-futuristic-ui .nautico-dropzone::before {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: -45%;
  opacity: 0;
  transform: translateX(-38%) rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(116, 224, 231, 0.18),
    transparent
  );
  transition:
    opacity 0.3s ease,
    transform 0.65s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-dropzone:hover {
    border-color: rgba(103, 210, 206, 0.62) !important;
    box-shadow:
      0 16px 42px rgba(26, 112, 156, 0.11),
      inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  }

  html.nautico-futuristic-ui .nautico-dropzone:hover::before {
    opacity: 1;
    transform: translateX(38%) rotate(18deg);
  }
}

/* Protect panel */

html.nautico-futuristic-ui .nautico-protection-panel {
  border-color: rgba(79, 157, 194, 0.18) !important;
  background: linear-gradient(
    135deg,
    rgba(238, 248, 250, 0.94),
    rgba(246, 250, 253, 0.83)
  );
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.85);
}

/* send securely — homepage gradient */

html.nautico-futuristic-ui .nautico-send-button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(110deg, #5176df, #5d99e8 48%, #68d3d0) !important;
  box-shadow:
    0 18px 44px rgba(57, 126, 206, 0.29),
    0 0 30px rgba(101, 210, 208, 0.12);
}

html.nautico-futuristic-ui .nautico-send-button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0;
  transform: translateX(-130%);
  background: linear-gradient(
    105deg,
    transparent 34%,
    rgba(255, 255, 255, 0.24) 50%,
    transparent 66%
  );
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-send-button:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow:
      0 24px 58px rgba(57, 126, 206, 0.37),
      0 0 40px rgba(101, 210, 208, 0.17);
  }

  html.nautico-futuristic-ui .nautico-send-button:not(:disabled):hover::after {
    animation: nauticoButtonSweep 0.75s ease forwards;
  }
}

/* ------------------------------------------------------------------------
   Advanced Protect drawer
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-advanced-drawer {
  border-left: 1px solid rgba(122, 221, 230, 0.17);
  background:
    radial-gradient(
      circle at 95% 2%,
      rgba(103, 210, 206, 0.18),
      transparent 19rem
    ),
    radial-gradient(
      circle at 10% 45%,
      rgba(91, 144, 230, 0.13),
      transparent 24rem
    ),
    linear-gradient(155deg, rgba(5, 17, 30, 0.985), rgba(9, 32, 49, 0.98)) !important;
  color: rgba(240, 250, 253, 0.94);
  box-shadow: -30px 0 100px rgba(0, 6, 17, 0.42);
  backdrop-filter: blur(30px) saturate(1.16);
}

html.nautico-futuristic-ui .nautico-advanced-drawer-header {
  border-bottom: 1px solid rgba(115, 214, 224, 0.11);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
}

html.nautico-futuristic-ui .nautico-advanced-drawer-eyebrow {
  color: #78e0e8;
}

html.nautico-futuristic-ui .nautico-advanced-drawer-title {
  color: #f5fbff;
}

html.nautico-futuristic-ui .nautico-advanced-drawer-subtitle {
  color: rgba(222, 240, 247, 0.66);
}

html.nautico-futuristic-ui .nautico-advanced-close {
  border: 1px solid rgba(125, 217, 226, 0.15);
  background: rgba(255, 255, 255, 0.055);
  color: #f3fbff;
}

html.nautico-futuristic-ui .nautico-advanced-close:hover {
  background: rgba(105, 210, 211, 0.11);
  box-shadow: 0 0 28px rgba(95, 203, 214, 0.08);
}

/* ------------------------------------------------------------------------
   Successful transfer journey
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-success-orbit {
  border: 1px solid rgba(103, 210, 206, 0.28);
  background: radial-gradient(
    circle,
    rgba(103, 210, 206, 0.2),
    rgba(87, 143, 226, 0.08) 55%,
    transparent 70%
  );
  box-shadow: 0 0 45px rgba(99, 210, 213, 0.16);
}

html.nautico-futuristic-ui .nautico-journey__step {
  border: 1px solid rgba(25, 78, 106, 0.1);
  border-radius: 14px;
  background: rgba(248, 252, 253, 0.73);
}

html.nautico-futuristic-ui .nautico-journey__step.is-complete {
  border-color: rgba(89, 190, 195, 0.24);
  background: linear-gradient(
    135deg,
    rgba(225, 248, 247, 0.9),
    rgba(240, 249, 252, 0.82)
  );
}

/* ------------------------------------------------------------------------
   Transfer detail timeline
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-timeline {
  scrollbar-width: thin;
  scrollbar-color: rgba(87, 184, 201, 0.42) transparent;
}

html.nautico-futuristic-ui .nautico-timeline__item {
  position: relative;
  border-color: rgba(30, 83, 111, 0.1) !important;
  transition:
    background-color 0.17s ease,
    transform 0.17s ease;
}

html.nautico-futuristic-ui .nautico-timeline__item::before {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  left: 0;
  top: 1rem;
  border-radius: 999px;
  background: #65d2d0;
  box-shadow: 0 0 18px rgba(101, 210, 208, 0.45);
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-timeline__item:hover {
    transform: translateX(2px);
    background: rgba(102, 210, 208, 0.045);
  }
}

/* ------------------------------------------------------------------------
   Notifications
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-notifications-stage section.nautico-card {
  box-shadow: 0 25px 80px rgba(0, 9, 22, 0.25) !important;
}

/* ------------------------------------------------------------------------
   File request workspace
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-request-card {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui section.nautico-request-card:hover {
    transform: translateY(-3px);
    border-color: rgba(99, 206, 214, 0.3) !important;
  }
}

/* ------------------------------------------------------------------------
   Public file request / claim pages
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(.nautico-public-request-aside, .nautico-claim-aside) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(120, 219, 228, 0.17);
  border-radius: 25px;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(106, 220, 226, 0.27),
      transparent 19rem
    ),
    radial-gradient(
      circle at 98% 12%,
      rgba(89, 144, 230, 0.24),
      transparent 23rem
    ),
    linear-gradient(135deg, rgba(4, 15, 27, 0.97), rgba(9, 38, 58, 0.95)) !important;
  box-shadow: 0 32px 100px rgba(0, 7, 19, 0.4);
}

html.nautico-futuristic-ui
  :is(.nautico-public-request-aside, .nautico-claim-aside)::after {
  content: '';
  position: absolute;
  pointer-events: none;
  width: 18rem;
  height: 18rem;
  right: -9rem;
  bottom: -10rem;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(107, 220, 224, 0.2),
    transparent 68%
  );
}

html.nautico-futuristic-ui .nautico-public-upload {
  position: relative;
  overflow: hidden;
  border-color: rgba(75, 153, 188, 0.27) !important;
  background: linear-gradient(
    145deg,
    rgba(248, 252, 253, 0.94),
    rgba(237, 247, 250, 0.86)
  );
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui .nautico-public-upload:hover {
    transform: translateY(-2px);
    border-color: rgba(101, 210, 208, 0.6) !important;
    box-shadow: 0 17px 44px rgba(20, 95, 130, 0.12);
  }
}

/* ------------------------------------------------------------------------
   Generic NauticoShell pages:
   Security, Spaces, Activity, Receipt verification and similar screens
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-shell-frame
  #nautico-main-content
  :is(section, article, form, aside)
  [class*='rounded'][class*='border'] {
  border-color: rgba(118, 211, 221, 0.14) !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(103, 210, 206, 0.085),
      transparent 11rem
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(239, 248, 250, 0.88)
    ) !important;
  box-shadow: 0 22px 70px rgba(0, 9, 22, 0.22);
  backdrop-filter: blur(24px) saturate(1.12);
}

/* compact metric/info cards */

html.nautico-futuristic-ui
  .nautico-shell-frame
  #nautico-main-content
  article[class*='rounded'] {
  transition:
    transform 0.19s ease,
    box-shadow 0.19s ease,
    border-color 0.19s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-shell-frame
    #nautico-main-content
    article[class*='rounded']:hover {
    transform: translateY(-3px);
    border-color: rgba(101, 210, 208, 0.28) !important;
    box-shadow: 0 28px 75px rgba(0, 9, 22, 0.27);
  }
}

/* ------------------------------------------------------------------------
   NauticoShell header — closer to homepage navigation
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-shell-header {
  min-height: 72px;
  background: linear-gradient(
    180deg,
    rgba(3, 12, 23, 0.94),
    rgba(5, 19, 33, 0.83)
  ) !important;
  box-shadow: 0 16px 55px rgba(0, 5, 16, 0.34);
}

html.nautico-futuristic-ui .nautico-shell-header .nautico-logo {
  filter: drop-shadow(0 0 18px rgba(107, 218, 226, 0.18));
}

html.nautico-futuristic-ui .nautico-shell-user-pill {
  color: rgba(235, 248, 251, 0.78) !important;
  border-color: rgba(116, 211, 222, 0.14) !important;
  background: rgba(8, 28, 44, 0.72) !important;
  box-shadow: 0 8px 28px rgba(0, 7, 18, 0.2) !important;
  backdrop-filter: blur(20px);
}

html.nautico-futuristic-ui .nautico-mobile-nav {
  border-color: rgba(117, 213, 223, 0.1);
  background: rgba(4, 17, 29, 0.95) !important;
}

/* ------------------------------------------------------------------------
   Drive / My Files — stronger homepage family resemblance
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-drive-shell
  .dashboard-grid-sidenav-left
  > * {
  border-right: 1px solid rgba(113, 214, 224, 0.11);
  background: linear-gradient(
    180deg,
    rgba(4, 15, 27, 0.97),
    rgba(7, 27, 43, 0.94)
  ) !important;
  color: rgba(236, 248, 251, 0.88);
  box-shadow: 18px 0 60px rgba(0, 7, 18, 0.24);
  backdrop-filter: blur(25px) saturate(1.14);
}

html.nautico-futuristic-ui
  .nautico-drive-shell
  .dashboard-grid-sidenav-left
  :is(a, button) {
  border-radius: 12px;
  transition:
    background-color 0.17s ease,
    color 0.17s ease,
    transform 0.17s ease;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-drive-shell
    .dashboard-grid-sidenav-left
    :is(a, button):hover {
    color: #fff;
    transform: translateX(2px);
    background: linear-gradient(
      90deg,
      rgba(105, 211, 213, 0.11),
      rgba(84, 143, 225, 0.07)
    );
  }
}

/* file tiles become glass cards */

html.nautico-futuristic-ui .nautico-drive-shell [class*='file-grid-item'] {
  border: 1px solid rgba(102, 194, 205, 0.1);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.94),
    rgba(240, 248, 250, 0.87)
  );
  box-shadow: 0 12px 36px rgba(0, 10, 24, 0.09);
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-drive-shell
    [class*='file-grid-item']:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 210, 215, 0.28);
    box-shadow:
      0 25px 65px rgba(0, 10, 24, 0.17),
      0 0 30px rgba(90, 190, 208, 0.06);
  }
}

/* ------------------------------------------------------------------------
   Admin content — homepage visual family but productivity-first
   ------------------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content {
  position: relative;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.rounded-panel, [class*='rounded'][class*='border']) {
  border-color: rgba(113, 203, 214, 0.12) !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  article[class*='rounded'] {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(103, 210, 206, 0.07),
      transparent 10rem
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(241, 248, 251, 0.89)
    ) !important;
  box-shadow: 0 19px 60px rgba(0, 9, 22, 0.15);
}

/* ------------------------------------------------------------------------
   Motion
   ------------------------------------------------------------------------ */

@keyframes nauticoPageWaterDrift {
  from {
    background-position:
      0 0,
      0 0,
      0 0;
  }

  to {
    background-position:
      220px 90px,
      -270px 120px,
      116px 58px;
  }
}

@keyframes nauticoPageGlow {
  from {
    transform: translate3d(0, -12px, 0) scale(1);
  }

  to {
    transform: translate3d(-32px, 36px, 0) scale(1.1);
  }
}

@keyframes nauticoButtonSweep {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

/* ------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
  html.nautico-futuristic-ui
    :is(
      .nautico-library-hero,
      .nautico-detail-hero,
      .nautico-notifications-hero
    ) {
    box-shadow: 0 24px 70px rgba(0, 7, 18, 0.3);
  }

  html.nautico-futuristic-ui
    :is(
      .nautico-card,
      .nautico-request-card,
      .nautico-transfer-card,
      .nautico-success-card
    ) {
    box-shadow: 0 17px 52px rgba(0, 9, 22, 0.19) !important;
  }
}

@media (max-width: 767px) {
  html.nautico-futuristic-ui
    :is(
      .nautico-library-stage,
      .nautico-send-stage,
      .nautico-detail-stage,
      .nautico-requests-stage,
      .nautico-notifications-stage,
      .nautico-claim-stage,
      .nautico-public-request-stage
    )::before {
    opacity: 0.43;
    background-size:
      170px 78px,
      210px 100px,
      100px 100px;
  }

  html.nautico-futuristic-ui
    :is(
      .nautico-library-stage,
      .nautico-send-stage,
      .nautico-detail-stage,
      .nautico-requests-stage,
      .nautico-notifications-stage,
      .nautico-claim-stage,
      .nautico-public-request-stage
    )::after {
    width: 25rem;
    height: 25rem;
    right: -17rem;
  }

  html.nautico-futuristic-ui
    :is(
      .nautico-library-hero,
      .nautico-detail-hero,
      .nautico-notifications-hero,
      .nautico-public-request-aside,
      .nautico-claim-aside
    ) {
    border-radius: 20px;
  }

  html.nautico-futuristic-ui .nautico-transfer-card {
    min-height: auto;
  }
}

/* Maintain accessibility / performance preference */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    :is(
      .nautico-library-stage,
      .nautico-send-stage,
      .nautico-detail-stage,
      .nautico-requests-stage,
      .nautico-notifications-stage,
      .nautico-claim-stage,
      .nautico-public-request-stage
    )::before,
  html.nautico-futuristic-ui
    :is(
      .nautico-library-stage,
      .nautico-send-stage,
      .nautico-detail-stage,
      .nautico-requests-stage,
      .nautico-notifications-stage,
      .nautico-claim-stage,
      .nautico-public-request-stage
    )::after,
  html.nautico-futuristic-ui .nautico-send-button::after {
    animation: none !important;
  }
}

/* ========================================================================
   END C11-D2B PAGE LEVEL HOMEPAGE PARITY
   ======================================================================== */

/* ============================================================
   C11-D2D SIMPLE RESPONSIVE REDESIGN
   One visual system. Minimal effects. Responsive first.
   ============================================================ */

/* ---------- Nautico application shell ---------- */

html.nautico-futuristic-ui .nautico-shell-frame {
  overflow-x: hidden;
  color: #eef8fb;
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(91, 196, 214, 0.13),
      transparent 30rem
    ),
    radial-gradient(
      circle at 88% 5%,
      rgba(77, 124, 254, 0.1),
      transparent 32rem
    ),
    linear-gradient(145deg, #06111d 0%, #091e30 55%, #061522 100%) !important;
}

html.nautico-futuristic-ui .nautico-page-title {
  color: #f5fbff;
}

/* Keep one navigation only at each breakpoint. */

@media (min-width: 1024px) {
  html.nautico-futuristic-ui
    .nautico-shell-header
    nav[aria-label='Primary navigation'] {
    display: flex !important;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  html.nautico-futuristic-ui
    .nautico-shell-header
    nav[aria-label='Primary navigation'] {
    display: none !important;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav {
    display: block !important;
    overflow: visible !important;
    padding: 8px 10px;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav > div {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    min-width: 0 !important;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav .nautico-shell-nav-link {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 7px 5px;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    font-size: 0.78rem;
  }
}

@media (max-width: 520px) {
  html.nautico-futuristic-ui .nautico-mobile-nav > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- Send / Transfers ---------- */

html.nautico-futuristic-ui .nautico-send-stage,
html.nautico-futuristic-ui .nautico-library-stage {
  color: #eef8fb;
}

html.nautico-futuristic-ui .nautico-send-stage .nautico-card,
html.nautico-futuristic-ui .nautico-send-stage .nautico-dropzone,
html.nautico-futuristic-ui .nautico-send-stage .nautico-protection-panel {
  color: #10202d;
}

html.nautico-futuristic-ui .nautico-library-hero {
  color: #f6fbff;
}

/* Empty/loading areas on dark Nautico pages. */

html.nautico-futuristic-ui
  .nautico-library-stage
  :is([class*='empty'], [class*='Empty']) {
  color: rgba(238, 248, 251, 0.9);
}

/* ---------- Login ---------- */

html.nautico-futuristic-ui .nautico-auth-stage {
  background:
    radial-gradient(
      circle at 15% 8%,
      rgba(103, 210, 206, 0.19),
      transparent 27rem
    ),
    radial-gradient(
      circle at 88% 6%,
      rgba(93, 145, 235, 0.19),
      transparent 30rem
    ),
    linear-gradient(145deg, #040c16, #081d2e 55%, #061522) !important;
}

/*
 * Simple ocean-line texture instead of a busy
 * circuit-board appearance.
 */
html.nautico-futuristic-ui .nautico-auth-stage::before {
  background-image:
    linear-gradient(rgba(108, 216, 225, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 216, 225, 0.035) 1px, transparent 1px) !important;

  background-size: 52px 52px !important;
}

/* ---------- My Files ---------- */

html.nautico-futuristic-ui .nautico-drive-shell {
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 4% 0%,
      rgba(103, 210, 206, 0.12),
      transparent 28rem
    ),
    linear-gradient(145deg, #071522, #0a2337) !important;
}

html.nautico-futuristic-ui .nautico-drive-shell .dashboard-grid-sidenav-left,
html.nautico-futuristic-ui
  .nautico-drive-shell
  .dashboard-grid-sidenav-left
  > * {
  background: linear-gradient(
    180deg,
    rgba(5, 17, 29, 0.98),
    rgba(7, 28, 44, 0.96)
  ) !important;

  color: rgba(238, 249, 252, 0.88);
}

html.nautico-futuristic-ui .nautico-drive-shell .dashboard-grid-content,
html.nautico-futuristic-ui .nautico-drive-shell .dashboard-rounded-panel {
  min-width: 0;
}

/* ---------- Admin ---------- */

html.nautico-futuristic-ui .nautico-admin-shell {
  overflow-x: hidden;
  background:
    radial-gradient(
      circle at 3% 0%,
      rgba(103, 210, 206, 0.1),
      transparent 28rem
    ),
    linear-gradient(145deg, #071522, #0a2032) !important;
}

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content {
  min-width: 0;
  max-width: 100%;
}

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-rounded-panel {
  min-width: 0;
  max-width: 100%;
}

html.nautico-futuristic-ui .nautico-admin-shell :is(canvas, svg) {
  max-width: 100% !important;
}

/* Tablet */

@media (min-width: 768px) and (max-width: 1023px) {
  html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content {
    padding-inline: 16px;
  }

  html.nautico-futuristic-ui .nautico-drive-shell .dashboard-grid-content {
    min-width: 0;
  }
}

/* Mobile */

@media (max-width: 767px) {
  html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content {
    width: 100%;
    overflow-x: hidden;
  }

  html.nautico-futuristic-ui
    .nautico-admin-shell
    .dashboard-grid-content
    [class*='grid-cols-4'] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.nautico-futuristic-ui .nautico-admin-shell .dashboard-rounded-panel {
    overflow: hidden;
  }

  html.nautico-futuristic-ui .nautico-admin-shell table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  html.nautico-futuristic-ui .nautico-drive-shell .dashboard-rounded-panel {
    border-radius: 16px;
  }
}

@media (max-width: 479px) {
  html.nautico-futuristic-ui
    .nautico-admin-shell
    .dashboard-grid-content
    [class*='grid-cols-4'] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html.nautico-futuristic-ui .nautico-shell-user-pill {
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Keep effects cheap for many client devices. */

@media (max-width: 767px) {
  html.nautico-futuristic-ui body::after,
  html.nautico-futuristic-ui .nautico-send-stage::after,
  html.nautico-futuristic-ui .nautico-library-stage::after {
    opacity: 0.35;
    filter: blur(16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui *,
  html.nautico-futuristic-ui *::before,
  html.nautico-futuristic-ui *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* END C11-D2D SIMPLE RESPONSIVE REDESIGN */

/* ============================================================
   C11-D2E SIMPLE VISUAL POLISH
   Small visual corrections only.
   ============================================================ */

/* Nautico wordmark must stay readable over the dark shell. */
html.nautico-futuristic-ui .nautico-shell-header .nautico-logo__word {
  color: #f3fbff !important;
  text-shadow: 0 0 18px rgba(101, 211, 222, 0.12);
}

/*
 * Seven navigation destinations fit comfortably as
 * 4 + 3 on normal phone widths. This avoids a tall
 * three-row navigation block.
 */
@media (max-width: 520px) {
  html.nautico-futuristic-ui .nautico-mobile-nav {
    padding: 7px 8px !important;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav > div {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 4px !important;
  }

  html.nautico-futuristic-ui .nautico-mobile-nav .nautico-shell-nav-link {
    min-height: 40px;

    padding: 6px 3px;

    font-size: 0.72rem;

    line-height: 1.1;
  }
}

/* Empty transfer state sits on a dark cinematic surface. */
html.nautico-futuristic-ui .nautico-library-stage [role='status'] {
  color: #f3fbff;
}

html.nautico-futuristic-ui .nautico-library-stage [role='status'] .text-muted {
  color: rgba(225, 240, 246, 0.72) !important;
}

html.nautico-futuristic-ui .nautico-library-stage [role='status'] a {
  color: #ffffff;
}

/* END C11-D2E SIMPLE VISUAL POLISH */

/* ============================================================
   C11-D2F PROFESSIONAL FUTURISTIC LAYOUT
   Professional information hierarchy on top of Nautico's
   cinematic / ocean-futuristic visual language.
   ============================================================ */

html.nautico-futuristic-ui {
  --nautico-content-max: 1320px;
  --nautico-card-radius: 22px;
  --nautico-card-border: rgba(126, 197, 216, 0.18);
  --nautico-card-shadow: 0 18px 60px rgba(0, 16, 30, 0.12);
}

/* ------------------------------------------------------------
   Main content rhythm
   ------------------------------------------------------------ */

html.nautico-futuristic-ui #nautico-main-content {
  width: 100%;
}

html.nautico-futuristic-ui .nautico-pro-page {
  position: relative;
  width: 100%;
  isolation: isolate;
}

/*
 * Keep page content visually centred even on very large
 * monitors instead of allowing controls to drift apart.
 */
html.nautico-futuristic-ui
  .nautico-shell-frame
  :is(.nautico-pro-page, .nautico-spaces-grid) {
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Premium hero hierarchy
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  :is(
    .nautico-library-hero,
    .nautico-detail-hero,
    .nautico-notifications-hero
  ) {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(132, 217, 227, 0.18);
  box-shadow:
    0 24px 70px rgba(0, 9, 22, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html.nautico-futuristic-ui
  :is(
    .nautico-library-hero,
    .nautico-detail-hero,
    .nautico-notifications-hero
  )::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 85% 5%,
    rgba(84, 211, 218, 0.13),
    transparent 34%
  );
}

html.nautico-futuristic-ui
  :is(.nautico-library-hero, .nautico-detail-hero, .nautico-notifications-hero)
  > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   Consistent professional cards
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(.nautico-card, .nautico-request-card, section.rounded-panel),
html.nautico-futuristic-ui .nautico-spaces-grid > * {
  border-color: var(--nautico-card-border);
}

html.nautico-futuristic-ui .nautico-pro-page .nautico-card,
html.nautico-futuristic-ui .nautico-pro-page .nautico-request-card {
  box-shadow: var(--nautico-card-shadow);
}

/*
 * Dense functional areas should stay bright enough for
 * data readability while still belonging to the dark shell.
 */
html.nautico-futuristic-ui
  .nautico-pro-page
  :is(section.rounded-panel, .nautico-card, .nautico-request-card) {
  backdrop-filter: blur(14px);
}

/* ------------------------------------------------------------
   Typography
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-pro-page h1 {
  line-height: 1.02;
  letter-spacing: -0.04em;
}

html.nautico-futuristic-ui .nautico-pro-page h2 {
  letter-spacing: -0.018em;
}

html.nautico-futuristic-ui .nautico-pro-page p {
  text-wrap: pretty;
}

html.nautico-futuristic-ui .nautico-pro-page :is(p, .text-muted) {
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Form consistency
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-pro-page :is(input, select) {
  min-height: 44px;
}

html.nautico-futuristic-ui .nautico-pro-page :is(input, textarea, select) {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

html.nautico-futuristic-ui
  .nautico-pro-page
  :is(input, textarea, select):focus {
  border-color: rgba(67, 198, 190, 0.65);
  box-shadow: 0 0 0 3px rgba(67, 198, 190, 0.1);
}

/* ------------------------------------------------------------
   Spaces
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-spaces-grid {
  width: 100%;
  max-width: var(--nautico-content-max);
  align-items: start;
}

html.nautico-futuristic-ui .nautico-spaces-grid > * {
  min-width: 0;
}

/* ------------------------------------------------------------
   File Requests workspace
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-requests-workspace {
  align-items: start;
}

html.nautico-futuristic-ui .nautico-requests-workspace > * {
  min-width: 0;
}

/* ------------------------------------------------------------
   Notifications workspace
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-notifications-grid {
  align-items: start;
}

html.nautico-futuristic-ui .nautico-notifications-grid > * {
  min-width: 0;
}

/* ------------------------------------------------------------
   Transfer detail
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-detail-layout {
  align-items: start;
}

html.nautico-futuristic-ui .nautico-detail-layout > * {
  min-width: 0;
}

/* ------------------------------------------------------------
   KPI cards
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-kpi-grid > * {
  min-width: 0;
  border-radius: 18px;
  border: 1px solid rgba(126, 197, 216, 0.14);
  box-shadow: 0 12px 36px rgba(0, 16, 30, 0.08);
}

/* ------------------------------------------------------------
   Desktop: useful sticky side rails
   ------------------------------------------------------------ */

@media (min-width: 1280px) {
  html.nautico-futuristic-ui .nautico-spaces-grid > :first-child,
  html.nautico-futuristic-ui .nautico-requests-workspace > :first-child,
  html.nautico-futuristic-ui .nautico-notifications-grid > :first-child {
    position: sticky;
    top: 94px;
    align-self: start;
  }

  html.nautico-futuristic-ui .nautico-detail-layout > :last-child {
    position: sticky;
    top: 94px;
    align-self: start;
  }
}

/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1279px) {
  html.nautico-futuristic-ui .nautico-pro-page {
    width: 100%;
  }

  html.nautico-futuristic-ui
    :is(
      .nautico-library-hero,
      .nautico-detail-hero,
      .nautico-notifications-hero
    ) {
    border-radius: 24px;
  }
}

/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  html.nautico-futuristic-ui .nautico-pro-page {
    width: 100%;
  }

  html.nautico-futuristic-ui
    :is(
      .nautico-library-hero,
      .nautico-detail-hero,
      .nautico-notifications-hero
    ) {
    border-radius: 20px;
  }

  html.nautico-futuristic-ui
    .nautico-pro-page
    :is(.nautico-card, .nautico-request-card, section.rounded-panel) {
    border-radius: 18px;
  }

  html.nautico-futuristic-ui .nautico-spaces-grid,
  html.nautico-futuristic-ui .nautico-requests-workspace,
  html.nautico-futuristic-ui .nautico-notifications-grid,
  html.nautico-futuristic-ui .nautico-detail-layout {
    gap: 12px;
  }

  /*
   * Never retain desktop sticky behaviour when the page
   * becomes a single mobile column.
   */
  html.nautico-futuristic-ui .nautico-spaces-grid > *,
  html.nautico-futuristic-ui .nautico-requests-workspace > *,
  html.nautico-futuristic-ui .nautico-notifications-grid > *,
  html.nautico-futuristic-ui .nautico-detail-layout > * {
    position: static;
  }
}

/* ------------------------------------------------------------
   Keep effects restrained on lower powered devices.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui .nautico-pro-page :is(input, textarea, select) {
    transition: none;
  }
}

/* END C11-D2F PROFESSIONAL FUTURISTIC LAYOUT */

/* ==========================================================================
   C11-D2G PROFESSIONAL CONTRAST AND DENSITY PATCH
   Requests / Spaces / Activity
   Light functional surfaces = dark navy ink.
   Futuristic treatment stays in page chrome/background, not every card.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REQUESTS
   Keep the existing hero unchanged. Tighten only the functional workspace.
   -------------------------------------------------------------------------- */

.nautico-requests-workspace {
  align-items: start;
}

.nautico-request-card {
  color: #10283a !important;
  border-color: rgba(91, 122, 142, 0.22) !important;
  box-shadow:
    0 18px 42px rgba(7, 35, 51, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.74) inset !important;
}

.nautico-request-card :is(h1, h2, h3, h4, legend, label) {
  color: #10283a !important;
}

.nautico-request-card .text-muted {
  color: #526a79 !important;
}

.nautico-request-card :is(input, textarea, select) {
  color: #10283a !important;
}

.nautico-request-card :is(input, textarea, select)::-moz-placeholder {
  color: #718795 !important;
  opacity: 1;
}

.nautico-request-card :is(input, textarea, select)::placeholder {
  color: #718795 !important;
  opacity: 1;
}

.nautico-request-card
  :is(input, textarea, select):not([type='checkbox']):not([type='radio']) {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(88, 120, 139, 0.28) !important;
}

.nautico-request-card :is(input, textarea, select):focus {
  border-color: rgba(8, 145, 178, 0.62) !important;
}

@media (min-width: 1280px) {
  .nautico-requests-workspace {
    grid-template-columns: 332px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .nautico-request-card {
    padding: 16px !important;
  }

  .nautico-request-card > * + * {
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .nautico-request-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   SPACES
   Preserve D2F left rail/workspace architecture; improve density/readability.
   -------------------------------------------------------------------------- */

.nautico-spaces-grid {
  align-items: start;
}

.nautico-spaces-grid > div:first-child > :is(form, div) {
  color: #10283a !important;
  border-color: rgba(91, 122, 142, 0.22) !important;
  box-shadow:
    0 14px 34px rgba(7, 35, 51, 0.085),
    0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
}

.nautico-spaces-grid
  > div:first-child
  > :is(form, div)
  :is(h1, h2, h3, h4, legend, label) {
  color: #10283a !important;
}

.nautico-spaces-grid > div:first-child > :is(form, div) .text-muted {
  color: #526a79 !important;
}

.nautico-spaces-grid
  > div:first-child
  > :is(form, div)
  :is(input, textarea, select) {
  color: #10283a !important;
}

.nautico-spaces-grid
  > div:first-child
  > :is(form, div)
  :is(input, textarea, select)::-moz-placeholder {
  color: #718795 !important;
  opacity: 1;
}

.nautico-spaces-grid
  > div:first-child
  > :is(form, div)
  :is(input, textarea, select)::placeholder {
  color: #718795 !important;
  opacity: 1;
}

/* selected Space functional surfaces */
.nautico-spaces-grid > div:last-child section.rounded-2xl.border.bg {
  color: #10283a !important;
  border-color: rgba(91, 122, 142, 0.22) !important;
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.border.bg
  :is(h1, h2, h3, h4, legend, label) {
  color: #10283a !important;
}

.nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.border.bg
  .text-muted {
  color: #526a79 !important;
}

/* Empty state must remain visibly intentional on a light surface. */
.nautico-spaces-grid .text-center.text-sm.text-muted {
  color: #536c7c !important;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 1280px) {
  .nautico-spaces-grid {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .nautico-spaces-grid > div:first-child {
    gap: 12px;
  }

  .nautico-spaces-grid > div:first-child > form {
    padding: 15px !important;
  }
}

@media (max-width: 767px) {
  .nautico-spaces-grid {
    gap: 14px !important;
  }

  .nautico-spaces-grid > div:first-child > form {
    padding: 14px !important;
  }

  .nautico-spaces-grid .text-center.text-sm.text-muted {
    padding: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   ACTIVITY
   KPI hierarchy + readable Recent transfer state / empty state.
   -------------------------------------------------------------------------- */

.nautico-kpi-grid {
  gap: 10px !important;
}

.nautico-kpi-grid > * {
  min-width: 0;
  color: #10283a !important;
  border-color: rgba(91, 122, 142, 0.22) !important;
  box-shadow:
    0 12px 30px rgba(7, 35, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.68) inset !important;
}

.nautico-kpi-grid > * .text-muted {
  color: #587080 !important;
}

/* KPI numerical/value hierarchy without adding decorative glow. */
.nautico-kpi-grid
  > *
  :is(.text-xl, .text-2xl, .text-3xl, .font-bold, .font-semibold) {
  color: #0b293c !important;
}

.nautico-kpi-grid > * :is(.text-2xl, .text-3xl).font-bold,
.nautico-kpi-grid > * .font-bold:is(.text-2xl, .text-3xl) {
  letter-spacing: -0.025em;
}

/* Activity's light functional sections */
.nautico-kpi-grid ~ section.rounded-2xl.border.bg {
  color: #10283a !important;
  border-color: rgba(91, 122, 142, 0.22) !important;
  box-shadow:
    0 14px 34px rgba(7, 35, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.68) inset !important;
}

.nautico-kpi-grid ~ section.rounded-2xl.border.bg :is(h1, h2, h3, h4, label) {
  color: #10283a !important;
}

.nautico-kpi-grid ~ section.rounded-2xl.border.bg .text-muted {
  color: #556e7d !important;
}

/* The empty state should read as a deliberate state, not disabled text. */
.nautico-kpi-grid
  ~ section.rounded-2xl.border.bg
  :is(.text-center, [class*='empty'])
  .text-muted,
.nautico-kpi-grid ~ section.rounded-2xl.border.bg :is(.text-center.text-muted) {
  color: #536c7c !important;
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .nautico-kpi-grid > * {
    padding: 14px !important;
  }

  .nautico-kpi-grid ~ section.rounded-2xl.border.bg {
    padding: 16px !important;
    margin-top: 16px !important;
  }
}

@media (max-width: 767px) {
  .nautico-kpi-grid {
    gap: 9px !important;
  }

  .nautico-kpi-grid > * {
    padding: 12px !important;
  }

  .nautico-kpi-grid ~ section.rounded-2xl.border.bg {
    padding: 14px !important;
    margin-top: 14px !important;
  }
}

/* =========================================================
   C11-D2G FINAL VISUAL CONTRAST PATCH
   Requests / Spaces / Security only
   ========================================================= */

/* Requests — empty state must remain readable on dark workspace */
.nautico-futuristic-ui
  .nautico-requests-workspace
  :is(.empty-state, [data-empty-state], .nautico-empty-state),
.nautico-futuristic-ui
  .nautico-requests-workspace
  :is(.empty-state, [data-empty-state], .nautico-empty-state)
  * {
  color: rgba(224, 240, 248, 0.88);
}

/* Fallback for current request empty-state surface */
.nautico-futuristic-ui .nautico-requests-workspace [class*='empty'] {
  color: rgba(224, 240, 248, 0.88);
}

/* Spaces — right-side instructional / empty-state copy */
.nautico-futuristic-ui
  .nautico-spaces-grid
  :is(.empty-state, [data-empty-state], .nautico-empty-state),
.nautico-futuristic-ui
  .nautico-spaces-grid
  :is(.empty-state, [data-empty-state], .nautico-empty-state)
  * {
  color: rgba(224, 240, 248, 0.88);
}

/* Spaces fallback for current right-hand placeholder copy */
.nautico-futuristic-ui .nautico-spaces-grid > :not(:first-child) {
  color: rgba(224, 240, 248, 0.88);
}

/* Security — white cards need dark ink, never pale-on-white */
.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(h1, h2, h3, h4, h5, label) {
  color: #10283a;
}

/* Security descriptive body copy */
.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(p, .text-muted, small) {
  color: #526a79;
}

/* Security form labels / helper labels inside light cards */
.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is([class*='label'], [class*='heading'], [class*='title']) {
  color: #10283a;
}

/* Security inputs */
.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(input, textarea, select) {
  color: #10283a;
}

.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(input, textarea)::-moz-placeholder {
  color: #718795;
  opacity: 1;
}

.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(input, textarea)::placeholder {
  color: #718795;
  opacity: 1;
}

/* Preserve intentional semantic status colors */
.nautico-futuristic-ui
  :is(.nautico-security-page, .nautico-security-devices, [class*='security'])
  :is(.text-success, .text-danger, .text-warning) {
  color: revert;
}

/* ==========================================================================
   C18-NAUTICO-DASHBOARD-V2
   One authoritative authenticated application visual system.
   Replaces C12-C17.
   ========================================================================== */

.nautico-app-shell {
  --n2-navy-950: #06182a;
  --n2-navy-900: #08243a;
  --n2-navy-800: #0a3654;
  --n2-blue: #2f6feb;
  --n2-cyan: #55cbd1;
  --n2-ink: #10263b;
  --n2-muted: #60758a;
  --n2-line: #d9e4ee;
  --n2-bg: #f4f8fc;
  --n2-card: #ffffff;
  --n2-positive: #19a974;

  min-height: 100dvh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  background:
    radial-gradient(
      circle at 86% 8%,
      rgba(71, 166, 224, 0.1),
      transparent 26rem
    ),
    linear-gradient(180deg, #f7fafe 0%, #f2f7fb 100%);
  color: var(--n2-ink);
}

.nautico-app-shell,
.nautico-app-shell * {
  box-sizing: border-box;
}

.nautico-app-skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1200;
  transform: translateY(-150%);
  border-radius: 10px;
  background: #fff;
  color: #10263b;
  padding: 9px 12px;
  box-shadow: 0 12px 30px rgba(6, 24, 42, 0.16);
}

.nautico-app-skip-link:focus {
  transform: none;
}

.nautico-app-sidebar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  width: 250px;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid rgba(148, 213, 240, 0.13);
  background:
    radial-gradient(
      circle at 20% 5%,
      rgba(85, 203, 209, 0.14),
      transparent 17rem
    ),
    linear-gradient(180deg, #06233a 0%, #07314e 50%, #073d5d 100%);
  color: #eaf6fc;
  box-shadow: 14px 0 42px rgba(5, 28, 47, 0.08);
}

.nautico-app-brand {
  flex: none;
  min-height: 78px;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(183, 225, 242, 0.1);
}

.nautico-app-brand-link {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  border-radius: 12px;
}

.nautico-logo {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.nautico-logo__image {
  display: block;
  width: auto;
  max-width: 168px;
  height: 38px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

.nautico-logo--compact .nautico-logo__image {
  width: 38px;
  height: 38px;
  max-width: 38px;
}

.nautico-app-nav-scroll {
  min-height: 0;
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 10px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 218, 239, 0.3) transparent;
}

.nautico-app-nav-section {
  margin-top: 10px;
}

.nautico-app-nav-section:first-child {
  margin-top: 0;
}

.nautico-app-nav-heading {
  padding: 7px 11px 6px;
  color: rgba(195, 225, 239, 0.58);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.nautico-app-nav-item {
  position: relative;
  display: flex;
  min-height: 43px;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 7px 11px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: rgba(232, 245, 251, 0.82);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}

.nautico-app-nav-item:hover {
  border-color: rgba(140, 211, 240, 0.12);
  background: rgba(255, 255, 255, 0.065);
  color: #fff;
  transform: translateX(2px);
}

.nautico-app-nav-item.is-active {
  border-color: rgba(119, 208, 245, 0.27);
  background: linear-gradient(
    105deg,
    rgba(47, 111, 235, 0.94),
    rgba(50, 164, 215, 0.83)
  );
  color: #fff;
  box-shadow:
    0 8px 24px rgba(25, 108, 182, 0.23),
    inset 0 1px rgba(255, 255, 255, 0.15);
}

.nautico-app-nav-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.055);
  color: #b9e0ef;
}

.nautico-app-nav-item.is-active .nautico-app-nav-icon {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
}

.nautico-app-nav-active-dot {
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 999px;
  background: #9ceaff;
  box-shadow:
    0 0 0 3px rgba(156, 234, 255, 0.08),
    0 0 14px rgba(156, 234, 255, 0.9);
}

.nautico-app-protection-panel {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  margin: 10px 2px 6px;
  padding: 11px;
  border: 1px solid rgba(155, 216, 239, 0.13);
  border-radius: 14px;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0.06),
    rgba(63, 167, 213, 0.07)
  );
}

.nautico-app-protection-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(61, 175, 220, 0.11);
  color: #83d9ee;
}

.nautico-app-protection-panel strong {
  display: block;
  color: #f3fbff;
  font-size: 11px;
}

.nautico-app-protection-panel span {
  display: block;
  margin-top: 2px;
  color: rgba(211, 237, 247, 0.58);
  font-size: 8.5px;
  line-height: 1.45;
}

.nautico-app-sidebar-footer {
  flex: none;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 10px 11px;
  padding: 10px 12px;
  border: 1px solid rgba(167, 219, 239, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
}

.nautico-app-sidebar-status-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 999px;
  background: #6fe4b3;
  box-shadow: 0 0 14px rgba(111, 228, 179, 0.75);
}

.nautico-app-sidebar-footer strong,
.nautico-app-sidebar-footer span {
  display: block;
}

.nautico-app-sidebar-footer strong {
  color: #fff;
  font-size: 10px;
}

.nautico-app-sidebar-footer span {
  margin-top: 1px;
  color: rgba(217, 241, 250, 0.58);
  font-size: 8px;
}

/* MAIN APP */

.nautico-app-main {
  min-width: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.nautico-app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  min-height: 64px;
  flex: none;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(198, 213, 225, 0.72);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 20px rgba(21, 49, 73, 0.035);
}

.nautico-app-page-context {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.nautico-app-page-eyebrow {
  color: #6e8296;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.nautico-app-page-context strong {
  margin-top: 2px;
  overflow: hidden;
  color: #132b42;
  font-size: 15px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nautico-app-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

.nautico-app-top-action,
.nautico-app-account {
  border: 1px solid #dbe6ef;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 5px 18px rgba(14, 46, 72, 0.045),
    inset 0 1px rgba(255, 255, 255, 0.9);
}

.nautico-app-top-action {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  color: #3b5e7a;
}

.nautico-app-top-action:hover {
  border-color: #b9d5e8;
  background: #f8fbfd;
  color: #1d65b6;
}

.nautico-app-account {
  display: flex;
  min-height: 40px;
  max-width: 255px;
  align-items: center;
  gap: 9px;
  padding: 4px 9px 4px 5px;
  border-radius: 13px;
  color: #17334b;
  text-decoration: none;
}

.nautico-app-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, #2f6feb, #2c91c6);
  color: #fff;
  font-size: 13px;
  font-weight: 850;
  box-shadow: 0 6px 16px rgba(47, 111, 235, 0.22);
}

.nautico-app-account-copy {
  min-width: 0;
}

.nautico-app-account-copy strong,
.nautico-app-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nautico-app-account-copy strong {
  color: #17334b;
  font-size: 10px;
}

.nautico-app-account-copy small {
  margin-top: 1px;
  color: #8192a2;
  font-size: 7.5px;
}

.nautico-app-menu-button {
  display: none;
}

.nautico-app-mobile-backdrop {
  display: none;
}

/* CONTENT */

.nautico-app-content {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 24px;
}

.nautico-app-content-header {
  min-width: 0;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.nautico-app-content-header > div:first-child > span {
  display: block;
  color: #687f94;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.17em;
}

.nautico-app-content-header h1 {
  margin: 5px 0 0;
  color: #10283f;
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.nautico-app-content-security {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  padding: 7px 10px;
  border: 1px solid #dce9e4;
  border-radius: 999px;
  background: rgba(249, 255, 252, 0.85);
  color: #3f765f;
  font-size: 8.5px;
  font-weight: 750;
}

.nautico-app-content-security-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5bc88e;
  box-shadow: 0 0 0 4px rgba(91, 200, 142, 0.08);
}

.nautico-app-page-body {
  min-width: 0;
  min-height: 0;
  flex: 1;
  color: var(--n2-ink);
}

/* --------------------------------------------------------------------------
   DRIVE — native engine, full usable width
   -------------------------------------------------------------------------- */

.nautico-drive-unified-body {
  display: flex;
  min-height: 0;
  width: 100%;
}

.nautico-drive-unified-layout {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 580px;
  height: calc(100dvh - 164px) !important;
  overflow: hidden;
  border: 1px solid #d6e1eb;
  border-radius: 22px;
  background: #fff;
  box-shadow:
    0 18px 50px rgba(20, 52, 78, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.92) inset;
}

.nautico-drive-engine {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.nautico-drive-unified-panel {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: #fff;
}

.nautico-drive-unified-heading {
  display: flex;
  min-height: 65px;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid #e2e9f0;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.nautico-drive-unified-heading > div:first-child {
  min-width: 0;
}

.nautico-drive-unified-heading > div:first-child > span {
  display: block;
  color: #4b6c86;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.nautico-drive-unified-heading > div:first-child > p {
  margin: 3px 0 0;
  color: #8293a2;
  font-size: 10px;
}

.nautico-drive-unified-heading > div:last-child {
  width: auto;
  min-width: 118px;
}

.nautico-drive-unified-heading button {
  min-height: 38px;
  border-radius: 11px !important;
  color: #fff !important;
  font-weight: 750;
}

.nautico-drive-unified-surface {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.nautico-drive-unified-surface .dashboard-grid-header {
  grid-area: auto !important;
  flex: none;
  background: #fff;
}

.nautico-drive-unified-surface .compact-scrollbar {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  color: #1b3348;
}

.nautico-drive-unified-surface :is(.text-muted, [class*='text-muted']) {
  color: #6e8192 !important;
}

.nautico-drive-unified-surface :is(button, a) {
  opacity: 1;
}

.nautico-drive-details-sidenav {
  z-index: 45 !important;
  padding: 8px 8px 8px 0;
}

.nautico-drive-details-sidenav > div {
  border: 1px solid #d8e3ec !important;
  border-radius: 17px !important;
  background: #fff !important;
  box-shadow: -18px 0 44px rgba(11, 40, 63, 0.13);
}

.nautico-drive-unified-layout
  :is([role='menu'], [role='listbox'], [role='dialog']) {
  z-index: 1000;
}

/* --------------------------------------------------------------------------
   V2 MODULE BASE
   -------------------------------------------------------------------------- */

.nautico-v2-module {
  width: 100%;
  min-width: 0;
  color: #163149;
}

.nautico-v2-module :is(input, textarea, select) {
  color: #173149 !important;
  border-color: #d4e0e9 !important;
  background-color: #fff !important;
  box-shadow: none;
}

.nautico-v2-module :is(input, textarea)::-moz-placeholder {
  color: #8a9baa !important;
  opacity: 1;
}

.nautico-v2-module :is(input, textarea)::placeholder {
  color: #8a9baa !important;
  opacity: 1;
}

.nautico-v2-module :is(input, textarea, select):focus {
  border-color: #69a8dd !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(70, 143, 204, 0.1) !important;
}

.nautico-v2-module .bg-primary {
  background-color: #2f6feb !important;
}

.nautico-v2-module .text-on-primary {
  color: #fff !important;
}

.nautico-v2-module :is(button, a).bg-primary {
  color: #fff !important;
}

.nautico-v2-module :is(button, a)[class*='bg-[#07111f]'] {
  color: #fff !important;
}

.nautico-v2-module
  :is(button, a).border:not(.bg-primary):not(.bg-danger):not(.text-danger) {
  color: #18344c !important;
  background-color: #fff;
}

.nautico-v2-module :is(button, a):disabled {
  opacity: 0.55;
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  color: #163149 !important;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

.nautico-v2-module
  :is(
    .rounded-2xl.border.bg,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}

.nautico-v2-module .text-muted {
  color: #657b8e !important;
}

/* SEND */

.nautico-v2-send .nautico-send-stage {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.nautico-v2-send .nautico-send-stage > div {
  width: 100%;
  max-width: 1320px !important;
  margin: 0 auto;
  gap: 18px !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 300px) !important;
}

.nautico-v2-send .nautico-send-stage > div > section {
  padding: 22px;
  border: 1px solid #d7e2eb;
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(91, 203, 209, 0.1),
      transparent 22rem
    ),
    #fff;
  box-shadow: 0 16px 44px rgba(15, 51, 78, 0.07);
}

.nautico-v2-send .nautico-send-stage h1 {
  color: #112d45 !important;
  font-size: clamp(30px, 3.2vw, 47px) !important;
  line-height: 1.02;
}

.nautico-v2-send .nautico-send-stage section > div:first-child > p {
  color: #60788c !important;
}

.nautico-v2-send .nautico-eyebrow {
  color: #2378bc !important;
}

.nautico-v2-send .nautico-card {
  border: 1px solid #dce6ee;
  background: #fbfdff;
  color: #173149;
  box-shadow: none;
}

.nautico-v2-send .nautico-dropzone {
  border-color: #a8cfe1 !important;
  background: linear-gradient(135deg, #f7fbff, #eff9fa) !important;
  color: #173149;
}

.nautico-v2-send aside > div {
  border: 1px solid rgba(103, 200, 226, 0.14);
  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(67, 198, 190, 0.17),
      transparent 16rem
    ),
    linear-gradient(160deg, #071a2b, #0a3049) !important;
}

/* TRANSFERS */

.nautico-v2-transfers .nautico-library-stage {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.nautico-v2-transfers .nautico-library-stage > div {
  max-width: 1320px !important;
}

.nautico-v2-transfers .nautico-library-hero,
.nautico-v2-requests .nautico-library-hero {
  overflow: hidden;
  border: 1px solid rgba(94, 185, 221, 0.17);
  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(69, 198, 190, 0.17),
      transparent 24rem
    ),
    radial-gradient(
      circle at 100% 0%,
      rgba(66, 110, 195, 0.27),
      transparent 31rem
    ),
    linear-gradient(135deg, #081c2d, #0b3652) !important;
  box-shadow: 0 16px 40px rgba(12, 45, 70, 0.13);
}

.nautico-v2-transfers .nautico-library-hero {
  padding: 22px !important;
  border-radius: 23px !important;
}

.nautico-v2-transfers .nautico-library-hero h1,
.nautico-v2-requests .nautico-library-hero h1 {
  color: #fff !important;
}

.nautico-v2-transfers .nautico-library-hero p,
.nautico-v2-requests .nautico-library-hero p {
  color: rgba(226, 240, 248, 0.78) !important;
}

.nautico-v2-transfers .nautico-library-hero .nautico-eyebrow,
.nautico-v2-requests .nautico-library-hero .nautico-eyebrow {
  color: #8ce4ef !important;
}

.nautico-v2-transfers .nautico-library-hero > div:first-child {
  gap: 14px !important;
}

.nautico-v2-transfers .nautico-library-stage > div > div.mt-18 {
  border-color: #d8e3ec !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 30px rgba(19, 51, 77, 0.05) !important;
}

.nautico-v2-transfers
  [aria-label='Filter transfers']
  button:not([class*='bg-[#07111f]']) {
  border: 1px solid #d9e3ec !important;
  background: #fff !important;
  color: #425c70 !important;
}

.nautico-v2-transfers
  [aria-label='Filter transfers']
  button[class*='bg-[#07111f]'] {
  border: 1px solid #102e45 !important;
  background: #0b263b !important;
  color: #fff !important;
}

.nautico-v2-transfers .nautico-transfer-card {
  border-color: #d8e3ec !important;
  background: #fff !important;
}

/* REQUESTS */

.nautico-v2-requests .nautico-requests-stage {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.nautico-v2-requests .nautico-pro-page {
  width: 100%;
  max-width: 1320px !important;
}

.nautico-v2-requests .nautico-library-hero {
  margin-bottom: 16px !important;
  padding: 22px !important;
  border-radius: 24px !important;
}

.nautico-v2-requests .nautico-library-hero h1 {
  max-width: 900px !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1;
}

.nautico-v2-requests .nautico-requests-workspace {
  align-items: start;
  gap: 16px !important;
  grid-template-columns:
    minmax(280px, 340px)
    minmax(0, 1fr) !important;
}

.nautico-v2-requests .nautico-request-card {
  border: 1px solid #d6e2eb !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, #ffffff, #f9fcfe) !important;
  color: #173149 !important;
  box-shadow: 0 12px 36px rgba(16, 51, 78, 0.07) !important;
}

.nautico-v2-requests .nautico-request-card :is(h1, h2, h3, label, span) {
  color: #173149;
}

.nautico-v2-requests .nautico-requests-workspace > :not(:first-child) {
  color: #173149 !important;
}

.nautico-v2-requests
  .nautico-requests-workspace
  > :not(:first-child)
  :is(.rounded-2xl, [class*='border-dashed']) {
  border-color: #d8e3ec !important;
  background: #fff !important;
  color: #657b8e !important;
}

/* SPACES */

.nautico-v2-spaces .nautico-spaces-grid {
  align-items: start;
  gap: 16px !important;
  grid-template-columns:
    minmax(280px, 330px)
    minmax(0, 1fr) !important;
}

.nautico-v2-spaces .nautico-spaces-grid > div:first-child > :is(form, div) {
  overflow: hidden;
  border: 1px solid #d8e3ec !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, #ffffff, #fbfdff) !important;
  color: #173149 !important;
  box-shadow: 0 10px 32px rgba(18, 52, 79, 0.055);
}

.nautico-v2-spaces .nautico-spaces-grid > div:first-child > div > button {
  color: #173149;
}

.nautico-v2-spaces
  .nautico-spaces-grid
  > div:first-child
  > div
  > button[class*='bg-primary'] {
  background: linear-gradient(115deg, #3973ed, #58c7cf) !important;
  color: #fff !important;
}

.nautico-v2-spaces .nautico-spaces-grid > div:last-child section {
  border-radius: 20px !important;
}

/* ACTIVITY */

.nautico-v2-activity .nautico-kpi-grid {
  gap: 14px !important;
}

.nautico-v2-activity .nautico-kpi-grid > div {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  border: 1px solid #d8e3ec !important;
  border-radius: 20px !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(69, 175, 219, 0.1),
      transparent 12rem
    ),
    #fff !important;
  box-shadow: 0 10px 30px rgba(16, 50, 76, 0.055);
}

.nautico-v2-activity .nautico-kpi-grid > div::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #2f6feb, #55cbd1);
}

.nautico-v2-activity > section {
  min-height: 220px;
  border-radius: 22px !important;
}

/* SECURITY */

.nautico-v2-security .nautico-pro-page {
  width: 100%;
  max-width: 1280px !important;
}

.nautico-v2-security .nautico-pro-page > section {
  position: relative;
  overflow: hidden;
  border-radius: 21px !important;
}

.nautico-v2-security .nautico-pro-page > section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, #3272e9, #55cbd1, transparent 78%);
}

.nautico-v2-security .nautico-pro-page :is(h1, h2, h3, h4, label) {
  color: #173149;
}

.nautico-v2-security .nautico-pro-page p {
  color: #667c8f;
}

/* MOBILE */

@media (max-width: 1023px) {
  .nautico-app-shell {
    display: block;
    min-height: 100dvh;
  }

  .nautico-app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 900;
    width: min(300px, 88vw);
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 28px 0 70px rgba(3, 21, 36, 0.28);
  }

  .nautico-app-shell.is-mobile-menu-open .nautico-app-sidebar {
    transform: translateX(0);
  }

  .nautico-app-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 850;
    display: block;
    visibility: hidden;
    border: 0;
    background: rgba(4, 20, 33, 0.46);
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 180ms ease,
      visibility 180ms ease;
  }

  .nautico-app-shell.is-mobile-menu-open .nautico-app-mobile-backdrop {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .nautico-app-main {
    min-height: 100dvh;
  }

  .nautico-app-topbar {
    min-height: 58px;
    padding: 7px 10px;
  }

  .nautico-app-menu-button {
    display: flex;
    width: 38px;
    height: 38px;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid #d8e3ec;
    border-radius: 11px;
    background: #fff;
  }

  .nautico-app-menu-button span {
    width: 17px;
    height: 1.5px;
    border-radius: 2px;
    background: #244761;
  }

  .nautico-app-account {
    max-width: 44px;
    padding-right: 5px;
  }

  .nautico-app-account-copy {
    display: none;
  }

  .nautico-app-content {
    padding: 13px 12px 18px;
  }

  .nautico-app-content-header {
    align-items: center;
    margin-bottom: 11px;
  }

  .nautico-app-content-header h1 {
    font-size: 27px;
  }

  .nautico-app-content-security {
    display: none;
  }

  .nautico-drive-unified-layout {
    min-height: 0;
    height: calc(100dvh - 132px) !important;
    border-radius: 16px;
  }

  .nautico-drive-unified-heading {
    min-height: 58px;
    padding: 8px 10px;
  }

  .nautico-drive-unified-heading > div:first-child > p {
    display: none;
  }

  .nautico-drive-unified-heading > div:last-child {
    min-width: 90px;
  }

  .nautico-v2-send .nautico-send-stage > div,
  .nautico-v2-requests .nautico-requests-workspace,
  .nautico-v2-spaces .nautico-spaces-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .nautico-v2-send .nautico-send-stage > div > section {
    padding: 16px;
  }

  .nautico-v2-send aside {
    display: none !important;
  }

  .nautico-v2-requests .nautico-library-hero h1 {
    font-size: 34px !important;
  }
}

@media (max-width: 640px) {
  .nautico-app-top-action:nth-of-type(2) {
    display: none;
  }

  .nautico-app-content-header h1 {
    font-size: 25px;
  }

  .nautico-drive-unified-heading > div:first-child > span {
    font-size: 7px;
  }

  .nautico-v2-requests .nautico-library-hero,
  .nautico-v2-transfers .nautico-library-hero {
    padding: 17px !important;
    border-radius: 18px !important;
  }

  .nautico-v2-requests .nautico-library-hero h1 {
    font-size: 29px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nautico-app-nav-item,
  .nautico-app-sidebar,
  .nautico-app-mobile-backdrop {
    transition: none !important;
  }
}

/* END C18-NAUTICO-DASHBOARD-V2 */

/* ==========================================================================
   C18.1-DRIVE-DETAILS-OVERLAY-FIX
   Keep the native BeDrive details overlay below the explorer controls so
   Upload / view / Info controls always remain clickable.
   ========================================================================== */

.nautico-drive-details-sidenav {
  top: 125px !important;
  bottom: 0 !important;
  height: auto !important;
}

@media (max-width: 1023px) {
  .nautico-drive-details-sidenav {
    top: 118px !important;
  }
}

/* END C18.1-DRIVE-DETAILS-OVERLAY-FIX */

/* ==========================================================================
   C18.2-NAUTICO-FINAL-VISUAL-POLISH
   Nautico fallback branding + final contrast corrections.
   ========================================================================== */

/* Never expose the default BeDrive wordmark inside the Nautico shell. */

.nautico-logo--fallback {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.nautico-logo--fallback .nautico-logo__image {
  width: 31px;
  height: 31px;
  max-width: 31px;
  flex: none;
  -o-object-fit: contain;
     object-fit: contain;
}

.nautico-logo__wordmark {
  color: #102b42;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.nautico-logo--inverse .nautico-logo__wordmark {
  color: #ffffff;
}

.nautico-app-sidebar .nautico-logo--fallback .nautico-logo__wordmark {
  color: #f4fbff;
}

/* Send: primary file picker must remain dark and readable. */

.nautico-v2-send .nautico-dropzone button:first-of-type {
  border: 1px solid #07111f !important;
  background: #07111f !important;
  background-image: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 8px 20px rgba(7, 17, 31, 0.16) !important;
}

.nautico-v2-send .nautico-dropzone button:first-of-type:hover {
  border-color: #102f49 !important;
  background: #102f49 !important;
  color: #ffffff !important;
}

/* Transfers empty state. */

.nautico-v2-transfers .nautico-transfers-empty {
  overflow: hidden;
  border: 1px solid #d8e3ec;
  border-radius: 20px;
  background: #ffffff;
  color: #173149;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

.nautico-v2-transfers .nautico-transfers-empty :is(h1, h2, h3, h4, strong) {
  color: #173149 !important;
  opacity: 1 !important;
}

.nautico-v2-transfers .nautico-transfers-empty :is(p, span, .text-muted) {
  color: #657b8e !important;
  opacity: 1 !important;
}

.nautico-v2-transfers .nautico-transfers-empty a[href='/send'] {
  border: 1px solid #07111f !important;
  background: #07111f !important;
  background-image: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

.nautico-v2-transfers .nautico-transfers-empty a[href='/send']:hover {
  border-color: #12344f !important;
  background: #12344f !important;
  color: #ffffff !important;
}

/* Mobile topbar: avoid clipping long contextual labels. */

@media (max-width: 640px) {
  .nautico-app-page-context strong {
    max-width: 150px;
  }
}

/* END C18.2-NAUTICO-FINAL-VISUAL-POLISH */

/* ==========================================================================
   C18.3-TRANSFERS-EMPTY-CONTRAST
   EmptyState component uses generic text styling. Force readable text inside
   the Transfers empty-state while preserving the primary CTA.
   ========================================================================== */

.nautico-v2-transfers .nautico-transfers-empty {
  background: #ffffff !important;
  color: #173149 !important;
}

.nautico-v2-transfers
  .nautico-transfers-empty
  *:not(a[href='/send']):not(a[href='/send'] *) {
  color: #173149 !important;
  opacity: 1 !important;
}

.nautico-v2-transfers .nautico-transfers-empty :is(p, [class*='text-muted']) {
  color: #526b80 !important;
  opacity: 1 !important;
}

.nautico-v2-transfers .nautico-transfers-empty a[href='/send'] {
  border-color: #07111f !important;
  background: #07111f !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* END C18.3-TRANSFERS-EMPTY-CONTRAST */

/* ==========================================================================
   N8-FINAL-UNIFIED-UX-CONTRACT
   Final local UX consolidation:
   navigation alignment, module consistency, secure Send flow, Drive secure
   share bridge, System Health, responsive protection controls.
   ========================================================================== */

.nautico-app-shell {
  --n8-sidebar: 236px;
  --n8-navy: #102b46;
  --n8-navy-deep: #0a2138;
  --n8-blue: #2e70e8;
  --n8-cyan: #55cbd2;
  --n8-text: #18344c;
  --n8-muted: #657b8e;
  --n8-line: #d9e4ec;
  --n8-surface: #ffffff;
  --n8-page: #f5f8fb;
}

/* SIDEBAR */

.nautico-app-sidebar {
  width: var(--n8-sidebar) !important;
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(82, 176, 217, 0.12),
      transparent 18rem
    ),
    linear-gradient(180deg, #142f4d 0%, #173653 52%, #173d5e 100%) !important;
}

.nautico-app-brand {
  min-height: 70px !important;
  padding: 12px 16px !important;
}

.nautico-app-nav-scroll {
  padding: 8px 12px 14px !important;
}

.nautico-app-nav-section {
  margin-top: 10px !important;
}

.nautico-app-nav-heading {
  padding: 8px 8px 7px !important;
  color: rgba(205, 229, 240, 0.56) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  letter-spacing: 0.17em !important;
}

.nautico-app-nav-item {
  display: grid !important;
  grid-template-columns:
    32px
    minmax(0, 1fr)
    6px !important;
  min-height: 46px !important;
  align-items: center !important;
  -moz-column-gap: 11px !important;
       column-gap: 11px !important;
  margin: 2px 0 !important;
  padding: 7px 9px !important;
  border-radius: 13px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.nautico-app-nav-icon {
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

.nautico-app-nav-icon svg {
  display: block;
  width: 19px;
  height: 19px;
}

.nautico-app-nav-label {
  display: flex;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  margin: 0;
  padding: 0;
  line-height: 1.1 !important;
  transform: none !important;
}

.nautico-app-nav-active-dot {
  align-self: center;
  justify-self: center;
  margin: 0 !important;
}

.nautico-app-nav-item:hover {
  transform: none !important;
}

.nautico-app-nav-item.is-active {
  background: linear-gradient(
    110deg,
    rgba(48, 112, 223, 0.92),
    rgba(48, 158, 208, 0.78)
  ) !important;
}

.nautico-app-protection-panel {
  margin: 12px 0 4px !important;
}

.nautico-app-sidebar-footer {
  margin: 0 12px 12px !important;
}

.nautico-app-logout {
  border: 1px solid #d8e3ec;
  background: #fff;
}

.nautico-app-logout:disabled {
  opacity: 0.5;
}

/* MODULE BASE */

.nautico-app-page-body {
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(77, 184, 216, 0.055),
      transparent 27rem
    ),
    var(--n8-page);
}

.nautico-v2-module {
  min-height: 100%;
  color: var(--n8-text);
}

.nautico-v2-module :is(button, a, input, textarea, select) {
  font-family: inherit;
}

.nautico-v2-module :is(button, a) {
  line-height: 1.15;
}

.nautico-v2-module :is(input, textarea, select) {
  border-radius: 11px !important;
}

.nautico-module-kicker {
  color: #3479b8;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.15em;
}

/* SEND */

.nautico-v2-send .nautico-send-stage {
  margin: 0 !important;
  padding: 0 !important;
}

.nautico-send-flow {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}

.nautico-send-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--n8-line);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(84, 201, 210, 0.13),
      transparent 24rem
    ),
    #fff;
  box-shadow: 0 12px 34px rgba(18, 51, 77, 0.055);
}

.nautico-send-intro h1 {
  max-width: 780px;
  margin-top: 7px;
  color: #102d47 !important;
  font-size: clamp(29px, 3.2vw, 44px) !important;
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.nautico-send-intro p {
  max-width: 760px;
  margin-top: 9px;
  color: var(--n8-muted) !important;
  font-size: 14px;
  line-height: 1.65;
}

.nautico-send-intro-badges {
  display: flex;
  max-width: 320px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.nautico-send-intro-badges span {
  padding: 6px 9px;
  border: 1px solid #d8e5ed;
  border-radius: 999px;
  background: #f8fbfd;
  color: #3e6078;
  font-size: 10px;
  font-weight: 750;
}

.nautico-send-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(260px, 300px);
  align-items: start;
  gap: 18px;
}

.nautico-send-composer-column {
  min-width: 0;
}

.nautico-v2-send .nautico-transfer-composer {
  padding: 22px !important;
  border: 1px solid var(--n8-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 12px 34px rgba(18, 51, 77, 0.055) !important;
}

.nautico-v2-send .nautico-dropzone {
  padding: 24px !important;
  border-color: #a8cede !important;
  background: linear-gradient(135deg, #f8fbff, #f0f9fa) !important;
}

.nautico-delivery-mode-switch {
  border: 1px solid #dce6ed;
  background: #f2f6f9 !important;
}

.nautico-delivery-mode-switch button {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.nautico-protection-panel {
  overflow: visible !important;
  border-color: #cfe0eb !important;
  background: linear-gradient(180deg, #ffffff, #f9fcff) !important;
}

.nautico-protection-panel > button {
  min-height: 66px;
}

.nautico-protection-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.nautico-protection-fact {
  min-width: 0;
  padding: 11px;
  border: 1px solid #dce6ed;
  border-radius: 12px;
  background: #f7fafc;
}

.nautico-protection-fact > span {
  display: block;
  color: #718697;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nautico-protection-fact > strong {
  display: block;
  margin-top: 4px;
  color: #18344c;
  font-size: 11px;
}

.nautico-protection-fact > p {
  margin: 5px 0 0;
  color: #667d8f !important;
  font-size: 10px;
  line-height: 1.45;
}

/*
 * Dashboard Send uses a readable inline security workspace.
 * Homepage retains the existing book-style presentation.
 */

.nautico-v2-send .nautico-advanced-drawer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 12px 12px !important;
  padding: 16px !important;
  overflow: visible !important;
  border: 1px solid #cbdde8 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #ffffff, #f8fbfd) !important;
  color: #18344c !important;
  box-shadow: none !important;
  transform: none !important;
}

.nautico-v2-send .nautico-advanced-drawer::before,
.nautico-v2-send .nautico-advanced-drawer::after {
  display: none !important;
}

.nautico-v2-send .nautico-advanced-drawer-header {
  position: static !important;
  margin-bottom: 14px;
  padding: 0 0 14px !important;
  border-bottom: 1px solid #dce6ed;
  background: transparent !important;
}

.nautico-v2-send .nautico-advanced-drawer-eyebrow {
  color: #377cb7 !important;
}

.nautico-v2-send .nautico-advanced-drawer-title {
  color: #18344c !important;
}

.nautico-v2-send .nautico-advanced-drawer-subtitle {
  color: #687f91 !important;
}

.nautico-v2-send .nautico-advanced-close {
  position: static !important;
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  border: 1px solid #d6e1e9 !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #425f74 !important;
}

.nautico-control-group-heading {
  margin: 18px 0 10px;
  padding: 10px 12px;
  border-left: 3px solid #4b92dd;
  border-radius: 0 10px 10px 0;
  background: #f2f7fb;
}

.nautico-control-group-heading > strong {
  display: block;
  color: #18344c;
  font-size: 12px;
}

.nautico-control-group-heading > span {
  display: block;
  margin-top: 3px;
  color: #6a8092;
  font-size: 10px;
  line-height: 1.45;
}

.nautico-send-guide {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 12px;
}

.nautico-send-guide-card,
.nautico-send-security-note {
  border: 1px solid var(--n8-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.045);
}

.nautico-send-guide-card {
  padding: 18px;
}

.nautico-send-guide-card ol {
  display: grid;
  gap: 14px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.nautico-send-guide-card li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
}

.nautico-send-guide-card li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #eaf3fb;
  color: #2f74b1;
  font-size: 11px;
  font-weight: 850;
}

.nautico-send-guide-card li strong {
  display: block;
  color: #19364d;
  font-size: 12px;
}

.nautico-send-guide-card li p {
  margin: 3px 0 0;
  color: #6a8092 !important;
  font-size: 10px;
  line-height: 1.5;
}

.nautico-send-security-note {
  padding: 15px 16px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(78, 197, 204, 0.1),
      transparent 14rem
    ),
    #fff;
}

.nautico-send-security-note strong {
  color: #18344c;
  font-size: 12px;
}

.nautico-send-security-note p {
  margin: 6px 0 0;
  color: #687f91 !important;
  font-size: 10px;
  line-height: 1.55;
}

/* DRIVE SHARE */

.nautico-drive-advanced-share-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  padding: 15px;
  border: 1px solid #cfe1ec;
  border-radius: 16px;
  background: linear-gradient(135deg, #f7fbff, #f0f9fa);
}

.nautico-drive-advanced-share-callout strong {
  display: block;
  margin-top: 4px;
  color: #17344c;
  font-size: 13px;
}

.nautico-drive-advanced-share-callout p {
  max-width: 570px;
  margin: 5px 0 0;
  color: #677e90;
  font-size: 11px;
  line-height: 1.5;
}

.nautico-drive-advanced-share-link,
.nautico-drive-secure-share-cta {
  display: inline-flex;
  min-height: 38px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border-radius: 10px;
  background: #173653;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.nautico-drive-secure-share {
  padding: 6px 2px 8px;
  text-align: center;
}

.nautico-drive-secure-share-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  place-items: center;
  border-radius: 15px;
  background: #e6f5f2;
  color: #23836f;
  font-size: 20px;
  font-weight: 900;
}

.nautico-drive-secure-share h2 {
  max-width: 620px;
  margin: 8px auto 0;
  color: #17344c;
  font-size: 22px;
  font-weight: 850;
}

.nautico-drive-secure-share > p {
  max-width: 650px;
  margin: 8px auto 0;
  color: #647b8d;
  font-size: 12px;
  line-height: 1.65;
}

.nautico-drive-secure-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
  text-align: left;
}

.nautico-drive-secure-share-grid > div {
  padding: 12px;
  border: 1px solid #d9e5ed;
  border-radius: 12px;
  background: #f8fbfd;
}

.nautico-drive-secure-share-grid strong,
.nautico-drive-secure-share-grid span {
  display: block;
}

.nautico-drive-secure-share-grid strong {
  color: #19364d;
  font-size: 11px;
}

.nautico-drive-secure-share-grid span {
  margin-top: 4px;
  color: #687f91;
  font-size: 10px;
  line-height: 1.5;
}

/* MODULES — ONE VISUAL LANGUAGE */

.nautico-v2-transfers .nautico-library-hero,
.nautico-v2-requests .nautico-library-hero {
  border: 1px solid #d8e4ec !important;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(82, 198, 207, 0.13),
      transparent 24rem
    ),
    linear-gradient(135deg, #ffffff, #f6fafc) !important;
  color: #18344c !important;
  box-shadow: 0 12px 34px rgba(18, 51, 77, 0.055) !important;
}

.nautico-v2-transfers .nautico-library-hero h1,
.nautico-v2-requests .nautico-library-hero h1 {
  color: #17344c !important;
}

.nautico-v2-transfers .nautico-library-hero p,
.nautico-v2-requests .nautico-library-hero p {
  color: #657c8e !important;
}

.nautico-v2-transfers .nautico-library-hero .nautico-eyebrow,
.nautico-v2-requests .nautico-library-hero .nautico-eyebrow {
  color: #347bb8 !important;
}

.nautico-v2-transfers .nautico-library-hero [class*='border-white'],
.nautico-v2-requests .nautico-library-hero [class*='border-white'] {
  border-color: #d6e4ec !important;
  background: #f7fafc !important;
  color: #4a6578 !important;
}

.nautico-v2-transfers .nautico-library-hero [class*='bg-white/'] {
  border-color: #d8e4ec !important;
  background: #f7fafc !important;
  color: #17344c !important;
}

.nautico-v2-spaces :is(form, section, .overflow-hidden.rounded-2xl.border.bg),
.nautico-v2-activity :is(section, .nautico-kpi-grid > div),
.nautico-v2-security .nautico-pro-page > section,
.nautico-v2-transfer-detail :is(section, .rounded-2xl, .rounded-panel) {
  border-color: #d8e4ec !important;
  background-color: #fff !important;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

.nautico-v2-transfer-detail .nautico-detail-stage {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.nautico-v2-transfer-detail .nautico-detail-layout {
  max-width: 1320px !important;
}

/* SECURITY OVERVIEW */

.nautico-security-overview {
  display: grid;
  grid-template-columns:
    minmax(250px, 0.8fr)
    minmax(0, 1.4fr);
  gap: 18px;
  padding: 20px;
  border: 1px solid #d7e4ec;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(80, 199, 207, 0.13),
      transparent 25rem
    ),
    #fff;
  box-shadow: 0 12px 34px rgba(18, 51, 77, 0.055);
}

.nautico-security-overview-copy h2 {
  margin-top: 7px;
  color: #17344c !important;
  font-size: 24px;
  font-weight: 850;
  line-height: 1.1;
}

.nautico-security-overview-copy p {
  margin: 8px 0 0;
  color: #657c8e !important;
  font-size: 12px;
  line-height: 1.65;
}

.nautico-security-overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.nautico-security-overview-grid > div {
  padding: 12px;
  border: 1px solid #dce6ed;
  border-radius: 13px;
  background: #f8fbfd;
}

.nautico-security-overview-grid span,
.nautico-security-overview-grid strong {
  display: block;
}

.nautico-security-overview-grid span {
  color: #728798;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nautico-security-overview-grid strong {
  margin-top: 4px;
  color: #19364d;
  font-size: 12px;
}

.nautico-security-overview-grid p {
  margin: 5px 0 0;
  color: #687f91 !important;
  font-size: 10px;
  line-height: 1.5;
}

/* SYSTEM HEALTH */

.nautico-health-page {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.nautico-health-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 21px;
  border: 1px solid #d8e4ec;
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(82, 199, 207, 0.14),
      transparent 22rem
    ),
    #fff;
  box-shadow: 0 12px 34px rgba(18, 51, 77, 0.055);
}

.nautico-health-intro h2 {
  max-width: 720px;
  margin-top: 6px;
  color: #17344c;
  font-size: 26px;
  font-weight: 850;
}

.nautico-health-intro p {
  max-width: 760px;
  margin: 7px 0 0;
  color: #657c8e;
  font-size: 12px;
  line-height: 1.65;
}

.nautico-health-refresh {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 11px;
  background: #173653;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.nautico-health-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.nautico-health-summary > div {
  padding: 13px;
  border: 1px solid #dbe5ed;
  border-radius: 14px;
  background: #fff;
}

.nautico-health-summary span,
.nautico-health-summary strong {
  display: block;
}

.nautico-health-summary span {
  color: #738898;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.nautico-health-summary strong {
  margin-top: 5px;
  color: #17344c;
  font-size: 14px;
}

.nautico-health-summary strong.is-ready {
  color: #187a65;
}

.nautico-health-summary strong.is-warning {
  color: #ae6d20;
}

.nautico-health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.nautico-health-check {
  min-height: 150px;
  padding: 15px;
  border: 1px solid #dbe5ed;
  border-radius: 16px;
  background: #fff;
}

.nautico-health-check-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nautico-health-check-head strong {
  color: #18344c;
  font-size: 12px;
}

.nautico-health-check-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 999px;
  background: #c08a42;
}

.nautico-health-check.is-ok .nautico-health-check-dot {
  background: #38a383;
  box-shadow: 0 0 0 4px rgba(56, 163, 131, 0.09);
}

.nautico-health-check-state {
  margin-top: 12px;
  color: #526c7e;
  font-size: 11px;
  font-weight: 800;
}

.nautico-health-check p {
  margin: 7px 0 0;
  color: #6a8092 !important;
  font-size: 10px;
  line-height: 1.55;
}

.nautico-health-error {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #efc4c4;
  border-radius: 12px;
  background: #fff7f7;
  color: #a53c3c;
  font-size: 11px;
}

.nautico-health-notice {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid #d9e4ec;
  border-radius: 14px;
  background: #f9fbfd;
}

.nautico-health-notice strong {
  color: #18344c;
  font-size: 11px;
}

.nautico-health-notice p {
  margin: 4px 0 0;
  color: #687f91 !important;
  font-size: 10px;
  line-height: 1.55;
}

/* HOMEPAGE LOGOUT */

.nautico-auth .nautico-home-logout {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  font: inherit;
}

.nautico-auth .nautico-home-logout:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .nautico-send-layout {
    grid-template-columns: 1fr;
  }

  .nautico-send-guide {
    position: static;
    grid-template-columns: 1fr 1fr;
  }

  .nautico-protection-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nautico-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .nautico-send-intro,
  .nautico-health-intro {
    align-items: flex-start;
    flex-direction: column;
  }

  .nautico-send-intro-badges {
    max-width: none;
    justify-content: flex-start;
  }

  .nautico-send-guide {
    grid-template-columns: 1fr;
  }

  .nautico-security-overview {
    grid-template-columns: 1fr;
  }

  .nautico-health-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nautico-drive-advanced-share-callout {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 620px) {
  .nautico-app-nav-item {
    min-height: 44px !important;
  }

  .nautico-send-intro {
    padding: 16px;
  }

  .nautico-send-intro h1 {
    font-size: 29px !important;
  }

  .nautico-v2-send .nautico-transfer-composer {
    padding: 14px !important;
  }

  .nautico-protection-overview,
  .nautico-security-overview-grid,
  .nautico-health-summary,
  .nautico-health-grid,
  .nautico-drive-secure-share-grid {
    grid-template-columns: 1fr;
  }

  .nautico-v2-send .nautico-advanced-drawer {
    margin: 0 7px 8px !important;
    padding: 12px !important;
  }
}

/* END N8-FINAL-UNIFIED-UX-CONTRACT */

/* ==========================================================================
   NAUTICO N8-B2-R10 GLOBAL FUTURISTIC ICON SYSTEM
   Phosphor duotone + semantic Nautico feature compositions.
   ========================================================================== */

.nautico-future-icon,
.nautico-dynamic-icon {
  flex: none;
  vertical-align: middle;
  color: currentColor;
  transform-origin: center;
  transition:
    color 150ms ease,
    opacity 150ms ease,
    transform 150ms ease,
    filter 150ms ease;
}

.nautico-app-shell .nautico-future-icon,
.nautico-app-shell .nautico-dynamic-icon {
  filter: drop-shadow(0 0 5px rgba(77, 187, 220, 0.06));
}

.nautico-app-nav-icon {
  overflow: hidden;

  border: 1px solid rgba(174, 222, 240, 0.09);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.06),
    rgba(54, 162, 207, 0.035)
  );

  color: rgba(218, 239, 249, 0.82);
}

.nautico-app-nav-icon .nautico-future-icon {
  width: 20px !important;
  height: 20px !important;
}

.nautico-app-nav-item:hover .nautico-app-nav-icon {
  color: #fff;

  border-color: rgba(115, 218, 238, 0.2);

  background: rgba(55, 157, 207, 0.13);

  box-shadow: 0 0 18px rgba(67, 185, 225, 0.08);
}

.nautico-app-nav-item.is-active .nautico-app-nav-icon {
  color: #fff;

  border-color: rgba(185, 239, 250, 0.3);

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.18),
    rgba(82, 217, 228, 0.12)
  );

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 20px rgba(93, 213, 231, 0.14);
}

.nautico-app-nav-item.is-active .nautico-future-icon {
  filter: drop-shadow(0 0 7px rgba(126, 232, 244, 0.3));
}

/* Composite advanced-feature icon */

.nautico-feature-icon {
  position: relative;

  display: inline-grid;

  width: 34px;
  height: 34px;

  flex: none;

  place-items: center;

  border: 1px solid #d3e4ed;

  border-radius: 10px;

  background:
    radial-gradient(
      circle at 75% 20%,
      rgba(78, 207, 218, 0.16),
      transparent 70%
    ),
    linear-gradient(145deg, #f9fcff, #edf7fa);

  color: #327bb5;

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    0 4px 14px rgba(30, 86, 119, 0.05);
}

.nautico-feature-icon-primary {
  width: 19px !important;
  height: 19px !important;
}

.nautico-feature-icon-secondary {
  position: absolute;

  right: 3px;
  bottom: 3px;

  width: 11px !important;
  height: 11px !important;

  padding: 1px;

  border-radius: 999px;

  background: #f9fdff;

  color: #258d9c;

  filter: drop-shadow(0 1px 2px rgba(21, 78, 99, 0.14));
}

/* File explorer icons */

.nautico-futuristic-ui
  :is(.file-grid, .file-table, .drive-view, .drive-page)
  .nautico-future-icon {
  color: currentColor;
}

/* File/folder type icons */

.nautico-futuristic-ui
  :is([class*='file-icon'], [class*='file-type'])
  .nautico-future-icon {
  filter: drop-shadow(0 3px 8px rgba(39, 91, 120, 0.1));
}

/* Send */

.nautico-send-guide-card li > span .nautico-future-icon {
  color: #2f74b1;
}

.nautico-protection-fact .nautico-feature-icon {
  margin-bottom: 9px;
}

/* Security */

.nautico-security-overview-grid > div > .nautico-feature-icon {
  margin-bottom: 9px;
}

/* Health */

.nautico-health-check-symbol {
  display: grid;

  width: 32px;
  height: 32px;

  flex: none;

  place-items: center;

  border: 1px solid #dae6ed;

  border-radius: 10px;

  background: #f7fafc;

  color: #9a7139;
}

.nautico-health-check.is-ok .nautico-health-check-symbol {
  border-color: rgba(52, 158, 128, 0.22);

  background: rgba(52, 158, 128, 0.075);

  color: #298970;
}

.nautico-health-check-dot {
  display: none !important;
}

/* Share */

.nautico-drive-secure-share-icon .nautico-feature-icon {
  width: 44px;
  height: 44px;
}

.nautico-drive-advanced-share-copy > .nautico-feature-icon {
  float: left;

  margin: 0 11px 8px 0;
}

/* Config-driven icons from admin/menu settings */

.nautico-dynamic-icon {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nautico-app-shell .nautico-dynamic-icon {
  color: currentColor;
}

/* Unified active feedback */

.nautico-futuristic-ui :is(button, a):active .nautico-future-icon {
  transform: scale(0.93);
}

/* Homepage */

.feature-icon .nautico-future-icon {
  width: 30px !important;
  height: 30px !important;

  color: #b8f5ff;

  filter: drop-shadow(0 0 12px rgba(72, 217, 245, 0.22));
}

/* END NAUTICO N8-B2-R10 GLOBAL FUTURISTIC ICON SYSTEM */

/* NAUTICO_N9_MEGA1_PRODUCT_UX */
/* The approved navy/light shell remains unchanged above this marker. */
.nautico-app-protection-panel-link {
  color: inherit;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}
.nautico-app-protection-panel-link:hover {
  border-color: rgba(116, 214, 255, 0.34);
  background: rgba(255, 255, 255, 0.075);
  transform: translateY(-1px);
}
.nautico-protection-center-page {
  display: grid;
  gap: 22px;
  width: min(1240px, 100%);
  margin: 0 auto;
}
.nautico-protection-center-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
  gap: 18px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, 0.18);
  border-radius: 28px;
  padding: clamp(22px, 4vw, 38px);
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(74, 163, 255, 0.2),
      transparent 30%
    ),
    linear-gradient(135deg, #0a1830 0%, #112744 56%, #17375b 100%);
  box-shadow: 0 30px 70px rgba(5, 15, 33, 0.18);
  color: #fff;
}
.nautico-protection-center-hero::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(125, 211, 252, 0.14);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(125, 211, 252, 0.035),
    0 0 0 82px rgba(125, 211, 252, 0.025);
  pointer-events: none;
}
.nautico-protection-center-hero-copy,
.nautico-privacy-proof-card {
  position: relative;
  z-index: 1;
}
.nautico-protection-center-hero h2 {
  margin-top: 9px;
  max-width: 720px;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.02;
}
.nautico-protection-center-hero-copy > p {
  margin-top: 15px;
  max-width: 720px;
  color: rgba(235, 245, 255, 0.72);
  font-size: 15px;
  line-height: 1.75;
}
.nautico-protection-center-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.nautico-protection-center-primary,
.nautico-protection-center-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border-radius: 12px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.nautico-protection-center-primary {
  background: linear-gradient(135deg, #4fd1c5, #79c5ff);
  color: #071426;
  box-shadow: 0 12px 28px rgba(54, 190, 214, 0.2);
}
.nautico-protection-center-secondary {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.nautico-protection-center-primary:hover,
.nautico-protection-center-secondary:hover {
  transform: translateY(-1px);
}
.nautico-privacy-proof-card {
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 21px;
  padding: 17px;
  background: rgba(7, 17, 31, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
}
.nautico-privacy-proof-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nautico-privacy-proof-head > .nautico-feature-icon {
  flex: 0 0 auto;
}
.nautico-privacy-proof-head div {
  display: grid;
  gap: 2px;
}
.nautico-privacy-proof-head span,
.nautico-protection-cost-note span {
  color: rgba(201, 229, 255, 0.6);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.nautico-privacy-proof-head strong {
  color: #fff;
  font-size: 15px;
}
.nautico-privacy-proof-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.nautico-privacy-proof-row:last-child {
  border-bottom: 0;
}
.nautico-privacy-proof-row span {
  color: rgba(232, 242, 252, 0.68);
  font-size: 12px;
  line-height: 1.45;
}
.nautico-privacy-proof-row strong {
  color: #8de4d8;
  font-size: 12px;
  text-align: right;
}
.nautico-protection-center-section {
  border: 1px solid rgba(15, 37, 62, 0.09);
  border-radius: 24px;
  padding: clamp(18px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 45px rgba(8, 23, 43, 0.06);
}
.nautico-protection-center-section > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.nautico-protection-center-section > header h3 {
  margin-top: 6px;
  color: #0a1728;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: -0.03em;
}
.nautico-protection-center-section > header > p {
  max-width: 480px;
  color: #687588;
  font-size: 13px;
  line-height: 1.65;
}
.nautico-protection-profile-grid,
.nautico-protection-module-grid {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.nautico-protection-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nautico-protection-profile-grid article {
  min-height: 150px;
  border: 1px solid rgba(14, 47, 78, 0.1);
  border-radius: 18px;
  padding: 17px;
  background: linear-gradient(180deg, #fbfdff, #f3f8fd);
}
.nautico-protection-profile-grid article > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 10px;
  background: #0e2744;
  color: #9edcff;
  font-size: 10px;
  font-weight: 900;
}
.nautico-protection-profile-grid strong {
  display: block;
  margin-top: 14px;
  color: #0a1728;
  font-size: 16px;
}
.nautico-protection-profile-grid p {
  margin-top: 6px;
  color: #687588;
  font-size: 12px;
  line-height: 1.65;
}
.nautico-protection-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nautico-protection-module-grid article {
  display: flex;
  min-height: 245px;
  flex-direction: column;
  border: 1px solid rgba(14, 47, 78, 0.1);
  border-radius: 19px;
  padding: 17px;
  background: #fff;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}
.nautico-protection-module-grid article:hover {
  transform: translateY(-2px);
  border-color: rgba(54, 172, 224, 0.3);
  box-shadow: 0 14px 35px rgba(9, 31, 55, 0.08);
}
.nautico-protection-module-icon {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(58, 173, 218, 0.2);
  border-radius: 15px;
  background: linear-gradient(
    145deg,
    rgba(32, 114, 186, 0.08),
    rgba(53, 201, 190, 0.1)
  );
  color: #1679a8;
}
.nautico-protection-module-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
}
.nautico-protection-module-title-row strong {
  color: #0c1a2d;
  font-size: 15px;
}
.nautico-protection-module-title-row span {
  flex: 0 0 auto;
  border: 1px solid rgba(41, 174, 152, 0.18);
  border-radius: 999px;
  padding: 4px 7px;
  background: rgba(41, 174, 152, 0.08);
  color: #187b6b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nautico-protection-module-grid h4 {
  margin-top: 9px;
  color: #24364a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}
.nautico-protection-module-grid p {
  margin-top: 7px;
  color: #718093;
  font-size: 12px;
  line-height: 1.65;
}
.nautico-protection-module-grid a,
.nautico-protection-module-core {
  margin-top: auto;
  padding-top: 15px;
  color: #147caa;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.nautico-protection-module-core {
  color: #6d7d90;
}
.nautico-protection-cost-note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  border: 1px solid rgba(40, 165, 196, 0.18);
  border-radius: 22px;
  padding: 19px;
  background: linear-gradient(
    135deg,
    rgba(224, 248, 250, 0.72),
    rgba(228, 240, 255, 0.84)
  );
}
.nautico-protection-cost-note strong {
  display: block;
  margin-top: 3px;
  color: #0d233a;
  font-size: 16px;
}
.nautico-protection-cost-note p {
  margin-top: 5px;
  color: #607286;
  font-size: 12px;
  line-height: 1.65;
}
@media (max-width: 960px) {
  .nautico-protection-center-hero {
    grid-template-columns: 1fr;
  }
  .nautico-protection-module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .nautico-protection-center-page {
    gap: 14px;
  }
  .nautico-protection-center-hero,
  .nautico-protection-center-section {
    border-radius: 19px;
    padding: 16px;
  }
  .nautico-protection-center-section > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .nautico-protection-profile-grid,
  .nautico-protection-module-grid {
    grid-template-columns: 1fr;
  }
  .nautico-protection-module-grid article {
    min-height: 0;
  }
}

/* =========================================================
   NAUTICO_HOME_COMPACT_COMPOSER_R2_FIXED
   ========================================================= */

@media (min-width: 1200px) {
  .nautico-home-v2 .nautico-stage {
    width: min(1320px, calc(100vw - 56px)) !important;

    grid-template-columns:
      510px
      minmax(430px, 1fr) !important;

    -moz-column-gap: clamp(58px, 7vw, 112px) !important;

         column-gap: clamp(58px, 7vw, 112px) !important;
  }

  .nautico-home-v2 .nautico-composer-shell {
    width: 510px !important;
    max-width: 510px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .nautico-home-v2 .nautico-premium-card {
    width: 100% !important;
    max-width: 510px !important;
  }

  .nautico-home-v2 .nautico-copy {
    max-width: 610px !important;
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .nautico-home-v2 .nautico-stage {
    width: calc(100vw - 36px) !important;

    grid-template-columns:
      minmax(440px, 500px)
      minmax(300px, 1fr) !important;

    -moz-column-gap: 30px !important;

         column-gap: 30px !important;
  }

  .nautico-home-v2 .nautico-composer-shell {
    width: 100% !important;
    max-width: 500px !important;
  }

  .nautico-home-v2 .nautico-premium-card {
    width: 100% !important;
    max-width: 500px !important;
  }
}

@media (max-width: 768px) {
  .nautico-home-v2 .nautico-composer-shell,
  .nautico-home-v2 .nautico-premium-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   NAUTICO V10
   ONE STABLE HOMEPAGE LAYOUT

   desktop:
   [ Transfer ] [ Protect when open ] [ Hero ]

   Nothing moves when Protect opens.
   ========================================================= */

:root {
  --nv10-left-x: 44px;
  --nv10-page: 430px;
  --nv10-gap: 12px;

  --nv10-height: min(650px, calc(100dvh - 120px));

  --nv10-top: max(84px, calc((100dvh - var(--nv10-height)) / 2));

  --nv10-hero-x: calc(
    var(--nv10-left-x) + var(--nv10-page) + var(--nv10-gap) + var(--nv10-page) +
      36px
  );

  --nv10-border: rgba(105, 198, 228, 0.2);

  --nv10-text: #edf8ff;

  --nv10-muted: rgba(196, 219, 233, 0.63);

  --nv10-surface: linear-gradient(
    155deg,
    rgba(10, 23, 39, 0.965),
    rgba(5, 15, 28, 0.978)
  );
}

/* =========================================================
   REMOVE CONTAINING BLOCK PROBLEMS
   ========================================================= */

@media (min-width: 900px) {
  html.nautico-futuristic-ui .nautico-home-v2,
  html.nautico-futuristic-ui .nautico-stage,
  html.nautico-futuristic-ui .nautico-composer-shell {
    contain: none !important;

    transform: none !important;

    filter: none !important;

    perspective: none !important;
  }
}

/* =========================================================
   PERMANENT LEFT PAGE
   Same open or closed.
   ========================================================= */

@media (min-width: 1500px) {
  html.nautico-futuristic-ui .nautico-composer-shell {
    position: fixed !important;

    top: var(--nv10-top) !important;

    left: var(--nv10-left-x) !important;

    width: var(--nv10-page) !important;

    max-width: var(--nv10-page) !important;

    height: var(--nv10-height) !important;

    margin: 0 !important;

    z-index: 5000 !important;

    overflow: visible !important;
  }

  html.nautico-futuristic-ui .nautico-copy {
    position: fixed !important;

    top: clamp(185px, 21vh, 225px) !important;

    left: var(--nv10-hero-x) !important;

    right: 42px !important;

    width: auto !important;

    max-width: 720px !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    z-index: 20 !important;
  }
}

/* =========================================================
   IDENTICAL GLASS MATERIAL
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card,
html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page.nautico-advanced-drawer {
  color: var(--nv10-text) !important;

  border: 1px solid var(--nv10-border) !important;

  background:
    radial-gradient(circle at 0 0, rgba(55, 183, 219, 0.105), transparent 30%),
    var(--nv10-surface) !important;

  box-shadow:
    0 20px 52px rgba(0, 6, 17, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;

  backdrop-filter: none !important;
}

/* =========================================================
   LEFT CARD
   ========================================================= */

@media (min-width: 1500px) {
  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    width: 100% !important;

    max-width: none !important;

    height: 100% !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 15px !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    border-radius: 25px !important;

    scrollbar-width: thin;
  }
}

/* Remove light internal shell surfaces without changing text. */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card > form,
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card > div {
  background: transparent !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  [class*='bg-white'] {
  background: rgba(255, 255, 255, 0.035) !important;
}

/* =========================================================
   LEFT TEXT
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
  font-family: inherit !important;

  font-weight: 400 !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .font-bold {
  color: #f3fbff !important;

  font-weight: 700 !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .font-semibold {
  color: #edf8ff !important;

  font-weight: 600 !important;
}

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card label {
  color: rgba(210, 231, 242, 0.75) !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .text-muted,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .text-xs,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  .text-sm {
  color: var(--nv10-muted) !important;
}

/* =========================================================
   UPLOAD
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone {
  min-height: 145px !important;

  padding: 14px !important;

  color: rgba(217, 237, 247, 0.76) !important;

  border: 1px dashed rgba(109, 203, 230, 0.23) !important;

  border-radius: 18px !important;

  background:
    radial-gradient(
      circle at 90% 85%,
      rgba(52, 182, 213, 0.08),
      transparent 35%
    ),
    rgba(255, 255, 255, 0.022) !important;
}

html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone .text-lg {
  color: #f5fbff !important;

  font-size: 18px !important;

  font-weight: 700 !important;
}

html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone button {
  min-height: 34px !important;

  padding: 6px 11px !important;

  color: #edf9ff !important;

  border: 1px solid rgba(109, 203, 230, 0.16) !important;

  border-radius: 11px !important;

  background: rgba(255, 255, 255, 0.035) !important;

  box-shadow: none !important;
}

/* =========================================================
   LEFT FORM FIELDS
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell input,
html.nautico-futuristic-ui .nautico-composer-shell select,
html.nautico-futuristic-ui .nautico-composer-shell textarea {
  min-height: 38px !important;

  color: #edf8ff !important;

  border: 1px solid rgba(105, 197, 226, 0.15) !important;

  border-radius: 11px !important;

  background: rgba(255, 255, 255, 0.032) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-composer-shell textarea {
  min-height: 51px !important;

  max-height: 64px !important;
}

html.nautico-futuristic-ui .nautico-composer-shell input::-moz-placeholder, html.nautico-futuristic-ui .nautico-composer-shell textarea::-moz-placeholder {
  color: rgba(197, 220, 233, 0.36) !important;
}

html.nautico-futuristic-ui .nautico-composer-shell input::placeholder,
html.nautico-futuristic-ui .nautico-composer-shell textarea::placeholder {
  color: rgba(197, 220, 233, 0.36) !important;
}

/* =========================================================
   PROTECT ROW
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-protection-panel {
  overflow: visible !important;

  border: 1px solid rgba(102, 199, 228, 0.18) !important;

  border-radius: 13px !important;

  background: rgba(255, 255, 255, 0.027) !important;

  box-shadow: none !important;
}

/* =========================================================
   RIGHT PROTECTION PAGE
   It simply appears. Nothing else moves.
   ========================================================= */

@media (min-width: 1500px) {
  html.nautico-futuristic-ui
    body
    > .nautico-book-protect-page.nautico-advanced-drawer {
    position: fixed !important;

    top: var(--nv10-top) !important;

    left: calc(
      var(--nv10-left-x) + var(--nv10-page) + var(--nv10-gap)
    ) !important;

    right: auto !important;

    bottom: auto !important;

    width: var(--nv10-page) !important;

    min-width: 0 !important;

    max-width: var(--nv10-page) !important;

    height: var(--nv10-height) !important;

    max-height: var(--nv10-height) !important;

    margin: 0 !important;

    padding: 0 14px 14px !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    border-radius: 25px !important;

    z-index: 5100 !important;

    scrollbar-width: thin;

    animation: nauticoV10Open 150ms ease-out both !important;
  }
}

/* =========================================================
   RIGHT TYPOGRAPHY
   ========================================================= */

html.nautico-futuristic-ui body > .nautico-book-protect-page {
  font-family: inherit !important;

  font-weight: 400 !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page .font-bold {
  color: #f3fbff !important;

  font-weight: 700 !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page .font-semibold {
  color: #edf8ff !important;

  font-weight: 600 !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page .text-muted,
html.nautico-futuristic-ui body > .nautico-book-protect-page .text-xs,
html.nautico-futuristic-ui body > .nautico-book-protect-page .text-sm {
  color: var(--nv10-muted) !important;
}

/* =========================================================
   PROTECTION HEADER
   ========================================================= */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-header {
  position: sticky !important;

  top: 0 !important;

  z-index: 40 !important;

  margin: 0 -14px 12px !important;

  padding: 15px 14px 12px !important;

  border-bottom: 1px solid rgba(104, 198, 226, 0.12) !important;

  background: rgba(6, 16, 29, 0.985) !important;

  backdrop-filter: none !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-eyebrow {
  color: #75d3ed !important;

  font-size: 9px !important;

  font-weight: 700 !important;

  letter-spacing: 0.16em !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-title {
  color: #f5fbff !important;

  font-size: 24px !important;

  font-weight: 700 !important;

  letter-spacing: -0.02em !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-subtitle {
  color: rgba(199, 222, 234, 0.63) !important;

  font-size: 11px !important;

  line-height: 1.45 !important;
}

/* =========================================================
   ESSENTIALS / ADVANCED
   Clean tabs. No cramped 01/02.
   ========================================================= */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination {
  position: sticky;

  top: 74px;

  z-index: 30;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 7px;

  margin: 0 0 12px;

  padding: 5px;

  border: 1px solid rgba(104, 198, 226, 0.12);

  border-radius: 13px;

  background: rgba(255, 255, 255, 0.022);
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-tab-number {
  display: none !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  button {
  min-height: 48px;

  padding: 8px 10px;

  color: rgba(203, 225, 237, 0.58);

  border: 1px solid transparent;

  border-radius: 10px;

  background: transparent;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  button.is-active {
  color: #effaff;

  border-color: rgba(101, 199, 227, 0.17);

  background: linear-gradient(
    135deg,
    rgba(83, 98, 203, 0.25),
    rgba(42, 153, 188, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  strong {
  display: block;

  font-size: 13px !important;

  line-height: 1.2;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  small {
  display: block;

  margin-top: 2px;

  color: rgba(191, 215, 229, 0.48) !important;

  font-size: 10px !important;

  line-height: 1.2;
}

/* =========================================================
   SECTION TITLES
   ========================================================= */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

/* =========================================================
   QUICK / PRIVATE / VERIFIED
   ========================================================= */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3
  > button {
  min-height: 61px !important;

  padding: 9px 11px !important;

  color: #eef9ff !important;

  border: 1px solid rgba(103, 197, 226, 0.12) !important;

  border-radius: 11px !important;

  background: rgba(255, 255, 255, 0.024) !important;

  box-shadow: none !important;

  text-align: left !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3) !important;

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  ) !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px !important;

  color: rgba(196, 219, 232, 0.57) !important;

  font-size: 10px !important;

  line-height: 1.35 !important;
}

/* =========================================================
   RIGHT FIELDS
   ========================================================= */

html.nautico-futuristic-ui body > .nautico-book-protect-page label {
  color: rgba(211, 231, 242, 0.76) !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page input,
html.nautico-futuristic-ui body > .nautico-book-protect-page select,
html.nautico-futuristic-ui body > .nautico-book-protect-page textarea {
  min-height: 38px !important;

  color: #edf8ff !important;

  border: 1px solid rgba(104, 195, 224, 0.14) !important;

  border-radius: 10px !important;

  background: rgba(255, 255, 255, 0.03) !important;

  box-shadow: none !important;
}

/* Recipient actions are deliberately ONE column.
   Clarity is more important than squeezing text. */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr !important;

  gap: 6px !important;

  margin-top: 10px !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2
  > label,
html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-advanced-page
  label {
  min-height: 42px;

  padding: 8px 10px !important;

  color: rgba(221, 237, 246, 0.8) !important;

  border: 1px solid rgba(104, 195, 224, 0.11) !important;

  border-radius: 10px !important;

  background: rgba(255, 255, 255, 0.02) !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  input[type='checkbox'] {
  width: 17px !important;

  height: 17px !important;

  min-height: 17px !important;

  accent-color: #53c5e2;
}

/* =========================================================
   ADVANCED PAGE
   ========================================================= */

.nautico-protect-view-essentials .nautico-protect-advanced-page {
  display: none !important;
}

.nautico-protect-view-advanced .nautico-protect-essentials {
  display: none !important;
}

.nautico-protect-view-advanced .nautico-protect-advanced-page {
  display: block !important;

  margin-top: 0 !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-section-header {
  padding: 10px 11px !important;

  border: 1px solid rgba(104, 195, 224, 0.11) !important;

  border-radius: 10px !important;

  background: rgba(255, 255, 255, 0.02) !important;
}

/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1499px) and (min-width: 1100px) {
  :root {
    --nv10-left-x: 28px;

    --nv10-page: 370px;

    --nv10-gap: 10px;

    --nv10-height: calc(100dvh - 110px);

    --nv10-top: 78px;

    --nv10-hero-x: 800px;
  }

  html.nautico-futuristic-ui .nautico-composer-shell {
    position: fixed !important;

    top: var(--nv10-top) !important;

    left: var(--nv10-left-x) !important;

    width: var(--nv10-page) !important;

    max-width: var(--nv10-page) !important;

    height: var(--nv10-height) !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    height: 100% !important;

    overflow-y: auto !important;

    border-radius: 22px !important;
  }

  html.nautico-futuristic-ui .nautico-copy {
    position: fixed !important;

    left: var(--nv10-hero-x) !important;

    right: 28px !important;

    max-width: 520px !important;
  }

  html.nautico-futuristic-ui
    body
    > .nautico-book-protect-page.nautico-advanced-drawer {
    position: fixed !important;

    top: var(--nv10-top) !important;

    left: calc(
      var(--nv10-left-x) + var(--nv10-page) + var(--nv10-gap)
    ) !important;

    width: var(--nv10-page) !important;

    max-width: var(--nv10-page) !important;

    height: var(--nv10-height) !important;

    max-height: var(--nv10-height) !important;

    border-radius: 22px !important;
  }
}

/* =========================================================
   TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1099px) and (min-width: 900px) {
  html.nautico-futuristic-ui .nautico-copy {
    display: none !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell {
    position: fixed !important;

    top: 72px !important;

    left: 10px !important;

    width: calc(50vw - 15px) !important;

    max-width: none !important;

    height: calc(100dvh - 84px) !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    height: 100% !important;

    overflow-y: auto !important;
  }

  html.nautico-futuristic-ui
    body
    > .nautico-book-protect-page.nautico-advanced-drawer {
    position: fixed !important;

    top: 72px !important;

    left: calc(50vw + 5px) !important;

    right: 10px !important;

    width: auto !important;

    max-width: none !important;

    height: calc(100dvh - 84px) !important;

    max-height: none !important;
  }
}

/* =========================================================
   MOBILE + TABLET PORTRAIT
   ========================================================= */

@media (max-width: 899px) {
  /* Closed homepage follows original responsive rules. */

  body:not(:has(> .nautico-book-protect-page)) .nautico-composer-shell {
    position: relative !important;

    inset: auto !important;

    width: auto !important;

    max-width: none !important;

    height: auto !important;
  }

  body:has(> .nautico-book-protect-page) .nautico-composer-shell {
    visibility: hidden !important;

    pointer-events: none !important;
  }

  html.nautico-futuristic-ui
    body
    > .nautico-book-protect-page.nautico-advanced-drawer {
    inset: 0 !important;

    width: 100vw !important;

    min-width: 0 !important;

    max-width: none !important;

    height: 100dvh !important;

    max-height: none !important;

    padding: 0 14px max(16px, env(safe-area-inset-bottom)) !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;
  }
}

/* =========================================================
   LIGHTWEIGHT ANIMATION
   ========================================================= */

@keyframes nauticoV10Open {
  from {
    opacity: 0;

    transform: translateX(-8px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body > .nautico-book-protect-page {
    animation: none !important;
  }
}

/* =========================================================
   END NAUTICO V10
   ========================================================= */

/* NAUTICO_V10_R2_UX_START */

/* =========================================================
   GLOBAL V10-R2 GEOMETRY
   More room for real functions, still compact.
   ========================================================= */

:root {
  --nv10-page: 440px;

  --nv10-gap: 12px;

  --nv10-height: min(670px, calc(100dvh - 108px));

  --nv10-top: max(72px, calc((100dvh - var(--nv10-height)) / 2));
}

/* =========================================================
   TYPOGRAPHY
   Local system font only.
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card,
html.nautico-futuristic-ui body > .nautico-book-protect-page {
  font-family:
    'Segoe UI Variable Text',
    'Segoe UI Variable',
    'Segoe UI',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-synthesis: none;

  letter-spacing: -0.006em;
}

/* =========================================================
   LEFT PAGE — DESKTOP
   No card-level scrollbar.
   ========================================================= */

@media (min-width: 1100px) {
  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    padding: 13px !important;

    overflow-x: hidden !important;

    overflow-y: hidden !important;
  }

  /* -------------------------------------------------------
     FILES & FOLDER
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone {
    min-height: 126px !important;

    height: 126px !important;

    max-height: 126px !important;

    padding: 10px 12px !important;

    border-radius: 16px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone .h-44 {
    width: 34px !important;

    height: 34px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone .mt-10 {
    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone .mt-4 {
    margin-top: 2px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone .mt-14 {
    margin-top: 7px !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-dropzone
    .text-lg {
    color: #f5fbff !important;

    font-size: 15px !important;

    line-height: 1.15 !important;

    font-weight: 650 !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-dropzone
    .text-sm {
    font-size: 10.5px !important;

    line-height: 1.3 !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone button {
    min-width: 108px;

    min-height: 31px !important;

    padding: 5px 10px !important;

    border-radius: 10px !important;

    font-size: 11px !important;

    font-weight: 600 !important;
  }

  /* -------------------------------------------------------
     FILE LIST
     Only the file list scrolls when many files exist.
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell .max-h-44.overflow-y-auto {
    max-height: 82px !important;

    margin-top: 6px !important;

    scrollbar-width: thin;
  }

  /* -------------------------------------------------------
     SECTIONS
     ------------------------------------------------------- */

  .nautico-form-section-title {
    margin: 1px 0 0;

    color: #75d2ec;

    font-size: 9px;

    line-height: 1.15;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
  }

  .nautico-delivery-section {
    margin-top: 7px !important;

    gap: 7px !important;
  }

  /* -------------------------------------------------------
     EMAIL / SHARE LINK / SPACE
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-delivery-tabs {
    gap: 5px !important;

    padding: 4px !important;

    border: 1px solid rgba(104, 196, 224, 0.11);

    border-radius: 12px !important;

    background: rgba(255, 255, 255, 0.022) !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-delivery-tabs
    button {
    min-height: 32px !important;

    padding: 5px 7px !important;

    border-radius: 9px !important;

    font-size: 11px !important;

    font-weight: 600 !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-delivery-tabs
    button[class*='shadow'] {
    color: #effaff !important;

    background: linear-gradient(
      135deg,
      rgba(82, 98, 204, 0.27),
      rgba(42, 154, 188, 0.18)
    ) !important;

    box-shadow: inset 0 0 0 1px rgba(103, 199, 228, 0.12) !important;
  }

  /* -------------------------------------------------------
     FORM LABELS
     ------------------------------------------------------- */

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-premium-card
    label {
    margin-bottom: 2px !important;

    color: rgba(211, 231, 242, 0.74) !important;

    font-size: 10px !important;

    line-height: 1.15 !important;

    font-weight: 550 !important;
  }

  /* -------------------------------------------------------
     INPUTS
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell input,
  html.nautico-futuristic-ui .nautico-composer-shell select {
    min-height: 32px !important;

    height: 32px !important;

    padding: 5px 9px !important;

    font-size: 11px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell textarea {
    min-height: 40px !important;

    height: 40px !important;

    max-height: 40px !important;

    padding: 6px 9px !important;

    font-size: 11px !important;

    line-height: 1.28 !important;
  }

  /*
   * Recipient e-mails uses a textarea too, but 40px is
   * enough for one/two compact rows.
   */

  /* -------------------------------------------------------
     UTILITY SPACING
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell .mt-16,
  html.nautico-futuristic-ui .nautico-composer-shell .mt-14,
  html.nautico-futuristic-ui .nautico-composer-shell .mt-12,
  html.nautico-futuristic-ui .nautico-composer-shell .mt-10,
  html.nautico-futuristic-ui .nautico-composer-shell .mt-8,
  html.nautico-futuristic-ui .nautico-composer-shell .mt-6 {
    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .gap-14,
  html.nautico-futuristic-ui .nautico-composer-shell .gap-12,
  html.nautico-futuristic-ui .nautico-composer-shell .gap-10,
  html.nautico-futuristic-ui .nautico-composer-shell .gap-8 {
    gap: 6px !important;
  }

  /* -------------------------------------------------------
     PROTECT
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-protection-panel {
    margin-top: 6px !important;

    border-radius: 11px !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-protection-panel
    button {
    min-height: 48px !important;

    padding: 6px 9px !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-protection-panel
    .font-bold {
    font-size: 12px !important;

    line-height: 1.15 !important;
  }

  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-protection-panel
    .text-sm,
  html.nautico-futuristic-ui
    .nautico-composer-shell
    .nautico-protection-panel
    .text-xs {
    font-size: 9px !important;

    line-height: 1.25 !important;
  }

  /* -------------------------------------------------------
     SUBMIT
     ------------------------------------------------------- */

  html.nautico-futuristic-ui .nautico-composer-shell button[type='submit'] {
    min-height: 36px !important;

    height: 36px !important;

    padding: 5px 10px !important;

    border-radius: 10px !important;

    font-size: 12px !important;

    line-height: 1 !important;

    font-weight: 650 !important;
  }

  /* Bottom note */

  html.nautico-futuristic-ui .nautico-composer-shell .text-center {
    margin-top: 5px !important;

    font-size: 8.5px !important;

    line-height: 1.15 !important;
  }
}

/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1499px) and (min-width: 1100px) {
  :root {
    --nv10-left-x: 26px;

    --nv10-page: 390px;

    --nv10-gap: 10px;

    --nv10-height: calc(100dvh - 96px);

    --nv10-top: 70px;

    --nv10-hero-x: 838px;
  }
}

/* =========================================================
   SHORT DESKTOP HEIGHT
   ========================================================= */

@media (max-height: 760px) and (min-width: 1100px) {
  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone {
    min-height: 102px !important;

    height: 102px !important;

    max-height: 102px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell input,
  html.nautico-futuristic-ui .nautico-composer-shell select {
    min-height: 29px !important;

    height: 29px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell textarea {
    min-height: 34px !important;

    height: 34px !important;

    max-height: 34px !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .text-center {
    display: none !important;
  }
}

/* =========================================================
   RIGHT PAGE
   Preserve current structure but improve readability.
   ========================================================= */

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-title {
  font-size: 22px !important;

  font-weight: 680 !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-advanced-drawer-subtitle {
  font-size: 10px !important;

  line-height: 1.4 !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  strong {
  font-size: 12px !important;

  font-weight: 650 !important;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-pagination
  small {
  font-size: 9px !important;
}

/* =========================================================
   SUCCESS PAGE — SAFE SHARING
   ========================================================= */

.nautico-success-card {
  font-family:
    'Segoe UI Variable Text', 'Segoe UI Variable', 'Segoe UI', system-ui,
    sans-serif !important;
}

.nautico-share-apps-note {
  margin-top: 12px;

  padding: 10px 12px;

  color: rgba(205, 227, 239, 0.69);

  border: 1px solid rgba(102, 195, 224, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.025);

  font-size: 11px;

  line-height: 1.4;
}

.nautico-share-apps-note strong {
  color: #eefaff;
}

.nautico-native-share {
  color: #edfaff !important;

  border-color: rgba(101, 201, 229, 0.2) !important;

  background: linear-gradient(
    135deg,
    rgba(78, 96, 204, 0.27),
    rgba(43, 158, 193, 0.18)
  ) !important;
}

/* =========================================================
   TABLET / MOBILE
   Keep original responsive scrolling where necessary.
   ========================================================= */

@media (max-width: 1099px) {
  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    overflow-y: auto !important;
  }
}

/* NAUTICO_V10_R2_UX_END */

/* NAUTICO_V10_R4_FIXED_START */

:root {
  --nautico-ocean-indigo: #5268d7;
  --nautico-ocean-blue: #3c82cd;
  --nautico-ocean-cyan: #62c5d4;
  --nautico-ocean-cyan-soft: #8adce7;
}

/* ========================================================
   FONT
   ======================================================== */

html.nautico-futuristic-ui .nautico-composer-shell,
html.nautico-futuristic-ui body > .nautico-book-protect-page {
  font-family:
    'Segoe UI Variable Text',
    'Segoe UI Variable',
    'Segoe UI',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif !important;

  font-synthesis: none;

  letter-spacing: -0.006em;
}

/* ========================================================
   IMPORTANT: FORCE LEFT CARD BACK TO TOP
   clip is not a scroll container, so Chrome cannot restore
   an old internal scrollTop and hide Add files.
   ======================================================== */

@media (min-width: 1100px) {
  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    overflow-x: clip !important;

    overflow-y: clip !important;

    scroll-behavior: auto !important;
  }
}

/* ========================================================
   UPLOAD BUTTONS
   ======================================================== */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone button {
  color: #ecfaff !important;

  border: 1px solid rgba(111, 205, 230, 0.2) !important;

  border-radius: 10px !important;

  background: linear-gradient(
    145deg,
    rgba(70, 109, 194, 0.22),
    rgba(48, 151, 195, 0.14)
  ) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-dropzone
  button:hover {
  transform: translateY(-1px);

  border-color: rgba(128, 221, 240, 0.38) !important;

  background: linear-gradient(
    145deg,
    rgba(73, 112, 212, 0.34),
    rgba(54, 174, 208, 0.22)
  ) !important;
}

/* ========================================================
   DELIVERY
   ======================================================== */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-delivery-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 5px !important;

  border: 1px solid rgba(106, 199, 228, 0.13) !important;

  background: rgba(5, 19, 34, 0.52) !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-delivery-tabs
  button {
  min-width: 0 !important;

  color: rgba(208, 229, 240, 0.61) !important;

  border: 1px solid transparent !important;

  border-radius: 9px !important;

  font-weight: 600 !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-delivery-tabs
  button[class*='shadow'] {
  color: #f5fcff !important;

  border-color: rgba(125, 214, 236, 0.21) !important;

  background: linear-gradient(
    130deg,
    rgba(82, 104, 215, 0.54),
    rgba(60, 130, 205, 0.45) 52%,
    rgba(98, 197, 212, 0.35)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.095),
    0 6px 18px rgba(27, 94, 159, 0.14) !important;
}

/* ========================================================
   WORKSPACE
   ======================================================== */

.nautico-workspace-panel {
  display: grid;

  gap: 7px;

  padding: 9px;

  border: 1px solid rgba(107, 202, 229, 0.14);

  border-radius: 13px;

  background: linear-gradient(
    145deg,
    rgba(60, 96, 177, 0.075),
    rgba(35, 128, 174, 0.04)
  );
}

.nautico-workspace-heading {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;
}

.nautico-workspace-heading strong {
  display: block;

  color: #effaff;

  font-size: 11.5px;

  font-weight: 660;
}

.nautico-workspace-heading span:not(.nautico-workspace-badge) {
  display: block;

  margin-top: 2px;

  color: rgba(199, 221, 233, 0.56);

  font-size: 8.5px;

  line-height: 1.3;
}

.nautico-workspace-badge {
  flex: 0 0 auto;

  padding: 4px 6px;

  color: #91e1ef;

  border: 1px solid rgba(117, 211, 234, 0.17);

  border-radius: 7px;

  background: rgba(70, 173, 210, 0.065);

  font-size: 6.5px;

  font-weight: 750;

  letter-spacing: 0.1em;
}

.nautico-workspace-name {
  border-color: rgba(107, 201, 228, 0.17) !important;

  background: rgba(255, 255, 255, 0.03) !important;
}

.nautico-workspace-actions {
  display: flex;
}

.nautico-workspace-create {
  min-height: 34px;

  padding: 6px 12px;

  color: white;

  border: 1px solid rgba(140, 222, 240, 0.27);

  border-radius: 10px;

  background: linear-gradient(
    115deg,
    var(--nautico-ocean-indigo),
    var(--nautico-ocean-blue) 55%,
    var(--nautico-ocean-cyan)
  );

  box-shadow:
    0 7px 18px rgba(35, 111, 177, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);

  font-size: 10px;

  font-weight: 660;

  cursor: pointer;

  transition:
    transform 140ms ease,
    filter 140ms ease;
}

.nautico-workspace-create:hover:not(:disabled) {
  transform: translateY(-1px);

  filter: brightness(1.07);
}

.nautico-workspace-create:disabled {
  opacity: 0.55;

  cursor: wait;
}

.nautico-workspace-selected {
  display: flex;

  align-items: center;

  gap: 7px;

  min-height: 29px;

  padding: 5px 8px;

  border: 1px solid rgba(91, 202, 191, 0.15);

  border-radius: 9px;

  background: rgba(67, 177, 177, 0.055);
}

.nautico-workspace-selected span {
  color: #73d8ca;

  font-size: 7px;

  font-weight: 750;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

.nautico-workspace-selected strong {
  overflow: hidden;

  color: #edfaff;

  font-size: 9.5px;

  font-weight: 600;

  text-overflow: ellipsis;

  white-space: nowrap;
}

.nautico-workspace-hint {
  color: rgba(195, 218, 231, 0.54);

  font-size: 8.5px;

  line-height: 1.35;
}

.nautico-workspace-hint strong {
  color: rgba(225, 241, 249, 0.78);

  font-weight: 600;
}

/* ========================================================
   GUEST SIGN-IN
   ======================================================== */

.nautico-workspace-signin {
  display: grid;

  grid-template-columns: 32px minmax(0, 1fr) auto;

  align-items: center;

  gap: 8px;

  padding: 8px;

  border: 1px solid rgba(111, 204, 231, 0.15);

  border-radius: 11px;

  background: linear-gradient(
    135deg,
    rgba(65, 94, 180, 0.11),
    rgba(44, 140, 186, 0.065)
  );
}

.nautico-workspace-signin-icon {
  display: grid;

  width: 32px;

  height: 32px;

  place-items: center;

  color: #98e4f1;

  border: 1px solid rgba(126, 215, 236, 0.18);

  border-radius: 9px;

  background: rgba(70, 170, 210, 0.075);

  font-size: 12px;

  font-weight: 750;
}

.nautico-workspace-signin-copy {
  min-width: 0;
}

.nautico-workspace-signin-copy strong {
  display: block;

  color: #f2fbff;

  font-size: 10.5px;

  font-weight: 650;
}

.nautico-workspace-signin-copy span {
  display: block;

  margin-top: 2px;

  color: rgba(194, 219, 232, 0.56);

  font-size: 8px;

  line-height: 1.3;
}

.nautico-workspace-signin-button {
  display: inline-flex;

  min-height: 32px;

  align-items: center;

  justify-content: center;

  padding: 5px 10px;

  color: white !important;

  border: 1px solid rgba(140, 221, 240, 0.27);

  border-radius: 9px;

  background: linear-gradient(
    115deg,
    var(--nautico-ocean-indigo),
    var(--nautico-ocean-blue) 55%,
    var(--nautico-ocean-cyan)
  );

  box-shadow: 0 6px 17px rgba(33, 107, 171, 0.18);

  font-size: 9.5px;

  font-weight: 650;

  text-decoration: none;

  white-space: nowrap;

  transition:
    transform 140ms ease,
    filter 140ms ease;
}

.nautico-workspace-signin-button:hover {
  transform: translateY(-1px);

  filter: brightness(1.07);
}

/* ========================================================
   SEND SECURELY
   Main CTA — matches ocean in homepage.
   ======================================================== */

html.nautico-futuristic-ui .nautico-composer-shell button[type='submit'] {
  position: relative;

  overflow: hidden;

  color: #ffffff !important;

  border: 1px solid rgba(150, 226, 242, 0.31) !important;

  border-radius: 12px !important;

  background: linear-gradient(
    112deg,
    #5268d7 0%,
    #3b79cf 34%,
    #3d9ed0 67%,
    #67c9d4 100%
  ) !important;

  box-shadow:
    0 10px 26px rgba(32, 111, 179, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

  font-weight: 680 !important;

  letter-spacing: -0.01em;

  transition:
    transform 140ms ease,
    filter 140ms ease,
    box-shadow 140ms ease;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  button[type='submit']:hover:not(:disabled) {
  transform: translateY(-1px);

  filter: brightness(1.075);

  box-shadow:
    0 13px 30px rgba(35, 123, 190, 0.29),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

html.nautico-futuristic-ui
  .nautico-composer-shell
  button[type='submit']:disabled {
  filter: saturate(0.55);

  opacity: 0.62;
}

/* ========================================================
   PROTECT ARROW
   ======================================================== */

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-protect-trigger-icon {
  color: white !important;

  border: 1px solid rgba(137, 220, 239, 0.25) !important;

  background: linear-gradient(135deg, #5066d4, #3d8ed0 58%, #61c3d2) !important;

  box-shadow: 0 6px 16px rgba(31, 105, 168, 0.2) !important;
}

/* ========================================================
   FOCUS
   ======================================================== */

html.nautico-futuristic-ui .nautico-composer-shell button:focus-visible,
html.nautico-futuristic-ui .nautico-composer-shell a:focus-visible,
html.nautico-futuristic-ui .nautico-composer-shell input:focus-visible,
html.nautico-futuristic-ui .nautico-composer-shell select:focus-visible {
  outline: 2px solid rgba(116, 215, 238, 0.58);

  outline-offset: 2px;
}

/* ========================================================
   MOBILE
   ======================================================== */

@media (max-width: 560px) {
  .nautico-workspace-signin {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .nautico-workspace-signin-button {
    grid-column: 1 / -1;

    width: 100%;
  }

  .nautico-workspace-create {
    width: 100%;
  }
}

/* NAUTICO_V10_R4_FIXED_END */

/* NAUTICO_LEFT_TOP_VISIBILITY_FIX_START */

@media (min-width: 1100px) {
  html.nautico-futuristic-ui .nautico-composer-shell {
    overflow: visible !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
    overflow-x: clip !important;

    overflow-y: clip !important;

    overscroll-behavior: none !important;

    scroll-behavior: auto !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    margin-top: 0 !important;
  }
}

/* NAUTICO_LEFT_TOP_VISIBILITY_FIX_END */

/* NAUTICO_R6_FIXED_START */

/* =========================================================
   R6 FIXED
   No geometry changes.
   Only faded borders + Advanced presentation.
   ========================================================= */

:root {
  --r6f-title: rgba(244, 250, 255, 0.96);

  --r6f-text: rgba(203, 222, 234, 0.7);

  --r6f-muted: rgba(181, 204, 219, 0.48);

  --r6f-cyan: rgba(112, 209, 235, 0.78);

  --r6f-line: rgba(115, 204, 232, 0.055);

  --r6f-line-hover: rgba(115, 211, 238, 0.13);
}

/* =========================================================
   OUTER BOOK PAGES
   Border becomes almost invisible.
   Existing geometry stays untouched.
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card,
html.nautico-futuristic-ui body > .nautico-book-protect-page {
  border-color: transparent !important;

  box-shadow:
    0 25px 65px rgba(0, 7, 19, 0.3),
    0 0 44px rgba(58, 170, 215, 0.04),
    inset 0 0 0 1px rgba(115, 204, 232, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
}

/* Soft outer vignette rather than a hard frame. */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
  background:
    radial-gradient(circle at 7% 0%, rgba(81, 179, 218, 0.05), transparent 28%),
    linear-gradient(155deg, rgba(6, 18, 33, 0.92), rgba(4, 13, 26, 0.95)) !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(75, 176, 216, 0.045),
      transparent 28%
    ),
    linear-gradient(155deg, rgba(6, 18, 33, 0.93), rgba(4, 13, 26, 0.96)) !important;
}

/* =========================================================
   LEFT INTERNAL FRAME
   Fade it without changing dimensions.
   ========================================================= */

html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form {
  border-color: transparent !important;

  outline: none !important;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.025) !important;
}

/* =========================================================
   UPLOAD BORDER — ALMOST LOST IN BACKGROUND
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-dropzone {
  border-color: rgba(117, 207, 234, 0.085) !important;

  background:
    radial-gradient(
      circle at 88% 78%,
      rgba(75, 180, 214, 0.06),
      transparent 38%
    ),
    rgba(255, 255, 255, 0.008) !important;

  box-shadow:
    0 0 24px rgba(58, 171, 217, 0.024),
    inset 0 1px 0 rgba(255, 255, 255, 0.015) !important;
}

/* =========================================================
   LEFT FORM BORDERS
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-delivery-tabs,
html.nautico-futuristic-ui .nautico-composer-shell .nautico-protection-panel {
  border-color: transparent !important;

  box-shadow: inset 0 0 0 1px var(--r6f-line) !important;
}

html.nautico-futuristic-ui .nautico-composer-shell input,
html.nautico-futuristic-ui .nautico-composer-shell textarea,
html.nautico-futuristic-ui .nautico-composer-shell select {
  border-color: transparent !important;

  box-shadow: inset 0 0 0 1px var(--r6f-line) !important;
}

/* =========================================================
   PROTECTION HEADER
   Remove "card inside card".
   ========================================================= */

html.nautico-futuristic-ui .nautico-advanced-drawer-header {
  border: 0 !important;

  border-bottom: 1px solid rgba(115, 204, 232, 0.038) !important;

  box-shadow: none !important;

  background: linear-gradient(
    180deg,
    rgba(5, 15, 28, 0.96),
    rgba(5, 15, 28, 0.86)
  ) !important;
}

/* =========================================================
   ESSENTIALS / ADVANCED SWITCH
   No bright/double outline.
   ========================================================= */

html.nautico-futuristic-ui .nautico-protect-pagination {
  border-color: transparent !important;

  background: rgba(255, 255, 255, 0.007) !important;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.035) !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button {
  border-color: transparent !important;

  outline: none !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button.is-active {
  color: var(--r6f-title) !important;

  border-color: transparent !important;

  background: linear-gradient(
    135deg,
    rgba(78, 97, 194, 0.22),
    rgba(45, 137, 186, 0.14)
  ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(115, 209, 235, 0.07),
    0 0 18px rgba(54, 170, 215, 0.03) !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button:focus,
html.nautico-futuristic-ui .nautico-protect-pagination button:focus-visible {
  outline: none !important;

  box-shadow: inset 0 0 0 1px rgba(115, 209, 235, 0.07) !important;
}

/* =========================================================
   ADVANCED OUTER
   NO BORDER. NO BOX.
   ========================================================= */

.nautico-r6f-advanced {
  margin-top: 12px !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}

.nautico-r6f-advanced .nautico-advanced-section-header {
  padding: 2px 2px 10px !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* Advanced heading */

.nautico-r6f-advanced .nautico-advanced-section-header .font-bold {
  color: var(--r6f-title) !important;

  font-size: 15px !important;

  line-height: 1.15 !important;

  font-weight: 660 !important;
}

/* =========================================================
   ACTIVE COUNT
   Small cyan text badge, not white.
   ========================================================= */

.nautico-r6f-active {
  display: inline-flex;

  min-height: 20px;

  align-items: center;

  padding: 3px 7px;

  color: rgba(116, 211, 233, 0.74);

  border: 0;

  border-radius: 999px;

  background: rgba(65, 169, 205, 0.036);

  box-shadow: inset 0 0 0 1px rgba(112, 204, 231, 0.055);

  font-size: 7px;

  font-weight: 720;

  line-height: 1;

  letter-spacing: 0.07em;

  text-transform: uppercase;
}

/* =========================================================
   ADVANCED BODY
   ========================================================= */

.nautico-r6f-body {
  display: grid !important;

  gap: 11px !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;
}

/* =========================================================
   PRESET TITLE
   ========================================================= */

.nautico-r6f-preset-label {
  margin: 1px 0 5px;

  color: rgba(120, 207, 232, 0.67);

  font-size: 7.5px;

  line-height: 1;

  font-weight: 720;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}

/* =========================================================
   FOUR PRESETS
   Compact, same height, readable.
   ========================================================= */

.nautico-r6f-presets {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 6px !important;

  margin: 0 !important;
}

.nautico-r6f-recipe {
  display: block;

  min-width: 0;

  min-height: 60px;

  padding: 9px 10px;

  text-align: left;

  color: var(--r6f-text);

  border: 0;

  border-radius: 11px;

  background: linear-gradient(
    145deg,
    rgba(18, 37, 57, 0.29),
    rgba(7, 21, 36, 0.2)
  );

  box-shadow: inset 0 0 0 1px rgba(116, 204, 232, 0.04);

  transition:
    transform 130ms ease,
    background 130ms ease,
    box-shadow 130ms ease;
}

.nautico-r6f-recipe:hover {
  transform: translateY(-1px);

  background: linear-gradient(
    145deg,
    rgba(24, 47, 68, 0.39),
    rgba(9, 27, 43, 0.28)
  );

  box-shadow:
    inset 0 0 0 1px rgba(112, 210, 237, 0.1),
    0 0 18px rgba(55, 170, 216, 0.035);
}

.nautico-r6f-recipe-title {
  display: block;

  color: rgba(238, 248, 253, 0.91);

  font-size: 10px;

  line-height: 1.18;

  font-weight: 650;
}

.nautico-r6f-recipe-copy {
  display: -webkit-box;

  margin-top: 3px;

  overflow: hidden;

  color: rgba(180, 203, 217, 0.47);

  font-size: 7.5px;

  line-height: 1.33;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;
}

/* =========================================================
   FIELDS
   Grouped into faint glass areas.
   ========================================================= */

.nautico-r6f-fields {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 6px !important;

  margin-top: 0 !important;

  padding: 8px !important;

  border: 0 !important;

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.004);

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.025);
}

.nautico-r6f-fields label {
  color: rgba(198, 219, 231, 0.61) !important;

  font-size: 8.5px !important;
}

.nautico-r6f-fields input,
.nautico-r6f-fields select,
.nautico-r6f-fields textarea {
  min-height: 31px !important;

  color: rgba(238, 248, 253, 0.89) !important;

  border: 0 !important;

  border-radius: 8px !important;

  background: rgba(255, 255, 255, 0.009) !important;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.038) !important;

  font-size: 9px !important;
}

/* =========================================================
   CHECKS
   ========================================================= */

.nautico-r6f-checks {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 5px !important;

  margin-top: 0 !important;
}

.nautico-r6f-check {
  display: flex;

  min-height: 34px;

  align-items: flex-start;

  gap: 7px;

  padding: 7px 8px;

  color: rgba(198, 219, 231, 0.6);

  border: 0;

  border-radius: 9px;

  background: rgba(255, 255, 255, 0.004);

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.025);

  font-size: 8px;

  line-height: 1.32;
}

.nautico-r6f-check:hover {
  background: rgba(255, 255, 255, 0.01);

  box-shadow: inset 0 0 0 1px rgba(112, 209, 236, 0.08);
}

.nautico-r6f-check input[type='checkbox'] {
  width: 14px !important;

  height: 14px !important;

  min-height: 14px !important;

  flex: 0 0 14px;

  margin: 1px 0 0 !important;

  accent-color: #62c6d8;
}

/* =========================================================
   INFO
   ========================================================= */

.nautico-r6f-info {
  padding: 7px 8px;

  color: var(--r6f-muted);

  border: 0;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.003);

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.02);

  font-size: 7.5px;

  line-height: 1.35;
}

/* =========================================================
   NEUTRALIZE LEGACY BRIGHT AREAS
   ONLY INSIDE ADVANCED.
   ========================================================= */

.nautico-r6f-advanced .bg,
.nautico-r6f-advanced .bg-alt,
.nautico-r6f-advanced .bg-white,
.nautico-r6f-advanced [class*='bg-white'] {
  color: rgba(222, 238, 246, 0.75) !important;

  background: rgba(255, 255, 255, 0.006) !important;

  border-color: transparent !important;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.022) !important;
}

/* Remove excessive old margins only inside Advanced. */

.nautico-r6f-body .mt-16 {
  margin-top: 9px !important;
}

.nautico-r6f-body .mt-14 {
  margin-top: 7px !important;
}

.nautico-r6f-body .mt-12,
.nautico-r6f-body .mt-10,
.nautico-r6f-body .mt-8 {
  margin-top: 5px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 899px) {
  .nautico-r6f-presets,
  .nautico-r6f-fields,
  .nautico-r6f-checks {
    grid-template-columns: 1fr !important;
  }
}

/* NAUTICO_R6_FIXED_END */

/* NAUTICO_R6_1C_START */

/* =========================================================
   A. UPLOAD — ALL CONTROLS VISIBLE
   ========================================================= */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone {
  position: relative !important;

  display: block !important;

  height: auto !important;

  min-height: 184px !important;

  max-height: none !important;

  padding: 13px 14px 14px !important;

  overflow: visible !important;

  clip: auto !important;

  clip-path: none !important;

  background: rgba(255, 255, 255, 0.008) !important;

  background-image: none !important;
}

/* Remove the circular / corner artwork completely. */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone::before,
html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone::after {
  content: none !important;

  display: none !important;

  background: none !important;

  background-image: none !important;

  box-shadow: none !important;
}

/* Remove decorative corner treatment from left sheet too. */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card::before,
html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card::after {
  content: none !important;

  display: none !important;
}

/* Compact icon. */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone
  .h-44.w-44 {
  width: 40px !important;

  height: 40px !important;
}

/* Compact title spacing. */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone
  > .mt-10 {
  margin-top: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone
  > .mt-4 {
  margin-top: 3px !important;
}

/* Real Add files / Add folder row. */

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone
  > .mt-14 {
  position: relative !important;

  z-index: 5 !important;

  display: flex !important;

  margin-top: 10px !important;

  gap: 8px !important;

  overflow: visible !important;

  visibility: visible !important;

  opacity: 1 !important;

  transform: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-composer-shell
  .nautico-premium-card
  .nautico-dropzone
  > .mt-14
  > button {
  position: static !important;

  display: inline-flex !important;

  width: auto !important;

  min-width: 116px !important;

  min-height: 35px !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 6px 14px !important;

  transform: none !important;

  clip: auto !important;

  clip-path: none !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/* =========================================================
   B. FADED PAGE EDGES
   ========================================================= */

html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card,
html.nautico-futuristic-ui body > .nautico-book-protect-page {
  border-color: rgba(112, 205, 233, 0.025) !important;

  box-shadow:
    0 24px 64px rgba(0, 6, 17, 0.28),
    0 0 40px rgba(56, 171, 216, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

/* =========================================================
   C. PROTECTION TABS — SOFT, NO HARD RINGS
   ========================================================= */

html.nautico-futuristic-ui .nautico-protect-pagination {
  border: 0 !important;

  background: rgba(255, 255, 255, 0.006) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button {
  border: 0 !important;

  outline: none !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button.is-active {
  background: linear-gradient(
    135deg,
    rgba(74, 98, 190, 0.2),
    rgba(44, 139, 184, 0.13)
  ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(112, 210, 235, 0.07),
    0 0 18px rgba(55, 174, 216, 0.026) !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button:focus,
html.nautico-futuristic-ui .nautico-protect-pagination button:focus-visible {
  outline: none !important;
}

/* =========================================================
   D. ADVANCED OUTER — NO CARD INSIDE CARD
   ========================================================= */

.nautico-r6f-advanced {
  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-advanced .nautico-advanced-section-header {
  padding: 3px 1px 11px !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(112, 204, 232, 0.035) !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* =========================================================
   E. PRESETS — CLEAN 2 x 2
   ========================================================= */

.nautico-r6f-presets {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 7px !important;
}

.nautico-r6f-recipe {
  position: relative !important;

  min-width: 0 !important;

  min-height: 64px !important;

  padding: 10px 11px !important;

  border: 0 !important;

  border-radius: 12px !important;

  color: rgba(210, 229, 239, 0.7) !important;

  background: rgba(255, 255, 255, 0.005) !important;

  box-shadow: inset 0 0 0 1px rgba(112, 204, 232, 0.03) !important;

  transition:
    transform 130ms ease,
    background 130ms ease,
    box-shadow 130ms ease !important;
}

.nautico-r6f-recipe:hover {
  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.011) !important;

  box-shadow:
    inset 0 0 0 1px rgba(112, 211, 237, 0.08),
    0 0 16px rgba(56, 172, 217, 0.025) !important;
}

/* Persistent selected preset. */

.nautico-r6f-recipe.is-selected {
  background: linear-gradient(
    135deg,
    rgba(72, 98, 194, 0.25),
    rgba(43, 143, 187, 0.16)
  ) !important;

  box-shadow:
    inset 0 0 0 1px rgba(111, 219, 238, 0.25),
    0 0 20px rgba(54, 179, 219, 0.065) !important;
}

.nautico-r6f-recipe.is-selected::after {
  content: 'ACTIVE';

  position: absolute;

  top: 7px;

  right: 8px;

  color: rgba(123, 220, 238, 0.78);

  font-size: 6px;

  font-weight: 750;

  letter-spacing: 0.08em;
}

.nautico-r6f-recipe-title {
  padding-right: 32px !important;

  color: rgba(240, 249, 254, 0.92) !important;

  font-size: 11px !important;

  line-height: 1.2 !important;
}

.nautico-r6f-recipe-copy {
  margin-top: 4px !important;

  color: rgba(185, 208, 221, 0.53) !important;

  font-size: 8.5px !important;

  line-height: 1.35 !important;
}

/* =========================================================
   F. ADVANCED FIELD GROUPS
   No more giant nested cards.
   ========================================================= */

.nautico-r6f-body {
  gap: 11px !important;
}

.nautico-r6f-fields {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  align-items: start !important;

  gap: 9px 11px !important;

  margin: 0 !important;

  padding: 11px 0 4px !important;

  border: 0 !important;

  border-top: 1px solid rgba(112, 204, 232, 0.03) !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* Field wrapper itself is no longer another card. */

.nautico-r6f-fields > * {
  min-width: 0 !important;

  margin: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-fields label {
  color: rgba(203, 223, 234, 0.7) !important;

  font-size: 10px !important;

  line-height: 1.3 !important;
}

.nautico-r6f-fields input,
.nautico-r6f-fields select,
.nautico-r6f-fields textarea {
  width: 100% !important;

  min-height: 35px !important;

  margin-top: 5px !important;

  border: 0 !important;

  border-radius: 9px !important;

  color: rgba(239, 249, 254, 0.91) !important;

  background: rgba(255, 255, 255, 0.012) !important;

  box-shadow: inset 0 0 0 1px rgba(112, 204, 232, 0.042) !important;

  font-size: 10px !important;
}

/*
 * Explanatory note should sit under the fields,
 * not appear as a competing second card.
 */

.nautico-r6f-fields .nautico-r6f-info,
.nautico-r6f-info {
  grid-column: 1 / -1 !important;

  min-height: 0 !important;

  padding: 1px 2px 4px !important;

  border: 0 !important;

  border-radius: 0 !important;

  color: rgba(180, 204, 218, 0.48) !important;

  background: transparent !important;

  box-shadow: none !important;

  font-size: 8.5px !important;

  line-height: 1.4 !important;
}

/* =========================================================
   G. CHECKBOX SETTINGS — FLAT ROWS
   ========================================================= */

.nautico-r6f-checks {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 3px 12px !important;

  padding: 9px 0 4px !important;

  border-top: 1px solid rgba(112, 204, 232, 0.03) !important;
}

.nautico-r6f-check {
  min-height: 34px !important;

  padding: 7px 2px !important;

  border: 0 !important;

  border-radius: 0 !important;

  color: rgba(201, 222, 233, 0.66) !important;

  background: transparent !important;

  box-shadow: none !important;

  font-size: 9px !important;

  line-height: 1.35 !important;
}

.nautico-r6f-check:hover {
  color: rgba(229, 241, 248, 0.82) !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* =========================================================
   H. RESPONSIVE
   ========================================================= */

@media (max-width: 899px) {
  .nautico-r6f-presets,
  .nautico-r6f-fields,
  .nautico-r6f-checks {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-composer-shell
    .nautico-premium-card
    .nautico-dropzone {
    min-height: 190px !important;
  }
}

/* NAUTICO_R6_1C_END */

/* NAUTICO_R6_1D2_START */

/* =========================================================
   1. NO DECORATIVE GLOW / NO TOP-LEFT PATCH
   ========================================================= */

html.nautico-futuristic-ui .nautico-premium-card::before,
html.nautico-futuristic-ui .nautico-premium-card::after,
html.nautico-futuristic-ui .nautico-dropzone::before,
html.nautico-futuristic-ui .nautico-dropzone::after {
  content: none !important;

  display: none !important;

  background: none !important;

  background-image: none !important;

  box-shadow: none !important;

  filter: none !important;
}

html.nautico-futuristic-ui .nautico-premium-card {
  background: linear-gradient(
    180deg,
    rgba(4, 17, 37, 0.97),
    rgba(3, 13, 30, 0.97)
  ) !important;

  background-image: linear-gradient(
    180deg,
    rgba(4, 17, 37, 0.97),
    rgba(3, 13, 30, 0.97)
  ) !important;

  border-color: rgba(121, 202, 230, 0.035) !important;

  box-shadow: 0 20px 50px rgba(0, 7, 18, 0.23) !important;
}

html.nautico-futuristic-ui body > .nautico-book-protect-page {
  background: linear-gradient(
    180deg,
    rgba(4, 17, 37, 0.97),
    rgba(3, 13, 30, 0.97)
  ) !important;

  border-color: rgba(121, 202, 230, 0.035) !important;

  box-shadow: 0 20px 50px rgba(0, 7, 18, 0.23) !important;
}

/* =========================================================
   2. UPLOAD
   Keep buttons visible, but remove unnecessary box feeling.
   ========================================================= */

html.nautico-futuristic-ui .nautico-dropzone {
  background: rgba(255, 255, 255, 0.006) !important;

  background-image: none !important;

  border: 1px dashed rgba(119, 202, 231, 0.08) !important;

  box-shadow: none !important;
}

/* =========================================================
   3. LEFT FORM — FEWER BOXES
   ========================================================= */

html.nautico-futuristic-ui .nautico-premium-card input,
html.nautico-futuristic-ui .nautico-premium-card textarea,
html.nautico-futuristic-ui .nautico-premium-card select {
  background: rgba(255, 255, 255, 0.01) !important;

  border-color: rgba(118, 202, 232, 0.055) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-delivery-tabs,
html.nautico-futuristic-ui .nautico-protection-panel {
  border-color: rgba(118, 202, 232, 0.045) !important;

  background: rgba(255, 255, 255, 0.005) !important;

  box-shadow: none !important;
}

/* =========================================================
   4. PROTECTION CENTER HEADER
   ========================================================= */

html.nautico-futuristic-ui .nautico-advanced-drawer-header {
  border: 0 !important;

  border-bottom: 1px solid rgba(116, 202, 232, 0.03) !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}

/* =========================================================
   5. ESSENTIALS / ADVANCED
   ========================================================= */

html.nautico-futuristic-ui .nautico-protect-pagination {
  border: 0 !important;

  background: rgba(255, 255, 255, 0.004) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button {
  border: 0 !important;

  outline: 0 !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-protect-pagination button.is-active {
  background: rgba(69, 108, 174, 0.14) !important;

  box-shadow: inset 0 0 0 1px rgba(116, 210, 235, 0.065) !important;
}

/* =========================================================
   6. ADVANCED OUTER
   ========================================================= */

.nautico-r6f-advanced {
  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-advanced .nautico-advanced-section-header {
  margin-bottom: 8px !important;

  padding: 0 2px 10px !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(117, 204, 232, 0.03) !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* =========================================================
   7. EXISTING LOGICAL GROUP HEADINGS
   Make the real existing sections obvious.
   ========================================================= */

.nautico-r6f-advanced .nautico-control-group-heading {
  position: relative;

  margin: 16px 0 7px !important;

  padding: 0 0 7px !important;

  border: 0 !important;

  border-bottom: 1px solid rgba(115, 204, 232, 0.045) !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-advanced .nautico-control-group-heading strong {
  display: block !important;

  color: rgba(138, 218, 239, 0.88) !important;

  font-size: 11px !important;

  line-height: 1.2 !important;

  font-weight: 760 !important;

  letter-spacing: 0.045em !important;

  text-transform: uppercase !important;
}

.nautico-r6f-advanced .nautico-control-group-heading span {
  display: block !important;

  margin-top: 4px !important;

  max-width: 94% !important;

  color: rgba(181, 204, 219, 0.53) !important;

  font-size: 9px !important;

  line-height: 1.4 !important;
}

/* =========================================================
   8. PRESETS
   Only selected preset gets a real outline.
   ========================================================= */

.nautico-r6f-presets {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 7px !important;
}

.nautico-r6f-recipe {
  position: relative !important;

  min-height: 64px !important;

  padding: 10px 11px !important;

  border: 1px solid transparent !important;

  border-radius: 12px !important;

  background: rgba(255, 255, 255, 0.006) !important;

  box-shadow: none !important;
}

.nautico-r6f-recipe:hover {
  background: rgba(255, 255, 255, 0.012) !important;

  border-color: rgba(115, 207, 234, 0.07) !important;

  box-shadow: none !important;
}

.nautico-r6f-recipe.is-selected {
  background: rgba(67, 116, 174, 0.14) !important;

  border-color: rgba(125, 219, 238, 0.34) !important;

  box-shadow: none !important;
}

.nautico-r6f-recipe.is-selected::after {
  content: 'SELECTED' !important;

  position: absolute;

  top: 8px;

  right: 9px;

  color: rgba(132, 222, 239, 0.82) !important;

  font-size: 6.5px !important;

  font-weight: 760 !important;

  letter-spacing: 0.08em !important;
}

.nautico-r6f-recipe-title {
  padding-right: 46px !important;

  color: rgba(240, 249, 254, 0.92) !important;

  font-size: 10.5px !important;

  font-weight: 700 !important;
}

.nautico-r6f-recipe-copy {
  color: rgba(183, 207, 220, 0.52) !important;

  font-size: 8.5px !important;

  line-height: 1.35 !important;
}

/* =========================================================
   9. ADVANCED FIELDS
   Inputs stay visible; wrappers stop looking like cards.
   ========================================================= */

.nautico-r6f-fields {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 9px 11px !important;

  margin: 0 !important;

  padding: 2px 0 5px !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-fields > * {
  min-width: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-fields input,
.nautico-r6f-fields select,
.nautico-r6f-fields textarea {
  width: 100% !important;

  min-height: 34px !important;

  border: 1px solid rgba(115, 203, 232, 0.055) !important;

  border-radius: 9px !important;

  background: rgba(255, 255, 255, 0.009) !important;

  box-shadow: none !important;
}

/* =========================================================
   10. CHECKBOXES
   Flat settings rows.
   ========================================================= */

.nautico-r6f-checks {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  gap: 1px 14px !important;

  margin: 0 !important;

  padding: 2px 0 6px !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

.nautico-r6f-check {
  min-height: 30px !important;

  padding: 6px 1px !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: rgba(201, 220, 232, 0.68) !important;
}

.nautico-r6f-check:hover {
  background: transparent !important;

  box-shadow: none !important;

  color: rgba(230, 241, 248, 0.85) !important;
}

/* =========================================================
   11. HELP TEXT
   ========================================================= */

.nautico-r6f-info {
  padding: 1px 1px 5px !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  color: rgba(180, 204, 218, 0.47) !important;
}

/* =========================================================
   12. MOBILE
   ========================================================= */

@media (max-width: 899px) {
  .nautico-r6f-presets,
  .nautico-r6f-fields,
  .nautico-r6f-checks {
    grid-template-columns: 1fr !important;
  }
}

/* NAUTICO_R6_1D2_END */

/* NAUTICO_UPLOAD_GLOW_KILL_START */

/* omoară glow-ul/gradientul rămas din zona de upload */
html.nautico-futuristic-ui .nautico-dropzone,
html.nautico-futuristic-ui .nautico-upload-shell,
html.nautico-futuristic-ui .nautico-upload-panel,
html.nautico-futuristic-ui .nautico-upload-stage,
html.nautico-futuristic-ui .nautico-upload-stage-inner {
  background: rgba(255, 255, 255, 0.01) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* pseudo-elementele care lasă pata din colț */
html.nautico-futuristic-ui .nautico-dropzone::before,
html.nautico-futuristic-ui .nautico-dropzone::after,
html.nautico-futuristic-ui .nautico-upload-shell::before,
html.nautico-futuristic-ui .nautico-upload-shell::after,
html.nautico-futuristic-ui .nautico-upload-panel::before,
html.nautico-futuristic-ui .nautico-upload-panel::after,
html.nautico-futuristic-ui .nautico-upload-stage::before,
html.nautico-futuristic-ui .nautico-upload-stage::after,
html.nautico-futuristic-ui .nautico-upload-stage-inner::before,
html.nautico-futuristic-ui .nautico-upload-stage-inner::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* zona de upload să rămână curată, doar cu border discret */
html.nautico-futuristic-ui .nautico-dropzone {
  border: 1px dashed rgba(120, 205, 233, 0.08) !important;
  border-radius: 28px !important;
}

/* NAUTICO_UPLOAD_GLOW_KILL_END */

/* NAUTICO_REAL_ROUNDED_LEFT_START */

/*
 * OUTER PAGE
 * Keep the existing rounded shell.
 */
html.nautico-futuristic-ui .nautico-composer-shell {
  border-radius: 32px !important;

  overflow: hidden !important;
}

/*
 * THIS IS THE LARGE VISIBLE INNER CARD.
 * The previous fixes rounded only the parent shell.
 */
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
  border-radius: 28px !important;

  overflow: hidden !important;

  clip-path: inset(0 round 28px) !important;
}

/*
 * The form itself is drawing the square rectangle
 * visible in the screenshot.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form {
  border-radius: 26px !important;

  overflow: hidden !important;

  clip-path: inset(0 round 26px) !important;
}

/*
 * If TransferComposer adds one full-size wrapper
 * directly inside the form, it must follow the same
 * curvature instead of painting square corners.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form
  > div:first-child {
  border-radius: 24px !important;
}

/*
 * Remove any square decorative layer which can sit
 * over the rounded surface.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card::before,
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card::after,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form::before,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form::after {
  border-radius: inherit !important;
}

/*
 * Keep the subtle frame, but make it follow the corners.
 */
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
  border: 1px solid rgba(111, 198, 229, 0.055) !important;

  box-shadow: 0 20px 48px rgba(0, 6, 18, 0.22) !important;
}

/*
 * Important:
 * don't put another square background on the form.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form {
  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* NAUTICO_REAL_ROUNDED_LEFT_END */

/* NAUTICO_ROUNDED_NO_CLIP_START */

/* =========================================================
   KEEP ROUNDED CORNERS
   BUT DO NOT CUT THE FORM AT THE BOTTOM
   ========================================================= */

/*
 * Outer positioning shell must NEVER clip the card.
 */
html.nautico-futuristic-ui .nautico-composer-shell {
  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  clip: auto !important;

  clip-path: none !important;

  border-radius: 32px !important;
}

/*
 * The real card keeps its rounded corners.
 * No clip-path and no fixed/fake height.
 */
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card {
  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  clip: auto !important;

  clip-path: none !important;

  border-radius: 28px !important;

  background: linear-gradient(180deg, #071528, #061322) !important;
}

/*
 * The form must grow naturally.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form {
  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  clip: auto !important;

  clip-path: none !important;

  border: 0 !important;

  border-radius: 26px !important;

  background: transparent !important;

  box-shadow: none !important;
}

/*
 * Direct form wrappers must not crop Send securely
 * or status/error text below Protect.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form
  > div {
  max-height: none !important;

  overflow: visible !important;

  clip-path: none !important;
}

/*
 * Keep actual visual rounding using background + radius,
 * not clipping.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card::before,
html.nautico-futuristic-ui .nautico-composer-shell .nautico-premium-card::after,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form::before,
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  > form::after {
  border-radius: inherit !important;
}

/*
 * Send button must remain completely visible.
 */
html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card
  button[type='submit'] {
  position: relative !important;

  z-index: 3 !important;

  margin-bottom: 14px !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/*
 * Desktop viewport:
 * allow normal page scrolling when the complete composer
 * is taller than available screen height.
 */
@media (min-width: 900px) {
  html.nautico-futuristic-ui,
  html.nautico-futuristic-ui body {
    min-height: 100% !important;

    overflow-y: auto !important;
  }

  html.nautico-futuristic-ui .nautico-composer-shell {
    padding-bottom: 24px !important;
  }
}

/* NAUTICO_ROUNDED_NO_CLIP_END */

/* NAUTICO_R7C_PUBLIC_START */

html.nautico-futuristic-ui .nautico-nav button {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;

  border: 0 !important;

  padding: 0 !important;

  color: inherit !important;

  background: none !important;

  font: inherit !important;

  cursor: pointer !important;
}

html.nautico-futuristic-ui .nautico-nav button:hover {
  color: #8edbed !important;
}

/* popup */

.nautico-info-backdrop {
  position: fixed;

  inset: 0;

  z-index: 9000;

  display: grid;

  place-items: center;

  padding: 20px;

  background: rgba(1, 8, 20, 0.68);

  backdrop-filter: blur(9px);
}

.nautico-info-modal {
  width: min(560px, 100%);

  max-height: min(76svh, 680px);

  overflow-y: auto;

  border: 1px solid rgba(112, 202, 231, 0.16);

  border-radius: 24px;

  color: #eff8ff;

  background: linear-gradient(
    145deg,
    rgba(7, 24, 47, 0.98),
    rgba(3, 14, 30, 0.98)
  );

  box-shadow: 0 35px 100px rgba(0, 5, 18, 0.56);
}

.nautico-info-header {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 20px;

  padding: 24px 26px 18px;

  border-bottom: 1px solid rgba(111, 199, 228, 0.07);
}

.nautico-info-eyebrow {
  margin-bottom: 7px;

  color: #8bd9eb;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 0.15em;
}

.nautico-info-header h2 {
  margin: 0;

  color: #f7fbff;

  font-size: 28px;

  line-height: 1.15;
}

.nautico-info-close {
  display: grid;

  place-items: center;

  width: 42px;

  height: 42px;

  flex: 0 0 42px;

  border: 0;

  border-radius: 14px;

  color: #fff;

  background: linear-gradient(135deg, #4770de, #58bace);

  font-size: 21px;

  cursor: pointer;
}

.nautico-info-content {
  padding: 21px 26px;
}

.nautico-info-paragraph {
  margin: 0 0 14px;

  color: rgba(211, 228, 239, 0.78);

  font-size: 14px;

  line-height: 1.65;
}

.nautico-info-point {
  display: grid;

  grid-template-columns: 26px 1fr;

  gap: 10px;

  margin-bottom: 12px;

  color: rgba(218, 233, 243, 0.84);

  font-size: 13px;

  line-height: 1.5;
}

.nautico-info-dot {
  display: grid;

  place-items: center;

  width: 24px;

  height: 24px;

  border-radius: 8px;

  color: #9de5ef;

  background: rgba(69, 156, 197, 0.14);

  font-size: 10px;

  font-weight: 800;
}

.nautico-info-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 15px 26px 20px;

  border-top: 1px solid rgba(111, 199, 228, 0.06);

  color: rgba(183, 207, 223, 0.46);

  font-size: 10px;
}

.nautico-info-footer button {
  min-width: 82px;

  min-height: 35px;

  border: 0;

  border-radius: 11px;

  color: #fff;

  background: linear-gradient(100deg, #4268db, #53b8ca);

  font-weight: 700;

  cursor: pointer;
}

/* policies */

.nautico-policy-links {
  position: absolute;

  z-index: 90;

  left: 50%;

  bottom: 8px;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 7px 13px;

  border: 1px solid rgba(105, 192, 222, 0.06);

  border-radius: 999px;

  background: rgba(3, 15, 31, 0.3);

  font-size: 10px;

  white-space: nowrap;
}

.nautico-policy-links a {
  color: rgba(200, 223, 236, 0.61);

  text-decoration: none;
}

.nautico-policy-links a:hover {
  color: #8bd9ed;
}

@media (max-width: 700px) {
  .nautico-info-backdrop {
    padding: 12px;
  }

  .nautico-info-modal {
    max-height: 86svh;

    border-radius: 19px;
  }

  .nautico-info-header,
  .nautico-info-content,
  .nautico-info-footer {
    padding-left: 18px;

    padding-right: 18px;
  }

  .nautico-info-header h2 {
    font-size: 23px;
  }

  .nautico-policy-links {
    position: relative;

    left: auto;

    bottom: auto;

    transform: none;

    width: -moz-fit-content;

    width: fit-content;

    margin: 12px auto;

    flex-wrap: wrap;

    white-space: normal;
  }
}

/* NAUTICO_R7C_PUBLIC_END */

/* NAUTICO_LOGIN_V2_START */

/* =========================================================
   AUTH PAGE
   ========================================================= */

.nautico-auth-stage {
  position: relative !important;
  min-height: 100svh !important;

  padding: 28px 18px 24px !important;

  color: #edf6ff !important;

  background:
    radial-gradient(
      circle at 18% 20%,
      rgba(36, 120, 202, 0.19),
      transparent 27rem
    ),
    radial-gradient(
      circle at 82% 82%,
      rgba(34, 119, 184, 0.1),
      transparent 23rem
    ),
    linear-gradient(135deg, #020a17 0%, #06162a 52%, #020914 100%) !important;
}

.nautico-auth-stage::before {
  content: '';

  position: fixed;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(121, 183, 222, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 183, 222, 0.026) 1px, transparent 1px);

  background-size: 52px 52px;
}

/* =========================================================
   LOGO
   ========================================================= */

.nautico-auth-logo {
  position: relative !important;
  z-index: 2 !important;

  display: flex !important;

  justify-content: center !important;
  align-items: center !important;

  margin: 0 auto 18px !important;
}

.nautico-login-logo-image {
  display: block !important;

  width: auto !important;
  height: 46px !important;

  max-width: 210px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  opacity: 1 !important;

  filter: drop-shadow(0 8px 24px rgba(75, 171, 218, 0.13)) !important;
}

/* =========================================================
   CARD
   ========================================================= */

.nautico-auth-card {
  position: relative !important;
  z-index: 2 !important;

  width: min(100%, 470px) !important;

  max-width: 470px !important;

  margin: 0 auto !important;

  padding: 28px 34px 30px !important;

  border: 1px solid rgba(113, 186, 226, 0.17) !important;

  border-radius: 22px !important;

  color: #edf6ff !important;

  background: linear-gradient(
    145deg,
    rgba(7, 25, 50, 0.93),
    rgba(3, 16, 34, 0.92)
  ) !important;

  box-shadow:
    0 30px 80px rgba(0, 4, 17, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;

  backdrop-filter: blur(16px) saturate(112%) !important;

  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
}

.nautico-auth-card::before,
.nautico-auth-card::after {
  display: none !important;
  content: none !important;
}

/* heading */

.nautico-auth-card > h1 {
  margin: 0 !important;

  color: #f8fbff !important;

  text-align: center !important;

  font-size: 28px !important;

  line-height: 1.14 !important;

  font-weight: 760 !important;

  letter-spacing: -0.025em !important;
}

.nautico-login-v2-subtitle {
  margin: 7px 0 21px;

  text-align: center;

  color: rgba(194, 216, 233, 0.64);

  font-size: 13px;

  line-height: 1.4;
}

/* =========================================================
   SOCIAL LOGIN
   ========================================================= */

.nautico-login-social {
  margin-bottom: 20px;
}

/*
 * These are still BeDrive SocialAuthSection buttons.
 * Only presentation is changed.
 */

.nautico-login-social button {
  min-height: 46px !important;

  border: 1px solid rgba(111, 187, 225, 0.17) !important;

  border-radius: 11px !important;

  color: #edf6ff !important;

  background: rgba(4, 18, 38, 0.64) !important;

  box-shadow: none !important;
}

.nautico-login-social button:hover {
  border-color: rgba(113, 202, 236, 0.34) !important;

  background: rgba(10, 35, 64, 0.76) !important;
}

/* social divider */

.nautico-login-social [role='separator'] {
  opacity: 0.55 !important;
}

/* =========================================================
   EMAIL FORM
   ========================================================= */

.nautico-login-email-form {
  width: 100%;
}

.nautico-login-email-form .mb-32 {
  margin-bottom: 18px !important;
}

.nautico-login-email-form .mb-12 {
  margin-bottom: 10px !important;
}

.nautico-login-email-form label {
  color: rgba(233, 243, 251, 0.9) !important;

  font-size: 13px !important;

  font-weight: 600 !important;
}

.nautico-login-email-form input[type='email'],
.nautico-login-email-form input[type='password'],
.nautico-login-email-form input[type='text'] {
  min-height: 48px !important;

  border: 1px solid rgba(105, 175, 218, 0.18) !important;

  border-radius: 10px !important;

  color: #eef7ff !important;

  background: rgba(3, 17, 37, 0.73) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

.nautico-login-email-form input::-moz-placeholder {
  color: rgba(160, 187, 209, 0.47) !important;
}

.nautico-login-email-form input::placeholder {
  color: rgba(160, 187, 209, 0.47) !important;
}

.nautico-login-email-form input:focus {
  border-color: rgba(78, 165, 225, 0.58) !important;

  outline: none !important;

  box-shadow: 0 0 0 3px rgba(52, 137, 219, 0.09) !important;
}

/* checkbox */

.nautico-login-email-form input[type='checkbox'] {
  accent-color: #4778ea !important;
}

/* links */

.nautico-auth-card a {
  color: #5caaff !important;

  text-decoration: none !important;
}

.nautico-auth-card a:hover {
  color: #80cef8 !important;
}

/* Continue */

.nautico-login-email-form button[type='submit'] {
  width: 100% !important;

  min-height: 49px !important;

  border: 1px solid rgba(113, 210, 234, 0.2) !important;

  border-radius: 11px !important;

  color: #fff !important;

  background: linear-gradient(
    100deg,
    #315de7 0%,
    #3d81dc 54%,
    #4ab7c8 100%
  ) !important;

  box-shadow: 0 12px 30px rgba(40, 105, 205, 0.18) !important;

  font-size: 14px !important;

  font-weight: 700 !important;
}

.nautico-login-email-form button[type='submit']:hover {
  filter: brightness(1.06) !important;
}

/* registration message */

.nautico-auth-message {
  margin: 20px auto 0 !important;

  text-align: center !important;

  color: rgba(188, 210, 226, 0.6) !important;
}

/* footer */

.nautico-auth-footer {
  position: relative !important;
  z-index: 2 !important;

  margin-top: auto !important;

  padding-top: 22px !important;

  color: rgba(177, 201, 218, 0.4) !important;

  font-size: 11px !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {
  .nautico-auth-stage {
    padding: 19px 14px 18px !important;
  }

  .nautico-login-logo-image {
    height: 40px !important;

    max-width: 185px !important;
  }

  .nautico-auth-logo {
    margin-bottom: 14px !important;
  }

  .nautico-auth-card {
    width: 100% !important;

    max-width: 440px !important;

    padding: 23px 19px 25px !important;

    border-radius: 19px !important;
  }

  .nautico-auth-card > h1 {
    font-size: 25px !important;
  }

  .nautico-login-v2-subtitle {
    margin-bottom: 17px;
  }
}

/* NAUTICO_LOGIN_V2_END */

/* NAUTICO_POPUP_DARK_FIX_START */

/*
 * Force Nautico information dialogs to stay dark.
 * This intentionally overrides old light BeDrive/global modal rules.
 */

html.nautico-futuristic-ui .nautico-info-modal,
.nautico-info-modal {
  color: #eaf5ff !important;

  background: linear-gradient(
    145deg,
    rgba(7, 24, 48, 0.985) 0%,
    rgba(3, 14, 31, 0.99) 100%
  ) !important;

  background-color: #06182f !important;

  border: 1px solid rgba(103, 194, 228, 0.18) !important;

  box-shadow: 0 34px 100px rgba(0, 4, 18, 0.65) !important;
}

html.nautico-futuristic-ui .nautico-info-header,
.nautico-info-header {
  background: transparent !important;

  border-bottom: 1px solid rgba(105, 196, 229, 0.1) !important;
}

html.nautico-futuristic-ui .nautico-info-eyebrow,
.nautico-info-eyebrow {
  color: #7fd8ec !important;
}

html.nautico-futuristic-ui .nautico-info-header h2,
.nautico-info-header h2 {
  color: #f6fbff !important;

  opacity: 1 !important;
}

html.nautico-futuristic-ui .nautico-info-content,
.nautico-info-content {
  color: #dcecf7 !important;

  background: transparent !important;
}

html.nautico-futuristic-ui .nautico-info-paragraph,
.nautico-info-paragraph {
  color: rgba(220, 235, 245, 0.82) !important;

  opacity: 1 !important;
}

html.nautico-futuristic-ui .nautico-info-point,
.nautico-info-point {
  color: rgba(226, 239, 248, 0.88) !important;

  opacity: 1 !important;
}

html.nautico-futuristic-ui .nautico-info-point-icon,
html.nautico-futuristic-ui .nautico-info-dot,
.nautico-info-point-icon,
.nautico-info-dot {
  color: #9be9f4 !important;

  background: rgba(64, 159, 200, 0.15) !important;

  opacity: 1 !important;
}

html.nautico-futuristic-ui .nautico-info-footer,
.nautico-info-footer {
  color: rgba(188, 211, 227, 0.54) !important;

  background: transparent !important;

  border-top: 1px solid rgba(105, 196, 229, 0.08) !important;
}

html.nautico-futuristic-ui .nautico-info-close,
html.nautico-futuristic-ui .nautico-info-footer button,
.nautico-info-close,
.nautico-info-footer button {
  color: #ffffff !important;

  background: linear-gradient(110deg, #4269df, #58b9ce) !important;

  opacity: 1 !important;
}

/* Remove any inherited light surface from generic dialog rules. */

html.nautico-futuristic-ui [role='dialog'].nautico-info-modal,
[role='dialog'].nautico-info-modal {
  background-color: #06182f !important;

  color: #eaf5ff !important;
}

/* NAUTICO_POPUP_DARK_FIX_END */

/* ============================================================
   NAUTICO ADMIN FLAT OCEAN THEME V2 — FINAL
   ============================================================ */

html.nautico-futuristic-ui .nautico-admin-shell {
  --na-admin-bg: #07111f;
  --na-admin-sidebar: #0a1726;
  --na-admin-panel: #0d1b2b;
  --na-admin-panel-2: #102238;

  --na-admin-border: rgba(148, 177, 199, 0.16);
  --na-admin-text: #f4f8fb;
  --na-admin-text-soft: #c0ced9;
  --na-admin-muted: #8ea3b4;

  --na-admin-accent: #43c6be;
  --na-admin-blue: #2f6feb;

  background: var(--na-admin-bg) !important;
  background-image: none !important;

  color: var(--na-admin-text) !important;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* SIDEBAR */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  > * {
  background: var(--na-admin-sidebar) !important;
  background-image: none !important;

  border-right: 1px solid var(--na-admin-border) !important;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
}

/* CONTENT */

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content {
  background: var(--na-admin-bg) !important;
  background-image: none !important;

  color: var(--na-admin-text) !important;
}

/* MAIN PANEL */

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-rounded-panel {
  background: var(--na-admin-panel) !important;
  background-image: none !important;

  border: 1px solid var(--na-admin-border) !important;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;

  color: var(--na-admin-text) !important;
}

/* TITLES */

html.nautico-futuristic-ui .nautico-admin-shell :is(h1, h2, h3, h4, h5, h6) {
  color: var(--na-admin-text) !important;

  text-shadow: none !important;
}

/* MUTED */

html.nautico-futuristic-ui .nautico-admin-shell .text-muted {
  color: var(--na-admin-muted) !important;
}

/* SIDEBAR LINKS */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  :is(a, button) {
  color: var(--na-admin-text-soft) !important;

  background-image: none !important;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;

  text-shadow: none !important;

  transform: none !important;
}

/* SIMPLE HOVER */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  :is(a, button):hover {
  color: #fff !important;

  background: rgba(67, 198, 190, 0.08) !important;

  background-image: none !important;

  border-color: rgba(67, 198, 190, 0.18) !important;

  box-shadow: none !important;
  transform: none !important;
}

/* ACTIVE */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  :is([aria-current='page'], .active, .is-active) {
  color: #fff !important;

  background: rgba(47, 111, 235, 0.18) !important;

  background-image: none !important;

  border-color: rgba(67, 198, 190, 0.26) !important;

  box-shadow: none !important;
}

/* PANELS / GENERIC SURFACES */

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(.bg, .bg-elevated, [class~='bg-elevated']) {
  background: var(--na-admin-panel) !important;

  background-image: none !important;
}

/* TABLES */

html.nautico-futuristic-ui .nautico-admin-shell table {
  background: var(--na-admin-panel) !important;

  background-image: none !important;

  color: var(--na-admin-text) !important;

  border-color: var(--na-admin-border) !important;
}

html.nautico-futuristic-ui .nautico-admin-shell :is(th, td) {
  border-color: var(--na-admin-border) !important;
}

html.nautico-futuristic-ui .nautico-admin-shell [role='row'] {
  box-shadow: none !important;
  transform: none !important;
}

html.nautico-futuristic-ui .nautico-admin-shell [role='row']:hover {
  background: rgba(67, 198, 190, 0.055) !important;

  box-shadow: none !important;
}

/* INPUTS */

html.nautico-futuristic-ui .nautico-admin-shell :is(input, textarea, select) {
  background: #091725 !important;

  background-image: none !important;

  color: var(--na-admin-text) !important;

  border-color: var(--na-admin-border) !important;

  box-shadow: none !important;
  filter: none !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(input, textarea, select)::-moz-placeholder {
  color: #71899b !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(input, textarea, select)::placeholder {
  color: #71899b !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(input, textarea, select):focus {
  border-color: rgba(67, 198, 190, 0.55) !important;

  box-shadow: 0 0 0 1px rgba(67, 198, 190, 0.18) !important;

  outline: none !important;
}

/* BORDERS */

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(.border, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--na-admin-border) !important;
}

/* REMOVE DECORATIVE EFFECTS */

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(a, button, [role='button'], [role='row']) {
  transform: none !important;

  transition:
    background-color 0s,
    border-color 0s,
    color 0s !important;
}

html.nautico-futuristic-ui .nautico-admin-shell * {
  text-shadow: none !important;
}

/* SCROLLBAR */

html.nautico-futuristic-ui .nautico-admin-shell {
  scrollbar-color: #314b60 #07111f;
}

html.nautico-futuristic-ui .nautico-admin-shell ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html.nautico-futuristic-ui .nautico-admin-shell ::-webkit-scrollbar-track {
  background: #07111f;
}

html.nautico-futuristic-ui .nautico-admin-shell ::-webkit-scrollbar-thumb {
  background: #314b60;

  border: 2px solid #07111f;

  border-radius: 10px;
}

/* MOBILE */

@media (max-width: 767px) {
  html.nautico-futuristic-ui .nautico-admin-shell .dashboard-rounded-panel {
    border-radius: 14px;
  }
}

/* ============================================================
   NAUTICO ADMIN WHITE CONTENT V1 — FINAL
   White admin content + restrained empty-state illustrations.
   ============================================================ */

/* ------------------------------------------------------------
   TEXT
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-admin-shell {
  color: #ffffff !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(h1, h2, h3, h4, h5, h6, p, span, label, legend, li, dt, dd, th, td) {
  color: #ffffff !important;
  text-shadow: none !important;
}

/*
 * Previously muted/secondary BeDrive text should remain
 * readable on navy, but still visually white.
 */

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(
    .text-muted,
    [class*='text-muted'],
    [class*='text-main'],
    [class*='text-primary']
  ) {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Links */

html.nautico-futuristic-ui .nautico-admin-shell a {
  color: #ffffff;
}

html.nautico-futuristic-ui .nautico-admin-shell a:hover {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   ICONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-admin-shell
  svg:not(.recharts-surface):not([class*='chart']) {
  color: #ffffff;
}

/*
 * Most material icons inherit currentColor.
 */

html.nautico-futuristic-ui .nautico-admin-shell button svg,
html.nautico-futuristic-ui .nautico-admin-shell a svg {
  color: currentColor;
}

/* ------------------------------------------------------------
   EMPTY-STATE / PLACEHOLDER ILLUSTRATIONS
   ------------------------------------------------------------ */

/*
 * Do NOT touch sidebar/logo images.
 *
 * Images in the main admin content get sensible containment.
 */

html.nautico-futuristic-ui .nautico-admin-shell .dashboard-grid-content img {
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/*
 * Typical BeDrive empty-state illustrations.
 *
 * Keep detail visible but shift them toward the white/cool
 * Nautico palette instead of multicolor purple/blue.
 */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(
    [class*='empty'],
    [class*='placeholder'],
    [class*='no-results'],
    [class*='noResults'],
    [class*='illustration']
  )
  img {
  display: block;

  width: auto !important;
  max-width: min(260px, 72vw) !important;

  max-height: 210px !important;

  margin-inline: auto !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  filter: grayscale(1) brightness(2.1) contrast(0.82) !important;

  opacity: 0.92;

  box-shadow: none !important;
}

/*
 * SVG empty-state illustrations.
 */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(
    [class*='empty'],
    [class*='placeholder'],
    [class*='no-results'],
    [class*='noResults'],
    [class*='illustration']
  )
  svg {
  display: block;

  width: auto !important;
  max-width: min(260px, 72vw) !important;

  max-height: 210px !important;

  margin-inline: auto !important;

  filter: grayscale(1) brightness(2.1) contrast(0.82) !important;

  opacity: 0.92;
}

/* ------------------------------------------------------------
   GENERIC CENTERED ADMIN EMPTY STATES
   ------------------------------------------------------------ */

/*
 * Many BeDrive empty states are just centered flex/grid blocks
 * without a useful semantic classname.
 */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex, .grid)
  > img:only-child {
  max-width: min(260px, 72vw) !important;
  max-height: 210px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

/* ------------------------------------------------------------
   EMPTY STATE HEADINGS / MESSAGES
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(
    [class*='empty'],
    [class*='placeholder'],
    [class*='no-results'],
    [class*='noResults']
  )
  :is(h1, h2, h3, h4, p, span) {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   INPUTS / SELECTS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-admin-shell :is(input, textarea, select) {
  color: #ffffff !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(input, textarea)::-moz-placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.52) !important;
}

/* ------------------------------------------------------------
   BUTTON TEXT
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-admin-shell button {
  color: #ffffff;
}

/* ------------------------------------------------------------
   KEEP LOGO UNTOUCHED
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-sidenav-left
  img {
  filter: none !important;
  opacity: 1 !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

/* ------------------------------------------------------------
   SMALL SCREENS
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  html.nautico-futuristic-ui
    .nautico-admin-shell
    .dashboard-grid-content
    :is(
      [class*='empty'],
      [class*='placeholder'],
      [class*='no-results'],
      [class*='noResults'],
      [class*='illustration']
    )
    :is(img, svg) {
    max-width: min(210px, 68vw) !important;
    max-height: 165px !important;
  }
}

/* ============================================================
   NAUTICO USER ACCOUNT OCEAN V1 — FINAL
   Scoped to Account Settings only.
   ============================================================ */

/*
|--------------------------------------------------------------------------
| PAGE CANVAS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) {
  background: #07111f !important;

  background-image: none !important;

  color: #f5f8fb !important;
}

/*
|--------------------------------------------------------------------------
| TOP NAVBAR
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) nav {
  background: #07111f !important;

  background-image: none !important;

  border-bottom: 1px solid rgba(139, 178, 205, 0.14) !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  nav
  :is(a, button, span, svg) {
  color: #f5f8fb !important;
}

/*
|--------------------------------------------------------------------------
| MAIN PAGE
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) main {
  background: #07111f !important;

  background-image: none !important;

  color: #f5f8fb !important;
}

/*
|--------------------------------------------------------------------------
| PAGE TITLES
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(h1, h2, h3, h4, h5, h6) {
  color: #ffffff !important;

  text-shadow: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(p, label, legend) {
  color: #c1cfdb;
}

/*
|--------------------------------------------------------------------------
| ACCOUNT SIDENAV
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) a[href^='#'] {
  color: #b7c7d4 !important;

  border: 1px solid transparent;

  border-radius: 12px;

  background: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

  text-shadow: none !important;

  transform: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  a[href^='#']:hover {
  color: #ffffff !important;

  background: rgba(67, 198, 190, 0.075) !important;

  border-color: rgba(67, 198, 190, 0.14) !important;

  transform: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  a[href^='#'][aria-current='true'],
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  a[href^='#'][aria-current='page'],
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  a[href^='#'].active {
  color: #ffffff !important;

  background: rgba(47, 111, 235, 0.17) !important;

  border-color: rgba(67, 198, 190, 0.3) !important;
}

/*
 * Icons in sidenav.
 */

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  a[href^='#']
  svg {
  color: #66d4cd !important;
}

/*
|--------------------------------------------------------------------------
| ACCOUNT PANELS
|--------------------------------------------------------------------------
|
| AccountSettingsPanel currently uses:
| rounded-panel border bg-elevated shadow
|
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .rounded-panel.bg-elevated,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .bg-elevated.rounded-panel {
  background: #0d1b2b !important;

  background-image: none !important;

  border-color: rgba(132, 174, 203, 0.17) !important;

  color: #f5f8fb !important;

  box-shadow: none !important;

  filter: none !important;

  backdrop-filter: none !important;
}

/*
 * Allow other nested elevated surfaces to use
 * a slightly deeper panel.
 */

html.nautico-futuristic-ui body:has(a[href='#account-details']) .bg-elevated {
  background: #0d1b2b !important;

  background-image: none !important;

  color: #f5f8fb !important;
}

/*
|--------------------------------------------------------------------------
| DIVIDERS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(.border, .border-t, .border-b, .border-l, .border-r) {
  border-color: rgba(132, 174, 203, 0.16) !important;
}

/*
|--------------------------------------------------------------------------
| INPUTS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(input, textarea, select) {
  background: #091725 !important;

  background-image: none !important;

  color: #ffffff !important;

  border-color: rgba(132, 174, 203, 0.2) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(input, textarea, select):hover {
  border-color: rgba(67, 198, 190, 0.35) !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(input, textarea, select):focus {
  border-color: rgba(67, 198, 190, 0.66) !important;

  box-shadow: 0 0 0 1px rgba(67, 198, 190, 0.17) !important;

  outline: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(input, textarea)::-moz-placeholder {
  color: rgba(218, 231, 240, 0.46) !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(input, textarea)::placeholder {
  color: rgba(218, 231, 240, 0.46) !important;
}

/*
|--------------------------------------------------------------------------
| TEXT COLORS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) .text-main {
  color: #f5f8fb !important;
}

html.nautico-futuristic-ui body:has(a[href='#account-details']) .text-muted {
  color: #91a6b8 !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .text-secondary {
  color: #b8c8d5 !important;
}

/*
|--------------------------------------------------------------------------
| BUTTONS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) button {
  box-shadow: none !important;

  text-shadow: none !important;

  transform: none !important;
}

/*
 * Primary action buttons.
 */

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  button.bg-primary,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .bg-primary[role='button'] {
  background: #2f6feb !important;

  background-image: none !important;

  border-color: rgba(91, 156, 255, 0.7) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  button.bg-primary:hover,
html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  .bg-primary[role='button']:hover {
  background: #3a78ee !important;

  transform: none !important;
}

/*
|--------------------------------------------------------------------------
| SOCIAL LOGIN ROWS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  [class*='social'] {
  border-color: rgba(132, 174, 203, 0.16);
}

/*
|--------------------------------------------------------------------------
| AVATAR AREA
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  [class*='avatar'] {
  border-color: rgba(67, 198, 190, 0.25) !important;
}

/*
|--------------------------------------------------------------------------
| SELECT / LISTBOX / POPOVER
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  [role='listbox'] {
  background: #0b1929 !important;

  color: #ffffff !important;

  border-color: rgba(132, 174, 203, 0.2) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  [role='option'] {
  color: #dfe8ef !important;
}

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  [role='option']:hover {
  background: rgba(67, 198, 190, 0.08) !important;
}

/*
|--------------------------------------------------------------------------
| SESSION / TOKEN ROWS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is([class*='session'], [class*='token']) {
  border-color: rgba(132, 174, 203, 0.16);
}

/*
|--------------------------------------------------------------------------
| DANGER ZONE
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui body:has(a[href='#account-details']) .text-danger {
  color: #ff7c86 !important;
}

/*
|--------------------------------------------------------------------------
| REMOVE OLD LIGHT-PAGE EFFECTS
|--------------------------------------------------------------------------
*/

html.nautico-futuristic-ui
  body:has(a[href='#account-details'])
  :is(main, section, article) {
  background-image: none !important;
}

html.nautico-futuristic-ui body:has(a[href='#account-details']) * {
  text-shadow: none !important;
}

/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media (min-width: 1024px) {
  html.nautico-futuristic-ui body:has(a[href='#account-details']) main {
    min-height: calc(100vh - 64px);
  }
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (min-width: 768px) and (max-width: 1023px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.bg-elevated {
    border-radius: 16px !important;
  }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 767px) {
  html.nautico-futuristic-ui body:has(a[href='#account-details']) {
    overflow-x: hidden;
  }

  html.nautico-futuristic-ui body:has(a[href='#account-details']) main {
    width: 100%;

    max-width: 100%;

    overflow-x: hidden;
  }

  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.bg-elevated {
    border-radius: 14px !important;

    box-shadow: none !important;
  }

  /*
   * Account menu becomes horizontally usable without
   * forcing the whole page wider than viewport.
   */

  html.nautico-futuristic-ui body:has(a[href='#account-details']) nav {
    max-width: 100vw;
  }
}

/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 389px) {
  html.nautico-futuristic-ui
    body:has(a[href='#account-details'])
    .rounded-panel.bg-elevated {
    border-radius: 12px !important;
  }
}

/*
|--------------------------------------------------------------------------
| REDUCED MOTION
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui body:has(a[href='#account-details']) * {
    animation: none !important;

    transition: none !important;
  }
}

/* ============================================================
   NAUTICO ACCOUNT SETTINGS V2 — STRUCTURAL FINAL
   Explicit component classes. No :has() dependency.
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page {
  --account-bg: #07111f;
  --account-panel: #0c1a29;
  --account-panel-soft: #0f2031;
  --account-input: #091725;

  --account-border: rgba(131, 174, 204, 0.16);
  --account-border-active: rgba(67, 198, 190, 0.38);

  --account-text: #f6f9fc;
  --account-soft: #c2d0db;
  --account-muted: #8fa5b7;

  --account-cyan: #43c6be;
  --account-blue: #2f6feb;

  min-height: 100vh;

  background: var(--account-bg) !important;
  background-image: none !important;

  color: var(--account-text) !important;
}

/* ============================================================
   NAVBAR
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page nav {
  background: #07111f !important;
  background-image: none !important;

  color: #fff !important;

  border-bottom: 1px solid rgba(131, 174, 204, 0.12) !important;

  box-shadow: none !important;
  backdrop-filter: none !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  nav
  :is(a, button, span, svg) {
  color: #f5f9fc !important;
}

/* ============================================================
   PAGE WIDTH / TITLE
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-container {
  width: min(1380px, calc(100% - 48px));
  max-width: 1380px;

  padding-top: 32px !important;
  padding-bottom: 48px !important;
}

html.nautico-futuristic-ui .nautico-account-settings-container > h1 {
  margin-bottom: 6px;

  color: #ffffff !important;

  font-size: clamp(28px, 2.15vw, 38px) !important;
  font-weight: 750 !important;

  letter-spacing: -0.035em;

  text-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-container > h1 + div {
  color: var(--account-muted) !important;

  margin-bottom: 30px !important;
}

/* ============================================================
   MAIN TWO-COLUMN LAYOUT
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-layout {
  display: grid !important;

  grid-template-columns:
    minmax(220px, 260px)
    minmax(0, 1fr);

  align-items: start !important;

  gap: 28px !important;
}

/* ============================================================
   LEFT NAVIGATION
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-sidenav {
  width: 100%;

  padding: 12px;

  border: 1px solid var(--account-border);

  border-radius: 18px;

  background: #0a1726 !important;

  background-image: none !important;

  box-shadow: none !important;

  backdrop-filter: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-sidenav ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

html.nautico-futuristic-ui .nautico-account-settings-sidenav-item {
  min-height: 46px;

  margin-bottom: 0 !important;

  padding: 10px 12px !important;

  border: 1px solid transparent;

  border-radius: 11px !important;

  background: transparent !important;

  background-image: none !important;

  color: #b9cad7 !important;

  box-shadow: none !important;

  transform: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-sidenav-item svg {
  color: #62d0c9 !important;
}

html.nautico-futuristic-ui .nautico-account-settings-sidenav-item:hover {
  color: #fff !important;

  background: rgba(67, 198, 190, 0.075) !important;

  border-color: rgba(67, 198, 190, 0.14) !important;

  box-shadow: none !important;

  transform: none !important;
}

/* ============================================================
   CONTENT
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-content {
  width: 100%;
  min-width: 0;

  color: var(--account-text);
}

/* ============================================================
   PANELS
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-panel {
  margin-bottom: 18px !important;

  padding: 22px 24px !important;

  border: 1px solid var(--account-border) !important;

  border-radius: 18px !important;

  background: var(--account-panel) !important;

  background-image: none !important;

  color: var(--account-text) !important;

  box-shadow: none !important;

  filter: none !important;

  backdrop-filter: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-panel > div:first-child {
  min-height: 38px;

  padding-bottom: 13px !important;

  border-bottom-color: var(--account-border) !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-panel
  > div:first-child
  > div:first-child {
  color: #ffffff !important;

  font-size: 17px !important;

  font-weight: 680 !important;
}

html.nautico-futuristic-ui .nautico-account-settings-panel > div:nth-child(2) {
  padding-top: 20px !important;
}

/* ============================================================
   TEXT
   ============================================================ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(h1, h2, h3, h4, h5, h6) {
  color: #fff !important;

  text-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page .text-main {
  color: #f4f8fb !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page .text-muted {
  color: #91a7b9 !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page .text-secondary {
  color: #b9c9d5 !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page label {
  color: #dbe5ec !important;
}

/* ============================================================
   INPUTS
   ============================================================ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea, select) {
  background: var(--account-input) !important;

  background-image: none !important;

  color: #ffffff !important;

  border-color: rgba(131, 174, 204, 0.22) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea, select):hover {
  border-color: rgba(67, 198, 190, 0.35) !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea, select):focus {
  border-color: rgba(67, 198, 190, 0.68) !important;

  box-shadow: 0 0 0 1px rgba(67, 198, 190, 0.14) !important;

  outline: none !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea)::-moz-placeholder {
  color: rgba(210, 225, 235, 0.43) !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea)::placeholder {
  color: rgba(210, 225, 235, 0.43) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page button {
  box-shadow: none !important;

  text-shadow: none !important;

  transform: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page .bg-primary {
  background: var(--account-blue) !important;

  background-image: none !important;

  color: #fff !important;

  border-color: rgba(95, 158, 255, 0.64) !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page .bg-primary:hover {
  background: #3b78ed !important;
}

/* ============================================================
   SECONDARY ELEVATED CONTENT
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-panel .bg-elevated {
  background: var(--account-panel-soft) !important;

  background-image: none !important;

  color: #f5f8fb !important;

  border-color: var(--account-border) !important;

  box-shadow: none !important;
}

/* ============================================================
   DIVIDERS
   ============================================================ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.border, .border-t, .border-b, .border-l, .border-r) {
  border-color: var(--account-border) !important;
}

/* ============================================================
   AVATAR
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page [class*='avatar'] {
  border-color: rgba(67, 198, 190, 0.26) !important;

  box-shadow: none !important;
}

/* ============================================================
   LISTBOX / SELECT MENU
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page [role='listbox'] {
  background: #0b1929 !important;

  color: #fff !important;

  border: 1px solid var(--account-border) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui .nautico-account-settings-page [role='option'] {
  color: #dfe8ef !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  [role='option']:hover {
  background: rgba(67, 198, 190, 0.08) !important;
}

/* ============================================================
   DANGER
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page .text-danger {
  color: #ff7d87 !important;
}

/* ============================================================
   REMOVE OLD VISUAL EFFECTS
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page * {
  text-shadow: none !important;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1099px) {
  html.nautico-futuristic-ui .nautico-account-settings-container {
    width: min(100% - 32px, 960px);
  }

  html.nautico-futuristic-ui .nautico-account-settings-layout {
    grid-template-columns: 220px minmax(0, 1fr);

    gap: 20px !important;
  }
}

/* ============================================================
   MOBILE / SMALL TABLET
   Existing component hides sidenav below lg.
   Content becomes one column.
   ============================================================ */

@media (max-width: 1023px) {
  html.nautico-futuristic-ui .nautico-account-settings-layout {
    display: block !important;
  }

  html.nautico-futuristic-ui .nautico-account-settings-content {
    width: 100%;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {
  html.nautico-futuristic-ui .nautico-account-settings-container {
    width: 100%;

    padding: 20px 16px 32px !important;
  }

  html.nautico-futuristic-ui .nautico-account-settings-container > h1 {
    font-size: 28px !important;
  }

  html.nautico-futuristic-ui .nautico-account-settings-container > h1 + div {
    margin-bottom: 22px !important;
  }

  html.nautico-futuristic-ui .nautico-account-settings-panel {
    padding: 18px !important;

    border-radius: 15px !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui .nautico-account-settings-page * {
    animation: none !important;

    transition: none !important;
  }
}

/* ============================================================
   NAUTICO ACCOUNT SETTINGS ALL WHITE TEXT V1 — FINAL
   ============================================================ */

html.nautico-futuristic-ui .nautico-account-settings-page {
  color: #ffffff !important;
}

/* All normal textual content */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    label,
    legend,
    small,
    strong,
    b,
    em,
    li,
    dt,
    dd,
    th,
    td
  ) {
  color: #ffffff !important;
}

/* BeDrive utility text classes */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(
    .text-main,
    .text-muted,
    .text-secondary,
    .text-fg-base,
    .text-fg-muted,
    .text-fg-secondary
  ) {
  color: #ffffff !important;
}

/* Sidebar text */

html.nautico-futuristic-ui .nautico-account-settings-sidenav,
html.nautico-futuristic-ui .nautico-account-settings-sidenav-item,
html.nautico-futuristic-ui
  .nautico-account-settings-sidenav-item
  :is(span, div, p) {
  color: #ffffff !important;
}

/* Panels */

html.nautico-futuristic-ui .nautico-account-settings-panel,
html.nautico-futuristic-ui
  .nautico-account-settings-panel
  :is(div, p, span, label, small, strong) {
  color: #ffffff !important;
}

/* Inputs and entered values */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea, select) {
  color: #ffffff !important;
}

/* Placeholder stays visible but still white */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea)::-moz-placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
}

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(input, textarea)::placeholder {
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Links */

html.nautico-futuristic-ui .nautico-account-settings-page a {
  color: #ffffff !important;
}

/* Buttons */

html.nautico-futuristic-ui .nautico-account-settings-page button {
  color: #ffffff !important;
}

/* Icons remain cyan where already styled */

html.nautico-futuristic-ui .nautico-account-settings-sidenav-item svg {
  color: #62d0c9 !important;
}

/* Preserve semantic danger/error colors */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.text-danger, .text-error, [data-status='error']) {
  color: #ff7d87 !important;
}

/* ============================================================
   NAUTICO ACCOUNT ICONS BUTTONS V1 — FINAL
   ============================================================ */

/* ------------------------------------------------------------
   PERSONAL ACCESS TOKEN EMPTY STATE
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  img[src*='secure-files'] {
  width: min(280px, 72vw) !important;
  height: auto !important;

  margin-inline: auto;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  filter: none !important;
}

/*
 * Never give account empty-state illustrations
 * a white panel/background.
 */

html.nautico-futuristic-ui .nautico-account-settings-panel img {
  background-color: transparent !important;
}

/* ------------------------------------------------------------
   MATERIAL / INLINE ICONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-account-settings-page svg {
  color: #64d4d2;
}

/*
 * Sidebar pictograms.
 */

html.nautico-futuristic-ui .nautico-account-settings-sidenav-item svg {
  color: #62d8d1 !important;

  fill: currentColor;
}

/*
 * Button icons inherit button text so they match.
 */

html.nautico-futuristic-ui .nautico-account-settings-page button svg,
html.nautico-futuristic-ui .nautico-account-settings-page [role='button'] svg {
  color: currentColor !important;
}

/* ------------------------------------------------------------
   NORMAL BUTTONS — NAUTICO OCEAN
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button:not(.text-danger):not([class*='danger']),
html.nautico-futuristic-ui
  .nautico-account-settings-page
  a[role='button']:not([class*='danger']) {
  color: #ffffff !important;

  border: 1px solid rgba(95, 194, 235, 0.48) !important;

  background: linear-gradient(
    135deg,
    #405cc9 0%,
    #347ddf 48%,
    #49bdd9 100%
  ) !important;

  background-image: linear-gradient(
    135deg,
    #405cc9 0%,
    #347ddf 48%,
    #49bdd9 100%
  ) !important;

  box-shadow: 0 8px 20px rgba(17, 73, 136, 0.17) !important;

  text-shadow: none !important;
}

/* ------------------------------------------------------------
   PRIMARY BUTTONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.bg-primary, [class*='bg-primary']) {
  color: #ffffff !important;

  border-color: rgba(112, 207, 235, 0.62) !important;

  background: linear-gradient(
    135deg,
    #4a5fd5 0%,
    #347fe0 46%,
    #4bc4da 100%
  ) !important;

  background-image: linear-gradient(
    135deg,
    #4a5fd5 0%,
    #347fe0 46%,
    #4bc4da 100%
  ) !important;

  box-shadow: 0 8px 22px rgba(23, 91, 159, 0.2) !important;
}

/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button:not(.text-danger):not([class*='danger']):hover,
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    a[role='button']:not([class*='danger']):hover {
    color: #ffffff !important;

    border-color: rgba(116, 218, 239, 0.74) !important;

    background: linear-gradient(
      135deg,
      #5268de 0%,
      #3988e7 48%,
      #56cbdc 100%
    ) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 10px 26px rgba(26, 106, 172, 0.24) !important;
  }
}

/* ------------------------------------------------------------
   SECONDARY / OUTLINED BUTTONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.border:not(.bg-primary):not(.text-danger):not([class*='danger']) {
  color: #ffffff !important;

  border-color: rgba(76, 190, 211, 0.34) !important;

  background: #10233a !important;

  background-image: none !important;

  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button.border:not(.bg-primary):not(.text-danger):not(
      [class*='danger']
    ):hover {
    background: #16304b !important;

    border-color: rgba(76, 198, 216, 0.58) !important;
  }
}

/* ------------------------------------------------------------
   DANGER ACTIONS STAY SEMANTIC
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(.text-danger, button[class*='danger'], [data-color='danger']) {
  color: #ff858d !important;
}

/* ------------------------------------------------------------
   TOKEN EMPTY STATE TEXT
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-panel
  :is(h2, h3, p, span, strong) {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    img[src*='secure-files'] {
    width: min(220px, 68vw) !important;
  }

  html.nautico-futuristic-ui .nautico-account-settings-page button {
    min-height: 42px;
  }
}

/* ============================================================
   NAUTICO ACCOUNT BUTTONS V2 — EXPLICIT FINAL
   ============================================================ */

/* Base */

.nautico-account-button {
  min-height: 42px !important;

  padding-inline: 18px !important;

  border-radius: 11px !important;

  color: #ffffff !important;

  font-weight: 650 !important;

  letter-spacing: -0.01em;

  text-shadow: none !important;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease !important;
}

/* ============================================================
   PRIMARY
   Same restrained Nautico ocean family as homepage.
   ============================================================ */

.nautico-account-button--primary {
  color: #ffffff !important;

  background: linear-gradient(
    135deg,
    #4966d7 0%,
    #347fdc 48%,
    #4bbbd6 100%
  ) !important;

  background-color: #347fdc !important;

  background-image: linear-gradient(
    135deg,
    #4966d7 0%,
    #347fdc 48%,
    #4bbbd6 100%
  ) !important;

  border: 1px solid rgba(117, 205, 233, 0.58) !important;

  box-shadow: 0 7px 18px rgba(25, 92, 154, 0.2) !important;
}

.nautico-account-button--primary :is(span, svg) {
  color: #ffffff !important;
}

/* ============================================================
   SECONDARY
   ============================================================ */

.nautico-account-button--secondary {
  color: #ffffff !important;

  background: #10243a !important;

  background-color: #10243a !important;

  background-image: none !important;

  border: 1px solid rgba(77, 193, 214, 0.4) !important;

  box-shadow: none !important;
}

.nautico-account-button--secondary :is(span, svg) {
  color: #ffffff !important;
}

/* ============================================================
   DANGER
   ============================================================ */

.nautico-account-button--danger {
  color: #ffffff !important;

  background: #7e2731 !important;

  background-color: #7e2731 !important;

  background-image: none !important;

  border: 1px solid rgba(255, 124, 134, 0.55) !important;

  box-shadow: none !important;
}

/* ============================================================
   SOCIAL BUTTON
   Dynamic Enable / Disable.
   Keep Nautico visual family instead of old BeDrive colors.
   ============================================================ */

.nautico-account-button--social {
  color: #ffffff !important;

  background: #10243a !important;

  background-color: #10243a !important;

  background-image: none !important;

  border: 1px solid rgba(77, 193, 214, 0.4) !important;

  box-shadow: none !important;
}

/* ============================================================
   FORCE BUTTON INTERNAL ELEMENTS
   ============================================================ */

.nautico-account-button,
.nautico-account-button *,
.nautico-account-button::before,
.nautico-account-button::after {
  text-shadow: none !important;
}

/* ============================================================
   HOVER
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .nautico-account-button--primary:hover {
    background: linear-gradient(
      135deg,
      #536ee0 0%,
      #3989e3 48%,
      #55c5dc 100%
    ) !important;

    background-color: #3989e3 !important;

    border-color: rgba(125, 219, 239, 0.76) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 9px 22px rgba(26, 103, 170, 0.24) !important;
  }

  .nautico-account-button--secondary:hover,
  .nautico-account-button--social:hover {
    background: #16314d !important;

    background-color: #16314d !important;

    border-color: rgba(81, 203, 221, 0.62) !important;

    transform: translateY(-1px) !important;
  }

  .nautico-account-button--danger:hover {
    background: #91303a !important;

    background-color: #91303a !important;

    border-color: rgba(255, 137, 146, 0.72) !important;
  }
}

/* ============================================================
   DISABLED
   ============================================================ */

.nautico-account-button:disabled,
.nautico-account-button[aria-disabled='true'] {
  opacity: 0.52 !important;

  cursor: not-allowed !important;

  transform: none !important;
}

/* ============================================================
   TOKEN DIALOG PORTAL
   Explicit classes work even when dialog is mounted outside
   .nautico-account-settings-page.
   ============================================================ */

body .nautico-account-button--primary {
  color: #ffffff !important;
}

/* ============================================================
   NAUTICO ACCOUNT BUTTONS UNIFIED V3 — HOME STYLE FINAL
   All account buttons use one Nautico ocean visual language.
   ============================================================ */

/* ------------------------------------------------------------
   SHARED BUTTON SHAPE
   ------------------------------------------------------------ */

.nautico-account-button {
  min-height: 42px !important;

  padding: 10px 18px !important;

  border-radius: 12px !important;

  font-weight: 650 !important;

  letter-spacing: -0.01em;

  color: #ffffff !important;

  text-shadow: none !important;

  box-shadow: none !important;
}

/* ------------------------------------------------------------
   PRIMARY
   ------------------------------------------------------------ */

.nautico-account-button--primary {
  color: #ffffff !important;

  background: linear-gradient(
    135deg,
    #4e67d8 0%,
    #3b83e3 48%,
    #54c5dc 100%
  ) !important;

  background-color: #3b83e3 !important;

  background-image: linear-gradient(
    135deg,
    #4e67d8 0%,
    #3b83e3 48%,
    #54c5dc 100%
  ) !important;

  border: 1px solid rgba(119, 210, 237, 0.58) !important;

  box-shadow: 0 8px 22px rgba(20, 88, 153, 0.18) !important;
}

/* ------------------------------------------------------------
   SECONDARY
   Same family, dark ocean.
   ------------------------------------------------------------ */

.nautico-account-button--secondary,
.nautico-account-button--social {
  color: #ffffff !important;

  background: #10243a !important;

  background-color: #10243a !important;

  background-image: none !important;

  border: 1px solid rgba(76, 190, 213, 0.38) !important;

  box-shadow: none !important;
}

/* ------------------------------------------------------------
   DANGER
   IMPORTANT:
   No more full red button.
   Keep same Nautico ocean button style.
   Danger is communicated by surrounding section/dialog.
   ------------------------------------------------------------ */

.nautico-account-button--danger {
  color: #ffffff !important;

  background: #10243a !important;

  background-color: #10243a !important;

  background-image: none !important;

  border: 1px solid rgba(76, 190, 213, 0.38) !important;

  box-shadow: none !important;
}

/*
 * Do not let inherited BeDrive danger utility recolor it.
 */

.nautico-account-settings-page .nautico-account-button--danger,
.nautico-account-settings-page button.nautico-account-button--danger,
body .nautico-account-button--danger {
  color: #ffffff !important;

  background: #10243a !important;

  background-color: #10243a !important;

  background-image: none !important;

  border-color: rgba(76, 190, 213, 0.38) !important;
}

/* ------------------------------------------------------------
   INTERNAL TEXT / ICONS
   ------------------------------------------------------------ */

.nautico-account-button :is(span, svg) {
  color: #ffffff !important;
}

/* ------------------------------------------------------------
   HOVER PRIMARY
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  .nautico-account-button--primary:hover {
    color: #ffffff !important;

    background: linear-gradient(
      135deg,
      #596fe0 0%,
      #438ce9 48%,
      #60cedf 100%
    ) !important;

    background-color: #438ce9 !important;

    border-color: rgba(131, 221, 240, 0.74) !important;

    transform: translateY(-1px) !important;

    box-shadow: 0 9px 24px rgba(27, 105, 170, 0.22) !important;
  }

  .nautico-account-button--secondary:hover,
  .nautico-account-button--social:hover,
  .nautico-account-button--danger:hover {
    color: #ffffff !important;

    background: #17324d !important;

    background-color: #17324d !important;

    background-image: none !important;

    border-color: rgba(84, 203, 221, 0.6) !important;

    transform: translateY(-1px) !important;

    box-shadow: none !important;
  }
}

/* ------------------------------------------------------------
   DISABLED
   ------------------------------------------------------------ */

.nautico-account-button:disabled,
.nautico-account-button[aria-disabled='true'] {
  opacity: 0.55 !important;

  cursor: not-allowed !important;

  transform: none !important;
}

/* ------------------------------------------------------------
   DANGER SECTION TEXT MAY STAY RED IF PRESENT
   BUT BUTTON REMAINS OCEAN
   ------------------------------------------------------------ */

.nautico-account-settings-page .text-danger:not(.nautico-account-button) {
  color: #ff858d !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .nautico-account-button {
    min-height: 42px !important;

    padding-inline: 16px !important;
  }
}

/* ============================================================
   NAUTICO ACCOUNT BUTTONS UNIFIED V4 — ONE COLOR FINAL
   Every explicit account action uses the same approved
   Nautico homepage blue/cyan visual language.
   ============================================================ */

/* ------------------------------------------------------------
   HARD RESET FOR ALL ACCOUNT ACTION BUTTONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.nautico-account-button,
body button.nautico-account-button {
  min-height: 42px !important;

  padding: 10px 18px !important;

  border: 1px solid rgba(113, 205, 235, 0.62) !important;

  border-radius: 12px !important;

  color: #ffffff !important;

  background-color: #397fdf !important;

  background-image: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  background: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  box-shadow: 0 8px 20px rgba(25, 91, 154, 0.18) !important;

  filter: none !important;

  opacity: 1;

  text-shadow: none !important;

  font-weight: 650 !important;

  transform: none;
}

/* ------------------------------------------------------------
   ALL VARIANTS HAVE EXACT SAME COLOR
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(
    .nautico-account-button--primary,
    .nautico-account-button--secondary,
    .nautico-account-button--social,
    .nautico-account-button--danger
  ),
body
  :is(
    .nautico-account-button--primary,
    .nautico-account-button--secondary,
    .nautico-account-button--social,
    .nautico-account-button--danger
  ) {
  color: #ffffff !important;

  background-color: #397fdf !important;

  background-image: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  background: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  border-color: rgba(113, 205, 235, 0.62) !important;

  box-shadow: 0 8px 20px rgba(25, 91, 154, 0.18) !important;
}

/* ------------------------------------------------------------
   FORCE INNER CONTENT WHITE
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  .nautico-account-button
  :is(span, div, strong, svg),
body .nautico-account-button :is(span, div, strong, svg) {
  color: #ffffff !important;

  fill: currentColor;
}

/* ------------------------------------------------------------
   OVERRIDE OLD DANGER COLOR UTILITIES
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.nautico-account-button.text-danger,
html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.nautico-account-button[class*='danger'],
body button.nautico-account-button.text-danger,
body button.nautico-account-button[class*='danger'] {
  color: #ffffff !important;

  background-color: #397fdf !important;

  background-image: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  background: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  border-color: rgba(113, 205, 235, 0.62) !important;
}

/* ------------------------------------------------------------
   HOVER
   ------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button.nautico-account-button:hover,
  body button.nautico-account-button:hover {
    color: #ffffff !important;

    background-color: #438be7 !important;

    background-image: linear-gradient(
      135deg,
      #596ee0 0%,
      #438be7 48%,
      #5acade 100%
    ) !important;

    background: linear-gradient(
      135deg,
      #596ee0 0%,
      #438be7 48%,
      #5acade 100%
    ) !important;

    border-color: rgba(131, 220, 240, 0.78) !important;

    box-shadow: 0 9px 23px rgba(27, 104, 171, 0.23) !important;

    transform: translateY(-1px) !important;
  }
}

/* ------------------------------------------------------------
   DISABLED
   Same color family, only lower opacity.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.nautico-account-button:disabled,
body button.nautico-account-button:disabled {
  color: #ffffff !important;

  background-color: #397fdf !important;

  background-image: linear-gradient(
    135deg,
    #5065d8 0%,
    #3d82e2 48%,
    #53bfd8 100%
  ) !important;

  opacity: 0.52 !important;

  transform: none !important;

  box-shadow: none !important;
}

/* ============================================================
   NAUTICO NAVBAR USER CLEAN V3 — FINAL
   No big blue rectangle.
   ============================================================ */

.nautico-navbar-user-trigger {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* desktop */

.nautico-navbar-user-trigger--wide {
  display: inline-flex !important;
  align-items: center !important;

  min-height: 40px !important;

  padding: 2px 4px 2px 2px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  color: #ffffff !important;

  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;

  transform: none !important;
}

/* remove inherited decoration */

.nautico-navbar-user-trigger--wide::before,
.nautico-navbar-user-trigger--wide::after {
  content: none !important;
  display: none !important;
}

/* avatar */

.nautico-navbar-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  padding: 1px;

  border: 1px solid rgba(67, 198, 190, 0.22);
  border-radius: 999px;

  background: rgba(7, 17, 31, 0.32);

  box-shadow: none;
}

.nautico-navbar-user-avatar > * {
  border-radius: 999px !important;
  box-shadow: none !important;
}

/* username */

.nautico-navbar-user-name {
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 600 !important;

  line-height: 1;

  letter-spacing: -0.01em;

  white-space: nowrap;
}

/* chevron */

.nautico-navbar-user-chevron {
  width: 17px !important;
  height: 17px !important;

  color: #8edce0 !important;

  opacity: 0.88;

  flex: 0 0 auto;
}

/* hover only — very subtle */

@media (hover: hover) and (pointer: fine) {
  .nautico-navbar-user-trigger--wide:hover {
    background: rgba(15, 34, 54, 0.48) !important;
    background-color: rgba(15, 34, 54, 0.48) !important;
    background-image: none !important;

    border: 0 !important;

    box-shadow: none !important;

    transform: none !important;
  }

  .nautico-navbar-user-trigger--wide:hover .nautico-navbar-user-chevron {
    color: #52cec8 !important;
  }
}

/* focus */

.nautico-navbar-user-trigger--wide:focus,
.nautico-navbar-user-trigger--wide:focus-visible {
  outline: none !important;
  border: 0 !important;

  background: rgba(15, 34, 54, 0.42) !important;

  box-shadow: 0 0 0 1px rgba(67, 198, 190, 0.2) !important;
}

/* prevent Account Settings theme from painting navbar auth */

html.nautico-futuristic-ui
  .nautico-account-settings-page
  .nautico-navbar-user-trigger,
html.nautico-futuristic-ui
  .nautico-account-settings-page
  button.nautico-navbar-user-trigger {
  border: 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;

  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    .nautico-navbar-user-trigger:hover,
  html.nautico-futuristic-ui
    .nautico-account-settings-page
    button.nautico-navbar-user-trigger:hover {
    background: rgba(15, 34, 54, 0.48) !important;

    background-color: rgba(15, 34, 54, 0.48) !important;

    background-image: none !important;

    border: 0 !important;

    box-shadow: none !important;
  }
}

/* compact/mobile */

.nautico-navbar-user-trigger--compact {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  padding: 1px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
}

/* tablet */

@media (max-width: 1100px) {
  .nautico-navbar-user-name {
    max-width: 96px !important;
  }
}

/* mobile */

@media (max-width: 767px) {
  .nautico-navbar-user-trigger--wide {
    min-height: 36px !important;
  }

  .nautico-navbar-user-name {
    max-width: 76px !important;
    font-size: 13px !important;
  }

  .nautico-navbar-user-chevron {
    width: 15px !important;
    height: 15px !important;
  }
}

/* ============================================================
   NAUTICO SHAREABLE LINK APPROVED V1B — FINAL
   Visual target: approved Share securely mockup.
   ============================================================ */

/* ============================================================
   MAIN RESULT CARD
   ============================================================ */

.nautico-share-ready-card {
  position: relative;

  width: min(100%, 1040px) !important;
  max-width: 1040px !important;

  margin: 0 auto !important;

  padding: clamp(24px, 3vw, 40px) !important;

  overflow: visible !important;

  color: #ffffff !important;

  border: 1px solid rgba(116, 169, 207, 0.33) !important;

  border-radius: 30px !important;

  background: rgba(5, 20, 37, 0.94) !important;

  background-image: none !important;

  box-shadow: 0 24px 60px rgba(0, 8, 22, 0.25) !important;

  backdrop-filter: none !important;
}

/* ============================================================
   LINK ICON
   ============================================================ */

.nautico-share-ready-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;

  border: 1px solid rgba(74, 213, 216, 0.68);

  border-radius: 999px;

  color: #5bd9df !important;

  background: rgba(10, 48, 67, 0.44);

  font-size: 29px;

  font-weight: 400;

  line-height: 1;

  box-shadow: inset 0 0 0 1px rgba(105, 223, 224, 0.07);
}

/* ============================================================
   READY BADGE
   ============================================================ */

.nautico-share-ready-status {
  position: absolute;

  top: 38px;
  right: 38px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 38px;

  padding: 7px 14px;

  border: 1px solid rgba(67, 198, 190, 0.13);

  border-radius: 12px;

  background: rgba(8, 48, 57, 0.47);

  color: #66ddd5 !important;

  font-size: 13px;

  font-weight: 650;
}

.nautico-share-ready-status *,
.nautico-share-ready-status span {
  color: #66ddd5 !important;
}

.nautico-share-ready-status-dot {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  border: 1px solid #59d8cf;

  border-radius: 999px;

  font-size: 11px;
}

/* ============================================================
   HEADING
   ============================================================ */

.nautico-share-ready-heading {
  max-width: 610px;

  margin-top: 20px;
}

.nautico-share-ready-eyebrow {
  color: #65d9dd !important;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: 0.17em;
}

.nautico-share-ready-heading h2 {
  margin: 8px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(32px, 3.7vw, 46px) !important;

  font-weight: 800 !important;

  line-height: 1.03;

  letter-spacing: -0.043em;
}

.nautico-share-ready-heading p {
  max-width: 570px;

  margin-top: 11px !important;

  color: #c5d2dd !important;

  font-size: 15px;

  line-height: 1.5;
}

/* original encryption explanation */

.nautico-share-ready-card > p {
  max-width: 720px !important;

  margin-top: 11px !important;

  color: #9fb1c0 !important;

  font-size: 13px !important;

  line-height: 1.5;
}

/* ============================================================
   SHARE APPS NOTE
   ============================================================ */

.nautico-share-ready-note {
  max-width: 720px;

  margin-top: 13px !important;

  padding: 10px 13px !important;

  border: 1px solid rgba(71, 188, 211, 0.19);

  border-radius: 11px;

  background: rgba(7, 25, 43, 0.55);

  color: #bfcfda !important;
}

.nautico-share-ready-note,
.nautico-share-ready-note * {
  color: #bfcfda !important;
}

.nautico-share-ready-note strong {
  color: #ffffff !important;
}

/* ============================================================
   DELIVERY STATUS
   ============================================================ */

.nautico-share-ready-journey {
  margin-top: 20px !important;

  padding: 0 !important;
}

.nautico-share-ready-journey .nautico-journey__step {
  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 54px;

  padding: 9px 13px;

  border: 1px solid rgba(103, 155, 193, 0.2);

  border-radius: 11px;

  background: rgba(10, 28, 48, 0.73);

  color: #c9d5df;
}

.nautico-share-ready-journey .nautico-journey__step b {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  border: 1px solid rgba(123, 163, 194, 0.34);

  border-radius: 999px;

  background: #25334b;

  color: #ffffff;
}

.nautico-share-ready-journey .nautico-journey__step span {
  color: inherit !important;

  font-weight: 600;
}

.nautico-share-ready-journey .nautico-journey__step.is-complete {
  border-color: rgba(67, 198, 190, 0.27);

  color: #ffffff;
}

.nautico-share-ready-journey .nautico-journey__step.is-complete b {
  border-color: rgba(82, 216, 210, 0.67);

  background: #207e87;
}

/* ============================================================
   SHAREABLE LINK SECTION
   no JSX wrapper needed
   ============================================================ */

.nautico-share-ready-links {
  position: relative;

  margin-top: 44px !important;
}

.nautico-share-ready-links::before {
  content: 'SHAREABLE LINK';

  position: absolute;

  left: 0;

  top: -27px;

  color: #64d8dc;

  font-size: 11px;

  font-weight: 750;

  letter-spacing: 0.17em;
}

/* ============================================================
   URL CARD
   ============================================================ */

.nautico-share-ready-link-card {
  overflow: hidden;

  padding: 0 !important;

  border: 1px solid rgba(113, 164, 201, 0.34) !important;

  border-radius: 13px !important;

  background: rgba(5, 18, 34, 0.62) !important;

  box-shadow: none !important;
}

.nautico-share-ready-link-label {
  margin: 0 !important;

  padding: 11px 16px 0;

  color: #62d4d8 !important;

  font-size: 10px !important;

  font-weight: 700 !important;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}

.nautico-share-ready-url {
  min-height: 48px;

  display: flex;

  align-items: center;

  margin: 0 !important;

  padding: 7px 16px 12px;

  color: #d4dfe7 !important;

  font-size: 14px !important;

  line-height: 1.4;

  word-break: break-all;
}

/* ============================================================
   COPY / SHARE ROW
   ============================================================ */

.nautico-share-ready-actions {
  display: grid !important;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 10px !important;

  margin: 0 !important;

  padding: 12px 16px 15px;

  border-top: 1px solid rgba(113, 164, 201, 0.17);
}

.nautico-share-ready-actions :is(button, a) {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 44px;

  padding: 9px 15px !important;

  border-radius: 10px !important;

  color: #ffffff !important;

  font-size: 14px !important;

  font-weight: 650 !important;

  text-decoration: none !important;

  box-shadow: none !important;
}

/* Copy link */

.nautico-share-ready-copy {
  border: 1px solid rgba(124, 190, 244, 0.61) !important;

  background: linear-gradient(
    135deg,
    #4e62d5 0%,
    #426fdf 50%,
    #56abe2 100%
  ) !important;

  background-color: #426fdf !important;

  color: #ffffff !important;

  box-shadow: 0 7px 19px rgba(34, 86, 180, 0.18) !important;
}

/* Mail/share/web share action */

.nautico-share-ready-actions :is(button, a):not(.nautico-share-ready-copy) {
  border: 1px solid rgba(112, 161, 198, 0.38) !important;

  background: #0b2036 !important;

  background-image: none !important;

  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  .nautico-share-ready-copy:hover {
    background: linear-gradient(
      135deg,
      #586cdf 0%,
      #4a7be8 50%,
      #61bae7 100%
    ) !important;
  }

  .nautico-share-ready-actions
    :is(button, a):not(.nautico-share-ready-copy):hover {
    background: #102a44 !important;

    border-color: rgba(83, 198, 216, 0.52) !important;
  }
}

/* ============================================================
   CLAIM BOX
   ============================================================ */

.nautico-share-ready-card .border-warning\/40 {
  border-color: rgba(213, 178, 88, 0.22) !important;

  background: rgba(65, 48, 15, 0.17) !important;

  color: #ffffff !important;
}

/* ============================================================
   VIEW TRANSFER / SEND ANOTHER
   ============================================================ */

.nautico-share-ready-card > .mt-20.flex {
  margin-top: 17px !important;

  padding-top: 15px;

  border-top: 1px solid rgba(113, 159, 190, 0.15);
}

.nautico-share-ready-card > .mt-20.flex :is(a, button) {
  min-height: 40px;

  border: 1px solid rgba(100, 160, 201, 0.31) !important;

  border-radius: 10px !important;

  background: rgba(10, 31, 52, 0.78) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* ============================================================
   LAPTOP — NO INTERNAL SCROLL
   ============================================================ */

@media (min-width: 1024px) and (max-height: 900px) {
  .nautico-share-ready-card {
    padding: 22px 28px !important;

    max-height: none !important;

    overflow: visible !important;
  }

  .nautico-share-ready-icon {
    width: 48px;

    height: 48px;

    font-size: 23px;
  }

  .nautico-share-ready-status {
    top: 24px;

    right: 28px;
  }

  .nautico-share-ready-heading {
    margin-top: 12px;
  }

  .nautico-share-ready-heading h2 {
    font-size: 32px !important;
  }

  .nautico-share-ready-heading p {
    margin-top: 6px !important;

    font-size: 13px;
  }

  .nautico-share-ready-card > p {
    margin-top: 7px !important;

    font-size: 12px !important;
  }

  .nautico-share-ready-note {
    margin-top: 8px !important;

    padding: 8px 11px !important;
  }

  .nautico-share-ready-journey {
    margin-top: 12px !important;
  }

  .nautico-share-ready-journey .nautico-journey__step {
    min-height: 46px;

    padding: 7px 10px;
  }

  .nautico-share-ready-journey .nautico-journey__step b {
    width: 28px;

    height: 28px;

    flex-basis: 28px;
  }

  .nautico-share-ready-links {
    margin-top: 37px !important;
  }

  .nautico-share-ready-url {
    min-height: 41px;

    padding: 5px 14px 9px;
  }

  .nautico-share-ready-actions {
    padding: 9px 14px 11px;
  }

  .nautico-share-ready-actions :is(button, a) {
    min-height: 39px;
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 900px) {
  .nautico-share-ready-card {
    width: 100% !important;

    border-radius: 24px !important;
  }

  .nautico-share-ready-status {
    top: 25px;

    right: 25px;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  .nautico-share-ready-card {
    width: 100% !important;

    padding: 19px 15px !important;

    border-radius: 19px !important;

    overflow: visible !important;
  }

  .nautico-share-ready-icon {
    width: 46px;

    height: 46px;

    font-size: 21px;
  }

  .nautico-share-ready-status {
    position: static;

    width: -moz-fit-content;

    width: fit-content;

    margin-top: 12px;
  }

  .nautico-share-ready-heading {
    margin-top: 15px;
  }

  .nautico-share-ready-heading h2 {
    font-size: 30px !important;
  }

  .nautico-share-ready-heading p {
    font-size: 13px;
  }

  .nautico-share-ready-journey {
    grid-template-columns: 1fr !important;
  }

  .nautico-share-ready-links {
    margin-top: 42px !important;
  }

  .nautico-share-ready-actions {
    grid-template-columns: 1fr;
  }

  .nautico-share-ready-url {
    font-size: 12px !important;
  }
}

/* ============================================================
   NAUTICO SHARE SUCCESS LAYOUT V2 — FINAL

   IMPORTANT:
   The normal homepage composer is intentionally narrow.
   When transfer success exists, expand ONLY that state.
   ============================================================ */

/* ============================================================
   1. BREAK OUT OF NORMAL 430/510px COMPOSER COLUMN
   ============================================================ */

@media (min-width: 1100px) {
  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card) {
    position: fixed !important;

    top: 96px !important;

    left: 50% !important;

    right: auto !important;

    bottom: auto !important;

    width: min(1080px, calc(100vw - 72px)) !important;

    min-width: 0 !important;

    max-width: none !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: calc(100dvh - 116px) !important;

    margin: 0 !important;

    overflow: visible !important;

    transform: translateX(-50%) !important;

    z-index: 7000 !important;

    contain: none !important;

    filter: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card)
    .nautico-premium-card {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    background-image: none !important;

    box-shadow: none !important;

    clip-path: none !important;
  }

  /*
   * Hero behind the success overlay would make the page look busy.
   */
  html.nautico-futuristic-ui
    body
    .nautico-home-v2:has(.nautico-share-ready-card)
    .nautico-copy {
    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;
  }
}

/* ============================================================
   2. FINAL CARD GEOMETRY
   ============================================================ */

html.nautico-futuristic-ui body .nautico-share-ready-card {
  box-sizing: border-box !important;

  width: 100% !important;

  max-width: none !important;

  height: auto !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 28px 34px !important;

  overflow: visible !important;

  border: 1px solid rgba(115, 170, 207, 0.34) !important;

  border-radius: 28px !important;

  background: #07182b !important;

  background-image: none !important;

  color: #ffffff !important;

  box-shadow: 0 26px 62px rgba(0, 7, 19, 0.3) !important;

  clip-path: none !important;
}

/* ============================================================
   3. TOP AREA
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-icon {
  width: 58px !important;

  height: 58px !important;

  border: 1px solid rgba(82, 215, 219, 0.58) !important;

  background: #0b2940 !important;

  color: #5fd8dc !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-status {
  top: 30px !important;

  right: 34px !important;

  border: 1px solid rgba(82, 211, 204, 0.2) !important;

  background: #0b2a36 !important;

  background-image: none !important;

  color: #6de0d7 !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-heading {
  margin-top: 16px !important;

  max-width: 660px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-heading
  h2 {
  margin-top: 6px !important;

  color: #ffffff !important;

  font-size: clamp(34px, 3vw, 46px) !important;

  line-height: 1.02 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-heading
  p {
  margin-top: 9px !important;

  max-width: 630px !important;

  color: #c7d4de !important;

  font-size: 14px !important;
}

/* ============================================================
   4. REMOVE THE TALL OLD INTRO FEEL
   ============================================================ */

html.nautico-futuristic-ui body .nautico-share-ready-card > p {
  max-width: 760px !important;

  margin: 7px 0 0 !important;

  color: #8fa5b6 !important;

  font-size: 12px !important;

  line-height: 1.45 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-note {
  max-width: 760px !important;

  margin-top: 9px !important;

  padding: 8px 11px !important;

  border: 1px solid rgba(70, 188, 211, 0.18) !important;

  background: #091e33 !important;

  box-shadow: none !important;

  font-size: 12px !important;

  line-height: 1.4 !important;
}

/* ============================================================
   5. STATUS STEPS — FORCE DARK, REMOVE WHITE/GREY BLOCKS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-home-v2
  .nautico-premium-card
  .nautico-share-ready-card
  .nautico-share-ready-journey {
  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

  gap: 10px !important;

  margin-top: 15px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-home-v2
  .nautico-premium-card
  .nautico-share-ready-card
  .nautico-share-ready-journey
  .nautico-journey__step {
  display: flex !important;

  align-items: center !important;

  min-height: 48px !important;

  padding: 8px 11px !important;

  border: 1px solid rgba(105, 157, 194, 0.22) !important;

  border-radius: 11px !important;

  background: #0b2036 !important;

  background-color: #0b2036 !important;

  background-image: none !important;

  color: #c7d3dd !important;

  box-shadow: none !important;

  filter: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-home-v2
  .nautico-premium-card
  .nautico-share-ready-card
  .nautico-share-ready-journey
  .nautico-journey__step.is-complete {
  border-color: rgba(72, 203, 198, 0.31) !important;

  background: #0c2739 !important;

  background-color: #0c2739 !important;

  background-image: none !important;

  color: #ffffff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-home-v2
  .nautico-premium-card
  .nautico-share-ready-card
  .nautico-share-ready-journey
  .nautico-journey__step
  b {
  width: 30px !important;

  height: 30px !important;

  flex: 0 0 30px !important;

  border: 1px solid rgba(120, 164, 196, 0.36) !important;

  background: #1d2d46 !important;

  background-image: none !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-home-v2
  .nautico-premium-card
  .nautico-share-ready-card
  .nautico-share-ready-journey
  .nautico-journey__step.is-complete
  b {
  border-color: #56d2cd !important;

  background: #257982 !important;

  background-image: none !important;
}

/* ============================================================
   6. SHAREABLE LINK — WIDE, MOCKUP-LIKE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-links {
  width: 100% !important;

  margin-top: 38px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-link-card {
  width: 100% !important;

  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto !important;

  grid-template-rows: auto auto !important;

  overflow: hidden !important;

  border: 1px solid rgba(111, 162, 199, 0.35) !important;

  border-radius: 12px !important;

  background: #081c31 !important;

  background-image: none !important;

  box-shadow: none !important;
}

/*
 * tiny label over URL
 */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-link-label {
  grid-column: 1 / -1 !important;

  grid-row: 1 !important;

  padding: 9px 15px 0 !important;

  color: #64d5d9 !important;
}

/*
 * URL stays one compact horizontal field on desktop
 */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-url {
  grid-column: 1 !important;

  grid-row: 2 !important;

  min-width: 0 !important;

  min-height: 52px !important;

  padding: 8px 15px 12px !important;

  overflow: hidden !important;

  color: #d6e1e9 !important;

  white-space: nowrap !important;

  text-overflow: ellipsis !important;

  word-break: normal !important;
}

/*
 * Actions move to the right like the mockup.
 */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-actions {
  grid-column: 2 !important;

  grid-row: 1 / 3 !important;

  display: flex !important;

  align-items: center !important;

  align-self: stretch !important;

  gap: 8px !important;

  margin: 0 !important;

  padding: 10px 12px !important;

  border-top: 0 !important;

  border-left: 1px solid rgba(111, 162, 199, 0.18) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-actions
  :is(button, a) {
  width: auto !important;

  min-width: 124px !important;

  min-height: 42px !important;

  padding: 8px 15px !important;

  white-space: nowrap !important;
}

/* Copy button */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-share-ready-copy {
  border: 1px solid rgba(126, 192, 244, 0.62) !important;

  background: linear-gradient(135deg, #4e62d6, #436fdf 52%, #58ace2) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* Share button */

html.nautico-futuristic-ui
  body
  .nautico-share-ready-card
  .nautico-native-share {
  border: 1px solid rgba(107, 164, 203, 0.38) !important;

  background: #0d263e !important;

  background-image: none !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* ============================================================
   7. BOTTOM ACTIONS COMPACT
   ============================================================ */

html.nautico-futuristic-ui body .nautico-share-ready-card > .mt-20.flex {
  margin-top: 14px !important;

  padding-top: 12px !important;
}

/* ============================================================
   8. FULL HD / LARGE DESKTOP
   ============================================================ */

@media (min-width: 1500px) {
  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card) {
    width: min(1120px, calc(100vw - 140px)) !important;
  }
}

/* ============================================================
   9. TABLET
   ============================================================ */

@media (min-width: 769px) and (max-width: 1099px) {
  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card) {
    position: relative !important;

    inset: auto !important;

    width: calc(100vw - 32px) !important;

    max-width: none !important;

    height: auto !important;

    max-height: none !important;

    margin: 16px auto !important;

    overflow: visible !important;

    transform: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card)
    .nautico-premium-card {
    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    overflow: visible !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-link-card {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-actions {
    grid-column: 1 !important;

    grid-row: 3 !important;

    border-left: 0 !important;

    border-top: 1px solid rgba(111, 162, 199, 0.18) !important;
  }
}

/* ============================================================
   10. MOBILE
   ============================================================ */

@media (max-width: 768px) {
  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card) {
    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    overflow: visible !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-home-v2
    .nautico-composer-shell:has(.nautico-share-ready-card)
    .nautico-premium-card {
    width: 100% !important;

    max-width: none !important;

    height: auto !important;

    overflow: visible !important;

    padding: 0 !important;
  }

  html.nautico-futuristic-ui body .nautico-share-ready-card {
    padding: 18px 15px !important;

    border-radius: 20px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-status {
    position: static !important;

    margin-top: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-journey {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-link-card {
    display: block !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-url {
    white-space: normal !important;

    word-break: break-all !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-actions {
    display: grid !important;

    grid-template-columns: 1fr !important;

    padding: 10px 12px !important;

    border-left: 0 !important;

    border-top: 1px solid rgba(111, 162, 199, 0.18) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-share-ready-card
    .nautico-share-ready-actions
    :is(button, a) {
    width: 100% !important;

    min-width: 0 !important;
  }
}

/* ============================================================
   NAUTICO HOME LOGO CARD POSITION V1 — FINAL
   Smaller logo + composer slightly lower.
   ============================================================ */

/* ------------------------------------------------------------
   SMALLER HOME LOGO
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
  display: inline-flex;

  align-items: center;

  width: auto;

  max-width: 230px;

  transform-origin: left top;
}

html.nautico-futuristic-ui
  .nautico-home-v2
  .nautico-home-logo-compact
  :is(img, svg) {
  width: auto !important;

  max-width: 225px !important;

  max-height: 74px !important;

  -o-object-fit: contain;

     object-fit: contain;

  -o-object-position: left center;

     object-position: left center;
}

/*
 * If NauticoLogo renders through an internal wrapper.
 */

html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact > * {
  max-width: 225px !important;
}

/* ------------------------------------------------------------
   MOVE MAIN COMPOSER CARD SLIGHTLY LOWER
   Desktop only.
   ------------------------------------------------------------ */

@media (min-width: 1100px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-composer-shell:not(:has(.nautico-share-ready-card)) {
    top: calc(var(--nv10-top, 84px) + 26px) !important;
  }
}

/* ------------------------------------------------------------
   LARGE DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 1500px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-composer-shell:not(:has(.nautico-share-ready-card)) {
    top: calc(var(--nv10-top, 84px) + 30px) !important;
  }
}

/* ------------------------------------------------------------
   TABLET
   A smaller shift so it does not waste vertical space.
   ------------------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1099px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-composer-shell:not(:has(.nautico-share-ready-card)) {
    top: 84px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE
   Do not force fixed positioning.
   Just add a little breathing room under header/logo.
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
    max-width: 175px;
  }

  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-home-logo-compact
    :is(img, svg) {
    max-width: 170px !important;

    max-height: 58px !important;
  }

  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-composer-shell:not(:has(.nautico-share-ready-card)) {
    margin-top: 18px !important;
  }
}

/* ============================================================
   NAUTICO HOME LOGO SIZE V2 — HARD SCALE FINAL
   ============================================================ */

/*
 * The logo component has its own intrinsic dimensions.
 * Scale the complete rendered logo instead of relying only
 * on width/max-width.
 */

html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
  position: relative !important;

  display: inline-flex !important;

  align-items: flex-start !important;

  justify-content: flex-start !important;

  width: -moz-fit-content !important;

  width: fit-content !important;

  max-width: none !important;

  transform: scale(0.68) !important;

  transform-origin: left top !important;

  margin-right: -105px !important;

  margin-bottom: -30px !important;

  z-index: 20 !important;
}

/*
 * Remove internal width constraints that can fight the scale.
 */

html.nautico-futuristic-ui
  .nautico-home-v2
  .nautico-home-logo-compact
  :is(a, div, span, picture) {
  max-width: none !important;

  transform: none !important;
}

html.nautico-futuristic-ui
  .nautico-home-v2
  .nautico-home-logo-compact
  :is(img, svg) {
  width: auto !important;

  max-width: none !important;

  height: auto !important;

  max-height: none !important;

  transform: none !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left top !important;

     object-position: left top !important;
}

/* ============================================================
   MEDIUM LAPTOP
   ============================================================ */

@media (min-width: 1100px) and (max-width: 1499px) {
  html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
    transform: scale(0.64) !important;

    margin-right: -115px !important;

    margin-bottom: -34px !important;
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 769px) and (max-width: 1099px) {
  html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
    transform: scale(0.6) !important;

    margin-right: -125px !important;

    margin-bottom: -38px !important;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {
  html.nautico-futuristic-ui .nautico-home-v2 .nautico-home-logo-compact {
    transform: scale(0.54) !important;

    transform-origin: left top !important;

    margin-right: -145px !important;

    margin-bottom: -42px !important;
  }
}

/* ============================================================
   NAUTICO REAL HOME LOGO SIZE V3 — FINAL

   The visible homepage logo comes from branding.logo_light /
   branding.logo_dark and renders as .nautico-uploaded-logo.
   ============================================================ */

/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

html.nautico-futuristic-ui .nautico-home-v2 .nautico-header .nautico-logo-area {
  width: 245px !important;

  min-width: 245px !important;

  height: 72px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;
}

html.nautico-futuristic-ui
  .nautico-home-v2
  .nautico-header
  .nautico-logo-area
  img.nautico-uploaded-logo {
  display: block !important;

  width: 205px !important;

  min-width: 0 !important;

  max-width: 205px !important;

  height: auto !important;

  max-height: 64px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left center !important;

     object-position: left center !important;

  transform: none !important;

  filter: drop-shadow(0 0 9px rgba(55, 203, 235, 0.24)) !important;
}

/* ------------------------------------------------------------
   FALLBACK LOGO
   Keep fallback visually same size if branding image is absent.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  .nautico-home-v2
  .nautico-header
  .nautico-fallback-logo {
  transform: scale(0.95) !important;

  transform-origin: left center !important;
}

/* ------------------------------------------------------------
   LAPTOP
   ------------------------------------------------------------ */

@media (min-width: 1100px) and (max-width: 1499px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area {
    width: 225px !important;

    min-width: 225px !important;
  }

  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area
    img.nautico-uploaded-logo {
    width: 190px !important;

    max-width: 190px !important;

    max-height: 60px !important;
  }
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 769px) and (max-width: 1099px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area {
    width: 195px !important;

    min-width: 195px !important;

    height: 64px !important;
  }

  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area
    img.nautico-uploaded-logo {
    width: 165px !important;

    max-width: 165px !important;

    max-height: 52px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {
  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area {
    width: 160px !important;

    min-width: 160px !important;

    height: 58px !important;
  }

  html.nautico-futuristic-ui
    .nautico-home-v2
    .nautico-header
    .nautico-logo-area
    img.nautico-uploaded-logo {
    width: 140px !important;

    max-width: 140px !important;

    max-height: 46px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT FUTURISTIC V1 — FINAL

   Secure link / recipient download page.
   Same visual language as Nautico homepage.
   ============================================================ */

/* ============================================================
   PAGE BACKGROUND
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  --nr-bg: #061322;

  --nr-bg-deep: #04101d;

  --nr-panel: #0a192a;

  --nr-panel-2: #0c1f33;

  --nr-panel-soft: #10243a;

  --nr-border: rgba(108, 174, 208, 0.2);

  --nr-border-strong: rgba(82, 199, 215, 0.34);

  --nr-text: #f5f9fc;

  --nr-muted: #96aabc;

  --nr-soft: #c4d1dc;

  --nr-cyan: #65d7dc;

  --nr-blue: #477ce1;

  min-height: 100dvh !important;

  padding: 24px 24px 64px !important;

  background:
    radial-gradient(
      circle at 78% 8%,
      rgba(45, 116, 155, 0.14),
      transparent 28%
    ),
    radial-gradient(circle at 8% 75%, rgba(25, 94, 130, 0.1), transparent 32%),
    linear-gradient(150deg, #071625 0%, #05111e 54%, #071827 100%) !important;

  color: var(--nr-text) !important;
}

/* subtle depth, no neon */

html.nautico-futuristic-ui body .nautico-recipient-stage::before {
  content: '';

  position: fixed;

  inset: 0;

  pointer-events: none;

  background-image: radial-gradient(
    circle,
    rgba(99, 206, 222, 0.18) 0 1px,
    transparent 1.5px
  );

  background-size: 150px 130px;

  opacity: 0.16;

  z-index: 0;
}

/* ============================================================
   MAIN WIDTH
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage > .mx-auto {
  position: relative;

  z-index: 1;

  width: min(1180px, 100%) !important;

  max-width: 1180px !important;
}

/* ============================================================
   TOP LOGO + PROTECTION BADGE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex {
  margin-bottom: 18px !important;

  min-height: 58px;

  padding: 0 4px;
}

/* Nautico fallback wordmark */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-logo__wordmark {
  color: #ffffff !important;
}

/* normal logo image sizing */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(.nautico-logo__image, img) {
  max-height: 44px;
}

/* quick/private/verified badge */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex
  > span {
  min-height: 36px;

  display: inline-flex;

  align-items: center;

  padding: 7px 14px !important;

  border: 1px solid rgba(86, 205, 214, 0.25) !important;

  border-radius: 999px !important;

  background: rgba(10, 39, 55, 0.74) !important;

  background-image: none !important;

  color: #76ddd9 !important;

  box-shadow: none !important;

  font-weight: 650 !important;
}

/* ============================================================
   MAIN HERO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero {
  overflow: hidden !important;

  border: 1px solid rgba(111, 173, 208, 0.25) !important;

  border-radius: 28px !important;

  background: #081828 !important;

  background-image: none !important;

  box-shadow: 0 24px 60px rgba(0, 7, 18, 0.28) !important;
}

/* ============================================================
   HERO TOP
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  position: relative;

  padding: 34px 38px !important;

  background:
    radial-gradient(circle at 90% 0%, rgba(75, 168, 199, 0.2), transparent 32%),
    linear-gradient(125deg, #071527 0%, #0c1d32 62%, #15384e 100%) !important;

  color: #ffffff !important;
}

/* remove any bright visual layers */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top::after {
  box-shadow: none !important;

  filter: none !important;
}

/* ============================================================
   EYEBROW
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  color: #65dbe0 !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  letter-spacing: 0.2em !important;

  text-transform: uppercase;
}

/* sender line */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  .text-white\/80 {
  color: #d0dbe4 !important;
}

/* title */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  margin-top: 12px !important;

  color: #ffffff !important;

  font-size: clamp(34px, 4.5vw, 58px) !important;

  font-weight: 800 !important;

  line-height: 1.02 !important;

  letter-spacing: -0.045em !important;

  text-shadow: none !important;
}

/* ============================================================
   HERO STATS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  display: inline-flex;

  align-items: center;

  min-height: 34px;

  padding: 6px 12px !important;

  border: 1px solid rgba(145, 183, 207, 0.26) !important;

  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.055) !important;

  color: #d9e3ea !important;

  box-shadow: none !important;
}

/* ============================================================
   ALL CONTENT BELOW HERO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  > :not(.nautico-recipient-hero__top) {
  color: var(--nr-text) !important;
}

/*
 * Important:
 * old page uses white/light surface utility classes.
 * Convert them all to Nautico dark surfaces only inside recipient page.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.bg, .bg-elevated, .bg-white, .bg-gray-50, .bg-gray-100) {
  background: var(--nr-panel) !important;

  background-image: none !important;

  color: #ffffff !important;
}

/* ============================================================
   GENERIC CONTENT CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.border, [class*='rounded-xl'], [class*='rounded-2xl']) {
  border-color: var(--nr-border) !important;
}

/*
 * Major bordered blocks below hero.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  > div:not(.nautico-recipient-hero__top) {
  background-color: transparent;
}

/* ============================================================
   WHITE CONTENT AREA -> DARK
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero {
  color: #ffffff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(section, article) {
  color: #ffffff;
}

/* ============================================================
   TEXT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(h1, h2, h3, h4, h5, h6, strong, label) {
  color: #ffffff !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .text-main {
  color: #f5f9fc !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .text-muted {
  color: #91a6b8 !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .text-secondary {
  color: #bccbd6 !important;
}

/* ============================================================
   POLICY / DELIVERY CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is([class*='border-divider'], [class*='border-gray']) {
  border-color: rgba(110, 165, 200, 0.18) !important;
}

/*
 * Anything with a bordered rounded container in recipient content
 * gets a coherent dark surface.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-2xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-lg.border {
  background: #0b1d30 !important;

  background-image: none !important;

  border-color: rgba(107, 164, 201, 0.21) !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* ============================================================
   FILE ROWS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(ul, ol)
  > li {
  border-color: rgba(107, 164, 201, 0.2) !important;
}

/*
 * Generic file/list cards.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='rounded']
  [class*='border'] {
  border-color: rgba(108, 166, 202, 0.22) !important;
}

/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button {
  text-shadow: none !important;

  box-shadow: none !important;
}

/*
 * Main transfer download button.
 * It is normally the wide primary action.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.bg-primary,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button[class*='bg-primary'] {
  min-height: 54px !important;

  border: 1px solid rgba(120, 205, 236, 0.62) !important;

  border-radius: 14px !important;

  background: linear-gradient(
    135deg,
    #5667db 0%,
    #4a82df 50%,
    #69c9d5 100%
  ) !important;

  background-color: #4a82df !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  box-shadow: 0 10px 26px rgba(35, 91, 166, 0.18) !important;
}

/*
 * Some Button implementations may not preserve bg-primary
 * in the final DOM. Match the wide main action pattern as fallback.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.w-full {
  border: 1px solid rgba(120, 205, 236, 0.62) !important;

  background: linear-gradient(
    135deg,
    #5667db 0%,
    #4a82df 50%,
    #69c9d5 100%
  ) !important;

  background-color: #4a82df !important;

  color: #ffffff !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.bg-primary:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.w-full:hover {
    background: linear-gradient(
      135deg,
      #6171e1 0%,
      #528be7 50%,
      #75d1da 100%
    ) !important;

    transform: translateY(-1px) !important;
  }
}

/* ============================================================
   SECONDARY BUTTONS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button:not(.bg-primary):not(.w-full) {
  border-color: rgba(92, 184, 207, 0.3) !important;

  color: #ffffff !important;
}

/* ============================================================
   INPUTS / PASSWORD / OTP / TEXTAREAS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea, select) {
  border: 1px solid rgba(106, 164, 201, 0.24) !important;

  border-radius: 11px !important;

  background: #081a2d !important;

  background-image: none !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea)::-moz-placeholder {
  color: rgba(196, 211, 222, 0.45) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea)::placeholder {
  color: rgba(196, 211, 222, 0.45) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea, select):focus {
  border-color: rgba(89, 210, 215, 0.6) !important;

  outline: none !important;

  box-shadow: 0 0 0 1px rgba(89, 210, 215, 0.12) !important;
}

/* ============================================================
   ADVANCED DELIVERY POLICY
   ============================================================ */

/*
 * Highlight policy labels/pills.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .rounded-full {
  border-color: rgba(89, 203, 214, 0.24) !important;

  background: rgba(15, 52, 67, 0.62) !important;

  color: #d8f3f2 !important;
}

/* ============================================================
   ENCRYPTED CONVERSATION
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  h2 {
  font-weight: 750 !important;

  letter-spacing: -0.025em;
}

/*
 * conversation separators
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  hr {
  border-color: rgba(111, 163, 195, 0.15) !important;
}

/*
 * message blocks
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='border']
  [class*='p-'] {
  box-shadow: none !important;
}

/* ============================================================
   LINKS
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage a {
  color: #72d7dd !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage a:hover {
  color: #9ae8e7 !important;
}

/* ============================================================
   ERROR / WARNING
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage .text-danger {
  color: #ff858d !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage [class*='warning'] {
  border-color: rgba(220, 177, 79, 0.27) !important;

  background-color: rgba(75, 54, 15, 0.2) !important;
}

/* ============================================================
   REMOVE LIGHT/WHITE SHADOWS
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage * {
  text-shadow: none !important;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1099px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 20px 18px 52px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 28px !important;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 14px 10px 36px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    > .mx-auto
    > .mb-20.flex {
    min-height: 48px;

    margin-bottom: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero {
    border-radius: 20px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 22px 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 34px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-stat {
    min-height: 31px;

    padding: 5px 9px !important;

    font-size: 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.w-full {
    min-height: 48px !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui body .nautico-recipient-stage * {
    animation: none !important;

    transition: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT FUTURISTIC V2 — COMPACT FINAL
   ============================================================ */

/* ============================================================
   PAGE — tighter and more like homepage
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  min-height: 100dvh !important;

  padding: 18px 20px 42px !important;

  background:
    radial-gradient(
      circle at 82% 12%,
      rgba(48, 128, 167, 0.16),
      transparent 28%
    ),
    radial-gradient(circle at 9% 82%, rgba(32, 101, 142, 0.1), transparent 30%),
    linear-gradient(145deg, #061321 0%, #04101c 55%, #071725 100%) !important;

  color: #ffffff !important;
}

/* ============================================================
   CONTAINER
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage > .mx-auto {
  width: min(100%, 1040px) !important;

  max-width: 1040px !important;
}

/* ============================================================
   TOP HEADER
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex {
  min-height: 48px !important;

  margin-bottom: 12px !important;

  padding: 0 6px !important;
}

/* white Nautico logo */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-logo--inverse
  .nautico-logo__wordmark,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-logo__wordmark {
  color: #ffffff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-logo--fallback {
  transform: scale(0.92) !important;

  transform-origin: left center !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-logo__image {
  width: 29px !important;

  height: 29px !important;

  max-width: 29px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-logo__wordmark {
  font-size: 19px !important;

  font-weight: 850 !important;
}

/* protection badge */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex
  > span {
  min-height: 32px !important;

  padding: 5px 12px !important;

  border: 1px solid rgba(86, 207, 214, 0.24) !important;

  border-radius: 999px !important;

  background: rgba(9, 36, 50, 0.78) !important;

  color: #77ddd8 !important;

  font-size: 11px !important;

  font-weight: 700 !important;
}

/* ============================================================
   MAIN SHELL
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero {
  overflow: hidden !important;

  border: 1px solid rgba(109, 169, 205, 0.28) !important;

  border-radius: 26px !important;

  background: #071828 !important;

  background-image: none !important;

  box-shadow: 0 22px 55px rgba(0, 7, 18, 0.3) !important;
}

/* ============================================================
   HERO — compact, not huge
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  min-height: 0 !important;

  padding: 24px 28px 22px !important;

  background:
    radial-gradient(
      circle at 94% 0%,
      rgba(72, 168, 198, 0.19),
      transparent 35%
    ),
    linear-gradient(120deg, #071426 0%, #0a1c31 58%, #113249 100%) !important;

  border-bottom: 1px solid rgba(102, 163, 198, 0.15);
}

/* secure delivery */

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  color: #66dbe0 !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  letter-spacing: 0.2em !important;
}

/* sender text */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin-top: 8px !important;

  color: #ccd8e1 !important;

  font-size: 12px !important;
}

/* transfer title */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  margin-top: 8px !important;

  max-width: 720px !important;

  color: #ffffff !important;

  font-size: clamp(30px, 4vw, 44px) !important;

  font-weight: 800 !important;

  line-height: 1.02 !important;

  letter-spacing: -0.04em !important;
}

/* metadata chips */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 12px !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  min-height: 30px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(135, 183, 211, 0.23) !important;

  border-radius: 999px !important;

  background: rgba(255, 255, 255, 0.045) !important;

  color: #d9e4eb !important;

  font-size: 11px !important;
}

/* ============================================================
   CONTENT AREA — dark and compact
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  > div:not(.nautico-recipient-hero__top) {
  background: #071828 !important;

  color: #ffffff !important;
}

/*
 * Reduce generic large spacings inside recipient content.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.p-20, .p-24, .p-28, .p-32) {
  padding: 18px 22px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.mt-20, .mt-24, .mt-28, .mt-32) {
  margin-top: 15px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.mb-20, .mb-24, .mb-28) {
  margin-bottom: 15px !important;
}

/* ============================================================
   CARDS — policy / files / security
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-2xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-lg.border {
  border: 1px solid rgba(100, 159, 197, 0.21) !important;

  border-radius: 13px !important;

  background: #0a1d30 !important;

  background-image: none !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* ============================================================
   ADVANCED POLICY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .rounded-full {
  border: 1px solid rgba(89, 202, 211, 0.21) !important;

  background: #0c2b39 !important;

  color: #d9f4f2 !important;
}

/* ============================================================
   FILE ROW
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(ul, ol)
  > li {
  min-height: 58px;

  border: 1px solid rgba(100, 159, 197, 0.2) !important;

  border-radius: 12px;

  background: #091c2e !important;

  color: #ffffff !important;
}

/* file names */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(ul, ol)
  > li
  strong {
  color: #ffffff !important;
}

/* ============================================================
   DOWNLOAD CTA
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.w-full,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.bg-primary,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button[class*='bg-primary'] {
  min-height: 50px !important;

  border: 1px solid rgba(121, 204, 235, 0.61) !important;

  border-radius: 13px !important;

  background: linear-gradient(
    135deg,
    #5668db 0%,
    #4b82e0 49%,
    #6bcbd5 100%
  ) !important;

  background-color: #4b82e0 !important;

  color: #ffffff !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  box-shadow: 0 9px 22px rgba(31, 88, 160, 0.18) !important;
}

/* ============================================================
   CONVERSATION
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  h2 {
  color: #ffffff !important;

  font-size: 18px !important;

  font-weight: 750 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  hr {
  margin: 16px 0 !important;

  border-color: rgba(106, 161, 195, 0.14) !important;
}

/* conversation message / reply panels */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='rounded']
  [class*='p-'] {
  box-shadow: none !important;
}

/* ============================================================
   FORMS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea, select) {
  min-height: 42px;

  border: 1px solid rgba(102, 160, 198, 0.23) !important;

  border-radius: 10px !important;

  background: #071a2c !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage textarea {
  min-height: 74px !important;
}

/* ============================================================
   TEXT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(h1, h2, h3, h4, strong, label) {
  color: #ffffff !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .text-muted {
  color: #91a6b7 !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .text-secondary {
  color: #bdccd7 !important;
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1099px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage > .mx-auto {
    max-width: 900px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 22px 24px !important;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 640px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 10px 9px 30px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    > .mx-auto
    > .mb-20.flex {
    min-height: 44px !important;

    margin-bottom: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero {
    border-radius: 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 18px 16px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 29px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    :is(.p-20, .p-24, .p-28, .p-32) {
    padding: 14px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.w-full {
    min-height: 46px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT FUTURISTIC V3 — ENHANCED EFFECTS FINAL
   More glow, more glass, more homepage-style premium depth.
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  position: relative;
  min-height: 100dvh !important;
  overflow-x: hidden !important;
  padding: 18px 20px 44px !important;
  background:
    radial-gradient(
      circle at 82% 10%,
      rgba(121, 210, 237, 0.18),
      transparent 24%
    ),
    radial-gradient(
      circle at 10% 88%,
      rgba(80, 126, 224, 0.14),
      transparent 28%
    ),
    linear-gradient(145deg, #03101d 0%, #041628 44%, #07192d 100%) !important;
  color: #fff !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image:
    radial-gradient(
      circle at 20% 20%,
      rgba(255, 255, 255, 0.18) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 75% 35%,
      rgba(118, 219, 235, 0.18) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 60% 72%,
      rgba(134, 155, 255, 0.14) 0 1px,
      transparent 1.5px
    );
  background-size:
    220px 220px,
    260px 260px,
    320px 320px;
}

html.nautico-futuristic-ui body .nautico-recipient-stage::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  pointer-events: none;
  opacity: 0.45;
  background: radial-gradient(
    ellipse at center,
    rgba(93, 206, 229, 0.12) 0%,
    transparent 70%
  );
  filter: blur(18px);
}

/* container */
html.nautico-futuristic-ui body .nautico-recipient-stage > .mx-auto {
  width: min(100%, 1100px) !important;
  max-width: 1100px !important;
}

/* top bar */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex {
  margin-bottom: 14px !important;
  min-height: 52px !important;
  padding: 0 6px !important;
}

/* Quick badge */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  > .mx-auto
  > .mb-20.flex
  > span {
  min-height: 36px !important;
  padding: 7px 14px !important;
  border: 1px solid rgba(113, 214, 229, 0.28) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(12, 40, 56, 0.88),
    rgba(8, 28, 43, 0.82)
  ) !important;
  color: #8fe7e6 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 6px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

/* main shell */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero {
  position: relative;
  overflow: hidden !important;
  border: 1px solid rgba(112, 180, 215, 0.28) !important;
  border-radius: 28px !important;
  background: linear-gradient(
    180deg,
    rgba(5, 17, 32, 0.95),
    rgba(7, 23, 40, 0.94)
  ) !important;
  box-shadow:
    0 25px 60px rgba(0, 6, 18, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  backdrop-filter: blur(12px);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.04) 18%,
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 10%,
      rgba(135, 214, 234, 0.12),
      transparent 25%
    );
  opacity: 0.75;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -40px;
  height: 90px;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(82, 178, 217, 0.18),
    transparent 70%
  );
  filter: blur(24px);
}

/* hero top */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  position: relative;
  z-index: 1;
  padding: 28px 30px 24px !important;
  border-bottom: 1px solid rgba(112, 178, 209, 0.16);
  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(123, 210, 235, 0.18),
      transparent 28%
    ),
    linear-gradient(120deg, #051324 0%, #0a1b31 56%, #173248 100%) !important;
}

/* eyebrow */
html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  color: #8fe8ec !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(111, 224, 235, 0.14);
}

/* sender line */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin-top: 10px !important;
  color: rgba(230, 239, 247, 0.92) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* big title */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  margin-top: 10px !important;
  max-width: 760px !important;
  color: #fff !important;
  font-size: clamp(42px, 6vw, 74px) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.05em !important;
  font-weight: 850 !important;
  text-shadow:
    0 0 18px rgba(88, 192, 233, 0.08),
    0 4px 20px rgba(0, 0, 0, 0.28);
}

/* stat pills */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 16px !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  min-height: 40px !important;
  padding: 8px 14px !important;
  border: 1px solid rgba(134, 183, 211, 0.24) !important;
  border-radius: 999px !important;
  background: linear-gradient(
    180deg,
    rgba(18, 35, 56, 0.92),
    rgba(10, 24, 41, 0.86)
  ) !important;
  color: #edf5fb !important;
  font-size: 13px !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 8px 20px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

/* generic content area */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  > div:not(.nautico-recipient-hero__top) {
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: #fff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(.p-20, .p-24, .p-28, .p-32) {
  padding: 22px 28px !important;
}

/* section titles */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  h3,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  h4,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  strong,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  label {
  color: #fff !important;
}

/* cards */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-2xl.border,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  div.rounded-lg.border {
  border: 1px solid rgba(101, 159, 197, 0.22) !important;
  border-radius: 18px !important;
  background: linear-gradient(
    180deg,
    rgba(12, 31, 49, 0.92),
    rgba(8, 23, 38, 0.88)
  ) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
  backdrop-filter: blur(10px);
  color: #fff !important;
}

/* white blocks that remained */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .bg-paper,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .bg-chip,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='bg-paper'],
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='bg-chip'] {
  background: linear-gradient(
    180deg,
    rgba(12, 31, 49, 0.92),
    rgba(8, 23, 38, 0.88)
  ) !important;
  color: #fff !important;
}

/* badge chips */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .rounded-full {
  border: 1px solid rgba(92, 208, 220, 0.22) !important;
  background: linear-gradient(
    180deg,
    rgba(12, 43, 57, 0.88),
    rgba(8, 31, 43, 0.82)
  ) !important;
  color: #dffafa !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

/* file row */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(ul, ol)
  > li {
  min-height: 82px !important;
  border: 1px solid rgba(101, 159, 197, 0.22) !important;
  border-radius: 18px !important;
  background: linear-gradient(
    180deg,
    rgba(13, 31, 49, 0.92),
    rgba(9, 24, 41, 0.9)
  ) !important;
  color: #fff !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(ul, ol)
  > li
  strong {
  color: #fff !important;
}

/* divider */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  hr {
  margin: 22px 0 !important;
  border-color: rgba(109, 168, 198, 0.14) !important;
}

/* primary button */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.w-full,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.bg-primary,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button[class*='bg-primary'] {
  min-height: 56px !important;
  border: 1px solid rgba(141, 218, 240, 0.55) !important;
  border-radius: 18px !important;
  background: linear-gradient(
    135deg,
    #6572e8 0%,
    #5f86eb 48%,
    #8ad3df 100%
  ) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  box-shadow:
    0 12px 26px rgba(42, 98, 176, 0.22),
    0 0 18px rgba(96, 210, 232, 0.1);
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.w-full:hover,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button.bg-primary:hover,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button[class*='bg-primary']:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(42, 98, 176, 0.28),
    0 0 22px rgba(96, 210, 232, 0.14);
}

/* secondary buttons */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  button:not(.w-full):not(.bg-primary):not([class*='bg-primary']) {
  border: 1px solid rgba(91, 196, 216, 0.24) !important;
  border-radius: 16px !important;
  background: linear-gradient(
    180deg,
    rgba(12, 36, 56, 0.9),
    rgba(8, 27, 43, 0.86)
  ) !important;
  color: #fff !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

/* input / textarea */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea, select) {
  border: 1px solid rgba(98, 158, 198, 0.24) !important;
  border-radius: 16px !important;
  background: linear-gradient(
    180deg,
    rgba(9, 24, 40, 0.94),
    rgba(7, 19, 33, 0.92)
  ) !important;
  color: #fff !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.015) inset !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage textarea {
  min-height: 94px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea)::-moz-placeholder {
  color: rgba(207, 221, 232, 0.56) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  :is(input, textarea)::placeholder {
  color: rgba(207, 221, 232, 0.56) !important;
}

/* conversation blocks */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='message'],
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='conversation'],
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  [class*='reply'] {
  color: #fff !important;
}

/* top title alignment spacing */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  .mt-20 {
  margin-top: 18px !important;
}

/* mobile */
@media (max-width: 768px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 10px 10px 28px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    > .mx-auto
    > .mb-20.flex {
    margin-bottom: 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero {
    border-radius: 22px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 20px 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 48px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    :is(.p-20, .p-24, .p-28, .p-32) {
    padding: 16px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-stat {
    min-height: 36px !important;
    font-size: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero
    button.w-full {
    min-height: 52px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT STRUCTURAL V4B — FINAL
   ============================================================ */

/* ------------------------------------------------------------
   PAGE + WIDTH
   ------------------------------------------------------------ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  padding: 12px 18px 30px !important;

  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(75, 176, 214, 0.16),
      transparent 25%
    ),
    radial-gradient(
      circle at 10% 88%,
      rgba(83, 111, 207, 0.12),
      transparent 28%
    ),
    linear-gradient(145deg, #03101d 0%, #051526 52%, #071b2d 100%) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell {
  width: min(900px, calc(100vw - 30px)) !important;

  max-width: 900px !important;

  margin: 0 auto !important;
}

/* ------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex {
  min-height: 42px !important;

  margin-bottom: 8px !important;

  padding-inline: 4px !important;
}

/* ------------------------------------------------------------
   OUTER CARD
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell-card {
  overflow: hidden !important;

  border: 1px solid rgba(106, 171, 207, 0.28) !important;

  border-radius: 22px !important;

  background: #061628 !important;

  box-shadow:
    0 22px 50px rgba(0, 7, 18, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  padding: 19px 23px 18px !important;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(95, 199, 227, 0.14),
      transparent 30%
    ),
    linear-gradient(120deg, #061426, #0a1b30 64%, #153147) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  margin-top: 5px !important;

  font-size: clamp(30px, 4vw, 42px) !important;

  line-height: 1 !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  font-size: 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  min-height: 28px !important;

  padding: 4px 9px !important;

  font-size: 10px !important;

  background: rgba(10, 29, 46, 0.78) !important;

  box-shadow: none !important;
}

/* ------------------------------------------------------------
   CONTENT
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-content {
  padding: 15px 18px 18px !important;

  background: linear-gradient(180deg, #071829, #051321) !important;
}

/* ------------------------------------------------------------
   ADVANCED POLICY = SMALL STRIP
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy {
  margin: 0 !important;

  padding: 8px 10px !important;

  border: 1px solid rgba(85, 195, 208, 0.22) !important;

  border-radius: 11px !important;

  background: linear-gradient(
    90deg,
    rgba(10, 36, 51, 0.96),
    rgba(10, 43, 57, 0.74)
  ) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  h2 {
  font-size: 11px !important;

  color: #e9ffff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  .rounded-full {
  min-height: 23px !important;

  padding: 2px 7px !important;

  font-size: 9px !important;

  border: 1px solid rgba(83, 201, 211, 0.2) !important;

  background: #0b3040 !important;

  color: #9be7e3 !important;

  box-shadow: none !important;
}

/*
 * Kill remaining light background inside policy.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  .bg,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  .bg-alt {
  background: #0b3040 !important;

  color: #ffffff !important;
}

/* ------------------------------------------------------------
   FILES
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files {
  margin-top: 10px !important;

  border: 1px solid rgba(103, 159, 196, 0.2) !important;

  border-radius: 11px !important;

  background: #081b2d !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  > div {
  min-height: 50px !important;

  padding: 7px 10px !important;

  background: transparent !important;
}

/* ------------------------------------------------------------
   DOWNLOAD
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-download {
  min-height: 44px !important;

  margin-top: 10px !important;

  padding-block: 8px !important;

  border: 1px solid rgba(126, 207, 236, 0.54) !important;

  border-radius: 11px !important;

  background: linear-gradient(
    135deg,
    #5869dd 0%,
    #5688e4 50%,
    #72c9d7 100%
  ) !important;

  color: #ffffff !important;

  font-size: 13px !important;

  box-shadow: 0 8px 19px rgba(34, 90, 164, 0.16) !important;
}

/* ------------------------------------------------------------
   TWO-COLUMN INTERACTIONS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-interaction-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr) !important;

  align-items: start;

  gap: 10px !important;

  margin-top: 11px !important;
}

/* cards */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff {
  min-width: 0;

  margin: 0 !important;

  padding: 11px !important;

  border: 1px solid rgba(100, 158, 195, 0.2) !important;

  border-radius: 12px !important;

  background: linear-gradient(180deg, #091d30, #071725) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  h2 {
  margin: 0 !important;

  font-size: 12px !important;

  font-weight: 750 !important;

  color: #ffffff !important;
}

/* notes */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  > .space-y-8 {
  margin-top: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl {
  padding: 7px 8px !important;

  border: 1px solid rgba(91, 148, 184, 0.15) !important;

  border-radius: 8px !important;

  background: #071828 !important;

  color: #ffffff !important;
}

/* reply */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  form {
  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto !important;

  gap: 6px !important;

  margin-top: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  textarea {
  min-height: 62px !important;
}

/* ------------------------------------------------------------
   HANDOFF
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  textarea {
  min-height: 62px !important;

  margin-top: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  > .flex {
  margin-top: 7px !important;

  gap: 5px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  button {
  min-height: 29px !important;

  padding: 4px 7px !important;

  border: 1px solid rgba(83, 185, 205, 0.23) !important;

  border-radius: 8px !important;

  background: #0c263b !important;

  color: #ffffff !important;

  font-size: 9px !important;

  box-shadow: none !important;
}

/* ------------------------------------------------------------
   INTERACTION INPUTS
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-interaction-grid
  textarea {
  padding: 8px 9px !important;

  border: 1px solid rgba(101, 158, 195, 0.21) !important;

  border-radius: 9px !important;

  background: #061827 !important;

  color: #ffffff !important;

  font-size: 11px !important;

  box-shadow: none !important;
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 760px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    width: calc(100vw - 14px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 520px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 7px 7px 22px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-content {
    padding: 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 15px 13px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 28px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT TOPBAR CLEANUP — FINAL
   Hide Quick button and enlarge Nautico logo
   only on recipient/share page.
   ============================================================ */

/* top bar container */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  margin-bottom: 12px !important;
  padding-inline: 2px !important;
}

/* hide right-side Quick button */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: none !important;
}

/* enlarge left logo wrapper */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  transform: scale(2.15) !important;
  transform-origin: left center !important;

  margin-left: 10px !important;
  margin-top: 10px !important;
  margin-bottom: 6px !important;

  width: auto !important;
  max-width: none !important;
}

/* remove inner limits that keep it tiny */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child
  :is(a, div, span, picture) {
  width: auto !important;
  max-width: none !important;
}

/* enlarge actual rendered logo asset */
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child
  :is(img, svg) {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
}

/* desktop / laptop fine tuning */
@media (min-width: 901px) and (max-width: 1400px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child {
    transform: scale(1.95) !important;
    margin-left: 8px !important;
  }
}

/* tablet */
@media (min-width: 601px) and (max-width: 900px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child {
    transform: scale(1.65) !important;
    margin-left: 6px !important;
    margin-top: 8px !important;
  }
}

/* mobile */
@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex {
    margin-bottom: 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child {
    transform: scale(1.45) !important;
    transform-origin: left top !important;
    margin-left: 4px !important;
    margin-top: 6px !important;
    margin-bottom: 2px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT LOGO HOMEPAGE SIZE V2 — FINAL
   Match homepage visual size.
   Quick remains hidden.
   ============================================================ */

/* ------------------------------------------------------------
   TOP BAR
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex {
  min-height: 58px !important;

  margin-bottom: 10px !important;

  padding: 0 4px !important;

  justify-content: flex-start !important;

  align-items: center !important;
}

/* ------------------------------------------------------------
   HIDE QUICK
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: none !important;
}

/* ------------------------------------------------------------
   RESET OLD GIANT SCALE
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child {
  display: inline-flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  width: auto !important;

  max-width: none !important;

  transform: scale(1) !important;

  transform-origin: left center !important;

  margin: 0 !important;
}

/* ------------------------------------------------------------
   LOGO SIZE — HOMEPAGE-LIKE
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  .nautico-logo--fallback {
  transform: scale(1) !important;

  transform-origin: left center !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  .nautico-logo__image {
  width: 42px !important;

  height: 42px !important;

  max-width: 42px !important;

  max-height: 42px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  .nautico-logo__wordmark {
  font-size: 28px !important;

  font-weight: 850 !important;

  line-height: 1 !important;

  color: #ffffff !important;
}

/* ------------------------------------------------------------
   IF LOGO IS RENDERED AS IMG/SVG
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child
  :is(img, svg) {
  width: auto !important;

  height: 52px !important;

  max-width: 220px !important;

  max-height: 52px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left center !important;

     object-position: left center !important;

  transform: none !important;
}

/* ------------------------------------------------------------
   LAPTOP
   ------------------------------------------------------------ */

@media (min-width: 901px) and (max-width: 1400px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__image {
    width: 38px !important;

    height: 38px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__wordmark {
    font-size: 25px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child
    :is(img, svg) {
    height: 48px !important;

    max-width: 205px !important;
  }
}

/* ------------------------------------------------------------
   TABLET
   ------------------------------------------------------------ */

@media (min-width: 601px) and (max-width: 900px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__image {
    width: 34px !important;

    height: 34px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__wordmark {
    font-size: 22px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child
    :is(img, svg) {
    height: 43px !important;

    max-width: 185px !important;
  }
}

/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__image {
    width: 30px !important;

    height: 30px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    .nautico-logo__wordmark {
    font-size: 19px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child
    :is(img, svg) {
    height: 38px !important;

    max-width: 160px !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT VIEWPORT FIT V5 — FINAL

   Desktop/laptop:
   fit normal recipient workflow into one viewport.

   Mobile/tablet:
   preserve natural page scrolling.
   ============================================================ */

/* ============================================================
   DESKTOP VIEWPORT FIT
   ============================================================ */

@media (min-width: 1000px) and (min-height: 700px) {
  html.nautico-futuristic-ui,
  html.nautico-futuristic-ui body {
    min-height: 100%;
  }

  html.nautico-futuristic-ui body .nautico-recipient-stage {
    box-sizing: border-box !important;

    height: 100dvh !important;

    min-height: 0 !important;

    padding: 8px 14px 10px !important;

    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     COMPLETE PAGE SHELL
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    display: grid !important;

    grid-template-rows: 48px minmax(0, 1fr) !important;

    width: min(900px, calc(100vw - 30px)) !important;

    max-width: 900px !important;

    height: calc(100dvh - 18px) !important;

    max-height: calc(100dvh - 18px) !important;

    margin: 0 auto !important;

    overflow: hidden !important;
  }

  /* ----------------------------------------------------------
     LOGO BAR
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex {
    min-height: 0 !important;

    height: 46px !important;

    margin: 0 !important;

    padding: 0 3px 5px !important;

    align-items: center !important;
  }

  /* ----------------------------------------------------------
     COMPLETE RECIPIENT CARD
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell-card {
    display: grid !important;

    grid-template-rows: auto minmax(0, 1fr) !important;

    height: 100% !important;

    min-height: 0 !important;

    max-height: 100% !important;

    overflow: hidden !important;

    border-radius: 20px !important;
  }

  /* ==========================================================
     HERO — MUCH SHORTER
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    min-height: 0 !important;

    padding: 14px 20px 13px !important;
  }

  html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
    font-size: 8px !important;

    line-height: 1 !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    .text-white\/80 {
    margin-top: 5px !important;

    font-size: 11px !important;

    line-height: 1.2 !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    margin-top: 4px !important;

    font-size: clamp(27px, 3vw, 36px) !important;

    line-height: 0.95 !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    > .flex {
    margin-top: 8px !important;

    gap: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-stat {
    min-height: 24px !important;

    padding: 3px 8px !important;

    font-size: 9px !important;
  }

  /* ==========================================================
     CONTENT LAYOUT
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-content {
    display: flex !important;

    flex-direction: column !important;

    min-height: 0 !important;

    padding: 10px 14px 12px !important;

    overflow: hidden !important;
  }

  /* ==========================================================
     POLICY STRIP
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-policy {
    flex: 0 0 auto;

    margin: 0 !important;

    padding: 6px 8px !important;

    border-radius: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-policy
    > .flex {
    gap: 4px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-policy
    h2 {
    font-size: 9px !important;

    line-height: 1.1 !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-policy
    .rounded-full {
    min-height: 19px !important;

    padding: 1px 6px !important;

    font-size: 8px !important;
  }

  /* ==========================================================
     FILE LIST
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files {
    flex: 0 0 auto;

    margin-top: 7px !important;

    border-radius: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files
    > div {
    min-height: 40px !important;

    padding: 5px 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files
    .font-semibold {
    font-size: 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files
    .text-xs {
    margin-top: 1px !important;

    font-size: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files
    .text-sm {
    font-size: 9px !important;
  }

  /* ==========================================================
     DOWNLOAD
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-download {
    flex: 0 0 auto;

    min-height: 38px !important;

    margin-top: 7px !important;

    padding: 5px 12px !important;

    border-radius: 9px !important;

    font-size: 11px !important;
  }

  /* ==========================================================
     ERROR / PROGRESS
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-download
    + .mt-14 {
    margin-top: 6px !important;

    padding: 5px 8px !important;

    font-size: 9px !important;
  }

  /* ==========================================================
     INTERACTION AREA TAKES REMAINING HEIGHT
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid {
    flex: 1 1 auto;

    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(0, 0.92fr) !important;

    gap: 8px !important;

    margin-top: 7px !important;

    overflow: hidden !important;
  }

  /* ==========================================================
     INTERACTION CARDS
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff {
    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    min-height: 0 !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 8px !important;

    border-radius: 10px !important;

    overflow: hidden !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    h2,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff
    h2 {
    flex: 0 0 auto;

    margin: 0 !important;

    font-size: 10px !important;

    line-height: 1.15 !important;
  }

  /* ==========================================================
     CONVERSATION NOTES
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    > .space-y-8 {
    flex: 1 1 auto;

    min-height: 0 !important;

    margin-top: 5px !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 4px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    .rounded-xl {
    padding: 5px 7px !important;

    border-radius: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    .rounded-xl
    .text-sm {
    font-size: 9px !important;

    line-height: 1.25 !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    .rounded-xl
    .text-xs {
    margin-top: 2px !important;

    font-size: 7px !important;

    line-height: 1.2 !important;
  }

  /* ----------------------------------------------------------
     REPLY FORM
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    form {
    flex: 0 0 auto;

    display: grid !important;

    grid-template-columns: minmax(0, 1fr) auto !important;

    gap: 5px !important;

    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    textarea {
    min-height: 44px !important;

    height: 44px !important;

    padding: 6px 7px !important;

    font-size: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation
    form
    button {
    min-height: 44px !important;

    padding: 5px 10px !important;

    font-size: 9px !important;
  }

  /* ==========================================================
     HANDOFF
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff
    textarea {
    flex: 0 0 auto;

    min-height: 46px !important;

    height: 46px !important;

    margin-top: 5px !important;

    padding: 6px 7px !important;

    font-size: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff
    > .flex {
    flex: 0 0 auto;

    gap: 4px !important;

    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff
    button {
    min-height: 25px !important;

    padding: 3px 6px !important;

    border-radius: 7px !important;

    font-size: 7px !important;

    line-height: 1.1 !important;
  }

  /* ==========================================================
     SEND FILES BACK — IF PRESENT
     ========================================================== */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid
    + section {
    margin-top: 6px !important;

    padding-top: 6px !important;
  }
}

/* ============================================================
   SHORTER LAPTOPS — 700–799px HEIGHT
   ============================================================ */

@media (min-width: 1000px) and (min-height: 700px) and (max-height: 799px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    grid-template-rows: 40px minmax(0, 1fr) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 38px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 10px 17px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 26px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-content {
    padding: 8px 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files {
    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-download {
    margin-top: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid {
    margin-top: 5px !important;
  }
}

/* ============================================================
   TABLET + MOBILE
   Natural scrolling is safer and readable.
   ============================================================ */

@media (max-width: 999px), (max-height: 699px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    height: auto !important;

    min-height: 100dvh !important;

    overflow: visible !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell-card,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-content {
    height: auto !important;

    max-height: none !important;

    overflow: visible !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT SAFE FIT V5B — FINAL

   Fixes V5 clipping:
   - full logo visible
   - full bottom visible
   - no internal clipping
   - compact desktop layout preserved
   ============================================================ */

/* ============================================================
   1. NEVER CLIP THE PAGE
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  height: auto !important;

  min-height: 100dvh !important;

  max-height: none !important;

  overflow-x: hidden !important;

  overflow-y: auto !important;

  padding: 10px 14px 24px !important;
}

/* ============================================================
   2. SHELL MUST USE NATURAL HEIGHT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell {
  display: block !important;

  width: min(900px, calc(100vw - 28px)) !important;

  max-width: 900px !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin: 0 auto !important;

  overflow: visible !important;
}

/* ============================================================
   3. TOP LOGO BAR
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex {
  height: auto !important;

  min-height: 56px !important;

  max-height: none !important;

  margin: 0 0 8px !important;

  padding: 4px 4px 5px !important;

  overflow: visible !important;

  align-items: center !important;
}

/*
 * Keep complete Nautico logo visible.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child {
  transform: none !important;

  margin: 0 !important;

  overflow: visible !important;
}

/*
 * Current desired homepage-like size.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  .nautico-logo__image {
  width: 38px !important;

  height: 38px !important;

  max-width: 38px !important;

  max-height: 38px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell
  .nautico-logo__wordmark {
  font-size: 25px !important;

  line-height: 1 !important;

  color: #ffffff !important;
}

/* ============================================================
   4. OUTER CARD — NATURAL HEIGHT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell-card {
  display: block !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  border-radius: 20px !important;
}

/* ============================================================
   5. HERO — COMPACT BUT NOT CLIPPED
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  min-height: 0 !important;

  height: auto !important;

  max-height: none !important;

  overflow: visible !important;

  padding: 13px 18px 12px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  font-size: 8px !important;

  line-height: 1.1 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin-top: 5px !important;

  font-size: 10px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  margin-top: 4px !important;

  font-size: clamp(27px, 3vw, 34px) !important;

  line-height: 1 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 7px !important;

  gap: 5px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  min-height: 23px !important;

  padding: 2px 7px !important;

  font-size: 8px !important;
}

/* ============================================================
   6. MAIN CONTENT — REMOVE OLD FLEX HEIGHT LOCK
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-content {
  display: block !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  padding: 9px 12px 12px !important;

  overflow: visible !important;
}

/* ============================================================
   7. POLICY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy {
  margin: 0 !important;

  padding: 5px 8px !important;

  border-radius: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  h2 {
  font-size: 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  .rounded-full {
  min-height: 18px !important;

  padding: 1px 5px !important;

  font-size: 7px !important;
}

/* ============================================================
   8. FILE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files {
  margin-top: 6px !important;

  border-radius: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  > div {
  min-height: 38px !important;

  padding: 4px 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  .font-semibold {
  font-size: 10px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  .text-xs {
  margin-top: 1px !important;

  font-size: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  .text-sm {
  font-size: 8px !important;
}

/* ============================================================
   9. DOWNLOAD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-download {
  min-height: 36px !important;

  margin-top: 6px !important;

  padding: 5px 10px !important;

  border-radius: 8px !important;

  font-size: 10px !important;
}

/* ============================================================
   10. INTERACTION GRID
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-interaction-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr) !important;

  gap: 7px !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin-top: 7px !important;

  overflow: visible !important;
}

/* ============================================================
   11. CONVERSATION / HANDOFF
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff {
  display: block !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 7px !important;

  border-radius: 9px !important;

  overflow: visible !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  h2 {
  margin: 0 !important;

  font-size: 9px !important;

  line-height: 1.15 !important;
}

/* ============================================================
   12. NOTES
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  > .space-y-8 {
  display: block !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin-top: 4px !important;

  overflow: visible !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl {
  margin-top: 3px !important;

  padding: 4px 6px !important;

  border-radius: 6px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl
  .text-sm {
  font-size: 8px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl
  .text-xs {
  margin-top: 1px !important;

  font-size: 6px !important;
}

/* ============================================================
   13. REPLY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  form {
  display: grid !important;

  grid-template-columns: minmax(0, 1fr) auto !important;

  gap: 4px !important;

  margin-top: 4px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  textarea {
  min-height: 38px !important;

  height: 38px !important;

  padding: 5px 6px !important;

  font-size: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  form
  button {
  min-height: 38px !important;

  padding: 4px 8px !important;

  font-size: 8px !important;
}

/* ============================================================
   14. HANDOFF
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  textarea {
  min-height: 40px !important;

  height: 40px !important;

  margin-top: 4px !important;

  padding: 5px 6px !important;

  font-size: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  > .flex {
  margin-top: 4px !important;

  gap: 3px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  button {
  min-height: 23px !important;

  padding: 2px 5px !important;

  border-radius: 6px !important;

  font-size: 6px !important;
}

/* ============================================================
   15. DESKTOP HEIGHT OPTIMISATION
   Instead of clipping content, make page denser.
   ============================================================ */

@media (min-width: 1000px) and (max-height: 850px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding-top: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell
    > .mb-20.flex {
    min-height: 48px !important;

    padding-top: 2px !important;

    padding-bottom: 3px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 10px 16px 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top
    h1 {
    font-size: 28px !important;
  }
}

/* ============================================================
   16. TABLET / MOBILE
   ============================================================ */

@media (max-width: 800px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  html.nautico-futuristic-ui body .nautico-recipient-stage {
    padding: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    width: calc(100vw - 14px) !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT VISUAL REFINEMENT V6B — FINAL
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage {
  position: relative !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      1200px 520px at 8% 0%,
      rgba(138, 190, 255, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      820px 460px at 100% 0%,
      rgba(111, 223, 234, 0.16) 0%,
      transparent 50%
    ),
    radial-gradient(
      880px 560px at 50% 100%,
      rgba(61, 113, 201, 0.1) 0%,
      transparent 60%
    ),
    linear-gradient(90deg, #020a1d 0%, #031028 30%, #051736 60%, #17344d 100%) !important;

  overflow-x: hidden !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background:
    radial-gradient(
      circle at 14% 24%,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1px 100%
    ),
    radial-gradient(
      circle at 28% 8%,
      rgba(120, 220, 255, 0.16) 0 1.5px,
      transparent 1.5px 100%
    ),
    radial-gradient(
      circle at 48% 12%,
      rgba(255, 255, 255, 0.07) 0 1px,
      transparent 1px 100%
    ),
    radial-gradient(
      circle at 71% 16%,
      rgba(115, 210, 255, 0.12) 0 1.5px,
      transparent 1.5px 100%
    ),
    radial-gradient(
      circle at 88% 9%,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 100%
    );

  opacity: 0.9 !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;

  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.04) 10%,
      transparent 20%,
      transparent 100%
    ),
    radial-gradient(
      900px 260px at 50% 0%,
      rgba(98, 197, 255, 0.1),
      transparent 70%
    );

  mix-blend-mode: screen !important;
  animation: nauticoRecipientAuroraV6B 14s ease-in-out infinite alternate !important;
}

@keyframes nauticoRecipientAuroraV6B {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.55;
  }

  100% {
    transform: translate3d(10px, 6px, 0) scale(1.02);
    opacity: 0.82;
  }
}

/* shell */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell {
  position: relative !important;
  z-index: 1 !important;

  width: min(1180px, calc(100vw - 36px)) !important;

  max-width: 1180px !important;

  margin: 0 auto !important;
}

/* main card */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell-card {
  position: relative !important;

  overflow: hidden !important;

  border-radius: 28px !important;

  border: 1px solid rgba(118, 196, 236, 0.28) !important;

  background: linear-gradient(
    145deg,
    rgba(3, 15, 38, 0.95) 0%,
    rgba(3, 16, 42, 0.93) 50%,
    rgba(23, 46, 70, 0.88) 100%
  ) !important;

  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(130, 210, 255, 0.05) !important;

  backdrop-filter: blur(18px) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-shell-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;

  background: linear-gradient(
    108deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.045) 11%,
    transparent 24%
  );

  opacity: 0.72 !important;
}

/* hero */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top {
  position: relative !important;

  padding: 24px 30px 22px !important;

  border-bottom: 1px solid rgba(150, 216, 245, 0.18) !important;

  background: linear-gradient(
    90deg,
    rgba(2, 13, 34, 0.65) 0%,
    rgba(4, 20, 47, 0.2) 48%,
    rgba(124, 211, 246, 0.1) 100%
  ) !important;
}

html.nautico-futuristic-ui body .nautico-recipient-stage .nautico-eyebrow {
  color: #9cefff !important;

  font-size: 11px !important;

  letter-spacing: 0.18em !important;

  font-weight: 800 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  .text-white\/80 {
  color: rgba(233, 243, 252, 0.93) !important;

  font-size: 14px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero__top
  h1 {
  color: #ffffff !important;

  font-size: clamp(38px, 4vw, 58px) !important;

  line-height: 0.98 !important;

  margin-top: 8px !important;

  letter-spacing: -0.04em !important;

  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.28) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-stat {
  min-height: 34px !important;

  padding: 6px 12px !important;

  border-radius: 999px !important;

  color: #eaf6ff !important;

  font-size: 11px !important;

  border: 1px solid rgba(110, 196, 235, 0.28) !important;

  background: rgba(10, 30, 58, 0.48) !important;
}

/* content */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-content {
  position: relative !important;

  padding: 20px 28px 26px !important;

  background: linear-gradient(
    180deg,
    rgba(7, 22, 49, 0.42) 0%,
    rgba(3, 16, 40, 0.14) 100%
  ) !important;
}

/* panels */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff {
  position: relative !important;

  border-radius: 18px !important;

  border: 1px solid rgba(104, 186, 230, 0.22) !important;

  background: linear-gradient(
    145deg,
    rgba(9, 23, 48, 0.86) 0%,
    rgba(7, 21, 47, 0.8) 52%,
    rgba(17, 35, 57, 0.74) 100%
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(0, 0, 0, 0.14) !important;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-policy:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-files:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-conversation:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-handoff:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(125, 215, 245, 0.34) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 14px 34px rgba(0, 0, 0, 0.18) !important;
  }
}

/* policy */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy {
  padding: 12px 15px !important;

  margin-bottom: 13px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  h2 {
  color: #ffffff !important;

  font-size: 13px !important;

  font-weight: 700 !important;
}

/* files */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files {
  margin-bottom: 13px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  > div {
  min-height: 62px !important;

  padding: 11px 14px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-files
  .font-semibold {
  color: #ffffff !important;

  font-size: 15px !important;
}

/* download */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-download {
  min-height: 58px !important;

  border-radius: 17px !important;

  margin-bottom: 16px !important;

  background: linear-gradient(
    90deg,
    #7478ec 0%,
    #88a6ef 50%,
    #9cd6e2 100%
  ) !important;

  color: #ffffff !important;

  font-size: 17px !important;

  font-weight: 800 !important;

  border: 1px solid rgba(177, 234, 247, 0.56) !important;

  box-shadow:
    0 14px 32px rgba(82, 120, 214, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    filter 0.24s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-download:hover {
    transform: translateY(-1px) !important;

    filter: brightness(1.035) !important;

    box-shadow:
      0 18px 38px rgba(84, 126, 223, 0.27),
      inset 0 1px 0 rgba(255, 255, 255, 0.26) !important;
  }
}

/* two columns */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-interaction-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(340px, 0.88fr) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

/* section headers */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff {
  padding: 16px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  h2 {
  color: #ffffff !important;

  font-size: 15px !important;

  line-height: 1.2 !important;

  font-weight: 800 !important;

  margin-bottom: 10px !important;
}

/* messages */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl {
  border-radius: 12px !important;

  border: 1px solid rgba(95, 177, 223, 0.18) !important;

  background: linear-gradient(
    145deg,
    rgba(5, 18, 41, 0.78),
    rgba(8, 22, 48, 0.7)
  ) !important;

  padding: 10px 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl
  .text-sm {
  color: #f3f9ff !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  .rounded-xl
  .text-xs {
  color: rgba(214, 232, 248, 0.7) !important;

  font-size: 10px !important;
}

/* textareas */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  textarea {
  border-radius: 12px !important;

  border: 1px solid rgba(103, 189, 232, 0.2) !important;

  background: rgba(5, 18, 43, 0.7) !important;

  color: #ffffff !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;

  transition:
    border-color 0.24s ease,
    box-shadow 0.24s ease !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  textarea:focus,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  textarea:focus {
  outline: none !important;

  border-color: rgba(121, 215, 245, 0.44) !important;

  box-shadow:
    0 0 0 3px rgba(105, 188, 232, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* buttons */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-conversation
  form
  button,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  button {
  border-radius: 999px !important;

  border: 1px solid rgba(97, 184, 227, 0.28) !important;

  color: #ffffff !important;

  background: rgba(10, 31, 56, 0.88) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  transition:
    transform 0.24s ease,
    border-color 0.24s ease,
    background 0.24s ease !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-handoff
  button {
  min-height: 32px !important;

  padding: 5px 10px !important;

  font-size: 10px !important;
}

/* responsive */

@media (max-width: 1050px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-interaction-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-shell {
    width: calc(100vw - 16px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-content {
    padding: 14px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage
    .nautico-recipient-hero__top {
    padding: 18px 16px !important;
  }
}

/* reduced motion */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui body .nautico-recipient-stage::after {
    animation: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT CLEAN DESIGN V7 — FINAL

   Dedicated final scope.
   Earlier recipient experiments remain harmless underneath.
   ============================================================ */

/* ============================================================
   PAGE / FUTURISTIC OCEAN BACKGROUND
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v7 {
  position: relative !important;
  isolation: isolate !important;

  min-height: 100dvh !important;

  padding: 18px 20px 38px !important;

  color: #f7fbff !important;

  background:
    radial-gradient(
      900px 460px at 82% 8%,
      rgba(78, 190, 224, 0.18),
      transparent 64%
    ),
    radial-gradient(
      700px 500px at 5% 82%,
      rgba(83, 98, 210, 0.13),
      transparent 68%
    ),
    linear-gradient(135deg, #020b18 0%, #041326 45%, #081d32 100%) !important;

  overflow-x: hidden !important;
}

.nautico-recipient-v7::before {
  content: '';

  position: fixed;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 10% 10%,
      rgba(255, 255, 255, 0.12) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 38% 18%,
      rgba(110, 219, 236, 0.11) 0 1px,
      transparent 1.5px
    ),
    radial-gradient(
      circle at 70% 10%,
      rgba(255, 255, 255, 0.08) 0 1px,
      transparent 1.5px
    );

  background-size:
    260px 220px,
    310px 270px,
    360px 300px;

  opacity: 0.4;

  animation: nauticoV7Stars 24s linear infinite;
}

.nautico-recipient-v7::after {
  content: '';

  position: fixed;

  width: 640px;

  height: 320px;

  right: -160px;

  top: 90px;

  pointer-events: none;

  border-radius: 50%;

  background: rgba(74, 190, 220, 0.11);

  filter: blur(90px);

  animation: nauticoV7Aurora 12s ease-in-out infinite alternate;
}

@keyframes nauticoV7Stars {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-28px, 18px, 0);
  }
}

@keyframes nauticoV7Aurora {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-80px, 48px, 0) scale(1.12);
  }
}

/* ============================================================
   COMPLETE WIDTH
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-shell {
  position: relative !important;

  z-index: 2 !important;

  width: min(1040px, calc(100vw - 34px)) !important;

  max-width: 1040px !important;

  margin: 0 auto !important;
}

/* ============================================================
   LOGO
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-shell > .mb-20.flex {
  min-height: 58px !important;

  margin: 0 0 12px !important;

  padding: 0 4px !important;

  align-items: center !important;
}

.nautico-recipient-v7 .nautico-logo__image {
  width: 40px !important;

  height: 40px !important;
}

.nautico-recipient-v7 .nautico-logo__wordmark {
  color: #ffffff !important;

  font-size: 26px !important;

  font-weight: 850 !important;
}

/* ============================================================
   MAIN GLASS SHELL
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-shell-card {
  overflow: hidden !important;

  border: 1px solid rgba(116, 188, 221, 0.3) !important;

  border-radius: 26px !important;

  background: rgba(4, 16, 33, 0.88) !important;

  box-shadow:
    0 30px 80px rgba(0, 5, 18, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;

  backdrop-filter: blur(18px) saturate(118%) !important;
}

/* ============================================================
   HERO / DELIVERY OVERVIEW
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-hero__top {
  position: relative !important;

  min-height: 190px !important;

  padding: 28px 32px !important;

  border-bottom: 1px solid rgba(121, 188, 220, 0.18) !important;

  background:
    radial-gradient(
      600px 260px at 100% 0%,
      rgba(97, 196, 224, 0.14),
      transparent 70%
    ),
    linear-gradient(110deg, #061327 0%, #09192d 58%, #143149 100%) !important;
}

.nautico-recipient-v7 .nautico-recipient-hero__top::after {
  content: 'ENCRYPTED DELIVERY';

  position: absolute;

  right: 30px;

  top: 30px;

  padding: 7px 11px;

  border: 1px solid rgba(105, 218, 220, 0.26);

  border-radius: 999px;

  color: #77dedc;

  background: rgba(5, 43, 52, 0.55);

  font-size: 9px;

  font-weight: 750;

  letter-spacing: 0.14em;
}

.nautico-recipient-v7 .nautico-eyebrow {
  color: #68d9de !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  letter-spacing: 0.19em !important;
}

.nautico-recipient-v7 .nautico-recipient-hero__top .text-white\/80 {
  margin-top: 8px !important;

  color: #c9d6e1 !important;

  font-size: 13px !important;
}

.nautico-recipient-v7 .nautico-recipient-hero__top h1 {
  margin: 8px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(36px, 4vw, 52px) !important;

  font-weight: 850 !important;

  line-height: 0.98 !important;

  letter-spacing: -0.045em !important;
}

.nautico-recipient-v7 .nautico-recipient-hero__top > .flex {
  margin-top: 14px !important;

  gap: 7px !important;
}

.nautico-recipient-v7 .nautico-recipient-stat {
  min-height: 31px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(123, 180, 211, 0.27) !important;

  border-radius: 999px !important;

  color: #e3edf5 !important;

  background: rgba(12, 29, 48, 0.72) !important;

  font-size: 10px !important;
}

/* ============================================================
   CONTENT
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-content {
  padding: 20px 24px 24px !important;

  background: linear-gradient(
    180deg,
    rgba(5, 18, 35, 0.88),
    rgba(3, 13, 27, 0.94)
  ) !important;
}

/* ============================================================
   POLICY = SMALL INFO BAR
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-policy {
  display: flex !important;

  align-items: center !important;

  min-height: 48px !important;

  margin: 0 !important;

  padding: 9px 13px !important;

  border: 1px solid rgba(89, 190, 205, 0.2) !important;

  border-radius: 13px !important;

  background: linear-gradient(
    90deg,
    rgba(10, 36, 51, 0.86),
    rgba(9, 28, 46, 0.76)
  ) !important;

  box-shadow: none !important;
}

.nautico-recipient-v7 .nautico-recipient-policy::before {
  content: '✓';

  display: flex;

  align-items: center;

  justify-content: center;

  width: 29px;

  height: 29px;

  flex: 0 0 29px;

  margin-right: 10px;

  border: 1px solid rgba(94, 213, 214, 0.5);

  border-radius: 50%;

  color: #69dcda;

  background: rgba(18, 101, 106, 0.25);

  font-size: 12px;
}

.nautico-recipient-v7 .nautico-recipient-policy h2 {
  color: #ffffff !important;

  font-size: 12px !important;
}

.nautico-recipient-v7 .nautico-recipient-policy .rounded-full {
  min-height: 25px !important;

  padding: 3px 8px !important;

  color: #9ae6e3 !important;

  background: #0c3040 !important;

  border: 1px solid rgba(92, 204, 211, 0.22) !important;

  font-size: 9px !important;
}

/* ============================================================
   FILE = PACKAGE CARD
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-files {
  position: relative !important;

  margin-top: 11px !important;

  overflow: hidden !important;

  border: 1px solid rgba(105, 164, 202, 0.22) !important;

  border-radius: 15px !important;

  background: #091c30 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.nautico-recipient-v7 .nautico-recipient-files > div {
  min-height: 63px !important;

  padding: 11px 14px 11px 54px !important;
}

.nautico-recipient-v7 .nautico-recipient-files::before {
  content: '↓';

  position: absolute;

  left: 14px;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  border: 1px solid rgba(102, 185, 220, 0.3);

  border-radius: 9px;

  background: #0d2941;

  color: #7ed8e5;

  font-size: 16px;
}

.nautico-recipient-v7 .nautico-recipient-files .font-semibold {
  color: #ffffff !important;

  font-size: 14px !important;
}

.nautico-recipient-v7 .nautico-recipient-files .text-xs,
.nautico-recipient-v7 .nautico-recipient-files .text-sm {
  color: #91a8ba !important;
}

/* ============================================================
   PRIMARY ACTION
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-download {
  min-height: 54px !important;

  margin-top: 11px !important;

  margin-bottom: 15px !important;

  border: 1px solid rgba(132, 212, 238, 0.62) !important;

  border-radius: 14px !important;

  background: linear-gradient(135deg, #5d6ddc, #578ce7 50%, #72cbd6) !important;

  color: #ffffff !important;

  font-size: 14px !important;

  font-weight: 800 !important;

  box-shadow: 0 12px 28px rgba(46, 94, 176, 0.2) !important;

  transition:
    transform 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .nautico-recipient-v7 .nautico-recipient-download:hover {
    transform: translateY(-2px) !important;

    filter: brightness(1.05);

    box-shadow: 0 17px 35px rgba(55, 113, 199, 0.28) !important;
  }
}

/* ============================================================
   INTERACTIONS
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-interaction-grid {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 12px !important;

  align-items: stretch !important;
}

.nautico-recipient-v7 .nautico-recipient-conversation,
.nautico-recipient-v7 .nautico-recipient-handoff {
  position: relative !important;

  min-height: 230px !important;

  padding: 15px !important;

  border: 1px solid rgba(102, 164, 203, 0.22) !important;

  border-radius: 16px !important;

  background: linear-gradient(
    155deg,
    rgba(10, 28, 47, 0.94),
    rgba(5, 19, 34, 0.94)
  ) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;

  transition:
    border-color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .nautico-recipient-v7 .nautico-recipient-conversation:hover,
  .nautico-recipient-v7 .nautico-recipient-handoff:hover {
    transform: translateY(-1px);

    border-color: rgba(92, 198, 216, 0.38) !important;

    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16) !important;
  }
}

.nautico-recipient-v7 .nautico-recipient-conversation::before,
.nautico-recipient-v7 .nautico-recipient-handoff::before {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 26px;

  height: 26px;

  margin-bottom: 8px;

  border: 1px solid rgba(93, 198, 214, 0.3);

  border-radius: 8px;

  color: #73dbe1;

  background: #0c2a3f;

  font-size: 12px;
}

.nautico-recipient-v7 .nautico-recipient-conversation::before {
  content: '✦';
}

.nautico-recipient-v7 .nautico-recipient-handoff::before {
  content: '✓';
}

.nautico-recipient-v7 .nautico-recipient-conversation h2,
.nautico-recipient-v7 .nautico-recipient-handoff h2 {
  margin: 0 0 10px !important;

  color: #ffffff !important;

  font-size: 13px !important;

  font-weight: 800 !important;
}

/* ============================================================
   MESSAGE CARDS
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-conversation .rounded-xl {
  padding: 8px 10px !important;

  border: 1px solid rgba(93, 151, 188, 0.17) !important;

  border-radius: 10px !important;

  background: rgba(5, 19, 35, 0.74) !important;
}

.nautico-recipient-v7 .nautico-recipient-conversation .rounded-xl .text-sm {
  color: #f5f9fc !important;

  font-size: 11px !important;
}

.nautico-recipient-v7 .nautico-recipient-conversation .rounded-xl .text-xs {
  color: #8fa6b8 !important;

  font-size: 8px !important;
}

/* ============================================================
   INPUTS
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-conversation textarea,
.nautico-recipient-v7 .nautico-recipient-handoff textarea {
  border: 1px solid rgba(100, 160, 199, 0.22) !important;

  border-radius: 11px !important;

  background: #07192b !important;

  color: #ffffff !important;

  box-shadow: none !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

.nautico-recipient-v7 .nautico-recipient-conversation textarea:focus,
.nautico-recipient-v7 .nautico-recipient-handoff textarea:focus {
  outline: none !important;

  border-color: rgba(86, 205, 215, 0.58) !important;

  box-shadow: 0 0 0 3px rgba(77, 188, 208, 0.09) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.nautico-recipient-v7 .nautico-recipient-conversation button,
.nautico-recipient-v7 .nautico-recipient-handoff button {
  border: 1px solid rgba(92, 175, 210, 0.27) !important;

  border-radius: 10px !important;

  background: #0c263b !important;

  color: #ffffff !important;

  box-shadow: none !important;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .nautico-recipient-v7 .nautico-recipient-conversation button:hover,
  .nautico-recipient-v7 .nautico-recipient-handoff button:hover {
    transform: translateY(-1px);

    background: #12334d !important;

    border-color: rgba(95, 207, 218, 0.5) !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  .nautico-recipient-v7 .nautico-recipient-interaction-grid {
    grid-template-columns: 1fr !important;
  }

  .nautico-recipient-v7 .nautico-recipient-conversation,
  .nautico-recipient-v7 .nautico-recipient-handoff {
    min-height: 0 !important;
  }
}

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v7 {
    padding: 8px !important;
  }

  .nautico-recipient-v7 .nautico-recipient-shell {
    width: calc(100vw - 16px) !important;
  }

  .nautico-recipient-v7 .nautico-recipient-hero__top {
    padding: 20px 17px !important;
  }

  .nautico-recipient-v7 .nautico-recipient-content {
    padding: 13px !important;
  }

  .nautico-recipient-v7 .nautico-recipient-hero__top::after {
    display: none;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .nautico-recipient-v7::before,
  .nautico-recipient-v7::after {
    animation: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT STRUCTURAL V8B — FINAL
   ============================================================ */

/* ============================================================
   BACKGROUND
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b {
  position: relative !important;

  isolation: isolate !important;

  min-height: 100dvh !important;

  padding: 14px 18px 34px !important;

  overflow-x: hidden !important;

  background:
    radial-gradient(
      900px 520px at 7% 0%,
      rgba(83, 111, 224, 0.18),
      transparent 64%
    ),
    radial-gradient(
      800px 500px at 94% 4%,
      rgba(74, 201, 222, 0.16),
      transparent 62%
    ),
    radial-gradient(
      760px 420px at 50% 108%,
      rgba(37, 98, 172, 0.12),
      transparent 66%
    ),
    linear-gradient(145deg, #020917, #041326 52%, #071b2d) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::before {
  content: '' !important;

  position: fixed !important;

  inset: 0 !important;

  pointer-events: none !important;

  background-image:
    radial-gradient(circle, rgba(121, 220, 235, 0.24) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 0 1px, transparent 1.4px) !important;

  background-size:
    260px 230px,
    370px 310px !important;

  background-position:
    0 0,
    120px 70px !important;

  opacity: 0.38 !important;

  animation: nauticoV8BStars 30s linear infinite !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::after {
  content: '' !important;

  position: fixed !important;

  pointer-events: none !important;

  width: 760px !important;

  height: 390px !important;

  right: -210px !important;

  top: 60px !important;

  border-radius: 50% !important;

  background: rgba(75, 196, 221, 0.1) !important;

  filter: blur(105px) !important;

  animation: nauticoV8BAurora 15s ease-in-out infinite alternate !important;
}

@keyframes nauticoV8BStars {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-36px, 20px, 0);
  }
}

@keyframes nauticoV8BAurora {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-80px, 35px, 0) scale(1.12);
  }
}

/* ============================================================
   SHELL
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell {
  position: relative !important;

  z-index: 2 !important;

  width: min(1080px, calc(100vw - 30px)) !important;

  max-width: 1080px !important;

  margin: 0 auto !important;
}

/* logo */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex {
  min-height: 54px !important;

  margin: 0 0 9px !important;

  padding: 0 3px !important;

  justify-content: flex-start !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: none !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__image {
  width: 40px !important;

  height: 40px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__wordmark {
  color: #ffffff !important;

  font-size: 26px !important;
}

/* ============================================================
   OUTER GLASS CARD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card {
  height: auto !important;

  max-height: none !important;

  overflow: hidden !important;

  border: 1px solid rgba(108, 174, 210, 0.29) !important;

  border-radius: 27px !important;

  background: rgba(3, 14, 30, 0.91) !important;

  backdrop-filter: blur(18px) saturate(115%) !important;

  box-shadow:
    0 28px 75px rgba(0, 5, 18, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* ============================================================
   HERO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top {
  padding: 21px 27px 19px !important;

  background:
    radial-gradient(
      530px 230px at 100% 0%,
      rgba(91, 194, 224, 0.14),
      transparent 70%
    ),
    linear-gradient(112deg, #061326, #08182d 60%, #133047) !important;

  border-bottom: 1px solid rgba(126, 193, 223, 0.16) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::after {
  content: 'SECURE DELIVERY' !important;

  position: absolute !important;

  right: 25px !important;

  top: 22px !important;

  padding: 6px 10px !important;

  border: 1px solid rgba(91, 208, 215, 0.25) !important;

  border-radius: 999px !important;

  background: rgba(8, 41, 53, 0.5) !important;

  color: #81dedc !important;

  font-size: 8px !important;

  font-weight: 800 !important;

  letter-spacing: 0.12em !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-eyebrow {
  color: #71dce2 !important;

  font-size: 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin-top: 5px !important;

  color: #b9c9d6 !important;

  font-size: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  h1 {
  margin: 6px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(32px, 3.8vw, 46px) !important;

  line-height: 1 !important;

  letter-spacing: -0.04em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 11px !important;

  gap: 6px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-stat {
  min-height: 28px !important;

  padding: 4px 8px !important;

  border: 1px solid rgba(112, 177, 207, 0.24) !important;

  border-radius: 999px !important;

  background: rgba(9, 28, 47, 0.72) !important;

  color: #dae7f0 !important;

  font-size: 9px !important;
}

/* ============================================================
   CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  padding: 16px !important;

  background: linear-gradient(
    180deg,
    rgba(4, 16, 31, 0.98),
    rgba(3, 13, 26, 0.99)
  ) !important;

  overflow: visible !important;
}

/* ============================================================
   NEW TOP GRID
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.28fr)
    minmax(300px, 0.72fr) !important;

  gap: 12px !important;

  align-items: start !important;
}

/* package/security cards */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security {
  min-width: 0 !important;

  padding: 14px !important;

  border: 1px solid rgba(98, 161, 199, 0.2) !important;

  border-radius: 16px !important;

  background: linear-gradient(150deg, #091c30, #051424) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.024),
    0 9px 25px rgba(0, 0, 0, 0.13) !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security:hover {
    transform: translateY(-1px);

    border-color: rgba(87, 203, 216, 0.34) !important;

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.03),
      0 13px 30px rgba(0, 0, 0, 0.18) !important;
  }
}

/* headings */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  display: flex !important;

  align-items: center !important;

  gap: 9px !important;

  margin-bottom: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-icon {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  flex: 0 0 34px !important;

  border: 1px solid rgba(89, 202, 216, 0.3) !important;

  border-radius: 10px !important;

  background: linear-gradient(145deg, #0c3046, #102640) !important;

  color: #79dfe3 !important;

  font-size: 14px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-kicker {
  color: #67d4db !important;

  font-size: 7px !important;

  font-weight: 800 !important;

  letter-spacing: 0.16em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  margin: 1px 0 0 !important;

  color: #ffffff !important;

  font-size: 13px !important;

  font-weight: 800 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  margin: 2px 0 0 !important;

  color: #8198aa !important;

  font-size: 8px !important;
}

/* ============================================================
   PACKAGE CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  margin: 0 !important;

  border: 1px solid rgba(100, 158, 194, 0.18) !important;

  border-radius: 11px !important;

  background: #061728 !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files::before {
  display: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 49px !important;

  padding: 8px 10px !important;

  background: transparent !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .font-semibold {
  color: #f7fbff !important;

  font-size: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-xs,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-sm {
  color: #839aab !important;

  font-size: 8px !important;
}

/* CTA */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  min-height: 45px !important;

  width: 100% !important;

  margin: 9px 0 0 !important;

  padding: 7px 12px !important;

  border: 1px solid rgba(136, 217, 239, 0.55) !important;

  border-radius: 11px !important;

  background: linear-gradient(135deg, #616fdf, #5789e6 50%, #70cbd7) !important;

  color: #ffffff !important;

  font-size: 12px !important;

  font-weight: 800 !important;

  box-shadow: 0 10px 23px rgba(47, 95, 178, 0.18) !important;
}

/* ============================================================
   SECURITY CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security
  .nautico-recipient-policy {
  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-policy::before {
  display: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-policy
  > .flex {
  gap: 4px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-policy
  h2 {
  width: 100% !important;

  margin: 0 0 3px !important;

  color: #cad8e2 !important;

  font-size: 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-policy
  .rounded-full {
  min-height: 22px !important;

  padding: 2px 6px !important;

  border: 1px solid rgba(81, 182, 199, 0.18) !important;

  border-radius: 7px !important;

  background: #09283a !important;

  color: #9adfe1 !important;

  font-size: 7px !important;

  box-shadow: none !important;
}

/* ============================================================
   BOTTOM ACTION CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(0, 0.92fr) !important;

  gap: 12px !important;

  margin-top: 12px !important;

  align-items: start !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  min-height: 0 !important;

  height: auto !important;

  margin: 0 !important;

  padding: 13px !important;

  overflow: visible !important;

  border: 1px solid rgba(99, 161, 198, 0.2) !important;

  border-radius: 15px !important;

  background: linear-gradient(150deg, #091c30, #051424) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.024) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::before {
  width: 27px !important;

  height: 27px !important;

  margin-bottom: 7px !important;

  border-radius: 8px !important;

  background: #0b2a3e !important;

  border: 1px solid rgba(89, 199, 213, 0.27) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  h2 {
  margin: 0 0 8px !important;

  color: #ffffff !important;

  font-size: 12px !important;
}

/* notes */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl {
  padding: 7px 9px !important;

  border: 1px solid rgba(95, 151, 187, 0.16) !important;

  border-radius: 8px !important;

  background: #061628 !important;
}

/* forms */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea {
  min-height: 50px !important;

  height: auto !important;

  padding: 7px 8px !important;

  border: 1px solid rgba(100, 159, 196, 0.2) !important;

  border-radius: 9px !important;

  background: #061628 !important;

  color: #ffffff !important;

  font-size: 9px !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  button,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  button {
  min-height: 29px !important;

  padding: 4px 8px !important;

  border: 1px solid rgba(89, 181, 206, 0.24) !important;

  border-radius: 8px !important;

  background: #0b2539 !important;

  color: #ffffff !important;

  font-size: 8px !important;

  box-shadow: none !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 920px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 14px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 17px 15px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    display: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::after {
    animation: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT CLARITY V9B — FINAL
   ============================================================ */

/* ============================================================
   MAIN PACKAGE / SECURITY ROW
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.22fr)
    minmax(320px, 0.78fr) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

/* ============================================================
   BOTH PRIMARY CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security {
  border: 1px solid rgba(104, 178, 215, 0.28) !important;

  border-radius: 18px !important;

  background: linear-gradient(
    150deg,
    rgba(8, 27, 48, 0.97),
    rgba(5, 18, 34, 0.97)
  ) !important;

  box-shadow:
    0 13px 32px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* ============================================================
   HEADER SEPARATION
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  margin-bottom: 12px !important;

  padding-bottom: 11px !important;

  border-bottom: 1px solid rgba(107, 170, 202, 0.15) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  font-size: 15px !important;

  line-height: 1.15 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  font-size: 10px !important;

  line-height: 1.35 !important;

  color: #8da3b5 !important;
}

/* ============================================================
   SECURITY SUMMARY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-summary {
  display: grid !important;

  gap: 10px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  padding: 11px !important;

  border: 1px solid rgba(81, 207, 214, 0.23) !important;

  border-radius: 13px !important;

  background: linear-gradient(
    135deg,
    rgba(7, 44, 57, 0.78),
    rgba(6, 25, 42, 0.8)
  ) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-icon {
  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 34px !important;

  height: 34px !important;

  flex: 0 0 34px !important;

  border: 1px solid rgba(104, 224, 222, 0.45) !important;

  border-radius: 50% !important;

  background: rgba(38, 133, 132, 0.18) !important;

  color: #78e1df !important;

  font-size: 15px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  strong {
  display: block !important;

  color: #ffffff !important;

  font-size: 12px !important;

  font-weight: 800 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  p {
  margin: 2px 0 0 !important;

  color: #8da5b6 !important;

  font-size: 9px !important;

  line-height: 1.35 !important;
}

/* ============================================================
   SECURITY PILLS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 5px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills
  > span {
  display: inline-flex !important;

  align-items: center !important;

  min-height: 25px !important;

  padding: 3px 7px !important;

  border: 1px solid rgba(91, 178, 205, 0.2) !important;

  border-radius: 999px !important;

  background: rgba(9, 34, 52, 0.82) !important;

  color: #b4d6df !important;

  font-size: 8px !important;

  font-weight: 700 !important;
}

/* ============================================================
   ADVANCED DRAWER
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details {
  margin-top: 11px !important;

  overflow: hidden !important;

  border: 1px solid rgba(101, 162, 198, 0.2) !important;

  border-radius: 12px !important;

  background: rgba(5, 18, 34, 0.76) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary {
  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 10px !important;

  min-height: 43px !important;

  padding: 8px 10px !important;

  cursor: pointer !important;

  list-style: none !important;

  -webkit-user-select: none !important;

     -moz-user-select: none !important;

          user-select: none !important;

  transition: background 0.2s ease !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary::-webkit-details-marker {
  display: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary:hover {
  background: rgba(16, 47, 69, 0.67) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-title {
  color: #ffffff !important;

  font-size: 10px !important;

  font-weight: 750 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-action {
  color: #71dae0 !important;

  font-size: 8px !important;

  font-weight: 700 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details[open]
  > summary {
  border-bottom: 1px solid rgba(101, 162, 198, 0.14) !important;
}

/* ============================================================
   ADVANCED BODY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-body {
  max-height: min(500px, 55vh) !important;

  padding: 10px !important;

  overflow-y: auto !important;

  scrollbar-width: thin;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-body
  .nautico-recipient-policy {
  margin: 0 !important;

  padding: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

/* ============================================================
   PACKAGE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  margin: 0 !important;

  border: 1px solid rgba(100, 165, 202, 0.22) !important;

  border-radius: 13px !important;

  background: linear-gradient(
    145deg,
    rgba(5, 21, 39, 0.98),
    rgba(7, 25, 44, 0.92)
  ) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 57px !important;

  padding: 10px 12px !important;
}

/* ============================================================
   DOWNLOAD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  min-height: 49px !important;

  margin-top: 10px !important;

  border-radius: 13px !important;

  font-size: 13px !important;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package
    .nautico-recipient-download:hover {
    transform: translateY(-1px) !important;

    filter: brightness(1.04) !important;

    box-shadow: 0 15px 31px rgba(48, 105, 188, 0.25) !important;
  }
}

/* ============================================================
   BOTTOM ROW
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  gap: 14px !important;

  margin-top: 14px !important;
}

/* ============================================================
   FUTURISTIC PANEL EDGE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package::after,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security::after {
  content: '';

  position: absolute;

  left: 18px;

  right: 18px;

  top: -1px;

  height: 1px;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(104, 219, 232, 0.42),
    transparent
  );
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 920px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-security-body {
    max-height: none !important;

    overflow: visible !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui body .nautico-recipient-v8b * {
    transition-duration: 0s !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT FUTURISTIC V10 — FINAL

   V9B structure preserved.
   This layer:
   - removes wasted hero height
   - adds Nautico futuristic depth
   - improves visual hierarchy
   - improves laptop/tablet/mobile responsiveness
   ============================================================ */

/* ============================================================
   1. PAGE BACKGROUND
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b {
  position: relative !important;
  isolation: isolate !important;

  min-height: 100dvh !important;

  padding: 10px 18px 28px !important;

  overflow-x: hidden !important;

  background:
    radial-gradient(
      800px 500px at 8% -5%,
      rgba(77, 95, 205, 0.22),
      transparent 68%
    ),
    radial-gradient(
      820px 520px at 100% 5%,
      rgba(60, 190, 215, 0.18),
      transparent 66%
    ),
    radial-gradient(
      650px 380px at 52% 100%,
      rgba(34, 91, 160, 0.13),
      transparent 70%
    ),
    linear-gradient(145deg, #020817 0%, #041224 48%, #071a2c 100%) !important;
}

/* subtle star field */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::before {
  content: '' !important;

  position: fixed !important;
  inset: 0 !important;

  z-index: 0 !important;
  pointer-events: none !important;

  background-image:
    radial-gradient(circle, rgba(120, 220, 235, 0.22) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.11) 0 1px, transparent 1.3px) !important;

  background-size:
    270px 240px,
    410px 350px !important;

  background-position:
    20px 40px,
    130px 90px !important;

  opacity: 0.34 !important;

  animation: nauticoRecipientV10Stars 36s linear infinite !important;
}

/* moving aurora */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::after {
  content: '' !important;

  position: fixed !important;

  width: 820px !important;

  height: 420px !important;

  right: -250px !important;

  top: 30px !important;

  z-index: 0 !important;

  pointer-events: none !important;

  border-radius: 50% !important;

  background: rgba(71, 195, 219, 0.11) !important;

  filter: blur(110px) !important;

  animation: nauticoRecipientV10Aurora 16s ease-in-out infinite alternate !important;
}

@keyframes nauticoRecipientV10Stars {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-40px, 24px, 0);
  }
}

@keyframes nauticoRecipientV10Aurora {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(-90px, 40px, 0) scale(1.14);
  }
}

/* ============================================================
   2. PAGE WIDTH
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell {
  position: relative !important;

  z-index: 2 !important;

  width: min(1180px, calc(100vw - 30px)) !important;

  max-width: 1180px !important;

  margin: 0 auto !important;
}

/* ============================================================
   3. LOGO BAR
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex {
  min-height: 48px !important;

  height: auto !important;

  margin: 0 0 7px !important;

  padding: 0 3px !important;

  overflow: visible !important;

  justify-content: flex-start !important;

  align-items: center !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: none !important;
}

/* homepage-like logo */

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__image {
  width: 38px !important;

  height: 38px !important;

  max-width: 38px !important;

  max-height: 38px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__wordmark {
  color: #ffffff !important;

  font-size: 25px !important;

  line-height: 1 !important;

  font-weight: 850 !important;
}

/* ============================================================
   4. COMPLETE GLASS SHELL
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card {
  position: relative !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: hidden !important;

  border: 1px solid rgba(106, 179, 215, 0.34) !important;

  border-radius: 26px !important;

  background: linear-gradient(
    150deg,
    rgba(3, 14, 31, 0.93),
    rgba(5, 19, 39, 0.91)
  ) !important;

  backdrop-filter: blur(20px) saturate(120%) !important;

  box-shadow:
    0 28px 74px rgba(0, 4, 16, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(122, 209, 236, 0.025) !important;
}

/* glass reflection */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::before {
  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  top: 0 !important;

  width: 42% !important;

  height: 100% !important;

  z-index: 0 !important;

  pointer-events: none !important;

  background: linear-gradient(
    112deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.025) 35%,
    transparent 62%
  ) !important;

  opacity: 0.55 !important;
}

/* animated upper edge */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::after {
  content: '' !important;

  position: absolute !important;

  left: 7% !important;

  right: 7% !important;

  top: 0 !important;

  height: 1px !important;

  z-index: 3 !important;

  pointer-events: none !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(111, 222, 235, 0.52),
    rgba(121, 151, 255, 0.34),
    transparent
  ) !important;

  opacity: 0.75 !important;
}

/* ============================================================
   5. HERO — REMOVE THE HUGE EMPTY AREA
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top {
  position: relative !important;

  min-height: 0 !important;

  height: auto !important;

  max-height: none !important;

  padding: 17px 24px 16px !important;

  overflow: visible !important;

  border-bottom: 1px solid rgba(124, 195, 223, 0.17) !important;

  background:
    radial-gradient(
      470px 180px at 100% 0%,
      rgba(84, 192, 220, 0.16),
      transparent 72%
    ),
    linear-gradient(112deg, #051326 0%, #07172b 63%, #102b43 100%) !important;
}

/* subtle scan line */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::before {
  content: '' !important;

  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  height: 40% !important;

  pointer-events: none !important;

  opacity: 0.13 !important;

  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 5px,
    rgba(125, 215, 232, 0.12) 6px
  ) !important;
}

/* security status badge */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::after {
  content: 'SECURE DELIVERY' !important;

  position: absolute !important;

  right: 22px !important;

  top: 18px !important;

  padding: 6px 10px !important;

  border: 1px solid rgba(93, 212, 217, 0.28) !important;

  border-radius: 999px !important;

  background: rgba(7, 40, 53, 0.56) !important;

  color: #83e1df !important;

  font-size: 8px !important;

  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.13em !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-eyebrow {
  margin: 0 !important;

  color: #70dce2 !important;

  font-size: 8px !important;

  line-height: 1.1 !important;

  letter-spacing: 0.19em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin-top: 5px !important;

  color: #aebfcd !important;

  font-size: 10px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  h1 {
  margin: 5px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(29px, 3.3vw, 42px) !important;

  line-height: 0.98 !important;

  letter-spacing: -0.045em !important;

  text-shadow: 0 5px 22px rgba(0, 0, 0, 0.26) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 9px !important;

  gap: 5px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-stat {
  min-height: 25px !important;

  padding: 3px 7px !important;

  border: 1px solid rgba(111, 178, 208, 0.24) !important;

  border-radius: 999px !important;

  background: rgba(8, 27, 45, 0.7) !important;

  color: #d7e4ed !important;

  font-size: 8px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* ============================================================
   6. CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  position: relative !important;

  z-index: 1 !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  padding: 13px !important;

  background: linear-gradient(
    180deg,
    rgba(3, 14, 29, 0.97),
    rgba(2, 11, 23, 0.99)
  ) !important;
}

/* ============================================================
   7. TOP GRID
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(330px, 0.82fr) !important;

  gap: 11px !important;

  align-items: stretch !important;
}

/* ============================================================
   8. FUTURISTIC CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  position: relative !important;

  overflow: hidden !important;

  min-width: 0 !important;

  border: 1px solid rgba(105, 172, 207, 0.27) !important;

  border-radius: 15px !important;

  background: linear-gradient(
    150deg,
    rgba(8, 26, 46, 0.95),
    rgba(4, 17, 33, 0.97)
  ) !important;

  box-shadow:
    0 10px 27px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  transition:
    transform 0.23s ease,
    border-color 0.23s ease,
    box-shadow 0.23s ease !important;
}

/* bright corner */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::after,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::after {
  content: '' !important;

  position: absolute !important;

  width: 72px !important;

  height: 72px !important;

  right: -35px !important;

  top: -35px !important;

  pointer-events: none !important;

  border-radius: 50% !important;

  background: rgba(80, 207, 221, 0.1) !important;

  filter: blur(18px) !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff:hover {
    transform: translateY(-2px) !important;

    border-color: rgba(91, 208, 218, 0.42) !important;

    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.19),
      inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  }
}

/* ============================================================
   9. PACKAGE + SECURITY PADDING
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security {
  padding: 12px !important;
}

/* ============================================================
   10. PANEL HEADER
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  margin: 0 0 9px !important;

  padding: 0 0 8px !important;

  border-bottom: 1px solid rgba(102, 165, 198, 0.13) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-icon {
  width: 31px !important;

  height: 31px !important;

  flex: 0 0 31px !important;

  border: 1px solid rgba(91, 203, 216, 0.34) !important;

  border-radius: 9px !important;

  background: linear-gradient(
    145deg,
    rgba(18, 73, 92, 0.74),
    rgba(11, 35, 57, 0.94)
  ) !important;

  color: #7fe2e5 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-kicker {
  color: #6ed9df !important;

  font-size: 7px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: 0.17em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  margin: 2px 0 0 !important;

  color: #ffffff !important;

  font-size: 13px !important;

  line-height: 1.08 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  margin: 2px 0 0 !important;

  color: #849bad !important;

  font-size: 8px !important;

  line-height: 1.25 !important;
}

/* ============================================================
   11. FILE CARD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  margin: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(102, 164, 199, 0.21) !important;

  border-radius: 11px !important;

  background: linear-gradient(
    145deg,
    rgba(4, 18, 35, 0.94),
    rgba(7, 25, 44, 0.88)
  ) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 47px !important;

  padding: 7px 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .font-semibold {
  color: #ffffff !important;

  font-size: 10px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-xs,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-sm {
  color: #8398a9 !important;

  font-size: 7px !important;
}

/* ============================================================
   12. DOWNLOAD BUTTON
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  width: 100% !important;

  min-height: 41px !important;

  margin: 8px 0 0 !important;

  padding: 6px 11px !important;

  border: 1px solid rgba(141, 220, 239, 0.6) !important;

  border-radius: 11px !important;

  background: linear-gradient(
    135deg,
    #5968db 0%,
    #5287e3 50%,
    #70c8d5 100%
  ) !important;

  color: #ffffff !important;

  font-size: 11px !important;

  font-weight: 800 !important;

  box-shadow:
    0 10px 24px rgba(45, 95, 178, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package
    .nautico-recipient-download:hover {
    transform: translateY(-1px) !important;

    filter: brightness(1.05) !important;

    box-shadow:
      0 14px 29px rgba(46, 106, 191, 0.27),
      0 0 18px rgba(83, 203, 219, 0.08) !important;
  }
}

/* ============================================================
   13. SECURITY SUMMARY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-summary {
  display: grid !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state {
  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  min-height: 50px !important;

  padding: 8px 9px !important;

  border: 1px solid rgba(83, 203, 211, 0.25) !important;

  border-radius: 11px !important;

  background: linear-gradient(
    135deg,
    rgba(7, 43, 55, 0.72),
    rgba(5, 23, 40, 0.82)
  ) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-icon {
  width: 29px !important;

  height: 29px !important;

  flex: 0 0 29px !important;

  border: 1px solid rgba(102, 222, 221, 0.43) !important;

  border-radius: 50% !important;

  color: #78e3df !important;

  background: rgba(30, 126, 126, 0.17) !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  strong {
  display: block !important;

  color: #ffffff !important;

  font-size: 10px !important;

  line-height: 1.15 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  p {
  margin: 2px 0 0 !important;

  color: #879eaf !important;

  font-size: 7px !important;

  line-height: 1.25 !important;
}

/* pills */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 4px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills
  > span {
  min-height: 21px !important;

  padding: 2px 6px !important;

  border: 1px solid rgba(87, 177, 204, 0.18) !important;

  border-radius: 999px !important;

  background: rgba(8, 32, 50, 0.8) !important;

  color: #add2db !important;

  font-size: 6px !important;

  line-height: 1 !important;
}

/* advanced controls */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details {
  margin-top: 7px !important;

  border: 1px solid rgba(99, 160, 197, 0.19) !important;

  border-radius: 10px !important;

  background: rgba(4, 17, 32, 0.74) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary {
  min-height: 34px !important;

  padding: 6px 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-title {
  color: #ffffff !important;

  font-size: 8px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-action {
  color: #74dbe0 !important;

  font-size: 6px !important;
}

/* ============================================================
   14. BOTTOM ACTION ROW
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr) !important;

  gap: 11px !important;

  margin-top: 11px !important;

  align-items: start !important;
}

/* cards */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 11px !important;

  overflow: visible !important;
}

/* icons */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::before {
  width: 24px !important;

  height: 24px !important;

  margin-bottom: 6px !important;

  border: 1px solid rgba(88, 199, 212, 0.29) !important;

  border-radius: 7px !important;

  background: linear-gradient(
    145deg,
    rgba(15, 66, 82, 0.75),
    rgba(9, 32, 51, 0.93)
  ) !important;

  color: #74dce2 !important;

  font-size: 10px !important;
}

/* titles */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  h2 {
  margin: 0 0 6px !important;

  color: #ffffff !important;

  font-size: 10px !important;

  line-height: 1.15 !important;
}

/* message bubbles */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl {
  margin-top: 3px !important;

  padding: 6px 7px !important;

  border: 1px solid rgba(95, 150, 187, 0.16) !important;

  border-radius: 8px !important;

  background: rgba(3, 16, 31, 0.76) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-sm {
  color: #f3f8fc !important;

  font-size: 8px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-xs {
  margin-top: 1px !important;

  color: #7e96a8 !important;

  font-size: 6px !important;
}

/* inputs */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea {
  min-height: 42px !important;

  height: 42px !important;

  padding: 6px 7px !important;

  border: 1px solid rgba(99, 159, 196, 0.2) !important;

  border-radius: 8px !important;

  background: rgba(3, 15, 29, 0.82) !important;

  color: #ffffff !important;

  font-size: 8px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea:focus,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea:focus {
  outline: none !important;

  border-color: rgba(91, 205, 216, 0.5) !important;

  box-shadow: 0 0 0 3px rgba(80, 188, 207, 0.08) !important;
}

/* buttons */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  button,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  button {
  min-height: 25px !important;

  padding: 3px 6px !important;

  border: 1px solid rgba(87, 181, 207, 0.23) !important;

  border-radius: 7px !important;

  background: rgba(10, 35, 54, 0.9) !important;

  color: #ffffff !important;

  font-size: 7px !important;

  box-shadow: none !important;
}

/* ============================================================
   15. LAPTOP FIT — 1366x768 / similar
   ============================================================ */

@media (min-width: 1000px) and (max-height: 820px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding-top: 5px !important;

    padding-bottom: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    min-height: 41px !important;

    margin-bottom: 4px !important;
  }

  html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__image {
    width: 34px !important;

    height: 34px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-logo__wordmark {
    font-size: 22px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 11px 20px 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: 28px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    gap: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    margin-top: 8px !important;
  }
}

/* ============================================================
   16. TABLET LANDSCAPE / SMALL LAPTOP
   ============================================================ */

@media (max-width: 1050px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main {
    grid-template-columns:
      minmax(0, 1.08fr)
      minmax(280px, 0.92fr) !important;
  }
}

/* ============================================================
   17. TABLET PORTRAIT
   ============================================================ */

@media (max-width: 860px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: min(100%, calc(100vw - 18px)) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-security-body {
    max-height: none !important;

    overflow: visible !important;
  }
}

/* ============================================================
   18. MOBILE
   ============================================================ */

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 6px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 12px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card {
    border-radius: 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 14px 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    display: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: clamp(27px, 10vw, 36px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 10px !important;

    border-radius: 13px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-section-head
    p {
    font-size: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-download {
    min-height: 44px !important;

    font-size: 11px !important;
  }
}

/* ============================================================
   19. VERY SMALL MOBILE
   320–374px
   ============================================================ */

@media (max-width: 374px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 12px 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-stat {
    font-size: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-pills
    > span {
    font-size: 6px !important;
  }
}

/* ============================================================
   20. LARGE DESKTOP / 2K / ULTRAWIDE
   ============================================================ */

@media (min-width: 1600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    max-width: 1240px !important;
  }
}

/* ============================================================
   21. NO FORCED DESKTOP CLIPPING
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b,
html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-shell,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  height: auto !important;

  max-height: none !important;
}

/* ============================================================
   22. REDUCED MOTION / ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::after {
    animation: none !important;
  }

  html.nautico-futuristic-ui body .nautico-recipient-v8b * {
    transition-duration: 0s !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT MOCKUP V11 — APPROVED DESIGN

   Goal:
   Match approved Nautico secure-delivery mockup.

   Structure unchanged.
   Business logic unchanged.
   ============================================================ */

/* ============================================================
   1. PAGE
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b {
  position: relative !important;
  isolation: isolate !important;

  width: 100% !important;
  min-height: 100dvh !important;

  padding: 10px 16px 18px !important;

  overflow-x: hidden !important;

  color: #ffffff !important;

  background:
    radial-gradient(
      1000px 560px at 12% -10%,
      rgba(68, 85, 193, 0.19),
      transparent 67%
    ),
    radial-gradient(
      950px 560px at 105% 3%,
      rgba(49, 181, 218, 0.17),
      transparent 66%
    ),
    linear-gradient(145deg, #010713 0%, #020c1a 48%, #041527 100%) !important;
}

/* ============================================================
   2. FUTURISTIC MOVING WAVE FIELD

   Uses inline SVG.
   No external asset.
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::before {
  content: '' !important;

  position: fixed !important;

  left: -10% !important;

  top: 40px !important;

  width: 125% !important;

  height: 48vh !important;

  min-height: 330px !important;

  z-index: 0 !important;

  pointer-events: none !important;

  opacity: 0.58 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 430'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-60 250 C180 110 390 350 650 210 S1090 95 1670 210' stroke='%231c78ff' stroke-width='2' opacity='.35'/%3E%3Cpath d='M-80 270 C170 120 390 365 660 225 S1110 110 1680 220' stroke='%23239dfd' stroke-width='1.8' opacity='.36'/%3E%3Cpath d='M-100 290 C165 140 400 380 680 240 S1130 120 1700 235' stroke='%233ec8ff' stroke-width='1.4' opacity='.30'/%3E%3Cpath d='M-120 310 C170 165 420 395 700 260 S1150 135 1720 250' stroke='%2365d9ff' stroke-width='1' opacity='.23'/%3E%3Cpath d='M-60 235 C160 105 385 330 640 195 S1080 75 1650 195' stroke='%231453cc' stroke-width='1' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: repeat-x !important;

  background-position: center top !important;

  background-size: 1600px 430px !important;

  filter: drop-shadow(0 0 8px rgba(30, 138, 255, 0.22))
    drop-shadow(0 0 18px rgba(31, 191, 255, 0.12)) !important;

  animation: nauticoRecipientV11Wave 18s linear infinite !important;
}

@keyframes nauticoRecipientV11Wave {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-220px, 8px, 0);
  }
}

/* ============================================================
   3. SECOND LOWER WAVE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::after {
  content: '' !important;

  position: fixed !important;

  left: -12% !important;

  bottom: -120px !important;

  width: 128% !important;

  height: 330px !important;

  z-index: 0 !important;

  pointer-events: none !important;

  opacity: 0.52 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 330'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-80 190 C220 80 460 280 760 170 S1250 70 1680 160' stroke='%231866ff' stroke-width='2' opacity='.38'/%3E%3Cpath d='M-80 210 C230 100 470 300 780 190 S1270 90 1700 175' stroke='%232c9eff' stroke-width='1.6' opacity='.34'/%3E%3Cpath d='M-100 230 C240 125 500 310 810 210 S1300 105 1720 190' stroke='%2346ccff' stroke-width='1.2' opacity='.28'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: repeat-x !important;

  background-size: 1600px 330px !important;

  filter: drop-shadow(0 0 10px rgba(29, 129, 255, 0.25)) !important;

  animation: nauticoRecipientV11WaveBottom 23s linear infinite reverse !important;
}

@keyframes nauticoRecipientV11WaveBottom {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-260px, -5px, 0);
  }
}

/* ============================================================
   4. MAIN WIDTH
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell {
  position: relative !important;

  z-index: 2 !important;

  width: min(1320px, calc(100vw - 24px)) !important;

  max-width: 1320px !important;

  margin: 0 auto !important;
}

/* ============================================================
   5. TOP NAV / LOGO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex {
  min-height: 52px !important;

  height: 52px !important;

  margin: 0 !important;

  padding: 0 14px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  overflow: visible !important;
}

/* remove Quick button */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: none !important;
}

/* BeDrive / branding infrastructure logo:
   enforce LIGHT/WHITE visual treatment only here.
*/

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child {
  display: inline-flex !important;

  align-items: center !important;

  width: auto !important;

  max-width: 230px !important;

  transform: none !important;

  margin: 0 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child
  :is(img, svg) {
  width: auto !important;

  height: 38px !important;

  max-width: 215px !important;

  max-height: 38px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left center !important;

     object-position: left center !important;

  filter: brightness(0) invert(1) !important;
}

/* fallback logo component */

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__image {
  width: 36px !important;

  height: 36px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__wordmark {
  color: #ffffff !important;

  font-size: 25px !important;

  font-weight: 850 !important;
}

/* ============================================================
   6. OUTER CONTAINER
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card {
  position: relative !important;

  z-index: 2 !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: hidden !important;

  border: 1px solid rgba(83, 139, 184, 0.48) !important;

  border-radius: 27px !important;

  background: rgba(2, 11, 26, 0.82) !important;

  backdrop-filter: blur(15px) saturate(112%) !important;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* remove old V10 glass reflection */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::before {
  display: none !important;
}

/* top border highlight */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::after {
  content: '' !important;

  position: absolute !important;

  left: 5% !important;

  right: 5% !important;

  top: 0 !important;

  height: 1px !important;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(64, 198, 255, 0.6),
    rgba(89, 221, 231, 0.38),
    transparent
  ) !important;
}

/* ============================================================
   7. HERO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top {
  position: relative !important;

  min-height: 182px !important;

  height: auto !important;

  padding: 22px 38px 21px 168px !important;

  overflow: hidden !important;

  border-bottom: 1px solid rgba(87, 145, 189, 0.34) !important;

  background: rgba(1, 10, 24, 0.54) !important;
}

/* hide previous scan pattern */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::before {
  display: none !important;
}

/* security shield visual */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::after {
  content: '🔒' !important;

  position: absolute !important;

  left: 46px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 82px !important;

  height: 98px !important;

  padding: 0 !important;

  border: 2px solid rgba(59, 204, 255, 0.92) !important;

  border-radius: 46% 46% 55% 55% / 32% 32% 68% 68% !important;

  background: radial-gradient(
    circle,
    rgba(23, 124, 183, 0.27),
    rgba(3, 21, 46, 0.8)
  ) !important;

  color: #61dfff !important;

  font-size: 34px !important;

  line-height: 1 !important;

  letter-spacing: 0 !important;

  text-shadow: 0 0 12px rgba(68, 221, 255, 0.8) !important;

  box-shadow:
    0 0 14px rgba(44, 169, 255, 0.34),
    inset 0 0 20px rgba(41, 136, 234, 0.2) !important;
}

/* secure delivery */

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-eyebrow {
  color: #44ddff !important;

  font-size: 12px !important;

  line-height: 1.1 !important;

  letter-spacing: 0.15em !important;

  font-weight: 850 !important;
}

/* sender description */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin: 6px 0 0 !important;

  color: rgba(242, 247, 253, 0.92) !important;

  font-size: 15px !important;

  line-height: 1.25 !important;
}

/* transfer title */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  h1 {
  margin: 8px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(38px, 4vw, 52px) !important;

  line-height: 0.95 !important;

  letter-spacing: -0.04em !important;

  font-weight: 900 !important;

  text-shadow: 0 7px 22px rgba(0, 0, 0, 0.28) !important;
}

/* metadata */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 12px !important;

  display: flex !important;

  align-items: center !important;

  flex-wrap: wrap !important;

  gap: 8px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-stat {
  min-height: 33px !important;

  padding: 6px 11px !important;

  border: 1px solid rgba(83, 137, 180, 0.52) !important;

  border-radius: 8px !important;

  background: rgba(4, 17, 35, 0.72) !important;

  color: #edf7ff !important;

  font-size: 11px !important;

  line-height: 1 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* ============================================================
   8. MAIN CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  position: relative !important;

  z-index: 2 !important;

  padding: 16px 18px 18px !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  background: rgba(1, 10, 23, 0.54) !important;
}

/* ============================================================
   9. TWO-COLUMN ROWS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 14px !important;

  align-items: stretch !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  margin-top: 14px !important;
}

/* ============================================================
   10. FOUR PRIMARY CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  position: relative !important;

  min-width: 0 !important;

  height: auto !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 14px !important;

  overflow: hidden !important;

  border: 1px solid rgba(32, 132, 197, 0.58) !important;

  border-radius: 15px !important;

  background: linear-gradient(
    145deg,
    rgba(3, 21, 43, 0.91),
    rgba(1, 13, 29, 0.94)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 28px rgba(0, 0, 0, 0.15) !important;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease !important;
}

/* remove V10 glow blobs */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::after,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::after {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(45, 198, 255, 0.78) !important;

    box-shadow:
      0 15px 34px rgba(0, 0, 0, 0.2),
      0 0 20px rgba(17, 120, 229, 0.08) !important;
  }
}

/* ============================================================
   11. PACKAGE / SECURITY HEADER
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 12px !important;

  padding: 0 !important;

  border: 0 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-icon {
  width: 40px !important;

  height: 40px !important;

  flex: 0 0 40px !important;

  border: 1px solid rgba(39, 159, 225, 0.58) !important;

  border-radius: 10px !important;

  background: rgba(7, 42, 72, 0.84) !important;

  color: #aeeaff !important;

  font-size: 16px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-kicker {
  color: #5fe0f9 !important;

  font-size: 11px !important;

  line-height: 1 !important;

  letter-spacing: 0.12em !important;

  font-weight: 850 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  margin: 3px 0 0 !important;

  color: #ffffff !important;

  font-size: 16px !important;

  line-height: 1.05 !important;

  font-weight: 800 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  margin: 4px 0 0 !important;

  color: #9eb0c2 !important;

  font-size: 11px !important;

  line-height: 1.25 !important;
}

/* ============================================================
   12. FILE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  margin: 0 !important;

  border: 1px solid rgba(68, 116, 163, 0.62) !important;

  border-radius: 11px !important;

  background: rgba(2, 13, 29, 0.72) !important;

  overflow: hidden !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 57px !important;

  padding: 10px 12px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .font-semibold {
  color: #ffffff !important;

  font-size: 13px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-xs,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-sm {
  color: #98aabd !important;

  font-size: 9px !important;
}

/* ============================================================
   13. DOWNLOAD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  width: 100% !important;

  min-height: 56px !important;

  margin: 12px 0 0 !important;

  padding: 9px 14px !important;

  border: 1px solid rgba(66, 215, 255, 0.78) !important;

  border-radius: 14px !important;

  background: linear-gradient(
    105deg,
    #4e26ff 0%,
    #2457f5 43%,
    #10bce2 100%
  ) !important;

  color: #ffffff !important;

  font-size: 17px !important;

  line-height: 1 !important;

  font-weight: 850 !important;

  letter-spacing: 0.015em !important;

  box-shadow:
    0 0 24px rgba(25, 127, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* ============================================================
   14. SECURITY READY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-summary {
  display: grid !important;

  gap: 10px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state {
  min-height: 70px !important;

  padding: 11px 13px !important;

  gap: 12px !important;

  border: 1px solid rgba(28, 156, 207, 0.58) !important;

  border-radius: 12px !important;

  background: rgba(3, 29, 49, 0.74) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-icon {
  width: 45px !important;

  height: 45px !important;

  flex: 0 0 45px !important;

  border: 1px solid rgba(29, 238, 239, 0.78) !important;

  border-radius: 50% !important;

  color: #48eff1 !important;

  background: rgba(6, 73, 84, 0.32) !important;

  font-size: 20px !important;

  box-shadow: 0 0 16px rgba(25, 226, 238, 0.2) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  strong {
  color: #ffffff !important;

  font-size: 14px !important;

  letter-spacing: 0.025em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  p {
  margin: 4px 0 0 !important;

  color: #a3b6c7 !important;

  font-size: 10px !important;
}

/* security pills */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills
  > span {
  min-height: 27px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(65, 111, 157, 0.64) !important;

  border-radius: 999px !important;

  background: rgba(3, 16, 34, 0.78) !important;

  color: #c9d9e8 !important;

  font-size: 9px !important;

  font-weight: 600 !important;
}

/* advanced */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details {
  margin-top: 0 !important;

  border: 1px solid rgba(58, 102, 146, 0.58) !important;

  border-radius: 10px !important;

  background: rgba(1, 12, 27, 0.7) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary {
  min-height: 38px !important;

  padding: 7px 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-title {
  color: #ffffff !important;

  font-size: 10px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-details-action {
  color: #9edff0 !important;

  font-size: 9px !important;
}

/* ============================================================
   15. CONVERSATION / HANDOFF TITLE AREA
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  padding: 13px 15px !important;
}

/* existing icons */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::before {
  width: 36px !important;

  height: 36px !important;

  margin-bottom: 9px !important;

  border: 1px solid rgba(28, 135, 199, 0.68) !important;

  border-radius: 9px !important;

  background: rgba(6, 45, 76, 0.8) !important;

  color: #91e9ff !important;

  font-size: 14px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  h2 {
  margin: 0 0 9px !important;

  color: #70e3fb !important;

  font-size: 14px !important;

  line-height: 1.1 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  font-weight: 800 !important;
}

/* ============================================================
   16. MESSAGE ROWS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl {
  padding: 7px 10px !important;

  margin-top: 5px !important;

  border: 1px solid rgba(59, 100, 144, 0.62) !important;

  border-radius: 9px !important;

  background: rgba(1, 11, 26, 0.68) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-sm {
  color: #ffffff !important;

  font-size: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-xs {
  color: #90a4b8 !important;

  font-size: 8px !important;
}

/* ============================================================
   17. INPUTS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea {
  min-height: 55px !important;

  height: 55px !important;

  padding: 9px 11px !important;

  border: 1px solid rgba(60, 105, 150, 0.62) !important;

  border-radius: 10px !important;

  background: rgba(2, 14, 31, 0.7) !important;

  color: #ffffff !important;

  font-size: 10px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

/* ============================================================
   18. HANDOFF BUTTONS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  > .flex {
  gap: 7px !important;

  margin-top: 10px !important;

  flex-wrap: wrap !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  button,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  button {
  min-height: 31px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(62, 113, 159, 0.66) !important;

  border-radius: 999px !important;

  background: rgba(3, 18, 37, 0.78) !important;

  color: #f0f7fd !important;

  font-size: 9px !important;

  font-weight: 650 !important;

  box-shadow: none !important;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff
    button:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation
    button:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(45, 199, 246, 0.72) !important;

    background: rgba(5, 42, 67, 0.92) !important;
  }
}

/* ============================================================
   19. DESKTOP / LAPTOP HEIGHT FIT

   768px and 800px-class laptop screens.
   ============================================================ */

@media (min-width: 1100px) and (min-height: 700px) and (max-height: 850px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding-top: 4px !important;

    padding-bottom: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 42px !important;

    min-height: 42px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child
    :is(img, svg) {
    height: 31px !important;

    max-height: 31px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    min-height: 144px !important;

    padding: 15px 28px 14px 139px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    left: 39px !important;

    width: 68px !important;

    height: 82px !important;

    font-size: 27px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: 36px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 10px 12px 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 10px 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    margin-top: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    gap: 9px !important;
  }
}

/* ============================================================
   20. TABLET LANDSCAPE
   ============================================================ */

@media (max-width: 1050px) and (min-width: 801px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 18px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding-left: 130px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    left: 30px !important;

    width: 66px !important;

    height: 80px !important;
  }
}

/* ============================================================
   21. TABLET PORTRAIT
   ============================================================ */

@media (max-width: 800px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 14px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    min-height: 150px !important;

    padding: 18px 18px 18px 112px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    left: 21px !important;

    width: 62px !important;

    height: 76px !important;

    font-size: 24px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-security-body {
    max-height: none !important;

    overflow: visible !important;
  }
}

/* ============================================================
   22. MOBILE
   ============================================================ */

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 5px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 10px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card {
    border-radius: 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 46px !important;

    min-height: 46px !important;

    padding: 0 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :first-child
    :is(img, svg) {
    height: 31px !important;

    max-height: 31px !important;

    max-width: 176px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    min-height: 0 !important;

    padding: 16px 13px !important;
  }

  /* Shield becomes compact mobile badge */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    position: static !important;

    transform: none !important;

    width: 45px !important;

    height: 52px !important;

    margin-bottom: 10px !important;

    font-size: 18px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: 34px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-download {
    min-height: 48px !important;

    font-size: 13px !important;
  }
}

/* ============================================================
   23. 320PX MOBILE
   ============================================================ */

@media (max-width: 359px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 13px 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-stat {
    font-size: 9px !important;

    padding-inline: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-pills
    > span {
    font-size: 8px !important;
  }
}

/* ============================================================
   24. 2K / ULTRAWIDE
   ============================================================ */

@media (min-width: 1800px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    max-width: 1380px !important;
  }
}

/* ============================================================
   25. NO CLIPPING
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b,
html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-shell,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  height: auto !important;

  max-height: none !important;
}

/* ============================================================
   26. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::after {
    animation: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT V11B — CLEAN APPROVED LAYOUT

   Fixes:
   - no fake emoji shield
   - restore Nautico logo
   - compact hero
   - cleaner borders
   - subtle moving waves
   - better text readability
   ============================================================ */

/* ============================================================
   PAGE
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b {
  padding: 8px 14px 18px !important;

  background:
    radial-gradient(
      900px 520px at 95% -5%,
      rgba(25, 113, 197, 0.15),
      transparent 66%
    ),
    radial-gradient(
      720px 430px at 5% 100%,
      rgba(55, 72, 182, 0.12),
      transparent 68%
    ),
    linear-gradient(145deg, #010713 0%, #020c19 50%, #06182a 100%) !important;
}

/* ============================================================
   WAVES — MUCH MORE SUBTLE
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::before {
  top: 55px !important;

  height: 300px !important;

  min-height: 0 !important;

  opacity: 0.18 !important;

  filter: drop-shadow(0 0 6px rgba(31, 143, 255, 0.14)) !important;

  background-size: 1550px 360px !important;

  animation-duration: 28s !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::after {
  bottom: -180px !important;

  height: 280px !important;

  opacity: 0.16 !important;

  filter: drop-shadow(0 0 6px rgba(31, 143, 255, 0.12)) !important;

  animation-duration: 34s !important;
}

/* ============================================================
   SHELL WIDTH
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell {
  width: min(1320px, calc(100vw - 24px)) !important;

  max-width: 1320px !important;
}

/* ============================================================
   TOP LOGO BAR
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex {
  display: flex !important;

  align-items: center !important;

  justify-content: flex-start !important;

  min-height: 50px !important;

  height: 50px !important;

  margin: 0 !important;

  padding: 0 12px !important;

  overflow: visible !important;
}

/*
 * IMPORTANT:
 * V11 used > :last-child which can hide the logo
 * when the logo is the only child.
 *
 * Hide the last element ONLY when there are at least
 * two children in the row.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex:has(> :nth-child(2))
  > :last-child {
  display: none !important;
}

/* force first child visible */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child {
  display: inline-flex !important;

  visibility: visible !important;

  opacity: 1 !important;

  align-items: center !important;

  width: auto !important;

  max-width: 220px !important;

  margin: 0 !important;

  transform: none !important;
}

/* actual branding image */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :first-child
  :is(img, svg) {
  display: block !important;

  visibility: visible !important;

  opacity: 1 !important;

  width: auto !important;

  height: 34px !important;

  max-height: 34px !important;

  max-width: 205px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left center !important;

     object-position: left center !important;

  filter: brightness(0) invert(1) !important;
}

/* fallback logo */

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__image {
  display: block !important;

  width: 34px !important;

  height: 34px !important;

  visibility: visible !important;

  opacity: 1 !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-logo__wordmark {
  display: block !important;

  color: #ffffff !important;

  font-size: 24px !important;

  visibility: visible !important;

  opacity: 1 !important;
}

/* ============================================================
   OUTER CARD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card {
  overflow: hidden !important;

  border: 1px solid rgba(67, 125, 171, 0.48) !important;

  border-radius: 24px !important;

  background: rgba(2, 11, 25, 0.86) !important;

  box-shadow:
    0 22px 64px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;

  backdrop-filter: blur(14px) saturate(110%) !important;
}

/* ============================================================
   HERO — REMOVE WEIRD SHIELD COMPLETELY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top {
  position: relative !important;

  min-height: 0 !important;

  height: auto !important;

  padding: 22px 230px 22px 30px !important;

  overflow: hidden !important;

  border-bottom: 1px solid rgba(78, 132, 174, 0.3) !important;

  background:
    radial-gradient(
      520px 220px at 100% 0%,
      rgba(26, 122, 181, 0.13),
      transparent 72%
    ),
    linear-gradient(110deg, rgba(2, 13, 30, 0.92), rgba(5, 22, 42, 0.83)) !important;
}

/*
 * NO giant shield / emoji.
 * Use pseudo-element as small status pill.
 */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::after {
  content: 'SECURE DELIVERY' !important;

  position: absolute !important;

  left: auto !important;

  right: 28px !important;

  top: 24px !important;

  transform: none !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: auto !important;

  height: 34px !important;

  padding: 0 14px !important;

  border: 1px solid rgba(45, 183, 210, 0.42) !important;

  border-radius: 999px !important;

  background: rgba(4, 32, 48, 0.66) !important;

  color: #8ce8ed !important;

  font-family: inherit !important;

  font-size: 9px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: 0.13em !important;

  text-shadow: none !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

/* remove any scan line */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::before {
  display: none !important;
}

/* hero typography */

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-eyebrow {
  color: #66dff2 !important;

  font-size: 10px !important;

  line-height: 1 !important;

  letter-spacing: 0.18em !important;

  font-weight: 850 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin: 7px 0 0 !important;

  color: #c2d0dc !important;

  font-size: 13px !important;

  line-height: 1.2 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  h1 {
  margin: 8px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(34px, 3.6vw, 48px) !important;

  line-height: 0.96 !important;

  font-weight: 900 !important;

  letter-spacing: -0.04em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 13px !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-stat {
  min-height: 31px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(73, 120, 160, 0.52) !important;

  border-radius: 8px !important;

  background: rgba(3, 16, 32, 0.72) !important;

  color: #e9f2f8 !important;

  font-size: 10px !important;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  padding: 15px !important;

  background: rgba(1, 9, 21, 0.6) !important;
}

/* ============================================================
   GRID
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 12px !important;

  align-items: stretch !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  margin-top: 12px !important;
}

/* ============================================================
   FOUR MAIN CARDS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  min-width: 0 !important;

  height: auto !important;

  min-height: 0 !important;

  padding: 14px !important;

  overflow: visible !important;

  border: 1px solid rgba(41, 125, 181, 0.54) !important;

  border-radius: 14px !important;

  background: linear-gradient(
    145deg,
    rgba(3, 21, 41, 0.94),
    rgba(1, 12, 27, 0.96)
  ) !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

/* ============================================================
   HEADERS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  margin: 0 0 11px !important;

  padding: 0 0 10px !important;

  border-bottom: 1px solid rgba(53, 101, 141, 0.3) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-icon {
  width: 38px !important;

  height: 38px !important;

  flex: 0 0 38px !important;

  border: 1px solid rgba(48, 147, 200, 0.56) !important;

  border-radius: 9px !important;

  background: rgba(6, 39, 65, 0.82) !important;

  color: #a3eaff !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-kicker {
  color: #65dff1 !important;

  font-size: 9px !important;

  letter-spacing: 0.14em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  margin: 2px 0 0 !important;

  color: #ffffff !important;

  font-size: 15px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  margin: 3px 0 0 !important;

  color: #9db0bf !important;

  font-size: 10px !important;

  line-height: 1.25 !important;
}

/* ============================================================
   FILE CARD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  border: 1px solid rgba(57, 105, 146, 0.52) !important;

  border-radius: 10px !important;

  background: rgba(1, 11, 25, 0.72) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 55px !important;

  padding: 9px 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .font-semibold {
  color: #ffffff !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-xs,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-sm {
  color: #94a8b8 !important;

  font-size: 9px !important;
}

/* ============================================================
   DOWNLOAD BUTTON
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  min-height: 52px !important;

  margin-top: 11px !important;

  border-radius: 12px !important;

  background: linear-gradient(
    105deg,
    #575fe2 0%,
    #4d88e8 52%,
    #70c8d7 100%
  ) !important;

  border: 1px solid rgba(113, 213, 235, 0.66) !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 850 !important;

  box-shadow: 0 8px 22px rgba(43, 104, 184, 0.19) !important;
}

/* ============================================================
   SECURITY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state {
  min-height: 62px !important;

  padding: 10px 12px !important;

  border-radius: 10px !important;

  background: rgba(4, 29, 47, 0.78) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-icon {
  width: 39px !important;

  height: 39px !important;

  flex: 0 0 39px !important;

  font-size: 17px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  strong {
  color: #ffffff !important;

  font-size: 12px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  p {
  color: #9aafbf !important;

  font-size: 9px !important;
}

/* ============================================================
   CONVERSATION + HANDOFF
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  padding: 13px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  h2 {
  color: #9beafa !important;

  font-size: 13px !important;

  letter-spacing: 0.06em !important;

  margin-bottom: 8px !important;
}

/* message cards */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl {
  padding: 7px 9px !important;

  border: 1px solid rgba(53, 99, 139, 0.48) !important;

  border-radius: 8px !important;

  background: rgba(1, 11, 25, 0.7) !important;
}

/* ============================================================
   TEXTAREAS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea {
  min-height: 52px !important;

  height: 52px !important;

  border: 1px solid rgba(55, 103, 144, 0.54) !important;

  border-radius: 9px !important;

  background: rgba(1, 11, 25, 0.75) !important;

  color: #ffffff !important;

  font-size: 10px !important;
}

/* ============================================================
   DESKTOP SHORT HEIGHT
   ============================================================ */

@media (min-width: 1100px) and (max-height: 850px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 42px !important;

    min-height: 42px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 14px 205px 14px 24px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    right: 22px !important;

    top: 15px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: 34px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    gap: 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    margin-top: 9px !important;
  }
}

/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 18px 160px 18px 20px !important;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 4px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 8px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card {
    border-radius: 17px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 15px 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top::after {
    position: static !important;

    display: inline-flex !important;

    height: 28px !important;

    margin-bottom: 10px !important;

    padding: 0 10px !important;

    font-size: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 10px !important;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b::after {
    animation: none !important;
  }
}

/* ============================================================
   NAUTICO RECIPIENT V12 — BEDRIVE LOGO + FLOW FIELD FINAL

   - actual BeDrive Logo component using branding.logo_light
   - strong but restrained blue/cyan animated flow lines
   - desktop/laptop viewport fit
   - preserves current 2x2 structure
   - responsive tablet/mobile
   ============================================================ */

/* ============================================================
   1. EXACT COLOR SYSTEM FROM APPROVED DIRECTION
   ============================================================ */

html.nautico-futuristic-ui body .nautico-recipient-stage.nautico-recipient-v8b {
  --nr12-page-0: #010713;

  --nr12-page-1: #020c1b;

  --nr12-page-2: #05172a;

  --nr12-card: rgba(3, 17, 36, 0.92);

  --nr12-card-deep: rgba(1, 11, 26, 0.95);

  --nr12-border: rgba(38, 125, 190, 0.6);

  --nr12-border-soft: rgba(57, 112, 158, 0.46);

  --nr12-cyan: #59dcf5;

  --nr12-cyan-bright: #32d6ff;

  --nr12-blue: #287df1;

  --nr12-purple: #563cff;

  --nr12-white: #f8fbff;

  --nr12-muted: #9baec0;

  position: relative !important;

  isolation: isolate !important;

  min-height: 100dvh !important;

  padding: 6px 12px 14px !important;

  overflow-x: hidden !important;

  color: var(--nr12-white) !important;

  background:
    radial-gradient(
      1050px 580px at 100% 0%,
      rgba(26, 117, 190, 0.17),
      transparent 64%
    ),
    radial-gradient(
      820px 520px at 0% 95%,
      rgba(62, 70, 190, 0.12),
      transparent 68%
    ),
    linear-gradient(
      145deg,
      var(--nr12-page-0) 0%,
      var(--nr12-page-1) 48%,
      var(--nr12-page-2) 100%
    ) !important;
}

/* Disable previous page-level V11 waves.
   V12 draws the waves INSIDE the shell where they are visible.
*/

html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-stage.nautico-recipient-v8b::after {
  display: none !important;
}

/* ============================================================
   2. PAGE WIDTH
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell {
  position: relative !important;

  z-index: 2 !important;

  width: min(1340px, calc(100vw - 20px)) !important;

  max-width: 1340px !important;

  margin: 0 auto !important;
}

/* ============================================================
   3. TOP BAR
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex {
  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  height: 50px !important;

  min-height: 50px !important;

  margin: 0 !important;

  padding: 0 18px !important;

  overflow: visible !important;
}

/* ============================================================
   4. REAL BEDRIVE LOGO
   branding.logo_light
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-brand-logo {
  display: inline-flex !important;

  align-items: center !important;

  flex: 0 0 auto !important;

  width: auto !important;

  height: 38px !important;

  max-width: 230px !important;

  margin: 0 !important;

  padding: 0 !important;

  visibility: visible !important;

  opacity: 1 !important;

  transform: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-brand-logo
  img {
  display: block !important;

  width: auto !important;

  height: 38px !important;

  max-width: 230px !important;

  max-height: 38px !important;

  -o-object-fit: contain !important;

     object-fit: contain !important;

  -o-object-position: left center !important;

     object-position: left center !important;

  visibility: visible !important;

  opacity: 1 !important;

  /*
   * Important:
   * Do NOT recolor the branding asset.
   * Logo component already loads branding.logo_light.
   */
  filter: none !important;
}

/* Override old generic first-child logo manipulation */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > .nautico-recipient-brand-logo
  img {
  height: 38px !important;

  max-height: 38px !important;

  max-width: 230px !important;

  filter: none !important;
}

/* ============================================================
   5. TOP-RIGHT SECURE DELIVERY PILL

   Existing protection span preserved in DOM,
   visual label is standardized.
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child {
  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 154px !important;

  min-height: 36px !important;

  padding: 0 14px !important;

  margin: 0 !important;

  border: 1px solid rgba(45, 185, 218, 0.5) !important;

  border-radius: 999px !important;

  background: rgba(3, 24, 43, 0.7) !important;

  color: transparent !important;

  font-size: 0 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child::before {
  content: '▣' !important;

  margin-right: 8px !important;

  color: var(--nr12-cyan) !important;

  font-size: 12px !important;

  line-height: 1 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell
  > .mb-20.flex
  > :last-child::after {
  content: 'SECURE DELIVERY' !important;

  color: #a8edf5 !important;

  font-size: 10px !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  letter-spacing: 0.14em !important;
}

/* ============================================================
   6. OUTER SHELL
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card {
  position: relative !important;

  isolation: isolate !important;

  overflow: hidden !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  border: 1px solid rgba(67, 126, 175, 0.54) !important;

  border-radius: 25px !important;

  background: linear-gradient(
    145deg,
    rgba(1, 10, 24, 0.91),
    rgba(3, 18, 36, 0.88)
  ) !important;

  backdrop-filter: blur(16px) saturate(116%) !important;

  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

/* ============================================================
   7. MAIN MOVING WAVE FIELD

   This is now inside the card so it is actually visible.
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::before {
  content: '' !important;

  display: block !important;

  position: absolute !important;

  left: -180px !important;

  right: -180px !important;

  top: 20px !important;

  height: 330px !important;

  z-index: 0 !important;

  pointer-events: none !important;

  opacity: 0.58 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 360'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-120 230 C170 80 390 330 690 190 S1180 80 1910 195' stroke='%231c73ff' stroke-width='2.1' opacity='.54'/%3E%3Cpath d='M-130 245 C180 95 410 345 710 205 S1200 95 1920 210' stroke='%23248eff' stroke-width='1.7' opacity='.52'/%3E%3Cpath d='M-140 262 C190 112 430 360 735 224 S1230 110 1940 225' stroke='%2332b9ff' stroke-width='1.35' opacity='.46'/%3E%3Cpath d='M-150 280 C205 132 450 374 760 244 S1260 125 1960 244' stroke='%2355dcff' stroke-width='1.05' opacity='.37'/%3E%3Cpath d='M-100 210 C145 83 375 305 660 172 S1150 65 1880 180' stroke='%234b4cff' stroke-width='1.2' opacity='.30'/%3E%3Cpath d='M-160 298 C225 150 475 392 785 260 S1290 142 1980 260' stroke='%2375e5ff' stroke-width='.8' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: repeat-x !important;

  background-size: 1800px 360px !important;

  background-position: 0 0 !important;

  filter: drop-shadow(0 0 5px rgba(32, 119, 255, 0.34))
    drop-shadow(0 0 12px rgba(34, 196, 255, 0.16)) !important;

  animation: nauticoRecipientV12FlowA 16s linear infinite !important;
}

@keyframes nauticoRecipientV12FlowA {
  0% {
    background-position: 0 0 !important;

    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 7px, 0);
  }

  100% {
    background-position: -520px 0 !important;

    transform: translate3d(0, 0, 0);
  }
}

/* ============================================================
   8. LOWER MOVING FLOW FIELD
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card::after {
  content: '' !important;

  display: block !important;

  position: absolute !important;

  left: -140px !important;

  right: -140px !important;

  bottom: -95px !important;

  top: auto !important;

  height: 255px !important;

  z-index: 0 !important;

  pointer-events: none !important;

  opacity: 0.43 !important;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 280'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-100 155 C210 55 440 245 750 142 S1250 50 1900 140' stroke='%23185fff' stroke-width='2' opacity='.46'/%3E%3Cpath d='M-110 171 C220 72 455 262 770 158 S1270 67 1920 155' stroke='%232e8dff' stroke-width='1.5' opacity='.44'/%3E%3Cpath d='M-120 188 C235 90 480 275 795 176 S1300 82 1940 170' stroke='%2340c8ff' stroke-width='1.1' opacity='.36'/%3E%3Cpath d='M-130 206 C250 108 500 290 820 193 S1330 98 1960 186' stroke='%2374e8ff' stroke-width='.8' opacity='.26'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-repeat: repeat-x !important;

  background-size: 1800px 280px !important;

  background-position: 0 0 !important;

  filter: drop-shadow(0 0 7px rgba(38, 139, 255, 0.26)) !important;

  animation: nauticoRecipientV12FlowB 21s linear infinite reverse !important;
}

@keyframes nauticoRecipientV12FlowB {
  from {
    background-position: 0 0 !important;
  }

  to {
    background-position: -600px 0 !important;
  }
}

/* Everything real must sit above the waves */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-shell-card
  > * {
  position: relative !important;

  z-index: 2 !important;
}

/* ============================================================
   9. HERO
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top {
  position: relative !important;

  min-height: 0 !important;

  height: auto !important;

  padding: 20px 28px 18px !important;

  overflow: hidden !important;

  border-bottom: 1px solid rgba(64, 124, 171, 0.35) !important;

  background: linear-gradient(
    100deg,
    rgba(1, 10, 24, 0.84) 0%,
    rgba(1, 11, 27, 0.66) 48%,
    rgba(2, 20, 39, 0.35) 100%
  ) !important;

  backdrop-filter: blur(1px) !important;
}

/* Remove old V11/V11B hero generated badge.
   The correct pill now lives in top bar.
*/

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::after,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top::before {
  display: none !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-eyebrow {
  color: var(--nr12-cyan-bright) !important;

  font-size: 11px !important;

  line-height: 1 !important;

  letter-spacing: 0.18em !important;

  font-weight: 850 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  .text-white\/80 {
  margin: 7px 0 0 !important;

  color: #e3edf5 !important;

  font-size: 13px !important;

  line-height: 1.2 !important;

  font-weight: 500 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  h1 {
  margin: 8px 0 0 !important;

  color: #ffffff !important;

  font-size: clamp(34px, 3.5vw, 47px) !important;

  line-height: 0.96 !important;

  font-weight: 900 !important;

  letter-spacing: -0.045em !important;

  text-shadow: 0 8px 26px rgba(0, 0, 0, 0.3) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-hero__top
  > .flex {
  margin-top: 13px !important;

  gap: 8px !important;
}

html.nautico-futuristic-ui body .nautico-recipient-v8b .nautico-recipient-stat {
  min-height: 31px !important;

  padding: 5px 10px !important;

  border: 1px solid rgba(70, 121, 162, 0.58) !important;

  border-radius: 8px !important;

  background: rgba(2, 14, 31, 0.76) !important;

  color: #edf6fc !important;

  font-size: 10px !important;

  line-height: 1 !important;
}

/* ============================================================
   10. CONTENT
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-content {
  position: relative !important;

  z-index: 2 !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  overflow: visible !important;

  padding: 13px !important;

  background: rgba(1, 9, 21, 0.62) !important;
}

/* ============================================================
   11. 2 x 2 GRID
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-main,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 11px !important;

  align-items: stretch !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-actions {
  margin-top: 11px !important;
}

/* ============================================================
   12. MAIN FOUR PANELS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-security,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  position: relative !important;

  min-width: 0 !important;

  min-height: 0 !important;

  height: auto !important;

  padding: 12px !important;

  margin: 0 !important;

  overflow: visible !important;

  border: 1px solid var(--nr12-border) !important;

  border-radius: 14px !important;

  background: linear-gradient(
    145deg,
    rgba(3, 22, 44, 0.93),
    rgba(1, 12, 28, 0.95)
  ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 24px rgba(0, 0, 0, 0.15) !important;

  backdrop-filter: blur(8px) !important;

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation:hover,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff:hover {
    transform: translateY(-1px) !important;

    border-color: rgba(55, 198, 244, 0.76) !important;

    box-shadow:
      0 13px 30px rgba(0, 0, 0, 0.2),
      0 0 20px rgba(27, 125, 232, 0.07) !important;
  }
}

/* ============================================================
   13. PANEL HEADERS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head {
  display: flex !important;

  align-items: center !important;

  gap: 9px !important;

  margin: 0 0 9px !important;

  padding: 0 !important;

  border: 0 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-icon {
  width: 36px !important;

  height: 36px !important;

  flex: 0 0 36px !important;

  border: 1px solid rgba(40, 151, 211, 0.65) !important;

  border-radius: 9px !important;

  background: rgba(6, 43, 73, 0.82) !important;

  color: #a8ebff !important;

  font-size: 14px !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-kicker {
  color: var(--nr12-cyan) !important;

  font-size: 9px !important;

  line-height: 1 !important;

  font-weight: 850 !important;

  letter-spacing: 0.14em !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  h2 {
  margin: 2px 0 0 !important;

  color: #ffffff !important;

  font-size: 15px !important;

  line-height: 1.05 !important;

  font-weight: 800 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-section-head
  p {
  margin: 3px 0 0 !important;

  color: var(--nr12-muted) !important;

  font-size: 10px !important;

  line-height: 1.2 !important;
}

/* ============================================================
   14. FILE ROW
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-files {
  margin: 0 !important;

  overflow: hidden !important;

  border: 1px solid var(--nr12-border-soft) !important;

  border-radius: 10px !important;

  background: rgba(1, 10, 25, 0.76) !important;

  box-shadow: none !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  > div {
  min-height: 52px !important;

  padding: 8px 10px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .font-semibold {
  color: #ffffff !important;

  font-size: 12px !important;

  line-height: 1.15 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-xs,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-files
  .text-sm {
  color: #98aabd !important;

  font-size: 8px !important;
}

/* ============================================================
   15. PRIMARY CTA
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v8b-package
  .nautico-recipient-download {
  width: 100% !important;

  min-height: 50px !important;

  margin: 9px 0 0 !important;

  padding: 7px 12px !important;

  border: 1px solid rgba(71, 215, 255, 0.82) !important;

  border-radius: 12px !important;

  background: linear-gradient(
    102deg,
    var(--nr12-purple) 0%,
    #2f63ed 45%,
    #16bde0 100%
  ) !important;

  color: #ffffff !important;

  font-size: 15px !important;

  line-height: 1 !important;

  font-weight: 850 !important;

  box-shadow:
    0 0 22px rgba(34, 108, 247, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.17) !important;

  transition:
    transform 0.2s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package
    .nautico-recipient-download:hover {
    transform: translateY(-1px) !important;

    filter: brightness(1.05) !important;

    box-shadow: 0 0 27px rgba(28, 143, 244, 0.25) !important;
  }
}

/* ============================================================
   16. SECURITY READY
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-summary {
  display: grid !important;

  gap: 7px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state {
  display: flex !important;

  align-items: center !important;

  min-height: 57px !important;

  gap: 9px !important;

  padding: 8px 10px !important;

  border: 1px solid rgba(39, 156, 202, 0.62) !important;

  border-radius: 10px !important;

  background: rgba(3, 30, 51, 0.76) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-icon {
  width: 38px !important;

  height: 38px !important;

  flex: 0 0 38px !important;

  border: 1px solid rgba(38, 232, 235, 0.79) !important;

  border-radius: 50% !important;

  color: #52eef0 !important;

  background: rgba(10, 78, 87, 0.3) !important;

  font-size: 17px !important;

  box-shadow: 0 0 14px rgba(33, 222, 235, 0.16) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  strong {
  color: #ffffff !important;

  font-size: 12px !important;

  line-height: 1.1 !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-secure-state
  p {
  margin: 3px 0 0 !important;

  color: #9cafbf !important;

  font-size: 8px !important;

  line-height: 1.2 !important;
}

/* security pills */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 5px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-pills
  > span {
  min-height: 23px !important;

  padding: 3px 8px !important;

  border: 1px solid rgba(58, 105, 148, 0.6) !important;

  border-radius: 999px !important;

  background: rgba(1, 12, 29, 0.78) !important;

  color: #c9d8e6 !important;

  font-size: 7px !important;
}

/* advanced details */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details {
  margin-top: 0 !important;

  overflow: hidden !important;

  border: 1px solid rgba(54, 99, 143, 0.58) !important;

  border-radius: 9px !important;

  background: rgba(1, 11, 26, 0.76) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-v9b-security-details
  > summary {
  min-height: 33px !important;

  padding: 5px 9px !important;
}

/* ============================================================
   17. BOTTOM PANELS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff {
  padding: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation::before,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff::before {
  width: 29px !important;

  height: 29px !important;

  margin-bottom: 6px !important;

  border: 1px solid rgba(41, 143, 201, 0.63) !important;

  border-radius: 8px !important;

  background: rgba(5, 42, 71, 0.82) !important;

  color: #93e9ff !important;

  font-size: 11px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  h2,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  h2 {
  margin: 0 0 6px !important;

  color: #77e1f6 !important;

  font-size: 12px !important;

  line-height: 1 !important;

  font-weight: 800 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;
}

/* message rows */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl {
  margin-top: 4px !important;

  padding: 6px 8px !important;

  border: 1px solid rgba(52, 96, 138, 0.54) !important;

  border-radius: 8px !important;

  background: rgba(1, 10, 25, 0.75) !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-sm {
  color: #ffffff !important;

  font-size: 9px !important;
}

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  .rounded-xl
  .text-xs {
  color: #8da2b5 !important;

  font-size: 7px !important;
}

/* ============================================================
   18. INPUTS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  textarea,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  textarea {
  min-height: 45px !important;

  height: 45px !important;

  padding: 7px 8px !important;

  border: 1px solid rgba(53, 100, 144, 0.58) !important;

  border-radius: 8px !important;

  background: rgba(1, 10, 25, 0.77) !important;

  color: #ffffff !important;

  font-size: 9px !important;
}

/* ============================================================
   19. SMALL ACTION BUTTONS
   ============================================================ */

html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-conversation
  button,
html.nautico-futuristic-ui
  body
  .nautico-recipient-v8b
  .nautico-recipient-handoff
  button {
  min-height: 27px !important;

  padding: 4px 8px !important;

  border: 1px solid rgba(57, 109, 153, 0.62) !important;

  border-radius: 999px !important;

  background: rgba(2, 16, 34, 0.82) !important;

  color: #ffffff !important;

  font-size: 7px !important;

  font-weight: 650 !important;
}

/* ============================================================
   20. CRITICAL LAPTOP FIT
   1366x768 / 1440x768 / similar
   ============================================================ */

@media (min-width: 1100px) and (min-height: 650px) and (max-height: 820px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 3px 9px 6px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 42px !important;

    min-height: 42px !important;

    padding: 0 13px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-brand-logo {
    height: 31px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-brand-logo
    img {
    height: 31px !important;

    max-height: 31px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :last-child {
    min-height: 30px !important;

    min-width: 138px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 11px 20px 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    margin-top: 5px !important;

    font-size: 31px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    > .flex {
    margin-top: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-stat {
    min-height: 25px !important;

    padding: 3px 8px !important;

    font-size: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    gap: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    margin-top: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-section-head {
    margin-bottom: 6px !important;

    gap: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-icon {
    width: 30px !important;

    height: 30px !important;

    flex-basis: 30px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-section-head
    h2 {
    font-size: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-section-head
    p {
    font-size: 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-files
    > div {
    min-height: 42px !important;

    padding: 6px 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package
    .nautico-recipient-download {
    min-height: 42px !important;

    margin-top: 6px !important;

    font-size: 12px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-secure-state {
    min-height: 46px !important;

    padding: 6px 8px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-secure-icon {
    width: 30px !important;

    height: 30px !important;

    flex-basis: 30px !important;

    font-size: 13px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-security-details
    > summary {
    min-height: 27px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff::before {
    width: 23px !important;

    height: 23px !important;

    margin-bottom: 4px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation
    h2,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff
    h2 {
    margin-bottom: 4px !important;

    font-size: 10px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation
    .rounded-xl {
    margin-top: 2px !important;

    padding: 4px 6px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation
    textarea,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff
    textarea {
    min-height: 36px !important;

    height: 36px !important;
  }
}

/* ============================================================
   21. STANDARD DESKTOP
   ============================================================ */

@media (min-width: 1100px) and (min-height: 821px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card {
    max-width: none !important;
  }
}

/* ============================================================
   22. TABLET LANDSCAPE
   ============================================================ */

@media (max-width: 1099px) and (min-width: 851px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 14px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    gap: 8px !important;
  }
}

/* ============================================================
   23. TABLET PORTRAIT
   ============================================================ */

@media (max-width: 850px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-main,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-actions {
    grid-template-columns: 1fr !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v9b-security-body {
    max-height: none !important;

    overflow: visible !important;
  }
}

/* ============================================================
   24. MOBILE
   ============================================================ */

@media (max-width: 600px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    padding: 4px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    width: calc(100vw - 8px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex {
    height: 44px !important;

    min-height: 44px !important;

    padding: 0 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-brand-logo {
    height: 29px !important;

    max-width: 168px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-brand-logo
    img {
    height: 29px !important;

    max-height: 29px !important;

    max-width: 168px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :last-child {
    min-width: auto !important;

    min-height: 29px !important;

    padding: 0 9px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :last-child::before {
    display: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :last-child::after {
    font-size: 7px !important;

    letter-spacing: 0.1em !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card {
    border-radius: 17px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top {
    padding: 14px 11px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-hero__top
    h1 {
    font-size: clamp(29px, 10vw, 36px) !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-content {
    padding: 7px !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-package,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-v8b-security,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-conversation,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-handoff {
    padding: 10px !important;
  }

  /* On mobile scrolling is intentionally allowed.
     Do not clip real security/conversation content.
  */

  html.nautico-futuristic-ui
    body
    .nautico-recipient-stage.nautico-recipient-v8b {
    overflow-y: auto !important;
  }
}

/* ============================================================
   25. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 359px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell
    > .mb-20.flex
    > :last-child {
    display: none !important;
  }

  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-brand-logo {
    max-width: 160px !important;
  }
}

/* ============================================================
   26. 2K / ULTRAWIDE
   ============================================================ */

@media (min-width: 1800px) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell {
    max-width: 1420px !important;
  }
}

/* ============================================================
   27. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card::before,
  html.nautico-futuristic-ui
    body
    .nautico-recipient-v8b
    .nautico-recipient-shell-card::after {
    animation: none !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13 — FINAL VISUAL IMPLEMENTATION
   Real SVG energy field + final desktop sizing / legibility pass
   ========================================================================== */

.nautico-recipient-v13 {
  --nautico-v13-navy-0: #010611;
  --nautico-v13-navy-1: #020b18;
  --nautico-v13-navy-2: #041426;
  --nautico-v13-panel: rgba(3, 20, 40, 0.86);
  --nautico-v13-panel-deep: rgba(1, 11, 27, 0.91);
  --nautico-v13-edge: rgba(45, 154, 255, 0.46);
  --nautico-v13-edge-soft: rgba(43, 205, 255, 0.18);
  --nautico-v13-blue: #2685ff;
  --nautico-v13-cyan: #3bdfff;
  --nautico-v13-text: #edf8ff;
  --nautico-v13-muted: #9fb9d4;

  background:
    radial-gradient(
      900px 440px at 88% 7%,
      rgba(17, 103, 208, 0.2),
      transparent 66%
    ),
    radial-gradient(
      760px 480px at 5% 88%,
      rgba(25, 87, 196, 0.12),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      var(--nautico-v13-navy-0) 0%,
      var(--nautico-v13-navy-1) 46%,
      var(--nautico-v13-navy-2) 100%
    ) !important;
}

/* --------------------------------------------------------------------------
   V13 REAL SVG FLOW FIELD
   -------------------------------------------------------------------------- */

.nautico-recipient-v13 .nautico-recipient-shell-card {
  isolation: isolate;
  position: relative;
  background:
    radial-gradient(
      700px 270px at 84% 14%,
      rgba(18, 101, 215, 0.1),
      transparent 72%
    ),
    linear-gradient(145deg, rgba(1, 9, 23, 0.92), rgba(3, 18, 37, 0.9)) !important;
}

.nautico-recipient-v13 .nautico-recipient-shell-card::before,
.nautico-recipient-v13 .nautico-recipient-shell-card::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

.nautico-recipient-v13-flow-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  opacity: 1;
}

.nautico-recipient-v13-flow-svg {
  position: absolute;
  inset: -2% -3%;
  width: 106%;
  height: 104%;
  overflow: visible;
}

.nautico-recipient-v13-flow {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.nautico-recipient-v13-flow-a {
  opacity: 0.78;
  animation: nauticoRecipientV13FlowA 11.5s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
}

.nautico-recipient-v13-flow-b {
  opacity: 0.58;
  animation: nauticoRecipientV13FlowB 16s cubic-bezier(0.42, 0, 0.58, 1)
    infinite alternate-reverse;
}

.nautico-recipient-v13-flow-c {
  opacity: 0.54;
  animation: nauticoRecipientV13FlowC 20s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate;
}

.nautico-recipient-v13-flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  stroke-dasharray: 11 7;
  animation: nauticoRecipientV13EnergyDash 8.5s linear infinite;
}

.nautico-recipient-v13-flow-line:nth-child(3n + 1) {
  stroke-width: 1.35;
  opacity: 0.82;
  animation-duration: 7s;
}

.nautico-recipient-v13-flow-line:nth-child(3n + 2) {
  stroke-width: 0.82;
  opacity: 0.6;
  stroke-dasharray: 8 12;
  animation-duration: 10.5s;
}

.nautico-recipient-v13-flow-line:nth-child(3n) {
  stroke-width: 0.62;
  opacity: 0.46;
  stroke-dasharray: 4 11;
  animation-duration: 13s;
}

.nautico-recipient-v13-particles {
  fill: #60e9ff;
  filter: drop-shadow(0 0 3px rgba(64, 218, 255, 0.8))
    drop-shadow(0 0 8px rgba(32, 113, 255, 0.4));
}

.nautico-recipient-v13-particle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.22;
  animation: nauticoRecipientV13Particle 6s ease-in-out infinite alternate;
}

.nautico-recipient-v13-particle:nth-child(2n) {
  animation-duration: 8.5s;
  animation-delay: -2.3s;
}

.nautico-recipient-v13-particle:nth-child(3n) {
  animation-duration: 10.5s;
  animation-delay: -4.2s;
}

.nautico-recipient-v13-particle:nth-child(5n) {
  opacity: 0.38;
}

@keyframes nauticoRecipientV13FlowA {
  0% {
    transform: translate3d(-34px, -4px, 0) scaleX(1.015);
  }

  45% {
    transform: translate3d(4px, 8px, 0) scaleX(1.025);
  }

  100% {
    transform: translate3d(52px, -5px, 0) scaleX(1.015);
  }
}

@keyframes nauticoRecipientV13FlowB {
  0% {
    transform: translate3d(42px, 9px, 0) scaleX(1.02);
  }

  50% {
    transform: translate3d(-4px, -8px, 0) scaleX(1.035);
  }

  100% {
    transform: translate3d(-58px, 5px, 0) scaleX(1.02);
  }
}

@keyframes nauticoRecipientV13FlowC {
  0% {
    transform: translate3d(-22px, 7px, 0) scaleX(1.01);
  }

  50% {
    transform: translate3d(17px, -5px, 0) scaleX(1.025);
  }

  100% {
    transform: translate3d(48px, 8px, 0) scaleX(1.015);
  }
}

@keyframes nauticoRecipientV13EnergyDash {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -72;
  }
}

@keyframes nauticoRecipientV13Particle {
  0% {
    opacity: 0.12;
    transform: translate3d(-8px, 3px, 0) scale(0.78);
  }

  50% {
    opacity: 0.5;
    transform: translate3d(5px, -5px, 0) scale(1.2);
  }

  100% {
    opacity: 0.18;
    transform: translate3d(15px, 4px, 0) scale(0.88);
  }
}

/* --------------------------------------------------------------------------
   STACKING — waves above shell background, real content above waves
   -------------------------------------------------------------------------- */

.nautico-recipient-v13
  .nautico-recipient-shell-card
  > :not(.nautico-recipient-v13-flow-field) {
  position: relative;
  z-index: 2;
}

.nautico-recipient-v13 .nautico-recipient-content {
  position: relative;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(3, 16, 33, 0.58),
    rgba(2, 13, 29, 0.68)
  ) !important;
}

/* --------------------------------------------------------------------------
   GLASS CARDS — more reference-like, slightly transparent so the animated
   field is perceptible around and faintly behind the panels.
   -------------------------------------------------------------------------- */

.nautico-recipient-v13
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  ) {
  border: 1px solid rgba(43, 153, 255, 0.46) !important;

  border-radius: 18px !important;

  background:
    radial-gradient(
      440px 180px at 18% 0%,
      rgba(28, 104, 196, 0.105),
      transparent 72%
    ),
    linear-gradient(145deg, rgba(4, 24, 47, 0.86), rgba(1, 12, 29, 0.91)) !important;

  box-shadow:
    inset 0 1px 0 rgba(123, 210, 255, 0.055),
    0 12px 34px rgba(0, 5, 18, 0.16) !important;

  backdrop-filter: blur(9px) saturate(1.08);
}

/* Security-ready panel gets a brighter cyan identity. */

.nautico-recipient-v13 .nautico-recipient-v9b-secure-state {
  border-color: rgba(39, 203, 255, 0.48) !important;

  background: linear-gradient(
    135deg,
    rgba(4, 32, 59, 0.76),
    rgba(2, 20, 42, 0.72)
  ) !important;

  box-shadow: inset 0 0 24px rgba(24, 151, 255, 0.055) !important;
}

.nautico-recipient-v13 .nautico-recipient-v9b-pills > * {
  border-color: rgba(66, 141, 232, 0.38) !important;

  background: rgba(3, 17, 36, 0.74) !important;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY / INPUTS
   -------------------------------------------------------------------------- */

.nautico-recipient-v13
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  :is(h2, h3) {
  color: #eaf8ff !important;
  font-size: 14.5px !important;
  line-height: 1.22 !important;
  letter-spacing: 0.015em;
}

.nautico-recipient-v13
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  p {
  font-size: 11.5px !important;
  line-height: 1.38 !important;
}

.nautico-recipient-v13
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  small {
  font-size: 10px !important;
  line-height: 1.32 !important;
}

.nautico-recipient-v13
  :is(.nautico-recipient-conversation, .nautico-recipient-handoff)
  :is(input, textarea) {
  color: #dfefff !important;

  font-size: 12px !important;
  line-height: 1.35 !important;

  border-color: rgba(84, 139, 203, 0.42) !important;

  background: rgba(2, 13, 30, 0.76) !important;

  box-shadow: inset 0 1px 8px rgba(0, 5, 17, 0.24) !important;
}

.nautico-recipient-v13
  :is(.nautico-recipient-conversation, .nautico-recipient-handoff)
  :is(input, textarea)::-moz-placeholder {
  color: rgba(168, 190, 215, 0.7) !important;
}

.nautico-recipient-v13
  :is(.nautico-recipient-conversation, .nautico-recipient-handoff)
  :is(input, textarea)::placeholder {
  color: rgba(168, 190, 215, 0.7) !important;
}

/* --------------------------------------------------------------------------
   CTA — purple -> electric blue -> cyan
   -------------------------------------------------------------------------- */

.nautico-recipient-v13 .nautico-recipient-v8b-package button {
  min-height: 52px;

  color: #fff !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em;

  border: 1px solid rgba(119, 204, 255, 0.52) !important;

  background: linear-gradient(
    108deg,
    #6b31ff 0%,
    #5037ff 18%,
    #266cff 47%,
    #169de9 73%,
    #28d4e8 100%
  ) !important;

  box-shadow:
    0 0 0 1px rgba(87, 96, 255, 0.08),
    0 10px 28px rgba(39, 79, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.nautico-recipient-v13 .nautico-recipient-v8b-package button:hover {
  filter: brightness(1.06) saturate(1.05);
}

/* --------------------------------------------------------------------------
   ACTION BUTTONS
   -------------------------------------------------------------------------- */

.nautico-recipient-v13 .nautico-recipient-v8b-actions button {
  min-height: 31px;

  font-size: 10.5px !important;
  line-height: 1.1 !important;

  border-color: rgba(86, 146, 216, 0.42) !important;

  background: linear-gradient(
    180deg,
    rgba(8, 28, 52, 0.84),
    rgba(3, 17, 35, 0.88)
  ) !important;
}

.nautico-recipient-v13 .nautico-recipient-v8b-actions button:hover {
  border-color: rgba(63, 202, 255, 0.62) !important;

  background: linear-gradient(
    180deg,
    rgba(10, 46, 79, 0.88),
    rgba(4, 25, 49, 0.9)
  ) !important;
}

/* --------------------------------------------------------------------------
   DESKTOP / LAPTOP FINAL GEOMETRY
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .nautico-recipient-v13.nautico-recipient-stage {
    padding: 3px 0 8px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-shell {
    width: min(1500px, calc(100vw - 28px)) !important;

    max-width: none !important;
  }

  /* Existing logo / protection top bar. */
  .nautico-recipient-v13 .nautico-recipient-shell > :first-child {
    position: relative;
    z-index: 5;

    min-height: 40px;

    margin-bottom: 4px !important;

    padding: 0 12px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-brand-logo {
    position: relative;
    z-index: 6;
  }

  /* Protection level, when rendered as the existing direct span. */
  .nautico-recipient-v13
    .nautico-recipient-shell
    > :first-child
    > span:last-child {
    border: 1px solid rgba(38, 193, 255, 0.5) !important;

    border-radius: 999px;

    padding: 7px 14px !important;

    color: #b9edff !important;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;

    background: rgba(2, 18, 38, 0.7) !important;

    box-shadow: inset 0 0 16px rgba(27, 161, 255, 0.04) !important;
  }

  .nautico-recipient-v13 .nautico-recipient-shell-card {
    border-radius: 26px !important;

    border-color: rgba(50, 125, 204, 0.43) !important;
  }

  /*
     * The inserted flow field is direct child #1.
     * The pre-existing hero core therefore remains direct child #2.
     */
  .nautico-recipient-v13
    .nautico-recipient-shell-card
    > :nth-child(2):not(.nautico-recipient-content) {
    min-height: 132px;

    padding: 16px 28px 10px !important;

    margin: 0 !important;
  }

  .nautico-recipient-v13
    .nautico-recipient-shell-card
    > :nth-child(2)
    :is(h1, h2) {
    margin-top: 4px !important;
    margin-bottom: 3px !important;

    color: #f2f9ff !important;

    font-size: clamp(32px, 2.4vw, 40px) !important;

    line-height: 1.02 !important;
    letter-spacing: -0.025em;
  }

  .nautico-recipient-v13 .nautico-recipient-shell-card > :nth-child(2) p {
    margin-top: 4px !important;
    margin-bottom: 8px !important;

    color: #d4e6f6 !important;

    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  .nautico-recipient-v13 .nautico-recipient-content {
    padding: 16px 20px 17px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 11px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 11px !important;

    margin-top: 11px !important;
  }

  .nautico-recipient-v13
    :is(
      .nautico-recipient-v8b-package,
      .nautico-recipient-v8b-security,
      .nautico-recipient-conversation,
      .nautico-recipient-handoff
    ) {
    padding: 11px 13px !important;
  }
}

/* --------------------------------------------------------------------------
   1280 / 1366 SHORT LAPTOP
   Increase V12 slightly, but protect the no-scroll requirement.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) and (max-height: 790px) {
  .nautico-recipient-v13
    .nautico-recipient-shell-card
    > :nth-child(2):not(.nautico-recipient-content) {
    min-height: 126px;

    padding: 13px 24px 8px !important;
  }

  .nautico-recipient-v13
    .nautico-recipient-shell-card
    > :nth-child(2)
    :is(h1, h2) {
    font-size: clamp(31px, 2.45vw, 35px) !important;
  }

  .nautico-recipient-v13 .nautico-recipient-content {
    padding: 14px 18px 15px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-main {
    gap: 9px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-actions {
    gap: 9px !important;
    margin-top: 9px !important;
  }

  .nautico-recipient-v13
    :is(.nautico-recipient-v8b-package, .nautico-recipient-v8b-security) {
    min-height: 174px;
  }

  .nautico-recipient-v13
    :is(.nautico-recipient-conversation, .nautico-recipient-handoff) {
    min-height: 178px;
  }

  .nautico-recipient-v13
    :is(
      .nautico-recipient-v8b-package,
      .nautico-recipient-v8b-security,
      .nautico-recipient-conversation,
      .nautico-recipient-handoff
    ) {
    padding: 9px 11px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-package button {
    min-height: 49px;
    font-size: 13px !important;
  }
}

/* --------------------------------------------------------------------------
   TALLER DESKTOP — make it clearly larger than V12A without wasting height.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) and (min-height: 791px) {
  .nautico-recipient-v13
    :is(.nautico-recipient-v8b-package, .nautico-recipient-v8b-security) {
    min-height: 202px;
  }

  .nautico-recipient-v13
    :is(.nautico-recipient-conversation, .nautico-recipient-handoff) {
    min-height: 208px;
  }

  .nautico-recipient-v13
    :is(
      .nautico-recipient-v8b-package,
      .nautico-recipient-v8b-security,
      .nautico-recipient-conversation,
      .nautico-recipient-handoff
    ) {
    padding: 13px 15px !important;
  }

  .nautico-recipient-v13 .nautico-recipient-v8b-package button {
    min-height: 55px;
    font-size: 14.5px !important;
  }
}

/* --------------------------------------------------------------------------
   WIDE / 2K / ULTRAWIDE
   Do not let the page become tiny in the centre.
   -------------------------------------------------------------------------- */

@media (min-width: 1700px) {
  .nautico-recipient-v13 .nautico-recipient-shell {
    width: min(1540px, calc(100vw - 72px)) !important;
  }

  .nautico-recipient-v13
    .nautico-recipient-shell-card
    > :nth-child(2)
    :is(h1, h2) {
    font-size: 40px !important;
  }

  .nautico-recipient-v13
    :is(
      .nautico-recipient-v8b-package,
      .nautico-recipient-v8b-security,
      .nautico-recipient-conversation,
      .nautico-recipient-handoff
    ) {
    padding: 14px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   MOBILE / TABLET
   Preserve natural vertical scrolling but never introduce horizontal overflow.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .nautico-recipient-v13-flow-field {
    opacity: 0.66;
  }

  .nautico-recipient-v13-flow-svg {
    inset: 0 -24%;
    width: 148%;
  }

  .nautico-recipient-v13-flow-a {
    opacity: 0.5;
  }

  .nautico-recipient-v13-flow-b,
  .nautico-recipient-v13-flow-c {
    opacity: 0.36;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY — reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nautico-recipient-v13-flow,
  .nautico-recipient-v13-flow-line,
  .nautico-recipient-v13-particle {
    animation: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13C
   Compact premium hero + continuous flowing energy lines
   ========================================================================== */

/* --------------------------------------------------------------------------
   UNIFIED OUTER SHELL
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c .nautico-recipient-shell {
  box-sizing: border-box;

  overflow: hidden;

  border: 1px solid rgba(65, 123, 187, 0.48);

  border-radius: 27px;

  background: linear-gradient(
    145deg,
    rgba(1, 7, 18, 0.98),
    rgba(2, 14, 30, 0.97)
  );

  box-shadow:
    0 22px 68px rgba(0, 4, 16, 0.24),
    inset 0 1px 0 rgba(116, 202, 255, 0.035);
}

/* --------------------------------------------------------------------------
   COMPACT TOP BAR
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c .nautico-recipient-shell > :first-child {
  box-sizing: border-box;

  width: 100%;

  min-height: 46px !important;

  margin: 0 !important;

  padding: 0 18px !important;

  display: flex !important;

  align-items: center !important;

  border-bottom: 1px solid rgba(68, 117, 169, 0.28);

  background: linear-gradient(
    180deg,
    rgba(1, 8, 20, 0.98),
    rgba(2, 12, 27, 0.91)
  );
}

.nautico-recipient-v13c .nautico-recipient-brand-logo {
  position: relative;

  z-index: 8;
}

/*
 * Hide old direct protection-level span if present.
 * We keep the real data/functionality unchanged; only the duplicate
 * top-bar presentation is replaced by V13C's dedicated pill.
 */

.nautico-recipient-v13c
  .nautico-recipient-shell
  > :first-child
  > span:last-child {
  display: none !important;
}

.nautico-recipient-v13c-secure-pill {
  position: relative;

  z-index: 8;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-left: auto;

  min-height: 31px;

  padding: 0 14px;

  border: 1px solid rgba(36, 199, 255, 0.64);

  border-radius: 999px;

  color: #bcefff;

  background: linear-gradient(
    180deg,
    rgba(3, 28, 53, 0.83),
    rgba(2, 17, 36, 0.78)
  );

  box-shadow:
    inset 0 0 18px rgba(36, 192, 255, 0.05),
    0 0 18px rgba(28, 122, 255, 0.04);

  font-size: 10.5px;

  line-height: 1;

  font-weight: 700;

  letter-spacing: 0.15em;

  white-space: nowrap;
}

.nautico-recipient-v13c-secure-pill svg {
  width: 15px;

  height: 15px;

  stroke: #47ddff;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

  filter: drop-shadow(0 0 4px rgba(52, 218, 255, 0.55));
}

/* --------------------------------------------------------------------------
   SHELL CARD BECOMES CONTINUATION OF TOP BAR
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c .nautico-recipient-shell-card {
  border: 0 !important;

  border-radius: 0 0 26px 26px !important;

  background:
    radial-gradient(
      760px 310px at 85% 9%,
      rgba(20, 104, 223, 0.14),
      transparent 68%
    ),
    radial-gradient(
      650px 300px at 4% 96%,
      rgba(15, 79, 190, 0.08),
      transparent 72%
    ),
    linear-gradient(150deg, rgba(1, 8, 21, 0.96), rgba(2, 17, 36, 0.94)) !important;
}

/* --------------------------------------------------------------------------
   ORIGINAL HERO GEOMETRY IS PRESERVED.
   Direct child #1 = V13 flow field.
   Direct child #2 = original hero.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .nautico-recipient-v13c
    .nautico-recipient-shell-card
    > :nth-child(2):not(.nautico-recipient-content) {
    box-sizing: border-box;

    position: relative;

    z-index: 4;

    min-height: 178px !important;

    margin: 0 !important;

    padding: 22px 28px 15px 154px !important;
  }

  .nautico-recipient-v13c
    .nautico-recipient-shell-card
    > :nth-child(2)
    :is(h1, h2) {
    margin: 5px 0 4px !important;

    font-size: clamp(34px, 2.45vw, 42px) !important;

    line-height: 1 !important;

    letter-spacing: -0.025em;
  }

  .nautico-recipient-v13c .nautico-recipient-shell-card > :nth-child(2) p {
    margin-top: 4px !important;

    margin-bottom: 8px !important;

    font-size: 13px !important;

    line-height: 1.34 !important;
  }
}

/* Short laptop: preserve text size but reclaim vertical space. */

@media (min-width: 1280px) and (max-height: 790px) {
  .nautico-recipient-v13c .nautico-recipient-shell > :first-child {
    min-height: 42px !important;

    padding: 0 16px !important;
  }

  .nautico-recipient-v13c-secure-pill {
    min-height: 29px;

    padding: 0 12px;

    font-size: 10px;
  }

  .nautico-recipient-v13c
    .nautico-recipient-shell-card
    > :nth-child(2):not(.nautico-recipient-content) {
    min-height: 158px !important;

    padding: 16px 22px 11px 130px !important;
  }

  .nautico-recipient-v13c
    .nautico-recipient-shell-card
    > :nth-child(2)
    :is(h1, h2) {
    font-size: 34px !important;
  }
}

/* --------------------------------------------------------------------------
   SHIELD — INSIDE EXISTING HERO, NOT A NEW LAYOUT ROW
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c-hero-shield {
  position: absolute;

  left: 31px;

  top: 50%;

  z-index: 7;

  width: 90px;

  height: 108px;

  pointer-events: none;

  transform: translateY(-50%);

  filter: drop-shadow(0 0 7px rgba(48, 207, 255, 0.58))
    drop-shadow(0 0 20px rgba(29, 111, 255, 0.36));

  animation: nauticoRecipientV13CShield 5.6s ease-in-out infinite alternate;
}

.nautico-recipient-v13c-hero-shield svg {
  display: block;

  width: 100%;

  height: 100%;
}

.nautico-recipient-v13c-shield-body {
  fill: url(#nautico-v13c-shield-fill);

  stroke: url(#nautico-v13c-shield-edge);

  stroke-width: 2.1;
}

.nautico-recipient-v13c-lock-body,
.nautico-recipient-v13c-lock-loop,
.nautico-recipient-v13c-lock-key {
  fill: rgba(7, 48, 82, 0.72);

  stroke: #5cecff;

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-linejoin: round;
}

.nautico-recipient-v13c-lock-loop,
.nautico-recipient-v13c-lock-key {
  fill: none;
}

.nautico-recipient-v13c-lock-dot {
  fill: #68eeff;
}

@keyframes nauticoRecipientV13CShield {
  from {
    transform: translateY(calc(-50% - 2px));
  }

  to {
    transform: translateY(calc(-50% + 3px));
  }
}

@media (min-width: 1280px) and (max-height: 790px) {
  .nautico-recipient-v13c-hero-shield {
    left: 27px;

    width: 75px;

    height: 90px;
  }
}

/* --------------------------------------------------------------------------
   FLOW FIELD
   IMPORTANT:
   - continuous lines, not barcode/dashes
   - primary bundle moved to right side
   - lower bundle remains more subtle
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c .nautico-recipient-v13-flow-field {
  z-index: 1 !important;

  opacity: 1 !important;

  overflow: hidden;

  background: radial-gradient(
    ellipse at 82% 24%,
    rgba(20, 107, 235, 0.115),
    transparent 44%
  );
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-svg {
  inset: -3% -4% !important;

  width: 108% !important;

  height: 106% !important;
}

/*
 * Remove the segmented "barcode" appearance.
 * The groups themselves animate, so the wave is still visibly alive.
 */

.nautico-recipient-v13c .nautico-recipient-v13-flow-line {
  stroke-dasharray: none !important;

  stroke-dashoffset: 0 !important;

  animation: none !important;

  stroke-width: 0.92 !important;

  opacity: 0.55 !important;

  filter: drop-shadow(0 0 2px rgba(45, 171, 255, 0.58));
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-line:nth-child(3n + 1) {
  stroke-width: 1.34 !important;

  opacity: 0.78 !important;
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-line:nth-child(3n + 2) {
  stroke-width: 0.72 !important;

  opacity: 0.47 !important;
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-line:nth-child(3n) {
  stroke-width: 0.52 !important;

  opacity: 0.33 !important;
}

/* Main wave bundle: visually concentrated on the right. */

.nautico-recipient-v13c .nautico-recipient-v13-flow-a {
  opacity: 0.88 !important;

  clip-path: inset(0 0 0 20%);

  animation: nauticoRecipientV13CFlowA 13s ease-in-out infinite alternate;
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-b {
  opacity: 0.61 !important;

  clip-path: inset(0 0 0 24%);

  animation: nauticoRecipientV13CFlowB 17s ease-in-out infinite
    alternate-reverse;
}

.nautico-recipient-v13c .nautico-recipient-v13-flow-c {
  opacity: 0.42 !important;

  animation: nauticoRecipientV13CFlowC 22s ease-in-out infinite alternate;
}

@keyframes nauticoRecipientV13CFlowA {
  0% {
    transform: translate3d(120px, -5px, 0) scaleX(1.025);
  }

  50% {
    transform: translate3d(158px, 5px, 0) scaleX(1.035);
  }

  100% {
    transform: translate3d(205px, -3px, 0) scaleX(1.025);
  }
}

@keyframes nauticoRecipientV13CFlowB {
  0% {
    transform: translate3d(165px, 7px, 0) scaleX(1.02);
  }

  50% {
    transform: translate3d(125px, -5px, 0) scaleX(1.03);
  }

  100% {
    transform: translate3d(82px, 4px, 0) scaleX(1.02);
  }
}

@keyframes nauticoRecipientV13CFlowC {
  0% {
    transform: translate3d(-35px, 5px, 0) scaleX(1.01);
  }

  50% {
    transform: translate3d(2px, -4px, 0) scaleX(1.025);
  }

  100% {
    transform: translate3d(42px, 6px, 0) scaleX(1.015);
  }
}

/* Particles remain subtle. */

.nautico-recipient-v13c .nautico-recipient-v13-particles {
  opacity: 0.68;

  filter: drop-shadow(0 0 3px rgba(67, 227, 255, 0.8));
}

/* --------------------------------------------------------------------------
   LET FLOW SHOW AROUND / BETWEEN CARDS
   -------------------------------------------------------------------------- */

.nautico-recipient-v13c .nautico-recipient-content {
  position: relative;

  z-index: 2;

  border-top: 1px solid rgba(92, 144, 197, 0.28);

  background: linear-gradient(
    180deg,
    rgba(3, 16, 33, 0.32),
    rgba(2, 13, 29, 0.45)
  ) !important;
}

.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  ) {
  border-color: rgba(48, 151, 240, 0.53) !important;

  background:
    radial-gradient(
      430px 170px at 14% 0%,
      rgba(29, 109, 211, 0.1),
      transparent 72%
    ),
    linear-gradient(145deg, rgba(4, 24, 47, 0.81), rgba(1, 12, 29, 0.87)) !important;

  backdrop-filter: blur(8px) saturate(1.06);

  box-shadow:
    inset 0 1px 0 rgba(125, 211, 255, 0.06),
    0 12px 30px rgba(0, 4, 17, 0.13) !important;
}

/* Keep the existing V13 CTA concept. */

.nautico-recipient-v13c .nautico-recipient-v8b-package button {
  background: linear-gradient(
    108deg,
    #6734ff 0%,
    #513aff 18%,
    #246cff 47%,
    #159ce9 73%,
    #28d4e8 100%
  ) !important;
}

/* --------------------------------------------------------------------------
   MOBILE — natural vertical scroll remains allowed
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .nautico-recipient-v13c .nautico-recipient-shell {
    border-radius: 22px;
  }

  .nautico-recipient-v13c .nautico-recipient-shell-card {
    border-radius: 0 0 21px 21px !important;
  }

  .nautico-recipient-v13c-secure-pill {
    display: none;
  }

  .nautico-recipient-v13c-hero-shield {
    display: none;
  }

  .nautico-recipient-v13c .nautico-recipient-v13-flow-a,
  .nautico-recipient-v13c .nautico-recipient-v13-flow-b {
    clip-path: none;
  }
}

/* --------------------------------------------------------------------------
   ACCESSIBILITY
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nautico-recipient-v13c .nautico-recipient-v13-flow-a,
  .nautico-recipient-v13c .nautico-recipient-v13-flow-b,
  .nautico-recipient-v13c .nautico-recipient-v13-flow-c,
  .nautico-recipient-v13c .nautico-recipient-v13-particle,
  .nautico-recipient-v13c-hero-shield {
    animation: none !important;

    transform: none !important;
  }

  .nautico-recipient-v13c-hero-shield {
    transform: translateY(-50%) !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13E-R2
   Exact hero-child separation + real full-size animated flow
   ========================================================================== */

/* --------------------------------------------------------------------------
   FLOW FIELD — fix confirmed V13C height:0 issue
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-shell-card
  > .nautico-recipient-v13-flow-field {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 100% !important;
  min-height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  z-index: 1 !important;

  overflow: hidden !important;

  pointer-events: none !important;

  opacity: 1 !important;

  mix-blend-mode: screen;

  background:
    radial-gradient(
      ellipse at 81% 20%,
      rgba(18, 111, 242, 0.18),
      transparent 44%
    ),
    radial-gradient(
      ellipse at 28% 92%,
      rgba(15, 87, 212, 0.075),
      transparent 48%
    ) !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-flow-field
  > .nautico-recipient-v13-flow-svg {
  position: absolute !important;

  top: -3% !important;
  left: -3% !important;

  width: 106% !important;
  height: 106% !important;

  max-width: none !important;
  max-height: none !important;

  overflow: visible !important;
}

/* --------------------------------------------------------------------------
   WAVES — continuous and actually visible
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a,
.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b,
.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-c {
  clip-path: none !important;

  transform-box: fill-box !important;
  transform-origin: center !important;

  will-change: transform;

  filter: drop-shadow(0 0 3px rgba(38, 157, 255, 0.72))
    drop-shadow(0 0 9px rgba(44, 217, 255, 0.24)) !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a {
  opacity: 0.92 !important;

  animation: nauticoRecipientV13ER2FlowA 11s cubic-bezier(0.45, 0, 0.55, 1)
    infinite alternate !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b {
  opacity: 0.72 !important;

  animation: nauticoRecipientV13ER2FlowB 15s cubic-bezier(0.42, 0, 0.58, 1)
    infinite alternate-reverse !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-c {
  opacity: 0.48 !important;

  animation: nauticoRecipientV13ER2FlowC 19s ease-in-out infinite alternate !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-flow-line {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;

  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  stroke-width: 0.9 !important;

  opacity: 0.56 !important;

  animation: nauticoRecipientV13ER2LinePulse 5.5s ease-in-out infinite alternate !important;

  filter: drop-shadow(0 0 2px rgba(55, 191, 255, 0.72));
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-flow-line:nth-child(3n + 1) {
  stroke-width: 1.5 !important;
  opacity: 0.88 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-flow-line:nth-child(3n + 2) {
  stroke-width: 0.72 !important;
  opacity: 0.5 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-flow-line:nth-child(3n) {
  stroke-width: 0.52 !important;
  opacity: 0.36 !important;
}

@keyframes nauticoRecipientV13ER2FlowA {
  0% {
    transform: translate3d(42px, -4px, 0) scaleX(1.015);
  }

  50% {
    transform: translate3d(79px, 7px, 0) scaleX(1.028);
  }

  100% {
    transform: translate3d(116px, -3px, 0) scaleX(1.018);
  }
}

@keyframes nauticoRecipientV13ER2FlowB {
  0% {
    transform: translate3d(112px, 7px, 0) scaleX(1.02);
  }

  50% {
    transform: translate3d(70px, -6px, 0) scaleX(1.03);
  }

  100% {
    transform: translate3d(28px, 5px, 0) scaleX(1.018);
  }
}

@keyframes nauticoRecipientV13ER2FlowC {
  0% {
    transform: translate3d(-22px, 5px, 0) scaleX(1.01);
  }

  50% {
    transform: translate3d(8px, -5px, 0) scaleX(1.023);
  }

  100% {
    transform: translate3d(39px, 6px, 0) scaleX(1.015);
  }
}

@keyframes nauticoRecipientV13ER2LinePulse {
  from {
    opacity: 0.42;
  }

  to {
    opacity: 0.86;
  }
}

/* --------------------------------------------------------------------------
   HERO
   Keep the existing geometry that already fits.
   Do NOT rely on padding-left to separate content anymore.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-shell-card
    > .nautico-recipient-hero__top {
    position: relative !important;

    z-index: 3 !important;

    box-sizing: border-box !important;

    min-height: 180px !important;

    margin: 0 !important;

    padding: 22px 28px 16px 28px !important;

    overflow: hidden !important;

    background: linear-gradient(
      100deg,
      rgba(1, 10, 24, 0.64),
      rgba(1, 11, 27, 0.38) 47%,
      rgba(2, 20, 39, 0.08)
    ) !important;
  }

  /*
     * EXACT DOM FIX:
     *
     * direct child 0 = shield
     * direct child 1 = SECURE DELIVERY
     * direct child 2 = sender
     * direct child 3 = h1
     * direct child 4 = metadata
     *
     * Move every REAL content child, instead of fighting hero padding.
     */

  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-hero__top
    > :not(.nautico-recipient-v13c-hero-shield) {
    box-sizing: border-box !important;

    margin-left: 112px !important;

    width: calc(100% - 112px) !important;

    max-width: calc(100% - 112px) !important;
  }

  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-hero__top
    > h1 {
    width: auto !important;

    max-width: 680px !important;

    margin-top: 5px !important;
    margin-bottom: 0 !important;

    font-size: clamp(35px, 2.55vw, 42px) !important;

    line-height: 1 !important;

    letter-spacing: -0.025em !important;
  }
}

/* Short laptop */

@media (min-width: 1280px) and (max-height: 790px) {
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-shell-card
    > .nautico-recipient-hero__top {
    min-height: 168px !important;

    padding: 18px 28px 12px 28px !important;
  }

  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-hero__top
    > :not(.nautico-recipient-v13c-hero-shield) {
    margin-left: 104px !important;

    width: calc(100% - 104px) !important;

    max-width: calc(100% - 104px) !important;
  }

  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-hero__top
    > h1 {
    width: auto !important;

    max-width: 680px !important;

    font-size: 35px !important;
  }
}

/* --------------------------------------------------------------------------
   SHIELD
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-hero__top
  > .nautico-recipient-v13c-hero-shield {
  left: 27px !important;

  top: 50% !important;

  width: 75px !important;
  height: 90px !important;

  z-index: 6 !important;
}

/* --------------------------------------------------------------------------
   CONTENT / CARDS
   Same dimensions that already passed in R1.
   -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-shell-card
    > .nautico-recipient-content {
    position: relative !important;

    z-index: 2 !important;

    padding: 18px 28px 18px !important;

    background: linear-gradient(
      180deg,
      rgba(3, 16, 33, 0.18),
      rgba(2, 13, 29, 0.32)
    ) !important;
  }

  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-content
    > .nautico-recipient-v8b-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 12px !important;

    align-items: stretch !important;
  }

  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v8b-main
    > .nautico-recipient-v8b-package,
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v8b-main
    > .nautico-recipient-v8b-security {
    min-height: 210px !important;

    padding: 12px 14px !important;
  }

  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-content
    > .nautico-recipient-v8b-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 12px !important;

    margin-top: 12px !important;

    align-items: stretch !important;
  }

  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    > .nautico-recipient-conversation,
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    > .nautico-recipient-handoff {
    min-height: 195px !important;

    margin-top: 0 !important;

    padding: 12px 14px !important;
  }
}

/* --------------------------------------------------------------------------
   CARD GLASS + TEXT
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  ) {
  border-color: rgba(48, 157, 247, 0.56) !important;

  background:
    radial-gradient(
      460px 190px at 15% 0%,
      rgba(30, 111, 216, 0.1),
      transparent 72%
    ),
    linear-gradient(145deg, rgba(4, 25, 48, 0.79), rgba(1, 12, 29, 0.86)) !important;

  backdrop-filter: blur(8px) saturate(1.06);
}

.nautico-recipient-stage.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  :is(h2, h3) {
  font-size: 15.5px !important;
  line-height: 1.2 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v8b-package
  button {
  min-height: 54px !important;

  font-size: 15px !important;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a,
  .nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b,
  .nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-c,
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v13-flow-line {
    animation: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13F-R3
   CONTINUOUS DATA RAILS + MOVING PACKETS
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONT — slight increase only
   -------------------------------------------------------------------------- */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-shell-card
  > .nautico-recipient-hero__top
  > h1 {
  font-size: clamp(36.5px, 2.65vw, 43px) !important;
}

@media (min-width: 1280px) and (max-height: 790px) {
  html
    body
    .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-shell-card
    > .nautico-recipient-hero__top
    > h1 {
    font-size: 36.5px !important;
  }
}

.nautico-recipient-stage.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  :is(h2, h3) {
  font-size: 16.4px !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  :is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-v8b-security,
    .nautico-recipient-conversation,
    .nautico-recipient-handoff
  )
  p {
  font-size: 12.7px !important;

  line-height: 1.4 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v8b-package
  button {
  font-size: 16px !important;
}

/* --------------------------------------------------------------------------
   IMPORTANT:
   Rails do NOT move.
   This keeps all lines parallel and visually stable.
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a,
.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b,
.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-c {
  animation: none !important;

  transform: none !important;

  will-change: auto !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a {
  opacity: 0.88 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b {
  opacity: 0.7 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-c {
  opacity: 0.46 !important;
}

/* --------------------------------------------------------------------------
   CONTINUOUS CARRIER RAIL
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-carrier {
  fill: none !important;

  stroke-dasharray: none !important;

  stroke-dashoffset: 0 !important;

  animation: none !important;

  stroke-linecap: round !important;

  stroke-linejoin: round !important;

  stroke-width: 0.72px !important;

  opacity: 0.3 !important;

  filter: drop-shadow(0 0 1.6px rgba(47, 164, 255, 0.48)) !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-carrier:nth-child(4n + 1) {
  stroke-width: 0.92px !important;

  opacity: 0.39 !important;
}

/* --------------------------------------------------------------------------
   DATA PACKETS
   Duplicate path over carrier.
   Only this layer moves.
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-packet {
  fill: none !important;

  stroke: #5edcff !important;

  stroke-linecap: round !important;

  stroke-linejoin: round !important;

  stroke-width: 1.35px !important;

  opacity: 0.92 !important;

  /*
     * Sparse packets over a continuous rail.
     * pathLength=100 normalizes the pattern.
     */
  stroke-dasharray: 5 15 1 24 3 52 !important;

  stroke-dashoffset: 0;

  animation: nauticoRecipientV13FR3PacketTravel 3.05s linear infinite !important;

  filter: drop-shadow(0 0 2px rgba(72, 226, 255, 0.94))
    drop-shadow(0 0 6px rgba(33, 132, 255, 0.34)) !important;

  will-change: stroke-dashoffset;
}

/* Alternate packet speeds, still SAME direction */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-packet:nth-child(4n + 2) {
  stroke-width: 1.55px !important;

  opacity: 0.96 !important;

  stroke-dasharray: 6 17 1 27 2 47 !important;

  animation-duration: 2.45s !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-packet:nth-child(4n) {
  stroke-width: 1.05px !important;

  opacity: 0.74 !important;

  stroke-dasharray: 3 18 1 30 2 46 !important;

  animation-duration: 3.65s !important;
}

@keyframes nauticoRecipientV13FR3PacketTravel {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }
}

/* --------------------------------------------------------------------------
   PARTICLES
   Keep subtle, do not compete with data rails.
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-particles {
  opacity: 0.7 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13-particle {
  animation: nauticoRecipientV13FR3NodePulse 5.5s ease-in-out infinite alternate !important;
}

@keyframes nauticoRecipientV13FR3NodePulse {
  from {
    opacity: 0.14;

    transform: scale(0.82);
  }

  to {
    opacity: 0.6;

    transform: scale(1.16);
  }
}

/* --------------------------------------------------------------------------
   ACTIVE PROTECTION
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-list {
  margin-top: 9px !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-head {
  display: flex !important;

  flex-wrap: wrap !important;

  align-items: baseline !important;

  gap: 4px 10px !important;

  margin-bottom: 7px !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-head
  strong {
  color: #70e4ff !important;

  font-size: 12px !important;

  line-height: 1 !important;

  text-transform: uppercase;

  letter-spacing: 0.13em;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-head
  span {
  color: rgba(205, 230, 250, 0.68) !important;

  font-size: 11.6px !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-pills {
  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  margin: 0 !important;
}

.nautico-recipient-stage.nautico-recipient-v13c
  .nautico-recipient-v13f-r3-policy-pills
  > span {
  padding: 5px 9px !important;

  border: 1px solid rgba(57, 177, 243, 0.38) !important;

  border-radius: 999px !important;

  background: rgba(4, 24, 45, 0.82) !important;

  color: rgba(230, 247, 255, 0.96) !important;

  font-size: 10.9px !important;

  line-height: 1 !important;

  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v13f-r3-packet,
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v13-particle {
    animation: none !important;
  }

  .nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-a,
  .nautico-recipient-stage.nautico-recipient-v13c .nautico-recipient-v13-flow-b,
  .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v13-flow-c {
    animation: none !important;

    transform: none !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13F-R4-R2
   FINAL READABILITY
   ========================================================================== */

.nautico-recipient-stage.nautico-recipient-v13c {
  --nautico-recipient-r4r2-readable: 1;
}

/* HERO */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-shell-card
  > .nautico-recipient-hero__top
  > h1 {
  font-size: 38px !important;
  line-height: 1.02 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-shell-card
  > .nautico-recipient-hero__top
  > p {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

/* PACKAGE */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-package
  h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-package
  p {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-package
  strong {
  font-size: 15.5px !important;
  line-height: 1.2 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-package
  span {
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-package
  button.nautico-recipient-download {
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}

/* SECURITY HEADER */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  h2 {
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  > p {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* ==============================================================
   EXACT REAL SECURE STATE
   Previous audit confirmed this is the real class.
   ============================================================== */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v9b-secure-state
  strong {
  font-size: 16px !important;
  line-height: 1.18 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v9b-secure-state
  p {
  margin-top: 4px !important;

  font-size: 13.5px !important;
  line-height: 1.28 !important;
}

/* ACTIVE PROTECTION */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v13f-r3-policy-head
  strong {
  font-size: 13.5px !important;
  line-height: 1.1 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v13f-r3-policy-head
  span {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v13f-r3-policy-pills
  > span {
  font-size: 11.8px !important;
  line-height: 1 !important;

  padding: 6px 9px !important;

  min-height: 26px !important;
}

/* ADVANCED SECURITY COLLAPSED ROW */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v9b-details-title {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  .nautico-recipient-v9b-details-action {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}

/* EXPANDED SECURITY */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  details
  h2 {
  font-size: 15px !important;
  line-height: 1.2 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-v8b-security
  details
  :is(p, span, label) {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* CONVERSATION */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  h2 {
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  p {
  font-size: 13px !important;
  line-height: 1.3 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  span {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  .text-muted {
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  textarea.min-h-72 {
  font-size: 14.5px !important;
  line-height: 1.35 !important;

  min-height: 42px !important;

  padding: 9px 12px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  textarea.min-h-72::-moz-placeholder {
  font-size: 14.5px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  textarea.min-h-72::placeholder {
  font-size: 14.5px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-conversation
  button.self-end {
  font-size: 12.5px !important;
  line-height: 1.1 !important;

  min-height: 36px !important;

  padding: 8px 12px !important;
}

/* HANDOFF */

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-handoff
  h2 {
  font-size: 16px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.04em !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-handoff
  textarea.min-h-72 {
  font-size: 14.5px !important;
  line-height: 1.35 !important;

  min-height: 42px !important;

  padding: 9px 12px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-handoff
  textarea.min-h-72::-moz-placeholder {
  font-size: 14.5px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-handoff
  textarea.min-h-72::placeholder {
  font-size: 14.5px !important;
}

html
  body
  .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
  .nautico-recipient-content
  .nautico-recipient-handoff
  button.rounded-button {
  font-size: 12.5px !important;
  line-height: 1.1 !important;

  min-height: 32px !important;

  padding: 7px 11px !important;
}

/* SHORT LAPTOP — KEEP THE SAME READABLE SIZE */

@media (min-width: 1280px) and (max-height: 790px) {
  html
    body
    .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-shell-card
    > .nautico-recipient-hero__top
    > h1 {
    font-size: 38px !important;
  }
}

/* MOBILE */

@media (max-width: 767px) {
  html
    body
    .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-content
    :is(.nautico-recipient-v8b-package, .nautico-recipient-v8b-security)
    h2 {
    font-size: 17px !important;
  }

  html
    body
    .nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-content
    :is(.nautico-recipient-conversation, .nautico-recipient-handoff)
    h2 {
    font-size: 15px !important;
  }
}

/* ==========================================================================
   NAUTICO RECIPIENT V13F-R5-R1
   Final visual refinement on reformatted R4-R2 baseline
   ========================================================================== */

.nautico-recipient-stage.nautico-recipient-v13c {
    --nautico-recipient-r5r1-active: 1;
}

/* --------------------------------------------------------------------------
   SECONDARY METADATA
   -------------------------------------------------------------------------- */

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
.nautico-recipient-v8b-package
.text-muted {
    font-size: 12.25px !important;
    line-height: 1.2 !important;
}

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
.nautico-recipient-conversation
.text-muted {
    font-size: 12.25px !important;
    line-height: 1.2 !important;
}

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
:is(
    .nautico-recipient-v8b-package,
    .nautico-recipient-conversation
)
:is(small, .text-xs) {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

/* Hero stats */

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
.nautico-recipient-hero__top
.nautico-recipient-stat {
    font-size: 11.5px !important;
    line-height: 1.12 !important;
}

/* --------------------------------------------------------------------------
   REMOVE PALE LEFT WASH
   No pseudo-element and no layout change.
   Dark navy veil is part of the content background itself.
   -------------------------------------------------------------------------- */

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
.nautico-recipient-shell-card
> .nautico-recipient-content {
    background:
        linear-gradient(
            90deg,
            rgba(1, 9, 22, 0.94) 0%,
            rgba(2, 13, 28, 0.72) 3.5%,
            rgba(2, 15, 31, 0.42) 7%,
            rgba(2, 15, 31, 0.12) 12%,
            rgba(2, 15, 31, 0) 18%
        ),
        linear-gradient(
            180deg,
            rgba(3, 17, 34, 0.42),
            rgba(2, 13, 29, 0.50)
        ) !important;

    box-shadow:
        inset 28px 0 44px -36px
        rgba(0, 6, 17, 0.86) !important;
}

/* --------------------------------------------------------------------------
   CARRIER RAILS
   Continuous and fixed.
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13f-r3-carrier {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;

    animation: none !important;

    opacity: 0.31 !important;
}

/* --------------------------------------------------------------------------
   DATA PACKETS
   Shorter + more numerous.
   Every rail remains continuous underneath.
   -------------------------------------------------------------------------- */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13f-r3-packet {
    stroke: #65e4ff !important;

    stroke-width: 1.2px !important;

    opacity: 0.92 !important;

    stroke-dasharray:
        2.8 5.5
        1 6.5
        1.8 7.5
        0.8 9
        2.2 10
        1.2 51.7 !important;

    stroke-dashoffset: 0;

    animation:
        nauticoRecipientV13FR5R1PacketTravel
        2.55s
        linear
        infinite !important;

    filter:
        drop-shadow(
            0 0 1.6px
            rgba(86, 229, 255, 0.98)
        )
        drop-shadow(
            0 0 4.5px
            rgba(29, 143, 255, 0.28)
        ) !important;
}

/* Faster rail traffic */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13f-r3-packet:nth-child(6n + 1) {
    stroke-width: 1.42px !important;

    opacity: 0.96 !important;

    stroke-dasharray:
        3.4 5
        0.9 5.5
        1.5 7
        0.8 8
        2.5 9
        1.4 55 !important;

    animation-duration: 1.95s !important;
}

/* Medium */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13f-r3-packet:nth-child(6n + 2) {
    stroke-width: 1.08px !important;

    opacity: 0.78 !important;

    stroke-dasharray:
        2.2 6.5
        0.8 7
        1.5 8
        0.8 10
        2 11
        1.2 49 !important;

    animation-duration: 2.95s !important;
}

/* Slower/fainter */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13f-r3-packet:nth-child(6n + 3) {
    stroke-width: 0.94px !important;

    opacity: 0.68 !important;

    stroke-dasharray:
        1.8 7
        0.7 8
        1.2 9
        0.7 11
        1.7 12
        1 45.9 !important;

    animation-duration: 3.45s !important;
}

@keyframes nauticoRecipientV13FR5R1PacketTravel {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

/* Subtle data nodes */

.nautico-recipient-stage.nautico-recipient-v13c
.nautico-recipient-v13-particles {
    opacity: 0.74 !important;
}

/* Policy pills: slightly stronger contrast only */

html body
.nautico-recipient-stage.nautico-recipient-v7.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
.nautico-recipient-v13f-r3-policy-pills
> span {
    color:
        rgba(237, 250, 255, 0.98) !important;

    border-color:
        rgba(67, 185, 246, 0.47) !important;

    background:
        rgba(3, 22, 43, 0.90) !important;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .nautico-recipient-stage.nautico-recipient-v13c
    .nautico-recipient-v13f-r3-packet {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}


/* ==========================================================================
   NAUTICO RECIPIENT R4D — FINAL SHORT DESKTOP FIT

   Covers:
     1024x768 / 1180x820 short laptop range
     1280x720 short laptop range

   Geometry only.

   No font-size reduction.
   No hidden content.
   No policy clamping.
   No functional change.
   ========================================================================== */

:root {
    --nautico-recipient-r4d-short-desktop-fit: 1;
}

@media
    (min-width: 1024px)
    and (max-width: 1199.98px)
    and (max-height: 820px)
{
    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-content
    {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-main
    {
        gap: 6px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-package,
    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-security
    {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    {
        margin-top: 6px !important;
        gap: 6px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    .nautico-recipient-conversation,
    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    .nautico-recipient-handoff
    {
        margin-top: 4px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

@media
    (min-width: 1200px)
    and (max-width: 1319.98px)
    and (max-height: 740px)
{
    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-content
    {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    {
        margin-top: 8px !important;
        gap: 8px !important;
    }

    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    .nautico-recipient-conversation,
    #root
    .nautico-recipient-stage.nautico-recipient-v8b.nautico-recipient-v13.nautico-recipient-v13c
    .nautico-recipient-v8b-actions
    .nautico-recipient-handoff
    {
        margin-top: 4px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}


/* ==========================================================================
   NAUTICO HOMEPAGE GLASS FRAME R2
   Scope: homepage transfer composer OUTER CARD ONLY.
   No layout, background, React logic or transfer functionality is changed.
   ========================================================================== */

.nautico-home-v2
  .nautico-stage
  .nautico-composer-shell
  > .nautico-premium-card {
  /*
   * Transparent premium glass:
   * ocean remains visible through the card while text and controls retain
   * their existing contrast and functionality.
   */
  background:
    radial-gradient(
      circle at 12% 4%,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(174, 218, 255, 0.055) 24%,
      rgba(100, 175, 255, 0.018) 43%,
      transparent 61%
    ),
    linear-gradient(
      145deg,
      rgba(15, 31, 55, 0.42) 0%,
      rgba(7, 22, 42, 0.30) 48%,
      rgba(4, 17, 34, 0.34) 100%
    ) !important;

  /*
   * Fine ice-blue perimeter.
   * Kept subtle so the frame does not become a neon rectangle.
   */
  border: 1px solid rgba(176, 219, 255, 0.40) !important;

  border-radius: 34px !important;

  /*
   * Enough blur for glass depth, but intentionally translucent enough
   * to preserve the original ocean image behind the composer.
   */
  backdrop-filter:
    blur(22px)
    saturate(1.16) !important;

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.16) !important;

  /*
   * Top glass reflection + soft cyan edge glow + existing dark depth.
   * No pseudo-elements are used, therefore nothing can overlap/capture
   * pointer events from the functional form.
   */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 42px rgba(80, 169, 255, 0.035),
    0 0 0 1px rgba(76, 172, 255, 0.08),
    0 20px 58px rgba(0, 7, 22, 0.31),
    0 0 34px rgba(66, 168, 255, 0.13) !important;

  /*
   * Do not use overflow:hidden:
   * existing status/error UI below Protect must never be cropped.
   */
  background-clip: padding-box !important;
}

/*
 * Slightly reduce glass density on smaller screens.
 * No size/position/layout change.
 */
@media (max-width: 760px) {
  .nautico-home-v2
    .nautico-stage
    .nautico-composer-shell
    > .nautico-premium-card {
    background:
      radial-gradient(
        circle at 12% 4%,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(174, 218, 255, 0.045) 24%,
        transparent 58%
      ),
      linear-gradient(
        145deg,
        rgba(15, 31, 55, 0.44) 0%,
        rgba(6, 20, 39, 0.34) 100%
      ) !important;

    backdrop-filter:
      blur(18px)
      saturate(1.12) !important;

    -webkit-backdrop-filter:
      blur(18px)
      saturate(1.12) !important;
  }
}

/* ================= END NAUTICO HOMEPAGE GLASS FRAME R2 =================== */

/* NAUTICO_R6_PROTECT_GLASS_ACCESS_R1_13_BEGIN
 *
 * CSS-only refresh over current Protect UI.
 * Keep current functionality and current page structure.
 * Restore access to all controls with controlled inner scrolling.
 */

/* Keep homepage inside first screen on desktop, but do not trap Protect content. */
@media (min-width: 821px) {
  .nautico-home-v2 {
    min-height: 100dvh !important;
    height: 100dvh !important;
    overflow: hidden !important;
  }

  .nautico-home-v2 .nautico-stage {
    height: calc(100dvh - 94px) !important;
    max-height: calc(100dvh - 94px) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .nautico-home-v2 .nautico-composer-shell {
    max-height: calc(100dvh - 112px) !important;
  }
}

/* Outer portal/card */
.nautico-protect-portal-root > .nautico-book-protect-page {
  background:
    linear-gradient(180deg, rgba(7, 20, 40, 0.82), rgba(4, 14, 30, 0.92)) !important;
  border: 1px solid rgba(132, 206, 255, 0.20) !important;
  border-radius: 18px !important;
  box-shadow:
    0 22px 70px rgba(0, 6, 22, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(100, 160, 255, 0.05) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  overflow: hidden !important;
}

/* Main structure */
.nautico-book-protect-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  color: #eef7ff !important;
}

/* Header */
.nautico-book-protect-page .nautico-advanced-drawer-header {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(126, 190, 237, 0.12) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(9, 24, 46, 0.66), rgba(8, 20, 39, 0.46)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-eyebrow {
  margin: 0 0 6px !important;
  color: #8feefd !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: .20em !important;
  text-transform: uppercase !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-subtitle {
  max-width: 360px !important;
  margin: 8px 0 0 !important;
  color: rgba(225, 238, 249, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.38 !important;
}

.nautico-book-protect-page .nautico-advanced-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border: 1px solid rgba(127, 223, 255, 0.38) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(135deg, rgba(98, 118, 240, 0.78), rgba(117, 223, 230, 0.78)) !important;
  color: #ffffff !important;
  box-shadow:
    0 10px 20px rgba(22, 79, 135, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}
.nautico-book-protect-page .nautico-advanced-close-x {
  color: #ffffff !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

/* Top tabs Essentials / Advanced */
.nautico-book-protect-page .nautico-protect-pagination {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 0 !important;
}

.nautico-book-protect-page .nautico-protect-pagination > button {
  min-height: 58px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50)) !important;
  color: rgba(229, 239, 248, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.nautico-book-protect-page .nautico-protect-pagination > button.is-active {
  border-color: rgba(122, 227, 255, 0.40) !important;
  background:
    linear-gradient(135deg, rgba(87, 103, 225, 0.36), rgba(102, 204, 224, 0.22)) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 0 24px rgba(89, 168, 255, 0.10) !important;
}

.nautico-book-protect-page .nautico-protect-tab-number {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.nautico-book-protect-page .nautico-protect-pagination strong {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.nautico-book-protect-page .nautico-protect-pagination small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  opacity: .80 !important;
}

/* Essentials */
.nautico-book-protect-page .nautico-protect-essentials {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 215, 255, 0.45) transparent !important;
}

.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar {
  width: 8px !important;
}
.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(104, 139, 238, 0.85), rgba(111, 230, 236, 0.75)) !important;
}
.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar-track {
  background: transparent !important;
}

.nautico-book-protect-page .nautico-protect-essentials > .grid:first-child {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
}

.nautico-book-protect-page .nautico-protect-essentials > .grid:first-child > button {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 86px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58)) !important;
  color: #eef7ff !important;
  text-align: left !important;
}

.nautico-book-protect-page .nautico-protect-essentials > .grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52)) !important;
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13) !important;
}

.nautico-book-protect-page .nautico-protect-essentials > .grid:first-child > button .font-bold {
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}
.nautico-book-protect-page .nautico-protect-essentials > .grid:first-child > button .text-muted {
  font-size: 13px !important;
  line-height: 1.35 !important;
  opacity: .86 !important;
}

.nautico-book-protect-page input:not([type="checkbox"]),
.nautico-book-protect-page textarea,
.nautico-book-protect-page select {
  min-height: 46px !important;
  height: 46px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(132, 176, 214, 0.22) !important;
  border-radius: 14px !important;
  background: rgba(245, 250, 255, 0.92) !important;
  color: #12243a !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

.nautico-book-protect-page textarea {
  min-height: 54px !important;
  height: 54px !important;
  resize: none !important;
}

.nautico-book-protect-page input::-moz-placeholder, .nautico-book-protect-page textarea::-moz-placeholder {
  color: #7c8ea3 !important;
}

.nautico-book-protect-page input::placeholder,
.nautico-book-protect-page textarea::placeholder {
  color: #7c8ea3 !important;
}

.nautico-book-protect-page label,
.nautico-book-protect-page .text-muted {
  color: rgba(223, 235, 247, 0.78) !important;
  font-size: 13px !important;
}

.nautico-book-protect-page .nautico-protect-essentials .grid.grid-cols-2,
.nautico-book-protect-page .nautico-protect-essentials .sm\:grid-cols-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.nautico-book-protect-page .nautico-protect-essentials .flex.flex-col.gap-10,
.nautico-book-protect-page .nautico-protect-essentials .flex.flex-col.gap-12 {
  gap: 10px !important;
}

.nautico-book-protect-page .nautico-protect-essentials .flex.items-center.gap-8,
.nautico-book-protect-page .nautico-protect-essentials .flex.items-start.gap-8 {
  gap: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(126, 190, 237, 0.10) !important;
  border-radius: 12px !important;
  background: rgba(16, 34, 60, 0.42) !important;
}

.nautico-book-protect-page .nautico-protect-essentials input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #75ddeb !important;
}

/* Advanced main area */
.nautico-book-protect-page .nautico-protect-advanced-page {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow: hidden !important;
}

.nautico-book-protect-page .nautico-advanced-section-header {
  flex: 0 0 auto !important;
  min-height: 64px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50)) !important;
}
.nautico-book-protect-page .nautico-advanced-section-header .block.font-bold {
  font-size: 18px !important;
  line-height: 1.15 !important;
}
.nautico-book-protect-page .nautico-advanced-section-header .text-muted {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.nautico-book-protect-page .nautico-r6f-active {
  padding: 4px 10px !important;
  border: 1px solid rgba(129, 229, 255, 0.26) !important;
  border-radius: 999px !important;
  background: rgba(99, 196, 236, 0.10) !important;
  color: #90f0fd !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.nautico-book-protect-page .nautico-r6f-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  gap: 8px !important;
}

/* Subnav */
.nautico-book-protect-page .nautico-r6f-subnav {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}
.nautico-book-protect-page .nautico-r6f-subnav button {
  min-height: 38px !important;
  padding: 7px 6px !important;
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(180deg, rgba(17, 35, 63, 0.66), rgba(12, 27, 50, 0.54)) !important;
  color: rgba(223, 235, 247, 0.74) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.nautico-book-protect-page .nautico-r6f-subnav button.is-active {
  border-color: rgba(132, 226, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(82, 105, 224, 0.42), rgba(96, 204, 227, 0.24)) !important;
  color: #ffffff !important;
  box-shadow: 0 0 20px rgba(101, 179, 255, 0.10) !important;
}

/* Scroll only inside advanced content body */
.nautico-book-protect-page .nautico-r6f-subpage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 4px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 215, 255, 0.45) transparent !important;
}
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar {
  width: 8px !important;
}
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(104, 139, 238, 0.85), rgba(111, 230, 236, 0.75)) !important;
}
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar-track {
  background: transparent !important;
}

.nautico-book-protect-page .nautico-r6f-subsection {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* Presets */
.nautico-book-protect-page .nautico-r6f-preset-label {
  margin: 0 0 8px !important;
  color: rgba(188, 214, 235, 0.74) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.nautico-book-protect-page .nautico-r6f-presets {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.nautico-book-protect-page .nautico-r6f-recipe {
  min-height: 128px !important;
  padding: 14px !important;
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50)) !important;
  color: #eef7ff !important;
  text-align: left !important;
}
.nautico-book-protect-page .nautico-r6f-recipe.is-selected {
  border-color: rgba(132, 226, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(86, 104, 224, 0.44), rgba(98, 204, 228, 0.26)) !important;
  box-shadow: 0 0 26px rgba(101, 179, 255, 0.11) !important;
}
.nautico-book-protect-page .nautico-r6f-recipe-title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
}
.nautico-book-protect-page .nautico-r6f-recipe-copy {
  display: -webkit-box !important;
  margin-top: 8px !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  color: inherit !important;
  opacity: .82 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

/* Fields + checks */
.nautico-book-protect-page .nautico-r6f-fields,
.nautico-book-protect-page .nautico-r6f-checks {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

.nautico-book-protect-page .nautico-r6f-info {
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(126, 190, 237, 0.12) !important;
  border-radius: 12px !important;
  background: rgba(16, 34, 60, 0.42) !important;
  color: rgba(222, 235, 247, 0.78) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.nautico-book-protect-page .nautico-r6f-check {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  min-height: 48px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(126, 190, 237, 0.10) !important;
  border-radius: 12px !important;
  background: rgba(16, 34, 60, 0.42) !important;
  color: rgba(223, 235, 247, 0.86) !important;
  font-size: 12px !important;
  line-height: 1.34 !important;
}

.nautico-book-protect-page .nautico-r6f-check input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  margin-top: 1px !important;
  accent-color: #76deec !important;
}

.nautico-book-protect-page .nautico-r6f-subsection label.block > span {
  display: block !important;
  margin-bottom: 5px !important;
  color: rgba(223, 235, 247, 0.80) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.nautico-book-protect-page .nautico-r6f-subsection p.text-muted {
  margin-top: 4px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Firewall cards */
.nautico-book-protect-page .nautico-r6f-subsection-firewall .rounded-xl.border.p-14 {
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(126, 190, 237, 0.12) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(18, 39, 70, 0.70), rgba(14, 31, 57, 0.50)) !important;
}

.nautico-book-protect-page .nautico-r6f-subsection-firewall .flex.items-center.gap-5.rounded-lg {
  min-height: 32px !important;
  padding: 6px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

/* Protect trigger card in main uploader */
.nautico-protection-panel {
  border: 1px solid rgba(126, 190, 237, 0.14) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(15, 32, 59, 0.74), rgba(11, 24, 47, 0.58)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.nautico-protection-panel .text-muted {
  color: rgba(214, 229, 241, 0.74) !important;
  font-size: 13px !important;
}

.nautico-protection-panel > button {
  border-radius: 14px !important;
}

/* Responsive */
@media (max-width: 980px) {
  .nautico-book-protect-page .nautico-r6f-presets,
  .nautico-book-protect-page .nautico-r6f-fields,
  .nautico-book-protect-page .nautico-r6f-checks,
  .nautico-book-protect-page .nautico-protect-essentials .grid.grid-cols-2,
  .nautico-book-protect-page .nautico-protect-essentials .sm\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  .nautico-protect-portal-root > .nautico-book-protect-page,
  .nautico-protect-portal-root.nautico-protect-home-companion > .nautico-book-protect-page {
    width: min(460px, calc(100vw - 16px)) !important;
    max-width: min(460px, calc(100vw - 16px)) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .nautico-book-protect-page .nautico-advanced-drawer-title {
    font-size: 22px !important;
  }

  .nautico-book-protect-page .nautico-r6f-subnav {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 540px) {
  .nautico-protect-portal-root > .nautico-book-protect-page,
  .nautico-protect-portal-root.nautico-protect-home-companion > .nautico-book-protect-page {
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    height: calc(100dvh - 8px) !important;
    max-height: calc(100dvh - 8px) !important;
    top: 4px !important;
    padding: 7px !important;
  }

  .nautico-book-protect-page .nautico-advanced-drawer-header {
    padding: 12px !important;
  }

  .nautico-book-protect-page .nautico-advanced-drawer-title {
    font-size: 20px !important;
  }

  .nautico-book-protect-page .nautico-advanced-drawer-subtitle {
    font-size: 11px !important;
  }

  .nautico-book-protect-page .nautico-protect-pagination > button {
    min-height: 52px !important;
    padding: 9px 10px !important;
  }

  .nautico-book-protect-page .nautico-protect-essentials > .grid:first-child > button {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .nautico-book-protect-page input:not([type="checkbox"]),
  .nautico-book-protect-page textarea,
  .nautico-book-protect-page select {
    min-height: 42px !important;
    height: 42px !important;
    font-size: 14px !important;
  }

  .nautico-book-protect-page textarea {
    min-height: 50px !important;
    height: 50px !important;
  }

  .nautico-book-protect-page .nautico-r6f-recipe {
    min-height: 116px !important;
  }
}

/* NAUTICO_R6_PROTECT_GLASS_ACCESS_R1_13_END */

/* NAUTICO_R6_PROTECT_GLASS_POLISH_R1_14 */

.nautico-protection-center,
.nautico-book-protect-page,
.nautico-advanced-drawer{
 border-radius:28px;
 background:linear-gradient(145deg,rgba(20,35,70,.82),rgba(8,18,38,.92));
 border:1px solid rgba(120,190,255,.35);
 box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 30px rgba(255,255,255,.06);
 backdrop-filter:blur(25px);
}

.nautico-protection-center{
 max-height:min(78vh,760px);
 overflow-y:auto;
}

.nautico-protection-center h1{
 font-size:clamp(28px,3vw,42px);
}

.nautico-protection-center p{
 font-size:clamp(15px,1.2vw,19px);
 line-height:1.5;
}

.nautico-home-transfer-layout{
 gap:16px;
}

@media(max-width:1000px){
 .nautico-home-transfer-layout{
  display:flex;
  flex-direction:column;
 }
}

@media(max-width:600px){
 .nautico-protection-center{
  border-radius:22px;
  max-height:none;
 }
}

/* NAUTICO_R6_PROTECT_BOOK_FIX_R1_15_BEGIN */

/* Desktop/tablet two-card stage */
@media (min-width: 981px) {
  .nautico-home-transfer-layout {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
    align-items: stretch !important;
    gap: clamp(10px, 1vw, 16px) !important;
    width: min(1460px, calc(100vw - 36px)) !important;
    margin-inline: auto !important;
  }

  .nautico-home-transfer-layout > * {
    min-width: 0 !important;
  }

  .nautico-protect-portal-root {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
  }

  .nautico-protect-portal-root > .nautico-book-protect-page,
  .nautico-protect-portal-root > .nautico-protection-center,
  .nautico-protect-portal-root > .nautico-advanced-drawer {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: min(82vh, 840px) !important;
    align-self: stretch !important;
    margin: 0 !important;
  }
}

/* Mobile / narrow widths */
@media (max-width: 980px) {
  .nautico-home-transfer-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: min(100%, calc(100vw - 20px)) !important;
    margin-inline: auto !important;
  }

  .nautico-protect-portal-root > .nautico-book-protect-page,
  .nautico-protect-portal-root > .nautico-protection-center,
  .nautico-protect-portal-root > .nautico-advanced-drawer {
    width: 100% !important;
    max-width: 100% !important;
    max-height: min(76vh, 780px) !important;
  }
}

/* Main companion card shell */
.nautico-protect-portal-root > .nautico-book-protect-page,
.nautico-protect-portal-root > .nautico-protection-center,
.nautico-protect-portal-root > .nautico-advanced-drawer,
.nautico-book-protect-page {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 34px !important;
  border: 1px solid rgba(145, 200, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(34, 51, 84, 0.78) 0%, rgba(11, 27, 58, 0.90) 50%, rgba(6, 18, 39, 0.96) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 18px 50px rgba(255,255,255,0.06),
    0 24px 70px rgba(4, 12, 28, 0.42),
    0 0 0 1px rgba(125, 181, 255, 0.06) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  overflow: hidden !important;
}

/* subtle book spine */
.nautico-protect-portal-root > .nautico-book-protect-page::before,
.nautico-book-protect-page::before {
  content: "" !important;
  position: absolute !important;
  inset: 18px auto 18px -10px !important;
  width: 18px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(198,228,255,0.28), rgba(110,167,233,0.08), rgba(18,35,66,0.42)) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.14), 8px 0 20px rgba(0,0,0,0.18) !important;
  pointer-events: none !important;
}

/* Header mirrors main upload card feel */
.nautico-book-protect-page .nautico-advanced-drawer-header {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 18px 22px !important;
  margin: 0 !important;
  border-radius: 26px !important;
  border: 1px solid rgba(117, 177, 255, 0.18) !important;
  background: linear-gradient(180deg, rgba(4,14,34,0.82), rgba(6,18,40,0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-eyebrow {
  margin: 0 0 8px !important;
  color: #92ebff !important;
  font-size: clamp(12px, 0.8vw, 14px) !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(30px, 2.4vw, 48px) !important;
  line-height: 1.02 !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
}

.nautico-book-protect-page .nautico-advanced-drawer-subtitle {
  margin: 10px 0 0 !important;
  max-width: 52ch !important;
  color: rgba(231, 240, 255, 0.86) !important;
  font-size: clamp(16px, 1vw, 20px) !important;
  line-height: 1.45 !important;
}

.nautico-book-protect-page .nautico-advanced-close {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(135, 225, 255, 0.48) !important;
  background: linear-gradient(135deg, rgba(115, 131, 247, 0.95), rgba(144, 229, 236, 0.92)) !important;
  box-shadow: 0 14px 28px rgba(37, 93, 152, 0.28), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

.nautico-book-protect-page .nautico-advanced-close-x {
  font-size: 26px !important;
  color: #ffffff !important;
}

/* Main section tabs */
.nautico-book-protect-page .nautico-protect-pagination {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
}

.nautico-book-protect-page .nautico-protect-pagination > button {
  min-height: 104px !important;
  padding: 18px 20px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(117, 177, 255, 0.16) !important;
  background: linear-gradient(180deg, rgba(33,49,83,0.78), rgba(17,30,58,0.76)) !important;
  color: rgba(230, 240, 255, 0.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.nautico-book-protect-page .nautico-protect-pagination > button.is-active,
.nautico-book-protect-page .nautico-protect-pagination > button[aria-selected="true"] {
  border-color: rgba(142, 228, 255, 0.34) !important;
  background: linear-gradient(135deg, rgba(89, 108, 224, 0.36), rgba(121, 217, 236, 0.20)) !important;
}

.nautico-book-protect-page .nautico-protect-tab-number {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  font-size: 22px !important;
}

.nautico-book-protect-page .nautico-protect-pagination strong {
  display: block !important;
  font-size: clamp(22px, 1.25vw, 30px) !important;
  line-height: 1.1 !important;
}

.nautico-book-protect-page .nautico-protect-pagination small {
  display: block !important;
  margin-top: 6px !important;
  font-size: clamp(15px, 0.95vw, 18px) !important;
  line-height: 1.35 !important;
  color: rgba(223, 235, 252, 0.78) !important;
}

/* content body area: keep access to all controls, scroll only here when needed */
.nautico-book-protect-page .nautico-protect-essentials,
.nautico-book-protect-page .nautico-protect-advanced-page,
.nautico-book-protect-page .nautico-r6f-body,
.nautico-book-protect-page .nautico-r6f-subpage,
.nautico-book-protect-page .nautico-advanced-drawer-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(126, 190, 237, 0.72) rgba(10,20,40,0.28) !important;
}

.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar,
.nautico-book-protect-page .nautico-protect-advanced-page::-webkit-scrollbar,
.nautico-book-protect-page .nautico-r6f-body::-webkit-scrollbar,
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar,
.nautico-book-protect-page .nautico-advanced-drawer-body::-webkit-scrollbar {
  width: 10px !important;
}

.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar-track,
.nautico-book-protect-page .nautico-protect-advanced-page::-webkit-scrollbar-track,
.nautico-book-protect-page .nautico-r6f-body::-webkit-scrollbar-track,
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar-track,
.nautico-book-protect-page .nautico-advanced-drawer-body::-webkit-scrollbar-track {
  border-radius: 999px !important;
  background: rgba(11, 22, 43, 0.30) !important;
}

.nautico-book-protect-page .nautico-protect-essentials::-webkit-scrollbar-thumb,
.nautico-book-protect-page .nautico-protect-advanced-page::-webkit-scrollbar-thumb,
.nautico-book-protect-page .nautico-r6f-body::-webkit-scrollbar-thumb,
.nautico-book-protect-page .nautico-r6f-subpage::-webkit-scrollbar-thumb,
.nautico-book-protect-page .nautico-advanced-drawer-body::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(111,146,242,0.88), rgba(129,223,236,0.88)) !important;
}

/* essentials cards */
.nautico-book-protect-page .nautico-protect-essentials > * {
  border-radius: 24px !important;
}

.nautico-book-protect-page .nautico-protect-essentials > button,
.nautico-book-protect-page .nautico-protect-essentials > .nautico-protect-card,
.nautico-book-protect-page .nautico-protect-card,
.nautico-book-protect-page .nautico-r6f-recipe,
.nautico-book-protect-page .nautico-r6f-subsection,
.nautico-book-protect-page .nautico-r6f-check,
.nautico-book-protect-page .nautico-r6f-info {
  border: 1px solid rgba(117, 177, 255, 0.16) !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, rgba(23,39,72,0.74), rgba(14,25,48,0.66)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.nautico-book-protect-page .is-selected,
.nautico-book-protect-page .is-active,
.nautico-book-protect-page [aria-pressed="true"] {
  border-color: rgba(155, 230, 255, 0.42) !important;
  background: linear-gradient(135deg, rgba(99, 108, 223, 0.92), rgba(148, 215, 233, 0.84)) !important;
  color: #ffffff !important;
}

.nautico-book-protect-page .nautico-r6f-subnav {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.nautico-book-protect-page .nautico-r6f-subnav button {
  min-height: 56px !important;
  padding: 10px 12px !important;
  border-radius: 18px !important;
  font-size: clamp(14px, 0.9vw, 16px) !important;
  font-weight: 700 !important;
}

/* readable forms */
.nautico-book-protect-page input:not([type="checkbox"]),
.nautico-book-protect-page textarea,
.nautico-book-protect-page select {
  min-height: 60px !important;
  padding: 14px 18px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(117, 177, 255, 0.18) !important;
  background: rgba(248, 251, 255, 0.94) !important;
  color: #1b2b47 !important;
  font-size: clamp(16px, 1vw, 18px) !important;
}

.nautico-book-protect-page label,
.nautico-book-protect-page .text-muted,
.nautico-book-protect-page .nautico-r6f-preset-label,
.nautico-book-protect-page .nautico-r6f-info,
.nautico-book-protect-page .nautico-r6f-recipe-copy,
.nautico-book-protect-page .nautico-r6f-check,
.nautico-book-protect-page p {
  font-size: clamp(15px, 0.95vw, 17px) !important;
  line-height: 1.45 !important;
}

.nautico-book-protect-page h2,
.nautico-book-protect-page h3,
.nautico-book-protect-page h4,
.nautico-book-protect-page strong {
  font-size: clamp(20px, 1.2vw, 28px) !important;
  line-height: 1.15 !important;
}

/* keep panel inside page on smaller devices */
@media (max-width: 820px) {
  .nautico-book-protect-page {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .nautico-book-protect-page::before {
    display: none !important;
  }

  .nautico-book-protect-page .nautico-advanced-drawer-header {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .nautico-book-protect-page .nautico-protect-pagination {
    grid-template-columns: 1fr !important;
  }

  .nautico-book-protect-page .nautico-r6f-subnav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* NAUTICO_R6_PROTECT_BOOK_FIX_R1_15_END */

/* ============================================================
   NAUTICO_R6_PROTECT_BOOK_RECOVERY_R1_17_B1
   2026-08-22
   VISUAL/CSS ONLY.

   The audited post-R1.15 experimental tail was removed because
   it overrode the established two-card/book layout with generic
   viewport-sized Protect dimensions.

   Functional TS/TSX, handlers, state, crypto, backend and DB are
   intentionally untouched.
   ============================================================ */

/* ============================================================
   NAUTICO_R6_PROTECT_PORTAL_GEOMETRY_R1_19
   2026-08-23

   CSS ONLY.

   Homepage Protect is hosted by:
   .nautico-protect-portal-root.nautico-protect-home-companion

   Position the REAL portal wrapper as the right-hand book page.
   Do not modify homepage layout, TS/TSX, state, handlers,
   backend, crypto or database.
   ============================================================ */

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-portal-root.nautico-protect-home-companion {
    position: fixed !important;

    top: var(--nv10-top) !important;

    left: calc(
      var(--nv10-left-x)
      + var(--nv10-page)
      + var(--nv10-gap)
    ) !important;

    right: auto !important;
    bottom: auto !important;

    width: var(--nv10-page) !important;
    min-width: var(--nv10-page) !important;
    max-width: var(--nv10-page) !important;

    height: var(--nv10-height) !important;
    min-height: 0 !important;
    max-height: var(--nv10-height) !important;

    margin: 0 !important;

    transform: none !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;

    overflow: visible !important;

    z-index: 5100 !important;
  }


  html.nautico-futuristic-ui
  .nautico-protect-portal-root.nautico-protect-home-companion
  > .nautico-book-protect-page.nautico-advanced-drawer {

    position: relative !important;

    inset: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;

    align-self: stretch !important;

    transform: none !important;

    overflow: hidden !important;
  }
}

/* NAUTICO_R6_PROTECT_PORTAL_GEOMETRY_R1_19_END */

/* ============================================================
   NAUTICO_R6_PROTECT_SAFE_VISUAL_R1_21

   CSS ONLY.
   IMPORTANT:
   Existing scroll/overflow hierarchy intentionally untouched.
   ============================================================ */

@media (min-width: 1100px) {

  /* Exact companion geometry, browser-supported enhancement.
     R1.19 remains fallback. */

  html.nautico-futuristic-ui .nautico-composer-shell {
    anchor-name: --nautico-r121-transfer;
  }

  @supports (anchor-name: --nautico-r121-transfer) {

    html.nautico-futuristic-ui
    .nautico-protect-portal-root.nautico-protect-home-companion {
      position-anchor: --nautico-r121-transfer;
      top: anchor(top) !important;
      left: calc(anchor(right) + var(--nv10-gap, 12px)) !important;
      right: auto !important;
      bottom: auto !important;

      width: anchor-size(width) !important;
      min-width: anchor-size(width) !important;
      max-width: anchor-size(width) !important;

      height: anchor-size(height) !important;
      min-height: anchor-size(height) !important;
      max-height: anchor-size(height) !important;

      margin: 0 !important;
      transform: none !important;
    }
  }


  /* Outer page — visual only */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  > .nautico-book-protect-page {
    padding: 10px !important;
    gap: 8px !important;

    border-radius: 25px !important;
    border-color: rgba(124, 194, 236, 0.18) !important;

    background:
      radial-gradient(
        circle at 8% 0%,
        rgba(79, 181, 221, 0.055),
        transparent 30%
      ),
      linear-gradient(
        155deg,
        rgba(7, 20, 37, 0.965),
        rgba(4, 13, 27, 0.975)
      ) !important;

    box-shadow:
      0 22px 58px rgba(0, 7, 20, 0.31),
      inset 0 1px 0 rgba(255,255,255,0.035) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  > .nautico-book-protect-page::before {
    display: none !important;
  }


  /* Header */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-header {
    margin: 0 !important;
    padding: 11px 13px !important;
    gap: 9px !important;

    border-radius: 17px !important;
    border-color: rgba(119, 188, 234, 0.12) !important;

    background:
      linear-gradient(
        180deg,
        rgba(8, 22, 42, 0.88),
        rgba(5, 16, 32, 0.83)
      ) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-eyebrow {
    margin: 0 0 3px !important;
    font-size: 9.5px !important;
    line-height: 1.1 !important;
    letter-spacing: .17em !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-title {
    margin: 0 !important;
    font-size: 23px !important;
    line-height: 1.06 !important;
    font-weight: 750 !important;
    letter-spacing: -.025em !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-subtitle {
    margin: 5px 0 0 !important;
    max-width: 35ch !important;

    font-size: 12px !important;
    line-height: 1.34 !important;

    color: rgba(207, 225, 239, 0.70) !important;
  }


  /* Close */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;

    border-radius: 11px !important;

    border-color: rgba(132, 216, 248, 0.30) !important;

    box-shadow:
      0 7px 16px rgba(24, 78, 130, 0.20),
      inset 0 1px 0 rgba(255,255,255,0.15) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-close-x {
    font-size: 18px !important;
  }


  /* Essentials / Advanced */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination {
    gap: 7px !important;
    margin: 0 0 7px !important;
    padding: 0 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination > button {
    min-height: 64px !important;
    padding: 8px 9px !important;

    border-radius: 15px !important;
    border-color: rgba(113,176,230,.13) !important;

    background:
      linear-gradient(
        180deg,
        rgba(27,44,74,.70),
        rgba(13,27,52,.67)
      ) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-tab-number {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;

    border-radius: 8px !important;
    font-size: 11px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination strong {
    font-size: 15px !important;
    line-height: 1.12 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination small {
    margin-top: 2px !important;

    font-size: 10px !important;
    line-height: 1.22 !important;

    color: rgba(198, 218, 234, 0.65) !important;
  }


  /* Quick / Private / Verified */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child {
    gap: 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button {
    min-height: 46px !important;

    padding: 8px 10px !important;

    border-radius: 13px !important;

    border-color: rgba(113, 177, 226, .13) !important;

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      ) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button
  .font-bold {
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button
  .text-muted {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }


  /* Checkbox/settings cards */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .sm\:grid-cols-2 {
    gap: 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-start.gap-8 {
    gap: 7px !important;
    padding: 8px 9px !important;

    border-radius: 12px !important;
    border-color: rgba(112, 177, 226, .11) !important;

    background: rgba(15, 31, 57, .46) !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
  }


  /* Forms */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  input:not([type="checkbox"]),

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  select {
    min-height: 37px !important;
    height: 37px !important;

    padding: 7px 10px !important;

    border-radius: 10px !important;

    font-size: 12.5px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  textarea {
    min-height: 50px !important;
    height: 50px !important;

    padding: 8px 10px !important;

    border-radius: 10px !important;

    font-size: 12.5px !important;
  }


  /* Advanced presentation — dimensions only */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-section-header {
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-section-header
  .font-bold {
    font-size: 15px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-active {
    padding: 3px 7px !important;
    font-size: 9px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subnav {
    gap: 5px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subnav button {
    min-height: 31px !important;

    padding: 6px 5px !important;

    border-radius: 9px !important;

    font-size: 9.5px !important;
    line-height: 1.1 !important;
  }


  /* Internal cards */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-card,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-recipe,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subsection,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-check,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-info {
    border-radius: 13px !important;
    border-color: rgba(112,177,226,.12) !important;

    background:
      linear-gradient(
        180deg,
        rgba(22,38,67,.61),
        rgba(12,25,47,.57)
      ) !important;
  }


  /* General Protect copy */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion .text-muted,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion .nautico-r6f-preset-label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion .nautico-r6f-recipe-copy,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion p {
    font-size: 12px !important;
    line-height: 1.32 !important;
  }

}


/* NAUTICO_R6_PROTECT_SAFE_VISUAL_R1_21_END */


/* ============================================================
   NAUTICO_R6_PROTECT_CLEAN_UX_R1_22

   Use the VISIBLE transfer card as the geometry authority.
   Present Essentials and Advanced as real visual views.
   Restore one intentional scroll authority per active view.
   ============================================================ */

@media (min-width: 1100px) {

  /* ----------------------------------------------------------
     EXACT MATCH TO VISIBLE TRANSFER CARD
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-composer-shell
  .nautico-premium-card {
    anchor-name: --nautico-transfer-visible-card;
  }

  @supports (anchor-name: --nautico-transfer-visible-card) {
    html.nautico-futuristic-ui
    .nautico-protect-portal-root.nautico-protect-home-companion {
      position-anchor: --nautico-transfer-visible-card;

      top: anchor(top) !important;
      left: calc(anchor(right) + 12px) !important;
      right: auto !important;
      bottom: auto !important;

      width: anchor-size(width) !important;
      min-width: anchor-size(width) !important;
      max-width: anchor-size(width) !important;

      height: anchor-size(height) !important;
      min-height: anchor-size(height) !important;
      max-height: anchor-size(height) !important;

      margin: 0 !important;
      transform: none !important;
    }
  }


  /* ----------------------------------------------------------
     HEADER: cleaner hierarchy
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-header {
    padding: 12px 14px 13px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-title {
    width: -moz-fit-content !important;
    width: fit-content !important;

    font-size: 25px !important;
    line-height: 1.05 !important;
    font-weight: 780 !important;

    background:
      linear-gradient(
        90deg,
        #ffffff 0%,
        #eaf9ff 58%,
        #91e5f7 100%
      ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-subtitle {
    max-width: 40ch !important;
    color: rgba(205, 224, 238, .70) !important;
  }


  /* ----------------------------------------------------------
     TOP NAV = TWO TRUE VISUAL VIEWS

     State still comes from existing aria-selected values.
     No JS/state modification.
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination > button {
    min-height: 58px !important;

    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    align-items: center !important;

    gap: 8px !important;

    padding: 8px 10px !important;

    text-align: left !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination strong {
    font-size: 14px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-pagination small {
    font-size: 9.5px !important;
    line-height: 1.18 !important;
  }


  /* Essentials selected -> Advanced page is not shown. */

  html.nautico-futuristic-ui
  .nautico-book-protect-page:has(
    .nautico-protect-pagination
    > button:first-child[aria-selected="true"]
  )
  .nautico-protect-advanced-page {
    display: none !important;
  }


  /* Advanced selected -> Essentials is not shown. */

  html.nautico-futuristic-ui
  .nautico-book-protect-page:has(
    .nautico-protect-pagination
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-protect-essentials {
    display: none !important;
  }


  /* ----------------------------------------------------------
     SCROLL AUTHORITY

     Essentials view:
       essentials scrolls.

     Advanced view:
       advanced page/body contain;
       subpage scrolls.

     This restores the earlier intended hierarchy found
     during the read-only audit.
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    padding-right: 0 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials {
    height: 100% !important;
    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding-right: 5px !important;

    scrollbar-width: thin !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page {
    height: 100% !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding-right: 5px !important;

    scrollbar-width: thin !important;
  }


  /* Hide scrollbars on containers that are no longer authorities. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-drawer-body::-webkit-scrollbar,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page::-webkit-scrollbar,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-body::-webkit-scrollbar {
    display: none !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials::-webkit-scrollbar,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage::-webkit-scrollbar {
    width: 6px !important;
  }


  /* ----------------------------------------------------------
     QUICK / PRIVATE / VERIFIED:
     clear rows instead of oversized blocks
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button {
    display: grid !important;
    grid-template-columns: 100px minmax(0,1fr) !important;
    align-items: center !important;

    min-height: 48px !important;

    gap: 10px !important;

    padding: 8px 11px !important;

    text-align: left !important;

    border-radius: 13px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button
  .font-bold {
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child
  > button
  .text-muted {
    margin-top: 0 !important;

    font-size: 10.5px !important;
    line-height: 1.22 !important;

    color: rgba(199,218,234,.70) !important;
  }


  /* ----------------------------------------------------------
     SETTINGS
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-start.gap-8 {
    min-height: 45px !important;

    padding: 8px 9px !important;

    gap: 7px !important;

    border-radius: 11px !important;
  }


  /* ----------------------------------------------------------
     ADVANCED
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-advanced-section-header {
    flex: 0 0 auto !important;

    margin-bottom: 7px !important;
    padding: 9px 10px !important;

    border-radius: 12px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subnav {
    flex: 0 0 auto !important;

    grid-template-columns: repeat(5,minmax(0,1fr)) !important;

    gap: 5px !important;

    margin-bottom: 7px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subnav button {
    min-height: 32px !important;

    padding: 6px 4px !important;

    font-size: 9.5px !important;

    border-radius: 9px !important;
  }

}

/* NAUTICO_R6_PROTECT_CLEAN_UX_R1_22_END */


/* ============================================================
   NAUTICO_R6_PROTECT_BOTTOM_FIT_R1_24

   CSS ONLY.

   Preserve:
   - R1.22/R1.23 accepted appearance
   - outer Protect geometry
   - Core / Advanced separation
   - existing scroll architecture

   Improve:
   - bottom control spacing
   - no horizontal border escape
   - clean two-column checkbox cards
   - comfortable bottom scroll clearance
   ============================================================ */

@media (min-width: 1100px) {

  /* ----------------------------------------------------------
     CORE VIEW SCROLL AREA
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials {

    flex: 1 1 auto !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    padding:
      0
      7px
      18px
      0 !important;

    scroll-padding-bottom: 18px !important;
    scrollbar-gutter: stable !important;
  }


  /* ----------------------------------------------------------
     PREVENT ANY CHILD FROM PUSHING OUTSIDE THE PANEL
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials * {

    box-sizing: border-box !important;
    min-width: 0 !important;
  }


  /* ----------------------------------------------------------
     QUICK / PRIVATE / VERIFIED
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .grid:first-child {

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 8px !important;
  }


  /* ----------------------------------------------------------
     EXPIRY / DOWNLOAD LIMIT
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  input:not([type="checkbox"]),

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  select {

    width: 100% !important;
    max-width: 100% !important;

    min-height: 36px !important;
    height: 36px !important;

    padding: 6px 9px !important;

    font-size: 11.5px !important;

    border-radius: 10px !important;
  }


  /* ----------------------------------------------------------
     TWO COLUMN CHECKBOX GRID
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .sm\:grid-cols-2 {

    width: 100% !important;
    max-width: 100% !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    -moz-column-gap: 6px !important;

         column-gap: 6px !important;
    row-gap: 6px !important;

    margin-bottom: 4px !important;
  }


  /* individual checkbox/control card */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .flex.items-start.gap-8 {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 42px !important;

    margin: 0 !important;

    padding:
      7px
      8px !important;

    gap: 7px !important;

    align-items: center !important;

    border-radius: 11px !important;
  }


  /* labels may wrap, but never push the box horizontally */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  label {

    min-width: 0 !important;

    font-size: 11.5px !important;
    line-height: 1.22 !important;

    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }


  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  input[type="checkbox"] {

    flex: 0 0 auto !important;

    width: 15px !important;
    height: 15px !important;

    min-width: 15px !important;
    min-height: 15px !important;

    margin: 0 !important;
  }


  /* ----------------------------------------------------------
     LAST ROW MUST NEVER TOUCH LOWER BORDER
     ---------------------------------------------------------- */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > :last-child {

    margin-bottom: 8px !important;
  }

}

/* NAUTICO_R6_PROTECT_BOTTOM_FIT_R1_24_END */


/* ============================================================
   NAUTICO_R6_PROTECT_BOTTOM_SPACING_R1_25

   CSS ONLY.
   Goal:
   - relax lower checkbox cards
   - more breathing room
   - keep same overall geometry
   ============================================================ */

@media (min-width: 1100px) {

  /* lower two-column checkbox area only */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2 {
    -moz-column-gap: 8px !important;
         column-gap: 8px !important;
    row-gap: 8px !important;
    margin-top: 4px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    align-items: flex-start !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2
  label {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin-top: 2px !important;
  }
}

/* NAUTICO_R6_PROTECT_BOTTOM_SPACING_R1_25_END */


/* ============================================================
   NAUTICO_R6_EXACT_CHECKBOX_GRID_R1_26

   Exact source target:
   gap-9 mt-14 grid text-sm md:grid-cols-2

   CSS ONLY.
   ============================================================ */

@media (min-width: 1100px) {

  /* The REAL six-option grid */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2 {

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    -moz-column-gap: 12px !important;

         column-gap: 12px !important;
    row-gap: 10px !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 12px !important;
    margin-bottom: 10px !important;

    padding:
      0
      3px
      8px
      3px !important;

    box-sizing: border-box !important;
  }


  /* Six direct Check components */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2
  > * {

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;
    min-height: 56px !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
      11px
      12px !important;

    gap: 10px !important;

    border-radius: 14px !important;
  }


  /* Give long labels room without making cards touch */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0 !important;

    line-height: 1.3 !important;

    overflow-wrap: normal !important;
  }


  /* Checkbox alignment */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px !important;

    width: 16px !important;
    height: 16px !important;

    min-width: 16px !important;
    min-height: 16px !important;

    margin-top: 1px !important;
  }

}

/* NAUTICO_R6_EXACT_CHECKBOX_GRID_R1_26_END */


/* ============================================================
   NAUTICO_R6_ADVANCED_RULES_CLARITY_R1_27

   CSS ONLY.
   Goal:
   - cleaner Advanced rules tabs
   - clearer presets/access/verify/workflow/firewall content
   - better spacing and readability
   - no TS/TSX/backend/database changes
   ============================================================ */

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page * {
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* header block */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-advanced-section-header {
    margin: 0 0 12px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-advanced-section-header
  h2,
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-advanced-section-header
  h3,
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-advanced-section-header
  strong {
    font-size: 16px !important;
    line-height: 1.12 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-active {
    font-size: 11.5px !important;
    line-height: 1 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
  }

  /* subnav */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 12px 0 14px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav
  button {
    min-height: 44px !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* advanced content blocks */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-body,
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subpage {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 4px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subsection,
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-info {
    padding: 14px 16px !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
  }

  /* recipe cards */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-recipe {
    min-height: 124px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-recipe
  strong,
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-recipe
  h3 {
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin-bottom: 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-recipe
  p {
    font-size: 11.75px !important;
    line-height: 1.35 !important;
  }

  /* fields grid */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-fields
  > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* inputs/selects/textareas */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  input:not([type="checkbox"]),

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  select,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  textarea {
    min-height: 88px !important;
  }

  /* text clarity */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .text-muted,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  p {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* advanced check blocks */
  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-check {
    min-height: 54px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-check
  input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin-top: 2px !important;
  }

}

/* slightly tighter on narrower desktop */
@media (min-width: 1100px) and (max-width: 1365px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav
  button {
    font-size: 11.5px !important;
    padding: 9px 6px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-recipe {
    min-height: 116px !important;
    padding: 14px 16px !important;
  }
}

/* NAUTICO_R6_ADVANCED_RULES_CLARITY_R1_27_END */


/* ============================================================
   NAUTICO_R6_ADVANCED_ALIGNMENT_R1_28

   CSS ONLY.

   Fixes:
   1. Perfect horizontal/vertical centering for all Advanced tabs.
   2. Access three-field timing group stays on one row on desktop.
   3. Access field controls align even when labels wrap to 2 lines.

   No functional/state/backend changes.
   ============================================================ */

@media (min-width: 1100px) {

  /* ==========================================================
     A. ADVANCED SUBNAV
     ========================================================== */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav
  > button {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    text-indent: 0 !important;

    padding-left: 7px !important;
    padding-right: 7px !important;

    line-height: 1 !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;
  }


  /* Explicitly lock Workflow to the same centering model.
     It is the fourth tab in the audited component. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav
  > button:nth-child(4) {

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;

    padding-left: 7px !important;
    padding-right: 7px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    transform: none !important;
  }


  /* Selected outline may decorate the button,
     but must never participate in text alignment. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subnav
  > button.is-active {

    justify-content: center !important;
    text-align: center !important;
    text-indent: 0 !important;
  }


  /* ==========================================================
     B. ACCESS TAB
     Audited order:
       1 Presets
       2 Access
       3 Verify
       4 Workflow
       5 Firewall
     ========================================================== */

  /* Only while Access is selected. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields {

    align-items: start !important;
  }


  /* The Access timing group visible in the screenshot contains
     exactly three direct field items. Keep that exact group
     on one clean row instead of 2 + 1. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields:has(
    > :nth-child(3):last-child
  ) {

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    -moz-column-gap: 10px !important;

         column-gap: 10px !important;
    row-gap: 10px !important;

    align-items: start !important;

    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
  }


  /* Each of the three field wrappers gets an equal label zone.
     This aligns the controls even when one label wraps. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields:has(
    > :nth-child(3):last-child
  )
  > * {

    display: grid !important;

    grid-template-rows:
      minmax(38px, auto)
      auto !important;

    align-content: start !important;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    box-sizing: border-box !important;
  }


  /* Inputs/selects start from the same horizontal baseline. */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields:has(
    > :nth-child(3):last-child
  )
  input:not([type="checkbox"]),

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields:has(
    > :nth-child(3):last-child
  )
  select {

    align-self: end !important;

    width: 100% !important;
    max-width: 100% !important;

    margin-top: 0 !important;
  }

}


/* Narrow desktop: three controls still fit,
   but use tighter spacing/text. */

@media (min-width: 1100px) and (max-width: 1365px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page:has(
    .nautico-r6f-subnav
    > button:nth-child(2)[aria-selected="true"]
  )
  .nautico-r6f-fields:has(
    > :nth-child(3):last-child
  ) {

    -moz-column-gap: 7px !important;

         column-gap: 7px !important;
  }

}


/* NAUTICO_R6_ADVANCED_ALIGNMENT_R1_28_END */


/* ============================================================
   NAUTICO_R6_ACCESS_FIELD_ALIGN_R1_29

   CSS ONLY.
   Goal:
   - align the Access form fields on the same horizontal line
   - keep Workflow unchanged
   - no TS/TSX / backend / DB changes
   ============================================================ */

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage
  .md\:grid-cols-2:has(input:not([type="checkbox"]), select, textarea) {
    align-items: start !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage
  .md\:grid-cols-2:has(input:not([type="checkbox"]), select, textarea)
  > * {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-self: start !important;
    min-width: 0 !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage
  .md\:grid-cols-2:has(input:not([type="checkbox"]), select, textarea)
  > *
  > :first-child {
    min-height: 52px !important;
    display: flex !important;
    align-items: flex-end !important;
    margin-bottom: 8px !important;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-r6f-subpage
  .md\:grid-cols-2:has(input:not([type="checkbox"]), select, textarea)
  > *
  > :last-child {
    margin-top: 0 !important;
    align-self: stretch !important;
  }
}

/* NAUTICO_R6_ACCESS_FIELD_ALIGN_R1_29_END */


/* ============================================================
   NAUTICO_R6_ACCESS_LABEL_BASELINE_R1_30

   AUDITED DOM:

   .nautico-r6f-subsection-access
     > .nautico-r6f-fields:first-child
       > Field(label)
         > span
         > input/select

   Reserve identical label height so one-line and two-line
   labels produce the same input baseline.

   CSS ONLY.
   ============================================================ */

@media (min-width: 1100px) {

  /*
   * Only the FIRST fields grid inside Access.
   * Does not affect Workflow, Verify, Firewall or Presets.
   */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subsection-access
  > .nautico-r6f-fields:first-child
  > label {

    display: flex !important;
    flex-direction: column !important;

    justify-content: flex-start !important;

    align-self: stretch !important;

    margin: 0 !important;

    min-width: 0 !important;
  }


  /*
   * Field() renders the title as its first direct span.
   *
   * Give every title exactly enough room for two lines.
   * Short labels are bottom-aligned inside that same area.
   */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subsection-access
  > .nautico-r6f-fields:first-child
  > label
  > span:first-child {

    display: flex !important;

    align-items: flex-end !important;

    min-height: 38px !important;

    margin-top: 0 !important;
    margin-bottom: 8px !important;

    line-height: 1.25 !important;
  }


  /*
   * Input/select begins immediately after the equal-height
   * title area.
   */

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subsection-access
  > .nautico-r6f-fields:first-child
  > label
  > input:not([type="checkbox"]),

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-advanced-page
  .nautico-r6f-subsection-access
  > .nautico-r6f-fields:first-child
  > label
  > select {

    margin-top: 0 !important;

    align-self: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
  }

}

/* NAUTICO_R6_ACCESS_LABEL_BASELINE_R1_30_END */


/* ============================================================
   NAUTICO_R6_UPLOAD_PLUS_CENTER_R1_31

   Exact audited target:
   .nautico-dropzone > .h-44.w-44

   CSS ONLY.
   Keep both "+" and drag-active "↓" functional.
   ============================================================ */

html.nautico-futuristic-ui
body
.nautico-composer-shell
.nautico-premium-card
.nautico-dropzone
> .h-44.w-44 {

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  min-width: 40px !important;
  min-height: 40px !important;

  box-sizing: border-box !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding:
    0
    0
    1px
    0 !important;

  text-align: center !important;
  text-indent: 0 !important;

  line-height: 1 !important;

  vertical-align: middle !important;
}

/* NAUTICO_R6_UPLOAD_PLUS_CENTER_R1_31_END */


/* ============================================================
   NAUTICO_R6_PROTECT_CLOSE_CENTER_R1_32

   CSS ONLY.
   Goal:
   - center the X icon inside Security & Delivery close button
   - keep button size/visual language intact
   ============================================================ */

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 1 !important;
}

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close-x,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close-x {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 0 1px 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-indent: 0 !important;
  transform: none !important;
}

/* safe fallback if the close glyph is rendered as a child node/icon */
html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close
> *,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close
> * {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* NAUTICO_R6_PROTECT_CLOSE_CENTER_R1_32_END */


/* ============================================================
   NAUTICO_R6_PROTECT_TRIGGER_ARROW_CENTER_R1_33

   Exact audited target:
   .nautico-protect-trigger-icon

   CSS ONLY.
   Do not change button dimensions or Protect behaviour.
   ============================================================ */

html.nautico-futuristic-ui
.nautico-protect-trigger-icon {

  display: grid !important;
  place-items: center !important;

  box-sizing: border-box !important;

  padding: 0 !important;
  margin: 0 !important;

  text-align: center !important;
  text-indent: 0 !important;

  line-height: 1 !important;

  transform-origin: center center !important;
}

/*
 * Keep centering identical in both states.
 * Any existing rotation/open-state transform remains untouched.
 */

html.nautico-futuristic-ui
button[aria-expanded="false"]
.nautico-protect-trigger-icon,

html.nautico-futuristic-ui
button[aria-expanded="true"]
.nautico-protect-trigger-icon {

  align-items: center !important;
  justify-items: center !important;

  padding: 0 !important;
  text-align: center !important;
}

/* NAUTICO_R6_PROTECT_TRIGGER_ARROW_CENTER_R1_33_END */


/* ============================================================
   NAUTICO_R6_PROTECT_CHEVRON_TRUE_CENTER_R1_34

   Do not use the typographic › glyph visually.
   Draw a mathematically centered CSS chevron instead.

   CSS ONLY.
   ============================================================ */

html.nautico-futuristic-ui
.nautico-protect-trigger-icon {

  position: relative !important;

  display: block !important;

  box-sizing: border-box !important;

  padding: 0 !important;
  margin: 0 !important;

  /* Hide the asymmetric font glyph but keep DOM unchanged. */
  font-size: 0 !important;
  line-height: 0 !important;

  color: transparent !important;

  text-indent: 0 !important;
  text-align: center !important;

  transform: none !important;
}


/* CSS-drawn chevron */

html.nautico-futuristic-ui
.nautico-protect-trigger-icon::before {

  content: "" !important;

  position: absolute !important;

  top: 50% !important;
  left: 50% !important;

  width: 10px !important;
  height: 10px !important;

  box-sizing: border-box !important;

  margin-left: -5px !important;
  margin-top: -5px !important;

  border-right: 3px solid #ffffff !important;
  border-bottom: 3px solid #ffffff !important;

  pointer-events: none !important;
}


/* CLOSED:
   exact centered right-facing chevron */

html.nautico-futuristic-ui
button[aria-expanded="false"]
.nautico-protect-trigger-icon::before {

  transform: rotate(-45deg) !important;
}


/* OPEN:
   exact centered left-facing chevron */

html.nautico-futuristic-ui
button[aria-expanded="true"]
.nautico-protect-trigger-icon::before {

  transform: rotate(135deg) !important;
}


/* NAUTICO_R6_PROTECT_CHEVRON_TRUE_CENTER_R1_34_END */


/* ============================================================
   NAUTICO_R6_PROTECT_SEND_GAP_R1_35

   Audited exact target:
   composer submit button with mt-16.

   Increase only the vertical space between:
   Protect
   and
   Send securely

   CSS ONLY.
   ============================================================ */

html.nautico-futuristic-ui
.nautico-composer-shell
button[type='submit'].mt-16 {
  margin-top: 20px !important;
}

/* NAUTICO_R6_PROTECT_SEND_GAP_R1_35_END */


/* ============================================================
   NAUTICO_R6_PROTECT_ARROW_FINE_BORDER_R1_36

   Exact target:
   .nautico-protect-trigger-icon

   Refine only the blue trigger box:
   - thinner-looking border
   - softer shadow
   - subtle inner highlight
   - preserve size and centered CSS chevron

   CSS ONLY.
   ============================================================ */

html.nautico-futuristic-ui
.nautico-composer-shell
.nautico-protect-trigger-icon {

  border:
    1px solid
    rgba(176, 226, 247, 0.14) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 3px 9px rgba(31, 105, 168, 0.11) !important;
}

/* NAUTICO_R6_PROTECT_ARROW_FINE_BORDER_R1_36_END */


/* ============================================================
   NAUTICO_R6_ARROW_BOX_FINAL_FINISH_R1_37

   Remove the physical border from the Protect arrow box.
   Draw one perfectly uniform internal hairline instead.

   Preserve:
   - size
   - gradient
   - centered chevron
   - open/closed state
   ============================================================ */

html.nautico-futuristic-ui
.nautico-composer-shell
.nautico-protect-trigger-icon {

  position: relative !important;

  border: 0 !important;
  outline: 0 !important;

  border-radius: 14px !important;

  overflow: hidden !important;

  background-clip: padding-box !important;

  /*
   * One soft exterior shadow only.
   * No border/glow stacking.
   */
  box-shadow:
    0 4px 10px rgba(19, 72, 126, 0.13) !important;
}


/* perfectly uniform fine inner edge */

html.nautico-futuristic-ui
.nautico-composer-shell
.nautico-protect-trigger-icon::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  border-radius: inherit !important;

  pointer-events: none !important;

  box-shadow:
    inset 0 0 0 1px rgba(207, 238, 251, 0.20) !important;

  z-index: 1 !important;
}


/* keep chevron above the decorative edge */

html.nautico-futuristic-ui
.nautico-composer-shell
.nautico-protect-trigger-icon::before {

  z-index: 2 !important;
}


/* NAUTICO_R6_ARROW_BOX_FINAL_FINISH_R1_37_END */


/* ============================================================
   NAUTICO_R6_CLOSE_BOX_FINAL_FINISH_R1_38

   Same finishing principle as Protect chevron box:
   - remove physical border
   - one uniform internal hairline
   - restrained exterior shadow
   - preserve gradient, dimensions and X centering

   CSS ONLY.
   ============================================================ */

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close {

  position: relative !important;

  border: 0 !important;
  outline: 0 !important;

  overflow: hidden !important;

  background-clip: padding-box !important;

  box-shadow:
    0 4px 10px rgba(19, 72, 126, 0.13) !important;
}


/* one perfectly even internal edge */

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close::after,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  border-radius: inherit !important;

  pointer-events: none !important;

  box-shadow:
    inset 0 0 0 1px rgba(207, 238, 251, 0.20) !important;

  z-index: 1 !important;
}


/* X remains above decorative edge */

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close-x,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close-x {

  position: relative !important;
  z-index: 2 !important;
}


/* restrained hover, no thick glow */

html.nautico-futuristic-ui
.nautico-protect-home-companion
.nautico-advanced-close:hover,
html.nautico-futuristic-ui
body > .nautico-book-protect-page
.nautico-advanced-close:hover {

  box-shadow:
    0 5px 12px rgba(19, 72, 126, 0.16) !important;
}


/* NAUTICO_R6_CLOSE_BOX_FINAL_FINISH_R1_38_END */


/* ============================================================
   NAUTICO_R6_MENU_POPUP_LAYER_R1_39

   Problem:
   InfoPopup is inside homepage stacking context.
   Protect is a separate fixed portal.

   Required order while an InfoPopup exists:

       Info modal
       Info backdrop
       ----------------
       Protect portal
       Homepage

   When popup closes, homepage/Protect geometry returns
   automatically to its existing state.

   CSS ONLY.
   ============================================================ */


/* ------------------------------------------------------------
   1. Elevate homepage stacking context ONLY while a menu
      information popup exists.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
.nautico-home-v2:has(.nautico-info-backdrop) {

  position: relative !important;

  z-index: 12000 !important;

  isolation: isolate !important;
}


/* ------------------------------------------------------------
   2. Keep the internal UI context above every normal homepage
      layer while the popup is active.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
.nautico-home-v2:has(.nautico-info-backdrop)
.nautico-ui {

  position: relative !important;

  z-index: 1 !important;
}


/* ------------------------------------------------------------
   3. Popup itself remains the highest object inside homepage.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
.nautico-home-v2
.nautico-info-backdrop {

  z-index: 13000 !important;
}


/* ------------------------------------------------------------
   4. Explicitly keep Protect under active menu popup.

      This does NOT hide/close Protect.
      It only changes stacking while popup exists.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
body:has(.nautico-info-backdrop)
.nautico-protect-portal-root.nautico-protect-home-companion {

  z-index: 5100 !important;

  pointer-events: none !important;
}


/* ------------------------------------------------------------
   5. Popup must always remain interactive.
   ------------------------------------------------------------ */

html.nautico-futuristic-ui
.nautico-info-backdrop,
html.nautico-futuristic-ui
.nautico-info-modal {

  pointer-events: auto !important;
}


/* NAUTICO_R6_MENU_POPUP_LAYER_R1_39_END */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(147 197 253 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
 ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
 *//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: rgb(var(--be-fg-base) / var(--be-divider-opacity)); /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  html,
  body,
  #root {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

  .is-settings-preview {
    pointer-events: none;
  }

  html {
    font-family: var(--be-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    color-scheme: light;
    scroll-padding-top: var(--html-spt, 0px);
  }

    html.dark {
      color-scheme: dark;
    }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  #root {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg) / var(--tw-bg-opacity, 1));
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity));
}

  .nautico-spaces-grid > div:last-child section.rounded-2xl.border#root {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
}

  .nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.border#root
  :is(h1, h2, h3, h4, legend, label) {
  color: #10283a;
}

  .nautico-spaces-grid
  > div:last-child
  section.rounded-2xl.border#root
  .text-muted {
  color: #526a79;
}

  .nautico-kpi-grid ~ section.rounded-2xl.border#root {
  color: #10283a;
  border-color: rgba(91, 122, 142, 0.22);
  box-shadow:
    0 14px 34px rgba(7, 35, 51, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

  .nautico-kpi-grid ~ section.rounded-2xl.border#root :is(h1, h2, h3, h4, label) {
  color: #10283a;
}

  .nautico-kpi-grid ~ section.rounded-2xl.border#root .text-muted {
  color: #556e7d;
}

  .nautico-kpi-grid
  ~ section.rounded-2xl.border#root
  :is(.text-center, [class*='empty'])
  .text-muted,
.nautico-kpi-grid ~ section.rounded-2xl.border#root :is(.text-center.text-muted) {
  color: #536c7c;
  font-weight: 500;
  line-height: 1.55;
}

  @media (min-width: 768px) {

  .nautico-kpi-grid ~ section.rounded-2xl.border#root {
    padding: 16px;
    margin-top: 16px;
  }
}

  @media (max-width: 767px) {

  .nautico-kpi-grid ~ section.rounded-2xl.border#root {
    padding: 14px;
    margin-top: 14px;
  }
}

  .nautico-v2-module
  :is(
    .rounded-2xl.border#root,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  ) {
  border-color: #d8e3ec;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  color: #163149;
  box-shadow: 0 10px 30px rgba(17, 51, 78, 0.055);
}

  .nautico-v2-module
  :is(
    .rounded-2xl.border#root,
    .rounded-panel.border.bg,
    section.rounded-panel.border.bg,
    section.rounded-2xl.border.bg
  )
  :is(h1, h2, h3, h4, h5, label) {
  color: #163149;
}

  .nautico-v2-spaces :is(form, section, .overflow-hidden.rounded-2xl.border#root) {
  border-color: #d8e4ec;
  background-color: #fff;
  box-shadow: 0 10px 30px rgba(18, 51, 77, 0.05);
}

  .nautico-r6f-advanced #root {
  color: rgba(222, 238, 246, 0.75);

  background: rgba(255, 255, 255, 0.006);

  border-color: transparent;

  box-shadow: inset 0 0 0 1px rgba(115, 204, 232, 0.022);
}

  html.nautico-futuristic-ui
  .nautico-admin-shell
  :is(#root, .bg-elevated, [class~='bg-elevated']) {
  background: var(--na-admin-panel);

  background-image: none;
}

  html.nautico-futuristic-ui body:has(a[href='#account-details']) #root {
  color: #f5f8fb;
}

  html.nautico-futuristic-ui .nautico-account-settings-page #root {
  color: #f4f8fb;
}

  html.nautico-futuristic-ui
  .nautico-account-settings-page
  :is(#root,
    .text-muted,
    .text-secondary,
    .text-fg-base,
    .text-fg-muted,
    .text-fg-secondary
  ) {
  color: #ffffff;
}

  html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-hero
  :is(#root, .bg-elevated, .bg-white, .bg-gray-50, .bg-gray-100) {
  background: var(--nr-panel);

  background-image: none;

  color: #ffffff;
}

  html.nautico-futuristic-ui body .nautico-recipient-stage #root {
  color: #f5f9fc;
}

  html.nautico-futuristic-ui
  body
  .nautico-recipient-stage
  .nautico-recipient-policy
  #root {
  background: #0b3040;

  color: #ffffff;
}

  .diagonal-lines {
    background:
      linear-gradient(
        to top left,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        rgba(239, 68, 68, 0.4) 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      ),
      linear-gradient(
        to top right,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) calc(50% - 1px),
        rgba(239, 68, 68, 0.4) 50%,
        rgba(0, 0, 0, 0) calc(50% + 1px),
        rgba(0, 0, 0, 0) 100%
      );
  }

  .svg-image-container svg {
    width: inherit;
    height: inherit;
    max-width: 100%;
  }

  .no-page-overflow {
    overflow: hidden;
  }
  .no-page-overflow body {
    overflow: hidden;
  }
  .no-page-overflow #root {
    overflow: hidden;
  }

  .progress-bar-indeterminate-animate {
    animation: progress-bar-indeterminate 1s infinite;
  }

  @keyframes progress-bar-indeterminate {
    from {
      transform: translate(calc(100% * -1));
    }
    to {
      transform: translate(100%);
    }
  }

  .chart-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.chart-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .chart-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

  html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

  html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.chart-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

  .nautico-book-protect-page .nautico-protect-essentials .chart-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

  @media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .chart-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

  @media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .chart-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

  @media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .chart-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .chart-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.chart-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}

  .chart-grid {
    min-width: 1100px;
    grid-auto-rows: 20px;
    gap: 20px;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1146px) {

  .container {
    max-width: 1146px;
  }
}
.prose {
  color: var(--tw-prose-body);
  max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-links);
  text-decoration: underline;
  font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-inline-start: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
  color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-inline-start-width: 0.25rem;
  border-inline-start-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-inline-start: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  display: block;
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  font-weight: 500;
  font-family: inherit;
  color: var(--tw-prose-kbd);
  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
  font-size: 0.875em;
  border-radius: 0.3125rem;
  padding-top: 0.1875em;
  padding-inline-end: 0.375em;
  padding-bottom: 0.1875em;
  padding-inline-start: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-pre-code);
  background-color: var(--tw-prose-pre-bg);
  overflow-x: auto;
  font-weight: 400;
  font-size: 0.875em;
  line-height: 1.7142857;
  margin-top: 1.7142857em;
  margin-bottom: 1.7142857em;
  border-radius: 0.375rem;
  padding-top: 0.8571429em;
  padding-inline-end: 1.1428571em;
  padding-bottom: 0.8571429em;
  padding-inline-start: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
  content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
  content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  width: 100%;
  table-layout: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  vertical-align: top;
}
.prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  text-align: start;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose {
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-kbd: #111827;
  --tw-prose-kbd-shadows: 17 24 39;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-kbd: #fff;
  --tw-prose-invert-kbd-shadows: 255 255 255;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0.5em;
  padding-inline-start: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-top: 0.5714286em;
  padding-inline-end: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-inline-start: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-start: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  padding-inline-end: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
  margin-bottom: 0;
}
.svg-icon {
  display: inline-block;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition-property: transform, fill;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
  @supports (container-type: inline-size) {
    .file-grid-container {
      container-type: inline-size;
    }

    .file-grid {
    display: grid;
    gap: 1.125rem;
  }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}

    .file-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    @container (min-width: 500px) {
      .file-grid {
      display: grid;
      gap: 1.125rem;
    }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
      .file-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @container (min-width: 800px) {
      .file-grid {
      display: grid;
      gap: 1.125rem;
    }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
      .file-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @container (min-width: 1040px) {
      .file-grid {
      display: grid;
      gap: 1.125rem;
    }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
      .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
  }

  @supports not (container-type: inline-size) {
    .file-grid {
    display: grid;
    gap: 0.875rem;
  }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui .nautico-composer-shell .file-grid {
    gap: 6px;
  }
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
    .file-grid {
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    @media (min-width: 768px) {
      .file-grid {
      display: grid;
      gap: 1.125rem;
    }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
      .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      }
    }

    @media (min-width: 1024px) {
      .file-grid {
      display: grid;
      gap: 1.125rem;
    }

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3::before {
  content: 'PROTECTION LEVEL';

  grid-column: 1 / -1;

  margin: 2px 0 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .mt-14.file-grid.md\:grid-cols-2::before {
  content: 'ACCESS & LIMITS';

  grid-column: 1 / -1;

  margin-bottom: 2px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2::before {
  content: 'RECIPIENT ACTIONS';

  grid-column: 1 / -1;

  margin-bottom: 3px;

  color: #6dcce7;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3 {
  grid-template-columns: 1fr;

  gap: 7px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button {
  min-height: 61px;

  padding: 9px 11px;

  color: #eef9ff;

  border: 1px solid rgba(103, 197, 226, 0.12);

  border-radius: 11px;

  background: rgba(255, 255, 255, 0.024);

  box-shadow: none;

  text-align: left;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button.border-primary {
  border-color: rgba(96, 202, 230, 0.3);

  background: linear-gradient(
    135deg,
    rgba(82, 97, 204, 0.27),
    rgba(43, 155, 190, 0.17)
  );
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .font-bold {
  font-size: 14px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .file-grid.sm\:grid-cols-3
  > button
  .text-xs {
  margin-top: 4px;

  color: rgba(196, 219, 232, 0.57);

  font-size: 10px;

  line-height: 1.35;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {
  grid-template-columns: 1fr;

  gap: 6px;

  margin-top: 10px;
}

html.nautico-futuristic-ui
  body
  > .nautico-book-protect-page
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > label {
  min-height: 42px;

  padding: 8px 10px;

  color: rgba(221, 237, 246, 0.8);

  border: 1px solid rgba(104, 195, 224, 0.11);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.02);
}

html.nautico-futuristic-ui
  .nautico-admin-shell
  .dashboard-grid-content
  :is(.flex,.file-grid)
  > img:only-child {
  max-width: min(260px, 72vw);
  max-height: 210px;

  -o-object-fit: contain;

     object-fit: contain;

  filter: grayscale(1) brightness(2.1) contrast(0.82);

  opacity: 0.92;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px 16px;
  border: 1px solid rgba(126, 190, 237, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(20, 41, 72, 0.74), rgba(15, 31, 57, 0.58));
  color: #eef7ff;
  text-align: left;
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button.border-primary {
  border-color: rgba(132, 226, 255, 0.46);
  background:
    linear-gradient(135deg, rgba(95, 102, 229, 0.54), rgba(126, 219, 231, 0.52));
  box-shadow: 0 0 28px rgba(107, 179, 255, 0.13);
}

.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .font-bold {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button .text-muted {
  font-size: 13px;
  line-height: 1.35;
  opacity: .86;
}

.nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 980px) {
  
  .nautico-book-protect-page .nautico-protect-essentials .file-grid.grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {

  .nautico-book-protect-page .nautico-protect-essentials > .file-grid:first-child > button {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

@media (min-width: 1100px) {

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    min-height: 46px;

    padding: 8px 10px;

    border-radius: 13px;

    border-color: rgba(113, 177, 226, .13);

    background:
      linear-gradient(
        180deg,
        rgba(21, 38, 67, .64),
        rgba(12, 26, 48, .61)
      );
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 15px;
    line-height: 1.15;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    font-size: 10.5px;
    line-height: 1.25;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button {
    display: grid;
    grid-template-columns: 100px minmax(0,1fr);
    align-items: center;

    min-height: 48px;

    gap: 10px;

    padding: 8px 11px;

    text-align: left;

    border-radius: 13px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .font-bold {
    font-size: 14px;
    line-height: 1.1;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child
  > button
  .text-muted {
    margin-top: 0;

    font-size: 10.5px;
    line-height: 1.22;

    color: rgba(199,218,234,.70);
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .file-grid:first-child {

    width: 100%;
    max-width: 100%;

    margin: 0 0 8px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2 {

    width: 100%;
    max-width: 100%;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    margin-bottom: 4px;
    -moz-column-gap: 8px;
         column-gap: 8px;
    row-gap: 8px;
    margin-top: 4px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-center.gap-8,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  .flex.items-start.gap-8 {
    min-height: 52px;
    padding: 10px 12px;
    gap: 10px;
    border-radius: 14px;
    align-items: flex-start;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  label {
    font-size: 12px;
    line-height: 1.3;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  .file-grid.grid-cols-2
  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    margin-top: 2px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2 {

    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    -moz-column-gap: 12px;

         column-gap: 12px;
    row-gap: 10px;

    width: 100%;
    max-width: 100%;

    margin-top: 12px;
    margin-bottom: 10px;

    padding:
      0
      3px
      8px
      3px;

    box-sizing: border-box;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > * {

    width: 100%;
    max-width: 100%;

    min-width: 0;
    min-height: 56px;

    box-sizing: border-box;

    margin: 0;

    padding:
      11px
      12px;

    gap: 10px;

    border-radius: 14px;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  label,

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  > *
  span {

    min-width: 0;

    line-height: 1.3;

    overflow-wrap: normal;
  }

  html.nautico-futuristic-ui
  .nautico-protect-home-companion
  .nautico-protect-essentials
  > .gap-9.mt-14.file-grid.text-sm.md\:grid-cols-2
  input[type="checkbox"] {

    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    min-width: 16px;
    min-height: 16px;

    margin-top: 1px;
  }

}
      .file-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }
  }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-8 {
  inset: 0.5rem;
}
.-inset-y-px {
  top: -1px;
  bottom: -1px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.-bottom-6 {
  bottom: -0.375rem;
}
.-left-12 {
  left: -0.75rem;
}
.-right-6 {
  right: -0.375rem;
}
.-top-160 {
  top: -10rem;
}
.-top-6 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-16 {
  bottom: 1rem;
}
.bottom-180 {
  bottom: 11.25rem;
}
.bottom-24 {
  bottom: 1.5rem;
}
.bottom-8 {
  bottom: 0.5rem;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-16 {
  left: 1rem;
}
.left-20 {
  left: 1.25rem;
}
.left-4 {
  left: 0.25rem;
}
.left-48 {
  left: 3rem;
}
.left-6 {
  left: 0.375rem;
}
.left-\[212px\] {
  left: 212px;
}
.left-\[calc\(50\%\+3rem\)\] {
  left: calc(50% + 3rem);
}
.left-\[calc\(50\%-11rem\)\] {
  left: calc(50% - 11rem);
}
.left-\[calc\(50\%-4rem\)\] {
  left: calc(50% - 4rem);
}
.right-0 {
  right: 0px;
}
.right-16 {
  right: 1rem;
}
.right-20 {
  right: 1.25rem;
}
.right-24 {
  right: 1.5rem;
}
.right-4 {
  right: 0.25rem;
}
.right-8 {
  right: 0.5rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-10 {
  top: 0.625rem;
}
.top-120 {
  top: 7.5rem;
}
.top-2 {
  top: 0.125rem;
}
.top-26 {
  top: 1.625rem;
}
.top-6 {
  top: 0.375rem;
}
.top-8 {
  top: 0.5rem;
}
.top-\[74px\] {
  top: 74px;
}
.top-\[calc\(100\%-13rem\)\] {
  top: calc(100% - 13rem);
}
.isolate {
  isolation: isolate;
}
.-z-10 {
  z-index: -10;
}
.-z-20 {
  z-index: -20;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-drawer {
  z-index: 100;
}
.z-modal {
  z-index: 110;
}
.z-popover {
  z-index: 130;
}
.z-toast {
  z-index: 160;
}
.z-tooltip {
  z-index: 150;
}
.z-tray {
  z-index: 120;
}
.-order-1 {
  order: -1;
}
.col-\[1\/-1\] {
  grid-column: 1/-1;
}
.col-\[1\/2\] {
  grid-column: 1/2;
}
.col-\[2\/-1\] {
  grid-column: 2/-1;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-full {
  grid-column: 1 / -1;
}
.row-\[1\/2\] {
  grid-row: 1/2;
}
.row-\[2\/-1\] {
  grid-row: 2/-1;
}
.row-span-11 {
  grid-row: span 11 / span 11;
}
.row-span-3 {
  grid-row: span 3 / span 3;
}
.-m-8 {
  margin: -0.5rem;
}
.m-12 {
  margin: 0.75rem;
}
.m-8 {
  margin: 0.5rem;
}
.m-auto {
  margin: auto;
}
.mx-14 {
  margin-left: 0.875rem;
  margin-right: 0.875rem;
}
.mx-16 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-20 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}
.mx-24 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.mx-4 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-8 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-10 {
  margin-top: 0.625rem;
  margin-bottom: 0.625rem;
}
.my-14 {
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
}
.my-16 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.my-20 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.my-24 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.my-30 {
  margin-top: 1.875rem;
  margin-bottom: 1.875rem;
}
.my-32 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.my-4 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.my-40 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.my-48 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.my-50 {
  margin-top: 3.125rem;
  margin-bottom: 3.125rem;
}
.my-6 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.my-8 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-80 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.-mb-48 {
  margin-bottom: -3rem;
}
.-ml-1 {
  margin-left: -0.063rem;
}
.-ml-10 {
  margin-left: -0.625rem;
}
.-ml-12 {
  margin-left: -0.75rem;
}
.-ml-3 {
  margin-left: -0.188rem;
}
.-ml-4 {
  margin-left: -0.25rem;
}
.-ml-6 {
  margin-left: -0.375rem;
}
.-ml-8 {
  margin-left: -0.5rem;
}
.-mr-4 {
  margin-right: -0.25rem;
}
.-mt-2 {
  margin-top: -0.125rem;
}
.-mt-4 {
  margin-top: -0.25rem;
}
.-mt-6 {
  margin-top: -0.375rem;
}
.mb-0 {
  margin-bottom: 0px;
}
.mb-10 {
  margin-bottom: 0.625rem;
}
.mb-12 {
  margin-bottom: 0.75rem;
}
.mb-14 {
  margin-bottom: 0.875rem;
}
.mb-16 {
  margin-bottom: 1rem;
}
.mb-160 {
  margin-bottom: 10rem;
}
.mb-18 {
  margin-bottom: 1.125rem;
}
.mb-2 {
  margin-bottom: 0.125rem;
}
.mb-20 {
  margin-bottom: 1.25rem;
}
.mb-24 {
  margin-bottom: 1.5rem;
}
.mb-30 {
  margin-bottom: 1.875rem;
}
.mb-32 {
  margin-bottom: 2rem;
}
.mb-34 {
  margin-bottom: 2.125rem;
}
.mb-38 {
  margin-bottom: 2.375rem;
}
.mb-4 {
  margin-bottom: 0.25rem;
}
.mb-40 {
  margin-bottom: 2.5rem;
}
.mb-44 {
  margin-bottom: 2.75rem;
}
.mb-48 {
  margin-bottom: 3rem;
}
.mb-5 {
  margin-bottom: 0.313rem;
}
.mb-54 {
  margin-bottom: 3.375rem;
}
.mb-6 {
  margin-bottom: 0.375rem;
}
.mb-64 {
  margin-bottom: 4rem;
}
.mb-8 {
  margin-bottom: 0.5rem;
}
.ml-10 {
  margin-left: 0.625rem;
}
.ml-12 {
  margin-left: 0.75rem;
}
.ml-18 {
  margin-left: 1.125rem;
}
.ml-24 {
  margin-left: 1.5rem;
}
.ml-4 {
  margin-left: 0.25rem;
}
.ml-6 {
  margin-left: 0.375rem;
}
.ml-8 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-10 {
  margin-right: 0.625rem;
}
.mr-12 {
  margin-right: 0.75rem;
}
.mr-14 {
  margin-right: 0.875rem;
}
.mr-16 {
  margin-right: 1rem;
}
.mr-24 {
  margin-right: 1.5rem;
}
.mr-4 {
  margin-right: 0.25rem;
}
.mr-6 {
  margin-right: 0.375rem;
}
.mr-8 {
  margin-right: 0.5rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0 {
  margin-top: 0px;
}
.mt-10 {
  margin-top: 0.625rem;
}
.mt-12 {
  margin-top: 0.75rem;
}
.mt-14 {
  margin-top: 0.875rem;
}
.mt-16 {
  margin-top: 1rem;
}
.mt-18 {
  margin-top: 1.125rem;
}
.mt-2 {
  margin-top: 0.125rem;
}
.mt-20 {
  margin-top: 1.25rem;
}
.mt-24 {
  margin-top: 1.5rem;
}
.mt-26 {
  margin-top: 1.625rem;
}
.mt-28 {
  margin-top: 1.75rem;
}
.mt-3 {
  margin-top: 0.188rem;
}
.mt-30 {
  margin-top: 1.875rem;
}
.mt-32 {
  margin-top: 2rem;
}
.mt-36 {
  margin-top: 2.25rem;
}
.mt-38 {
  margin-top: 2.375rem;
}
.mt-4 {
  margin-top: 0.25rem;
}
.mt-40 {
  margin-top: 2.5rem;
}
.mt-44 {
  margin-top: 2.75rem;
}
.mt-48 {
  margin-top: 3rem;
}
.mt-5 {
  margin-top: 0.313rem;
}
.mt-50 {
  margin-top: 3.125rem;
}
.mt-6 {
  margin-top: 0.375rem;
}
.mt-60 {
  margin-top: 3.75rem;
}
.mt-64 {
  margin-top: 4rem;
}
.mt-8 {
  margin-top: 0.5rem;
}
.mt-80 {
  margin-top: 5rem;
}
.mt-96 {
  margin-top: 6rem;
}
.mt-auto {
  margin-top: auto;
}
.box-content {
  box-sizing: content-box;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-row {
  display: table-row;
}
.flow-root {
  display: flow-root;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-\[1108\/632\] {
  aspect-ratio: 1108/632;
}
.aspect-\[1155\/678\] {
  aspect-ratio: 1155/678;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.size-20 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-24 {
  width: 1.5rem;
  height: 1.5rem;
}
.size-32 {
  width: 2rem;
  height: 2rem;
}
.size-44 {
  width: 2.75rem;
  height: 2.75rem;
}
.size-8 {
  width: 0.5rem;
  height: 0.5rem;
}
.size-\[64rem\] {
  width: 64rem;
  height: 64rem;
}
.size-full {
  width: 100%;
  height: 100%;
}
.h-1 {
  height: 0.063rem;
}
.h-10 {
  height: 0.625rem;
}
.h-100 {
  height: 6.25rem;
}
.h-12 {
  height: 0.75rem;
}
.h-128 {
  height: 8rem;
}
.h-132 {
  height: 8.25rem;
}
.h-14 {
  height: 0.875rem;
}
.h-16 {
  height: 1rem;
}
.h-18 {
  height: 1.125rem;
}
.h-192 {
  height: 12rem;
}
.h-2 {
  height: 0.125rem;
}
.h-20 {
  height: 1.25rem;
}
.h-22 {
  height: 1.375rem;
}
.h-24 {
  height: 1.5rem;
}
.h-26 {
  height: 1.625rem;
}
.h-288 {
  height: 18rem;
}
.h-3 {
  height: 0.188rem;
}
.h-30 {
  height: 1.875rem;
}
.h-32 {
  height: 2rem;
}
.h-320 {
  height: 20rem;
}
.h-34 {
  height: 2.125rem;
}
.h-36 {
  height: 2.25rem;
}
.h-38 {
  height: 2.375rem;
}
.h-4 {
  height: 0.25rem;
}
.h-40 {
  height: 2.5rem;
}
.h-400 {
  height: 25rem;
}
.h-42 {
  height: 2.625rem;
}
.h-44 {
  height: 2.75rem;
}
.h-46 {
  height: 2.875rem;
}
.h-48 {
  height: 3rem;
}
.h-50 {
  height: 3.125rem;
}
.h-52 {
  height: 3.25rem;
}
.h-54 {
  height: 3.375rem;
}
.h-56 {
  height: 3.5rem;
}
.h-580 {
  height: 36.25rem;
}
.h-6 {
  height: 0.375rem;
}
.h-60 {
  height: 3.75rem;
}
.h-64 {
  height: 4rem;
}
.h-640 {
  height: 40rem;
}
.h-70 {
  height: 4.375rem;
}
.h-8 {
  height: 0.5rem;
}
.h-80 {
  height: 5rem;
}
.h-90 {
  height: 5.625rem;
}
.h-92 {
  height: 5.75rem;
}
.h-\[186px\] {
  height: 186px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[65px\] {
  height: 65px;
}
.h-\[calc\(100\%-12px\)\] {
  height: calc(100% - 12px);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-max {
  height: -moz-max-content;
  height: max-content;
}
.h-screen {
  height: 100dvh;
}
.max-h-160 {
  max-height: 10rem;
}
.max-h-240 {
  max-height: 15rem;
}
.max-h-26 {
  max-height: 1.625rem;
}
.max-h-288 {
  max-height: 18rem;
}
.max-h-320 {
  max-height: 20rem;
}
.max-h-400 {
  max-height: 25rem;
}
.max-h-46 {
  max-height: 2.875rem;
}
.max-h-48 {
  max-height: 3rem;
}
.max-h-640 {
  max-height: 40rem;
}
.max-h-680 {
  max-height: 42.5rem;
}
.max-h-\[340px\] {
  max-height: 340px;
}
.max-h-\[600px\] {
  max-height: 600px;
}
.max-h-\[78vh\] {
  max-height: 78vh;
}
.max-h-\[calc\(100\%-30px\)\] {
  max-height: calc(100% - 30px);
}
.max-h-dialog {
  max-height: calc(var(--be-viewport-height, 100vh) * 0.9);
}
.max-h-full {
  max-height: 100%;
}
.max-h-inherit {
  max-height: inherit;
}
.max-h-tray {
  max-height: calc(var(--be-viewport-height, 100vh) * 0.9);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-200 {
  min-height: 12.5rem;
}
.min-h-24 {
  min-height: 1.5rem;
}
.min-h-26 {
  min-height: 1.625rem;
}
.min-h-30 {
  min-height: 1.875rem;
}
.min-h-36 {
  min-height: 2.25rem;
}
.min-h-40 {
  min-height: 2.5rem;
}
.min-h-42 {
  min-height: 2.625rem;
}
.min-h-48 {
  min-height: 3rem;
}
.min-h-50 {
  min-height: 3.125rem;
}
.min-h-60 {
  min-height: 3.75rem;
}
.min-h-70 {
  min-height: 4.375rem;
}
.min-h-80 {
  min-height: 5rem;
}
.min-h-90 {
  min-height: 5.625rem;
}
.min-h-\[1000px\] {
  min-height: 1000px;
}
.min-h-\[100svh\] {
  min-height: 100svh;
}
.min-h-\[238px\] {
  min-height: 238px;
}
.min-h-\[303px\] {
  min-height: 303px;
}
.min-h-\[335px\] {
  min-height: 335px;
}
.min-h-\[340px\] {
  min-height: 340px;
}
.min-h-\[45px\] {
  min-height: 45px;
}
.min-h-dialog {
  min-height: calc(var(--be-viewport-height, 100vh) * 0.9);
}
.min-h-full {
  min-height: 100%;
}
.min-h-screen {
  min-height: 100dvh;
}
.\!w-auto {
  width: auto !important;
}
.w-0 {
  width: 0px;
}
.w-1 {
  width: 0.063rem;
}
.w-1\/2 {
  width: 50%;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 0.625rem;
}
.w-100 {
  width: 6.25rem;
}
.w-110 {
  width: 6.875rem;
}
.w-12 {
  width: 0.75rem;
}
.w-128 {
  width: 8rem;
}
.w-1280 {
  width: 80rem;
}
.w-14 {
  width: 0.875rem;
}
.w-16 {
  width: 1rem;
}
.w-18 {
  width: 1.125rem;
}
.w-192 {
  width: 12rem;
}
.w-2 {
  width: 0.125rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 1.25rem;
}
.w-22 {
  width: 1.375rem;
}
.w-224 {
  width: 14rem;
}
.w-24 {
  width: 1.5rem;
}
.w-240 {
  width: 15rem;
}
.w-256 {
  width: 16rem;
}
.w-26 {
  width: 1.625rem;
}
.w-280 {
  width: 17.5rem;
}
.w-288 {
  width: 18rem;
}
.w-30 {
  width: 1.875rem;
}
.w-32 {
  width: 2rem;
}
.w-320 {
  width: 20rem;
}
.w-34 {
  width: 2.125rem;
}
.w-36 {
  width: 2.25rem;
}
.w-375 {
  width: 23.438rem;
}
.w-38 {
  width: 2.375rem;
}
.w-384 {
  width: 24rem;
}
.w-40 {
  width: 2.5rem;
}
.w-42 {
  width: 2.625rem;
}
.w-44 {
  width: 2.75rem;
}
.w-440 {
  width: 27.5rem;
}
.w-46 {
  width: 2.875rem;
}
.w-48 {
  width: 3rem;
}
.w-50 {
  width: 3.125rem;
}
.w-52 {
  width: 3.25rem;
}
.w-56 {
  width: 3.5rem;
}
.w-580 {
  width: 36.25rem;
}
.w-60 {
  width: 3.75rem;
}
.w-620 {
  width: 38.75rem;
}
.w-68 {
  width: 4.25rem;
}
.w-70 {
  width: 4.375rem;
}
.w-76 {
  width: 4.75rem;
}
.w-780 {
  width: 48.75rem;
}
.w-8 {
  width: 0.5rem;
}
.w-80 {
  width: 5rem;
}
.w-84 {
  width: 5.25rem;
}
.w-850 {
  width: 53.125rem;
}
.w-90 {
  width: 5.625rem;
}
.w-96 {
  width: 6rem;
}
.w-\[1216px\] {
  width: 1216px;
}
.w-\[165px\] {
  width: 165px;
}
.w-\[168px\] {
  width: 168px;
}
.w-\[170px\] {
  width: 170px;
}
.w-\[233px\] {
  width: 233px;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[350px\] {
  width: 350px;
}
.w-\[36\.125rem\] {
  width: 36.125rem;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[540px\] {
  width: 540px;
}
.w-\[578px\] {
  width: 578px;
}
.w-\[640px\] {
  width: 640px;
}
.w-\[69\.25rem\] {
  width: 69.25rem;
}
.w-\[72\.1875rem\] {
  width: 72.1875rem;
}
.w-\[742px\] {
  width: 742px;
}
.w-\[768px\] {
  width: 768px;
}
.w-\[912px\] {
  width: 912px;
}
.w-\[calc\(100\%-40px\)\] {
  width: calc(100% - 40px);
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-max {
  width: -moz-max-content;
  width: max-content;
}
.w-min {
  width: -moz-min-content;
  width: min-content;
}
.w-screen {
  width: 100vw;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-100 {
  min-width: 6.25rem;
}
.min-w-110 {
  min-width: 6.875rem;
}
.min-w-112 {
  min-width: 7rem;
}
.min-w-128 {
  min-width: 8rem;
}
.min-w-140 {
  min-width: 8.75rem;
}
.min-w-144 {
  min-width: 9rem;
}
.min-w-160 {
  min-width: 10rem;
}
.min-w-180 {
  min-width: 11.25rem;
}
.min-w-192 {
  min-width: 12rem;
}
.min-w-200 {
  min-width: 12.5rem;
}
.min-w-224 {
  min-width: 14rem;
}
.min-w-240 {
  min-width: 15rem;
}
.min-w-280 {
  min-width: 17.5rem;
}
.min-w-30 {
  min-width: 1.875rem;
}
.min-w-320 {
  min-width: 20rem;
}
.min-w-4 {
  min-width: 0.25rem;
}
.min-w-40 {
  min-width: 2.5rem;
}
.min-w-42 {
  min-width: 2.625rem;
}
.min-w-50 {
  min-width: 3.125rem;
}
.min-w-54 {
  min-width: 3.375rem;
}
.min-w-82 {
  min-width: 5.125rem;
}
.min-w-84 {
  min-width: 5.25rem;
}
.min-w-90 {
  min-width: 5.625rem;
}
.min-w-96 {
  min-width: 6rem;
}
.min-w-\[210px\] {
  min-width: 210px;
}
.min-w-\[300px\] {
  min-width: 300px;
}
.min-w-\[min\(288px\2c 90\%\)\] {
  min-width: min(288px,90%);
}
.min-w-min {
  min-width: -moz-min-content;
  min-width: min-content;
}
.max-w-100 {
  max-width: 6.25rem;
}
.max-w-110 {
  max-width: 6.875rem;
}
.max-w-124 {
  max-width: 7.75rem;
}
.max-w-144 {
  max-width: 9rem;
}
.max-w-180 {
  max-width: 11.25rem;
}
.max-w-184 {
  max-width: 11.5rem;
}
.max-w-224 {
  max-width: 14rem;
}
.max-w-240 {
  max-width: 15rem;
}
.max-w-280 {
  max-width: 17.5rem;
}
.max-w-288 {
  max-width: 18rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-384 {
  max-width: 24rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4\/5 {
  max-width: 80%;
}
.max-w-40 {
  max-width: 2.5rem;
}
.max-w-400 {
  max-width: 25rem;
}
.max-w-440 {
  max-width: 27.5rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-500 {
  max-width: 31.25rem;
}
.max-w-580 {
  max-width: 36.25rem;
}
.max-w-60 {
  max-width: 3.75rem;
}
.max-w-620 {
  max-width: 38.75rem;
}
.max-w-680 {
  max-width: 42.5rem;
}
.max-w-70 {
  max-width: 4.375rem;
}
.max-w-720 {
  max-width: 45rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-84 {
  max-width: 5.25rem;
}
.max-w-850 {
  max-width: 53.125rem;
}
.max-w-\[1400px\] {
  max-width: 1400px;
}
.max-w-\[210px\] {
  max-width: 210px;
}
.max-w-\[464px\] {
  max-width: 464px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[calc\(100\%-48px\)\] {
  max-width: calc(100% - 48px);
}
.max-w-\[min\(500px\2c 100\%\)\] {
  max-width: min(500px,100%);
}
.max-w-dialog {
  max-width:  calc(var(--be-viewport-width, 100vw) * 0.9);
}
.max-w-full {
  max-width: 100%;
}
.max-w-max {
  max-width: -moz-max-content;
  max-width: max-content;
}
.max-w-none {
  max-width: none;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-2 {
  flex: 2 1 0%;
}
.flex-3 {
  flex: 3 1 0%;
}
.flex-\[1_1_60px\] {
  flex: 1 1 60px;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-grow {
  flex-grow: 1;
}
.origin-\[0_55\%\] {
  transform-origin: 0 55%;
}
.origin-bottom-left {
  transform-origin: bottom left;
}
.origin-top-left {
  transform-origin: top left;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-45 {
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[30deg\] {
  --tw-rotate: 30deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.skew-x-\[-30deg\] {
  --tw-skew-x: -30deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.skew-x-\[30deg\] {
  --tw-skew-x: 30deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-y-\[0\.6\] {
  --tw-scale-y: 0.6;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-gpu {
  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
  cursor: default;
}
.cursor-none {
  cursor: none;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-in {
  cursor: zoom-in;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.list-decimal {
  list-style-type: decimal;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-\[max-content\2c repeat\(12\2c minmax\(66px\2c 1fr\)\)\] {
  grid-template-columns: max-content repeat(12,minmax(66px,1fr));
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(90px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(90px,1fr));
}
.grid-rows-\[auto\2c auto\2c 1fr\] {
  grid-template-rows: auto auto 1fr;
}
.grid-rows-subgrid {
  grid-template-rows: subgrid;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0 {
  gap: 0px;
}
.gap-1 {
  gap: 0.063rem;
}
.gap-10 {
  gap: 0.625rem;
}
.gap-12 {
  gap: 0.75rem;
}
.gap-14 {
  gap: 0.875rem;
}
.gap-16 {
  gap: 1rem;
}
.gap-18 {
  gap: 1.125rem;
}
.gap-2 {
  gap: 0.125rem;
}
.gap-20 {
  gap: 1.25rem;
}
.gap-24 {
  gap: 1.5rem;
}
.gap-30 {
  gap: 1.875rem;
}
.gap-32 {
  gap: 2rem;
}
.gap-36 {
  gap: 2.25rem;
}
.gap-4 {
  gap: 0.25rem;
}
.gap-40 {
  gap: 2.5rem;
}
.gap-5 {
  gap: 0.313rem;
}
.gap-6 {
  gap: 0.375rem;
}
.gap-60 {
  gap: 3.75rem;
}
.gap-64 {
  gap: 4rem;
}
.gap-70 {
  gap: 4.375rem;
}
.gap-8 {
  gap: 0.5rem;
}
.gap-x-10 {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
.gap-x-16 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-18 {
  -moz-column-gap: 1.125rem;
       column-gap: 1.125rem;
}
.gap-x-24 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-x-30 {
  -moz-column-gap: 1.875rem;
       column-gap: 1.875rem;
}
.gap-x-32 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}
.gap-y-10 {
  row-gap: 0.625rem;
}
.gap-y-12 {
  row-gap: 0.75rem;
}
.gap-y-4 {
  row-gap: 0.25rem;
}
.gap-y-64 {
  row-gap: 4rem;
}
.space-y-10 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-14 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-18 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.125rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.space-y-20 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-24 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-32 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
}
.space-y-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.self-stretch {
  align-self: stretch;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-visible {
  overflow: visible;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-y-hidden {
  overflow-y: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-ellipsis {
  text-overflow: ellipsis;
}
.text-ellipsis {
  text-overflow: ellipsis;
}
.whitespace-normal {
  white-space: normal;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-button {
  border-radius: var(--be-button-radius, 0.25rem);
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-input {
  border-radius: var(--be-input-radius, 0.25rem);
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-none {
  border-radius: 0px;
}
.rounded-panel {
  border-radius: var(--be-panel-radius, 0.25rem);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.rounded-l-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}
.rounded-l-input {
  border-top-left-radius: var(--be-input-radius, 0.25rem);
  border-bottom-left-radius: var(--be-input-radius, 0.25rem);
}
.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.rounded-l-none {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-r-full {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}
.rounded-r-input {
  border-top-right-radius: var(--be-input-radius, 0.25rem);
  border-bottom-right-radius: var(--be-input-radius, 0.25rem);
}
.rounded-r-md {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.rounded-r-none {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-panel {
  border-top-left-radius: var(--be-panel-radius, 0.25rem);
  border-top-right-radius: var(--be-panel-radius, 0.25rem);
}
.rounded-bl-none {
  border-bottom-left-radius: 0px;
}
.rounded-br-none {
  border-bottom-right-radius: 0px;
}
.rounded-tl-none {
  border-top-left-radius: 0px;
}
.rounded-tl-xl {
  border-top-left-radius: 0.75rem;
}
.rounded-tr-none {
  border-top-right-radius: 0px;
}
.rounded-tr-xl {
  border-top-right-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-1 {
  border-width: 0.063rem;
}
.border-2 {
  border-width: 0.125rem;
}
.border-\[3px\] {
  border-width: 3px;
}
.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-none {
  border-style: none;
}
.border-\[\#c3cbdc\] {
  --tw-border-opacity: 1;
  border-color: rgb(195 203 220 / var(--tw-border-opacity, 1));
}
.border-bg-alt {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-bg-alt) / var(--tw-border-opacity, 1));
}
.border-chip {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-bg-chip) / var(--tw-border-opacity, 1));
}
.border-danger {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.border-danger\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-danger\/50 {
  border-color: rgb(239 68 68 / 0.5);
}
.border-divider {
  border-color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.border-divider-darker {
  border-color: rgb(var(--be-fg-base) / 0.16);
}
.border-divider-lighter {
  border-color: rgb(var(--be-fg-base) / 0.06);
}
.border-envato {
  --tw-border-opacity: 1;
  border-color: rgb(108 161 43 / var(--tw-border-opacity, 1));
}
.border-on-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-on-primary) / var(--tw-border-opacity, 1));
}
.border-positive {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-positive\/30 {
  border-color: rgb(34 197 94 / 0.3);
}
.border-positive\/50 {
  border-color: rgb(34 197 94 / 0.5);
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary) / var(--tw-border-opacity, 1));
}
.border-primary-light {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary-light) / var(--tw-border-opacity, 1));
}
.border-primary\/20 {
  border-color: rgb(var(--be-primary) / 0.2);
}
.border-primary\/30 {
  border-color: rgb(var(--be-primary) / 0.3);
}
.border-primary\/50 {
  border-color: rgb(var(--be-primary) / 0.5);
}
.border-text-muted {
  border-color: rgb(var(--be-fg-base) / var(--be-text-muted-opacity));
}
.border-transparent {
  border-color: transparent;
}
.border-warning\/30 {
  border-color: rgb(243 164 50 / 0.3);
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/30 {
  border-color: rgb(255 255 255 / 0.3);
}
.border-b-bg {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--be-bg) / var(--tw-border-opacity, 1));
}
.border-b-divider {
  border-bottom-color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.border-b-primary {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(var(--be-primary) / var(--tw-border-opacity, 1));
}
.border-b-transparent {
  border-bottom-color: transparent;
}
.border-r-primary-light {
  --tw-border-opacity: 1;
  border-right-color: rgb(var(--be-primary-light) / var(--tw-border-opacity, 1));
}
.border-r-transparent {
  border-right-color: transparent;
}
.border-t-divider {
  border-top-color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.border-t-divider-lighter {
  border-top-color: rgb(var(--be-fg-base) / 0.06);
}
.bg {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg) / var(--tw-bg-opacity, 1));
}
.bg-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-alt) / var(--tw-bg-opacity, 1));
}
.bg-alt\/20 {
  background-color: rgb(var(--be-bg-alt) / 0.2);
}
.bg-alt\/30 {
  background-color: rgb(var(--be-bg-alt) / 0.3);
}
.bg-alt\/60 {
  background-color: rgb(var(--be-bg-alt) / 0.6);
}
.bg-bg\/80 {
  background-color: rgb(var(--be-bg) / 0.8);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-chip {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-chip) / var(--tw-bg-opacity, 1));
}
.bg-danger {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-danger-lighter {
  --tw-bg-opacity: 1;
  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
}
.bg-danger\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-danger\/20 {
  background-color: rgb(239 68 68 / 0.2);
}
.bg-danger\/30 {
  background-color: rgb(239 68 68 / 0.3);
}
.bg-danger\/6 {
  background-color: rgb(239 68 68 / 6%);
}
.bg-danger\/focus {
  background-color: rgb(239 68 68 / var(--be-focus-opacity));
}
.bg-divider {
  background-color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.bg-elevated {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-elevated) / var(--tw-bg-opacity, 1));
}
.bg-envato {
  --tw-bg-opacity: 1;
  background-color: rgb(108 161 43 / var(--tw-bg-opacity, 1));
}
.bg-fg-base\/4 {
  background-color: rgb(var(--be-fg-base) / 4%);
}
.bg-fg-base\/6 {
  background-color: rgb(var(--be-fg-base) / 6%);
}
.bg-fg-base\/8 {
  background-color: rgb(var(--be-fg-base) / 8%);
}
.bg-focus {
  background-color: rgb(var(--be-fg-base) / var(--be-focus-opacity));
}
.bg-inherit {
  background-color: inherit;
}
.bg-paper {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-paper) / var(--tw-bg-opacity, 1));
}
.bg-positive {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-positive-darker {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-positive-lighter {
  --tw-bg-opacity: 1;
  background-color: rgb(187 247 208 / var(--tw-bg-opacity, 1));
}
.bg-positive\/focus {
  background-color: rgb(34 197 94 / var(--be-focus-opacity));
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary) / var(--tw-bg-opacity, 1));
}
.bg-primary-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-dark) / var(--tw-bg-opacity, 1));
}
.bg-primary-light {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-light) / var(--tw-bg-opacity, 1));
}
.bg-primary-light\/10 {
  background-color: rgb(var(--be-primary-light) / 0.1);
}
.bg-primary-light\/20 {
  background-color: rgb(var(--be-primary-light) / 0.2);
}
.bg-primary-light\/30 {
  background-color: rgb(var(--be-primary-light) / 0.3);
}
.bg-primary-light\/40 {
  background-color: rgb(var(--be-primary-light) / 0.4);
}
.bg-primary\/10 {
  background-color: rgb(var(--be-primary) / 0.1);
}
.bg-primary\/5 {
  background-color: rgb(var(--be-primary) / 0.05);
}
.bg-primary\/6 {
  background-color: rgb(var(--be-primary) / 6%);
}
.bg-primary\/focus {
  background-color: rgb(var(--be-primary) / var(--be-focus-opacity));
}
.bg-primary\/selected {
  background-color: rgb(var(--be-primary) / var(--be-selected-opacity));
}
.bg-selected {
  background-color: rgb(var(--be-fg-base) / var(--be-selected-opacity));
}
.bg-slider-disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(189 189 189 / var(--tw-bg-opacity, 1));
}
.bg-slider-disabled\/60 {
  background-color: rgb(189 189 189 / 0.6);
}
.bg-toast {
  --tw-bg-opacity: 1;
  background-color: rgb(50 50 50 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(243 164 50 / var(--tw-bg-opacity, 1));
}
.bg-warning\/15 {
  background-color: rgb(243 164 50 / 15%);
}
.bg-warning\/focus {
  background-color: rgb(243 164 50 / var(--be-focus-opacity));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-primary-light {
  --tw-gradient-from: rgb(var(--be-primary-light) / 1) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--be-primary-light) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-primary-dark {
  --tw-gradient-to: rgb(var(--be-primary-dark) / 1) var(--tw-gradient-to-position);
}
.bg-contain {
  background-size: contain;
}
.bg-cover {
  background-size: cover;
}
.bg-clip-padding {
  background-clip: padding-box;
}
.bg-center {
  background-position: center;
}
.bg-no-repeat {
  background-repeat: no-repeat;
}
.fill-current {
  fill: currentColor;
}
.fill-fg-base\/6 {
  fill: rgb(var(--be-fg-base) / 6%);
}
.fill-none {
  fill: none;
}
.stroke-divider {
  stroke: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-10 {
  padding: 0.625rem;
}
.p-12 {
  padding: 0.75rem;
}
.p-14 {
  padding: 0.875rem;
}
.p-16 {
  padding: 1rem;
}
.p-18 {
  padding: 1.125rem;
}
.p-2 {
  padding: 0.125rem;
}
.p-20 {
  padding: 1.25rem;
}
.p-24 {
  padding: 1.5rem;
}
.p-4 {
  padding: 0.25rem;
}
.p-40 {
  padding: 2.5rem;
}
.p-6 {
  padding: 0.375rem;
}
.p-8 {
  padding: 0.5rem;
}
.px-10 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-12 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-14 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-16 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-18 {
  padding-left: 1.125rem;
  padding-right: 1.125rem;
}
.px-2 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-20 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-22 {
  padding-left: 1.375rem;
  padding-right: 1.375rem;
}
.px-24 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-26 {
  padding-left: 1.625rem;
  padding-right: 1.625rem;
}
.px-28 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}
.px-30 {
  padding-left: 1.875rem;
  padding-right: 1.875rem;
}
.px-32 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-4 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-40 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}
.px-6 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-8 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py-10 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-12 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-128 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.py-14 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-16 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-18 {
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
}
.py-2 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-20 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-24 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-28 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-3 {
  padding-top: 0.188rem;
  padding-bottom: 0.188rem;
}
.py-30 {
  padding-top: 1.875rem;
  padding-bottom: 1.875rem;
}
.py-32 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-4 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-40 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-5 {
  padding-top: 0.313rem;
  padding-bottom: 0.313rem;
}
.py-56 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-6 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-8 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-80 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-90 {
  padding-top: 5.625rem;
  padding-bottom: 5.625rem;
}
.py-96 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.pb-10 {
  padding-bottom: 0.625rem;
}
.pb-12 {
  padding-bottom: 0.75rem;
}
.pb-14 {
  padding-bottom: 0.875rem;
}
.pb-16 {
  padding-bottom: 1rem;
}
.pb-18 {
  padding-bottom: 1.125rem;
}
.pb-2 {
  padding-bottom: 0.125rem;
}
.pb-20 {
  padding-bottom: 1.25rem;
}
.pb-24 {
  padding-bottom: 1.5rem;
}
.pb-28 {
  padding-bottom: 1.75rem;
}
.pb-30 {
  padding-bottom: 1.875rem;
}
.pb-36 {
  padding-bottom: 2.25rem;
}
.pb-4 {
  padding-bottom: 0.25rem;
}
.pb-48 {
  padding-bottom: 3rem;
}
.pb-50 {
  padding-bottom: 3.125rem;
}
.pb-6 {
  padding-bottom: 0.375rem;
}
.pb-8 {
  padding-bottom: 0.5rem;
}
.pb-96 {
  padding-bottom: 6rem;
}
.pb-safe-area {
  padding-bottom: env(safe-area-inset-bottom);
}
.pl-10 {
  padding-left: 0.625rem;
}
.pl-12 {
  padding-left: 0.75rem;
}
.pl-16 {
  padding-left: 1rem;
}
.pl-18 {
  padding-left: 1.125rem;
}
.pl-20 {
  padding-left: 1.25rem;
}
.pl-24 {
  padding-left: 1.5rem;
}
.pl-28 {
  padding-left: 1.75rem;
}
.pl-32 {
  padding-left: 2rem;
}
.pl-4 {
  padding-left: 0.25rem;
}
.pl-46 {
  padding-left: 2.875rem;
}
.pl-60 {
  padding-left: 3.75rem;
}
.pl-8 {
  padding-left: 0.5rem;
}
.pr-0 {
  padding-right: 0px;
}
.pr-10 {
  padding-right: 0.625rem;
}
.pr-12 {
  padding-right: 0.75rem;
}
.pr-16 {
  padding-right: 1rem;
}
.pr-18 {
  padding-right: 1.125rem;
}
.pr-2 {
  padding-right: 0.125rem;
}
.pr-24 {
  padding-right: 1.5rem;
}
.pr-46 {
  padding-right: 2.875rem;
}
.pr-6 {
  padding-right: 0.375rem;
}
.pr-8 {
  padding-right: 0.5rem;
}
.pt-10 {
  padding-top: 0.625rem;
}
.pt-12 {
  padding-top: 0.75rem;
}
.pt-128 {
  padding-top: 8rem;
}
.pt-14 {
  padding-top: 0.875rem;
}
.pt-16 {
  padding-top: 1rem;
}
.pt-20 {
  padding-top: 1.25rem;
}
.pt-24 {
  padding-top: 1.5rem;
}
.pt-28 {
  padding-top: 1.75rem;
}
.pt-30 {
  padding-top: 1.875rem;
}
.pt-32 {
  padding-top: 2rem;
}
.pt-4 {
  padding-top: 0.25rem;
}
.pt-40 {
  padding-top: 2.5rem;
}
.pt-44 {
  padding-top: 2.75rem;
}
.pt-50 {
  padding-top: 3.125rem;
}
.pt-54 {
  padding-top: 3.375rem;
}
.pt-56 {
  padding-top: 3.5rem;
}
.pt-6 {
  padding-top: 0.375rem;
}
.pt-64 {
  padding-top: 4rem;
}
.pt-96 {
  padding-top: 6rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-start {
  text-align: start;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-base\/7 {
  font-size: 1rem;
  line-height: 1.75rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-lg\/7 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-lg\/8 {
  font-size: 1.125rem;
  line-height: 2rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-sm\/6 {
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black {
  font-weight: 900;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-3 {
  line-height: .75rem;
}
.leading-4 {
  line-height: 1rem;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-\[0\.6\] {
  line-height: 0.6;
}
.leading-loose {
  line-height: 2;
}
.leading-normal {
  line-height: 1.5;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.\!text {
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity)) !important;
}
.text {
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity));
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-black\/30 {
  color: rgb(0 0 0 / 0.3);
}
.text-danger {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-danger-darker {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-disabled {
  color: rgb(var(--be-fg-base) / var(--be-disabled-fg-opacity));
}
.text-divider {
  color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.text-envato {
  --tw-text-opacity: 1;
  color: rgb(108 161 43 / var(--tw-text-opacity, 1));
}
.text-facebook {
  --tw-text-opacity: 1;
  color: rgb(59 89 152 / var(--tw-text-opacity, 1));
}
.text-link {
  --tw-text-opacity: 1;
  color: rgb(var(--be-link-color, var(--be-primary)) / var(--tw-text-opacity, 1));
}
.text-main {
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity));
}
.text-main\/50 {
  color: rgb(var(--be-fg-base) / 0.5);
}
.text-muted {
  color: rgb(var(--be-fg-base) / var(--be-text-muted-opacity));
}
.text-muted\/40 {
  color: rgb(var(--be-fg-base) / 0.4);
}
.text-on-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--be-on-primary) / var(--tw-text-opacity, 1));
}
.text-positive {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-positive-darker {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--be-primary) / var(--tw-text-opacity, 1));
}
.text-primary-light {
  --tw-text-opacity: 1;
  color: rgb(var(--be-primary-light) / var(--tw-text-opacity, 1));
}
.text-primary\/40 {
  color: rgb(var(--be-primary) / 0.4);
}
.text-twitter {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(243 164 50 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/87 {
  color: rgb(255 255 255 / 87%);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.caret-transparent {
  caret-color: transparent;
}
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: 0.1;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-30 {
  opacity: 0.3;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_10px_rgba\(34\2c 211\2c 238\2c \.16\)\] {
  --tw-shadow: 0 0 10px rgba(34,211,238,.16);
  --tw-shadow-colored: 0 0 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_12px_rgba\(34\2c 211\2c 238\2c \.18\)\] {
  --tw-shadow: 0 0 12px rgba(34,211,238,.18);
  --tw-shadow-colored: 0 0 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[15px_0_30px_0_rgb\(0_0_0_\/_18\%\)\] {
  --tw-shadow: 15px 0 30px 0 rgb(0 0 0 / 18%);
  --tw-shadow-colored: 15px 0 30px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[rgba\(0\2c 0\2c 0\2c 0\.2\)_0px_0px_10px\] {
  --tw-shadow: rgba(0,0,0,0.2) 0px 0px 10px;
  --tw-shadow-colored: 0px 0px 10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
  outline-width: 2px;
  outline-color: rgb(var(--be-primary-lighter) / 1);
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-primary {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--be-primary) / var(--tw-ring-opacity, 1));
}
.ring-primary\/10 {
  --tw-ring-color: rgb(var(--be-primary) / 0.1);
}
.ring-white {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
.ring-offset-4 {
  --tw-ring-offset-width: 4px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-3xl {
  --tw-blur: blur(64px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.\!filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\] {
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[left\2c color\2c shadow\] {
  transition-property: left,color,shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-bg-color {
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-button {
  transition-property: background-color, box-shadow, border-color, color, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow-opacity {
  transition-property: box-shadow, opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-width {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.will-change-transform {
  will-change: transform;
}
.\@container\/settings-form {
  container-type: inline-size;
  container-name: settings-form;
}
.\@container\/with-preview {
  container-type: inline-size;
  container-name: with-preview;
}
.justify-center-safe {
  justify-content: safe center;
}
.icon-2xs {
  font-size: 0.75rem;
}
.icon-xs {
  font-size: 1rem;
}
.icon-sm {
  font-size: 1.25rem;
}
.icon-md {
  font-size: 1.5rem;
}
.icon-lg {
  font-size: 2.1875rem;
}
.icon-xl {
  font-size: 2.6875rem;
}
.stable-scrollbar {
  scrollbar-gutter: stable;
}
.\[mask-image\:radial-gradient\(100\%_100\%_at_top_right\2c white\2c transparent\)\] {
  -webkit-mask-image: radial-gradient(100% 100% at top right,white,transparent);
          mask-image: radial-gradient(100% 100% at top right,white,transparent);
}
.\[mask-image\:radial-gradient\(closest-side\2c white\2c transparent\)\] {
  -webkit-mask-image: radial-gradient(closest-side,white,transparent);
          mask-image: radial-gradient(closest-side,white,transparent);
}
.dark\:prose-invert:is(.dark *) {
  --tw-prose-body: var(--tw-prose-invert-body);
  --tw-prose-headings: var(--tw-prose-invert-headings);
  --tw-prose-lead: var(--tw-prose-invert-lead);
  --tw-prose-links: var(--tw-prose-invert-links);
  --tw-prose-bold: var(--tw-prose-invert-bold);
  --tw-prose-counters: var(--tw-prose-invert-counters);
  --tw-prose-bullets: var(--tw-prose-invert-bullets);
  --tw-prose-hr: var(--tw-prose-invert-hr);
  --tw-prose-quotes: var(--tw-prose-invert-quotes);
  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
  --tw-prose-captions: var(--tw-prose-invert-captions);
  --tw-prose-kbd: var(--tw-prose-invert-kbd);
  --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
  --tw-prose-code: var(--tw-prose-invert-code);
  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}
.first-letter\:capitalize::first-letter {
  text-transform: capitalize;
}
.file\:mr-10::file-selector-button {
  margin-right: 0.625rem;
}
.file\:h-24::file-selector-button {
  height: 1.5rem;
}
.file\:rounded::file-selector-button {
  border-radius: 0.25rem;
}
.file\:border-none::file-selector-button {
  border-style: none;
}
.file\:bg-primary::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary) / var(--tw-bg-opacity, 1));
}
.file\:px-10::file-selector-button {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-semibold::file-selector-button {
  font-weight: 600;
}
.file\:text-on-primary::file-selector-button {
  --tw-text-opacity: 1;
  color: rgb(var(--be-on-primary) / var(--tw-text-opacity, 1));
}
.placeholder\:text-main\/50::-moz-placeholder {
  color: rgb(var(--be-fg-base) / 0.5);
}
.placeholder\:text-main\/50::placeholder {
  color: rgb(var(--be-fg-base) / 0.5);
}
.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}
.before\:left-0::before {
  content: var(--tw-content);
  left: 0px;
}
.before\:top-1\/2::before {
  content: var(--tw-content);
  top: 50%;
}
.before\:z-10::before {
  content: var(--tw-content);
  z-index: 10;
}
.before\:block::before {
  content: var(--tw-content);
  display: block;
}
.before\:h-1::before {
  content: var(--tw-content);
  height: 0.063rem;
}
.before\:h-12::before {
  content: var(--tw-content);
  height: 0.75rem;
}
.before\:h-14::before {
  content: var(--tw-content);
  height: 0.875rem;
}
.before\:h-18::before {
  content: var(--tw-content);
  height: 1.125rem;
}
.before\:h-22::before {
  content: var(--tw-content);
  height: 1.375rem;
}
.before\:h-28::before {
  content: var(--tw-content);
  height: 1.75rem;
}
.before\:h-full::before {
  content: var(--tw-content);
  height: 100%;
}
.before\:w-12::before {
  content: var(--tw-content);
  width: 0.75rem;
}
.before\:w-14::before {
  content: var(--tw-content);
  width: 0.875rem;
}
.before\:w-18::before {
  content: var(--tw-content);
  width: 1.125rem;
}
.before\:w-22::before {
  content: var(--tw-content);
  width: 1.375rem;
}
.before\:w-28::before {
  content: var(--tw-content);
  width: 1.75rem;
}
.before\:w-full::before {
  content: var(--tw-content);
  width: 100%;
}
.before\:-translate-y-1\/2::before {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:translate-x-2::before {
  content: var(--tw-content);
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:scale-10::before {
  content: var(--tw-content);
  --tw-scale-x: .1;
  --tw-scale-y: .1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.before\:rounded-3xl::before {
  content: var(--tw-content);
  border-radius: 1.5rem;
}
.before\:rounded-full::before {
  content: var(--tw-content);
  border-radius: 9999px;
}
.before\:border::before {
  content: var(--tw-content);
  border-width: 1px;
}
.before\:bg-divider::before {
  content: var(--tw-content);
  background-color: rgb(var(--be-fg-base) / var(--be-divider-opacity));
}
.before\:bg-primary::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary) / var(--tw-bg-opacity, 1));
}
.before\:bg-white::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.before\:opacity-0::before {
  content: var(--tw-content);
  opacity: 0;
}
.before\:transition::before {
  content: var(--tw-content);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.before\:transition-transform::before {
  content: var(--tw-content);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.before\:duration-200::before {
  content: var(--tw-content);
  transition-duration: 200ms;
}
.after\:pointer-events-none::after {
  content: var(--tw-content);
  pointer-events: none;
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-0::after {
  content: var(--tw-content);
  inset: 0px;
}
.after\:bottom-0::after {
  content: var(--tw-content);
  bottom: 0px;
}
.after\:left-0::after {
  content: var(--tw-content);
  left: 0px;
}
.after\:h-20::after {
  content: var(--tw-content);
  height: 1.25rem;
}
.after\:w-full::after {
  content: var(--tw-content);
  width: 100%;
}
.after\:bg-gradient-to-b::after {
  content: var(--tw-content);
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.after\:from-transparent::after {
  content: var(--tw-content);
  --tw-gradient-from: transparent var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.first\:capitalize:first-child {
  text-transform: capitalize;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.checked\:border-danger:checked {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.checked\:border-primary:checked {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary) / var(--tw-border-opacity, 1));
}
.checked\:bg-danger:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.checked\:bg-primary:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary) / var(--tw-bg-opacity, 1));
}
.checked\:before\:translate-x-14:checked::before {
  content: var(--tw-content);
  --tw-translate-x: 0.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:translate-x-20:checked::before {
  content: var(--tw-content);
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:translate-x-24:checked::before {
  content: var(--tw-content);
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:translate-x-30:checked::before {
  content: var(--tw-content);
  --tw-translate-x: 1.875rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:translate-x-36:checked::before {
  content: var(--tw-content);
  --tw-translate-x: 2.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:scale-\[\.65\]:checked::before {
  content: var(--tw-content);
  --tw-scale-x: .65;
  --tw-scale-y: .65;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.checked\:before\:border-white:checked::before {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.checked\:before\:opacity-100:checked::before {
  content: var(--tw-content);
  opacity: 1;
}
.focus-within\:border-primary\/90:focus-within {
  border-color: rgb(var(--be-primary) / 0.9);
}
.focus-within\:ring-1:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-inset:focus-within {
  --tw-ring-inset: inset;
}
.focus-within\:ring-primary\/90:focus-within {
  --tw-ring-color: rgb(var(--be-primary) / 0.9);
}
.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:cursor-move:hover {
  cursor: move;
}
.hover\:border-chip\/90:hover {
  border-color: rgb(var(--be-bg-chip) / 0.9);
}
.hover\:border-danger:hover {
  --tw-border-opacity: 1;
  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
}
.hover\:border-danger\/90:hover {
  border-color: rgb(239 68 68 / 0.9);
}
.hover\:border-fg-base\/25:hover {
  border-color: rgb(var(--be-fg-base) / 0.25);
}
.hover\:border-positive:hover {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.hover\:border-positive-darker:hover {
  --tw-border-opacity: 1;
  border-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary) / var(--tw-border-opacity, 1));
}
.hover\:border-primary-dark:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary-dark) / var(--tw-border-opacity, 1));
}
.hover\:bg-chip\/90:hover {
  background-color: rgb(var(--be-bg-chip) / 0.9);
}
.hover\:bg-danger\/10:hover {
  background-color: rgb(239 68 68 / 0.1);
}
.hover\:bg-danger\/4:hover {
  background-color: rgb(239 68 68 / 4%);
}
.hover\:bg-danger\/90:hover {
  background-color: rgb(239 68 68 / 0.9);
}
.hover\:bg-elevated\/90:hover {
  background-color: rgb(var(--be-bg-elevated) / 0.9);
}
.hover\:bg-fg-base\/15:hover {
  background-color: rgb(var(--be-fg-base) / 15%);
}
.hover\:bg-focus:hover {
  background-color: rgb(var(--be-fg-base) / var(--be-focus-opacity));
}
.hover\:bg-hover:hover {
  background-color: rgb(var(--be-fg-base) / var(--be-hover-opacity));
}
.hover\:bg-positive-darker:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.hover\:bg-positive\/4:hover {
  background-color: rgb(34 197 94 / 4%);
}
.hover\:bg-primary-dark:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-dark) / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary\/10:hover {
  background-color: rgb(var(--be-primary) / 0.1);
}
.hover\:bg-primary\/4:hover {
  background-color: rgb(var(--be-primary) / 4%);
}
.hover\:bg-primary\/focus:hover {
  background-color: rgb(var(--be-primary) / var(--be-focus-opacity));
}
.hover\:bg-primary\/hover:hover {
  background-color: rgb(var(--be-primary) / var(--be-hover-opacity));
}
.hover\:bg-white\/20:hover {
  background-color: rgb(255 255 255 / 0.2);
}
.hover\:bg-white\/90:hover {
  background-color: rgb(255 255 255 / 0.9);
}
.hover\:text:hover {
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity));
}
.hover\:text-fg-base:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--be-fg-base) / var(--tw-text-opacity, 1));
}
.hover\:text-main:hover {
  color: rgb(var(--be-fg-base) / var(--be-text-main-opacity));
}
.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--be-primary) / var(--tw-text-opacity, 1));
}
.hover\:text-primary-dark:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--be-primary-dark) / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.before\:hover\:bg-primary-dark:hover::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-dark) / var(--tw-bg-opacity, 1));
}
.hover\:after\:bg-black\/5:hover::after {
  content: var(--tw-content);
  background-color: rgb(0 0 0 / 0.05);
}
.checked\:hover\:border-primary-dark:hover:checked {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary-dark) / var(--tw-border-opacity, 1));
}
.focus\:border-danger\/90:focus {
  border-color: rgb(239 68 68 / 0.9);
}
.focus\:border-primary\/90:focus {
  border-color: rgb(var(--be-primary) / 0.9);
}
.focus\:bg-primary:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary) / var(--tw-bg-opacity, 1));
}
.focus\:text-on-primary:focus {
  --tw-text-opacity: 1;
  color: rgb(var(--be-on-primary) / var(--tw-text-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-inset:focus {
  --tw-ring-inset: inset;
}
.focus\:ring-danger\/90:focus {
  --tw-ring-color: rgb(239 68 68 / 0.9);
}
.focus\:ring-primary\/90:focus {
  --tw-ring-color: rgb(var(--be-primary) / 0.9);
}
.focus\:after\:bg-black\/10:focus::after {
  content: var(--tw-content);
  background-color: rgb(0 0 0 / 0.1);
}
.focus-visible\:bg-focus:focus-visible {
  background-color: rgb(var(--be-fg-base) / var(--be-focus-opacity));
}
.focus-visible\:bg-primary\/focus:focus-visible {
  background-color: rgb(var(--be-primary) / var(--be-focus-opacity));
}
.focus-visible\:underline:focus-visible {
  text-decoration-line: underline;
}
.focus-visible\:outline:focus-visible {
  outline-style: solid;
  outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
  outline-offset: 2px;
}
.focus-visible\:outline:focus-visible {
  outline-color: rgb(var(--be-primary-lighter) / 1);
}
.focus-visible\:outline-primary-light:focus-visible {
  outline-color: rgb(var(--be-primary-light) / 1);
}
.focus-visible\:ring:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-inset:focus-visible {
  --tw-ring-inset: inset;
}
.focus-visible\:ring-primary-dark\/90:focus-visible {
  --tw-ring-color: rgb(var(--be-primary-dark) / 0.9);
}
.focus-visible\:ring-primary\/90:focus-visible {
  --tw-ring-color: rgb(var(--be-primary) / 0.9);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-4:focus-visible {
  --tw-ring-offset-width: 4px;
}
.active\:bg-primary-dark:active {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-dark) / var(--tw-bg-opacity, 1));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.disabled\:border-disabled-bg:disabled {
  border-color: rgb(var(--be-fg-base) / var(--be-disabled-bg-opacity));
}
.disabled\:border-disabled-fg:disabled {
  border-color: rgb(var(--be-fg-base) / var(--be-disabled-fg-opacity));
}
.disabled\:border-transparent:disabled {
  border-color: transparent;
}
.disabled\:border-white\/70:disabled {
  border-color: rgb(255 255 255 / 0.7);
}
.disabled\:border-r-transparent:disabled {
  border-right-color: transparent;
}
.disabled\:bg-disabled:disabled {
  background-color: rgb(var(--be-fg-base) / var(--be-disabled-bg-opacity));
}
.disabled\:bg-transparent:disabled {
  background-color: transparent;
}
.disabled\:text-disabled:disabled {
  color: rgb(var(--be-fg-base) / var(--be-disabled-fg-opacity));
}
.disabled\:text-white\/70:disabled {
  color: rgb(255 255 255 / 0.7);
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:before\:bg-disabled-fg:disabled::before {
  content: var(--tw-content);
  background-color: rgb(var(--be-fg-base) / var(--be-disabled-fg-opacity));
}
.group:hover .group-hover\:visible {
  visibility: visible;
}
.has-\[\.dashboard-stable-scrollbar\]\:stable-scrollbar:has(.dashboard-stable-scrollbar) {
  scrollbar-gutter: stable;
}
@container (min-width: 20rem) {

  .\@xs\:mb-0 {
    margin-bottom: 0px;
  }

  .\@xs\:flex {
    display: flex;
  }
}
@container with-preview (min-width: 64rem) {

  .\@5xl\/with-preview\:grid {
    display: grid;
  }

  .\@5xl\/with-preview\:w-440 {
    width: 27.5rem;
  }

  .\@5xl\/with-preview\:grid-cols-\[auto\2c 1fr\] {
    grid-template-columns: auto 1fr;
  }
}
@container settings-form (min-width: 900px) {

  .\@\[900px\]\/settings-form\:flex {
    display: flex;
  }

  .\@\[900px\]\/settings-form\:w-1\/2 {
    width: 50%;
  }
}
@container (min-width: 900px) {

  .\@\[900px\]\:mb-0 {
    margin-bottom: 0px;
  }

  .\@\[900px\]\:w-1\/2 {
    width: 50%;
  }

  .\@\[900px\]\:max-w-\[340px\] {
    max-width: 340px;
  }
}
.dark\:bg-alt:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-alt) / var(--tw-bg-opacity, 1));
}
.dark\:bg-chip:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-chip) / var(--tw-bg-opacity, 1));
}
.dark\:bg-elevated:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-bg-elevated) / var(--tw-bg-opacity, 1));
}
.dark\:text-white\/50:is(.dark *) {
  color: rgb(255 255 255 / 0.5);
}
.dark\:opacity-100:is(.dark *) {
  opacity: 1;
}
.dark\:opacity-5:is(.dark *) {
  opacity: 0.05;
}
.dark\:opacity-80:is(.dark *) {
  opacity: 0.8;
}
.dark\:checked\:border-primary-dark:checked:is(.dark *) {
  --tw-border-opacity: 1;
  border-color: rgb(var(--be-primary-dark) / var(--tw-border-opacity, 1));
}
.dark\:checked\:bg-primary-dark:checked:is(.dark *) {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--be-primary-dark) / var(--tw-bg-opacity, 1));
}
@media not all and (min-width: 768px) {

  .max-md\:hidden {
    display: none;
  }

  .max-md\:flex-col {
    flex-direction: column;
  }

  .max-md\:border-b {
    border-bottom-width: 1px;
  }
}
@media (min-width: 640px) {

  .sm\:-top-320 {
    top: -20rem;
  }

  .sm\:left-\[calc\(50\%\+36rem\)\] {
    left: calc(50% + 36rem);
  }

  .sm\:left-\[calc\(50\%-18rem\)\] {
    left: calc(50% - 18rem);
  }

  .sm\:left-\[calc\(50\%-30rem\)\] {
    left: calc(50% - 30rem);
  }

  .sm\:top-\[calc\(100\%-30rem\)\] {
    top: calc(100% - 30rem);
  }

  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .sm\:mb-32 {
    margin-bottom: 2rem;
  }

  .sm\:mt-128 {
    margin-top: 8rem;
  }

  .sm\:mt-80 {
    margin-top: 5rem;
  }

  .sm\:mt-96 {
    margin-top: 6rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:w-950 {
    width: 59.375rem;
  }

  .sm\:w-\[1056px\] {
    width: 1056px;
  }

  .sm\:w-\[1155px\] {
    width: 1155px;
  }

  .sm\:w-\[640px\] {
    width: 640px;
  }

  .sm\:w-\[72\.1875rem\] {
    width: 72.1875rem;
  }

  .sm\:w-\[768px\] {
    width: 768px;
  }

  .sm\:w-\[912px\] {
    width: 912px;
  }

  .sm\:max-w-2xl {
    max-width: 42rem;
  }

  .sm\:max-w-5xl {
    max-width: 64rem;
  }

  .sm\:max-w-none {
    max-width: none;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-center {
    justify-content: center;
  }

  .sm\:gap-24 {
    gap: 1.5rem;
  }

  .sm\:gap-y-80 {
    row-gap: 5rem;
  }

  .sm\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .sm\:p-16 {
    padding: 1rem;
  }

  .sm\:p-28 {
    padding: 1.75rem;
  }

  .sm\:px-20 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-24 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-32 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:px-40 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:py-128 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .sm\:py-144 {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .sm\:py-192 {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

  .sm\:py-32 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:py-96 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .sm\:pb-128 {
    padding-bottom: 8rem;
  }

  .sm\:pb-32 {
    padding-bottom: 2rem;
  }

  .sm\:pl-0 {
    padding-left: 0px;
  }

  .sm\:pl-64 {
    padding-left: 4rem;
  }

  .sm\:pr-0 {
    padding-right: 0px;
  }

  .sm\:pr-64 {
    padding-right: 4rem;
  }

  .sm\:pt-34 {
    padding-top: 2.125rem;
  }

  .sm\:pt-56 {
    padding-top: 3.5rem;
  }

  .sm\:pt-64 {
    padding-top: 4rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .sm\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .sm\:text-xl\/8 {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}
@media (min-width: 768px) {

  .md\:invisible {
    visibility: hidden;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:mx-24 {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md\:mx-40 {
    margin-left: 2.5rem;
    margin-right: 2.5rem;
  }

  .md\:my-40 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .md\:my-64 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }

  .md\:my-70 {
    margin-top: 4.375rem;
    margin-bottom: 4.375rem;
  }

  .md\:my-80 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .md\:-ml-16 {
    margin-left: -1rem;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-40 {
    margin-bottom: 2.5rem;
  }

  .md\:mb-48 {
    margin-bottom: 3rem;
  }

  .md\:mb-70 {
    margin-bottom: 4.375rem;
  }

  .md\:mr-0 {
    margin-right: 0px;
  }

  .md\:mr-10 {
    margin-right: 0.625rem;
  }

  .md\:mr-24 {
    margin-right: 1.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:mt-36 {
    margin-top: 2.25rem;
  }

  .md\:mt-60 {
    margin-top: 3.75rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:hidden {
    display: none;
  }

  .md\:h-0 {
    height: 0px;
  }

  .md\:h-32 {
    height: 2rem;
  }

  .md\:h-90 {
    height: 5.625rem;
  }

  .md\:max-h-36 {
    max-height: 2.25rem;
  }

  .md\:w-32 {
    width: 2rem;
  }

  .md\:w-400 {
    width: 25rem;
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-350 {
    max-width: 21.875rem;
  }

  .md\:max-w-950 {
    max-width: 59.375rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_170px_auto\] {
    grid-template-columns: minmax(0,1fr) 170px auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-start {
    justify-content: flex-start;
  }

  .md\:gap-112 {
    gap: 7rem;
  }

  .md\:gap-12 {
    gap: 0.75rem;
  }

  .md\:gap-14 {
    gap: 0.875rem;
  }

  .md\:gap-30 {
    gap: 1.875rem;
  }

  .md\:gap-60 {
    gap: 3.75rem;
  }

  .md\:overflow-hidden {
    overflow: hidden;
  }

  .md\:rounded-panel {
    border-radius: var(--be-panel-radius, 0.25rem);
  }

  .md\:border {
    border-width: 1px;
  }

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:p-18 {
    padding: 1.125rem;
  }

  .md\:p-20 {
    padding: 1.25rem;
  }

  .md\:p-24 {
    padding: 1.5rem;
  }

  .md\:p-32 {
    padding: 2rem;
  }

  .md\:p-40 {
    padding: 2.5rem;
  }

  .md\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .md\:px-10vw {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .md\:px-176 {
    padding-left: 11rem;
    padding-right: 11rem;
  }

  .md\:px-18 {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .md\:px-20 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-24 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-26 {
    padding-left: 1.625rem;
    padding-right: 1.625rem;
  }

  .md\:px-32 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:px-40 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .md\:px-48 {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .md\:py-24 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:py-56 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-80 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:pb-0 {
    padding-bottom: 0px;
  }

  .md\:pb-24 {
    padding-bottom: 1.5rem;
  }

  .md\:pb-32 {
    padding-bottom: 2rem;
  }

  .md\:pb-54 {
    padding-bottom: 3.375rem;
  }

  .md\:pl-10 {
    padding-left: 0.625rem;
  }

  .md\:pl-20 {
    padding-left: 1.25rem;
  }

  .md\:pr-24 {
    padding-right: 1.5rem;
  }

  .md\:pt-128 {
    padding-top: 8rem;
  }

  .md\:pt-30 {
    padding-top: 1.875rem;
  }

  .md\:pt-40 {
    padding-top: 2.5rem;
  }

  .md\:pt-42 {
    padding-top: 2.625rem;
  }

  .md\:pt-70 {
    padding-top: 4.375rem;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .md\:font-medium {
    font-weight: 500;
  }

  .md\:font-normal {
    font-weight: 400;
  }
}
@media (min-width: 1024px) {

  .lg\:bottom-\[-12rem\] {
    bottom: -12rem;
  }

  .lg\:left-48 {
    left: 3rem;
  }

  .lg\:top-\[calc\(50\%-30rem\)\] {
    top: calc(50% - 30rem);
  }

  .lg\:top-auto {
    top: auto;
  }

  .lg\:-m-16 {
    margin: -1rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:-ml-0 {
    margin-left: -0px;
  }

  .lg\:ml-40 {
    margin-left: 2.5rem;
  }

  .lg\:ml-8 {
    margin-left: 0.5rem;
  }

  .lg\:ml-auto {
    margin-left: auto;
  }

  .lg\:mr-0 {
    margin-right: 0px;
  }

  .lg\:mr-8 {
    margin-right: 0.5rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-64 {
    margin-top: 4rem;
  }

  .lg\:mt-96 {
    margin-top: 6rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:max-w-4xl {
    max-width: 56rem;
  }

  .lg\:max-w-\[1440px\] {
    max-width: 1440px;
  }

  .lg\:max-w-lg {
    max-width: 32rem;
  }

  .lg\:max-w-none {
    max-width: none;
  }

  .lg\:flex-none {
    flex: none;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

  .lg\:translate-y-0 {
    --tw-translate-y: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:transform-gpu {
    transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:text-balance {
    text-wrap: balance;
  }

  .lg\:rounded-3xl {
    border-radius: 1.5rem;
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:p-16 {
    padding: 1rem;
  }

  .lg\:p-24 {
    padding: 1.5rem;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:px-32 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:px-96 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .lg\:py-160 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .lg\:py-224 {
    padding-top: 14rem;
    padding-bottom: 14rem;
  }

  .lg\:py-96 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:pb-0 {
    padding-bottom: 0px;
  }

  .lg\:pl-16 {
    padding-left: 1rem;
  }

  .lg\:pr-32 {
    padding-right: 2rem;
  }

  .lg\:pt-16 {
    padding-top: 1rem;
  }

  .lg\:pt-32 {
    padding-top: 2rem;
  }

  .lg\:text-center {
    text-align: center;
  }
}
@media (min-width: 1146px) {

  .xl\:left-\[calc\(50\%-24rem\)\] {
    left: calc(50% - 24rem);
  }

  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xl\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .xl\:ml-128 {
    margin-left: 8rem;
  }

  .xl\:w-1\/2 {
    width: 50%;
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:px-96 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .xl\:pt-96 {
    padding-top: 6rem;
  }
}
.\[\&\>\.tree-label\]\:focus-visible\:ring:focus-visible>.tree-label {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.\[\&\>\.tree-label\]\:focus-visible\:ring-2:focus-visible>.tree-label {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.\[\&\>\.tree-label\]\:focus-visible\:ring-inset:focus-visible>.tree-label {
  --tw-ring-inset: inset;
}
.\[\&_\.breadcrumb-root\]\:-ml-6 .breadcrumb-root {
  margin-left: -0.375rem;
}