/* style block 03: data-inline-asset="pwa" */
/* PWA/iOS runtime layer. Kept separate so the source app styles remain intact. */
:root {
  --pwa-vh: 100vh;
}

html {
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg, #eef2f1);
}

body {
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
  font-size: 16px;
}

.app {
  min-height: 100vh;
}

@supports (height: 100dvh) {
  html,
  body {
    min-height: 100dvh;
  }

  .app {
    height: var(--pwa-vh, 100dvh);
    min-height: var(--pwa-vh, 100dvh);
  }
}

.panel,
.sidebar,
.modal-body,
.data-update-body,
.briefing-body,
.table-wrap,
.report-content {
  -webkit-overflow-scrolling: touch;
}

.maplibregl-canvas,
#map canvas {
  touch-action: pan-x pan-y;
}

@supports (padding: max(0px)) {
  body {
    padding: 0;
  }

  .topbar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }

  .main {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .detail-modal,
  .image-lightbox,
  .data-update-modal,
  .briefing-mode {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }
}

@media (display-mode: standalone) {
  body {
    min-height: var(--pwa-vh, 100dvh);
  }

  .topbar {
    min-height: calc(72px + env(safe-area-inset-top, 0px));
  }
}

@media (min-width: 1121px) {
  body:not(.pwa-standalone) {
    overflow: hidden;
  }

  body:not(.pwa-standalone) .app {
    height: 100vh;
  }
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  .topbar {
    gap: 8px;
    align-items: center;
  }

  .brand {
    min-width: 0;
  }

  .brand-title,
  .brand-sub {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .top-actions {
    max-width: 46vw;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .top-actions::-webkit-scrollbar {
    display: none;
  }

  .icon-btn,
  .seg-btn,
  .tab {
    touch-action: manipulation;
  }

  .modal-card,
  .data-update-card {
    max-height: calc(var(--pwa-vh, 100dvh) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 18px);
  }
}

.pwa-runtime-error {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: #eef7f4;
  background:
    linear-gradient(135deg, rgba(4, 34, 45, .94), rgba(10, 78, 75, .94)),
    #06384b;
}

.pwa-runtime-error strong {
  font-size: 1.2rem;
}

.pwa-runtime-error span {
  max-width: 480px;
  color: rgba(238, 247, 244, .78);
}

/* Mobile app ergonomics: keep the desktop cockpit intact, calm the iPhone surface. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body.radical-atlas {
    --shadow: 0 8px 24px rgba(24, 54, 47, .10);
    --mobile-ease: cubic-bezier(.2, .8, .2, 1);
    --mobile-snap-ease: cubic-bezier(.16, 1, .3, 1);
    --mobile-map-height: clamp(224px, 39svh, 368px);
    background: var(--atlas-bg);
    scroll-behavior: smooth;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
  }

  html,
  body,
  body.radical-atlas,
  body.radical-atlas .app,
  body.radical-atlas .main,
  body.radical-atlas .sidebar,
  body.radical-atlas .panel {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body.radical-atlas *,
  body.radical-atlas *::before,
  body.radical-atlas *::after {
    min-width: 0;
    box-sizing: border-box;
  }

  body.radical-atlas .app::before {
    background-size: 72px 72px;
    opacity: .22;
  }

  body.radical-atlas .topbar {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-height: 54px;
    margin: 0;
    padding:
      calc(5px + env(safe-area-inset-top, 0px))
      max(10px, env(safe-area-inset-right, 0px))
      6px
      max(10px, env(safe-area-inset-left, 0px));
    border-width: 0 0 1px;
    border-radius: 0;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 5px 18px rgba(24, 54, 47, .12);
    backdrop-filter: blur(18px);
    transition:
      background-color .22s var(--mobile-ease),
      box-shadow .22s var(--mobile-ease);
  }

  body.radical-atlas.dark .topbar {
    background: rgba(14, 24, 22, .92);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  }

  body.radical-atlas .brand {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    gap: 6px;
    align-items: center;
    overflow: hidden;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    height: 30px;
    min-height: 30px;
    padding: 2px;
    border-radius: 7px;
    font-size: 16px;
    box-shadow: none;
    transition: transform .18s var(--mobile-ease);
  }

  body.radical-atlas .brand-mark img,
  body.radical-atlas .brand-mark svg,
  body.radical-atlas .ministry-logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  body.radical-atlas .brand > div:last-child {
    min-width: 0;
  }

  body.radical-atlas .brand-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    max-height: 1.2em;
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  body.radical-atlas .brand-sub {
    display: none;
  }

  body.radical-atlas .top-actions {
    grid-column: 2;
    width: auto;
    max-width: none;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    overflow-x: visible;
    overflow-y: hidden;
    padding: 0 1px 1px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.radical-atlas .top-actions::-webkit-scrollbar {
    display: none;
  }

  body.radical-atlas .top-actions .icon-btn,
  body.radical-atlas .data-update-toggle,
  body.radical-atlas .briefing-toggle,
  body.radical-atlas .sidebar-toggle-btn {
    flex: 0 0 32px;
    width: 32px;
    min-width: 32px;
    height: 31px;
    min-height: 31px;
    padding: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .62);
    border-color: rgba(31, 95, 83, .14);
    color: var(--ink);
    box-shadow: none;
    font-size: .9rem;
    touch-action: manipulation;
    transition:
      transform .16s var(--mobile-ease),
      background-color .16s var(--mobile-ease),
      border-color .16s var(--mobile-ease),
      box-shadow .16s var(--mobile-ease);
  }

  body.radical-atlas.dark .top-actions .icon-btn,
  body.radical-atlas.dark .data-update-toggle,
  body.radical-atlas.dark .briefing-toggle,
  body.radical-atlas.dark .sidebar-toggle-btn {
    background: rgba(22, 36, 33, .62);
    border-color: rgba(119, 232, 216, .14);
  }

  body.radical-atlas .sidebar-toggle-label,
  body.radical-atlas .data-update-toggle .data-update-label,
  body.radical-atlas .briefing-toggle .data-update-label {
    display: none;
  }

  body.radical-atlas .data-update-toggle,
  body.radical-atlas .data-update-modal {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.radical-atlas .main {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-rows: var(--mobile-map-height) auto;
    min-height: auto;
  }

  body.radical-atlas .map-area {
    position: relative;
    inset: auto;
    min-height: var(--mobile-map-height);
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }

  body.radical-atlas #map {
    position: absolute;
    inset: 0;
    min-height: var(--mobile-map-height);
  }

  body.radical-atlas .maplibregl-ctrl-top-right,
  body.radical-atlas .maplibregl-ctrl-bottom-right {
    transform: scale(.84);
    transform-origin: top right;
  }

  body.radical-atlas .maplibregl-ctrl-group {
    border-radius: 10px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 5px 14px rgba(24, 54, 47, .12);
  }

  body.radical-atlas.dark .maplibregl-ctrl-group {
    background: rgba(22, 36, 33, .78);
  }

  body.radical-atlas .map-tools,
  body.radical-atlas .map-tools-toggle,
  body.radical-atlas .map-tools-groups,
  body.radical-atlas .map-panel,
  body.radical-atlas .legend,
  body.radical-atlas .legend-toggle,
  body.radical-atlas .fallback-status,
  body.radical-atlas .map-provider-status,
  body.radical-atlas .heat-summary {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.radical-atlas .map-tools {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 12;
    max-width: calc(100% - 16px);
    align-items: flex-end;
  }

  body.radical-atlas.map-tools-collapsed .map-tools {
    right: auto;
    width: 40px;
  }

  body.radical-atlas .map-tools-groups {
    flex-wrap: nowrap;
    gap: 5px;
    max-width: calc(100vw - 58px);
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body.radical-atlas .map-tools-groups::-webkit-scrollbar {
    display: none;
  }

  body.radical-atlas.map-tools-collapsed .map-tools-groups {
    max-width: 0;
    overflow: hidden;
  }

  body.radical-atlas .map-panel {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 8px 20px rgba(24, 54, 47, .12);
    backdrop-filter: blur(12px);
  }

  body.radical-atlas.dark .map-panel {
    background: rgba(22, 36, 33, .82);
  }

  body.radical-atlas .map-panel .seg-btn,
  body.radical-atlas .basemap-panel .seg-btn {
    min-width: auto;
    min-height: 31px;
    padding: 0 8px;
    border-radius: 9px;
    font-size: .64rem;
    line-height: 1;
    white-space: nowrap;
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
  }

  body.radical-atlas.dark .map-panel .seg-btn,
  body.radical-atlas.dark .basemap-panel .seg-btn {
    background: rgba(14, 24, 22, .74);
  }

  body.radical-atlas .map-tools-toggle,
  body.radical-atlas .legend-toggle {
    flex: 0 0 40px;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    border-color: rgba(31, 95, 83, .18);
    color: var(--ink);
    box-shadow: 0 6px 18px rgba(24, 54, 47, .13);
    backdrop-filter: blur(12px);
  }

  body.radical-atlas.dark .map-tools-toggle,
  body.radical-atlas.dark .legend-toggle {
    background: rgba(22, 36, 33, .84);
    border-color: rgba(119, 232, 216, .18);
  }

  body.radical-atlas.map-tools-collapsed .map-tools-toggle {
    background: #137f72;
    border-color: #137f72;
    color: #fff;
    box-shadow: 0 8px 20px rgba(19, 127, 114, .24);
  }

  body.radical-atlas .legend-toggle {
    left: auto;
    right: 8px;
    bottom: 8px;
  }

  body.radical-atlas .legend {
    left: 8px;
    right: 8px;
    bottom: 56px;
    width: auto;
    max-width: none;
    max-height: 210px;
    overflow: auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 22px rgba(24, 54, 47, .12);
  }

  body.radical-atlas.dark .legend {
    background: rgba(22, 36, 33, .88);
  }

  body.radical-atlas .fallback-status,
  body.radical-atlas .map-provider-status,
  body.radical-atlas .heat-summary {
    left: 8px;
    right: 8px;
    max-width: none;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(24, 54, 47, .12);
  }

  body.radical-atlas .sidebar {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    max-height: none;
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    background: var(--surface);
    box-shadow: 0 -8px 28px rgba(24, 54, 47, .12);
    overflow: hidden;
    animation: pwaMobileSheetIn .34s var(--mobile-snap-ease) both;
    will-change: transform;
  }

  body.radical-atlas.dark .sidebar {
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .30);
  }

  body.radical-atlas.sidebar-collapsed .main {
    grid-template-rows: minmax(360px, calc(100svh - 58px)) 0;
  }

  body.radical-atlas.sidebar-collapsed .sidebar {
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
  }

  body.radical-atlas .tabs {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    grid-auto-rows: minmax(54px, auto);
    width: 100%;
    height: auto;
    gap: 6px;
    overflow: visible;
    padding: 8px max(10px, env(safe-area-inset-right, 0px)) 8px max(10px, env(safe-area-inset-left, 0px));
    border-right: 0;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
    scrollbar-width: none;
  }

  body.radical-atlas .tabs::-webkit-scrollbar {
    display: none;
  }

  body.radical-atlas .tab {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 5px 4px;
    border: 1px solid rgba(31, 95, 83, .18);
    border-radius: 13px;
    background: rgba(255, 255, 255, .82);
    color: var(--muted);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .04);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: .6rem;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    transition:
      transform .16s var(--mobile-ease),
      background-color .16s var(--mobile-ease),
      border-color .16s var(--mobile-ease),
      color .16s var(--mobile-ease),
      box-shadow .16s var(--mobile-ease);
  }

  body.radical-atlas.dark .tab {
    background: rgba(14, 24, 22, .70);
    border-color: rgba(119, 232, 216, .14);
  }

  body.radical-atlas .tab i {
    font-size: .98rem;
    transition: transform .18s var(--mobile-ease);
  }

  body.radical-atlas .tab span {
    display: -webkit-box;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
  }

  body.radical-atlas .tab[data-tab="fishery"] {
    font-size: .56rem;
  }

  body.radical-atlas .tab.active {
    background: rgba(22, 137, 121, .10);
    border-color: rgba(22, 137, 121, .32);
    color: #126f64;
    box-shadow: inset 0 0 0 1px rgba(22, 137, 121, .18), 0 8px 22px rgba(22, 137, 121, .10);
    animation: pwaMobileTabPop .24s var(--mobile-snap-ease) both;
  }

  body.radical-atlas.dark .tab.active {
    background: rgba(96, 227, 210, .16);
    border-color: rgba(96, 227, 210, .34);
    color: #8cf4e8;
  }

  body.radical-atlas .tab:active,
  body.radical-atlas .icon-btn:active,
  body.radical-atlas .chip:active,
  body.radical-atlas .seg-btn:active,
  body.radical-atlas .primary-btn:active,
  body.radical-atlas .secondary-btn:active,
  body.radical-atlas .compact-btn:active,
  body.radical-atlas .detail-cta:active,
  body.radical-atlas .project-card:active,
  body.radical-atlas .port-card:active {
    transform: scale(.975);
  }

  body.radical-atlas .tab.active i {
    transform: translateY(-1px) scale(1.05);
  }

  body.radical-atlas .tab[data-ui-tip]::before,
  body.radical-atlas .tab[data-ui-tip]::after {
    display: none;
  }

  body.radical-atlas .tab[data-tab="compare"],
  body.radical-atlas .tab[data-tab="add"],
  body.radical-atlas .tab[data-tab="investment"],
  body.radical-atlas .tab[data-tab="analysis"],
  body.radical-atlas .entry-form,
  body.radical-atlas .record-edit-panel {
    display: none !important;
  }

  body.radical-atlas .sidebar .panel {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 10px 10px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
  }

  body.radical-atlas .panel {
    font-size: .79rem;
    line-height: 1.4;
  }

  body.radical-atlas .section-title,
  body.radical-atlas .chart-title,
  body.radical-atlas .mini-title {
    font-size: .86rem;
    line-height: 1.2;
  }

  body.radical-atlas .search,
  body.radical-atlas select,
  body.radical-atlas textarea,
  body.radical-atlas .entry-form input,
  body.radical-atlas .record-edit-field input,
  body.radical-atlas .record-edit-field select,
  body.radical-atlas .record-edit-field textarea {
    min-height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .92);
    border-color: rgba(31, 95, 83, .16);
    box-shadow: none;
    font-size: 16px;
  }

  body.radical-atlas.dark .search,
  body.radical-atlas.dark select,
  body.radical-atlas.dark textarea,
  body.radical-atlas.dark .entry-form input,
  body.radical-atlas.dark .record-edit-field input,
  body.radical-atlas.dark .record-edit-field select,
  body.radical-atlas.dark .record-edit-field textarea {
    background: rgba(14, 24, 22, .72);
    border-color: rgba(119, 232, 216, .16);
  }

  body.radical-atlas .chip,
  body.radical-atlas .seg-btn,
  body.radical-atlas .icon-btn {
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    border-color: rgba(31, 95, 83, .16);
    color: var(--ink);
    box-shadow: none;
    touch-action: manipulation;
    user-select: none;
    transition:
      transform .16s var(--mobile-ease),
      background-color .16s var(--mobile-ease),
      border-color .16s var(--mobile-ease),
      color .16s var(--mobile-ease),
      box-shadow .16s var(--mobile-ease);
  }

  body.radical-atlas.dark .chip,
  body.radical-atlas.dark .seg-btn,
  body.radical-atlas.dark .icon-btn {
    background: rgba(14, 24, 22, .70);
    border-color: rgba(119, 232, 216, .16);
  }

  body.radical-atlas .chip.active,
  body.radical-atlas .seg-btn.active,
  body.radical-atlas .primary-btn {
    background: #137f72;
    border-color: #137f72;
    color: #fff;
    box-shadow: 0 10px 22px rgba(19, 127, 114, .16);
  }

  body.radical-atlas.dark .chip.active,
  body.radical-atlas.dark .seg-btn.active,
  body.radical-atlas.dark .primary-btn {
    background: #60e3d2;
    border-color: #60e3d2;
    color: #07110f;
  }

  body.radical-atlas .primary-btn,
  body.radical-atlas .secondary-btn,
  body.radical-atlas .compact-btn,
  body.radical-atlas .output-btn,
  body.radical-atlas .update-action,
  body.radical-atlas .detail-cta {
    min-height: 42px;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
    touch-action: manipulation;
    user-select: none;
    transition:
      transform .16s var(--mobile-ease),
      background-color .16s var(--mobile-ease),
      border-color .16s var(--mobile-ease),
      color .16s var(--mobile-ease),
      box-shadow .16s var(--mobile-ease);
  }

  body.radical-atlas .secondary-btn,
  body.radical-atlas .compact-btn,
  body.radical-atlas .output-btn,
  body.radical-atlas .update-action {
    background: rgba(255, 255, 255, .82);
    border-color: rgba(31, 95, 83, .16);
    color: var(--ink);
  }

  body.radical-atlas.dark .secondary-btn,
  body.radical-atlas.dark .compact-btn,
  body.radical-atlas.dark .output-btn,
  body.radical-atlas.dark .update-action {
    background: rgba(14, 24, 22, .70);
    border-color: rgba(119, 232, 216, .16);
  }

  body.radical-atlas .project-card,
  body.radical-atlas .port-card,
  body.radical-atlas .summary-card,
  body.radical-atlas .info-block,
  body.radical-atlas .metric,
  body.radical-atlas .mini-card,
  body.radical-atlas .chart-box,
  body.radical-atlas .table-wrap,
  body.radical-atlas .text-box,
  body.radical-atlas .fishery-city-card,
  body.radical-atlas .fishery-structure-item {
    border-radius: 11px;
    background: var(--surface);
    border-color: rgba(31, 95, 83, .14);
    box-shadow: none;
    transition:
      transform .16s var(--mobile-ease),
      border-color .16s var(--mobile-ease),
      background-color .16s var(--mobile-ease),
      box-shadow .16s var(--mobile-ease);
    backface-visibility: hidden;
    contain: layout paint;
    content-visibility: auto;
    contain-intrinsic-size: 118px;
  }

  body.radical-atlas.dark .project-card,
  body.radical-atlas.dark .port-card,
  body.radical-atlas.dark .summary-card,
  body.radical-atlas.dark .info-block,
  body.radical-atlas.dark .metric,
  body.radical-atlas.dark .mini-card,
  body.radical-atlas.dark .chart-box,
  body.radical-atlas.dark .table-wrap,
  body.radical-atlas.dark .text-box,
  body.radical-atlas.dark .fishery-city-card,
  body.radical-atlas.dark .fishery-structure-item {
    border-color: rgba(119, 232, 216, .14);
  }

  body.radical-atlas .project-card {
    padding: 10px;
  }

  body.radical-atlas .project-card:hover,
  body.radical-atlas .port-card:hover,
  body.radical-atlas .icon-btn:hover,
  body.radical-atlas .seg-btn:hover,
  body.radical-atlas .chip:hover,
  body.radical-atlas .primary-btn:hover,
  body.radical-atlas .secondary-btn:hover,
  body.radical-atlas .compact-btn:hover {
    transform: none;
  }

  body.radical-atlas .project-card.active {
    border-color: rgba(22, 137, 121, .32);
    box-shadow: 0 0 0 2px rgba(22, 137, 121, .10), 0 10px 22px rgba(0, 0, 0, .05);
  }

  body.radical-atlas .control-row,
  body.radical-atlas .metric-grid,
  body.radical-atlas .detail-kpi-strip,
  body.radical-atlas .detail-two-col,
  body.radical-atlas .detail-money-grid,
  body.radical-atlas .modal-grid,
  body.radical-atlas .fishery-metrics {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  body.radical-atlas img,
  body.radical-atlas video,
  body.radical-atlas canvas {
    max-width: 100%;
  }

  body.radical-atlas .project-title,
  body.radical-atlas .port-title,
  body.radical-atlas .detail-title,
  body.radical-atlas .detail-hero-title,
  body.radical-atlas .summary-name,
  body.radical-atlas .section-title,
  body.radical-atlas .chart-title,
  body.radical-atlas .mini-title,
  body.radical-atlas .tab,
  body.radical-atlas .chip,
  body.radical-atlas .seg-btn,
  body.radical-atlas .primary-btn,
  body.radical-atlas .secondary-btn,
  body.radical-atlas .compact-btn,
  body.radical-atlas .detail-cta {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
  }

  body.radical-atlas .chip,
  body.radical-atlas .pill,
  body.radical-atlas .badge,
  body.radical-atlas .status-pill {
    max-width: 100%;
    white-space: normal;
    line-height: 1.15;
  }

  body.radical-atlas .project-title,
  body.radical-atlas .port-card .project-title {
    font-size: .92rem;
    line-height: 1.22;
  }

  body.radical-atlas .project-meta,
  body.radical-atlas .port-meta,
  body.radical-atlas .detail-meta {
    gap: 5px;
  }

  body.radical-atlas .detail-modal,
  body.radical-atlas .modal,
  body.radical-atlas .image-lightbox {
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  body.radical-atlas .modal-card,
  body.radical-atlas .image-lightbox-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: var(--pwa-vh, 100dvh) !important;
    max-height: var(--pwa-vh, 100dvh) !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.radical-atlas.dark .modal-card,
  body.radical-atlas.dark .modal-body,
  body.radical-atlas.dark .image-lightbox-card,
  body.radical-atlas.dark .image-lightbox-frame {
    background: #07110f !important;
  }

  body.radical-atlas .modal-header,
  body.radical-atlas .image-lightbox-head {
    position: sticky;
    top: 0;
    z-index: 6;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 auto;
    gap: 6px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  body.radical-atlas .modal-header > div:first-child,
  body.radical-atlas .image-lightbox-head > div:first-child {
    min-width: 0;
  }

  body.radical-atlas .modal-title {
    font-size: 1.08rem;
    line-height: 1.12;
    overflow-wrap: anywhere;
  }

  body.radical-atlas .modal-actions,
  body.radical-atlas .detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
    overflow: visible;
  }

  body.radical-atlas .modal-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  body.radical-atlas .modal-actions .secondary-btn,
  body.radical-atlas .detail-actions .secondary-btn,
  body.radical-atlas .modal-actions .primary-btn,
  body.radical-atlas .detail-actions .primary-btn {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 0 10px;
    white-space: nowrap;
  }

  body.radical-atlas .modal-actions .secondary-btn,
  body.radical-atlas .modal-actions .primary-btn {
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }

  body.radical-atlas .modal-actions .secondary-btn span,
  body.radical-atlas .modal-actions .primary-btn span {
    display: none !important;
  }

  body.radical-atlas #modalEdit,
  body.radical-atlas #fisheryEdit,
  body.radical-atlas .edit-record-btn,
  body.radical-atlas .record-edit-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-card,
  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-card,
  body.radical-atlas #detailModal .modal-card {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-body,
  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-body,
  body.radical-atlas #detailModal .modal-body {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
    overscroll-behavior: auto;
    touch-action: auto;
    -webkit-overflow-scrolling: auto;
  }

  body.radical-atlas #detailModal .modal-body > * {
    max-width: 100%;
  }

  body.radical-atlas .modal-body,
  body.radical-atlas .image-lightbox-frame {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding:
      10px
      max(10px, env(safe-area-inset-right, 0px))
      calc(18px + env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-left, 0px)) !important;
    -webkit-overflow-scrolling: touch;
  }

  body.radical-atlas .detail-hero,
  body.radical-atlas .detail-main,
  body.radical-atlas .detail-side,
  body.radical-atlas .info-block,
  body.radical-atlas .detail-list,
  body.radical-atlas .detail-kpi-strip,
  body.radical-atlas .detail-money-grid,
  body.radical-atlas .project-gallery,
  body.radical-atlas .port-gallery,
  body.radical-atlas .project-media-grid,
  body.radical-atlas .project-media-card,
  body.radical-atlas .project-media-frame,
  body.radical-atlas .project-image-zoom {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.radical-atlas .detail-hero,
  body.radical-atlas .detail-two-col,
  body.radical-atlas .detail-main,
  body.radical-atlas .detail-side {
    align-items: start !important;
  }

  body.radical-atlas .detail-hero {
    overflow: visible !important;
  }

  body.radical-atlas .detail-hero-copy,
  body.radical-atlas .detail-status-box,
  body.radical-atlas .text-box {
    position: relative;
    z-index: 1;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.radical-atlas.dark .detail-hero,
  body.radical-atlas.dark .detail-hero-panel,
  body.radical-atlas.dark .info-block,
  body.radical-atlas.dark .metric,
  body.radical-atlas.dark .mini-card,
  body.radical-atlas.dark .chart-box,
  body.radical-atlas.dark .table-wrap,
  body.radical-atlas.dark .text-box,
  body.radical-atlas.dark .detail-status-box,
  body.radical-atlas.dark .project-media-card,
  body.radical-atlas.dark .project-media-frame {
    background-color: #0b1714 !important;
  }

  body.radical-atlas .project-gallery,
  body.radical-atlas .port-gallery,
  body.radical-atlas .project-media-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  body.radical-atlas .project-media-card,
  body.radical-atlas .project-media-frame,
  body.radical-atlas .project-image-zoom {
    width: 100% !important;
    border-radius: 11px !important;
  }

  body.radical-atlas .project-detail-image,
  body.radical-atlas .port-detail-image,
  body.radical-atlas .project-media-frame img,
  body.radical-atlas .project-image-zoom img,
  body.radical-atlas .port-gallery img,
  body.radical-atlas .project-gallery img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(46svh, 360px) !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 10px !important;
  }

  body.radical-atlas .detail-side .project-detail-image,
  body.radical-atlas .detail-side .port-detail-image {
    max-height: min(42svh, 340px) !important;
  }

  body.radical-atlas .image-lightbox-img {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(var(--pwa-vh, 100dvh) - 86px) !important;
    object-fit: contain !important;
  }

  body.radical-atlas table {
    max-width: 100%;
  }

  body.radical-atlas .table-wrap {
    overflow-x: auto !important;
    overflow-y: hidden;
  }

  body.radical-atlas .table-wrap table {
    width: 100%;
    table-layout: auto;
  }

  body.radical-atlas .table-wrap th {
    width: 34%;
    min-width: 112px;
    white-space: normal;
    overflow-wrap: normal;
    word-break: keep-all;
    font-size: .74rem;
    line-height: 1.15;
  }

  body.radical-atlas .table-wrap td {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  body.radical-atlas .mobile-selection-nav {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 0 8px;
    background:
      linear-gradient(180deg, rgba(7,17,15,.98), rgba(7,17,15,.86) 72%, rgba(7,17,15,0));
    backdrop-filter: blur(14px);
  }

  body.radical-atlas .mobile-selection-nav .secondary-btn {
    min-height: 42px;
    border-radius: 13px;
    justify-content: center;
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
  }

  body.radical-atlas #detailModal.open {
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-card,
  body.radical-atlas #detailModal .modal-card {
    height: var(--pwa-vh, 100dvh) !important;
    max-height: var(--pwa-vh, 100dvh) !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.radical-atlas #detailModal .modal-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    padding-top: max(9px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 9px !important;
    background:
      linear-gradient(180deg, rgba(7,17,15,.98), rgba(8,24,21,.94)) !important;
    border-bottom: 1px solid rgba(154,231,220,.16);
    box-shadow: 0 10px 26px rgba(0,0,0,.2);
  }

  body.radical-atlas #detailModal .modal-actions {
    grid-column: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  body.radical-atlas #detailModal .modal-actions .secondary-btn,
  body.radical-atlas #detailModal .modal-actions .edit-record-btn {
    display: none !important;
  }

  body.radical-atlas #detailModal #modalClose {
    display: inline-grid !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
    position: relative !important;
    z-index: 40 !important;
  }

  body.radical-atlas #detailModal.pwa-mobile-detail-scroll .modal-body,
  body.radical-atlas #detailModal .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.radical-atlas .fishery-output-row {
    display: none !important;
  }
}

@keyframes pwaMobileSheetIn {
  from {
    opacity: .96;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pwaMobileTabPop {
  0% {
    transform: scale(.982);
  }
  100% {
    transform: scale(1);
  }
}

@media (min-width: 391px) and (max-width: 430px) {
  body.radical-atlas {
    --mobile-map-height: clamp(242px, 40svh, 382px);
  }

  body.radical-atlas .tabs {
    gap: 7px;
    grid-auto-rows: minmax(56px, auto);
  }

  body.radical-atlas .tab {
    min-height: 56px;
    font-size: .61rem;
  }

  body.radical-atlas .tab[data-tab="fishery"] {
    font-size: .57rem;
  }
}

@media (max-width: 390px) {
  body.radical-atlas {
    --mobile-map-height: clamp(210px, 37svh, 300px);
  }

  body.radical-atlas .topbar {
    min-height: 54px;
    gap: 6px;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand {
    flex-basis: 30px;
    width: 30px;
    min-width: 30px;
    height: 28px;
    min-height: 28px;
    padding: 2px;
  }

  body.radical-atlas .brand-title {
    font-size: .74rem;
  }

  body.radical-atlas .top-actions {
    max-width: none;
    gap: 4px;
  }

  body.radical-atlas .top-actions .icon-btn,
  body.radical-atlas .data-update-toggle,
  body.radical-atlas .briefing-toggle,
  body.radical-atlas .sidebar-toggle-btn {
    flex-basis: 32px;
    width: 32px;
    min-width: 32px;
    height: 31px;
    min-height: 31px;
  }

  body.radical-atlas .main {
    grid-template-rows: var(--mobile-map-height) auto;
  }

  body.radical-atlas .map-area,
  body.radical-atlas #map {
    min-height: var(--mobile-map-height);
  }

  body.radical-atlas .tabs {
    gap: 5px;
    grid-auto-rows: minmax(51px, auto);
    padding: 7px max(8px, env(safe-area-inset-right, 0px)) 7px max(8px, env(safe-area-inset-left, 0px));
  }

  body.radical-atlas .tab {
    min-height: 51px;
    padding: 4px 3px;
    border-radius: 12px;
    font-size: .55rem;
  }

  body.radical-atlas .tab[data-tab="fishery"] {
    font-size: .51rem;
  }
}

@media (max-width: 360px) {
  body.radical-atlas {
    --mobile-map-height: clamp(198px, 35svh, 270px);
  }

  body.radical-atlas .topbar {
    min-height: 50px;
    padding:
      calc(4px + env(safe-area-inset-top, 0px))
      max(7px, env(safe-area-inset-right, 0px))
      5px
      max(7px, env(safe-area-inset-left, 0px));
  }

  body.radical-atlas .brand {
    gap: 5px;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand {
    flex-basis: 28px;
    width: 28px;
    min-width: 28px;
    height: 26px;
    min-height: 26px;
  }

  body.radical-atlas .brand-title {
    font-size: .68rem;
  }

  body.radical-atlas .top-actions {
    gap: 3px;
  }

  body.radical-atlas .top-actions .icon-btn,
  body.radical-atlas .data-update-toggle,
  body.radical-atlas .briefing-toggle,
  body.radical-atlas .sidebar-toggle-btn {
    flex-basis: 29px;
    width: 29px;
    min-width: 29px;
    height: 30px;
    min-height: 30px;
    border-radius: 9px;
    font-size: .82rem;
  }

  body.radical-atlas .tabs {
    gap: 4px;
    grid-auto-rows: minmax(48px, auto);
    padding: 6px max(6px, env(safe-area-inset-right, 0px)) 6px max(6px, env(safe-area-inset-left, 0px));
  }

  body.radical-atlas .tab {
    min-height: 48px;
    padding: 4px 2px;
    border-radius: 11px;
    font-size: .51rem;
  }

  body.radical-atlas .tab[data-tab="fishery"] {
    font-size: .48rem;
  }

  body.radical-atlas .tab i {
    font-size: .9rem;
  }

  body.radical-atlas .sidebar .panel {
    padding: 8px 8px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  body.radical-atlas .project-title,
  body.radical-atlas .port-card .project-title {
    font-size: .86rem;
  }
}

@media (max-width: 760px) and (orientation: landscape), (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body.radical-atlas {
    --mobile-map-height: clamp(150px, 46svh, 210px);
  }

  body.radical-atlas .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 50px;
    padding: 5px 8px;
  }

  body.radical-atlas .brand-title {
    -webkit-line-clamp: 1;
  }

  body.radical-atlas .main {
    grid-template-rows: var(--mobile-map-height) auto;
  }

  body.radical-atlas .map-area,
  body.radical-atlas #map {
    min-height: var(--mobile-map-height);
  }

  body.radical-atlas .tabs {
    grid-auto-rows: minmax(46px, auto);
  }

  body.radical-atlas .tab {
    min-height: 46px;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-width: 950px) and (max-height: 500px) and (prefers-reduced-motion: reduce) {
  body.radical-atlas,
  body.radical-atlas *,
  body.radical-atlas *::before,
  body.radical-atlas *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body.auth-locked {
    overflow: hidden !important;
  }

  body.auth-locked .auth-gate {
    place-items: center;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(12px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.auth-locked .auth-card {
    width: min(330px, calc(100vw - 30px)) !important;
    max-height: calc(var(--pwa-vh, 100dvh) - 24px);
    display: grid !important;
    grid-template-columns: 1fr !important;
    transform: none !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  body.auth-locked .auth-visual {
    display: none !important;
  }

  body.auth-locked .auth-panel {
    width: 100% !important;
    min-height: 0 !important;
    max-height: calc(var(--pwa-vh, 100dvh) - 24px);
    padding: 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    animation: none !important;
    transform: none !important;
    backdrop-filter: blur(12px) saturate(1.02) !important;
    box-shadow:
      0 18px 56px rgba(0, 0, 0, .42),
      0 0 36px rgba(48, 196, 232, .10),
      inset 0 1px 0 rgba(255, 255, 255, .18) !important;
  }

  body.auth-locked .auth-panel::before {
    inset: 10px !important;
    border-radius: 14px !important;
    opacity: .24 !important;
    background-size: 70px 70px !important;
  }

  body.auth-locked .auth-panel::after,
  body.auth-locked .auth-panel-rail,
  .auth-wave-ribbon,
  .auth-light-trails {
    display: none !important;
  }

  body.auth-locked .auth-logo-row {
    min-height: 0 !important;
    padding: 8px 9px !important;
    gap: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
  }

  body.auth-locked .auth-logo-frame {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  body.auth-locked .auth-logo {
    width: 32px !important;
    height: 32px !important;
  }

  body.auth-locked .auth-logo-row > div:last-child {
    min-width: 0 !important;
  }

  body.auth-locked .auth-kicker {
    font-size: .49rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  body.auth-locked .auth-title {
    margin-top: 2px !important;
    font-size: 1rem !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.auth-locked .auth-session-line {
    margin: 5px 0 !important;
    opacity: .54;
  }

  body.auth-locked .auth-fields {
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px) !important;
  }

  body.auth-locked .auth-fields::before {
    margin: 0 0 1px !important;
    font-size: .95rem !important;
    line-height: 1.05 !important;
    text-shadow: none !important;
  }

  body.auth-locked .auth-field {
    gap: 4px !important;
    font-size: .66rem !important;
  }

  body.auth-locked .auth-field-label {
    gap: 6px !important;
    margin: 0 !important;
    font-size: .64rem !important;
    line-height: 1.1 !important;
  }

  body.auth-locked .auth-field-label i {
    font-size: .72rem !important;
  }

  body.auth-locked .auth-input-shell::before {
    left: 10px !important;
    width: 6px !important;
    height: 6px !important;
  }

  body.auth-locked .auth-field input {
    min-height: 36px !important;
    padding: 0 11px 0 27px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  body.auth-locked .auth-submit {
    min-height: 38px !important;
    border-radius: 13px !important;
    font-size: .82rem !important;
    gap: 7px !important;
    box-shadow:
      0 12px 26px rgba(28, 171, 224, .22),
      inset 0 1px 0 rgba(255, 255, 255, .32) !important;
  }

  body.auth-locked .auth-error {
    min-height: 0 !important;
    font-size: .66rem !important;
    line-height: 1.25 !important;
  }

  .auth-ocean-stage::before {
    width: min(520px, 118vw) !important;
    opacity: .42 !important;
  }

  .auth-ocean-stage::after {
    width: min(620px, 136vw) !important;
    opacity: .12 !important;
  }

  .auth-radar-sweep {
    width: min(520px, 118vw) !important;
    opacity: .74 !important;
  }
}

@media (max-width: 360px) {
  body.auth-locked .auth-card {
    width: min(292px, calc(100vw - 34px)) !important;
  }

  body.auth-locked .auth-panel {
    padding: 10px !important;
    border-radius: 16px !important;
  }

  body.auth-locked .auth-logo-row {
    padding: 7px 8px !important;
  }

  body.auth-locked .auth-logo-frame {
    flex-basis: 30px !important;
    width: 30px !important;
    height: 30px !important;
  }

  body.auth-locked .auth-logo {
    width: 28px !important;
    height: 28px !important;
  }

  body.auth-locked .auth-kicker {
    font-size: .46rem !important;
  }

  body.auth-locked .auth-title {
    font-size: .9rem !important;
  }

  body.auth-locked .auth-fields {
    gap: 6px !important;
    padding: 7px !important;
  }

  body.auth-locked .auth-fields::before {
    font-size: .9rem !important;
  }

  body.auth-locked .auth-field input {
    min-height: 34px !important;
  }

  body.auth-locked .auth-submit {
    min-height: 36px !important;
  }
}

@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body.auth-locked .auth-card {
    width: min(360px, calc(100vw - 28px)) !important;
  }

  body.auth-locked .auth-panel {
    padding: 10px !important;
  }

  body.auth-locked .auth-logo-row {
    padding: 6px 8px !important;
  }

  body.auth-locked .auth-fields {
    gap: 6px !important;
    padding: 8px !important;
  }

  body.auth-locked .auth-session-line {
    display: none !important;
  }
}

/* Mobile visual polish: premium app surface without changing desktop cockpit behavior. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body.radical-atlas {
    --mobile-cyan: #65f4e7;
    --mobile-blue: #58a6ff;
    --mobile-gold: #f4c55d;
    --mobile-coral: #ff7b72;
    --mobile-violet: #b9a7ff;
    --mobile-glass: rgba(9, 21, 19, .74);
    --mobile-glass-strong: rgba(10, 25, 22, .90);
    --mobile-border: rgba(126, 244, 231, .20);
    --mobile-shadow: 0 18px 46px rgba(0, 0, 0, .28);
    background:
      linear-gradient(180deg, rgba(5, 14, 13, .98), rgba(7, 22, 19, .98) 48%, rgba(8, 16, 21, .98)),
      repeating-linear-gradient(135deg, rgba(101, 244, 231, .035) 0 1px, transparent 1px 22px);
  }

  body.radical-atlas:not(.dark) {
    --mobile-glass: rgba(255, 255, 255, .82);
    --mobile-glass-strong: rgba(255, 255, 255, .94);
    --mobile-border: rgba(15, 118, 110, .18);
    --mobile-shadow: 0 16px 36px rgba(18, 60, 54, .16);
    background:
      linear-gradient(180deg, #f6fbf9, #eef8f5 48%, #f7fbf9),
      repeating-linear-gradient(135deg, rgba(15, 118, 110, .045) 0 1px, transparent 1px 22px);
  }

  body.radical-atlas .topbar {
    background:
      linear-gradient(135deg, rgba(101, 244, 231, .12), rgba(88, 166, 255, .08) 34%, rgba(244, 197, 93, .08) 100%),
      rgba(5, 14, 13, .86);
    border-bottom-color: rgba(101, 244, 231, .22);
    box-shadow: 0 10px 32px rgba(0, 0, 0, .26);
  }

  body.radical-atlas:not(.dark) .topbar {
    background:
      linear-gradient(135deg, rgba(15, 118, 110, .10), rgba(31, 95, 130, .07) 52%, rgba(194, 135, 26, .08)),
      rgba(255, 255, 255, .90);
    box-shadow: 0 10px 28px rgba(20, 78, 70, .12);
  }

  body.radical-atlas .topbar::after {
    content: "";
    position: absolute;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: 0;
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--mobile-cyan), var(--mobile-gold), transparent);
    opacity: .62;
    pointer-events: none;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(231, 255, 251, .72));
    border-color: rgba(101, 244, 231, .34);
    box-shadow: 0 8px 24px rgba(101, 244, 231, .12);
  }

  body.radical-atlas .top-actions .icon-btn,
  body.radical-atlas .sidebar-toggle-btn {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(101, 244, 231, .04)),
      rgba(3, 13, 12, .64);
    border-color: rgba(101, 244, 231, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }

  body.radical-atlas:not(.dark) .top-actions .icon-btn,
  body.radical-atlas:not(.dark) .sidebar-toggle-btn {
    background: rgba(255, 255, 255, .80);
    border-color: rgba(15, 118, 110, .16);
  }

  body.radical-atlas .map-area::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, transparent, rgba(5, 15, 13, .16) 48%, rgba(5, 15, 13, .58));
  }

  body.radical-atlas:not(.dark) .map-area::after {
    background: linear-gradient(180deg, transparent, rgba(244, 250, 247, .16) 52%, rgba(244, 250, 247, .54));
  }

  body.radical-atlas .sidebar {
    position: relative;
    border-top-color: rgba(101, 244, 231, .22);
    background:
      linear-gradient(180deg, rgba(9, 22, 20, .95), rgba(5, 16, 14, .98)),
      repeating-linear-gradient(90deg, rgba(101, 244, 231, .028) 0 1px, transparent 1px 18px);
    box-shadow: 0 -18px 44px rgba(0, 0, 0, .30);
  }

  body.radical-atlas:not(.dark) .sidebar {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 250, 247, .98)),
      repeating-linear-gradient(90deg, rgba(15, 118, 110, .025) 0 1px, transparent 1px 18px);
    box-shadow: 0 -18px 42px rgba(20, 78, 70, .12);
  }

  body.radical-atlas .sidebar::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--mobile-cyan), var(--mobile-blue), var(--mobile-gold));
    opacity: .66;
    pointer-events: none;
  }

  body.radical-atlas .tabs {
    padding-top: 12px;
    background:
      linear-gradient(135deg, rgba(101, 244, 231, .08), rgba(88, 166, 255, .045), rgba(244, 197, 93, .055)),
      rgba(5, 16, 14, .88);
    border-bottom-color: rgba(101, 244, 231, .18);
  }

  body.radical-atlas:not(.dark) .tabs {
    background:
      linear-gradient(135deg, rgba(15, 118, 110, .08), rgba(31, 95, 130, .05), rgba(194, 135, 26, .06)),
      rgba(255, 255, 255, .88);
  }

  body.radical-atlas .tab {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-color: rgba(126, 244, 231, .18);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
      rgba(5, 18, 16, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .16);
  }

  body.radical-atlas:not(.dark) .tab {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 250, 247, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .70), 0 8px 18px rgba(18, 60, 54, .08);
  }

  body.radical-atlas .tab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background:
      linear-gradient(135deg, rgba(101, 244, 231, .26), rgba(88, 166, 255, .18) 52%, rgba(244, 197, 93, .22));
    transition: opacity .18s var(--mobile-ease);
  }

  body.radical-atlas .tab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 6px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--mobile-cyan), var(--mobile-gold));
    opacity: 0;
    transform: scaleX(.40);
    transition:
      opacity .18s var(--mobile-ease),
      transform .18s var(--mobile-ease);
  }

  body.radical-atlas .tabs .tab[data-ui-tip]::before,
  body.radical-atlas .tabs .tab[data-ui-tip]::after {
    content: "" !important;
    display: block !important;
  }

  body.radical-atlas .tab.active {
    border-color: rgba(101, 244, 231, .38);
    color: var(--mobile-cyan);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      inset 0 0 0 1px rgba(101, 244, 231, .16),
      0 12px 28px rgba(45, 206, 190, .16);
  }

  body.radical-atlas .tab.active::before,
  body.radical-atlas .tab.active::after {
    opacity: 1;
    transform: scaleX(1);
  }

  body.radical-atlas .tab i {
    filter: drop-shadow(0 5px 10px rgba(101, 244, 231, .12));
  }

  body.radical-atlas .sidebar .panel {
    background: transparent;
  }

  body.radical-atlas .search,
  body.radical-atlas select {
    border-color: rgba(126, 244, 231, .18);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .025)),
      rgba(5, 18, 16, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(0, 0, 0, .10);
  }

  body.radical-atlas:not(.dark) .search,
  body.radical-atlas:not(.dark) select {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(15, 118, 110, .16);
    box-shadow: 0 10px 24px rgba(18, 60, 54, .08);
  }

  body.radical-atlas .search:focus-within,
  body.radical-atlas select:focus {
    border-color: rgba(101, 244, 231, .42);
    box-shadow:
      0 0 0 3px rgba(101, 244, 231, .10),
      0 12px 28px rgba(0, 0, 0, .14);
  }

  body.radical-atlas .chip,
  body.radical-atlas .seg-btn,
  body.radical-atlas .secondary-btn,
  body.radical-atlas .compact-btn {
    border-color: rgba(126, 244, 231, .18);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
      rgba(5, 18, 16, .62);
  }

  body.radical-atlas:not(.dark) .chip,
  body.radical-atlas:not(.dark) .seg-btn,
  body.radical-atlas:not(.dark) .secondary-btn,
  body.radical-atlas:not(.dark) .compact-btn {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(15, 118, 110, .16);
  }

  body.radical-atlas .chip.active,
  body.radical-atlas .seg-btn.active,
  body.radical-atlas .primary-btn,
  body.radical-atlas .detail-cta {
    background: linear-gradient(135deg, var(--mobile-cyan), #25b7db 52%, var(--mobile-gold) 132%);
    border-color: rgba(255, 255, 255, .22);
    color: #061310;
    box-shadow: 0 14px 32px rgba(37, 183, 219, .20);
  }

  body.radical-atlas .section-title,
  body.radical-atlas .chart-title,
  body.radical-atlas .mini-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(238, 255, 251, .96);
  }

  body.radical-atlas:not(.dark) .section-title,
  body.radical-atlas:not(.dark) .chart-title,
  body.radical-atlas:not(.dark) .mini-title {
    color: #10231f;
  }

  body.radical-atlas .section-title i,
  body.radical-atlas .chart-title i,
  body.radical-atlas .mini-title i {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 28px;
    border-radius: 10px;
    color: var(--mobile-cyan);
    background:
      linear-gradient(135deg, rgba(101, 244, 231, .14), rgba(244, 197, 93, .10));
    border: 1px solid rgba(101, 244, 231, .20);
  }

  body.radical-atlas .project-card,
  body.radical-atlas .port-card,
  body.radical-atlas .summary-card,
  body.radical-atlas .fishery-city-card,
  body.radical-atlas .fishery-structure-item {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    border-color: rgba(126, 244, 231, .17);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .020)),
      linear-gradient(135deg, rgba(101, 244, 231, .055), rgba(88, 166, 255, .035) 54%, rgba(244, 197, 93, .045)),
      rgba(5, 18, 16, .78);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .075),
      0 14px 34px rgba(0, 0, 0, .18);
  }

  body.radical-atlas:not(.dark) .project-card,
  body.radical-atlas:not(.dark) .port-card,
  body.radical-atlas:not(.dark) .summary-card,
  body.radical-atlas:not(.dark) .fishery-city-card,
  body.radical-atlas:not(.dark) .fishery-structure-item {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(246, 251, 249, .86)),
      linear-gradient(135deg, rgba(15, 118, 110, .05), rgba(31, 95, 130, .035) 54%, rgba(194, 135, 26, .045));
    border-color: rgba(15, 118, 110, .15);
    box-shadow: 0 12px 28px rgba(18, 60, 54, .10);
  }

  body.radical-atlas .project-card::before,
  body.radical-atlas .port-card::before,
  body.radical-atlas .summary-card::before,
  body.radical-atlas .fishery-city-card::before,
  body.radical-atlas .fishery-structure-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: inherit;
    background: linear-gradient(180deg, var(--mobile-cyan), var(--mobile-blue), var(--mobile-gold));
    opacity: .84;
    pointer-events: none;
  }

  body.radical-atlas .project-card::after,
  body.radical-atlas .port-card::after,
  body.radical-atlas .summary-card::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    opacity: .9;
    pointer-events: none;
  }

  body.radical-atlas .project-card.active,
  body.radical-atlas .port-card.active {
    border-color: rgba(101, 244, 231, .42);
    box-shadow:
      0 0 0 2px rgba(101, 244, 231, .12),
      0 18px 38px rgba(45, 206, 190, .16);
  }

  body.radical-atlas .project-title,
  body.radical-atlas .port-card .project-title,
  body.radical-atlas .summary-name {
    color: rgba(247, 255, 253, .98);
    text-shadow: 0 10px 24px rgba(0, 0, 0, .20);
  }

  body.radical-atlas:not(.dark) .project-title,
  body.radical-atlas:not(.dark) .port-card .project-title,
  body.radical-atlas:not(.dark) .summary-name {
    color: #10231f;
    text-shadow: none;
  }

  body.radical-atlas .pill,
  body.radical-atlas .badge,
  body.radical-atlas .status-pill,
  body.radical-atlas .project-meta span,
  body.radical-atlas .port-meta span {
    border-color: rgba(101, 244, 231, .20);
    background:
      linear-gradient(135deg, rgba(101, 244, 231, .12), rgba(88, 166, 255, .055));
    color: rgba(194, 255, 247, .94);
  }

  body.radical-atlas:not(.dark) .pill,
  body.radical-atlas:not(.dark) .badge,
  body.radical-atlas:not(.dark) .status-pill,
  body.radical-atlas:not(.dark) .project-meta span,
  body.radical-atlas:not(.dark) .port-meta span {
    color: #0f766e;
    background: rgba(15, 118, 110, .07);
    border-color: rgba(15, 118, 110, .16);
  }

  body.radical-atlas .metric,
  body.radical-atlas .mini-card,
  body.radical-atlas .info-block,
  body.radical-atlas .table-wrap,
  body.radical-atlas .text-box {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)),
      rgba(5, 18, 16, .78);
    border-color: rgba(126, 244, 231, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 12px 28px rgba(0, 0, 0, .12);
  }

  body.radical-atlas:not(.dark) .metric,
  body.radical-atlas:not(.dark) .mini-card,
  body.radical-atlas:not(.dark) .info-block,
  body.radical-atlas:not(.dark) .table-wrap,
  body.radical-atlas:not(.dark) .text-box {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(15, 118, 110, .14);
    box-shadow: 0 10px 24px rgba(18, 60, 54, .08);
  }
}

@media (max-width: 390px) {
  body.radical-atlas .section-title i,
  body.radical-atlas .chart-title i,
  body.radical-atlas .mini-title i {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 8px;
  }
}

/* Mobile topbar logo hard clamp: keep the ministry mark inside the app bar after card selections. */
@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body.radical-atlas .topbar {
    grid-template-columns: minmax(0, 1fr) auto !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  body.radical-atlas .brand {
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  body.radical-atlas .brand > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand,
  body.radical-atlas .brand-mark.ministry-brand,
  body.radical-atlas .brand .brand-mark.ministry-brand {
    display: grid !important;
    flex: 0 0 30px !important;
    place-items: center !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    padding: 2px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    transform: none !important;
  }

  body.radical-atlas .brand-mark img,
  body.radical-atlas .brand-mark svg,
  body.radical-atlas .ministry-logo {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    overflow: hidden !important;
    transform: none !important;
  }
}

@media (max-width: 360px) {
  body.radical-atlas .brand {
    grid-template-columns: 27px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  body.radical-atlas .brand-mark,
  body.radical-atlas .ministry-brand,
  body.radical-atlas .brand-mark.ministry-brand,
  body.radical-atlas .brand .brand-mark.ministry-brand {
    flex-basis: 27px !important;
    width: 27px !important;
    min-width: 27px !important;
    max-width: 27px !important;
    height: 25px !important;
    min-height: 25px !important;
    max-height: 25px !important;
    padding: 2px !important;
  }
}

/* Auth radar sweep refinement: replace the orbiting endpoint dot with a real scan line. */
.auth-ocean-stage::before {
  background:
    conic-gradient(from -2deg at 50% 50%,
      rgba(126, 232, 219, .90) 0deg,
      rgba(126, 232, 219, .46) 1.3deg,
      rgba(126, 232, 219, .12) 4.8deg,
      transparent 12deg 360deg),
    radial-gradient(circle at 50% 50%, rgba(126, 232, 219, .62) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(126, 232, 219, .16) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(126, 232, 219, .12) 50%, transparent calc(50% + 1px)),
    repeating-radial-gradient(circle at 50% 50%, rgba(126, 232, 219, .25) 0 1px, transparent 1px 74px),
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(244, 197, 94, .15) 31.4% 31.8%, transparent 32.3%),
    repeating-conic-gradient(from -2deg at 50% 50%, rgba(126, 232, 219, .17) 0 .65deg, transparent .65deg 15deg) !important;
  animation: authDeepRadarSpin 16s linear infinite !important;
}

.auth-radar-sweep span {
  left: 50% !important;
  top: 50% !important;
  width: min(42vw, 460px) !important;
  max-width: 50% !important;
  height: 4px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg,
      rgba(126, 232, 219, .98) 0%,
      rgba(126, 232, 219, .82) 22%,
      rgba(126, 232, 219, .38) 66%,
      rgba(126, 232, 219, 0) 100%) !important;
  box-shadow:
    0 0 22px rgba(126, 232, 219, .72),
    0 0 54px rgba(79, 214, 232, .38) !important;
  transform: translate(0, -50%) !important;
  transform-origin: 0 50% !important;
}

.auth-radar-sweep span::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: 100% !important;
  height: 72px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(90deg, rgba(126, 232, 219, .28), rgba(126, 232, 219, .10) 42%, rgba(126, 232, 219, 0)) !important;
  filter: blur(18px) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.auth-radar-sweep span::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  width: min(28vw, 300px) !important;
  height: min(28vw, 300px) !important;
  border-radius: 50% !important;
  background: conic-gradient(from -8deg at 0 50%, rgba(126, 232, 219, .24) 0deg, rgba(126, 232, 219, .08) 13deg, transparent 34deg 360deg) !important;
  transform: translateY(-50%) !important;
  transform-origin: 0 50% !important;
  pointer-events: none !important;
  filter: blur(2px) !important;
}

@media (max-width: 620px) {
  .auth-radar-sweep span {
    width: 300px !important;
    height: 3px !important;
  }

  .auth-radar-sweep span::after {
    width: 220px !important;
    height: 220px !important;
  }
}

/* Cinematic video login experiment. Revert-safe: remove this block and the injected video layer. */
body.auth-locked {
  background: #02080b !important;
}

body.auth-locked .auth-gate {
  position: fixed !important;
  inset: 0 !important;
  min-height: var(--pwa-vh, 100dvh) !important;
  display: grid !important;
  align-items: center !important;
  justify-items: start !important;
  padding:
    max(28px, env(safe-area-inset-top, 0px))
    max(28px, env(safe-area-inset-right, 0px))
    max(28px, env(safe-area-inset-bottom, 0px))
    max(28px, env(safe-area-inset-left, 0px)) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #02080b !important;
}

body.auth-locked .auth-ocean-stage,
body.auth-locked .auth-ocean-stage::before,
body.auth-locked .auth-ocean-stage::after,
body.auth-locked .auth-gate::before,
body.auth-locked .auth-gate::after {
  display: none !important;
  opacity: 0 !important;
}

body.auth-locked .auth-video-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  background: #02080b !important;
  pointer-events: none !important;
}

