:root {
    /* Backgrounds */
    --bg-base: #050B14;
    --bg-elevated: rgba(15, 28, 48, 0.6);
    --bg-overlay: rgba(8, 16, 28, 0.85);
    --bg-surface: rgba(255, 255, 255, 0.04);
    --bg-surface-active: rgba(255, 255, 255, 0.08);

    /* Text Hierarchy */
    --text-primary: rgba(255, 255, 255, 0.98);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-tertiary: rgba(255, 255, 255, 0.58);
    --text-quaternary: rgba(255, 255, 255, 0.55);

    /* Accents */
    --accent-primary: #35F2BE;
    --accent-warning: #F4B440;
    --accent-critical: #FF5C5C;
    --earth-light: #E5C9A3;
    --earth-rust: #C66B3D;
    --earth-dark: #6B2E1A;

    /* Borders/Hairlines */
    --hairline: 0.5px solid rgba(255, 255, 255, 0.06);
    --hairline-strong: 0.5px solid rgba(255, 255, 255, 0.12);

    /* Glass surfaces */
    --glass-bg: rgba(15, 28, 48, 0.6);
    --glass-blur: blur(40px) saturate(180%);

    /* Spacing */
    --edge-padding: 20px;
    --section-gap: 40px;
    --hero-radius: 20px;
    --thumb-radius: 12px;
    --pill-radius: 24px;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
                 "SF Pro Display", "Helvetica Neue", system-ui, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono",
                 "Menlo", monospace;

    /* Spring Curves */
    --spring-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --spring-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-tight: cubic-bezier(0.5, 1.25, 0.75, 1.25);

    /* Standard Curves */
    --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-ios-in-out: cubic-bezier(0.42, 0, 0.58, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Durations */
    --duration-instant: 0.12s;
    --duration-quick: 0.2s;
    --duration-base: 0.35s;
    --duration-modal: 0.5s;
    --duration-sheet: 0.55s;
}

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

html {
    min-height: 100%;
    background: var(--bg-base);
    color: var(--text-primary);
}

body {
    min-height: 100%;
    margin: 0;
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    letter-spacing: 0;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
.interactive {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition:
        transform 0.15s var(--spring-soft),
        opacity var(--duration-quick) var(--ease-out-expo),
        background-color var(--duration-quick) var(--ease-out-expo);
}

button:active,
.interactive:active {
    transform: scale(0.96);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.interactive:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(53, 242, 190, 0.82);
    outline-offset: 3px;
}

button:focus-visible,
input:focus-visible,
.interactive:focus-visible {
    outline: 2px solid rgba(53, 242, 190, 0.82);
    outline-offset: 3px;
}

img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

.app-root {
    min-height: 100dvh;
    background: var(--bg-base);
}

.launch-splash {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 32px;
    background: #050B14;
    color: var(--text-primary);
    text-align: center;
    opacity: 1;
    transform: scale(1);
    animation: launch-splash-enter 0.7s var(--ease-out-expo) both;
    transition:
        opacity var(--duration-modal) var(--ease-out-expo),
        transform var(--duration-modal) var(--spring-soft),
        visibility var(--duration-modal) var(--ease-out-expo);
}

.launch-splash img {
    width: 112px;
    height: 112px;
    border-radius: 28px;
    object-fit: cover;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.launch-splash p,
.launch-splash h1 {
    margin: 0;
}

.launch-splash h1 {
    color: #ffffff;
    letter-spacing: 0;
}

.launch-splash p {
    color: rgba(255, 255, 255, 0.72);
}

.splash-status {
    color: var(--text-secondary);
}

.splash-progress {
    position: relative;
    width: 124px;
    height: 4px;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.splash-progress::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accent-primary);
    transform: translateX(-76%);
    animation: splash-progress 1.4s var(--spring-soft) infinite;
}

.app-root[data-app-state="ready"] .launch-splash {
    visibility: hidden;
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
}

.app-root[data-app-state="failed"] .launch-splash {
    background: var(--bg-base);
}

.app-root[data-app-state="failed"] .splash-progress::before {
    background: var(--accent-critical);
    animation: none;
    transform: translateX(0);
}

[hidden],
.screen-hidden {
    display: none !important;
}

.text-large-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.21;
}

.text-title-1 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
}

.text-title-2 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.27;
}

.text-title-3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.30;
}

.text-headline {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.30;
}

.text-body {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.41;
}

.text-callout {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.31;
}

.text-subhead {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.33;
}

.text-footnote {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.38;
}

.text-caption-1 {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.33;
}

.text-caption-2 {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.27;
}

.text-editorial-hero {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
}

.text-editorial-display {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.10;
}

.mono-readout {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
    letter-spacing: 0;
}

.mono-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

.scrollable {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.scrollable::-webkit-scrollbar {
    display: none;
}

@keyframes ios-list-enter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes splash-progress {
    0% {
        transform: translateX(-86%) scaleX(0.44);
    }

    54% {
        transform: translateX(4%) scaleX(0.82);
    }

    100% {
        transform: translateX(86%) scaleX(0.38);
    }
}

@keyframes launch-splash-enter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.field-os {
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

.camera-stream,
.camera-mock-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-stream {
    z-index: 1;
    background: #000;
}

.camera-mock-layer {
    z-index: 2;
    overflow: hidden;
    background: #09101A;
    transition: opacity var(--duration-base) var(--ease-out-expo);
}

.field-os[data-camera-state="live"] .camera-mock-layer {
    opacity: 0;
    pointer-events: none;
}

.camera-mock-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 18%),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.36));
    pointer-events: none;
}

.mock-sky {
    position: absolute;
    inset: 0 0 42%;
    background:
        linear-gradient(to bottom, rgba(42, 58, 78, 0.88), rgba(107, 118, 118, 0.68) 58%, rgba(190, 168, 118, 0.54));
}

.mock-ridge {
    position: absolute;
    left: -8%;
    right: -8%;
    bottom: 31%;
    height: 36%;
    clip-path: polygon(0 64%, 13% 45%, 24% 55%, 38% 28%, 54% 51%, 68% 33%, 82% 52%, 100% 39%, 100% 100%, 0 100%);
}

.mock-ridge-back {
    background: rgba(92, 86, 73, 0.88);
    filter: blur(1px);
}

.mock-ridge-front {
    bottom: 22%;
    height: 38%;
    background: rgba(58, 51, 43, 0.96);
    clip-path: polygon(0 57%, 12% 36%, 29% 48%, 41% 24%, 57% 44%, 73% 31%, 91% 46%, 100% 38%, 100% 100%, 0 100%);
}

