/* ============================================================
 *  Party Room App — WordPress Plugin Styles (v3.0.0)
 *  FULLY RESPONSIVE — adapts to mobile / tablet / desktop / ultrawide
 *  Uses:
 *  - clamp() for fluid typography
 *  - min()/max() for sizes
 *  - aspect-ratio for stage
 *  - 100dvh for dynamic viewport height
 *  - safe-area-inset for notched phones
 *  - Mobile-first breakpoint system
 * ============================================================ */

:root {
    /* ---- Color palette ---- */
    --pr-bg:        linear-gradient(135deg, #1f0c43, #4b1f7d, #962565);
    --pr-card-bg:   rgba(255, 255, 255, 0.1);
    --pr-gold:      #ffd24a;
    --pr-success:   #5bd17a;
    --pr-danger:    #ff6b6b;
    --pr-text:      #fff7e6;
    --pr-glass:     rgba(0, 0, 0, 0.45);
    --pr-border:    rgba(255, 255, 255, 0.18);
    --pr-pink-1:    #ff758c;
    --pr-pink-2:    #ff7eb3;
    --pr-cyan:      #00ffff;

    /* ---- Fluid typography scale ---- */
    --pr-font-xs:   clamp(9px, 2.6vw, 11px);
    --pr-font-sm:   clamp(11px, 3vw, 13px);
    --pr-font-base: clamp(13px, 3.5vw, 15px);
    --pr-font-md:   clamp(15px, 4vw, 18px);
    --pr-font-lg:   clamp(18px, 5vw, 24px);
    --pr-font-xl:   clamp(22px, 6vw, 28px);

    /* ---- Fluid sizes ---- */
    --pr-pad:       clamp(10px, 3vw, 20px);
    --pr-gap:       clamp(8px, 2.5vw, 14px);
    --pr-radius:    clamp(10px, 2.5vw, 16px);
    --pr-radius-sm: clamp(8px, 2vw, 12px);

    /* ---- Stage geometry (scales with viewport) ---- */
    --pr-stage-size:    min(85vw, 540px);
    --pr-stage-height:  min(58vh, 480px);
    --pr-seat-size:     clamp(48px, 13vw, 76px);
    --pr-hub-size:      clamp(80px, 22vw, 120px);
    --pr-radius-stage:  calc(var(--pr-stage-size) * 0.34);

    /* ---- Touch-friendly target ---- */
    --pr-touch: 44px;
}

/* ---- Reset within root ---- */
.pr-root {
    background: #0d041a;
    margin: 0;
    padding: var(--pr-pad);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--pr-text);
    border-radius: var(--pr-radius);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

.pr-root * {
    box-sizing: border-box;
}

.pr-root *::-webkit-scrollbar { width: 5px; height: 5px; }
.pr-root *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--pr-pink-1), var(--pr-gold));
    border-radius: 6px;
}
.pr-root *::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }

.pr-root {
    background: var(--pr-bg);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   HEADER (mobile-first, wraps gracefully)
   ========================================================== */
.pr-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--pr-glass);
    padding: clamp(8px, 2.5vw, 14px) clamp(12px, 3.5vw, 24px);
    border-radius: var(--pr-radius);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pr-border);
    margin-bottom: var(--pr-gap);
    flex-wrap: wrap;
    gap: var(--pr-gap);
}

.pr-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pr-title {
    font-size: var(--pr-font-lg);
    font-weight: 800;
    margin: 0;
    color: var(--pr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #fff;
    font-size: var(--pr-font-xs);
    font-weight: 700;
    letter-spacing: 1px;
    border-radius: 6px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
    flex-shrink: 0;
}

.pr-live-dot {
    width: 5px;
    height: 5px;
    background: #fff;
    border-radius: 50%;
    animation: prPulse 1.4s ease-in-out infinite;
}

@keyframes prPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.4); }
}

.pr-user-pills {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pr-pill {
    background: rgba(0, 0, 0, 0.4);
    padding: 5px 10px;
    border-radius: 999px;
    font-size: var(--pr-font-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--pr-border);
    color: var(--pr-text);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-pill-gold {
    color: var(--pr-gold);
    border-color: rgba(255, 210, 74, 0.4);
}

.pr-pill-green {
    color: var(--pr-success);
}

.pr-pill-user {
    max-width: 40vw;
    overflow: hidden;
}

.pr-pill-user span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-pill-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pr-pink-1), var(--pr-pink-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    overflow: hidden;
}

.pr-pill-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Buttons (mobile-friendly: min 44px touch target) ---- */
.pr-btn {
    background: linear-gradient(135deg, var(--pr-pink-1), var(--pr-pink-2));
    color: #fff;
    border: none;
    padding: 8px 16px;
    min-height: var(--pr-touch);
    border-radius: 999px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 4px 12px rgba(255, 117, 140, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--pr-font-sm);
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
}

.pr-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 117, 140, 0.55);
}

.pr-btn:active { transform: scale(0.97); }

.pr-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    box-shadow: none;
    border: 1px solid var(--pr-border);
}

.pr-btn-active {
    background: var(--pr-success);
    color: #000;
    box-shadow: 0 0 12px var(--pr-success);
}

.pr-btn-danger {
    background: var(--pr-danger);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

/* ============================================================
   LOBBY VIEW
   ========================================================== */
.pr-lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pr-gap);
    flex-wrap: wrap;
    gap: 10px;
}

.pr-lobby-header h2 {
    margin: 0;
    font-size: var(--pr-font-md);
    font-weight: 800;
    color: var(--pr-text);
}

.pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: var(--pr-gap);
}

.pr-room-card {
    background: var(--pr-card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--pr-radius);
    padding: clamp(14px, 3vw, 20px);
    border: 1px solid var(--pr-border);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.pr-room-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.pr-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
}

.pr-card-title {
    font-size: var(--pr-font-base);
    font-weight: 700;
    margin: 0;
    color: var(--pr-text);
    word-break: break-word;
}

.pr-card-topic {
    font-size: var(--pr-font-xs);
    color: rgba(255, 255, 255, 0.7);
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pr-dots {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.pr-dot {
    width: clamp(8px, 2vw, 10px);
    height: clamp(8px, 2vw, 10px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.pr-dot.active {
    background: var(--pr-success);
    box-shadow: 0 0 6px var(--pr-success);
}

/* ============================================================
   ROOM VIEW — STAGE (responsive circular layout)
   ========================================================== */
.pr-room-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pr-gap);
    flex-wrap: wrap;
    gap: 8px;
}

.pr-table-area {
    position: relative;
    width: var(--pr-stage-size);
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--pr-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pr-border);
    overflow: visible;
}

/* On very small heights (landscape mobile), use a flatter aspect. */
@media (max-aspect-ratio: 1/2) {
    .pr-table-area {
        aspect-ratio: 4 / 3;
        width: 100%;
    }
}

.pr-center-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pr-hub-size);
    height: var(--pr-hub-size);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 52, 122, 0.9), rgba(45, 27, 105, 0.95));
    border: 3px solid var(--pr-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 30px rgba(255, 210, 74, 0.4);
    z-index: 2;
    padding: 8px;
    gap: 4px;
}

.pr-center-hub strong {
    font-size: clamp(10px, 2.6vw, 13px);
    color: var(--pr-text);
    line-height: 1.2;
    word-break: break-word;
    max-width: 100%;
}

.pr-center-hub span {
    font-size: clamp(9px, 2.2vw, 11px);
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Seats (positioned by JS using radius = stage * 0.34) ---- */
.pr-seat {
    position: absolute;
    width: var(--pr-seat-size);
    height: var(--pr-seat-size);
    /* v5.5.12 — top/left are now set in pixels by JS (relative to the
     * stage's top-left corner, accounting for seat size). We keep the
     * fallback 50% here so the seat still renders at stage center on
     * the very first paint, before JS runs. */
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 3;
    margin-left: calc(var(--pr-seat-size) * -0.5);
    margin-top: calc(var(--pr-seat-size) * -0.5);
    /* v5.5.12 — transform-origin must be center so the scale-on-hover
     * effect doesn't shift the seat. */
    transform-origin: center center;
}

/* v5.5.12 — Hover/active use scale via the CSS transform, which now
 * works because we no longer use translate() for positioning. */
.pr-seat:hover { transform: scale(1.08); }
.pr-seat:active { transform: scale(0.97); }

.pr-seat.occupied {
    border: 2px solid var(--pr-gold);
    background: rgba(0, 0, 0, 0.6);
}

.pr-seat.selected-target {
    border: 3px solid var(--pr-cyan) !important;
    box-shadow: 0 0 18px var(--pr-cyan) !important;
}

.pr-seat.is-me {
    border: 3px solid var(--pr-success) !important;
    box-shadow: 0 0 14px rgba(91, 209, 122, 0.6) !important;
}

.pr-seat-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    pointer-events: none;
}

.pr-seat-empty-icon {
    font-size: calc(var(--pr-seat-size) * 0.4);
    color: rgba(255, 255, 255, 0.4);
    font-weight: 300;
    line-height: 1;
    pointer-events: none;
}

/* Seat meta — name + coins badge, positioned below the seat */
.pr-seat-meta {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: max-content;
    max-width: calc(var(--pr-seat-size) * 2.2);
    pointer-events: none;
}

.pr-seat-name {
    font-size: var(--pr-font-xs);
    font-weight: 700;
    background: rgba(0, 0, 0, 0.75);
    padding: 1px 6px;
    border-radius: 10px;
    white-space: nowrap;
    color: var(--pr-text);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-seat-coins {
    font-size: clamp(8px, 2vw, 10px);
    font-weight: 800;
    color: var(--pr-gold);
    background: rgba(0, 0, 0, 0.9);
    padding: 1px 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 210, 74, 0.3);
    white-space: nowrap;
}

.pr-host-crown {
    position: absolute;
    top: -14px;
    font-size: clamp(12px, 3vw, 16px);
    z-index: 5;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.pr-check-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--pr-cyan);
    color: #000;
    border-radius: 50%;
    width: clamp(16px, 4vw, 20px);
    height: clamp(16px, 4vw, 20px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--pr-font-xs);
    font-weight: bold;
    z-index: 5;
    box-shadow: 0 0 8px var(--pr-cyan);
}

/* Emoji bounce on sender avatar */
.pr-avatar-emoji {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(20px, 5vw, 28px);
    animation: bounceEmoji 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), fadeOut 0.5s ease 2.5s forwards;
    z-index: 10;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

@keyframes bounceEmoji {
    0%   { transform: translateX(-50%) scale(0) translateY(10px); }
    100% { transform: translateX(-50%) scale(1.2) translateY(0); }
}

@keyframes fadeOut {
    to { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(1); }
}

/* Fly gift animation */
.pr-fly-gift {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: clamp(20px, 5vw, 30px);
    z-index: 99;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(255, 210, 74, 0.6));
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
}

/* ============================================================
   BOTTOM UNIFIED CONTROL BOX
   ========================================================== */
.pr-bottom-box {
    margin-top: var(--pr-gap);
    background: var(--pr-glass);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius);
    padding: clamp(10px, 2.5vw, 14px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: var(--pr-gap);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Stay above mobile keyboard */
    position: relative;
    z-index: 5;
}

.pr-box-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
    border-bottom: 1px solid var(--pr-border);
    padding-bottom: 10px;
}

.pr-tab-btn {
    padding: 8px 4px;
    min-height: var(--pr-touch);
    border-radius: var(--pr-radius-sm);
    border: 1px solid var(--pr-border);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
    font-family: inherit;
    font-size: var(--pr-font-sm);
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

.pr-tab-btn:hover { background: rgba(255, 255, 255, 0.1); }

.pr-tab-btn.active {
    background: linear-gradient(135deg, var(--pr-pink-1), var(--pr-pink-2));
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(255, 117, 140, 0.4);
}

.pr-tab-content {
    min-height: 120px;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}
.pr-tab-content::-webkit-scrollbar {
    width: 6px;
}
.pr-tab-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}
.pr-tab-content::-webkit-scrollbar-thumb {
    background: rgba(168, 85, 247, 0.5);
    border-radius: 3px;
}

/* ---- Emoji grid ---- */
.pr-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(60px, 22vw), 1fr));
    gap: 8px;
    padding: 6px 0;
    width: 100%;
}

.pr-emoji-item {
    font-size: clamp(22px, 6vw, 28px);
    cursor: pointer;
    padding: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--pr-radius-sm);
    border: 1px solid var(--pr-border);
    transition: transform 0.15s ease, background 0.15s ease;
    line-height: 1;
    text-align: center;
    min-height: var(--pr-touch);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-emoji-item:hover {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.2);
}

.pr-emoji-item:active { transform: scale(0.95); }

/* ---- Gifts panel ---- */
.pr-gifts-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--pr-gap);
}

.pr-gift-grid {
    display: grid;
    /* v5.5.8 — Smaller gift boxes per user request. */
    grid-template-columns: repeat(auto-fill, minmax(min(72px, 26vw), 1fr));
    gap: 6px;
    width: 100%;
}

.pr-gift-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    /* v5.5.8 — Tighter padding for smaller gift boxes. */
    padding: 4px 4px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    min-height: auto;
}

.pr-gift-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.35);
}

.pr-gift-card.selected {
    border-color: var(--pr-gold);
    background: rgba(255, 210, 74, 0.2);
    box-shadow: 0 0 12px rgba(255, 210, 74, 0.4);
}