body:not(.auth-locked) .auth-video-layer {
  display: none !important;
}

body.auth-locked .auth-earth-bg {
  position: absolute !important;
  inset: -1.5% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 60% center !important;
  transform: scale(1.015) translateZ(0) !important;
  filter: saturate(1.22) contrast(1.08) brightness(1.08) !important;
  opacity: .99 !important;
  will-change: transform !important;
}

body.auth-locked .auth-starfield {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 10% 16%, rgba(255, 255, 255, .95) 0 1px, transparent 2px),
    radial-gradient(circle at 23% 74%, rgba(126, 232, 219, .72) 0 1px, transparent 2px),
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, .85) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 68%, rgba(244, 197, 94, .68) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 31%, rgba(255, 255, 255, .72) 0 1px, transparent 2px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .18) 0 1px, transparent 1px 82px) !important;
  opacity: .46 !important;
  mix-blend-mode: screen !important;
  animation: authStarDrift 28s linear infinite !important;
}

body.auth-locked .auth-atmosphere-beam {
  position: absolute !important;
  inset: -12% !important;
  z-index: 1 !important;
  background:
    radial-gradient(ellipse at 64% 45%, rgba(69, 207, 255, .18), transparent 36%),
    linear-gradient(112deg, transparent 0 28%, rgba(126, 244, 219, .22) 37%, rgba(126, 244, 219, .06) 47%, transparent 62% 100%) !important;
  filter: blur(2px) !important;
  opacity: .72 !important;
  mix-blend-mode: screen !important;
}