.mock-outcrop {
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -12%;
    height: 43%;
    background:
        linear-gradient(164deg, rgba(186, 145, 94, 0.82) 0 16%, transparent 16% 19%, rgba(91, 77, 66, 0.94) 19% 34%, transparent 34% 38%, rgba(151, 121, 83, 0.86) 38% 54%, transparent 54% 58%, rgba(63, 55, 49, 0.98) 58% 100%);
    transform: skewY(-3deg);
}

.mock-reticle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 0.5px solid rgba(255, 255, 255, 0.26);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 0 999px rgba(0, 0, 0, 0.02),
        0 0 28px rgba(0, 0, 0, 0.16) inset;
}

.mock-reticle::before,
.mock-reticle::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.36);
}

.mock-reticle::before {
    top: 50%;
    left: -28px;
    right: -28px;
    height: 0.5px;
}

.mock-reticle::after {
    top: -28px;
    bottom: -28px;
    left: 50%;
    width: 0.5px;
}

.hud-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: start;
    padding: max(env(safe-area-inset-top, 16px), 16px) 20px 24px;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.20) 60%,
        transparent 100%
    );
}

.hud-left,
.hud-center,
.hud-right {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hud-center {
    align-items: center;
    text-align: center;
}

.hud-right {
    align-items: flex-end;
}

.gps-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.gps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-warning);
}

.gps-indicator[data-state="searching"] .gps-dot {
    animation: gps-pulse 1.5s var(--ease-ios-in-out) infinite;
}

.gps-indicator[data-state="connected"] .gps-dot {
    background: var(--accent-primary);
    animation: none;
}

.gps-indicator[data-state="lost"] .gps-dot {
    background: var(--accent-critical);
    animation: none;
}

.field-os[data-gps-accuracy="weak"] .gps-dot {
    background: var(--accent-warning);
    animation: gps-pulse 1.5s var(--ease-ios-in-out) infinite;
}

.field-os[data-gps-accuracy="weak"] .accuracy-readout {
    color: var(--accent-warning);
}

.field-os[data-gps-accuracy="lost"] .accuracy-readout {
    color: var(--accent-critical);
}

.gps-source-warning {
    position: absolute;
    top: max(calc(env(safe-area-inset-top, 16px) + 68px), 84px);
    left: 50%;
    z-index: 18;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    color: var(--text-primary);
    background: rgba(255, 92, 92, 0.24);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--pill-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transform: translateX(-50%);
    pointer-events: none;
}

.gps-source-warning[hidden] {
    display: none;
}

.altitude-readout,
.station-id,
.accuracy-readout,
.compass {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.altitude-readout,
.station-id,
.compass {
    font-size: 13px;
    font-weight: 600;
}

.hud-telemetry {
    position: absolute;
    top: max(calc(env(safe-area-inset-top, 16px) + 92px), 108px);
    left: 20px;
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.telemetry-item {
    display: grid;
    grid-template-columns: 42px auto;
    gap: 10px;
    align-items: baseline;
}

.telemetry-item .mono-label {
    color: var(--text-tertiary);
}

.telemetry-item .mono-readout {
    font-size: 12px;
    color: var(--text-primary);
}

.capture-trigger {
    position: absolute;
    bottom: 96px;
    left: 50%;
    z-index: 45;
    width: 78px;
    height: 78px;
    border: 4px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transform: translateX(-50%);
    transition:
        transform 0.15s var(--spring-soft),
        box-shadow var(--duration-quick) var(--ease-out-expo);
}

.capture-trigger::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    transition: transform 0.15s var(--spring-soft);
}

.capture-trigger:active {
    transform: translateX(-50%) scale(0.95);
}

.capture-trigger:active::before {
    transform: scale(0.85);
}

.field-os[data-capture-state="capturing"] .capture-trigger {
    box-shadow:
        0 0 0 12px rgba(255, 255, 255, 0.16),
        0 4px 20px rgba(0, 0, 0, 0.3);
}

.field-os[data-capture-state="capturing"] .capture-trigger::before {
    transform: scale(0.76);
}

.field-os::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 35;
    background: rgba(255, 255, 255, 0.82);
    opacity: 0;
    pointer-events: none;
}

.field-os[data-capture-state="capturing"]::before {
    animation: capture-flash var(--duration-base) var(--ease-out-expo);
}

.camera-reset-button {
    position: absolute;
    left: 50%;
    bottom: 184px;
    z-index: 45;
    min-height: 44px;
    padding: 0 14px;
    border: none;
    border-radius: var(--pill-radius);
    background: rgba(255, 92, 92, 0.18);
    color: #FFFFFF;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateX(-50%);
}

.camera-reset-button[hidden] {
    display: none;
}

.hud-bottom {
    position: absolute;
    bottom: 32px;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 0 32px;
}

.hud-action[data-action="compass"] {
    margin-left: auto;
}

