:root {
    --xlume-navy: #0b274c;
    --xlume-blue: #183f7d;
    --xlume-sky: #337fb4;
    --xlume-ink: #102c50;
    --xlume-muted: #60758e;
    --xlume-line: rgba(50, 126, 177, 0.25);
    --xlume-surface: rgba(255, 255, 255, 0.78);
}

.xlume-theme {
    min-height: 100vh;
    color: var(--xlume-ink);
    background: #f7fbff;
    font-family: Mulish, sans-serif;
}

.xlume-theme button,
.xlume-theme input,
.xlume-theme select,
.xlume-theme textarea { font-family: inherit; }
.xlume-theme * { font-family: Mulish, sans-serif !important; }

.xlume-header {
    min-height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    color: #fff;
    background: linear-gradient(105deg, var(--xlume-navy) 0%, #12366d 43%, var(--xlume-blue) 67%, var(--xlume-sky) 100%);
    box-shadow: 0 2px 10px rgba(8, 34, 70, 0.22);
}

.xlume-header > .rz-stack {
    width: 100%;
    min-height: 64px;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: max-content max-content 1fr max-content;
    align-items: center;
    column-gap: 1rem !important;
    padding: 0.5rem 2rem !important;
}

.xlume-header .xlume-tagline,
.xlume-header .xlume-tagline .rz-link-text {
    color: #fff !important;
    grid-column: 4;
    justify-self: end;
    margin-left: 0;
    font-size: 1rem;
    font-weight: 700;
    opacity: 0.94;
    text-decoration: none !important;
    text-align: center;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    white-space: nowrap;
}

.xlume-tagline-title {
    font-size: 1.25rem;
    line-height: 1.08;
}

.xlume-tagline-byline {
    font-size: .78rem;
    line-height: 1.08;
    opacity: .9;
}

.xlume-theme .xlume-product-image {
    width: 11em;
    height: 10em;
    object-fit: contain;
}

.xlume-theme dpp-container {
    min-height: calc(100vh - 64px);
    height: auto;
}

.xlume-theme dpp-background {
    top: 64px;
    height: calc(100vh - 64px);
    background:
        radial-gradient(circle at 90% 5%, rgba(51, 127, 180, 0.08), transparent 38%),
        radial-gradient(circle at 6% 88%, rgba(24, 63, 125, 0.05), transparent 36%),
        linear-gradient(145deg, #ffffff 0%, #f8fbfe 48%, #eef6fc 100%);
}

.xlume-theme dpp-main {
    margin-top: 2rem;
}

.xlume-theme dpp-card,
.xlume-theme dpp-main-menu {
    border: 1px solid rgba(255, 255, 255, 0.95);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(234, 244, 251, 0.72)) padding-box,
        linear-gradient(120deg, rgba(51, 127, 180, 0.4), rgba(11, 39, 76, 0.1)) border-box;
    box-shadow: 0 10px 30px rgba(16, 44, 80, 0.09);
    backdrop-filter: blur(12px);
}

.xlume-theme dpp-card {
    border-radius: 1.25rem;
}

.xlume-theme dpp-main-menu {
    border-radius: 2rem;
}

.xlume-theme dpp-field-label {
    color: var(--xlume-muted);
}

.xlume-theme dpp-field-value,
.xlume-theme dpp-card-title,
.xlume-theme dpp-main-title,
.xlume-theme dpp-main-subtitle,
.xlume-theme dpp-title,
.xlume-theme dpp-option-label {
    color: var(--xlume-ink);
}

.xlume-theme.theme-light dpp-tab-page-selected {
    color: #fff;
    background: linear-gradient(105deg, var(--xlume-blue), var(--xlume-sky));
    box-shadow: 0 5px 14px rgba(24, 63, 125, 0.22);
}

.xlume-theme.theme-light dpp-tab-page {
    color: var(--xlume-blue);
}

.xlume-theme a,
.xlume-theme a.externalLink {
    color: #236da3 !important;
}

.xlume-scanner-view { width: min(calc(100% - 1.5rem), 680px); margin: 1.25rem auto 2rem; }
.xlume-scanner-intro { margin-bottom: 1rem; text-align: center; }
.xlume-scanner-intro h1 { margin: .35rem 0 .4rem; font-size: clamp(1.6rem, 6vw, 2.2rem); color: var(--xlume-ink); }
.xlume-scanner-intro h1:focus { outline: none; }
.xlume-scanner-intro p { margin: auto; color: var(--xlume-muted); line-height: 1.45; }
.xlume-camera-card { padding: .8rem; border-radius: 1.5rem; background: rgba(255,255,255,.82); box-shadow: 0 12px 35px rgba(16,44,80,.13); }
.xlume-camera-frame { position: relative; width: 100%; max-height: 58vh; aspect-ratio: 4/5; overflow: hidden; border-radius: 1.1rem; background: #071a31; }
.xlume-camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.xlume-camera-shade { position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 37%, rgba(3,16,31,.55) 100%); pointer-events: none; }
.xlume-scan-corners { position: absolute; left: 15%; top: 18%; width: 70%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.88); border-radius: 1.1rem; box-shadow: 0 0 0 1px rgba(51,127,180,.7); pointer-events: none; }
.xlume-scan-line { position: absolute; left: 20%; right: 20%; top: 51%; height: 3px; background: linear-gradient(90deg,transparent,#62b8e2,#fff,#62b8e2,transparent); box-shadow: 0 0 12px #62b8e2; }
.camera-status { position: absolute; left: 50%; bottom: .75rem; transform: translateX(-50%); padding: .42rem .7rem; border-radius: 1rem; color: #fff; background: rgba(11,39,76,.8); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.camera-status.camera-error { background: rgba(118,42,51,.9); white-space: normal; }
.camera-retry { width: 100%; min-height: 44px; margin-top: .7rem; border: 1px solid var(--xlume-line); border-radius: 1rem; color: var(--xlume-blue); background: #eef7fc; font-weight: 800; }
.xlume-scan-error { margin-top: .75rem; padding: .7rem; border-radius: .8rem; color: #7b2530; background: #fff0f1; text-align: center; }
.xlume-default-passport { display: grid; gap: .55rem; margin-top: 1rem; color: var(--xlume-muted); text-align: center; }
.xlume-primary-action { min-height: 52px; border: 0; border-radius: 1.4rem; color: #fff; background: linear-gradient(105deg,var(--xlume-blue),var(--xlume-sky)); font-weight: 800; }
.xlume-web-passport { width: min(calc(100% - 1.5rem),1000px); max-width: calc(100vw - 1.5rem); margin: 1.25rem auto 2rem; overflow-x: clip; }
.xlume-back-to-scanner { margin-bottom: .75rem; border: 0; color: var(--xlume-blue); background: transparent; font-weight: 800; }
.xlume-dynamic-card { margin-bottom: 1rem; padding: 1.25rem; border-radius: 1.25rem; background: rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(16,44,80,.09); }
.xlume-product-card { display: flex; align-items: center; gap: 2rem; }
.xlume-product-card img { width: 176px; height: 160px; object-fit: contain; }
.xlume-dynamic-grid { min-width: 0; flex: 1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
.xlume-dynamic-field { min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.xlume-dynamic-field span { color: var(--xlume-muted); font-size: .78rem; }
.xlume-dynamic-field strong { overflow-wrap: anywhere; color: var(--xlume-ink); }
.xlume-google-map { width:100%; height:320px; margin-top:1rem; border:0; border-radius:1rem; }

@media screen and (min-width: 601px) {
    .xlume-scanner-view {
        margin-top: clamp(.75rem, 2vh, 1.25rem);
        margin-bottom: 1rem;
    }

    .xlume-scanner-intro {
        margin-bottom: clamp(.6rem, 1.5vh, 1rem);
    }

    .xlume-camera-card {
        width: min(100%, calc(100dvh - 20rem), 540px);
        box-sizing: border-box;
        margin-inline: auto;
    }

    .xlume-camera-frame {
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: 1 / 1;
    }
}

.xlume-theme .rz-datatable,
.xlume-theme .rz-data-grid,
.xlume-theme .rz-grid-table {
    --rz-grid-header-background-color: #e5f0f8;
    --rz-grid-header-color: var(--xlume-ink);
    --rz-grid-border: 1px solid var(--xlume-line);
}

.xlume-theme .chart-legend-rect,
.xlume-theme dpp-supplychain-event-first-item-bullet,
.xlume-theme dpp-supplychain-event-item-line-bullet,
.xlume-theme dpp-supplychain-event-last-item-line-bullet {
    background-color: var(--xlume-sky);
}

@media screen and (max-width: 600px) {
    .xlume-header {
        min-height: 58px;
    }

    .xlume-header > .rz-stack {
        position: relative;
        min-height: 58px;
        gap: clamp(0.35rem, 2vw, 0.7rem) !important;
        padding: 0.45rem 0.65rem !important;
    }

    .xlume-header img:first-of-type {
        width: clamp(26px, 8vw, 34px);
        height: clamp(26px, 8vw, 34px) !important;
        flex: 0 0 auto;
    }

    .xlume-header img:nth-of-type(2) {
        width: clamp(76px, 24vw, 112px);
        height: auto !important;
        flex: 0 1 auto;
    }

    .xlume-header .xlume-tagline {
        position: absolute;
        right: 0.65rem;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        min-width: 0;
        margin-left: 0;
        align-items: flex-end;
        text-align: right;
        font-size: clamp(0.5rem, 2.35vw, 0.75rem);
        line-height: 1.1;
    }

    .xlume-tagline-title { font-size: clamp(.7rem, 3vw, .95rem); }
    .xlume-tagline-byline { font-size: clamp(.55rem, 2.2vw, .7rem); }

    .xlume-theme dpp-container {
        min-height: calc(100vh - 58px);
    }
    .xlume-dynamic-grid { grid-template-columns:1fr; gap:.7rem; }
    .xlume-product-card { display:grid; grid-template-columns: 112px minmax(0,1fr); gap:.75rem; padding: .85rem; }
    .xlume-product-card img { width:112px; height:140px; }
}