@keyframes authStarDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-22px, 14px, 0); }
}

body.auth-locked .auth-video-grade {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background:
    radial-gradient(circle at 20% 52%, rgba(43, 211, 217, .20), transparent 31%),
    radial-gradient(circle at 75% 21%, rgba(244, 197, 94, .11), transparent 32%),
    linear-gradient(90deg, rgba(1, 8, 11, .68) 0%, rgba(3, 16, 22, .40) 31%, rgba(3, 14, 20, .10) 62%, rgba(2, 8, 12, .42) 100%),
    linear-gradient(180deg, rgba(1, 7, 10, .36) 0%, transparent 44%, rgba(1, 7, 10, .58) 100%) !important;
}

body.auth-locked .auth-video-layer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .62), transparent 66%) !important;
  opacity: .15 !important;
}

body.auth-locked .auth-video-layer::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  background:
    linear-gradient(115deg, transparent 0 37%, rgba(110, 247, 235, .13) 38%, transparent 39% 100%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 13px) !important;
  mix-blend-mode: screen !important;
  opacity: .16 !important;
}

body.auth-locked .auth-video-logo-veil {
  position: absolute !important;
  right: -10px !important;
  bottom: -10px !important;
  z-index: 4 !important;
  width: clamp(180px, 22vw, 340px) !important;
  height: clamp(104px, 18vh, 190px) !important;
  border-radius: 999px 0 0 0 !important;
  background:
    radial-gradient(circle at 72% 72%, rgba(1, 8, 11, .96) 0 31%, rgba(1, 8, 11, .78) 48%, rgba(1, 8, 11, .38) 64%, transparent 79%),
    linear-gradient(135deg, transparent 0%, rgba(1, 8, 11, .58) 54%, rgba(1, 8, 11, .92) 100%) !important;
  backdrop-filter: blur(8px) saturate(.92) !important;
}

