/* Smart search + filter results header */
.results-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    margin: 4px 0 16px 0;
    font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(110, 142, 251, 0.08), rgba(167, 119, 227, 0.08));
    border: 1px solid rgba(167, 119, 227, 0.22);
    border-radius: var(--border-radius-md);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgba(167, 119, 227, 0.08);
}

.results-header>span:first-of-type,
.results-header>span:not(.results-count) {
    background: linear-gradient(135deg, #e2c8ff 0%, #a777e3 60%, #6e8efb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 1px 12px rgba(167, 119, 227, 0.25);
}

.results-header i {
    color: var(--accent-color);
    font-size: 0.95rem;
    filter: drop-shadow(0 0 6px rgba(167, 119, 227, 0.5));
}

.results-header .results-count {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}

:root {
    --bg-main: #09090b;
    --bg-sidebar: rgba(16, 16, 20, 0.4);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --bg-card: rgba(30, 30, 35, 0.5);
    --text-primary: #f8f8f8;
    --text-secondary: #a1a1aa;
    --accent-color: var(--brand-accent, #a777e3);
    --accent-gradient: var(--brand-gradient, linear-gradient(135deg, #6e8efb, #a777e3));
    --border-color: rgba(255, 255, 255, 0.08);
    --border-radius-sm: var(--radius-sm, 12px);
    --border-radius-md: var(--radius-md, 16px);
    --border-radius-lg: var(--radius-lg, 24px);
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    position: fixed;
    inset: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-x pan-y;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family);
}

/* Immersive Background Glow */
body::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.15) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    animation: drift 15s ease-in-out infinite alternate;
}

body::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, rgba(110, 142, 251, 0.12) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    animation: drift 20s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(5%, 5%) scale(1.1);
    }
}

/* App Layout */
#app {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Sidebar with Glassmorphism */
.sidebar {
    width: 260px;
    min-width: 260px;
    flex-shrink: 0;
    background-color: var(--bg-sidebar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 20px 18px;
    transition: width var(--transition-speed) ease;
    z-index: 50;
    overflow: hidden;
    animation: sidebarIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sidebarIn {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 4px;
    margin-bottom: 30px;
    padding-left: 4px;
}

/* ── Animated brand logo ── */
.brand-logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    cursor: pointer;
    user-select: none;
    animation: brandIntro 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-mark {
    display: none;
}

.sidebar-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(90deg, #f6f1ff 0%, #d9c6ff 50%, #f6f1ff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: background-position 0.6s ease;
}

.brand-logo:hover h2 {
    animation: brandTextShine 1.6s linear infinite;
}

@keyframes brandTextShine {
    to {
        background-position: 200% center;
    }
}

.brand-dot {
    -webkit-text-fill-color: #a777e3;
    color: #a777e3;
    display: inline-block;
    animation: dotPulse 2.4s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        opacity: 1;
        transform: translateY(0);
    }

    50% {
        opacity: 0.55;
        transform: translateY(-1px);
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {

    .sidebar,
    .brand-logo,
    .brand-mark::after,
    .brand-thread,
    .brand-node,
    .brand-dot,
    .nav-item,
    .account-avatar::before {
        animation: none !important;
    }

    .brand-thread {
        stroke-dashoffset: 0 !important;
    }

    .brand-node {
        transform: scale(1) !important;
    }
}

.icon-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-speed);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transform: scale(1.05);
}

.create-btn {
    display: block;
    background: var(--accent-gradient);
    color: #fff;
    text-decoration: none;
    padding: 14px;
    border-radius: 30px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 32px;
    border: none;
    transition: all var(--transition-speed);
    box-shadow: 0 4px 15px rgba(167, 119, 227, 0.3);
    position: relative;
    overflow: hidden;
}

.create-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shine 3s infinite;
}

.super-create-btn {
    background: linear-gradient(135deg, #a777e3 0%, #7c5ce7 50%, #6e8efb 100%);
    background-size: 200% 200%;
    animation: superGradientShift 6s ease infinite;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 13px 18px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow:
        0 4px 16px rgba(167, 119, 227, 0.35),
        0 0 0 1px rgba(167, 119, 227, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.super-create-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 4s ease-in-out infinite;
}

.super-create-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 8px 28px rgba(167, 119, 227, 0.5),
        0 0 0 1px rgba(167, 119, 227, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.super-create-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 2px 10px rgba(167, 119, 227, 0.3),
        0 0 0 1px rgba(167, 119, 227, 0.2);
}

/* Premium Create Dropdown styling */
.create-dropdown-wrapper {
    position: relative;
    margin-bottom: 28px;
    z-index: 110 !important;
}

.super-create-btn .create-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 7px;
    font-size: 0.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.super-create-btn:hover .create-btn-icon {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}

.super-create-btn .create-chevron {
    font-size: 0.7em;
    margin-left: auto;
    opacity: 0.7;
    transition: transform var(--transition-speed) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.super-create-btn.active .create-chevron {
    transform: rotate(180deg);
}

.create-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(18, 16, 26, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(167, 119, 227, 0.2);
    border-radius: 16px;
    z-index: 200;
    padding: 8px;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 30px rgba(167, 119, 227, 0.08);
    display: none;
    animation: dropdownReveal 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    transform-origin: top center;
}

@keyframes dropdownReveal {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.create-dropdown .dropdown-item {
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.25s ease;
    position: relative;
}

.create-dropdown .dropdown-item .dropdown-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.create-dropdown .dropdown-item .dropdown-icon-wrap.purple {
    background: rgba(167, 119, 227, 0.12);
    border: 1px solid rgba(167, 119, 227, 0.2);
}

.create-dropdown .dropdown-item .dropdown-icon-wrap.purple i {
    color: #c9a0f5;
    font-size: 1rem;
}

.create-dropdown .dropdown-item .dropdown-text {
    display: flex;
    align-items: center;
    min-width: 0;
}

.create-dropdown .dropdown-item .dropdown-text .dropdown-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: color 0.25s ease;
}

.create-dropdown .dropdown-item:hover {
    background: rgba(167, 119, 227, 0.1);
}

.create-dropdown .dropdown-item:hover .dropdown-icon-wrap.purple {
    background: rgba(167, 119, 227, 0.22);
    border-color: rgba(167, 119, 227, 0.4);
    transform: scale(1.05);
}

.create-dropdown .dropdown-item:hover .dropdown-label {
    color: #e2d0ff;
}

.create-dropdown .dropdown-item .dropdown-arrow {
    margin-left: auto;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.15);
    transition: all 0.25s ease;
}

.create-dropdown .dropdown-item:hover .dropdown-arrow {
    color: rgba(167, 119, 227, 0.6);
    transform: translateX(3px);
}

@keyframes superGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes shine {
    100% {
        left: 200%;
    }
}

.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(167, 119, 227, 0.5);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 32px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    font-weight: 500;
    border: 1px solid transparent;
    overflow: hidden;
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.25s ease;
    /* staggered entrance */
    animation: navItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sidebar-nav .nav-item:nth-child(1) {
    animation-delay: 0.06s;
}

.sidebar-nav .nav-item:nth-child(2) {
    animation-delay: 0.12s;
}

.sidebar-nav .nav-item:nth-child(3) {
    animation-delay: 0.18s;
}

@keyframes navItemIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Animated left indicator bar */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #a777e3, #6e8efb);
    box-shadow: 0 0 10px rgba(167, 119, 227, 0.6);
    transition: height 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}

.nav-item.active {
    background: linear-gradient(100deg, rgba(167, 119, 227, 0.16), rgba(110, 142, 251, 0.05));
    color: var(--text-primary);
    border-color: rgba(167, 119, 227, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nav-item.active::before {
    height: 58%;
}

.nav-item.active i {
    color: #c9a4ff;
    transform: scale(1.1);
    filter: drop-shadow(0 0 6px rgba(167, 119, 227, 0.5));
}

.nav-item:hover:not(.active) {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    transform: translateX(5px);
}

.nav-item:hover:not(.active)::before {
    height: 36%;
}

.nav-item:hover:not(.active) i {
    transform: scale(1.15) rotate(-6deg);
    color: #c9a4ff;
}

.recent-chats {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.recent-chats::-webkit-scrollbar {
    width: 5px;
}

.recent-chats::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.28);
    border-radius: 6px;
}

.recent-chats::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 119, 227, 0.5);
}

.recent-chats h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 700;
    margin-bottom: 14px;
    padding-left: 2px;
}

.recent-chats h3 i {
    font-size: 0.72rem;
    color: #b98cf0;
    opacity: 0.9;
}

.chat-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-chat-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 10px 10px 12px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 3px;
    overflow: hidden;
    /* Entrance animation */
    animation: sidebar-chat-in 0.35s ease both;
}

@keyframes sidebar-chat-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Accent bar that grows on hover / active */
.sidebar-chat-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #a777e3, #6e8efb);
    transition: height 0.22s ease;
}

.sidebar-chat-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.07);
    transform: translateX(2px);
}

.sidebar-chat-item:hover::before {
    height: 40%;
}

.sidebar-chat-item.active {
    background: linear-gradient(100deg, rgba(167, 119, 227, 0.16), rgba(110, 142, 251, 0.06));
    border-color: rgba(167, 119, 227, 0.3);
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sidebar-chat-item.active::before {
    height: 62%;
}

.sidebar-chat-item img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(167, 119, 227, 0.35);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.sidebar-chat-item:hover img,
.sidebar-chat-item.active img {
    border-color: rgba(167, 119, 227, 0.7);
}

.sidebar-chat-item:hover img {
    transform: scale(1.05);
}

.chat-item-info {
    flex: 1;
    min-width: 0;
}

.chat-item-name {
    font-weight: 700;
    font-size: 0.85rem;
    color: #f2ecfa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.sidebar-chat-item.active .chat-item-name {
    color: #e2ccff;
}

.chat-item-last {
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
    opacity: 0.85;
}

.delete-chat-btn {
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease !important;
}

.delete-chat-btn:hover {
    transform: scale(1.15);
    color: #ff6b6b !important;
}

/* Sidebar Account Shell */
.sidebar-account-shell {
    position: relative;
    margin-top: 12px;
}

.sidebar-account-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    border-radius: 18px;
    padding: 12px 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.22s ease;
    text-align: left;
}

.sidebar-account-toggle:hover {
    background: rgba(167, 119, 227, 0.09);
    border-color: rgba(167, 119, 227, 0.22);
    transform: translateY(-1px);
}

.account-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    color: white;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(167, 119, 227, 0.25);
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Rotating conic glow ring around the avatar */
.account-avatar::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #a777e3, #6e8efb, #a777e3, #6e8efb, #a777e3);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: avatarRing 4s linear infinite;
}

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

.sidebar-account-toggle:hover .account-avatar {
    transform: scale(1.06);
}

.sidebar-account-toggle:hover .account-avatar::before {
    opacity: 0.9;
}

/* Loom Plus users get a diamond badge with a premium gradient */
.account-avatar.plus-avatar {
    background: linear-gradient(135deg, #7f5bff, #b06cff);
    box-shadow: 0 8px 20px rgba(176, 108, 255, 0.4);
}

.account-avatar.plus-avatar i {
    font-size: 1rem;
    color: #fff;
}

/* =====================================================================
   LOOM PLUS — Premium account card treatment
   ===================================================================== */

/* Avatar wrapper so the crown can sit on the avatar corner */
.account-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}

/* Gold crown badge — sits on the avatar's corner, hidden until .plus */
.account-plus-crown {
    display: none;
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    place-items: center;
    background: linear-gradient(135deg, #ffe27a 0%, #ffb43d 45%, #ff8f1f 100%);
    box-shadow: 0 2px 7px rgba(255, 150, 30, 0.55), 0 0 0 2px rgba(24, 18, 10, 0.95);
    z-index: 3;
}

.account-plus-crown i {
    font-size: 0.55rem;
    color: #3a2600;
}

.sidebar-account-shell.plus .account-plus-crown {
    display: grid;
    animation: plusCrownPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes plusCrownPop {
    from {
        opacity: 0;
        transform: scale(0) rotate(-25deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Premium gold-tinted toggle: animated gradient border + soft aura */
.sidebar-account-shell.plus .sidebar-account-toggle {
    position: relative;
    background:
        linear-gradient(rgba(24, 18, 10, 0.92), rgba(24, 18, 10, 0.92)) padding-box,
        linear-gradient(135deg, #ffd970, #b06cff, #6e8efb, #ffd970) border-box;
    background-size: auto, 300% 300%;
    border: 1px solid transparent;
    box-shadow:
        0 8px 26px rgba(176, 108, 255, 0.22),
        0 0 0 1px rgba(255, 215, 120, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: plusBorderFlow 6s ease infinite;
}

@keyframes plusBorderFlow {
    0% {
        background-position: 0% 50%, 0% 50%;
    }

    50% {
        background-position: 0% 50%, 100% 50%;
    }

    100% {
        background-position: 0% 50%, 0% 50%;
    }
}

.sidebar-account-shell.plus .sidebar-account-toggle:hover {
    transform: translateY(-1px);
    box-shadow:
        0 12px 32px rgba(176, 108, 255, 0.35),
        0 0 18px rgba(255, 200, 90, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Slow-drifting aura behind the whole card */
.sidebar-account-shell.plus .sidebar-account-toggle::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(120% 140% at 15% 0%, rgba(255, 210, 110, 0.16), transparent 55%);
    pointer-events: none;
    opacity: 0.9;
    z-index: 0;
}

.sidebar-account-shell.plus .account-avatar-wrap,
.sidebar-account-shell.plus .account-copy,
.sidebar-account-shell.plus .account-chevron {
    position: relative;
    z-index: 1;
}

/* Plus avatar: keep the original diamond gradient/texture */
.sidebar-account-shell.plus .account-avatar {
    background: linear-gradient(135deg, #7f5bff, #b06cff);
    box-shadow: 0 8px 20px rgba(176, 108, 255, 0.4);
}

.sidebar-account-shell.plus .account-avatar::before {
    background: conic-gradient(from 0deg, #ffd970, #b06cff, #6e8efb, #ffd970, #ffd970);
    opacity: 0.55;
    inset: -2px;
}

.sidebar-account-shell.plus .sidebar-account-toggle:hover .account-avatar::before {
    opacity: 1;
}

.sidebar-account-shell.plus .account-avatar i {
    animation: plusGemShine 2.6s ease-in-out infinite;
}

@keyframes plusGemShine {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 220, 130, 0));
    }

    50% {
        transform: scale(1.12);
        filter: drop-shadow(0 0 6px rgba(255, 220, 130, 0.8));
    }
}

/* "Loom Plus" balance text gets a subtle gold shimmer */
.sidebar-account-shell.plus .account-copy .balance {
    background: linear-gradient(90deg, #ffe9a8, #ffc65c, #ffe9a8);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    animation: plusBalanceShimmer 3s linear infinite;
}

@keyframes plusBalanceShimmer {
    to {
        background-position: 200% center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sidebar-account-shell.plus .sidebar-account-toggle,
    .sidebar-account-shell.plus .account-avatar i,
    .sidebar-account-shell.plus .account-copy .balance,
    .account-plus-crown {
        animation: none !important;
    }
}


.account-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Pin this two-line stack to the avatar's height and center its contents so
       the name + balance read as vertically centered against the avatar. Without
       this the inherited line-height makes the stack as tall as (or taller than)
       the 42px avatar, leaving the glyphs looking low. */
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-height: 42px;
}

.account-copy .username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.account-copy .balance {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--text-secondary);
}

.account-chevron {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.65;
    transition: transform 0.22s ease;
}

.sidebar-account-shell.open .account-chevron {
    transform: rotate(180deg);
}

.sidebar-account-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    background: rgba(18, 16, 26, 0.97);
    border: 1px solid rgba(167, 119, 227, 0.18);
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: grid;
    gap: 6px;
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    pointer-events: none;
    transition: all 0.22s ease;
    z-index: 120;
}

.sidebar-account-shell.open .sidebar-account-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.account-menu-header {
    padding: 6px 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}

.account-menu-title {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
}

.account-menu-subtitle {
    margin-top: 4px;
    color: #d6b4ff;
    font-size: 0.88rem;
    font-weight: 600;
}

.account-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.92rem;
    font-weight: 600;
}

.account-menu-item i {
    width: 18px;
    text-align: center;
    color: #c9a0f5;
}

.account-menu-item:hover {
    background: rgba(167, 119, 227, 0.1);
    border-color: rgba(167, 119, 227, 0.18);
}

.account-menu-item.danger i,
.account-menu-item.danger {
    color: #ff8aa0;
}

.account-menu-item.danger:hover {
    background: rgba(255, 65, 108, 0.08);
    border-color: rgba(255, 65, 108, 0.16);
}

/* Public Profile Page - Redesigned Premium Responsive Layout */
.public-profile-page {
    overflow-y: auto !important;
}

.public-profile-shell {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;
    background: #09090b;
}

/* Widescreen cover banner */
.public-profile-banner {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(20, 16, 28, 0.95), rgba(9, 9, 11, 1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.public-profile-banner-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    animation: publicProfileDrift 15s ease-in-out infinite alternate;
}

.hero-glow-a {
    width: 320px;
    height: 320px;
    background: rgba(167, 119, 227, 0.3);
    top: -120px;
    left: -60px;
}

.hero-glow-b {
    width: 260px;
    height: 260px;
    background: rgba(110, 142, 251, 0.25);
    right: 5%;
    bottom: -100px;
    animation-delay: -5s;
}

@keyframes publicProfileDrift {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(30px, -20px) scale(1.1);
    }
}

.public-back-btn {
    position: absolute;
    top: 24px;
    left: 32px;
    z-index: 50;
    background: rgba(167, 119, 227, 0.1) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(167, 119, 227, 0.25) !important;
    color: #e2d0ff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Outfit', sans-serif;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.public-back-btn:hover {
    background: rgba(167, 119, 227, 0.2) !important;
    border-color: rgba(167, 119, 227, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(167, 119, 227, 0.25);
    color: #ffffff !important;
}

.public-back-btn i {
    transition: transform 0.3s ease;
}

.public-back-btn:hover i {
    transform: translateX(-4px);
}

/* Two-Column Grid */
.public-profile-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 32px;
    padding: 0 32px;
    margin-top: -80px;
    position: relative;
    z-index: 10;
}

/* Left Sidebar Column */
.public-profile-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Profile Identity Card */
.public-profile-sidebar-card {
    background: linear-gradient(180deg, rgba(20, 16, 28, 0.8) 0%, rgba(14, 11, 20, 0.95) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(167, 119, 227, 0.15);
    border-radius: 28px;
    padding: 36px 28px 28px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.public-profile-sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(167, 119, 227, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.public-profile-sidebar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 35px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 20px rgba(167, 119, 227, 0.15);
    border-color: rgba(167, 119, 227, 0.3);
}

.public-profile-avatar-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.public-profile-avatar-ring {
    width: 128px;
    height: 128px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #a777e3, #6e8efb, #ff71a2);
    background-size: 200% 200%;
    animation: avatarRingGradient 6s ease infinite;
    box-shadow: 0 12px 35px rgba(167, 119, 227, 0.35);
    transition: transform 0.4s ease;
}

.public-profile-sidebar-card:hover .public-profile-avatar-ring {
    transform: scale(1.05);
}

@keyframes avatarRingGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.public-profile-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    color: white;
    font-weight: 800;
    font-size: 2.8rem;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 4px solid #14101c;
    box-sizing: border-box;
}

.public-profile-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.public-profile-name {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-bottom: 6px;
}

.public-profile-handle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.public-profile-handle {
    color: #c9a0f5;
    font-weight: 700;
    font-size: 0.95rem;
}

.public-profile-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    background: rgba(167, 119, 227, 0.16);
    border: 1px solid rgba(167, 119, 227, 0.28);
}

.public-profile-bio {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.92rem;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
}

/* Stats 2x2 Grid */
.public-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.public-stat-card {
    padding: 16px 12px;
    border-radius: 18px;
    background: rgba(18, 14, 27, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.public-stat-card:hover {
    transform: translateY(-3px);
    background: rgba(167, 119, 227, 0.08);
    border-color: rgba(167, 119, 227, 0.25);
    box-shadow: 0 12px 28px rgba(167, 119, 227, 0.15);
}

.public-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.public-stat-label {
    display: block;
    margin-top: 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    font-weight: 700;
}

/* Membership Card */
.public-profile-plan-card {
    background: linear-gradient(135deg, rgba(22, 16, 32, 0.8), rgba(12, 9, 18, 0.8));
    border: 1px solid rgba(167, 119, 227, 0.2);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.plan-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.plan-card-kicker {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 2px;
}

.plan-card-head h2 {
    margin: 0;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
}

.plan-card-badge {
    padding: 3px 10px;
    border-radius: 99px;
    background: rgba(110, 142, 251, 0.12);
    border: 1px solid rgba(110, 142, 251, 0.26);
    color: #cddcff;
    font-size: 0.72rem;
    font-weight: 700;
}

#public-profile-plan-copy {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.5;
    margin: 0;
}

.plan-card-perks {
    display: grid;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.plan-perk {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e9e5f5;
    font-size: 0.85rem;
}

.plan-perk i {
    color: #a777e3;
    width: 16px;
    text-align: center;
}

.plan-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

.public-card-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.88rem;
    padding: 11px;
    border-radius: 12px;
}

/* Right Main Column */
.public-profile-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
}

/* Tab Bar Capsule */
.public-profile-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: rgba(18, 14, 27, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
    border-radius: 18px;
    align-self: start;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.public-profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.88rem;
    transition: all 0.22s ease;
}

.public-profile-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
}

.public-profile-tab.active {
    color: #fff;
    background: rgba(167, 119, 227, 0.16);
    border-color: rgba(167, 119, 227, 0.25);
    box-shadow: 0 4px 12px rgba(167, 119, 227, 0.1);
}

.public-profile-panels {
    width: 100%;
}

.public-profile-panel {
    display: none;
    animation: fadeTabIn 0.35s ease forwards;
}

.public-profile-panel.active {
    display: block;
}

.public-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.public-panel-card {
    background: rgba(18, 14, 27, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
}

.public-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
}

.public-panel-title i {
    color: #a777e3;
}

.public-card-list,
.public-activity-list {
    display: grid;
    gap: 12px;
}

.public-card-list--grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.public-mini-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
    transition: all 0.22s ease;
}

.public-mini-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(167, 119, 227, 0.2);
}

.public-mini-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.18), rgba(110, 142, 251, 0.12));
    border: 1px solid rgba(167, 119, 227, 0.18);
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    background-size: cover;
    background-position: center;
}

.public-mini-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.public-mini-title {
    color: #fff;
    font-weight: 700;
    font-size: 0.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-mini-subtitle {
    color: var(--text-secondary);
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.empty-mini-state {
    padding: 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9rem;
    border: 1px dashed rgba(255, 255, 255, 0.08);
}

.public-about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.public-about-item {
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.public-about-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.68rem;
    color: var(--text-secondary);
    font-weight: 700;
    margin-bottom: 6px;
}

.public-about-value {
    color: #fff;
    font-weight: 700;
    font-size: 0.96rem;
}

.public-bio-block {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 0.98rem;
}

/* ═══════════════════════════════════════════════════════════════
   USER PROFILE — Follow Button & Character Grid
   ═══════════════════════════════════════════════════════════════ */

/* Follow Button Container */
.up-follow-container {
    width: 100%;
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

.up-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    border: none;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    color: #fff;
    box-shadow: 0 4px 20px rgba(167, 119, 227, 0.35);
}

.up-follow-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.up-follow-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(167, 119, 227, 0.5);
}

.up-follow-btn:hover::before {
    opacity: 1;
}

.up-follow-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Following state */
.up-follow-btn.following {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #a1a1aa;
    box-shadow: none;
}

.up-follow-btn.following:hover {
    background: rgba(255, 65, 108, 0.12);
    border-color: rgba(255, 65, 108, 0.35);
    color: #ff416c;
    box-shadow: 0 4px 20px rgba(255, 65, 108, 0.15);
}

/* Own profile state */
.up-follow-btn.own-profile {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    cursor: default;
    box-shadow: none;
    pointer-events: none;
}

/* Follow sparkle animation */
@keyframes followSparkle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

.up-follow-btn.sparkle::after {
    content: '✨';
    position: absolute;
    font-size: 1.2rem;
    animation: followSparkle 0.6s ease-out forwards;
    pointer-events: none;
}

/* Character Grid for User Profile */
.up-char-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.up-char-card {
    background: rgba(18, 14, 27, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.up-char-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.08), transparent);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}

.up-char-card:hover {
    transform: translateY(-4px);
    border-color: rgba(167, 119, 227, 0.3);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(167, 119, 227, 0.08);
}

.up-char-card:hover::before {
    opacity: 1;
}

.up-char-card-avatar {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.15), rgba(110, 142, 251, 0.1));
}

.up-char-card-avatar-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.15), rgba(110, 142, 251, 0.1));
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
}

.up-char-card-body {
    padding: 14px 16px;
    position: relative;
    z-index: 2;
}

.up-char-card-name {
    font-weight: 700;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.up-char-card-tagline {
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 8px;
}

.up-char-card-stats {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.up-char-card-stats i {
    color: #a777e3;
    font-size: 0.7rem;
}

/* Clickable author link */
.card-creator-link,
.char-profile-author-link {
    cursor: pointer;
    transition: color 0.2s, text-decoration-color 0.2s;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
}

.card-creator-link:hover,
.char-profile-author-link:hover {
    color: #c9a0f5 !important;
    text-decoration-color: #c9a0f5;
}

/* Social card in followers/following lists */
.up-social-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
    transition: all 0.22s ease;
    cursor: pointer;
}

.up-social-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(167, 119, 227, 0.2);
}

/* Responsiveness Media Queries */
@media (max-width: 1100px) {
    .public-profile-grid {
        grid-template-columns: 1fr;
        margin-top: -60px;
        gap: 24px;
    }

    .public-profile-sidebar {
        max-width: 600px;
        width: 100%;
        margin: 0 auto;
    }

    .public-profile-main {
        padding-top: 0;
    }

    .public-profile-tabs {
        align-self: center;
    }
}

@media (max-width: 720px) {
    .public-profile-banner {
        height: 160px;
    }

    .public-profile-grid {
        padding: 0 16px;
        margin-top: -50px;
    }

    .public-back-btn {
        top: 16px;
        left: 16px;
    }

    .public-panel-grid {
        grid-template-columns: 1fr;
    }

    .public-about-grid {
        grid-template-columns: 1fr;
    }
}


.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.top-nav {
    padding: 24px 32px;
    display: flex;
    align-items: center;
    background: linear-gradient(to bottom, rgba(9, 9, 11, 0.8), transparent);
    z-index: 10;
}

.search-container {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 600px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
}

