:root {
    --pme-navy: #0b2a5b;
    --pme-teal: #008c95;
    --pme-bg: #f7f9fb;
    --pme-surface: #ffffff;
    --pme-soft: #eaf7f1;
    --pme-border: #d8e3ea;
    --pme-text: #1f2933;
    --pme-muted: #5b6673;
    --pme-danger: #b3261e;
    --pme-warning: #b7791f;
    --pme-success: #2f7d32;
    --pme-shadow: 0 8px 24px rgba(11, 42, 91, 0.11);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--pme-text);
    background: var(--pme-bg);
}
a { color: var(--pme-teal); font-weight: 700; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.65; }
:focus-visible { outline: 3px solid rgba(0, 140, 149, 0.45); outline-offset: 2px; }
.pme-shell { min-height: 100vh; display: flex; flex-direction: column; }
.pme-header { background: var(--pme-navy); color: #fff; }
.pme-header-inner { max-width: 1180px; margin: 0 auto; padding: 0.85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.pme-brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 800; font-size: 1.18rem; }
.pme-mark {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background-color: transparent;
  background-image: url('/assets/img/approved-art/pme-brand-mark-option1.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
  flex: 0 0 auto;
}
.pme-nav { display: flex; align-items: center; gap: 1rem; }
.pme-nav a, .pme-nav button { color: #fff; background: transparent; border: 0; text-decoration: none; font-weight: 700; padding: .35rem .2rem; }
.pme-menu-button { display: none; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; padding: .45rem .65rem; }
.pme-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.pme-footer { background: var(--pme-navy); color: #fff; font-size: .85rem; }
.pme-footer-inner { max-width: 1180px; margin: 0 auto; padding: .8rem 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pme-footer a { color: #fff; margin-left: 1rem; }
.pme-page-title { margin: 0 0 1.1rem; font-size: clamp(1.8rem, 2.6vw, 2.65rem); line-height: 1.1; color: var(--pme-navy); }
.pme-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 1.5rem; align-items: stretch; }
.pme-grid-narrow { max-width: 860px; margin: 0 auto; }
.pme-card { background: var(--pme-surface); border: 1px solid var(--pme-border); border-radius: 16px; padding: 1.4rem; box-shadow: var(--pme-shadow); }
.pme-card h2, .pme-card h3 { color: var(--pme-navy); margin-top: 0; }
.pme-hero { background: #fff; border: 1px solid var(--pme-border); border-radius: 18px; padding: 1.1rem; box-shadow: var(--pme-shadow); }
.pme-form { display: grid; gap: 1rem; }
.pme-field { display: grid; gap: .35rem; }
.pme-field label { font-weight: 800; color: var(--pme-navy); }
.pme-field input, .pme-field select, .pme-field textarea { width: 100%; border: 1px solid var(--pme-border); border-radius: 10px; padding: .75rem .85rem; background: #fff; }
.pme-field-error { color: var(--pme-danger); font-weight: 700; font-size: .92rem; min-height: 1.2em; }
.pme-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.pme-button { border: 0; border-radius: 10px; padding: .75rem 1.1rem; font-weight: 800; background: var(--pme-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; min-height: 44px; }
.pme-button-primary { background: var(--pme-navy); }
.pme-button-danger { background: var(--pme-danger); }
.pme-button-secondary { background: #fff; color: var(--pme-navy); border: 1px solid var(--pme-navy); }
.pme-button-full { width: 100%; }
.pme-link-button { background: transparent; color: var(--pme-teal); border: 0; font-weight: 800; padding: .25rem; }
.pme-notice { border-radius: 12px; padding: .9rem 1rem; margin: 1rem 0; border: 1px solid var(--pme-border); background: #fff; }
.pme-notice-error { border-color: #f0b8b4; background: #fff2f1; color: #76110c; }
.pme-notice-warning { border-color: #ebcb8c; background: #fff8e8; color: #5e3b00; }
.pme-notice-success { border-color: #bbd8bd; background: #f1f8f1; color: #164817; }
.pme-muted { color: var(--pme-muted); }
.pme-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pme-product { text-align: center; padding: 1.25rem; border: 1px solid var(--pme-border); border-radius: 16px; background: #fff; }
.pme-product strong { display: block; font-size: 1.25rem; color: var(--pme-navy); margin-bottom: .5rem; }
.pme-product .price { font-size: 2rem; font-weight: 900; color: var(--pme-text); margin: .5rem 0; }
.pme-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--pme-border); }
.pme-table th, .pme-table td { text-align: left; padding: .8rem; border-bottom: 1px solid var(--pme-border); }
.pme-table th { color: var(--pme-navy); background: #f7fbfc; }
.pme-result-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.pme-status-list { display: grid; gap: 1rem; }
.pme-error-card { border-radius: 12px; border: 1px solid var(--pme-border); padding: 1rem; background: #fff; }
.pme-error-card.danger { border-color: var(--pme-danger); background: #fff2f1; }
.pme-error-card.warning { border-color: var(--pme-warning); background: #fff8e8; }
.pme-error-card.info { border-color: var(--pme-teal); background: #eefbfc; }
.pme-progress { width: 140px; height: 140px; border-radius: 50%; margin: 1rem auto; border: 14px solid #dcebed; border-top-color: var(--pme-teal); display: grid; place-items: center; font-weight: 900; font-size: 1.05rem; color: var(--pme-navy); }
.pme-progress span { display: block; text-align: center; }
.pme-hidden { display: none !important; }
.pme-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; }
.pme-noscript { padding: 2rem; max-width: 680px; margin: 3rem auto; background: white; border: 1px solid var(--pme-border); border-radius: 14px; }
@media (max-width: 900px) {
    .pme-grid { grid-template-columns: 1fr; }
    .pme-product-grid { grid-template-columns: 1fr; }
    .pme-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; padding-top: .75rem; }
    .pme-nav[data-open="true"] { display: flex; }
    .pme-menu-button { display: inline-flex; }
    .pme-header-inner { flex-wrap: wrap; }
}
@media (max-width: 600px) {
    .pme-main { padding: 1rem .75rem 2rem; }
    .pme-card, .pme-hero { padding: 1rem; }
    .pme-table, .pme-table thead, .pme-table tbody, .pme-table tr, .pme-table th, .pme-table td { display: block; }
    .pme-table th { display: none; }
    .pme-table td { border-bottom: 0; }
    .pme-table tr { border-bottom: 1px solid var(--pme-border); padding: .5rem 0; }
}
/* v0.15: approved visual assets from working pics v10. Controls remain real HTML/DOM elements. */
.pme-approved-art-card {
    margin: 0;
    border-radius: 16px;
    border: 1px solid #c7dfea;
    background: linear-gradient(180deg, #dff4fb, #e9f5e9 65%, #c5dfb6);
    overflow: hidden;
    box-shadow: var(--pme-shadow);
}
.pme-approved-art {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: contain;
    background: #eef8fb;
}
.pme-approved-art-card figcaption {
    margin: .45rem .75rem .75rem;
    padding: .35rem .5rem;
    border: 1px solid var(--pme-border);
    border-radius: 10px;
    background: rgba(255,255,255,.96);
    text-align: center;
    color: var(--pme-navy);
    font-weight: 800;
    font-size: .9rem;
}
.pme-upload-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1rem 0; }
.pme-drop-zone { border: 2px dashed var(--pme-border); border-radius: 16px; padding: 1.5rem; text-align: center; background: #fbfdfe; }
.pme-drop-zone[data-dragging="true"] { border-color: var(--pme-teal); background: #eefbfc; }
.pme-policy-check { display: flex; gap: .65rem; align-items: flex-start; margin: 1rem 0; }
.pme-policy-check input { margin-top: .25rem; width: 18px; height: 18px; }
.pme-token-safe-note { color: var(--pme-muted); font-size: .95rem; }
@media (max-width: 600px) {
    .pme-approved-art { max-height: 420px; }
    .pme-upload-actions { grid-template-columns: 1fr; }
}
/* v0.15: approved visual assets from working pics v10.docx only. Controls remain real HTML/DOM elements. */
.pme-result-card { max-width: 940px; }
.pme-result-section { border-top: 1px solid var(--pme-border); padding-top: 1rem; margin-top: 1rem; }
.pme-result-section h3 { margin-bottom: .45rem; }
.pme-json-nested { display: grid; gap: .4rem; }
/* v0.15 fixes: approved art is decorative only; approved art contains animal/photo regions only; labels and controls remain real DOM. */
.pme-approved-art-card figcaption { display: none !important; }
.pme-dashboard-history-card {
    border-top: 1px solid var(--pme-border);
    margin-top: 1.25rem;
    padding-top: 1rem;
}

/* v0.15: Phase 7 policy pages use the shared stylesheet; no inline policy CSS. */
.pme-policy-header { background: #fff; border-bottom: 1px solid var(--pme-border); }
.pme-wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
.pme-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; }
.pme-toplinks a { color: var(--pme-navy); font-weight: 700; margin-left: 18px; text-decoration: none; }
.pme-policy-hero { background: linear-gradient(180deg,#fff 0%,#F7FBFC 100%); padding: 34px 0; }
.pme-policy-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,480px); gap: 34px; align-items: start; }
.pme-policy-card { background: var(--pme-surface); border: 1px solid var(--pme-border); border-radius: 18px; padding: 30px; box-shadow: 0 10px 28px rgba(11,42,91,.06); line-height: 1.6; }
.pme-policy-card h1 { font-size: 2.35rem; line-height: 1.15; color: var(--pme-navy); margin: 0 0 12px; }
.pme-policy-card h2 { font-size: 1.35rem; color: var(--pme-navy); margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--pme-border); }
.pme-policy-card h3 { font-size: 1.08rem; color: var(--pme-navy); margin: 22px 0 8px; }
.pme-policy-card p, .pme-policy-card ul { margin: 0 0 14px; }
.pme-policy-card ul { padding-left: 24px; }
.pme-policy-updated { display: inline-block; background: var(--pme-soft); border: 1px solid #BFE3DA; border-radius: 999px; color: var(--pme-navy); font-weight: 700; padding: 8px 13px; margin: 0 0 16px; }
.pme-policy-callout, .pme-policy-info, .pme-policy-danger { border-radius: 14px; padding: 16px 18px; margin: 16px 0; border: 1px solid var(--pme-border); background: #fff; }
.pme-policy-callout { border-left: 6px solid var(--pme-warning); background: #FFF8E8; }
.pme-policy-info { border-left: 6px solid var(--pme-teal); background: #EFFBFC; }
.pme-policy-danger { border-left: 6px solid var(--pme-danger); background: #FDECEC; }
.pme-policy-mini { border: 1px solid var(--pme-border); border-radius: 14px; padding: 14px; background: #FBFCFE; }
.pme-policy-inner-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; }
.pme-policy-art { border-radius: 18px; border: 1px solid #BFE3DA; background: var(--pme-soft); padding: 12px; position: sticky; top: 20px; }
.pme-policy-art img { display: block; width: 100%; border-radius: 12px; }
@media(max-width:850px){ .pme-policy-grid{grid-template-columns:1fr}.pme-policy-art{position:static}.pme-policy-card h1{font-size:1.85rem}.pme-footer .pme-wrap{display:block}.pme-footer a{display:inline-block;margin:8px 12px 0 0} }

/* v0.15 policy-page brand visibility and policy-copy source note. */
.pme-policy-header .pme-brand { color: var(--pme-navy); }


/* Phase 7 Step 7.2B v0.03: server-truth Stripe billing front-end states. */
.pme-billing-card { max-width: 100%; }
.pme-billing-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin: 1rem 0; }
.pme-billing-summary div { border: 1px solid var(--pme-border); border-radius: 14px; background: #fbfdfe; padding: .9rem; }
.pme-billing-summary span { display: block; color: var(--pme-muted); font-weight: 700; font-size: .88rem; }
.pme-billing-summary strong { display: block; margin-top: .25rem; color: var(--pme-navy); font-size: 1.25rem; }
.pme-pending-checkouts { margin: 1rem 0; border: 1px solid #ebcb8c; background: #fff8e8; border-radius: 14px; padding: 1rem; }
.pme-pending-checkout { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(183,121,31,.28); padding-top: .85rem; margin-top: .85rem; }
.pme-pending-checkout:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.pme-table-wrap { width: 100%; overflow-x: auto; }
.pme-purchase-table td, .pme-purchase-table th { white-space: nowrap; }
@media (max-width: 900px) {
    .pme-billing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .pme-billing-summary { grid-template-columns: 1fr; }
    .pme-pending-checkout { display: block; }
    .pme-pending-checkout .pme-button { margin-top: .75rem; width: 100%; }
    .pme-purchase-table td, .pme-purchase-table th { white-space: normal; }
}


/* Phase 7 Step 7.7B-04 billing summary clarity v0.01 */
.pme-available-credit-summary { grid-template-columns: minmax(0, 1fr); }
.pme-available-credit-summary .pme-available-credit-main { max-width: 22rem; }
.pme-available-credit-summary small { display: block; margin-top: .2rem; color: var(--pme-muted); font-weight: 700; }
.pme-available-credit-summary .pme-muted { margin: .1rem 0 0; }


/* Phase 7 Step 7.7B-04 dashboard available credit summary v0.02 */
.pme-dashboard-credit-summary {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--pme-border);
    border-radius: .75rem;
    background: #f7fbff;
}
.pme-dashboard-credit-summary strong { color: var(--pme-navy); }
.pme-dashboard-credit-summary span:not(.pme-muted) { font-size: 1.2rem; font-weight: 900; color: var(--pme-navy); }


/* Phase 7 Step 7.7B-07: login password visibility toggle. */
.pme-password-input-wrap {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}
.pme-password-input-wrap input {
    flex: 1 1 auto;
    min-width: 0;
}
/* Hide native browser reveal/clear controls where PetMedEval provides its own Show/Hide button. */
.pme-password-input-wrap input::-ms-reveal,
.pme-password-input-wrap input::-ms-clear {
    display: none;
}
.pme-password-toggle {
    flex: 0 0 auto;
    min-width: 5.25rem;
    border: 1px solid var(--pme-navy);
    border-radius: 10px;
    background: #fff;
    color: var(--pme-navy);
    font-weight: 800;
    cursor: pointer;
    padding: .55rem .7rem;
}
.pme-password-toggle:hover,
.pme-password-toggle:focus {
    outline: 3px solid rgba(10, 151, 160, .22);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .pme-password-toggle {
        min-width: 4.75rem;
    }
}


/* 7.7B-24/25: print-only report branding is hidden on screen. */
.pme-print-only { display: none; }


/* Phase 7 Step 7.7B-32 analysis spinner and submitted-item visibility v0.04 */
.pme-analysis-progress-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--pme-border);
    border-radius: 16px;
    background: #f7fbfc;
}
.pme-analysis-progress-card h3 {
    margin: 0 0 .35rem;
    color: var(--pme-navy);
}
.pme-analysis-progress-card p { margin: .25rem 0; }
.pme-spinner {
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    border: .28rem solid rgba(22, 99, 110, .18);
    border-top-color: var(--pme-teal);
    border-radius: 999px;
    animation: pme-spin .9s linear infinite;
    margin-top: .15rem;
}
.pme-drop-zone[data-busy="true"] { opacity: .75; }
@keyframes pme-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .pme-spinner {
        animation: none;
        border-color: var(--pme-teal);
    }
}

/* 7.7B-26: Buy More purchase history spans cleanly below shortened page art. */
.pme-buy-more-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
    gap: 1.5rem;
    align-items: start;
}
.pme-buy-more-main,
.pme-purchase-history-card {
    min-width: 0;
}
.pme-buy-more-art {
    min-width: 0;
}
.pme-buy-more-art .pme-approved-art-card {
    background: #fbfdfe;
}
.pme-buy-more-art .pme-approved-art {
    max-height: 260px;
    object-fit: contain;
    background: #fbfdfe;
}
.pme-purchase-history-card {
    grid-column: 1 / -1;
}
.pme-purchase-history-card .pme-table-wrap {
    width: 100%;
    overflow-x: auto;
}
.pme-purchase-history-card .pme-purchase-table {
    font-size: .94rem;
}
.pme-purchase-history-card .pme-purchase-table th,
.pme-purchase-history-card .pme-purchase-table td {
    padding: .65rem .55rem;
}
.pme-purchase-history-card .pme-purchase-table th,
.pme-purchase-history-card .pme-purchase-table td {
    white-space: normal;
}
@media (max-width: 900px) {
    .pme-buy-more-layout {
        grid-template-columns: 1fr;
    }
    .pme-buy-more-art .pme-approved-art {
        max-height: 300px;
    }
    .pme-purchase-history-card {
        grid-column: auto;
    }
}


/* 7.7B-26 v0.02: Buy More art card width cleanup.
   Keep the art above Purchase History, but avoid a wide empty bordered card around the portrait art. */
.pme-buy-more-art {
    justify-self: center;
    width: min(100%, 300px);
}
.pme-buy-more-art .pme-approved-art-card {
    width: 100%;
}
.pme-buy-more-art .pme-approved-art {
    width: 100%;
    height: auto;
    max-height: 340px;
    object-fit: contain;
}
@media (max-width: 900px) {
    .pme-buy-more-art {
        width: min(100%, 340px);
    }
}


/* Phase 12.5 v0.09: Buy More explicit page layout fix. */
.pme-buy-more-page {
    width: 100%;
    max-width: 980px;
    margin: 0;
}
.pme-buy-more-page .pme-buy-more-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px) 220px;
    gap: 1rem;
    align-items: start;
    justify-content: start;
    width: 100%;
}
.pme-buy-more-page .pme-buy-more-main {
    grid-column: 1;
    width: 100%;
    justify-self: start;
}
.pme-buy-more-page .pme-buy-more-art {
    grid-column: 2;
    grid-row: 1;
    width: 220px;
    max-width: 220px;
    justify-self: start;
}
.pme-buy-more-page .pme-buy-more-art .pme-approved-art {
    max-height: 190px;
}
.pme-buy-more-page .pme-purchase-history-card,
.pme-buy-more-layout > .pme-purchase-history-card {
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    justify-self: start;
}
.pme-buy-more-page .pme-product-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    gap: 1rem;
}
.pme-buy-more-page .pme-product .price {
    white-space: nowrap;
}
@media (max-width: 1000px) {
    .pme-buy-more-page {
        max-width: none;
    }
    .pme-buy-more-page .pme-buy-more-layout {
        grid-template-columns: minmax(0, 1fr);
    }
    .pme-buy-more-page .pme-buy-more-art {
        grid-column: 1;
        grid-row: auto;
        width: min(100%, 320px);
        max-width: 320px;
        justify-self: start;
    }
    .pme-buy-more-page .pme-purchase-history-card,
    .pme-buy-more-layout > .pme-purchase-history-card {
        grid-column: 1;
    }
}
@media (max-width: 700px) {
    .pme-buy-more-page .pme-product-grid {
        grid-template-columns: 1fr;
    }
}

/* Phase 12.6B v0.01: Policy header visual alignment. */
.pme-policy-header {
    background: var(--pme-navy);
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 2px 10px rgba(13,43,69,.16);
}
.pme-policy-header .pme-brand,
.pme-policy-header .pme-brand:visited,
.pme-policy-header .pme-toplinks a,
.pme-policy-header .pme-toplinks a:visited {
    color: #fff;
}
.pme-policy-header .pme-brand {
    text-decoration: none;
}
.pme-policy-header .pme-toplinks {
    color: #fff;
}
.pme-policy-header .pme-toplinks button,
.pme-policy-header .pme-link-button {
    color: #fff;
}
.pme-policy-header .pme-mark {
    box-shadow: none;
}


/* Landing-page brand mark below Get Started / Login buttons - v0.01 */
.pme-landing-brand-mark {
    margin: 1.25rem 0 0;
    width: 128px;
}
.pme-landing-brand-mark img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 600px) {
    .pme-landing-brand-mark {
        width: 104px;
    }
}