:root {
    color-scheme: light;
    --ink: #14213d;
    --ink-strong: #0b1732;
    --muted: #5d6c84;
    --line: #d8e1ee;
    --line-strong: #bdcbe0;
    --surface: #ffffff;
    --wash: #f4f7fb;
    --wash-blue: #eef4ff;
    --rail: #101a32;
    --rail-2: #1b2a4d;
    --rail-muted: #afbdd6;
    --blue: #0b5bd3;
    --blue-dark: #084cae;
    --blue-soft: #e7f0ff;
    --mint: #d8f4e9;
    --green: #08795f;
    --amber: #9a6100;
    --danger: #b42318;
    --radius-sm: 12px;
    --radius: 20px;
    --shadow: 0 16px 40px rgba(16, 46, 91, .08);
    --shopify-font: Inter, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --button-blue-bg: #edf4ff;
    --button-blue-border: #bfd3ef;
    --button-blue-text: #0b4fa8;
    --button-neutral-bg: #f7f8fa;
    --button-neutral-border: #d7dce3;
    font-family: var(--shopify-font);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Task-led Shopify operational workspaces. These surfaces deliberately use
   one working table and one action area instead of nested feature-card grids. */
.operations-workspace {
    display: grid;
    gap: 24px;
}

.operations-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

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

.operations-metrics-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.operations-metrics > div {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--wash);
}

.operations-metrics strong {
    color: var(--ink-strong);
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1;
}

.operations-metrics span {
    color: var(--muted);
    font-size: .88rem;
}

.operations-split {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: 20px;
    align-items: start;
}

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

.operations-form,
.operations-table-wrap,
.operations-job {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.operations-form {
    display: grid;
    gap: 14px;
}

.operations-form h3,
.operations-table-wrap h3,
.operations-job h3 {
    margin: 0 0 10px;
    color: var(--ink-strong);
}

.operations-checks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 14px;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.operations-checks legend {
    padding: 0 5px;
    color: var(--ink-strong);
    font-weight: 750;
}

.operations-checks label {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    color: var(--ink);
    font-size: .9rem;
}

.operations-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 10px;
}

.operations-filter label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.operations-filter input,
.operations-job input[type="file"] {
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
}

.analytics-presets {
    display: flex;
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.analytics-presets button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid var(--button-blue-border);
    border-radius: 999px;
    background: #f4f8ff;
    color: var(--button-blue-text);
    cursor: pointer;
    font-size: .73rem;
    font-weight: 650;
    line-height: 1.15;
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}

.analytics-presets button:hover:not(:disabled),
.analytics-presets button[aria-pressed="true"] {
    border-color: var(--blue);
    background: #e2edff;
    color: #083f88;
    box-shadow: 0 1px 2px rgba(15, 73, 156, .08);
}

.analytics-presets button:disabled { cursor: wait; opacity: .55; }

.supplier-product-picker { position: relative; }
.supplier-product-picker .embedded-field { margin: 0; }
.supplier-product-results {
    position: absolute;
    z-index: 20;
    top: calc(100% - 24px);
    right: 0;
    left: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 34px rgba(13, 35, 74, .16);
}
.supplier-product-result {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
}
.supplier-product-result:last-child { border-bottom: 0; }
.supplier-product-result:hover,
.supplier-product-result.is-active { background: var(--blue-soft); }
.supplier-product-result strong { color: var(--ink-strong); }
.supplier-product-result span { color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.supplier-product-no-results { margin: 0; padding: 14px; color: var(--muted); }

.operations-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 14px;
    color: var(--muted);
    font-size: .84rem;
}
.operations-pagination > div { display: flex; gap: 8px; }
.operations-pagination .button { min-height: 32px; padding: 5px 10px; }