/* Hide Top Nav when chat, diary, or character profile is active to avoid pushing the UI down */
.main-content:has(#page-chat.active) .top-nav,
.top-nav:has(~ #page-chat.active),
.main-content:has(#page-diary.active) .top-nav,
.top-nav:has(~ #page-diary.active),
.main-content:has(#page-character-profile.active) .top-nav,
.top-nav:has(~ #page-character-profile.active) {
    display: none !important;
}

.search-container:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(167, 119, 227, 0.5);
    box-shadow: 0 0 20px rgba(167, 119, 227, 0.2);
}

.search-container i {
    color: var(--text-secondary);
}

.search-container input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    width: 100%;
    outline: none;
    font-size: 1rem;
    font-family: var(--font-family);
}

/* Pages */
.page {
    display: none;
    flex-grow: 1;
    overflow-y: auto;
    padding: 0 32px 32px;
}

.page.active {
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Discover Page - Premium UI */
.premium-hero {
    position: relative;
    padding: 30px 48px;
    border-radius: 24px;
    background: rgba(20, 15, 30, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(167, 119, 227, 0.2);
    overflow: hidden;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    animation: floatOrb 10s ease-in-out infinite alternate;
}

.orb-primary {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #a777e3, #6e8efb);
    top: -100px;
    left: -50px;
}

.orb-secondary {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #ff416c, #ff4b2b);
    bottom: -120px;
    right: 10%;
    animation-delay: -5s;
}

.orb-accent {
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, #00f2fe, #4facfe);
    top: 20%;
    left: 40%;
    animation-delay: -2s;
}

@keyframes floatOrb {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(30px, -30px) scale(1.2);
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(167, 119, 227, 0.15);
    border: 1px solid rgba(167, 119, 227, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #d6b4ff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-badge i {
    color: #fff;
}

.welcome-back-header {
    font-size: 3.5rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    line-height: 1.25;
    padding-top: 10px;
    margin-bottom: 16px;
    background: linear-gradient(to right, #fff, #a777e3, #6e8efb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -1px;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 0;
}

.hero-actions {
    display: flex;
    gap: 16px;
}

.glass-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: none;
    outline: none;
}

.glass-btn.primary {
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    color: #fff;
    box-shadow: 0 4px 15px rgba(167, 119, 227, 0.4);
}

.glass-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(167, 119, 227, 0.6);
}

.glass-btn.secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    backdrop-filter: blur(10px);
}

.glass-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.hero-stats {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 32px;
    background: rgba(0, 0, 0, 0.3);
    padding: 24px 32px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: #fff;
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Premium Section Headers */
.premium-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

.premium-section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
}

.premium-section-header h2 i {
    color: #a777e3;
    font-size: 1.2rem;
}

.view-all-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s;
}

.view-all-link:hover {
    color: #a777e3;
}

/* Category Filters */
.category-filters {
    display: flex;
    gap: 12px;
}

.filter-chip {
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.filter-chip.active {
    background: rgba(167, 119, 227, 0.2);
    border-color: rgba(167, 119, 227, 0.5);
    color: #d6b4ff;
    box-shadow: 0 0 15px rgba(167, 119, 227, 0.2);
}

@media (max-width: 900px) {
    .premium-hero {
        flex-direction: column;
        padding: 20px 24px;
        gap: 20px;
    }

    .hero-stats {
        width: 100%;
        justify-content: space-between;
    }

    .welcome-back-header {
        font-size: 2.5rem;
    }
}

/* ===== DISCOVER GRID — CSS Grid Layout ===== */
.character-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    justify-content: start;
    margin-top: 20px;
    padding: 0 2px;
    /* Prevent box-shadow clipping on edges */
}

@media (max-width: 1600px) {
    .character-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

@media (max-width: 1200px) {
    .character-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 1000px) {
    .character-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }
}

/* Mobile: keep a dense 2-column grid like janitor.ai instead of collapsing to 1 */
@media (max-width: 600px) {
    .character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* ===== DISCOVER CARD — Rich Info Card ===== */
.character-card {
    background: linear-gradient(168deg, #140c1f 0%, #0e0816 100%);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid rgba(180, 80, 255, 0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    animation: cardReveal 0.5s ease backwards;
    box-shadow:
        0 0 8px rgba(167, 119, 227, 0.06),
        0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Neon accent glow line at top of card */
.character-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #d946ef, #a777e3, #6e8efb, #d946ef);
    background-size: 200% 100%;
    z-index: 5;
    opacity: 0.7;
    animation: neonShift 4s linear infinite;
}

@keyframes neonShift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 200% 0%;
    }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.character-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(217, 70, 239, 0.5);
    box-shadow:
        0 0 20px rgba(167, 119, 227, 0.2),
        0 0 40px rgba(217, 70, 239, 0.08),
        0 16px 40px rgba(0, 0, 0, 0.5);
}

.character-card:hover::before {
    opacity: 1;
    height: 3px;
}

/* --- Card Title Bar --- */
.card-title-bar {
    padding: 10px 14px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(180, 80, 255, 0.1);
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.card-title-bar span {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    opacity: 0.45;
}

/* --- Card Hero Image Area — compact 5:6 ratio --- */
.card-hero-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 6;
    overflow: hidden;
    background: linear-gradient(135deg, #0d0815, #14091f);
}

.card-hero-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.character-card:hover .card-hero-wrap img {
    transform: scale(1.06);
}

/* Gradient overlay on bottom of image */
.card-hero-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to top, #0e0816 5%, rgba(14, 8, 22, 0.7) 35%, transparent 100%);
    pointer-events: none;
}

/* Stats badge overlaid on image — pink tinted like reference */
.card-stats-overlay {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.card-stat-badge {
    background: rgba(217, 70, 239, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(217, 70, 239, 0.35);
    border-radius: 6px;
    padding: 4px 9px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.card-stat-badge i {
    font-size: 0.6rem;
    color: #f0abfc;
}

/* --- Owner action toolbar (edit / delete) — frosted group, reveals on hover --- */
.card-owner-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 6px;
    padding: 4px;
    z-index: 6;
    border-radius: 12px;
    background: rgba(10, 6, 18, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
    transform-origin: top left;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.character-card:hover .card-owner-actions,
.character-card:focus-within .card-owner-actions {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.card-owner-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #f5f0ff;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.card-owner-btn:hover {
    transform: translateY(-2px);
}

.card-owner-btn:active {
    transform: translateY(0) scale(0.92);
}

.card-owner-btn.edit:hover {
    background: rgba(167, 119, 227, 0.9);
    border-color: rgba(217, 70, 239, 0.6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(167, 119, 227, 0.45);
}

.card-owner-btn.delete {
    color: #ff8a8a;
}

.card-owner-btn.delete:hover {
    background: rgba(220, 38, 38, 0.92);
    border-color: rgba(255, 74, 74, 0.6);
    color: #fff;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45);
}

/* Touch devices have no hover — keep owner actions visible but subtle */
@media (hover: none) {
    .card-owner-actions {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
}

/* --- Card Body (below image) --- */
.card-body {
    padding: 14px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 1;
    margin-top: -24px;
    flex: 1;
}

.card-creator {
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    color: #c084fc;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.2px;
}

.card-creator i {
    font-size: 0.55rem;
    color: #38bdf8;
}

/* Framed creator avatar chip (Discover cards) — carries the author's equipped
   frame so cosmetics show up in the browse grid. position:relative lets the
   .avatar-frame--* ::after ring anchor to it. */
.card-creator-avatar {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #2c2740;
}

.card-creator-avatar--initial {
    display: grid;
    place-items: center;
    font-size: 0.6rem;
    font-weight: 800;
    color: #fff;
    background-image: linear-gradient(135deg, #a777e3, #6e8efb);
}

/* Frame rings on a 20px chip need a tighter inset than the default -3px. */
.card-creator-avatar[class*="avatar-frame--"]::after {
    inset: -2px;
}

/* Keep the tiny title badge on a card compact. */
.card-creator-title {
    font-size: 0.62rem;
    padding: 1px 6px;
    margin-left: 2px;
}

/* Description snippet — expands on hover */
.card-snippet {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.62);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.1px;
    max-height: 4.5em;
    /* ~3 lines default height */
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.3s ease;
    position: relative;
}

.card-snippet-highlight {
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

/* Fade mask at bottom of truncated text */
.card-snippet::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.8em;
    background: linear-gradient(to top, #0e0816 0%, transparent 100%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 1;
}

/* On hover: expand description and remove fade */
.character-card:hover .card-snippet {
    max-height: 20em;
    /* Show much more text */
    color: rgba(255, 255, 255, 0.82);
}

.character-card:hover .card-snippet::after {
    opacity: 0;
}

/* --- Tags Section --- */
.card-tags-section {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(180, 80, 255, 0.08);
}

.card-tags-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.0rem;
    color: rgba(255, 255, 255, 0.0);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    height: 0;
    overflow: hidden;
}

.card-tags-header i {
    font-size: 0;
    color: #d946ef;
}

.card-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.card-tag {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.character-card:hover .card-tag {
    border-color: rgba(255, 255, 255, 0.14);
}

.card-tag i {
    font-size: 0.55rem;
}

/* Tag color variants — more vivid to match reference */
.card-tag.tag-gender {
    border-color: rgba(79, 172, 254, 0.35);
    color: #7dd3fc;
    background: rgba(79, 172, 254, 0.1);
}

.card-tag.tag-genre {
    border-color: rgba(217, 70, 239, 0.35);
    color: #f0abfc;
    background: rgba(217, 70, 239, 0.1);
}

.card-tag.tag-pov {
    border-color: rgba(74, 222, 128, 0.35);
    color: #86efac;
    background: rgba(74, 222, 128, 0.1);
}

.card-tag.tag-setting {
    border-color: rgba(250, 204, 21, 0.35);
    color: #fde68a;
    background: rgba(250, 204, 21, 0.1);
}

.card-tag.tag-tone {
    border-color: rgba(255, 65, 108, 0.35);
    color: #fda4af;
    background: rgba(255, 65, 108, 0.1);
}

.card-tag.tag-misc {
    border-color: rgba(167, 119, 227, 0.3);
    color: #d8b4fe;
    background: rgba(167, 119, 227, 0.08);
}

/* --- Card Footer: Token Count --- */
.card-footer-bar {
    padding: 9px 14px;
    border-top: 1px solid rgba(180, 80, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.card-footer-bar i {
    font-size: 0.6rem;
    margin-right: 4px;
    color: rgba(217, 70, 239, 0.5);
}

.card-play-hint {
    color: rgba(217, 70, 239, 0.55);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.35s ease;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.character-card:hover .card-play-hint {
    color: #f0abfc;
    gap: 7px;
}

/* --- Legacy card classes kept for compatibility --- */
.card-header {
    display: flex;
    gap: 16px;
    align-items: center;
    position: relative;
}

.card-header img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-info .name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.card-info .author {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    line-height: 1.5;
    position: relative;
}

.card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: auto;
    font-weight: 500;
}

/* Chat Page Specifics */
#page-chat {
    padding: 0;
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* Prevent the page itself from scrolling — only .chat-messages scrolls */
    /* position: relative anchors the floating #scroll-to-bottom-btn */
}

/* Floating "jump to latest" button — shown only when scrolled up from the bottom */
#scroll-to-bottom-btn {
    position: absolute;
    left: 50%;
    bottom: 140px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #a777e3, #6e3de7);
    color: #fff;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.9);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 20;
}

#scroll-to-bottom-btn.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

#scroll-to-bottom-btn:hover {
    filter: brightness(1.08);
    transform: translateX(-50%) translateY(-2px) scale(1.05);
}

#page-chat.active {
    display: flex;
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(9, 9, 11, 0.7);
    backdrop-filter: blur(16px);
    z-index: 10;
    flex-shrink: 0;
    /* Never let header get crushed */
}

.chat-character-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.chat-character-info img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(167, 119, 227, 0.55);
    box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.15), 0 4px 14px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.chat-character-info img:hover {
    box-shadow: 0 0 0 4px rgba(167, 119, 227, 0.3), 0 6px 20px rgba(167, 119, 227, 0.25);
    transform: scale(1.05);
}

.chat-character-info .details .name {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.01em;
    color: #f4eefc;
    line-height: 1.2;
}

.chat-character-info .details .by {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Live status badge under the chat title */
.chat-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 3px;
}

.chat-status .status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
    animation: status-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes status-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(52, 211, 153, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

.chat-status .status-text {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(201, 178, 240, 0.75);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 320px;
}

.chat-messages {
    flex: 1 1 0;
    min-height: 0;
    /* Critical: allows flex child to shrink below content size so scrolling works */
    padding: 32px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    scroll-behavior: smooth;
}

.message-wrapper {
    display: flex;
    gap: 16px;
    max-width: 85%;
    animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform-origin: bottom left;
}

.message-wrapper.user {
    align-self: flex-end;
    flex-direction: row-reverse;
    transform-origin: bottom right;
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.message-avatar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-avatar img,
.message-avatar .avatar {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    object-fit: cover;
    object-position: center top;
    border: 2px solid rgba(167, 119, 227, 0.35);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, border-radius 0.3s ease;
    flex-shrink: 0;
    display: block;
}

/* Text-based avatars (user initial) need a filled background and centered
   glyph — otherwise the letter floats at the top of an empty rounded box. */
.message-avatar .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1;
    text-transform: uppercase;
    box-sizing: border-box;
}


.message-wrapper:hover .message-avatar img,
.message-wrapper:hover .message-avatar .avatar {
    transform: scale(1.12) rotate(4deg);
    box-shadow: 0 6px 18px rgba(167, 119, 227, 0.3);
}

.message-content {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    padding: 16px 20px;
    border-radius: 20px;
    border-top-left-radius: 4px;
    font-size: 1rem;
    line-height: 1.75;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Keep bot prose at a comfortable reading measure (~68ch) rather than
   stretching across the full width of wide screens. */
.message-wrapper.bot .message-content {
    max-width: 68ch;
}

.message-wrapper:hover .message-content {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

.message-wrapper.user .message-content {
    background: var(--accent-gradient);
    border: none;
    border-top-left-radius: 20px;
    border-top-right-radius: 4px;
    color: #fff;
    box-shadow: 0 4px 15px rgba(167, 119, 227, 0.3);
}

.message-wrapper.user:hover .message-content {
    box-shadow: 0 8px 25px rgba(167, 119, 227, 0.6);
}

/* System Error Message Styling */
.message-wrapper.system-error {
    align-self: center;
    max-width: 90%;
    margin: 20px 0;
    transform-origin: center;
    animation: systemPop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.message-wrapper.system-error .message-content {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.10), rgba(167, 119, 227, 0.07));
    border: 1px solid rgba(220, 53, 69, 0.28);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    text-align: center;
    border-radius: 16px;
    color: #cbd5e1;
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Retry affordance on transient error notices */
.message-wrapper.system-error .system-error-actions {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.message-wrapper.system-error .system-error-retry {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 18px;
    border-radius: 20px;
    border: 1px solid rgba(167, 119, 227, 0.45);
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.18), rgba(110, 142, 251, 0.14));
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.message-wrapper.system-error .system-error-retry:hover {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.30), rgba(110, 142, 251, 0.24));
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.3);
    transform: translateY(-1px);
}

.message-wrapper.system-error .system-error-retry:active {
    transform: translateY(0);
}

.message-wrapper.system-error .message-content h3 {
    color: #ff4b2b;
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.message-wrapper.system-error .system-icon {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
}

@keyframes systemPop {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    50% {
        transform: scale(1.02) translateY(-5px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Inline Message Editing UI */
.edit-message-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 750px;
    max-width: 100%;
    margin-top: 4px;
}

.edit-message-textarea {
    width: 100%;
    min-height: 150px;
    background: rgba(10, 10, 12, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(167, 119, 227, 0.45);
    border-radius: 16px;
    color: var(--text-primary);
    padding: 16px;
    font-family: var(--font-family);
    font-size: 1rem;
    line-height: 1.6;
    resize: vertical;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.edit-message-textarea:focus {
    border-color: rgba(167, 119, 227, 0.85);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 14px rgba(167, 119, 227, 0.4);
}

.edit-actions-row {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.edit-actions-row .glass-btn {
    padding: 10px 22px;
    font-size: 0.9rem;
    border-radius: 12px;
}

.chat-input-area {
    padding: 24px 32px 32px;
    padding-bottom: max(32px, env(safe-area-inset-bottom, 32px));
    /* iPhone gesture bar */
    background: linear-gradient(transparent, rgba(9, 9, 11, 0.95) 30%);
    flex-shrink: 0;
    /* Never let this area get crushed by flex */
}

.chat-input-container {
    background: rgba(30, 30, 35, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
}

.chat-input-container:focus-within {
    border-color: rgba(167, 119, 227, 0.5);
    box-shadow: 0 10px 30px rgba(167, 119, 227, 0.2);
}

.chat-input-container textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 1.05rem;
    outline: none;
    font-family: var(--font-family);
    resize: none;
    padding-top: 10px;
    padding-bottom: 10px;
    max-height: 180px;
    overflow-y: auto;
}

/* Primary send action — echoes the brand accent so it clearly reads as
   the main action rather than a neutral grey circle. */
#send-btn {
    background: var(--accent-gradient);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    font-size: 1.05rem;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(167, 119, 227, 0.35);
}

#send-btn:hover {
    background: var(--accent-gradient);
    color: #fff;
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(167, 119, 227, 0.55);
}

/* RP Macros Bar */
.rp-macros {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    padding: 0 4px;
}

.macro-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 6px 14px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.macro-btn:hover {
    background: rgba(167, 119, 227, 0.15);
    color: #e2b3ff;
    border-color: rgba(167, 119, 227, 0.4);
    transform: translateY(-2px);
}

.chat-input-container .icon-btn {
    background: var(--text-primary);
    color: var(--bg-main);
    width: 44px;
    height: 44px;
}

.chat-input-container .icon-btn:hover {
    background: var(--accent-color);
    color: #fff;
}

.char-counter {
    font-size: 0.7rem;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.2s;
    white-space: nowrap;
    margin-right: 8px;
    user-select: none;
}

.char-counter.visible {
    opacity: 0.6;
}

.char-counter.warning {
    color: #f59e0b;
    opacity: 1;
}

.char-counter.limit {
    color: #ef4444;
    opacity: 1;
}

.voice-notice {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 10px;
    opacity: 0.45;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Typings animation for Bot */
.typing-dots {
    display: flex;
    gap: 4px;
    padding: 8px 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: var(--text-secondary);
    border-radius: 50%;
    animation: typingBot 1.4s infinite;
}

.typing-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingBot {

    0%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

/* Markdown Rich Text Styling for Chat */
.markdown-body {
    font-family: var(--font-body);
    line-height: 1.5;
}

.markdown-body p {
    margin-bottom: 0.7em;
}

.markdown-body p:last-child {
    margin-bottom: 0;
}

.markdown-body strong {
    color: var(--primary-accent);
    font-weight: 600;
}

/* Bot Actions (Asterisks) */
.message-wrapper.bot .markdown-body em {
    color: #b9a3d9;
    font-style: italic;
    /* Narration/action reads as flowing prose — no box, no border. */
    background: transparent;
    padding: 0;
    border: none;
}

/* Spoken dialogue — the line the eye should land on first. */
.message-wrapper.bot .markdown-body .rp-say {
    color: #f4eefe;
    font-style: normal;
    font-weight: 500;
}

.message-wrapper.user .markdown-body .rp-say {
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
}

/* User Actions (Asterisks) */
.message-wrapper.user .markdown-body em {
    color: #ffe9b8;
    font-style: italic;
    background: transparent;
    padding: 0;
    opacity: 0.9;
}

.markdown-body code {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
    color: #ffd700;
}

.markdown-body pre {
    background: rgba(10, 10, 12, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 0.7em;
}

.markdown-body pre code {
    background: transparent;
    padding: 0;
    color: #e2e8f0;
}

.markdown-body blockquote {
    border-left: 3px solid var(--primary-accent);
    padding-left: 10px;
    margin: 10px 0;
    color: var(--text-secondary);
    background: rgba(167, 119, 227, 0.05);
    border-radius: 0 4px 4px 0;
}

/* Scene Setter Ultimate UI */
.scene-setter-card {
    background: rgba(15, 10, 25, 0.95);
    border: 1px solid rgba(167, 119, 227, 0.3);
    border-radius: 16px;
    margin: 20px auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(167, 119, 227, 0.1) inset;
    backdrop-filter: blur(10px);
    text-align: left;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.scene-setter-header {
    text-align: center;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 16px;
}

.scene-setter-header h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.scene-setter-header h3 i {
    color: var(--primary-accent);
}

.scene-setter-header p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.scene-form-group {
    margin-bottom: 16px;
}

.scene-form-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--primary-accent);
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scene-select,
.scene-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-family: var(--font-family);
    font-size: 0.95rem;
    padding: 12px 14px;
    outline: none;
    transition: all 0.3s ease;
}

.scene-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e2b3ff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 14px top 50%;
    background-size: 10px auto;
    padding-right: 30px;
}

.scene-select:hover,
.scene-textarea:hover {
    border-color: rgba(167, 119, 227, 0.3);
}

.scene-select:focus,
.scene-textarea:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--primary-accent);
    box-shadow: 0 0 15px rgba(167, 119, 227, 0.2);
}

.scene-textarea {
    resize: none;
    height: 100px;
    line-height: 1.5;
}

.scene-select option {
    background: #1a1525;
    color: #fff;
    padding: 10px;
}

/* Premium Back Button */
#back-to-discover.glass-back-btn {
    background: rgba(20, 15, 25, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border-radius: 30px;
    padding: 8px 16px 8px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    margin-right: 16px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

#back-to-discover.glass-back-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

#back-to-discover.glass-back-btn:hover {
    background: rgba(167, 119, 227, 0.15);
    color: #fff;
    border-color: rgba(167, 119, 227, 0.4);
    box-shadow: 0 8px 20px rgba(167, 119, 227, 0.2);
    transform: translateY(-2px);
}

#back-to-discover.glass-back-btn:hover i {
    transform: translateX(-3px);
    color: var(--primary-accent);
}

/* Ultimate Scene Setter Button */
#start-scene-btn {
    background: linear-gradient(135deg, #a777e3, #6e3de7);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 16px;
    width: 100%;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(110, 61, 231, 0.3);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: 15px;
}

#start-scene-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

#start-scene-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 25px rgba(110, 61, 231, 0.5);
    background: linear-gradient(135deg, #b88bf2, #7a4aeb);
}

/* System Scenario Chat Bubble */
.message-wrapper.system-scenario {
    align-self: center;
    max-width: 90%;
    margin: 30px 0;
}

.message-wrapper.system-scenario .message-content {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.1), rgba(110, 61, 231, 0.05));
    border: 1px solid rgba(167, 119, 227, 0.4);
    text-align: center;
    color: rgba(210, 185, 255, 0.85);
    box-shadow: 0 8px 32px rgba(167, 119, 227, 0.1);
}

/* --- Premium Profile Settings UI --- */
/* ===== SEAMLESS PROFILE SETTINGS REDESIGN ===== */
.settings-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

/* Hero Card — contains avatar, name, badges all in ONE element. No gap. */
.profile-hero-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 64px 40px 32px;
    background: linear-gradient(135deg, rgba(88, 28, 180, 0.35) 0%, rgba(30, 10, 60, 0.5) 100%);
    border-bottom: 1px solid rgba(167, 119, 227, 0.15);
    flex-shrink: 0;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

/* Animated background blobs */
.hero-bg-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
    animation: orbFloat 8s ease-in-out infinite alternate;
}

.orb1 {
    width: 300px;
    height: 300px;
    background: #7b2ff7;
    top: -80px;
    left: -60px;
    animation-delay: 0s;
}

.orb2 {
    width: 200px;
    height: 200px;
    background: #a777e3;
    bottom: -80px;
    right: 20px;
    animation-delay: 2s;
}

@keyframes orbFloat {
    from {
        transform: translate(0, 0) scale(1);
    }

    to {
        transform: translate(20px, 15px) scale(1.1);
    }
}

.hero-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(167, 119, 227, 0.12);
    border: 2px solid rgba(167, 119, 227, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #a777e3;
    flex-shrink: 0;
    box-shadow: 0 0 24px rgba(167, 119, 227, 0.3);
    position: relative;
    z-index: 2;
}

.hero-info {
    position: relative;
    z-index: 2;
    flex: 1;
}

/* Premium animated back button */
.settings-back-btn {
    position: absolute;
    top: 14px;
    left: 20px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
    padding: 7px 16px 7px 10px;
    border-radius: 30px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: uppercase;
    overflow: hidden;
}

.settings-back-btn .back-arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(167, 119, 227, 0.25);
    border-radius: 50%;
    font-size: 0.7rem;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
}

.settings-back-btn:hover {
    background: rgba(167, 119, 227, 0.2);
    border-color: rgba(167, 119, 227, 0.4);
    color: #fff;
    transform: translateX(0);
    box-shadow: 0 4px 20px rgba(167, 119, 227, 0.2);
}

.settings-back-btn:hover .back-arrow-icon {
    transform: translateX(-4px);
    background: rgba(167, 119, 227, 0.5);
}

.back-label {
    letter-spacing: 1px;
}

.hero-name {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(90deg, #fff 40%, #c9a0f5);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 10px 0;
    line-height: 1;
}

.hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.hero-badge.purple {
    background: rgba(167, 119, 227, 0.2);
    border: 1px solid rgba(167, 119, 227, 0.35);
    color: #e2b3ff;
}

.hero-badge.dark {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

/* Two-column area directly below the hero — no gap */
.settings-edit-area {
    display: flex;
    gap: 20px;
    padding: 24px 28px;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Left panel: quick preview info + AI note */
.settings-left-sidebar {
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.settings-section-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.info-chips {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.ai-note {
    margin-top: auto;
    background: rgba(167, 119, 227, 0.07);
    border: 1px solid rgba(167, 119, 227, 0.2);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ai-note strong {
    color: #c9a0f5;
}

/* Right main form */
.settings-main-form {
    flex: 1;
    overflow-y: auto;
}

/* Shared glass panel */
.glass-panel {
    background: rgba(25, 20, 35, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.creation-section {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.creation-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

/* Input grid */
.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

/* ===== PREMIUM FORM GROUP ===== */
.scene-form-group {
    margin-bottom: 0;
    position: relative;
}

.scene-form-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.72rem;
    color: rgba(201, 160, 245, 0.85);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-weight: 600;
    position: relative;
    padding-left: 10px;
}

.scene-form-group label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, #a777e3, #6e3de7);
    border-radius: 3px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.scene-form-group:focus-within label {
    color: #e2b3ff;
}

.scene-form-group:focus-within label::before {
    opacity: 1;
    height: 18px;
    box-shadow: 0 0 8px rgba(167, 119, 227, 0.5);
}

/* ===== PREMIUM INPUT FIELDS ===== */
.premium-input {
    width: 100%;
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(167, 119, 227, 0.12);
    color: #f0eaf8;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 0.93rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.03);
    letter-spacing: 0.2px;
}

.premium-input::placeholder {
    color: rgba(161, 161, 170, 0.4);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.3px;
}

.premium-input:hover {
    border-color: rgba(167, 119, 227, 0.25);
    background: rgba(18, 12, 30, 0.8);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(167, 119, 227, 0.06);
}

.premium-input:focus {
    outline: none;
    border-color: rgba(167, 119, 227, 0.55);
    background: rgba(20, 14, 35, 0.95);
    box-shadow:
        0 0 0 3px rgba(167, 119, 227, 0.1),
        0 0 20px rgba(167, 119, 227, 0.08),
        inset 0 1px 3px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.premium-input.textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.65;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 227, 0.3) transparent;
}

.premium-input.textarea::-webkit-scrollbar {
    width: 5px;
}

.premium-input.textarea::-webkit-scrollbar-track {
    background: transparent;
}

.premium-input.textarea::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.25);
    border-radius: 10px;
}

.premium-input.select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a777e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    cursor: pointer;
    padding-right: 42px;
}

.premium-input.select:hover {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a0f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

.premium-input.select option {
    background: #1a1228;
    color: #f0eaf8;
    padding: 8px;
}

/* Date input special styling */
.premium-input[type="date"] {
    color-scheme: dark;
    position: relative;
}

.premium-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) saturate(3) hue-rotate(230deg);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.premium-input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ===== PREMIUM SAVE BUTTON ===== */
.ultimate-save-btn {
    width: 100%;
    background: linear-gradient(135deg, #a777e3 0%, #7b44d4 50%, #6e3de7 100%);
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: 14px;
    padding: 18px 24px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 8px 25px rgba(110, 61, 231, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    animation: btnGradientShift 4s ease infinite;
    font-family: 'Inter', sans-serif;
}

@keyframes btnGradientShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.ultimate-save-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.ultimate-save-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow:
        0 14px 35px rgba(110, 61, 231, 0.45),
        0 0 40px rgba(167, 119, 227, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ultimate-save-btn:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow:
        0 6px 18px rgba(110, 61, 231, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ultimate-save-btn .btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
}

.ultimate-save-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.08) 70%,
            transparent 100%);
    transform: skewX(-25deg);
    z-index: 1;
    transition: none;
}

.ultimate-save-btn:hover::before {
    animation: premiumShimmer 2s ease infinite;
}

@keyframes premiumShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* ===== ENHANCED GLASS PANEL FOR FORM ===== */
.settings-main-form.glass-panel {
    background: linear-gradient(170deg,
            rgba(30, 22, 48, 0.65) 0%,
            rgba(20, 15, 35, 0.7) 100%);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(167, 119, 227, 0.1);
    border-radius: 18px;
    padding: 30px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 1px 0 rgba(167, 119, 227, 0.06) inset;
    position: relative;
}

.settings-main-form.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(167, 119, 227, 0.2) 30%,
            rgba(167, 119, 227, 0.3) 50%,
            rgba(167, 119, 227, 0.2) 70%,
            transparent);
    border-radius: 18px 18px 0 0;
}

/* Success toast */
.success-toast {
    margin-top: 18px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08), rgba(39, 174, 96, 0.12));
    border: 1px solid rgba(46, 204, 113, 0.25);
    color: #2ecc71;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    display: none;
    animation: slideUpFade 0.4s ease forwards;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(46, 204, 113, 0.08);
}

@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SETTINGS TAB NAVIGATION ===== */
.settings-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(15, 12, 25, 0.5);
    padding: 0 28px;
    flex-shrink: 0;
}

.settings-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 22px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    letter-spacing: 0.3px;
    position: relative;
}

.settings-tab:hover {
    color: #e2b3ff;
    background: rgba(167, 119, 227, 0.05);
}

.settings-tab.active {
    color: #e2b3ff;
    border-bottom-color: #a777e3;
}

.settings-tab .orb-icon-svg {
    flex-shrink: 0;
}

/* Tab content panels */
.settings-tab-content {
    display: none;
    animation: fadeTabIn 0.35s ease forwards;
}

.settings-tab-content.active {
    display: block;
}

@keyframes fadeTabIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== ORB BADGE IN HERO ===== */
.hero-badge.orb-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.2), rgba(110, 61, 231, 0.15));
    border: 1px solid rgba(167, 119, 227, 0.35);
    color: #e2b3ff;
}

