/* ============================================================
 * VIRTUAL PET MINING - FULL RED & WHITE STRUCTURAL THEME
 * ============================================================ */

:root {
    --pm-red-primary: #d32f2f;
    --pm-red-dark: #b71c1c;
    --pm-red-bright: #ff4d4d;
    --pm-red-soft: rgba(211, 47, 47, 0.08);
    --pm-red-border: rgba(211, 47, 47, 0.35);
    --pm-gold: #ffc107;
    --pm-green: #2e7d32;
    --pm-bg-card: #ffffff;
    --pm-text-dark: #1a1a1a;
    --pm-text-muted: #5a5a5a;
}

/* ============================================================
 * 1. LAYOUT WRAPPER & MAIN GRID (3-COLUMNS)
 * ============================================================ */

.pm-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--pm-text-dark) !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Memaksa Grid Utama menjadi 3 Kolom */
.pm-wrap .pm-grid {
    display: grid !important;
    grid-template-columns: 280px 1fr 280px !important;
    gap: 16px !important;
    align-items: start !important;
}

@media (max-width: 992px) {
    .pm-wrap .pm-grid {
        grid-template-columns: 1fr !important;
    }
}

.pm-wrap .pm-head,
.pm-wrap .pm-panel {
    background: var(--pm-bg-card) !important;
    border: 1px solid var(--pm-red-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

.pm-wrap .pm-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* ============================================================
 * 2. TYPOGRAPHY & BADGES
 * ============================================================ */

.pm-wrap h2, 
.pm-wrap h3, 
.pm-wrap h4,
.pm-wrap .pm-panel-title,
.pm-wrap .pm-pet-name {
    color: var(--pm-red-primary) !important;
    font-weight: 800 !important;
    margin-top: 0 !important;
    text-transform: uppercase !important;
}

.pm-wrap .pm-panel-title {
    font-size: 16px !important;
    margin-bottom: 14px !important;
    border-bottom: 2px solid var(--pm-red-border) !important;
    padding-bottom: 8px !important;
}

.pm-wrap .pm-brand { color: var(--pm-red-dark) !important; }
.pm-wrap .pm-sub, .pm-wrap .pm-muted, .pm-wrap small {
    color: var(--pm-text-muted) !important; font-weight: 600 !important; font-size: 12px !important;
}
.pm-wrap .pm-stat-row .pm-k {
    color: #000000 !important; font-weight: 700 !important; font-size: 12px !important;
}
.pm-wrap .pm-stat-row .pm-v {
    color: #000000 !important; font-weight: 800 !important;
}

.pm-wrap .pm-mood {
    display: inline-flex !important; align-items: center !important;
    padding: 4px 12px !important; border-radius: 20px !important;
    font-size: 12px !important; font-weight: 700 !important;
}
.pm-wrap .pm-mood-senang { background: rgba(46, 125, 50, 0.12) !important; color: var(--pm-green) !important; border: 1px solid rgba(46, 125, 50, 0.3) !important; }
.pm-wrap .pm-mood-normal { background: rgba(100, 100, 100, 0.1) !important; color: #555 !important; border: 1px solid rgba(100, 100, 100, 0.2) !important; }
.pm-wrap .pm-hunger-badge, .pm-wrap .pm-mood-lelah { background: rgba(230, 81, 0, 0.12) !important; color: #e65100 !important; border: 1px solid rgba(230, 81, 0, 0.3) !important; }
.pm-wrap .pm-points-badge { background: rgba(255, 193, 7, 0.15) !important; color: #b78103 !important; border: 1px solid rgba(255, 193, 7, 0.4) !important; }

.pm-wrap .pm-shop-link {
    background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important;
    color: #ffffff !important; border-radius: 20px !important; padding: 6px 18px !important;
    text-decoration: none !important; font-weight: 800 !important; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.35) !important;
}

/* ============================================================
 * 3. BAKI BERI MAKAN (FEEDING AREA)
 * ============================================================ */

.pm-wrap .pm-feed {
    background: #ffffff !important;
    border: 2px solid var(--pm-red-primary) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 6px 20px rgba(211, 47, 47, 0.12) !important;
}

.pm-wrap .pm-feed.is-urgent {
    border-color: #e53935 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.18), 0 6px 20px rgba(229, 57, 53, 0.14) !important;
}

.pm-wrap .pm-feed-head {
    display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 12px !important;
}

.pm-wrap .pm-food-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
}

.pm-wrap .pm-food-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}
.pm-wrap .pm-food-wrap:hover {
    z-index: 99999 !important;
}

.pm-wrap .pm-food {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; border-radius: 12px !important;
    padding: 10px !important; cursor: pointer !important; transition: all 0.2s ease !important;
}

.pm-wrap .pm-food-wrap:hover .pm-food:not(:disabled) {
    background: var(--pm-red-soft) !important; border-color: var(--pm-red-primary) !important; transform: translateY(-2px) !important;
}

.pm-wrap .pm-food-ico img { width: 32px !important; height: 32px !important; object-fit: contain !important; }
.pm-wrap .pm-food-name { font-size: 11px !important; font-weight: 700 !important; margin-top: 4px !important; text-align: center !important; }
.pm-wrap .pm-food-qty { font-size: 10px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-food-heal { font-size: 10px !important; font-weight: 800 !important; color: var(--pm-green) !important; }

.pm-wrap .pm-food-tip {
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 210px !important;
}
.pm-wrap .pm-food-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-food-wrap:hover .pm-food-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* ============================================================
 * 4. KANAN & KIRI: PET STAGE, BARS & STAT ROWS
 * ============================================================ */

.pm-wrap .pm-pet-stage {
    height: 200px !important; position: relative !important; background: rgba(0, 0, 0, 0.03) !important;
    border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important;
}

.pm-wrap .pm-pet-lv {
    display: inline-block !important; background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important;
    color: #ffffff !important; padding: 4px 14px !important; border-radius: 20px !important; font-size: 12px !important; font-weight: 800 !important; margin-top: 6px !important;
}

.pm-wrap .pm-bar-wrap { margin-bottom: 12px !important; }
.pm-wrap .pm-bar-head { display: flex !important; justify-content: space-between !important; font-size: 11px !important; margin-bottom: 4px !important; color: #000000 !important; font-weight: 700 !important; }
.pm-wrap .pm-bar { height: 12px !important; background: rgba(0, 0, 0, 0.08) !important; border-radius: 6px !important; overflow: hidden !important; }
.pm-wrap .pm-bar-fill { height: 100% !important; border-radius: 6px !important; transition: width 0.3s ease !important; }

.pm-wrap .pm-bar-exp .pm-bar-fill { background: linear-gradient(90deg, var(--pm-red-primary), var(--pm-red-bright)) !important; }
.pm-wrap .pm-bar-progress .pm-bar-fill { background: linear-gradient(90deg, #fbc02d, #ffca28) !important; }
.pm-wrap .pm-bar-energy .pm-bar-fill { background: linear-gradient(90deg, #4caf50, #81c784) !important; }
.pm-wrap .pm-bar-hunger .pm-bar-fill { background: linear-gradient(90deg, #e53935, #ef5350) !important; }

.pm-wrap .pm-stat-row {
    display: flex !important; justify-content: space-between !important; padding: 6px 0 !important;
    border-bottom: 1px dashed var(--pm-red-border) !important; font-size: 12px !important;
}

/* ============================================================
 * 5. TENGAH: MINING SCENE & ACTIONS
 * ============================================================ */

.pm-wrap .pm-scene {
    min-height: 260px !important; position: relative !important; border-radius: 14px !important; overflow: visible !important;
    background-size: cover !important; background-position: center !important; display: flex !important; flex-direction: column !important;
    justify-content: space-between !important; padding: 15px !important; box-sizing: border-box !important;
    z-index: 30 !important;
}

.pm-wrap .pm-scene-badges { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; position: relative !important; z-index: 5 !important; }
.pm-wrap .pm-scene-badges > span {
    background: rgba(26, 26, 26, 0.85) !important; color: #ffffff !important; padding: 4px 10px !important; border-radius: 6px !important;
    font-size: 11px !important; font-weight: 700 !important; border: 1px solid var(--pm-red-border) !important;
}

/* Memaksa Tombol Aksi Bawah Menjadi Grid 4 Kolom */
.pm-wrap .pm-actions {
    display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important;
    padding: 10px !important; background: rgba(0, 0, 0, 0.4) !important; border-radius: 10px !important; backdrop-filter: blur(4px) !important;
    position: relative !important; z-index: 50 !important; overflow: visible !important;
}

.pm-wrap .pm-btn-wrap {
    position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; z-index: 50 !important;
}
.pm-wrap .pm-btn-wrap:hover {
    z-index: 100000 !important;
}

.pm-wrap .pm-actions .pm-btn {
    width: 100% !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    padding: 10px 6px !important; background: #ffffff !important; color: var(--pm-text-dark) !important; border: 1px solid #ffffff !important;
    border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important; cursor: pointer !important; transition: all 0.2s ease !important;
}

.pm-wrap .pm-actions .pm-btn.is-active {
    background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important; color: #ffffff !important; border-color: var(--pm-red-dark) !important;
}
.pm-wrap .pm-actions .pm-btn:disabled:not(.is-active) {
    opacity: 0.55 !important; background: #e8e8e8 !important; cursor: not-allowed !important;
}

/* Custom Tooltip Styling */
.pm-wrap .pm-action-tip {
    position: absolute !important;
    bottom: calc(100% + 10px) !important;
    width: 220px !important;
    background: #18181c !important;
    border: 1px solid rgba(211, 47, 47, 0.6) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.8), 0 0 12px rgba(211, 47, 47, 0.25) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #ffffff !important;
    z-index: 100000 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(6px) scale(0.96) !important;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s !important;
    text-align: left !important;
}

/* Arrow indicator */
.pm-wrap .pm-action-tip::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    border-width: 6px !important;
    border-style: solid !important;
    border-color: #18181c transparent transparent transparent !important;
}

/* Tooltip position alignments */
.pm-wrap .pm-btn-wrap.pos-first .pm-action-tip {
    left: 0 !important;
    transform-origin: bottom left !important;
}
.pm-wrap .pm-btn-wrap.pos-first .pm-action-tip::after {
    left: 24px !important;
}

.pm-wrap .pm-btn-wrap.pos-mid .pm-action-tip {
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
}
.pm-wrap .pm-btn-wrap.pos-mid .pm-action-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}

.pm-wrap .pm-btn-wrap.pos-last .pm-action-tip {
    right: 0 !important;
    left: auto !important;
    transform-origin: bottom right !important;
}
.pm-wrap .pm-btn-wrap.pos-last .pm-action-tip::after {
    right: 24px !important;
}

/* Hover reveal */
.pm-wrap .pm-btn-wrap:hover .pm-action-tip {
    opacity: 1 !important;
    visibility: visible !important;
}
.pm-wrap .pm-btn-wrap.pos-first:hover .pm-action-tip,
.pm-wrap .pm-btn-wrap.pos-last:hover .pm-action-tip {
    transform: translateY(0) scale(1) !important;
}
.pm-wrap .pm-btn-wrap.pos-mid:hover .pm-action-tip {
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Inner elements */
.pm-wrap .pm-action-tip-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 6px !important;
    margin-bottom: 6px !important;
    gap: 6px !important;
}
.pm-wrap .pm-action-tip-title {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}
.pm-wrap .pm-action-tip-badge {
    font-size: 9px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-action-tip-badge.is-active {
    background: #2e7d32 !important;
    color: #ffffff !important;
    box-shadow: 0 0 6px rgba(46, 125, 50, 0.6) !important;
}
.pm-wrap .pm-action-tip-badge.is-no-energy {
    background: #c62828 !important;
    color: #ffffff !important;
}
.pm-wrap .pm-action-tip-badge.is-ready {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ddd !important;
}

.pm-wrap .pm-action-tip-desc {
    font-size: 11px !important;
    color: #e0e0e0 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.pm-wrap .pm-action-tip-perks {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 6px 0 !important;
    font-size: 10.5px !important;
    color: #b0bec5 !important;
}
.pm-wrap .pm-action-tip-perks li {
    position: relative !important;
    padding-left: 12px !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
}
.pm-wrap .pm-action-tip-perks li::before {
    content: '•' !important;
    position: absolute !important;
    left: 2px !important;
    color: #ffb74d !important;
    font-weight: bold !important;
}

.pm-wrap .pm-action-tip-req {
    font-size: 10px !important;
    color: #aaa !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.12) !important;
    padding-top: 5px !important;
    margin-top: 4px !important;
}
.pm-wrap .pm-action-tip-req span {
    font-weight: bold !important;
    color: #ff9800 !important;
}
.pm-wrap .pm-area-wrap {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}
.pm-wrap .pm-area-wrap:hover {
    z-index: 99999 !important;
}

.pm-wrap .pm-area-btn {
    display: flex !important; align-items: center !important; padding: 10px 12px !important; background: #ffffff !important;
    border: 1.5px solid rgba(211, 47, 47, 0.45) !important; border-radius: 10px !important; cursor: pointer !important; font-weight: 700 !important; color: #000000 !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}
.pm-wrap .pm-area-wrap:hover .pm-area-btn:not(:disabled) {
    transform: translateY(-2px) !important;
}
.pm-wrap .pm-area-btn.is-active {
    background: linear-gradient(180deg, #ef5350, #c62828) !important; color: #ffffff !important; border-color: var(--pm-red-dark) !important;
}
.pm-wrap .pm-area-btn.is-active small { color: #ffffff !important; opacity: 0.9 !important; }

.pm-wrap .pm-area-tip {
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 230px !important;
}
.pm-wrap .pm-area-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-area-wrap:hover .pm-area-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* ============================================================
 * 6. REDEEM REWARD
 * ============================================================ */

.pm-wrap .pm-redeem {
    width: 100% !important; display: block !important; padding: 12px 18px !important; margin-top: 14px !important;
    background: linear-gradient(180deg, var(--pm-red-primary) 0%, var(--pm-red-dark) 100%) !important; color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 25px !important; font-weight: 800 !important; font-size: 13px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(211, 47, 47, 0.35) !important;
}

.pm-wrap .pm-redeem:hover:not(:disabled) {
    background: linear-gradient(180deg, var(--pm-red-bright) 0%, var(--pm-red-primary) 100%) !important; transform: translateY(-2px) !important;
}

/* ============================================================
 * 7. GRID STATUS PET (6 Kolom Sejajar)
 * ============================================================ */

.pm-wrap #pm-stats-grid {
    display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; margin-top: 15px !important; align-items: stretch !important;
}
@media (max-width: 992px) { .pm-wrap #pm-stats-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px) { .pm-wrap #pm-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } }

.pm-wrap .pm-stat-box {
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; border-radius: 12px !important;
    padding: 15px 10px !important; text-align: center !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; height: 100% !important; box-sizing: border-box !important;
}
.pm-wrap .pm-stat-box .pm-sk { font-size: 13px !important; font-weight: 800 !important; margin-bottom: 5px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-stat-box .pm-sv { font-size: 28px !important; font-weight: 900 !important; color: var(--pm-red-primary) !important; line-height: 1 !important; margin-bottom: 5px !important; }
.pm-wrap .pm-stat-box .pm-sparts, .pm-wrap .pm-stat-box .pm-sd { font-size: 11px !important; color: var(--pm-text-muted) !important; margin-bottom: 8px !important; }
.pm-wrap .pm-stat-box .pm-sfull { font-size: 10px !important; color: var(--pm-text-muted) !important; flex-grow: 1 !important; margin-bottom: 15px !important; }

/* ============================================================
 * 8. BUTTONS & BOTTOM GRIDS (Shop, Skill, Evo)
 * ============================================================ */

.pm-wrap .pm-alloc-btn {
    width: 100% !important; padding: 8px !important; background: #fdf5f5 !important; border: 1px solid var(--pm-red-border) !important;
    color: var(--pm-red-primary) !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 11px !important; margin-top: auto !important;
}

.pm-wrap .pm-shop-buy, .pm-wrap .pm-skill-btn, .pm-wrap .pm-evo-btn, .pm-wrap .pm-hab-btn {
    width: 100% !important; padding: 6px 10px !important; background: #ffffff !important; border: 1px solid var(--pm-red-border) !important;
    color: var(--pm-red-primary) !important; border-radius: 8px !important; font-weight: 800 !important; font-size: 11px !important; margin-top: 6px !important;
}

.pm-wrap .pm-alloc-btn:hover:not(:disabled), .pm-wrap .pm-shop-buy:hover:not(:disabled), .pm-wrap .pm-skill-btn:hover:not(:disabled) {
    background: var(--pm-red-primary) !important; color: #ffffff !important; border-color: var(--pm-red-dark) !important;
}

.pm-wrap .pm-equip-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: 12px !important; }
.pm-wrap .pm-shop-grid, .pm-wrap .pm-skill-grid, .pm-wrap .pm-evo-grid, .pm-wrap .pm-hab-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 12px !important; }

.pm-wrap .pm-slot, .pm-wrap .pm-shop-card, .pm-wrap .pm-skill-card, .pm-wrap .pm-evo-card, .pm-wrap .pm-hab-card, .pm-wrap .pm-ore, .pm-wrap .pm-ach {
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; border-radius: 12px !important; padding: 12px !important;
}

.pm-wrap .pm-equip-select, .pm-wrap .pm-slot select {
    width: 100% !important; padding: 8px !important; border-radius: 8px !important; background-color: #f8f9fa !important; border: 1px solid var(--pm-red-border) !important; color: var(--pm-text-dark) !important; font-weight: 600 !important;
}

/* ============================================================
 * 9. LEADERBOARD & HINTS
 * ============================================================ */

/* Tab papan peringkat: satu baris HORIZONTAL, lebar rata; menggeser bila sempit. */
.pm-wrap .pm-lb-tabs { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
.pm-wrap .pm-lb-tab { cursor: pointer !important; flex: 1 1 0 !important; min-width: max-content !important; white-space: nowrap !important; text-align: center !important; }
/* Papan Peringkat bertab: hanya panel aktif yang tampil (sisanya disembunyikan). */
.pm-wrap .pm-lb-panel { display: none !important; }
.pm-wrap .pm-lb-panel.is-active { display: block !important; }
.pm-wrap .pm-lb-tab { padding: 8px 16px !important; background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; color: var(--pm-text-dark) !important; border-radius: 8px !important; font-weight: 700 !important; }
.pm-wrap .pm-lb-tab.is-active { background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important; color: #ffffff !important; border-color: var(--pm-red-dark) !important; }
.pm-wrap .pm-lb-table { width: 100% !important; border-collapse: collapse !important; }
.pm-wrap .pm-lb-table th { background: rgba(211, 47, 47, 0.08) !important; color: var(--pm-red-primary) !important; padding: 8px 12px !important; font-size: 12px !important; }
.pm-wrap .pm-lb-table td { padding: 8px 12px !important; border-bottom: 1px solid var(--pm-red-border) !important; font-size: 12px !important; }

.pm-wrap .pm-hint-row {
    background: rgba(211, 47, 47, 0.04) !important; border-left: 4px solid var(--pm-red-primary) !important; color: var(--pm-text-dark) !important; padding: 10px 14px !important; border-radius: 0 8px 8px 0 !important; margin-top: 12px !important; font-size: 12px !important;
}

/* Info manfaat equipment (bawah tab Equipment) */
.pm-wrap .pm-equip-info {
    margin-top: 14px !important;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(211, 47, 47, 0.22) !important;
    border-left: 4px solid var(--pm-red-primary, #d32f2f) !important;
    border-radius: 0 10px 10px 0 !important;
    color: var(--pm-text-dark, #1a1a1a) !important;
}
.pm-wrap .pm-equip-info-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--pm-red-primary, #d32f2f) !important;
    margin: 0 0 6px !important;
    text-transform: none !important;
}
.pm-wrap .pm-equip-info-lead {
    margin: 0 0 8px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: var(--pm-text-dark, #1a1a1a) !important;
}
.pm-wrap .pm-equip-info-list {
    margin: 0 0 8px !important;
    padding-left: 18px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--pm-text-dark, #1a1a1a) !important;
}
.pm-wrap .pm-equip-info-list li {
    margin: 3px 0 !important;
}
.pm-wrap .pm-equip-info-list b {
    color: #1a1a1a !important;
}
.pm-wrap .pm-equip-info-tip {
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
    color: var(--pm-text-muted, #5a5a5a) !important;
}

/* ============================================================
 * 10. TOOLTIP GLOBAL SITUS  (#global-flat-tooltip dari header.php)
 * JS situs mengubah semua atribut title -> data-ftitle lalu merender kotak
 * pesan ini DI <body> (di luar .pm-wrap). Maka override wajib pakai id + !important.
 * Skema: PUTIH, garis MERAH tebal, tulisan HITAM, panah merah. (cerah merah putih)
 * ============================================================ */
#global-flat-tooltip {
    background-color: #ffffff !important;
    color: #111111 !important;
    border: 2px solid var(--pm-red-primary, #d32f2f) !important;
    box-shadow: 0 6px 18px rgba(211, 47, 47, 0.30) !important;
    font-weight: 700 !important;
}
#global-flat-tooltip-text { color: #111111 !important; }
/* JS mewarnai satu sisi panah; paksa kedua sisi vertikal jadi merah. */
#global-flat-tooltip-arrow {
    border-top-color: var(--pm-red-primary, #d32f2f) !important;
    border-bottom-color: var(--pm-red-primary, #d32f2f) !important;
}
/* Tooltip audio di footer ikut diselaraskan (merah-putih, teks hitam). */
.audio-tooltip::before { background: #ffffff !important; color: #111111 !important; border: 2px solid var(--pm-red-primary, #d32f2f) !important; }
.audio-tooltip::after  { border-right-color: var(--pm-red-primary, #d32f2f) !important; border-bottom-color: var(--pm-red-primary, #d32f2f) !important; }

/* ============================================================
 * 11. KOLOM GRID & PANEL KIRI (sprite pet)
 * ============================================================ */
.pm-wrap .pm-left, .pm-wrap .pm-right { min-width: 0 !important; }
.pm-wrap .pm-center { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; }
.pm-wrap .pm-pet-top-info {
    text-align: center !important;
    margin-bottom: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
}
.pm-wrap .pm-pet-top-info .pm-pet-name {
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    color: var(--pm-red-primary, #b71c1c) !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}
.pm-wrap .pm-pet-top-info .pm-pet-species {
    text-align: center !important;
    color: var(--pm-text-muted, #64748b) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.pm-wrap .pm-pet-lv-wrap {
    margin-top: 2px !important;
}
.pm-wrap .pm-pet-lv {
    display: inline-block !important;
    width: fit-content !important;
    margin: 0 auto !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--pm-red-primary, #b71c1c), #d32f2f) !important;
    color: #fff !important;
    padding: 3px 14px !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 6px rgba(183, 28, 28, 0.25) !important;
}

.pm-wrap .pm-subcard {
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border, #fecaca) !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    margin-top: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}
.pm-wrap .pm-subcard-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
    padding-bottom: 5px !important;
    border-bottom: 1px dashed rgba(211, 47, 47, 0.15) !important;
}
.pm-wrap .pm-subcard-title {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: var(--pm-red-primary, #b71c1c) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
.pm-wrap .pm-subcard-badge {
    font-size: 10px !important;
    font-weight: 700 !important;
    background: var(--pm-red-soft, #ffebee) !important;
    color: var(--pm-red-primary, #d32f2f) !important;
    padding: 1px 7px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(211, 47, 47, 0.2) !important;
}

.pm-wrap .pm-pet-stage { overflow: hidden !important; border-radius: 16px !important; }
.pm-wrap .pm-pet-sprite { position: relative !important; z-index: 2 !important; animation: pm-bob 3.4s ease-in-out infinite; }
.pm-wrap .pm-pet-sprite canvas { image-rendering: pixelated !important; display: block !important; }
@keyframes pm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Zona Interaktif Peti Misteri (Di Bawah Viewport) */
.pm-wrap .pm-mystery-box-zone {
    display: none !important;
    margin-top: 10px !important;
    background: linear-gradient(135deg, #1e1b4b, #0f172a) !important;
    border: 2px solid #f59e0b !important;
    border-radius: 14px !important;
    padding: 10px 12px !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35), 0 2px 6px rgba(0,0,0,0.4) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    animation: pm-mystery-pulse 1.4s ease-in-out infinite alternate !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}
.pm-wrap .pm-mystery-box-zone.is-active,
.pm-wrap .pm-mystery-box-zone:not(:empty) {
    display: flex !important;
}
.pm-wrap .pm-mystery-box-zone:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.pm-wrap .pm-mystery-box-zone:hover {
    transform: translateY(-2px) scale(1.01) !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.55) !important;
}
@keyframes pm-mystery-pulse {
    0% { border-color: #f59e0b; box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
    100% { border-color: #fbbf24; box-shadow: 0 0 20px rgba(251, 191, 36, 0.6); }
}
.pm-wrap .pm-mb-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
}
.pm-wrap .pm-mb-icon {
    font-size: 26px !important;
    line-height: 1 !important;
    animation: pm-mb-bounce 1s ease-in-out infinite alternate !important;
    flex-shrink: 0 !important;
}
@keyframes pm-mb-bounce {
    0% { transform: translateY(0) scale(1); }
    100% { transform: translateY(-3px) scale(1.08); }
}
.pm-wrap .pm-mb-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
}
.pm-wrap .pm-mb-title {
    font-size: 12.5px !important;
    font-weight: 900 !important;
    color: #fef08a !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-mb-timer {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    line-height: 1.2 !important;
}
.pm-wrap .pm-mb-btn {
    width: 100% !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #000 !important;
    font-size: 11.5px !important;
    font-weight: 900 !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}
.pm-wrap .pm-mb-btn:hover {
    background: linear-gradient(135deg, #fbbf24, #b45309) !important;
    transform: scale(1.02) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.5) !important;
}

/* Zona Buff Aktif Berdurasi */
.pm-wrap .pm-active-buff-zone {
    display: none !important;
    margin-top: 10px !important;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.12)) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.pm-wrap .pm-active-buff-zone.is-active,
.pm-wrap .pm-active-buff-zone:not(:empty) {
    display: flex !important;
}
.pm-wrap .pm-active-buff-zone:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
.pm-wrap .pm-buff-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    font-size: 11.5px !important;
}
.pm-wrap .pm-buff-name {
    font-weight: 800 !important;
    color: #065f46 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.pm-wrap .pm-buff-countdown {
    font-weight: 900 !important;
    color: #047857 !important;
    background: #d1fae5 !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
}

/* Gelembung Zzz saat tidur */
.pm-wrap .pm-zzz {
    position: absolute !important; top: 24px !important; left: 58% !important; z-index: 3 !important;
    font-size: 20px !important; color: var(--pm-red-primary) !important; opacity: 0; pointer-events: none;
    text-shadow: 0 2px 4px rgba(0,0,0,.2); animation: pm-zzz 3.2s ease-in-out infinite;
}
.pm-wrap .pm-zzz:nth-child(2) { animation-delay: 1.05s; font-size: 15px; left: 66%; }
.pm-wrap .pm-zzz:nth-child(3) { animation-delay: 2.10s; font-size: 12px; left: 73%; }
@keyframes pm-zzz { 0% { opacity: 0; transform: translate(0,6px) scale(.7); } 28% { opacity: .95; } 100% { opacity: 0; transform: translate(16px,-30px) scale(1.1); } }

/* Emote mood: muncul sesekali / saat tidur di atas kepala pet */
.pm-wrap .pm-mood-emote {
    position: absolute !important; left: 50% !important; top: 12px !important; z-index: 6 !important;
    width: 36px !important; height: 36px !important; image-rendering: pixelated !important;
    transform: translate(-50%, 8px) scale(.4); opacity: 0; pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
    transition: opacity .35s ease, transform .45s cubic-bezier(.18,.89,.32,1.28);
}
.pm-wrap .pm-mood-emote.is-show { opacity: 1 !important; transform: translate(-50%, 0) scale(1) !important; }
/* Emote reaksi makan (hati) */
.pm-wrap .pm-feed-emote {
    position: absolute !important; top: 34px !important; left: 50% !important; z-index: 7 !important;
    width: 40px !important; height: 40px !important; image-rendering: pixelated !important;
    transform: translateX(-50%) scale(.4); opacity: 0; pointer-events: none;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));
}
.pm-wrap .pm-feed-emote.is-pop { animation: pm-feed-pop 1.5s ease-out; }
@keyframes pm-feed-pop {
    0% { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.4); }
    22% { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1.15); }
    55% { opacity: 1; transform: translateX(-50%) translateY(-16px) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-40px) scale(1); }
}

/* Ikon skill aktif & rank badges di bawah viewport */
.pm-wrap .pm-pet-ranks { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; justify-content: center !important; margin: 0 !important; }
.pm-wrap .pm-active-skills { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; justify-content: center !important; margin: 0 !important; }
.pm-wrap .pm-as-empty { font-size: 11px !important; color: var(--pm-text-muted) !important; font-style: italic !important; }

.pm-wrap .pm-as-wrap,
.pm-wrap .pm-rank-wrap {
    position: relative !important;
    display: inline-flex !important;
}
.pm-wrap .pm-as-wrap:hover,
.pm-wrap .pm-rank-wrap:hover {
    z-index: 99999 !important;
}

.pm-wrap .pm-as-icon {
    display: inline-flex !important; align-items: center !important; gap: 3px !important;
    background: var(--pm-red-soft) !important; border: 1px solid var(--pm-red-border) !important;
    border-radius: 20px !important; padding: 3px 9px 3px 7px !important; font-size: 15px !important; line-height: 1 !important; cursor: pointer !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}
.pm-wrap .pm-as-wrap:hover .pm-as-icon {
    transform: translateY(-2px) !important;
    background: #ffebee !important;
}
.pm-wrap .pm-as-icon b { font-size: 11px !important; color: var(--pm-red-primary) !important; font-weight: 800 !important; }

.pm-wrap .pm-skill-tip,
.pm-wrap .pm-rank-tip {
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 210px !important;
}
.pm-wrap .pm-skill-tip::after,
.pm-wrap .pm-rank-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-as-wrap:hover .pm-skill-tip,
.pm-wrap .pm-rank-wrap:hover .pm-rank-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* ============================================================
 * 12. ADEGAN: latar per-keadaan, badge satu baris, partikel, cuaca
 * ============================================================ */
/* Latar gradien bawaan bila area tak punya gambar. */
.pm-wrap .pm-scene[data-state="mining"]   { background-image: linear-gradient(180deg,#2b2118,#4a3722 45%,#16110c); }
.pm-wrap .pm-scene[data-state="working"]  { background-image: linear-gradient(180deg,#17324a,#2b5c73 48%,#0e1a24); }
.pm-wrap .pm-scene[data-state="relaxing"] { background-image: linear-gradient(180deg,#1d3a2a,#34694a 46%,#0f1d16); }
.pm-wrap .pm-scene[data-state="sleeping"] { background-image: linear-gradient(180deg,#10142b,#232a52 46%,#080a16); }

.pm-wrap .pm-scene-badges { flex-wrap: nowrap !important; align-items: center !important; min-width: 0 !important; }
.pm-wrap .pm-scene-badges > span { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
.pm-wrap .pm-scene-habitat { color: #ffd7d7 !important; }

.pm-wrap .pm-scene-fx {
    position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background-image:
        radial-gradient(2px 2px at 18% 32%, rgba(255,255,255,.32), transparent),
        radial-gradient(2px 2px at 72% 22%, rgba(255,255,255,.24), transparent),
        radial-gradient(1px 1px at 44% 62%, rgba(255,255,255,.28), transparent),
        radial-gradient(2px 2px at 86% 68%, rgba(255,255,255,.20), transparent);
    animation: pm-drift 14s linear infinite;
}
@keyframes pm-drift { 0%,100% { transform: translate3d(0,0,0); opacity:.55; } 50% { transform: translate3d(-14px,-18px,0); opacity:.95; } }

/* --- Cuaca (overlay di kotak pet & adegan) --- */
.pm-wrap .pm-weather { position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 3 !important; overflow: hidden !important; }
.pm-wrap .pm-weather-badge { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 5 !important; background: rgba(26,26,26,.85) !important; border: 1px solid var(--pm-red-border) !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important; border-radius: 20px !important; }
.pm-wrap .pm-pet-stage[data-weather="rain"] .pm-weather, .pm-wrap .pm-pet-stage[data-weather="storm"] .pm-weather,
.pm-wrap .pm-scene[data-weather="rain"] .pm-weather-scene, .pm-wrap .pm-scene[data-weather="storm"] .pm-weather-scene {
    /* Tetes hujan terpisah & jarang (bukan garis penuh): beberapa elips tipis
       memanjang yang ditebar dalam ubin besar 200px, lalu jatuh miring. */
    background-image:
        radial-gradient(1px 11px at 12% 12%, rgba(200,215,240,.55), transparent),
        radial-gradient(1px 9px  at 38% 42%, rgba(200,215,240,.45), transparent),
        radial-gradient(1px 12px at 63% 22%, rgba(200,215,240,.50), transparent),
        radial-gradient(1px 8px  at 82% 58%, rgba(200,215,240,.45), transparent),
        radial-gradient(1px 10px at 28% 76%, rgba(200,215,240,.50), transparent),
        radial-gradient(1px 9px  at 55% 90%, rgba(200,215,240,.40), transparent);
    background-size: 200px 200px; background-repeat: repeat;
    animation: pm-rain .8s linear infinite; opacity: .6;
}
@keyframes pm-rain { from { background-position: 0 0; } to { background-position: -28px 200px; } }
.pm-wrap .pm-pet-stage[data-weather="storm"]::before, .pm-wrap .pm-scene[data-weather="storm"]::before {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(255,255,255,.6); opacity: 0; animation: pm-flash 6s ease-out infinite;
}
@keyframes pm-flash { 0%,93%,100% { opacity: 0; } 94% { opacity: .5; } 96% { opacity: .1; } 97% { opacity: .45; } 98% { opacity: 0; } }
.pm-wrap .pm-pet-stage[data-weather="snow"] .pm-weather, .pm-wrap .pm-scene[data-weather="snow"] .pm-weather-scene {
    background-image: radial-gradient(2.5px 2.5px at 15% 20%,#fff,transparent), radial-gradient(2px 2px at 45% 10%,#fff,transparent), radial-gradient(3px 3px at 70% 30%,#fff,transparent), radial-gradient(2px 2px at 85% 15%,#fff,transparent), radial-gradient(2.5px 2.5px at 30% 50%,#fff,transparent);
    background-size: 220px 220px; animation: pm-snow 7s linear infinite; opacity: .85;
}
@keyframes pm-snow { from { background-position: 0 0; } to { background-position: 12px 220px; } }
.pm-wrap .pm-pet-stage[data-weather="fog"] .pm-weather, .pm-wrap .pm-scene[data-weather="fog"] .pm-weather-scene {
    background: linear-gradient(90deg, rgba(200,205,215,.1), rgba(200,205,215,.3), rgba(200,205,215,.1)); background-size: 200% 100%; animation: pm-fog 9s ease-in-out infinite; opacity: .7;
}
@keyframes pm-fog { 0%,100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
.pm-wrap .pm-pet-stage[data-weather="sunny"] .pm-weather, .pm-wrap .pm-scene[data-weather="sunny"] .pm-weather-scene { background: radial-gradient(circle at 78% 18%, rgba(255,225,140,.35), transparent 45%); opacity: .9; }
.pm-wrap .pm-pet-stage[data-weather="cloudy"] .pm-weather, .pm-wrap .pm-scene[data-weather="cloudy"] .pm-weather-scene { background: rgba(120,130,145,.22); }
.pm-wrap .pm-pet-stage[data-weather="sandstorm"] .pm-weather, .pm-wrap .pm-scene[data-weather="sandstorm"] .pm-weather-scene { background: linear-gradient(90deg, rgba(194,150,80,.1), rgba(194,150,80,.35), rgba(194,150,80,.1)); background-size: 200% 100%; animation: pm-sand .8s linear infinite; opacity: .65; }
@keyframes pm-sand { from { background-position: 0 0; } to { background-position: -120px 0; } }

/* Tombol aksi: ikon + label dua baris */
.pm-wrap .pm-btn-ico { font-size: 19px !important; line-height: 1 !important; }
.pm-wrap .pm-actions .pm-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ============================================================
 * 13. LOKASI TAMBANG: event & jeda pindah
 * ============================================================ */
.pm-wrap .pm-area-btn.is-event { border-color: var(--pm-gold) !important; background: rgba(255,193,7,.10) !important; }
.pm-wrap .pm-event-tag { display: inline-block !important; margin-left: 5px !important; background: linear-gradient(180deg,#f59e0b,#d97706) !important; color: #2a1e00 !important; border-radius: 20px !important; padding: 1px 7px !important; font-size: 9px !important; font-weight: 800 !important; text-transform: uppercase; }
.pm-wrap .pm-btn.is-cooldown { opacity: .5 !important; }
.pm-wrap .pm-area-cd-note { font-size: 12px !important; color: var(--pm-red-dark) !important; background: var(--pm-red-soft) !important; border: 1px solid var(--pm-red-border) !important; border-radius: 20px !important; padding: 3px 11px !important; font-weight: 700 !important; }
.pm-wrap .pm-area-cd-note b { color: var(--pm-red-primary) !important; }

/* ============================================================
 * 14. BILAH TAMBAHAN, POIN, HINT
 * ============================================================ */
.pm-wrap .pm-bar-voucher .pm-bar-fill { background: linear-gradient(90deg,#0288d1,#4fc3f7) !important; }
.pm-wrap .pm-bar-collection .pm-bar-fill, .pm-wrap .pm-bar-collection div { background: linear-gradient(90deg,var(--pm-red-primary),var(--pm-gold)) !important; height: 100% !important; border-radius: 6px !important; }
.pm-wrap .pm-bar-energy.is-low .pm-bar-fill { background: linear-gradient(90deg,#c62828,#ef5350) !important; }
.pm-wrap .pm-bar-hunger.is-low .pm-bar-fill { background: linear-gradient(90deg,#c62828,#ef5350) !important; }
.pm-wrap .pm-bar-head b { color: var(--pm-text-dark) !important; font-weight: 800 !important; }
.pm-wrap .pm-points { font-size: 12px !important; color: var(--pm-text-muted) !important; text-align: right !important; }
.pm-wrap .pm-points b { color: var(--pm-red-primary) !important; font-size: 18px !important; }
.pm-wrap .pm-points small { display: block !important; font-size: 10px !important; }
.pm-wrap .pm-sparts .pm-alloc { color: var(--pm-red-primary) !important; font-weight: 700 !important; }
.pm-wrap .pm-sparts .pm-gear { color: var(--pm-green) !important; font-weight: 700 !important; }

/* ============================================================
 * 15. SALDO DOMPET, VOUCHER, WELCOME, HATCH
 * ============================================================ */
.pm-wrap .pm-wallet { font-size: 12px !important; color: var(--pm-text-muted) !important; background: rgba(255,193,7,.14) !important; border: 1px solid rgba(255,193,7,.4) !important; border-radius: 20px !important; padding: 4px 13px !important; }
.pm-wrap .pm-wallet b { color: #b78103 !important; font-size: 14px !important; }

/* Currency Wallets Bar (Top Header) */
.pm-wrap .pm-curr-wallets { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; }
.pm-wrap .pm-curr-pill {
    position: relative !important; display: inline-flex !important; align-items: center !important; gap: 8px !important;
    padding: 6px 13px !important; border-radius: 20px !important; background: #ffffff !important;
    border: 1px solid var(--pm-red-border) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
    cursor: pointer !important; transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.pm-wrap .pm-curr-pill:hover {
    transform: translateY(-2px) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.09) !important; z-index: 99999 !important;
}
.pm-wrap .pm-curr-pill.pm-curr-zeny { background: rgba(255, 193, 7, 0.12) !important; border-color: rgba(255, 193, 7, 0.45) !important; }
.pm-wrap .pm-curr-pill.pm-curr-mc   { background: rgba(59, 130, 246, 0.10) !important; border-color: rgba(59, 130, 246, 0.40) !important; }
.pm-wrap .pm-curr-pill.pm-curr-cash { background: rgba(236, 72, 153, 0.10) !important; border-color: rgba(236, 72, 153, 0.40) !important; }

.pm-wrap .pm-curr-icon { font-size: 17px !important; line-height: 1 !important; }
.pm-wrap .pm-curr-info { display: flex !important; flex-direction: column !important; line-height: 1.15 !important; }
.pm-wrap .pm-curr-info small { font-size: 9.5px !important; font-weight: 700 !important; text-transform: uppercase !important; color: var(--pm-text-muted) !important; letter-spacing: 0.3px !important; }
.pm-wrap .pm-curr-info b { font-size: 13px !important; font-weight: 800 !important; }
.pm-wrap .pm-curr-zeny .pm-curr-info b { color: #b78103 !important; }
.pm-wrap .pm-curr-mc .pm-curr-info b { color: #1d4ed8 !important; }
.pm-wrap .pm-curr-cash .pm-curr-info b { color: #be185d !important; }

.pm-wrap .pm-curr-tip {
    bottom: calc(100% + 10px) !important; left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important; width: 220px !important;
}
.pm-wrap .pm-curr-tip::after { left: 50% !important; margin-left: -6px !important; }
.pm-wrap .pm-curr-pill:hover .pm-curr-tip {
    opacity: 1 !important; visibility: visible !important; transform: translateX(-50%) translateY(0) scale(1) !important;
}

.pm-wrap .pm-voucher { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 9px !important; background: #fff !important; border: 1px solid var(--pm-red-border) !important; border-radius: 10px !important; padding: 10px 13px !important; margin-bottom: 9px !important; }
.pm-wrap .pm-voucher.is-archived { background: #fafafa !important; border-color: #e2e8f0 !important; }
.pm-wrap .pm-code { font-family: Consolas,"Courier New",monospace !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; color: var(--pm-red-primary) !important; }
.pm-wrap .pm-voucher.is-archived .pm-code { color: #64748b !important; }
.pm-wrap .pm-vcode-wrap { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.pm-wrap .pm-vclaimed-date { font-size: 10.5px !important; color: #94a3b8 !important; }
.pm-wrap .pm-vitem-name { font-size: 12.5px !important; color: var(--pm-text-dark) !important; font-weight: 600 !important; }
.pm-wrap .pm-copy { width: auto !important; background: var(--pm-red-soft) !important; border: 1px solid var(--pm-red-border) !important; color: var(--pm-red-primary) !important; border-radius: 7px !important; padding: 5px 11px !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; text-transform: none !important; }
.pm-wrap .pm-copy:hover { background: var(--pm-red-primary) !important; color: #fff !important; }
.pm-wrap .pm-vstatus { font-size: 11px !important; padding: 3px 9px !important; border-radius: 20px !important; font-weight: 700 !important; }
.pm-wrap .pm-vstatus.Pending { background: rgba(245,158,11,.18) !important; color: #b26a00 !important; }
.pm-wrap .pm-vstatus.Claimed { background: rgba(46,125,50,.15) !important; color: var(--pm-green) !important; }
.pm-wrap .pm-vstatus.Expired { background: rgba(120,120,120,.15) !important; color: #666 !important; }
.pm-wrap .pm-me-tag { background: var(--pm-red-primary) !important; color: #fff !important; border-radius: 20px !important; padding: 1px 8px !important; font-size: 10px !important; font-weight: 800 !important; margin-left: 6px !important; }

/* Sub-tabs Voucher */
.pm-wrap .pm-vsub-tabs { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; border-bottom: 1px solid var(--pm-red-border) !important; padding-bottom: 8px !important; }
.pm-wrap .pm-vsub-btn { display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 6px 14px !important; border-radius: 8px !important; background: #ffffff !important; border: 1.5px solid var(--pm-red-border) !important; color: var(--pm-text-dark) !important; font-size: 12px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.pm-wrap .pm-vsub-btn:hover { background: #fff5f5 !important; }
.pm-wrap .pm-vsub-btn.is-active { background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important; border-color: var(--pm-red-dark) !important; color: #ffffff !important; }
.pm-wrap .pm-vsub-badge { font-size: 10px !important; padding: 1px 6px !important; border-radius: 12px !important; background: rgba(0, 0, 0, 0.08) !important; color: inherit !important; font-weight: 800 !important; }
.pm-wrap .pm-vsub-btn.is-active .pm-vsub-badge { background: rgba(255, 255, 255, 0.28) !important; color: #ffffff !important; }
.pm-wrap .pm-vsub-panel { display: none; }
.pm-wrap .pm-vsub-panel.is-active { display: block !important; }
.pm-wrap .pm-vlist { min-height: 80px !important; }
.pm-wrap .pm-vempty { color: var(--pm-text-muted) !important; font-size: 13px !important; padding: 18px 0 !important; text-align: center !important; }

/* Pagination Voucher */
.pm-wrap .pm-vpagination { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 10px !important; padding-top: 8px !important; border-top: 1px dashed rgba(211,47,47,.2) !important; }
.pm-wrap .pm-vpage-info { font-size: 11px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-vpage-nav { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.pm-wrap .pm-vpage-btn { min-width: 26px !important; height: 26px !important; padding: 0 7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; color: var(--pm-text-dark) !important; font-size: 11px !important; font-weight: 700 !important; cursor: pointer !important; transition: all 0.15s ease !important; }
.pm-wrap .pm-vpage-btn:hover:not(:disabled):not(.is-active) { background: #fff5f5 !important; border-color: var(--pm-red-primary) !important; }
.pm-wrap .pm-vpage-btn.is-active { background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important; border-color: var(--pm-red-dark) !important; color: #ffffff !important; }
.pm-wrap .pm-vpage-btn:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }

/* Latar SOLID (bukan rgba) supaya teks tetap terbaca di atas latar halaman
 * apa pun — banner ini sempat tembus pandang karena isinya hanya tint 10%. */
.pm-wrap .pm-welcome { background: #ffffff linear-gradient(135deg, #fff1f1, #fff8e6) !important; border: 1px solid var(--pm-red-border) !important; border-radius: 12px !important; padding: 14px 18px !important; margin-bottom: 16px !important; box-shadow: 0 4px 14px rgba(211,47,47,.10) !important; }
.pm-wrap .pm-welcome h4 { margin: 0 0 7px !important; font-size: 15px !important; color: var(--pm-red-primary) !important; }
.pm-wrap .pm-gains { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; font-size: 13px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-gains b { color: #b78103 !important; }

.pm-wrap .pm-hatch { max-width: 640px !important; margin: 0 auto !important; text-align: center !important; }
.pm-wrap .pm-egg { font-size: 78px !important; margin-bottom: 8px !important; animation: pm-wiggle 2.4s ease-in-out infinite; }
.pm-wrap .pm-egg-img-wrap {
    display: flex !important; justify-content: center !important; align-items: center !important;
    font-size: 0 !important; line-height: 0 !important;
}
.pm-wrap .pm-egg-img {
    width: min(160px, 42vw) !important; height: auto !important; max-height: 180px !important;
    object-fit: contain !important; image-rendering: auto !important;
    filter: drop-shadow(0 8px 16px rgba(120, 40, 20, .18)) !important;
}
/* Fallback emoji: jangan pakai display:!important default — itu menimpa style="display:none"
   dan membuat emoji muncul berdampingan dengan gambar upload. */
.pm-wrap .pm-egg-fallback {
    font-size: 78px !important; line-height: 1 !important;
    display: none !important;
}
.pm-wrap .pm-egg-fallback.is-shown {
    display: block !important;
}
@keyframes pm-wiggle { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

/* --- Beli telur (kartu etalase / beli barang) --- */
.pm-wrap .pm-egg-buy {
    margin: 22px auto 0 !important; max-width: 440px !important; text-align: left !important;
    padding: 16px !important; border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(211, 47, 47, .28) !important;
    box-shadow: 0 10px 28px rgba(120, 40, 20, .10) !important;
}
.pm-wrap .pm-egg-buy-product {
    display: flex !important; align-items: flex-start !important; gap: 14px !important;
    margin-bottom: 12px !important; padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(211, 47, 47, .12) !important;
}
.pm-wrap .pm-egg-buy-thumb {
    flex: 0 0 72px !important; width: 72px !important; height: 72px !important;
    border-radius: 14px !important; background: linear-gradient(160deg, #fff6e8, #ffe8e0) !important;
    border: 1px solid rgba(211, 47, 47, .18) !important;
    display: grid !important; place-items: center !important; overflow: hidden !important;
}
.pm-wrap .pm-egg-buy-thumb img {
    width: 56px !important; height: 56px !important; object-fit: contain !important;
    image-rendering: pixelated !important;
}
.pm-wrap .pm-egg-buy-thumb-fallback {
    font-size: 34px !important; line-height: 1 !important;
    display: none !important;
}
.pm-wrap .pm-egg-buy-thumb-fallback.is-shown,
.pm-wrap .pm-egg-buy-thumb > .pm-egg-buy-thumb-fallback:only-child {
    display: grid !important; place-items: center !important;
}
.pm-wrap .pm-egg-buy-meta { flex: 1 !important; min-width: 0 !important; }
.pm-wrap .pm-egg-buy-kicker {
    font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important;
    text-transform: uppercase !important; color: var(--pm-red-primary) !important; margin-bottom: 4px !important;
}
.pm-wrap .pm-egg-buy h4 {
    margin: 0 0 6px !important; font-size: 17px !important; font-weight: 900 !important;
    color: var(--pm-text-dark) !important; text-align: left !important; line-height: 1.25 !important;
    text-transform: uppercase !important; letter-spacing: .01em !important;
}
.pm-wrap .pm-egg-buy-price {
    display: inline-block !important; font-size: 24px !important; font-weight: 900 !important;
    color: #b78103 !important; line-height: 1.1 !important;
}
.pm-wrap .pm-egg-buy-info {
    margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.5 !important;
    color: #444 !important;
}
.pm-wrap .pm-egg-buy-actions {
    display: flex !important; flex-direction: column !important; gap: 8px !important;
    align-items: stretch !important; margin-bottom: 2px !important;
}
.pm-wrap .pm-egg-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
    gap: 8px !important; padding: 13px 16px !important; margin: 0 !important;
    border-radius: 12px !important; font-size: 14px !important; font-weight: 800 !important;
    text-decoration: none !important; text-transform: uppercase !important; letter-spacing: .03em !important;
    border: 1px solid transparent !important; outline: none !important; cursor: pointer !important;
    line-height: 1.2 !important; appearance: none !important; -webkit-appearance: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}
.pm-wrap a.pm-egg-btn {
    /* Cegah style global <a> / .main-box a menambah “kotak” ekstra */
    color: inherit !important; background-clip: padding-box !important;
}
.pm-wrap .pm-egg-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.03) !important; text-decoration: none !important; }
.pm-wrap .pm-egg-btn:focus,
.pm-wrap .pm-egg-btn:focus-visible { outline: none !important; box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; }
.pm-wrap .pm-egg-btn-buy {
    background: linear-gradient(180deg, #ef6c00, #d84315) !important; color: #fff !important;
    border-color: rgba(0,0,0,.12) !important;
}
.pm-wrap .pm-egg-btn-qris {
    background: linear-gradient(180deg, #43a047, #2e7d32) !important; color: #fff !important;
    border-color: #1b1b1b !important; box-shadow: 0 6px 14px rgba(46, 125, 50, .28) !important;
}
.pm-wrap .pm-egg-btn.is-active {
    box-shadow: 0 0 0 2px rgba(183, 129, 3, .65) !important;
}
.pm-wrap .pm-egg-btn-proof,
.pm-wrap a.pm-egg-btn-proof {
    background: #fff5f5 !important; color: var(--pm-red-primary) !important;
    border: none !important; outline: none !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important;
}
.pm-wrap .pm-egg-btn-proof:hover,
.pm-wrap a.pm-egg-btn-proof:hover {
    background: #ffe8e8 !important; color: var(--pm-red-dark) !important;
    border: none !important; box-shadow: none !important; text-decoration: none !important;
}
.pm-wrap .pm-egg-btn-tpl {
    background: transparent !important; color: #555 !important;
    border: 1px dashed rgba(0,0,0,.18) !important; box-shadow: none !important;
    text-transform: none !important; letter-spacing: 0 !important; font-size: 12px !important;
    padding: 10px 14px !important;
}
.pm-wrap .pm-egg-buy-hint { font-size: 12px !important; color: var(--pm-muted) !important; }
.pm-wrap .pm-egg-pay {
    margin-top: 12px !important; padding: 14px !important; border-radius: 12px !important;
    background: #fafafa !important; border: 1px solid rgba(183, 129, 3, .35) !important;
}
.pm-wrap .pm-egg-pay-title {
    font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important;
    letter-spacing: .05em !important; color: #b78103 !important; margin-bottom: 10px !important;
}
.pm-wrap .pm-egg-pay-list { margin: 0 !important; display: grid !important; gap: 8px !important; }
.pm-wrap .pm-egg-pay-list > div { display: grid !important; grid-template-columns: 120px 1fr !important; gap: 6px 10px !important; align-items: start !important; }
.pm-wrap .pm-egg-pay-list dt { margin: 0 !important; font-size: 11px !important; color: var(--pm-muted) !important; font-weight: 700 !important; }
.pm-wrap .pm-egg-pay-list dd { margin: 0 !important; font-size: 13px !important; color: var(--pm-text-dark) !important; word-break: break-word !important; }
.pm-wrap .pm-egg-pay-list code { font-size: 14px !important; font-weight: 800 !important; letter-spacing: .02em !important; }
.pm-wrap .pm-egg-copy {
    margin-left: 8px !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important;
    border-radius: 6px !important; border: 1px solid rgba(0,0,0,.12) !important; background: #f7f7f7 !important;
    cursor: pointer !important; color: #444 !important; vertical-align: middle !important;
}
.pm-wrap .pm-egg-pay-foot { margin: 12px 0 0 !important; font-size: 12px !important; color: var(--pm-muted) !important; line-height: 1.45 !important; }
.pm-wrap .pm-egg-qris { text-align: center !important; }
.pm-wrap .pm-egg-qris-price { font-size: 13px !important; color: var(--pm-text-dark) !important; margin-bottom: 10px !important; }
.pm-wrap .pm-egg-qris-img {
    display: block !important; width: min(240px, 100%) !important; height: auto !important;
    margin: 0 auto 10px !important; border-radius: 12px !important; background: #fff !important;
    border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}
.pm-wrap .pm-egg-qris-notes { font-size: 12px !important; color: var(--pm-muted) !important; margin: 0 0 8px !important; }
@media (max-width: 520px) {
    .pm-wrap .pm-egg-pay-list > div { grid-template-columns: 1fr !important; }
    .pm-wrap .pm-egg-buy { max-width: 100% !important; }
}

/* ============================================================
 * 16. TAS ORE & COLLECTION BOOK
 * ============================================================ */
.pm-wrap .pm-ore-grid { display: flex !important; flex-wrap: wrap !important; gap: 9px !important; margin-top: 12px !important; }
.pm-wrap .pm-ore { display: flex !important; align-items: center !important; gap: 7px !important; padding: 6px 11px 6px 7px !important; font-size: 12px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-ore img { width: 24px !important; height: 24px !important; image-rendering: pixelated !important; }
.pm-wrap .pm-ore b { color: #b78103 !important; }
.pm-wrap .pm-ore.is-rare { border-color: #1976d2 !important; background: rgba(25,118,210,.06) !important; }
.pm-wrap .pm-ore.is-epic { border-color: #7b1fa2 !important; background: rgba(123,31,162,.07) !important; }

.pm-wrap .pm-coll-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(84px,1fr)) !important; gap: 9px !important; margin-top: 14px !important; }
.pm-wrap .pm-coll { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; padding: 10px 5px !important; border-radius: 10px !important; background: #fff !important; border: 1px solid var(--pm-red-border) !important; font-size: 10px !important; text-align: center !important; }
.pm-wrap .pm-coll img { width: 30px !important; height: 30px !important; image-rendering: pixelated !important; }
.pm-wrap .pm-coll-q { font-size: 26px !important; color: rgba(0,0,0,.14) !important; line-height: 30px !important; }
.pm-wrap .pm-coll-name { font-weight: 700 !important; line-height: 1.2 !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-coll-n { color: #b78103 !important; font-weight: 700 !important; }
.pm-wrap .pm-coll.is-locked { opacity: .5 !important; }
.pm-wrap .pm-coll.is-locked .pm-coll-name { color: var(--pm-text-muted) !important; font-weight: 400 !important; }
.pm-wrap .pm-coll.is-rare { border-color: #1976d2 !important; }
.pm-wrap .pm-coll.is-epic { border-color: #7b1fa2 !important; }

/* ============================================================
 * 17. ACHIEVEMENT
 * ============================================================ */
.pm-wrap .pm-ach-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)) !important; gap: 12px !important; margin-top: 14px !important; }
.pm-wrap .pm-ach { display: flex !important; gap: 12px !important; align-items: flex-start !important; opacity: 1 !important; background: #ffffff !important; border: 1.5px solid rgba(211, 47, 47, 0.45) !important; border-radius: 12px !important; padding: 12px 14px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; transition: all 0.2s ease !important; }
.pm-wrap .pm-ach:hover { border-color: var(--pm-red-primary) !important; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15) !important; }
.pm-wrap .pm-ach.is-done { opacity: 1 !important; border-color: #f59e0b !important; background: linear-gradient(135deg, rgba(254, 243, 199, 0.55), #ffffff) !important; box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18) !important; }
.pm-wrap .pm-ach-ico { font-size: 28px !important; line-height: 1 !important; flex-shrink: 0 !important; }
.pm-wrap .pm-ach-body { flex: 1 !important; min-width: 0 !important; }
.pm-wrap .pm-ach-body b { display: block !important; font-size: 13.5px !important; font-weight: 800 !important; color: #000000 !important; }
.pm-wrap .pm-ach-body small { display: block !important; font-size: 11px !important; font-weight: 500 !important; color: #000000 !important; line-height: 1.4 !important; margin-top: 3px !important; }
.pm-wrap .pm-ach-done { display: block !important; font-size: 11px !important; color: var(--pm-green) !important; font-weight: 800 !important; margin-top: 5px !important; }
.pm-wrap .pm-ach-bar { height: 6px !important; border-radius: 20px !important; background: #e5e7eb !important; margin-top: 7px !important; overflow: hidden !important; }
.pm-wrap .pm-ach-bar div { height: 100% !important; background: linear-gradient(90deg,var(--pm-red-primary),var(--pm-red-bright)) !important; border-radius: 20px !important; }
.pm-wrap .pm-ach-prog { display: block !important; font-size: 11px !important; font-weight: 600 !important; color: #000000 !important; margin-top: 4px !important; }
.pm-wrap .pm-ach-prog b { color: #b78103 !important; font-weight: 800 !important; }

/* ============================================================
 * 18. SLOT EQUIPMENT (isi)
 * ============================================================ */
.pm-wrap .pm-slot { text-align: center !important; }
.pm-wrap .pm-slot-label { font-size: 10px !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--pm-text-muted) !important; margin-bottom: 8px !important; font-weight: 700 !important; }
.pm-wrap .pm-slot-icon { width: 52px !important; height: 52px !important; margin: 0 auto 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fafafa !important; border: 1px dashed var(--pm-red-border) !important; border-radius: 10px !important; font-size: 21px; color: rgba(211,47,47,.4); }
.pm-wrap .pm-slot-icon img { max-width: 44px !important; max-height: 44px !important; image-rendering: pixelated !important; }
.pm-wrap .pm-slot-name { font-size: 12px !important; font-weight: 700 !important; min-height: 30px !important; line-height: 1.3 !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-slot-name.is-empty { color: var(--pm-text-muted) !important; font-weight: 400 !important; font-style: italic !important; }

/* ============================================================
 * 19. KARTU: SHOP, SKILL, EVOLUSI, HABITAT (isi)
 * ============================================================ */
/* Pet Shop */
.pm-wrap .pm-shop-card { display: flex !important; gap: 11px !important; align-items: center !important; }
.pm-wrap .pm-shop-card.is-owned { opacity: .6 !important; }
.pm-wrap .pm-shop-icon { width: 48px !important; height: 48px !important; flex-shrink: 0 !important; border-radius: 9px !important; background: #fafafa !important; border: 1px dashed var(--pm-red-border) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px; }
.pm-wrap .pm-shop-icon img { max-width: 40px !important; max-height: 40px !important; image-rendering: pixelated !important; }
.pm-wrap .pm-shop-info { flex: 1 !important; min-width: 0 !important; }
.pm-wrap .pm-shop-name { font-weight: 700 !important; font-size: 13px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-shop-stats { font-size: 11px !important; color: var(--pm-green) !important; margin: 3px 0 6px !important; line-height: 1.4 !important; }
.pm-wrap .pm-shop-foot { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
.pm-wrap .pm-shop-price { color: #b78103 !important; font-weight: 800 !important; font-size: 12px !important; }
.pm-wrap .pm-shop-owned { font-size: 11px !important; color: var(--pm-green) !important; }
.pm-wrap .pm-shop-lock { font-size: 11px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-shop-buy { width: auto !important; margin-top: 0 !important; }

/* Skill */
.pm-wrap .pm-skill-card { display: flex !important; flex-direction: column !important; }
.pm-wrap .pm-skill-card.is-learned { border-color: var(--pm-red-primary) !important; background: var(--pm-red-soft) !important; }
.pm-wrap .pm-skill-head { display: flex !important; align-items: center !important; gap: 10px !important; }
.pm-wrap .pm-skill-ico { font-size: 26px !important; line-height: 1 !important; }
.pm-wrap .pm-skill-name { font-weight: 800 !important; font-size: 14px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-skill-lv { font-size: 11px !important; color: #b78103 !important; font-weight: 700 !important; }
.pm-wrap .pm-skill-desc { font-size: 11px !important; color: var(--pm-text-muted) !important; line-height: 1.4 !important; margin: 8px 0 !important; min-height: 30px !important; }
.pm-wrap .pm-skill-eff { font-size: 12px !important; margin-bottom: 8px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-skill-eff b { color: var(--pm-green) !important; }
.pm-wrap .pm-skill-bar { height: 6px !important; border-radius: 20px !important; background: rgba(0,0,0,.08) !important; overflow: hidden !important; margin-bottom: 10px !important; }
.pm-wrap .pm-skill-bar div { height: 100% !important; background: linear-gradient(90deg,#0288d1,#4fc3f7) !important; border-radius: 20px !important; }

/* Evolusi — family tree (induk → cabang) */
.pm-wrap .pm-evo-card { display: flex !important; flex-direction: column !important; text-align: center !important; }
.pm-wrap .pm-evo-card.is-ready { border-color: var(--pm-red-primary) !important; background: var(--pm-red-soft) !important; }
.pm-wrap .pm-evo-card.is-current {
    border-color: var(--pm-gold, #c9a227) !important;
    background: linear-gradient(180deg, #fff9e8, #fff) !important;
    box-shadow: 0 0 0 1px rgba(201,162,39,.25) !important;
}
.pm-wrap .pm-evo-sprite { height: 84px !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; background: radial-gradient(circle at 50% 70%, rgba(198,40,40,.08), transparent 60%) !important; border-radius: 10px !important; }
.pm-wrap .pm-evo-sprite canvas { image-rendering: pixelated !important; }
.pm-wrap .ro-mob-png {
    image-rendering: pixelated;
    animation: pm-png-idle 2.8s ease-in-out infinite;
}
.pm-wrap .pm-evo-sprite-sm { height: 52px !important; }
.pm-wrap .pm-evo-sprite-xs { height: 36px !important; width: 36px !important; flex: 0 0 36px !important; background: transparent !important; border-radius: 6px !important; }
@keyframes pm-png-idle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pm-wrap .pm-evo-name { font-weight: 800 !important; font-size: 14px !important; margin-top: 6px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-evo-desc { font-size: 11px !important; color: var(--pm-text-muted) !important; line-height: 1.4 !important; margin: 4px 0 8px !important; min-height: 30px !important; }
.pm-wrap .pm-evo-bonus { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; justify-content: center !important; margin-bottom: 8px !important; }
.pm-wrap .pm-evo-bonus span { font-size: 10px !important; color: var(--pm-text-muted) !important; background: #f7f7f7 !important; border: 1px solid var(--pm-red-border) !important; border-radius: 6px !important; padding: 2px 7px !important; }
.pm-wrap .pm-evo-bonus b { color: var(--pm-green) !important; }
.pm-wrap .pm-evo-reqs { text-align: left !important; margin-bottom: 10px !important; }
.pm-wrap .pm-req { font-size: 11px !important; color: #c62828 !important; padding: 2px 0 !important; }
.pm-wrap .pm-req.is-met { color: var(--pm-green) !important; }
.pm-wrap .pm-req b { color: var(--pm-text-dark) !important; }
.pm-wrap .pm-evo-btn { margin-top: auto !important; }
.pm-wrap .pm-evo-tier {
    align-self: center !important; font-size: 10px !important; font-weight: 800 !important;
    letter-spacing: .04em !important; text-transform: uppercase !important;
    color: var(--pm-muted) !important; background: #f3f3f3 !important;
    border: 1px solid var(--pm-red-border) !important; border-radius: 999px !important;
    padding: 2px 8px !important; margin-bottom: 4px !important;
}
.pm-wrap .pm-evo-path {
    display: flex !important; flex-wrap: wrap !important; align-items: center !important;
    gap: 6px !important; margin: 0 0 14px !important; font-size: 12px !important; color: var(--pm-muted) !important;
}
.pm-wrap .pm-evo-path-sep { opacity: .55 !important; }
.pm-wrap .pm-evo-path-node {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    background: #f7f7f7 !important; border: 1px solid var(--pm-red-border) !important;
    border-radius: 999px !important; padding: 2px 10px 2px 4px !important; font-weight: 600 !important;
}
.pm-wrap .pm-evo-path-node.is-now {
    background: var(--pm-red-soft) !important; border-color: var(--pm-red-primary) !important;
    color: var(--pm-text-dark) !important; font-weight: 800 !important;
}
.pm-wrap .pm-evo-path-label { line-height: 1.2 !important; }
.pm-wrap .pm-evo-tree {
    display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important;
    gap: 12px 14px !important; margin-bottom: 8px !important;
}
.pm-wrap .pm-evo-parent { flex: 0 0 220px !important; max-width: 100% !important; }
.pm-wrap .pm-evo-arrow {
    flex: 0 0 auto !important; font-size: 22px !important; color: var(--pm-muted) !important;
    padding-top: 70px !important; font-weight: 700 !important;
}
.pm-wrap .pm-evo-branches {
    flex: 1 1 260px !important; display: grid !important; gap: 12px !important; min-width: 0 !important;
}
.pm-wrap .pm-evo-branch {
    display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    gap: 10px !important; padding: 10px !important; border-radius: 12px !important;
    border: 1px dashed var(--pm-red-border) !important; background: rgba(0,0,0,.02) !important;
}
.pm-wrap .pm-evo-branch.is-ready { border-style: solid !important; border-color: var(--pm-red-primary) !important; background: var(--pm-red-soft) !important; }
.pm-wrap .pm-evo-branch > .pm-evo-card { flex: 1 1 200px !important; min-width: 180px !important; margin: 0 !important; }
.pm-wrap .pm-evo-leaf-note {
    color: var(--pm-muted) !important; font-size: 13px !important; padding: 18px 12px !important;
    border: 1px dashed var(--pm-red-border) !important; border-radius: 12px !important; background: #fafafa !important;
}
.pm-wrap .pm-evo-nexts {
    flex: 0 1 140px !important; display: flex !important; flex-direction: column !important;
    gap: 6px !important; justify-content: center !important; opacity: .78 !important;
}
.pm-wrap .pm-evo-nexts-label {
    font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important;
    letter-spacing: .04em !important; color: var(--pm-muted) !important;
}
.pm-wrap .pm-evo-next {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: #fff !important; border: 1px solid var(--pm-red-border) !important;
    border-radius: 10px !important; padding: 4px 8px 4px 4px !important;
}
.pm-wrap .pm-evo-next-name { font-size: 11px !important; font-weight: 700 !important; color: var(--pm-text-dark) !important; line-height: 1.25 !important; }
@media (max-width: 720px) {
    .pm-wrap .pm-evo-arrow { padding-top: 0 !important; width: 100% !important; text-align: center !important; transform: rotate(90deg) !important; }
    .pm-wrap .pm-evo-parent { flex-basis: 100% !important; }
}

/* Habitat */
.pm-wrap .pm-hab-card { padding: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; opacity: 1 !important; background: #ffffff !important; border: 1.5px solid rgba(211, 47, 47, 0.45) !important; border-radius: 12px !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important; transition: all 0.2s ease !important; }
.pm-wrap .pm-hab-card:hover { border-color: var(--pm-red-primary) !important; box-shadow: 0 4px 12px rgba(211, 47, 47, 0.15) !important; }
.pm-wrap .pm-hab-card.is-equipped { border-color: #f59e0b !important; border-width: 2px !important; box-shadow: 0 0 0 1px #f59e0b, 0 3px 10px rgba(245, 158, 11, 0.2) !important; }
.pm-wrap .pm-hab-card.is-locked { opacity: 1 !important; }
.pm-wrap .pm-hab-bg { height: 92px !important; position: relative !important; background-size: cover !important; background-position: center !important; }
.pm-wrap .pm-hab-bg-meadow { background-image: linear-gradient(160deg,#1d3a2a,#34694a); }
.pm-wrap .pm-hab-bg-crystal { background-image: linear-gradient(160deg,#1a2550,#3a4a8a); }
.pm-wrap .pm-hab-bg-volcano { background-image: linear-gradient(160deg,#3a1810,#8a3320); }
.pm-wrap .pm-hab-bg-sky { background-image: linear-gradient(160deg,#1a3a55,#5aa0d0); }
.pm-wrap .pm-hab-badge { position: absolute !important; top: 8px !important; left: 8px !important; background: var(--pm-gold) !important; color: #2a1e00 !important; font-size: 10px !important; font-weight: 800 !important; padding: 2px 8px !important; border-radius: 20px !important; }
.pm-wrap .pm-hab-lvl { position: absolute !important; top: 8px !important; right: 8px !important; background: rgba(0,0,0,.6) !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; padding: 2px 8px !important; border-radius: 20px !important; }
.pm-wrap .pm-hab-body { padding: 12px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
.pm-wrap .pm-hab-name { font-weight: 800 !important; font-size: 14px !important; color: #000000 !important; }
.pm-wrap .pm-hab-desc { font-size: 11px !important; font-weight: 500 !important; color: #000000 !important; line-height: 1.4 !important; margin: 3px 0 8px !important; min-height: 30px !important; }
.pm-wrap .pm-hab-effect { font-size: 11px !important; font-weight: 700 !important; margin: 2px 0 6px !important; }
.pm-wrap .pm-hab-effect.full { color: var(--pm-green) !important; }
.pm-wrap .pm-hab-effect.half { color: #b26a00 !important; }
.pm-wrap .pm-hab-bonus { display: flex !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 8px !important; }
.pm-wrap .pm-hab-bonus span { font-size: 10.5px !important; font-weight: 600 !important; color: #000000 !important; background: #f8fafc !important; border: 1px solid rgba(211, 47, 47, 0.35) !important; border-radius: 6px !important; padding: 2px 7px !important; }
.pm-wrap .pm-hab-bonus b { color: var(--pm-green) !important; font-weight: 700 !important; }
.pm-wrap .pm-hab-actions { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: auto !important; align-items: center !important; }
.pm-wrap .pm-hab-btn { width: auto !important; margin-top: 0 !important; font-weight: 700 !important; }
.pm-wrap .pm-hab-btn.buy { border-color: var(--pm-gold) !important; color: #b78103 !important; }
.pm-wrap .pm-hab-btn.up { border-color: #1976d2 !important; color: #1976d2 !important; }
.pm-wrap .pm-hab-lock { font-size: 11px !important; font-weight: 600 !important; color: #000000 !important; }

/* ============================================================
 * 20. STATISTIK (grid non-id), TOAST (di luar .pm-wrap)
 * ============================================================ */
.pm-wrap .pm-stats-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 9px !important; margin-top: 14px !important; }
@media (max-width: 600px) { .pm-wrap .pm-stats-grid { grid-template-columns: repeat(2,1fr) !important; } }

/* Toast: ditempel ke <body> di luar .pm-wrap -> warna eksplisit (putih/merah/hitam). */
.pm-toast {
    position: fixed; right: 22px; bottom: 22px; z-index: 2147483000;
    background: #ffffff; color: #111111;
    border: 1px solid rgba(211,47,47,.35); border-left: 5px solid var(--pm-red-primary, #d32f2f);
    border-radius: 11px; padding: 13px 18px; max-width: 340px; font-size: 13px; line-height: 1.45; font-weight: 600;
    box-shadow: 0 12px 30px rgba(211,47,47,.22); animation: pm-toast-in .3s ease;
}
.pm-toast b { color: #000; }
.pm-toast.is-err { border-left-color: #c62828; }
.pm-toast.is-ok { border-left-color: #2e7d32; }
@keyframes pm-toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================================================
 * Pet Market AJAX shell + confirm modal
 * ============================================================ */
#pmm-ajax-root { position: relative; min-height: 120px; transition: opacity .18s ease; }
#pmm-ajax-root.is-loading { opacity: .45; pointer-events: none; }
.pm-wrap .pm-shop-link.is-active {
    background: rgba(211, 47, 47, 0.12) !important;
    border-color: var(--pm-red-primary, #d32f2f) !important;
    font-weight: 800 !important;
}
.pmm-total-box {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--pm-red-border, rgba(211,47,47,.35));
    background: rgba(211, 47, 47, 0.06);
    font-size: 13px;
}
.pmm-total-box b { font-size: 15px; color: var(--pm-red-dark, #b71c1c); }

.pmm-modal[hidden] { display: none !important; }
.pmm-modal {
    position: fixed; inset: 0; z-index: 2147483600;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.pmm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20, 12, 12, 0.55);
    backdrop-filter: blur(2px);
}
.pmm-modal__box {
    position: relative; z-index: 1;
    width: min(420px, 100%);
    background: #fff;
    color: #1a1a1a;
    border-radius: 14px;
    border: 1px solid rgba(211, 47, 47, 0.28);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    padding: 20px 20px 16px;
    animation: pmm-modal-in .22s ease;
}
@keyframes pmm-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to { opacity: 1; transform: none; }
}
.pmm-modal__title {
    margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #111;
}
.pmm-modal__body {
    margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #333;
}
.pmm-modal__extra { margin-bottom: 12px; }
.pmm-modal__check {
    display: flex; gap: 8px; align-items: flex-start;
    font-size: 12px; line-height: 1.4; cursor: pointer;
}
.pmm-modal__actions {
    display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
}
.pmm-modal__btn {
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    background: #f5f5f5; color: #222;
}
.pmm-modal__btn--ghost { background: #fff; }
.pmm-modal__btn--ok {
    background: var(--pm-red-primary, #d32f2f);
    border-color: var(--pm-red-primary, #d32f2f);
    color: #fff;
}
.pmm-modal__btn--ok.is-danger {
    background: #b02a37;
    border-color: #b02a37;
}
body.pmm-modal-open { overflow: hidden; }

/* ============================================================
 * Pet Market — kartu toko + listing di dalamnya
 * ============================================================ */
.pmm-store-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.pmm-store-card {
    background: #fff;
    border: 1px solid var(--pm-red-border, rgba(211,47,47,.35));
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.pmm-store-card__head {
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(211,47,47,.08), rgba(255,255,255,0));
    border-bottom: 1px solid rgba(211,47,47,.12);
}
.pmm-store-card__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 800;
    color: var(--pm-text-dark, #1a1a1a);
}
.pmm-store-card__title a {
    color: inherit;
    text-decoration: none;
}
.pmm-store-card__title a:hover { color: var(--pm-red-primary, #d32f2f); }
.pmm-store-card__sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--pm-text-muted, #666);
}
.pmm-store-card__empty { margin: 12px 14px 16px !important; }
.pmm-store-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    padding: 12px 14px 14px;
}
.pmm-item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px 10px;
    background: #fafafa;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    min-height: 140px;
}
.pmm-item-card.is-held { opacity: .82; border-color: rgba(176,42,55,.35); }
.pmm-item-card__spr {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 4px !important;
}
.pmm-item-card__emoji {
    font-size: 28px;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2px;
}
.pmm-item-card__name {
    font-size: 13px;
    font-weight: 800;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
}
.pmm-item-card__meta {
    font-size: 10px;
    color: #666;
    text-align: center;
}
.pmm-item-card__price {
    font-size: 11px;
    text-align: center;
    color: #444;
    background: #fff;
    border-radius: 8px;
    padding: 6px 8px;
    margin-top: 4px;
}
.pmm-item-card__price b { color: var(--pm-green, #2e7d32); }
.pmm-item-card__total {
    display: block;
    font-size: 10px;
    color: #888;
    margin-top: 2px;
}
.pmm-item-card__tag {
    position: static !important;
    align-self: center;
    margin-top: 2px;
}
.pmm-item-card__tag.is-held { background: #b02a37 !important; color: #fff !important; }
.pmm-item-card__act { margin-top: auto; }
.pmm-item-card__btn {
    width: 100% !important;
    margin-top: 8px !important;
    padding: 8px 10px !important;
}
.pmm-item-card__btn.is-cancel {
    background: #b02a37 !important;
    border-color: #b02a37 !important;
}
@media (max-width: 520px) {
    .pmm-store-card__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
 * 21. v9 - KELANGKAAN PET, PELUANG MENETAS, KARTU HASIL UNDIAN
 * ============================================================ */

/* Lencana tier. Warnanya diambil dari --pm-rarity-color yang diisi PHP,
 * jadi menambah tier baru cukup lewat pm_rarity_meta(). */
.pm-wrap .pm-rarity {
    display: inline-flex !important; align-items: center !important; gap: 4px !important;
    font-size: 10px !important; font-weight: 800 !important; letter-spacing: .4px !important;
    text-transform: uppercase !important;
    color: var(--pm-rarity-color, #94a3b8) !important;
    background: color-mix(in srgb, var(--pm-rarity-color, #94a3b8) 12%, #ffffff) !important;
    border: 1px solid var(--pm-rarity-color, #94a3b8) !important;
    border-radius: 999px !important; padding: 2px 9px !important; white-space: nowrap !important;
}
.pm-wrap .pm-rarity-lg { font-size: 12px !important; padding: 5px 14px !important; }

/* Ringkasan keunggulan bawaan spesies di tab Status. */
.pm-wrap .pm-species-bonus { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px dashed var(--pm-red-border) !important; display: flex !important; flex-wrap: wrap !important; gap: 5px !important; }
.pm-wrap .pm-species-bonus-title { flex: 1 0 100% !important; font-size: 11px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--pm-red-primary) !important; margin-bottom: 3px !important; }
.pm-wrap .pm-species-bonus span { font-size: 10px !important; color: var(--pm-text-muted) !important; background: #f7f7f7 !important; border: 1px solid var(--pm-red-border) !important; border-radius: 6px !important; padding: 2px 7px !important; }
.pm-wrap .pm-species-bonus b { color: var(--pm-green) !important; }

.pm-wrap .pm-odds { text-align: left !important; max-width: 460px !important; margin: 18px auto 4px !important; }
.pm-wrap .pm-odds-title { font-size: 12px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .6px !important; color: var(--pm-red-primary) !important; margin-bottom: 8px !important; }
.pm-wrap .pm-odds-row {
    display: grid !important; grid-template-columns: 118px 56px 1fr !important; gap: 8px !important;
    align-items: center !important; padding: 7px 10px !important; border-radius: 9px !important;
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; margin-bottom: 6px !important;
}
.pm-wrap .pm-odds-pct { font-weight: 800 !important; color: var(--pm-text-dark) !important; font-size: 13px !important; text-align: right !important; }
.pm-wrap .pm-odds-names { font-size: 11px !important; color: var(--pm-text-muted) !important; }
@media (max-width: 520px) {
    .pm-wrap .pm-odds-row { grid-template-columns: 1fr auto !important; }
    .pm-wrap .pm-odds-names { grid-column: 1 / -1 !important; }
}

/* Kartu hasil undian: satu-satunya momen pemain tahu isi telurnya. */
.pm-wrap .pm-reveal {
    position: relative !important; display: flex !important; align-items: center !important; gap: 18px !important;
    background: linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--pm-rarity-color, #94a3b8) 14%, #ffffff)) !important;
    border: 2px solid var(--pm-rarity-color, #94a3b8) !important; border-radius: 14px !important;
    padding: 16px 20px !important; margin-bottom: 16px !important; overflow: hidden !important;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--pm-rarity-color, #94a3b8) 26%, transparent) !important;
}
.pm-wrap .pm-reveal-burst { position: absolute !important; right: 16px !important; top: 10px !important; font-size: 26px !important; animation: pm-reveal-pop 1.6s ease-in-out infinite !important; }
.pm-wrap .pm-reveal-sprite { width: 96px !important; height: 96px !important; flex: 0 0 96px !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; }
.pm-wrap .pm-reveal-kicker { font-size: 12px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-reveal-name { font-size: 22px !important; font-weight: 800 !important; color: var(--pm-text-dark) !important; line-height: 1.2 !important; }
.pm-wrap .pm-reveal-species { font-size: 13px !important; color: var(--pm-text-muted) !important; margin-bottom: 7px !important; }
@keyframes pm-reveal-pop { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }

/* ============================================================
 * 22. v9 - TAB GENERIK
 *
 * Satu gaya untuk semua grup tab (Lokasi/Voucher, Status Pet,
 * Achievement/Collection). Grup dibedakan lewat data-tabgroup,
 * jadi beberapa grup boleh hidup berdampingan di satu halaman.
 * ============================================================ */
.pm-wrap .pm-tabs {
    display: flex !important; gap: 6px !important; flex-wrap: wrap !important;
    margin: 0 0 12px !important; padding-bottom: 10px !important;
    border-bottom: 1px solid var(--pm-red-border) !important;
}
.pm-wrap .pm-tab {
    position: relative !important; flex: 0 1 auto !important; width: auto !important; margin: 0 !important;
    padding: 8px 15px !important; border-radius: 9px !important; cursor: pointer !important;
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important;
    color: var(--pm-text-muted) !important; font-size: 12px !important; font-weight: 700 !important;
    line-height: 1.2 !important; white-space: nowrap !important; transition: .16s !important;
}
.pm-wrap .pm-tab:hover { border-color: var(--pm-red-primary) !important; color: var(--pm-red-primary) !important; }
.pm-wrap .pm-tab.is-active {
    background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important;
    border-color: var(--pm-red-dark) !important; color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(211,47,47,.28) !important;
}
/* Lencana notifikasi pada judul tab (mis. voucher yang belum ditukar). */
.pm-wrap .pm-tab-dot {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    min-width: 17px !important; height: 17px !important; margin-left: 6px !important; padding: 0 5px !important;
    border-radius: 999px !important; background: var(--pm-gold) !important; color: #4a3200 !important;
    font-size: 10px !important; font-weight: 800 !important; vertical-align: middle !important;
    animation: pm-dot-pulse 1.8s ease-in-out infinite !important;
}
.pm-wrap .pm-tab.is-active .pm-tab-dot { background: #ffffff !important; color: var(--pm-red-dark) !important; }
@keyframes pm-dot-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.pm-wrap .pm-tabpanel { display: none !important; }
.pm-wrap .pm-tabpanel.is-active { display: block !important; }

/* Baris judul kecil di dalam panel tab (mis. "Poin tersedia"). */
.pm-wrap .pm-tab-head {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 4px !important;
}

/* ============================================================
 * 23. v9 - FASILITAS PET & MATERIAL (pet_facility.php)
 * ============================================================ */
.pm-wrap .pm-mat-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)) !important; gap: 9px !important; margin-top: 12px !important; }
.pm-wrap .pm-mat {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: #ffffff !important; border: 1px solid var(--pm-red-border) !important;
    border-radius: 10px !important; padding: 9px 11px !important; opacity: .55 !important;
}
.pm-wrap .pm-mat.is-have { opacity: 1 !important; border-color: var(--pm-red-primary) !important; }
.pm-wrap .pm-mat-ico { font-size: 20px !important; line-height: 1 !important; }
.pm-wrap .pm-mat-name { flex: 1 !important; font-size: 12px !important; font-weight: 700 !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-mat-desc { font-size: 11px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-mat-qty { font-size: 14px !important; color: var(--pm-red-primary) !important; }

/* Dashboard Facility Summary Grid & Realtime Harvest Timer (pet_mining.php) */
.pm-wrap .pm-fac-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
}
.pm-wrap .pm-fac-summary-card {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border, #fecaca) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}
.pm-wrap .pm-fac-summary-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12) !important;
    border-color: var(--pm-red-primary, #e11d48) !important;
}
.pm-wrap .pm-fac-summary-card.is-ready-harvest {
    border-color: #22c55e !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}
.pm-wrap .pm-fac-summary-ico-box {
    width: 36px !important;
    height: 36px !important;
    background: #f8fafc !important;
    border-radius: 9px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.pm-wrap .pm-fac-summary-ico {
    font-size: 22px !important;
    line-height: 1 !important;
}
.pm-wrap .pm-fac-summary-info {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.pm-wrap .pm-fac-summary-top {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: var(--pm-text-dark, #0f172a) !important;
}
.pm-wrap .pm-fac-summary-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-fac-summary-lv {
    font-size: 10px !important;
    font-weight: 800 !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    flex-shrink: 0 !important;
}
.pm-wrap .pm-fac-summary-status {
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}
.pm-wrap .pm-fac-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
}
.pm-wrap .pm-fac-badge.is-harvest {
    background: #dcfce7 !important;
    color: #15803d !important;
}
.pm-wrap .pm-fac-badge.is-full {
    background: #fef3c7 !important;
    color: #b45309 !important;
}
.pm-wrap .pm-fac-badge.is-upgrading {
    background: #e0e7ff !important;
    color: #4338ca !important;
}
.pm-wrap .pm-fac-badge.is-passive {
    background: #f1f5f9 !important;
    color: #475569 !important;
}
.pm-wrap .pm-fac-badge.is-market {
    background: #fdf2f8 !important;
    color: #be185d !important;
}
.pm-wrap .pm-fac-badge.is-ready {
    background: #f0fdf4 !important;
    color: #16a34a !important;
}
.pm-wrap .pm-fac-timer {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}
.pm-wrap .pm-fac-timer b {
    color: #0f172a !important;
    font-family: monospace, sans-serif !important;
    font-size: 12px !important;
}
.pm-wrap .pm-fac-summary-qty {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #16a34a !important;
    background: #dcfce7 !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

/* Tooltip Khusus Card Fasilitas (CSS Custom Tooltip) */
.pm-wrap .pm-fac-tip {
    bottom: calc(100% + 12px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 250px !important;
}
.pm-wrap .pm-fac-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-fac-summary-card:hover .pm-fac-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Tooltip Material Chip (CSS Custom Tooltip) */
.pm-wrap .pm-mat {
    position: relative !important;
}
.pm-wrap .pm-mat-tip {
    bottom: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 220px !important;
}
.pm-wrap .pm-mat-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-mat:hover .pm-mat-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}
.pm-wrap .pm-mat-shop { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)) !important; gap: 12px !important; margin-top: 12px !important; }
.pm-wrap .pm-mat-buy { background: #ffffff !important; border: 1px solid var(--pm-red-border) !important; border-radius: 12px !important; padding: 12px !important; }
.pm-wrap .pm-mat-buy-head { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 10px !important; }
.pm-wrap .pm-mat-buy-rows { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.pm-wrap .pm-mat-buy-row { display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important; }
.pm-wrap .pm-mat-price { flex: 1 !important; font-size: 12px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-mat-price small { color: var(--pm-text-muted) !important; }
.pm-wrap .pm-qty { width: 62px !important; margin: 0 !important; padding: 6px 8px !important; text-align: center !important; }

.pm-wrap .pm-fac-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(255px,1fr)) !important; gap: 14px !important; margin-top: 12px !important; }
.pm-wrap .pm-fac {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border) !important;
    border-radius: 13px !important;
    overflow: visible !important;
}
.pm-wrap .pm-fac:hover {
    z-index: 50 !important;
}
.pm-wrap .pm-fac.is-built { border-color: var(--pm-green) !important; }
.pm-wrap .pm-fac.is-locked { opacity: .7 !important; }
.pm-wrap .pm-fac-img {
    position: relative !important;
    height: 125px !important;
    background-color: #fff4f4 !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.pm-wrap .pm-fac-emoji { font-size: 46px !important; }
.pm-wrap .pm-fac-badge {
    position: static !important;
    background: var(--pm-green) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}
.pm-wrap .pm-fac-badge.is-upgrading {
    background: #3b82f6 !important;
}
.pm-wrap .pm-fac-badge.is-building {
    background: #f59e0b !important;
}
.pm-wrap .pm-fac-img-badges {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 4px !important;
    z-index: 2 !important;
}

/* Sisi Kiri Atas: Level Badge & Tombol Level UP */
.pm-wrap .pm-fac-img-left {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
    z-index: 30 !important;
}
.pm-wrap .pm-fac-img-left:hover {
    z-index: 60 !important;
}
.pm-wrap .pm-fac-lv {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    color: #f4c33f !important;
    border: 1px solid rgba(244, 195, 63, 0.45) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    padding: 3px 10px !important;
    line-height: 1.2 !important;
    letter-spacing: .3px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Tooltip Level UP Button (CSS Custom Tooltip) */
.pm-wrap .pm-fac-lvlup-form {
    position: relative !important;
    margin: 0 !important;
}
.pm-wrap .pm-fac-lvlup-tip {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    left: 0 !important;
    transform: translateY(-6px) scale(0.96) !important;
    transform-origin: top left !important;
    width: 250px !important;
    z-index: 99999 !important;
}
.pm-wrap .pm-fac-lvlup-tip::after {
    bottom: 100% !important;
    top: auto !important;
    border-color: transparent transparent #18181c transparent !important;
    left: 16px !important;
}
.pm-wrap .pm-fac-lvlup-form:hover .pm-fac-lvlup-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
}

.pm-wrap .pm-fac-lvlup-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    font-family: inherit !important;
    letter-spacing: 0.3px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-fac-lvlup-btn.is-ready {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    animation: pm-lvlup-glow 1.8s ease-in-out infinite !important;
}
.pm-wrap .pm-fac-lvlup-btn.is-ready:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #b45309 100%) !important;
    transform: scale(1.06) translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.65) !important;
}
.pm-wrap .pm-fac-lvlup-btn.is-disabled,
.pm-wrap .pm-fac-lvlup-btn:disabled {
    background: rgba(30, 30, 30, 0.72) !important;
    color: #cbd5e1 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.8 !important;
}
.pm-wrap .pm-fac-lvlup-arrow {
    font-weight: 900 !important;
    font-size: 11px !important;
}
@keyframes pm-lvlup-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(217, 119, 6, 0.4); }
    50% { box-shadow: 0 2px 14px rgba(245, 158, 11, 0.85); transform: translateY(-1px); }
}

.pm-wrap .pm-house-info-pill {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    color: #334155 !important;
    margin: 6px 0 8px !important;
    line-height: 1.35 !important;
}

.pm-wrap .pm-house-slot {
    position: relative !important;
    overflow: visible !important;
}
.pm-wrap .pm-house-slot.is-locked {
    position: relative !important;
    cursor: help !important;
}
.pm-wrap .pm-house-slot-tip {
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
    width: 230px !important;
    z-index: 99999 !important;
    pointer-events: none !important;
}
.pm-wrap .pm-house-slot-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pm-wrap .pm-house-slot:hover .pm-house-slot-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* ==========================================================================
   COMPANION PETS DOCK (BELOW VIEWPORT) & SHARED EXP
   ========================================================================== */
.pm-wrap .pm-companion-dock {
    margin-top: 12px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}
.pm-wrap .pm-companion-dock-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}
.pm-wrap .pm-companion-dock-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}
.pm-wrap .pm-companion-exp-tag {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #047857 !important;
    background: #d1fae5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
}
.pm-wrap .pm-companion-dock-link {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #3b82f6 !important;
    text-decoration: none !important;
}
.pm-wrap .pm-companion-dock-link:hover {
    text-decoration: underline !important;
}
.pm-wrap .pm-companion-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    gap: 10px !important;
}
.pm-wrap .pm-companion-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    transition: all 0.2s ease !important;
}
.pm-wrap .pm-companion-card:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}
.pm-wrap .pm-companion-spr-wrap {
    width: 44px !important;
    height: 44px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.pm-wrap .pm-companion-img {
    max-width: 36px !important;
    max-height: 36px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    display: block !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)) !important;
}
.pm-wrap .pm-companion-spr-egg {
    font-size: 22px !important;
    line-height: 1 !important;
}
.pm-wrap .pm-companion-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.pm-wrap .pm-companion-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
}
.pm-wrap .pm-companion-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-companion-slot-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    background: #e2e8f0 !important;
    border-radius: 4px !important;
    padding: 1px 4px !important;
}
.pm-wrap .pm-companion-stats {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}
.pm-wrap .pm-comp-lv {
    color: #2563eb !important;
}
.pm-wrap .pm-comp-hunger {
    color: #059669 !important;
}
.pm-wrap .pm-comp-exp-track {
    width: 100% !important;
    height: 5px !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-top: 2px !important;
}
.pm-wrap .pm-comp-exp-bar {
    height: 100% !important;
    background: linear-gradient(90deg, #3b82f6, #60a5fa) !important;
    border-radius: 999px !important;
    transition: width 0.3s ease !important;
}
.pm-wrap .pm-comp-exp-num {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}
.pm-wrap .pm-comp-btn-swap {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    color: #1d4ed8 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 5px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}
.pm-wrap .pm-comp-btn-swap:hover {
    background: #2563eb !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
    transform: scale(1.04) !important;
}

/* Efek Status Fasilitas */
.pm-wrap .pm-fac-effects-pill {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #86efac !important;
    border-radius: 8px !important;
    padding: 6px 9px !important;
    font-size: 11px !important;
}
.pm-wrap .pm-fac-effects-title {
    font-weight: 800 !important;
    color: #15803d !important;
    font-size: 10.5px !important;
    letter-spacing: 0.2px !important;
}
.pm-wrap .pm-fac-effects-tags {
    color: #166534 !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.pm-wrap .pm-fac-body { display: flex !important; flex-direction: column !important; gap: 7px !important; padding: 12px !important; flex: 1 !important; }
.pm-wrap .pm-fac-name { font-size: 14px !important; font-weight: 800 !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-fac-desc { font-size: 11px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-fac-out { font-size: 11px !important; color: var(--pm-text-muted) !important; background: #f7f7f7 !important; border-radius: 8px !important; padding: 6px 9px !important; }
.pm-wrap .pm-fac-out b { color: var(--pm-green) !important; }
.pm-wrap .pm-fac-ready { font-size: 12px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-fac-ready.is-ready { color: var(--pm-green) !important; font-weight: 700 !important; }
.pm-wrap .pm-fac-cost { display: flex !important; flex-direction: column !important; gap: 6px !important; margin-top: auto !important; }
.pm-wrap .pm-fac-cost-title { font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .5px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-fac-cost-item { font-size: 10px !important; border-radius: 6px !important; padding: 2px 7px !important; border: 1px solid var(--pm-red-border) !important; background: #f7f7f7 !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-fac-cost-item.is-ok b { color: var(--pm-green) !important; }
.pm-wrap .pm-fac-cost-item.is-missing { border-color: #e57373 !important; }
.pm-wrap .pm-fac-cost-item.is-missing b { color: #c62828 !important; }
.pm-wrap .pm-fac-cost-none { font-size: 11px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-fac form { margin: 0 !important; }

/* ---- Biaya upgrade / bangun: baris rapi, bukan chip berdesakan ---- */
.pm-wrap .pm-fac-upgrade {
    margin-top: 10px !important;
    background: #f7f7f7 !important;
    border-radius: 10px !important;
    padding: 10px !important;
    border: 1px solid #eee !important;
}
.pm-wrap .pm-fac-upgrade-head {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: 6px !important;
}
.pm-wrap .pm-fac-upgrade-head b {
    font-size: 12px !important;
    color: var(--pm-green) !important;
}
.pm-wrap .pm-fac-upgrade-head small {
    font-size: 11px !important;
    color: var(--pm-text-muted) !important;
}
.pm-wrap .pm-fac-cost-list {
    list-style: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-height: 168px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}
.pm-wrap .pm-fac-cost-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 8px !important;
    border-radius: 7px !important;
    background: #fff !important;
    border: 1px solid #e8e8e8 !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
}
.pm-wrap .pm-fac-cost-name {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: var(--pm-text-dark) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-fac-cost-name img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    flex-shrink: 0 !important;
}
.pm-wrap .pm-fac-cost-name .pm-cost-ic {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
}
.pm-wrap .pm-fac-cost-qty {
    flex: 0 0 auto !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--pm-text-muted) !important;
}
.pm-wrap .pm-fac-cost-row.is-ok .pm-fac-cost-qty b { color: var(--pm-green) !important; }
.pm-wrap .pm-fac-cost-row.is-missing {
    border-color: #ef9a9a !important;
    background: #fff8f8 !important;
}
.pm-wrap .pm-fac-cost-row.is-missing .pm-fac-cost-qty b { color: #c62828 !important; }
.pm-wrap .pm-fac-upgrade-form { margin: 0 !important; }
.pm-wrap .pm-fac-upgrade-form .pm-redeem { width: 100% !important; }

/* ---- Desain Tombol & Status Bangunan Modern ---- */
.pm-wrap .pm-fac-btn {
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    margin-top: 10px !important;
    border-radius: 11px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    font-family: inherit !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Tombol Bangun */
.pm-wrap .pm-fac-btn--build.is-affordable {
    background: linear-gradient(180deg, #e53935 0%, #b71c1c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(183, 28, 28, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.pm-wrap .pm-fac-btn--build.is-affordable:hover {
    background: linear-gradient(180deg, #ef5350 0%, #c62828 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(183, 28, 28, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.pm-wrap .pm-fac-btn--build.is-lacking,
.pm-wrap .pm-fac-btn--build:disabled {
    background: #f1f3f5 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Status Menunggu Pembangunan / Upgrade */
.pm-wrap .pm-fac-status {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin-top: 10px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
    box-sizing: border-box !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(217, 119, 6, 0.13) 100%) !important;
    border: 1.5px dashed rgba(245, 158, 11, 0.65) !important;
    color: #b45309 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08) !important;
    cursor: default !important;
}
.pm-wrap .pm-fac-status-icon {
    display: inline-block !important;
    font-size: 14px !important;
    animation: pm-sand-pulse 2.2s ease-in-out infinite !important;
}
@keyframes pm-sand-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
    50% { transform: scale(1.18) rotate(15deg); opacity: 1; }
}

/* Tombol Upgrade */
.pm-wrap .pm-fac-btn--upgrade {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}
.pm-wrap .pm-fac-btn--upgrade:hover {
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Tombol Panen Hasil */
.pm-wrap .pm-fac-btn--collect.is-ready {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.pm-wrap .pm-fac-btn--collect.is-ready:hover {
    background: linear-gradient(180deg, #34d399 0%, #059669 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.pm-wrap .pm-fac-btn--collect.is-disabled,
.pm-wrap .pm-fac-btn--collect:disabled {
    background: #f1f3f5 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Tombol Market */
.pm-wrap .pm-fac-btn--market {
    background: linear-gradient(180deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
.pm-wrap .pm-fac-btn--market:hover {
    background: linear-gradient(180deg, #f43f5e 0%, #be123c 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

/* Kotak Preview Listing Market di Card Fasilitas */
.pm-wrap .pm-fac-mkt-box {
    margin-top: 12px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
.pm-wrap .pm-fac-mkt-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.pm-wrap .pm-fac-mkt-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.pm-wrap .pm-fac-mkt-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    background: #e2e8f0 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}
.pm-wrap .pm-fac-mkt-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    max-height: 170px !important;
    overflow-y: auto !important;
}
.pm-wrap .pm-fac-mkt-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 6px 9px !important;
}
.pm-wrap .pm-fac-mkt-item-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
.pm-wrap .pm-fac-mkt-item-name {
    min-width: 0 !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-fac-mkt-item-price {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #d97706 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Tombol Terkunci */
.pm-wrap .pm-fac-btn--locked {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border: 1px dashed #cbd5e1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
}

.pm-wrap .pm-fac-upgrade-slots {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px dashed #e0e0e0 !important;
}
.pm-wrap .pm-fac-upgrade-slots-label {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
    color: var(--pm-text-muted) !important;
    margin-bottom: 6px !important;
}

/* Kartu Rumah Pet disamakan lebarnya dengan kartu bangunan lainnya */
.pm-wrap .pm-fac.pm-fac--house { min-width: 0 !important; grid-column: auto !important; }

/* ---- Rumah Pet slots (di dalam kartu) ---- */
.pm-wrap .pm-house-meta { font-size: 12px !important; font-weight: 600 !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-house-meta b { color: var(--pm-green) !important; }
.pm-wrap .pm-house-hint { font-size: 12px !important; color: var(--pm-text-muted) !important; margin: 0 0 12px !important; line-height: 1.45 !important; }
.pm-wrap .pm-house-hint--card { margin: 6px 0 0 !important; font-size: 10px !important; }
.pm-wrap .pm-house-slots {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}
.pm-wrap .pm-house-slots--card {
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
}
@media (max-width: 640px) {
    .pm-wrap .pm-house-slots { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .pm-wrap .pm-house-slots--card { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)) !important; }
}
.pm-wrap .pm-house-slot {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 118px !important;
    padding: 10px 6px !important;
    border-radius: 14px !important;
    border: 1.5px dashed var(--pm-red-border) !important;
    background: linear-gradient(180deg, #fff, #fff8f8) !important;
    cursor: pointer !important;
    font: inherit !important;
    color: var(--pm-text-dark) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}
.pm-wrap .pm-house-slots--card .pm-house-slot {
    min-height: 84px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.pm-wrap .pm-house-slot:not(:disabled):hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(120, 20, 25, .1) !important;
}
.pm-wrap .pm-house-slot.is-filled {
    border-style: solid !important;
    border-color: #86efac !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%) !important;
}
.pm-wrap .pm-house-slot.is-empty {
    border-style: dashed !important;
    border-color: #f59e0b !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%) !important;
}
.pm-wrap .pm-house-slot.is-locked {
    opacity: .55 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    border-style: solid !important;
    border-color: #cbd5e1 !important;
}
.pm-wrap .pm-house-slot-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    width: 100% !important;
}
.pm-wrap .pm-house-slot-title {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-house-slot-plus {
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #d97706 !important;
    line-height: 1 !important;
}
.pm-wrap .pm-house-slot-ico {
    font-size: 13px !important;
    line-height: 1 !important;
}
.pm-wrap .pm-house-slot-lock {
    font-size: 13px !important;
    line-height: 1 !important;
}
.pm-wrap .pm-house-slot-name {
    font-weight: 800 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: center !important;
}
.pm-wrap .pm-house-slot-tag {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    font-size: 8px !important;
    font-weight: 800 !important;
    background: var(--pm-green) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 1px 5px !important;
}
.pm-wrap .pm-house-drawer-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0,0,0,.4) !important;
    z-index: 90 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .2s !important;
}
.pm-wrap .pm-house-drawer-backdrop.is-open { opacity: 1 !important; pointer-events: auto !important; }
.pm-wrap .pm-house-drawer {
    position: fixed !important;
    top: max(52px, 8vh) !important;
    right: 14px !important;
    width: min(340px, calc(100vw - 28px)) !important;
    max-height: min(78vh, 560px) !important;
    overflow: auto !important;
    z-index: 100 !important;
    background: #fff !important;
    border: 1px solid var(--pm-red-border) !important;
    border-radius: 14px !important;
    padding: 18px 16px 20px !important;
    box-shadow: -8px 12px 28px rgba(0,0,0,.16) !important;
    transform: translateX(calc(100% + 28px)) !important;
    transition: transform .25s ease !important;
}
.pm-wrap .pm-house-drawer.is-open { transform: translateX(0) !important; }
.pm-wrap .pm-house-drawer-close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 22px !important;
    cursor: pointer !important;
    color: var(--pm-text-muted) !important;
}
.pm-wrap .pm-house-drawer-hero {
    height: 150px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    margin: 8px 0 10px !important;
    border-radius: 12px !important;
    background: radial-gradient(circle at 50% 70%, rgba(232,160,74,.18), transparent 60%), #fafafa !important;
}
.pm-wrap .pm-house-slot-name.is-empty-lbl {
    font-size: 9.5px !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}
.pm-wrap .pm-house-slot-desc-locked {
    font-size: 9.5px !important;
    color: #64748b !important;
    margin: 3px 0 !important;
}
.pm-wrap .pm-house-slot-eff {
    font-size: 8.5px !important;
    font-weight: 700 !important;
    color: #15803d !important;
    background: rgba(134, 239, 172, 0.3) !important;
    border-radius: 4px !important;
    padding: 2px 4px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.pm-wrap .pm-house-slot-eff.is-pending-eff {
    color: #b45309 !important;
    background: rgba(253, 230, 138, 0.35) !important;
}
.pm-wrap .pm-house-slot-eff.is-locked-eff {
    color: #64748b !important;
    background: #e2e8f0 !important;
}

/* Modal Pilih Telur / Kelola Slot */
.pm-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}
.pm-modal-dialog {
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border) !important;
    border-radius: 16px !important;
    width: min(480px, 100%) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    flex-direction: column !important;
}
.pm-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: linear-gradient(180deg, #ffffff, #fafafa) !important;
}
.pm-modal-close {
    border: 0 !important;
    background: #f1f5f9 !important;
    border-radius: 999px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    color: #64748b !important;
    transition: all 0.15s ease !important;
}
.pm-modal-close:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
}
.pm-modal-body {
    padding: 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.pm-slot-info-box {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
    border: 1px solid #86efac !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.pm-slot-desc-txt {
    font-size: 12px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}
.pm-slot-eff-txt {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    color: #15803d !important;
}
.pm-slot-cur-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
}
.pm-slot-cur-head {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    margin-bottom: 6px !important;
}
.pm-slot-cur-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.pm-slot-cur-spr {
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}
.pm-slot-cur-meta {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.pm-btn-unassign {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}
.pm-eggs-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.pm-eggs-head {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
}
.pm-eggs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}
.pm-egg-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    transition: border-color 0.15s ease !important;
}
.pm-egg-item:hover {
    border-color: #94a3b8 !important;
}
.pm-egg-ico {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.pm-egg-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
.pm-egg-name {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
}
.pm-egg-meta {
    font-size: 10.5px !important;
    color: #64748b !important;
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}
.pm-egg-status-tag {
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
}
.pm-egg-status-tag.is-egg {
    background: #fef3c7 !important;
    color: #92400e !important;
}
.pm-egg-status-tag.is-hatched {
    background: #dcfce7 !important;
    color: #166534 !important;
}
.pm-wrap .pm-house-drawer-spr { width: 140px !important; height: 140px !important; }
.pm-wrap .pm-house-drawer h3 { margin: 0 0 4px !important; font-size: 18px !important; color: var(--pm-text-dark) !important; }
.pm-wrap .pm-house-drawer-sub { margin: 0 0 8px !important; font-size: 13px !important; color: var(--pm-text-muted) !important; }
.pm-wrap .pm-house-drawer-note { margin: 0 !important; font-size: 12px !important; color: var(--pm-text-muted) !important; line-height: 1.45 !important; }

/* Hormati pengurangan animasi */
@media (prefers-reduced-motion: reduce) {
    .pm-wrap .pm-pet-sprite, .pm-wrap .pm-scene-fx, .pm-wrap .pm-egg, .pm-wrap .pm-zzz,
    .pm-wrap .pm-weather, .pm-wrap .pm-mood-emote, .pm-wrap .pm-reveal-burst,
    .pm-wrap .pm-tab-dot { animation: none !important; }
}

/* =====================================================================
 * PENYEMPURNAAN UI v7.1
 * (1) kolom atas rata tinggi  (2) kartu Lokasi Tambang lebih cantik
 * (3) tab Status/Statistik    (4) badge peringkat di kartu pet
 * ===================================================================== */

/* (1) Kartu "Pet Anda" ditarik setinggi kolom terpanggi agar sejajar rata,
       isi disebar (skill turun ke bawah) sehingga kartu terisi merata. */
.pm-wrap .pm-left { align-self: stretch !important; display: flex !important; flex-direction: column !important; }
.pm-wrap .pm-left .pm-active-skills { margin-top: auto !important; padding-top: 10px !important; }

/* (2) Kartu Lokasi Tambang: bentuk & font diperbagus. */
.pm-wrap .pm-area-btn {
    padding: 12px 14px !important; border-radius: 14px !important; gap: 8px !important;
    background: linear-gradient(180deg, #ffffff, #fff5f5) !important;
    border: 1.5px solid rgba(211, 47, 47, 0.45) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
    letter-spacing: .2px !important; line-height: 1.25 !important;
    color: #000000 !important;
}
.pm-wrap .pm-area-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important; border-color: var(--pm-red-primary) !important;
    box-shadow: 0 9px 20px rgba(120, 20, 25, .16) !important;
}
.pm-wrap .pm-area-btn > span:first-child { font-size: 17px !important; }
.pm-wrap .pm-area-btn > span:nth-child(2) { font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .4px !important; color: #000000 !important; }
.pm-wrap .pm-area-btn small { font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .1px !important; margin-top: 2px !important; color: #000000 !important; }
.pm-wrap .pm-area-btn.is-active { transform: translateY(-1px) !important; box-shadow: 0 9px 22px rgba(211, 47, 47, .4) !important; }
.pm-wrap .pm-area-btn.is-active > span:nth-child(2) { color: #ffffff !important; }
.pm-wrap .pm-area-btn.is-active small { color: #ffffff !important; opacity: 0.9 !important; }
.pm-wrap .pm-area-btn:disabled:not(.is-active) { opacity: 1 !important; background: #fafafa !important; border-color: rgba(211, 47, 47, 0.25) !important; }
.pm-wrap .pm-area-btn:disabled:not(.is-active) > span:nth-child(2) { color: #444444 !important; }
.pm-wrap .pm-area-btn:disabled:not(.is-active) small { color: #555555 !important; }

/* (3) Tab Status / Statistik pada panel kanan. */
.pm-wrap .pm-rt-tabs { display: flex !important; gap: 6px !important; margin-bottom: 12px !important; }
.pm-wrap .pm-rt-tab {
    flex: 1 1 0 !important; padding: 8px 6px !important; border-radius: 9px !important; cursor: pointer !important;
    font-weight: 800 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: .3px !important;
    background: #ffffff !important; color: var(--pm-text-dark) !important; border: 1px solid var(--pm-red-border) !important;
    transition: .16s !important;
}
.pm-wrap .pm-rt-tab.is-active { background: linear-gradient(180deg, var(--pm-red-primary), var(--pm-red-dark)) !important; color: #fff !important; border-color: var(--pm-red-dark) !important; }
.pm-wrap .pm-rt-panel { display: none !important; }
.pm-wrap .pm-rt-panel.is-active { display: block !important; }
.pm-wrap .pm-rt-panel .pm-stat-row .pm-v { color: var(--pm-red-primary) !important; font-weight: 800 !important; }
.pm-wrap .pm-stat-note { font-size: 11px !important; color: var(--pm-text-muted) !important; margin-top: 12px !important; line-height: 1.5 !important; }

/* (4) Badge peringkat di kartu Pet Anda. */
.pm-wrap .pm-pet-ranks { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 6px !important; margin: 12px auto 0 !important; }
.pm-wrap .pm-rank-badge {
    display: inline-flex !important; align-items: center !important; gap: 3px !important; font-size: 12px !important; font-weight: 800 !important;
    padding: 3px 9px !important; border-radius: 999px !important; color: #4a1f00 !important;
    background: linear-gradient(180deg, #fff3cf, #f4c33f) !important; border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 2px 6px rgba(180, 120, 20, .25) !important;
}
.pm-wrap .pm-rank-badge.pm-rank-other { background: #ffffff !important; color: var(--pm-text-dark) !important; border-color: var(--pm-red-border) !important; box-shadow: none !important; }
.pm-wrap .pm-rank-badge .rl { font-size: 11px !important; opacity: .9 !important; }

/* Efek equipment yang tampil di tiap slot (chip kecil + tooltip). */
.pm-wrap .pm-slot-eff { display: flex !important; flex-wrap: wrap !important; gap: 3px !important; justify-content: center !important; margin-top: 5px !important; }
.pm-wrap .pm-eff-chip {
    font-size: 10px !important; font-weight: 700 !important; line-height: 1.4 !important; padding: 1px 6px !important;
    border-radius: 6px !important; background: var(--pm-red-soft, rgba(211,47,47,.08)) !important;
    color: var(--pm-text-dark, #1a1a1a) !important; border: 1px solid var(--pm-red-border, rgba(211,47,47,.3)) !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-slot-eff-none { font-size: 10px !important; color: var(--pm-text-muted, #8a6b6d) !important; text-align: center !important; margin-top: 5px !important; }

/* ============================================================
 * VERSI & CHANGELOG (badge di atas halaman)
 * ============================================================ */
.pm-wrap .pm-version {
    margin: 0 0 14px !important;
}
.pm-wrap .pm-version-box {
    border: 1px solid rgba(211, 47, 47, 0.28) !important;
    background: linear-gradient(180deg, #fff8f8, #fff) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
/* Mode ringkas: hanya tombol nomor versi, tetap bisa diklik untuk membuka changelog */
.pm-wrap .pm-version-compact {
    display: inline-block !important;
}
.pm-wrap .pm-version-compact .pm-version-summary {
    padding: 6px 10px !important;
}
.pm-wrap .pm-version-compact .pm-version-summary::after {
    margin-left: 6px !important;
}
.pm-wrap .pm-version-summary {
    list-style: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    user-select: none !important;
}
.pm-wrap .pm-version-summary::-webkit-details-marker { display: none; }
.pm-wrap .pm-version-summary::after {
    content: '▾' !important;
    margin-left: auto !important;
    color: var(--pm-red-primary, #c62828) !important;
    font-size: 12px !important;
    transition: transform .2s ease !important;
}
.pm-wrap .pm-version-box[open] .pm-version-summary::after {
    transform: rotate(-180deg) !important;
}
.pm-wrap .pm-version-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: linear-gradient(180deg, var(--pm-red-primary, #d32f2f), var(--pm-red-dark, #8e1b1b)) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    letter-spacing: .02em !important;
}
.pm-wrap .pm-version-name {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--pm-red-dark, #8e1b1b) !important;
}
/* Pemain: badge bisa diklik, tampil seluruh riwayat sekaligus */
.pm-wrap .pm-version-player .pm-version-box {
    background: #ffffff !important;
}
.pm-wrap .pm-version-player .pm-version-name-soft {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--pm-text-muted, #5a5a5a) !important;
}
.pm-wrap .pm-version-player .pm-version-panel {
    max-height: min(60vh, 520px) !important;
    overflow: auto !important;
}
.pm-wrap .pm-version-hint {
    font-size: 11px !important;
    color: var(--pm-text-muted, #8a6b6d) !important;
}
.pm-wrap .pm-version-new {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: #2e7d32 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    animation: pm-ver-pulse 1.4s ease-in-out infinite !important;
}
.pm-wrap .pm-version.has-new .pm-version-box {
    border-color: rgba(46, 125, 50, 0.45) !important;
    box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.12) !important;
}
@keyframes pm-ver-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.pm-wrap .pm-version-panel {
    border-top: 1px solid rgba(211, 47, 47, 0.15) !important;
    padding: 12px 14px 14px !important;
    background: #fff !important;
}
.pm-wrap .pm-version-panel-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
}
.pm-wrap .pm-version-panel-head strong {
    color: var(--pm-red-primary, #d32f2f) !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
}
.pm-wrap .pm-version-date {
    font-size: 11px !important;
    color: var(--pm-text-muted, #8a6b6d) !important;
}
.pm-wrap .pm-version-entry {
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: #fafafa !important;
}
.pm-wrap .pm-version-entry.is-latest {
    background: #fff8f0 !important;
    border-color: rgba(211, 47, 47, 0.22) !important;
}
.pm-wrap .pm-version-entry header {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}
.pm-wrap .pm-version-entry-ver {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #fff !important;
    background: var(--pm-red-primary, #d32f2f) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}
.pm-wrap .pm-version-entry.is-latest .pm-version-entry-ver {
    background: linear-gradient(180deg, #e65100, #bf360c) !important;
}
.pm-wrap .pm-version-entry-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}
.pm-wrap .pm-version-entry-date {
    margin-left: auto !important;
    font-size: 11px !important;
    color: var(--pm-text-muted, #8a6b6d) !important;
}
.pm-wrap .pm-version-entry ul {
    margin: 0 !important;
    padding-left: 18px !important;
}
.pm-wrap .pm-version-entry li {
    font-size: 12px !important;
    line-height: 1.45 !important;
    color: #333 !important;
    margin: 2px 0 !important;
}
.pm-wrap .pm-version-foot {
    margin: 8px 0 0 !important;
    font-size: 11px !important;
    color: var(--pm-text-muted, #8a6b6d) !important;
}



/* Dashboard widget Pet hari ini (main.php — kolom kiri) */
.pm-dash-widget {
    background: #ffffff !important;
    opacity: 1 !important;
}
.pm-dash-widget .pm-dash-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 11px;
    margin: 8px 0 10px;
    line-height: 1.35;
}
.pm-dash-widget .pm-dash-row span {
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}
.pm-dash-widget .pm-dash-quests {
    display: grid;
    gap: 6px;
}
.pm-dash-widget .pm-dash-q {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 6px;
    row-gap: 4px;
    font-size: 11px;
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 7px 8px;
}
.pm-dash-widget .pm-dash-q .pm-dash-q-name {
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-dash-widget .pm-dash-q .bar {
    grid-column: 1 / -1;
    height: 5px;
    background: #eee;
    border-radius: 99px;
    overflow: hidden;
}
.pm-dash-widget .pm-dash-q .bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #d32f2f, #ff7043);
}
.pm-dash-widget .pm-dash-q .pm-dash-q-meta {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #666;
}

/* ============================================================
 * GLOBAL MODAL CONFIRM/ALERT
 * ============================================================ */
.pm-global-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.pm-global-modal.is-open {
    display: flex !important;
}
.pm-global-modal[hidden] {
    display: none !important;
}
.pm-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10000 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}
.pm-modal-backdrop.is-open {
    display: flex !important;
}
.pm-global-modal__backdrop {
    position: absolute !important;
    top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
}
.pm-global-modal__box {
    position: relative !important;
    background: #fff !important;
    border-radius: 12px !important;
    padding: 24px !important;
    width: 90% !important;
    max-width: 380px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    text-align: center !important;
    animation: pm-global-modal-in 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
}
@keyframes pm-global-modal-in {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.pm-global-modal__title {
    margin: 0 0 12px !important;
    font-size: 18px !important;
    color: var(--pm-red-primary, #d32f2f) !important;
    font-weight: 700 !important;
}
.pm-global-modal__body {
    margin: 0 0 20px !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.5 !important;
}
.pm-global-modal__actions {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
}
.pm-global-modal .pm-btn {
    padding: 10px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    border: none !important;
}
.pm-global-modal .pm-btn--primary {
    background: linear-gradient(180deg, var(--pm-red-primary, #d32f2f), var(--pm-red-dark, #8e1b1b)) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3) !important;
}
.pm-global-modal .pm-btn--primary:hover {
    filter: brightness(1.1) !important;
}
.pm-global-modal .pm-btn--ghost {
    background: #f1f1f1 !important;
    color: #555 !important;
}
.pm-global-modal .pm-btn--ghost:hover {
    background: #e4e4e4 !important;
}

/* ============================================================
 * MY MARKET — REDESIGNED SELLER UI
 * ============================================================ */

/* Store Profile Header */
.pmm-store-header-box {
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border, rgba(211,47,47,.25)) !important;
    border-radius: 14px !important;
    padding: 16px 18px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.04) !important;
}
.pmm-store-header-main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}
.pmm-store-icon {
    font-size: 32px !important;
    line-height: 1 !important;
    background: #fee2e2 !important;
    border-radius: 12px !important;
    padding: 10px !important;
    flex-shrink: 0 !important;
}
.pmm-store-info {
    flex: 1 !important;
    min-width: 200px !important;
}
.pmm-store-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-bottom: 6px !important;
}
.pmm-store-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--pm-text-dark, #1e293b) !important;
    margin: 0 !important;
}
.pmm-badge {
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.pmm-badge--lv {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}
.pmm-badge--status {
    background: #f1f5f9 !important;
    color: #64748b !important;
}
.pmm-badge--status.is-open {
    background: #dcfce7 !important;
    color: #15803d !important;
}
.pmm-badge--feat {
    background: #fef3c7 !important;
    color: #b45309 !important;
}
.pmm-store-slot-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.pmm-slot-bar-wrap {
    width: 140px !important;
    height: 8px !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
}
.pmm-slot-bar {
    height: 100% !important;
    background: linear-gradient(90deg, #10b981, #059669) !important;
    border-radius: 999px !important;
    transition: width .3s ease !important;
}
.pmm-slot-text {
    font-size: 12px !important;
    color: #64748b !important;
}
.pmm-slot-text b {
    color: #0f172a !important;
}
.pmm-btn-toggle-rename {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}
.pmm-btn-toggle-rename:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
}

/* Rename Drawer */
.pmm-rename-drawer {
    display: none !important;
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px dashed #e2e8f0 !important;
}
.pmm-rename-drawer.is-visible {
    display: block !important;
}
.pmm-rename-form {
    display: flex !important;
    gap: 8px !important;
    max-width: 420px !important;
}
.pmm-rename-input {
    flex: 1 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--pm-red-border) !important;
    font-size: 13px !important;
}
.pmm-rename-btn {
    width: auto !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
}

/* Upgrade Card */
.pmm-upgrade-card {
    margin-top: 14px !important;
    background: #fff8f8 !important;
    border: 1px solid rgba(225, 29, 72, 0.2) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
}
.pmm-upgrade-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}
.pmm-upgrade-title {
    font-size: 13px !important;
    color: #334155 !important;
}
.pmm-upgrade-title b {
    color: #be123c !important;
}
.pmm-upgrade-title small {
    color: #64748b !important;
    margin-left: 4px !important;
}
.pmm-upgrade-btn {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
}
.pmm-upgrade-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37,99,235,0.4) !important;
}
.pmm-cost-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* ============================================================
 * Modern Pet Market Button & Navigation System (v12.49)
 * ============================================================ */

/* Top Header Action Button (Fasilitas, Pet) */
.pmm-head-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 20px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(225, 29, 72, 0.25) !important;
    transition: all .18s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
}
.pmm-head-btn:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 5px 14px rgba(225, 29, 72, 0.38) !important;
    filter: brightness(1.06) !important;
}
.pmm-head-btn:active {
    transform: translateY(0) !important;
}

/* Main Navigation Tabs Bar */
.pmm-nav-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1.5px solid transparent !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    user-select: none !important;
    cursor: pointer !important;
}
.pmm-nav-tab:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: translateY(-1px) !important;
}
.pmm-nav-tab.is-active {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border-color: #be123c !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3) !important;
    font-weight: 800 !important;
}

/* Category & Subnav Tabs (Material / Food / Telur) */
.pmm-category-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    transition: all .15s ease !important;
    cursor: pointer !important;
    user-select: none !important;
}
.pmm-category-tab:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px) !important;
}
.pmm-category-tab.is-active {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border-color: #be123c !important;
    box-shadow: 0 3px 10px rgba(225, 29, 72, 0.28) !important;
}

/* Search Bar Toolbar */
.pmm-search-bar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-end !important;
    margin-bottom: 14px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}
.pmm-search-field {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}
.pmm-search-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}
.pmm-search-input, .pmm-search-select {
    height: 38px !important;
    padding: 0 12px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
    box-sizing: border-box !important;
}
.pmm-search-input:focus, .pmm-search-select:focus {
    border-color: #e11d48 !important;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15) !important;
    outline: none !important;
}
.pmm-search-btn {
    height: 38px !important;
    padding: 0 22px !important;
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25) !important;
    transition: all .18s ease !important;
    white-space: nowrap !important;
    margin-bottom: 0 !important;
}
.pmm-search-btn:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
    filter: brightness(1.06) !important;
}
.pmm-search-btn:active {
    transform: translateY(0) !important;
}

/* Card Action Buttons (Beli, Listing Anda, Batal) */
.pmm-card-btn {
    width: 100% !important;
    height: 34px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    border: none !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    margin-top: 8px !important;
}
.pmm-card-btn--buy {
    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
}
.pmm-card-btn--buy:hover:not(:disabled) {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35) !important;
    filter: brightness(1.06) !important;
}
.pmm-card-btn--self,
.pmm-card-btn:disabled {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    transform: none !important;
    filter: none !important;
}
.pmm-card-btn--cancel {
    background: #fff1f2 !important;
    color: #e11d48 !important;
    border: 1.5px solid #fecdd3 !important;
}
.pmm-card-btn--cancel:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #be123c !important;
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.25) !important;
}

/* Sell Tab Switcher */
.pmm-sell-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
}
.pmm-sell-tab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
    cursor: pointer !important;
}
.pmm-sell-tab:hover {
    border-color: #cbd5e1 !important;
    color: #0f172a !important;
    background: #f8fafc !important;
}
.pmm-sell-tab.is-active {
    border-color: #e11d48 !important;
    background: #fff1f2 !important;
    color: #be123c !important;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.12) !important;
}

/* Visual Ore Grid Selector */
.pmm-ore-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
    max-height: 240px !important;
    overflow-y: auto !important;
    padding: 4px !important;
}
.pmm-ore-card {
    position: relative !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all .15s ease !important;
    user-select: none !important;
}
.pmm-ore-card:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
}
.pmm-ore-card.is-selected {
    border-color: #e11d48 !important;
    background: #fff1f2 !important;
    box-shadow: 0 0 0 2.5px #e11d48, 0 4px 12px rgba(225, 29, 72, 0.2) !important;
    transform: translateY(-2px) !important;
}
.pmm-ore-card.is-selected::after {
    content: '✓' !important;
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(225, 29, 72, 0.4) !important;
}
.pmm-filter-pill {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    background: #f8fafc !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.pmm-filter-pill:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}
.pmm-filter-pill.is-active {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #be123c !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
}
.pmm-ore-card.is-empty {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}
.pmm-ore-card__img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
}
.pmm-ore-card__name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.pmm-ore-card__stock {
    font-size: 10.5px !important;
    font-weight: 800 !important;
    color: #15803d !important;
    background: #dcfce7 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
}
.pmm-ore-card.is-empty .pmm-ore-card__stock {
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
}

/* Sell Form Controls & Quick Presets */
.pmm-form-panel {
    background: #ffffff !important;
    border: 1px solid var(--pm-red-border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}
.pmm-form-grid {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 18px !important;
}
@media (max-width: 768px) {
    .pmm-form-grid { grid-template-columns: 1fr !important; }
}
.pmm-quick-btns {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
}
.pmm-quick-btn {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #334155 !important;
    cursor: pointer !important;
    transition: all .12s ease !important;
}
.pmm-quick-btn:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

/* Calculation Breakdown Card */
.pmm-calc-card {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
.pmm-calc-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 12.5px !important;
    color: #475569 !important;
}
.pmm-calc-row b {
    color: #0f172a !important;
}
.pmm-calc-row--net {
    padding-top: 8px !important;
    border-top: 1px dashed #cbd5e1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #166534 !important;
}
.pmm-calc-row--net b {
    color: #15803d !important;
    font-size: 16px !important;
}

/* Submit Action Button */
.pmm-submit-sell-btn {
    width: 100% !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #e11d48 0%, #be123c 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35) !important;
    cursor: pointer !important;
    transition: all .15s ease !important;
    margin-top: 14px !important;
}
.pmm-submit-sell-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(225, 29, 72, 0.45) !important;
}

/* ============================================================
 * EMPTY SLOT STAGE CARD & BUTTONS
 * ============================================================ */
.pm-wrap .pm-pet-stage.is-empty-slot {
    height: auto !important;
    min-height: 200px !important;
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

.pm-wrap .pm-stage-empty-box {
    text-align: center !important;
    padding: 12px 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 12px !important;
    border: 1.5px dashed #cbd5e1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.pm-wrap .pm-stage-empty-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 54px !important;
    margin-bottom: 6px !important;
    font-size: 32px !important;
    line-height: 1 !important;
}
.pm-wrap .pm-stage-empty-icon .pm-egg-main-img {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) !important;
    animation: pm-egg-idle 3s ease-in-out infinite alternate !important;
}
@keyframes pm-egg-idle {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(2deg); }
}

.pm-wrap .pm-stage-empty-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    display: block !important;
    line-height: 1.2 !important;
}

.pm-wrap .pm-stage-empty-desc {
    font-size: 11px !important;
    color: #64748b !important;
    margin: 4px 0 10px !important;
    line-height: 1.35 !important;
}

.pm-wrap .pm-stage-empty-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
}

.pm-wrap .pm-stage-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.pm-wrap .pm-stage-btn:hover {
    transform: translateY(-1px) !important;
}

.pm-wrap .pm-stage-btn-primary {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: #ffffff !important;
    border: 1px solid #f43f5e !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3) !important;
}
.pm-wrap .pm-stage-btn-primary:hover {
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.45) !important;
}

.pm-wrap .pm-stage-btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: 1px solid #34d399 !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3) !important;
}
.pm-wrap .pm-stage-btn-success:hover {
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.45) !important;
}

.pm-wrap .pm-stage-btn-indigo {
    background: linear-gradient(135deg, #4f46e5, #4338ca) !important;
    color: #ffffff !important;
    border: 1px solid #6366f1 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.3) !important;
}
.pm-wrap .pm-stage-btn-indigo:hover {
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.45) !important;
}

.pm-wrap .pm-stage-btn-secondary {
    background: #f8fafc !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.pm-wrap .pm-stage-btn-secondary:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ============================================================
 * CENTERED MODAL POPUP DIALOGS
 * ============================================================ */
.pm-custom-modal-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(15, 23, 42, 0.72) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.pm-custom-modal-box {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 480px !important;
    padding: 24px 22px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    animation: pm-modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes pm-modal-pop {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.pm-custom-modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.pm-custom-modal-close:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
}

/* ============================================================
 * VIEWPORT UNHATCHED EGG FLOATING PILL
 * ============================================================ */
.pm-wrap .pm-scene-egg-pill {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px 6px 10px !important;
    background: rgba(15, 23, 42, 0.88) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 1.5px solid rgba(251, 191, 36, 0.6) !important;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), 0 0 12px rgba(245, 158, 11, 0.25) !important;
    text-decoration: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.pm-wrap .pm-scene-egg-pill:hover {
    transform: translateY(-2px) scale(1.02) !important;
    border-color: #fbbf24 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 18px rgba(245, 158, 11, 0.45) !important;
}
.pm-wrap .pm-scene-egg-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 18px !important;
    animation: pm-egg-bounce 2.2s infinite ease-in-out !important;
}
.pm-wrap .pm-scene-egg-icon img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
}
@keyframes pm-egg-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-3px) rotate(-6deg); }
}
.pm-wrap .pm-scene-egg-txt {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2 !important;
    text-align: left !important;
}
.pm-wrap .pm-scene-egg-txt b {
    font-size: 12px !important;
    color: #fbbf24 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
.pm-wrap .pm-scene-egg-txt small {
    font-size: 10px !important;
    color: #cbd5e1 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8) !important;
}
.pm-wrap .pm-scene-egg-tip {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    width: 260px !important;
}

/* ============================================================
 * PET HOUSE EGG GUIDING CALLOUTS
 * ============================================================ */
.pm-wrap .pm-house-egg-guide {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    margin: 12px 0 10px !important;
    box-sizing: border-box !important;
    animation: pm-modal-pop 0.25s ease !important;
}

.pm-wrap .pm-house-egg-guide.is-available {
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
    border: 1.5px solid #34d399 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important;
}

.pm-wrap .pm-house-egg-guide.is-need-upgrade {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12) !important;
}

.pm-wrap .pm-house-egg-guide-icon {
    font-size: 26px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.pm-wrap .pm-house-egg-guide-content {
    flex: 1 !important;
}

.pm-wrap .pm-house-egg-guide.is-available .pm-house-egg-guide-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #065f46 !important;
    margin-bottom: 3px !important;
}

/* ============================================================
 * v11/v12 — DAILY LOGIN & DAILY QUESTS (CARD MODEL)
 * ============================================================ */
.pm-wrap .pm-daily {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.pm-wrap .pm-daily-login {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    flex-wrap: wrap !important;
}
.pm-wrap .pm-daily-login-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
.pm-wrap .pm-daily-streak {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #c2410c !important;
}
.pm-wrap .pm-daily-streak b {
    color: inherit !important;
}
.pm-wrap .pm-daily-streak small {
    font-weight: 700 !important;
    color: #64748b !important;
    background: #f1f5f9 !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    margin-left: 4px !important;
}
.pm-wrap .pm-daily-today {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 12px !important;
    font-size: 12px !important;
    color: #64748b !important;
}
.pm-wrap .pm-daily-today span {
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-daily-claim {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 170px !important;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ea580c, #c2410c) !important;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.28) !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}
.pm-wrap .pm-daily-claim:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35) !important;
}
.pm-wrap .pm-daily-claim:disabled {
    opacity: 0.8 !important;
    cursor: default !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.pm-wrap .pm-quest-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}
@media (max-width: 768px) {
    .pm-wrap .pm-quest-grid {
        grid-template-columns: 1fr !important;
    }
}
.pm-wrap .pm-quest {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}
.pm-wrap .pm-quest:hover {
    border-color: #cbd5e1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05) !important;
}
.pm-wrap .pm-quest.is-done {
    border-color: #86efac !important;
    background: linear-gradient(180deg, #f0fdf4, #ffffff) !important;
}
.pm-wrap .pm-quest.is-claimed {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    opacity: 0.75 !important;
}
.pm-wrap .pm-quest-ico {
    font-size: 26px !important;
    line-height: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}
.pm-wrap .pm-quest.is-done .pm-quest-ico {
    background: #dcfce7 !important;
    border-color: #bbf7d0 !important;
}
.pm-wrap .pm-quest-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    text-align: center !important;
}
.pm-wrap .pm-quest-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}
.pm-wrap .pm-quest-desc {
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
    min-height: 28px !important;
}
.pm-wrap .pm-quest-bar {
    height: 6px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 99px !important;
    margin-top: 6px !important;
    overflow: hidden !important;
}
.pm-wrap .pm-quest-bar i {
    display: block !important;
    height: 100% !important;
    background: linear-gradient(90deg, #3b82f6, #6366f1) !important;
    border-radius: 99px !important;
}
.pm-wrap .pm-quest.is-done .pm-quest-bar i {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}
.pm-wrap .pm-quest-prog {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}
.pm-wrap .pm-decor-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 12px !important;
    margin-top: 12px !important;
}
.pm-wrap .pm-decor-card {
    background: #fff !important;
    border: 1px solid var(--pm-red-border, #e5e7eb) !important;
    border-radius: 12px !important;
    padding: 14px 12px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.pm-wrap .pm-decor-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;
}
.pm-wrap .pm-decor-card.is-owned {
    border-color: rgba(46,125,50,.45) !important;
    background: #fdfefd !important;
}
.pm-wrap .pm-decor-card.is-eq {
    border-color: #2e7d32 !important;
    box-shadow: 0 0 0 2px rgba(46,125,50,.35) !important;
    background: #f6fbf6 !important;
}
.pm-wrap .pm-decor-emoji {
    font-size: 36px !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
}
.pm-wrap .pm-decor-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--pm-text-dark, #1f2937) !important;
    margin-top: 2px !important;
}
.pm-wrap .pm-decor-desc {
    font-size: 11px !important;
    color: var(--pm-text-muted, #6b7280) !important;
    margin: 4px 0 8px !important;
    min-height: 28px !important;
    line-height: 1.35 !important;
}
.pm-wrap .pm-decor-bonuses {
    font-size: 11px !important;
    margin-bottom: 10px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
.pm-wrap .pm-decor-buy, .pm-wrap .pm-decor-toggle {
    width: 100% !important;
    border: 0 !important;
    border-radius: 9px !important;
    padding: 8px 12px !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    background: linear-gradient(180deg, var(--pm-red-primary, #dc2626), var(--pm-red-dark, #991b1b)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
    transition: all 0.15s ease !important;
}
.pm-wrap .pm-decor-buy:hover {
    filter: brightness(1.08) !important;
}
.pm-wrap .pm-decor-toggle {
    background: linear-gradient(180deg, #16a34a, #15803d) !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
}
.pm-wrap .pm-decor-toggle:hover {
    filter: brightness(1.08) !important;
}
.pm-wrap .pm-quest-claim {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25) !important;
    transition: all 0.2s ease !important;
}
.pm-wrap .pm-quest-claim:hover:not(:disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
}
.pm-wrap .pm-quest-claim:disabled {
    opacity: 0.75 !important;
    cursor: default !important;
    background: #f1f5f9 !important;
    color: #94a3b8 !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.pm-wrap .pm-quest-empty {
    font-size: 12px !important;
    color: var(--pm-text-muted) !important;
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 8px 0 !important;
}

.pm-wrap .pm-house-egg-guide.is-need-upgrade .pm-house-egg-guide-title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #92400e !important;
    margin-bottom: 3px !important;
}

.pm-wrap .pm-house-egg-guide-desc {
    font-size: 11.5px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.pm-wrap .pm-house-egg-guide-action {
    margin-top: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

/* Pulsing highlight for available slot */
.pm-wrap .pm-house-slot.is-egg-target {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 4px 12px rgba(16, 185, 129, 0.2) !important;
    animation: pm-slot-pulse 2s infinite ease-in-out !important;
}
@keyframes pm-slot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.35), 0 4px 12px rgba(16, 185, 129, 0.2); }
    50% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.6), 0 6px 16px rgba(16, 185, 129, 0.35); }
}

/* Account-wide tab badge */
.pm-wrap .pm-tab-acc-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    background: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 999px !important;
    padding: 1px 6px !important;
    margin-left: 4px !important;
    vertical-align: middle !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: inline-block !important;
}
.pm-wrap .pm-tab.is-active .pm-tab-acc-tag {
    background: #ffffff !important;
    color: #1d4ed8 !important;
    border-color: #93c5fd !important;
}

/* ============================================================
 * Pet Market — Custom Quantity Purchase Modal & Calculator
 * ============================================================ */
.pmm-buy-calc-box {
    margin-top: 10px;
    text-align: left;
}
.pmm-buy-calc-box .pmm-quick-btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pmm-buy-calc-box .pmm-quick-btn {
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pmm-buy-calc-box .pmm-quick-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}
.pmm-buy-calc-box .pmm-calc-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.pmm-buy-calc-box .pmm-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #475569;
}
.pmm-buy-calc-box .pmm-calc-row b,
.pmm-buy-calc-box .pmm-calc-row span {
    display: inline-block;
}
.pmm-buy-calc-box .pmm-calc-row--net {
    font-weight: 800;
    color: #0f172a;
}

/* ============================================================
 * Pet Market — Featured Filter Tooltip
 * ============================================================ */
.pmm-featured-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    margin: 0 4px;
    z-index: 100;
}
.pmm-featured-wrap:hover {
    z-index: 99999;
}
.pmm-featured-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.pmm-info-icon {
    font-size: 11px;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    margin-left: 2px;
    transition: all 0.15s ease;
}
.pmm-featured-wrap:hover .pmm-info-icon {
    background: #e11d48;
    color: #ffffff;
}
.pmm-featured-tip {
    width: 260px !important;
    bottom: calc(100% + 8px) !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(6px) scale(0.96) !important;
    transform-origin: bottom center !important;
}
.pmm-featured-tip::after {
    left: 50% !important;
    margin-left: -6px !important;
}
.pmm-featured-wrap:hover .pmm-featured-tip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

/* ============================================================
 * Pet Market — Transaction History & Modern Pagination
 * ============================================================ */
.pmm-tx-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pmm-tx-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    transition: all 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.pmm-tx-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}
.pmm-tx-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 220px;
}
.pmm-tx-icon {
    font-size: 24px;
    width: 42px;
    height: 42px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pmm-tx-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pmm-tx-item-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pmm-tx-badge {
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.pmm-tx-badge--sold {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}
.pmm-tx-badge--bought {
    background: #e0e7ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.pmm-tx-time {
    font-size: 11px;
    color: #94a3b8;
}
.pmm-tx-right {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pmm-tx-price-main {
    font-size: 14px;
    font-weight: 800;
}
.pmm-tx-price-sub {
    font-size: 11px;
    color: #64748b;
}
.pmm-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pmm-page-btn:hover:not(.is-disabled):not(.is-active) {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
}
.pmm-page-btn.is-active {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: #ffffff !important;
    border-color: #be123c !important;
    box-shadow: 0 2px 6px rgba(225,29,72,0.3);
}
.pmm-page-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f1f5f9;
}