.hud-action {
    width: 44px;
    height: 44px;
    border: var(--hairline-strong);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.last-photo-action[data-has-photo="true"] {
    border-color: rgba(53, 242, 190, 0.42);
    color: var(--accent-primary);
}

.radial-trigger {
    position: absolute;
    right: 24px;
    bottom: 180px;
    z-index: 25;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-base);
    box-shadow:
        0 8px 24px rgba(53, 242, 190, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

.field-os[data-radial-state="open"] .radial-trigger {
    transform: rotate(45deg) scale(1.02);
}

.radial-menu {
    position: absolute;
    right: 28px;
    bottom: 248px;
    z-index: 24;
    display: grid;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px) scale(0.94);
    transition:
        opacity var(--duration-quick) var(--ease-out-expo),
        transform var(--duration-quick) var(--spring-soft);
}

.field-os[data-radial-state="open"] .radial-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.radial-item {
    min-width: 112px;
    min-height: 44px;
    padding: 10px 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--pill-radius);
    background: rgba(0, 0, 0, 0.55);
    color: #FFFFFF;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    font-weight: 600;
    text-align: left;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.capture-toast {
    position: absolute;
    left: 50%;
    bottom: 200px;
    z-index: 18;
    max-width: min(280px, calc(100vw - 48px));
    padding: 8px 14px;
    border-radius: var(--pill-radius);
    background: rgba(0, 0, 0, 0.38);
    color: var(--text-secondary);
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition:
        opacity var(--duration-quick) var(--ease-out-expo),
        transform var(--duration-quick) var(--spring-soft);
}

.capture-toast[data-visible="true"] {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}

.capture-toast[data-kind="guard"],
.capture-toast[data-kind="error"] {
    background: rgba(244, 180, 64, 0.18);
    color: #FFFFFF;
    box-shadow: 0 0 0 0.5px rgba(244, 180, 64, 0.34) inset;
}

@keyframes gps-pulse {
    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes capture-flash {
    0% {
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 420px) {
    .hud-top {
        grid-template-columns: 1fr;
        gap: 10px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .hud-left,
    .hud-center,
    .hud-right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .hud-center {
        text-align: left;
    }

    .hud-telemetry {
        top: max(calc(env(safe-area-inset-top, 16px) + 132px), 148px);
    }

    .gps-source-warning {
        top: max(calc(env(safe-area-inset-top, 16px) + 148px), 164px);
        width: min(86vw, 320px);
    }
}

.field-menu {
    position: fixed;
    inset: 0;
    z-index: 70;
}

.sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.50);
    opacity: 0;
    transition: opacity var(--duration-quick) var(--ease-out-expo);
}

.sheet-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(88dvh, 760px);
    overflow-y: auto;
    border-radius: 26px 26px 0 0;
    background: var(--bg-overlay);
    color: var(--text-primary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.46);
    padding: 10px var(--edge-padding) max(env(safe-area-inset-bottom, 24px), 24px);
    transform: translateY(104%);
    transition: transform var(--duration-sheet) var(--spring-soft);
}

.field-menu[data-state="open"] .sheet-backdrop {
    opacity: 1;
}

.field-menu[data-state="open"] .sheet-content {
    transform: translateY(0);
}

.sheet-handle {
    width: 42px;
    height: 5px;
    margin: 0 auto 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.note-sheet,
.measurement-sheet,
.trip-editor-sheet,
.app-settings-sheet,
.quick-add-sheet,
.safety-guide-sheet,
.storage-full-sheet,
.about-privacy-sheet,
.capture-review-sheet,
.station-editor-sheet,
.sample-editor-sheet,
.records-sheet {
    position: fixed;
    inset: 0;
    z-index: 82;
}

.note-sheet-backdrop,
.measurement-sheet-backdrop,
.trip-editor-sheet-backdrop,
.app-settings-sheet-backdrop,
.quick-add-sheet-backdrop,
.safety-guide-sheet-backdrop,
.storage-full-sheet-backdrop,
.about-privacy-sheet-backdrop,
.capture-review-sheet-backdrop,
.station-editor-sheet-backdrop,
.sample-editor-sheet-backdrop,
.records-sheet-backdrop {
    position: absolute;
    inset: 0;
    border: none;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity var(--duration-quick) var(--ease-out-expo);
}

.note-sheet-content,
.measurement-sheet-content,
.trip-editor-sheet-content,
.app-settings-sheet-content,
.quick-add-sheet-content,
.safety-guide-sheet-content,
.storage-full-sheet-content,
.about-privacy-sheet-content,
.capture-review-sheet-content,
.station-editor-sheet-content,
.sample-editor-sheet-content,
.records-sheet-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(82dvh, 640px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px var(--edge-padding) max(env(safe-area-inset-bottom, 24px), 24px);
    border-radius: 26px 26px 0 0;
    background: var(--bg-overlay);
    color: var(--text-primary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 -24px 70px rgba(0, 0, 0, 0.46);
    transform: translateY(104%);
    transition: transform var(--duration-sheet) var(--spring-soft);
}

.sheet-radio-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    gap: 8px;
}

.sheet-radio-group legend {
    margin-bottom: 2px;
    color: var(--text-tertiary);
}

.sheet-radio-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

.sheet-radio-option input {
    accent-color: var(--accent-primary);
}

.app-stamp-settings {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.app-stamp-settings h4 {
    margin: 0;
}

.stamp-fields-grid {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stamp-fields-grid legend {
    grid-column: 1 / -1;
    color: var(--text-tertiary);
}

.stamp-field-option {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

.stamp-field-option input {
    accent-color: var(--accent-primary);
}

.stamp-live-preview {
    overflow: hidden;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.22);
}

.stamp-live-preview canvas {
    width: 100%;
    height: auto;
}

.note-sheet[data-state="open"] .note-sheet-backdrop,
.measurement-sheet[data-state="open"] .measurement-sheet-backdrop,
.trip-editor-sheet[data-state="open"] .trip-editor-sheet-backdrop,
.app-settings-sheet[data-state="open"] .app-settings-sheet-backdrop,
.quick-add-sheet[data-state="open"] .quick-add-sheet-backdrop,
.safety-guide-sheet[data-state="open"] .safety-guide-sheet-backdrop,
.storage-full-sheet[data-state="open"] .storage-full-sheet-backdrop,
.about-privacy-sheet[data-state="open"] .about-privacy-sheet-backdrop,
.capture-review-sheet[data-state="open"] .capture-review-sheet-backdrop,
.station-editor-sheet[data-state="open"] .station-editor-sheet-backdrop,
.sample-editor-sheet[data-state="open"] .sample-editor-sheet-backdrop,
.records-sheet[data-state="open"] .records-sheet-backdrop {
    opacity: 1;
}

.note-sheet[data-state="open"] .note-sheet-content,
.measurement-sheet[data-state="open"] .measurement-sheet-content,
.trip-editor-sheet[data-state="open"] .trip-editor-sheet-content,
.app-settings-sheet[data-state="open"] .app-settings-sheet-content,
.quick-add-sheet[data-state="open"] .quick-add-sheet-content,
.safety-guide-sheet[data-state="open"] .safety-guide-sheet-content,
.storage-full-sheet[data-state="open"] .storage-full-sheet-content,
.about-privacy-sheet[data-state="open"] .about-privacy-sheet-content,
.capture-review-sheet[data-state="open"] .capture-review-sheet-content,
.station-editor-sheet[data-state="open"] .station-editor-sheet-content,
.sample-editor-sheet[data-state="open"] .sample-editor-sheet-content,
.records-sheet[data-state="open"] .records-sheet-content {
    transform: translateY(0);
}

.note-sheet-header,
.measurement-sheet-header,
.trip-editor-sheet-header,
.app-settings-sheet-header,
.quick-add-sheet-header,
.safety-guide-sheet-header,
.storage-full-sheet-header,
.about-privacy-sheet-header,
.capture-review-sheet-header,
.station-editor-sheet-header,
.sample-editor-sheet-header,
.records-sheet-header {
    display: grid;
    gap: 6px;
    margin-bottom: 16px;
}

.note-sheet-header h3,
.measurement-sheet-header h3,
.trip-editor-sheet-header h3,
.app-settings-sheet-header h3,
.quick-add-sheet-header h3,
.safety-guide-sheet-header h3,
.storage-full-sheet-header h3,
.about-privacy-sheet-header h3,
.capture-review-sheet-header h3,
.station-editor-sheet-header h3,
.sample-editor-sheet-header h3,
.records-sheet-header h3 {
    margin: 0;
}

.note-textarea,
.measurement-notes {
    width: 100%;
    min-height: 220px;
    resize: vertical;
    border: var(--hairline-strong);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    padding: 16px;
    outline: none;
}

.measurement-notes {
    min-height: 92px;
    margin-top: 14px;
}

.note-textarea:focus,
.measurement-notes:focus,
.measurement-field input:focus,
.measurement-field select:focus {
    border-color: rgba(53, 242, 190, 0.42);
    box-shadow: 0 0 0 3px rgba(53, 242, 190, 0.10);
}

.measurement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.measurement-field {
    display: grid;
    gap: 8px;
    color: var(--text-secondary);
}

.measurement-field input,
.measurement-field select {
    width: 100%;
    min-height: 48px;
    border: var(--hairline-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    padding: 0 12px;
    outline: none;
}

.measurement-field select option {
    background: #07111E;
    color: #FFFFFF;
}

.sheet-form-grid {
    display: grid;
    gap: 12px;
}

.sheet-field {
    display: grid;
    gap: 8px;
    color: var(--text-secondary);
}

.sheet-field input,
.sheet-field select,
.sheet-field textarea {
    width: 100%;
    min-height: 48px;
    border: var(--hairline-strong);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    padding: 0 12px;
    outline: none;
}

.sheet-field textarea {
    min-height: 118px;
    padding: 12px;
    resize: vertical;
}

.sheet-field input:focus,
.sheet-field select:focus,
.sheet-field textarea:focus {
    border-color: rgba(53, 242, 190, 0.42);
    box-shadow: 0 0 0 3px rgba(53, 242, 190, 0.10);
}

.sheet-field select option {
    background: #07111E;
    color: #FFFFFF;
}

.sample-editor-type-button,
.sample-editor-photo-button,
.station-editor-photo-button,
.sample-editor-field-row {
    width: 100%;
    border: none;
    text-align: left;
}

.sample-editor-type-button {
    min-height: 92px;
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(53, 242, 190, 0.10);
    color: var(--text-primary);
}

.sample-editor-type-button .mono-label {
    color: var(--accent-primary);
}

.sample-editor-type-button .text-footnote {
    color: var(--text-secondary);
}

.sample-editor-fields {
    display: grid;
    gap: 8px;
}

.sample-editor-field-row {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(90px, 0.36fr) minmax(0, 0.64fr);
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
}

.sample-editor-field-row .mono-label {
    color: var(--accent-primary);
}

.sample-editor-field-row strong {
    min-width: 0;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.sample-editor-photo-button,
.station-editor-photo-button {
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.safety-guide-intro,
.safety-guide-card,
.about-privacy-intro,
.about-privacy-content {
    padding: 15px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.safety-guide-intro p,
.about-privacy-intro p,
.about-privacy-content p {
    margin: 0;
    color: var(--text-secondary);
}

.safety-guide-card,
.about-privacy-intro,
.about-privacy-content {
    display: grid;
    gap: 10px;
}

.about-privacy-intro h4,
.about-privacy-content h4,
.about-privacy-content h5 {
    margin: 0;
}

.about-privacy-list {
    margin: 0;
    padding-left: 20px;
    color: var(--text-secondary);
}

.safety-guide-card-header {
    display: grid;
    gap: 4px;
}

.safety-guide-card-header h4 {
    margin: 0;
}

.safety-guide-card-header .mono-label {
    color: var(--accent-primary);
}

.safety-guide-list {
    margin: 0;
    padding-left: 18px;
    color: var(--text-secondary);
}

.safety-guide-list li + li {
    margin-top: 7px;
}

.records-summary {
    display: grid;
    gap: 6px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
}

.records-summary h4,
.records-summary p {
    margin: 0;
}

.records-summary .mono-label {
    color: var(--accent-primary);
}

.records-summary p {
    color: var(--text-secondary);
}

.records-section {
    display: grid;
    gap: 10px;
}

.records-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.records-section-header h4 {
    margin: 0;
}

.records-section-header .mono-readout {
    color: var(--accent-primary);
}

.records-list {
    display: grid;
    gap: 8px;
}

.record-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 13px 12px 13px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
}

.record-row-body {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.record-row-title,
.record-row-meta {
    margin: 0;
}

.record-row-title,
.record-row-meta {
    overflow-wrap: anywhere;
}

.record-row-meta {
    color: var(--text-secondary);
}

.record-row-actions {
    display: grid;
    gap: 7px;
    justify-items: end;
}

.record-edit-button,
.record-delete-button {
    min-width: 72px;
    min-height: 44px;
    border: none;
    border-radius: var(--pill-radius);
}

.record-edit-button {
    background: rgba(53, 242, 190, 0.12);
    color: var(--accent-primary);
}

.record-delete-button {
    background: rgba(255, 92, 92, 0.13);
    color: var(--accent-critical);
}

.record-delete-button[data-confirm-delete="true"] {
    background: rgba(255, 92, 92, 0.24);
    color: #FFFFFF;
}

.record-edit-button:disabled,
.record-delete-button:disabled {
    opacity: 0.58;
}

.records-empty {
    margin: 0;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.045);
    color: var(--text-secondary);
}

.capture-review-sheet {
    z-index: 88;
}

.app-settings-sheet {
    z-index: 94;
}

.capture-review-sheet-content {
    max-height: min(94dvh, 820px);
}

.capture-review-header {
    min-height: 48px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    text-align: center;
}

.capture-review-header h3,
.capture-review-photo {
    margin: 0;
}

.capture-review-close {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
}

.capture-review-photo {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.42);
    aspect-ratio: 4 / 3;
}

.capture-review-preview,
.capture-review-canvas {
    width: 100%;
    height: 100%;
}

.capture-review-preview {
    display: grid;
    place-items: center;
    background: #000;
}

.capture-review-canvas {
    object-fit: contain;
}

.capture-review-name-field {
    margin-top: 14px;
}

.capture-review-primary-actions,
.capture-review-utility-actions {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.capture-review-save-primary,
.capture-review-save-secondary {
    min-height: 52px;
    border-radius: 18px;
    padding: 0 18px;
}

.capture-review-save-primary {
    border: none;
    background: var(--accent-primary);
    color: var(--bg-base);
}

.capture-review-save-secondary {
    border: 1px solid rgba(53, 242, 190, 0.58);
    background: rgba(5, 11, 20, 0.72);
    color: var(--accent-primary);
}

.capture-review-utility-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capture-review-utility-actions [data-loading="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.note-sheet-actions,
.measurement-sheet-actions,
.trip-editor-sheet-actions,
.app-settings-sheet-actions,
.quick-add-sheet-actions,
.safety-guide-sheet-actions,
.storage-full-sheet-actions,
.about-privacy-sheet-actions,
.capture-review-sheet-actions,
.station-editor-sheet-actions,
.sample-editor-sheet-actions,
.records-sheet-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.menu-hero,
.menu-section {
    margin-bottom: 24px;
}

.menu-hero-card {
    border-radius: var(--hero-radius);
    background: rgba(255, 255, 255, 0.08);
    padding: 20px;
}

.menu-hero-card h2,
.menu-hero-card p,
.menu-status,
.menu-section-label {
    margin: 0;
}

.menu-hero-card p {
    margin-top: 8px;
    color: var(--text-secondary);
}

.menu-hero-card .pill-button {
    margin-top: 18px;
}

.quick-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.quick-tile {
    min-height: 86px;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
}

.tile-glyph {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(53, 242, 190, 0.13);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.tile-label {
    color: var(--text-secondary);
}

.menu-status {
    margin-top: 12px;
    color: var(--text-tertiary);
}

.field-readiness-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.field-readiness-item {
    min-height: 58px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.055);
}

.field-readiness-item[data-state="ready"] .field-readiness-value {
    color: var(--accent-primary);
}

.field-readiness-item[data-state="warn"] .field-readiness-value {
    color: var(--accent-warning);
}

.field-readiness-item[data-state="offline"] .field-readiness-value {
    color: var(--text-primary);
}

.field-readiness-label {
    color: var(--text-tertiary);
}

.field-readiness-value {
    color: var(--text-secondary);
}

.menu-search-section {
    display: grid;
    gap: 10px;
}

.menu-search-field {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.075);
}

.menu-search-field .search-icon {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.menu-search-field input {
    min-width: 0;
    min-height: 48px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
}

.menu-search-field input::placeholder {
    color: var(--text-tertiary);
}

.menu-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.menu-search-results li + li {
    border-top: var(--hairline);
}

.menu-search-result {
    width: 100%;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
}

.menu-search-result-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.menu-search-result-title,
.menu-search-result-meta {
    overflow-wrap: anywhere;
}

.menu-search-result-meta,
.menu-search-empty {
    color: var(--text-tertiary);
}

.menu-search-empty {
    padding: 14px;
}

.menu-section-label {
    margin-bottom: 9px;
    color: var(--text-tertiary);
}

.ios-list,
.trips-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.ios-list li + li,
.trips-list li + li {
    border-top: var(--hairline);
}

.ios-row,
.trip-row {
    width: 100%;
    min-height: 54px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 14px;
    text-align: left;
}

.trip-row {
    min-height: 68px;
}

.trip-row-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.trip-row-title {
    overflow-wrap: anywhere;
}

.trip-row-meta,
.row-accessory {
    color: var(--text-tertiary);
}

.row-critical {
    color: var(--accent-critical);
}

.row-critical .row-accessory {
    color: rgba(255, 92, 92, 0.72);
}

.field-editorial {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background:
        linear-gradient(to bottom, rgba(53, 242, 190, 0.05), transparent 220px),
        var(--bg-base);
    color: var(--text-primary);
    padding: max(env(safe-area-inset-top, 18px), 18px) var(--edge-padding) max(calc(env(safe-area-inset-bottom, 28px) + 92px), 116px);
}

.editorial-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
}

.nav-button {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    font-size: 28px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: var(--text-secondary);
}

.brand-lockup img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: cover;
}

.editorial-masthead {
    margin-bottom: 28px;
}

.editorial-masthead h1,
.editorial-masthead p {
    margin: 0;
}

.masthead-meta {
    margin-top: 10px;
    color: var(--text-tertiary);
}

.masthead-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.editorial-hero {
    margin-bottom: var(--section-gap);
}

.hero-station {
    overflow: hidden;
    border-radius: var(--hero-radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    animation: ios-list-enter var(--duration-modal) var(--spring-soft) both;
}

.hero-photo {
    position: relative;
    height: clamp(250px, 48vh, 420px);
    margin: 0;
    overflow: hidden;
}

.hero-photo[data-action="view-photo"],
.field-entry-photo[data-action="view-photo"] {
    cursor: zoom-in;
}

.hero-photo[data-action="view-photo"]::after,
.field-entry-photo[data-action="view-photo"]::after {
    content: "View";
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 999px;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.field-entry-photo[data-action="view-photo"]::after {
    content: "";
    right: 4px;
    bottom: 4px;
    width: 8px;
    height: 8px;
    padding: 0;
    background: var(--accent-primary);
}

.station-photo-mock {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(158deg, rgba(47, 63, 78, 0.92) 0 36%, transparent 36% 39%, rgba(134, 99, 63, 0.92) 39% 55%, transparent 55% 59%, rgba(39, 34, 30, 0.98) 59% 100%),
        linear-gradient(to bottom, rgba(155, 166, 154, 0.28), rgba(4, 9, 14, 0.72));
}

.station-photo-mock::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(25deg, transparent 0 22%, rgba(255, 255, 255, 0.10) 22% 22.5%, transparent 22.5% 48%, rgba(255, 255, 255, 0.07) 48% 48.5%, transparent 48.5% 100%),
        radial-gradient(circle at 64% 26%, rgba(53, 242, 190, 0.14), transparent 26%);
}

.station-photo-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: ios-list-enter var(--duration-base) var(--spring-soft) both;
}

.station-photo-mock[data-photo-state="ready"] .station-photo-image {
    opacity: 1;
}

.station-photo-mock-large::after {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
}

.hero-content {
    padding: 22px 20px 20px;
}

.hero-meta,
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.hero-tag,
.section-count {
    color: var(--accent-primary);
}

.hero-time,
.hero-stats {
    color: var(--text-secondary);
}

.hero-subtitle {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    text-align: left;
    padding: 0;
}

.hero-subtitle[data-state="warning"] {
    color: var(--accent-warning);
}

.hero-content h2,
.hero-subtitle {
    margin: 10px 0 0;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 16px;
    font-size: 12px;
}

.station-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.quick-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.quick-add-option {
    min-height: 74px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 12px;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-primary);
    text-align: left;
}

.quick-add-option span {
    color: var(--text-tertiary);
}

.tool-pill {
    min-height: 44px;
    padding: 0 13px;
    border: none;
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.pill-button {
    min-height: 48px;
    margin-top: 22px;
    padding: 0 18px;
    border: none;
    border-radius: var(--pill-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pill-light {
    background: rgba(255, 255, 255, 0.92);
    color: var(--bg-base);
}

.pill-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

[data-action="delete-station"][data-confirm-delete="true"] {
    background: rgba(255, 92, 92, 0.18);
    color: #FFFFFF;
}

[data-menu-action="delete-station"][data-confirm-delete="true"],
[data-menu-action="delete-trip"][data-confirm-delete="true"] {
    background: rgba(255, 92, 92, 0.16);
}

[data-menu-action="delete-station"][data-confirm-delete="true"] .row-accessory,
[data-menu-action="delete-trip"][data-confirm-delete="true"] .row-accessory {
    color: var(--accent-critical);
}

.pill-arrow {
    font-size: 22px;
    line-height: 1;
}

.editorial-section {
    margin-bottom: var(--section-gap);
}

.section-header {
    margin-bottom: 16px;
}

.section-header h3 {
    margin: 0;
}

.stations-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(142px, 42%);
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
}

.station-thumb,
.sample-empty,
.stream-empty {
    border: none;
    border-radius: var(--thumb-radius);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.station-thumb {
    min-height: 168px;
    padding: 0;
    overflow: hidden;
    text-align: left;
}

.station-thumb[data-state="selected"] {
    box-shadow: 0 0 0 1px rgba(53, 242, 190, 0.34) inset;
}

.station-thumb-photo {
    position: relative;
    height: 96px;
    overflow: hidden;
}

.station-thumb-body {
    display: grid;
    gap: 5px;
    padding: 11px;
}

.station-thumb-body span {
    min-width: 0;
}

.station-thumb-name {
    color: var(--text-primary);
}

.station-thumb-meta {
    color: var(--text-tertiary);
    font-size: 11px;
}

.samples-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sample-card {
    min-height: 118px;
    padding: 15px;
    border: none;
    border-radius: var(--thumb-radius);
    background: var(--bg-surface);
    color: var(--text-primary);
    display: grid;
    align-content: space-between;
    gap: 12px;
}

.sample-card-photo {
    position: relative;
    height: 112px;
    margin: -15px -15px 0;
    overflow: hidden;
    border-radius: var(--thumb-radius) var(--thumb-radius) 6px 6px;
    background: rgba(255, 255, 255, 0.06);
}

.sample-card-photo[data-action] {
    cursor: zoom-in;
}

.sample-card-photo[data-action]:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.sample-card-photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg, rgba(229, 201, 163, 0.78), rgba(198, 107, 61, 0.70) 48%, rgba(107, 46, 26, 0.82)),
        radial-gradient(circle at 68% 24%, rgba(53, 242, 190, 0.18), transparent 30%);
}

.sample-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: ios-list-enter var(--duration-base) var(--spring-soft) both;
}

.sample-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.sample-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(53, 242, 190, 0.13);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sample-title,
.sample-meta {
    margin: 0;
}

.sample-meta {
    color: var(--text-tertiary);
}

.sample-card-actions {
    display: flex;
    justify-content: flex-end;
}

.sample-empty,
.stream-empty {
    padding: 18px;
    color: var(--text-secondary);
}

.sample-empty {
    min-height: 92px;
}

.field-record-stream {
    display: grid;
    gap: 10px;
}

.field-record-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.field-record-filter {
    min-height: 44px;
    padding: 0 12px;
    border: none;
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
}

.field-record-filter[data-state="selected"] {
    background: rgba(53, 242, 190, 0.14);
    color: var(--accent-primary);
}

.field-entry {
    width: 100%;
    min-height: 72px;
    padding: 10px 12px;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    color: var(--text-primary);
    text-align: left;
    animation: ios-list-enter var(--duration-modal) var(--spring-soft) both;
}

.field-entry[data-state="selected"] {
    box-shadow: 0 0 0 1px rgba(53, 242, 190, 0.34) inset;
}

.field-entry-compact {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
}

.field-entry-photo {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
}

.field-entry h4,
.field-entry p {
    margin: 0;
}

.field-entry-compact-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.field-entry-compact-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.field-entry-compact-top strong,
.field-entry-compact-meta,
.field-entry-compact-summary,
.field-entry-compact-detail {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.field-entry-compact-top .mono-readout,
.field-entry-compact-meta,
.field-entry-compact-summary {
    color: var(--text-secondary);
}

.field-entry-compact-detail {
    display: none;
    color: var(--text-tertiary);
}

.field-entry-compact[data-state="selected"] .field-entry-compact-detail {
    display: block;
}

.field-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 12px;
    color: var(--text-tertiary);
}

.field-entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.field-entry-tag {
    padding: 5px 9px;
    border-radius: var(--pill-radius);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.field-entry-notes {
    color: var(--text-secondary);
}

.floating-add {
    position: fixed;
    right: 24px;
    bottom: max(env(safe-area-inset-bottom, 24px), 24px);
    z-index: 20;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-base);
    box-shadow:
        0 8px 24px rgba(53, 242, 190, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
}

@media (min-width: 720px) {
    .field-editorial {
        padding-right: max(48px, calc((100vw - 680px) / 2));
        padding-left: max(48px, calc((100vw - 680px) / 2));
    }

    .hero-station {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(290px, 0.95fr);
    }

    .hero-photo {
        height: 100%;
        min-height: 380px;
    }
}

.smart-picker {
    position: fixed;
    inset: 0;
    z-index: 88;
}

.picker-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    transition: opacity var(--duration-quick) var(--ease-out-expo);
}

.picker-sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: min(82dvh, 720px);
    border-radius: 24px 24px 0 0;
    background: var(--bg-overlay);
    color: var(--text-primary);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    display: flex;
    flex-direction: column;
    transform: translateY(104%);
    transition: transform var(--duration-sheet) var(--spring-soft);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.36);
}

.smart-picker[data-state="open"] .picker-backdrop {
    opacity: 1;
}

.smart-picker[data-state="open"] .picker-sheet {
    transform: translateY(0);
}

.picker-handle {
    width: 42px;
    height: 5px;
    margin: 10px auto 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
}

.picker-header {
    min-height: 48px;
    display: grid;
    grid-template-columns: 76px 1fr 76px;
    align-items: center;
    gap: 8px;
    padding: 0 var(--edge-padding);
}

.picker-cancel {
    border: none;
    background: transparent;
    color: var(--accent-primary);
    text-align: left;
    padding: 0;
}

.picker-title {
    margin: 0;
    text-align: center;
}

.picker-search {
    margin: 12px var(--edge-padding) 10px;
    min-height: 46px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
}

.search-icon {
    color: var(--text-tertiary);
    text-align: center;
}

.picker-search input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
}

.picker-search input::placeholder {
    color: var(--text-tertiary);
}

.picker-content {
    overflow-y: auto;
    padding: 2px var(--edge-padding) max(env(safe-area-inset-bottom, 24px), 24px);
}

.picker-section {
    margin-top: 22px;
}

.picker-section-label {
    margin: 0 0 8px;
    color: var(--text-tertiary);
}

.picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

.picker-list li + li {
    border-top: var(--hairline);
}

.picker-item {
    width: 100%;
    min-height: 64px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    text-align: left;
}

.picker-leading {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(53, 242, 190, 0.12);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.picker-item-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.picker-item-name,
.picker-item-hint {
    overflow-wrap: anywhere;
}

.picker-item-hint,
.picker-empty {
    color: var(--text-secondary);
}

.picker-empty {
    padding: 18px 4px;
}

.picker-custom-trigger {
    width: 100%;
    min-height: 50px;
    border: none;
    border-radius: 14px;
    background: rgba(53, 242, 190, 0.12);
    color: var(--accent-primary);
    text-align: left;
    padding: 0 14px;
}

.picker-custom-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.picker-custom-form input {
    min-height: 44px;
    min-width: 0;
    border: none;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    padding: 0 12px;
    outline: none;
}

.photo-viewer {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.96);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out-expo);
}

.photo-viewer[data-state="open"] {
    opacity: 1;
}

.viewer-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    touch-action: none;
    transform: translate3d(0, 0, 0) scale(1);
    transform-origin: center center;
    transition: transform var(--duration-quick) var(--spring-soft);
    user-select: none;
    -webkit-user-drag: none;
    cursor: zoom-in;
}