.hero-badge.gold {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: #ffd700;
}

.orb-icon-svg {
    display: inline-block;
    vertical-align: middle;
}

/* Orb pulse animation */
.orb-pulse {
    animation: orbPulse 2.5s ease-in-out infinite;
}

@keyframes orbPulse {

    0%,
    100% {
        filter: drop-shadow(0 0 4px rgba(167, 119, 227, 0.4));
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(167, 119, 227, 0.7));
        transform: scale(1.05);
    }
}

/* ===== SUBSCRIPTIONS GRID ===== */
.sub-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 24px 28px;
}

/* Base subscription card */
.sub-card {
    background: rgba(25, 20, 35, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 26px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sub-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* --- Orb Balance Card --- */
.orb-balance-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(30, 20, 50, 0.8), rgba(15, 10, 30, 0.9));
    border: 1px solid rgba(167, 119, 227, 0.15);
}

.sub-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.orb-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(167, 119, 227, 0.1);
    border: 1px solid rgba(167, 119, 227, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sub-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.sub-card-subtitle {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 2px 0 0 0;
}

.orb-balance-display {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
}

.orb-balance-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e2b3ff, #a777e3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
}

.orb-balance-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Quota section */
.orb-quota-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
}

.quota-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.quota-bar {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
}

.quota-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #a777e3, #6e8efb);
    border-radius: 10px;
    transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.quota-hint {
    font-size: 0.78rem;
    color: rgba(161, 161, 170, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* --- Plan Card --- */
.plan-card {
    text-align: center;
}

.plan-card-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(110, 142, 251, 0.12);
    border: 1px solid rgba(110, 142, 251, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #6e8efb;
}

.sub-plan-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
}

.sub-plan-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li i {
    color: #2ecc71;
    font-size: 0.8rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.plan-features li.muted {
    opacity: 0.45;
}

.plan-features li.muted i {
    color: #ff416c;
}

.sub-upgrade-btn {
    width: 100%;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #1a1525;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.25);
    font-family: var(--font-family);
}

.sub-upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.4);
}

/* --- Premium Preview Card --- */
.premium-preview-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.15);
    background: linear-gradient(160deg, rgba(40, 30, 10, 0.6), rgba(25, 18, 35, 0.8));
}

.premium-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
    animation: premiumGlowPulse 4s ease-in-out infinite alternate;
}

@keyframes premiumGlowPulse {
    from {
        opacity: 0.5;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1.1);
    }
}

.premium-card-inner {
    position: relative;
    z-index: 2;
}

.premium-card-header {
    text-align: center;
    margin-bottom: 16px;
}

.premium-crown-icon {
    font-size: 2rem;
    color: #ffd700;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
}

.premium-card-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffd700;
    margin: 0 0 4px 0;
}

.premium-price {
    font-size: 0.9rem;
    color: rgba(255, 215, 0, 0.6);
    margin: 0;
    font-weight: 500;
}

.premium-features li i {
    color: #ffd700;
}


/* ===== Custom Confirm Modal ===== */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 5, 12, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal {
    background: linear-gradient(160deg, rgba(30, 22, 50, 0.95), rgba(18, 14, 28, 0.98));
    border: 1px solid rgba(167, 119, 227, 0.25);
    border-radius: 20px;
    padding: 36px 32px 28px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(167, 119, 227, 0.15);
    transform: scale(0.9) translateY(15px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confirm-overlay.active .confirm-modal {
    transform: scale(1) translateY(0);
}

.confirm-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(167, 119, 227, 0.12);
    border: 1px solid rgba(167, 119, 227, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #c9a0f5;
    transition: all 0.3s ease;
}

.confirm-icon-wrap.has-avatar {
    width: 86px;
    height: 86px;
    background: linear-gradient(135deg, #a777e3 0%, #6c5ce7 100%);
    padding: 3px;
    border: none;
    box-shadow: 0 0 25px rgba(167, 119, 227, 0.4), 0 0 50px rgba(167, 119, 227, 0.15);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: visible;
    position: relative;
    box-sizing: border-box;
}

.modal-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #140e20;
    box-sizing: border-box;
}

.confirm-icon-wrap.has-avatar::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #00b894, #00decb);
    border: 2px solid #140e20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: white;
    box-shadow: 0 4px 10px rgba(0, 184, 148, 0.4);
    animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes modalPop {
    from {
        transform: scale(0.7);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes badgePop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.confirm-modal h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
}

.confirm-modal p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 28px;
}

.confirm-modal .highlight-name {
    color: #d6b4ff;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(214, 180, 255, 0.2);
}

.confirm-actions {
    display: flex;
    gap: 10px;
}

.confirm-btn {
    flex: 1;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.confirm-btn:active {
    transform: scale(0.97) translateY(0);
}

.confirm-btn.cancel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.confirm-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.confirm-btn.danger {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    box-shadow: 0 4px 16px rgba(231, 76, 60, 0.3);
}

.confirm-btn.danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(231, 76, 60, 0.5);
}

.confirm-btn.primary {
    background: linear-gradient(135deg, #a777e3, #6c5ce7);
    color: white;
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.35);
}

.confirm-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(167, 119, 227, 0.5);
}

/* ===== Featured Soul character picker ===== */
.feature-pick-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 18px 0 4px;
    max-height: 280px;
    overflow-y: auto;
    text-align: left;
}

.feature-pick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(167, 119, 227, 0.2);
    background: rgba(167, 119, 227, 0.06);
    color: #ece8f5;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.feature-pick-item:hover {
    background: rgba(167, 119, 227, 0.14);
    border-color: rgba(167, 119, 227, 0.45);
    transform: translateY(-1px);
}

.feature-pick-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.feature-pick-name {
    flex: 1 1 auto;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feature-pick-item i {
    color: rgba(201, 160, 245, 0.7);
    font-size: 0.85rem;
}

/* ===== Scene Shift Feature ===== */
.scene-shift-macro {
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
}

.scene-shift-macro:hover {
    background: rgba(255, 193, 7, 0.1) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffc107 !important;
}

.her-turn-macro {
    border: 1px solid rgba(236, 72, 153, 0.2) !important;
}

.her-turn-macro:hover {
    background: rgba(236, 72, 153, 0.1) !important;
    border-color: rgba(236, 72, 153, 0.4) !important;
    color: #f472b6 !important;
}

.scene-shift-modal {
    max-width: 520px;
}

.scene-chips-section {
    text-align: left;
    margin-top: 16px;
}

.chip-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.chip-label i {
    color: #a777e3;
    margin-right: 4px;
}

.scene-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.scene-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.scene-chip:hover {
    background: rgba(167, 119, 227, 0.1);
    border-color: rgba(167, 119, 227, 0.3);
    color: #e2b3ff;
}

.scene-chip.active {
    background: rgba(167, 119, 227, 0.2);
    border-color: rgba(167, 119, 227, 0.5);
    color: #fff;
    box-shadow: 0 0 12px rgba(167, 119, 227, 0.2);
}

/* ===== Quick Action Split-Button ===== */
.action-btn-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    border-radius: 10px;
    overflow: visible;
}

.action-main-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.action-toggle-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: none;
    color: var(--text-secondary);
    padding: 0 8px;
    height: 100%;
    cursor: pointer;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-toggle-btn i {
    transition: transform 0.25s ease;
    font-size: 0.7rem;
}

.action-toggle-btn.menu-open i {
    transform: rotate(180deg);
}

.action-toggle-btn:hover,
.action-toggle-btn.menu-open {
    background: rgba(167, 119, 227, 0.18);
    color: #c9a0f5;
}

.quick-action-hover-menu {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    background: linear-gradient(160deg, rgba(28, 19, 42, 0.96), rgba(16, 11, 26, 0.96));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(167, 119, 227, 0.32);
    border-radius: 18px;
    padding: 12px 12px 14px;
    width: 300px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(167, 119, 227, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.94);
    transform-origin: bottom left;
    transition: opacity 0.25s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.25s;
    z-index: 200;
    pointer-events: none;
}

.quick-action-hover-menu.menu-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Header */
.qa-menu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #d9c2ff;
    padding: 0 4px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(167, 119, 227, 0.16);
}

.qa-menu-header i {
    font-size: 0.85rem;
    color: #b98cf0;
    filter: drop-shadow(0 0 6px rgba(167, 119, 227, 0.6));
    animation: qa-sparkle 2.4s ease-in-out infinite;
}

@keyframes qa-sparkle {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.9;
    }

    50% {
        transform: scale(1.15) rotate(10deg);
        opacity: 1;
    }
}

.qa-menu-scroll {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;
    margin-right: -4px;
}

.qa-menu-scroll::-webkit-scrollbar {
    width: 6px;
}

.qa-menu-scroll::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.35);
    border-radius: 6px;
}

.qa-group-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(201, 160, 245, 0.6);
    font-weight: 700;
    padding: 8px 4px 6px;
}

.qa-chip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.hover-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    cursor: pointer;
    color: #ece4f8;
    line-height: 1;
    text-align: left;
    overflow: hidden;
    position: relative;
    transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    /* Staggered entrance */
    opacity: 0;
    transform: translateY(6px) scale(0.96);
}

.menu-open .hover-chip {
    animation: qa-chip-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes qa-chip-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Cascade delay across the whole tray */
.menu-open .hover-chip:nth-child(1) {
    animation-delay: 0.02s;
}

.menu-open .hover-chip:nth-child(2) {
    animation-delay: 0.05s;
}

.menu-open .hover-chip:nth-child(3) {
    animation-delay: 0.08s;
}

.menu-open .hover-chip:nth-child(4) {
    animation-delay: 0.11s;
}

.menu-open .hover-chip:nth-child(5) {
    animation-delay: 0.14s;
}

.menu-open .hover-chip:nth-child(6) {
    animation-delay: 0.17s;
}

.menu-open .hover-chip:nth-child(7) {
    animation-delay: 0.20s;
}

.menu-open .hover-chip:nth-child(8) {
    animation-delay: 0.23s;
}

.qa-emoji {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.qa-label {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hover-chip:hover,
.hover-chip:active,
.hover-chip:focus-visible {
    background: rgba(167, 119, 227, 0.22);
    border-color: rgba(167, 119, 227, 0.55);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(167, 119, 227, 0.3);
    outline: none;
}

.hover-chip:hover .qa-emoji {
    transform: scale(1.25) rotate(-6deg);
}

/* Little shine sweep on hover */
.hover-chip::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    transform: skewX(-18deg);
    transition: left 0.5s ease;
    pointer-events: none;
}

.hover-chip:hover::after {
    left: 130%;
}

/* Tap feedback ripple when inserted */
.hover-chip.qa-inserted {
    animation: qa-pop 0.4s ease;
}

@keyframes qa-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(0.9);
        background: rgba(167, 119, 227, 0.5);
    }

    100% {
        transform: scale(1);
    }
}

/* ===== System Scenario Banner ===== */
.scenario-banner {
    background: linear-gradient(135deg, rgba(110, 61, 231, 0.12), rgba(167, 119, 227, 0.08)) !important;
    border: 1px solid rgba(167, 119, 227, 0.35) !important;
    border-left: 3px solid rgba(167, 119, 227, 0.7) !important;
    border-radius: 12px !important;
    font-family: 'Georgia', 'Times New Roman', serif !important;
    color: rgba(210, 185, 255, 0.85) !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
    letter-spacing: 0.02em;
}

/* Headings inside the banner */
.scenario-banner h1,
.scenario-banner h2,
.scenario-banner h3,
.scenario-banner strong {
    color: #e2d0ff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* The ⏩ SCENE SHIFT title specifically */
.scenario-banner p:first-child strong,
.scenario-banner>p>strong:first-child {
    font-size: 0.8rem !important;
}

/* ===== Mobile Responsive ===== */

/* Hamburger toggle — hidden on desktop */
.mobile-menu-btn {
    display: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 1.1rem;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mobile-menu-btn:hover {
    background: rgba(167, 119, 227, 0.15);
    color: #c9a0f5;
}

/* Sidebar Overlay Backdrop — hidden on desktop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.sidebar-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 768px) {

    /* ---- Sidebar Drawer ---- */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        min-width: unset;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 100;
        box-shadow: none;
        /* Cancel the desktop `sidebarIn` intro animation. Its `both` fill-mode
           otherwise pins transform at translateX(0), overriding the drawer's
           translateX(-100%) and leaving the sidebar parked over the chat. */
        animation: none;
    }

    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.6);
    }

    .sidebar-backdrop {
        display: block;
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* ---- Top Nav ---- */
    .top-nav {
        padding: 14px 16px;
        gap: 12px;
    }

    /* Hide Top Nav exclusively when in chat UI to save major vertical space */
    .main-content:has(#page-chat.active) .top-nav,
    .top-nav:has(~ #page-chat.active) {
        display: none !important;
    }

    .search-container {
        padding: 10px 16px;
        border-radius: 14px;
    }

    .search-container input {
        font-size: 0.9rem;
    }

    /* ---- Pages ---- */
    .page {
        padding: 0 16px 16px;
    }

    /* ---- Discover Page ---- */
    .hero-section {
        padding: 10px 0 12px;
    }

    .greeting h1 {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }

    .greeting p {
        font-size: 0.82rem;
    }

    .category-tags {
        gap: 8px;
        padding-bottom: 12px;
        /* Prevent tags from being cut off at edges */
        padding-left: 2px;
        padding-right: 2px;
    }

    .tag {
        padding: 7px 16px;
        font-size: 0.82rem;
        border-radius: 20px;
    }

    .character-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 4px;
    }

    /* Stay 2-up even on the narrowest phones, matching janitor.ai */
    @media (max-width: 400px) {
        .character-grid {
            gap: 8px;
        }
    }

    .character-card {
        border-radius: 12px;
    }

    .character-card:hover {
        transform: none;
        box-shadow:
            0 0 8px rgba(167, 119, 227, 0.06),
            0 4px 20px rgba(0, 0, 0, 0.4);
    }

    /* Compact card internals so two fit cleanly side by side */
    .card-title-bar {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    /* Touch has no hover, so overflowing titles auto-slide to reveal the tagline.
       Ping-pong: hold at start, glide to reveal the end, hold, glide back. The
       shift distance is measured per-card in JS and set via --marquee-shift. */
    .card-title-text.card-title-auto-marquee {
        animation-name: cardTitleMarquee;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
        animation-delay: 1.2s;
    }

    @keyframes cardTitleMarquee {

        0%,
        18% {
            transform: translateX(0);
        }

        50%,
        68% {
            transform: translateX(var(--marquee-shift, 0));
        }

        100% {
            transform: translateX(0);
        }
    }

    .card-body {
        padding: 10px 10px 10px;
        gap: 7px;
        margin-top: -20px;
    }

    .card-creator {
        font-size: 0.7rem;
    }

    .card-snippet {
        font-size: 0.78rem;
        line-height: 1.45;
        max-height: 4.35em;
    }

    .card-tag {
        font-size: 0.62rem;
        padding: 2px 6px;
    }

    .card-stat-badge {
        font-size: 0.64rem;
        padding: 3px 7px;
    }

    .card-footer-bar {
        padding: 7px 10px;
        font-size: 0.6rem;
        gap: 6px;
    }

    /* Tighten the CONNECT hint so it doesn't crowd the token count on narrow cards */
    .card-play-hint {
        font-size: 0.6rem;
        letter-spacing: 0.4px;
        gap: 4px;
        flex-shrink: 0;
    }

    .card-footer-bar>span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* No hover-to-expand on touch — show a stable clamped snippet instead */
    .character-card:hover .card-snippet {
        max-height: 4.35em;
        color: rgba(255, 255, 255, 0.62);
    }

    .character-card:hover .card-snippet::after {
        opacity: 1;
    }

    .character-card:hover .card-hero-wrap img {
        transform: none;
    }

    .card-header {
        gap: 12px;
    }

    .card-header img {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .card-info .name {
        font-size: 1rem;
    }

    .card-info .author {
        font-size: 0.78rem;
    }

    .card-desc {
        font-size: 0.82rem;
        line-height: 1.4;
    }

    .card-footer {
        font-size: 0.78rem;
    }

    /* ---- Chat Page ---- */
    #page-chat {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .main-content {
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .chat-header {
        padding: 10px 12px;
        gap: 8px;
        flex-shrink: 0;
    }

    .chat-header .glass-back-btn {
        padding: 6px 10px 6px 8px;
        font-size: 0.78rem;
        gap: 4px;
        margin-right: 4px;
    }

    .chat-header .glass-back-btn span {
        display: none;
        /* Hide "Hub" text on mobile to save space */
    }

    .chat-character-info img {
        width: 44px;
        height: 44px;
    }

    .chat-character-info .details .name {
        font-size: 0.9rem;
    }

    .chat-character-info .details .by {
        font-size: 0.72rem;
    }

    .chat-messages {
        padding: 10px 12px;
        gap: 8px;
        flex: 1 1 0;
        min-height: 0;
    }

    .message-wrapper {
        max-width: 88%;
        gap: 6px;
    }

    .message-content {
        padding: 8px 12px;
        font-size: 0.84rem;
        line-height: 1.5;
        border-radius: 16px;
        border-top-left-radius: 4px;
    }

    .message-wrapper.user .message-content {
        border-top-left-radius: 16px;
        border-top-right-radius: 4px;
    }

    .message-avatar img,
    .message-avatar .avatar {
        width: 36px;
        height: 36px;
    }

    /* Disable hover effects on mobile */
    .message-wrapper:hover .message-content {
        transform: none;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .message-wrapper:hover .message-avatar img,
    .message-wrapper:hover .message-avatar .avatar {
        transform: none;
    }

    .character-card:hover {
        transform: none;
    }

    /* ---- Chat Input Area ---- */
    .chat-input-area {
        padding: 8px 10px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
        background: var(--bg-main);
        z-index: 50;
        flex-shrink: 0;
    }

    #scroll-to-bottom-btn {
        right: auto;
        bottom: 160px;
        width: 38px;
        height: 38px;
    }

    .rp-macros {
        gap: 6px;
        flex-wrap: nowrap;
        overflow: visible;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 4px;
        margin-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rp-macros::-webkit-scrollbar {
        display: none;
    }

    .macro-btn,
    .action-btn-wrapper {
        font-size: 0.75rem;
        border-radius: 16px;
        flex-shrink: 0;
    }

    .macro-btn {
        padding: 6px 10px;
    }

    .action-main-btn {
        padding: 6px 10px;
    }

    .action-toggle-btn {
        padding: 0 8px;
        min-width: 28px;
    }

    .chat-input-container {
        padding: 6px 6px 6px 14px;
        border-radius: 18px;
    }

    .chat-input-container textarea {
        font-size: 16px !important;
        /* Unconditionally force 16px to prevent ALL mobile browsers from auto-zooming */
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .chat-input-container .icon-btn {
        width: 36px;
        height: 36px;
    }

    .voice-notice {
        font-size: 0.65rem;
        margin-top: 4px;
    }

    /* ---- Quick Action Hover Menu ---- */
    .quick-action-hover-menu {
        position: fixed;
        bottom: auto;
        left: 10px;
        right: 10px;
        width: auto;
        max-width: none;
        padding: 12px;
        z-index: 9000;
    }

    .qa-menu-scroll {
        max-height: 42vh;
    }

    .hover-chip {
        height: 42px;
        /* Larger touch targets on mobile */
    }

    .qa-emoji {
        font-size: 1.25rem;
    }

    .qa-label {
        font-size: 0.8rem;
    }

    /* ---- Modals ---- */
    .confirm-modal {
        max-width: 92vw !important;
        padding: 24px 20px !important;
        margin: 0 12px;
    }

    #companion-select-overlay .confirm-modal {
        padding: 0 !important;
    }

    .scene-shift-modal {
        max-width: 92vw;
    }

    .scene-chips {
        gap: 6px;
    }

    .scene-chip {
        padding: 6px 12px;
        font-size: 0.78rem;
    }

    .confirm-actions {
        gap: 10px;
    }

    .confirm-btn {
        padding: 12px 18px;
        font-size: 0.88rem;
    }

    /* ---- Settings Page ---- */
    .settings-wrapper {
        height: auto;
        overflow-y: visible;
    }

    .profile-hero-card {
        padding: 52px 20px 24px;
        gap: 16px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-avatar {
        width: 72px;
        height: 72px;
        font-size: 1.8rem;
    }

    .hero-name {
        font-size: 1.4rem;
    }

    .hero-badges {
        justify-content: center;
    }

    .settings-edit-area {
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        flex: unset;
    }

    .settings-left-sidebar {
        flex: unset;
        width: 100%;
    }

    .info-chips {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ai-note {
        margin-top: 8px;
    }

    .settings-main-form {
        overflow-y: visible;
    }

    .glass-panel {
        padding: 20px 16px;
    }

    .input-grid {
        grid-template-columns: 1fr !important;
    }

    .settings-back-btn {
        top: 10px;
        left: 12px;
        padding: 6px 12px 6px 8px;
        font-size: 0.75rem;
    }

    .settings-tab-nav {
        padding: 0 12px;
        overflow-x: auto;
    }

    .settings-tab {
        padding: 12px 16px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .sub-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 16px;
    }

    .orb-balance-number {
        font-size: 2.2rem;
    }

    .orb-hero-icon {
        width: 44px;
        height: 44px;
    }

    .orb-hero-icon .orb-icon-svg {
        width: 36px;
        height: 36px;
    }

    .scene-setter-card {
        margin: 12px;
    }

    .scene-setter-header h3 {
        font-size: 1.2rem;
    }

    /* ---- System Scenario Banners ---- */
    .message-wrapper.system-scenario {
        max-width: 100%;
    }

    .scenario-banner {
        font-size: 0.82rem !important;
    }

    /* ---- Back Button (Chat) ---- */
    #back-to-discover.glass-back-btn {
        padding: 6px 10px 6px 8px;
        font-size: 0.78rem;
        gap: 4px;
        margin-right: 4px;
    }

    /* ---- Chat textarea height limit ---- */
    .chat-input-container textarea {
        max-height: 80px;
        /* Prevent textarea from growing too tall on mobile */
    }

    /* ---- Hide voice notice on very small screens ---- */
    .voice-notice {
        display: none;
    }

    /* ---- Narrator blocks (inline styled green text) ---- */
    .message-content div[style*="4ade80"] {
        font-size: 0.82rem !important;
        padding: 8px 12px !important;
        margin: 10px 0 !important;
        line-height: 1.5 !important;
    }

    /* ---- Markdown inside messages ---- */
    .message-content p {
        margin-bottom: 0.3em;
        font-size: inherit;
    }

    .message-content p:last-child {
        margin-bottom: 0;
    }

    /* ---- Bot action text (italic highlighted) ---- */
    .message-content em {
        font-size: 0.82rem;
    }

    /* ---- Regenerate button row ---- */
    .regen-btn-row {
        margin-top: 2px;
    }

    .regen-btn-row button {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
    }
}

/* ===== Extra-small screens (< 400px) ===== */
@media (max-width: 400px) {
    .chat-header {
        padding: 8px 10px;
    }

    .chat-messages {
        padding: 6px 8px;
        gap: 6px;
    }

    .message-content {
        padding: 7px 10px;
        font-size: 0.8rem;
    }

    .chat-input-area {
        padding: 6px 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
    }

    .macro-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .greeting h1 {
        font-size: 1.4rem;
    }
}

/* ===== AI Refine Buttons ===== */
.ai-refine-btn {
    background: rgba(167, 119, 227, 0.15);
    border: 1px solid rgba(167, 119, 227, 0.3);
    color: #c9a0f5;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ai-refine-btn:hover {
    background: rgba(167, 119, 227, 0.25);
    transform: scale(1.05);
}

.ai-refine-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ===== 3-Step Scenario Wizard ===== */
.wizard-step-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
}

.wizard-step-tab {
    flex: 1;
    padding: 10px 0 8px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    border-top: 3px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.wizard-step-tab:hover {
    color: rgba(255, 255, 255, 0.55);
    border-top-color: rgba(167, 119, 227, 0.3);
}

.wizard-step-tab.active {
    color: #e2b3ff;
    border-top-color: #a777e3;
}

.wizard-step-tab.completed {
    color: rgba(255, 255, 255, 0.5);
    border-top-color: rgba(167, 119, 227, 0.6);
}

.wizard-step-content {
    display: none;
    animation: wizardFadeIn 0.35s ease forwards;
}

.wizard-step-content.active {
    display: block;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Suggestion Chips Below Textareas */
.suggest-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.suggest-chip {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.suggest-chip:hover {
    background: rgba(167, 119, 227, 0.12);
    border-color: rgba(167, 119, 227, 0.35);
    color: #e2b3ff;
}

.suggest-chip.active {
    background: rgba(167, 119, 227, 0.2);
    border-color: rgba(167, 119, 227, 0.5);
    color: #fff;
}

/* Wizard Navigation Footer */
.wizard-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 12px;
}

.wizard-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.25s ease;
}

.wizard-nav-btn.back {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.wizard-nav-btn.back:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.wizard-nav-btn.next {
    background: linear-gradient(135deg, #a777e3, #6e3de7);
    color: white;
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.3);
    margin-left: auto;
}

.wizard-nav-btn.next:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(167, 119, 227, 0.5);
}

/* Section Subtitle */
.wizard-section-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}

/* Discover Carousel */
.featured-carousel {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 227, 0.5) transparent;
    margin-bottom: 32px;
}

.featured-carousel::-webkit-scrollbar {
    height: 6px;
}

.featured-carousel::-webkit-scrollbar-track {
    background: transparent;
}

.featured-carousel::-webkit-scrollbar-thumb {
    background-color: rgba(167, 119, 227, 0.5);
    border-radius: 10px;
}

.featured-card {
    min-width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background: rgba(30, 30, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-color: rgba(167, 119, 227, 0.4);
}

.featured-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.featured-info {
    padding: 16px;
}

.featured-title {
    font-weight: 700;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 4px;
}

.featured-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
}

.section-header i {
    color: #a777e3;
}

.choice-btn:hover {
    background: rgba(74, 222, 128, 0.1) !important;
    border-color: #4ade80 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.choice-btn:active {
    transform: translateY(0);
}

/* ===== AI DIARY STYLES ===== */
#page-diary {
    position: relative;
    padding: 0;
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(167, 119, 227, 0.14), transparent 55%),
        radial-gradient(90% 70% at 85% 110%, rgba(110, 142, 251, 0.10), transparent 60%);
}

#page-diary.active {
    display: flex;
}

.diary-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    overflow-y: auto;
}

.diary-setup-card,
.diary-lock-card {
    position: relative;
    background:
        linear-gradient(180deg, rgba(30, 22, 44, 0.82), rgba(16, 12, 24, 0.9));
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(167, 119, 227, 0.22);
    border-radius: 28px;
    padding: 52px 44px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: diaryCardRise 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

/* Soft aurora glow bleeding from the top of the card */
.diary-setup-card::before,
.diary-lock-card::before {
    content: '';
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 60%;
    background: radial-gradient(50% 60% at 50% 50%, rgba(167, 119, 227, 0.22), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.diary-setup-card>*,
.diary-lock-card>* {
    position: relative;
    z-index: 1;
}

@keyframes diaryCardRise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.diary-setup-icon,
.diary-lock-icon {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b98cf0, #6e8efb);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 26px;
    font-size: 2.1rem;
    color: white;
    box-shadow:
        0 12px 40px rgba(167, 119, 227, 0.45),
        inset 0 2px 4px rgba(255, 255, 255, 0.25);
    animation: floatOrb 6s ease-in-out infinite alternate;
}

/* Pulsing halo ring around the setup/lock icon */
.diary-setup-icon::after,
.diary-lock-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(167, 119, 227, 0.35);
    animation: diaryHalo 3s ease-in-out infinite;
}

@keyframes diaryHalo {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0;
        transform: scale(1.18);
    }
}

.diary-setup-card h2,
.diary-lock-card h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #ffffff 20%, #d6b4ff 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.diary-setup-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    margin-bottom: 32px;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
}

.diary-lock-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 28px;
}