.pr-gift-icon {
    /* v5.5.8 — Smaller gift icons to match the smaller boxes. */
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1;
    max-height: 36px;
    overflow: hidden;
}
.pr-gift-icon img,
.pr-gift-icon lottie-player {
    width: 36px !important;
    height: 36px !important;
    max-width: 100%;
}

.pr-gift-name {
    font-size: 10px;
    font-weight: bold;
    margin-top: 2px;
    color: var(--pr-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-gift-price {
    font-size: 10px;
    color: var(--pr-gold);
    font-weight: bold;
    margin-top: 1px;
}

.pr-gift-action-bar {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

/* Gift note input REMOVED in v4 — only Send button now */
.pr-gift-action-bar .pr-btn {
    flex: 1 1 auto;
    min-width: 200px;
    justify-content: center;
}

/* ---- Activity feed ---- */
.pr-feed-list {
    width: 100%;
    overflow-y: auto;
    max-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px;
}

.pr-feed-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 12px;
    border-radius: var(--pr-radius-sm);
    font-size: var(--pr-font-sm);
    border-left: 3px solid var(--pr-gold);
    color: var(--pr-text);
    animation: prFeedSlide 0.3s ease;
    line-height: 1.5;
    word-break: break-word;
}

.pr-feed-item b { color: var(--pr-gold); font-weight: 700; }

@keyframes prFeedSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pr-feed-empty {
    font-size: var(--pr-font-sm);
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 20px;
}

/* ============================================================
   MODAL (responsive, centered)
   ========================================================== */
.pr-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 16px;
    /* Respect notched phone safe areas */
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.pr-modal-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.pr-modal {
    background: #231349;
    border-radius: var(--pr-radius);
    border: 1px solid var(--pr-border);
    width: 100%;
    max-width: 450px;
    padding: clamp(16px, 4vw, 24px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    color: var(--pr-text);
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
}

.pr-modal-title {
    font-size: var(--pr-font-md);
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--pr-text);
}

/* v5.5.50 — Fix: Modal headings (h1-h6) inside .pr-modal were rendering
   with browser-default black color, making titles like "🏪 Username Store"
   invisible on dark purple modal background. Force white/cream color. */
.pr-modal h1, .pr-modal h2, .pr-modal h3, .pr-modal h4, .pr-modal h5, .pr-modal h6,
#pr-modal h1, #pr-modal h2, #pr-modal h3, #pr-modal h4, #pr-modal h5, #pr-modal h6,
.pr-modal-overlay h1, .pr-modal-overlay h2, .pr-modal-overlay h3, .pr-modal-overlay h4, .pr-modal-overlay h5, .pr-modal-overlay h6 {
    color: var(--pr-text, #fff7e6) !important;
    margin: 0 0 12px;
    font-weight: 700;
}
.pr-modal-body h1, .pr-modal-body h2, .pr-modal-body h3, .pr-modal-body h4, .pr-modal-body h5, .pr-modal-body h6 {
    color: var(--pr-text, #fff7e6) !important;
}

.pr-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pr-modal-input {
    padding: 10px;
    min-height: var(--pr-touch);
    border-radius: 8px;
    border: 1px solid var(--pr-border);
    background: rgba(0, 0, 0, 0.3);
    color: var(--pr-text);
    font-family: inherit;
    font-size: var(--pr-font-sm);
    width: 100%;
}
.pr-modal-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.pr-modal-input:focus { outline: 1px solid var(--pr-pink-2); }

.pr-modal-label {
    font-size: var(--pr-font-sm);
    color: rgba(255, 255, 255, 0.75);
}

.pr-modal-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 380px) {
    .pr-modal-grid-2 { grid-template-columns: 1fr; }
}

.pr-modal-stat {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--pr-border);
}

.pr-modal-stat small {
    font-size: var(--pr-font-xs);
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

.pr-modal-stat-value {
    font-size: var(--pr-font-md);
    font-weight: bold;
    margin-top: 2px;
    word-break: break-all;
}

.pr-modal-stat-value.gold   { color: var(--pr-gold); }
.pr-modal-stat-value.green  { color: var(--pr-success); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ========================================================== */

/* Small mobile (≤ 480px) */
@media (max-width: 480px) {
    :root {
        --pr-stage-size:    92vw;
        --pr-seat-size:     clamp(46px, 14vw, 60px);
        --pr-hub-size:      clamp(76px, 24vw, 100px);
    }

    .pr-header {
        padding: 8px 12px;
        gap: 8px;
    }

    .pr-title { font-size: var(--pr-font-md); }

    .pr-user-pills { gap: 4px; width: 100%; justify-content: flex-start; }

    .pr-pill {
        padding: 4px 8px;
        font-size: var(--pr-font-xs);
    }

    .pr-pill-user { max-width: 32vw; }

    .pr-btn { padding: 6px 12px; }

    /* Compact tabs on small screens */
    .pr-tab-btn {
        font-size: var(--pr-font-xs);
        padding: 6px 2px;
        flex-direction: column;
        gap: 2px;
    }

    /* Gift action bar — single centered button on mobile */
    .pr-gift-action-bar .pr-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
    :root {
        --pr-stage-size:    540px;
        --pr-stage-height:  480px;
        --pr-seat-size:     70px;
        --pr-hub-size:      120px;
    }

    .pr-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    .pr-header {
        padding: 14px 24px;
    }

    .pr-title { font-size: var(--pr-font-lg); }

    .pr-user-pills { gap: 10px; }

    .pr-tab-btn {
        flex-direction: row;
        padding: 10px 12px;
    }

    .pr-gift-action-bar {
        flex-direction: row;
        align-items: center;
    }
}

/* Desktop / large (≥ 1024px) */
@media (min-width: 1024px) {
    :root {
        --pr-stage-size: 600px;
    }

    .pr-root {
        max-width: 1100px;
        margin: 20px auto;
    }

    .pr-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* Ultrawide (≥ 1440px) — cap width to avoid overstretching */
@media (min-width: 1440px) {
    .pr-root {
        max-width: 1200px;
        margin: 24px auto;
    }

    :root {
        --pr-stage-size: 620px;
    }
}

/* Landscape mobile (short height) — compact stage */
@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --pr-stage-size:    min(80vw, 360px);
        --pr-stage-height:  min(70vh, 360px);
        --pr-seat-size:     clamp(40px, 10vw, 50px);
        --pr-hub-size:      clamp(70px, 18vw, 90px);
    }

    .pr-table-area {
        aspect-ratio: 16 / 9;
    }

    .pr-header { padding: 6px 12px; }
    .pr-title { font-size: var(--pr-font-base); }
    .pr-user-pills { gap: 4px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pr-root *,
    .pr-root *::before,
    .pr-root *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Hide scrollbar on Webkit but keep functional */
.pr-feed-list::-webkit-scrollbar { width: 4px; }
.pr-feed-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* Toast container (if used by JS) */
.pr-toasts {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    width: 100%;
    max-width: 360px;
    padding: 0 12px;
}

/* Spectator badge */
.pr-spectator-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    border-radius: 999px;
    font-size: var(--pr-font-xs);
    font-weight: 700;
    margin-left: 8px;
}

/* Host badge */
.pr-host-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(245, 197, 66, 0.25), rgba(245, 197, 66, 0.08));
    border: 1px solid rgba(245, 197, 66, 0.5);
    color: var(--pr-gold);
    border-radius: 999px;
    font-size: var(--pr-font-xs);
    font-weight: 700;
    margin-left: 8px;
    box-shadow: 0 0 10px rgba(245, 197, 66, 0.3);
}

/* Toast styling */
.pr-toast {
    padding: 10px 16px;
    border-radius: 999px;
    font-size: var(--pr-font-sm);
    font-weight: 700;
    color: #fff;
    backdrop-filter: blur(12px);
    background: rgba(0, 0, 0, 0.7);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    animation: prToastIn 0.3s ease, prToastOut 0.3s ease 2.5s forwards;
    text-align: center;
    pointer-events: auto;
}
.pr-toast--success { border: 1px solid rgba(91, 209, 122, 0.6); }
.pr-toast--error   { border: 1px solid rgba(255, 107, 107, 0.6); }
.pr-toast--info     { border: 1px solid rgba(139, 92, 246, 0.6); }

@keyframes prToastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes prToastOut {
    to { opacity: 0; transform: translateY(-12px); }
}

/* Locked seat */
.pr-seat.is-locked {
    border: 2px solid rgba(255, 107, 107, 0.5) !important;
    background: rgba(255, 107, 107, 0.1) !important;
    cursor: not-allowed;
}
.pr-seat.is-locked:hover { transform: none; }

.pr-seat-locked-icon {
    font-size: calc(var(--pr-seat-size) * 0.35);
    filter: drop-shadow(0 0 6px rgba(255, 107, 107, 0.6));
    pointer-events: none;
}

.pr-seat-name.pr-seat-locked {
    color: #fca5a5;
    border-color: rgba(255, 107, 107, 0.4);
}

/* Host control buttons on seats */
.pr-seat-action-btn {
    position: absolute;
    top: -10px;
    left: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pr-pink-1), var(--pr-pink-2));
    color: #fff;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}

.pr-seat-action-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.pr-seat-action-btn.pr-seat-kick   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.pr-seat-action-btn.pr-seat-lock   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pr-seat-action-btn.pr-seat-unlock { background: linear-gradient(135deg, #10b981, #059669); }

/* v5.5.18 — Profile icon on each occupied non-self seat. Replaces the
 * previous "+" follow button AND the host-kick button — both moved
 * inside the profile modal. Sits top-right of the seat (mirror of the
 * host-kick button which was top-left). */
.pr-seat-action-btn.pr-seat-profile {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    top: -10px;
    left: auto;
    right: -8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.pr-seat-action-btn.pr-seat-profile:hover {
    background: linear-gradient(135deg, #c084fc, #818cf8);
}

/* v5.5.18 — Removed the seat-follow button (was used in v5.5.17).
 * The follow action is now reachable from inside the profile modal. */
.pr-seat-action-btn.pr-seat-follow {
    display: none !important;
}

/* Ban overlay */
.pr-ban-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: prFadeIn 0.3s ease;
}

@keyframes prFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pr-ban-card {
    background: linear-gradient(135deg, #2a1a4a, #1f0c43);
    border: 2px solid rgba(255, 107, 107, 0.6);
    border-radius: var(--pr-radius);
    padding: clamp(20px, 5vw, 32px);
    text-align: center;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 107, 107, 0.3);
}

.pr-ban-icon {
    font-size: clamp(48px, 12vw, 72px);
    margin-bottom: 12px;
    filter: drop-shadow(0 0 20px rgba(255, 107, 107, 0.6));
}

.pr-ban-card h2 {
    margin: 0 0 8px;
    font-size: var(--pr-font-lg);
    color: #fca5a5;
    font-weight: 800;
}

.pr-ban-card p {
    margin: 0 0 20px;
    font-size: var(--pr-font-sm);
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

/* ============================================================
   v5 ADDITIONS
   ========================================================== */

/* Lobby search bar + actions */
.pr-lobby-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
}

.pr-search-input {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    min-height: var(--pr-touch);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--pr-border);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-family: inherit;
    font-size: var(--pr-font-sm);
}

.pr-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.pr-search-input:focus { outline: 1px solid var(--pr-pink-2); }

/* Search results section */
.pr-search-results {
    margin-bottom: 20px;
}

.pr-search-section-title {
    margin: 16px 0 10px;
    font-size: var(--pr-font-md);
    font-weight: 800;
    color: var(--pr-gold);
}

.pr-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pr-search-card {
    background: var(--pr-card-bg);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    padding: 14px;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.pr-search-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
}

/* User search result cards */
.pr-search-users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 10px;
}

.pr-user-search-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--pr-card-bg);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    padding: 12px;
}

.pr-user-search-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pr-gold);
    flex-shrink: 0;
}

.pr-user-search-info {
    flex: 1;
    min-width: 0;
}

.pr-user-search-name {
    font-size: var(--pr-font-sm);
    font-weight: 700;
    color: var(--pr-text);
    margin-bottom: 6px;
}

.pr-user-search-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pr-mini-room-btn {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
}

.pr-mini-room-btn:hover {
    background: rgba(139, 92, 246, 0.4);
    color: #fff;
    transform: scale(1.05);
}

/* Room code pill in lobby cards */
.pr-room-code {
    background: linear-gradient(135deg, rgba(245, 197, 66, 0.25), rgba(245, 197, 66, 0.08));
    border: 1px solid rgba(245, 197, 66, 0.5);
    color: var(--pr-gold);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    font-family: monospace;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(245, 197, 66, 0.25);
}

/* Room code pill in room toolbar */
.pr-room-code-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, rgba(245, 197, 66, 0.25), rgba(245, 197, 66, 0.08));
    border: 1px solid rgba(245, 197, 66, 0.5);
    color: var(--pr-gold);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--pr-font-xs);
    font-weight: 800;
    letter-spacing: 1.5px;
    font-family: monospace;
    margin-left: 8px;
    box-shadow: 0 0 10px rgba(245, 197, 66, 0.3);
    user-select: all;
    cursor: copy;
}

/* FULL tag on room card */
.pr-full-tag {
    display: inline-block;
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-left: 4px;
    vertical-align: middle;
}

.pr-room-card.is-full {
    opacity: 0.65;
    cursor: not-allowed;
}

.pr-room-card.is-full:hover {
    transform: none;
    border-color: var(--pr-border);
}