.photo-viewer[data-zoomed="true"] .viewer-image {
    transition: none;
    cursor: grab;
}

.photo-viewer[data-zoomed="true"] .viewer-image:active {
    cursor: grabbing;
}

.viewer-close {
    position: fixed;
    top: max(env(safe-area-inset-top, 20px), 20px);
    right: 20px;
    z-index: 92;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
}

.viewer-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 91;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 22px 20px max(env(safe-area-inset-bottom, 24px), 24px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    transition:
        opacity var(--duration-quick) var(--ease-out-expo),
        transform var(--duration-quick) var(--spring-soft);
}

.photo-viewer[data-controls="hidden"] .viewer-overlay {
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
}

.viewer-overlay .pill-button {
    margin-top: 0;
}

.stamp-settings {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: max(calc(env(safe-area-inset-bottom, 24px) + 78px), 102px);
    z-index: 92;
    max-width: 430px;
    margin: 0 auto;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 14px;
    display: grid;
    gap: 12px;
}

.stamp-settings h3,
.stamp-settings fieldset {
    margin: 0;
}

.stamp-settings fieldset {
    min-width: 0;
    border: none;
    padding: 0;
}

.stamp-settings legend {
    margin-bottom: 8px;
    color: var(--accent-primary);
}

.stamp-position-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.stamp-position-grid label,
.stamp-toggle,
.stamp-opacity {
    min-height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}