.pin-input-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.pin-box {
    width: 48px;
    height: 58px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.15s ease;
    -webkit-text-security: disc;
}

.pin-box:focus {
    border-color: #a777e3;
    box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.18), 0 6px 20px rgba(167, 119, 227, 0.28);
    background: rgba(167, 119, 227, 0.1);
    transform: translateY(-2px);
}

/* Filled PIN cell gets a subtle accent tint */
.pin-box:not(:placeholder-shown),
.pin-box.filled {
    border-color: rgba(167, 119, 227, 0.5);
    background: rgba(167, 119, 227, 0.08);
}

.pin-box.error {
    border-color: #ff416c;
    animation: pinShake 0.4s ease;
}

@keyframes pinShake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

#diary-main {
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}

.diary-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(167, 119, 227, 0.1);
    background: linear-gradient(180deg, rgba(20, 15, 30, 0.85), rgba(12, 10, 18, 0.7));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-shrink: 0;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    z-index: 5;
}

.diary-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.diary-agent-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b98cf0, #6e8efb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: white;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(167, 119, 227, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.diary-agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.diary-header-info h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: white;
    line-height: 1.2;
}

.diary-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    display: block;
    margin-top: 1px;
}

.diary-entries-feed {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    padding: 28px 32px 80px !important;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    align-items: center;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 227, 0.3) transparent;
}

.diary-entries-feed::-webkit-scrollbar {
    width: 8px;
}

.diary-entries-feed::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.28);
    border-radius: 999px;
}

.diary-entries-feed::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 119, 227, 0.45);
}

.diary-empty-state {
    text-align: center;
    padding: 72px 20px;
    color: var(--text-secondary);
    margin: auto 0;
    animation: fadeIn 0.6s ease;
}

.diary-empty-state i {
    font-size: 2.6rem;
    color: rgba(167, 119, 227, 0.55);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, rgba(167, 119, 227, 0.18), rgba(167, 119, 227, 0.04));
    border: 1px solid rgba(167, 119, 227, 0.2);
    animation: floatOrb 5s ease-in-out infinite alternate;
}

.diary-empty-state h3 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
}

.diary-empty-state p {
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 36ch;
    margin: 0 auto;
}

/* ===== AI DIARY CHAT STYLES ===== */

/* Centered date-divider pill between days */
.diary-day-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 860px;
    margin: 6px auto;
    position: relative;
}

.diary-day-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 119, 227, 0.18), transparent);
    z-index: 0;
}

.diary-day-divider-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #d7bdf5;
    background: rgba(26, 20, 38, 0.9);
    border: 1px solid rgba(167, 119, 227, 0.2);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.diary-day-divider-pill i {
    color: #a777e3;
    font-size: 0.78rem;
}

/* Exchange is a transparent group holding a user + AI row */
.diary-exchange {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    flex-shrink: 0;
}

/* A single chat row (user right, AI left) */
.diary-row {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: flex-end;
    max-width: 100%;
    animation: diaryBubbleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes diaryBubbleIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.diary-row-user {
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}

.diary-row-ai {
    flex-direction: row;
    justify-content: flex-start;
}

/* The bubble itself */
.diary-bubble {
    position: relative;
    padding: 13px 17px;
    font-size: 0.95rem;
    line-height: 1.65;
    border-radius: 20px;
    max-width: min(74%, 620px);
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* User bubble — accent gradient, right side */
.diary-bubble-user {
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    color: #fff;
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 24px rgba(110, 142, 251, 0.32);
}

.diary-entry-user-text {
    white-space: pre-wrap;
    color: #fff;
}

/* AI bubble — glass, left side */
.diary-bubble-ai {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    border-bottom-left-radius: 6px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.diary-ai-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: calc(100% - 50px);
    align-items: flex-start;
}

.diary-entry-ai-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b98cf0, #6e8efb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 5px 14px rgba(110, 142, 251, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.diary-entry-ai-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.diary-entry-ai-name {
    color: #9fb0ff;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding-left: 4px;
}

.diary-entry-ai-text {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.94rem;
    line-height: 1.75;
}

.diary-entry-ai-text p {
    margin-bottom: 10px;
}

.diary-entry-ai-text p:last-child {
    margin-bottom: 0;
}

.diary-time-tag {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 500;
    opacity: 0.6;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0 2px 2px;
}

.diary-row-ai .diary-time-tag {
    padding-left: 4px;
}

/* Hover delete button, sits outside the user bubble */
.diary-exchange-delete-btn {
    background: rgba(255, 65, 108, 0.1);
    border: 1px solid rgba(255, 65, 108, 0.25);
    color: #ff416c;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.74rem;
    align-self: center;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
    flex-shrink: 0;
}

.diary-row-user:hover .diary-exchange-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.diary-exchange-delete-btn:hover {
    background: rgba(255, 65, 108, 0.3);
    border-color: #ff416c;
    transform: scale(1.08);
}

.diary-input-area {
    padding: 16px 32px 26px;
    border-top: 1px solid rgba(167, 119, 227, 0.1);
    background: linear-gradient(0deg, rgba(20, 15, 30, 0.85), rgba(12, 10, 18, 0.55));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-shrink: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.diary-input-container {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    padding: 10px 12px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    width: 100%;
    max-width: 860px;
    position: relative;
}

.diary-input-container:focus-within {
    border-color: rgba(167, 119, 227, 0.45);
    background: rgba(167, 119, 227, 0.05);
    box-shadow: 0 0 0 3px rgba(167, 119, 227, 0.12), 0 8px 28px rgba(167, 119, 227, 0.15);
}

#diary-entry-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: 0.95rem;
    resize: none;
    outline: none;
    min-height: 40px;
    max-height: 180px;
    line-height: 1.5;
    padding: 9px 0;
    box-sizing: border-box;
}

#diary-entry-input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

/* Elevated send button inside the diary composer */
.diary-input-container #diary-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b98cf0, #6e8efb);
    border: none;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(167, 119, 227, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.diary-input-container #diary-send-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(167, 119, 227, 0.55);
    filter: brightness(1.08);
}

.diary-input-container #diary-send-btn:active {
    transform: scale(0.96);
}

/* Emoji toggle button inside the diary composer */
.diary-input-container .diary-emoji-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.65);
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.diary-input-container .diary-emoji-btn:hover {
    color: #f5c451;
    background: rgba(245, 196, 81, 0.12);
    transform: scale(1.08);
}

.diary-input-container .diary-emoji-btn[aria-expanded="true"] {
    color: #f5c451;
    background: rgba(245, 196, 81, 0.15);
}

/* Emoji picker popover */
.diary-emoji-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 8px;
    width: min(320px, calc(100vw - 48px));
    max-height: 240px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 10px;
    background: rgba(24, 18, 34, 0.98);
    border: 1px solid rgba(167, 119, 227, 0.28);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 40;
}

.diary-emoji-panel[hidden] {
    display: none;
}

.diary-emoji-item {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 6px 0;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
}

.diary-emoji-item:hover {
    background: rgba(167, 119, 227, 0.22);
    transform: scale(1.15);
}

/* Privacy note under the diary composer */
.diary-input-area .voice-notice {
    opacity: 0.5;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.diary-input-area .voice-notice::before {
    content: '\f023';
    /* fa-lock */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.68rem;
    color: #a777e3;
    opacity: 0.8;
}

/* Fix last message cut-off */
.diary-entries-feed::after {
    content: '';
    display: block;
    min-height: 20px;
    flex-shrink: 0;
}

/* Diary Settings Button */
.diary-settings-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-size: 1.05rem;
    cursor: pointer;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    margin-right: 2px;
}

.diary-settings-btn:hover {
    color: #d6b4ff;
    background: rgba(167, 119, 227, 0.12);
    border-color: rgba(167, 119, 227, 0.25);
    transform: rotate(30deg);
}

.diary-settings-btn:active {
    transform: rotate(30deg) scale(0.94);
}

/* Diary Settings Modal */
.diary-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.diary-settings-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.diary-settings-modal {
    background: rgba(20, 15, 30, 0.95);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(167, 119, 227, 0.25);
    border-radius: 24px;
    padding: 36px 32px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.35s ease;
    max-height: 85vh;
    overflow-y: auto;
}

.diary-settings-modal h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: white;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.diary-settings-modal h2 i {
    color: #a777e3;
}

.diary-avatar-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

.diary-avatar-preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    overflow: hidden;
    border: 3px solid rgba(167, 119, 227, 0.4);
    box-shadow: 0 8px 24px rgba(167, 119, 227, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    position: relative;
}

.diary-avatar-preview:hover {
    border-color: #a777e3;
    transform: scale(1.05);
}

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

.diary-avatar-preview .avatar-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    font-size: 1rem;
    border-radius: 50%;
}

.diary-avatar-preview:hover .avatar-hover-overlay {
    opacity: 1;
}

.diary-avatar-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.diary-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.diary-settings-actions button {
    flex: 1;
}

@media (max-width: 600px) {

    /* --- Diary Setup & Lock Cards --- */
    .diary-view {
        padding: 20px 16px;
    }

    .diary-setup-card,
    .diary-lock-card {
        padding: 32px 20px;
        border-radius: 20px;
    }

    .diary-setup-icon,
    .diary-lock-icon {
        width: 64px;
        height: 64px;
        font-size: 1.6rem;
        margin-bottom: 20px;
    }

    .diary-setup-card h2,
    .diary-lock-card h2 {
        font-size: 1.45rem;
    }

    .diary-setup-desc {
        font-size: 0.88rem;
        margin-bottom: 22px;
    }

    .diary-lock-subtitle {
        font-size: 0.85rem;
        margin-bottom: 18px;
    }

    /* PIN boxes — scale to fit mobile screens */
    .pin-input-group {
        gap: 8px;
    }

    .pin-box {
        width: 42px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 10px;
    }

    /* --- Diary Settings Modal --- */
    .diary-settings-modal {
        padding: 28px 20px;
        border-radius: 18px;
    }

    /* --- Diary Main View --- */
    .diary-header-bar {
        padding: 14px 16px;
    }

    .diary-agent-avatar {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .diary-header-info {
        gap: 12px;
    }

    .diary-header-info h2 {
        font-size: 1.05rem;
    }

    .diary-entries-feed {
        padding: 16px 16px 80px !important;
    }

    .diary-input-area {
        padding: 12px 16px 20px;
    }

    .diary-input-container {
        border-radius: 14px;
        padding: 10px 14px;
    }

    #diary-entry-input {
        font-size: 0.9rem;
    }

    /* --- Chat bubbles --- */
    .diary-bubble {
        max-width: 82%;
        padding: 11px 14px;
        font-size: 0.9rem;
    }

    .diary-day-divider-pill {
        font-size: 0.68rem;
        padding: 6px 13px;
    }

    .diary-entry-ai-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .diary-ai-col {
        max-width: calc(100% - 44px);
    }

    .diary-entry-ai-name {
        font-size: 0.72rem;
    }

    .diary-entry-ai-text {
        font-size: 0.88rem;
    }

    .diary-exchange-delete-btn {
        opacity: 1;
        transform: scale(1);
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    /* --- Empty state --- */
    .diary-empty-state {
        padding: 60px 16px;
    }

    .diary-empty-state i {
        font-size: 2.4rem;
        margin-bottom: 16px;
    }

    .diary-empty-state h3 {
        font-size: 1.2rem;
    }

    .diary-empty-state p {
        font-size: 0.85rem;
    }
}

/* Extra small screens (very narrow phones) */
@media (max-width: 380px) {

    .diary-setup-card,
    .diary-lock-card {
        padding: 28px 16px;
    }

    .pin-input-group {
        gap: 6px;
    }

    .pin-box {
        width: 36px;
        height: 44px;
        font-size: 1.05rem;
        border-radius: 8px;
    }

    .diary-setup-card h2,
    .diary-lock-card h2 {
        font-size: 1.3rem;
    }

    .diary-day-divider-pill {
        font-size: 0.64rem;
        padding: 5px 11px;
    }

    .diary-bubble {
        max-width: 86%;
        padding: 10px 13px;
    }
}

/* ============================================================
   CHARACTER PROFILE PAGE
   ============================================================ */

.char-profile-wrapper {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Hero Banner */
.char-profile-hero {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 40px 32px 48px;
    overflow: hidden;
}

.char-profile-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(28px) brightness(0.45) saturate(1.4);
    transform: scale(1.15);
    z-index: 0;
}

.char-profile-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 10, 14, 0.3) 0%,
            rgba(10, 10, 14, 0.6) 50%,
            rgba(10, 10, 14, 0.95) 85%,
            #0a0a0e 100%);
    z-index: 1;
}

.char-profile-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    animation: profileFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes profileFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.char-profile-avatar-ring {
    width: 140px;
    height: 140px;
    min-height: 140px;
    border-radius: 50%;
    padding: 4px;
    background: linear-gradient(135deg, #a777e3, #6e8efb, #a777e3);
    background-size: 300% 300%;
    animation: avatarRingGlow 4s ease-in-out infinite, profileFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 0 40px rgba(167, 119, 227, 0.35), 0 0 80px rgba(110, 142, 251, 0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}


@keyframes avatarRingGlow {

    0%,
    100% {
        background-position: 0% 50%;
        box-shadow: 0 0 40px rgba(167, 119, 227, 0.35), 0 0 80px rgba(110, 142, 251, 0.12);
    }

    50% {
        background-position: 100% 50%;
        box-shadow: 0 0 55px rgba(167, 119, 227, 0.5), 0 0 100px rgba(110, 142, 251, 0.2);
    }
}

.char-profile-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid #0a0a0e;
}


.char-profile-name {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ffffff 0%, #e2d0ff 50%, #a777e3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
    margin: 0;
}

.char-profile-tagline {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    max-width: 500px;
    line-height: 1.5;
    margin: 0;
}

.char-profile-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
}

.char-profile-author {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #c9a0f5;
    font-weight: 600;
}

.char-profile-author i {
    font-size: 0.7rem;
}

.char-profile-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.45);
}

.char-profile-stat i {
    font-size: 0.7rem;
}

.char-profile-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.char-profile-tags .profile-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(167, 119, 227, 0.1);
    border: 1px solid rgba(167, 119, 227, 0.2);
    color: #d6b4ff;
    letter-spacing: 0.3px;
}

.char-profile-tags .profile-tag i {
    font-size: 0.65rem;
}

/* Profile Body */
.char-profile-body {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 8px 24px 48px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.char-profile-section {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 28px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.char-profile-section:hover {
    border-color: rgba(167, 119, 227, 0.15);
    box-shadow: 0 4px 30px rgba(167, 119, 227, 0.05);
}

.char-profile-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Outfit', sans-serif;
}

.char-profile-short-lore {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.char-profile-backstory {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.85;
    white-space: pre-wrap;
    word-break: break-word;
}

.char-profile-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.char-profile-edit-btn:hover {
    background: rgba(167, 119, 227, 0.1);
    border-color: rgba(167, 119, 227, 0.3);
    color: #d6b4ff;
}

.char-profile-start-btn {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    background-size: 200% 200%;
    animation: superGradientShift 6s ease infinite;
    border: none;
    border-radius: 16px;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 8px 30px rgba(167, 119, 227, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.char-profile-start-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shine 4s ease-in-out infinite;
}

.char-profile-start-btn:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 14px 45px rgba(167, 119, 227, 0.5), 0 0 0 1px rgba(167, 119, 227, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.char-profile-start-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Profile Particles */
.char-profile-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.char-profile-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.3;
    animation: floatParticle 8s infinite ease-in-out alternate;
}

.char-profile-particles .particle:nth-child(1) {
    top: 20%;
    left: 10%;
    width: 4px;
    height: 4px;
    animation-duration: 12s;
}

.char-profile-particles .particle:nth-child(2) {
    top: 60%;
    left: 80%;
    width: 2px;
    height: 2px;
    animation-delay: -2s;
    opacity: 0.5;
}

.char-profile-particles .particle:nth-child(3) {
    top: 40%;
    left: 30%;
    width: 5px;
    height: 5px;
    animation-duration: 15s;
    background: #a777e3;
}

.char-profile-particles .particle:nth-child(4) {
    top: 80%;
    left: 20%;
    width: 3px;
    height: 3px;
    animation-delay: -5s;
}

.char-profile-particles .particle:nth-child(5) {
    top: 10%;
    left: 70%;
    width: 6px;
    height: 6px;
    animation-duration: 10s;
    background: #6e8efb;
}

.char-profile-particles .particle:nth-child(6) {
    top: 90%;
    left: 90%;
    width: 3px;
    height: 3px;
    animation-delay: -7s;
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0);
    }

    100% {
        transform: translateY(-40px) translateX(20px);
    }
}

/* Stats Row */
.char-profile-stats-row {
    display: flex;
    gap: 16px;
    width: 100%;
}

.profile-stat-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
}

.profile-stat-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.profile-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    background: rgba(167, 119, 227, 0.12);
    border: 1px solid rgba(167, 119, 227, 0.25);
    color: #a777e3;
    flex-shrink: 0;
}

.profile-stat-info {
    display: flex;
    flex-direction: column;
}

.profile-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
}

.profile-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Traits Grid */
.char-profile-traits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.profile-trait-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.profile-trait-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.profile-trait-chip i {
    font-size: 1.2rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.trait-text {
    display: flex;
    flex-direction: column;
}

.trait-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
}

.trait-desc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .char-profile-hero {
        min-height: 360px;
        padding: 32px 20px 36px;
    }

    .char-profile-avatar-ring {
        width: 110px;
        height: 110px;
        min-height: 110px;
    }


    .char-profile-name {
        font-size: 2rem;
    }

    .char-profile-tagline {
        font-size: 0.92rem;
    }

    .char-profile-body {
        padding: 8px 16px 40px;
    }

    .char-profile-section {
        padding: 20px;
    }

    .char-profile-start-btn {
        padding: 16px;
        font-size: 1.05rem;
    }
}

/* ==========================================
   UPGRADE TO LOOM+ BUTTON STYLING
   ========================================== */
.sidebar-upgrade-container {
    margin-top: 12px;
    margin-bottom: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-upgrade-btn {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.12) 0%, rgba(110, 142, 251, 0.12) 100%);
    border: 1px solid rgba(167, 119, 227, 0.25);
    border-radius: 16px;
    padding: 13px 16px;
    color: #fff;
    font-family: var(--font-family);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Iridescent shimmer overlay */
.sidebar-upgrade-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0) 70%,
            transparent 100%);
    z-index: 1;
    transition: none;
}

.sidebar-upgrade-btn:hover::before {
    left: 100%;
    transition: left 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-upgrade-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 119, 227, 0.6);
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.22) 0%, rgba(110, 142, 251, 0.22) 100%);
    box-shadow:
        0 8px 24px rgba(167, 119, 227, 0.3),
        0 0 16px rgba(110, 142, 251, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sidebar-upgrade-btn:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 2px 8px rgba(167, 119, 227, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Pulsing background radial glow */
.upgrade-btn-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(167, 119, 227, 0.4), transparent 75%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
    pointer-events: none;
}

.sidebar-upgrade-btn:hover .upgrade-btn-glow {
    opacity: 1;
    animation: upgradePulse 2s infinite alternate;
}

@keyframes upgradePulse {
    0% {
        transform: scale(0.95);
        opacity: 0.4;
    }

    100% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

/* Upgrade Icon Styles with gold/purple gradient and subtle breathing animation */
.upgrade-icon {
    font-size: 1rem;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
    transition: all 0.3s ease;
    z-index: 2;
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-2px);
    }
}

.sidebar-upgrade-btn:hover .upgrade-icon {
    transform: scale(1.2) rotate(12deg);
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.6));
    animation: none;
    /* stop float on hover since hover has its own scale/rotate */
}

.upgrade-text {
    background: linear-gradient(90deg, #ffffff, #e2d0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 2;
    letter-spacing: 0.3px;
    font-weight: 700;
    white-space: nowrap;
}

.sidebar-upgrade-btn:hover .upgrade-text {
    background: linear-gradient(90deg, #ffffff, #ffd700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.upgrade-arrow {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.sidebar-upgrade-btn:hover .upgrade-arrow {
    color: #ffd700;
    transform: translateX(4px);
}


/* =====================================================================
   LORELOOM+ UPGRADE MODAL — Premium Subscription UI
   ===================================================================== */

/* Body scroll-lock when modal is open */
body.ll-modal-open {
    overflow: hidden !important;
}

/* ── Fullscreen Overlay ── */
.ll-upgrade-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.ll-upgrade-overlay.ll-active {
    opacity: 1;
    visibility: visible;
}

/* ── Modal Container ── */
.ll-upgrade-modal {
    position: relative;
    width: 95vw;
    max-width: 1060px;
    max-height: 92vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: linear-gradient(168deg, #15121e 0%, #0e0c14 40%, #110f19 100%);
    border: 1px solid rgba(167, 119, 227, 0.12);
    border-radius: 32px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(167, 119, 227, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.35s ease;
}

.ll-upgrade-overlay.ll-active .ll-upgrade-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Custom scrollbar for the modal */
.ll-upgrade-modal::-webkit-scrollbar {
    width: 6px;
}

.ll-upgrade-modal::-webkit-scrollbar-track {
    background: transparent;
}

.ll-upgrade-modal::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.25);
    border-radius: 99px;
}

/* ── Close Button ── */
.ll-upgrade-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(30, 28, 40, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.15rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.ll-upgrade-close:hover {
    background: rgba(167, 119, 227, 0.2);
    border-color: rgba(167, 119, 227, 0.4);
    color: #fff;
    transform: rotate(90deg);
}

/* ── Banner Section ── */
.ll-upgrade-banner {
    position: relative;
    width: 100%;
    min-height: 240px;
    overflow: hidden;
    border-radius: 32px 32px 0 0;
}



.ll-upgrade-castle-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.ll-upgrade-banner-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            #15121e 0%,
            rgba(21, 18, 30, 0.92) 15%,
            rgba(21, 18, 30, 0.55) 40%,
            rgba(21, 18, 30, 0.15) 65%,
            transparent 100%);
    z-index: 2;
}

/* Additional bottom fade for seamless transition */
.ll-upgrade-banner-artwork::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, #15121e 0%, rgba(21, 18, 30, 0.45) 50%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.ll-upgrade-banner-content {
    position: relative;
    z-index: 10;
    padding: 44px 48px 36px;
}

.ll-upgrade-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
    margin-bottom: 18px;
    display: block;
    line-height: 1;
}

.ll-upgrade-heading {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.ll-upgrade-heading-accent {
    background: linear-gradient(135deg, #c084fc 0%, #a855f7 40%, #9333ea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ll-upgrade-subtitle {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* ── Body: Two-Column Layout ── */
.ll-upgrade-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    padding: 8px 40px 40px;
}

/* ── LEFT COLUMN: Feature Table ── */
.ll-upgrade-features-col {
    min-width: 0;
}

.ll-upgrade-table {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 20px 24px;
    overflow: hidden;
}

.ll-upgrade-table-header {
    display: grid;
    grid-template-columns: 1fr 60px 90px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4px;
}

.ll-table-label {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.ll-table-plan {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
}

.ll-table-plan-plus {
    color: #c084fc;
}

/* ── Table Rows ── */
.ll-upgrade-table-row {
    display: grid;
    grid-template-columns: 1fr 60px 90px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease;
}

.ll-upgrade-table-row:last-child {
    border-bottom: none;
}

.ll-upgrade-table-row:hover {
    background: rgba(167, 119, 227, 0.04);
    border-radius: 10px;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.ll-table-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.ll-feature-icon {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.ll-table-check {
    text-align: center;
    font-size: 0.9rem;
}

.ll-table-check.free i {
    color: rgba(255, 255, 255, 0.5);
}

.ll-table-check.plus i {
    color: #c084fc;
    filter: drop-shadow(0 0 4px rgba(192, 132, 252, 0.4));
}

.ll-table-dash {
    text-align: center;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.18);
    font-weight: 600;
}

/* ── RIGHT COLUMN: Plans ── */
.ll-upgrade-plans-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* ── Plan Cards ── */
.ll-plan-card {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.ll-plan-card:hover {
    border-color: rgba(167, 119, 227, 0.3);
    background: rgba(167, 119, 227, 0.06);
}

/* Active plan card: glowing purple border */
.ll-plan-card.ll-plan-card--active {
    border-color: transparent;
    background: linear-gradient(135deg, #9333ea, #7c3aed, #a855f7) padding-box,
        linear-gradient(135deg, #9333ea, #7c3aed, #a855f7) border-box;
    border: 2px solid transparent;
    background-clip: padding-box;
    background-origin: border-box;
    box-shadow:
        0 0 20px rgba(147, 51, 234, 0.2),
        0 0 40px rgba(147, 51, 234, 0.1),
        inset 0 0 0 999px #15121e;
    animation: planGlow 3s ease-in-out infinite alternate;
}

@keyframes planGlow {
    0% {
        box-shadow: 0 0 20px rgba(147, 51, 234, 0.15), 0 0 40px rgba(147, 51, 234, 0.08), inset 0 0 0 999px #15121e;
    }

    100% {
        box-shadow: 0 0 28px rgba(147, 51, 234, 0.3), 0 0 60px rgba(147, 51, 234, 0.12), inset 0 0 0 999px #15121e;
    }
}

.ll-plan-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    border-radius: 18px;
}

.ll-plan-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ll-plan-label {
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 0.2px;
}

.ll-plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ll-plan-price {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.5px;
}

.ll-plan-period {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

.ll-plan-original-price {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.3);
    text-decoration: line-through;
    font-weight: 500;
}

.ll-plan-save {
    font-size: 0.82rem;
    color: #a855f7;
    font-weight: 600;
    margin-top: 2px;
}

/* ── Plan Radio Indicator ── */
.ll-plan-radio {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
    background: transparent;
}

.ll-plan-card--active .ll-plan-radio {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.15);
}

.ll-plan-radio-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0);
}

.ll-plan-card--active .ll-plan-radio-circle {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    transform: scale(1);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* ── 20% OFF Badge ── */
.ll-plan-badge {
    position: absolute;
    top: -10px;
    right: 18px;
    background: linear-gradient(135deg, #7c3aed, #9333ea);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 99px;
    letter-spacing: 0.8px;
    box-shadow: 0 4px 16px rgba(147, 51, 234, 0.4);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.ll-plan-badge i {
    font-size: 0.65rem;
}

/* ── Renewal Notice ── */
.ll-renewal-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.3);
    padding: 4px 0;
}

.ll-renewal-notice i {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.2);
}

/* ── Continue Button ── */
.ll-upgrade-continue-btn {
    position: relative;
    width: 100%;
    padding: 18px 32px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 40%, #a855f7 100%);
    background-size: 200% 200%;
    animation: continueGradient 4s ease infinite;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow:
        0 8px 30px rgba(147, 51, 234, 0.35),
        0 2px 8px rgba(0, 0, 0, 0.3);
    margin-top: 4px;
}

@keyframes continueGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.ll-upgrade-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(147, 51, 234, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.4);
}

.ll-upgrade-continue-btn:active {
    transform: translateY(0) scale(0.98);
}

/* Shine sweep on Continue */
.ll-continue-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    animation: continueSweep 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes continueSweep {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.ll-continue-text {
    position: relative;
    z-index: 2;
}


/* =====================================================================
   LORELOOM+ UPGRADE MODAL — RESPONSIVE
   ===================================================================== */

@media (max-width: 840px) {
    .ll-upgrade-modal {
        max-width: 96vw;
        border-radius: 24px;
        max-height: 95vh;
    }

    .ll-upgrade-banner {
        min-height: 200px;
        border-radius: 24px 24px 0 0;
    }



    .ll-upgrade-banner-content {
        padding: 32px 28px 28px;
    }

    .ll-upgrade-heading {
        font-size: 2rem;
    }

    .ll-upgrade-subtitle {
        font-size: 0.92rem;
    }

    .ll-upgrade-body {
        grid-template-columns: 1fr;
        padding: 0 24px 32px;
        gap: 20px;
    }
}

@media (max-width: 560px) {
    .ll-upgrade-modal {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    .ll-upgrade-banner {
        min-height: 170px;
        border-radius: 0;
    }



    .ll-upgrade-banner-content {
        padding: 24px 20px 22px;
    }

    .ll-upgrade-logo {
        height: 24px;
        margin-bottom: 12px;
    }

    .ll-upgrade-heading {
        font-size: 1.6rem;
        letter-spacing: -0.8px;
    }

    .ll-upgrade-subtitle {
        font-size: 0.85rem;
    }

    .ll-upgrade-body {
        padding: 0 16px 28px;
        gap: 16px;
    }

    .ll-upgrade-table {
        padding: 16px 16px;
        border-radius: 18px;
    }

    .ll-upgrade-table-header {
        grid-template-columns: 1fr 48px 80px;
    }

    .ll-upgrade-table-row {
        grid-template-columns: 1fr 48px 80px;
        padding: 11px 0;
    }

    .ll-table-feature {
        font-size: 0.82rem;
        gap: 8px;
    }

    .ll-plan-card-inner {
        padding: 18px 18px;
    }

    .ll-plan-price {
        font-size: 1.7rem;
    }

    .ll-upgrade-continue-btn {
        padding: 16px 24px;
        border-radius: 16px;
        font-size: 1rem;
    }

    .ll-upgrade-close {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}



/* ===== FIXED FULL-BLEED UPGRADE BANNER ===== */

.ll-upgrade-banner {
    position: relative;
    width: 100%;
    min-height: 240px;
    overflow: hidden;
    border-radius: 32px 32px 0 0;
    background: #15121e;
}

.ll-upgrade-castle-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transform: scale(1.03);
    z-index: 1;
}

.ll-upgrade-banner-fade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(90deg,
            rgba(21, 18, 30, 0.96) 0%,
            rgba(21, 18, 30, 0.92) 18%,
            rgba(21, 18, 30, 0.70) 35%,
            rgba(21, 18, 30, 0.25) 60%,
            rgba(21, 18, 30, 0.04) 78%,
            transparent 100%);
}

.ll-upgrade-banner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    z-index: 3;
    pointer-events: none;

    background: linear-gradient(to top,
            rgba(21, 18, 30, 0.96) 0%,
            rgba(21, 18, 30, 0) 100%);
}

.ll-upgrade-banner-content {
    position: relative;
    z-index: 4;
    max-width: min(58%, 620px);
    padding: 44px 48px 36px;
}

/* remove old split layout */
.ll-upgrade-banner-artwork {
    display: none !important;
}

@media (max-width: 840px) {

    .ll-upgrade-banner {
        min-height: 200px;
    }

    .ll-upgrade-banner-content {
        max-width: 72%;
        padding: 32px 28px 28px;
    }
}

@media (max-width: 560px) {

    .ll-upgrade-banner {
        min-height: 170px;
        border-radius: 0;
    }

    .ll-upgrade-banner-content {
        max-width: 100%;
        padding: 24px 20px 22px;
    }
}

/* ===================================================================
   ORB SHOP PAGE — REDESIGNED
   =================================================================== */

#page-shop {
    position: relative;
    overflow-y: auto;
    padding: 0 28px 60px;
}

/* --- Floating Particles --- */
.shop-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.shop-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: shopParticleFloat linear infinite;
}