.operations-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.operations-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.operations-table th,
.operations-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.operations-table th {
    color: var(--muted);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.operations-table td {
    color: var(--ink);
}

.operations-empty {
    padding: 24px;
    border: 1px dashed var(--line-strong);
    border-radius: 10px;
    color: var(--muted);
    text-align: center;
}

.operations-job-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.operations-job {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.operations-job p {
    flex: 1;
    margin: 0;
    color: var(--muted);
}

.operations-job form {
    display: grid;
    width: 100%;
    gap: 10px;
}

@media (max-width: 1020px) {
    .operations-heading,
    .operations-split {
        grid-template-columns: 1fr;
    }

    .operations-heading {
        display: grid;
    }

    .operations-metrics,
    .operations-metrics-three,
    .operations-job-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operations-filter {
        justify-content: flex-start;
    }

    .analytics-presets { justify-content: flex-start; }
}

@media (max-width: 600px) {
    .operations-metrics,
    .operations-metrics-three,
    .operations-job-grid,
    .operations-checks {
        grid-template-columns: 1fr;
    }

    .operations-filter,
    .operations-filter label,
    .operations-filter input,
    .operations-filter .button {
        width: 100%;
    }

    .analytics-presets button { width: auto; }
    .operations-pagination { align-items: stretch; flex-direction: column; }
    .operations-pagination > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--wash);
    font-family: var(--shopify-font);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.shopify-app-page { overflow-x: hidden; }

[hidden] { display: none !important; }
a { color: inherit; }
button, select, input, textarea { font-family: var(--shopify-font); font-size: inherit; }
:focus-visible { outline: 2px solid #4589e6; outline-offset: 2px; }
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
}
.skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 20;
    background: var(--surface);
    color: var(--ink-strong);
    padding: 10px 14px;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.shopify-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 272px minmax(0, 1fr);
}
.shopify-rail {
    background: var(--rail);
    color: #fff;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: start;
}
.brand-mark {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    min-height: 44px;
}
.brand-mark img {
    display: block;
    width: 122px;
    height: auto;
    filter: brightness(0) invert(1);
}
.brand-context {
    display: block;
    max-width: 92px;
    color: var(--rail-muted);
    font-size: 11px;
    line-height: 1.25;
}
.rail-nav {
    display: grid;
    gap: 5px;
    margin-top: 48px;
}
.rail-link {
    color: var(--rail-muted);
    text-decoration: none;
    min-height: 46px;
    padding: 11px 13px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 750;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.rail-link:hover,
.rail-link:focus-visible,
.rail-link.is-active {
    background: var(--rail-2);
    color: #fff;
}
.rail-link:hover { transform: translateX(2px); }
.icon {
    width: 21px;
    height: 21px;
    flex: none;
    color: #9fc1ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rail-link.is-active .icon { color: #75a6ff; }
.rail-footer { margin-top: auto; padding-top: 36px; }
.rail-note { color: var(--rail-muted); font-size: 12px; max-width: 190px; margin: 0 0 18px; }
.rail-back { color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; }
.rail-back:hover, .rail-back:focus-visible { color: #9fc1ff; }

.shopify-main {
    max-width: 1360px;
    width: 100%;
    padding: 46px clamp(22px, 5vw, 76px) 78px;
    margin: 0 auto;
}
.page-header {
    display: flex;
    justify-content: space-between;
    gap: 42px;
    align-items: flex-end;
    border-bottom: 1px solid var(--line);
    padding-bottom: 38px;
    position: relative;
}
.page-header::before {
    content: "";
    position: absolute;
    inset: -46px -76px auto;
    height: 250px;
    background: radial-gradient(circle at 16% 0%, rgba(111, 168, 255, .18), transparent 62%);
    pointer-events: none;
    z-index: -1;
}
.eyebrow {
    color: var(--blue);
    font-size: 11px;
    letter-spacing: .14em;
    font-weight: 850;
    margin: 0 0 11px;
}
.page-header h1 {
    color: var(--ink-strong);
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1.04;
    letter-spacing: -.055em;
    max-width: 820px;
    margin: 0;
}
.title-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.shop-pill {
    margin-top: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(255,255,255,.76);
    color: var(--muted);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}
.lede { color: var(--muted); font-size: 18px; max-width: 780px; margin: 22px 0 0; }
.connection-state {
    min-width: 260px;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: var(--muted);
    font-size: 13px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.92);
    border-radius: 15px;
    padding: 15px 16px;
    box-shadow: 0 10px 24px rgba(17,45,86,.06);
}
.connection-label { display: block; color: var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 2px; }
.state-dot { width: 10px; height: 10px; border-radius: 50%; background: #f2b233; margin-top: 6px; flex: none; }

.direct-context { margin-top: 28px; }
.setup-panel {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(460px, 1.2fr);
    gap: 52px;
    padding: 48px 0 28px;
}
.section-heading h2, .surface-card h2, .workspace-panel h2 {
    color: var(--ink-strong);
    font-size: clamp(1.5rem, 2vw, 2.12rem);
    line-height: 1.1;
    letter-spacing: -.035em;
    margin: 0 0 11px;
}
.section-heading p:not(.eyebrow), .surface-card p, .workspace-panel p:not(.eyebrow) { color: var(--muted); margin: 0; }
.section-heading.compact { max-width: 430px; }
.setup-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.setup-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 16px 17px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.setup-item:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(17,55,104,.07); }
.setup-item.is-current { border-color: #94baf0; box-shadow: 0 12px 26px rgba(17,55,104,.09); }
.step-number { color: var(--blue); font-size: 12px; font-weight: 850; letter-spacing: .06em; }
.setup-item strong { display: block; color: var(--ink-strong); font-size: 14px; }
.setup-item span:not(.step-number):not(.step-status) { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.step-status { font-size: 12px; color: var(--muted); font-weight: 750; white-space: nowrap; }
.step-status.is-ready { color: var(--green); }
.step-status.is-error { color: var(--danger); }

.surface-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 19px 0; }
.surface-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 28px;
    box-shadow: 0 8px 24px rgba(16,46,91,.04);
}
.surface-card-wide { grid-column: 1 / -1; background: var(--wash-blue); border-color: #c8dcfa; }
.card-kicker { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: 11px; font-weight: 850; letter-spacing: .12em; margin-bottom: 15px; }
.card-icon {
    width: 30px;
    height: 30px;
    padding: 7px;
    border-radius: 9px;
    background: var(--blue-soft);
    color: var(--blue);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.surface-card p { max-width: 760px; }
.theme-setup-steps {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
    padding-left: 22px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}
.theme-setup-steps strong { color: var(--ink); }
.card-actions { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-top: 22px; }
.action-note { font-size: 12px; color: var(--muted); }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--shopify-font);
    box-shadow: 0 1px 2px rgba(20, 33, 61, .06);
    transition: background .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
}
.button:hover { box-shadow: 0 2px 5px rgba(20, 33, 61, .09); }
.button-compact {
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    line-height: 1.2;
}
.button:disabled {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}
.button-primary { background: var(--button-blue-bg); color: var(--button-blue-text); border-color: var(--button-blue-border); }
.button-primary:hover, .button-primary:focus-visible { background: #dfeaff; border-color: #94b7e7; color: #083f88; }
.button-secondary { background: var(--button-neutral-bg); color: #354052; border-color: var(--button-neutral-border); }
.button-secondary:hover, .button-secondary:focus-visible { background: #eef1f5; border-color: #b9c2ce; color: var(--ink-strong); }
.button-widget { background: #e7f6f0; color: #0b604f; border-color: #b8dfd1; }
.button-widget:hover, .button-widget:focus-visible { background: #d8eee6; border-color: #8fc9b5; color: #084c3f; }
.button-shopify { background: #f0edff; color: #4b35a6; border-color: #d4caf7; }
.button-shopify:hover, .button-shopify:focus-visible { background: #e5dfff; border-color: #b7a7ea; color: #3f2a91; }
.button-storefront { background: #e9f3fa; color: #174b72; border-color: #c4ddeb; }
.button-storefront:hover, .button-storefront:focus-visible { background: #dcecf6; border-color: #9ec8df; color: #103b5c; }
.button-public-passport { background: #f5ecfa; color: #71328f; border-color: #dec9e9; }
.button-public-passport:hover, .button-public-passport:focus-visible { background: #ecddf3; border-color: #caa9d9; color: #5d2678; }
.text-link { display: inline-flex; gap: 8px; margin-top: 21px; color: var(--blue); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.workspace-panel {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(440px, 1.2fr);
    gap: 52px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 30px;
    margin-top: 27px;
    box-shadow: 0 8px 24px rgba(16,46,91,.04);
}
.workspace-form { display: grid; gap: 16px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--wash);
    padding: 20px;
}
.choice-card strong { color: var(--ink-strong); font-size: 16px; }
.choice-card p { flex: 1; font-size: 13px; }
.choice-card-recommended {
    border-color: #8ab4ef;
    background: #f4f8ff;
    box-shadow: inset 0 0 0 1px rgba(22, 89, 181, .08);
}
.choice-label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    background: #dcecff;
    color: #174f99;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .055em;
}
.navigation-form { margin: 0; }
.account-check-button { grid-column: 1 / -1; justify-self: start; }
.choice-grid > .form-note { grid-column: 1 / -1; }
.plan-management {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(440px, 1.2fr);
    align-items: center;
    gap: 52px;
    margin-top: 16px;
    border-color: #b9cff0;
    background: var(--wash-blue);
}
.plan-management-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.plan-management-actions .action-note { max-width: 430px; }
.plan-verification-recovery {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid #c8d8ef;
    border-radius: 10px;
    background: rgba(255, 255, 255, .78);
    padding: 9px 11px;
}
.plan-verification-recovery[hidden] { display: none; }
.plan-verification-recovery span { flex: 1; min-width: 190px; color: var(--muted); font-size: 12px; }
.plan-verification-recovery span.is-error { color: var(--danger); }
.workspace-form label { display: grid; gap: 7px; color: var(--ink); font-weight: 750; font-size: 13px; }
.workspace-form select { min-height: 46px; border: 1px solid #b4c1d4; border-radius: 10px; background: #fff; color: var(--ink); padding: 9px 11px; }
.check-row { display: flex !important; grid-template: none !important; align-items: flex-start; gap: 10px; font-weight: 600 !important; }
.check-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.form-note { font-size: 12px !important; }
.form-note.is-error { color: var(--danger) !important; }
.import-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.import-summary span {
    border: 1px solid #bed5f7;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    padding: 8px 13px;
    font-size: 12px;
}
.import-summary strong { color: var(--ink-strong); }
.auth-note { margin: 22px 0 0; padding: 14px 16px; color: var(--ink); background: #fff9e9; border: 1px solid #f0d58a; border-radius: 12px; }
.auth-note a { color: var(--blue); font-weight: 750; }
.footnote { font-size: 12px; color: var(--muted); margin: 24px 0 0; max-width: 980px; }

.passport-workflow {
    margin-top: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 100% 0%, rgba(11, 91, 211, .1), transparent 32%),
        var(--surface);
}
.passport-workflow-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}
.passport-workflow-actions { flex: none; margin-top: 0; }
.passport-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
}
.passport-progress-item {
    display: grid;
    gap: 2px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid #cddbf0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .9);
    color: var(--muted);
    font-size: 12px;
}
.passport-progress-item.is-attention { border-color: #efd49a; background: #fffaf0; }
.passport-progress-item.is-ready { border-color: #b5dfd1; background: #f1fbf7; }
.passport-progress-value {
    color: var(--ink-strong);
    font-size: 25px;
    font-weight: 850;
    line-height: 1.1;
}
.passport-workflow-status { margin-top: 16px !important; }
.passport-product-list {
    display: grid;
    gap: 11px;
    margin-top: 18px;
}
.passport-product-row {
    min-width: 0;
    padding: 17px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 8px 20px rgba(16, 46, 91, .045);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.passport-product-row:hover {
    border-color: #b7c9e5;
    box-shadow: 0 12px 28px rgba(16, 46, 91, .08);
    transform: translateY(-1px);
}
.passport-product-row.is-published { border-color: #b9dece; }
.passport-product-overview {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}
.passport-product-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: linear-gradient(145deg, #e7f0ff, #d8f4e9);
    color: var(--blue-dark);
    font-size: 18px;
    font-weight: 900;
    overflow: hidden;
}
.passport-product-avatar img { width: 100%; height: 100%; object-fit: cover; }
.passport-product-identity { display: grid; gap: 2px; min-width: 0; }
.passport-product-identity strong {
    color: var(--ink-strong);
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.passport-product-meta { color: var(--muted); font-size: 11px; font-weight: 700; }
.passport-product-copy { color: var(--muted); font-size: 12px; line-height: 1.45; }
.passport-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}
.passport-status-chip.is-published { background: var(--mint); color: var(--green); }
.passport-status-chip.is-check,
.passport-status-chip.is-information,
.passport-status-chip.is-gaps,
.passport-status-chip.is-missing { background: #fff1cf; color: #805000; }
.passport-status-chip.is-ready { background: #e7f8ef; color: #08795f; }
.passport-product-details { width: 100%; }
.passport-product-details > summary {
    width: fit-content;
    margin: 12px 0 0 auto;
    list-style: none;
}
.passport-product-details > summary::-webkit-details-marker { display: none; }
.passport-product-details > summary::after { content: "\2193"; margin-left: 9px; }
.passport-product-details[open] > summary::after { content: "\2191"; }
.passport-product-details-body {
    display: grid;
    gap: 16px;
    margin-top: 16px;
    padding: 20px 0 0;
    border-top: 1px solid var(--line);
    background: transparent;
}
.passport-product-details-body > .card-actions { margin-top: 6px; }
.passport-review-intro {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 12px;
}
.passport-next-step {
    display: grid;
    justify-items: start;
    gap: 10px;
    padding: 24px;
    border: 1px solid #c9d9ef;
    border-radius: 15px;
    background: linear-gradient(145deg, #f8fbff, #f4f8ff);
}
.passport-next-step.is-complete {
    border-color: #b5dfd1;
    background: #f1fbf7;
}
.passport-step-label {
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.passport-step-title {
    color: var(--ink-strong);
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.25;
}
.passport-step-copy {
    max-width: 720px;
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 14px;
    line-height: 1.55;
}
.passport-human-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.passport-next-step > .button { margin-top: 8px; }
.button-quiet {
    border-color: #e0e4ea;
    background: #fafbfc;
    color: #536174;
    text-decoration: none;
}
.button-quiet:hover,
.button-quiet:focus-visible {
    border-color: #c5ced9;
    background: #f1f3f6;
    color: var(--ink-strong);
}
.passport-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 720px;
    margin-top: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.45;
    cursor: pointer;
}
.passport-confirmation input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--blue);
}
.passport-friendly-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 280px));
    gap: 12px;
    width: 100%;
    margin-top: 4px;
}
.passport-friendly-field {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-size: 12px;
    font-weight: 750;
}
.passport-friendly-field input,
.passport-friendly-field select {
    width: 100%;
    min-height: 46px;
    border: 1px solid #b4c4da;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    padding: 9px 11px;
}
.passport-market-note {
    display: inline-flex;
    width: fit-content;
    margin: 0 !important;
    border-radius: 999px;
    background: #fff;
    color: var(--muted) !important;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 750;
}
.passport-help-message {
    margin: 0 !important;
    border-radius: 11px;
    padding: 11px 13px;
    color: var(--ink) !important;
    background: var(--blue-soft);
    font-size: 13px;
}
.passport-help-message.is-warning { background: #fff6dc; color: #684400 !important; }
.passport-help-message.is-success { background: var(--mint); color: var(--green) !important; }
.passport-action-status {
    width: 100%;
    margin: 2px 0 0 !important;
    border-radius: 9px;
    background: var(--mint);
    color: var(--green) !important;
    padding: 9px 11px;
    font-size: 12px;
    font-weight: 750;
}
.passport-action-status.is-error { background: #fff0ed; color: #9a2f21 !important; }
.passport-draft-preview {
    display: grid;
    gap: 18px;
    min-width: 0;
    border: 1px solid #c7d8ee;
    border-radius: 15px;
    background: #fff;
    padding: 22px;
}
.passport-draft-heading {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.passport-draft-heading > div { display: grid; gap: 7px; min-width: 0; }
.passport-draft-heading h4 { margin: 0; color: var(--ink-strong); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; }
.passport-product-image {
    flex: none;
    width: 112px;
    height: 132px;
    border-radius: 12px;
    background: var(--wash);
    object-fit: cover;
}
.passport-source-note { max-width: 760px; margin: 0 !important; color: var(--muted) !important; font-size: 12px; line-height: 1.5; }
.passport-fact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--line);
}
.passport-fact-row { min-width: 0; background: var(--wash); padding: 11px 13px; }
.passport-fact-row dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.passport-fact-row dd { margin: 3px 0 0; color: var(--ink-strong); font-size: 13px; font-weight: 750; overflow-wrap: anywhere; }
.passport-description,
.passport-variants { border-top: 1px solid var(--line); padding-top: 13px; }
.passport-description > summary,
.passport-variants > summary { color: var(--ink-strong); cursor: pointer; font-size: 13px; font-weight: 850; }
.passport-description p { margin: 12px 0 0 !important; color: var(--ink) !important; font-size: 13px; line-height: 1.65; white-space: pre-line; }
.passport-variants ul { margin: 10px 0 0; padding-left: 20px; color: var(--ink); font-size: 12px; line-height: 1.6; }
.passport-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: var(--muted); font-size: 11px; }
.passport-tags span { border-radius: 999px; background: var(--blue-soft); color: var(--blue-dark); padding: 4px 8px; font-weight: 750; }
.passport-record-note { margin: 0 !important; color: var(--muted) !important; font-size: 10px; overflow-wrap: anywhere; }
.passport-gap-step { border-color: #e4c976; background: linear-gradient(145deg, #fffdf7, #fff8df); }
.passport-gap-list { display: grid; gap: 7px; margin: 2px 0; padding-left: 22px; color: var(--ink-strong); font-size: 13px; font-weight: 750; }
.passport-identifier-note,
.passport-ai-note { max-width: 760px; margin: 0 !important; color: var(--muted) !important; font-size: 12px; line-height: 1.55; }
.passport-identifier-note { border-left: 3px solid #d49b16; padding-left: 11px; color: #674700 !important; }
.passport-storefront-step { margin-top: 2px; }
.passport-technical-details {
    border-top: 1px solid var(--line);
    padding-top: 12px;
}
.passport-technical-details > summary {
    width: fit-content;
    color: var(--muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    list-style: none;
}
.passport-technical-details > summary::-webkit-details-marker { display: none; }
.passport-technical-details > summary::after { content: "+"; margin-left: 7px; color: var(--blue); }
.passport-technical-details[open] > summary::after { content: "\2212"; }
.passport-technical-details-body,
.passport-technical-record {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    border-radius: 10px;
    background: var(--wash);
    padding: 12px;
    color: var(--muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}
.advanced-workspace-tools {
    margin-top: 26px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--wash);
}
.advanced-workspace-tools > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 54px;
    padding: 12px 16px;
    color: var(--ink);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}
.advanced-workspace-tools > summary::-webkit-details-marker { display: none; }
.advanced-workspace-tools > summary::after { content: "+"; color: var(--blue); font-size: 20px; }
.advanced-workspace-tools[open] > summary::after { content: "\2212"; }
.advanced-workspace-tools > summary span {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.advanced-workspace-tools-body { padding: 0 18px 20px; }
.advanced-tools-intro { margin: 0 !important; font-size: 13px; }
.advanced-workspace-tools .embedded-experience-section:first-of-type { margin-top: 20px; }

.embedded-experience {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}
.embedded-experience > .section-heading { margin-bottom: 18px; }
.embedded-experience-section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.embedded-experience-section > h4,
.embedded-review-details > summary {
    color: var(--ink-strong);
    font-size: 16px;
    font-weight: 800;
}
.embedded-experience-section > h4 { margin: 0 0 14px; }
.embedded-experience-card { margin-top: 12px; }
.embedded-experience-card .choice-card {
    width: 100%;
    background: var(--surface);
}
.embedded-form-stack,
.embedded-selected-passport-tools,
.embedded-publication-selector,
.embedded-safety-preview,
.embedded-assistant-result,
.embedded-print-result {
    display: grid;
    gap: 12px;
    width: 100%;
}
.embedded-field {
    display: grid;
    gap: 7px;
    width: 100%;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
}
.embedded-field-label { display: block; }
.embedded-field input,
.embedded-field select,
.embedded-field textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #b4c1d4;
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    padding: 9px 11px;
    font: inherit;
}
.embedded-field textarea {
    min-height: 88px;
    resize: vertical;
    line-height: 1.45;
}
.embedded-field select[multiple] { min-height: 108px; }
.embedded-proposal {
    width: 100%;
    margin: 4px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--blue);
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.55;
}
.embedded-review-details {
    width: 100%;
    padding-top: 8px;
}
.embedded-review-details > summary {
    cursor: pointer;
    color: var(--blue);
}
.embedded-activity-list,
.embedded-citation-list,
.embedded-limitation-list {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}
.embedded-citation-list a { color: var(--blue); font-weight: 750; }
.embedded-publication-list {
    display: grid;
    gap: 9px;
    width: 100%;
}
.embedded-tool-grid { margin-top: 14px; }
.embedded-capability-grid { align-items: stretch; }
.embedded-capability-grid .choice-card { min-height: 130px; }
.embedded-plan-callout {
    width: 100%;
    border: 1px solid #b9cff0;
    border-radius: 12px;
    background: var(--wash-blue);
    padding: 14px;
}
.workspace-feedback-offer { margin-top: 18px; padding: 18px; }
.workspace-feedback-offer[hidden] { display: none; }
.workspace-feedback-offer .workspace-capability-form { max-width: 560px; }
.workspace-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 18px;
}
.workspace-capability-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    min-width: 0;
}
.workspace-capability-card > .form-note { flex: none; }
.workspace-capability-card h5 {
    margin: 0;
    color: var(--ink-strong);
    font-size: 16px;
}
.workspace-capability-form,
.workspace-capability-list {
    display: grid;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
}
.workspace-capability-form[hidden] { display: none; }
.workspace-capability-form-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.workspace-capability-item {
    display: grid;
    gap: 5px;
    min-width: 0;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    overflow-wrap: anywhere;
}
.workspace-capability-item > .form-note { margin: 0; }
.button-tertiary {
    border-color: #dbe4ef;
    background: #f8fbff;
    color: var(--button-blue-text);
}
.button-tertiary:hover,
.button-tertiary:focus-visible { background: #edf4ff; border-color: #bfd3ef; color: #083f88; }

.is-app-view-hidden { display: none !important; }

.feature-workspace { display: grid; gap: 28px; }
.feature-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
    gap: 24px;
    align-items: stretch;
    border: 1px solid #bed2f2;
    border-radius: 24px;
    background: linear-gradient(135deg, #f8fbff 0%, #edf5ff 60%, #f7fbff 100%);
    padding: 34px;
    box-shadow: var(--shadow);
}
.feature-hero h2 {
    max-width: 760px;
    margin: 8px 0 12px;
    color: var(--ink-strong);
    font-size: clamp(28px, 3.4vw, 48px);
    line-height: 1.04;
    letter-spacing: -.035em;
}
.feature-hero p:not(.eyebrow) { max-width: 760px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.feature-current-plan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    min-height: 180px;
    border: 1px solid #c9d9ee;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    padding: 24px;
}
.feature-current-plan strong { color: var(--ink-strong); font-size: 22px; }
.feature-current-plan > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.55; }
.feature-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.feature-section-heading h3 { margin: 5px 0 0; color: var(--ink-strong); font-size: clamp(24px, 2.5vw, 34px); line-height: 1.08; }
.feature-section-heading p:not(.eyebrow) { max-width: 760px; margin: 8px 0 0; color: var(--muted); }
.feature-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 260px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    padding: 22px;
    box-shadow: 0 12px 30px rgba(13, 35, 74, .06);
}
.feature-card.is-included { border-color: #9fc0ee; box-shadow: 0 14px 34px rgba(20, 91, 202, .1); }
.feature-card.is-locked { background: #fafbfd; }
.feature-card-topline, .feature-plan-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feature-state-badge, .feature-plan-current {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    background: #edf0f5;
    color: #5a6678;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.feature-state-badge.is-included, .feature-plan-current { background: #e8f7ef; color: #087847; }
.feature-plan-copy { color: var(--muted); font-size: 11px; font-weight: 750; }
.feature-card h4 { margin: 22px 0 9px; color: var(--ink-strong); font-size: 19px; line-height: 1.2; }
.feature-card p { flex: 1; margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.feature-card .button { align-self: flex-start; }
.feature-function-table {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(13, 35, 74, .06);
}
.feature-function-header,
.feature-function-row {
    display: grid;
    grid-template-columns: minmax(190px, 1.05fr) minmax(280px, 1.7fr) minmax(170px, .9fr) minmax(150px, .75fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}
.feature-function-header {
    border-bottom: 1px solid var(--line);
    background: #f3f7fd;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.feature-function-row { border-bottom: 1px solid var(--line); }
.feature-function-row:last-child { border-bottom: 0; }
.feature-function-row.is-included { background: #fbfdff; }
.feature-function-row.is-locked { background: #fafbfd; }
.feature-function-row > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.feature-function-name,
.feature-function-state { display: grid; gap: 6px; min-width: 0; }
.feature-function-name strong { color: var(--ink-strong); font-size: 15px; line-height: 1.3; }
.feature-function-group {
    color: var(--blue);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.feature-function-state { justify-items: start; }
.feature-function-row .button { width: 100%; min-width: 0; white-space: normal; }
.feature-tool-dialog {
    width: min(1120px, calc(100vw - 36px));
    max-width: none;
    max-height: min(880px, calc(100vh - 36px));
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #a9c2e6;
    border-radius: 22px;
    background: #fff;
    color: var(--ink);
    box-shadow: 0 28px 80px rgba(5, 22, 51, .28);
}
.feature-tool-dialog::backdrop { background: rgba(8, 18, 38, .58); backdrop-filter: blur(3px); }
.feature-tool-dialog-shell { max-height: inherit; overflow-y: auto; }
.feature-tool-dialog-header {
    position: sticky;
    z-index: 5;
    top: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--line);
    background: rgba(248, 251, 255, .97);
}
.feature-tool-dialog-header h3 { margin: 3px 0 4px; color: var(--ink-strong); font-size: 23px; }
.feature-tool-dialog-header p { margin: 0; color: var(--muted); }
.feature-tool-dialog-header .eyebrow { color: var(--blue); }
.feature-tool-dialog #tool-workspace-host { padding: 0 24px 24px; }
.feature-tool-dialog .advanced-workspace-tools {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
}
.feature-tool-dialog .advanced-workspace-tools > summary { display: none; }
.feature-tool-dialog .advanced-workspace-tools-body { padding: 0; }
.feature-tool-dialog .advanced-tools-intro { padding-top: 18px; }
.feature-tool-dialog-open { overflow: hidden; }
.feature-focus-hidden { display: none !important; }
.feature-tool-dialog[data-feature-action="translations"] #monster-passport-tools [data-tool-scope]:not([data-tool-scope="selector"]):not([data-tool-scope="translations"]),
.feature-tool-dialog[data-feature-action="qr"] #monster-passport-tools [data-tool-scope]:not([data-tool-scope="selector"]):not([data-tool-scope="qr"]),
.feature-tool-dialog[data-feature-action="assistants"] #monster-passport-tools [data-tool-scope]:not([data-tool-scope="selector"]):not([data-tool-scope="assistants"]) {
    display: none !important;
}
.start-card-action { width: fit-content; margin-top: 6px; text-decoration: none; }
.tool-workspace {
    display: grid;
    gap: 18px;
    border: 1px solid #bed2f2;
    border-radius: 22px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 180px);
    padding: 24px;
    box-shadow: var(--shadow);
}
.tool-workspace .advanced-workspace-tools { margin-top: 0; background: #fff; }
.plan-comparison {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
}
.plan-comparison > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    cursor: pointer;
    list-style: none;
    color: var(--ink-strong);
}
.plan-comparison > summary::-webkit-details-marker { display: none; }
.plan-comparison > summary::after { content: "+"; color: var(--blue); font-size: 24px; font-weight: 700; }
.plan-comparison[open] > summary::after { content: "\2212"; }
.plan-comparison > summary span { display: grid; gap: 4px; }
.plan-comparison > summary strong { font-size: 17px; }
.plan-comparison > summary small { color: var(--muted); font-size: 12px; font-weight: 500; }
.plan-comparison-body { display: grid; gap: 22px; border-top: 1px solid var(--line); padding: 24px; }
.plan-comparison-heading { margin-top: 10px; }
.plan-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.feature-plan-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    padding: 22px;
}
.feature-plan-card.is-current { border: 2px solid var(--blue); padding: 21px; box-shadow: 0 16px 36px rgba(20, 91, 202, .13); }
.feature-plan-title > div { display: grid; gap: 11px; }
.feature-plan-card h4 { margin: 0; color: var(--ink-strong); font-size: 22px; }
.feature-plan-price { display: flex; align-items: baseline; gap: 5px; margin: 22px 0 2px; color: var(--ink-strong); }
.feature-plan-price strong { font-size: 34px; line-height: 1; }
.feature-plan-price span, .feature-plan-yearly { color: var(--muted); font-size: 12px; }
.feature-plan-yearly { margin: 0 0 18px; }
.feature-plan-card ul { display: grid; gap: 9px; flex: 1; margin: 0 0 22px; padding: 0; list-style: none; }
.feature-plan-card li { position: relative; padding-left: 20px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.feature-plan-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--blue); font-weight: 900; }
.feature-plan-card .button { width: 100%; white-space: normal; }

.passport-product-grid-header,
.storefront-product-grid-header {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(130px, .85fr) minmax(145px, .9fr) minmax(125px, .8fr) minmax(145px, .9fr);
    gap: 18px;
    margin-top: 22px;
    padding: 0 18px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.passport-product-list { margin-top: 0; }
.passport-product-row {
    display: grid;
    gap: 0;
    padding: 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}
.passport-product-row:hover {
    border-color: var(--line);
    box-shadow: none;
    transform: none;
    background: #fbfdff;
}
.passport-product-overview {
    grid-template-columns: minmax(260px, 2fr) minmax(130px, .85fr) minmax(145px, .9fr) minmax(125px, .8fr) minmax(145px, .9fr);
    gap: 18px;
    min-height: 92px;
    padding: 16px 18px;
}
.passport-product-cell,
.storefront-product-cell {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.passport-grid-cell,
.storefront-state-cell {
    display: grid;
    align-content: center;
    gap: 4px;
    min-width: 0;
}
.passport-grid-cell strong,
.storefront-state-cell strong {
    color: var(--ink-strong);
    font-size: 13px;
}
.passport-grid-cell span,
.storefront-state-cell span {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}
.passport-grid-action {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
}
.passport-row-action { min-width: 92px; }
.passport-product-details { padding: 0 18px 18px; }
.passport-product-details[open] { background: #fbfdff; }
.passport-product-details-body { margin-top: 0; padding-top: 20px; }

.storefront-workspace {
    margin-top: 0;
    overflow: hidden;
    background: radial-gradient(circle at 100% 0%, rgba(35, 166, 125, .10), transparent 34%), var(--surface);
}
.storefront-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 26px;
}
.storefront-summary > div {
    display: grid;
    gap: 3px;
    min-height: 82px;
    padding: 15px 17px;
    border: 1px solid #cddbf0;
    border-radius: 14px;
    background: #fff;
}
.storefront-summary strong { color: var(--ink-strong); font-size: 25px; line-height: 1; }
.storefront-summary span { color: var(--muted); font-size: 12px; }
.storefront-truth-note {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    margin-top: 18px;
    border: 1px solid #efd49a;
    border-radius: 13px;
    background: #fffaf0;
    padding: 14px 16px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.5;
}
.storefront-truth-note strong { color: #684400; }
.storefront-product-list { display: grid; }
.storefront-product-row {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(130px, .85fr) minmax(145px, .9fr) minmax(125px, .8fr) minmax(145px, .9fr);
    align-items: center;
    gap: 18px;
    min-height: 92px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}
.storefront-product-row:hover { background: #fbfdff; }
.storefront-row-actions { display: grid; justify-items: start; gap: 8px; }
.storefront-row-actions .button { width: 100%; min-width: 0; padding-left: 12px; padding-right: 12px; }
.storefront-row-actions .text-link { font-size: 11px; }
.storefront-theme-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-top: 24px;
    border: 1px solid #b9cff0;
    border-radius: 14px;
    background: var(--wash-blue);
    padding: 18px;
}
.storefront-theme-actions > div:first-child { display: grid; gap: 4px; }
.storefront-theme-actions strong { color: var(--ink-strong); }
.storefront-theme-actions span { color: var(--muted); font-size: 12px; line-height: 1.45; }

.passport-bulk-bar {
    display: grid;
    grid-template-columns: minmax(190px, auto) 1fr;
    align-items: center;
    gap: 12px 22px;
    margin: 18px 0 22px;
    padding: 17px 18px;
    border: 1px solid #b9cff0;
    border-radius: 16px;
    background: linear-gradient(135deg, #f4f8ff, #edf5ff);
}
.passport-select-all,
.passport-card-selection { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-strong); font-weight: 750; }
.passport-select-all input,
.passport-card-selection input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); }
.passport-bulk-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.passport-selected-count { color: var(--muted); font-size: 12px; font-weight: 800; }
.passport-bulk-confirmation { grid-column: 1 / -1; margin: 0 !important; color: var(--muted) !important; font-size: 12px; }
.passport-bulk-bar > .action-note { grid-column: 1 / -1; margin: 0; }

.passport-product-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 0;
}
.passport-product-row {
    display: grid;
    align-content: start;
    gap: 0;
    min-width: 0;
    padding: 0;
    border: 1px solid #cbd9ed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 46, 91, .065);
    overflow: hidden;
}
.passport-product-row:hover { border-color: #9ebbe5; box-shadow: 0 14px 34px rgba(16, 46, 91, .10); transform: translateY(-1px); }
.passport-product-row.is-open { grid-column: 1 / -1; border-color: #86afea; transform: none; }
.passport-product-overview {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 16px;
    min-height: 100%;
    padding: 20px;
}
.passport-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.passport-card-selection { padding-top: 14px; }
.passport-card-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.passport-card-fact {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    padding: 11px;
    border-radius: 11px;
    background: #f6f9fd;
}
.passport-card-fact > span:first-child { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .045em; }
.passport-card-fact strong { color: var(--ink-strong); font-size: 12px; }
.passport-card-fact > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.35; }
.passport-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.passport-card-links { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.passport-card-links .button { flex: 0 1 auto; }
.passport-product-details { padding: 0 20px 20px; }
.passport-product-details[open] { background: #fbfdff; }
.passport-product-details-body { margin-top: 0; padding-top: 20px; }

.storefront-product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.storefront-product-row {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 16px;
    min-height: 0;
    padding: 20px;
    border: 1px solid #cbd9ed;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(16, 46, 91, .06);
}
.storefront-product-row:hover { border-color: #9ebbe5; background: #fff; }
.storefront-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.storefront-state-cell { padding: 11px; border-radius: 11px; background: #f6f9fd; }
.storefront-state-cell > span:first-child { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.storefront-row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
}
.storefront-row-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11.5px;
    white-space: normal;
    text-align: center;
}

.collection-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    align-items: end;
    gap: 10px;
    margin: 18px 0;
    padding: 14px;
    border: 1px solid #c7d8ef;
    border-radius: 14px;
    background: #f8fbff;
}
.collection-toolbar label { display: grid; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 800; }
.collection-toolbar input,
.table-search-heading input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #aebed7;
    border-radius: 10px;
    background: #fff;
    padding: 8px 12px;
    color: var(--ink);
    font: inherit;
}
.collection-toolbar input:focus,
.table-search-heading input:focus { outline: 3px solid rgba(20, 95, 216, .16); border-color: var(--blue); }
.collection-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 12px;
}
.collection-pagination > div { display: flex; gap: 8px; }
.table-search-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.table-search-heading h3 { margin: 0; }
.table-search-heading label { width: min(220px, 52%); }

.shopify-recovery-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 15% 5%, rgba(111, 168, 255, .22), transparent 42%),
        var(--wash);
}
.shopify-recovery-card {
    width: min(100%, 650px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: clamp(30px, 6vw, 58px);
    box-shadow: var(--shadow);
}
.shopify-recovery-logo {
    display: block;
    width: 150px;
    height: auto;
    margin-bottom: 38px;
}
.shopify-recovery-card h1 {
    color: var(--ink-strong);
    font-size: clamp(2rem, 5vw, 3.3rem);
    line-height: 1.05;
    letter-spacing: -.045em;
    margin: 0 0 18px;
}
.shopify-recovery-card > p:not(.eyebrow) {
    color: var(--muted);
    font-size: 17px;
    margin: 0;
}
.shopify-recovery-card .button { margin-top: 28px; }
.shopify-recovery-card > p.shopify-recovery-note {
    margin-top: 24px;
    font-size: 12px;
}

@media (max-width: 1020px) {
    .shopify-shell { display: block; }
    .shopify-rail { min-height: auto; padding: 16px 22px; display: block; position: static; }
    .brand-mark { justify-content: flex-start; }
    .rail-nav { display: flex; overflow-x: auto; margin-top: 16px; padding-bottom: 2px; scrollbar-width: thin; }
    .rail-link { white-space: nowrap; }
    .rail-footer { display: none; }
    .shopify-main { padding: 34px 22px 60px; }
    .page-header::before { inset: -34px -22px auto; }
    .page-header { display: block; }
    .connection-state { margin-top: 24px; max-width: 420px; }
    .setup-panel, .workspace-panel, .plan-management { display: block; }
    .passport-workflow-heading { display: block; }
    .passport-workflow-actions { margin-top: 20px; }
    .setup-list, .workspace-form, .choice-grid, .plan-management-actions { margin-top: 28px; }
    .passport-product-grid-header,
    .storefront-product-grid-header { display: none; }
    .passport-product-list,
    .storefront-product-list { grid-template-columns: 1fr; }
    .storefront-theme-actions { align-items: flex-start; flex-direction: column; }
    .feature-hero { grid-template-columns: 1fr; }
    .feature-card-grid, .plan-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .feature-function-header,
    .feature-function-row { grid-template-columns: minmax(180px, 1fr) minmax(250px, 1.5fr) minmax(160px, .8fr); }
    .feature-function-header > :last-child { display: none; }
    .feature-function-row .feature-action { grid-column: 3; }
}
@media (max-width: 600px) {
    .shopify-rail { padding-left: 16px; padding-right: 16px; }
    .shopify-main { padding-left: 16px; padding-right: 16px; }
    .page-header h1 { font-size: 2.45rem; }
    .lede { font-size: 16px; }
    .surface-grid { grid-template-columns: 1fr; }
    .surface-card-wide { grid-column: auto; }
    .surface-card, .workspace-panel { padding: 23px; }
    .setup-item { grid-template-columns: 36px minmax(0, 1fr); align-items: start; }
    .step-status { grid-column: 2; }
    .card-actions .button, .workspace-form .button, .plan-management-actions .button { width: 100%; white-space: normal; text-align: center; }
    .title-row { display: block; }
    .shop-pill { display: inline-block; margin-top: 15px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
    .connection-state { min-width: 0; }
    .choice-grid { grid-template-columns: 1fr; }
    .choice-grid > .form-note { grid-column: auto; }
    .choice-card .button { width: 100%; white-space: normal; text-align: center; }
    .passport-progress { grid-template-columns: 1fr; }
    .passport-progress-item { min-height: 68px; }
    .passport-bulk-bar { grid-template-columns: 1fr; }
    .passport-bulk-actions { justify-content: flex-start; }
    .passport-bulk-actions .button { width: 100%; white-space: normal; }
    .collection-toolbar { grid-template-columns: 1fr 1fr; }
    .collection-toolbar label { grid-column: 1 / -1; }
    .collection-toolbar .button { width: 100%; }
    .collection-pagination { align-items: stretch; flex-direction: column; }
    .collection-pagination > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .table-search-heading { align-items: stretch; flex-direction: column; }
    .table-search-heading label { width: 100%; }
    .passport-card-heading { grid-template-columns: auto minmax(0, 1fr); }
    .passport-status-chip { grid-column: 2; }
    .passport-card-facts,
    .storefront-state-grid { grid-template-columns: 1fr; }
    .passport-card-actions,
    .storefront-row-actions { align-items: stretch; flex-direction: column; }
    .storefront-row-actions { grid-template-columns: 1fr; }
    .passport-card-actions .button,
    .storefront-row-actions .button { width: 100%; }
    .passport-card-links { justify-content: flex-start; }
    .passport-product-avatar { width: 42px; height: 42px; }
    .passport-card-heading .passport-status-chip { grid-column: 2; justify-self: start; }
    .passport-product-details > summary { width: 100%; }
    .passport-product-details-body { padding: 15px 0 0; }
    .passport-next-step { padding: 18px; }
    .passport-friendly-fields { grid-template-columns: 1fr; }
    .passport-human-actions { width: 100%; }
    .passport-human-actions .button { width: 100%; white-space: normal; text-align: center; }
    .passport-draft-heading { display: grid; }
    .passport-product-image { width: 100%; height: min(320px, 65vw); }
    .passport-fact-list { grid-template-columns: 1fr; }
    .embedded-capability-grid,
    .embedded-tool-grid,
    .workspace-capability-grid,
    .workspace-capability-form-columns { grid-template-columns: 1fr; }
    .storefront-summary { grid-template-columns: 1fr; }
    .storefront-truth-note { grid-template-columns: 1fr; }
    .storefront-row-actions .button,
    .storefront-theme-actions .button { width: 100%; white-space: normal; text-align: center; }
    .feature-hero { padding: 23px; }
    .feature-section-heading { align-items: stretch; flex-direction: column; }
    .feature-card-grid, .plan-card-grid { grid-template-columns: 1fr; }
    .feature-function-header { display: none; }
    .feature-function-row { grid-template-columns: 1fr; gap: 11px; padding: 18px; }
    .feature-function-row .feature-action { grid-column: 1; }
    .tool-workspace, .plan-comparison-body { padding: 18px; }
    .feature-card { min-height: 0; }
    .feature-card .button { width: 100%; }
    .feature-tool-dialog { width: calc(100vw - 16px); max-height: calc(100vh - 16px); border-radius: 16px; }
    .feature-tool-dialog-header { align-items: stretch; flex-direction: column; padding: 18px; }
    .feature-tool-dialog-header .button { width: 100%; }
    .feature-tool-dialog #tool-workspace-host { padding: 0 16px 18px; }
}
.bulk-studio-setup { width: 100%; margin-top: 8px; border-top: 1px solid var(--line, #d7e0ee); }
.bulk-studio-setup > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 4px; color: var(--ink, #091a3a); font-weight: 750; cursor: pointer; }
.bulk-studio-setup > summary span { color: var(--muted, #66758f); font-size: .82rem; font-weight: 650; }
.bulk-studio-setup-body { display: grid; gap: 18px; padding: 16px 0 4px; }
.bulk-studio-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bulk-studio-step, .bulk-studio-run { border: 1px solid var(--line, #d7e0ee); border-radius: 18px; background: #fff; padding: 20px; }
.bulk-studio-step h3, .bulk-studio-run h3 { margin: 4px 0 14px; font-size: 1.05rem; }
.bulk-studio-fields, .bulk-studio-run-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.bulk-rule-conditions { display: grid; gap: 10px; margin: 12px 0; }
.bulk-rule-condition { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(110px, .65fr) minmax(150px, 1fr) auto; gap: 8px; align-items: end; }
.bulk-rule-condition .metafield-key { grid-column: 1 / -1; }
.bulk-studio-run { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(320px, 1.2fr); gap: 20px; background: linear-gradient(135deg, #f7faff, #eef5ff); }
.bulk-rule-preview { grid-column: 1 / -1; border-radius: 12px; background: #fff; padding: 14px 16px; color: var(--muted, #66758f); }
@media (max-width: 900px) {
    .bulk-studio-steps, .bulk-studio-run, .bulk-studio-fields, .bulk-studio-run-controls { grid-template-columns: 1fr; }
    .bulk-rule-condition { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .bulk-rule-condition { grid-template-columns: 1fr; }
    .bulk-rule-condition .metafield-key { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}