.stamp-opacity {
    justify-content: space-between;
}

.stamp-opacity input {
    width: 148px;
}

.report-view {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-base);
    color: var(--text-primary);
    padding: max(env(safe-area-inset-top, 18px), 18px) var(--edge-padding) max(env(safe-area-inset-bottom, 28px), 28px);
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.report-actions .pill-button {
    margin-top: 0;
}

.report-actions [data-loading="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.report-actions [data-loading="true"] .text-subhead {
    font-size: 0;
}

.report-actions [data-loading="true"] .text-subhead::after {
    content: "Rendering";
    font-size: 15px;
}

.report-stations-strip,
.report-map-preview,
.report-sample-inventory {
    margin-top: 24px;
}

.report-stations-strip h2,
.report-sample-inventory h2,
.report-map-card h2 {
    margin: 0 0 12px;
}

.report-stations-strip-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 30%);
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.report-station-thumb {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.report-station-thumb .report-station-photo {
    height: 92px;
    margin: -10px -10px 2px;
    border-radius: 16px 16px 8px 8px;
}

.report-map-card {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.report-structure-card {
    margin-top: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.report-map-card canvas,
.report-structure-card canvas {
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.report-map-caption {
    margin: 10px 0 6px;
    color: var(--text-secondary);
}

.report-map-link {
    display: inline-flex;
    min-height: 44px;
    margin-top: 12px;
    text-decoration: none;
}

.station-structure-panel {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
}

.station-structure-panel canvas {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.sample-inventory-table {
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.sample-inventory-row {
    display: grid;
    grid-template-columns: 1fr 0.8fr 1fr 1.3fr;
    gap: 10px;
    padding: 10px 12px;
}

.sample-inventory-row + .sample-inventory-row {
    border-top: var(--hairline);
}

.sample-inventory-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sample-inventory-head {
    background: rgba(53, 242, 190, 0.08);
}

[data-action="report-share-pdf"][data-primary="true"] {
    background: rgba(53, 242, 190, 0.16);
    color: var(--accent-primary);
}

.report-share-viewer {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: max(env(safe-area-inset-top, 18px), 18px) var(--edge-padding) max(env(safe-area-inset-bottom, 24px), 24px);
    background: rgba(0, 0, 0, 0.94);
    color: var(--text-primary);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out-expo);
}

.report-share-viewer[data-state="open"] {
    opacity: 1;
}

.report-share-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.report-share-spacer {
    width: 44px;
    height: 44px;
}

.report-share-stage {
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.report-share-image {
    width: auto;
    max-width: min(92vw, 560px);
    max-height: calc(100dvh - 190px);
    border-radius: 18px;
    background: #07111E;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
    object-fit: contain;
}

.report-share-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.report-share-actions .pill-button {
    margin-top: 0;
}

.report-share-actions [data-loading="true"],
.report-actions [data-loading="true"] {
    opacity: 0.62;
    pointer-events: none;
}

.report-page {
    border-radius: var(--hero-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        #07111E;
    color: var(--text-primary);
    padding: 28px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}

.report-header p,
.report-header h1 {
    margin: 0;
}

.report-header .mono-label {
    color: var(--accent-primary);
}

.report-header .text-callout {
    margin-top: 10px;
    color: var(--text-secondary);
}

.report-hero-panel {
    margin-top: 24px;
}

.report-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.88fr);
    gap: 22px;
    align-items: stretch;
}

.report-hero-photo {
    position: relative;
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.06);
}

.report-hero-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(5, 11, 20, 0.78), transparent);
}

.report-hero-content {
    display: grid;
    align-content: end;
    gap: 14px;
    padding: 24px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.07);
}

.report-hero-content h2,
.report-hero-content p {
    margin: 0;
}

.report-hero-content .mono-label {
    color: var(--accent-primary);
}

.report-hero-content p {
    color: var(--text-secondary);
}

.report-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.report-hero-meta span {
    padding: 7px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}

.report-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 24px 0 18px;
}