@keyframes shopParticleFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh) scale(0.3);
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-10vh) scale(1);
    }
}

/* ============ SHOP HERO ============ */
.shop-hero-section {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    padding: 44px 48px;
    margin-bottom: 32px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(30, 20, 55, 0.8) 0%, rgba(18, 12, 38, 0.95) 100%);
    border: 1px solid rgba(167, 119, 227, 0.18);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.45),
        0 0 80px rgba(167, 119, 227, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.shop-hero-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 10% 20%, rgba(167, 119, 227, 0.2) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 90% 80%, rgba(110, 142, 251, 0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: heroMeshDrift 12s ease-in-out infinite alternate;
}

.shop-hero-mesh-2 {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 40% 50% at 70% 30%, rgba(255, 65, 108, 0.08) 0%, transparent 60%);
    pointer-events: none;
    animation: heroMeshDrift 15s ease-in-out infinite alternate-reverse;
}

@keyframes heroMeshDrift {
    0% {
        opacity: 0.7;
        transform: scale(1) translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: scale(1.08) translate(10px, -8px);
    }
}

.shop-hero-noise {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.shop-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 119, 227, 0.4) 30%, rgba(110, 142, 251, 0.5) 50%, rgba(167, 119, 227, 0.4) 70%, transparent);
}

.shop-hero-content-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.shop-hero-left {
    max-width: 480px;
}

.shop-hero-title {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #e2b3ff 0%, #a777e3 40%, #6e8efb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 8px;
    filter: drop-shadow(0 0 30px rgba(167, 119, 227, 0.25));
}

/* --- Balance Pill (inside hero) --- */
.shop-hero-balance-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 32px;
    background: linear-gradient(160deg, rgba(40, 28, 70, 0.7), rgba(20, 14, 40, 0.9));
    border: 1px solid rgba(167, 119, 227, 0.22);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(167, 119, 227, 0.08);
    overflow: hidden;
    min-width: 320px;
}

.shop-hero-balance-glow {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: shopBalanceGlow 4s ease-in-out infinite alternate;
}

@keyframes shopBalanceGlow {
    from {
        opacity: 0.6;
        transform: translateX(-50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }
}

.shop-hero-orb-visual {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}

.shop-hero-orb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(167, 119, 227, 0.32));
    /* animation: shopOrbSpin 12s linear infinite; */
}

@keyframes shopOrbSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.shop-hero-orb-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(167, 119, 227, 0.25);
    animation: shopRingPulse 2.5s ease-in-out infinite;
    pointer-events: none;
}

.shop-hero-orb-ring.ring-2 {
    inset: -14px;
    border-color: rgba(110, 142, 251, 0.15);
    animation-delay: -1.2s;
}

@keyframes shopRingPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.18);
        opacity: 0;
    }
}

.shop-hero-balance-data {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shop-hero-balance-label {
    font-size: 0.7rem;
    color: rgba(161, 161, 170, 0.7);
    font-weight: 600;
    letter-spacing: 1.8px;
}

.shop-hero-balance-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.shop-hero-balance-num {
    font-family: 'Outfit', sans-serif;
    font-size: 2.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e2b3ff, #a777e3, #6e8efb);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1;
    animation: shopBalanceShimmer 4s ease infinite;
}

@keyframes shopBalanceShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.shop-hero-balance-unit {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(167, 119, 227, 0.65);
}

.shop-hero-balance-sub {
    font-size: 0.72rem;
    color: rgba(161, 161, 170, 0.5);
    margin-top: 2px;
}

/* ============ SHOP TABS ============ */
.shop-tabs-bar {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 6px;
    margin-bottom: 28px;
    padding: 5px;
    background: rgba(20, 15, 35, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    width: fit-content;
    backdrop-filter: blur(12px);
}

.shop-tab {
    padding: 10px 22px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: rgba(161, 161, 170, 0.7);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shop-tab:hover {
    color: #fff;
    background: rgba(167, 119, 227, 0.08);
}

.shop-tab.active {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.2), rgba(110, 142, 251, 0.15));
    color: #e2b3ff;
    border: 1px solid rgba(167, 119, 227, 0.25);
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.1);
}

.shop-tab.active i {
    color: #c9a0f5;
}

.shop-tab-panel {
    display: none;
    animation: shopPanelFadeIn 0.35s ease;
}

.shop-tab-panel.active {
    display: block;
}

@keyframes shopPanelFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============ SHOP GRID ============ */
.shop-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 22px;
}

/* ============ SHOP CARD ============ */
.shop-card {
    position: relative;
    display: flex;
    border-radius: 20px;
    overflow: hidden;
    /* Grounded resting shadow so the card reads as a lifted glass tile,
       not a flat panel — premium depth before any interaction. */
    box-shadow:
        0 10px 28px -12px rgba(0, 0, 0, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.shop-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 26px 60px -14px rgba(0, 0, 0, 0.6),
        0 0 44px rgba(167, 119, 227, 0.16);
}

.shop-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.1) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.shop-card:hover .shop-card-glow {
    opacity: 1;
}

.shop-card-border-anim {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.12), rgba(110, 142, 251, 0.08), rgba(167, 119, 227, 0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

.shop-card:hover .shop-card-border-anim {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.35), rgba(110, 142, 251, 0.25), rgba(226, 179, 255, 0.3));
    animation: shopBorderRotate 3s linear infinite;
    background-size: 300% 300%;
}

@keyframes shopBorderRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* --- Popularity Badge --- */
.shop-card-popularity {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 94, 0, 0.15));
    border: 1px solid rgba(255, 149, 0, 0.35);
    color: #ffb347;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.shop-card-popularity i {
    font-size: 0.68rem;
}

/* --- Premium Tier Ribbon --- */
.shop-card-tier-ribbon {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 5;
    padding: 5px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.2), rgba(110, 61, 231, 0.18));
    border: 1px solid rgba(167, 119, 227, 0.4);
    color: #d6b4ff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.shop-card-inner {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    /* Layered surface: a soft top sheen fading into a deep base, so the
       glass tile catches light at the top edge and grounds toward the
       footer. Reads richer than a flat two-stop fill. */
    background:
        radial-gradient(140% 90% at 50% -10%, rgba(167, 119, 227, 0.14) 0%, transparent 55%),
        linear-gradient(168deg, rgba(38, 28, 60, 0.82) 0%, rgba(22, 16, 36, 0.92) 46%, rgba(15, 11, 24, 0.95) 100%);
    backdrop-filter: blur(22px);
    border-radius: 20px;
    padding: 28px 24px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    /* Crisp inner top-edge highlight + soft inner floor shadow = real depth. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -20px 40px -24px rgba(0, 0, 0, 0.6);
}

.shop-card-icon-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background:
        radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--icon-color, #a777e3) 30%, transparent), transparent 70%),
        var(--icon-bg, rgba(167, 119, 227, 0.12));
    border: 1px solid var(--icon-border, rgba(167, 119, 227, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    color: var(--icon-color, #a777e3);
    margin-bottom: 2px;
    box-shadow:
        0 8px 22px -8px color-mix(in srgb, var(--icon-color, #a777e3) 55%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--icon-color, #a777e3) 35%, transparent));
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

/* Soft halo behind the icon tile for extra depth */
.shop-card-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--icon-color, #a777e3) 22%, transparent) 0%, transparent 68%);
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.shop-card:hover .shop-card-icon-wrap {
    transform: translateY(-3px) scale(1.08) rotate(-4deg);
    box-shadow:
        0 14px 30px -8px color-mix(in srgb, var(--icon-color, #a777e3) 70%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.shop-card:hover .shop-card-icon-wrap::after {
    opacity: 1;
}

.shop-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #fff;
    margin: 0;
    text-shadow: 0 1px 12px rgba(167, 119, 227, 0.18);
}

.shop-card-desc {
    font-size: 0.82rem;
    color: rgba(190, 190, 205, 0.82);
    line-height: 1.55;
    margin: 0;
    max-width: 30ch;
}

/* --- Card Tags --- */
.shop-card-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 4px 0;
}

.shop-tag {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(161, 161, 170, 0.8);
    display: flex;
    align-items: center;
    gap: 4px;
}

.shop-tag i {
    font-size: 0.6rem;
    opacity: 0.7;
}

.shop-tag.tag-value {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.shop-tag.tag-premium {
    background: rgba(167, 119, 227, 0.1);
    border-color: rgba(167, 119, 227, 0.25);
    color: #c9a0f5;
}

/* --- Card Footer (cost + button side by side) --- */
.shop-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: auto;
    padding-top: 8px;
}

.shop-card-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background:
        linear-gradient(135deg, rgba(167, 119, 227, 0.14), rgba(110, 142, 251, 0.08));
    border: 1px solid rgba(167, 119, 227, 0.22);
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shop-cost-orb-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(167, 119, 227, 0.4));
}

.shop-cost-value {
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #e2b3ff, #a777e3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* --- Buy Button --- */
.shop-buy-btn {
    position: relative;
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #a777e3 0%, #7b44d4 50%, #6e3de7 100%);
    background-size: 200% 200%;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 20px rgba(110, 61, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    animation: btnGradientShift 4s ease infinite;
}

.shop-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(110, 61, 231, 0.45), 0 0 30px rgba(167, 119, 227, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.shop-buy-btn:active {
    transform: translateY(0) scale(0.98);
}

.shop-buy-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.shop-buy-btn:hover .shop-buy-btn-glow {
    animation: premiumShimmer 2s ease infinite;
}

/* --- Premium Card Variant --- */
.shop-card--premium .shop-card-border-anim {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.18), rgba(255, 65, 108, 0.1), rgba(167, 119, 227, 0.18));
}

.shop-card--premium:hover .shop-card-border-anim {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.4), rgba(255, 65, 108, 0.25), rgba(226, 179, 255, 0.35));
}

/* --- "Best Value" ribbon variant (gold, sits on the flagship) --- */
.shop-card-tier-ribbon.tier-ribbon--value {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 165, 0, 0.16));
    border-color: rgba(255, 215, 0, 0.45);
    color: #ffe27a;
}

/* --- Flagship card: the single "hero" offer that anchors the value story.
   Persistent glow + subtle lift so it reads as the recommended pick even
   before hover. Only one flagship per shop (marketing: primary-action). --- */
.shop-card--flagship {
    transform: translateY(-4px);
}

.shop-card--flagship .shop-card-inner {
    background: linear-gradient(170deg, rgba(44, 32, 66, 0.85) 0%, rgba(22, 16, 38, 0.92) 100%);
}

.shop-card--flagship .shop-card-border-anim {
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(167, 119, 227, 0.35), rgba(46, 204, 113, 0.3));
    background-size: 300% 300%;
    animation: shopBorderRotate 4s linear infinite;
}

.shop-card--flagship .shop-card-glow {
    opacity: 0.7;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.14) 0%, transparent 70%);
}

.shop-card--flagship:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), 0 0 46px rgba(255, 215, 0, 0.14);
}

.shop-card--flagship:hover .shop-card-glow {
    opacity: 1;
}

/* --- Locked / Disabled --- */
.shop-card.locked .shop-buy-btn {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(161, 161, 170, 0.5);
    box-shadow: none;
    cursor: not-allowed;
    animation: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.shop-card.locked .shop-buy-btn:hover {
    transform: none;
    box-shadow: none;
}

.shop-card.locked .shop-buy-btn .shop-buy-btn-glow {
    display: none;
}

.shop-card.locked {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.shop-card.locked:hover {
    transform: none;
    box-shadow: none;
}

/* --- Purchase Flash --- */
.shop-card.purchased .shop-card-inner {
    animation: shopPurchaseFlash 0.6s ease;
}

@keyframes shopPurchaseFlash {
    0% {
        box-shadow: inset 0 0 0 rgba(46, 204, 113, 0);
    }

    30% {
        box-shadow: inset 0 0 40px rgba(46, 204, 113, 0.15);
    }

    100% {
        box-shadow: inset 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* --- Toast --- */
.shop-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    z-index: 9999;
    opacity: 0;
    transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.shop-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.shop-toast-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.12), rgba(39, 174, 96, 0.18));
    border: 1px solid rgba(46, 204, 113, 0.35);
    border-radius: 14px;
    backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.shop-toast-inner i {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.4));
}

.shop-toast.error .shop-toast-inner {
    background: linear-gradient(135deg, rgba(255, 65, 108, 0.12), rgba(255, 65, 108, 0.18));
    border-color: rgba(255, 65, 108, 0.35);
    color: #ff416c;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 65, 108, 0.1);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .shop-hero-content-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .shop-hero-balance-pill {
        min-width: unset;
        width: 100%;
    }

    /* When the hero stacks, let the level widget sit full-width and left-aligned
       under the heading instead of clinging to a 300px min-width at the edge. */
    .achievements-hero-section .shop-hero-right {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    #page-shop {
        padding: 0 16px 40px;
    }

    .shop-hero-section {
        padding: 28px 22px;
        border-radius: 18px;
    }

    .shop-hero-title {
        font-size: 2.2rem;
    }

    .shop-hero-balance-pill {
        padding: 18px 20px;
        gap: 14px;
    }

    .shop-hero-orb-visual {
        width: 56px;
        height: 56px;
    }

    .shop-hero-balance-num {
        font-size: 2rem;
    }

    .shop-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .shop-card-inner {
        padding: 24px 20px 20px;
    }

    .shop-tabs-bar {
        width: 100%;
    }

    .shop-tab {
        flex: 1;
        justify-content: center;
        font-size: 0.8rem;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    .shop-hero-title {
        font-size: 1.8rem;
    }

    .shop-hero-balance-pill {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .shop-hero-balance-data {
        align-items: center;
    }

    .shop-hero-balance-num {
        font-size: 1.8rem;
    }

    .shop-card-footer {
        flex-direction: column;
    }
}

/* ============================================================
   SHOP — UX ENHANCEMENTS (a11y, affordability, focus, motion)
   ============================================================ */

/* Tabular figures keep balances & prices from shifting width */
.shop-hero-balance-num,
.shop-cost-value,
.shop-card-meter-label {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- Keyboard focus rings (only for keyboard users) --- */
.shop-tab:focus-visible,
.shop-buy-btn:focus-visible,
.reward-chip:focus-visible,
.shop-hero-balance-pill:focus-visible {
    outline: 2px solid #c9a0f5;
    outline-offset: 3px;
    border-radius: 12px;
}

/* --- Affordability meter (shown only on locked cards) --- */
.shop-card-meter {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 5px;
    margin: 2px 0 4px;
}

.shop-card.locked .shop-card-meter {
    display: flex;
}

.shop-card-meter-track {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}

.shop-card-meter-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #6e8efb, #a777e3);
    box-shadow: 0 0 12px rgba(167, 119, 227, 0.45);
    transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.shop-card-meter-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: rgba(201, 160, 245, 0.85);
    align-self: flex-end;
}

.shop-card-meter-label .meter-need {
    color: rgba(161, 161, 170, 0.7);
    font-weight: 500;
}

/* --- Affordable cards get a quiet "ready" cue --- */
.shop-card.affordable .shop-card-cost {
    border-color: rgba(46, 204, 113, 0.3);
    background: rgba(46, 204, 113, 0.08);
}

.shop-card.affordable .shop-cost-value {
    background: linear-gradient(135deg, #7bffb0, #2ecc71);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Locked buy button — disabled state clarity */
.shop-buy-btn:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

/* --- Balance count-up flash --- */
.shop-hero-balance-num.counting {
    filter: drop-shadow(0 0 14px rgba(167, 119, 227, 0.55));
}

/* --- Respect reduced-motion: calm the ambient animations --- */
@media (prefers-reduced-motion: reduce) {

    .shop-hero-mesh,
    .shop-hero-mesh-2,
    .shop-hero-balance-glow,
    .shop-hero-orb-ring,
    .shop-hero-balance-num,
    .shop-buy-btn,
    .shop-card:hover .shop-card-border-anim,
    .shop-buy-btn:hover .shop-buy-btn-glow,
    .shop-tab-panel.active {
        animation: none !important;
    }

    .shop-card,
    .shop-card:hover,
    .shop-buy-btn,
    .shop-buy-btn:hover,
    .shop-card-icon-wrap,
    .shop-card:hover .shop-card-icon-wrap,
    .shop-card-meter-fill,
    .reward-chip,
    .reward-chip:hover {
        transition-duration: 0.01ms !important;
        transform: none !important;
    }
}

/* =====================================================================
   SETTINGS V2 — Premium SaaS Redesign (Linear / Discord / Arc / Notion)
   ===================================================================== */

/* ---- Ambient Page Background & Glows ---- */
#page-settings {
    position: relative !important;
    background: #06040a !important;
    padding: 40px 24px !important;
    box-sizing: border-box !important;
    display: none;
    /* Controlled by JS flex/none */
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 100% !important;
}

#page-settings::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.08) 0%, transparent 70%);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

#page-settings::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(110, 142, 251, 0.06) 0%, transparent 70%);
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

/* ---- Floating Premium Glass Container ---- */
.settings-wrapper-v2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    height: 100%;
    max-height: 700px;
    background: linear-gradient(135deg, rgba(20, 15, 30, 0.45) 0%, rgba(10, 8, 15, 0.75) 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(167, 119, 227, 0.12);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.7),
        0 0 100px rgba(167, 119, 227, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    z-index: 1;
    animation: settingsScaleIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes settingsScaleIn {
    from {
        opacity: 0;
        transform: scale(0.97) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ---- Premium Top Bar ---- */
.stg-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 32px;
    border-bottom: 1px solid rgba(167, 119, 227, 0.08);
    flex-shrink: 0;
    background: rgba(14, 11, 20, 0.25);
    z-index: 5;
}

.stg-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #e2d0ff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'Outfit', sans-serif;
}

.stg-back-btn:hover {
    background: rgba(167, 119, 227, 0.1);
    color: #ffffff;
    border-color: rgba(167, 119, 227, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(167, 119, 227, 0.15);
}

.stg-back-btn i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.stg-back-btn:hover i {
    transform: translateX(-2px);
}

.stg-topbar-title {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    color: #e2b3ff;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(167, 119, 227, 0.6);
    margin-left: auto;
}

/* ---- Two-Column Layout ---- */
.stg-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ---- Left Sidebar ---- */
.stg-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 20px;
    border-right: 1px solid rgba(167, 119, 227, 0.08);
    overflow-y: auto;
    gap: 20px;
    background: rgba(10, 8, 15, 0.15);
}

/* ---- Premium Profile Card ---- */
.stg-profile-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    margin-bottom: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.stg-profile-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(167, 119, 227, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stg-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.8) 0%, rgba(110, 142, 251, 0.8) 100%);
    padding: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(167, 119, 227, 0.25);
}

.stg-avatar i {
    width: 100%;
    height: 100%;
    background: #110e19;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    color: #e2d0ff;
    transition: all 0.25s ease;
}

.stg-profile-card:hover .stg-avatar i {
    background: transparent;
    color: #ffffff;
}

.stg-profile-info {
    flex: 1;
    min-width: 0;
}

.stg-profile-name {
    font-size: 0.92rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stg-profile-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stg-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.2px;
}

.stg-badge--plan {
    background: rgba(167, 119, 227, 0.08);
    border: 1px solid rgba(167, 119, 227, 0.2);
    color: #d1b9ff;
}

.stg-badge--plan.gold {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.25);
    color: #ffd700;
}

.stg-badge--orbs {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #d1d1d6;
}

.stg-badge--orbs svg {
    margin-right: 1px;
}

/* ---- Sidebar Nav ---- */
.stg-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stg-nav-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 600;
    padding: 12px 10px 6px;
}

.stg-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: #a1a1aa;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    text-align: left;
    width: 100%;
}

.stg-nav-item i {
    width: 16px;
    text-align: center;
    font-size: 0.85rem;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.stg-nav-item:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #ffffff;
}

.stg-nav-item:hover i {
    opacity: 0.9;
    color: #ffffff;
}

.stg-nav-item.active {
    background: rgba(167, 119, 227, 0.08);
    border: 1px solid rgba(167, 119, 227, 0.15);
    color: #e2b3ff;
}

.stg-nav-item.active i {
    opacity: 1;
    color: #a777e3;
}

/* ---- Sidebar Note ---- */
.stg-sidebar-note {
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(167, 119, 227, 0.03);
    border: 1px solid rgba(167, 119, 227, 0.08);
}

.stg-sidebar-note i {
    color: #a777e3;
    font-size: 0.85rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.stg-sidebar-note p {
    margin: 0;
    font-size: 0.72rem;
    color: #8e8e93;
    line-height: 1.45;
}

.stg-sidebar-note strong {
    color: #c9a0f5;
}

/* ---- Right Content Panel ---- */
.stg-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 32px 90px;
    min-height: 0;
}

.settings-tab-content {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* ---- Section Header ---- */
.stg-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.stg-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: #fff;
    margin: 0;
    letter-spacing: -0.02em;
}

.stg-section-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 6px 0 0 0;
}

/* ---- Divider ---- */
.stg-divider {
    height: 1px;
    background: linear-gradient(90deg, rgba(167, 119, 227, 0.15) 0%, transparent 100%);
    margin: 16px 0 20px;
}

/* ---- Quick Info Chips ---- */
.stg-quick-info {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.stg-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    background: rgba(167, 119, 227, 0.05);
    border: 1px solid rgba(167, 119, 227, 0.15);
    font-size: 0.78rem;
    color: #e2b3ff;
    font-weight: 500;
}

.stg-quick-chip i {
    color: #a777e3;
    font-size: 0.8rem;
}

/* ---- Field Groups ---- */
.stg-field-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stg-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stg-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stg-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 0.2px;
}

.stg-field-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0 0 4px 0;
    line-height: 1.5;
}

/* ---- Input Styles ---- */
.stg-input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #f0eaf8;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.stg-input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Locked (permanent) field — e.g. username after signup */
.stg-input--locked {
    cursor: not-allowed;
    color: rgba(240, 234, 248, 0.65);
    background-color: rgba(255, 255, 255, 0.015);
    padding-right: 38px;
}

.stg-input--locked:hover {
    border-color: rgba(255, 255, 255, 0.05);
    background-color: rgba(255, 255, 255, 0.015);
}

.stg-input-wrapper .stg-lock-badge {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: rgba(167, 119, 227, 0.6);
    pointer-events: none;
}

.stg-username-lock-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.74rem;
    color: rgba(255, 255, 255, 0.35);
}

.stg-username-lock-note i {
    font-size: 0.68rem;
    color: rgba(167, 119, 227, 0.55);
}

.stg-input:hover {
    border-color: rgba(167, 119, 227, 0.25);
    background-color: rgba(255, 255, 255, 0.03);
}

