/* ============================================================
 * ConceptStoreAI · P4 styles
 * Loaded last — coexists with p3-override.css tokens.
 * Uses --bg, --paper, --ink, --muted, --line, --blue, --orange,
 * --blue-soft, --orange-soft, --blue-deep, etc.
 * ============================================================ */

/* ─── Generic primitives ─────────────────────────────────── */
.p4-page { max-width: 1240px; margin: 0 auto; padding: 32px 28px 80px; }
.p4-page-title { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 6px; }
.p4-page-sub  { font-size: 14px; color: var(--muted); margin: 0 0 24px; line-height: 1.55; }
.p4-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }

.p4-crumbs { display: flex; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 16px; align-items: center; }
.p4-crumbs a { color: var(--muted); }
.p4-crumbs span { opacity: 0.55; }

.p4-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.p4-card-soft { background: var(--bg-soft, #F1F3F6); border: none; }
.p4-card-head { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.p4-card-head-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }

.p4-muted { color: var(--muted); font-size: 12.5px; }
.p4-link  { color: var(--ink); font-size: 13px; cursor: pointer; }
.p4-link-blue { color: var(--blue); font-size: 13px; font-weight: 600; cursor: pointer; }
.p4-link-blue:hover { text-decoration: underline; }

.p4-row-gap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Buttons */
.p4-btn       { padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--ink); transition: background .15s, border-color .15s; display: inline-flex; gap: 6px; align-items: center; justify-content: center; line-height: 1; }
.p4-btn-blue  { background: var(--blue); color: #fff; }
.p4-btn-blue:hover { background: var(--blue-deep); }
.p4-btn-soft  { background: var(--blue-soft); color: var(--blue-deep); }
.p4-btn-ghost { background: var(--paper); border-color: var(--line); color: var(--ink); }
.p4-btn-ghost:hover { background: var(--bg); }
.p4-btn-block { display: flex; width: 100%; padding: 14px 18px; }
.p4-btn-text  { background: none; color: var(--ink); padding: 8px 14px; font-weight: 600; }
.p4-btn-text:hover { background: var(--bg); border-radius: 8px; }

/* Pills / tags */
.p4-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.p4-pill-blue   { background: var(--blue-soft); color: var(--blue-deep); }
.p4-pill-orange { background: var(--orange-soft); color: var(--orange-deep); }
.p4-pill-violet { background: #ECE6FF; color: #5A3FE0; }
.p4-pill-soft   { background: var(--bg); color: var(--muted); }

/* Toggles */
.p4-toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; }
.p4-toggle-row + .p4-toggle-row { border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 4px; }
.p4-toggle-icon { width: 22px; text-align: center; color: var(--muted); }
.p4-toggle-label { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.p4-toggle { width: 36px; height: 20px; border-radius: 999px; background: #D7D9E0; position: relative; transition: background .15s; flex-shrink: 0; }
.p4-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,0.18); }
.p4-toggle.on { background: var(--blue); }
.p4-toggle.on::after { left: 18px; }

/* Avatar */
.p4-avatar { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; color: #fff; font-weight: 700; font-size: 14px; }
.p4-avatar-blue   { background: var(--blue); }
.p4-avatar-orange { background: var(--orange); }

/* Chips */
.p4-chip { padding: 7px 14px; border-radius: 999px; background: var(--bg); border: 1px solid transparent; font-size: 12.5px; color: var(--ink); cursor: pointer; font-weight: 600; }
.p4-chip:hover { background: var(--blue-soft); color: var(--blue-deep); }
.p4-chip.active { background: var(--blue-soft); color: var(--blue-deep); }

/* Toast */
.p4-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; font-weight: 600; z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.p4-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Three-column app layout (advisor / support) ───────── */
.p4-app { display: grid; grid-template-columns: 260px 1fr 320px; min-height: calc(100vh - 90px); background: var(--bg); }
.p4-app.support { grid-template-columns: 320px 1fr; }
.p4-side { background: var(--paper); border-right: 1px solid var(--line); padding: 20px 16px; }
.p4-side-cta { width: 100%; padding: 10px 14px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); margin-bottom: 18px; }
.p4-side-cta:hover { background: var(--bg); }
.p4-side-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); padding: 4px 12px; margin-bottom: 6px; }
.p4-side-list { display: flex; flex-direction: column; gap: 2px; }
.p4-side-row { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; }
.p4-side-row:hover { background: var(--bg); }
.p4-side-row.active { background: var(--bg); font-weight: 700; }