.report-stat {
    min-height: 88px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    padding: 14px;
    display: grid;
    align-content: space-between;
}

.report-stat .mono-label {
    color: var(--text-tertiary);
}

.report-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 30px;
}

.report-insight {
    min-height: 122px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.055);
    display: grid;
    align-content: space-between;
    gap: 8px;
}

.report-insight .mono-label {
    color: var(--accent-primary);
}

.report-insight strong,
.report-insight p {
    margin: 0;
}

.report-insight p {
    color: var(--text-secondary);
}

.report-stations {
    display: grid;
    gap: 20px;
}

.report-station {
    display: grid;
    grid-template-columns: minmax(160px, 0.42fr) minmax(0, 0.58fr);
    gap: 16px;
    padding: 16px;
    border-top: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.055);
}

.report-station > :not(.report-station-photo) {
    grid-column: 2;
}

.report-station-photo {
    grid-row: 1 / span 5;
    position: relative;
    min-height: 190px;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
}

.report-station-photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(158deg, rgba(47, 63, 78, 0.92) 0 36%, transparent 36% 39%, rgba(198, 107, 61, 0.74) 39% 55%, transparent 55% 59%, rgba(107, 46, 26, 0.92) 59% 100%),
        linear-gradient(to bottom, rgba(229, 201, 163, 0.22), rgba(5, 11, 20, 0.44));
}