.stg-input:focus {
    border-color: rgba(167, 119, 227, 0.5);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 2px rgba(167, 119, 227, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transform: translateY(-1px);
}

/* ---- Select ---- */
.stg-select {
    background-image: none !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    cursor: pointer;
    padding-right: 36px;
}

.stg-select:hover,
.stg-select:focus {
    background-image: none !important;
}

.stg-select option {
    background: #100b18;
    color: #f0eaf8;
    padding: 12px;
}

/* ---- Hide native select, show custom animated dropdown ---- */
.stg-select--native {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.pronoun-select {
    position: relative;
    width: 100%;
}

.pronoun-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #f0eaf8;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pronoun-trigger:hover {
    border-color: rgba(167, 119, 227, 0.25);
    background-color: rgba(255, 255, 255, 0.03);
}

.pronoun-select.open .pronoun-trigger {
    border-color: rgba(167, 119, 227, 0.5);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 2px rgba(167, 119, 227, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.pronoun-trigger:focus-visible {
    border-color: rgba(167, 119, 227, 0.6);
    box-shadow: 0 0 0 2px rgba(167, 119, 227, 0.18);
}

.pronoun-chevron {
    font-size: 0.7rem;
    color: rgba(167, 119, 227, 0.7);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    flex-shrink: 0;
}

.pronoun-select.open .pronoun-chevron {
    transform: rotate(180deg);
    color: #a777e3;
}

.pronoun-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(20, 14, 30, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(167, 119, 227, 0.18);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top center;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.pronoun-select.open .pronoun-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.pronoun-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: transparent;
    border: none;
    color: rgba(240, 234, 248, 0.75);
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 0.86rem;
    font-family: 'Inter', sans-serif;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.pronoun-option+.pronoun-option {
    margin-top: 2px;
}

.pronoun-option:hover {
    background: rgba(167, 119, 227, 0.12);
    color: #f0eaf8;
}

.pronoun-option:active {
    transform: scale(0.985);
}

.pronoun-option i {
    font-size: 0.72rem;
    color: #a777e3;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.pronoun-option.selected {
    background: rgba(167, 119, 227, 0.1);
    color: #f0eaf8;
}

.pronoun-option.selected i {
    opacity: 1;
    transform: scale(1);
}

.pronoun-select.open .pronoun-option {
    animation: pronounOptionIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pronoun-select.open .pronoun-option:nth-child(1) {
    animation-delay: 0.02s;
}

.pronoun-select.open .pronoun-option:nth-child(2) {
    animation-delay: 0.05s;
}

.pronoun-select.open .pronoun-option:nth-child(3) {
    animation-delay: 0.08s;
}

.pronoun-select.open .pronoun-option:nth-child(4) {
    animation-delay: 0.11s;
}

.pronoun-select.open .pronoun-option:nth-child(5) {
    animation-delay: 0.14s;
}

@keyframes pronounOptionIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {

    .pronoun-menu,
    .pronoun-chevron,
    .pronoun-option,
    .pronoun-option i {
        transition: none;
    }

    .pronoun-select.open .pronoun-option {
        animation: none;
    }
}

/* ===== Custom Date of Origin (Birthday) picker ===== */
.stg-input--native-date {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.dob-picker {
    position: relative;
    width: 100%;
}

.dob-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #f0eaf8;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.88rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.dob-trigger:hover {
    border-color: rgba(167, 119, 227, 0.25);
    background-color: rgba(255, 255, 255, 0.03);
}

.dob-picker.open .dob-trigger {
    border-color: rgba(167, 119, 227, 0.5);
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 2px rgba(167, 119, 227, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.dob-trigger:focus-visible {
    border-color: rgba(167, 119, 227, 0.6);
    box-shadow: 0 0 0 2px rgba(167, 119, 227, 0.18);
}

.dob-trigger-icon {
    color: #a777e3;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.dob-trigger-value {
    flex: 1;
}

.dob-trigger-value.placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.dob-chevron {
    font-size: 0.7rem;
    color: rgba(167, 119, 227, 0.7);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

.dob-picker.open .dob-chevron {
    transform: rotate(180deg);
    color: #a777e3;
}

.dob-pop {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 60;
    width: 300px;
    max-width: 100%;
    background: rgba(20, 14, 30, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(167, 119, 227, 0.18);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.dob-picker.open .dob-pop {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.dob-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.dob-pop-title {
    display: flex;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.dob-sel {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #f0eaf8;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 0.82rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.dob-sel:hover,
.dob-sel:focus {
    border-color: rgba(167, 119, 227, 0.4);
    background: rgba(255, 255, 255, 0.05);
}

.dob-sel option {
    background: #140e1e;
    color: #f0eaf8;
}

.dob-nav {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(240, 234, 248, 0.8);
    border-radius: 9px;
    cursor: pointer;
    font-size: 0.72rem;
    transition: all 0.18s ease;
    flex-shrink: 0;
}

.dob-nav:hover {
    background: rgba(167, 119, 227, 0.15);
    color: #f0eaf8;
    border-color: rgba(167, 119, 227, 0.35);
}

.dob-nav:active {
    transform: scale(0.92);
}

.dob-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.dob-weekdays span {
    text-align: center;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(167, 119, 227, 0.65);
    text-transform: uppercase;
    padding: 4px 0;
}

.dob-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.dob-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgba(240, 234, 248, 0.85);
    font-size: 0.8rem;
    font-family: 'Inter', sans-serif;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.dob-day:hover {
    background: rgba(167, 119, 227, 0.15);
}

.dob-day:active {
    transform: scale(0.9);
}

.dob-day.muted {
    color: rgba(255, 255, 255, 0.18);
}

.dob-day.today {
    box-shadow: inset 0 0 0 1px rgba(167, 119, 227, 0.5);
}

.dob-day.selected {
    background: linear-gradient(135deg, #a777e3, #7b5cc4);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(167, 119, 227, 0.4);
}

.dob-pop-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.dob-foot-btn {
    background: transparent;
    border: none;
    color: rgba(240, 234, 248, 0.6);
    font-size: 0.78rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 7px;
    transition: color 0.18s ease, background 0.18s ease;
}

.dob-foot-btn:hover {
    color: #f0eaf8;
    background: rgba(255, 255, 255, 0.04);
}

.dob-foot-btn.dob-today {
    color: #a777e3;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

    .dob-pop,
    .dob-chevron,
    .dob-day,
    .dob-nav {
        transition: none;
    }
}



/* ---- Textarea ---- */
.stg-textarea {
    height: 100px;
    resize: none;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: rgba(167, 119, 227, 0.2) transparent;
}

.stg-textarea::-webkit-scrollbar {
    width: 6px;
}

.stg-textarea::-webkit-scrollbar-track {
    background: transparent;
}

.stg-textarea::-webkit-scrollbar-thumb {
    background: rgba(167, 119, 227, 0.2);
    border-radius: 10px;
}

/* ---- Date Input ---- */
.stg-input[type="date"] {
    color-scheme: dark;
}

.stg-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5) sepia(1) saturate(2) hue-rotate(230deg);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.stg-input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.8;
}

/* ---- Floating Integrated Save Bar ---- */
.stg-save-bar {
    position: absolute;
    bottom: 28px;
    left: calc(260px + 40px);
    /* Aligns nicely outside sidebar */
    right: 40px;
    background: rgba(18, 14, 28, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(167, 119, 227, 0.18);
    border-radius: 16px;
    padding: 16px 28px;
    z-index: 10;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Elevate the active tab content above the save changes bar when a custom dropdown is open */
.settings-wrapper-v2:has(.dob-picker.open) .settings-tab-content.active,
.settings-wrapper-v2:has(.pronoun-select.open) .settings-tab-content.active {
    position: relative;
    z-index: 20;
}

.stg-save-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
}

.stg-save-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.stg-save-status i {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.2s ease;
}

.stg-save-bar.has-changes .stg-save-status i {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

.stg-save-bar.has-changes #stg-save-label {
    color: #ffffff;
}

.stg-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #a777e3 0%, #7d44cf 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 15px rgba(167, 119, 227, 0.3);
}

.stg-save-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #b88bf2 0%, #8c4fed 100%);
    box-shadow: 0 6px 20px rgba(167, 119, 227, 0.45);
    transform: translateY(-1px);
}

.stg-save-btn:active:not(:disabled) {
    transform: translateY(0);
}

.stg-save-btn:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.25);
    box-shadow: none;
    cursor: not-allowed;
}

/* ---- Save Toast ---- */
.stg-save-toast {
    display: none;
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.25);
    color: #2ecc71;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 100;
    white-space: nowrap;
    animation: stgToastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.stg-save-toast i {
    margin-right: 6px;
}

@keyframes stgToastIn {
    from {
        opacity: 0;
        transform: translate(-50%, 4px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ---- Empty State ---- */
.stg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    gap: 16px;
}

.stg-empty-state i {
    font-size: 2.2rem;
    color: rgba(167, 119, 227, 0.2);
}

.stg-empty-state p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* ---- Tab Content Transitions ---- */
.settings-wrapper-v2 .settings-tab-content {
    display: none;
    animation: stgFadeIn 0.3s ease forwards;
}

.settings-wrapper-v2 .settings-tab-content.active {
    display: flex;
}

@keyframes stgFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Mobile Navigation Toggle ---- */
.stg-mobile-nav-toggle {
    display: none;
}

/* =====================================================================
   SETTINGS V2 — Responsive Breakpoints
   ===================================================================== */

@media (max-width: 900px) {
    #page-settings {
        padding: 24px 16px !important;
    }

    .stg-sidebar {
        width: 230px;
        padding: 24px 16px;
    }

    .stg-content {
        padding: 32px 32px 120px;
    }

    .stg-save-bar {
        left: calc(230px + 32px);
        right: 32px;
        bottom: 24px;
        padding: 12px 20px;
    }
}

@media (max-width: 768px) {
    #page-settings {
        padding: 0 !important;
    }

    .settings-wrapper-v2 {
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .stg-layout {
        flex-direction: column;
    }

    .stg-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid rgba(167, 119, 227, 0.08);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .stg-profile-card {
        width: 100%;
        margin-bottom: 0;
    }

    .stg-nav {
        flex-direction: row;
        gap: 6px;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .stg-nav::-webkit-scrollbar {
        display: none;
    }

    .stg-nav-label {
        display: none;
    }

    .stg-nav-item {
        white-space: nowrap;
        padding: 8px 16px;
        border-radius: 8px;
        font-size: 0.8rem;
        width: auto;
    }

    .stg-sidebar-note {
        display: none;
    }

    .stg-content {
        padding: 32px 20px 140px;
    }

    .stg-field-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .stg-save-bar {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        width: auto;
    }
}

@media (max-width: 480px) {
    .stg-topbar {
        padding: 16px;
    }

    .stg-topbar-title {
        display: none;
    }

    .stg-section-title {
        font-size: 1.3rem;
    }

    .stg-quick-info {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 24px;
    }

    .stg-quick-chip {
        width: fit-content;
    }

    .stg-save-bar {
        padding: 12px 16px;
    }

    .stg-save-status {
        display: none;
    }
}

/* --- Search Hide Logic on Settings View --- */
.main-content:has(#page-settings[style*='display: flex']) .search-container {
    display: none !important;
}

/* Hide the entire top nav strip on the Settings view so no empty bar shows */
.main-content.settings-active .top-nav {
    display: none !important;
}

/* =====================================================================
   QUOTA MODAL — "Continue Your Journey" Premium Glassmorphism
   ===================================================================== */

/* ---- Overlay ---- */
.qm-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 2, 10, 0.0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 0.4s ease, backdrop-filter 0.4s ease;
    padding: 24px;
}

.qm-overlay.active {
    display: flex;
}

.qm-overlay.visible {
    background: rgba(4, 2, 10, 0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ---- Modal Container ---- */
.qm-modal {
    position: relative;
    width: 100%;
    max-width: 680px;
    background: linear-gradient(165deg, rgba(22, 16, 40, 0.92) 0%, rgba(10, 8, 18, 0.98) 100%);
    border: 1px solid rgba(167, 119, 227, 0.15);
    border-radius: 28px;
    padding: 44px 40px 40px;
    overflow: hidden;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.8),
        0 0 120px rgba(167, 119, 227, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    opacity: 0;
    transform: scale(0.92) translateY(24px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.qm-overlay.visible .qm-modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ---- Decorative Glow Orbs ---- */
.qm-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
}

.qm-glow-1 {
    top: -60px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.18) 0%, transparent 70%);
    animation: qmGlowPulse1 5s ease-in-out infinite alternate;
}

.qm-glow-2 {
    bottom: -40px;
    left: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(110, 142, 251, 0.12) 0%, transparent 70%);
    animation: qmGlowPulse2 6s ease-in-out infinite alternate;
}

.qm-glow-3 {
    top: 40%;
    left: 50%;
    width: 140px;
    height: 140px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(226, 179, 255, 0.06) 0%, transparent 70%);
    animation: qmGlowPulse1 7s ease-in-out infinite alternate-reverse;
}

@keyframes qmGlowPulse1 {
    from {
        opacity: 0.5;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes qmGlowPulse2 {
    from {
        opacity: 0.4;
        transform: scale(1);
    }

    to {
        opacity: 0.9;
        transform: scale(1.15);
    }
}

/* ---- Close Button ---- */
.qm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.qm-close:hover {
    background: rgba(255, 65, 108, 0.12);
    border-color: rgba(255, 65, 108, 0.3);
    color: #ff416c;
    transform: rotate(90deg);
}

/* ---- Header ---- */
.qm-header {
    text-align: center;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}

.qm-header-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.15), rgba(110, 142, 251, 0.1));
    border: 1px solid rgba(167, 119, 227, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #c9a0f5;
    box-shadow: 0 8px 32px rgba(167, 119, 227, 0.15);
    animation: qmIconFloat 3s ease-in-out infinite;
}

@keyframes qmIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.qm-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff 0%, #e2b3ff 40%, #a777e3 70%, #6e8efb 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin: 0 0 8px;
    animation: qmTitleShimmer 4s ease infinite;
}

@keyframes qmTitleShimmer {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.qm-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: rgba(161, 161, 170, 0.8);
    line-height: 1.55;
    margin: 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Option Cards Container ---- */
.qm-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    position: relative;
    z-index: 2;
}

/* ---- Individual Card ---- */
.qm-card {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}

.qm-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(167, 119, 227, 0.12);
}

/* Card glow */
.qm-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.1) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.qm-card:hover .qm-card-glow {
    opacity: 1;
}

/* Card animated border */
.qm-card-border {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.12), rgba(110, 142, 251, 0.08), rgba(167, 119, 227, 0.12));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.4s ease;
}

.qm-card:hover .qm-card-border {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.4), rgba(110, 142, 251, 0.3), rgba(226, 179, 255, 0.35));
    background-size: 300% 300%;
    animation: shopBorderRotate 3s linear infinite;
}

/* Card inner */
.qm-card-inner {
    position: relative;
    z-index: 2;
    background: linear-gradient(170deg, rgba(30, 22, 48, 0.75) 0%, rgba(18, 14, 30, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 22px;
    padding: 28px 22px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-height: 260px;
}

/* ---- Badge ---- */
.qm-card-badge {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 5px;
}

.qm-badge-free {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.1));
    border: 1px solid rgba(46, 204, 113, 0.35);
    color: #2ecc71;
}

.qm-badge-orbs {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.15), rgba(110, 61, 231, 0.1));
    border: 1px solid rgba(167, 119, 227, 0.35);
    color: #c9a0f5;
}

.qm-badge-orb-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(167, 119, 227, 0.5));
}

/* ---- Icon Wrap ---- */
.qm-card-icon-wrap {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: var(--qm-icon-bg, rgba(167, 119, 227, 0.12));
    border: 1px solid var(--qm-icon-border, rgba(167, 119, 227, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.qm-card:hover .qm-card-icon-wrap {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 0 24px rgba(167, 119, 227, 0.2);
}

.qm-card-emoji {
    font-size: 1.8rem;
    line-height: 1;
}

/* ---- Card Title ---- */
.qm-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

/* ---- Reward Line ---- */
.qm-card-reward {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2ecc71;
}

.qm-card-reward i {
    font-size: 0.75rem;
    filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.4));
}

/* ---- Cost Display ---- */
.qm-card-cost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(167, 119, 227, 0.08);
    border: 1px solid rgba(167, 119, 227, 0.15);
    border-radius: 12px;
}

.qm-cost-orb-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(167, 119, 227, 0.4));
}