/* Avatar button in header */
.pr-avatar-btn {
    width: var(--pr-touch);
    height: var(--pr-touch);
    padding: 0 !important;
    border-radius: 50% !important;
    overflow: hidden;
    border: 2px solid var(--pr-gold) !important;
    box-shadow: 0 0 10px rgba(245, 197, 66, 0.4);
}

.pr-avatar-btn-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}

.pr-avatar-btn-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Avatar preview in modal */
.pr-avatar-preview {
    width: 100px;
    height: 100px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--pr-gold);
    box-shadow: 0 0 18px rgba(245, 197, 66, 0.5);
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pr-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Code input emphasis */
.pr-code-input {
    text-align: center;
    font-size: 24px !important;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: monospace;
    font-weight: 800;
    color: var(--pr-gold) !important;
}

/* Room info in toolbar */
.pr-room-info {
    font-size: var(--pr-font-sm);
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
    min-width: 0;
}

/* ============================================================
   v6 ADDITIONS
   ========================================================== */

/* Claim info card in wallet modal */
.pr-claim-info-card {
    background: linear-gradient(135deg, rgba(245, 197, 66, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(245, 197, 66, 0.4);
    border-radius: var(--pr-radius-sm);
    padding: 14px;
    margin: 10px 0;
}

.pr-claim-info-card h4 {
    color: var(--pr-gold);
    font-size: var(--pr-font-sm);
    font-weight: 800;
}

/* Return button shortcode (used on back pages) */
.pr-return-wrap {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.pr-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--pr-pink-1), var(--pr-pink-2));
    color: #fff !important;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 4px 15px rgba(255, 117, 140, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pr-return-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 117, 140, 0.55);
    color: #fff !important;
}

.pr-return-btn:active { transform: scale(0.97); }

/* Admin: claim config table */
.pr-claim-table {
    margin-top: 10px;
}

.pr-claim-table input,
.pr-claim-table select {
    width: 100%;
    max-width: 180px;
}

.pr-claim-row td {
    vertical-align: middle;
}

/* ============================================================
   v7 ADDITIONS — History Modal + Countdown Timer
   ========================================================== */

/* Countdown timer display */
.pr-countdown-display {
    font-size: var(--pr-font-sm);
    color: var(--pr-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    background: rgba(245, 197, 66, 0.1);
    border-radius: 999px;
    border: 1px solid rgba(245, 197, 66, 0.3);
    display: inline-block;
}

/* Disabled claim button while countdown runs */
.pr-btn.pr-btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important;
}

/* History search bar */
.pr-history-search {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pr-history-search .pr-modal-input {
    flex: 1;
    min-width: 0;
}

/* History user header */
.pr-history-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--pr-radius-sm);
    margin-bottom: 14px;
}

.pr-history-user img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--pr-gold);
    flex-shrink: 0;
}

.pr-history-user-info {
    flex: 1;
    min-width: 0;
}

.pr-history-user-name {
    font-size: var(--pr-font-md);
    font-weight: 800;
    color: var(--pr-text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pr-history-self-tag {
    background: linear-gradient(135deg, #5bd17a, #22c55e);
    color: #000;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.pr-history-user-id code {
    background: #1d2327;
    color: var(--pr-gold);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    font-weight: 700;
}

/* History stats grid */
.pr-history-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

@media (min-width: 480px) {
    .pr-history-stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

.pr-history-stat-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--pr-border);
    border-radius: var(--pr-radius-sm);
    padding: 12px 8px;
    text-align: center;
}

.pr-history-stat-card.pr-stat-pink   { border-left: 4px solid var(--pr-pink-1); }
.pr-history-stat-card.pr-stat-green  { border-left: 4px solid var(--pr-success); }
.pr-history-stat-card.pr-stat-gold   { border-left: 4px solid var(--pr-gold); }
.pr-history-stat-card.pr-stat-purple { border-left: 4px solid #8b5cf6; }

.pr-history-stat-icon { font-size: 20px; line-height: 1; }
.pr-history-stat-value { font-size: 22px; font-weight: 800; color: var(--pr-text); margin-top: 4px; }
.pr-history-stat-label { font-size: 10px; color: rgba(255, 255, 255, 0.65); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.pr-history-stat-sub { font-size: 11px; color: var(--pr-gold); margin-top: 4px; font-weight: 700; }

/* History feed */
.pr-history-feed {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px;
}

.pr-history-item {
    background: rgba(0, 0, 0, 0.25);
    border-left: 3px solid var(--pr-gold);
    padding: 8px 12px;
    border-radius: var(--pr-radius-sm);
    font-size: 12px;
    color: var(--pr-text);
    line-height: 1.5;
}

.pr-history-item b { color: var(--pr-gold); font-weight: 700; }

.pr-history-time {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.pr-history-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-style: italic;
}

/* Header buttons on small screens */
@media (max-width: 480px) {
    .pr-user-pills .pr-btn {
        padding: 6px 8px;
        font-size: 11px;
        min-height: 36px;
        min-width: 36px;
    }
    #pr-history-btn { padding: 6px 10px; }
}

/* ============================================================
   v8 ADDITIONS — Particle Burst Reaction + Wallet Shortcode + Busy Button
   ========================================================== */

/* ---- Particle Burst Reaction (replaces old pr-avatar-emoji) ---- */
.pr-reaction-burst {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    width: 0;
    height: 0;
}

/* Main emoji — big bounce-in */
.pr-reaction-main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(245, 197, 66, 0.6));
    animation: prMainPop 1.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 3;
}

@keyframes prMainPop {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(-15deg); opacity: 0; }
    15%  { transform: translate(-50%, -50%) scale(1.3) rotate(5deg); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
    70%  { transform: translate(-50%, calc(-50% - 10px)) scale(1) rotate(0deg); opacity: 1; }
    100% { transform: translate(-50%, calc(-50% - 30px)) scale(0.7); opacity: 0; }
}

/* Sparkle ring — expanding circle */
.pr-reaction-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(245, 197, 66, 0.8);
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.6);
    animation: prRingExpand 0.9s ease-out forwards;
    z-index: 2;
}

@keyframes prRingExpand {
    0%   { width: 20px; height: 20px; opacity: 1; border-width: 3px; }
    100% { width: 100px; height: 100px; opacity: 0; border-width: 1px; }
}

/* Particle emojis — radial burst */
.pr-reaction-particle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: clamp(14px, 3.5vw, 20px);
    line-height: 1;
    animation: prParticleFly 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: var(--pr-delay, 0s);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    z-index: 4;
    opacity: 0;
}

@keyframes prParticleFly {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    20%  { transform: translate(calc(-50% + calc(var(--pr-dx) * 0.3)), calc(-50% + calc(var(--pr-dy) * 0.3))) scale(var(--pr-scale, 1)); opacity: 1; }
    70%  { transform: translate(calc(-50% + var(--pr-dx)), calc(-50% + var(--pr-dy))) scale(var(--pr-scale, 1)); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--pr-dx)), calc(-50% + calc(var(--pr-dy) - 30px))) scale(0.3); opacity: 0; }
}

/* Sparkle stars (✦) */
.pr-reaction-sparkle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 14px;
    color: var(--pr-gold);
    text-shadow: 0 0 8px var(--pr-gold);
    animation: prSparkleTwinkle 0.8s ease-out forwards;
    animation-delay: var(--pr-delay, 0s);
    z-index: 5;
    opacity: 0;
}

.pr-reaction-sparkle::before {
    content: '✦';
}

@keyframes prSparkleTwinkle {
    0%   { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    40%  { transform: translate(calc(-50% + var(--pr-dx)), calc(-50% + var(--pr-dy))) scale(1.2) rotate(180deg); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--pr-dx)), calc(-50% + var(--pr-dy))) scale(0) rotate(360deg); opacity: 0; }
}

/* ---- Busy button (during AJAX) ---- */
.pr-btn.pr-btn-busy {
    opacity: 0.7;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.pr-btn.pr-btn-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 12px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: prSpin 0.8s linear infinite;
}

@keyframes prSpin {
    to { transform: rotate(360deg); }
}

/* ---- Wallet shortcode styles ---- */
.pr-wallet-shortcode.pr-wallet-card {
    background: linear-gradient(135deg, #1f0c43, #4b1f7d, #962565);
    border-radius: 16px;
    padding: 20px;
    color: #fff7e6;
    max-width: 400px;
    margin: 20px auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pr-wallet-shortcode.pr-wallet-inline {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(31, 12, 67, 0.9), rgba(75, 31, 125, 0.9));
    border-radius: 999px;
    color: #fff7e6;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.pr-wallet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.pr-wallet-inline .pr-wallet-header {
    margin-bottom: 0;
}

.pr-wallet-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #ffd24a;
    object-fit: cover;
    flex-shrink: 0;
}

.pr-wallet-inline .pr-wallet-avatar {
    width: 32px;
    height: 32px;
    border-width: 1px;
}

.pr-wallet-user-name {
    font-size: 18px;
    font-weight: 800;
}

.pr-wallet-inline .pr-wallet-user-name {
    font-size: 14px;
}

.pr-wallet-user-id {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.pr-wallet-user-id code {
    background: #1d2327;
    color: #ffd24a;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 700;
}

.pr-wallet-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.pr-wallet-inline .pr-wallet-stats {
    display: contents;
}

.pr-wallet-stat {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.pr-wallet-stat-gold   { border-left: 4px solid #ffd24a; }
.pr-wallet-stat-green  { border-left: 4px solid #5bd17a; }
.pr-wallet-stat-pink   { border-left: 4px solid #ff758c; }
.pr-wallet-stat-purple { border-left: 4px solid #8b5cf6; }

.pr-wallet-stat-label {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pr-wallet-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #fff7e6;
    margin-top: 4px;
}

.pr-wallet-error {
    padding: 20px;
    text-align: center;
    color: #d63638;
    background: rgba(214, 54, 56, 0.1);
    border: 1px solid rgba(214, 54, 56, 0.4);
    border-radius: 8px;
}

/* Admin: tag colors for activity log */
.pr-tag-purple { background: #f3eafe; color: #6d28d9; }
.pr-tag-pink   { background: #ffe5ee; color: #be123c; }

/* ============================================================
 *  Phase 2: Header visibility — show all pills in LOBBY,
 *  hide them in ROOM view (only "Party Room" + LIVE badge).
 *  Driven by JS adding/removing the `pr-view-room` class on
 *  the root element when entering/leaving a room.
 * ========================================================== */
.pr-root .pr-user-pills { display: flex; }
.pr-root.pr-view-room .pr-user-pills { display: none !important; }

/* ============================================================
 *  Animation gifts + full-screen burst (v5.1)
 * ========================================================== */

/* Gift card icon container — let Lottie/img fill it. */
.pr-gift-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 6px;
    background: linear-gradient(135deg, rgba(255,215,0,0.08), rgba(255,105,180,0.08));
    border-radius: 12px;
    overflow: hidden;
}
.pr-gift-card.locked { opacity: 0.45; filter: grayscale(0.5); }

/* Fly-gift — make sure Lottie/img can be visible. */
.pr-fly-gift {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 50;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.2), opacity 0.25s ease-out;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Full-screen burst overlay for expensive gifts (>= 2000 coins). */
.pr-burst-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pr-burst-fade-in 0.35s ease-out;
}
.pr-burst-overlay.pr-burst-fading {
    animation: pr-burst-fade-out 0.5s ease-out forwards;
}
.pr-burst-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.35) 0%, rgba(255, 105, 180, 0.25) 40%, transparent 70%);
    animation: pr-burst-pulse 1.2s ease-out infinite;
}
.pr-burst-content {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: scale(0.5);
    animation: pr-burst-grow 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4) forwards;
}
.pr-burst-icon {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pr-burst-label {
    margin-top: 14px;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 30px rgba(255, 215, 0, 0.8);
    letter-spacing: 1px;
}
@keyframes pr-burst-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pr-burst-fade-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(1.15); }
}
@keyframes pr-burst-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes pr-burst-grow {
    0%   { transform: scale(0.4) rotate(-10deg); opacity: 0; }
    60%  { transform: scale(1.1) rotate(2deg);   opacity: 1; }
    100% { transform: scale(1)   rotate(0deg);    opacity: 1; }
}

/* Lottie player elements — ensure they don't overflow containers. */
lottie-player { display: inline-block; max-width: 100%; max-height: 100%; }

/* ============================================================
 *  Emoji reaction animations (v5.2)
 *  When an emoji has animation_url set, the burst uses a Lottie
 *  player or <img> instead of textContent. We need to make sure
 *  the burst container + main + particle elements handle the
 *  larger animated content without clipping.
 * ========================================================== */

.pr-emoji-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    overflow: visible; /* allow Lottie/img to extend slightly */
}

/* Main reaction (big pop) — animation version */
.pr-reaction-main.pr-reaction-main-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    line-height: 1;
    /* keep emoji text styling as fallback, animations override */
}

/* Particle — animation version (smaller, but allow overflow) */
.pr-reaction-particle.pr-reaction-particle-anim {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 0; /* hide any text */
}

/* Make sure lottie-player fills its parent nicely inside bursts */
.pr-reaction-main-anim lottie-player,
.pr-reaction-particle-anim lottie-player,
.pr-reaction-main-anim img,
.pr-reaction-particle-anim img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
 *  Custom alert modal (v5.3)
 *  Replaces browser's native alert() so the site's domain name
 *  doesn't get prefixed (e.g., "poppo.store says" is hidden).
 * ========================================================== */
