/* Pom Prap religious sites PM2.5 dashboard - schematic map first */
#pomprap-air {
    --pp-bg: #f5f8f7;
    --pp-card: #ffffff;
    --pp-text: #12302b;
    --pp-muted: #6e7f82;
    --pp-line: #dde8e4;
    --pp-green: #1f8a62;
    --pp-green-dark: #0f5d44;
    --pp-orange: #f7941d;
    --pp-shadow: 0 14px 38px rgba(13, 62, 54, .08);
    background: var(--pp-bg);
    padding: 52px 0 70px;
    color: var(--pp-text);
}
#pomprap-air * { box-sizing: border-box; }

.pp-hero-card,
.pp-summary-card,
.pp-card,
.pp-notice-card,
.pp-alert {
    border: 1px solid var(--pp-line);
    background: var(--pp-card);
    border-radius: 22px;
    box-shadow: var(--pp-shadow);
}

.pp-hero-card {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 28px;
    margin-bottom: 22px;
    background: radial-gradient(circle at top left, rgba(31, 138, 98, .16), transparent 34%), linear-gradient(135deg, #ffffff 0%, #f4fbf8 100%);
}
.pp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pp-green);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 8px;
}
.pp-kicker:before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--pp-orange);
    display: inline-block;
}
.pp-hero-text h2 {
    margin: 0 0 8px;
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 900;
    color: var(--pp-green-dark);
    line-height: 1.18;
}
.pp-hero-text p { margin: 0; color: var(--pp-muted); font-size: 17px; }
.pp-meta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pp-meta-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef7f2;
    color: #41645c;
    font-size: 14px;
}
.pp-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; min-width: 260px; }
.pp-btn {
    border: 1px solid var(--pp-line);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    font-family: inherit;
}
.pp-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13, 62, 54, .10); }
.pp-btn-primary { background: var(--pp-green); border-color: var(--pp-green); color: #fff; }
.pp-btn-light { background: #fff; color: var(--pp-green-dark); }
.pp-btn[disabled] { opacity: .6; cursor: wait; transform: none; }

.pp-alert { margin-bottom: 18px; padding: 14px 18px; color: #24413d; }
.pp-alert-info { background: #eef7f2; }
.pp-alert-warning { background: #fff8e7; border-color: #ffe2a9; }
.pp-alert-danger { background: #fff0ef; border-color: #ffc6c1; }

.pp-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.pp-summary-card { padding: 22px; min-height: 132px; }
.pp-summary-label { color: var(--pp-muted); font-size: 15px; margin-bottom: 6px; }
.pp-summary-value { font-size: clamp(28px, 3vw, 42px); font-weight: 900; line-height: 1.1; color: #122e78; }
.pp-status-text { font-size: clamp(24px, 2.5vw, 34px); }
.pp-summary-note { margin-top: 8px; color: var(--pp-muted); font-size: 13px; }

.pp-notice-card { padding: 15px 18px; margin-bottom: 18px; background: #fffdf5; border-color: #f5df9e; color: #61490f; }

.pp-main-grid { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; margin-bottom: 18px; }
.pp-map-card { padding: 22px; }
.pp-side-card { padding: 20px; }
.pp-card { padding: 18px; }
.pp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.pp-card-head.compact { margin-bottom: 10px; }
.pp-card-head h3 { margin: 0 0 3px; color: var(--pp-green-dark); font-size: 22px; font-weight: 900; }
.pp-card-head p { margin: 0; color: var(--pp-muted); font-size: 14px; }

.pp-map-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.pp-type-filter, .pp-map-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pp-chip {
    border: 1px solid var(--pp-line);
    background: #fff;
    color: #3f5853;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 800;
    cursor: pointer;
}
.pp-chip.active { color: #fff; background: var(--pp-green); border-color: var(--pp-green); }
.pp-chip-soft { background: #f6faf8; }

.pp-map-wrap-schematic {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--pp-line);
    background: #edf4ef;
}
.pp-schematic-map {
    width: 100%;
    min-height: 860px;
    position: relative;
}
.pp-schematic-map svg {
    width: 100%;
    height: auto;
    display: block;
}
.pp-map-wrap-schematic { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.pp-map-status {
    margin-top: 12px;
    color: #4f6662;
    font-size: 14px;
    background: #f2f7f4;
    border: 1px solid #dce7e2;
    border-radius: 14px;
    padding: 10px 14px;
}
.pp-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: #4f6662;
    font-size: 13px;
}
.pp-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pp-legend i { width: 14px; height: 14px; display: inline-block; border-radius: 999px; }
.pp-type-dot.temple { background: linear-gradient(135deg, #fefefe 0%, #ccd8d5 100%); border: 2px solid #2f587a; }
.pp-type-dot.shrine { background: linear-gradient(135deg, #fff6ed 0%, #f4c9aa 100%); border: 2px solid #8c4d1d; }

.pp-svg-bg { fill: #eef5f0; }
.pp-svg-grid line { stroke: #cad8d2; stroke-width: 1; }
.pp-svg-district { fill: rgba(230, 239, 234, .92); stroke: #aabdc0; stroke-width: 2.5; stroke-dasharray: 10 8; }
.pp-svg-road { stroke: rgba(110,124,120,.24); stroke-width: 5; stroke-linecap: round; }
.pp-svg-road.light { stroke-width: 3; opacity: .9; }
.pp-svg-label { fill: #6c8587; font-size: 30px; font-weight: 800; }
.pp-svg-boundary-label { fill: #809598; font-size: 20px; font-weight: 700; }
.pp-svg-station-line { stroke: #93a8aa; stroke-width: 2; stroke-dasharray: 6 6; opacity: .5; }
.pp-svg-station-dot { fill: #6f8084; opacity: .55; }
.pp-svg-site { cursor: pointer; }
.pp-svg-site .pin-shadow { fill: rgba(0,0,0,.12); }
.pp-svg-site .pin-roof { stroke: rgba(255,255,255,.9); stroke-width: 1.5; }
.pp-svg-site .pin-base { stroke: rgba(255,255,255,.95); stroke-width: 1.6; }
.pp-svg-site .pin-mark { fill: #ffffff; font-size: 12px; font-weight: 900; text-anchor: middle; }
.pp-svg-site .pp-site-label {
    fill: #4e6264;
    font-size: 17px;
    font-weight: 800;
    paint-order: stroke;
    stroke: rgba(255,255,255,.92);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.pp-svg-site.selected .pp-site-label { fill: #1d2f37; font-size: 19px; }
.pp-svg-site.selected .pin-roof,
.pp-svg-site.selected .pin-base { filter: drop-shadow(0 3px 8px rgba(0,0,0,.28)); }
.pp-svg-site.dimmed { opacity: .28; }

.pp-selected-site { min-height: 210px; }
.pp-selected-card {
    border: 1px solid #dde8e4;
    background: #f9fcfa;
    border-radius: 18px;
    padding: 16px;
}
.pp-selected-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pp-selected-type {
    min-width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #17332e;
    border: 2px solid #cedbd7;
    background: #ffffff;
}
.pp-selected-type.temple { border-color: #40637f; }
.pp-selected-type.shrine { border-color: #9f6229; }
.pp-selected-title { font-size: 22px; font-weight: 900; color: var(--pp-green-dark); line-height: 1.25; }
.pp-selected-sub { font-size: 13px; color: var(--pp-muted); }
.pp-selected-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.pp-selected-item {
    border: 1px solid #dfebe6;
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
}
.pp-selected-item span { display: block; color: var(--pp-muted); font-size: 12px; margin-bottom: 4px; }
.pp-selected-item strong { color: #11322d; font-size: 16px; }
.pp-selected-note { margin-top: 10px; color: #4f6662; font-size: 13px; line-height: 1.5; }
.pp-selected-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.pp-top-list { display: flex; flex-direction: column; gap: 10px; }
.pp-top-item {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #dde8e4;
    border-radius: 14px;
    background: #fafdfb;
}
.pp-top-rank { width: 34px; height: 34px; border-radius: 999px; background: #eaf5ef; color: var(--pp-green-dark); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
.pp-top-name { font-weight: 800; color: #17342f; }
.pp-top-meta { font-size: 12px; color: var(--pp-muted); }
.pp-top-value { font-weight: 900; color: #122e78; font-size: 20px; }
.pp-empty { color: var(--pp-muted); font-size: 14px; }
.pp-sep { border: 0; border-top: 1px solid #e4efea; margin: 16px 0; }

.pp-filter-grid { display: grid; grid-template-columns: 1.35fr repeat(3, minmax(180px, .9fr)); gap: 12px; margin-bottom: 16px; }
.pp-input {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d9e6e1;
    border-radius: 16px;
    padding: 0 16px;
    font-size: 15px;
    color: #2b4742;
    background: #fff;
}
.pp-input:focus { outline: none; border-color: #94c3b3; box-shadow: 0 0 0 4px rgba(31,138,98,.08); }

.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; min-width: 920px; }
.pp-table th, .pp-table td { border-bottom: 1px solid #e5efeb; padding: 14px 12px; text-align: left; vertical-align: top; }
.pp-table th { color: #183731; font-size: 15px; background: #f7fbf9; }
.pp-table td { color: #27423e; font-size: 14px; }
.pp-empty-cell { text-align: center !important; color: var(--pp-muted); }
.pp-site-name { font-weight: 900; color: #12332e; }
.pp-site-en { color: var(--pp-muted); font-size: 12px; margin-top: 3px; }
.pp-level-pill, .pp-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 5px 12px;
    border-radius: 999px;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
}
.pp-type-badge { background: #617d77; }

@media (max-width: 1199px) {
    .pp-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-main-grid { grid-template-columns: 1fr; }
    .pp-map-actions { align-items: flex-start; }
    .pp-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .pp-hero-card { flex-direction: column; align-items: flex-start; }
    .pp-hero-actions { justify-content: flex-start; min-width: 0; }
    .pp-summary-grid { grid-template-columns: 1fr; }
    .pp-filter-grid { grid-template-columns: 1fr; }
    .pp-card-head { flex-direction: column; }
    .pp-map-actions { width: 100%; }
    .pp-type-filter, .pp-map-tools { justify-content: flex-start; }
    .pp-selected-grid { grid-template-columns: 1fr; }
    .pp-schematic-map { min-height: 620px; }
}

@media print {
    .pp-btn, .pp-map-actions, .pp-filter-grid { display: none !important; }
    #pomprap-air { background: #fff; padding: 0; }
    .pp-card, .pp-summary-card, .pp-hero-card, .pp-notice-card { box-shadow: none; }
}


/* Big map balanced composition hotfix */
.pp-map-card-hero { padding: 22px; margin-bottom: 18px; }
.pp-map-head-large { margin-bottom: 16px; }
.pp-map-head-large h3 { font-size: 24px; }
.pp-map-head-large p { font-size: 15px; }
.pp-schematic-map { min-height: 920px; }
.pp-info-grid { display: grid; grid-template-columns: 1.15fr .95fr .9fr; gap: 18px; margin-bottom: 18px; }
.pp-info-card { padding: 18px; height: 100%; }
.pp-selected-site { min-height: 260px; }
.pp-top-list { min-height: 260px; }
.pp-card canvas#ppLevelChart { width: 100% !important; }
@media (max-width: 1399px) { .pp-schematic-map { min-height: 860px; } .pp-info-grid { grid-template-columns: 1fr 1fr; } .pp-info-grid .pp-info-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 991px) { .pp-schematic-map { min-height: 720px; } .pp-info-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .pp-schematic-map { min-height: 560px; } }


/* Compact blocks hotfix */
.pp-summary-grid { gap: 14px; }
.pp-summary-card { padding: 18px 20px; min-height: 112px; }
.pp-summary-label { font-size: 14px; margin-bottom: 4px; }
.pp-summary-value { font-size: clamp(24px, 2.2vw, 34px); }
.pp-summary-note { margin-top: 6px; font-size: 12px; }
.pp-notice-card { padding: 12px 16px; font-size: 14px; }
.pp-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
    align-items: stretch;
}
.pp-info-card {
    padding: 16px;
    min-height: 250px;
    max-height: 250px;
    overflow: hidden;
}
.pp-info-card .pp-card-head { margin-bottom: 10px; }
.pp-info-card .pp-card-head h3 { font-size: 20px; }
.pp-info-card .pp-card-head p { font-size: 13px; }
.pp-selected-site {
    min-height: auto;
    max-height: 198px;
    overflow: auto;
    padding-right: 4px;
}
.pp-selected-card { padding: 14px; border-radius: 16px; }
.pp-selected-head { margin-bottom: 8px; }
.pp-selected-type { min-width: 48px; height: 48px; border-radius: 14px; font-size: 13px; }
.pp-selected-title { font-size: 18px; }
.pp-selected-sub { font-size: 12px; }
.pp-selected-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.pp-selected-item { padding: 8px 10px; border-radius: 12px; }
.pp-selected-item span { font-size: 11px; margin-bottom: 2px; }
.pp-selected-item strong { font-size: 14px; line-height: 1.35; }
.pp-selected-note { margin-top: 8px; font-size: 12px; }
.pp-top-list {
    min-height: auto;
    max-height: 188px;
    overflow: auto;
    padding-right: 4px;
    gap: 8px;
}
.pp-top-item { padding: 8px 10px; grid-template-columns: 38px 1fr auto; }
.pp-top-rank { width: 30px; height: 30px; font-size: 13px; }
.pp-top-name { font-size: 14px; }
.pp-top-meta { font-size: 11px; }
.pp-top-value { font-size: 18px; }
.pp-info-card canvas#ppLevelChart { max-height: 188px !important; }
.pp-table-card { padding: 16px; }
.pp-table-card .pp-card-head { margin-bottom: 12px; }
.pp-filter-grid { gap: 10px; margin-bottom: 12px; }
.pp-input { min-height: 42px; border-radius: 14px; font-size: 14px; }
.pp-table th, .pp-table td { padding: 12px 10px; }
@media (max-width: 1399px) {
    .pp-info-grid { grid-template-columns: 1fr 1fr; }
    .pp-info-card:last-child { grid-column: 1 / -1; max-height: 280px; }
    .pp-selected-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991px) {
    .pp-info-grid { grid-template-columns: 1fr; }
    .pp-info-card { max-height: none; }
}
@media (max-width: 767px) {
    .pp-selected-grid { grid-template-columns: 1fr; }
    .pp-summary-card { min-height: auto; }
}


/* Professional popup hotfix */
.pp-popup-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}
.pp-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(11, 31, 27, .58);
    backdrop-filter: blur(4px);
}
.pp-popup-dialog {
    position: relative;
    width: min(760px, calc(100vw - 28px));
    max-height: calc(100vh - 42px);
    overflow: auto;
    margin: 24px auto;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
    border: 1px solid rgba(220, 232, 228, .95);
    border-radius: 26px;
    box-shadow: 0 28px 80px rgba(9, 38, 33, .28);
    padding: 24px;
}
.pp-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 1px solid #d8e5e1;
    background: #fff;
    color: #214741;
    border-radius: 999px;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
}
.pp-popup-close:hover { background: #f1f7f4; }
.pp-popup-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-right: 56px;
    margin-bottom: 14px;
}
.pp-popup-type {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef6f2;
    color: #286353;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 10px;
}
.pp-popup-title {
    margin: 0 0 4px;
    color: var(--pp-green-dark);
    font-size: 30px;
    line-height: 1.25;
    font-weight: 900;
}
.pp-popup-sub {
    color: var(--pp-muted);
    font-size: 14px;
}
.pp-popup-level-wrap { display: flex; align-items: flex-start; justify-content: flex-end; }
.pp-popup-level-wrap .pp-level-pill { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.pp-popup-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}
.pp-popup-metric {
    background: #fff;
    border: 1px solid #deebe6;
    border-radius: 18px;
    padding: 14px;
}
.pp-popup-metric span {
    display: block;
    color: var(--pp-muted);
    font-size: 12px;
    margin-bottom: 4px;
}
.pp-popup-metric strong {
    color: #12332e;
    font-size: 22px;
    line-height: 1.2;
}
.pp-popup-section {
    border-top: 1px solid #e4efea;
    padding-top: 16px;
}
.pp-popup-section h4 {
    margin: 0 0 10px;
    color: #214741;
    font-size: 18px;
    font-weight: 900;
}
.pp-popup-reference {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.pp-popup-ref-item {
    background: #fff;
    border: 1px solid #deebe6;
    border-radius: 16px;
    padding: 12px 14px;
}
.pp-popup-ref-item span {
    display: block;
    color: var(--pp-muted);
    font-size: 12px;
    margin-bottom: 4px;
}
.pp-popup-ref-item strong {
    color: #13352f;
    font-size: 15px;
    line-height: 1.45;
}
.pp-popup-note {
    margin-top: 14px;
    background: #fff8e9;
    border: 1px solid #f2dda2;
    border-radius: 16px;
    padding: 12px 14px;
    color: #684f16;
    font-size: 13px;
    line-height: 1.65;
}
.pp-popup-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}
body.pp-modal-open { overflow: hidden; }
@media (max-width: 991px) {
    .pp-popup-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-popup-reference { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .pp-popup-dialog { width: calc(100vw - 16px); margin: 8px auto; padding: 18px; border-radius: 22px; }
    .pp-popup-head { flex-direction: column; padding-right: 44px; }
    .pp-popup-title { font-size: 24px; }
    .pp-popup-metrics { grid-template-columns: 1fr 1fr; }
}


/* Marker colors + PM label hotfix */
.pp-type-dot.temple { background: #dbeafe; border: 2px solid #2563eb; }
.pp-type-dot.shrine { background: #ffedd5; border: 2px solid #d97706; }
.pp-svg-site .pin-shadow { fill: rgba(0,0,0,.16); }
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base { stroke: rgba(255,255,255,.96); stroke-width: 1.8; }
.pp-svg-site .pin-mark { fill: #ffffff; font-size: 13px; font-weight: 900; text-anchor: middle; }
.pp-svg-site .pp-site-label { font-size: 18px; }
.pp-svg-site.selected .pp-site-label { font-size: 20px; }
.pp-pm-badge-text {
    fill: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-anchor: middle;
    paint-order: stroke;
    stroke: rgba(0,0,0,.08);
    stroke-width: 1px;
}
.pp-svg-site.selected .pp-pm-badge { filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }


/* Clean BG + clearer PM marker hotfix */
.pp-svg-grid { display: none !important; }
.pp-svg-road { stroke: rgba(48, 68, 68, .30); stroke-width: 7; stroke-linecap: round; }
.pp-svg-road.light { display: none !important; }
.pp-road-main { stroke: rgba(54, 77, 76, .34); stroke-width: 8; }
.pp-svg-site .pp-level-ring {
    stroke-width: 4;
    opacity: .95;
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.14));
}
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base {
    stroke: rgba(255,255,255,.98);
    stroke-width: 2.1;
}
.pp-svg-site .pin-mark {
    font-size: 14px;
}
.pp-pm-badge {
    filter: drop-shadow(0 3px 7px rgba(0,0,0,.16));
    stroke: rgba(255,255,255,.95);
    stroke-width: 1.5;
}
.pp-pm-badge-text {
    font-size: 12px;
    letter-spacing: .01em;
}
.pp-svg-site.selected .pp-level-ring {
    stroke-width: 5.5;
    opacity: 1;
}


/* No dim on select + selected color hotfix */
.pp-svg-site.dimmed { opacity: 1 !important; }
.pp-svg-site { opacity: 1 !important; }
.pp-svg-site.selected .pin-roof,
.pp-svg-site.selected .pin-base {
    stroke: #fbbf24 !important;
    stroke-width: 3.2 !important;
    filter: drop-shadow(0 8px 16px rgba(17,24,39,.28));
}
.pp-svg-site.selected .pp-level-ring {
    stroke: #111827 !important;
    stroke-width: 6 !important;
    opacity: 1 !important;
}
.pp-svg-site.selected .pp-site-label {
    fill: #111827 !important;
    font-size: 21px !important;
}


/* Spread points full map hotfix */
.pp-schematic-map { min-height: 960px; }
.pp-svg-site .pin-mark { font-size: 15px; }
.pp-svg-site .pp-site-label { font-size: 19px; }
.pp-svg-site.selected .pp-site-label { font-size: 22px !important; }
.pp-pm-badge-text { font-size: 13px; }
.pp-svg-site .pp-level-ring { stroke-width: 4.5; }
@media (max-width: 1399px) { .pp-schematic-map { min-height: 900px; } }
@media (max-width: 991px) { .pp-schematic-map { min-height: 760px; } }
@media (max-width: 767px) { .pp-schematic-map { min-height: 600px; } }


/* Avoid overlap hotfix */
.pp-offset-line {
    stroke: rgba(35, 55, 55, .30);
    stroke-width: 1.5;
    stroke-dasharray: 4 5;
    pointer-events: none;
}
.pp-origin-dot {
    fill: rgba(35, 55, 55, .42);
    pointer-events: none;
}
.pp-svg-site { transition: opacity .18s ease; }


/* Map-feel background hotfix */
.pp-svg-bg { fill: #eef4ef; }
.pp-map-zone {
    stroke: rgba(133, 153, 151, .18);
    stroke-width: 1.5;
}
.pp-map-zone.zone-a { fill: rgba(214, 236, 224, .55); }
.pp-map-zone.zone-b { fill: rgba(244, 236, 205, .38); }
.pp-map-zone.zone-c { fill: rgba(226, 238, 232, .60); }
.pp-map-canal {
    fill: none;
    stroke: rgba(71, 153, 189, .30);
    stroke-width: 14;
    stroke-linecap: round;
}
.pp-map-canal.small {
    stroke-width: 8;
    opacity: .75;
}
.pp-map-minor-road {
    fill: none;
    stroke: rgba(104, 122, 121, .18);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 1 10;
}
.pp-map-area-label {
    fill: rgba(63, 82, 80, .35);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: .02em;
}
.pp-map-north circle {
    fill: rgba(255,255,255,.75);
    stroke: rgba(58, 81, 79, .25);
    stroke-width: 1.5;
}
.pp-map-north path {
    fill: rgba(41, 70, 65, .55);
}
.pp-map-north text {
    fill: rgba(41, 70, 65, .55);
    font-size: 20px;
    font-weight: 900;
    text-anchor: middle;
}
.pp-svg-district {
    fill: rgba(255,255,255,.16);
    stroke: rgba(55, 85, 83, .34);
    stroke-width: 3;
    stroke-dasharray: 12 8;
}
.pp-svg-road {
    stroke: rgba(44, 67, 66, .48);
    stroke-width: 9;
}
.pp-road-main {
    stroke: rgba(44, 67, 66, .48);
    stroke-width: 9;
}


/* Professional motion hotfix */
#pomprap-air .pp-hero-card,
#pomprap-air .pp-summary-card,
#pomprap-air .pp-notice-card,
#pomprap-air .pp-map-card-hero,
#pomprap-air .pp-info-card,
#pomprap-air .pp-table-card {
    opacity: 0;
    transform: translateY(18px);
}
#pomprap-air.pp-ready .pp-hero-card { animation: ppFadeUp .55s ease forwards; }
#pomprap-air.pp-ready .pp-summary-card:nth-child(1) { animation: ppFadeUp .55s .05s ease forwards; }
#pomprap-air.pp-ready .pp-summary-card:nth-child(2) { animation: ppFadeUp .55s .12s ease forwards; }
#pomprap-air.pp-ready .pp-summary-card:nth-child(3) { animation: ppFadeUp .55s .19s ease forwards; }
#pomprap-air.pp-ready .pp-summary-card:nth-child(4) { animation: ppFadeUp .55s .26s ease forwards; }
#pomprap-air.pp-ready .pp-notice-card { animation: ppFadeUp .55s .30s ease forwards; }
#pomprap-air.pp-ready .pp-map-card-hero { animation: ppFadeUp .65s .34s ease forwards; }
#pomprap-air.pp-ready .pp-info-card:nth-child(1) { animation: ppFadeUp .55s .42s ease forwards; }
#pomprap-air.pp-ready .pp-info-card:nth-child(2) { animation: ppFadeUp .55s .49s ease forwards; }
#pomprap-air.pp-ready .pp-info-card:nth-child(3) { animation: ppFadeUp .55s .56s ease forwards; }
#pomprap-air.pp-ready .pp-table-card { animation: ppFadeUp .55s .62s ease forwards; }

.pp-map-wrap-schematic { position: relative; overflow: hidden; }
.pp-map-wrap-schematic:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,.32) 50%, transparent 70%);
    transform: translateX(-115%);
    animation: ppSheen 2.4s .8s ease-out 1;
    pointer-events: none;
    z-index: 2;
}

.pp-map-zone, .pp-map-canal, .pp-map-minor-road, .pp-svg-road, .pp-svg-district, .pp-map-area-label, .pp-map-north {
    animation: ppMapReveal .9s ease both;
}
.pp-map-canal { animation-delay: .12s; }
.pp-map-minor-road { animation-delay: .18s; }
.pp-svg-road { animation-delay: .22s; }
.pp-svg-district { animation-delay: .28s; }
.pp-map-area-label, .pp-map-north { animation-delay: .38s; }

.pp-svg-site {
    transform-box: fill-box;
    transform-origin: center;
    animation: ppMarkerIn .45s cubic-bezier(.2,.8,.2,1) both;
    transition: transform .18s ease, filter .18s ease;
}
.pp-svg-site:nth-of-type(2n) { animation-delay: .04s; }
.pp-svg-site:nth-of-type(3n) { animation-delay: .08s; }
.pp-svg-site:nth-of-type(4n) { animation-delay: .12s; }
.pp-svg-site:hover { transform: translateY(-2px) scale(1.03); }
.pp-svg-site .pp-level-ring { animation: ppRingPulse 3.2s ease-in-out infinite; }
.pp-svg-site .pp-pm-badge { animation: ppBadgeFloat 4.2s ease-in-out infinite; }
.pp-svg-site .pin-shadow { animation: ppShadowPulse 3.2s ease-in-out infinite; }
.pp-svg-site.selected { animation-duration: .36s; }
.pp-svg-site.selected .pp-level-ring { animation: ppRingPulseSelected 2s ease-in-out infinite; }
.pp-svg-site.selected .pp-pm-badge { animation: ppBadgeFloatSelected 2.6s ease-in-out infinite; }
.pp-svg-site.selected .pin-roof,
.pp-svg-site.selected .pin-base { animation: ppSelectedGlow 1.8s ease-in-out infinite; }

.pp-popup-modal { opacity: 0; pointer-events: none; }
.pp-popup-modal.is-open { opacity: 1; pointer-events: auto; }
.pp-popup-backdrop { opacity: 0; transition: opacity .24s ease; }
.pp-popup-dialog { opacity: 0; transform: translateY(26px) scale(.96); transition: transform .28s cubic-bezier(.22,.9,.23,1), opacity .24s ease; }
.pp-popup-modal.is-open .pp-popup-backdrop { opacity: 1; }
.pp-popup-modal.is-open .pp-popup-dialog { opacity: 1; transform: translateY(0) scale(1); }
.pp-popup-metric, .pp-popup-ref-item { transition: transform .18s ease, box-shadow .18s ease; }
.pp-popup-metric:hover, .pp-popup-ref-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(9,38,33,.08); }

@keyframes ppFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ppMapReveal {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes ppMarkerIn {
    from { opacity: 0; transform: translateY(10px) scale(.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ppRingPulse {
    0%, 100% { opacity: .95; transform: scale(1); }
    50% { opacity: .68; transform: scale(1.055); }
}
@keyframes ppRingPulseSelected {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .72; transform: scale(1.09); }
}
@keyframes ppBadgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes ppBadgeFloatSelected {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@keyframes ppShadowPulse {
    0%, 100% { opacity: .16; }
    50% { opacity: .28; }
}
@keyframes ppSelectedGlow {
    0%, 100% { filter: drop-shadow(0 8px 16px rgba(17,24,39,.28)); }
    50% { filter: drop-shadow(0 12px 22px rgba(17,24,39,.34)); }
}
@keyframes ppSheen {
    0% { transform: translateX(-115%); }
    100% { transform: translateX(115%); }
}

@media (prefers-reduced-motion: reduce) {
    #pomprap-air .pp-hero-card,
    #pomprap-air .pp-summary-card,
    #pomprap-air .pp-notice-card,
    #pomprap-air .pp-map-card-hero,
    #pomprap-air .pp-info-card,
    #pomprap-air .pp-table-card {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
    .pp-map-wrap-schematic:before,
    .pp-map-zone, .pp-map-canal, .pp-map-minor-road, .pp-svg-road, .pp-svg-district, .pp-map-area-label, .pp-map-north,
    .pp-svg-site, .pp-svg-site .pp-level-ring, .pp-svg-site .pp-pm-badge, .pp-svg-site .pin-shadow,
    .pp-svg-site.selected .pin-roof, .pp-svg-site.selected .pin-base,
    .pp-popup-backdrop, .pp-popup-dialog {
        animation: none !important;
        transition: none !important;
    }
}


/* No ring animation hotfix */
.pp-svg-site .pp-level-ring,
.pp-svg-site.selected .pp-level-ring {
    animation: none !important;
    transform: none !important;
}
.pp-svg-site .pp-level-ring {
    opacity: .92;
}
.pp-svg-site.selected .pp-level-ring {
    opacity: 1 !important;
}


/* Marker popup above pin hotfix */
.pp-popup-modal { display: none !important; }
.pp-map-wrap-schematic { position: relative; }
.pp-marker-popup {
    position: absolute;
    z-index: 20;
    width: 320px;
    max-width: calc(100% - 24px);
    padding: 14px 14px 12px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(214,226,221,.98);
    border-radius: 18px;
    box-shadow: 0 18px 42px rgba(10, 37, 33, .20);
    transform: translate(-50%, calc(-100% - 18px)) scale(.96);
    transform-origin: center bottom;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(8px);
}
.pp-marker-popup.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, calc(-100% - 18px)) scale(1);
    transition: transform .22s cubic-bezier(.22,.9,.23,1), opacity .18s ease;
}
.pp-marker-popup.is-below {
    transform: translate(-50%, 18px) scale(.96);
    transform-origin: center top;
}
.pp-marker-popup.is-below.is-open {
    transform: translate(-50%, 18px) scale(1);
}
.pp-marker-popup-arrow {
    position: absolute;
    left: 50%;
    bottom: -10px;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,.98);
    border-right: 1px solid rgba(214,226,221,.98);
    border-bottom: 1px solid rgba(214,226,221,.98);
    transform: translateX(-50%) rotate(45deg);
}
.pp-marker-popup.is-below .pp-marker-popup-arrow {
    top: -10px;
    bottom: auto;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(214,226,221,.98);
    border-top: 1px solid rgba(214,226,221,.98);
}
.pp-marker-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid #deebe6;
    background: #fff;
    color: #274842;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.pp-marker-popup-type {
    display: inline-flex;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef7f2;
    color: #23614f;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 8px;
}
.pp-marker-popup-title {
    color: #153a33;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.35;
    padding-right: 28px;
    margin-bottom: 8px;
}
.pp-marker-popup-level { margin-bottom: 10px; }
.pp-marker-popup-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.pp-marker-popup-metrics .metric {
    border: 1px solid #e3eeea;
    background: #fbfdfc;
    border-radius: 12px;
    padding: 9px 10px;
}
.pp-marker-popup-metrics .metric span {
    display: block;
    color: #6a7f7a;
    font-size: 11px;
    margin-bottom: 3px;
}
.pp-marker-popup-metrics .metric strong {
    display: block;
    color: #193f38;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 800;
}
.pp-marker-popup-updated {
    margin-top: 10px;
    color: #6d817c;
    font-size: 11.5px;
}
@media (max-width: 767px) {
    .pp-marker-popup { width: min(290px, calc(100% - 14px)); padding: 12px 12px 10px; }
    .pp-marker-popup-title { font-size: 17px; }
    .pp-marker-popup-metrics { grid-template-columns: 1fr; }
}


/* Marker popup UX + no flicker hotfix */
.pp-marker-popup {
    transition: left .16s ease, top .16s ease, transform .22s cubic-bezier(.22,.9,.23,1), opacity .18s ease;
}
.pp-marker-popup-arrow {
    filter: drop-shadow(2px 2px 2px rgba(10,37,33,.08));
}
.pp-marker-popup:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -22px;
    width: 2px;
    height: 16px;
    transform: translateX(-50%);
    background: rgba(36, 62, 58, .28);
}
.pp-marker-popup.is-below:before {
    top: -22px;
    bottom: auto;
}
.pp-svg-site.selected {
    transform: translateY(-2px) scale(1.04);
}


/* Compass inside map hotfix */
.pp-map-north {
    opacity: .95;
}
.pp-map-north circle {
    fill: rgba(255,255,255,.88);
    stroke: rgba(58, 81, 79, .28);
    stroke-width: 1.4;
    filter: drop-shadow(0 6px 12px rgba(20, 45, 42, .10));
}
.pp-map-north path {
    fill: rgba(35, 62, 57, .70);
}
.pp-map-north text {
    fill: rgba(35, 62, 57, .70);
    font-size: 17px;
    font-weight: 900;
}


/* Full dashboard view hotfix */
body .breadcumb-wrapper {
    display: none !important;
}
#pomprap-air {
    padding: 14px 0 28px !important;
    min-height: 100vh;
}
#pomprap-air > .container {
    width: 100% !important;
    max-width: 1880px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
.pp-hero-card {
    padding: 16px 18px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
}
.pp-hero-text h2 {
    font-size: clamp(22px, 2.2vw, 32px) !important;
    margin-bottom: 4px !important;
}
.pp-hero-text p {
    font-size: 14px !important;
}
.pp-kicker {
    font-size: 11px !important;
    margin-bottom: 4px !important;
}
.pp-meta-row {
    margin-top: 8px !important;
    gap: 8px !important;
}
.pp-meta-row span {
    min-height: 28px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
}
.pp-hero-actions {
    min-width: auto !important;
}
.pp-btn {
    padding: 8px 13px !important;
    font-size: 13px !important;
}
.pp-alert,
.pp-notice-card {
    margin-bottom: 10px !important;
    padding: 10px 14px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}
.pp-summary-grid {
    gap: 10px !important;
    margin-bottom: 10px !important;
}
.pp-summary-card {
    padding: 12px 14px !important;
    min-height: 78px !important;
    border-radius: 16px !important;
}
.pp-summary-label {
    font-size: 13px !important;
    margin-bottom: 3px !important;
}
.pp-summary-value {
    font-size: clamp(22px, 2vw, 32px) !important;
}
.pp-summary-note {
    margin-top: 4px !important;
    font-size: 12px !important;
}
.pp-map-card {
    padding: 14px !important;
    border-radius: 18px !important;
}
.pp-map-card-hero {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 240px);
}
.pp-map-head-large {
    margin-bottom: 8px !important;
}
.pp-map-head-large h3 {
    font-size: 19px !important;
}
.pp-map-head-large p {
    font-size: 12px !important;
    max-width: 780px;
}
.pp-map-actions {
    gap: 6px !important;
}
.pp-type-filter,
.pp-map-tools {
    gap: 6px !important;
}
.pp-chip {
    padding: 6px 10px !important;
    font-size: 12px !important;
    min-height: 30px !important;
}
.pp-map-wrap-schematic {
    flex: 1 1 auto;
    min-height: 0;
}
.pp-schematic-map {
    height: calc(100vh - 350px) !important;
    min-height: 600px !important;
    max-height: 780px !important;
}
.pp-schematic-map svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.pp-map-status {
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
}
.pp-legend {
    gap: 7px !important;
    margin-top: 8px !important;
}
.pp-legend span {
    min-height: 26px !important;
    padding: 4px 9px !important;
    font-size: 11.5px !important;
}
.pp-info-grid {
    gap: 10px !important;
    margin-top: 10px !important;
}
.pp-info-card,
.pp-table-card {
    padding: 14px !important;
    border-radius: 18px !important;
}

@media (min-width: 1600px) {
    .pp-schematic-map {
        height: calc(100vh - 330px) !important;
        min-height: 650px !important;
        max-height: 840px !important;
    }
}

@media (max-width: 1199px) {
    #pomprap-air > .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .pp-map-card-hero {
        min-height: auto;
    }
    .pp-schematic-map {
        height: 68vh !important;
        min-height: 560px !important;
        max-height: none !important;
    }
}

@media (max-width: 991px) {
    .pp-hero-card {
        align-items: flex-start;
    }
    .pp-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .pp-card-head {
        flex-direction: column;
    }
    .pp-map-actions {
        width: 100%;
    }
    .pp-schematic-map {
        height: 64vh !important;
        min-height: 520px !important;
    }
}

@media (max-width: 767px) {
    #pomprap-air {
        padding-top: 10px !important;
    }
    #pomprap-air > .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .pp-hero-card {
        padding: 14px !important;
    }
    .pp-summary-card {
        min-height: 72px !important;
    }
    .pp-schematic-map {
        height: 58vh !important;
        min-height: 420px !important;
    }
    .pp-legend span {
        font-size: 11px !important;
    }
}


/* Restore breadcrumb/navigation hotfix */
body .breadcumb-wrapper {
    display: block !important;
}
#pomprap-air {
    padding-top: 22px !important;
}
.pp-schematic-map {
    height: calc(100vh - 430px) !important;
    min-height: 560px !important;
}
@media (min-width: 1600px) {
    .pp-schematic-map {
        height: calc(100vh - 405px) !important;
        min-height: 620px !important;
    }
}
@media (max-width: 1199px) {
    .pp-schematic-map {
        height: 64vh !important;
        min-height: 520px !important;
    }
}
@media (max-width: 767px) {
    .pp-schematic-map {
        height: 55vh !important;
        min-height: 400px !important;
    }
}


/* PM2.5 self-care guidance */
.pp-guidance-card {
    padding: 18px;
    margin-bottom: 18px;
    background:
        radial-gradient(circle at top right, rgba(31,138,98,.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}
.pp-guidance-head {
    margin-bottom: 14px;
}
.pp-guidance-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}
.pp-guidance-level {
    position: relative;
    border-radius: 18px;
    padding: 16px 16px 14px;
    border: 1px solid #deebe6;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(10, 50, 43, .06);
}
.pp-guidance-level:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 5px;
    background: #90a4ae;
}
.pp-guidance-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pp-guidance-dot {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: 0 0 0 6px rgba(0,0,0,.03);
}
.pp-guidance-title {
    color: #123730;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
}
.pp-guidance-range {
    color: #5d7470;
    font-size: 13px;
    font-weight: 700;
    margin-top: 2px;
}
.pp-guidance-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pp-guidance-list li {
    position: relative;
    padding-left: 18px;
    color: #304946;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 8px;
}
.pp-guidance-list li:last-child { margin-bottom: 0; }
.pp-guidance-list li:before {
    content: "•";
    position: absolute;
    left: 4px;
    top: 0;
    font-weight: 900;
}

.pp-guidance-level.very-good:before,
.pp-guidance-level.very-good .pp-guidance-dot { background: #2196f3; }
.pp-guidance-level.very-good {
    background: linear-gradient(180deg, #ffffff 0%, #f3f9fe 100%);
    border-color: #cfe6fb;
}
.pp-guidance-level.good:before,
.pp-guidance-level.good .pp-guidance-dot { background: #4caf50; }
.pp-guidance-level.good {
    background: linear-gradient(180deg, #ffffff 0%, #f5fbf5 100%);
    border-color: #d7efd8;
}
.pp-guidance-level.moderate:before,
.pp-guidance-level.moderate .pp-guidance-dot { background: #ff9800; }
.pp-guidance-level.moderate {
    background: linear-gradient(180deg, #ffffff 0%, #fff8ef 100%);
    border-color: #fde5c3;
}
.pp-guidance-level.impact:before,
.pp-guidance-level.impact .pp-guidance-dot { background: #f44336; }
.pp-guidance-level.impact {
    background: linear-gradient(180deg, #ffffff 0%, #fff5f4 100%);
    border-color: #f7d2cf;
}
.pp-guidance-level.severe:before,
.pp-guidance-level.severe .pp-guidance-dot { background: #9c27b0; }
.pp-guidance-level.severe {
    background: linear-gradient(180deg, #ffffff 0%, #faf4fc 100%);
    border-color: #ead4ef;
}

@media (max-width: 1399px) {
    .pp-guidance-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 991px) {
    .pp-guidance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 767px) {
    .pp-guidance-card {
        padding: 14px;
    }
    .pp-guidance-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .pp-guidance-level {
        border-radius: 16px;
        padding: 14px;
    }
    .pp-guidance-title {
        font-size: 17px;
    }
}


/* Marker color by PM2.5 level hotfix */
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base {
    transition: fill .18s ease, stroke .18s ease, filter .18s ease, transform .18s ease;
}
.pp-svg-site.selected .pin-roof,
.pp-svg-site.selected .pin-base {
    stroke: #fbbf24 !important;
    stroke-width: 3px !important;
    filter: drop-shadow(0 8px 18px rgba(17,24,39,.26));
}


/* Popup alignment fix */
.pp-marker-popup {
    --pp-popup-arrow-left: 50%;
}
.pp-marker-popup-arrow {
    left: var(--pp-popup-arrow-left);
}
.pp-marker-popup:before {
    left: var(--pp-popup-arrow-left);
}

/* Advanced IDW references + confidence */
.pp-confidence-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.pp-marker-popup {
    width: 390px;
}
.pp-marker-popup-level {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.pp-marker-ref-title,
.pp-ref-title {
    margin-top: 12px;
    margin-bottom: 8px;
    color: #173a34;
    font-size: 13px;
    font-weight: 900;
}
.pp-marker-ref-list,
.pp-selected-ref-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.pp-marker-ref-row,
.pp-selected-ref-row {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 8px;
    align-items: flex-start;
    border: 1px solid #e3eeea;
    background: rgba(255,255,255,.72);
    border-radius: 12px;
    padding: 8px;
}
.pp-marker-ref-row .ref-rank,
.pp-selected-ref-row .ref-rank {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #eef7f2;
    color: #23614f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
}
.pp-marker-ref-row .ref-main strong,
.pp-selected-ref-row .ref-main strong {
    display: block;
    color: #173a34;
    font-size: 12.5px;
    line-height: 1.35;
    font-weight: 900;
}
.pp-marker-ref-row .ref-main span,
.pp-selected-ref-row .ref-main span {
    display: block;
    color: #5d7470;
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 2px;
}
.pp-marker-ref-row .ref-main em,
.pp-selected-ref-row .ref-main em {
    display: inline-block;
    margin-top: 4px;
    color: #8a6d1d;
    background: #fff8e3;
    border: 1px solid #f3e2ad;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 800;
}
.pp-selected-ref-box {
    margin-top: 12px;
    border: 1px solid #dde8e4;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
    border-radius: 16px;
    padding: 12px;
}
.pp-selected-ref-box .pp-ref-title {
    margin-top: 0;
}
.pp-ref-empty {
    color: #6e7f82;
    font-size: 12px;
    padding: 8px;
}
@media (max-width: 767px) {
    .pp-marker-popup {
        width: min(340px, calc(100% - 14px));
    }
    .pp-marker-popup-metrics {
        grid-template-columns: 1fr 1fr;
    }
}


/* Compact marker popup hotfix */
.pp-map-card,
.pp-map-wrap-schematic {
    overflow: visible !important;
}
.pp-marker-popup {
    width: 285px !important;
    max-width: min(285px, calc(100% - 16px)) !important;
    padding: 10px 10px 9px !important;
    border-radius: 15px !important;
    box-shadow: 0 14px 34px rgba(10, 37, 33, .18) !important;
}
.pp-marker-popup-close {
    top: 7px !important;
    right: 7px !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 19px !important;
}
.pp-marker-popup-type {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    margin-bottom: 6px !important;
}
.pp-marker-popup-title {
    font-size: 16px !important;
    line-height: 1.25 !important;
    margin-bottom: 6px !important;
    padding-right: 24px !important;
}
.pp-marker-popup-level {
    gap: 5px !important;
    margin-bottom: 7px !important;
}
.pp-marker-popup-level .pp-level-pill,
.pp-marker-popup-level .pp-confidence-pill {
    min-height: 23px !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
}
.pp-marker-popup-metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}
.pp-marker-popup-metrics .metric {
    padding: 7px 8px !important;
    border-radius: 10px !important;
}
.pp-marker-popup-metrics .metric span {
    font-size: 10.5px !important;
    margin-bottom: 2px !important;
}
.pp-marker-popup-metrics .metric strong {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
}
.pp-marker-ref-title {
    margin-top: 8px !important;
    margin-bottom: 5px !important;
    font-size: 12px !important;
}
.pp-marker-ref-list {
    gap: 5px !important;
    max-height: 112px;
    overflow: auto;
    padding-right: 2px;
}
.pp-marker-ref-row {
    grid-template-columns: 20px 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 10px !important;
}
.pp-marker-ref-row .ref-rank {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
}
.pp-marker-ref-row .ref-main strong {
    font-size: 11px !important;
    line-height: 1.25 !important;
}
.pp-marker-ref-row .ref-main span {
    font-size: 10px !important;
    line-height: 1.32 !important;
}
.pp-marker-popup-updated {
    margin-top: 7px !important;
    font-size: 10.5px !important;
}
.pp-marker-popup-arrow {
    width: 14px !important;
    height: 14px !important;
    bottom: -8px !important;
}
.pp-marker-popup.is-below .pp-marker-popup-arrow {
    top: -8px !important;
}
.pp-marker-popup:before {
    height: 12px !important;
    bottom: -18px !important;
}
.pp-marker-popup.is-below:before {
    top: -18px !important;
}
@media (max-width: 767px) {
    .pp-marker-popup {
        width: 270px !important;
        max-width: min(270px, calc(100% - 12px)) !important;
    }
}


/* Show all reference stations on map hotfix */
.pp-ref-line {
    stroke: rgba(34, 82, 74, .58) !important;
    stroke-width: 2.5 !important;
    stroke-dasharray: 8 6 !important;
    opacity: .9 !important;
    pointer-events: none;
}
.pp-ref-station-dot {
    fill: #ffffff !important;
    stroke: #1f8a62 !important;
    stroke-width: 4 !important;
    filter: drop-shadow(0 5px 10px rgba(12, 54, 47, .18));
}
.pp-ref-station-num {
    fill: #0f5d44;
    font-size: 12px;
    font-weight: 900;
    text-anchor: middle;
    pointer-events: none;
}
.pp-ref-station-label {
    fill: #173a34;
    font-size: 13px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,.92);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Precise PDF map background hotfix */
.pp-schematic-map {
    height: 82vh !important;
    min-height: 820px !important;
    max-height: 1180px !important;
    background: #eef3ef;
}
.pp-schematic-map svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.pp-svg-bg {
    fill: #eef3ef;
}
.pp-svg-map-image {
    opacity: 1;
}
.pp-svg-map-wash {
    fill: rgba(248, 251, 249, .08);
}
.pp-svg-boundary-label {
    fill: rgba(25, 62, 55, .82);
    font-size: 20px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,.92);
    stroke-width: 5px;
}
.pp-site-label {
    fill: #183e37;
    font-size: 16px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,.92);
    stroke-width: 5px;
    stroke-linejoin: round;
}
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base {
    filter: drop-shadow(0 8px 14px rgba(16, 38, 34, .20));
}
.pp-offset-line { stroke: rgba(40, 70, 64, .18); }
.pp-origin-dot { display: none; }
@media (max-width: 991px) {
    .pp-schematic-map { height: 76vh !important; min-height: 680px !important; }
}
@media (max-width: 767px) {
    .pp-schematic-map { height: 70vh !important; min-height: 560px !important; }
}

/* Bigger PDF map view hotfix */
#pomprap-air > .container {
    max-width: 1960px !important;
}
.pp-map-card {
    padding: 16px !important;
}
.pp-map-card-hero {
    min-height: auto !important;
}
.pp-map-wrap-schematic {
    padding: 10px !important;
}
.pp-schematic-map {
    height: 1180px !important;
    min-height: 1080px !important;
    max-height: none !important;
}
.pp-schematic-map svg {
    width: 100% !important;
    height: 100% !important;
}
.pp-svg-site .pin-roof {
    transform-origin: center;
}
.pp-svg-site .pp-level-ring {
    stroke-width: 7px !important;
}
.pp-site-label {
    font-size: 18px !important;
}
.pp-pm-badge-text {
    font-size: 13px !important;
}
.pp-ref-station-dot {
    r: 13;
}
@media (min-width: 1600px) {
    .pp-schematic-map {
        height: 1320px !important;
        min-height: 1220px !important;
    }
}
@media (max-width: 1199px) {
    .pp-schematic-map {
        height: 980px !important;
        min-height: 900px !important;
    }
}
@media (max-width: 767px) {
    .pp-schematic-map {
        height: 760px !important;
        min-height: 680px !important;
    }
}

/* Map zoom/pan hotfix */
.pp-map-wrap-schematic {
    position: relative;
}
.pp-map-zoom-toolbar {
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px;
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(210,225,219,.95);
    box-shadow: 0 12px 30px rgba(12, 38, 34, .12);
    backdrop-filter: blur(8px);
}
.pp-map-zoom-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #173a34;
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #dfeae6;
}
.pp-map-zoom-btn.wide {
    width: auto;
    padding: 0 12px;
    font-size: 13px;
}
.pp-map-zoom-btn:hover {
    background: #eaf6ef;
}
.pp-map-zoom-hint {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 25;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(210,225,219,.9);
    color: #405a55;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(12, 38, 34, .10);
    pointer-events: none;
}
.pp-schematic-map {
    overflow: hidden !important;
    cursor: zoom-in;
    touch-action: none;
}
.pp-schematic-map.is-zoomed {
    cursor: grab;
}
.pp-schematic-map.is-dragging {
    cursor: grabbing;
}
.pp-schematic-map svg {
    transition: transform .12s ease-out;
    will-change: transform;
}
.pp-schematic-map.is-dragging svg {
    transition: none;
}
@media (max-width: 767px) {
    .pp-map-zoom-toolbar {
        right: 10px;
        top: 10px;
        gap: 5px;
        padding: 5px;
    }
    .pp-map-zoom-btn {
        width: 31px;
        height: 31px;
        font-size: 19px;
    }
    .pp-map-zoom-btn.wide {
        padding: 0 9px;
        font-size: 12px;
    }
    .pp-map-zoom-hint {
        left: 10px;
        bottom: 10px;
        font-size: 11px;
        padding: 6px 9px;
    }
}

/* Fix layout: fill map area + visible zoom controls */
.pp-map-card-hero {
    min-height: auto !important;
}
.pp-map-wrap-schematic {
    position: relative !important;
    padding: 0 !important;
    overflow: hidden !important;
}
.pp-schematic-map {
    width: 100% !important;
    height: 76vh !important;
    min-height: 760px !important;
    max-height: 980px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}
.pp-schematic-map svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}
.pp-chip-zoom {
    background: #173a34 !important;
    color: #ffffff !important;
    border-color: #173a34 !important;
    font-weight: 900 !important;
}
.pp-chip-zoom:hover {
    background: #245d4f !important;
    color: #ffffff !important;
}
.pp-map-zoom-toolbar {
    right: 16px !important;
    top: 16px !important;
    z-index: 60 !important;
    background: rgba(23,58,52,.92) !important;
    border-color: rgba(23,58,52,.98) !important;
}
.pp-map-zoom-btn {
    background: #ffffff !important;
    color: #173a34 !important;
}
.pp-map-zoom-hint {
    z-index: 55 !important;
    background: rgba(23,58,52,.86) !important;
    color: #ffffff !important;
    border-color: rgba(23,58,52,.92) !important;
}
@media (min-width: 1600px) {
    .pp-schematic-map {
        height: 82vh !important;
        min-height: 860px !important;
        max-height: 1080px !important;
    }
}
@media (max-width: 991px) {
    .pp-schematic-map {
        height: 72vh !important;
        min-height: 640px !important;
    }
}
@media (max-width: 767px) {
    .pp-schematic-map {
        height: 68vh !important;
        min-height: 520px !important;
    }
}

/* Fit-all first + professional 3D map style */
.pp-map-card {
    background:
        radial-gradient(circle at 20% 10%, rgba(45, 135, 101, .10), transparent 28%),
        radial-gradient(circle at 82% 28%, rgba(255, 168, 40, .08), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f5f8f6 100%) !important;
}
.pp-map-wrap-schematic {
    padding: 18px !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.72), rgba(225,235,231,.88)),
        repeating-linear-gradient(135deg, rgba(38,75,67,.045) 0, rgba(38,75,67,.045) 1px, transparent 1px, transparent 18px) !important;
    border: 1px solid rgba(202, 220, 213, .95) !important;
    border-radius: 24px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 22px 55px rgba(18, 54, 47, .12),
        0 3px 0 rgba(140, 164, 154, .20) !important;
}
.pp-map-wrap-schematic:before {
    content: "";
    position: absolute;
    inset: 18px 18px auto 18px;
    height: 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(31, 138, 98, .22), rgba(255, 153, 0, .16), rgba(33, 150, 243, .18));
    filter: blur(14px);
    opacity: .75;
    pointer-events: none;
}
.pp-schematic-map {
    height: 88vh !important;
    min-height: 920px !important;
    max-height: 1280px !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.96) 0%, rgba(238,245,241,.94) 56%, rgba(222,233,228,.95) 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(209, 224, 218, .95),
        inset 0 18px 35px rgba(255,255,255,.65),
        0 18px 42px rgba(24, 61, 54, .12) !important;
}
.pp-schematic-map svg {
    filter:
        drop-shadow(0 22px 26px rgba(17, 52, 46, .16))
        drop-shadow(0 4px 0 rgba(122, 145, 137, .16));
}
.pp-svg-map-image {
    opacity: .98;
}
.pp-svg-map-wash {
    fill: rgba(250, 252, 251, .02) !important;
}
.pp-svg-site {
    filter: drop-shadow(0 12px 15px rgba(9, 38, 34, .20));
}
.pp-svg-site .pin-shadow {
    opacity: .28 !important;
}
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base {
    filter: drop-shadow(0 6px 10px rgba(9, 38, 34, .24)) !important;
}
.pp-level-ring {
    filter: drop-shadow(0 4px 8px rgba(9,38,34,.18));
}
.pp-pm-badge {
    filter: drop-shadow(0 6px 10px rgba(9,38,34,.18));
}
.pp-map-zoom-toolbar,
.pp-map-zoom-hint {
    box-shadow: 0 14px 34px rgba(14, 49, 42, .18) !important;
}
@media (min-width: 1600px) {
    .pp-schematic-map {
        height: 92vh !important;
        min-height: 1040px !important;
        max-height: 1440px !important;
    }
}
@media (max-width: 991px) {
    .pp-schematic-map {
        height: 78vh !important;
        min-height: 720px !important;
    }
}
@media (max-width: 767px) {
    .pp-map-wrap-schematic {
        padding: 10px !important;
    }
    .pp-schematic-map {
        height: 72vh !important;
        min-height: 560px !important;
    }
}

/* Full wide 3D map + district boundary */
#pomprap-air > .container {
    max-width: 1980px !important;
}
.pp-map-card {
    background:
        radial-gradient(circle at 10% 10%, rgba(44, 139, 102, .14), transparent 24%),
        radial-gradient(circle at 82% 18%, rgba(255, 164, 50, .10), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f4f8f6 100%) !important;
}
.pp-map-wrap-schematic {
    padding: 18px !important;
    position: relative !important;
    border-radius: 28px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(234,241,237,.92) 100%) !important;
    border: 1px solid rgba(205,220,214,.95) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 26px 60px rgba(18, 54, 47, .14),
        0 4px 0 rgba(130, 152, 144, .16) !important;
}
.pp-map-wrap-schematic:after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: -18px;
    height: 28px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(22, 57, 50, .22) 0%, rgba(22, 57, 50, .06) 48%, rgba(22,57,50,0) 74%);
    filter: blur(8px);
    pointer-events: none;
}
.pp-schematic-map {
    height: 84vh !important;
    min-height: 860px !important;
    max-height: 1220px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, #f6faf7 0%, #ecf3ef 100%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(211,226,220,.98),
        inset 0 16px 40px rgba(255,255,255,.64),
        0 18px 44px rgba(17, 54, 47, .12) !important;
    overflow: hidden !important;
}
.pp-schematic-map svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    filter:
        drop-shadow(0 24px 28px rgba(18, 53, 47, .12))
        drop-shadow(0 4px 0 rgba(125, 149, 141, .12));
}
.pp-svg-bg { fill: #edf3ef; }
.pp-svg-map-image { opacity: .98; }
.pp-svg-map-wash { fill: rgba(251, 253, 252, .04) !important; }
.pp-district-shadow {
    fill: rgba(29, 85, 66, .16);
    transform: translate(0, 10px);
    filter: blur(8px);
}
.pp-district-fill {
    fill: rgba(38, 126, 91, .08);
    stroke: rgba(255,255,255,.45);
    stroke-width: 6px;
}
.pp-district-outline {
    fill: none;
    stroke: #1d7a5d;
    stroke-width: 6px;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: 16 12;
    filter: drop-shadow(0 0 10px rgba(29, 122, 93, .26));
}
.pp-svg-boundary-label {
    fill: rgba(19, 63, 55, .88);
    font-size: 28px;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,.94);
    stroke-width: 6px;
}
.pp-svg-site {
    filter: drop-shadow(0 12px 16px rgba(9, 38, 34, .24));
}
.pp-svg-site .pin-roof,
.pp-svg-site .pin-base {
    filter: drop-shadow(0 7px 10px rgba(9, 38, 34, .22)) !important;
}
.pp-level-ring {
    stroke-width: 8px !important;
    filter: drop-shadow(0 4px 8px rgba(9,38,34,.18));
}
.pp-pm-badge { filter: drop-shadow(0 6px 10px rgba(9,38,34,.20)); }
.pp-site-label {
    fill: #163e37;
    font-size: 18px !important;
    font-weight: 900;
    paint-order: stroke;
    stroke: rgba(255,255,255,.95);
    stroke-width: 5px;
}
.pp-map-zoom-toolbar {
    background: rgba(23,58,52,.92) !important;
    border-color: rgba(23,58,52,.96) !important;
    z-index: 60 !important;
}
.pp-map-zoom-hint {
    background: rgba(255,255,255,.90) !important;
    color: #173a34 !important;
    font-weight: 900 !important;
    z-index: 60 !important;
}
@media (min-width: 1600px) {
    .pp-schematic-map {
        height: 88vh !important;
        min-height: 960px !important;
        max-height: 1320px !important;
    }
}
@media (max-width: 991px) {
    .pp-schematic-map {
        height: 74vh !important;
        min-height: 660px !important;
    }
    .pp-svg-boundary-label { font-size: 22px; }
}
@media (max-width: 767px) {
    .pp-map-wrap-schematic { padding: 10px !important; }
    .pp-schematic-map {
        height: 68vh !important;
        min-height: 500px !important;
    }
    .pp-svg-boundary-label { font-size: 18px; }
}

/* Real full map manual calibrated hotfix */
.pp-schematic-map {
    background:
        radial-gradient(circle at center, rgba(255,255,255,.98) 0%, rgba(244,248,246,.96) 58%, rgba(233,240,236,.98) 100%) !important;
}
.pp-site-label {
    font-size: 17px !important;
}
.pp-svg-boundary-label {
    letter-spacing: .01em;
}


/* MARKER ICON V2 - obvious temple / shrine markers */
.pp-svg-site .pin-mark { display: none !important; }

.pp-svg-site .pin-shadow {
    fill: rgba(8, 30, 26, .18) !important;
    opacity: .9;
}

.pp-svg-site.is-temple .temple-roof-lower,
.pp-svg-site.is-temple .temple-roof-upper {
    fill: #1b8a68 !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}
.pp-svg-site.is-temple .temple-base-main {
    fill: #f5fbf7 !important;
    stroke: #1b8a68 !important;
    stroke-width: 2.5px !important;
}
.pp-svg-site.is-temple .pin-column,
.pp-svg-site.is-temple .pin-spire {
    stroke: #1b8a68 !important;
    stroke-width: 2.4px !important;
    stroke-linecap: round;
}
.pp-svg-site.is-temple .pin-spire-dot {
    fill: #f4c542 !important;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
.pp-svg-site.is-temple .temple-door-main {
    fill: #d9efe3 !important;
    stroke: #1b8a68 !important;
    stroke-width: 1.8px !important;
}
.pp-svg-site.is-temple .temple-roof-accent {
    stroke: #f4c542 !important;
    stroke-width: 2.4px !important;
    stroke-linecap: round;
}

.pp-svg-site.is-shrine .shrine-roof-main {
    fill: #d94b3d !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}
.pp-svg-site.is-shrine .shrine-base-main {
    fill: #fff7f4 !important;
    stroke: #d94b3d !important;
    stroke-width: 2.5px !important;
}
.pp-svg-site.is-shrine .shrine-door-main {
    fill: #fbe4dd !important;
    stroke: #d94b3d !important;
    stroke-width: 1.8px !important;
}
.pp-svg-site.is-shrine .pin-door-line {
    stroke: #d94b3d !important;
    stroke-width: 1.5px !important;
}
.pp-svg-site.is-shrine .pin-lantern {
    fill: #f4c542 !important;
    stroke: #ffffff !important;
    stroke-width: 1.2px !important;
}
.pp-svg-site.is-shrine .pin-lantern-line,
.pp-svg-site.is-shrine .shrine-roof-accent {
    stroke: #f4c542 !important;
    stroke-width: 2px !important;
    stroke-linecap: round;
}

.pp-svg-site .pp-level-ring {
    stroke-width: 8px !important;
    opacity: .9;
}

.pp-svg-site {
    transform-box: fill-box;
    transform-origin: center center;
    transition: transform .18s ease, filter .18s ease !important;
    animation: ppMarkerEntranceV2 .5s ease-out both;
}
.pp-svg-site:hover {
    transform: translateY(-4px) scale(1.04) !important;
}
.pp-svg-site.selected {
    transform: translateY(-2px) scale(1.05) !important;
}
.pp-svg-site .pp-pm-badge {
    animation: ppBadgeFloatV2 4.6s ease-in-out infinite !important;
}
.pp-svg-site.selected.is-temple .temple-roof-upper,
.pp-svg-site.selected.is-shrine .shrine-roof-main {
    animation: ppMarkerGlowV2 2.2s ease-in-out infinite !important;
}
.pp-svg-site .pp-level-ring,
.pp-svg-site .pin-shadow {
    animation: none !important;
}

@keyframes ppMarkerEntranceV2 {
    0% { opacity: 0; transform: translateY(10px) scale(.88); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ppBadgeFloatV2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes ppMarkerGlowV2 {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: drop-shadow(0 0 8px rgba(255,255,255,.36)); }
}

/* Debug/troubleshoot visible version */
.pp-map-head-large h3:after {
    content: "  • marker v2";
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #d94b3d;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .pp-svg-site,
    .pp-svg-site:hover,
    .pp-svg-site.selected,
    .pp-svg-site .pp-pm-badge,
    .pp-svg-site.selected.is-temple .temple-roof-upper,
    .pp-svg-site.selected.is-shrine .shrine-roof-main {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* marker icon v3 - obvious Thai temple / shrine */
.pp-svg-site .pin-mark { display: none !important; }
.pp-svg-site .pin-shadow { fill: rgba(8,30,26,.18) !important; }

.pp-svg-site.is-temple .temple-roof-lower,
.pp-svg-site.is-temple .temple-roof-upper {
    fill: #1f8f6b !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}
.pp-svg-site.is-temple .temple-base-main {
    fill: #fbfefc !important;
    stroke: #1f8f6b !important;
    stroke-width: 2.5px !important;
}
.pp-svg-site.is-temple .temple-door-main {
    fill: #e7f4ed !important;
    stroke: #1f8f6b !important;
    stroke-width: 1.7px !important;
}
.pp-svg-site.is-temple .pin-column,
.pp-svg-site.is-temple .pin-spire {
    stroke: #1f8f6b !important;
    stroke-width: 2.4px !important;
    stroke-linecap: round;
}
.pp-svg-site.is-temple .pin-spire-dot {
    fill: #f4c542 !important;
    stroke: #ffffff !important;
    stroke-width: 1px !important;
}
.pp-svg-site.is-temple .temple-roof-accent {
    stroke: #f4c542 !important;
    stroke-width: 2.4px !important;
    stroke-linecap: round;
}

.pp-svg-site.is-shrine .shrine-roof-main {
    fill: #db4d3f !important;
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}
.pp-svg-site.is-shrine .shrine-base-main {
    fill: #fff8f5 !important;
    stroke: #db4d3f !important;
    stroke-width: 2.5px !important;
}
.pp-svg-site.is-shrine .shrine-door-main {
    fill: #fde9e3 !important;
    stroke: #db4d3f !important;
    stroke-width: 1.7px !important;
}
.pp-svg-site.is-shrine .pin-door-line {
    stroke: #db4d3f !important;
    stroke-width: 1.4px !important;
}
.pp-svg-site.is-shrine .pin-lantern-line,
.pp-svg-site.is-shrine .shrine-roof-accent {
    stroke: #f4c542 !important;
    stroke-width: 2px !important;
    stroke-linecap: round;
}
.pp-svg-site.is-shrine .pin-lantern {
    fill: #f4c542 !important;
    stroke: #ffffff !important;
    stroke-width: 1.2px !important;
}

.pp-svg-site {
    transform-box: fill-box;
    transform-origin: center center;
    animation: ppMarkerEntryV3 .45s ease-out both;
}
.pp-svg-site:hover {
    transform: translateY(-4px) scale(1.04) !important;
}
.pp-svg-site .pp-pm-badge {
    animation: ppBadgeLiftV3 4.4s ease-in-out infinite !important;
}
.pp-svg-site.selected.is-temple .temple-roof-upper,
.pp-svg-site.selected.is-shrine .shrine-roof-main {
    animation: ppMarkerGlowV3 2.2s ease-in-out infinite !important;
}
.pp-svg-site .pp-level-ring,
.pp-svg-site .pin-shadow { animation: none !important; }

@keyframes ppMarkerEntryV3 {
    0% { opacity: 0; transform: translateY(10px) scale(.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ppBadgeLiftV3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
@keyframes ppMarkerGlowV3 {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
    50% { filter: drop-shadow(0 0 8px rgba(255,255,255,.35)); }
}

.pp-map-head-large h3::after {
    content: " • marker v3";
    color: #db4d3f;
    font-size: 13px;
    font-weight: 900;
    margin-left: 8px;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
  .pp-svg-site, .pp-svg-site:hover, .pp-svg-site .pp-pm-badge, .pp-svg-site.selected.is-temple .temple-roof-upper, .pp-svg-site.selected.is-shrine .shrine-roof-main {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Remove map zoom UI */
.pp-map-zoom-toolbar,
.pp-map-zoom-hint,
#ppMapZoomIn,
#ppMapZoomOut,
#ppMapZoomReset,
#ppMapZoomInTop,
#ppMapZoomOutTop,
#ppMapZoomResetTop {
    display: none !important;
}
.pp-schematic-map {
    cursor: default !important;
    touch-action: auto !important;
}
.pp-schematic-map svg {
    transform: none !important;
}


/* History 7 days modal */
.pp-selected-actions {
    margin: 12px 0 8px;
}
.pp-history-open-btn,
.pp-marker-history-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #173a34, #1f8f6b);
    color: #fff;
    font-weight: 900;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(23, 58, 52, .18);
}
.pp-marker-history-btn {
    width: 100%;
    margin-top: 10px;
}
.pp-history-open-btn:hover,
.pp-marker-history-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(23, 58, 52, .24);
}

.pp-history-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
}
.pp-history-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(9, 31, 27, .62);
    backdrop-filter: blur(5px);
}
.pp-history-dialog {
    position: relative;
    width: min(1040px, calc(100vw - 28px));
    max-height: calc(100vh - 38px);
    overflow: auto;
    margin: 20px auto;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%);
    border: 1px solid rgba(214, 229, 223, .96);
    border-radius: 28px;
    box-shadow: 0 30px 90px rgba(8, 31, 27, .34);
    padding: 24px;
}
.pp-history-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border: 1px solid #dce9e4;
    border-radius: 999px;
    background: #fff;
    color: #173a34;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.pp-history-close:hover {
    background: #eef7f2;
}
.pp-history-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    padding-right: 56px;
    margin-bottom: 16px;
}
.pp-history-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #eaf7f1;
    color: #1c6d55;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 8px;
}
.pp-history-head h3 {
    margin: 0 0 4px;
    color: #173a34;
    font-weight: 900;
    font-size: clamp(24px, 2.4vw, 36px);
    line-height: 1.2;
}
.pp-history-head p {
    margin: 0;
    color: #60736e;
    font-size: 14px;
}
.pp-history-latest {
    min-width: 130px;
    padding: 12px 14px;
    border-radius: 18px;
    background: #173a34;
    color: #fff;
    text-align: center;
    box-shadow: 0 14px 30px rgba(23, 58, 52, .18);
}
.pp-history-latest span,
.pp-history-latest small {
    display: block;
    opacity: .82;
    font-size: 12px;
    font-weight: 800;
}
.pp-history-latest strong {
    display: block;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 900;
}
.pp-history-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr)) 1.4fr;
    gap: 10px;
    margin-bottom: 14px;
}
.pp-history-stat,
.pp-history-station {
    border: 1px solid #dce9e4;
    background: #fff;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 10px 22px rgba(20, 57, 50, .07);
}
.pp-history-stat span,
.pp-history-station span {
    display: block;
    color: #6a7e79;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 4px;
}
.pp-history-stat strong,
.pp-history-station strong {
    color: #173a34;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
}
.pp-history-stat small {
    margin-left: 4px;
    color: #6a7e79;
    font-weight: 800;
}
.pp-history-station strong {
    font-size: 15px;
}
.pp-history-chart-wrap {
    position: relative;
    min-height: 360px;
    height: min(50vh, 430px);
    border: 1px solid #dce9e4;
    border-radius: 22px;
    padding: 16px;
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px rgba(20,57,50,.08);
}
.pp-history-empty {
    position: absolute;
    inset: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    border-radius: 18px;
    background: #f7fbf9;
    color: #60736e;
    font-weight: 800;
}
.pp-history-footnote {
    margin-top: 12px;
    color: #6a7e79;
    font-size: 13px;
}
body.pp-history-open {
    overflow: hidden;
}
@media (max-width: 991px) {
    .pp-history-summary {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
    .pp-history-station {
        grid-column: 1 / -1;
    }
}
@media (max-width: 767px) {
    .pp-history-dialog {
        padding: 18px;
        margin: 12px auto;
        max-height: calc(100vh - 24px);
    }
    .pp-history-head {
        flex-direction: column;
        padding-right: 48px;
    }
    .pp-history-latest {
        width: 100%;
    }
    .pp-history-summary {
        grid-template-columns: 1fr;
    }
    .pp-history-chart-wrap {
        min-height: 320px;
        height: 360px;
    }
}


/* Office banner top placement */
.pp-office-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 18px;
    margin-top: -4px;
}
.pp-office-banner img {
    display: block;
    width: min(624px, 100%);
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    filter: drop-shadow(0 14px 26px rgba(18, 54, 47, .10));
}
@media (max-width: 767px) {
    .pp-office-banner {
        padding: 0 4px 14px;
    }
    .pp-office-banner img {
        border-radius: 14px;
    }
}
@media print {
    .pp-office-banner img {
        filter: none;
    }
}


/* PR banner placement below hero */
.pp-pr-banner-card {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 22px;
    padding: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
    border: 1px solid rgba(210, 226, 219, .92);
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(18, 54, 47, .10);
}
.pp-pr-banner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.pp-pr-banner-head span {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: #eef7f2;
    color: #1d6b55;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .01em;
}
.pp-pr-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    object-fit: contain;
    background: #f4faf7;
}
@media (max-width: 767px) {
    .pp-pr-banner-card {
        padding: 8px;
        border-radius: 18px;
        margin-bottom: 16px;
    }
    .pp-pr-banner-head {
        margin-bottom: 8px;
    }
    .pp-pr-banner-head span {
        font-size: 12px;
        padding: 5px 11px;
    }
    .pp-pr-banner-img {
        border-radius: 14px;
    }
}
@media print {
    .pp-pr-banner-card {
        box-shadow: none;
        break-inside: avoid;
    }
}


/* AQI Thailand color scale hotfix */
.pp-guidance-level.very-good:before,
.pp-guidance-level.very-good .pp-guidance-dot { background: #00b0f0 !important; }
.pp-guidance-level.very-good { background: linear-gradient(180deg, #ffffff 0%, #eefbff 100%) !important; border-color: #b9edf9 !important; }
.pp-guidance-level.good:before,
.pp-guidance-level.good .pp-guidance-dot { background: #92d050 !important; }
.pp-guidance-level.good { background: linear-gradient(180deg, #ffffff 0%, #f4fbe9 100%) !important; border-color: #d7efb7 !important; }
.pp-guidance-level.moderate:before,
.pp-guidance-level.moderate .pp-guidance-dot { background: #ffff00 !important; }
.pp-guidance-level.moderate { background: linear-gradient(180deg, #ffffff 0%, #ffffe8 100%) !important; border-color: #f1ed9f !important; }
.pp-guidance-level.impact:before,
.pp-guidance-level.impact .pp-guidance-dot { background: #ffc000 !important; }
.pp-guidance-level.impact { background: linear-gradient(180deg, #ffffff 0%, #fff7df 100%) !important; border-color: #f4d684 !important; }
.pp-guidance-level.severe:before,
.pp-guidance-level.severe .pp-guidance-dot { background: #ff0000 !important; }
.pp-guidance-level.severe { background: linear-gradient(180deg, #ffffff 0%, #fff0f0 100%) !important; border-color: #f3b8b8 !important; }
.pp-level-pill { color: #14231f !important; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.pp-pm-badge-text { fill: #14231f !important; font-weight: 900; }
.pp-legend span { color: #23433d; }


/* Mobile friendly dashboard hotfix */
html, body {
    overflow-x: hidden;
}

.pp-map-actions,
.pp-hero-actions,
.pp-filter-grid,
.pp-selected-actions,
.pp-legend {
    row-gap: 10px;
}

@media (max-width: 991px) {
    #pomprap-air .container {
        padding-left: 14px;
        padding-right: 14px;
    }
    .pp-air-section {
        padding: 18px 0 34px;
    }
    .pp-office-banner {
        padding: 6px 0 12px;
    }
    .pp-office-banner img {
        max-width: min(100%, 460px);
        width: 100%;
        height: auto;
    }
    .pp-hero-card {
        padding: 18px;
        border-radius: 22px;
        gap: 14px;
    }
    .pp-hero-text h2 {
        font-size: clamp(24px, 4.8vw, 30px);
        line-height: 1.25;
    }
    .pp-hero-text p {
        font-size: 14px;
    }
    .pp-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .pp-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .pp-btn {
        width: 100%;
        min-height: 44px;
        justify-content: center;
    }
    .pp-pr-banner-card {
        padding: 12px;
        border-radius: 20px;
        margin-bottom: 16px;
    }
    .pp-pr-banner-head {
        margin-bottom: 8px;
    }
    .pp-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .pp-summary-card {
        padding: 16px 14px;
        min-height: auto;
    }
    .pp-summary-label {
        font-size: 13px;
    }
    .pp-summary-value {
        font-size: clamp(22px, 6vw, 30px);
    }
    .pp-summary-note {
        font-size: 12px;
    }
    .pp-notice-card {
        padding: 12px 14px;
        font-size: 13px;
    }
    .pp-map-card-hero,
    .pp-table-card,
    .pp-info-card,
    .pp-guidance-card {
        border-radius: 20px;
    }
    .pp-map-card-hero {
        padding: 16px;
    }
    .pp-map-head-large h3 {
        font-size: 22px;
    }
    .pp-map-head-large p {
        font-size: 13px;
    }
    .pp-map-actions {
        width: 100%;
        gap: 10px;
    }
    .pp-type-filter,
    .pp-map-tools {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 3px;
        scrollbar-width: none;
    }
    .pp-type-filter::-webkit-scrollbar,
    .pp-map-tools::-webkit-scrollbar {
        display: none;
    }
    .pp-chip {
        white-space: nowrap;
        min-height: 38px;
        padding: 8px 12px;
        font-size: 13px;
        flex: 0 0 auto;
    }
    .pp-schematic-map {
        min-height: 520px;
        border-radius: 18px;
    }
    .pp-map-caption {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .pp-legend {
        gap: 10px 12px;
        font-size: 12px;
    }
    .pp-info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .pp-info-card {
        padding: 14px;
        min-height: auto;
        max-height: none;
    }
    .pp-selected-site,
    .pp-top-list {
        max-height: none;
        padding-right: 0;
    }
    .pp-selected-head {
        gap: 10px;
    }
    .pp-selected-title {
        font-size: 18px;
    }
    .pp-selected-sub,
    .pp-selected-note,
    .pp-top-meta {
        font-size: 12px;
    }
    .pp-selected-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .pp-selected-item {
        min-height: 0;
    }
    .pp-guidance-card {
        padding: 16px;
    }
    .pp-guidance-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
    .pp-table-card {
        padding: 14px;
    }
    .pp-filter-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .pp-table-wrap {
        margin: 0 -2px;
    }
    .pp-marker-popup {
        width: min(290px, calc(100% - 18px));
        padding: 12px 12px 10px;
        border-radius: 16px;
    }
    .pp-marker-popup-title {
        font-size: 20px;
        line-height: 1.25;
        padding-right: 24px;
    }
    .pp-marker-popup-type {
        min-height: 26px;
        padding: 4px 10px;
        font-size: 12px;
    }
    .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .pp-marker-popup-metrics .metric {
        padding: 10px;
    }
    .pp-marker-popup-metrics .metric strong {
        font-size: 17px;
    }
    .pp-marker-popup-updated {
        font-size: 12px;
    }
    .pp-history-dialog {
        width: min(100vw - 18px, 980px);
        border-radius: 22px;
        padding: 16px;
    }
    .pp-history-head h3 {
        font-size: 24px;
    }
    .pp-history-kicker {
        font-size: 12px;
    }
    .pp-history-latest {
        min-width: 120px;
    }
    .pp-history-latest strong {
        font-size: 28px;
    }
    .pp-history-summary {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 8px;
    }
    .pp-history-station {
        grid-column: 1 / -1;
    }
    .pp-history-chart-wrap {
        padding: 12px;
        min-height: 300px;
        height: 340px;
    }
}

@media (max-width: 767px) {
    #pomprap-air .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    .pp-office-banner img {
        max-width: 100%;
    }
    .pp-hero-actions {
        grid-template-columns: 1fr;
    }
    .pp-summary-grid {
        grid-template-columns: 1fr;
    }
    .pp-map-head-large h3 {
        font-size: 20px;
    }
    .pp-map-head-large p {
        font-size: 12px;
    }
    .pp-schematic-map {
        min-height: 460px;
    }
    .pp-svg-site .pp-site-label {
        font-size: 14px;
    }
    .pp-svg-site.selected .pp-site-label {
        font-size: 16px !important;
    }
    .pp-selected-grid,
    .pp-guidance-grid,
    .pp-filter-grid,
    .pp-history-summary {
        grid-template-columns: 1fr;
    }
    .pp-marker-popup {
        width: min(270px, calc(100% - 12px));
    }
    .pp-marker-popup-title {
        font-size: 18px;
    }
    .pp-marker-popup-metrics {
        grid-template-columns: 1fr 1fr;
    }
    .pp-history-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100vh - 14px);
        margin: 7px auto;
        padding: 14px;
    }
    .pp-history-close {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 24px;
    }
    .pp-history-head p,
    .pp-history-footnote {
        font-size: 13px;
    }
    .pp-history-latest {
        width: 100%;
    }
    .pp-history-chart-wrap {
        min-height: 280px;
        height: 320px;
    }
    .pp-table {
        min-width: 780px;
    }
}

@media (max-width: 480px) {
    .pp-air-section {
        padding: 14px 0 28px;
    }
    .pp-hero-card,
    .pp-map-card-hero,
    .pp-table-card,
    .pp-info-card,
    .pp-guidance-card,
    .pp-pr-banner-card,
    .pp-summary-card,
    .pp-notice-card {
        border-radius: 18px;
    }
    .pp-kicker {
        font-size: 10px;
    }
    .pp-hero-text h2 {
        font-size: 22px;
    }
    .pp-summary-value {
        font-size: 24px;
    }
    .pp-chip {
        min-height: 36px;
        padding: 7px 10px;
        font-size: 12px;
    }
    .pp-schematic-map {
        min-height: 400px;
    }
    .pp-marker-popup {
        width: min(250px, calc(100% - 10px));
        padding: 10px;
    }
    .pp-marker-popup-close {
        top: 8px;
        right: 8px;
        width: 28px;
        height: 28px;
    }
    .pp-marker-popup-metrics .metric span {
        font-size: 11px;
    }
    .pp-marker-popup-metrics .metric strong {
        font-size: 16px;
    }
    .pp-history-chart-wrap {
        min-height: 250px;
        height: 280px;
    }
}


/* Mobile marker popup bottom-sheet fix */
@media (max-width: 767px) {
    .pp-map-wrap-schematic {
        overflow: visible !important;
    }

    .pp-marker-popup {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(72dvh, 560px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 16px 14px 14px !important;
        border-radius: 24px 24px 18px 18px !important;
        transform: translateY(16px) scale(.98) !important;
        transform-origin: center bottom !important;
        z-index: 100002 !important;
        box-shadow: 0 -8px 34px rgba(8, 31, 27, .26), 0 18px 50px rgba(8,31,27,.18) !important;
    }

    .pp-marker-popup.is-open,
    .pp-marker-popup.is-below.is-open {
        transform: translateY(0) scale(1) !important;
    }

    .pp-marker-popup.is-below {
        transform: translateY(16px) scale(.98) !important;
    }

    .pp-marker-popup-arrow,
    .pp-marker-popup:before {
        display: none !important;
    }

    .pp-marker-popup-close {
        position: sticky !important;
        top: 0 !important;
        float: right !important;
        margin-left: 8px !important;
        width: 36px !important;
        height: 36px !important;
        z-index: 2 !important;
        box-shadow: 0 6px 14px rgba(10, 37, 33, .12) !important;
    }

    .pp-marker-popup-type {
        margin-top: 2px !important;
    }

    .pp-marker-popup-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        padding-right: 0 !important;
        clear: none !important;
    }

    .pp-marker-popup-level {
        margin-top: 8px !important;
        margin-bottom: 10px !important;
    }

    .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .pp-marker-popup-metrics .metric {
        padding: 10px 11px !important;
        border-radius: 14px !important;
    }

    .pp-marker-popup-metrics .metric span {
        font-size: 12px !important;
    }

    .pp-marker-popup-metrics .metric strong {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .pp-marker-history-btn {
        min-height: 42px !important;
        border-radius: 16px !important;
        margin-top: 12px !important;
    }

    .pp-marker-popup-updated {
        margin-top: 10px !important;
        padding-bottom: 2px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 420px) {
    .pp-marker-popup {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
        max-height: min(74dvh, 540px) !important;
        padding: 14px 12px 12px !important;
    }

    .pp-marker-popup-title {
        font-size: 20px !important;
    }

    .pp-marker-popup-metrics .metric strong {
        font-size: 17px !important;
    }
}


/* Inline history in marker popup */
.pp-marker-popup {
    width: 430px;
    max-width: calc(100% - 24px);
}

.pp-marker-history-inline {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e4efea;
}

.pp-marker-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.pp-marker-history-head strong {
    color: #173a34;
    font-size: 14px;
    font-weight: 900;
}

.pp-marker-history-head span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef7f2;
    color: #1d6b55;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.pp-marker-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 8px;
}

.pp-marker-history-stat {
    border: 1px solid #e0ebe6;
    background: #fff;
    border-radius: 12px;
    padding: 7px 8px;
}

.pp-marker-history-stat span {
    display: block;
    color: #6b807a;
    font-size: 10px;
    font-weight: 800;
    margin-bottom: 2px;
}

.pp-marker-history-stat strong {
    color: #173a34;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.1;
}

.pp-marker-history-stat small {
    margin-left: 2px;
    color: #6b807a;
    font-size: 9px;
    font-weight: 800;
}

.pp-marker-history-chart-wrap {
    position: relative;
    height: 150px;
    border: 1px solid #e0ebe6;
    border-radius: 14px;
    background: #ffffff;
    padding: 8px;
}

.pp-marker-history-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.pp-marker-history-empty {
    position: absolute;
    inset: 8px;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    background: #f7fbf9;
    color: #6b807a;
    font-size: 12px;
    font-weight: 800;
}

.pp-marker-history-btn {
    display: none !important;
}

@media (max-width: 767px) {
    .pp-marker-popup {
        max-height: min(82dvh, 680px) !important;
    }

    .pp-marker-history-inline {
        margin-top: 14px;
        padding-top: 14px;
    }

    .pp-marker-history-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .pp-marker-history-head strong {
        font-size: 15px;
    }

    .pp-marker-history-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .pp-marker-history-stat {
        padding: 7px 6px;
    }

    .pp-marker-history-stat strong {
        font-size: 14px;
    }

    .pp-marker-history-chart-wrap {
        height: 180px;
    }
}

@media (max-width: 420px) {
    .pp-marker-popup {
        max-height: min(84dvh, 660px) !important;
    }

    .pp-marker-history-summary {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .pp-marker-history-stat span {
        font-size: 9px;
    }

    .pp-marker-history-stat strong {
        font-size: 13px;
    }

    .pp-marker-history-chart-wrap {
        height: 165px;
        padding: 6px;
    }
}


/* Wide desktop popup layout: current data left, 7-day history right */
@media (min-width: 992px) {
    .pp-marker-popup {
        width: min(840px, calc(100vw - 70px)) !important;
        max-width: min(840px, calc(100vw - 70px)) !important;
        padding: 18px 18px 16px !important;
        display: grid !important;
        grid-template-columns: minmax(270px, 320px) minmax(360px, 1fr);
        column-gap: 16px;
        row-gap: 10px;
        align-items: start;
    }

    .pp-marker-popup-type,
    .pp-marker-popup-title,
    .pp-marker-popup-level,
    .pp-marker-popup-metrics,
    .pp-marker-ref-title,
    .pp-marker-ref-list,
    .pp-marker-popup-updated {
        grid-column: 1;
    }

    .pp-marker-history-inline {
        grid-column: 2;
        grid-row: 1 / span 7;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-left: 4px;
        border-top: 0 !important;
        border-left: 1px solid #e4efea;
    }

    .pp-marker-popup-type {
        margin-right: 46px;
    }

    .pp-marker-popup-title {
        font-size: 28px !important;
        line-height: 1.25 !important;
        padding-right: 12px !important;
    }

    .pp-marker-popup-level {
        margin-bottom: 4px !important;
    }

    .pp-marker-popup-level .pp-level-pill {
        min-height: 34px;
        padding: 7px 14px;
        font-size: 14px;
        font-weight: 900;
    }

    .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .pp-marker-popup-metrics .metric {
        min-height: 86px;
        padding: 12px 14px !important;
        border-radius: 16px;
    }

    .pp-marker-popup-metrics .metric span {
        font-size: 12px !important;
        margin-bottom: 5px;
    }

    .pp-marker-popup-metrics .metric strong {
        font-size: 28px !important;
        line-height: 1.15 !important;
    }

    .pp-marker-ref-title {
        margin-top: 2px;
        margin-bottom: 4px;
        font-size: 15px;
        font-weight: 900;
    }

    .pp-marker-ref-list {
        max-height: 116px;
        overflow-y: auto;
        padding-right: 4px;
    }

    .pp-marker-popup-updated {
        margin-top: 2px !important;
        font-size: 12px !important;
    }

    .pp-marker-history-head {
        margin-bottom: 10px !important;
    }

    .pp-marker-history-head strong {
        font-size: 18px !important;
    }

    .pp-marker-history-head span {
        font-size: 12px !important;
        min-height: 26px;
        padding: 4px 10px;
    }

    .pp-marker-history-summary {
        gap: 8px !important;
        margin-bottom: 10px !important;
    }

    .pp-marker-history-stat {
        min-height: 72px;
        padding: 10px 10px !important;
        border-radius: 14px;
    }

    .pp-marker-history-stat span {
        font-size: 11px !important;
        margin-bottom: 4px;
    }

    .pp-marker-history-stat strong {
        font-size: 19px !important;
    }

    .pp-marker-history-stat small {
        font-size: 10px !important;
    }

    .pp-marker-history-chart-wrap {
        height: 245px !important;
        padding: 10px !important;
        border-radius: 16px;
    }
}

/* Tablet: keep it wider but still not too tall */
@media (min-width: 768px) and (max-width: 991px) {
    .pp-marker-popup {
        width: min(680px, calc(100vw - 28px)) !important;
        max-width: min(680px, calc(100vw - 28px)) !important;
    }

    .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pp-marker-history-chart-wrap {
        height: 200px !important;
    }
}


/* Marker popup PRO dashboard layout */
@media (min-width: 992px) {
    .pp-marker-popup {
        width: min(980px, calc(100vw - 80px)) !important;
        max-width: min(980px, calc(100vw - 80px)) !important;
        grid-template-columns: 330px minmax(480px, 1fr) !important;
        column-gap: 20px !important;
        row-gap: 10px !important;
        padding: 20px 20px 18px !important;
        border-radius: 24px !important;
        background:
            radial-gradient(circle at 8% 6%, rgba(31, 143, 107, .08), transparent 25%),
            linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,250,.98) 100%) !important;
        border: 1px solid rgba(210,226,219,.98) !important;
        box-shadow: 0 30px 75px rgba(7, 31, 27, .25) !important;
    }

    .pp-marker-popup:after {
        content: "";
        position: absolute;
        left: 20px;
        right: 20px;
        top: 0;
        height: 5px;
        border-radius: 999px;
        background: linear-gradient(90deg, #00b0f0, #92d050, #ffff00, #ffc000, #ff0000);
        opacity: .95;
    }

    .pp-marker-popup-close {
        top: 14px !important;
        right: 14px !important;
        width: 38px !important;
        height: 38px !important;
        background: rgba(255,255,255,.96) !important;
        box-shadow: 0 10px 22px rgba(8,31,27,.12) !important;
    }

    .pp-marker-popup-type {
        width: fit-content;
        min-height: 30px !important;
        padding: 5px 13px !important;
        border-radius: 999px !important;
        background: #eef7f2 !important;
        color: #1d6b55 !important;
        font-size: 13px !important;
        font-weight: 900 !important;
        margin-top: 4px !important;
        margin-bottom: 2px !important;
    }

    .pp-marker-popup-title {
        font-size: 30px !important;
        line-height: 1.18 !important;
        letter-spacing: -.01em;
        margin-bottom: 2px !important;
        color: #12362f !important;
    }

    .pp-marker-popup-level {
        margin: 4px 0 8px !important;
    }

    .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 8px 0 10px !important;
    }

    .pp-marker-popup-metrics .metric {
        min-height: 92px !important;
        padding: 13px 14px !important;
        border-radius: 18px !important;
        border: 1px solid rgba(218,232,226,.98) !important;
        background: linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%) !important;
        box-shadow: 0 10px 24px rgba(23, 58, 52, .08) !important;
    }

    .pp-marker-popup-metrics .metric span {
        font-size: 12px !important;
        font-weight: 900 !important;
        color: #667d77 !important;
        margin-bottom: 6px !important;
    }

    .pp-marker-popup-metrics .metric strong {
        font-size: 30px !important;
        color: #122f2a !important;
    }

    .pp-marker-ref-title {
        color: #173a34 !important;
        font-size: 15px !important;
        font-weight: 900 !important;
        margin-top: 8px !important;
    }

    .pp-marker-ref-list {
        border-radius: 16px !important;
        background: #ffffff !important;
        border: 1px solid #e1ece7 !important;
        padding: 8px !important;
        max-height: 132px !important;
        box-shadow: 0 8px 20px rgba(23,58,52,.06) !important;
    }

    .pp-marker-popup-updated {
        color: #667d77 !important;
        font-weight: 800 !important;
    }

    .pp-marker-history-inline {
        border-left: 1px solid #dfebe6 !important;
        padding-left: 20px !important;
    }

    .pp-marker-history-head {
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    .pp-marker-history-head strong {
        font-size: 22px !important;
        line-height: 1.2 !important;
        color: #12362f !important;
    }

    .pp-marker-history-head span {
        min-height: 30px !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        background: #173a34 !important;
        color: #ffffff !important;
    }

    .pp-marker-history-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .pp-marker-history-stat {
        min-height: 82px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, #ffffff 0%, #f6fbf8 100%) !important;
        box-shadow: 0 10px 24px rgba(23, 58, 52, .08) !important;
    }

    .pp-marker-history-stat span {
        font-size: 12px !important;
        color: #667d77 !important;
        font-weight: 900 !important;
    }

    .pp-marker-history-stat strong {
        display: inline-block;
        font-size: 24px !important;
        color: #173a34 !important;
        line-height: 1.1 !important;
        margin-top: 2px;
    }

    .pp-marker-history-stat small {
        font-size: 11px !important;
        color: #667d77 !important;
    }

    .pp-marker-history-chart-wrap {
        height: 310px !important;
        padding: 14px !important;
        border-radius: 20px !important;
        background:
            linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(248,252,250,.98) 100%) !important;
        border: 1px solid #dce9e4 !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 16px 36px rgba(23,58,52,.10) !important;
    }
}

@media (min-width: 1200px) {
    .pp-marker-popup {
        width: min(1080px, calc(100vw - 96px)) !important;
        max-width: min(1080px, calc(100vw - 96px)) !important;
        grid-template-columns: 350px minmax(560px, 1fr) !important;
    }

    .pp-marker-history-chart-wrap {
        height: 330px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .pp-marker-popup {
        width: min(760px, calc(100vw - 24px)) !important;
        max-width: min(760px, calc(100vw - 24px)) !important;
        padding: 18px !important;
    }

    .pp-marker-history-summary {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    }

    .pp-marker-history-chart-wrap {
        height: 240px !important;
    }
}


/* PRO summary cards: 8 useful overview cards */
.pp-summary-grid-pro {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.pp-summary-grid-pro .pp-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 138px;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(31,143,107,.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%) !important;
    border: 1px solid #dce9e4 !important;
    box-shadow: 0 12px 32px rgba(23,58,52,.08) !important;
}

.pp-summary-grid-pro .pp-summary-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: #1f8f6b;
    opacity: .9;
}

.pp-summary-grid-pro .pp-summary-label {
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #5d756e !important;
}

.pp-summary-grid-pro .pp-summary-value {
    font-size: clamp(25px, 2.1vw, 34px) !important;
    letter-spacing: -.02em;
    line-height: 1.05 !important;
    color: #12362f !important;
}

.pp-summary-grid-pro .pp-summary-value small {
    font-size: 12px;
    font-weight: 900;
    color: #6f857f;
}

.pp-summary-grid-pro .pp-summary-note {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #607871 !important;
    font-weight: 800;
}

.pp-summary-card-watch:before { background: #ffc000 !important; }
.pp-summary-card-good:before { background: #92d050 !important; }
.pp-summary-card-trend:before { background: #00b0f0 !important; }
.pp-summary-card-fresh:before { background: #1f8f6b !important; }

.pp-summary-card-watch .pp-summary-value { color: #9a5c00 !important; }
.pp-summary-card-good .pp-summary-value { color: #347a1f !important; }

.pp-summary-time {
    font-size: clamp(25px, 2vw, 32px) !important;
}

#ppTrend24h.is-trend-up { color: #b45309 !important; }
#ppTrend24h.is-trend-down { color: #15803d !important; }
#ppTrend24h.is-trend-stable { color: #2563eb !important; }

@media (max-width: 1199px) {
    .pp-summary-grid-pro {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575px) {
    .pp-summary-grid-pro {
        grid-template-columns: 1fr !important;
    }

    .pp-summary-grid-pro .pp-summary-card {
        min-height: 118px;
    }
}


/* Temple profile bridge integration */
.pp-temple-profile-slot {
    margin-top: 12px;
    width: 100%;
}

.pp-marker-popup .pp-temple-profile-slot {
    grid-column: 1;
    margin-top: 6px;
}

.pp-temple-profile-fallback {
    border: 1px solid #dce9e4;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px;
    box-shadow: 0 8px 20px rgba(23, 58, 52, .06);
}

.pp-temple-fallback-title {
    color: #607871;
    font-size: 12px;
    font-weight: 900;
    margin-bottom: 4px;
}

.pp-temple-fallback-name {
    color: #12362f;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.pp-temple-fallback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 9px;
    padding: 7px 12px;
    border-radius: 999px;
    background: #173a34;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none !important;
}

.pp-temple-fallback-note {
    margin-top: 7px;
    color: #6b807a;
    font-size: 12px;
    font-weight: 800;
}

@media (min-width: 992px) {
    .pp-marker-popup .pp-temple-profile-slot {
        grid-column: 1;
    }
}

@media (max-width: 991px) {
    .pp-marker-popup .pp-temple-profile-slot {
        margin-top: 10px;
    }
}


/* Marker popup layout v2: clean two-panel dashboard + AQI chart */
.pp-marker-popup {
    overflow: visible;
}

.pp-marker-popup-layout {
    display: block;
}

.pp-marker-air-panel,
.pp-marker-aqi-panel {
    min-width: 0;
}

.pp-marker-aqi-panel .pp-marker-history-inline {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
}

@media (min-width: 992px) {
    .pp-marker-popup {
        display: block !important;
        width: min(1060px, calc(100vw - 96px)) !important;
        max-width: min(1060px, calc(100vw - 96px)) !important;
        padding: 18px !important;
        border-radius: 26px !important;
    }

    .pp-marker-popup-layout {
        display: grid !important;
        grid-template-columns: 360px minmax(520px, 1fr);
        gap: 18px;
        align-items: stretch;
    }

    .pp-marker-air-panel,
    .pp-marker-aqi-panel {
        border: 1px solid #dfece7;
        background: rgba(255,255,255,.96);
        border-radius: 22px;
        padding: 16px;
        box-shadow: 0 14px 34px rgba(23,58,52,.08);
    }

    .pp-marker-air-panel {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .pp-marker-aqi-panel {
        background:
            radial-gradient(circle at 90% 8%, rgba(0,176,240,.10), transparent 30%),
            linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
    }

    .pp-marker-popup-type,
    .pp-marker-popup-title,
    .pp-marker-popup-level,
    .pp-marker-popup-metrics,
    .pp-marker-ref-title,
    .pp-marker-ref-list,
    .pp-marker-popup-updated,
    .pp-marker-popup .pp-temple-profile-slot,
    .pp-marker-history-inline {
        grid-column: auto !important;
        grid-row: auto !important;
    }

    .pp-marker-popup-title {
        font-size: 28px !important;
        line-height: 1.22 !important;
        padding-right: 34px !important;
        margin-bottom: 0 !important;
    }

    .pp-marker-popup-level {
        margin: 0 !important;
    }

    .pp-marker-popup-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        margin: 2px 0 0 !important;
    }

    .pp-marker-popup-metrics .metric {
        min-height: 80px !important;
        padding: 11px 12px !important;
        border-radius: 17px !important;
    }

    .pp-marker-popup-metrics .metric strong {
        font-size: 25px !important;
    }

    .pp-marker-ref-title {
        margin: 2px 0 0 !important;
    }

    .pp-marker-ref-list {
        max-height: 110px !important;
        overflow-y: auto !important;
    }

    .pp-marker-popup-updated {
        margin-top: 0 !important;
    }

    .pp-marker-popup .pp-temple-profile-slot {
        margin-top: 2px !important;
    }

    .pp-marker-history-head strong {
        font-size: 24px !important;
        letter-spacing: -.01em;
    }

    .pp-marker-history-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 12px 0 !important;
    }

    .pp-marker-history-stat {
        min-height: 84px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .pp-marker-history-stat strong {
        font-size: 27px !important;
    }

    .pp-marker-history-chart-wrap {
        height: 330px !important;
        border-radius: 20px !important;
        padding: 14px !important;
    }
}

@media (min-width: 1200px) {
    .pp-marker-popup {
        width: min(1140px, calc(100vw - 110px)) !important;
        max-width: min(1140px, calc(100vw - 110px)) !important;
    }

    .pp-marker-popup-layout {
        grid-template-columns: 380px minmax(600px, 1fr);
    }

    .pp-marker-history-chart-wrap {
        height: 350px !important;
    }
}

@media (max-width: 991px) {
    .pp-marker-popup-layout {
        display: block !important;
    }

    .pp-marker-aqi-panel {
        margin-top: 12px;
    }

    .pp-marker-aqi-panel .pp-marker-history-inline {
        margin-top: 12px !important;
        padding-top: 12px !important;
        border-top: 1px solid #e4efea !important;
    }
}

@media (max-width: 767px) {
    .pp-marker-popup {
        max-height: min(86dvh, 720px) !important;
    }

    .pp-marker-history-chart-wrap {
        height: 230px !important;
    }
}


/* Compact temple profile card: remove long intro/teaser and use 3 action buttons */
.pp-temple-mini-card {
    border: 1px solid #dce9e4;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcfa 100%);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 10px 24px rgba(23, 58, 52, .07);
}

.pp-temple-mini-head {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 11px;
    align-items: start;
}

.pp-temple-mini-logo {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    overflow: hidden;
    background: #eef7f2;
    border: 1px solid #d6e7df;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #173a34;
    font-weight: 900;
    font-size: 15px;
}

.pp-temple-mini-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-temple-mini-text {
    min-width: 0;
}

.pp-temple-mini-kicker {
    color: #607871;
    font-size: 11px;
    font-weight: 900;
    margin-bottom: 2px;
}

.pp-temple-mini-name {
    color: #12362f;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.pp-temple-mini-line {
    color: #5e746e;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 800;
    margin-top: 3px;
    word-break: break-word;
}

.pp-temple-mini-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 11px;
}

.pp-temple-mini-actions a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none !important;
    background: #173a34;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 900;
    padding: 6px 8px;
    white-space: nowrap;
}

.pp-temple-mini-actions a:nth-child(2) {
    background: #2563eb;
}

.pp-temple-mini-actions a:nth-child(3) {
    background: #b45309;
}

/* hide possible long description/teaser from external bridge card if old markup leaks in */
.pp-temple-profile-slot .temple-desc,
.pp-temple-profile-slot .profile-desc,
.pp-temple-profile-slot .short-desc,
.pp-temple-profile-slot .description,
.pp-temple-profile-slot [data-profile-desc],
.pp-temple-profile-slot [data-temple-desc] {
    display: none !important;
}

@media (min-width: 992px) {
    .pp-marker-air-panel .pp-temple-mini-card {
        margin-top: 2px;
    }

    .pp-temple-mini-actions a {
        font-size: 11.5px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media (max-width: 420px) {
    .pp-temple-mini-head {
        grid-template-columns: 52px 1fr;
    }

    .pp-temple-mini-logo {
        width: 52px;
        height: 52px;
    }

    .pp-temple-mini-actions {
        grid-template-columns: 1fr;
    }
}


/* Single temple detail button */
.pp-temple-mini-actions-single {
    grid-template-columns: 1fr !important;
}

.pp-temple-mini-actions-single a {
    width: 100%;
    min-height: 38px;
    background: #173a34 !important;
    font-size: 13px;
}

.pp-temple-mini-actions-single a::after {
    content: " →";
    font-weight: 900;
}


/* Dual AQI + PM2.5 history chart */
.pp-marker-history-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.pp-history-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.pp-marker-history-chart-wrap,
.pp-history-chart-wrap {
    background:
        radial-gradient(circle at 12% 10%, rgba(37,99,235,.06), transparent 26%),
        radial-gradient(circle at 88% 12%, rgba(249,115,22,.07), transparent 28%),
        #ffffff !important;
}

@media (max-width: 767px) {
    .pp-marker-history-summary,
    .pp-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pp-marker-history-stat strong,
    .pp-history-stat strong {
        font-size: 18px !important;
    }
}


/* Fullscreen marker popup overlay */
body.pp-marker-fullscreen-open {
    overflow: hidden !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    background: rgba(7, 25, 23, .68) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen:before,
.pp-marker-popup.pp-marker-popup-fullscreen:after,
.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-arrow {
    display: none !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-close {
    position: fixed !important;
    top: 20px !important;
    right: 22px !important;
    z-index: 100002 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #173a34 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.22) !important;
    font-size: 28px !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-layout {
    width: min(1180px, calc(100vw - 58px)) !important;
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: 390px minmax(0, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 7% 8%, rgba(31,143,107,.10), transparent 28%),
        radial-gradient(circle at 92% 10%, rgba(37,99,235,.10), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f7fcfa 100%) !important;
    border: 1px solid rgba(220,233,228,.98) !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.34) !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-air-panel,
.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-aqi-panel {
    min-width: 0 !important;
    border: 1px solid #dfece7 !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 24px !important;
    padding: 18px !important;
    box-shadow: 0 14px 34px rgba(23,58,52,.08) !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-title {
    font-size: clamp(25px, 2.1vw, 34px) !important;
    line-height: 1.18 !important;
    padding-right: 0 !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-metrics .metric {
    min-height: 86px !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-aqi-panel .pp-marker-history-inline {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-history-head strong {
    font-size: clamp(22px, 2vw, 30px) !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-history-chart-wrap {
    height: min(46dvh, 430px) !important;
    min-height: 310px !important;
}

.pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-history-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

@media (max-width: 991px) {
    .pp-marker-popup.pp-marker-popup-fullscreen {
        align-items: flex-end !important;
        justify-content: center !important;
        padding: 12px !important;
    }

    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-layout {
        width: 100% !important;
        max-height: calc(100dvh - 24px) !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 14px !important;
        border-radius: 24px 24px 18px 18px !important;
    }

    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-close {
        top: 14px !important;
        right: 14px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-history-chart-wrap {
        height: 280px !important;
        min-height: 240px !important;
    }
}

@media (max-width: 575px) {
    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-history-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .pp-marker-popup.pp-marker-popup-fullscreen .pp-marker-popup-metrics .metric strong {
        font-size: 20px !important;
    }
}