.report-station-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.report-station h2,
.report-station p {
    margin: 0;
}

.report-station p {
    margin-top: 8px;
    color: var(--text-secondary);
}

.report-measurement {
    color: var(--accent-primary) !important;
}

.report-samples {
    margin: 12px 0 0;
    color: var(--text-secondary);
    display: grid;
    gap: 8px;
}

.report-sample-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
}

.report-sample-photo {
    position: relative;
    width: 56px;
    height: 48px;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.report-sample-photo-placeholder {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(145deg, rgba(229, 201, 163, 0.75), rgba(198, 107, 61, 0.70) 52%, rgba(107, 46, 26, 0.86)),
        radial-gradient(circle at 66% 20%, rgba(53, 242, 190, 0.18), transparent 28%);
}

.report-sample-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.report-sample-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.report-sample-body strong,
.report-sample-body span {
    overflow-wrap: anywhere;
}

.report-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: var(--hairline);
    color: var(--text-tertiary);
}

@media (max-width: 719px) {
    .report-page {
        padding: 20px;
    }

    .report-hero,
    .report-station {
        grid-template-columns: 1fr;
    }

    .report-hero-photo {
        min-height: 260px;
    }

    .report-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-insights {
        grid-template-columns: 1fr;
    }

    .report-station > :not(.report-station-photo) {
        grid-column: 1;
    }

    .report-station-photo {
        grid-row: auto;
        height: 220px;
    }
}