body.auth-locked .auth-card {
  position: relative !important;
  z-index: 3 !important;
  --auth-shift-x: 0px;
  --auth-shift-y: 0px;
  --auth-tilt-x: 0deg;
  --auth-tilt-y: 0deg;
  width: clamp(390px, 31vw, 510px) !important;
  max-width: calc(100vw - 56px) !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  margin: 0 0 0 clamp(22px, 7vw, 110px) !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform:
    perspective(1200px)
    translate3d(var(--auth-shift-x), var(--auth-shift-y), 0)
    rotateX(var(--auth-tilt-x))
    rotateY(var(--auth-tilt-y)) !important;
  transform-style: preserve-3d !important;
  transition: transform .24s cubic-bezier(.2, .9, .2, 1) !important;
}

body.auth-locked .auth-card::before,
body.auth-locked .auth-visual,
body.auth-locked .auth-panel-rail,
body.auth-locked .auth-session-line {
  display: none !important;
}

body.auth-locked .auth-panel {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.2vw, 34px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(168, 255, 246, .26) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(150deg, rgba(6, 23, 27, .88), rgba(4, 33, 39, .68) 52%, rgba(6, 18, 24, .82)),
    rgba(3, 12, 16, .78) !important;
  box-shadow:
    0 34px 88px rgba(0, 0, 0, .48),
    0 0 0 1px rgba(255, 255, 255, .055),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  backdrop-filter: blur(24px) saturate(1.28) !important;
}