.pr-alert-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
    backdrop-filter: blur(4px);
}
.pr-alert-overlay.pr-alert-visible {
    opacity: 1;
    visibility: visible;
}
.pr-alert-modal {
    background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 28px 32px 24px;
    max-width: 92%;
    width: 420px;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transform: scale(0.9) translateY(8px);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pr-alert-overlay.pr-alert-visible .pr-alert-modal {
    transform: scale(1) translateY(0);
}
.pr-alert-icon {
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
}
.pr-alert-title {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 6px;
}
.pr-alert-message {
    font-size: 14px;
    color: #4a4a4a;
    line-height: 1.5;
    margin-bottom: 22px;
    word-wrap: break-word;
}
.pr-alert-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.pr-alert-ok {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border: none;
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.1s ease-out, box-shadow 0.15s ease-out;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}
.pr-alert-ok:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(99, 102, 241, 0.4);
}
.pr-alert-ok:active {
    transform: translateY(0);
}
.pr-alert-ok:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Two-button variant (Yes / No) for confirm modals */
.pr-alert-actions-2 { gap: 12px; }
.pr-alert-actions-2 .pr-alert-ok {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
}
.pr-alert-actions-2 .pr-alert-no {
    background: #f0f0f1;
    color: #1d2327;
    border: 1px solid #c3c4c7;
}
.pr-alert-actions-2 .pr-alert-ok:hover { box-shadow: 0 6px 14px rgba(220, 38, 38, 0.4); }

/* ============================================================
 *  Bigo Live / Streamkar style lobby (v5.4)
 *  Cream/beige background + golden accents + 2-col card grid
 * ========================================================== */