@media (min-width: 720px) {
    .report-view {
        padding-right: max(48px, calc((100vw - 760px) / 2));
        padding-left: max(48px, calc((100vw - 760px) / 2));
    }
}

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

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html,
    body {
        background: #fff;
        width: auto;
        height: auto;
    }

    body[data-report-output="pdf"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .field-os,
    .field-editorial,
    .field-menu,
    .note-sheet,
    .measurement-sheet,
    .trip-editor-sheet,
    .app-settings-sheet,
    .safety-guide-sheet,
    .station-editor-sheet,
    .sample-editor-sheet,
    .records-sheet,
    .smart-picker,
    .photo-viewer,
    .report-share-viewer,
    .editorial-nav,
    .report-actions {
        display: none !important;
    }

    .report-view,
    .report-page {
        position: static;
        display: block !important;
        min-height: auto;
        overflow: visible;
        background: #fff;
        color: #09101A;
        box-shadow: none;
        padding: 0;
    }

    body[data-report-output="pdf"] .report-page {
        background: #07111E;
        color: #FFFFFF;
        padding: 18mm;
    }

    body[data-report-output="pdf"] .report-header .text-callout,
    body[data-report-output="pdf"] .report-hero-content p,
    body[data-report-output="pdf"] .report-hero-meta span,
    body[data-report-output="pdf"] .report-insight p,
    body[data-report-output="pdf"] .report-station p,
    body[data-report-output="pdf"] .report-samples {
        color: rgba(255, 255, 255, 0.68);
    }

    body[data-report-output="pdf"] .report-stat,
    body[data-report-output="pdf"] .report-insight,
    body[data-report-output="pdf"] .report-station,
    body[data-report-output="pdf"] .report-hero-content {
        background: rgba(255, 255, 255, 0.07);
    }

    .report-view {
        inset: auto;
    }

    .report-page {
        border-radius: 0;
        width: 100%;
    }

    .report-station {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-station-photo {
        height: 170px;
    }
}