.p4-ticket-row { display: flex; gap: 10px; align-items: center; padding: 12px; }
.p4-ticket-lang { font-family: 'JetBrains Mono', monospace; background: var(--blue-soft); color: var(--blue-deep); font-size: 10px; padding: 3px 7px; border-radius: 5px; font-weight: 700; flex-shrink: 0; }
.p4-ticket-body { flex: 1; min-width: 0; overflow: hidden; }
.p4-ticket-title { font-weight: 700; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p4-ticket-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p4-ticket-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }

.p4-main { display: flex; flex-direction: column; min-width: 0; }
.p4-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); background: var(--paper); }
.p4-header-text { flex: 1; min-width: 0; }
.p4-header-title { font-weight: 700; font-size: 15px; color: var(--ink); }
.p4-header-sub { font-size: 12px; color: var(--muted); }

.p4-thread { flex: 1; padding: 28px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; background: var(--bg); }

.p4-bubble-row { display: flex; gap: 10px; max-width: 75%; }
.p4-bubble-row-user { margin-left: auto; }
.p4-bubble-row-ai .p4-avatar { width: 32px; height: 32px; font-size: 13px; }
.p4-bubble { padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 1.55; }
.p4-bubble-user { background: var(--ink); color: #fff; border-bottom-right-radius: 4px; max-width: 100%; }
.p4-bubble-ai   { background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.p4-bubble p { margin: 0 0 10px; }
.p4-bubble p:last-child { margin: 0; }
.p4-translate-tag { font-size: 11px; color: var(--muted); margin-top: 6px; padding-left: 4px; }

.p4-empty { margin: auto; text-align: center; max-width: 320px; }
.p4-empty-mark { width: 56px; height: 56px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 28px; font-weight: 800; margin: 0 auto 14px; }
.p4-empty h3 { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 6px; }
.p4-empty p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }

.p4-composer { background: var(--paper); border-top: 1px solid var(--line); padding: 18px 24px; }
.p4-composer-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); transition: border-color .15s; }
.p4-composer-row:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-softer); }
.p4-composer-plus { color: var(--muted); font-size: 16px; font-weight: 700; }
.p4-composer-row input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: var(--ink); }
.p4-suggest-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.p4-lang-row { display: flex; gap: 16px; align-items: center; padding: 0 4px 12px; flex-wrap: wrap; font-size: 13px; }
.p4-lang-label { color: var(--muted); margin-right: 8px; }
.p4-lang-tab { background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px 0; font-weight: 600; }
.p4-lang-tab.active { color: var(--blue); border-bottom: 2px solid var(--blue); }