/* Override the dark theme when in lobby view */
.pr-root:not(.pr-view-room) {
    background: linear-gradient(180deg, #FFF8E7 0%, #FFEFD5 100%);
    min-height: 100vh;
    color: #2D1B12;
}
.pr-root:not(.pr-view-room) .pr-header {
    background: linear-gradient(135deg, #FFB300 0%, #FF6B35 100%);
    color: #fff;
    border-bottom: 2px solid #C68F00;
}
.pr-root:not(.pr-view-room) .pr-title { color: #fff; }
.pr-root:not(.pr-view-room) .pr-pill { background: rgba(255,255,255,0.92); color: #8B4513; border: 1px solid #FFB300; }
.pr-root:not(.pr-view-room) .pr-pill-gold { background: #FFF; color: #B8860B; }
.pr-root:not(.pr-view-room) .pr-pill-green { background: #F0FFF0; color: #2E8B57; }
.pr-root:not(.pr-view-room) .pr-btn-secondary { background: #fff; color: #8B4513; border: 1px solid #FFB300; }

/* Bigo Lobby container */
.pr-bigo-lobby {
    padding: 12px 14px 80px;
    max-width: 600px;
    margin: 0 auto;
}

/* Top tabs bar */
.pr-bigo-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 0 14px;
    border-bottom: 1px solid rgba(139, 69, 19, 0.15);
    margin-bottom: 12px;
    font-size: 14px;
}
.pr-bigo-tab { color: #8B6914; font-weight: 500; cursor: pointer; padding: 4px 0; }
.pr-bigo-tab.active { color: #B8860B; font-weight: 700; border-bottom: 2px solid #FFB300; }
.pr-bigo-tab-icon { font-size: 18px; cursor: pointer; margin-left: auto; }

/* Search bar */
.pr-bigo-search-wrap { margin-bottom: 14px; }
.pr-bigo-search {
    width: 100%;
    padding: 11px 16px;
    border-radius: 24px;
    border: 1.5px solid #FFB300;
    background: #fff;
    font-size: 14px;
    color: #5C4033;
    outline: none;
    box-shadow: 0 2px 8px rgba(255, 179, 0, 0.15);
}
.pr-bigo-search:focus { border-color: #FF6B35; box-shadow: 0 2px 12px rgba(255, 107, 53, 0.25); }

/* Hall of Fame banner */
.pr-bigo-banner {
    background: linear-gradient(135deg, #2a1810 0%, #1a0f08 100%), radial-gradient(circle at top right, rgba(255, 215, 0, 0.2), transparent 60%);
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 14px;
    color: #FFD700;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255, 215, 0, 0.2);
    position: relative;
    overflow: hidden;
}
.pr-bigo-banner::before {
    content: '👑';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    opacity: 0.6;
}
.pr-bigo-banner-title { font-size: 17px; font-weight: 800; letter-spacing: 1.5px; color: #FFD700; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.pr-bigo-banner-sub { font-size: 12px; color: #F5DEB3; margin-top: 4px; }

/* Lobby action buttons */
.pr-bigo-actions {
    display: flex; gap: 10px;
    margin-bottom: 14px;
}
.pr-bigo-btn-code, .pr-bigo-btn-create {
    flex: 1;
    padding: 10px 14px;
    border-radius: 24px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    /* v5.5.23 — Fix "click selects the text" bug: explicitly disable
     * text selection on action buttons so the browser doesn't
     * highlight/select the button label on click. Without this, some
     * browsers (especially mobile + some desktop configurations) will
     * select the button text instead of triggering the click handler
     * reliably on the first tap. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.pr-bigo-btn-code:focus, .pr-bigo-btn-create:focus {
    /* Remove the blue focus outline that some browsers draw around
     * the button after a click (which can look like "selection"). */
    outline: none;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
}
.pr-bigo-btn-code {
    background: #fff;
    color: #8B4513;
    border: 1.5px solid #FFB300;
}
.pr-bigo-btn-create {
    background: linear-gradient(135deg, #FFB300, #FF6B35);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.35);
}
.pr-bigo-btn-code:hover, .pr-bigo-btn-create:hover { transform: translateY(-1px); }

/* Bigo card grid — 2 columns */
.pr-bigo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.pr-bigo-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 50px 20px;
    color: #8B6914;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    border: 1.5px dashed #FFB300;
}

/* Each room card — Bigo style */
.pr-bigo-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s;
    background: var(--pr-card-bg, linear-gradient(135deg, #667eea, #764ba2));
}
.pr-bigo-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.25); }
.pr-bigo-card.is-full { opacity: 0.85; cursor: not-allowed; }
.pr-bigo-card.is-full:hover { transform: none; }

.pr-bigo-card-bg {
    position: absolute; inset: 0;
    display: flex;
    align-items: center; justify-content: center;
    background: var(--pr-card-bg);
}
.pr-bigo-card-initial {
    font-size: 64px;
    font-weight: 800;
    color: rgba(255,255,255,0.25);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Shade gradient at bottom for legibility */
.pr-bigo-card-shade {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.8) 100%);
}

/* Top-left badge ("Party" / "FULL" / "Locked") */
.pr-bigo-card-badge {
    position: absolute; top: 8px; left: 8px;
    padding: 3px 9px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(4px);
}

/* Bottom footer with host info + viewer count */
.pr-bigo-card-footer {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 10px 12px;
    display: flex; align-items: flex-end; justify-content: space-between;
    color: #fff;
    z-index: 2;
}
.pr-bigo-card-host { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pr-bigo-card-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFB300, #FF6B35);
    color: #fff;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    border: 2px solid rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.pr-bigo-card-meta { min-width: 0; overflow: hidden; }
.pr-bigo-card-name {
    font-size: 12px; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.pr-bigo-card-host-name {
    font-size: 10px; color: #FFD700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 1px;
}
.pr-bigo-card-viewers {
    display: flex; align-items: center; gap: 4px;
    background: rgba(0,0,0,0.55);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
}
.pr-bigo-eye { font-size: 12px; }

/* JOIN button — bottom-right of card (visible on hover) */
.pr-bigo-card-join, .pr-bigo-card-join-disabled {
    position: absolute;
    bottom: 56px; right: 8px;
    padding: 5px 14px;
    background: linear-gradient(135deg, #FF6B35, #FFB300);
    color: #fff;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.5);
    z-index: 3;
}
.pr-bigo-card-join-disabled {
    background: rgba(80,80,80,0.7);
    box-shadow: none;
}

/* Bottom navigation bar (Bigo style) */
.pr-bigo-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-top: 1px solid rgba(139, 69, 19, 0.15);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
}
.pr-bigo-nav-item {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    font-size: 18px;
    color: #8B6914;
    cursor: pointer;
    padding: 2px 8px;
    transition: transform 0.1s;
}
.pr-bigo-nav-item span { font-size: 10px; font-weight: 500; }
.pr-bigo-nav-item.active { color: #FF6B35; }
.pr-bigo-nav-item.active span { color: #FF6B35; font-weight: 700; }
.pr-bigo-nav-item:hover { transform: translateY(-1px); }

/* Hide bottom nav when inside a room view */
.pr-root.pr-view-room .pr-bigo-bottom-nav { display: none; }

/* Hide the regular party-room pills when in Bigo lobby — they overlap with new tabs */
.pr-root:not(.pr-view-room) .pr-header .pr-user-pills { gap: 6px; }

/* ============================================================
 *  v5.5+ Extensions — chat panel, badges, leaderboards, themes
 * ============================================================ */

/* ---- Level chip in header ---- */
.pr-pill-level {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
    font-weight: 700;
    border: 2px solid #fde68a;
    cursor: pointer;
    transition: transform 0.15s;
}
.pr-pill-level:hover { transform: scale(1.05); }

/* ---- Per-seat level badge ---- */
.pr-seat-level-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
    font-size: var(--pr-font-xs, 10px);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    border: 1px solid #fde68a;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* ---- Seat frame overlays ---- */
.pr-seat-frame-layer {
    position: absolute;
    inset: -10px;
    pointer-events: none;
    z-index: 2;
}
.pr-seat-frame-layer img,
.pr-seat-frame-layer lottie-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pr-seat-frame-emoji {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4em;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
    z-index: 3;
    pointer-events: none;
    animation: pr-frame-bob 2s ease-in-out infinite;
}
@keyframes pr-frame-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-3px); }
}

/* ---- Hall of Fame (real data) ---- */
.pr-hof-real {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    margin-top: 6px;
}
.pr-hof-header {
    text-align: center;
    font-weight: 800;
    font-size: var(--pr-font-lg, 16px);
    background: linear-gradient(90deg, #fbbf24, #ec4899, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 4px 0;
}
.pr-hof-section { background: rgba(255,255,255,0.06); border-radius: 8px; padding: 6px; }
.pr-hof-title {
    font-size: var(--pr-font-sm, 12px);
    color: var(--pr-gold, #ffd24a);
    font-weight: 700;
    margin-bottom: 4px;
}
.pr-hof-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: var(--pr-font-xs, 11px);
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.pr-hof-row:last-child { border-bottom: none; }
.pr-hof-rank { font-weight: 700; min-width: 24px; color: var(--pr-gold, #ffd24a); }
.pr-hof-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.pr-hof-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-hof-value { color: var(--pr-gold, #ffd24a); font-weight: 600; }
.pr-hof-empty { color: rgba(255,255,255,0.5); font-style: italic; padding: 4px; text-align: center; }

/* ---- Chat panel ---- */
.pr-ext-root {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    pointer-events: none;
}
.pr-chat-panel {
    pointer-events: auto;
    width: min(360px, 92vw);
    height: 320px;
    background: rgba(20, 10, 35, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid var(--pr-border, rgba(255,255,255,0.18));
    border-radius: 12px 0 0 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-shadow: -4px -4px 20px rgba(0,0,0,0.5);
    transition: height 0.2s;
    overflow: hidden;
}
.pr-chat-panel.pr-chat-collapsed { height: 38px; }
.pr-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: linear-gradient(90deg, var(--pr-accent, #a855f7), var(--pr-accent-2, #ec4899));
    color: #fff;
    font-weight: 600;
    font-size: var(--pr-font-sm, 12px);
    cursor: pointer;
}
.pr-chat-minimize {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
}
.pr-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 6px 10px;
    font-size: var(--pr-font-xs, 11px);
    line-height: 1.4;
    scrollbar-width: thin;
}
.pr-chat-messages::-webkit-scrollbar { width: 5px; }
.pr-chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.pr-chat-msg {
    padding: 3px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    word-wrap: break-word;
}
.pr-chat-msg-system {
    color: var(--pr-gold, #ffd24a);
    font-style: italic;
    text-align: center;
    font-size: var(--pr-font-xs, 10px);
}
.pr-chat-time { color: rgba(255,255,255,0.5); font-size: 9px; }
.pr-chat-user { color: var(--pr-accent, #a855f7); font-weight: 600; }
.pr-chat-text { color: var(--pr-text, #fff7e6); }

/* v5.5.53 — Chat message + DM delete / permanent delete buttons */
/* v5.5.70 — Removed .pr-dm-msg-mine from this selector (it was setting
 * a low-alpha white background that competed with the dedicated
 * .pr-dm-msg-mine rule below which now uses a proper off-white). */
.pr-chat-msg-own { background: rgba(255, 255, 255, 0.04); }
.pr-chat-actions {
    display: inline-flex; gap: 4px; margin-left: 8px;
    opacity: 0.4; transition: opacity 0.15s;
    vertical-align: middle;
}
.pr-chat-msg-own:hover .pr-chat-actions,
.pr-dm-msg-mine:hover .pr-chat-actions { opacity: 1; }
.pr-chat-action-btn {
    background: rgba(255, 107, 107, 0.15);
    color: #ff8e8e;
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.pr-chat-action-btn:hover { background: rgba(255, 107, 107, 0.3); color: #ff6b6b; }
.pr-chat-action-btn:disabled { opacity: 0.5; cursor: wait; }
.pr-chat-action-perm {
    background: rgba(220, 38, 38, 0.2);
    color: #fca5a5;
    border-color: rgba(220, 38, 38, 0.4);
}
.pr-chat-action-perm:hover { background: rgba(220, 38, 38, 0.4); color: #fff; }
.pr-chat-input-row {
    display: flex;
    gap: 4px;
    padding: 6px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.pr-chat-input {
    flex: 1;
    padding: 6px 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: var(--pr-text, #fff7e6);
    font-size: var(--pr-font-sm, 12px);
}
.pr-chat-input:focus { outline: none; border-color: var(--pr-accent, #a855f7); }
.pr-chat-send-btn {
    padding: 6px 12px;
    background: var(--pr-accent, #a855f7);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}
.pr-chat-send-btn:hover { filter: brightness(1.1); }
@media (max-width: 480px) {
    .pr-chat-panel { width: 100vw; border-radius: 12px 12px 0 0; }
}

/* ---- Notifications ---- */
.pr-notif-btn { position: relative; }
.pr-notif-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: #ff4444;
    border-radius: 50%;
    border: 1px solid #fff;
    animation: pr-notif-pulse 1.5s infinite;
}
@keyframes pr-notif-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.6; }
}
.pr-notif-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 8px;
    padding: 8px 4px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
    align-items: center;
    font-size: var(--pr-font-sm, 12px);
}
.pr-notif-icon { font-size: 1.4em; text-align: center; }
.pr-notif-text { color: var(--pr-text, #fff7e6); }
.pr-notif-ts { color: rgba(255,255,255,0.5); font-size: 10px; }

/* ---- Leaderboard modal ---- */
.pr-lb-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.pr-lb-tab {
    padding: 6px 12px;
    background: rgba(255,255,255,0.08);
    color: var(--pr-text, #fff7e6);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--pr-font-sm, 12px);
}
.pr-lb-tab.pr-lb-tab-active {
    background: var(--pr-accent, #a855f7);
    color: #fff;
    border-color: var(--pr-accent, #a855f7);
}
.pr-lb-section { margin-bottom: 16px; }
.pr-lb-section h4 {
    color: var(--pr-gold, #ffd24a);
    font-size: var(--pr-font-base, 14px);
    margin: 8px 0;
}
.pr-lb-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.pr-lb-rank { font-weight: 700; min-width: 32px; font-size: 1.1em; }
.pr-lb-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pr-lb-name { flex: 1; }
.pr-lb-value { color: var(--pr-gold, #ffd24a); font-weight: 600; }

/* ---- Level modal ---- */
.pr-level-card {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.2));
    border-radius: 12px;
    margin-bottom: 12px;
}
.pr-level-big {
    font-size: 2em;
    font-weight: 800;
    background: linear-gradient(90deg, #fbbf24, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pr-level-xp { color: rgba(255,255,255,0.8); margin-top: 4px; }
.pr-level-bar {
    height: 12px;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    margin: 10px 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
}
.pr-level-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #ec4899);
    transition: width 0.5s ease;
}
.pr-level-next { font-size: var(--pr-font-sm, 12px); color: rgba(255,255,255,0.7); }
.pr-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin: 8px 0;
}
.pr-badge-card {
    padding: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}
.pr-badge-card.pr-badge-locked {
    opacity: 0.45;
    filter: grayscale(0.8);
}
.pr-badge-icon { font-size: 2em; margin-bottom: 4px; }
.pr-badge-name { font-weight: 700; font-size: var(--pr-font-sm, 12px); }
.pr-badge-desc { font-size: 10px; color: rgba(255,255,255,0.7); margin-top: 2px; line-height: 1.3; }
.pr-badge-tick {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--pr-success, #5bd17a);
    color: #fff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

/* ---- Follow button ---- */
.pr-btn-follow {
    background: var(--pr-accent, #a855f7);
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 8px;
}
.pr-btn-follow.pr-btn-following {
    background: rgba(255,255,255,0.12);
    color: var(--pr-text, #fff7e6);
    border: 1px solid rgba(255,255,255,0.2);
}
.pr-btn-follow:hover { filter: brightness(1.1); }

/* ---- Following feed ---- */
.pr-lobby-title { color: var(--pr-text, #fff7e6); padding: 12px; }
.pr-room-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; padding: 8px; }
.pr-room-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    padding: 10px;
}
.pr-room-card-name { font-weight: 700; color: var(--pr-text, #fff7e6); }
.pr-room-card-topic { font-size: var(--pr-font-xs, 11px); color: rgba(255,255,255,0.7); margin: 4px 0; }
.pr-room-card-online { font-size: var(--pr-font-xs, 11px); color: var(--pr-gold, #ffd24a); margin: 4px 0; }
.pr-followed-online {
    display: inline-block;
    background: rgba(168,85,247,0.25);
    padding: 1px 6px;
    border-radius: 8px;
    margin: 1px;
}
.pr-btn-join {
    background: var(--pr-accent, #a855f7);
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--pr-font-sm, 12px);
    margin-top: 6px;
    width: 100%;
}

/* ---- Manager dashboard ---- */
.pr-md-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.pr-md-stat {
    background: rgba(255,255,255,0.06);
    padding: 10px;
    border-radius: 8px;
    text-align: center;
    font-size: var(--pr-font-sm, 12px);
    color: rgba(255,255,255,0.8);
}
.pr-md-stat b { color: var(--pr-gold, #ffd24a); font-size: 1.3em; display: block; }
.pr-md-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--pr-font-sm, 12px);
}
.pr-md-table th, .pr-md-table td {
    padding: 6px 4px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.pr-md-table th {
    color: var(--pr-gold, #ffd24a);
    font-weight: 700;
}
.pr-md-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 4px;
}
.pr-md-online { color: var(--pr-success, #5bd17a); }
.pr-md-offline { color: rgba(255,255,255,0.4); }

/* ---- Modal-open state (used by ext modals) ---- */
.pr-modal.pr-modal-open { display: flex !important; }

/* ============================================================
 *  v5.5.2 — Mobile fixes: party name wraps, bottom toolbar, profile
 * ============================================================ */

/* v5.5.2 — On mobile, party names should wrap instead of truncating. */
@media (max-width: 768px) {
    .pr-bigo-card-name,
    .pr-bigo-card-host-name {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-wrap: break-word;
        line-height: 1.2;
    }
    .pr-bigo-card-name {
        font-size: 13px;
        min-height: 32px;
    }
    .pr-bigo-card-host-name {
        font-size: 11px;
    }
    /* Make cards a bit taller on mobile to fit wrapped text. */
    .pr-bigo-card {
        min-height: 200px !important;
    }
}

/* ---- v5.5.2 — Bottom Toolbar (overlay, Bigo-style) ---- */
.pr-bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 600px;
    background: linear-gradient(180deg, rgba(26, 11, 46, 0.98), rgba(15, 5, 36, 0.98));
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 998;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
}
.pr-tb-btn {
    background: transparent;
    border: none;
    color: var(--pr-text, #fff7e6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 20px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    transition: all 0.15s;
    position: relative;
    min-width: 56px;
}
.pr-tb-btn:hover { background: rgba(168, 85, 247, 0.15); }
.pr-tb-btn:active { transform: scale(0.92); }
.pr-tb-btn-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    opacity: 0.9;
}
.pr-tb-btn-badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: #ff4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 1.5px solid #1a0b2e;
    animation: pr-notif-pulse 1.5s infinite;
}
.pr-tb-btn.pr-tb-active {
    color: var(--pr-accent, #a855f7);
    background: rgba(168, 85, 247, 0.12);
}
.pr-tb-btn.pr-tb-active .pr-tb-btn-label {
    color: var(--pr-accent, #a855f7);
    font-weight: 700;
}

/* v5.5.3 — Show the bottom toolbar in BOTH lobby and room views.
   (Previously hidden in room view, but users need DM/notifications everywhere.)
   The room chat panel is positioned bottom-right and floats above the toolbar. */
.pr-root .pr-bottom-toolbar { display: flex !important; }

/* In room view, shift the chat panel up so it doesn't overlap the toolbar. */
.pr-root.pr-view-room .pr-chat-panel {
    bottom: 64px !important;
}

/* ---- User Profile Modal ---- */
.pr-profile-modal {
    text-align: center;
    padding: 16px;
}
.pr-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--pr-accent, #a855f7);
    object-fit: cover;
    margin-bottom: 8px;
}
.pr-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--pr-text, #fff7e6);
    margin: 4px 0;
}
.pr-profile-level {
    display: inline-block;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 8px;
}
.pr-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 12px 0;
}
.pr-profile-stat {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 6px;
}
.pr-profile-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--pr-gold, #ffd24a);
}
.pr-profile-stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
}
.pr-profile-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.pr-profile-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}
.pr-profile-btn-follow {
    background: var(--pr-accent, #a855f7);
    color: #fff;
}
.pr-profile-btn-follow.following {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pr-text, #fff7e6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pr-profile-btn-message {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pr-text, #fff7e6);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pr-profile-btn-gift {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
}
.pr-profile-btn:hover { filter: brightness(1.1); }

/* ---- Party Share Modal ---- */
.pr-share-modal { padding: 16px; }
.pr-share-room-info {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
}
.pr-share-room-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--pr-gold, #ffd24a);
}
.pr-share-room-code {
    font-size: 24px;
    font-weight: 800;
    color: var(--pr-accent, #a855f7);
    letter-spacing: 4px;
    margin: 8px 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
}
.pr-share-link-row {
    display: flex;
    gap: 6px;
    margin: 12px 0;
}
.pr-share-link-input {
    flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--pr-text, #fff7e6);
    font-size: 12px;
}
.pr-share-btns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.pr-share-btn {
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.pr-share-btn-wa { background: #25D366; }
.pr-share-btn-fb { background: #1877F2; }
.pr-share-btn-tw { background: #000; }
.pr-share-btn-cp { background: var(--pr-accent, #a855f7); }
.pr-share-btn:hover { filter: brightness(1.1); }

/* ---- Following Section (replaces decorative "Following" tab content) ---- */
.pr-following-section {
    padding: 12px;
}
.pr-following-section h3 {
    color: var(--pr-text, #fff7e6);
    font-size: 16px;
    margin: 0 0 12px;
}
.pr-following-empty {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}
.pr-following-empty-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

/* ---- Notifications panel in toolbar ---- */
.pr-notif-panel {
    max-height: 400px;
    overflow-y: auto;
}
.pr-notif-empty {
    text-align: center;
    padding: 30px;
    color: rgba(255, 255, 255, 0.5);
}

/* ---- DM Chat (direct messages between users) ---- */
.pr-dm-modal { padding: 0; }
.pr-dm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(90deg, var(--pr-accent, #a855f7), var(--pr-accent-2, #ec4899));
    color: #fff;
    border-radius: 12px 12px 0 0;
}
.pr-dm-back {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.pr-dm-title { font-weight: 700; flex: 1; }
.pr-dm-messages {
    height: 300px;
    overflow-y: auto;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
}
.pr-dm-msg {
    margin-bottom: 8px;
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    word-wrap: break-word;
    /* v5.5.70 — Force readable contrast: light bubble + dark text. */
    line-height: 1.4;
}
/* v5.5.70 — Per user spec:
 *   "background to off-white or light gray,
 *    and the text colour to dark gray, black, or navy blue."
 * Replaces the previous dark-purple + white-text design which was still
 * showing as "blue" to the user (likely theme override / cache).
 * Now: light bubble, dark text, high contrast. */
.pr-dm-msg-mine {
    background: #f3f4f6;             /* off-white / light gray */
    color: #1e293b;                   /* dark slate (near black, navy tint) */
    margin-left: auto;
    border-bottom-right-radius: 4px;
    border: 1px solid #e5e7eb;
}
.pr-dm-msg-theirs {
    background: #ffffff;              /* pure off-white */
    color: #0f172a;                   /* near-black with navy tint */
    margin-right: auto;
    border-bottom-left-radius: 4px;
    border: 1px solid #e2e8f0;
}
/* v5.5.70 — Force DM timestamp + delete buttons to dark text on light bubble. */
.pr-dm-msg-mine > div,
.pr-dm-msg-theirs > div {
    color: #475569 !important;       /* dark gray */
}
.pr-dm-msg-mine .pr-chat-action-btn,
.pr-dm-msg-theirs .pr-chat-action-btn {
    color: #334155 !important;        /* dark slate */
    background: rgba(15, 23, 42, 0.08) !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
}
.pr-dm-msg-mine .pr-chat-action-btn:hover,
.pr-dm-msg-theirs .pr-chat-action-btn:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}
.pr-dm-input-row {
    display: flex;
    gap: 6px;
    padding: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pr-dm-input {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    color: var(--pr-text, #fff7e6);
    font-size: 13px;
}
.pr-dm-send {
    background: var(--pr-accent, #a855f7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
}
/* v5.5.18 — Gift button inside the DM input row. Sits next to the
 * send button so the user can drop a gift into the chat with one tap. */
.pr-dm-gift-btn {
    background: rgba(236, 72, 153, 0.18);
    color: #fbcfe8;
    border: 1px solid rgba(236, 72, 153, 0.45);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.pr-dm-gift-btn:hover {
    transform: scale(1.08);
    background: rgba(236, 72, 153, 0.35);
    border-color: rgba(236, 72, 153, 0.7);
}

/* v5.5.3 — Add bottom padding to main content so it's not hidden behind the toolbar. */
.pr-root #pr-main-content {
    padding-bottom: 64px !important;
}
.pr-root .pr-bigo-bottom-nav {
    display: none !important;
}

/* v5.5.4 — Following cards grid */
.pr-following-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    padding: 8px;
}
.pr-following-card {
    transition: transform 0.15s, box-shadow 0.15s;
}
.pr-following-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3);
}
.pr-following-cover {
    transition: transform 0.3s;
}
.pr-following-card:hover .pr-following-cover {
    transform: scale(1.05);
}

/* v5.5.4 — Cover button in room header */
#pr-cover-btn {
    font-size: 16px;
}

/* v5.5.17 — Following section: user cards (redesigned).
 * Each card shows avatar + name, a party/room icon (if the user is
 * currently in a party), and a message icon to open a DM. */
.pr-following-user-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 0;
}
@media (min-width: 640px) {
    .pr-following-user-cards { grid-template-columns: 1fr 1fr; }
}
.pr-following-user-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.pr-following-user-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.25);
    border-color: rgba(168, 85, 247, 0.55);
}
.pr-following-user-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pr-following-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}
.pr-following-user-info {
    flex: 1;
    min-width: 0;
}
.pr-following-user-name {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-following-user-sub {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pr-following-user-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.pr-following-ic {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.pr-following-ic:hover {
    transform: scale(1.08);
    border-color: rgba(255, 255, 255, 0.35);
}
.pr-following-ic-room {
    background: rgba(168, 85, 247, 0.22);
    border-color: rgba(168, 85, 247, 0.55);
}
.pr-following-ic-room:hover {
    background: rgba(168, 85, 247, 0.4);
}
.pr-following-ic-msg {
    background: rgba(236, 72, 153, 0.22);
    border-color: rgba(236, 72, 153, 0.55);
}
.pr-following-ic-msg:hover {
    background: rgba(236, 72, 153, 0.4);
}
.pr-following-ic-off {
    opacity: 0.4;
    cursor: default;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.pr-following-ic-off:hover {
    transform: none;
}

/* v5.5.6 — Profile modal v2 (cleaner design matching user's image) */
.pr-profile-card-v2 {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    overflow: hidden;
    margin: -20px;
}
.pr-profile-cover {
    position: relative;
}
.pr-profile-avatar-wrap {
    position: relative;
    margin-top: -40px;
    text-align: center;
}
.pr-profile-avatar-v2 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #1a0b2e;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    background: #2d1b4e;
}
.pr-profile-level-badge-v2 {
    position: absolute;
    bottom: 0;
    right: calc(50% - 50px);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 12px;
    border: 2px solid #1a0b2e;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.pr-profile-name-v2 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 8px 0 4px;
}
.pr-profile-xp-bar-wrap {
    width: 80%;
    margin: 8px auto 4px;
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.pr-profile-xp-bar {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #ec4899, #a855f7);
    border-radius: 4px;
    transition: width 0.5s ease;
}
.pr-profile-xp-text {
    text-align: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 12px;
}
.pr-profile-stats-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 16px 12px;
}
.pr-profile-stat-v2 {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px 4px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.pr-profile-stat-num {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
}
.pr-profile-stat-lbl {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}
.pr-profile-badges-v2 {
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pr-profile-badges-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}
.pr-profile-badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pr-profile-badge-v2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 8px;
    min-width: 60px;
    max-width: 80px;
}
.pr-profile-badge-icon {
    font-size: 24px;
    line-height: 1;
}
.pr-profile-badge-name {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    margin-top: 4px;
    line-height: 1.2;
}
.pr-profile-actions-v2 {
    display: flex;
    gap: 8px;
    padding: 12px 16px 16px;
    flex-wrap: wrap;
}
.pr-profile-act-btn {
    flex: 1;
    min-width: 90px;
    padding: 10px 12px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    color: #fff;
    transition: filter 0.15s, transform 0.1s;
}
.pr-profile-act-btn:active { transform: scale(0.95); }
.pr-profile-act-btn:hover { filter: brightness(1.1); }
.pr-profile-act-follow {
    background: linear-gradient(135deg, #a855f7, #ec4899);
}
.pr-profile-act-follow.following {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pr-profile-act-msg {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.pr-profile-act-gift {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1a0b2e;
}
.pr-profile-act-edit {
    background: linear-gradient(135deg, #06b6d4, #a855f7);
    width: 100%;
    flex: none;
}

/* v5.5.18 — Profile modal: action icon row (redesigned).
 * Each icon is a vertical button: emoji on top, label underneath, in a
 * clean font. Replaces the previous wide horizontal buttons so all
 * actions (Follow / Message / Gift / Kick / Wallet / History / Avatar /
 * Following) fit in one row, scrollable on mobile. */
.pr-profile-actions-v2.pr-profile-actions-icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 6px;
    padding: 12px 10px 14px;
}
.pr-profile-ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    color: #fff;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    min-width: 0;
}
.pr-profile-ic:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}
.pr-profile-ic:active { transform: scale(0.96); }
.pr-profile-ic-icon {
    font-size: 22px;
    line-height: 1;
}
.pr-profile-ic-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.2px;
    text-align: center;
    line-height: 1.2;
    word-break: keep-all;
    white-space: nowrap;
}
/* Subtle color hints per action. */
.pr-profile-ic-follow   { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.12); }
.pr-profile-ic-follow.following { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.45); }
.pr-profile-ic-msg      { border-color: rgba(236, 72, 153, 0.4); background: rgba(236, 72, 153, 0.12); }
.pr-profile-ic-gift     { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.12); }
.pr-profile-ic-kick     { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }
.pr-profile-ic-following{ border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.12); }
.pr-profile-ic-wallet   { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.12); }
.pr-profile-ic-history  { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05); }
.pr-profile-ic-edit     { border-color: rgba(6, 182, 212, 0.4); background: rgba(6, 182, 212, 0.12); }
/* v5.5.68 — Explicit color hints for the new icons (so they don't look
 * "blue" on the Neon Night theme where --pr-accent is cyan). */
.pr-profile-ic-messages { border-color: rgba(236, 72, 153, 0.4); background: rgba(236, 72, 153, 0.12); }
.pr-profile-ic-store    { border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.12); }
.pr-profile-ic-dashboard{ border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.12); }
.pr-profile-ic-all-tasks{ border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.12); }
.pr-profile-ic-all-history{ border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.12); }
.pr-profile-ic-reward   { border-color: rgba(245, 197, 66, 0.5); background: rgba(245, 197, 66, 0.12); }
.pr-profile-ic-help     { border-color: rgba(248, 113, 113, 0.45); background: rgba(248, 113, 113, 0.12); }
.pr-profile-ic-fraud    { border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.12); }

/* v5.5.18 — Gift stats grid in the profile modal. Shows the per-gift-type
 * totals the user has received in the last 24h (e.g., "🌹 Rose × 5",
 * "🍭 Lollipop × 3"). */
.pr-profile-gift-stats {
    margin: 12px 16px 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}
.pr-profile-gift-stats-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}
.pr-profile-gift-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 6px;
}
.pr-profile-gift-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    text-align: center;
}
.pr-profile-gift-stat-emoji {
    font-size: 20px;
    line-height: 1;
}
.pr-profile-gift-stat-name {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.2;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pr-profile-gift-stat-count {
    font-size: 12px;
    font-weight: 700;
    color: #fbbf24;
}

/* ============================================================
 *  v5.5.8 — User-requested UI tweaks
 * ========================================================== */

/* Hide the dark-purple bottom taskbar (Profile / Following / Ranks /
 * Messages / Alerts) entirely. The element may still be created by
 * older cached JS, so we strip it via CSS as a safety net. */
.pr-bottom-toolbar { display: none !important; }

/* Hide the legacy white Bigo-style bottom nav (Live / Gems / Party /
 * Chat / Me) too — it's already not rendered in the new JS, but
 * keep this rule so cached HTML can't ghost it back. */
.pr-bigo-bottom-nav { display: none !important; }

/* Bottom padding for the lobby — was set to make room for the now-removed
 * bottom taskbar; reduce it so the layout looks tighter. */
.pr-root #pr-main-content {
    padding-bottom: 16px !important;
}

/* Collapsed hint shown in the bottom box when no tab is active.
 * Click a tab to open it; click again to close. */
.pr-tab-collapsed-hint {
    width: 100%;
    text-align: center;
    padding: 18px 12px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    line-height: 1.5;
    font-style: italic;
}

/* When a tab is open, shrink the gift grid area slightly so the
 * "Send Gift Now" button stays pinned to the bottom of the box. */
.pr-gifts-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 100%;
}
.pr-gift-action-bar {
    /* v5.5.8 — Send Gift Now button always stays at the bottom of the
     * gift panel and is only rendered when the Gifts tab is open. */
    position: sticky;
    bottom: 0;
    background: rgba(26, 11, 46, 0.96);
    padding-top: 6px;
    margin-top: 4px;
}

/* Hide the legacy JOIN button on room cards — the whole card is
 * clickable now. (Already not rendered in JS, but keep this rule
 * to override any cached HTML.) */
.pr-bigo-card-join { display: none !important; }

/* Smaller room-view cover button — appears in the room toolbar
 * (only for the party owner). */
#pr-room-cover-btn {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 14px;
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #fff;
    cursor: pointer;
}
#pr-room-cover-btn:hover { background: rgba(168, 85, 247, 0.3); }

/* Visual hint when tab-content is empty (no active tab). */
.pr-box-tabs { margin-bottom: 4px; }
/* v5.5.11 — Tab content default min-height kept small so empty state
 * doesn't push the layout. The collapsed state below hides it entirely. */
.pr-tab-content { min-height: 0; }
/* v5.5.11 — When no tab is active, the bottom box collapses to just
 * the tab buttons row. The content area is hidden so the tab buttons
 * sit flush at the bottom of the screen (no empty hint text, no extra
 * padding pushing them up). */
.pr-bottom-box.pr-collapsed .pr-tab-content {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}


/* ============================================================
 *  v5.5.8 — Seat layout selector in Create Room modal
 * ========================================================== */

.pr-layout-quick {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pr-border);
    color: #fff;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pr-layout-quick:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
}
.pr-layout-quick.is-selected {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
    color: #fff;
}

/* v5.5.8 — For non-circle layouts, hide the center hub so seats in
 * a single row/column/grid don't overlap it. The layout class is
 * applied to the #pr-table element (which also has .pr-table-area). */
.pr-table-area.pr-table-layout-horizontal .pr-center-hub,
.pr-table-area.pr-table-layout-vertical   .pr-center-hub,
.pr-table-area.pr-table-layout-grid       .pr-center-hub {
    display: none;
}

/* For horizontal / vertical / grid layouts, give the stage a bit more
 * height so all seats are visible without clipping. */
.pr-table-area.pr-table-layout-horizontal { min-height: 180px !important; }
.pr-table-area.pr-table-layout-vertical   { min-height: 360px !important; }
.pr-table-area.pr-table-layout-grid       { min-height: 320px !important; }



/* ============================================================
 *  v5.5.9 — User-requested UI fixes
 * ========================================================== */

/* ----- 1. Show uploaded cover image on room cards ----- */
.pr-bigo-card.has-cover-image .pr-bigo-card-bg {
    background: transparent !important;
}
.pr-bigo-card.has-cover-image .pr-bigo-card-initial {
    display: none !important;
}
/* Make the cover image visible — the card itself now carries the
 * background-image inline style, so we just need to make sure
 * .pr-bigo-card-bg doesn't paint over it. */
.pr-bigo-card.has-cover-image {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ----- 2. Show uploaded cover image in active party room ----- */
.pr-table-area.has-cover-image {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.pr-table-area.has-cover-image .pr-table-cover-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: var(--pr-radius);
}
/* v5.5.12 — IMPORTANT: keep .pr-center-hub and .pr-seat at
 * position: absolute so the seat-positioning math (transform:
 * translate(x, y) on top:50%/left:50%) keeps them centered on the
 * stage. The previous "position: relative" override broke the math
 * and made all seats stack to the right of the stage. We only bump
 * the z-index here so they render above the cover image + shade. */
.pr-table-area.has-cover-image .pr-center-hub,
.pr-table-area.has-cover-image .pr-seat {
    z-index: 2;
}

/* ----- 3. Fixed bottom footer (so Send Gift Now doesn't scroll with page) -----
 * The bottom box (tabs + content + Send Gift button) is pinned to the
 * viewport bottom on room view. The page itself scrolls behind it.
 */
.pr-room-footer-fixed {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 600px;
    margin: 0 auto;
    background: rgba(26, 11, 46, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}
/* Give the room content enough bottom padding so the fixed footer
 * doesn't cover the last seats. */
.pr-root.pr-view-room #pr-main-content {
    padding-bottom: 280px !important;
}
/* v5.5.11 — When the bottom box is collapsed (no tab active), the
 * footer is just the tab buttons row (much shorter). Reduce the main
 * content's bottom padding so seats can use the freed space. */
.pr-root.pr-view-room:has(.pr-bottom-box.pr-collapsed) #pr-main-content {
    padding-bottom: 80px !important;
}

/* ----- 4. 4-tab layout for Chat / Gifts / Emojis / Live ----- */
.pr-box-tabs-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
}
.pr-box-tabs-4 .pr-tab-btn {
    font-size: 11px !important;
    padding: 6px 2px !important;
}
.pr-box-tabs-4 .pr-tab-btn > span:first-child {
    font-size: 16px;
}
.pr-box-tabs-4 .pr-tab-btn > span:last-child {
    font-size: 9px;
    font-weight: 600;
}

/* ----- 5. Inline chat panel (inside the bottom box tab) ----- */
.pr-chat-inline-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 220px;
}
.pr-chat-inline-panel .pr-chat-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 6px 8px;
    max-height: 160px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    margin-bottom: 6px;
    scrollbar-width: thin;
}
.pr-chat-inline-panel .pr-chat-messages .pr-chat-msg {
    font-size: 12px;
    color: #fff;
    padding: 2px 0;
    line-height: 1.4;
    word-wrap: break-word;
}
.pr-chat-inline-panel .pr-chat-messages .pr-chat-msg-system {
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}
.pr-chat-inline-panel .pr-chat-messages .pr-chat-time {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    margin-right: 4px;
}
.pr-chat-inline-panel .pr-chat-messages .pr-chat-user {
    color: #fbbf24;
    font-weight: 600;
}
.pr-chat-inline-panel .pr-chat-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.pr-chat-inline-panel .pr-chat-input {
    flex: 1 1 auto;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    min-width: 0;
}
.pr-chat-inline-panel .pr-chat-send-btn {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 12px;
}

/* Hide the old floating chat panel (extensions still creates it but
 * we don't want it overlapping our new inline chat tab). */
.pr-chat-panel { display: none !important; }


/* ============================================================
 *  v5.5.13 — Gift panel: balance + cost info above the Send button
 * ========================================================== */

.pr-gift-balance-info,
.pr-gift-cost-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 4px;
}
.pr-gift-balance-label,
.pr-gift-cost-label {
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
    letter-spacing: 0.3px;
}
.pr-gift-balance-value {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
}
.pr-gift-cost-value {
    color: #5bd17a;
    font-weight: 700;
    font-size: 13px;
}
.pr-gift-cost-value.pr-gift-cost-insufficient {
    color: #ff6b6b;
}

/* Disable the Send Gift Now button visually when the user can't
 * afford the gift. The 'disabled' attribute already prevents the
 * click; this just makes the visual state clear. */
.pr-gift-action-bar .pr-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.4);
}


/* v5.5.20 — requested profile, header and room-control polish */
.pr-user-pills { gap: 0; }
.pr-user-pills .pr-pill, .pr-user-pills #pr-wallet-btn, .pr-user-pills #pr-history-btn { display: none !important; }
.pr-avatar-btn { width: 42px; height: 42px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.pr-avatar-btn-img { font-size: 22px; }
.pr-avatar-btn-img img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.pr-room-code-pill { border: 0; cursor: pointer; color: var(--pr-gold, #ffd24a); background: rgba(255,255,255,.08); border: 1px solid rgba(255,210,74,.28); padding: 7px 12px; border-radius: 8px; font: inherit; font-weight: 800; letter-spacing: 2px; transition: background .15s, transform .15s; }
.pr-room-code-pill:hover { background: rgba(255,210,74,.16); transform: translateY(-1px); }
.pr-profile-card-v2 { position: relative; margin: -24px; padding-bottom: 8px; }
.pr-profile-close-top { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(15,5,36,.48); color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.pr-profile-close-top:hover { background: rgba(15,5,36,.78); }
.pr-profile-close-bottom { display: block; width: calc(100% - 20px); margin: 10px auto 2px; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: linear-gradient(135deg, rgba(168,85,247,.9), rgba(236,72,153,.9)); color: #fff; font-weight: 800; cursor: pointer; }
.pr-profile-close-bottom { position: sticky; bottom: 0; box-shadow: 0 -8px 18px rgba(35,19,73,.88); }
.pr-profile-close-bottom:hover { filter: brightness(1.1); }
.pr-profile-stat-icon { font-size: 20px; line-height: 1; margin-bottom: 3px; }
.pr-profile-social-stats .pr-profile-stat-v2 { padding: 9px 4px 8px; }
.pr-owner-choice-actions { display: grid; gap: 8px; margin-top: 16px; }
.pr-owner-choice-actions button { border: 0; border-radius: 9px; padding: 11px 12px; font-weight: 700; cursor: pointer; color: #fff; }
/* v5.5.47 — Fix: buttons were white-on-white. Now use solid colored backgrounds so labels are visible on the white modal. */
.pr-owner-choice-minimize { background: #6d28d9; border: 1px solid #5b21b6 !important; }
.pr-owner-choice-minimize:hover { background: #5b21b6; }
.pr-owner-choice-delete { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.pr-owner-choice-delete:hover { background: linear-gradient(135deg,#dc2626,#991b1b); }
.pr-owner-choice-stay { background: #f59e0b; border: 1px solid #d97706 !important; color: #1f2937; }
.pr-owner-choice-stay:hover { background: #d97706; color: #fff; }
@media (max-width: 520px) { .pr-room-toolbar { gap: 6px; } .pr-room-info { max-width: 48%; text-align: center; } }

/* ============================================================
 *  v5.5.23 — Clickable social stats + social list modal
 * ========================================================== */

/* Make the 3 profile stats (Following / Followers / Visitors) look
 * like clickable buttons. Use <button> tags (which we already do) and
 * reset the default button styling so they look like the existing
 * stat cards. */
.pr-profile-stat-v2.pr-profile-stat-clickable {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    font: inherit;
    color: inherit;
    text-align: center;
    padding: 9px 4px 8px;
}
.pr-profile-stat-v2.pr-profile-stat-clickable:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-1px);
}
.pr-profile-stat-v2.pr-profile-stat-clickable:active {
    transform: scale(0.97);
}
.pr-profile-stat-v2.pr-profile-stat-clickable:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3);
}

/* Disable text selection on the clickable stats so the click doesn't
 * select the number/label text. */
.pr-profile-stat-v2.pr-profile-stat-clickable,
.pr-profile-stat-v2.pr-profile-stat-clickable * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Social list modal — rows of users */
.pr-social-list-modal {
    max-height: 60vh;
    overflow-y: auto;
}
.pr-social-list-rows .pr-social-list-row:hover {
    background: rgba(168, 85, 247, 0.12);
}
.pr-social-list-row:last-child {
    border-bottom: none !important;
}


/* v5.5.33 — Keep the live title and profile avatar on one horizontal row. */
.pr-header {
    flex-wrap: nowrap !important;
    width: 100%;
    box-sizing: border-box;
}
.pr-header-left {
    flex: 1 1 auto;
    min-width: 0;
}
.pr-user-pills {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    margin-left: auto;
}
.pr-root.pr-view-room .pr-user-pills {
    display: flex !important;
}
.pr-social-close-fixed {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: block;
    width: 100%;
    margin: 14px 0 0;
    padding: 11px 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(168,85,247,.96), rgba(236,72,153,.96));
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 -8px 18px rgba(20,8,42,.75);
}
.pr-social-close-fixed:hover { filter: brightness(1.1); }
@media (max-width: 480px) {
    .pr-header { padding: 7px 9px; gap: 6px; }
    .pr-header-left { gap: 5px; }
    .pr-title { font-size: 16px; }
    .pr-live-badge { padding: 3px 5px; font-size: 9px; letter-spacing: .5px; }
    .pr-avatar-btn { width: 38px; height: 38px; }
}

/* v5.5.34 — Profile role dashboard. */
.pr-profile-ic-dashboard { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.12); }
.pr-personal-dashboard { padding: 4px 0 2px; }
.pr-dashboard-role { margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(168,85,247,.12); color: rgba(255,255,255,.8); }
.pr-dashboard-role strong { color: #fff; }
.pr-dashboard-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.pr-dashboard-card { padding: 12px 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.05); }
.pr-dashboard-card small { display:block; color: rgba(255,255,255,.55); font-size: 11px; margin-bottom: 5px; }
.pr-dashboard-card strong { display:block; color:#fff; font-size: 16px; }
.pr-dashboard-section { margin-top: 12px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: 12px; }
.pr-dashboard-section b { color:#fff; font-size:13px; }
.pr-dashboard-section p { margin: 6px 0 10px; }
.pr-dashboard-link, .pr-dashboard-close { display:block; width:100%; box-sizing:border-box; padding:10px 12px; border-radius:9px; text-align:center; font-weight:700; cursor:pointer; }
.pr-dashboard-link { background: linear-gradient(135deg,#8b5cf6,#ec4899); color:#fff; text-decoration:none; }
.pr-dashboard-close { margin-top:12px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08); color:#fff; }

/* v5.5.35 — public profile ID and username store. */
.pr-profile-public-id { margin-top: 2px; color: rgba(255,255,255,.55); font-size: 11px; letter-spacing: .6px; }
.pr-profile-ic-store { border-color: rgba(251,191,36,.5); background: rgba(251,191,36,.12); }
/* v5.5.47/48 — Month Target + Daily Target icons + modal. */
.pr-profile-ic-month-target { border-color: rgba(168,85,247,.5); background: rgba(168,85,247,.12); }
.pr-profile-ic-month-target .pr-profile-ic-icon { font-size: 18px; }
.pr-profile-ic-daily-target { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.12); }
.pr-profile-ic-daily-target .pr-profile-ic-icon { font-size: 18px; }

/* v5.5.48 — Daily Target modal styles. */
.pr-daily-target-wrap { padding: 14px 0; }
.pr-daily-banner { padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; border: 1px solid transparent; }
.pr-daily-banner b { display: block; font-size: 14px; margin-bottom: 4px; }
.pr-daily-banner p { margin: 0; font-size: 12px; opacity: 0.85; }
.pr-daily-banner-passed { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.4); color: #5bd17a; }
.pr-daily-banner-partial { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); color: #fbbf24; }
.pr-daily-banner-pending { background: rgba(168,85,247,.15); border-color: rgba(168,85,247,.4); color: #c4b5fd; }
.pr-daily-banner-neutral { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.7); }
/* v5.5.81 — Start button + reward preview card + locked claim button. */
.pr-daily-start-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
    box-shadow: 0 4px 14px rgba(16,185,129,.35);
}
.pr-daily-start-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16,185,129,.5); }
.pr-daily-start-btn:active:not(:disabled) { transform: translateY(0); }
.pr-daily-start-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pr-daily-locked-btn {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.5) !important;
    border: 1px dashed rgba(255,255,255,.25) !important;
    border-radius: 12px !important;
}
.pr-daily-card-reward-preview { background: rgba(245,197,66,.08) !important; border-color: rgba(245,197,66,.35) !important; }
.pr-daily-date { font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 12px; text-align: center; }
.pr-daily-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.pr-daily-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pr-daily-card-icon { font-size: 18px; margin-right: 8px; }
.pr-daily-card-title { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); flex: 1; }
.pr-daily-card-status { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.pr-daily-status-met { background: rgba(16,185,129,.18); color: #5bd17a; border: 1px solid rgba(16,185,129,.4); }
.pr-daily-status-unmet { background: rgba(255,107,107,.18); color: #ff6b6b; border: 1px solid rgba(255,107,107,.4); }
.pr-daily-card-value { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.pr-daily-card-divider { color: rgba(255,255,255,.4); font-weight: 400; margin: 0 4px; }
.pr-daily-progress-track { width: 100%; height: 8px; background: rgba(0,0,0,.3); border-radius: 4px; overflow: hidden; }
.pr-daily-progress-bar { height: 100%; border-radius: 4px; transition: width 0.4s ease-out; }
.pr-daily-progress-timing { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.pr-daily-progress-gift { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pr-daily-card-foot { font-size: 12px; color: rgba(255,255,255,.7); margin-top: 8px; }
.pr-daily-card-foot-met { color: #5bd17a; }

/* v5.5.48 — Manager Dashboard host list with Daily/Monthly Task buttons. */
.pr-mgr-hosts-summary { padding: 8px 10px; margin: 8px 0 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.pr-mgr-hosts-summary small { color: rgba(255,255,255,.7); font-size: 11px; }
.pr-mgr-hosts-summary small strong { color: #fff; }
.pr-mgr-agency-block { margin-bottom: 10px; }
.pr-mgr-agency-name { font-size: 12px; font-weight: 700; color: #c4b5fd; margin-bottom: 4px; padding-left: 4px; }
.pr-mgr-host-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; margin-bottom: 6px; }
.pr-mgr-host-info { display: flex; flex-direction: column; gap: 2px; }
.pr-mgr-host-name { font-size: 13px; font-weight: 700; color: #fff; }
.pr-mgr-host-stats { font-size: 11px; color: rgba(255,255,255,.6); }
.pr-mgr-host-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pr-mgr-task-btn { padding: 6px 10px; font-size: 11px; flex: 1; min-width: 0; text-align: center; }
.pr-mgr-host-status { display: flex; }
.pr-mgr-tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 999px; }
.pr-mgr-tag-success { background: rgba(16,185,129,.2); color: #5bd17a; border: 1px solid rgba(16,185,129,.4); }
.pr-mgr-tag-warning { background: rgba(245,158,11,.2); color: #fbbf24; border: 1px solid rgba(245,158,11,.4); }

/* Manager Monthly Task modal */
.pr-mgr-monthly-wrap { padding: 14px 0; }
.pr-mgr-monthly-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin: 10px 0; }
.pr-mgr-stat { padding: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; text-align: center; }
.pr-mgr-stat small { display: block; font-size: 9px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.pr-mgr-stat strong { display: block; font-size: 13px; color: #fff; }
.pr-mgr-stat-pass strong { color: #5bd17a; }
.pr-mgr-transfer-done { padding: 10px 12px; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); border-radius: 10px; margin: 10px 0; }
.pr-mgr-transfer-done b { color: #5bd17a; font-size: 13px; }
.pr-mgr-transfer-done p { margin: 4px 0 0; font-size: 12px; color: #d1fae5; }
.pr-mgr-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; margin-top: 12px; }
.pr-mgr-cal-cell { padding: 5px 3px; border-radius: 5px; text-align: center; font-size: 10px; line-height: 1.3; }
.pr-mgr-cal-day { font-weight: 700; }
.pr-mgr-cal-time { font-size: 9px; }
.pr-mgr-cal-coin { font-size: 9px; }

@media (max-width: 520px) {
    .pr-mgr-monthly-stats { grid-template-columns: repeat(2,1fr); }
}
.pr-username-rules { padding: 9px; border-radius: 8px; background: rgba(168,85,247,.1); color: rgba(255,255,255,.72); font-size: 12px; }

/* v5.5.36 — numeric copyable public IDs and fixed subpanel closes. */
.pr-profile-public-id { display:block; margin:2px auto 0; padding:2px 8px; border:0; background:transparent; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.6px; cursor:pointer; }
.pr-profile-public-id:hover { color:#fff; text-decoration:underline; }
.pr-fixed-subpanel-close { position:sticky; bottom:0; z-index:3; box-shadow:0 -8px 18px rgba(35,19,73,.88); }

/* v5.5.37 — Keep profile avatar at the far right on mobile. */
.pr-header { display:flex !important; align-items:center !important; justify-content:flex-start !important; }
.pr-header-left { flex:1 1 auto !important; min-width:0 !important; overflow:hidden; }
.pr-title { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.pr-live-badge { flex:0 0 auto; white-space:nowrap; }
.pr-user-pills { margin-left:auto !important; flex:0 0 auto !important; position:relative; z-index:2; }
@media (max-width:480px) {
  .pr-header-left { gap:4px !important; }
  .pr-title { font-size:15px !important; }
  .pr-user-pills { margin-left:auto !important; }
}

/* v5.5.38 — registered-user gate and room controls in header. */
.pr-registered-gate { max-width:520px; margin:40px auto; padding:30px 20px; text-align:center; border:1px solid var(--pr-border); border-radius:16px; background:var(--pr-glass); }
.pr-registered-gate-icon { font-size:42px; margin-bottom:8px; }
.pr-registered-gate h2 { margin:8px 0; color:#fff; }
.pr-registered-gate p { color:rgba(255,255,255,.7); }
.pr-registered-gate-actions { display:flex; justify-content:center; gap:10px; margin-top:20px; }
.pr-registered-gate-actions a { min-width:110px; text-decoration:none; }
.pr-room-header-controls { display:flex; align-items:center; justify-content:flex-end; gap:4px; flex:0 0 auto; margin-left:auto; }
.pr-room-header-icon { min-width:32px; height:32px; padding:0 7px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.08); color:#fff; cursor:pointer; font-size:17px; }
.pr-room-header-icon:hover { background:rgba(168,85,247,.35); }
.pr-room-header-exit { border-color:rgba(248,113,113,.5); }
.pr-room-header-code { max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:7px 8px; font-size:11px; letter-spacing:1px; }
.pr-history-private-note { margin:0 0 8px; color:rgba(255,255,255,.55); font-size:12px; }
.pr-store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.pr-store-grid .pr-fixed-subpanel-close { grid-column:1 / -1; }

/* v5.5.41 — role-aware profile labels and agency action. */
.pr-profile-role-badge { display:inline-block; margin:3px auto 5px; padding:3px 9px; border:1px solid rgba(34,211,238,.35); border-radius:999px; color:#a5f3fc; background:rgba(34,211,238,.1); font-size:11px; font-weight:700; }
.pr-profile-ic-agency { border-color:rgba(34,211,238,.4); background:rgba(34,211,238,.1); }

/* v5.5.43 — Host, manager, and admin reporting dashboards. */
.pr-role-report { padding-bottom:72px; }
.pr-report-table { display:flex; flex-direction:column; gap:6px; max-height:330px; overflow:auto; }
.pr-report-row { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:7px; padding:8px; border:1px solid rgba(255,255,255,.1); border-radius:8px; font-size:11px; color:rgba(255,255,255,.78); }
.pr-report-row strong { color:#fff; }
.pr-report-error { color:#fca5a5; }
@media (max-width:600px) { .pr-report-row { grid-template-columns:1fr 1fr; } .pr-report-row span:last-child { grid-column:1/-1; } }

/* ============================================================
 * v5.5.44 — Enriched Host / Manager / Admin dashboard cards
 * ========================================================== */

/* Agency card v2 — grid layout. */
.pr-agency-card-v2 { padding:14px !important; }
.pr-agency-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.pr-agency-card-grid > div { padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.04); }
.pr-agency-card-grid small { display:block; font-size:10px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.pr-agency-card-grid strong { display:block; font-size:13px; color:#fff; word-break:break-word; }
@media (max-width:600px) { .pr-agency-card-grid { grid-template-columns:1fr; } }

/* Leave-request status sub-card. */
.pr-leave-status-card { margin-top:10px; padding:10px; border:1px solid rgba(251,191,36,.3); border-radius:8px; background:rgba(251,191,36,.06); font-size:12px; color:rgba(255,255,255,.78); }

/* Today's Target v2 card with progress bars. */
.pr-target-card-v2 { padding:14px !important; }
.pr-target-row { padding:10px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.03); margin-top:8px; }
.pr-target-row-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12px; color:rgba(255,255,255,.7); }
.pr-target-row-head strong { color:#fff; font-size:13px; }
.pr-progress-bar { height:6px; background:rgba(255,255,255,.1); border-radius:3px; overflow:hidden; margin:6px 0; }
.pr-progress-fill { height:100%; background:linear-gradient(90deg,#a855f7,#ec4899); border-radius:3px; transition:width .4s ease; }
.pr-progress-fill-gift { background:linear-gradient(90deg,#fbbf24,#f59e0b); }
.pr-target-row-meta { display:flex; flex-wrap:wrap; gap:10px; font-size:11px; color:rgba(255,255,255,.65); margin-top:4px; }
.pr-target-row-meta strong { color:#fff; }
.pr-status-pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:10px; font-weight:700; }
.pr-status-passed { background:rgba(91,209,122,.18); color:#5bd17a; border:1px solid rgba(91,209,122,.4); }
.pr-status-failed { background:rgba(255,107,107,.18); color:#ff6b6b; border:1px solid rgba(255,107,107,.4); }
@media (max-width:600px) { .pr-target-row-meta { flex-direction:column; gap:4px; } }

/* Month summary + agency summary + agency report cards — shared grid. */
.pr-month-summary-card, .pr-manager-summary-card, .pr-agency-report-card { padding:14px !important; }
.pr-month-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.pr-month-stat { padding:10px 8px; border:1px solid rgba(255,255,255,.08); border-radius:8px; background:rgba(255,255,255,.04); text-align:center; }
.pr-month-stat small { display:block; font-size:9px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
.pr-month-stat strong { display:block; font-size:14px; color:#fff; }
.pr-month-stat-pass strong { color:#5bd17a; }
.pr-month-stat-miss strong { color:#ff6b6b; }
.pr-month-stat-pending strong { color:#fbbf24; }
@media (max-width:600px) { .pr-month-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Host list table — header row + clickable rows. */
.pr-report-table-hosts .pr-report-row { grid-template-columns:1.2fr 1fr 0.8fr 1fr 0.8fr 0.6fr; align-items:center; }
.pr-report-row-header { background:rgba(255,255,255,.06); font-size:10px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.5px; font-weight:700; }
.pr-report-row-header span { color:rgba(255,255,255,.55); }
.pr-report-row-clickable { cursor:pointer; transition:background .15s; }
.pr-report-row-clickable:hover { background:rgba(168,85,247,.15); border-color:rgba(168,85,247,.4); }
@media (max-width:600px) {
    .pr-report-table-hosts .pr-report-row { grid-template-columns:1fr 1fr; }
    .pr-report-table-hosts .pr-report-row span:nth-child(n+4) { grid-column:auto; }
}

/* History table — 6 columns + earnings details expander. */
.pr-history-table .pr-report-row { grid-template-columns:0.9fr 1.1fr 1.1fr 0.7fr 0.7fr 0.8fr; }
.pr-history-earnings-details { margin-top:10px; }
.pr-history-earnings-details summary { cursor:pointer; font-size:11px; color:rgba(255,255,255,.65); padding:6px 0; }
.pr-history-earnings-details summary:hover { color:#fff; }
.pr-history-earnings-table { margin-top:8px; }
.pr-history-earnings-table .pr-report-row { grid-template-columns:0.9fr 1fr 1fr 1fr 1fr; }
.pr-text-pass { color:#5bd17a; font-weight:600; }
.pr-text-fail { color:#ff6b6b; font-weight:600; }
@media (max-width:600px) {
    .pr-history-table .pr-report-row,
    .pr-history-earnings-table .pr-report-row { grid-template-columns:1fr 1fr; }
}

/* Host detail modal. */
.pr-host-detail-header { display:flex; align-items:center; gap:12px; padding:10px 0; margin-bottom:10px; }
.pr-host-detail-avatar { width:60px; height:60px; border-radius:50%; border:2px solid rgba(168,85,247,.5); object-fit:cover; }
.pr-host-detail-name { font-size:18px; font-weight:700; color:#fff; }
.pr-host-detail-meta { font-size:11px; color:rgba(255,255,255,.6); margin-top:2px; }
.pr-host-detail-actions { display:flex; gap:8px; margin-top:14px; }

/* Earnings card. */
.pr-earnings-card { padding:14px !important; }
.pr-earnings-list { display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.pr-earnings-list > div { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(255,255,255,.03); font-size:12px; }
.pr-earnings-list > div span { color:rgba(255,255,255,.7); }
.pr-earnings-list > div strong { color:#fff; }

/* Agency requests v2 — tabs. */
.pr-requests-v2 { padding-bottom:20px; }
.pr-requests-tabs { display:flex; gap:6px; margin-bottom:14px; }
.pr-requests-tab { flex:1; padding:10px 12px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:rgba(255,255,255,.05); color:rgba(255,255,255,.7); cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
.pr-requests-tab.active { background:rgba(168,85,247,.25); border-color:rgba(168,85,247,.6); color:#fff; }
.pr-requests-tab:hover { background:rgba(168,85,247,.15); }
.pr-requests-tab-count { display:inline-block; padding:1px 6px; background:rgba(255,255,255,.15); border-radius:999px; font-size:10px; margin-left:4px; }
.pr-requests-tab.active .pr-requests-tab-count { background:rgba(255,255,255,.25); }
.pr-requests-row { display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.03); margin-bottom:8px; gap:10px; }
.pr-requests-row-leave { border-color:rgba(251,191,36,.25); background:rgba(251,191,36,.05); }
.pr-requests-row-info { flex:1; min-width:0; }
.pr-requests-row-info strong { display:block; color:#fff; font-size:13px; }
.pr-requests-row-info small { display:block; color:rgba(255,255,255,.55); font-size:10px; margin-top:2px; }
.pr-requests-row-actions { display:flex; gap:6px; flex:0 0 auto; }
.pr-requests-row-actions button { padding:6px 10px; font-size:11px; }
@media (max-width:600px) {
    .pr-requests-row { flex-direction:column; align-items:stretch; }
    .pr-requests-row-actions { justify-content:space-between; }
}

/* ============================================================
 * v5.5.45 — New styles: suspension, payouts, monthly reward, missed status
 * ========================================================== */

/* Suspension banners (host's own + manager's view of a host). */
.pr-suspension-banner { padding:14px; border-radius:8px; margin:10px 0; font-size:13px; line-height:1.5; }
.pr-suspension-active { background:rgba(255,107,107,.15); border:1px solid rgba(255,107,107,.5); color:#fecaca; }
.pr-suspension-expired { background:rgba(91,209,122,.12); border:1px solid rgba(91,209,122,.4); color:#bbf7d0; }

/* Suspended row highlight in host list. */
.pr-report-row-suspended { background:rgba(255,107,107,.08) !important; border-color:rgba(255,107,107,.3) !important; }

/* Monthly reward card. */
.pr-monthly-reward-card { padding:14px !important; background:rgba(255,255,255,.06) !important; color:#fff !important; }
.pr-monthly-reward-card b { color:#fff !important; }
.pr-monthly-reward-card p { color:rgba(255,255,255,.75) !important; }
.pr-reward-status { display:inline-block; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:700; margin:8px 0; }
.pr-reward-eligible { background:rgba(91,209,122,.18); color:#5bd17a; border:1px solid rgba(91,209,122,.4); }
.pr-reward-claimed { background:rgba(168,85,247,.18); color:#c4b5fd; border:1px solid rgba(168,85,247,.4); }
.pr-reward-ineligible { background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.25); }
.pr-reward-amount { font-size:14px; margin:6px 0; color:#fff; }

/* Payout card. */
.pr-payout-card { padding:14px !important; }
.pr-payouts-table .pr-report-row { grid-template-columns:1.2fr 1fr 0.8fr 1fr 0.8fr 0.9fr; align-items:center; }
@media (max-width:600px) { .pr-payouts-table .pr-report-row { grid-template-columns:1fr 1fr; } }
.pr-record-payout-form { padding:14px; }
.pr-record-payout-form label { color:rgba(255,255,255,.7); font-size:12px; }

/* Suspend form. */
.pr-suspend-form { padding:14px; }
.pr-suspend-form label { color:rgba(255,255,255,.7); font-size:12px; }