body.auth-locked .auth-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: 28px !important;
  pointer-events: none !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(244, 197, 94, .20), transparent 26%),
    radial-gradient(circle at 8% 90%, rgba(101, 244, 231, .18), transparent 31%) !important;
  opacity: .88 !important;
}

body.auth-locked .auth-panel::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: 0 !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(101, 244, 231, .72), rgba(244, 197, 94, .62), transparent) !important;
  opacity: .8 !important;
}

body.auth-locked .auth-panel > * {
  position: relative !important;
  z-index: 1 !important;
}

body.auth-locked .auth-logo-row {
  min-height: 0 !important;
  padding: 0 0 18px !important;
  gap: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

body.auth-locked .auth-logo-frame {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 5px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .96) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30), 0 0 0 1px rgba(101, 244, 231, .20) !important;
}

body.auth-locked .auth-logo {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

body.auth-locked .auth-kicker {
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: rgba(205, 255, 249, .76) !important;
  font-size: .68rem !important;
  line-height: 1.1 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.auth-locked .auth-title {
  margin: 5px 0 0 !important;
  color: #f6fffe !important;
  font-size: clamp(1.55rem, 2.2vw, 2rem) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 12px 30px rgba(0, 0, 0, .42) !important;
}

body.auth-locked .auth-fields {
  gap: 13px !important;
  padding: 16px !important;
  border: 1px solid rgba(168, 255, 246, .18) !important;
  border-radius: 22px !important;
  background: rgba(1, 10, 14, .36) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(10px) !important;
}

body.auth-locked .auth-fields::before {
  content: "Güvenli Kurumsal Giriş" !important;
  margin: 0 0 1px !important;
  color: rgba(244, 255, 253, .92) !important;
  font-size: 1.02rem !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

body.auth-locked .auth-field {
  gap: 7px !important;
  color: rgba(219, 255, 251, .86) !important;
  transition: transform .18s cubic-bezier(.2, .9, .2, 1) !important;
}

body.auth-locked .auth-field:focus-within {
  transform: translateY(-1px) !important;
}

body.auth-locked .auth-field-label {
  gap: 8px !important;
  margin: 0 !important;
  color: rgba(219, 255, 251, .82) !important;
  font-size: .76rem !important;
  line-height: 1.1 !important;
  letter-spacing: .02em !important;
}

body.auth-locked .auth-field-label i {
  color: rgba(101, 244, 231, .88) !important;
  font-size: .82rem !important;
}

body.auth-locked .auth-input-shell {
  display: block !important;
  position: relative !important;
  overflow: visible !important;
}

body.auth-locked .auth-input-shell::before {
  left: 14px !important;
  width: 7px !important;
  height: 7px !important;
  background: rgba(101, 244, 231, .95) !important;
  box-shadow: 0 0 18px rgba(101, 244, 231, .70) !important;
}

body.auth-locked .auth-field input {
  width: 100% !important;
  min-height: 48px !important;
  padding: 0 15px 0 36px !important;
  border: 1px solid rgba(191, 255, 249, .18) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #f8fffe !important;
  font-size: 16px !important;
  line-height: 1 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 14px 30px rgba(0, 0, 0, .14) !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}

body.auth-locked .auth-field input:focus {
  border-color: rgba(101, 244, 231, .72) !important;
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 0 0 4px rgba(101, 244, 231, .12), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

body.auth-locked .auth-submit {
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background:
    linear-gradient(135deg, #7ef4db 0%, #38bdf8 58%, #f4c55e 132%) !important;
  color: #031315 !important;
  font-size: .93rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow:
    0 18px 38px rgba(56, 189, 248, .26),
    0 8px 20px rgba(126, 244, 219, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55) !important;
  transition: transform .18s cubic-bezier(.2, .9, .2, 1), filter .18s ease, box-shadow .18s ease !important;
}

body.auth-locked .auth-submit:active {
  transform: translateY(1px) scale(.99) !important;
}

@media (hover: hover) {
  body.auth-locked .auth-submit:hover {
    transform: translateY(-2px) !important;
    filter: saturate(1.08) brightness(1.04) !important;
    box-shadow:
      0 24px 48px rgba(56, 189, 248, .31),
      0 12px 26px rgba(126, 244, 219, .19),
      inset 0 1px 0 rgba(255, 255, 255, .60) !important;
  }
}

body.auth-locked .auth-error {
  min-height: 18px !important;
  margin-top: 10px !important;
  color: #ffd2d2 !important;
  font-size: .76rem !important;
  line-height: 1.3 !important;
}

@media (max-width: 760px), (max-width: 950px) and (max-height: 500px) {
  body.auth-locked .auth-gate {
    align-items: end !important;
    justify-items: center !important;
    padding:
      max(12px, env(safe-area-inset-top, 0px))
      max(13px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(13px, env(safe-area-inset-left, 0px)) !important;
  }

  body.auth-locked .auth-earth-bg {
    inset: auto !important;
    top: max(10px, env(safe-area-inset-top, 0px)) !important;
    left: 50% !important;
    width: 146vw !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: translateX(-50%) scale(1) !important;
    filter: saturate(1.22) contrast(1.08) brightness(1.02) !important;
  }

  body.auth-locked .auth-video-grade {
    background:
      radial-gradient(circle at 50% 28%, rgba(43, 211, 217, .18), transparent 36%),
      linear-gradient(180deg, rgba(1, 7, 10, .14) 0%, rgba(1, 7, 10, .05) 39%, rgba(1, 7, 10, .76) 100%),
      linear-gradient(90deg, rgba(1, 8, 11, .34), rgba(1, 8, 11, .05), rgba(1, 8, 11, .30)) !important;
  }

  body.auth-locked .auth-video-logo-veil {
    right: -12px !important;
    bottom: -12px !important;
    width: 46vw !important;
    min-width: 160px !important;
    height: 17vh !important;
    min-height: 92px !important;
  }

  body.auth-locked .auth-card {
    width: min(326px, calc(100vw - 28px)) !important;
    max-height: calc(var(--pwa-vh, 100dvh) - 24px) !important;
    margin: 0 !important;
    align-self: end !important;
    justify-self: center !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.auth-locked .auth-panel {
    max-height: calc(var(--pwa-vh, 100dvh) - 24px) !important;
    padding: 12px !important;
    border-radius: 21px !important;
    overflow: hidden !important;
    backdrop-filter: blur(18px) saturate(1.18) !important;
  }

  body.auth-locked .auth-panel::before {
    border-radius: 20px !important;
  }

  body.auth-locked .auth-logo-row {
    padding-bottom: 9px !important;
    gap: 9px !important;
  }

  body.auth-locked .auth-logo-frame {
    flex-basis: 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 4px !important;
    border-radius: 12px !important;
  }

  body.auth-locked .auth-kicker {
    font-size: .51rem !important;
    letter-spacing: .045em !important;
  }

  body.auth-locked .auth-title {
    margin-top: 3px !important;
    font-size: 1rem !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body.auth-locked .auth-fields {
    gap: 7px !important;
    padding: 8px !important;
    border-radius: 17px !important;
  }

  body.auth-locked .auth-fields::before {
    font-size: .86rem !important;
  }

  body.auth-locked .auth-field-label {
    font-size: .65rem !important;
  }

  body.auth-locked .auth-field input {
    min-height: 36px !important;
    padding-left: 30px !important;
    border-radius: 13px !important;
  }

  body.auth-locked .auth-input-shell::before {
    left: 11px !important;
  }

  body.auth-locked .auth-submit {
    min-height: 38px !important;
    border-radius: 14px !important;
    font-size: .82rem !important;
  }

  body.auth-locked .auth-error {
    margin-top: 7px !important;
    font-size: .66rem !important;
  }
}

@media (max-width: 360px) {
  body.auth-locked .auth-card {
    width: min(296px, calc(100vw - 24px)) !important;
  }

  body.auth-locked .auth-panel {
    padding: 12px !important;
    border-radius: 20px !important;
  }

  body.auth-locked .auth-logo-frame {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  body.auth-locked .auth-title {
    font-size: .94rem !important;
  }

  body.auth-locked .auth-fields {
    gap: 7px !important;
    padding: 8px !important;
  }

  body.auth-locked .auth-field input {
    min-height: 36px !important;
  }

  body.auth-locked .auth-submit {
    min-height: 38px !important;
  }
}

@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body.auth-locked .auth-gate {
    align-items: center !important;
    justify-items: start !important;
    padding: max(10px, env(safe-area-inset-top, 0px)) 18px max(10px, env(safe-area-inset-bottom, 0px)) 18px !important;
  }

  body.auth-locked .auth-card {
    width: min(350px, calc(100vw - 36px)) !important;
    margin-left: clamp(8px, 5vw, 54px) !important;
  }

  body.auth-locked .auth-panel {
    padding: 11px !important;
  }

  body.auth-locked .auth-logo-row {
    padding-bottom: 8px !important;
  }

  body.auth-locked .auth-fields {
    gap: 6px !important;
    padding: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.auth-locked .auth-earth-bg,
  body.auth-locked .auth-card,
  body.auth-locked .auth-submit,
  body.auth-locked .auth-field {
    transition: none !important;
    animation: none !important;
  }

  body.auth-locked .auth-earth-bg {
    transform: scale(1.01) !important;
  }
}