/* Recommendation cards inside ai bubble */
.p4-rec-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 12px; }
.p4-rec-card { background: var(--bg); border-radius: 12px; padding: 12px; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.p4-rec-card:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.p4-rec-art { aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.p4-rec-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p4-rec-tag { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }
.p4-rec-price { font-weight: 800; font-size: 14px; color: var(--ink); }
.p4-rec-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* Right rail (advisor) */
.p4-rail { background: var(--paper); border-left: 1px solid var(--line); }
.p4-rail-pad { padding: 22px 18px; }
.p4-rail-title { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 14px; }
.p4-rail-empty { font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.p4-rail-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.p4-rail-row { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; }
.p4-rail-row:hover { background: var(--bg); }
.p4-rail-art { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.p4-rail-info { flex: 1; min-width: 0; }
.p4-rail-name { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p4-rail-price { font-size: 12.5px; color: var(--muted); }
.p4-rail-rm { width: 22px; height: 22px; border-radius: 999px; background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.p4-rail-rm:hover { background: var(--bg); color: var(--ink); }
.p4-rail-savings { background: var(--blue-soft); color: var(--blue-deep); padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-size: 12.5px; line-height: 1.5; }
.p4-rail-savings strong { display: block; font-size: 13.5px; margin-bottom: 2px; }

/* ─── Help center ─────────────────────────────────────── */
.p4-help-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.p4-help-search-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; }
.p4-help-search { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); margin-bottom: 14px; }
.p4-help-search span { color: var(--muted); font-size: 18px; }
.p4-help-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: var(--ink); }
.p4-help-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.p4-help-results { display: flex; flex-direction: column; gap: 8px; }
.p4-help-item { background: var(--bg); border-radius: 10px; padding: 12px 16px; }
.p4-help-item summary { font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; list-style: none; }
.p4-help-item summary::-webkit-details-marker { display: none; }
.p4-help-item[open] summary { color: var(--blue-deep); }
.p4-help-a { font-size: 13px; line-height: 1.6; color: var(--ink2); margin-top: 8px; }
.p4-help-meta { font-size: 11px; color: var(--muted); margin-top: 6px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.p4-help-empty { text-align: center; padding: 32px 16px; color: var(--muted); font-size: 13.5px; }

.p4-help-side { display: flex; flex-direction: column; gap: 14px; }
.p4-help-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.p4-help-card-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.p4-help-card-title { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-help-card-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; line-height: 1.5; }
.p4-help-link { color: var(--blue); font-weight: 600; font-size: 13.5px; display: inline-block; margin-top: 4px; }

/* ─── Passkey ─────────────────────────────────────────── */
.p4-passkey { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 90px); background: var(--bg); }
.p4-passkey-left { padding: 80px 60px; background: linear-gradient(160deg, var(--blue-softer), var(--bg)); display: flex; flex-direction: column; justify-content: center; }
.p4-passkey-left h1 { font-size: 38px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; margin: 16px 0 16px; }
.p4-passkey-left p { font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 380px; }
.p4-passkey-left .p4-pill { align-self: flex-start; }
.p4-passkey-right { padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; align-items: stretch; max-width: 480px; }
.p4-passkey-kicker { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--blue); font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.p4-passkey-email { font-size: 26px; font-weight: 800; color: var(--ink); margin-bottom: 26px; cursor: text; }
.p4-passkey-emailInput { display: none; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: 16px; margin-bottom: 26px; outline: none; }
.p4-passkey-emailInput:focus { border-color: var(--blue); }
.p4-passkey-prompt { background: var(--blue-softer); border: 1px solid var(--blue); border-radius: 16px; padding: 32px 24px; text-align: center; margin-bottom: 22px; }
.p4-passkey-fingerprint { width: 56px; height: 56px; border-radius: 999px; background: var(--paper); border: 2px solid var(--blue); color: var(--blue); display: grid; place-items: center; font-size: 24px; margin: 0 auto 16px; }
.p4-passkey-prompt-title { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.p4-passkey-prompt-sub { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.p4-passkey-waiting { font-size: 12.5px; color: var(--blue); font-weight: 600; }
.p4-passkey-or { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; }
.p4-passkey-or::before, .p4-passkey-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.p4-passkey-or span { font-size: 12px; color: var(--muted); }
.p4-passkey-alt { padding: 12px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; margin-bottom: 10px; }
.p4-passkey-alt:hover { background: var(--bg); }
.p4-passkey-alt-text { background: none; border: none; color: var(--ink); padding: 12px; font-size: 14px; cursor: pointer; }
.p4-passkey-alt-text:hover { text-decoration: underline; }
.p4-passkey-footer { background: var(--bg); padding: 12px 14px; border-radius: 10px; font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.55; }
.p4-passkey-prompt-success { background: #DCF7E8 !important; border-color: #22C39A !important; }

/* ─── Account-style two-column layout (Family) ────────── */
.p4-acct-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.p4-acct-side { display: flex; flex-direction: column; gap: 2px; }
.p4-acct-side-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--faint); padding: 6px 0 8px; }
.p4-acct-side-row { padding: 9px 12px; border-radius: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.p4-acct-side-row:hover { background: var(--bg); }
.p4-acct-side-row.active { background: var(--blue-soft); color: var(--blue-deep); font-weight: 700; }

.p4-acct-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.p4-acct-rail { display: flex; flex-direction: column; gap: 16px; }

/* ─── Family ──────────────────────────────────────────── */
.p4-fam-list { display: flex; flex-direction: column; gap: 8px; }
.p4-fam-member { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 10px; }
.p4-fam-member:hover { background: var(--bg); }
.p4-fam-info { flex: 1; min-width: 0; }
.p4-fam-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-fam-role { font-weight: 500; font-size: 12px; color: var(--muted); }
.p4-fam-right { text-align: right; }
.p4-fam-pending { display: flex; align-items: center; gap: 10px; padding: 12px; border-top: 1px solid var(--border-soft); margin-top: 10px; flex-wrap: wrap; font-size: 12.5px; }

.p4-fam-approval { padding: 12px; }
.p4-fam-approval + .p4-fam-approval { border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 4px; }
.p4-fam-approval-card { display: flex; gap: 10px; align-items: center; padding: 10px; background: var(--bg); border-radius: 10px; margin: 8px 0 12px; }
.p4-fam-approval-card .p4-rec-art { width: 40px; height: 40px; }
.p4-fam-approval-card .p4-rec-name { font-size: 13.5px; }

/* ─── Subscriptions ───────────────────────────────────── */
.p4-sub-groups { display: flex; flex-direction: column; gap: 6px; }
.p4-sub-group { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.p4-sub-group:first-child { border-top: none; padding-top: 4px; }
.p4-sub-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; flex-wrap: wrap; }
.p4-sub-group-head strong { font-size: 15px; color: var(--ink); }
.p4-sub-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.p4-sub-row .p4-rec-art { width: 36px; height: 36px; }
.p4-sub-name { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.p4-sub-price { font-weight: 700; font-size: 13.5px; color: var(--ink); }

.p4-stat-big { font-size: 36px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; line-height: 1.1; }
.p4-spark { margin-top: 14px; }

.p4-freq-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.p4-freq-chip { padding: 10px 0; border-radius: 8px; border: 1px solid var(--line); background: var(--paper); font-size: 13px; font-weight: 600; cursor: pointer; }
.p4-freq-chip.active { background: var(--blue-softer); border-color: var(--blue); color: var(--blue-deep); }

/* ─── Pickup ──────────────────────────────────────────── */
.p4-pickup-page { padding: 0; max-width: none; }
.p4-pickup-grid { display: grid; grid-template-columns: 380px 1fr; min-height: calc(100vh - 90px); }
.p4-pickup-side { padding: 28px 22px; background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; }
.p4-pickup-addr { font-size: 22px; font-weight: 800; color: var(--ink); margin: 4px 0 14px; letter-spacing: -0.01em; }
.p4-pickup-filters { display: flex; gap: 8px; margin: 14px 0 18px; flex-wrap: wrap; }
.p4-pickup-list { display: flex; flex-direction: column; gap: 6px; }
.p4-pickup-row { display: flex; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; align-items: flex-start; }
.p4-pickup-row:hover { background: var(--bg); }
.p4-pickup-row.active { background: var(--blue-softer); }
.p4-pickup-pin-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.p4-pickup-row.active .p4-pickup-pin-mark { background: var(--blue); color: #fff; }
.p4-pickup-info { flex: 1; min-width: 0; }
.p4-pickup-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p4-pickup-meta { font-size: 12.5px; color: var(--blue); font-weight: 600; margin-top: 2px; }
.p4-pickup-dist { font-size: 12px; color: var(--muted); flex-shrink: 0; }

/* Map */
.p4-pickup-map { position: relative; background: #EBEFF6; overflow: hidden; }
.p4-map-canvas { position: absolute; inset: 0; }
.p4-map-grid { position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.4) 1px, transparent 1px),
    linear-gradient(135deg, #DCE3EE 0%, #E8EEF6 100%);
  background-size: 120px 120px, 120px 120px, 100% 100%;
}
.p4-map-park { position: absolute; left: 60%; top: 28%; width: 24%; height: 30%; background: #DCEFE0; border-radius: 16px; }
.p4-map-water { position: absolute; right: -10%; bottom: -10%; width: 70%; height: 40%; background: #C8DBEE; border-radius: 50% 50% 0 0 / 80% 80% 0 0; transform: rotate(-12deg); }
.p4-map-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; }
.p4-map-pin-bg { width: 12px; height: 12px; background: var(--ink); border-radius: 999px; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.p4-map-pin-label { display: inline-block; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
.p4-map-pin.active .p4-map-pin-label { background: var(--blue); }
.p4-map-pin.active .p4-map-pin-bg { background: var(--blue); }
.p4-map-me { position: absolute; width: 16px; height: 16px; background: var(--blue); border: 3px solid #fff; border-radius: 999px; transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(31,111,235,0.18); }
.p4-map-popover { position: absolute; bottom: 32px; left: 32px; right: 32px; max-width: 480px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; box-shadow: 0 16px 40px rgba(0,0,0,0.12); }
.p4-map-popover .p4-pickup-pin-mark { background: var(--blue-soft); }
.p4-map-pop-info { min-width: 0; }
.p4-map-pop-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

/* ─── Review (deep dive) ─────────────────────────────── */
.p4-review { max-width: 1100px; }
.p4-review-head { margin-bottom: 22px; }
.p4-review-head h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.022em; color: var(--ink); line-height: 1.1; margin: 12px 0 18px; }
.p4-review-author { display: flex; align-items: center; gap: 12px; }
.p4-review-author .p4-avatar { width: 40px; height: 40px; }
.p4-author-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-review-actions { margin-left: auto; display: flex; gap: 8px; }

.p4-review-hero { width: 100%; aspect-ratio: 2.5 / 1; border-radius: 18px; overflow: hidden; margin: 0 0 28px; }

.p4-review-body { display: grid; grid-template-columns: 220px 1fr; gap: 36px; }
.p4-review-toc { position: sticky; top: 90px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.p4-toc-link { padding: 8px 12px; border-radius: 8px; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.p4-toc-link:hover { color: var(--ink); background: var(--bg); }
.p4-toc-link.active { color: var(--blue); border-left: 2px solid var(--blue); padding-left: 10px; font-weight: 700; }
.p4-toc-score { margin-top: 18px; padding: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }

.p4-review-prose { font-size: 16px; line-height: 1.7; color: var(--ink2); max-width: 720px; }
.p4-review-prose h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 36px 0 14px; }
.p4-review-prose p  { margin: 0 0 16px; }
.p4-review-list { padding-left: 20px; }
.p4-review-list li { margin-bottom: 8px; }
.p4-review-cta { display: flex; gap: 10px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-soft); flex-wrap: wrap; }

.p4-freq-card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin: 18px 0 24px; }
.p4-freq-chart { margin: 14px 0 8px; }
.p4-freq-legend { display: flex; gap: 20px; font-size: 12.5px; color: var(--muted); }
.p4-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; vertical-align: middle; }
.p4-dot-blue   { background: var(--blue); }
.p4-dot-violet { background: #7C5CFF; }

/* ─── PDP injections (Subscribe & save, Deep dive teaser) ─── */
.p4-pdp-subscribe { margin: 16px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.p4-pdp-sub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p4-pdp-sub-radio { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .15s; position: relative; }
.p4-pdp-sub-radio input { position: absolute; opacity: 0; pointer-events: none; }
.p4-pdp-sub-radio.active { border-color: var(--blue); background: var(--blue-softer); }
.p4-pdp-sub-title { font-weight: 700; font-size: 13.5px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.p4-pdp-sub-price { font-weight: 800; font-size: 18px; color: var(--ink); }
.p4-pdp-sub-radio.active .p4-pdp-sub-price { color: var(--blue-deep); }
.p4-pdp-sub-meta { font-size: 12.5px; color: var(--muted); padding: 0 4px; }

.p4-pdp-deepdive { margin: 36px 0; }
.p4-deepdive-row { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center; padding: 4px; border-radius: 12px; cursor: pointer; }
.p4-deepdive-row:hover { background: var(--bg); }
.p4-deepdive-art { aspect-ratio: 2.5/1; border-radius: 12px; overflow: hidden; }
.p4-deepdive-info > * + * { margin-top: 6px; }
.p4-deepdive-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.p4-deepdive-score { font-size: 13px; color: var(--blue); font-weight: 700; }

/* ─── Checkout pickup option ──────────────────────────── */
.p4-co-pickup { margin: 14px 0 24px; }
.p4-co-toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.p4-co-toggle { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 13px; }
.p4-co-toggle.active { border-color: var(--blue); background: var(--blue-softer); }
.p4-co-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.p4-co-toggle strong { font-size: 13.5px; color: var(--ink); }
.p4-co-toggle .p4-muted { font-size: 12px; }
.p4-co-pickup-info { flex: 1; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 980px) {
  .p4-app { grid-template-columns: 1fr; }
  .p4-app .p4-side { display: none; }
  .p4-app .p4-rail { display: none; }
  .p4-help-grid { grid-template-columns: 1fr; }
  .p4-acct-layout { grid-template-columns: 1fr; }
  .p4-acct-grid { grid-template-columns: 1fr; }
  .p4-passkey { grid-template-columns: 1fr; }
  .p4-passkey-left { padding: 40px 28px; }
  .p4-passkey-right { padding: 24px 28px 60px; }
  .p4-pickup-grid { grid-template-columns: 1fr; }
  .p4-pickup-side { max-height: 50vh; }
  .p4-review-body { grid-template-columns: 1fr; }
  .p4-review-toc { position: static; flex-direction: row; flex-wrap: wrap; overflow-x: auto; }
  .p4-toc-score { display: none; }
}

@media (max-width: 640px) {
  .p4-page { padding: 20px 16px 60px; }
  .p4-page-title { font-size: 24px; }
  .p4-rec-grid { grid-template-columns: 1fr; }
  .p4-co-toggle-row { grid-template-columns: 1fr; }
  .p4-pdp-sub-row { grid-template-columns: 1fr; }
  .p4-deepdive-row { grid-template-columns: 1fr; }
  .p4-deepdive-art { aspect-ratio: 16/9; }
}

/* ─── Dark mode handled by tokens ─────────────────────── */
[data-theme="dark"] .p4-pickup-map { background: #131726; }
[data-theme="dark"] .p4-map-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(135deg, #1A1F32 0%, #131726 100%);
}
[data-theme="dark"] .p4-map-park { background: #1F3225; }
[data-theme="dark"] .p4-map-water { background: #1A2A3D; }

/* ─── Additional P4 components ─────────────────────────── */
.p4-skeleton { height: 80px; background: linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 50%, var(--bg) 100%); background-size: 200% 100%; animation: p4-shimmer 1.4s linear infinite; border-radius: 12px; margin-bottom: 12px; }
@keyframes p4-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.p4-bubble-thinking { color: var(--muted); font-style: italic; }

/* Passkey extras */
.p4-passkey-emailInput-visible { display: block; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; outline: none; background: var(--paper); color: var(--ink); }
.p4-passkey-emailInput-visible:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-softer); }

/* Notification badge */
.p4-notif-badge { display: inline-block; background: var(--orange); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; min-width: 16px; text-align: center; }
.p4-notif-row { display: grid; grid-template-columns: 36px 1fr auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border-soft); cursor: pointer; }
.p4-notif-row:last-child { border-bottom: none; }
.p4-notif-row.unread { background: var(--blue-softer); padding-left: 12px; padding-right: 12px; border-radius: 8px; }
.p4-notif-info { min-width: 0; }
.p4-notif-title { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.p4-notif-time { font-size: 11.5px; color: var(--muted); }

/* Group buy + bargain shared list */
.p4-gb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.p4-gb-card { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 14px; cursor: pointer; }
.p4-gb-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.p4-gb-art { aspect-ratio: 1; border-radius: 10px; overflow: hidden; }
.p4-gb-info > * + * { margin-top: 6px; }
.p4-gb-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.p4-gb-pricing { display: flex; gap: 8px; align-items: baseline; }
.p4-gb-price-now { font-weight: 800; font-size: 17px; color: var(--orange-deep); }
.p4-gb-price-old { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.p4-gb-meta { display: flex; gap: 8px; align-items: center; }
.p4-gb-bar { height: 8px; background: var(--bg-soft); border-radius: 999px; overflow: hidden; margin-top: 4px; }
.p4-gb-bar-fill { height: 100%; background: linear-gradient(90deg, var(--orange), var(--blue)); border-radius: 999px; transition: width .3s; }

/* Group buy detail */
.p4-gb-detail { display: grid; grid-template-columns: 360px 1fr; gap: 36px; align-items: start; }
.p4-gb-hero { aspect-ratio: 1; border-radius: 18px; overflow: hidden; }
.p4-gb-detail-info > * + * { margin-top: 14px; }
.p4-gb-detail-title { font-size: 28px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.p4-gb-pricing-large { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.p4-gb-pricing-large .p4-gb-price-now { font-size: 28px; }
.p4-gb-progress { font-size: 13px; color: var(--muted); }
.p4-gb-members { display: flex; gap: 6px; flex-wrap: wrap; }
.p4-avatar-empty { background: var(--bg-soft) !important; color: var(--faint); border: 1px dashed var(--line); }

/* Bargain detail */
.p4-bargain-card { max-width: 540px; margin: 0 auto; background: linear-gradient(180deg, #FFE3CC, #FFF6EE 60%, var(--paper)); border-radius: 24px; padding: 28px; }
.p4-bargain-hero { text-align: center; }
.p4-bargain-thumb { width: 96px; height: 96px; margin: 0 auto 14px; border-radius: 16px; overflow: hidden; }
.p4-bargain-hero h1 { font-size: 22px; font-weight: 800; margin: 0 0 14px; color: var(--ink); }
.p4-bargain-prices { display: flex; gap: 10px; justify-content: center; align-items: baseline; margin-bottom: 14px; }
.p4-bargain-now { font-size: 38px; font-weight: 800; color: var(--orange-deep); letter-spacing: -0.02em; }
.p4-bargain-was { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.p4-bargain-helps { background: var(--paper); border-radius: 14px; padding: 16px; margin: 22px 0; }
.p4-bargain-help { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border-soft); }
.p4-bargain-help:first-of-type { border-top: none; }
.p4-bargain-help .p4-avatar { width: 32px; height: 32px; font-size: 13px; }
.p4-bargain-help-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.p4-bargain-help-amt { font-weight: 700; color: var(--orange-deep); }

/* Invite */
.p4-invite-hero { background: linear-gradient(160deg, #1F6FEB, #0E4FB8); color: #fff; padding: 36px 28px; border-radius: 24px; text-align: center; }
.p4-invite-hero .p4-pill { background: rgba(255,255,255,0.18); color: #fff; }
.p4-invite-hero h1 { font-size: 30px; font-weight: 800; margin: 14px 0 10px; letter-spacing: -0.02em; }
.p4-invite-hero p  { color: rgba(255,255,255,0.85); font-size: 14px; margin: 0 0 22px; }
.p4-invite-code { background: rgba(255,255,255,0.12); border: 1px dashed rgba(255,255,255,0.4); border-radius: 14px; padding: 18px; margin: 18px auto; max-width: 360px; }
.p4-invite-code-label { font-size: 11px; letter-spacing: 0.12em; opacity: 0.7; }
.p4-invite-code-value { font-size: 32px; font-weight: 800; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.05em; margin: 8px 0 14px; }
.p4-invite-code .p4-btn { background: #fff; color: var(--blue-deep); }
.p4-invite-progress { max-width: 360px; margin: 18px auto 0; }
.p4-invite-progress-head { display: flex; gap: 10px; align-items: baseline; justify-content: center; margin-bottom: 8px; }
.p4-invite-progress-head strong { font-size: 28px; font-weight: 800; }
.p4-invite-progress-head .p4-muted { color: rgba(255,255,255,0.7); }
.p4-invite-progress .p4-gb-bar { background: rgba(255,255,255,0.2); }
.p4-invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.p4-invite-stats > div { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; }
.p4-invite-stats strong { display: block; font-size: 24px; font-weight: 800; }
.p4-invite-stats .p4-muted { color: rgba(255,255,255,0.7); font-size: 12px; }

/* Story feed */
.p4-story-loading { width: 100%; height: 80vh; background: #0B0F19; }
.p4-story-screen { position: fixed; inset: 0; z-index: 100; color: #fff; overflow: hidden; }
.p4-story-segs { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 4px; z-index: 4; }
.p4-story-seg { flex: 1; height: 3px; background: rgba(255,255,255,0.3); border-radius: 999px; }
.p4-story-seg.active { background: rgba(255,255,255,0.95); }
.p4-story-seg.done   { background: rgba(255,255,255,0.7); }
.p4-story-head { position: absolute; top: 30px; left: 16px; right: 16px; display: flex; gap: 10px; align-items: center; z-index: 4; }
.p4-story-handle { font-weight: 700; }
.p4-story-x { background: none; border: none; color: #fff; font-size: 22px; margin-left: auto; cursor: pointer; }
.p4-story-art { position: absolute; inset: 0; display: grid; place-items: center; }
.p4-story-caption { position: absolute; left: 16px; right: 96px; bottom: 110px; font-size: 16px; line-height: 1.5; z-index: 4; }
.p4-story-tags { margin-top: 10px; font-size: 12px; opacity: 0.7; }
.p4-story-product { position: absolute; left: 16px; right: 96px; bottom: 24px; background: rgba(255,255,255,0.12); backdrop-filter: blur(10px); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; z-index: 4; cursor: pointer; }
.p4-story-product .p4-rec-art { width: 48px; height: 48px; border-radius: 8px; }
.p4-story-product .p4-rec-name { color: #fff; font-weight: 700; font-size: 14px; }
.p4-story-product .p4-muted { color: rgba(255,255,255,0.7); font-size: 12px; }
.p4-story-rail { position: absolute; right: 14px; bottom: 110px; display: flex; flex-direction: column; gap: 18px; z-index: 4; }
.p4-story-action { background: none; border: none; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.p4-story-action span:first-child { font-size: 26px; }
.p4-story-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 22px; cursor: pointer; z-index: 4; }
.p4-story-nav.left { left: 16px; }
.p4-story-nav.right { right: 16px; }