.qm-orb-cost {
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e2b3ff, #a777e3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- Card Buttons ---- */
.qm-card-btn {
    position: relative;
    width: 100%;
    margin-top: auto;
    padding: 13px 20px;
    border: none;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.4px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.qm-btn-ad {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    box-shadow: 0 6px 24px rgba(79, 172, 254, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.qm-btn-ad:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(79, 172, 254, 0.45),
        0 0 30px rgba(79, 172, 254, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.qm-btn-orbs {
    background: linear-gradient(135deg, #a777e3 0%, #7b44d4 50%, #6e3de7 100%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 6px 24px rgba(110, 61, 231, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: btnGradientShift 4s ease infinite;
}

.qm-btn-orbs:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(110, 61, 231, 0.45),
        0 0 30px rgba(167, 119, 227, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.qm-card-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Shimmer glow on buttons */
.qm-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 30%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.08) 70%,
            transparent 100%);
    transform: skewX(-25deg);
    pointer-events: none;
}

.qm-card-btn:hover .qm-btn-glow {
    animation: premiumShimmer 2s ease infinite;
}

/* ---- Sub-Modals (Ad Simulation & Not Enough Orbs) ---- */
.qm-submodal {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 18, 0.85);
    backdrop-filter: blur(12px);
    border-radius: 28px;
}

.qm-submodal.active {
    display: flex;
}

.qm-submodal-card {
    background: linear-gradient(170deg, rgba(30, 22, 48, 0.95) 0%, rgba(18, 14, 30, 0.98) 100%);
    border: 1px solid rgba(167, 119, 227, 0.2);
    border-radius: 20px;
    padding: 32px 28px;
    text-align: center;
    max-width: 340px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: qmSubSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes qmSubSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(12px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.qm-submodal-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 16px;
    border-radius: 14px;
    background: rgba(167, 119, 227, 0.12);
    border: 1px solid rgba(167, 119, 227, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #c9a0f5;
}

.qm-submodal-text {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 20px;
    line-height: 1.5;
}

.qm-submodal-actions {
    display: flex;
    gap: 10px;
}

.qm-sub-btn {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.qm-sub-primary {
    background: linear-gradient(135deg, #a777e3 0%, #7b44d4 100%);
    color: #fff;
    box-shadow: 0 6px 20px rgba(110, 61, 231, 0.3);
}

.qm-sub-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(110, 61, 231, 0.4);
}

.qm-sub-cancel {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
}

.qm-sub-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

/* ---- Responsive: Mobile Stacked ---- */
@media (max-width: 640px) {
    .qm-overlay {
        padding: 16px;
        align-items: flex-end;
    }

    .qm-modal {
        padding: 32px 22px 28px;
        border-radius: 24px 24px 16px 16px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .qm-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .qm-card-inner {
        min-height: auto;
        padding: 22px 18px 20px;
    }

    .qm-title {
        font-size: 1.35rem;
    }

    .qm-subtitle {
        font-size: 0.82rem;
    }

    .qm-header-icon {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
    }
}

/* =====================================================================
   PREMIUM ACCOUNT SETTINGS STYLES
   ===================================================================== */
.stg-account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
    margin-top: 10px;
}

@media (max-width: 850px) {
    .stg-account-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.stg-acc-card {
    background: rgba(14, 11, 22, 0.45);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(167, 119, 227, 0.12);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.stg-acc-card:hover {
    border-color: rgba(167, 119, 227, 0.25);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.7), 0 0 30px rgba(167, 119, 227, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.stg-acc-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2b3ff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    font-family: 'Outfit', sans-serif;
    text-shadow: 0 0 10px rgba(167, 119, 227, 0.3);
}

.stg-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.stg-input-icon {
    position: absolute;
    left: 14px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.88rem;
    pointer-events: none;
    transition: color 0.3s ease;
}

.stg-input-wrapper .stg-input {
    padding-left: 42px;
}

.stg-input-wrapper.password-wrapper .stg-input {
    padding-right: 42px;
    position: relative;
    z-index: 1;
}

.toggle-password {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    transition: color 0.2s ease, background 0.2s ease;
    padding: 0;
}

.toggle-password:hover {
    color: #e2b3ff;
    background: rgba(167, 119, 227, 0.1);
}

.stg-input-wrapper:focus-within .stg-input-icon {
    color: #a777e3;
}

.stg-acc-avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.stg-acc-avatar-glow {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(167, 119, 227, 0.22) 0%, transparent 70%);
    filter: blur(8px);
    z-index: 1;
    top: -10px;
    left: -10px;
    pointer-events: none;
}

.stg-acc-avatar-ring {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(167, 119, 227, 0.4);
    z-index: 2;
    position: relative;
}

.stg-acc-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #110e19;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fff;
    border: 2px solid #09090b;
    overflow: hidden;
}

.stg-acc-avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #a777e3;
    border: 2px solid #09090b;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    z-index: 3;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.stg-acc-avatar-edit-btn:hover {
    background: #6e8efb;
    transform: scale(1.1);
}

.stg-acc-tier-row {
    display: flex;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.stg-acc-tier-info,
.stg-acc-orbs-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stg-acc-tier-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.stg-acc-tier-badge {
    font-size: 0.85rem;
    font-weight: 700;
    color: #a777e3;
    display: flex;
    align-items: center;
    gap: 6px;
    text-shadow: 0 0 10px rgba(167, 119, 227, 0.3);
}

.stg-acc-tier-badge.premium {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.stg-acc-orbs-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #e2b3ff;
}

.stg-email-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

.stg-verify-email-btn {
    background: none;
    border: none;
    color: #a777e3;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.stg-verify-email-btn:hover {
    color: #6e8efb;
}

.stg-badge--unverified {
    background: rgba(255, 74, 74, 0.08);
    border: 1px solid rgba(255, 74, 74, 0.2);
    color: #ff4a4a;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stg-badge--verified {
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.stg-security-meta-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.stg-security-meta {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pw-strength-container {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pw-strength-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.pw-strength-fill {
    width: 0%;
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

.pw-strength-text {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
    color: rgba(255, 255, 255, 0.3);
}

/* Memory Manager Styles */
.memory-manager-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.memory-manager-panel {
    background: var(--surface-light);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.memory-manager-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.memory-header-info h2 {
    margin: 0 0 5px 0;
    font-size: 1.5rem;
}

.memory-subtitle {
    color: var(--text-secondary);
    margin: 0 0 10px 0;
    font-size: 0.95rem;
}

.memory-note {
    font-size: 0.8rem;
    color: #a777e3;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.memory-header-actions {
    display: flex;
    gap: 10px;
}

.memory-search-bar {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.memory-search-bar input {
    flex-grow: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    outline: none;
}

.memory-bulk-actions {
    padding: 10px 20px;
    background: rgba(255, 65, 108, 0.1);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.memory-buckets-container {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.memory-bucket {
    margin-bottom: 30px;
}

.memory-bucket-header {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.memory-bucket-header .bucket-count {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.memory-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.memory-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    position: relative;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}

.memory-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.memory-card.locked {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.05);
}

.memory-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.memory-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.memory-badge.ai {
    background: rgba(110, 142, 251, 0.2);
    color: #6e8efb;
}

.memory-badge.user {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}

.memory-card-value {
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 15px;
    flex-grow: 1;
    word-break: break-word;
}

.memory-card-meta {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.memory-card-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 12px;
}

.memory-card-actions button {
    flex-grow: 1;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: var(--text-primary);
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.8rem;
}

.memory-card-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
}

.memory-card-actions button.lock-btn:hover {
    color: #ffd700;
}

.memory-card-actions button.delete-btn:hover {
    color: #ff416c;
    background: rgba(255, 65, 108, 0.1);
}

.memory-checkbox {
    margin-right: 10px;
    cursor: pointer;
}

.memory-edit-panel {
    background: var(--surface-light);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    width: 100%;
    max-width: 500px;
}

.memory-bucket-content {
    transition: all 0.3s ease;
}

/* ===== Memory Manager Modal specific styling ===== */
.memory-manager-modal {
    max-width: 700px !important;
    text-align: left !important;
}

.memory-tab {
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
}

.memory-tab:hover {
    color: #e2b3ff !important;
    background: rgba(167, 119, 227, 0.05) !important;
}

.memory-tab.active {
    color: #e2b3ff !important;
    border-bottom-color: #a777e3 !important;
}

.memory-entry-card {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.memory-entry-card:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(167, 119, 227, 0.2) !important;
}

.lock-toggle-btn {
    transition: color 0.2s ease;
}

.lock-toggle-btn.locked {
    color: #ffd700 !important;
}

.lock-toggle-btn:hover {
    color: #e2b3ff !important;
}

.edit-entry-btn:hover {
    color: #6e8efb !important;
}

.delete-entry-btn:hover {
    color: #ff416c !important;
}

#confirm-modal-overlay {
    z-index: 10005 !important;
}

/* =====================================================================
   MOBILE HARDENING LAYER  (appended — overrides earlier rules safely)
   Goals: kill horizontal scroll/overflow, tighten sidebar drawer,
   enforce comfortable tap targets, prevent iOS input zoom.
   Scoped to phones/tablets so desktop is untouched.
   ===================================================================== */

/* --- 1. Global horizontal-overflow guard (all viewports) --- */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

#app,
.main-content,
.page {
    max-width: 100%;
    min-width: 0;
    /* allow flex/grid children to shrink instead of forcing scroll */
}

/* Media never pushes the layout wider than its container */
.page img,
.page video,
.message-content img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {

    /* --- 2. Long words / URLs in chat wrap instead of overflowing --- */
    .message-content,
    .card-desc,
    .card-info .name,
    .chat-character-info .details .name {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* --- 3. Fixed-width offenders that caused sideways scroll --- */
    .shop-hero-balance-pill {
        min-width: 0;
        width: 100%;
        padding: 16px 18px;
        flex-wrap: wrap;
    }

    .shop-hero-section,
    .shop-hero-content-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    /* Card / grid layouts: never demand more than one column width */
    .featured-card {
        min-width: 78vw;
        max-width: 78vw;
    }

    .public-profile-grid,
    .public-panel-grid,
    .public-about-grid {
        grid-template-columns: 1fr;
    }

    /* Any auto-fill grid: drop its min track so it can't overflow */
    .character-grid,
    .premium-grid,
    [class*="-grid"] {
        min-width: 0;
    }

    /* Horizontal scroll rows (chips, macros, carousels): contain them */
    .category-tags,
    .category-filters,
    .rp-macros,
    .featured-carousel {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .category-tags::-webkit-scrollbar,
    .category-filters::-webkit-scrollbar,
    .rp-macros::-webkit-scrollbar,
    .featured-carousel::-webkit-scrollbar {
        display: none;
    }

    .featured-carousel {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        gap: 12px;
        padding-bottom: 12px;
    }

    /* Momentum-scroll rows shouldn't lift/scale their children on tap */
    .featured-card:hover {
        transform: none;
        box-shadow: none;
    }

    .featured-card:active {
        transform: scale(0.98);
    }

    /* --- 4. Sidebar drawer polish --- */
    .sidebar {
        width: min(86vw, 320px);
        max-width: 86vw;
        height: 100%;
        height: 100dvh;
        padding-top: max(20px, env(safe-area-inset-top, 20px));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Recent chats list shouldn't force the drawer taller than the screen */
    .recent-chats {
        min-height: 0;
    }

    /* --- 5. Comfortable tap targets (>=44px) --- */
    .nav-item,
    .sidebar-account-toggle,
    .account-menu-item,
    .super-create-btn,
    .sidebar-upgrade-btn,
    .filter-chip,
    .tag {
        min-height: 44px;
    }

    .mobile-menu-btn {
        width: 44px;
        height: 44px;
    }

    /* --- 6. Prevent iOS auto-zoom: inputs must be >=16px --- */
    input,
    textarea,
    select,
    .search-container input,
    .chat-input-area textarea {
        font-size: 16px;
    }

    /* --- 7. Chat header: keep avatar visible + all action icons reachable ---
       The header was a single non-wrapping row; the wide model selector plus
       admin-only buttons (bug + key) pushed Memory and Restart off-screen.
       Fix: let the header wrap, drop the model selector to its own full-width
       row, give the character info room to shrink, and enlarge the avatar. */
    .chat-header {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 6px;
        padding: 10px 12px;
    }

    .chat-header .glass-back-btn {
        order: 1;
        flex-shrink: 0;
    }

    /* Character identity: bigger avatar, name truncates instead of overflowing */
    .chat-character-info {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        gap: 10px;
    }

    .chat-character-info img {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
    }

    .message-avatar,
    .message-avatar img,
    .message-avatar .avatar {
        width: 40px;
        height: 40px;
    }


    .chat-character-info .details {
        min-width: 0;
    }

    .chat-character-info .details .name {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }

    /* The empty flex spacer must not consume a whole wrap row */
    .chat-header>div[style*="flex-grow: 1"] {
        display: none !important;
    }

    /* Action icons (memory + restart, plus admin bug/key) sit together on the
       top row, right-aligned, and stay compact so all fit even for admins */
    .chat-header .icon-btn {
        order: 3;
        width: 38px;
        height: 38px;
        margin-right: 0 !important;
        margin-left: 2px !important;
        flex-shrink: 0;
    }

    /* Push the whole action cluster to the right edge regardless of how many
       dev buttons are visible. The character info takes all spare space, so
       every icon-btn that follows it lands hard against the right side. */
    .chat-character-info {
        margin-right: auto;
    }

    /* Model selector drops to its own full-width row below — no longer steals
       horizontal space from the Memory/Restart icons */
    #chat-model-selector {
        order: 4;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: 100%;
        height: 36px !important;
        margin-right: 0 !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================================
   DISCOVER PAGE — UI REFINEMENTS (appended; overrides above)
   ============================================================ */

/* --- Hero: calmer, more intentional --- */
.premium-hero {
    padding: 36px 44px;
    margin-bottom: 28px;
    gap: 40px;
    border: 1px solid rgba(167, 119, 227, 0.18);
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(167, 119, 227, 0.10), transparent 55%),
        radial-gradient(120% 140% at 100% 100%, rgba(110, 142, 251, 0.10), transparent 55%),
        rgba(16, 11, 24, 0.66);
}

.hero-orb {
    opacity: 0.38;
    filter: blur(70px);
}

.welcome-back-header {
    font-size: 3rem;
    line-height: 1.1;
    padding-top: 4px;
    margin-bottom: 14px;
    letter-spacing: -1.5px;
    background: linear-gradient(105deg, #ffffff 18%, #d9bcff 60%, #9db4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.08rem;
    max-width: 46ch;
    color: rgba(255, 255, 255, 0.66);
    margin-bottom: 24px;
}

/* Hero primary CTA */
.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border: none;
    border-radius: 14px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    box-shadow: 0 8px 24px rgba(110, 90, 220, 0.35);
    transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.25s ease;
}

.hero-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(110, 90, 220, 0.5);
}

.hero-cta-primary:active {
    transform: translateY(0);
}

.hero-cta-primary i {
    font-size: 0.9rem;
}

/* Hero stats: tighter, with a divider rule */
.hero-stats {
    align-items: stretch;
    gap: 24px;
    padding: 22px 30px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
}

.stat-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.stat-item {
    justify-content: center;
    gap: 6px;
}

.stat-value {
    font-size: 2rem;
    background: linear-gradient(135deg, #ffffff, #d9bcff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.5);
}

/* --- Section header + scrollable filter rail --- */
.premium-section-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.premium-section-header h2 {
    font-family: 'Outfit', 'Inter', sans-serif;
    letter-spacing: -0.3px;
}

/* Filter chips wrap onto their own full-width row so every genre is visible */
.category-filters {
    position: relative;
    flex: 1 1 100%;
    width: 100%;
    flex-wrap: wrap;
    gap: 9px;
    padding: 4px 0 2px;
    margin-top: 4px;
}

.category-filters::-webkit-scrollbar {
    display: none;
}

/* Mobile: chip filters become a single-line snap slider instead of stacking
   into many wrapped rows. Negative margins let it bleed to the screen edges,
   and an edge mask fades chips as they scroll off — a polished "more here" cue.
   Declared after the desktop wrap rule above so it wins by source order. */
@media (max-width: 768px) {
    .category-filters {
        flex-wrap: nowrap;
        scroll-snap-type: x proximity;
        gap: 8px;
        padding: 4px 16px 6px;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 20px), transparent 100%);
    }

    .filter-chip {
        scroll-snap-align: start;
    }
}

.filter-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 0.86rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.filter-chip i {
    font-size: 0.78rem;
    opacity: 0.85;
}

.filter-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.filter-chip.active {
    background: linear-gradient(135deg, rgba(167, 119, 227, 0.28), rgba(110, 142, 251, 0.22));
    border-color: rgba(167, 119, 227, 0.6);
    color: #fff;
    box-shadow: 0 4px 16px rgba(167, 119, 227, 0.22);
}

.filter-chip.active i {
    opacity: 1;
    color: #e9d4ff;
}

/* Count badge on genre filter chips (souls-per-genre) */
.filter-chip .chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary, #a1a1aa);
}

.filter-chip.active .chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* --- Accessible focus states (keyboard nav) --- */
.filter-chip:focus-visible,
.hero-cta-primary:focus-visible,
.character-card:focus-visible {
    outline: 2px solid #c9a6ff;
    outline-offset: 3px;
}

/* --- Empty / no-results state --- */
.character-grid .discover-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 56px 20px;
    color: var(--text-secondary);
}

.character-grid .discover-empty .empty-icon {
    font-size: 2.4rem;
    margin-bottom: 16px;
    opacity: 0.35;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.6;
}

.character-grid .discover-empty .empty-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.character-grid .discover-empty .empty-sub {
    font-size: 0.88rem;
    opacity: 0.7;
}

/* --- Card polish --- */
.card-title-bar {
    font-size: 0.92rem;
    padding: 11px 14px;
    background: rgba(0, 0, 0, 0.4);
}

.card-stat-badge {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(217, 70, 239, 0.3);
}

.card-play-hint {
    color: rgba(240, 171, 252, 0.7);
}

/* --- Responsive hero --- */
@media (max-width: 900px) {
    .premium-hero {
        padding: 24px 22px;
        gap: 22px;
    }

    .welcome-back-header {
        font-size: 2.3rem;
    }

    .hero-stats {
        width: 100%;
        justify-content: space-around;
    }
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce) {

    .hero-orb,
    .character-card::before,
    .card-title-text.card-title-auto-marquee,
    body::before,
    body::after {
        animation: none !important;
    }

    .character-card,
    .filter-chip,
    .hero-cta-primary,
    .card-hero-wrap img {
        transition: none !important;
    }
}

/* ── Shop Rewards section (watch-ad-to-unlock, SFW page) ───────────── */
/* ── Reward chip (compact hero trigger) ───────────────────────────── */
.reward-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
    padding: 12px 16px;
    cursor: pointer;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(167, 119, 227, 0.30);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(110, 142, 251, 0.14), transparent 60%),
        rgba(255, 255, 255, 0.03);
    color: #fff;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.reward-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 119, 227, 0.55);
    box-shadow: 0 12px 28px -14px rgba(110, 142, 251, 0.8);
}

.reward-chip-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    box-shadow: 0 6px 16px -6px rgba(167, 119, 227, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.reward-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-weight: 700;
    font-size: 0.95rem;
}

.reward-chip-sub {
    font-weight: 500;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
}

.reward-chip-arrow {
    margin-left: auto;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    transition: transform 0.2s ease;
}

.reward-chip:hover .reward-chip-arrow {
    transform: translateX(3px);
    color: #c9b6ff;
}

/* ── Earn Orbs chip — sits above the reward chip, routes to Quests ── */
.earn-orbs-chip .reward-chip-icon {
    background: linear-gradient(135deg, #f7b733, #fc4a1a);
    box-shadow: 0 6px 16px -6px rgba(247, 183, 51, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.earn-orbs-chip {
    border-color: rgba(247, 183, 51, 0.30);
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(247, 183, 51, 0.14), transparent 60%),
        rgba(255, 255, 255, 0.03);
}

.earn-orbs-chip:hover {
    border-color: rgba(247, 183, 51, 0.55);
    box-shadow: 0 12px 28px -14px rgba(247, 183, 51, 0.8);
}

.earn-orbs-chip:hover .reward-chip-arrow {
    color: #ffd479;
}

/* ═══ Quests page ══════════════════════════════════════════════════════
   Extends the glass/orb shop-card language. Per-card accent is passed via the
   inline --quest-accent custom property so each quest gets its own hue while
   sharing one structural style. */

/* The Quests hero reuses the shop hero shell but carries less content, so it
   gets a tighter, shorter frame instead of the full marketing-size block. */
.quests-hero-section {
    padding: 30px 40px;
    margin-bottom: 24px;
}

.quests-hero-section .shop-hero-title {
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin: 8px 0 0;
}

.quests-hero-section .hero-subtitle {
    max-width: 46ch;
}

/* Two-class selector so this beats `.shop-tab-panel.active { display:block }`
   — otherwise the flex gap between Daily and Weekly never applies. */
.shop-tab-panel.quests-board {
    display: block;
}

.quests-section {
    position: relative;
}

/* A following section (Weekly after Daily) breaks away with a divider so the
   two groups read as distinct. Owns the full inter-section spacing on its
   own — no flex gap stacking on top. */
.quests-section+.quests-section {
    margin-top: 48px;
    padding-top: 44px;
    border-top: 1px solid rgba(167, 119, 227, 0.12);
}

/* Hero summary chips */
.quests-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.quests-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(230, 230, 245, 0.9);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(6px);
}

.quests-summary-chip i {
    font-size: 0.85rem;
}

.quests-summary-chip.is-ready {
    color: #fff;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.32), rgba(167, 139, 250, 0.22));
    border-color: rgba(167, 139, 250, 0.5);
    box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.7);
    animation: quests-ready-pulse 2.4s ease-in-out infinite;
}

.quests-summary-chip.is-ready i {
    color: #d7c4ff;
}

@keyframes quests-ready-pulse {

    0%,
    100% {
        box-shadow: 0 6px 18px -8px rgba(124, 58, 237, 0.7);
    }

    50% {
        box-shadow: 0 6px 26px -6px rgba(167, 139, 250, 0.95);
    }
}

/* Section headers */
.quests-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.quests-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.quests-section-title h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: #fff;
    margin: 0;
}

.quests-section-title p {
    font-size: 0.82rem;
    color: rgba(190, 190, 205, 0.72);
    margin: 2px 0 0;
}

.quests-section-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.15rem;
    color: #fff;
}

.quests-section-icon--daily {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    box-shadow: 0 8px 22px -8px rgba(124, 58, 237, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.quests-section-icon--weekly {
    background: linear-gradient(135deg, #0ea5e9, #34d399);
    box-shadow: 0 8px 22px -8px rgba(14, 165, 233, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.quests-reset-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(210, 210, 225, 0.82);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.quests-reset-pill i {
    opacity: 0.75;
}

.quests-grid {
    align-items: stretch;
}

/* ── Quest card ─────────────────────────────────────────────────────── */
/* Quest cards reuse .shop-card's frame/glow but not its .shop-card-inner
   wrapper, so the glass surface + padding are applied here directly. */
.quest-card {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 22px 22px 20px;
    background:
        radial-gradient(140% 90% at 50% -10%, color-mix(in srgb, var(--quest-accent, #a78bfa) 12%, transparent) 0%, transparent 55%),
        linear-gradient(168deg, rgba(38, 28, 60, 0.82) 0%, rgba(22, 16, 36, 0.92) 46%, rgba(15, 11, 24, 0.95) 100%);
    backdrop-filter: blur(22px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 10px 28px -12px rgba(0, 0, 0, 0.55),
        0 2px 6px -2px rgba(0, 0, 0, 0.4);
}

.quest-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quest-card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 1.25rem;
    color: #fff;
    background: linear-gradient(135deg, var(--quest-accent, #a78bfa), color-mix(in srgb, var(--quest-accent, #a78bfa) 55%, #000));
    box-shadow: 0 8px 20px -9px color-mix(in srgb, var(--quest-accent, #a78bfa) 90%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.quest-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px 6px 7px;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
    color: #ffe9a8;
    background: linear-gradient(135deg, rgba(247, 183, 51, 0.18), rgba(252, 74, 26, 0.12));
    border: 1px solid rgba(247, 183, 51, 0.35);
    white-space: nowrap;
}

.quest-reward-orb {
    width: 18px;
    height: 18px;
    filter: drop-shadow(0 1px 3px rgba(247, 183, 51, 0.6));
}

/* Progress bar */
.quest-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.quest-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.quest-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--quest-accent, #a78bfa), color-mix(in srgb, var(--quest-accent, #a78bfa) 60%, #fff));
    box-shadow: 0 0 10px -1px color-mix(in srgb, var(--quest-accent, #a78bfa) 85%, transparent);
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.quest-progress-label {
    font-size: 0.76rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(210, 210, 225, 0.9);
    white-space: nowrap;
}

.quest-card-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    color: rgba(185, 185, 205, 0.7);
}

.quest-card-hint i {
    color: var(--quest-accent, #a78bfa);
    font-size: 0.72rem;
}

.quest-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 4px;
}

.quest-claim-btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* ── Card states ────────────────────────────────────────────────────── */
/* Locked: goal not yet met — muted, non-glowing. */
.quest-card.is-locked .quest-claim-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(215, 215, 230, 0.75);
    cursor: default;
    box-shadow: none;
}

/* Claimable: goal met — the card lifts and the button glows to pull the eye. */
.quest-card.is-claimable {
    border-color: color-mix(in srgb, var(--quest-accent, #a78bfa) 55%, transparent);
    box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--quest-accent, #a78bfa) 90%, transparent);
}

.quest-card.is-claimable .quest-claim-btn {
    background: linear-gradient(135deg, var(--quest-accent, #a78bfa), color-mix(in srgb, var(--quest-accent, #a78bfa) 60%, #000));
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--quest-accent, #a78bfa) 90%, transparent);
    animation: quest-claim-breathe 2.2s ease-in-out infinite;
}

.quest-card.is-claimable .quest-claim-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

@keyframes quest-claim-breathe {

    0%,
    100% {
        box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--quest-accent, #a78bfa) 90%, transparent);
    }

    50% {
        box-shadow: 0 8px 30px -6px color-mix(in srgb, var(--quest-accent, #a78bfa) 100%, transparent);
    }
}

/* Claimed: done for the period — dimmed, checkmark, green button. */
.quest-card.is-claimed {
    opacity: 0.72;
}

.quest-card.is-claimed .quest-card-icon {
    filter: saturate(0.7);
}

.quest-card.is-claimed .quest-claim-btn {
    background: rgba(52, 211, 153, 0.14);
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #6ee7b7;
    cursor: default;
    box-shadow: none;
}

/* Claim celebration flash */
.quest-card.quest-just-claimed {
    animation: quest-claimed-flash 0.9s ease-out;
}

@keyframes quest-claimed-flash {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.03);
        box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.5);
    }

    100% {
        transform: scale(1);
    }
}

/* Orb burst confetti */
.quest-burst {
    position: absolute;
    top: 32px;
    left: 32px;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 3;
}

.quest-burst-orb {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, #f7b733 60%, #fc4a1a);
    box-shadow: 0 0 8px rgba(247, 183, 51, 0.8);
    animation: quest-burst-fly 0.85s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes quest-burst-fly {
    0% {
        transform: translate(0, 0) scale(0.6);
        opacity: 1;
    }

    100% {
        transform: translate(var(--bx, 0), var(--by, 0)) scale(1);
        opacity: 0;
    }
}

/* Skeleton loading */
.quest-card--skeleton {
    pointer-events: none;
}

.quest-skeleton-icon,
.quest-skeleton-line,
.quest-skeleton-bar {
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    background-size: 200% 100%;
    animation: quest-skeleton-shimmer 1.4s ease-in-out infinite;
}

.quest-skeleton-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
}

.quest-skeleton-line {
    height: 14px;
    width: 70%;
    margin-top: 6px;
}

.quest-skeleton-line.short {
    width: 45%;
}

.quest-skeleton-bar {
    height: 8px;
    width: 100%;
    margin-top: 10px;
    border-radius: 999px;
}

@keyframes quest-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.quests-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: rgba(190, 190, 205, 0.7);
    font-size: 0.9rem;
    padding: 28px 12px;
}

@media (prefers-reduced-motion: reduce) {

    .quests-summary-chip.is-ready,
    .quest-card.is-claimable .quest-claim-btn,
    .quest-card.quest-just-claimed,
    .quest-progress-fill,
    .quest-skeleton-icon,
    .quest-skeleton-line,
    .quest-skeleton-bar {
        animation: none;
        transition: none;
    }
}

/* ── Reward modal (ad plays here) ─────────────────────────────────── */
.reward-modal {
    max-width: 460px;
    text-align: center;
}

.reward-modal-icon {
    background: linear-gradient(135deg, #6e8efb, #a777e3) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px -8px rgba(167, 119, 227, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.reward-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.reward-watch-btn,
.reward-return-btn {
    position: relative;
    border: none;
    cursor: pointer;
    border-radius: 14px;
    padding: 15px 26px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.reward-watch-btn {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    box-shadow: 0 10px 26px -8px rgba(110, 142, 251, 0.8);
}

.reward-watch-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -8px rgba(110, 142, 251, 0.95);
}

.reward-watch-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

/* Sheen sweep on hover */
.reward-btn-shine {
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.reward-watch-btn:hover:not(:disabled) .reward-btn-shine {
    left: 130%;
}

.reward-return-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
}

.reward-return-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.25);
}

.reward-watch-btn:disabled {
    filter: saturate(0.6) brightness(0.85);
    cursor: default;
    box-shadow: none;
}

/* The ad slot must NOT render when hidden — the class display rule would
   otherwise override the [hidden] attribute and show an empty box. */
.reward-ad-slot[hidden] {
    display: none !important;
}

.reward-ad-slot {
    min-height: 120px;
    width: 100%;
    margin-top: 18px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.reward-ad-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.reward-ad-placeholder i {
    font-size: 1.6rem;
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .reward-btn-shine {
        display: none;
    }
}

/* ── Settings toggle rows (mature-content prefs) ──────────────────── */
.stg-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    margin-top: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
}

.stg-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stg-toggle-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #fff;
}

.stg-toggle-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.4;
}

.stg-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
}

.stg-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.stg-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    transition: background 0.25s ease;
}

.stg-switch-slider::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s ease;
}

.stg-switch input:checked+.stg-switch-slider {
    background: linear-gradient(135deg, #6e8efb, #a777e3);
}

.stg-switch input:checked+.stg-switch-slider::before {
    transform: translateX(20px);
}

.stg-switch input:disabled {
    cursor: not-allowed;
}

.stg-switch input:disabled+.stg-switch-slider {
    opacity: 0.4;
}

/* =====================================================================
   TABLET TAP-TARGET COVERAGE  (769px–1024px)
   The mobile hardening layer enforces >=44px tap targets only at
   <=768px, so tablets and landscape phones kept desktop sizing. This
   fills that gap with the SAME token-driven minimum (--tap-min), and
   only in the tablet band so desktop (>=1025px) is untouched.
   ===================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {

    .nav-item,
    .sidebar-account-toggle,
    .account-menu-item,
    .super-create-btn,
    .sidebar-upgrade-btn,
    .filter-chip,
    .tag,
    .icon-btn,
    .glass-back-btn,
    .mobile-menu-btn {
        min-height: var(--tap-min, 44px);
    }

    .icon-btn,
    .glass-back-btn,
    .mobile-menu-btn {
        min-width: var(--tap-min, 44px);
    }
}

/* =====================================================================
   PLUS UPGRADE CELEBRATION  —  full-screen "Welcome to Loom Plus"
   Shown once when the dashboard loads with ?upgraded=1 after a
   successful Razorpay payment. Confetti + a glassy welcome card.
   ===================================================================== */
.plus-celebrate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 40%, rgba(167, 119, 227, 0.28), rgba(10, 8, 20, 0.82) 70%);
    backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.plus-celebrate.visible {
    opacity: 1;
    visibility: visible;
}

/* The welcome card */
.plus-celebrate-card {
    position: relative;
    z-index: 2;
    max-width: 440px;
    width: 100%;
    text-align: center;
    padding: 44px 36px 40px;
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(38, 30, 60, 0.92), rgba(22, 18, 38, 0.94));
    border: 1px solid rgba(167, 119, 227, 0.45);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(167, 119, 227, 0.25);
    transform: scale(0.8) translateY(20px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.plus-celebrate.visible .plus-celebrate-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.plus-celebrate-badge {
    width: 88px;
    height: 88px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: #fff;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    box-shadow: 0 0 0 8px rgba(167, 119, 227, 0.12), 0 12px 34px rgba(110, 142, 251, 0.45);
    animation: plusBadgePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes plusBadgePop {
    0% {
        transform: scale(0) rotate(-45deg);
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

.plus-celebrate-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c9a9f0;
    margin-bottom: 10px;
}

.plus-celebrate-title {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    background: linear-gradient(135deg, #fff, #d8bbff 55%, #6e8efb);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d8bbff;
}

.plus-celebrate-sub {
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 28px;
}

.plus-celebrate-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 32px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    box-shadow: 0 10px 28px rgba(110, 142, 251, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plus-celebrate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(110, 142, 251, 0.55);
}

/* Confetti layer */
.plus-celebrate-confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.plus-confetti-piece {
    position: absolute;
    top: -12px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: plusConfettiFall linear forwards;
}

@keyframes plusConfettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translateY(102vh) rotate(720deg);
        opacity: 0.9;
    }
}

@media (prefers-reduced-motion: reduce) {

    .plus-celebrate,
    .plus-celebrate .plus-celebrate-card {
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .plus-celebrate-card {
        transform: none;
    }

    .plus-celebrate-badge {
        animation: none;
    }

    .plus-confetti-piece {
        display: none;
    }
}

/* ===== SUBSCRIPTION TAB ===== */
.sub-plan-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sub-plan-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 1.4rem;
    color: #a1a1aa;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sub-plan-card.is-plus .sub-plan-icon {
    color: #ffcf5c;
    background: rgba(255, 199, 92, 0.12);
    border-color: rgba(255, 199, 92, 0.3);
}

.sub-plan-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.sub-plan-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sub-plan-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.sub-plan-status i {
    font-size: 0.5rem;
    color: #4ade80;
}

.sub-plan-status.expired i {
    color: #a1a1aa;
}

.sub-renew-btn {
    justify-content: center;
    white-space: nowrap;
}

.sub-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.sub-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(167, 119, 227, 0.1);
}

.sub-detail-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.sub-detail-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sub-expiry-bar-wrap {
    margin-top: 18px;
}

.sub-expiry-bar {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.sub-expiry-bar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    transition: width 0.4s ease;
}

.sub-expiry-bar-fill.low {
    background: linear-gradient(135deg, #fbbf24, #f97316);
}

.sub-plan-note {
    margin-top: 16px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.sub-perks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.sub-perk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(167, 119, 227, 0.1);
}

.sub-perk-item i {
    color: #a777e3;
    font-size: 1rem;
    flex: 0 0 auto;
}

.sub-perk-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.sub-perk-time {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.sub-perks-empty {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 14px;
}

@media (max-width: 640px) {
    .sub-detail-grid {
        grid-template-columns: 1fr;
    }

    .sub-renew-btn {
        margin-left: 0 !important;
        width: 100%;
    }

    .sub-plan-head {
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Cosmetics — avatar frames + title badges (bought with Orbs)
   Frames are pure CSS applied via .avatar-frame--<id> on the avatar
   WRAPPER (.account-avatar, .public-profile-avatar, .message-avatar).
   Each frame draws its ring with ::after so it never clashes with the
   sidebar avatar's existing ::before glow. border-radius:inherit keeps
   the ring matching whatever shape the surface uses (circle or rounded
   rect).
   ═══════════════════════════════════════════════════════════════════ */

[class*="avatar-frame--"] {
    position: relative;
}

[class*="avatar-frame--"]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

/* The message-avatar wrapper is a rounded rect; give its ring rounded corners. */
.message-avatar[class*="avatar-frame--"]::after {
    border-radius: 20px;
}

/* ─────────────────────────────────────────────────────────────────────
   Avatar frames — pure-CSS rings drawn on the ::after (and, for the showier
   tiers, ::before) of any wrapper carrying `.avatar-frame--<id>`. Ordered by
   tier: calm static rings at the bottom, motion-forward auras at the top.
   Motion is frozen under prefers-reduced-motion (see block at end).
   ───────────────────────────────────────────────────────────────────── */

/* Ancient Guardian (common) — weathered brushed steel, a faint living sheen. */
.avatar-frame--slate-ring::after {
    box-shadow: 0 0 0 2px #8a93a6, 0 0 0 4px rgba(199, 206, 219, 0.45), inset 0 0 6px rgba(199, 206, 219, 0.25);
}

/* Tidecaller (rare) — deep-sea cyan halo that breathes. */
.avatar-frame--aqua-pulse::after {
    box-shadow: 0 0 0 2px #39d3ff, 0 0 10px 2px rgba(57, 211, 255, 0.55);
    animation: cosmeticAquaPulse 2.6s ease-in-out infinite;
}

@keyframes cosmeticAquaPulse {

    0%,
    100% {
        box-shadow: 0 0 0 2px #39d3ff, 0 0 8px 1px rgba(57, 211, 255, 0.4);
    }

    50% {
        box-shadow: 0 0 0 2px #6e8efb, 0 0 16px 4px rgba(57, 211, 255, 0.7);
    }
}

/* Cinderborn (rare) — embers that never quite die, a warm flicker. */
.avatar-frame--ember-aura::after {
    box-shadow: 0 0 0 2px #ff7a45, 0 0 12px 3px rgba(255, 122, 69, 0.55);
    animation: cosmeticEmber 3s ease-in-out infinite;
}

@keyframes cosmeticEmber {

    0%,
    100% {
        box-shadow: 0 0 0 2px #ff7a45, 0 0 9px 2px rgba(255, 122, 69, 0.45);
    }

    50% {
        box-shadow: 0 0 0 2px #ffb347, 0 0 18px 5px rgba(255, 159, 71, 0.7);
    }
}

/* Forest Spirit (epic) — a living emerald conic ring in slow rotation. */
.avatar-frame--verdant-vine::after {
    inset: -4px;
    background: conic-gradient(from 0deg, #37d67a, #a8e063, #37d67a, #1f9d5a, #37d67a);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 6px rgba(55, 214, 122, 0.45));
    animation: cosmeticSpin 6s linear infinite;
}

/* Sovereign (epic) — polished gold with a sweeping specular glint. */
.avatar-frame--gold-ring::after {
    inset: -4px;
    background: conic-gradient(from 0deg, #b8860b, #f6c453, #fff4cf, #f6c453, #b8860b);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(246, 196, 83, 0.55));
    animation: cosmeticSpin 5.5s linear infinite;
}

/* Void Walker (legendary) — rotating aurora conic ring + a soft outer glow.
   ::after is the crisp masked ring; ::before is the diffuse bloom behind it.
   The bloom is suppressed on .account-avatar, whose own ::before drives the
   sidebar hover glow — the crisp ::after ring still shows there. */
.avatar-frame--astral-halo:not(.account-avatar)::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: conic-gradient(from 0deg, #a777e3, #6e8efb, #39d3ff, #a777e3);
    filter: blur(9px);
    opacity: 0.55;
    animation: cosmeticSpin 5s linear infinite;
}

.avatar-frame--astral-halo::after {
    inset: -4px;
    background: conic-gradient(from 0deg, #a777e3, #6e8efb, #39d3ff, #a777e3);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: cosmeticSpin 5s linear infinite;
}

/* Chrono Rift (mythic) — the apex. A hue-drifting aurora ring, a diffuse
   outer bloom, AND an orbiting spark dot on ::before. Three layers of motion,
   deliberately the busiest thing anyone can wear. The ::before spark/bloom is
   suppressed on the sidebar .account-avatar (see Void Walker note). */
.avatar-frame--chrono-rift::after {
    inset: -4px;
    background: conic-gradient(from 0deg, #ff5edb, #a777e3, #39d3ff, #ffcf5c, #ff5edb);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 8px rgba(255, 94, 219, 0.5));
    animation: cosmeticSpin 4.5s linear infinite, cosmeticHueDrift 8s linear infinite;
}

.avatar-frame--chrono-rift:not(.account-avatar)::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    /* A single bright spark riding the ring edge, plus a faint outer bloom. */
    background:
        radial-gradient(circle at 50% 0%, #fff 0, #ffcf5c 2px, transparent 4px),
        conic-gradient(from 0deg, transparent, rgba(255, 94, 219, 0.4), transparent 40%);
    filter: blur(0.4px) drop-shadow(0 0 6px rgba(255, 207, 92, 0.9));
    animation: cosmeticSpin 3s linear infinite reverse;
}

/* Shared rotation keyframe reused by every rotating-ring frame. */
@keyframes cosmeticSpin {
    to {
        transform: rotate(360deg);
    }
}

/* Mythic-only hue rotation layered on top of the spin. */
@keyframes cosmeticHueDrift {
    to {
        filter: drop-shadow(0 0 8px rgba(255, 94, 219, 0.5)) hue-rotate(360deg);
    }
}

/* Astral Drift — static transparent fire frame. The stable `cosmic-orbit` id is
   retained so existing purchases/equips continue to work. The PNG is drawn by
   CSS only: no WebP playback, canvas, requestAnimationFrame, or injected DOM. */
.avatar-frame--cosmic-orbit::after {
    inset: -30%;
    border-radius: 0;
    background: url('assets/frames/Astral Drift/fire_sheet.png') center / contain no-repeat;
    filter: drop-shadow(0 0 7px rgba(255, 94, 0, 0.65));
}

/* Tighter overhang on small surfaces. */
.account-avatar.avatar-frame--cosmic-orbit::after,
.card-creator-avatar.avatar-frame--cosmic-orbit::after {
    inset: -22%;
}

/* ── Earned-only level frames (granted at Level 5 / Level 10) ──
   Pure CSS rings — no images, no JS animation renderer. Reuse the shared
   cosmeticSpin keyframe so they rotate like the other animated frames. */

/* Level 5 — Ascending Halo: a calm twin-tone teal→blue ring. */
.avatar-frame--level-5::after {
    inset: -4px;
    background: conic-gradient(from 0deg, #7fd4c1, #6e8efb, #7fd4c1);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 7px rgba(110, 142, 251, 0.5));
    animation: cosmeticSpin 6s linear infinite;
}
.avatar-frame--level-5:not(.account-avatar)::before {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(circle at 50% 0%, #fff 0, #7fd4c1 2px, transparent 4px);
    filter: blur(0.4px) drop-shadow(0 0 5px rgba(127, 212, 193, 0.9));
    animation: cosmeticSpin 4s linear infinite reverse;
}

/* Level 10 — Apex Crown: a radiant prismatic ring with a brighter bloom. */
.avatar-frame--level-10::after {
    inset: -5px;
    background: conic-gradient(from 0deg, #ffcf5c, #ff5edb, #39d3ff, #ffcf5c);
    padding: 3px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 9px rgba(255, 94, 219, 0.55));
    animation: cosmeticSpin 4s linear infinite, cosmeticHueDrift 8s linear infinite;
}
.avatar-frame--level-10:not(.account-avatar)::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    background:
        radial-gradient(circle at 50% 0%, #fff 0, #ffcf5c 2px, transparent 4px),
        conic-gradient(from 0deg, transparent, rgba(255, 207, 92, 0.45), transparent 40%);
    filter: blur(0.4px) drop-shadow(0 0 7px rgba(255, 207, 92, 0.95));
    animation: cosmeticSpin 2.5s linear infinite reverse;
}
.account-avatar.avatar-frame--level-5::after,
.card-creator-avatar.avatar-frame--level-5::after,
.account-avatar.avatar-frame--level-10::after,
.card-creator-avatar.avatar-frame--level-10::after {
    inset: -3px;
}

/* ── Title badge chip (next to a username) ── */
.user-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
    color: var(--title-color, #c9a0f5);
    background: color-mix(in srgb, var(--title-color, #c9a0f5) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--title-color, #c9a0f5) 45%, transparent);
    white-space: nowrap;
}

.user-title-badge i {
    font-size: 0.7em;
}

/* If a gradient username-style clips text on the name container, the badge is a
   child and would inherit the transparent fill — restore its own solid color. */
.user-title-badge {
    -webkit-text-fill-color: var(--title-color, #c9a0f5);
}

.user-title-badge--lg {
    font-size: 0.9rem;
    padding: 5px 14px;
    margin-left: 0;
}

/* ── Cosmetics shop tab ── */
.shop-cosmetics-intro {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 22px;
}

.shop-cosmetics-intro h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.shop-cosmetics-intro p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
}

.shop-cosmetics-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 26px 4px 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shop-cosmetics-heading i {
    color: #a777e3;
}

.shop-grid--cosmetics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Per-tier accent tokens — one source of truth shared by cosmetic cards,
   tier ribbons and inventory swatches so a rarity reads consistently. */
.cosmetic-tint--common {
    --tier-accent: #a9b2c4;
    --tier-glow: rgba(169, 178, 196, 0.35);
}

.cosmetic-tint--rare {
    --tier-accent: #6e8efb;
    --tier-glow: rgba(110, 142, 251, 0.45);
}

.cosmetic-tint--epic {
    --tier-accent: #c9a0f5;
    --tier-glow: rgba(167, 119, 227, 0.5);
}

.cosmetic-tint--legendary {
    --tier-accent: #ffcf5c;
    --tier-glow: rgba(246, 196, 83, 0.55);
}

.cosmetic-tint--mythic {
    --tier-accent: #ff5edb;
    --tier-glow: rgba(255, 94, 219, 0.6);
}

/* Mythic reads as iridescent, not flat pink: the ribbon + card wash shift hue. */
.cosmetic-tint--mythic .cosmetic-tier {
    background: linear-gradient(90deg, rgba(255, 94, 219, 0.25), rgba(57, 211, 255, 0.25), rgba(255, 207, 92, 0.25));
    color: #fff;
    animation: cosmeticHueSpin 6s linear infinite;
}

@keyframes cosmeticHueSpin {
    to {
        filter: hue-rotate(360deg);
    }
}

/* ── Cosmetic card (redesigned) ──
   One calm, tier-tinted card: big preview → title → desc → a SINGLE footer
   affordance. No competing cost pill + meter + lock button. */
.shop-card--cosmetic {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tier-accent, #a777e3) 14%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.shop-card--cosmetic:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tier-accent, #a777e3) 55%, transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--tier-accent, #a777e3) 25%, transparent);
}

.shop-card--cosmetic .shop-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 18px 16px 16px;
    flex: 1;
}

.shop-card--cosmetic .shop-card-title {
    margin-top: 2px;
}

.shop-card--cosmetic .shop-card-desc {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.45;
    margin-bottom: 4px;
    min-height: 2.3em;
}

.shop-card--cosmetic.is-equipped-card {
    border-color: rgba(55, 214, 122, 0.5);
    box-shadow: 0 0 0 1px rgba(55, 214, 122, 0.25), 0 14px 34px rgba(0, 0, 0, 0.4);
}

.shop-card--cosmetic.cosmetic-locked {
    opacity: 0.72;
}

/* Preview stage — a tier-tinted pedestal for the frame/title sample. */
.cosmetic-preview {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 118px;
    margin-bottom: 8px;
    border-radius: 14px;
    background:
        radial-gradient(80% 80% at 50% 40%, color-mix(in srgb, var(--tier-accent, #a777e3) 18%, transparent), transparent 70%);
}

.cosmetic-sample-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #4a4266, #2c2740);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.6rem;
}

.cosmetic-title-preview {
    transform: scale(1.05);
}

/* Rarity ribbon */
.cosmetic-tier {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--tier-accent, #c9a0f5);
    background: color-mix(in srgb, var(--tier-accent, #c9a0f5) 18%, rgba(0, 0, 0, 0.35));
    border: 1px solid color-mix(in srgb, var(--tier-accent, #c9a0f5) 40%, transparent);
}

/* Equipped flag (top-left, green) */
.cosmetic-equipped-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #7ef0a8;
    background: rgba(55, 214, 122, 0.16);
    border: 1px solid rgba(55, 214, 122, 0.45);
}

/* ── Footer: exactly one action ── */
.cosmetic-card-footer {
    width: 100%;
    margin-top: auto;
}

.cosmetic-action-btn {
    position: relative;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease, opacity 0.2s ease;
}

/* Buy: price + label, no separate cost pill. Label swaps to a lock when
   unaffordable (the .cosmetic-locked ancestor drives it). */
.cosmetic-buy-btn {
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, #a777e3 0%, #7b44d4 55%, #6e3de7 100%);
    box-shadow: 0 6px 18px rgba(110, 61, 231, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cosmetic-buy-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(110, 61, 231, 0.45);
}

.cosmetic-buy-btn:disabled {
    cursor: not-allowed;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

.cosmetic-buy-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.cosmetic-buy-orb {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

.cosmetic-buy-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cosmetic-lock-ico {
    display: none;
}

.shop-card--cosmetic.cosmetic-locked .cosmetic-buy-ico {
    display: none;
}

.shop-card--cosmetic.cosmetic-locked .cosmetic-lock-ico {
    display: inline;
}

/* Equip / Equipped */
.cosmetic-action-btn.is-equip {
    color: #d9c8ff;
    background: color-mix(in srgb, var(--tier-accent, #a777e3) 16%, transparent);
    border-color: color-mix(in srgb, var(--tier-accent, #a777e3) 45%, transparent);
}

.cosmetic-action-btn.is-equip:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--tier-accent, #a777e3) 26%, transparent);
}

.cosmetic-action-btn.is-equipped {
    color: #7ef0a8;
    background: rgba(55, 214, 122, 0.14);
    border-color: rgba(55, 214, 122, 0.45);
    cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════
   My Collection (inventory) tab
   ═══════════════════════════════════════════════════════════════════ */
.inv-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 24px;
    align-items: start;
}

/* Live preview card (sticky on wide screens) */
.inv-preview-card {
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 22px;
    border-radius: 20px;
    border: 1px solid rgba(167, 119, 227, 0.2);
    background:
        radial-gradient(120% 70% at 50% 0%, rgba(167, 119, 227, 0.14), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
}

.inv-preview-stage {
    display: grid;
    place-items: center;
    padding: 14px;
}

.inv-preview-avatar {
    width: 116px;
    height: 116px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
    overflow: visible;
}

.inv-preview-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.inv-preview-name {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.inv-preview-hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    max-width: 240px;
}

/* Right column: grouped collections */
.inv-collection {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.inv-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.inv-group-head h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
}

.inv-group-head h4 i {
    color: #a777e3;
}

.inv-count {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 600;
}

.inv-swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px;
}

/* One selectable item */
.inv-swatch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: transform 0.22s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.inv-swatch:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--tier-accent, #a777e3) 55%, transparent);
    background: rgba(255, 255, 255, 0.05);
}

.inv-swatch.is-active {
    border-color: rgba(55, 214, 122, 0.6);
    background: rgba(55, 214, 122, 0.08);
    box-shadow: 0 0 0 1px rgba(55, 214, 122, 0.35);
}

.inv-swatch-visual {
    display: grid;
    place-items: center;
    height: 56px;
}

.inv-swatch-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(135deg, #4a4266, #2c2740);
    font-size: 1.2rem;
}

.inv-swatch-none-visual {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
}

.inv-swatch-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.2;
    text-align: center;
}

.inv-swatch.is-active .inv-swatch-label {
    color: #fff;
}

.inv-swatch-check {
    position: absolute;
    top: 6px;
    right: 6px;
    color: #7ef0a8;
    font-size: 0.85rem;
}

.inv-empty {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    padding: 8px 2px;
}

.inv-empty strong {
    color: #c9a0f5;
}

/* Responsive: stack preview above the collection on narrow screens */
@media (max-width: 720px) {
    .inv-layout {
        grid-template-columns: 1fr;
    }

    .inv-preview-card {
        position: static;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   Username styles — a gradient (and optional animation) painted on the
   display name via `.username-style--<id>`. Gradient text uses
   background-clip:text; the color falls back to the accent if clip is
   unsupported. Applied wherever a name renders (sidebar, profile, chat,
   followers, previews). Motion frozen under prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════ */
[class*="username-style--"] {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-repeat: no-repeat;
    /* Slightly heavier weight helps thin gradient text stay legible. */
    font-weight: 800;
}

.username-style--oceanic {
    background-image: linear-gradient(90deg, #39d3ff, #6e8efb);
}

.username-style--sunset {
    background-image: linear-gradient(90deg, #ff7a45, #ffb347);
}

.username-style--emerald {
    background-image: linear-gradient(90deg, #37d67a, #a8e063);
}

.username-style--amethyst {
    background-image: linear-gradient(90deg, #a777e3, #c9a0f5);
}

.username-style--ashen {
    background-image: linear-gradient(90deg, #b8c0cc, #6d7688);
}

.username-style--rose-gold {
    background-image: linear-gradient(90deg, #ffb3a7, #f6c453);
    /* Elegant italic serif to match the soft, luxe blush-gold theme. */
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.username-style--toxic {
    background-image: linear-gradient(90deg, #9bff5c, #37d67a);
    /* Techy, radioactive-console feel. */
    font-family: 'Orbitron', 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.username-style--crimson {
    background-image: linear-gradient(90deg, #ff5e7a, #a71d31);
    /* Bold classical serif — regal, dramatic. */
    font-family: 'Cinzel', Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Aurora (legendary, animated) — a wide gradient that drifts across the name. */
.username-style--aurora {
    background-image: linear-gradient(90deg, #39d3ff, #a777e3, #ff5edb, #39d3ff);
    background-size: 300% 100%;
    /* Tile the wrapping gradient so the 0→300% scroll loops seamlessly (no pop). */
    background-repeat: repeat;
    animation: cosmeticAuroraName 4.5s linear infinite;
    will-change: background-position;
}

@keyframes cosmeticAuroraName {
    to {
        background-position: 300% 0;
    }
}

/* Spectrum (legendary, animated) — a wide rainbow that flows across the name. */
.username-style--spectrum {
    background-image: linear-gradient(90deg, #ff5e5e, #ffcf5c, #37d67a, #39d3ff, #a777e3, #ff5e5e);
    background-size: 300% 100%;
    background-repeat: repeat;
    animation: cosmeticAuroraName 4.5s linear infinite;
    will-change: background-position;
    /* Wide retro-futuristic face — reads as a marquee sign. */
    font-family: 'Audiowide', 'Outfit', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
}

/* Prismatic (mythic, animated) — bright iridescent light that bends across the name. */
.username-style--prismatic {
    background-image: linear-gradient(90deg, #ff5edb, #39d3ff, #9bff5c, #ffcf5c, #ff5edb);
    background-size: 300% 100%;
    background-repeat: repeat;
    animation: cosmeticAuroraName 4s linear infinite;
    filter: saturate(1.25);
    will-change: background-position;
    /* Sci-fi display face to sell the mythic capstone. */
    font-family: 'Orbitron', 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0.6px;
}

/* ═══════════════════════════════════════════════════════════════════
   Message bubble skins — theme the user's OWN chat bubbles via
   `.bubble-skin--<id>` on .message-content. Bot bubbles are untouched.
   Kept motion-light so long chats stay readable.
   ═══════════════════════════════════════════════════════════════════ */
.bubble-skin--parchment {
    background: linear-gradient(160deg, #efe3c6, #d9c69a) !important;
    color: #3a2f1a !important;
    border: 1px solid #cbb892 !important;
    box-shadow: 0 2px 8px rgba(120, 96, 48, 0.25) !important;
}

.bubble-skin--neon {
    background: rgba(20, 26, 48, 0.92) !important;
    color: #eaf6ff !important;
    border: 1px solid #39d3ff !important;
    box-shadow: 0 0 12px rgba(57, 211, 255, 0.5), inset 0 0 8px rgba(57, 211, 255, 0.18) !important;
}

.bubble-skin--ember {
    background: linear-gradient(160deg, #ff8a4b, #d1521e) !important;
    color: #fff6ee !important;
    border: 1px solid #ffb347 !important;
    box-shadow: 0 2px 12px rgba(209, 82, 30, 0.4) !important;
}

.bubble-skin--holographic {
    background: linear-gradient(120deg, rgba(167, 119, 227, 0.9), rgba(57, 211, 255, 0.9), rgba(255, 94, 219, 0.9)) !important;
    background-size: 200% 200% !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 2px 14px rgba(167, 119, 227, 0.45) !important;
    animation: cosmeticHoloShift 8s ease infinite !important;
}

@keyframes cosmeticHoloShift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Slate (common) — clean flat graphite, no motion. */
.bubble-skin--slate {
    background: linear-gradient(160deg, #404a63, #2b3346) !important;
    color: #e6ecf7 !important;
    border: 1px solid rgba(160, 175, 205, 0.28) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Royal (epic) — regal purple with a gilded hairline edge. */
.bubble-skin--royal {
    background: linear-gradient(160deg, #5b3fa0, #2c2f7a) !important;
    color: #f3ecff !important;
    border: 1px solid #f6c453 !important;
    box-shadow: 0 2px 12px rgba(91, 63, 160, 0.45) !important;
}

/* Prism (mythic, animated) — a living iridescent sweep, richer and faster than Holographic. */
.bubble-skin--prism {
    background: linear-gradient(120deg, rgba(255, 94, 219, 0.92), rgba(57, 211, 255, 0.92), rgba(155, 255, 92, 0.92), rgba(255, 207, 92, 0.92)) !important;
    background-size: 300% 300% !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    box-shadow: 0 2px 16px rgba(255, 94, 219, 0.5) !important;
    animation: cosmeticHoloShift 5s ease infinite !important;
}

/* ── Previews for the new cosmetic types (shop cards + inventory swatches) ── */
.cosmetic-username-preview {
    display: grid;
    place-items: center;
    width: 100%;
}

.cosmetic-username-sample {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cosmetic-bubble-preview {
    display: grid;
    place-items: center;
    width: 100%;
}

.cosmetic-bubble-sample,
.inv-preview-bubble {
    display: inline-block;
    padding: 9px 14px;
    border-radius: 14px 14px 4px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    /* Neutral base so an unskinned sample still looks like a bubble. */
    background: linear-gradient(135deg, #6e8efb, #5a7af0);
    color: #fff;
    max-width: 90%;
}

.inv-preview-bubble {
    margin-top: 2px;
}

/* Inventory swatch visuals for the two new types. */
.inv-swatch-visual--username .cosmetic-username-sample {
    font-size: 0.95rem;
}

.inv-swatch-visual--bubble .cosmetic-bubble-sample {
    padding: 6px 10px;
    font-size: 0.72rem;
    border-radius: 10px 10px 3px 10px;
}

/* ═══════════════════════════════════════════════════════════════════
   Accessibility — freeze all cosmetic motion for users who ask for it.
   Frames, animated usernames, holographic/prism bubbles and mythic ribbons
   all settle to a static first frame.
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    [class*="avatar-frame--"]::before,
    [class*="avatar-frame--"]::after,
    [class*="username-style--"],
    .bubble-skin--holographic,
    .bubble-skin--prism,
    .cosmetic-tint--mythic .cosmetic-tier {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   My Collection — standalone page shell
   Mirrors the shop page container padding and the tighter quests-style
   hero so the destination reads as a sibling of Discover/Diary/Shop.
   ═══════════════════════════════════════════════════════════════════ */
#page-collection {
    position: relative;
    overflow-y: auto;
    padding: 0 28px 60px;
}

/* Shorter hero than the shop's marketing block (it carries less content). */
.collection-hero-section {
    padding: 30px 40px;
    margin-bottom: 24px;
}

.collection-hero-section .shop-hero-title {
    font-size: clamp(2rem, 4vw, 2.9rem);
    margin: 8px 0 0;
}

.collection-hero-section .shop-hero-subtitle {
    font-size: 1.02rem;
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.66);
    margin: 12px 0 0;
    line-height: 1.55;
}

.collection-body {
    position: relative;
    z-index: 1;
}

/* "Unlock more" hero link → deep-links into the Cosmetics shop */
.collection-shop-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 16px;
    text-decoration: none;
    border: 1px solid rgba(167, 119, 227, 0.25);
    background: linear-gradient(160deg, rgba(40, 28, 70, 0.7), rgba(20, 14, 40, 0.9));
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(167, 119, 227, 0.08);
    transition: transform 0.22s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.collection-shop-link:hover {
    transform: translateY(-2px);
    border-color: rgba(167, 119, 227, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 40px rgba(167, 119, 227, 0.12);
}

.collection-shop-link-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #a777e3, #6e8efb);
}

.collection-shop-link-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.collection-shop-link-text strong {
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
}

.collection-shop-link-text small {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
}

.collection-shop-link>.fa-chevron-right {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
    transition: transform 0.22s ease, color 0.25s ease;
}

.collection-shop-link:hover>.fa-chevron-right {
    transform: translateX(3px);
    color: #c9a0f5;
}

/* On narrow screens the hero stacks; let the link sit full-width beneath. */
@media (max-width: 720px) {
    .collection-shop-link {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACHIEVEMENTS / LEVELS PAGE
   Permanent milestones + XP/level widget. Reuses the shop hero/particle
   backdrop for visual continuity with the rest of the orb economy.
   ═══════════════════════════════════════════════════════════════════ */

.achievements-hero-section .shop-hero-right {
    min-width: 300px;
    display: flex;
    justify-content: flex-end;
}

/* Level widget — sits in the hero's right column. A conic "prestige ring"
   wraps the level number so progress reads at a glance. */
.achievements-level-widget {
    position: relative;
    width: 100%;
    max-width: 300px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 94, 219, 0.14), transparent 62%),
        linear-gradient(160deg, rgba(167, 119, 227, 0.22), rgba(110, 142, 251, 0.08));
    border: 1px solid rgba(167, 119, 227, 0.34);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
}
/* Prestige ring — the conic gradient sweeps the XP arc around the level no. */
.alw-ring-wrap { display: flex; justify-content: center; }
.alw-ring {
    --xp-pct: 0;
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        conic-gradient(from -90deg,
            #ffcf5c 0%,
            #ff5edb calc(var(--xp-pct) * 1%),
            rgba(255, 255, 255, 0.07) calc(var(--xp-pct) * 1%),
            rgba(255, 255, 255, 0.07) 100%);
    box-shadow: 0 0 28px rgba(255, 94, 219, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.alw-ring::before {
    /* blurred halo that traces only the filled arc — glow grows with progress */
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        rgba(255, 207, 92, 0.4), rgba(255, 94, 219, 0.4) calc(var(--xp-pct) * 1%),
        transparent calc(var(--xp-pct) * 1%));
    filter: blur(10px);
    opacity: 0.75;
    z-index: -1;
}
.alw-ring-inner {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: radial-gradient(120% 120% at 50% 0%, rgba(40, 28, 66, 0.96), rgba(16, 11, 32, 0.98));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.alw-label {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 700;
}
.alw-level {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(120deg, #ffcf5c, #ff5edb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(255, 94, 219, 0.4));
}
.alw-cap {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.42);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.alw-xp-text {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.achievements-body {
    padding: 4px clamp(16px, 4vw, 40px) 64px;
}

/* Toolbar — section title on the left, status chips on the right. Gives the
   page a clear "Milestones" heading instead of cards floating in a void. */
.achievements-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 6px 0 26px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.achievements-toolbar-title h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.achievements-toolbar-title p {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: rgba(255, 255, 255, 0.5);
}
.achievements-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 28px;
}
.ach-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.78);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.ach-summary-chip i { color: #ffcf5c; }
.ach-summary-chip--ready {
    color: #fff;
    background: linear-gradient(120deg, rgba(167, 119, 227, 0.35), rgba(255, 94, 219, 0.25));
    border-color: rgba(255, 94, 219, 0.5);
    box-shadow: 0 0 16px rgba(255, 94, 219, 0.25);
}
.ach-summary-chip--ready i { color: #ff5edb; }

/* The grid is now a vertical stack of family sections, each with its own
   responsive card row — so the three journeys read as distinct groups. */
.achievements-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.achievements-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    padding: 48px 0;
    font-size: 0.95rem;
}

/* ── Family section header ── */
.ach-family { --fam: #a777e3; }
.ach-family-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
}
/* Fading hairline under each family header, tinted to that journey's accent —
   visually groups the cards beneath it without a heavy divider. */
.ach-family-head::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--fam) 55%, transparent), rgba(255, 255, 255, 0.06) 55%, transparent);
}
.ach-family-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 13px;
    font-size: 1.05rem;
    color: color-mix(in srgb, var(--fam) 78%, #fff);
    background: linear-gradient(150deg, color-mix(in srgb, var(--fam) 26%, transparent), color-mix(in srgb, var(--fam) 8%, rgba(255, 255, 255, 0.03)));
    border: 1px solid color-mix(in srgb, var(--fam) 40%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 16px color-mix(in srgb, var(--fam) 22%, transparent);
}
.ach-family-copy { flex: 1 1 auto; min-width: 0; }
.ach-family-label {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.ach-family-blurb {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.48);
}
.ach-family-count {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding: 4px 11px;
    border-radius: 999px;
    color: color-mix(in srgb, var(--fam) 70%, #fff);
    background: color-mix(in srgb, var(--fam) 12%, rgba(255, 255, 255, 0.04));
    border: 1px solid color-mix(in srgb, var(--fam) 30%, transparent);
}
/* Each journey gets its own hue so the three groups feel distinct at a glance:
   words spoken = emerald, souls met = cyan, souls created = violet. */
.ach-family:nth-of-type(1) { --fam: #37d67a; }
.ach-family:nth-of-type(2) { --fam: #38bdf8; }
.ach-family:nth-of-type(3) { --fam: #c084fc; }
.ach-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

/* Achievement card — built on .shop-card so it inherits the glass surface. */
.achievement-card {
    --ach-accent: #a78bfa;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    overflow: hidden;
    /* Explicit glass surface so cards read as tiles on the dark page, not as
       outlines floating in the void. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014));
    border: 1px solid rgba(255, 255, 255, 0.07);
    /* Staggered entrance — cards cascade in per family row. We keep the
       RESTING state visible (opacity:1) and use `backwards` fill so the hidden
       start-frame only applies during the per-card delay; once the animation
       ends there is no `forwards` fill pinning transform/opacity, so :hover
       lift still works (an animated fill would otherwise override it). */
    opacity: 1;
    transform: none;
    animation: achCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--ach-i, 0) * 45ms);
}
@keyframes achCardIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.achievement-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(120% 70% at 50% -20%, color-mix(in srgb, var(--ach-accent) 20%, transparent), transparent 65%);
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0.85;
}
.achievement-card:hover::before { opacity: 1; }
/* Thin accent line along the top edge — gives each card its own identity and
   a crisp "lit" edge that lifts it off the dark page. */
.achievement-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--ach-accent), transparent);
    opacity: 0.55;
    transition: opacity 0.3s ease, height 0.3s ease;
    pointer-events: none;
}
.achievement-card:hover::after { opacity: 1; }
.achievement-card-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.achievement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--ach-accent) 14%, rgba(255, 255, 255, 0.03));
    border: 1px solid color-mix(in srgb, var(--ach-accent) 38%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px color-mix(in srgb, var(--ach-accent) 26%, transparent);
}
.achievement-xp-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 4px 9px;
    border-radius: 999px;
    color: #ffd877;
    background: rgba(255, 207, 92, 0.12);
    border: 1px solid rgba(255, 207, 92, 0.28);
}
.achievement-xp-badge i { font-size: 0.62rem; }
.achievement-title {
    position: relative;
    margin: 0;
    font-size: 1.06rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
}
.achievement-desc {
    position: relative;
    margin: -4px 0 0;
    font-size: 0.83rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    min-height: 2.5em;
}
.achievement-progress {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top:2px;
}
.achievement-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}
.achievement-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ach-accent), color-mix(in srgb, var(--ach-accent) 55%, #fff));
    box-shadow: 0 0 10px color-mix(in srgb, var(--ach-accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.achievement-progress-text {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.5);
    align-self: flex-end;
}
.achievement-rewards {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.achievement-rewards > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
}
.ach-reward-orb { color: #d9c4ff; }
.ach-reward-orb i { color: #a777e3; font-size: 0.6rem; }
.ach-reward-cosmetic {
    color: #ffc2ec;
    background: rgba(255, 94, 219, 0.1);
    border-color: rgba(255, 94, 219, 0.28);
}
.ach-reward-cosmetic i { color: #ff5edb; }
.achievement-claim-btn {
    position: relative;
    margin-top: auto;
    padding: 11px 18px;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
}

/* Locked cards: calm, not a wall of gray. A faint frosted diagonal texture
   keeps the surface alive, and the icon/top-edge dim to read as "dormant"
   rather than broken. The button stays a quiet ghost. */
.achievement-card.is-locked {
    border-color: rgba(255, 255, 255, 0.06);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 9px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}
.achievement-card.is-locked::after { opacity: 0.2; }
.achievement-card.is-locked .achievement-icon {
    filter: grayscale(0.45) brightness(0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.achievement-card.is-locked:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 38px -16px rgba(0, 0, 0, 0.6);
}
.achievement-card.is-locked .achievement-claim-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: not-allowed;
}
.achievement-card.is-locked .achievement-progress-fill { opacity: 0.7; }

/* State variants. */
.achievement-card.is-claimable {
    border-color: color-mix(in srgb, var(--ach-accent) 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ach-accent) 35%, transparent),
        0 14px 40px -10px color-mix(in srgb, var(--ach-accent) 40%, transparent);
    animation: achCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards,
        achievementPulse 2.4s ease-in-out 0.6s infinite;
}
.achievement-card.is-claimable .achievement-claim-btn {
    background: linear-gradient(135deg, var(--ach-accent), color-mix(in srgb, var(--ach-accent) 50%, #6e8efb));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ach-accent) 45%, transparent);
}
@keyframes achievementPulse {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ach-accent) 40%, transparent), 0 10px 30px color-mix(in srgb, var(--ach-accent) 18%, transparent); }
    50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--ach-accent) 65%, transparent), 0 10px 40px color-mix(in srgb, var(--ach-accent) 34%, transparent); }
}
.achievement-card.is-claimed {
    /* "Earned" reads through the green edge + border + button; the body is
       gently settled (no whole-card desaturate, which looked like dead gray). */
    border-color: rgba(55, 214, 122, 0.28);
    background: linear-gradient(180deg, rgba(55, 214, 122, 0.06), rgba(255, 255, 255, 0.012));
}
.achievement-card.is-claimed::before { opacity: 0.4; }
.achievement-card.is-claimed::after {
    background: linear-gradient(90deg, transparent, rgba(55, 214, 122, 0.85), transparent);
    opacity: 0.6;
}
.achievement-card.is-claimed .achievement-icon {
    filter: saturate(0.6) brightness(0.95);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.achievement-card.is-claimed .achievement-title { color: rgba(255, 255, 255, 0.82); }
.achievement-card.is-claimed .achievement-claim-btn {
    background: rgba(55, 214, 122, 0.14);
    border: 1px solid rgba(55, 214, 122, 0.34);
    color: #7fe6a8;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    /* Entrance animation off → cards must be forced visible (base is opacity:0). */
    .achievement-card {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .achievement-card.is-claimable { animation: none; }
    .alw-xp-fill,
    .alw-ring,
    .achievement-progress-fill { transition: none; }
}

/* ── Public profile level badge (next to the display name) ── */
.profile-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.4;
    color: #ffcf5c;
    background: linear-gradient(120deg, rgba(255, 207, 92, 0.16), rgba(255, 94, 219, 0.14));
    border: 1px solid rgba(255, 207, 92, 0.4);
    box-shadow: 0 0 12px rgba(255, 207, 92, 0.25);
}
.profile-level-badge i { font-size: 0.66rem; }

/* ── Achievement unlock banner (top of screen, mid-chat nudge) ── */
.ach-unlock-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -140%);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(440px, calc(100vw - 24px));
    padding: 12px 14px 12px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30, 22, 48, 0.96), rgba(44, 28, 70, 0.96));
    border: 1px solid rgba(255, 94, 219, 0.45);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(167, 119, 227, 0.35);
    backdrop-filter: blur(14px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.ach-unlock-banner.visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.ach-unlock-banner-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 1.1rem;
    color: #ffcf5c;
    background: rgba(255, 207, 92, 0.14);
    border: 1px solid rgba(255, 207, 92, 0.35);
}
.ach-unlock-banner-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}
.ach-unlock-banner-copy strong {
    font-size: 0.92rem;
    color: #fff;
}
.ach-unlock-banner-copy span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.62);
}
.ach-unlock-banner-btn {
    flex: 0 0 auto;
    padding: 8px 14px;
}
.ach-unlock-banner-close {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ach-unlock-banner-close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
@media (max-width: 480px) {
    .ach-unlock-banner-copy span { display: none; }
}