/* ==========================================
   CARD ROYALE - MAIN CSS
   Variables, Layout Base, Componentes
   ========================================== */

:root {
    /* Colores */
    --primary: #f48fb1;
    --primary-dark: #ec6f9d;
    --secondary: #b8a4ff;
    --success: #8bd8bd;
    --danger: #ff7f8f;
    --warning: #ffd166;
    
    /* Rarezas */
    --legendary: #f7b955;
    --epic: #c39df6;
    --rare: #82c7f5;
    --common: #c8c3d9;
    
    /* Fondos */
    --app-shell-background: #fff7fb url('../assets/images/app-background-soft-v1.webp') center / cover fixed no-repeat;
    --bg-primary: #fff7fb;
    --bg-secondary: rgba(255, 255, 255, 0.78);
    --bg-tertiary: #ffeaf3;
    
    /* Texto */
    --text-primary: #5c4052;
    --text-secondary: #8f6d82;
    --text-muted: #b38fa5;
    
    /* Bordes */
    --border: #f3c8da;
    
    /* Espaciado */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    /* Tipografía */
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;
    
    /* Transiciones */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

.admin-only {
    display: none !important;
}

body.is-creator-user .admin-only {
    display: inline-flex !important;
}

.creator-only {
    display: none !important;
}

/* Administrar contenido: vista simplificada para creadoras */
body.is-creator-user:not(.is-princess-user) #admin-section .admin-tabs,
body.is-creator-user:not(.is-princess-user) #admin-section .admin-upload-panel,
body.is-creator-user:not(.is-princess-user) #admin-section .admin-preview-panel,
body.is-creator-user:not(.is-princess-user) #admin-section #admin-recent-section,
body.is-creator-user:not(.is-princess-user) #admin-section .admin-reader-dropzone,
body.is-creator-user:not(.is-princess-user) #admin-section #admin-upload-actions {
    display: none !important;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-reader-layout[data-admin-panel="cards"] {
    display: grid !important;
    gap: 18px;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-library {
    order: 3;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-library > summary {
    display: none;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-library-body {
    display: block !important;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    gap: 12px;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-item {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    padding: 10px;
    border-radius: 20px;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-item > img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 15px;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-mini-set-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

body.is-creator-user:not(.is-princess-user) #admin-section .admin-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px;
}

body.admin-pack-sheet-open { overflow: hidden; }

.creator-content-pack-showcase {
    display: grid;
    gap: 12px;
    order: 5;
    padding: 16px;
    border: 1px solid rgba(248, 114, 171, .28);
    border-radius: 24px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 16px 40px rgba(136,72,115,.08);
}

.creator-content-pack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 12px;
}

.creator-content-pack-card {
    position: relative;
    display: grid;
    gap: 7px;
    padding: 10px;
    border: 1px solid #f5c6da;
    border-radius: 20px;
    color: #604052;
    background: linear-gradient(155deg, #fff, #fff2f8);
    text-align: left;
    box-shadow: 0 10px 24px rgba(172,91,137,.1);
}

.creator-content-pack-card > img {
    width: 100%;
    aspect-ratio: 3 / 5;
    object-fit: contain;
    border-radius: 15px;
    background: #fff5fa;
}

.creator-content-pack-card strong { font-size: 12px; line-height: 1.2; }
.creator-content-pack-card small,
.admin-pack-sheet-head small { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #967187; font-size: 10px; }
.creator-content-pack-cost { display: inline-flex; align-items: center; gap: 3px; color: #c13b7e; font-weight: 900; }
.creator-content-pack-cost img { width: 17px; height: 17px; object-fit: contain; }
.creator-content-pack-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.creator-content-pack-badges span {
    padding: 4px 7px;
    border-radius: 999px;
    color: #c53f83;
    background: #ffe6f2;
    font-size: 9px;
    font-weight: 900;
}

.admin-pack-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(65,36,55,.34);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .22s ease;
}

.admin-pack-sheet-backdrop[hidden] { display: none !important; }
.admin-pack-sheet-backdrop.is-open { opacity: 1; }
.admin-pack-sheet {
    width: min(760px, 100%);
    max-height: min(88svh, 900px);
    overflow-y: auto;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 30px 30px 0 0;
    background: #fffafd;
    box-shadow: 0 -22px 60px rgba(87,43,70,.22);
    transform: translateY(105%);
    transition: transform .3s cubic-bezier(.22,.8,.25,1);
}
.admin-pack-sheet-backdrop.is-open .admin-pack-sheet { transform: translateY(0); }
.admin-pack-sheet-handle { width: 52px; height: 5px; margin: 2px auto 12px; border-radius: 99px; background: #e7bfd2; }
.admin-pack-sheet-head { display: grid; grid-template-columns: 68px minmax(0,1fr) 38px; gap: 12px; align-items: center; }
.admin-pack-sheet-head > img { width: 68px; height: 92px; object-fit: contain; }
.admin-pack-sheet-head h2 { margin: 5px 0 2px; color: #604052; }
.admin-pack-sheet-head small { color: #b34b82; font-weight: 900; }
.admin-pack-sheet-head > button { width: 38px; height: 38px; padding: 0; border-radius: 50%; color: #d94a8d; background: #ffe9f3; font-size: 24px; }
.admin-pack-sheet-bubble { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #c23c80; background: #ffe4f0; font-size: 10px; font-weight: 900; }
.admin-pack-sheet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px,1fr)); gap: 9px; margin: 16px 0; }
.admin-pack-sheet-card { overflow: hidden; border: 1px solid #f3c8da; border-radius: 14px; background: #fff; }
.admin-pack-sheet-card img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.admin-pack-sheet-card small { display: block; padding: 5px; color: #775367; font-size: 9px; font-weight: 800; text-align: center; }
.admin-pack-sheet-actions { display: grid; }
.admin-pack-sheet-editor { display: grid; gap: 11px; margin-top: 14px; padding: 14px; border: 1px solid #f2c6da; border-radius: 20px; background: #fff; }
.admin-pack-sheet-editor[hidden] { display: none !important; }
.admin-pack-sheet-editor label { display: grid; gap: 6px; color: #754f66; font-weight: 800; }
.admin-pack-sheet-editor fieldset { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 10px; border: 1px solid #f0cbdc; border-radius: 14px; }
.admin-pack-sheet-editor fieldset label { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; background: #fff0f7; font-size: 10px; }

@media (max-width: 520px) {
    .creator-content-pack-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .admin-pack-sheet { padding-inline: 13px; }
    .admin-pack-sheet-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

body.is-creator-user .creator-only {
    display: block !important;
}

body.is-creator-user .creator-content-pack-showcase {
    display: grid !important;
}

body.is-creator-user #profile-creator-stats-modal.creator-only {
    display: none !important;
}

body.is-creator-user #profile-creator-stats-modal.creator-only.is-open {
    display: flex !important;
}

body.is-creator-user .profile-creator-actions.creator-only {
    display: grid !important;
}

body.is-creator-user .profile-internal-menu-btn.creator-only {
    display: inline-flex !important;
}

body.is-creator-user .profile-internal-card.creator-only.is-active {
    display: grid !important;
}

.princess-only[hidden] {
    display: none !important;
}

.princess-profile-only {
    display: none !important;
}

body.is-princess-user .princess-profile-only {
    display: grid !important;
}

.princess-action-only {
    display: none !important;
}

body.is-princess-user .princess-action-only {
    display: grid !important;
}

/* ==========================================
   RESET Y ESTILOS GLOBALES
   ========================================== */

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

html {
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

body {
    position: relative;
    background: var(--app-shell-background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    overscroll-behavior-y: none;
    padding-bottom: 0;
    touch-action: manipulation;
}

/* ==========================================
   LAYOUT PRINCIPAL
   ========================================== */

#app {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section {
    width: 100%;
    max-width: 1200px;
    padding: var(--spacing-xl);
    animation: fadeIn var(--transition-base);
}

#collection-section,
#admin-section {
    padding-bottom: 98px;
}

#collection-section.needs-top-safe,
#profile-section.needs-top-safe,
#admin-section.needs-top-safe {
    padding-top: max(var(--spacing-xl), calc(env(safe-area-inset-top) + 18px));
}

.section-full {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   BOTONES
   ========================================== */

.btn {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: var(--font-size-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-transform: uppercase;
    letter-spacing: 0;
    box-shadow: 0 10px 24px rgba(196, 126, 158, 0.14);
}

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

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, #ff93b6, #bba7ff);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #fb7eaa, #aa95f6);
    box-shadow: 0 14px 28px rgba(236, 111, 157, 0.28);
}

.btn:disabled {
    background: #d9d5dc;
    border-color: rgba(120, 112, 124, 0.24);
    color: #817985;
    cursor: not-allowed;
    opacity: 0.72;
    box-shadow: none;
    transform: none;
}

.btn.is-withdrawable {
    box-shadow: 0 0 0 4px rgba(244, 198, 91, 0.25), 0 14px 30px rgba(236, 111, 157, 0.28);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.55);
    border-color: var(--primary);
    color: var(--primary-dark);
}

.btn-secondary:hover {
    background: #fff;
    color: white;
    color: var(--primary-dark);
}

.btn-small {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

#arena-back-btn,
#back-to-dashboard-btn,
#back-to-dashboard-btn-2,
#back-to-dashboard-btn-3,
#admin-back-btn {
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    border-color: rgba(255, 255, 255, 0.72);
    color: #fff;
    box-shadow: 0 12px 24px rgba(196, 86, 137, 0.18);
}

#arena-back-btn:hover,
#back-to-dashboard-btn:hover,
#back-to-dashboard-btn-2:hover,
#back-to-dashboard-btn-3:hover,
#admin-back-btn:hover {
    background: linear-gradient(135deg, #fb7eaa, #e94d91);
    color: #fff;
}

.btn-large {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-lg);
    width: 100%;
}

/* ==========================================
   LOGIN
   ========================================== */

#login-section {
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
}

.login-container {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    min-height: 100vh;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 246, 251, 0.2), rgba(255, 224, 239, 0.18)),
        #ffeef7;
}

.login-container::before {
    content: '';
    position: fixed;
    inset: -12px;
    z-index: 0;
    background: transparent;
    filter: blur(10px);
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
}

.login-background-image {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
}



@media (min-width: 700px) {
    .login-container {
        background-size: auto 100%;
        background-color: #fff1f7;
    }
}

.login-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: none;
    backdrop-filter: none;
}

.logo {
    font-size: clamp(38px, 12vw, 72px);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    text-shadow: 0 6px 22px rgba(92, 64, 82, 0.28);
    background: linear-gradient(135deg, #fff, #ffd7ec 48%, #dcd4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
    background-clip: text;
}

.login-logo-image {
    display: block;
    width: min(82vw, 430px);
    max-height: 210px;
    object-fit: contain;
    border: 0;
    background: transparent;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    animation: loginLogoPulse 2.2s ease-in-out infinite !important;
    transform-origin: center;
    will-change: transform;
    filter: drop-shadow(0 16px 26px rgba(214, 72, 142, 0.28));
}

.login-loading-text {
    min-width: 154px;
    margin-top: -20px;
    padding: 8px 17px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(187, 113, 214, 0.42);
    color: rgba(255, 255, 255, 0.96);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(105, 55, 82, 0.24);
    box-shadow: 0 12px 28px rgba(105, 55, 82, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(12px);
}

.login-recovery-btn {
    margin-top: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #a84182;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(105, 55, 82, 0.2);
    cursor: pointer;
}

.login-recovery-btn:disabled {
    opacity: 0.62;
    cursor: wait;
}

.login-recovery-status {
    max-width: 280px;
    margin: 5px auto 0;
    color: rgba(255, 255, 255, 0.96);
    font-size: 11px;
    font-weight: 800;
    text-align: center;
    text-shadow: 0 2px 8px rgba(70, 38, 60, 0.38);
}

#login-telegram-btn {
    position: fixed;
    width: 1px;
    height: 1px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.login-loading-dots::after {
    content: '...';
    display: inline-block;
    width: 18px;
    text-align: left;
    overflow: hidden;
    vertical-align: bottom;
    animation: loginLoadingDots 1.25s steps(4, end) infinite;
}

.subtitle {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.creator-login-btn {
    position: fixed;
    right: 16px;
    bottom: 18px;
    z-index: 2;
    border: 0;
    background: rgba(255, 255, 255, 0.64);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(196, 126, 158, 0.12);
    backdrop-filter: blur(10px);
}

#login-telegram-btn:disabled {
    opacity: 0;
    cursor: wait;
}


.login-progress {
    position: fixed;
    left: 50%;
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 56px));
    z-index: 2;
    width: min(68vw, 220px);
    height: 8px;
    overflow: visible;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.84), 0 8px 22px rgba(70, 38, 60, 0.12);
    opacity: 0.86;
    transform: translateX(-50%) translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

.login-container.is-validating .login-progress {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.login-progress-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.62);
    transition: width 320ms ease;
}

.login-progress-version {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-shadow: 0 1px 5px rgba(70, 38, 60, 0.42);
    white-space: nowrap;
}

@keyframes loginLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.055); }
}

@keyframes loginLoadingDots {
    0% { width: 0; }
    25% { width: 5px; }
    50% { width: 10px; }
    75%, 100% { width: 18px; }
}

.telegram-login-widget {
    min-height: 44px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.telegram-login-hint {
    max-width: 260px;
    margin: -8px auto 0;
    color: rgba(107, 76, 95, 0.78);
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

/* ==========================================
   DASHBOARD
   ========================================== */

.dashboard-header {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 8;
    margin: 0;
}

#dashboard-section {
    position: relative;
    width: min(100%, 430px);
    min-height: 100vh;
    padding-top: 58px;
    margin: 0 auto;
}

#dashboard-section .dashboard-header .page-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.dashboard-exit-btn {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(243, 200, 218, 0.95);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: var(--primary-dark);
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 26px rgba(196, 126, 158, 0.14);
    backdrop-filter: blur(10px);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
}

.featured-packs-label {
    margin: 0;
    padding: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.dashboard-box {
    width: min(100%, 430px);
    margin: 12px auto 10px;
    padding: 14px 10px 12px;
    border: 1px solid rgba(243, 200, 218, 0.86);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.13);
    backdrop-filter: blur(12px);
}

.dashboard-featured-packs .dashboard-pack-carousel {
    width: 100%;
    margin-top: 0;
    margin-bottom: -4px;
}

.dashboard-pack-carousel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 640px);
    align-items: center;
    justify-content: center;
    width: min(100%, 430px);
    min-height: 330px;
    margin: 18px auto 4px;
}

.pack-stage {
    position: relative;
    height: 314px;
    cursor: grab;
    overflow: visible;
    touch-action: pan-y pinch-zoom;
    user-select: none;
}

.pack-stage.dragging {
    cursor: grabbing;
}

.pack-stage.slide-next .pack-card {
    animation: packSlideNext 520ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.pack-stage.slide-prev .pack-card {
    animation: packSlidePrev 520ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

@keyframes packSlideNext {
    0% { transform: translateX(calc(var(--pack-slide-x, -50%) + 36px)) translateY(var(--pack-slide-y, 0)) scale(0.94); opacity: 0.35; }
    100% { }
}

@keyframes packSlidePrev {
    0% { transform: translateX(calc(var(--pack-slide-x, -50%) - 36px)) translateY(var(--pack-slide-y, 0)) scale(0.94); opacity: 0.35; }
    100% { }
}

.pack-stage::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 24px;
    width: 260px;
    height: 30px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(122, 77, 102, 0.2), transparent 68%);
}

.pack-card {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 168px;
    height: 238px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 22px 22px rgba(122, 77, 102, 0.24));
    transition: transform var(--transition-base), opacity var(--transition-base), filter var(--transition-base);
}

.pack-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Evita la descarga, seleccion y ampliacion nativas de imagenes con pulsacion larga. */
img,
picture,
button img,
.pack-card,
.pack-list-card,
.discover-pack-card,
.discover-card-image-btn {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
    touch-action: manipulation;
}

.admin-gallery-grid,
.admin-saved-card-preview-btn,
.admin-library-editor-image-btn,
.admin-library-card-image,
.admin-edit-card-image {
    -webkit-touch-callout: none !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
    touch-action: manipulation;
}

/* En Android el gesto largo puede quedarse en el img antes de llegar al boton. */
.admin-gallery-grid .admin-library-card-image,
.admin-library-editor-image-btn img,
.admin-edit-card-image {
    pointer-events: none;
}

.pack-card-left {
    z-index: 2;
    opacity: 0.78;
    --pack-slide-x: calc(-50% - 82px);
    --pack-slide-y: 42px;
    transform: translateX(calc(-50% - 82px)) translateY(42px) rotate(-7deg) scale(0.86);
}

.pack-card-active {
    z-index: 4;
    opacity: 1;
    --pack-slide-x: -50%;
    --pack-slide-y: -18px;
    transform: translateX(-50%) translateY(-18px) scale(1.25);
    filter: drop-shadow(0 28px 26px rgba(236, 111, 157, 0.32));
}

.pack-card-right {
    z-index: 1;
    opacity: 0.78;
    --pack-slide-x: calc(-50% + 82px);
    --pack-slide-y: 42px;
    transform: translateX(calc(-50% + 82px)) translateY(42px) rotate(7deg) scale(0.86);
}

.circle-control,
.circle-action {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(243, 200, 218, 0.9);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: var(--primary-dark);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(196, 126, 158, 0.16);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.circle-control {
    display: none;
}

.circle-control:hover,
.circle-action:hover {
    transform: translateY(-3px);
    background: #fff;
    box-shadow: 0 18px 34px rgba(236, 111, 157, 0.22);
}

.featured-packs-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -8px auto 0;
}

.featured-open-pack-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    color: white;
    background: linear-gradient(135deg, #ff93b6, #bba7ff);
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(236, 111, 157, 0.2);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.featured-open-pack-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(236, 111, 157, 0.28);
}

.metrics-grid {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
    z-index: 5;
}

.metric-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    transition: all var(--transition-base);
    box-shadow: 0 16px 36px rgba(196, 126, 158, 0.11);
    backdrop-filter: blur(10px);
}

.metric-card:hover {
    border-color: var(--primary);
    box-shadow: 0 18px 42px rgba(236, 111, 157, 0.18);
}

.metric-label {
    color: var(--text-secondary);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-value {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--primary-dark);
}

.action-buttons {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.admin-header {
    display: none;
}

.admin-lock,
.admin-builder {
    max-width: 920px;
    margin: 0 auto;
}

.admin-cache-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 4px;
    padding-top: 14px;
}

.admin-cache-actions .btn {
    width: auto;
    min-height: 30px;
    padding: 6px 10px;
    font-size: 0.72rem;
    margin: 0;
}

.admin-local-delete-btn {
    background-color: #8e6ad8;
}

.admin-global-reset-btn {
    background-color: #2f2f37;
}

.admin-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.admin-builder {
    grid-template-columns: minmax(260px, 420px) minmax(260px, 360px);
    gap: var(--spacing-xl);
    align-items: start;
}

.admin-form {
    display: grid;
    gap: var(--spacing-md);
}

.admin-form label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
}

.admin-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-primary);
    font: inherit;
}

.admin-message {
    min-height: 20px;
    color: var(--primary-dark);
    font-weight: 700;
}

#admin-creator-list {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.princess-creator-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(244, 143, 177, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(90, 54, 82, 0.06);
}

.princess-creator-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.princess-creator-title {
    min-width: 0;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.admin-princess-avatar-link {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(244, 143, 177, 0.45);
    background: #fff2b8;
    color: #6b4600;
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(90, 54, 82, 0.08);
}

.admin-princess-avatar-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-princess-avatar-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(216, 79, 136, 0.18);
}

.admin-princess-avatar-link.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.princess-creator-head strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
}

.princess-creator-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b7e8d;
    font-size: 0.74rem;
}

.princess-creator-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.princess-creator-head-actions em {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 34px;
    border-radius: 999px;
    background: #fff2b8;
    color: #6b4600;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 900;
}

.princess-delete-requests-btn {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(244, 143, 177, 0.46);
    border-radius: 999px;
    background: rgba(255, 244, 249, 0.92);
    box-shadow: 0 8px 18px rgba(90, 54, 82, 0.08);
    cursor: pointer;
}

.princess-delete-requests-btn:disabled {
    opacity: 0.42;
    cursor: default;
}

.princess-delete-requests-btn span {
    width: 22px;
    height: 22px;
    display: block;
    background: url('../assets/images/menu/cards-menu-v2.webp') center / contain no-repeat;
}

.princess-delete-requests-btn b {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    display: inline-grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: #f56aa4;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 900;
}

.princess-creator-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.princess-creator-metrics span {
    min-width: 0;
    padding: 7px 6px;
    border-radius: 8px;
    background: rgba(255, 235, 244, 0.72);
}

.princess-creator-metrics b,
.princess-creator-metrics small {
    display: block;
    overflow-wrap: anywhere;
}

.princess-creator-metrics b {
    color: var(--primary-dark);
    font-size: 0.78rem;
}

.princess-creator-metrics small {
    color: #8b7e8d;
    font-size: 0.64rem;
}

.admin-princess-withdraw-list {
    display: grid;
    gap: 5px;
    padding: 6px;
    border-radius: 8px;
    background: rgba(255, 242, 184, 0.45);
}

.admin-princess-withdraw-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    color: #6b4600;
    font-size: 0.68rem;
    font-weight: 800;
}

.admin-princess-withdraw-row span,
.admin-princess-withdraw-row small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-princess-withdraw-row small {
    color: #9a7a2d;
    font-size: 0.6rem;
    font-weight: 700;
}

.admin-princess-withdraw-row .btn {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 0.62rem;
}

.admin-withdrawals-card {
    border-color: rgba(240, 173, 47, 0.45);
    background: linear-gradient(145deg, rgba(255, 252, 239, 0.96), rgba(255, 240, 248, 0.92));
}

.admin-withdrawals-count {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffc74f, #ff9f45);
    color: #6b4100;
    font-size: 1rem;
    box-shadow: 0 8px 20px rgba(217, 139, 34, 0.2);
}

.admin-withdrawals-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.admin-withdrawal-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    align-items: center;
    padding: 11px;
    border: 1px solid rgba(238, 169, 55, 0.3);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
}

.admin-withdrawal-card strong,
.admin-withdrawal-card small {
    display: block;
}

.admin-withdrawal-card small {
    margin-top: 2px;
    color: #907b88;
    font-size: 0.7rem;
}

.admin-withdrawal-card-amount {
    color: #9a5a00;
    font-weight: 900;
    white-space: nowrap;
}

.admin-withdrawal-card-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.princess-creator-boost-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.princess-deletion-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 0 10px env(safe-area-inset-bottom);
    background: rgba(77, 49, 72, 0.18);
    backdrop-filter: blur(4px);
}

.princess-deletion-sheet {
    width: min(100%, 560px);
    height: min(80vh, 720px);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px 14px;
    border: 1px solid rgba(244, 143, 177, 0.36);
    border-radius: 20px 20px 0 0;
    background: rgba(255, 252, 254, 0.98);
    box-shadow: 0 -18px 44px rgba(90, 54, 82, 0.18);
    transform: translateY(100%);
    transition: transform 180ms ease;
}

.princess-deletion-modal.is-open .princess-deletion-sheet {
    transform: translateY(0);
}

.princess-deletion-handle {
    width: 42px;
    height: 5px;
    justify-self: center;
    border-radius: 999px;
    background: rgba(160, 122, 146, 0.24);
}

.princess-deletion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.princess-deletion-head h2 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.1;
}

.princess-deletion-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 235, 244, 0.9);
    color: var(--primary-dark);
    font-size: 1.1rem;
    font-weight: 900;
}

.princess-deletion-list {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 7px;
    padding-right: 2px;
}

.princess-deletion-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px;
    border: 1px solid rgba(244, 143, 177, 0.22);
    border-radius: 12px;
    background: rgba(255, 247, 251, 0.72);
}

.princess-deletion-item img,
.princess-deletion-thumb {
    width: 42px;
    height: 42px;
    display: block;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(255, 235, 244, 0.9) url('../assets/images/menu/cards-menu-v2.webp') center / 24px 24px no-repeat;
}

.princess-deletion-item strong,
.princess-deletion-item small {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.princess-deletion-item strong {
    color: var(--text-primary);
    font-size: 0.78rem;
}

.princess-deletion-item small {
    color: #9a8594;
    font-size: 0.64rem;
    font-weight: 700;
}

.princess-deletion-item .btn {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.66rem;
}

.princess-deletion-empty {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 247, 251, 0.72);
    color: #8b7e8d;
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.admin-preview-wrap {
    display: flex;
    justify-content: center;
}

.admin-card-preview {
    width: min(100%, 320px);
    aspect-ratio: 3 / 4;
}

.admin-card-preview .tcg-card {
    width: 100%;
    height: 100%;
}

.admin-uploader {
    max-width: 980px;
    margin: 0 auto;
    grid-template-columns: minmax(280px, 420px) minmax(260px, 360px);
    gap: var(--spacing-xl);
    align-items: start;
}

.admin-upload-panel,
.admin-preview-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--spacing-lg);
    box-shadow: 0 22px 58px rgba(196, 126, 158, 0.16);
    backdrop-filter: blur(12px);
}

.admin-dropzone {
    min-height: 108px;
    border: 2px dashed var(--primary);
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: var(--primary-dark);
    font-weight: 800;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.62);
    margin-bottom: var(--spacing-lg);
}

.admin-dropzone.drag-over {
    background: rgba(255, 234, 243, 0.9);
    border-color: var(--primary-dark);
    transform: translateY(-1px);
}

.admin-dropzone input {
    display: none;
}

.admin-meta-grid {
    display: grid;
    gap: 10px;
    margin-bottom: var(--spacing-lg);
}

.admin-meta-grid label {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 10px;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 800;
}

.admin-meta-grid label:has(#admin-meta-lot),
.admin-meta-grid label:has(#admin-meta-type) {
    display: none;
}

.admin-meta-grid .admin-input {
    padding: 9px 10px;
}

.admin-upload-preview {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
}

.admin-reader {
    max-width: 980px;
    margin: 0 auto;
}

.admin-reader > .admin-upload-panel,
.admin-reader > .admin-preview-panel {
    display: none;
}

.admin-reader-layout {
    display: block;
}

.admin-reader-layout[data-admin-panel="cards"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.admin-reader-dropzone {
    min-height: 74px;
    border: 1.5px dashed #d9c8d4;
    border-radius: 12px;
    display: grid;
    place-items: center;
    gap: 4px;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.38);
    color: rgba(76, 54, 70, 0.68);
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-reader-dropzone.is-compact {
    min-height: 48px;
    grid-template-columns: 1fr;
    justify-content: center;
    padding: 8px 12px;
}

.admin-reader-dropzone.drag-over,
.admin-reader-dropzone:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--primary);
}

.admin-reader-folder {
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-reader-dropzone strong {
    max-width: 220px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}

.admin-dropzone-compact {
    display: none;
}

.admin-reader-dropzone.is-compact .admin-reader-folder,
.admin-reader-dropzone.is-compact .admin-dropzone-full,
.admin-reader-dropzone.is-compact small {
    display: none;
}

.admin-reader-dropzone.is-compact .admin-dropzone-compact {
    display: block;
}

.admin-reader-dropzone small {
    color: var(--text-secondary);
    font-size: 11px;
}

.admin-stats-bar {
    display: flex;
    gap: 7px;
    margin-top: 4px;
    justify-content: center;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.admin-stats-bar::-webkit-scrollbar {
    display: none;
}

.admin-stat {
    flex: 0 0 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid #ead8e3;
    border-radius: 999px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 12px 28px rgba(196, 126, 158, 0.11);
}

.admin-stat-wide {
    min-width: 94px;
}

.admin-stat span {
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1;
    text-transform: none;
}

.admin-stat strong {
    color: #1f1720;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.admin-upload-count-stat {
    border-radius: 14px;
    padding-inline: 12px;
}

.admin-filter-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
    margin-top: 10px;
    overflow-x: auto;
    padding: 10px 8px;
    border: 1px solid rgba(244, 143, 177, 0.22);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.58);
    scrollbar-width: none;
}

.admin-filter-bar::-webkit-scrollbar {
    display: none;
}

.admin-filter-bar label {
    color: var(--text-secondary);
    font-size: 12px;
}

.admin-select,
.admin-search {
    width: auto;
    min-width: 128px;
    border: 1px solid #ead8e3;
    border-radius: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.84);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
}

.admin-card-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(110px, 132px);
    gap: 10px;
    margin-top: 10px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: none;
}

.admin-reader-section {
    margin-top: 8px;
}

.admin-reader-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 2px;
}

.admin-reader-section-head h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
}

.admin-reader-section-head h3::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--primary);
    vertical-align: 1px;
}

.admin-link-btn {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.admin-gallery-grid {
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 2px;
}

.admin-upload-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 0 4px;
}

.admin-upload-actions .btn {
    min-width: 132px;
}

.admin-publish-btn {
    border: 0;
    background: linear-gradient(135deg, #f45f9f, #d77af5);
    color: #fff;
    box-shadow: 0 12px 24px rgba(236, 111, 157, 0.22);
}

.admin-hidden-action {
    display: none !important;
}

.admin-card-grid::-webkit-scrollbar {
    display: none;
}

.admin-reader-card {
    display: block;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ead8e3;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-reader-card:hover,
.admin-reader-card.selected {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.admin-reader-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    background: #eee;
}

.admin-reader-card-meta {
    padding: 8px 10px;
}

.admin-reader-card-meta .name {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-reader-card-meta .sub {
    min-height: 16px;
    color: var(--text-secondary);
    font-size: 11px;
}

.admin-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
}

.badge-cute { background: #fbeaf0; color: #72243e; }
.badge-sweet { background: #faeeda; color: #633806; }
.badge-lovely { background: #e6f1fb; color: #0c447c; }
.badge-special { background: #eeedfe; color: #3c3489; }
.badge-specialsoft { background: rgba(255, 181, 216, 0.28); color: #9e235f; }
.badge-limited { background: #fcebeb; color: #791f1f; }
.badge-sublime { background: linear-gradient(135deg, #fff6c9, #f4c65b); color: #5e3b00; }
.badge-legendary { background: rgba(247, 185, 85, 0.22); color: #8a5512; }
.badge-epic { background: rgba(195, 157, 246, 0.22); color: #6640a3; }
.badge-rare { background: rgba(130, 199, 245, 0.22); color: #245f8a; }
.badge-common { background: #f0f0f0; color: #666; }

.admin-detail-panel {
    display: grid;
    grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #ead8e3;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.admin-detail-image-btn {
    width: min(100%, 170px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.admin-detail-panel img {
    width: min(100%, 190px);
    aspect-ratio: 2 / 3;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #ead8e3;
}

.admin-detail-data {
    flex: 1;
    min-width: 220px;
}

.admin-detail-data h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.admin-card-guided-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 10px 0 14px;
    padding: 10px;
    border: 1px solid rgba(234, 216, 227, 0.72);
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.74);
}

.admin-card-guided-fields label {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 900;
}

.admin-card-guided-fields .admin-select {
    width: 100%;
    min-width: 0;
}

.admin-card-guided-fields-compact {
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 8px;
}

.admin-card-ready-note {
    margin: 0 0 10px;
    color: var(--primary-dark);
    font-size: 14px;
    font-weight: 900;
}

.admin-detail-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-detail-actions .btn {
    min-width: 120px;
}

.admin-detail-panel {
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr);
    gap: 10px;
}

.admin-detail-panel img {
    width: min(100%, 170px);
}

.admin-detail-data {
    min-width: 0;
    overflow: hidden;
}

.admin-card-guided-fields-compact {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.admin-detail-actions {
    margin-top: 8px;
}

.admin-detail-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 38px;
}

.admin-static-field {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(244, 143, 177, 0.28);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 800;
}

.admin-special-check {
    grid-column: 1 / -1;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px;
    border: 1px solid rgba(244, 143, 177, 0.36);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-primary);
}

.admin-special-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.admin-detail-row {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(234, 216, 227, 0.7);
}

.admin-detail-row span {
    min-width: 80px;
    color: var(--text-secondary);
    font-size: 12px;
}

.admin-detail-row strong {
    color: var(--text-primary);
    font-size: 13px;
}

.admin-empty {
    padding: 36px 12px;
    text-align: center;
    color: var(--text-secondary);
}

.profile-shell {
    width: min(100%, 540px);
    margin: 0 auto;
    padding: 18px 14px 98px;
    display: grid;
    gap: 14px;
}

.profile-card,
.profile-referral-card,
.profile-favorites-card,
.profile-creator-shop-card,
.profile-public-card,
.profile-creator-commission-card,
.profile-internal-card {
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.16);
}

.profile-card {
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.profile-photo-control {
    position: relative;
    width: 86px;
    height: 86px;
}

.profile-photo {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ffd45c;
    background: #fff4da;
    box-shadow: 0 10px 24px rgba(199, 121, 18, 0.22);
}

.profile-change-photo-btn {
    position: absolute;
    top: -4px;
    right: -3px;
    bottom: auto;
    width: 22px;
    min-width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: none;
    background-image: url('../assets/images/menu/profile-edit-pencil.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    font-size: 0;
    line-height: 0;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-photo-bubble {
    position: absolute;
    z-index: 5;
    top: 28px;
    left: 30px;
    display: grid;
    gap: 7px;
    min-width: 142px;
    padding: 10px;
    border: 1px solid rgba(244, 172, 206, 0.5);
    border-radius: 12px;
    background: rgba(255, 250, 253, 0.97);
    box-shadow: 0 12px 24px rgba(159, 90, 126, 0.16);
}

.profile-photo-bubble[hidden] {
    display: none;
}

.profile-photo-bubble strong {
    color: #7a5870;
    font-size: 11px;
}

.profile-photo-bubble button {
    min-height: 28px;
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f45fa7, #c681ef);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.profile-change-photo-btn:disabled {
    opacity: 0.62;
}

.profile-main {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 3px;
}

.profile-role {
    display: inline-flex;
    width: fit-content;
    min-height: 22px;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 213, 92, 0.25);
    color: #8a5200;
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-name {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.35rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.profile-username {
    display: none;
}

.profile-user-id {
    width: fit-content;
    margin: 2px 0 0;
    padding: 3px 8px;
    border: 1px solid rgba(238, 119, 174, 0.18);
    border-radius: 999px;
    background: rgba(255, 240, 248, 0.68);
    color: #9b7288;
    font-size: 0.66rem;
    font-weight: 800;
    font-family: inherit;
    line-height: 1.2;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.profile-user-id:active {
    transform: scale(0.97);
}

.profile-user-id.is-copied {
    border-color: rgba(238, 79, 147, 0.3);
    background: rgba(255, 222, 239, 0.92);
    color: #df4b8c;
}

.profile-user-id:empty {
    display: none;
}

#creator-public-section .profile-username {
    display: none;
}

#creator-public-section {
    padding-top: max(72px, calc(env(safe-area-inset-top, 0px) + 48px));
}

#creator-public-section .creator-public-role {
    margin-top: 1px;
    background: rgba(255, 213, 232, 0.54);
    color: rgba(218, 79, 143, 0.82);
    font-size: 0.62rem;
}

#creator-public-section .creator-profile-name-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
}

#creator-public-section .creator-profile-name-row .creator-profile-name-link {
    flex: 1 1 auto;
    min-width: 0;
}

#creator-public-section .creator-profile-like-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 62, 142, 0.35);
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.7);
    color: #e65899;
    box-shadow: none;
    font-size: 0;
}

#creator-public-section .creator-profile-like-btn::before {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    margin: auto;
    background: url('../assets/images/menu/profile-like-heart.png') center / contain no-repeat;
    filter: grayscale(1) saturate(0.2);
    opacity: 0.42;
}

#creator-public-section .creator-profile-like-btn.is-active {
    background: rgba(244, 170, 204, 0.34);
    color: #e65899;
}

#creator-public-section .creator-profile-like-btn.is-active::before {
    filter: none;
    opacity: 1;
}

#creator-public-section .creator-profile-like-btn.is-popping,
#discover-section .discover-like-btn.is-popping {
    animation: simpleLikePress 420ms ease;
}

#creator-public-section .creator-profile-like-btn:active,
#discover-section .discover-like-btn:active {
    transform: scale(0.9);
}

@keyframes simpleLikePress {
    0% { transform: scale(1); }
    35% { transform: scale(1.16); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

#creator-public-section .creator-profile-actions {
    margin-top: 6px;
}

#creator-public-section .creator-profile-actions .creator-favorite-btn {
    width: 32px;
    min-width: 32px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 172, 206, 0.48);
    background: rgba(255, 232, 244, 0.62);
    color: #d45b91;
    font-size: 0;
    box-shadow: none;
    margin-left: auto;
}

#creator-public-section .creator-profile-actions .creator-favorite-btn::after {
    content: '';
    display: block;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 18px;
    height: 18px;
    margin: auto;
    background: url('../assets/images/menu/profile-favorite-star.png') center / contain no-repeat;
    filter: grayscale(1) saturate(0.2);
    opacity: 0.42;
}

#creator-public-section .creator-profile-actions .creator-favorite-btn.is-active::after {
    filter: none;
    opacity: 1;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
}

#creator-public-section .creator-profile-actions .creator-like-btn,
#creator-public-section .creator-heart-meter,
#creator-public-section .creator-profile-actions {
    display: none;
}

#creator-public-section .creator-profile-favorite-btn {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 172, 206, 0.42);
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.58);
    box-shadow: none;
}

#creator-public-section .creator-profile-favorite-btn::after {
    content: '';
    width: 15px;
    height: 15px;
    background: url('../assets/images/menu/profile-favorite-star.png') center / contain no-repeat;
    filter: grayscale(1) saturate(0.2);
    opacity: 0.42;
}

#creator-public-section .creator-profile-favorite-btn.is-active::after {
    filter: none;
    opacity: 1;
}

#creator-public-section .creator-profile-like-btn,
#creator-public-section .creator-profile-favorite-btn {
    position: static !important;
    inset: auto;
    box-sizing: border-box;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
}

#creator-public-section .creator-public-shop-btn {
    width: auto;
    min-height: 30px;
    margin: 6px auto 0;
    padding: 6px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #f45fa7, #c681ef);
    color: #fff;
    box-shadow: 0 9px 18px rgba(222, 91, 157, 0.2);
}

#creator-public-section .creator-widget-profile .creator-public-shop-btn {
    display: none;
}

#creator-public-section .creator-public-shop-outer {
    display: flex;
    justify-content: center;
    width: 100%;
}

.packs-creator-profile {
    display: flex;
    align-items: center;
    gap: 5px;
}

.packs-creator-like-btn,
.packs-creator-profile .creator-favorite-heart {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(244, 172, 206, 0.42);
    border-radius: 50%;
    background-color: rgba(255, 232, 244, 0.58);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    box-shadow: none;
}

.packs-creator-like-btn {
    background-image: url('../assets/images/menu/profile-like-heart.png');
    filter: grayscale(1) saturate(0.2);
    opacity: 0.5;
}

.packs-creator-like-btn.is-active {
    filter: none;
    opacity: 1;
}

.packs-creator-profile .creator-favorite-heart {
    position: static;
    background-image: url('../assets/images/menu/profile-favorite-star.png');
    background-size: 15px 15px;
    filter: grayscale(1) saturate(0.2);
    opacity: 0.5;
    font-size: 0;
}

.packs-creator-profile .creator-favorite-heart.is-active {
    filter: none;
    opacity: 1;
}

#packs-section.is-creator-pack-view .packs-creator-profile {
    grid-template-columns: 54px minmax(0, 1fr) 28px;
    padding-right: 12px;
}

.packs-creator-edit-btn {
    position: absolute;
    right: 56px;
    top: 14px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(230, 88, 153, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: #d95691;
    font-size: 16px;
    opacity: 0.82;
    cursor: pointer;
}

.profile-next-rewards-card { padding: 14px; border: 1px solid rgba(244, 143, 177, 0.26); border-radius: 14px; background: rgba(255, 255, 255, 0.74); }
.profile-next-rewards-card .profile-referral-head > img { width: 34px; height: 44px; object-fit: contain; opacity: .82; }
.profile-next-rewards-list { display: grid; gap: 8px; }
.profile-next-reward-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 11px; background: rgba(255, 232, 244, .5); }
.profile-next-reward-item.is-claimable { border: 1px solid rgba(221, 166, 48, .72); background: linear-gradient(135deg, rgba(255, 248, 211, .9), rgba(255, 226, 241, .78)); box-shadow: 0 8px 20px rgba(209, 151, 47, .16); }
.profile-next-reward-item > img { width: 38px; height: 52px; object-fit: contain; flex: 0 0 auto; }
.profile-next-reward-item div { min-width: 0; display: grid; gap: 3px; color: #56314b; }
.profile-next-reward-item strong { font-size: 13px; }
.profile-next-reward-item small { color: #98758b; font-size: 11px; line-height: 1.25; }
.profile-next-reward-link { width: fit-content; margin-top: 2px; padding: 3px 8px; border: 1px solid rgba(230, 88, 153, .3); border-radius: 999px; background: transparent; color: #d95691; font-size: 10px; font-weight: 800; cursor: pointer; }
.profile-next-reward-link.is-claimable { border-color: rgba(221, 166, 48, .78); background: linear-gradient(135deg, #fff2b8, #f4bf4d); color: #5f3b00; box-shadow: 0 5px 12px rgba(183, 129, 23, .18); }
.profile-next-rewards-empty { margin: 0; color: #98758b; font-size: 12px; }

.packs-price-editor {
    width: min(100%, 430px);
    margin: 0 auto 14px;
    padding: 12px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
}
.packs-price-editor[hidden] { display: none !important; }
.packs-price-editor-head, .packs-price-editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.packs-price-editor-head { color: #56314b; margin-bottom: 8px; }
.packs-price-editor-close { border: 0; background: transparent; color: #d95691; font-size: 22px; cursor: pointer; }
.packs-price-editor-list { display: grid; gap: 7px; }
.packs-price-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px; border-radius: 10px; background: rgba(255, 232, 244, 0.48); color: #56314b; }
.packs-price-editor-row span:first-child { min-width: 0; display: grid; gap: 2px; }
.packs-price-editor-row small { color: #98758b; }
.packs-price-editor-input { display: inline-flex; align-items: center; gap: 4px; }
.packs-price-editor-input input { width: 76px; padding: 7px 5px; border: 1px solid rgba(230, 88, 153, 0.3); border-radius: 8px; color: #56314b; text-align: center; }
.packs-price-editor-actions { justify-content: flex-end; margin-top: 10px; }
.packs-price-editor-actions button { min-height: 32px; padding: 6px 12px; border: 1px solid rgba(230, 88, 153, 0.35); border-radius: 999px; background: #fff; color: #d95691; font-weight: 800; cursor: pointer; }
.packs-price-editor-actions .packs-price-editor-save { border: 0; background: linear-gradient(135deg, #f670b0, #c681ef); color: #fff; }
.packs-price-editor-message { min-height: 16px; margin: 7px 0 0; color: #d95691; font-size: 12px; }

#packs-section.is-creator-pack-view .packs-creator-like-btn {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

#creator-public-section .creator-public-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
}

#creator-public-section .creator-public-stats > div {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 6px 3px;
    border: 1px solid rgba(244, 172, 206, 0.28);
    border-radius: 10px;
    background: rgba(255, 242, 248, 0.48);
}

#creator-public-section .creator-public-stats img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: 0.72;
}

#creator-public-section .creator-public-stats strong {
    color: var(--text-primary);
    font-size: 0.86rem;
    line-height: 1;
}

#creator-public-section .creator-public-stats small {
    color: var(--text-secondary);
    font-size: 0.58rem;
    line-height: 1;
}

.creator-favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(244, 143, 177, 0.58);
    border-radius: 50%;
    background: rgba(255, 238, 247, 0.86);
    color: #c45486;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.creator-favorite-btn.is-active {
    border-color: rgba(160, 150, 158, 0.55);
    background: rgba(245, 244, 246, 0.94);
    color: #9b929a;
    box-shadow: none;
}

.profile-mini-stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.profile-mini-stats div {
    min-width: 0;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.92);
    text-align: center;
}

.profile-mini-stats span {
    display: block;
    color: #271821;
    font-size: 1rem;
    font-weight: 900;
}

.profile-mini-stats small {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 0.67rem;
}

.profile-referral-card,
.profile-favorites-card,
.profile-creator-shop-card,
.profile-public-card,
.profile-creator-commission-card,
.profile-creator-bonus-card,
.profile-promo-card,
.profile-promo-admin-card {
    padding: 14px;
}

.profile-internal-card {
    display: grid;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.profile-internal-card[data-profile-panel] {
    display: none !important;
}

.profile-internal-card[data-profile-panel]:not(.is-active) {
    display: none !important;
}

.profile-internal-card[data-profile-panel].is-active {
    display: grid !important;
}

.profile-internal-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
}

.profile-internal-menu-btn {
    min-width: 0;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    color: #7b5570;
    box-shadow: 0 12px 28px rgba(196, 126, 158, 0.12);
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
}

.profile-internal-menu-btn.is-active {
    border-color: rgba(240, 82, 150, 0.52);
    background: linear-gradient(135deg, #ff7ab8, #f05296);
    color: #fff;
    box-shadow: 0 14px 28px rgba(217, 68, 137, 0.2);
}

.profile-internal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-internal-card-head h2 {
    margin: 5px 0 0;
    color: var(--text-primary);
    font-size: 1.02rem;
}

.profile-internal-card-head strong {
    flex: 0 0 auto;
    min-width: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 226, 238, 0.82);
    color: #ef6ca5;
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-internal-card .profile-referral-card,
.profile-internal-card .profile-favorites-card,
.profile-internal-card .profile-creator-shop-card,
.profile-internal-card .profile-public-card,
.profile-internal-card .profile-creator-commission-card,
.profile-internal-card .profile-creator-bonus-card,
.profile-internal-card .profile-promo-card,
.profile-internal-card .profile-danger-card,
.profile-internal-card .profile-princess-codes-card {
    border-radius: 8px;
    padding: 14px;
}

.princess-profile-only {
    display: none !important;
}

body.is-princess-user .princess-profile-only {
    display: block !important;
}

.profile-princess-codes-card {
    border: 1px solid rgba(234, 216, 227, 0.86);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.16);
}

.admin-ghost-target,
.admin-ghost-create-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(244, 143, 177, 0.32);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 32px rgba(196, 126, 158, 0.1);
}

.admin-ghost-target label {
    display: grid;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 900;
}

.admin-ghost-create-card h3 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.admin-ghost-create-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: center;
}

.princess-creator-card.is-active-admin-creator {
    position: relative;
    border-color: rgba(240, 82, 150, 0.58);
    box-shadow: 0 18px 44px rgba(217, 68, 137, 0.16);
}

.princess-creator-card.is-active-admin-creator::after {
    content: 'Activa';
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 122, 184, 0.16);
    color: #f05296;
    font-size: 0.68rem;
    font-weight: 900;
}

.princess-creator-actions-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
    gap: 8px;
}

.princess-subaccount-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: flex-end;
    justify-content: center;
    padding: 18px 12px 0;
    background: rgba(80, 57, 73, 0.32);
    backdrop-filter: blur(8px);
}

.princess-subaccount-profile-modal.is-open {
    display: flex;
}

.princess-subaccount-profile-sheet {
    position: relative;
    width: min(100%, 500px);
    max-height: 88vh;
    overflow-y: auto;
    padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
    border: 1px solid rgba(244, 143, 177, 0.38);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 211, 233, 0.45), transparent 34%),
        rgba(255, 250, 253, 0.98);
    box-shadow: 0 -22px 55px rgba(109, 66, 94, 0.24);
}

.princess-subaccount-profile-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(244, 143, 177, 0.4);
    border-radius: 50%;
    color: #d94d91;
    background: #fff;
    font-size: 24px;
    line-height: 1;
}

.princess-subaccount-profile-identity {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

.princess-subaccount-profile-avatar {
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 4px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ff8ec5, #d99cff);
    box-shadow: 0 14px 32px rgba(221, 76, 148, 0.22);
    font-size: 36px;
    font-weight: 900;
}

.princess-subaccount-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.princess-subaccount-profile-identity h2,
.princess-subaccount-profile-identity p {
    margin: 0;
}

.princess-subaccount-profile-identity h2 {
    color: var(--text-primary);
    font-size: 1.55rem;
}

.princess-subaccount-profile-identity p {
    color: var(--text-secondary);
}

.princess-subaccount-copy-id {
    padding: 6px 11px;
    border: 1px solid rgba(244, 143, 177, 0.28);
    border-radius: 999px;
    color: #9a5878;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    font-weight: 800;
}

.princess-subaccount-profile-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 18px;
}

.princess-subaccount-profile-metrics span {
    display: grid;
    gap: 3px;
    padding: 12px;
    border: 1px solid rgba(244, 143, 177, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.princess-subaccount-profile-metrics b {
    color: #703c59;
    font-size: 1.05rem;
}

.princess-subaccount-profile-metrics small {
    color: var(--text-secondary);
    font-size: 0.7rem;
}

.princess-subaccount-profile-boost {
    margin-top: 10px;
    padding: 9px 12px;
    border-radius: 12px;
    color: #a14f78;
    background: rgba(255, 223, 239, 0.65);
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.princess-subaccount-profile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}

.ghost-creator-editor-avatar {
    width: 96px;
    height: 96px;
    margin: 0 auto 4px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(244, 143, 177, 0.56);
    background: rgba(255, 241, 247, 0.92);
}

.profile-creator-actions {
    width: 100%;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.profile-upload-manager-btn,
.profile-card-builder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff7ab8, #f05296);
    color: #fff;
    box-shadow: 0 10px 22px rgba(217, 68, 137, 0.24);
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.profile-card-builder-btn {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(244, 143, 177, 0.5);
    background: rgba(255, 247, 251, 0.9);
    color: var(--primary-dark);
    box-shadow: 0 8px 18px rgba(217, 68, 137, 0.12);
    font-size: 0.86rem;
}

.profile-creator-bonus-card {
    display: grid;
    gap: 10px;
}

.profile-creator-bonus-card > .profile-bonus-description,
.profile-creator-bonus-card > .profile-bonus-prizes,
.profile-creator-bonus-card > .profile-bonus-period,
.profile-creator-bonus-card > .profile-bonus-ranking,
.profile-creator-bonus-card > .profile-bonus-history {
    display: none;
}

.profile-bonus-open-btn {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #ffd873, #f6a93d);
    color: #5c3410;
    box-shadow: 0 12px 24px rgba(211, 137, 32, 0.24);
    font-size: 0.86rem;
    font-weight: 900;
    cursor: pointer;
}

.profile-bonus-open-btn:disabled {
    opacity: 0.68;
}

.profile-bonus-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
}

.profile-bonus-prizes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.profile-bonus-prizes span {
    min-width: 0;
    padding: 7px 5px;
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.9);
    color: var(--primary-dark);
    text-align: center;
    font-size: 0.72rem;
    font-weight: 900;
}

.profile-bonus-period {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
}

.profile-bonus-period span {
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 900;
}

.profile-bonus-period small {
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: right;
}

.profile-bonus-ranking,
.profile-bonus-history-list {
    display: grid;
    gap: 7px;
}

.profile-bonus-row {
    width: 100%;
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 7px 8px;
    border: 1px solid rgba(234, 216, 227, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-bonus-row.is-winner {
    border-color: rgba(244, 143, 177, 0.6);
    background: linear-gradient(135deg, rgba(255, 247, 251, 0.95), rgba(255, 255, 255, 0.9));
}

.profile-bonus-rank {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 235, 244, 0.95);
    color: #f05a9d;
    font-size: 0.8rem;
    font-weight: 900;
}

.profile-bonus-avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(244, 143, 177, 0.46);
}

.profile-bonus-name {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.profile-bonus-name strong,
.profile-bonus-name small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-bonus-name strong {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.profile-bonus-name small {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 800;
}

.profile-bonus-score {
    display: grid;
    justify-items: end;
    gap: 1px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 900;
}

.profile-bonus-score small {
    color: var(--text-secondary);
    font-size: 0.64rem;
}

.profile-bonus-award {
    color: #f05a9d;
}

.profile-bonus-history {
    display: grid;
    gap: 8px;
}

.profile-bonus-history h3 {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.profile-bonus-sheet {
    position: fixed;
    inset: 0;
    z-index: 1800;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.profile-bonus-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(63, 38, 54, 0.18);
}

.profile-bonus-panel {
    position: relative;
    width: min(620px, calc(100vw - 22px));
    height: min(80vh, 720px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 18px 18px 0 0;
    background: rgba(255, 252, 254, 0.98);
    box-shadow: 0 -22px 55px rgba(196, 126, 158, 0.26);
    transform: translateY(102%);
    transition: transform 180ms ease;
    overflow: hidden;
}

.profile-bonus-sheet.is-open .profile-bonus-panel {
    transform: translateY(0);
}

.profile-bonus-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(234, 216, 227, 0.68);
}

.profile-bonus-sheet-head h2 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.profile-bonus-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 235, 244, 0.92);
    color: #d84b90;
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
}

.profile-bonus-sheet-content {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    padding: 14px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.profile-bonus-section {
    display: grid;
    gap: 8px;
}

.profile-bonus-section h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.94rem;
}

@media (max-width: 520px) {
    .profile-bonus-prizes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .profile-bonus-row {
        grid-template-columns: 26px 30px minmax(0, 1fr) auto;
        gap: 6px;
    }

    .profile-bonus-avatar {
        width: 30px;
        height: 30px;
    }
}

.profile-upload-manager-btn:hover,
.profile-upload-manager-btn:focus-visible {
    background: linear-gradient(135deg, #ff8fc4, #d93f86);
    outline: none;
}

.profile-card-builder-btn:hover,
.profile-card-builder-btn:focus-visible {
    background: #fff;
    outline: none;
}

.profile-favorites-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.profile-favorite-creator {
    min-width: 0;
    min-height: 46px;
    padding: 6px 8px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 999px;
    background: rgba(255, 247, 251, 0.78);
    color: #6b4560;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.profile-favorite-creator img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-favorite-creator span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-public-instagram {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    color: #b94f87;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.creator-profile-instagram {
    margin-top: 2px;
    color: #e86fa4;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: none;
}

.creator-public-instagram:hover {
    text-decoration: underline;
}

.profile-widget-editor {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(234, 216, 227, 0.82);
}

.profile-widget-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.profile-widget-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.profile-widget-edit-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 143, 177, 0.42);
    border-radius: 999px;
    background: #fff;
    color: #9b3d6d;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
}

.profile-widget-edit-btn.is-active {
    background: rgba(244, 143, 177, 0.16);
    box-shadow: 0 0 0 3px rgba(244, 143, 177, 0.13);
}

.profile-widget-editor-card {
    position: relative;
    min-width: 0;
    padding: 12px 10px 10px 28px;
    border: 1px solid rgba(244, 143, 177, 0.32);
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.88);
    cursor: default;
    touch-action: pan-y;
    user-select: none;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.profile-widget-grid.is-editing .profile-widget-editor-card {
    cursor: grab;
    touch-action: none;
    border-color: rgba(185, 79, 135, 0.46);
}

.profile-widget-editor-card.is-dragging {
    opacity: 0.55;
    transform: scale(0.98);
    box-shadow: 0 12px 26px rgba(196, 126, 158, 0.22);
}

.profile-widget-drag-dot {
    position: absolute;
    left: 10px;
    top: 13px;
    width: 8px;
    height: 28px;
    border-radius: 999px;
    background: radial-gradient(circle, #b94f87 1.5px, transparent 2px) 0 0 / 8px 8px;
    opacity: 0.34;
}

.profile-widget-grid.is-editing .profile-widget-drag-dot {
    opacity: 0.9;
}

.profile-widget-editor-card strong {
    display: block;
    margin-bottom: 3px;
    color: #56314b;
    font-size: 13px;
    font-weight: 900;
}

.profile-widget-editor-card small {
    color: #9b7f91;
    font-size: 11px;
    font-weight: 800;
}

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

.creator-public-edit-controls {
    justify-content: flex-end;
}

.creator-public-edit-controls[hidden] {
    display: none !important;
}

.creator-widget {
    position: relative;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.13);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.creator-widget-grid.is-editing .creator-widget {
    cursor: grab;
    touch-action: none;
    border-color: rgba(185, 79, 135, 0.5);
}

.creator-widget.is-dragging {
    opacity: 0.58;
    transform: scale(0.98);
    box-shadow: 0 18px 38px rgba(185, 79, 135, 0.24);
}

.creator-widget-grid.is-editing .creator-widget.is-hidden-widget {
    opacity: 0.42;
    filter: grayscale(0.35);
}

.creator-widget-drag-dot {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 247, 251, 0.94);
    border: 1px solid rgba(244, 143, 177, 0.4);
}

.creator-widget-drag-dot::before {
    content: '';
    position: absolute;
    inset: 7px 9px;
    background: radial-gradient(circle, #b94f87 1.5px, transparent 2px) 0 0 / 8px 8px;
}

.creator-widget.widget-large {
    grid-column: 1 / -1;
}

.creator-widget.widget-medium {
    grid-column: span 1;
}

.creator-widget.widget-small {
    min-height: 112px;
}

.creator-widget h2 {
    margin: 8px 0 8px;
    color: #56314b;
    font-size: 18px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.creator-profile-name-link {
    display: inline-flex;
    width: fit-content;
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.creator-profile-name-link:hover {
    color: #b94f87;
}

.creator-widget-profile {
    position: relative;
    display: grid;
    grid-template-columns: 86px 1fr;
    gap: 14px;
    align-items: center;
}

.creator-widget-cheapest-pack {
    display: grid;
    align-content: start;
    gap: 10px;
}

.creator-cheapest-pack {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.creator-cheapest-pack img {
    width: 68px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(196, 126, 158, 0.18));
}

.creator-cheapest-pack h2 {
    margin: 0 0 8px;
    font-size: 15px;
}

.creator-cheapest-price {
    width: fit-content;
    min-height: 24px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 221, 236, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #7a4c00;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(196, 126, 158, 0.14);
}

.creator-widget-stats {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 10px;
}

.creator-widget-pack-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}

.creator-widget-pack-list span {
    max-width: 100%;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(244, 143, 177, 0.14);
    color: #6b4560;
    font-size: 11px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-public-config {
    padding: 12px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

.creator-public-config[hidden] {
    display: none !important;
}

.creator-config-row {
    display: grid;
    gap: 6px;
}

.creator-config-row label {
    color: #6b4560;
    font-size: 12px;
    font-weight: 900;
}

.creator-config-row select {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(234, 216, 227, 0.95);
    border-radius: 8px;
    background: #fff;
    color: #56314b;
    font-weight: 800;
}

.creator-config-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.creator-config-toggles label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(244, 143, 177, 0.12);
    color: #6b4560;
    font-size: 12px;
    font-weight: 900;
}

.creator-showcase-packs {
    display: grid;
    gap: 8px;
    margin: 10px 0 12px;
}

.creator-showcase-pack {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 0;
    padding: 7px;
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.9);
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.creator-cheapest-pack:hover,
.creator-showcase-pack:hover {
    filter: brightness(1.02);
}

.creator-showcase-pack img {
    width: 46px;
    height: 60px;
    object-fit: contain;
}

.creator-showcase-pack strong,
.creator-showcase-pack small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.creator-showcase-pack strong {
    color: #56314b;
    font-size: 13px;
    font-weight: 900;
}

.creator-showcase-pack small {
    color: #9b7f91;
    font-size: 11px;
    font-weight: 800;
}

.creator-showcase-pack span {
    min-width: 34px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(255, 213, 92, 0.24);
    color: #8a5200;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
}

.profile-tier-progress {
    height: 9px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(234, 216, 227, 0.72);
    overflow: hidden;
}

.profile-tier-bar {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f48fb1, #ffd45c);
    transition: width 240ms ease;
}

.profile-tier-bar.is-boosted {
    background: linear-gradient(90deg, #ffb22e, #ffe08a);
    box-shadow: 0 0 12px rgba(255, 178, 46, 0.42);
}

.profile-withdraw-btn {
    display: inline-flex;
    margin-top: 0;
}

.profile-creator-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 86px;
    padding: 16px;
    border: 1px solid rgba(255, 168, 48, 0.3);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255, 248, 211, 0.96), rgba(255, 225, 242, 0.88));
}

.profile-creator-balance img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.profile-creator-balance b {
    color: #5f3a50;
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    line-height: 1;
}

.profile-creator-balance span {
    color: #8c6b7e;
    font-size: 0.76rem;
    font-weight: 800;
}

.profile-creator-balance-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 10px;
}

.profile-creator-stats-dialog {
    width: min(440px, 100%);
    max-height: min(82vh, 650px);
    overflow: auto;
    border-radius: 20px;
}

.profile-creator-stats-dialog .profile-referral-head {
    margin: 0;
}

@media (max-width: 420px) {
    .profile-creator-balance-actions {
        grid-template-columns: 1fr;
    }
}

.profile-withdraw-min-note {
    margin: 7px 0 0;
    color: #9b7f91;
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.35;
}

#profile-withdraw-stars-btn.profile-withdraw-btn:disabled {
    background: #d8d2da !important;
    background-image: none !important;
    border-color: rgba(120, 112, 124, 0.24) !important;
    color: #8c8490 !important;
    cursor: not-allowed !important;
    opacity: 1;
    pointer-events: none;
    box-shadow: none !important;
    transform: none !important;
}

.withdraw-stars-modal {
    position: fixed;
    inset: 0;
    z-index: 21000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(54, 38, 52, 0.34);
}

.withdraw-stars-dialog {
    width: min(360px, 100%);
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 60px rgba(50, 28, 44, 0.24);
}

.withdraw-stars-head,
.withdraw-stars-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.withdraw-stars-head span {
    color: #f0629a;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.withdraw-stars-close {
    border: 0;
    background: transparent;
    color: #7f6e80;
    cursor: pointer;
    font-weight: 900;
}

.withdraw-stars-dialog strong {
    color: var(--primary-dark);
}

.withdraw-stars-dialog small {
    color: #8b7e8d;
}

.profile-referral-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.profile-referral-head h2 {
    margin: 5px 0 0;
    color: var(--text-primary);
    font-size: 1.08rem;
}

.profile-referral-head strong {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffd45c, #f39a2f);
    color: #3d2500;
    font-size: 0.82rem;
    box-shadow: 0 8px 18px rgba(207, 130, 28, 0.2);
}

.profile-referral-row {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.profile-referral-row + .profile-referral-row {
    grid-template-columns: 52px minmax(0, 1fr);
}

.profile-referral-row label {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-referral-input {
    min-width: 0;
    width: 100%;
    height: 36px;
    border: 1px solid rgba(234, 216, 227, 0.96);
    border-radius: 8px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    font-size: 0.82rem;
}

.profile-promo-compact {
    border: 1px solid rgba(234, 216, 227, 0.86);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.14);
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

.profile-promo-head {
    display: grid;
    gap: 3px;
}

.profile-promo-head h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.1;
}

.profile-promo-compact .profile-role {
    width: max-content;
}

.profile-promo-compact .profile-referral-message {
    grid-column: 1 / -1;
}

.profile-promo-search {
    display: grid;
    grid-template-columns: 7fr 3fr;
    align-items: center;
    gap: 8px;
}

.profile-promo-search .profile-referral-input {
    grid-column: auto;
}

.profile-promo-redeem-btn {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1;
}

.profile-internal-card .profile-danger-card {
    margin: 0;
}

.admin-promo-panel {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-subheader {
    margin-top: 8px;
}

.profile-promo-admin-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.profile-promo-create-btn {
    width: 100%;
}

.profile-promo-code-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.profile-promo-code-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(244, 143, 177, 0.26);
    border-radius: 10px;
    background: rgba(255, 247, 251, 0.72);
}

.profile-promo-code-item strong,
.profile-promo-code-item small {
    display: block;
}

.profile-promo-code-item strong {
    color: #5c4052;
    font-size: 0.82rem;
    font-weight: 900;
}

.profile-promo-code-item small {
    color: #9d748c;
    font-size: 0.72rem;
    margin-top: 2px;
}

.profile-promo-delete-btn {
    min-width: 72px;
}

.coin-audit-sheet {
    position: fixed;
    inset: 0;
    z-index: 1300;
    pointer-events: none;
}

.coin-audit-sheet.is-open {
    pointer-events: auto;
}

.coin-audit-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(64, 42, 58, 0.22);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.coin-audit-sheet.is-open .coin-audit-backdrop {
    opacity: 1;
}

.coin-audit-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75vh;
    padding: 14px;
    border-radius: 22px 22px 0 0;
    background: rgba(255, 250, 253, 0.98);
    border: 1px solid rgba(244, 143, 177, 0.35);
    box-shadow: 0 -18px 45px rgba(128, 77, 106, 0.22);
    transform: translateY(105%);
    transition: transform var(--transition-base);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 12px;
}

.coin-audit-sheet.is-open .coin-audit-panel {
    transform: translateY(0);
}

.coin-audit-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.coin-audit-head h2 {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: 1.05rem;
}

.coin-audit-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7ab8, #f05296);
    color: #fff;
    font-weight: 900;
}

.coin-audit-list {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.princess-codes-sheet-body {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}

.admin-coin-audit-list {
    max-height: min(52vh, 520px);
    padding: 2px 2px 4px 0;
}

.coin-audit-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid rgba(244, 143, 177, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.76);
}

.coin-audit-row strong,
.coin-audit-row small {
    display: block;
}

.coin-audit-row strong {
    color: #5c4052;
    font-size: 0.8rem;
    font-weight: 900;
}

.coin-audit-row small,
.coin-audit-row time {
    color: #9d748c;
    font-size: 0.68rem;
}

.coin-audit-row time {
    text-align: right;
    max-width: 92px;
}

@media (max-width: 640px) {
    .profile-promo-admin-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.profile-referral-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.profile-referral-stats span {
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(244, 143, 177, 0.14);
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.profile-referral-stats b {
    color: var(--text-primary);
}

.profile-referral-details {
    margin-top: 10px;
}

.profile-creator-dashboard-card {
    margin-top: 14px;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 252, 254, .82));
    box-shadow: var(--shadow-soft);
}

.profile-public-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--lavender-ink);
    font-size: .82rem;
}

.profile-public-summary small { color: var(--text-secondary); }
.profile-public-editor { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 99, 173, .14); }
.profile-widget-edit-btn { flex: 0 0 auto; }

.profile-dashboard-earnings { color: #e950a0; font-size: 1.35rem; }
.profile-dashboard-earnings .coin-mini { display: inline-block; width: 18px; height: 18px; margin-right: 4px; vertical-align: -2px; }
.profile-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.profile-dashboard-metrics span { min-width: 0; padding: 10px 8px; border: 1px solid rgba(255, 99, 173, .16); border-radius: 12px; background: rgba(255, 255, 255, .72); text-align: center; }
.profile-dashboard-metrics b, .profile-dashboard-metrics small { display: block; }
.profile-dashboard-metrics b { color: var(--ink); font-size: 1.05rem; }
.profile-dashboard-metrics small { margin-top: 3px; color: var(--lavender-ink); font-size: .68rem; }
.profile-dashboard-popular-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 226, 239, .46); }
.profile-dashboard-popular-head strong { color: var(--ink); }
.profile-dashboard-popular-sheet { width: 80%; margin: 8px auto 0; padding: 10px; border: 1px solid rgba(255, 99, 173, .14); border-radius: 14px; background: rgba(255, 255, 255, .7); }
.profile-dashboard-popular-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.profile-dashboard-popular-card { min-width: 0; text-align: center; }
.profile-dashboard-popular-card img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; }
.profile-dashboard-popular-card strong, .profile-dashboard-popular-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dashboard-popular-card strong { margin-top: 4px; color: var(--ink); font-size: .7rem; }
.profile-dashboard-popular-card small { color: var(--lavender-ink); font-size: .65rem; }
.profile-stats-inline-icon { width: 18px; height: 18px; object-fit: contain; margin-right: 3px; vertical-align: -4px; }
.profile-dashboard-top-packs { margin-top: 14px; }
.profile-dashboard-top-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.profile-dashboard-top-head small { color: var(--lavender-ink); }
.profile-dashboard-pack-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-dashboard-pack { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; padding: 7px; border: 1px solid rgba(255, 99, 173, .16); border-radius: 12px; background: rgba(255, 255, 255, .82); color: var(--ink); text-align: left; }
.profile-dashboard-pack img { width: 38px; height: 52px; object-fit: contain; }
.profile-dashboard-pack-rank { color: #e950a0; font-weight: 800; }
.profile-dashboard-pack strong, .profile-dashboard-pack small { grid-column: 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-dashboard-pack strong { font-size: .74rem; }
.profile-dashboard-pack small { color: var(--lavender-ink); font-size: .66rem; }
@media (max-width: 640px) {
    .profile-dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-dashboard-pack-list { grid-template-columns: 1fr; }
    .profile-dashboard-popular-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-public-summary { align-items: flex-start; flex-direction: column; gap: 3px; }
}

.profile-referral-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    padding: 0 12px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.78);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.profile-referral-details summary::-webkit-details-marker {
    display: none;
}

.profile-referral-details summary::after {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(244, 143, 177, 0.18);
    color: var(--primary-dark);
    font-size: 1rem;
    line-height: 1;
}

.profile-referral-details[open] summary::after {
    content: "-";
}

.profile-invited-list,
.profile-commission-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.profile-invited-item,
.profile-commission-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) minmax(118px, auto);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(234, 216, 227, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.profile-invited-item img,
.profile-commission-item img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff4da;
}

.profile-invited-item strong,
.profile-invited-item small,
.profile-commission-item strong,
.profile-commission-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-invited-item strong,
.profile-commission-item strong {
    color: var(--text-primary);
    font-size: 0.82rem;
}

.profile-invited-item small,
.profile-commission-item small {
    color: var(--text-secondary);
    font-size: 0.68rem;
}

.profile-invited-metrics,
.profile-commission-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
}

.profile-invited-metrics span,
.profile-commission-metrics span,
.profile-commission-metrics b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(255, 213, 92, 0.2);
    color: #6f4300;
    font-size: 0.68rem;
    font-weight: 900;
    white-space: nowrap;
}

.profile-commission-title {
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 900;
}

.profile-commission-main {
    min-width: 0;
}

.profile-commission-metrics b {
    background: linear-gradient(135deg, #ffd45c, #f39a2f);
    color: #3d2500;
}

.profile-invited-empty {
    padding: 12px;
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.8);
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.8rem;
}

.profile-referral-message {
    min-height: 18px;
    margin: 12px 0 0;
    color: var(--primary-dark);
    font-size: 0.72rem;
    font-weight: 700;
}

.profile-reset-note {
    margin: 7px 0 0;
    color: #9b929f;
    font-size: 0.62rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: 0;
}

/* ==========================================
   GACHA
   ========================================== */

.gacha-header {
    min-height: 0;
    margin: 0;
}

.gacha-header .page-title {
    display: none;
}

#back-to-dashboard-btn {
    display: none !important;
}

.gacha-skip-inline-btn {
    align-self: center;
    margin-top: 8px;
    visibility: hidden;
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    border-color: rgba(255, 255, 255, 0.75);
    color: #fff;
    box-shadow: 0 12px 24px rgba(196, 86, 137, 0.18);
}

.gacha-skip-inline-btn:hover {
    background: linear-gradient(135deg, #fb7eaa, #e94d91);
    color: #fff;
}

.mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: max(-42px, calc(env(safe-area-inset-bottom) - 44px));
    z-index: 30;
    width: min(calc(100% - 18px), 430px);
    height: 94px;
    transform: translateX(-50%);
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    gap: 5px;
    padding: 7px 8px 38px;
    border: 1px solid rgba(243, 200, 218, 0.86);
    border-radius: 24px 24px 10px 10px;
    background: rgba(255, 252, 254, 0.92);
    box-shadow: 0 10px 30px rgba(196, 126, 158, 0.16);
    backdrop-filter: blur(14px);
}

body.is-app-view:not(.is-login-view) .mobile-bottom-nav {
    display: grid;
}

body:not(.is-app-view) .dashboard-exit-btn {
    display: none;
}

.mobile-bottom-nav button {
    display: grid;
    place-items: center;
    height: 48px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.nav-home-icon,
.nav-shop-icon,
.nav-card-icon,
.nav-discover-icon,
.nav-profile-icon,
.nav-admin-icon {
    display: block;
    width: 26px;
    height: 26px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 5px 8px rgba(183, 99, 139, 0.18));
}

.nav-home-icon {
    background-image: url('../assets/images/menu/home-menu-v2.webp');
}

.nav-card-icon {
    background-image: url('../assets/images/menu/cards-menu-v2.webp');
}

.nav-discover-icon {
    background-image: url('../assets/images/menu/explora-menu-v2.webp');
}

.nav-shop-icon {
    background-image: url('../assets/images/menu/tienda-menu-v2.webp');
}

.nav-profile-icon {
    background-image: url('../assets/images/menu/profile-menu-v2.webp');
}

.nav-admin-icon {
    -webkit-mask-image: url('../assets/icons/admin.png');
    mask-image: url('../assets/icons/admin.png');
}

.mobile-bottom-nav button:hover,
.mobile-bottom-nav button:focus-visible {
    background: var(--bg-tertiary);
    color: var(--primary-dark);
    outline: none;
}

body.is-login-view .mobile-bottom-nav,
#login-section ~ .mobile-bottom-nav {
    display: none;
}

.discover-shell {
    width: min(100%, 560px);
    margin: 0 auto;
    padding: 18px 10px 98px;
    display: grid;
    gap: 14px;
    overflow: visible;
}

#creators-section {
    padding-bottom: 104px;
}

.creators-shell {
    width: min(100%, 820px);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.creators-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.creators-search-box {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 192, 220, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 32px rgba(196, 126, 158, 0.12);
}

.creators-search-box img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.7;
}

.creators-search-box input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #5c4052;
    font: inherit;
    font-size: 0.96rem;
    font-weight: 800;
}

.creators-search-box input::placeholder {
    color: #b695a8;
}

.creators-list {
    display: grid;
    gap: 10px;
}

.creator-directory-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    min-height: 82px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 192, 220, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 30px rgba(196, 126, 158, 0.1);
}

.creator-directory-photo {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 143, 186, 0.45);
    box-shadow: 0 10px 18px rgba(196, 126, 158, 0.15);
}

.creator-directory-info {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.creator-directory-info strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5c4052;
    font-size: 1rem;
    font-weight: 950;
}

.creator-directory-name {
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    color: #5c4052;
    font: inherit;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.creator-directory-name:active { color: #d95691; }

.creator-directory-sets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.creator-directory-sets span {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(255, 236, 247, 0.92);
    color: #cf4f91;
    font-size: 0.68rem;
    font-weight: 900;
}

.creator-directory-set-count::before {
    content: '';
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 8px;
    border-radius: 2px;
    background: #ff78b2;
    transform: rotate(45deg);
    vertical-align: 1px;
}

.creator-directory-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.creator-directory-shop-btn,
.creator-directory-cromo-btn {
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff75ad, #f15b9d);
    color: #fff;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 950;
    box-shadow: 0 12px 24px rgba(234, 95, 156, 0.2);
    cursor: pointer;
}

.creator-directory-shop-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 92px;
    justify-content: center;
    padding: 0 15px;
}

.creator-directory-shop-btn::before {
    content: '';
    width: 15px;
    height: 14px;
    display: inline-block;
    border: 2px solid currentColor;
    border-top-width: 1.5px;
    border-radius: 3px 3px 4px 4px;
    box-sizing: border-box;
    background: transparent;
    box-shadow: inset 0 -5px 0 rgba(255, 255, 255, 0.12);
}

.creator-directory-shop-btn::after {
    content: '';
    width: 8px;
    height: 6px;
    position: absolute;
    left: 18px;
    top: 10px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

.creator-directory-cromo-btn {
    width: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    background: rgba(255, 236, 247, 0.94);
    border: 1px solid rgba(255, 143, 186, 0.42);
    box-shadow: 0 10px 20px rgba(234, 95, 156, 0.12);
}

.creator-directory-cromo-btn img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    opacity: 0.78;
}

#discover-section {
    overflow: visible;
}

.discover-header {
    padding: 0 4px;
}

#discover-section .discover-header {
    min-height: 0;
}

.discover-feed {
    display: grid;
    gap: 12px;
    overflow: visible;
}

.discover-card {
    display: grid;
    gap: 10px;
    touch-action: pan-y;
    transition: transform 180ms ease, opacity 180ms ease;
}

.discover-card.is-dragging {
    transition: none;
}

.discover-card-image-btn {
    width: 100%;
    min-height: min(72vh, 760px);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    overflow: visible;
    box-shadow: none;
}

.discover-card-image-btn img {
    width: 100%;
    height: min(72vh, 760px);
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 18px 28px rgba(92, 64, 82, 0.18));
}

.discover-creator-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.discover-creator-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.discover-creator-main img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff4da;
}

.discover-creator-row strong,
.discover-creator-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.discover-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.discover-vote-btn,
.discover-star-btn,
.discover-heart-count,
.creator-favorite-btn,
.creator-like-btn {
    border: 0;
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.94);
    color: #b65b86;
    font-weight: 900;
    cursor: pointer;
}

.discover-vote-btn {
    min-height: 42px;
    font-size: 24px;
}

.discover-like-btn,
.discover-heart-count.is-active,
.creator-like-btn.is-active {
    background: rgba(255, 232, 244, 0.96);
    color: #e63886;
}

.discover-dislike-btn {
    color: #8b8190;
}

.discover-star-btn,
.discover-heart-count {
    min-width: 38px;
    min-height: 38px;
    padding: 0 10px;
}

.discover-star-btn.is-active,
.creator-favorite-btn.is-active {
    background: rgba(255, 245, 205, 0.98);
    color: #d89400;
}

.creator-profile-actions {
    display: inline-flex;
    gap: 8px;
    margin-top: 8px;
}

.creator-profile-actions .creator-favorite-btn {
    position: static;
    top: auto;
    right: auto;
}

.creator-favorite-btn,
.creator-like-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
}

.creator-profile-actions .creator-favorite-btn,
.creator-profile-actions .creator-like-btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    transform: translateZ(0);
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.creator-profile-actions .creator-like-btn {
    border: 1px solid rgba(255, 62, 142, 0.45);
    background: linear-gradient(135deg, #ff4f9d, #ff1f78);
    color: #fff;
    box-shadow: 0 10px 18px rgba(240, 38, 126, 0.28);
}

.creator-profile-actions .creator-like-btn.is-active {
    border-color: rgba(156, 145, 154, 0.28);
    background: rgba(156, 145, 154, 0.18);
    color: rgba(88, 78, 86, 0.52);
    box-shadow: none;
    cursor: default;
}

.creator-profile-actions .creator-favorite-btn {
    border: 1px solid rgba(255, 196, 43, 0.62);
    background: linear-gradient(135deg, #ffd84f, #ffb300);
    color: #6c3a00;
    box-shadow: 0 10px 18px rgba(232, 163, 0, 0.24);
}

.creator-profile-actions .creator-favorite-btn.is-active {
    border-color: rgba(156, 145, 154, 0.28);
    background: rgba(156, 145, 154, 0.18);
    color: rgba(88, 78, 86, 0.54);
    box-shadow: none;
}

.creator-profile-actions .creator-favorite-btn.is-active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    height: 2px;
    border-radius: 999px;
    background: rgba(88, 78, 86, 0.58);
    transform: rotate(-28deg);
    pointer-events: none;
}

.creator-profile-actions .creator-favorite-btn.is-popping,
.creator-profile-actions .creator-like-btn.is-popping {
    animation: creatorActionPop 520ms ease;
}

.creator-profile-actions .creator-favorite-btn.is-popping::before,
.creator-profile-actions .creator-like-btn.is-popping::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0 24%, transparent 58%);
    animation: creatorActionBurst 520ms ease;
    pointer-events: none;
}

@keyframes creatorActionPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    70% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@keyframes creatorActionBurst {
    0% { opacity: 0.9; transform: scale(0.2); }
    100% { opacity: 0; transform: scale(1.5); }
}

.creator-heart-meter {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 232, 244, 0.9);
    color: #c5427d;
    font-size: 12px;
    font-weight: 900;
}

.discover-creator-row strong {
    font-size: 14px;
    font-weight: 900;
}

.discover-creator-row small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.discover-creator-setup[hidden] {
    display: none !important;
}

.discover-setup-card {
    padding: 14px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.12);
}

.discover-setup-card h2 {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: 17px;
    line-height: 1.15;
}

.discover-setup-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.discover-setup-active {
    padding: 10px 12px;
}

.discover-setup-active h2 {
    font-size: 15px;
}

.discover-select-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.discover-select-card {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 7px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.82);
    cursor: pointer;
}

.discover-select-card:has(input:checked) {
    border-color: #f05f9e;
    background: rgba(255, 234, 247, 0.96);
    box-shadow: 0 12px 26px rgba(240, 95, 158, 0.18);
}

.discover-select-card input {
    justify-self: end;
}

.discover-select-image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

.discover-select-card span {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.15;
    text-align: center;
    overflow-wrap: anywhere;
}

.discover-presentation-sheet {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    align-items: end;
}

.discover-presentation-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(80, 45, 68, 0.26);
}

.discover-presentation-panel {
    position: relative;
    height: min(80vh, 720px);
    padding: 16px;
    border-radius: 22px 22px 0 0;
    border: 1px solid rgba(244, 172, 206, 0.72);
    background: rgba(255, 250, 253, 0.98);
    box-shadow: 0 -22px 54px rgba(159, 90, 126, 0.2);
    overflow: hidden;
}

.discover-presentation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.discover-presentation-head h2 {
    margin: 3px 0 0;
    font-size: 18px;
    color: var(--text-primary);
}

.discover-presentation-close {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(244, 172, 206, 0.78);
    border-radius: 999px;
    background: #fff;
    color: var(--accent-pink);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.discover-select-grid-sheet {
    height: calc(100% - 74px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 2px 2px 22px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.discover-select-grid-sheet .discover-select-card {
    border-radius: 10px;
    text-align: center;
}

.discover-empty {
    min-height: 62vh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 24px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

.discover-empty p {
    margin: 0;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 900;
}

.discover-liked-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    min-height: 80vh;
    padding: 14px;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -18px 46px rgba(89, 53, 75, 0.24);
}

.discover-liked-sheet[hidden] {
    display: none !important;
}

.discover-liked-panel {
    max-width: 560px;
    margin: 0 auto;
    display: grid;
    gap: 12px;
}

.discover-liked-panel h2 {
    margin: 0;
    font-size: 18px;
}

.discover-liked-close {
    justify-self: end;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.95);
    color: #c5427d;
    font-size: 22px;
    font-weight: 900;
}

.discover-liked-grid {
    max-height: calc(80vh - 92px);
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.discover-liked-card {
    min-width: 0;
    display: grid;
    gap: 6px;
    padding: 8px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 247, 251, 0.86);
    color: var(--text-primary);
    font-weight: 900;
}

.discover-liked-card img {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

@media (max-width: 560px) {
    .discover-shell {
        padding: max(68px, calc(env(safe-area-inset-top, 0px) + 42px)) 8px 94px;
        gap: 8px;
    }

    #discover-section .discover-header {
        padding: 0 6px;
    }

    #discover-section .discover-header .shop-kicker {
        font-size: 12px;
    }

    .discover-card,
    .discover-feed {
        gap: 8px;
    }

    .discover-card-image-btn,
    .discover-card-image-btn img {
        height: min(55vh, 500px);
        min-height: 0;
    }

    .discover-action-row {
        gap: 8px;
    }

    .discover-vote-btn {
        min-height: 38px;
        font-size: 22px;
    }

    .discover-creator-row {
        padding: 7px 9px;
    }

    .discover-creator-main {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .discover-creator-main img {
        width: 40px;
        height: 40px;
    }

    .discover-select-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .discover-select-grid-sheet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* El indicador de set se conserva en las miniaturas, no sobre el sobre principal. */
#envelope-3d-container > .gacha-set-bubble {
    display: none !important;
}

.gacha-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: calc(100svh - 84px);
    padding: max(6px, env(safe-area-inset-top)) var(--spacing-lg) calc(92px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.envelope-wrapper,
.card-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.envelope-wrapper {
    --gacha-envelope-w: min(calc(100vw - 60px), 292px, 43svh);
    --gacha-envelope-h: calc(var(--gacha-envelope-w) * 1.4167);
    position: static;
    width: 100%;
    min-height: 0;
    padding-top: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    touch-action: manipulation;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('../assets/images/app-background-soft-v1.webp') center / cover fixed no-repeat;
    opacity: 0.55;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.42);
}

.telegram-web-block {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: none;
    place-items: center;
    padding: 22px;
    background: linear-gradient(135deg, #fff7fb, #f7edff);
}

.telegram-web-block-card {
    width: min(100%, 390px);
    display: grid;
    gap: 12px;
    padding: 24px;
    border: 1px solid rgba(244, 143, 177, 0.48);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 24px 70px rgba(92, 64, 82, 0.18);
    text-align: center;
}

.telegram-web-block-card span {
    justify-self: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 226, 238, 0.9);
    color: #f05296;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.profile-role.is-princess-creator {
    background: linear-gradient(135deg, rgba(255, 226, 132, 0.58), rgba(255, 246, 208, 0.94));
    color: #8a5a00;
    border: 1px solid rgba(214, 158, 33, 0.42);
    box-shadow: 0 8px 18px rgba(202, 146, 34, 0.14);
}

.profile-role.is-collaborator {
    border-color: rgba(69, 154, 255, 0.34);
    background: linear-gradient(135deg, #61b5ff, #6979e8);
    color: #fff;
    box-shadow: 0 6px 14px rgba(74, 112, 218, 0.2);
}

.telegram-web-block-card h1 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.32rem;
    line-height: 1.16;
}

.telegram-web-block-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.42;
}

.envelope-wrapper .envelope-3d-perspective {
    position: relative;
    top: auto;
    left: auto;
    margin-left: 0;
    margin-top: clamp(-28px, -4svh, -10px);
    margin-bottom: clamp(6px, 1.1svh, 10px);
    z-index: 2;
}

.gacha-open-card-count {
    order: 2;
    margin: 1px 0 0;
    color: #7d6073;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.gacha-open-rarities {
    order: 3;
    max-width: min(100%, 310px);
    margin: 0 0 5px;
    color: #806a78;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    opacity: 0.58;
}

.hint-text {
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    text-align: center;
}

.hint-open-text {
    margin: -2px 0 0;
    color: #b85a83;
    font-size: 13px;
    font-weight: 900;
}

.hint-open-button {
    order: 4;
    min-width: 170px;
    min-height: 44px;
    margin: 0;
    padding: 10px 28px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #d166cf 0%, #ff5aa8 64%, #ff84b9 100%);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 14px 28px rgba(196, 86, 137, 0.2);
    cursor: pointer;
}

.hint-open-button:active {
    transform: translateY(1px);
}

.gacha-results-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px;
    width: min(100%, 520px);
    min-width: 0;
}

.gacha-results-grid .gacha-result-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
}

.gacha-pack-rating {
    display: grid;
    justify-items: center;
    gap: 6px;
    width: min(100%, 420px);
    margin: 14px auto 4px;
    padding: 10px 14px;
    border: 1px solid rgba(244, 143, 177, 0.24);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
}

.gacha-pack-rating-label {
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 900;
}

.gacha-pack-rating-hearts {
    display: flex;
    align-items: center;
    gap: 5px;
}

.gacha-rating-heart {
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: rgba(219, 151, 181, 0.38);
    font-size: 1.55rem;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.16s ease, color 0.16s ease;
}

.gacha-rating-heart:hover,
.gacha-rating-heart.is-selected {
    color: #f45b9f;
    transform: scale(1.08);
}

.gacha-rating-heart:disabled {
    cursor: default;
}

.gacha-pack-rating-message {
    min-height: 15px;
    color: #ad6a8d;
    font-size: 0.7rem;
    font-weight: 800;
}

@media (max-width: 420px) {
    .gacha-results-grid {
        gap: 8px;
    }
}

@media (min-width: 421px) and (max-width: 780px) {
    .packs-highlight-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .packs-highlight-row .pack-list-card-large {
        width: min(100%, 128px);
    }
}

.hint-open-button.is-revealing,
.cromo-unlock-btn.is-revealing {
    cursor: wait;
    animation: revealButtonPulse 0.9s ease-in-out infinite alternate;
}

@keyframes revealButtonPulse {
    from { opacity: 0.72; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.gacha-actions {
    width: 100%;
    max-width: 400px;
}

.gacha-pack-info {
    width: min(100%, 390px);
    order: 1;
    margin-top: 4px;
    padding: 0;
    display: grid;
    justify-items: center;
    gap: 7px;
}

.gacha-pack-info[hidden] {
    display: none !important;
}

.gacha-info-creator {
    order: 2;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 5px 15px;
    border: 1px solid rgba(243, 200, 218, 0.86);
    border-radius: 999px;
    background: rgba(255, 236, 247, 0.78);
    color: #c45486;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.08);
    cursor: pointer;
    overflow: hidden;
}

.gacha-info-creator img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.82);
}

.gacha-info-creator span {
    min-width: 0;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.gacha-info-creator:active {
    transform: translateY(1px);
}

.gacha-info-cost {
    order: 1;
    display: flex;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    opacity: 1;
}

.gacha-info-price {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: #6f4d63;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.1);
}

.gacha-info-price .coin-mini {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.gacha-info-panel {
    order: 3;
    width: min(100%, 330px);
    display: grid;
    justify-items: center;
    padding: 11px 14px;
    border: 1px solid rgba(255, 214, 232, 0.76);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 34px rgba(196, 126, 158, 0.08);
    backdrop-filter: blur(6px);
}

.gacha-info-panel[hidden] {
    display: none !important;
}

.gacha-info-description {
    max-width: 100%;
    margin: 0;
    color: #8f6d82;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
    text-align: center;
    opacity: 0.82;
}

.gacha-info-description span {
    display: inline;
}

.gacha-info-description strong {
    color: #a35d80;
    font-weight: 900;
}

.gacha-bottom-actions {
    position: fixed;
    left: 50%;
    bottom: var(--gacha-bottom-actions-bottom, 72px);
    z-index: 31;
    width: min(100%, 330px);
    display: grid;
    grid-template-columns: minmax(78px, 1fr) 42px minmax(78px, 1fr);
    align-items: center;
    gap: 8px;
    transform: translateX(-50%);
    pointer-events: auto;
    visibility: visible;
}

#gacha-section {
    overflow: visible;
}

#gacha-section .envelope-wrapper {
    gap: clamp(6px, 1.1svh, 10px);
}

.gacha-bottom-btn {
    min-width: 0;
    height: 32px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #b44d7a;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 12px 26px rgba(196, 126, 158, 0.12);
    backdrop-filter: blur(10px);
    cursor: pointer;
    pointer-events: auto;
}

.gacha-bottom-info {
    justify-self: start;
    padding: 0 11px;
}

.gacha-bottom-shop {
    justify-self: end;
    padding: 0 11px;
}

.gacha-bottom-back {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border-color: rgba(244, 143, 177, 0.6);
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 14px 28px rgba(196, 86, 137, 0.2);
}

.gacha-bottom-btn.is-active {
    background: rgba(255, 236, 247, 0.94);
    color: #8f335f;
    border-color: rgba(244, 143, 177, 0.62);
}

.gacha-bottom-btn[hidden] {
    display: none !important;
}

/* ==========================================
   COLECCIÓN
   ========================================== */

.collection-header {
    display: none;
}

.rarity-filter {
    display: flex;
    gap: var(--spacing-md);
    margin-top: max(10px, env(safe-area-inset-top));
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.collection-owned-toggle {
    min-height: 42px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(244, 143, 177, 0.36);
    border-radius: 999px;
    background: rgba(255, 247, 251, 0.78);
    color: #6b4560;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.collection-owned-toggle input {
    accent-color: #f48fb1;
}

@media (max-width: 520px) {
    .collection-owned-toggle {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 11px;
        font-size: 11px;
    }

    .collection-card-row {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
        gap: 7px;
    }
}

.collection-season-progress {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: -12px 0 18px;
}

.season-progress-pill {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid #ead8e3;
    border-radius: 8px;
    padding: 7px 10px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 800;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-weight: 600;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.collection-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

#collection-section,
#collection-section .collection-grid,
#collection-section .collection-model-section,
#collection-section .collection-set-list,
#collection-section .collection-set-section,
#collection-section .collection-card-row,
#collection-section .collection-card,
#collection-section .collection-card-image {
    touch-action: pan-y;
}

#collection-section {
    overflow: visible;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
}

#collection-section .collection-card,
#collection-section .collection-card-image {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.collection-model-section {
    display: grid;
    gap: 10px;
}

.collection-model-section > h2 {
    margin: 0;
    color: #4f3347;
    font-size: 18px;
    font-weight: 900;
}

.collection-set-list {
    display: grid;
    gap: 12px;
}

.collection-set-section {
    padding: 10px;
    border: 1px solid rgba(244, 143, 177, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.54);
}

.collection-set-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.collection-set-header h3 {
    margin: 0;
    color: #6b4560;
    font-size: 13px;
    font-weight: 900;
}

.collection-set-header span {
    color: #9b778d;
    font-size: 11px;
    font-weight: 800;
}

.collection-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
}

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

@media (max-width: 768px) {
    .section {
        padding: var(--spacing-lg);
    }

    #collection-section.needs-top-safe,
    #profile-section.needs-top-safe,
    #admin-section.needs-top-safe {
        padding-top: max(var(--spacing-lg), calc(env(safe-area-inset-top) + 22px));
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }

    .dashboard-pack-carousel {
        grid-template-columns: minmax(220px, 1fr);
        min-height: 260px;
        gap: var(--spacing-sm);
        margin-top: 18px;
    }

    .pack-stage {
        height: 250px;
    }

    .pack-card {
        width: 122px;
        height: 174px;
    }

    .pack-card-left {
        transform: translateX(calc(-50% - 64px)) translateY(34px) rotate(-7deg) scale(0.82);
    }

    .pack-card-right {
        transform: translateX(calc(-50% + 64px)) translateY(34px) rotate(7deg) scale(0.82);
    }

    .circle-control,
    .circle-action {
        width: 42px;
        height: 42px;
    }
    
    .metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .login-card {
        padding: var(--spacing-lg);
    }

    .admin-uploader,
    .admin-builder {
        grid-template-columns: 1fr;
    }

    .admin-meta-grid label {
        grid-template-columns: 92px 1fr;
    }

    .admin-detail-panel {
        flex-direction: column;
    }

    .admin-detail-panel img {
        width: min(180px, 100%);
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-xl: 16px;
        --spacing-lg: 12px;
        --font-size-3xl: 24px;
    }
    
    .section {
        padding: var(--spacing-lg);
    }
    
    .btn-large {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    .dashboard-pack-carousel {
        grid-template-columns: minmax(190px, 1fr);
        min-height: 250px;
    }

    .metrics-grid {
        top: 10px;
        left: 8px;
        right: 8px;
    }

    .pack-card-left {
        transform: translateX(calc(-50% - 54px)) translateY(30px) rotate(-7deg) scale(0.8);
    }

    .pack-card-right {
        transform: translateX(calc(-50% + 54px)) translateY(30px) rotate(7deg) scale(0.8);
    }
}

.admin-library {
    width: min(100%, 980px);
    margin: 22px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(234, 216, 227, 0.9);
}

.admin-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.admin-cache-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.admin-library-header h2 {
    margin: 2px 0 0;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.15;
}

.admin-library-stats {
    margin-top: 0;
}

.admin-library-grid {
    height: auto;
    margin-top: 12px;
    grid-auto-flow: row;
    grid-auto-columns: unset;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    align-items: start;
    overflow: visible;
}

.admin-library-creator-filter {
    min-width: 172px;
}

.admin-library-editor {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 10001;
    display: grid;
    grid-template-columns: minmax(130px, 220px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    width: min(100%, 560px);
    max-height: 80vh;
    overflow-y: auto;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgba(255, 250, 253, 0.96);
    box-shadow: 0 -18px 44px rgba(109, 66, 94, 0.2);
    transform: translateX(-50%);
    transition: transform 180ms ease;
}

.admin-library-editor-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    background: rgba(65, 48, 61, 0.26);
    backdrop-filter: blur(5px);
}

.admin-library-editor-backdrop.is-active {
    display: block;
}

.admin-library-editor[hidden] {
    display: none !important;
}

.admin-library-editor-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.admin-library-editor-handle {
    grid-column: 1 / -1;
    width: 42px;
    height: 5px;
    justify-self: center;
    border-radius: 999px;
    background: rgba(214, 173, 198, 0.9);
}

.admin-library-editor-image-btn {
    width: min(100%, 190px);
    max-width: 190px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.admin-library-editor-image-btn > img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 280px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(234, 216, 227, 0.9);
    background: rgba(255, 255, 255, 0.75);
}

.admin-library-editor-delete {
    top: 8px;
    right: 8px;
}

.admin-library-editor-close {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(109, 66, 94, 0.12);
}

.admin-library-circulation {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.admin-library-circulation span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 8px;
    border: 1px solid rgba(234, 216, 227, 0.82);
    border-radius: 10px;
    background: rgba(255, 247, 251, 0.74);
    color: #8f6d82;
    font-size: 10px;
    font-weight: 800;
}

.admin-library-circulation img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.admin-library-circulation b {
    color: #5c4052;
    font-size: 13px;
}

.admin-library-editor-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.admin-library-editor-form label {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 900;
}

.admin-library-editor-form .admin-input,
.admin-library-editor-form .admin-select {
    width: 100%;
    min-width: 0;
}

.admin-library-editor-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 680px) {
    .admin-library-editor {
        grid-template-columns: 1fr;
    }

    .admin-detail-panel {
        grid-template-columns: minmax(104px, 42%) minmax(0, 1fr);
    }

    .admin-card-guided-fields,
    .admin-library-editor-form {
        grid-template-columns: 1fr;
    }

    .admin-card-guided-fields-compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-filter-bar {
        margin-left: -2px;
        margin-right: -2px;
    }
}

.admin-promotion-card {
    margin: 10px 0 18px;
    border: 1px solid rgba(230, 88, 153, 0.22);
    border-radius: 16px;
    background: rgba(255, 247, 252, 0.66);
}

.profile-promotion-card {
    width: 100%;
    margin: 0;
    border-color: rgba(234, 216, 227, 0.86);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(196, 126, 158, 0.16);
}

.profile-promotion-card > summary {
    min-height: 72px;
}

.profile-promotion-card > summary .profile-role {
    margin-bottom: 5px;
}

.profile-promotion-card .admin-promotion-form {
    padding-top: 0;
}

.admin-promotion-card > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 58px;
    padding: 11px 14px;
    color: var(--admin-ink, #5e4058);
    cursor: pointer;
    list-style: none;
}

.admin-promotion-card > summary::-webkit-details-marker {
    display: none;
}

.admin-promotion-card > summary > span {
    display: grid;
    gap: 2px;
}

.admin-promotion-card > summary strong {
    font-size: 15px;
}

.admin-promotion-card > summary small {
    color: rgba(94, 64, 88, 0.6);
    font-size: 10px;
}

.admin-promotion-card > summary > b {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(230, 88, 153, 0.23);
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.74);
    color: #d95691;
    font-size: 20px;
    transition: transform 180ms ease;
}

.admin-promotion-card[open] > summary > b {
    transform: rotate(45deg);
}

.admin-promotion-form {
    display: grid;
    gap: 10px;
    padding: 0 14px 14px;
}

.admin-promotion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.admin-promotion-field {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.admin-promotion-field > span {
    color: rgba(94, 64, 88, 0.7);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-promotion-message-field textarea {
    width: 100%;
    min-height: 70px;
    resize: vertical;
    box-sizing: border-box;
}

.admin-promotion-link-preview {
    margin: 0;
    color: rgba(94, 64, 88, 0.6);
    font-size: 11px;
    line-height: 1.35;
}

.admin-promotion-send-btn {
    width: 100%;
}

.admin-global-discount-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 12px;
    border: 1px solid rgba(151, 130, 143, .22);
    border-radius: 12px;
    background: rgba(255, 255, 255, .7);
    color: #73586a;
    font-size: 11px;
}

.admin-global-discount-current > span {
    display: grid;
    gap: 3px;
}

.admin-global-discount-current b {
    font-size: 13px;
}

.admin-global-discount-current small {
    color: rgba(94, 64, 88, .62);
}

.admin-global-discount-current.is-active {
    border-color: rgba(222, 162, 25, .55);
    background: linear-gradient(135deg, rgba(255, 248, 206, .94), rgba(255, 231, 156, .7));
    color: #815600;
}

.admin-global-discount-current > strong {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: 9px;
    text-transform: uppercase;
}

.admin-global-discount-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(100px, .8fr);
}

.admin-discount-input {
    position: relative;
    display: block;
}

.admin-discount-input .admin-input {
    width: 100%;
    padding-right: 34px;
}

.admin-discount-input > b {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: #b77700;
}

.admin-global-discount-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

@media (max-width: 560px) {
    .admin-promotion-grid {
        grid-template-columns: 1fr;
    }

    .admin-global-discount-actions {
        grid-template-columns: 1fr;
    }
}

.admin-saved-card .sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.admin-saved-card {
    position: relative;
}

.admin-card-circulation-bubbles {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.admin-card-circulation-bubbles span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 3px 7px;
    border: 1px solid rgba(244, 143, 177, 0.26);
    border-radius: 999px;
    background: rgba(255, 239, 247, 0.86);
    color: #b83275;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
}

.admin-card-circulation-bubbles img {
    width: 13px;
    height: 13px;
    object-fit: contain;
    margin-right: 3px;
}

.admin-card-edit-btn {
    min-width: 32px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 13px;
}

.admin-card-delete-trash {
    border: 0;
    background: rgba(255, 255, 255, 0.92);
    color: #d84b90;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

.admin-card-delete-trash span,
.admin-card-delete-trash::before,
.admin-card-delete-trash::after {
    display: none !important;
}

.admin-card-select-delete {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(244, 143, 177, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.12);
}

.admin-card-select-delete input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.admin-card-select-delete span {
    width: 14px;
    height: 14px;
    border: 2px solid #f05f9e;
    border-radius: 5px;
}

.admin-card-select-delete input:checked + span {
    background: #f05f9e;
    box-shadow: inset 0 0 0 3px #fff;
}

.admin-saved-card-preview-btn {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}

.admin-card-edit-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    min-width: 52px;
    height: 28px;
    padding: 0 10px;
    border: 1.5px solid rgba(244, 143, 177, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #f05f9e;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.12);
}

.admin-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(40, 24, 36, 0.62);
    backdrop-filter: blur(10px);
}

.admin-edit-dialog {
    width: min(520px, 100%);
    max-height: min(88vh, 720px);
    overflow: auto;
    padding: 18px;
    border: 1px solid rgba(244, 143, 177, 0.36);
    border-radius: 18px;
    background: rgba(255, 250, 253, 0.98);
    box-shadow: 0 26px 70px rgba(96, 42, 72, 0.22);
}

.admin-edit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-edit-header h2 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.admin-edit-close {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(244, 143, 177, 0.5);
    border-radius: 999px;
    background: #fff;
    color: #bf5f8a;
    font-weight: 900;
    cursor: pointer;
}

.admin-edit-card-image {
    width: min(180px, 44vw);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    display: block;
    margin: 0 auto 14px;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(196, 126, 158, 0.18);
}

.admin-edit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.admin-edit-grid label {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.admin-saved-card .admin-badge {
    margin-top: 0;
    white-space: nowrap;
}

.card-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5vw;
    overflow: auto;
    background: rgba(40, 24, 36, 0.62);
    backdrop-filter: blur(10px);
}

.card-preview-image {
    display: block;
    width: min(82vw, 420px, calc((100dvh - 96px) * 0.75)) !important;
    max-width: min(82vw, 420px) !important;
    height: auto;
    max-height: calc(100dvh - 96px) !important;
    object-fit: contain;
    border-radius: 14px;
}

.secure-card-preview-frame {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: min(82vw, 420px, calc((100dvh - 96px) * 0.75));
    max-width: calc(100vw - 48px);
    height: auto;
}

.secure-card-preview-frame > .card-preview-image {
    display: block;
}

.card-owner-watermark {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 3.4%;
    z-index: 5;
    pointer-events: none;
    user-select: none;
    color: rgba(82, 45, 72, 0.28);
    font-size: clamp(7px, 1.35vw, 10px);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.58);
    transform: rotate(-1.2deg);
    mix-blend-mode: multiply;
}

.collection-preview-content {
    position: relative;
    transform-style: preserve-3d;
    perspective: 900px;
    cursor: grab;
    transition: transform 170ms ease, opacity 170ms ease;
    will-change: transform, opacity;
    touch-action: none;
}

.collection-preview-content.is-grabbing {
    cursor: grabbing;
    transition: none;
}

body.collection-preview-open {
    overflow: hidden;
    overscroll-behavior: none;
}

.collection-preview-content.slide-left {
    opacity: 0;
    transform: translateX(-54px) rotateY(-8deg);
}

.collection-preview-content.slide-right {
    opacity: 0;
    transform: translateX(54px) rotateY(8deg);
}

.collection-preview-content.enter-left {
    animation: previewEnterLeft 180ms ease-out;
}

.collection-preview-content.enter-right {
    animation: previewEnterRight 180ms ease-out;
}

@keyframes previewEnterLeft {
    from { opacity: 0; transform: translateX(-54px) rotateY(-8deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

@keyframes previewEnterRight {
    from { opacity: 0; transform: translateX(54px) rotateY(8deg); }
    to { opacity: 1; transform: translateX(0) rotateY(0); }
}

.full-art-sublime-media {
    border-radius: 12px;
    object-fit: cover;
    background: linear-gradient(145deg, #fff6cf, #e6b84f);
}

.full-art-sublime-preview {
    width: min(92vw, 504px);
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 28px 80px rgba(124, 80, 12, 0.42), inset 0 0 0 2px rgba(255, 246, 201, 0.8);
}

.card-preview-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.86);
    color: var(--primary-dark);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 480px) {
    .admin-library-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-library-header .btn {
        width: 100%;
    }

    .admin-header-actions {
        width: 100%;
    }
}


#shop-section {
    width: min(100%, 980px);
    padding-bottom: 98px;
}

.shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.shop-kicker {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-total-card,
.shop-stat {
    border: 1px solid rgba(243, 200, 218, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 32px rgba(196, 126, 158, 0.12);
}

.shop-total-card {
    min-width: 86px;
    padding: 10px 12px;
    text-align: center;
}

.shop-total-card span,
.shop-stat span {
    display: block;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.shop-total-card strong {
    color: var(--primary-dark);
    font-size: 24px;
    line-height: 1.1;
}

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

.shop-stat {
    padding: 9px 10px;
}

.shop-stat strong {
    color: var(--text-primary);
    font-size: 15px;
}

.shop-grid {
    display: grid;
    gap: 18px;
}

.shop-model-section {
    display: grid;
    gap: 10px;
}

.shop-model-section h2 {
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.2;
}

.shop-set-list {
    display: grid;
    gap: 12px;
}

.shop-set-section {
    padding: 12px;
    border: 1px solid rgba(234, 216, 227, 0.92);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.58);
}

.shop-set-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.shop-set-header h3 {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-set-header span {
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
}

.shop-set-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.shop-card-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 8px;
}

.shop-card {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(234, 216, 227, 0.96);
    border-radius: 6px;
    background: #fff;
    cursor: default;
    box-shadow: 0 10px 20px rgba(122, 77, 102, 0.1);
}

.shop-card.is-owned {
    cursor: pointer;
    border-color: rgba(244, 143, 177, 0.8);
}

.shop-card.is-sublime-reward {
    border-color: rgba(220, 170, 54, 0.95);
    background: linear-gradient(145deg, #fffaf0, #fff2bd);
    box-shadow: 0 12px 28px rgba(182, 127, 24, 0.24);
}

.shop-card.is-sublime-reward img {
    filter: sepia(0.2) saturate(1.18) brightness(1.04);
}

.set-reward-btn {
    border: 1px solid rgba(170, 156, 166, 0.45);
    background: #eee9ed;
    color: #88747f;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.set-reward-btn.is-claimable {
    border-color: rgba(221, 166, 48, 0.8);
    background: linear-gradient(135deg, #fff7cf, #f2bf4d);
    color: #5f3b00;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(183, 129, 23, 0.2);
}

.set-reward-btn:disabled {
    cursor: default;
    opacity: 0.78;
}

.shop-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
}

.shop-card.is-locked img {
    object-fit: cover;
    filter: saturate(0.9) brightness(1.04);
}

.collection-preview-creator {
    position: static;
    z-index: 2;
    max-width: calc(100% - 84px);
    min-height: 30px;
    padding: 4px 10px 4px 5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 201, 225, 0.86);
    border-radius: 999px;
    background: rgba(255, 171, 211, 0.9);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 10px 22px rgba(196, 86, 137, 0.18);
    cursor: pointer;
}

.collection-preview-creator:disabled {
    cursor: default;
}

.collection-preview-creator img {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.86);
}

.collection-preview-creator span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shop-card span {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    overflow: hidden;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-primary);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    padding: 3px 2px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-card.is-locked span {
    color: var(--text-secondary);
}

@media (max-width: 560px) {
    .shop-header {
        align-items: flex-start;
    }

    .shop-summary {
        grid-template-columns: 1fr;
    }

    .shop-card-row {
        grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
        gap: 7px;
    }
}

.destroy-duplicate-btn {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 4;
    min-height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 6px;
    background: linear-gradient(135deg, #ff93b6, #bba7ff);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(122, 77, 102, 0.2);
}

.collection-card:has(.destroy-duplicate-btn) .collection-card-rarity-badge {
    bottom: 42px;
}

/* Popularity Arena */
#arena-section {
    width: min(100%, 920px);
    padding-top: max(92px, calc(env(safe-area-inset-top, 0px) + 70px));
    padding-bottom: 104px;
}

.arena-shell {
    width: min(100%, 820px);
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

.arena-header,
.arena-panel-head,
.arena-selection-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.arena-header {
    margin-bottom: 2px;
    padding-inline: 4px;
    justify-content: center;
    text-align: center;
}

.arena-header > div {
    position: relative;
    width: 100%;
}

.arena-header .page-title {
    font-size: clamp(2rem, 7vw, 3.35rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.arena-header .page-title::before,
.arena-header .page-title::after {
    content: "✦";
    display: inline-block;
    margin: 0 12px;
    color: #f45a9d;
    font-size: 0.42em;
    vertical-align: middle;
}

.arena-panel {
    border: 1px solid rgba(243, 200, 218, 0.82);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 42px rgba(196, 126, 158, 0.12);
    padding: 14px;
}

.arena-intro div {
    display: grid;
    gap: 7px;
}

.arena-intro {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 22px;
}

.arena-intro-icon {
    width: 68px;
    height: 68px;
    padding: 10px;
    object-fit: contain;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff4fa, #ffe5f1);
    box-shadow: 0 10px 24px rgba(232, 82, 145, 0.12);
}

.arena-intro strong,
.arena-panel-head strong {
    color: #5c4052;
    font-size: 15px;
    font-weight: 900;
}

.arena-intro span,
.arena-field span,
.arena-summary-row small {
    color: #9b7890;
    font-size: 12px;
    font-weight: 700;
}

.arena-intro b,
.arena-selection-status span {
    color: #ef4e93;
    font-size: 13px;
    font-weight: 900;
}

#arena-message {
    margin: 2px 8px;
    color: #644959;
    font-size: 0.88rem;
    line-height: 1.42;
}

.arena-field {
    display: grid;
    gap: 6px;
    margin-bottom: 12px;
}

.arena-field .admin-select {
    width: 100%;
}

.arena-home-panel {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
}

.arena-home-panel[hidden],
.arena-duels-grid[hidden] {
    display: none;
}

.arena-duels-grid {
    display: grid;
    gap: 14px;
}

.arena-event {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(243, 200, 218, 0.82);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.54);
}

.arena-event.is-featured {
    position: relative;
    overflow: hidden;
    padding: 18px;
    border-color: rgba(245, 154, 196, 0.58);
    background:
        radial-gradient(circle at 50% 56%, rgba(255, 220, 237, 0.48), transparent 46%),
        rgba(255, 252, 254, 0.9);
    box-shadow: 0 22px 52px rgba(179, 91, 130, 0.12);
}

.arena-event.is-featured::before {
    content: "✦";
    position: absolute;
    top: 5px;
    right: 14px;
    color: rgba(214, 147, 31, 0.42);
    font-size: 42px;
    pointer-events: none;
}

.arena-event.is-participated {
    border-color: rgba(240, 95, 158, 0.56);
}

.arena-event-countdown {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid rgba(240, 175, 202, 0.42);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.68);
}

.arena-event-countdown span {
    color: #dd4e8e;
    font-size: 0.66rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.arena-event-countdown b {
    color: #6f4b62;
    font-size: 0.72rem;
    white-space: nowrap;
}

.arena-event.is-featured .arena-event-countdown {
    border-color: rgba(241, 159, 195, 0.38);
    background: rgba(255, 246, 251, 0.86);
}

.arena-event-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 4px 0;
}

.arena-event-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.arena-event-head span {
    color: #ed5f9d;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.arena-event-head span > img {
    width: 21px;
    height: 21px;
    margin-right: 5px;
    object-fit: contain;
    vertical-align: middle;
}

.arena-event-head strong {
    color: #5c4052;
    font-size: 1.08rem;
}

.arena-event-head small {
    color: #8a6c80;
    font-size: 0.73rem;
}

.arena-event-head > b {
    flex: 0 0 auto;
    max-width: 145px;
    padding: 8px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff0a9, #f2b442);
    color: #704400;
    text-align: center;
    font-size: 0.72rem;
    line-height: 1.15;
    box-shadow: 0 8px 18px rgba(197, 133, 22, 0.18);
}

.arena-event.is-featured .arena-event-head {
    min-height: 60px;
}

.arena-event.is-featured .arena-event-head > div {
    padding-right: 132px;
}

.arena-event.is-featured .arena-event-head > b {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 78px;
    max-width: 92px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 157, 196, 0.42);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    color: #513745;
    box-shadow: 0 12px 28px rgba(175, 88, 128, 0.12);
}

.arena-event-entry-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.arena-event-entry-cost > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.arena-event-entry-cost > span {
    color: inherit;
    font-size: 1.12rem;
    letter-spacing: 0;
}

.arena-featured-rewards {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 118px;
    padding: 12px 22px;
    border: 1px solid rgba(245, 161, 198, 0.45);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 242, 249, 0.84));
}

.arena-featured-reward-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-width: 0;
}

.arena-featured-reward-item > img {
    width: 76px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(217, 68, 137, 0.2));
}

.arena-featured-reward-item.is-coins > img {
    width: 72px;
    height: 72px;
}

.arena-featured-reward-item > span {
    display: grid;
    gap: 4px;
}

.arena-featured-reward-item strong {
    color: #46313f;
    font-size: 0.96rem;
    text-transform: uppercase;
}

.arena-featured-reward-item.is-coins strong {
    color: #ef4e93;
    font-size: 1.45rem;
}

.arena-featured-reward-item small {
    color: #765c6d;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.arena-featured-reward-plus {
    color: #ef4e93;
    font-size: 1.8rem;
}

.arena-event-reward {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 7px 11px;
    border: 1px solid rgba(242, 177, 63, 0.32);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.58);
    color: #755169;
    font-size: 0.72rem;
}

.arena-event-reward span {
    color: #dc4e8c;
    font-weight: 900;
}

.arena-event-reward strong {
    color: #654559;
}

.arena-event-duels {
    display: grid;
    gap: 12px;
}

.arena-event.is-featured .arena-duel {
    border-color: rgba(243, 156, 195, 0.48);
    background:
        repeating-conic-gradient(from -8deg at 50% 52%, rgba(248, 111, 170, 0.08) 0 8deg, transparent 8deg 18deg),
        rgba(255, 252, 254, 0.9);
    box-shadow: inset 0 0 60px rgba(255, 255, 255, 0.74), 0 18px 38px rgba(196, 91, 140, 0.1);
}

.arena-event.is-featured .arena-duel-side {
    border-color: rgba(243, 152, 192, 0.42);
    background: rgba(255, 255, 255, 0.9);
}

.arena-event.is-featured .arena-vs {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 14px 30px rgba(224, 76, 143, 0.18);
}

.arena-featured-participate {
    width: min(100%, 420px);
    min-height: 52px;
    margin: 0 auto;
    font-size: 1rem;
}

.arena-event-waiting {
    padding: 20px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.65);
    color: #8a6c80;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 800;
}

.arena-duel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(243, 200, 218, 0.82);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 16px 36px rgba(196, 126, 158, 0.12);
}

.arena-duel.has-supported-creator {
    align-items: stretch;
}

.arena-duel.is-muted-duel {
    opacity: 0.62;
}

.arena-duel-side {
    min-width: 0;
    min-height: 334px;
    position: relative;
    overflow: visible;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 9px;
    padding: 12px 10px;
    border: 1px solid rgba(244, 143, 177, 0.26);
    border-radius: 16px;
    background: rgba(255, 247, 251, 0.78);
    color: #5c4052;
    cursor: pointer;
}

.arena-duel-side.is-supported {
    border-color: #f05f9e;
    background: rgba(255, 236, 247, 0.95);
    box-shadow: inset 0 0 0 2px rgba(240, 95, 158, 0.12);
}

.arena-duel-side:disabled {
    opacity: 1;
    cursor: not-allowed;
}

.arena-duel.has-supported-creator .arena-duel-side:not(.is-supported) {
    background: rgba(246, 244, 246, 0.82);
    border-color: rgba(190, 178, 187, 0.48);
    color: #9b9098;
}

.arena-duel.has-supported-creator .arena-duel-side:not(.is-supported) .arena-duel-card {
    filter: grayscale(1) saturate(0.18) opacity(0.58) drop-shadow(0 10px 14px rgba(96, 88, 94, 0.12));
}

.arena-duel-side.is-supported .arena-duel-card {
    filter: drop-shadow(0 14px 20px rgba(240, 95, 158, 0.18));
}

.arena-duel-card {
    width: clamp(158px, 20vw, 190px);
    height: clamp(226px, 28vw, 272px);
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(122, 77, 102, 0.16));
}

.arena-duel-side strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 900;
}

.arena-duel-side small {
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff;
    color: #f05f9e;
    font-size: 10px;
    font-weight: 900;
}

.arena-point-float {
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 4;
    padding: 7px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(196, 86, 137, 0.22);
    animation: arenaPointFloat 1.25s ease-out forwards;
}

@keyframes arenaPointFloat {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(0.88); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -54px) scale(1.05); }
}

.arena-vs {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 24px rgba(196, 126, 158, 0.16);
}

.arena-vs img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    display: block;
}

.arena-duel-meter {
    grid-column: 1 / -1;
    display: grid;
    gap: 6px;
    margin: -2px 4px 0;
}

.arena-duel-meter-track {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: #8fc8ff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 10px 22px rgba(126, 98, 116, 0.12);
}

.arena-duel-meter-track span {
    display: block;
    width: var(--arena-left, 50%);
    height: 100%;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(135deg, #ff8fba, #f05f9e);
}

.arena-duel-meter.is-left-leading .arena-duel-meter-track {
    box-shadow: inset 3px 0 0 rgba(240, 95, 158, 0.55), 0 10px 22px rgba(240, 95, 158, 0.16);
}

.arena-duel-meter.is-right-leading .arena-duel-meter-track {
    box-shadow: inset -3px 0 0 rgba(143, 200, 255, 0.8), 0 10px 22px rgba(92, 145, 210, 0.16);
}

.arena-duel-meter-values {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #8a6c80;
    font-size: 0.76rem;
    font-weight: 900;
}

.arena-duel-meter-values b:first-child {
    color: #f05f9e;
}

.arena-duel-meter-values b:last-child {
    color: #5d9bd6;
}

.arena-support-panel[hidden],
.arena-card-grid[hidden] {
    display: none;
}

body.arena-sheet-open {
    overflow: hidden;
}

.arena-support-sheet {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10040;
    display: block;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    isolation: isolate;
}

.arena-support-sheet[hidden] {
    display: none;
}

.arena-support-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    background: rgba(72, 47, 65, 0.38);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.arena-support-sheet-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    height: min(80vh, 760px);
    height: min(80dvh, 760px);
    max-height: calc(100vh - env(safe-area-inset-top, 0px) - 8px);
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 8px);
    min-height: 420px;
    margin: 0 auto;
    padding: 18px 14px max(14px, env(safe-area-inset-bottom));
    overflow: hidden;
    border: 1px solid rgba(245, 159, 197, 0.55);
    border-bottom: 0;
    border-radius: 28px 28px 0 0;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 222, 239, 0.9), transparent 38%),
        rgba(255, 250, 253, 0.98);
    box-shadow: 0 -20px 55px rgba(103, 58, 85, 0.22);
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
}

.arena-support-sheet-handle {
    flex: 0 0 auto;
    width: 48px;
    height: 5px;
    margin: -8px auto 10px;
    border-radius: 999px;
    background: #e7aec8;
}

.arena-support-sheet-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff0f7;
    color: #dd4d8c;
    font-size: 22px;
    font-weight: 900;
}

.arena-support-sheet .arena-support-panel {
    flex: 0 0 auto;
    margin: 0 38px 10px 0;
    padding: 10px 12px;
}

.arena-support-sheet .arena-support-panel .profile-referral-message {
    margin: 6px 0 9px;
    font-size: 0.72rem;
}

.arena-support-sheet .arena-support-panel .btn {
    min-height: 42px;
}

.arena-support-sheet .arena-card-grid {
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
    padding: 4px 2px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.arena-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px;
}

.arena-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    min-height: 184px;
    padding: 10px 8px;
    border: 1px solid rgba(243, 200, 218, 0.82);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    color: #5c4052;
    cursor: pointer;
    box-shadow: 0 14px 30px rgba(196, 126, 158, 0.1);
}

.arena-card.is-selected {
    border-color: #f05f9e;
    background: rgba(255, 236, 247, 0.92);
    box-shadow: 0 18px 38px rgba(240, 95, 158, 0.2);
}

.arena-card.is-cooldown {
    opacity: 0.5;
    cursor: not-allowed;
}

.arena-card-image {
    width: 76px;
    height: 108px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgba(122, 77, 102, 0.16));
}

.arena-card-score {
    padding: 4px 9px;
    border-radius: 999px;
    background: #fff;
    color: #f05f9e;
    font-size: 11px;
    font-weight: 900;
}

.arena-card small,
.arena-card b {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
}

.arena-card b {
    color: #9b7890;
}

.arena-ranking-list,
.arena-summary {
    display: grid;
    gap: 8px;
}

.arena-rank-row,
.arena-summary-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 247, 251, 0.82);
}

.arena-rank-row b {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(244, 143, 177, 0.18);
    color: #f05f9e;
}

.arena-rank-row span,
.arena-summary-row span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.arena-rank-row strong,
.arena-summary-row b {
    color: #5c4052;
    font-size: 12px;
}

.arena-summary-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto;
}

.arena-reward-panel {
    position: relative;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    padding: 14px 48px 14px 14px;
    border: 1px solid rgba(255, 192, 220, 0.72);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 247, 252, 0.94), rgba(255, 236, 247, 0.82));
    box-shadow: 0 18px 42px rgba(196, 126, 158, 0.14);
}

.arena-reward-panel > img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    opacity: 0.78;
    filter: drop-shadow(0 12px 18px rgba(234, 95, 156, 0.16));
}

.arena-reward-panel span {
    display: block;
    color: #e95f9c;
    font-size: 0.78rem;
    font-weight: 950;
    text-transform: uppercase;
}

.arena-reward-panel strong {
    display: block;
    color: #5c4052;
    font-size: clamp(1.65rem, 7vw, 2.3rem);
    line-height: 1.02;
    font-weight: 950;
}

.arena-reward-panel small {
    display: block;
    margin-top: 5px;
    color: #8a6c80;
    font-size: 0.82rem;
    line-height: 1.25;
    font-weight: 750;
}

.arena-info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 192, 220, 0.82);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: #e95f9c;
    font: inherit;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(196, 126, 158, 0.14);
    cursor: pointer;
}

.arena-rewards-panel {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px 48px 14px 14px;
}

.arena-reward-option {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
}

.arena-reward-option.is-featured {
    border: 1px solid rgba(241, 174, 54, 0.42);
    background: linear-gradient(135deg, rgba(255, 246, 190, 0.92), rgba(255, 224, 241, 0.82));
}

.arena-reward-option > img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    filter: drop-shadow(0 9px 14px rgba(190, 115, 39, 0.18));
}

.arena-rewards-panel .arena-reward-option strong {
    font-size: clamp(1rem, 3vw, 1.32rem);
}

@media (max-width: 620px) {
    .arena-event-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .arena-event-head > b {
        max-width: none;
    }

    .arena-event.is-featured .arena-event-head {
        min-height: 68px;
        flex-direction: row;
    }

    .arena-event.is-featured .arena-event-head > div {
        padding-right: 104px;
    }

    .arena-event.is-featured .arena-event-head > b {
        max-width: 96px;
        padding: 7px 8px;
        font-size: 0.65rem;
    }

    .arena-event-entry-cost > img {
        width: 20px;
        height: 20px;
    }

    .arena-event-reward {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

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

.arena-tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 10030;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(66, 48, 60, 0.34);
    backdrop-filter: blur(14px) saturate(1.04);
}

.arena-tutorial-card {
    position: relative;
    width: min(100%, 390px);
    max-height: min(92svh, 720px);
    display: grid;
    gap: 10px;
    padding: 26px 16px 16px;
    overflow: auto;
    border: 1px solid rgba(255, 192, 220, 0.78);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 250, 253, 0.97), rgba(255, 243, 249, 0.95));
    box-shadow: 0 24px 70px rgba(85, 52, 70, 0.28);
    text-align: center;
}

.arena-tutorial-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 219, 233, 0.78);
    color: #e95f9c;
    font: inherit;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.arena-tutorial-badge {
    width: 84px;
    height: 68px;
    object-fit: contain;
    justify-self: center;
    margin-top: -4px;
    opacity: 0.86;
    filter: drop-shadow(0 10px 18px rgba(234, 95, 156, 0.18));
}

.arena-tutorial-card h2 {
    margin: -4px 0 0;
    color: #e95f9c;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    line-height: 1.05;
    font-weight: 950;
}

.arena-tutorial-subtitle {
    margin: 0;
    color: #7e6175;
    font-size: 0.92rem;
    font-weight: 750;
}

.arena-tutorial-rules {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.arena-tutorial-rules article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 78px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 192, 220, 0.58);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
    text-align: left;
    box-shadow: 0 10px 24px rgba(190, 94, 136, 0.08);
}

.arena-tutorial-rules img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    opacity: 0.72;
}

.arena-tutorial-rules strong {
    display: block;
    color: #e95f9c;
    font-size: 1rem;
    font-weight: 950;
}

.arena-tutorial-rules span {
    display: block;
    margin-top: 3px;
    color: #71576a;
    font-size: 0.84rem;
    line-height: 1.25;
    font-weight: 700;
}

.arena-tutorial-accept {
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #ff75ad, #f15b9d);
    color: #fff;
    font: inherit;
    font-size: 1.08rem;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(234, 95, 156, 0.22);
    cursor: pointer;
}

@media (max-width: 560px) {
    .arena-header {
        align-items: flex-start;
    }

    .arena-header .page-title {
        font-size: clamp(1.9rem, 9.5vw, 2.55rem);
    }

    .arena-header .page-title::before,
    .arena-header .page-title::after {
        margin: 0 6px;
    }

    .arena-intro {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 11px;
        padding: 12px 14px;
    }

    .arena-intro-icon {
        width: 54px;
        height: 54px;
        padding: 8px;
        border-radius: 15px;
    }

    .arena-shell {
        gap: 10px;
    }

    .arena-event.is-featured {
        padding: 11px;
    }

    .arena-featured-rewards {
        gap: 7px;
        min-height: 90px;
        padding: 8px 10px;
        border-radius: 17px;
    }

    .arena-featured-reward-item {
        gap: 6px;
    }

    .arena-featured-reward-item > img {
        width: 48px;
        height: 58px;
    }

    .arena-featured-reward-item.is-coins > img {
        width: 46px;
        height: 46px;
    }

    .arena-featured-reward-item strong {
        font-size: 0.7rem;
    }

    .arena-featured-reward-item.is-coins strong {
        font-size: 1.08rem;
    }

    .arena-featured-reward-item small {
        font-size: 0.58rem;
    }

    .arena-featured-reward-plus {
        font-size: 1.25rem;
    }

    .arena-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .arena-duel {
        grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
        gap: 6px;
        padding: 10px 8px;
    }

    .arena-vs {
        justify-self: center;
        width: 38px;
        height: 38px;
    }

    .arena-vs img {
        width: 28px;
        height: 28px;
    }

    .arena-duel-side {
        min-height: 232px;
        padding: 8px 4px;
    }

    .arena-duel-card {
        width: clamp(104px, 31vw, 128px);
        height: clamp(150px, 44vw, 184px);
    }

    .arena-duel-meter {
        margin-inline: 2px;
    }

    .arena-duel-meter-values {
        font-size: 0.68rem;
    }

    .arena-duel-side strong {
        font-size: 12px;
    }

    .arena-card {
        min-height: 164px;
        padding: 8px 5px;
    }

    .arena-card-image {
        width: 62px;
        height: 92px;
    }

    .arena-summary-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .arena-summary-row small {
        grid-column: 1 / -1;
    }

    .arena-reward-panel:not(.arena-rewards-panel) {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 10px;
        padding: 12px 44px 12px 12px;
        border-radius: 18px;
    }

    .arena-rewards-panel {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        padding: 48px 12px 12px;
        border-radius: 18px;
    }

    .arena-rewards-panel .arena-reward-option {
        width: 100%;
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: center;
    }

    .arena-reward-panel > img {
        width: 62px;
        height: 62px;
    }

    .arena-reward-panel strong {
        font-size: 1.58rem;
    }

    .arena-reward-panel small {
        font-size: 0.76rem;
    }

    .arena-tutorial-modal {
        padding: 14px;
    }

    .arena-tutorial-card {
        width: min(100%, 360px);
        gap: 8px;
        padding: 22px 12px 12px;
        border-radius: 20px;
    }

    .arena-tutorial-rules article {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 70px;
        gap: 10px;
        padding: 7px 10px;
    }

    .arena-tutorial-rules img {
        width: 50px;
        height: 50px;
    }

    .arena-tutorial-rules strong {
        font-size: 0.93rem;
    }

    .arena-tutorial-rules span {
        font-size: 0.78rem;
    }

    .creator-directory-card {
        grid-template-columns: 50px minmax(0, 1fr) auto;
        gap: 8px;
    }

    .creator-directory-photo {
        width: 50px;
        height: 50px;
    }

    .creator-directory-actions {
        flex-direction: row;
        gap: 6px;
    }

    .creator-directory-shop-btn {
        min-height: 34px;
        min-width: 82px;
        padding: 0 11px 0 13px;
        font-size: 0.78rem;
    }

    .creator-directory-shop-btn::after {
        left: 14px;
        top: 8px;
    }

    .creator-directory-cromo-btn {
        width: 34px;
        min-height: 34px;
    }
}

.shop-card.can-buy {
    border-color: rgba(139, 216, 189, 0.95);
    box-shadow: 0 10px 24px rgba(65, 150, 120, 0.22);
}

.shop-card.can-buy span {
    background: rgba(226, 255, 244, 0.92);
    color: #24644f;
}

.shop-card.is-locked {
    cursor: pointer;
    border-color: rgba(244, 143, 177, 0.38);
    background: linear-gradient(145deg, #fff7fb, #ffe4f0);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.game-action-modal {
    position: fixed;
    inset: 0;
    z-index: 20050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(58, 33, 50, 0.54);
    backdrop-filter: blur(10px);
}

.game-action-dialog {
    position: relative;
    width: min(100%, 360px);
    border: 1.5px solid rgba(244, 143, 177, 0.72);
    border-radius: 28px;
    background: rgba(255, 250, 253, 0.78);
    box-shadow: 0 28px 74px rgba(92, 64, 82, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.76);
    padding: 24px 22px 22px;
    text-align: center;
    backdrop-filter: blur(18px) saturate(1.15);
}

.game-action-dialog h2 {
    margin: 0 0 9px;
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.2;
}

.game-action-dialog p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.game-action-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.game-action-btn {
    min-width: 112px;
    min-height: 42px;
    border: 1.5px solid rgba(244, 143, 177, 0.86);
    border-radius: 999px;
    padding: 10px 16px;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0;
}

.game-action-btn-primary {
    background: rgba(244, 143, 177, 0.86);
    color: white;
    box-shadow: 0 14px 28px rgba(236, 111, 157, 0.22);
}

.game-action-btn-secondary {
    background: rgba(255, 255, 255, 0.54);
    color: var(--primary-dark);
}

.game-action-modal.is-warning .game-action-dialog {
    border-color: #f48fb1;
}

.email-bonus-modal {
    position: fixed;
    inset: 0;
    z-index: 20060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(58, 33, 50, 0.42);
    backdrop-filter: blur(10px);
}

.email-bonus-modal.is-open {
    display: flex;
}

.email-bonus-dialog {
    position: relative;
    width: min(100%, 380px);
    display: grid;
    gap: 10px;
    padding: 22px;
    border: 1px solid rgba(244, 143, 177, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 28px 74px rgba(92, 64, 82, 0.24);
}

.email-bonus-dialog h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    line-height: 1.16;
}

.email-bonus-dialog p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.38;
}

.email-bonus-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 230, 241, 0.88);
    color: var(--primary-dark);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.email-bonus-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
}

.email-bonus-form .btn {
    min-height: 36px;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .game-action-buttons {
        flex-direction: column-reverse;
    }

    .game-action-btn {
        width: 100%;
    }

    .email-bonus-form {
        grid-template-columns: 1fr;
    }

    .email-bonus-form .btn {
        width: 100%;
    }
}

@media (max-width: 680px) {
    .admin-ghost-create-grid {
        grid-template-columns: 1fr;
    }

    .admin-ghost-create-grid .btn {
        width: 100%;
    }
}

.game-action-dialog::before {
    content: '';
    position: absolute;
    inset: 10px 14px auto;
    height: 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent);
    pointer-events: none;
}

.shop-generation-section {
    gap: 12px;
}

.shop-generation-section > h2 {
    padding: 0 2px 2px;
    color: #4f3347;
    font-size: 19px;
    font-weight: 900;
}

.shop-rarity-list {
    gap: 10px;
}

.shop-rarity-section {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.5);
}

.shop-rarity-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.shop-rarity-header h3::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px rgba(244, 143, 177, 0.45);
}

.shop-rarity-section.rarity-limited .shop-rarity-header h3::before,
.shop-rarity-section.rarity-legendary .shop-rarity-header h3::before {
    background: #f7b955;
}

.shop-rarity-section.rarity-special .shop-rarity-header h3::before,
.shop-rarity-section.rarity-epic .shop-rarity-header h3::before {
    background: #b8a4ff;
}

.shop-rarity-section.rarity-sweet .shop-rarity-header h3::before {
    background: #ffd166;
}

.shop-rarity-section.rarity-lovely .shop-rarity-header h3::before,
.shop-rarity-section.rarity-rare .shop-rarity-header h3::before {
    background: #82c7f5;
}

.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin: -2px 0 12px;
}

.shop-toolbar label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.shop-toolbar .admin-select {
    min-width: 138px;
    border-color: rgba(244, 143, 177, 0.62);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
}

#shop-creator-filter {
    min-width: min(260px, 100%);
}

.shop-set-order-section .shop-rarity-header h3::before {
    background: #f48fb1;
}

/* Compact mobile shop */
@media (max-width: 560px) {
    #shop-section {
        padding-top: 18px;
    }

    .shop-header {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 8px;
        margin-bottom: 8px;
    }

    .shop-kicker {
        font-size: 10px;
    }

    #shop-section .page-title {
        font-size: 22px;
        line-height: 1.05;
    }

    .shop-total-card {
        min-width: 64px;
        padding: 7px 8px;
        border-radius: 8px;
    }

    .shop-total-card span {
        font-size: 8px;
    }

    .shop-total-card strong {
        font-size: 22px;
    }

    .shop-toolbar {
        justify-content: space-between;
        gap: 8px;
        margin: 0 0 8px;
    }

    .shop-toolbar label {
        font-size: 10px;
    }

    .shop-toolbar .admin-select {
        min-width: 136px;
        max-width: 160px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .shop-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 12px;
    }

    .shop-stat {
        min-width: 0;
        padding: 7px 6px;
        border-radius: 8px;
    }

    .shop-stat span {
        font-size: 8px;
        line-height: 1.1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .shop-stat strong {
        font-size: 13px;
        line-height: 1.15;
    }

    .shop-generation-section > h2 {
        font-size: 17px;
    }
}

.collection-preview-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: min(82vw, 420px);
    max-width: calc(100vw - 48px);
    max-height: calc(100dvh - 40px);
}

#collection-card-preview-modal .secure-card-preview-frame {
    width: min(82vw, 390px, calc((100dvh - 156px) * 0.75));
    max-width: calc(100vw - 48px);
}

#collection-card-preview-modal .card-preview-image {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 156px) !important;
}

#collection-card-preview-modal .collection-preview-content:has(.preview-prize-btn) .secure-card-preview-frame {
    width: min(82vw, 390px, calc((100dvh - 204px) * 0.75));
}

#collection-card-preview-modal .collection-preview-content:has(.preview-prize-btn) .card-preview-image {
    max-height: calc(100dvh - 204px) !important;
}

.collection-preview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.preview-prize-btn {
    flex: 1 0 100%;
    border-color: #f5cf64;
    background: linear-gradient(135deg, #fff1a8, #e5a91d 55%, #fff0a0);
    color: #6f4700;
    box-shadow: 0 8px 24px rgba(218, 157, 20, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.preview-prize-btn:disabled {
    opacity: 0.72;
}

.admin-card-prize-config {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(226, 173, 39, 0.52);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 249, 217, 0.78), rgba(255, 241, 192, 0.52));
}

.admin-card-prize-config legend {
    padding: 0 7px;
    color: #9b6b00;
    font-size: 12px;
    font-weight: 900;
}

.admin-card-prize-config textarea {
    min-height: 72px;
    resize: vertical;
}

.admin-card-prize-config small {
    color: #8a6c29;
    font-size: 10px;
}

.admin-prize-vault-picker {
    display: grid;
    gap: 8px;
}

.admin-prize-link-status {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid rgba(166, 131, 143, .25);
    border-radius: 11px;
    background: rgba(255, 255, 255, .62);
}

.admin-prize-link-status > span:last-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.admin-prize-link-status strong {
    color: #765568;
    font-size: 11px;
}

.admin-prize-link-status small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-prize-link-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b9aeb4;
    box-shadow: 0 0 0 3px rgba(185, 174, 180, .16);
}

.admin-prize-link-status.is-linked {
    border-color: rgba(213, 157, 20, .52);
    background: rgba(255, 241, 184, .72);
}

.admin-prize-link-status.is-linked .admin-prize-link-dot {
    background: #dfa514;
    box-shadow: 0 0 0 3px rgba(223, 165, 20, .17);
}

.admin-prize-link-status.is-pending .admin-prize-link-dot {
    background: #df8a32;
}

.admin-prize-vault-title {
    color: #8b5b23;
    font-size: 12px;
    font-weight: 800;
}

.admin-prize-vault-list {
    display: grid;
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
}

.admin-prize-vault-item {
    width: 100%;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid #efd39b;
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: #744f65;
    text-align: left;
}

.admin-prize-vault-item.is-selected {
    border-color: #e0a51e;
    background: #fff2bd;
    box-shadow: 0 0 0 2px rgba(224, 165, 30, .15);
}

.admin-prize-vault-icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e0a51e;
    color: #fff;
}

.admin-prize-vault-item span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.admin-prize-vault-item small,
.admin-prize-vault-item code {
    overflow: hidden;
    color: #937385;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-prize-vault-item b {
    color: #b87900;
    font-size: 10px;
}

.admin-prize-unlink-btn {
    min-height: 36px;
    border: 1px solid rgba(190, 91, 112, .42);
    border-radius: 11px;
    background: rgba(255, 255, 255, .76);
    color: #a0445d;
    font-size: 11px;
    font-weight: 900;
}

.admin-prize-unlink-btn:disabled {
    opacity: .62;
}

.admin-prize-save-status {
    min-height: 16px;
    margin: 0;
    color: #8b5b23;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

.admin-card-prize-toggle {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    gap: 8px;
}

.preview-action-btn {
    flex: 1 1 0;
    min-height: 38px;
    border: 1.5px solid rgba(244, 143, 177, 0.88);
    border-radius: 999px;
    padding: 9px 10px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.preview-action-primary {
    background: rgba(244, 143, 177, 0.88);
    color: white;
}

.preview-action-secondary {
    background: rgba(255, 255, 255, 0.72);
    color: var(--primary-dark);
}

.collection-preview-note {
    display: block;
    padding: 8px 12px;
    border: 1px solid rgba(244, 143, 177, 0.52);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.featured-floating-pack {
    position: relative;
    display: grid;
    place-items: center;
    width: min(calc(100% - 78px), 265px);
    aspect-ratio: 168 / 238;
    margin: 0 auto 20px;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 24px 26px rgba(236, 111, 157, 0.24));
    animation: featuredPackFloat 3.4s ease-in-out infinite;
    -webkit-animation: featuredPackFloat 3.4s ease-in-out infinite;
    z-index: 4;
}

.featured-floating-pack::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 16px;
    background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.28) 46%, transparent 58% 100%);
    opacity: 0.55;
    transform: translateX(-78%);
    animation: packsSoftReflection 3.6s ease-in-out infinite;
    pointer-events: none;
}

.featured-floating-pack.js-pack-levitating {
    animation: none !important;
    -webkit-animation: none !important;
}

.featured-floating-pack img.js-pack-levitating-image {
    will-change: transform;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.featured-floating-pack::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 92%;
    height: 24px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(122, 77, 102, 0.18), transparent 70%);
    animation: featuredPackShadow 3.4s ease-in-out infinite;
    -webkit-animation: featuredPackShadow 3.4s ease-in-out infinite;
    z-index: 0;
}

.featured-floating-pack img {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 16px;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    opacity: 1;
    transition: opacity 280ms ease, filter 280ms ease;
    will-change: opacity;
}

.featured-floating-pack .featured-floating-pack-image-next {
    opacity: 0;
}

.featured-floating-pack.is-pack-switching #featured-floating-pack-image {
    opacity: 0;
}

.featured-floating-pack.is-pack-switching .featured-floating-pack-image-next {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .featured-floating-pack img {
        transition-duration: 1ms;
    }
}

.catalog-update-notice {
    position: fixed;
    left: 50%;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1400;
    width: min(calc(100% - 28px), 390px);
    min-height: 48px;
    padding: 8px 8px 8px 15px;
    display: flex;
    align-items: center;
    gap: 9px;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 118, 177, 0.38);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(119, 84, 146, 0.2);
    color: #69415d;
    backdrop-filter: blur(14px);
}

.catalog-update-notice[hidden] {
    display: none !important;
}

.catalog-update-notice span {
    min-width: 0;
    flex: 1;
    font-size: 12px;
    font-weight: 900;
}

.catalog-update-notice button {
    min-height: 32px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff78b4, #d85191);
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.catalog-update-notice button[data-catalog-dismiss] {
    width: 30px;
    min-width: 30px;
    padding: 0;
    background: rgba(111, 73, 96, 0.1);
    color: #78546b;
    font-size: 18px;
}

@-webkit-keyframes featuredPackFloat {
    0%, 100% { -webkit-transform: translate3d(0, 0, 0); }
    50% { -webkit-transform: translate3d(0, -22px, 0); }
}

@keyframes featuredPackFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -22px, 0); }
}


@-webkit-keyframes featuredPackShadow {
    0%, 100% { opacity: 0.8; -webkit-transform: translateX(-50%) scale(1); }
    50% { opacity: 0.42; -webkit-transform: translateX(-50%) scale(0.78); }
}

@keyframes featuredPackShadow {
    0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.42; transform: translateX(-50%) scale(0.78); }
}

@media (max-width: 480px) {
    .featured-floating-pack {
        width: min(calc(100% - 82px), 238px);
        margin-top: 0;
        margin-bottom: 16px;
    }
}

.home-pack-actions {
    display: none !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: min(calc(100% - 58px), 330px);
    margin: 0 auto 22px;
}

.home-action-btn {
    min-height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.82);
    border-radius: 999px;
    padding: 8px 10px;
    color: #fff;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0;
    box-shadow: 0 10px 22px rgba(122, 77, 102, 0.1);
}

.home-action-open {
    background: rgba(244, 143, 177, 0.88);
}

.home-action-stars {
    background: linear-gradient(135deg, #ffd35a, #f6a53a);
    color: #3a2400;
}

#dashboard-section.is-home-active {
    justify-content: center;
    padding-top: max(46px, calc(env(safe-area-inset-top) + 34px));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

#dashboard-section.is-home-active .featured-floating-pack {
    margin-top: auto;
    margin-bottom: clamp(14px, 2.2svh, 22px);
}

#dashboard-section.is-home-active .home-mini-packs {
    margin-bottom: auto;
}

.metric-card.metric-stars {
    font: inherit;
    cursor: pointer;
}

.home-game-menu {
    position: fixed;
    right: env(safe-area-inset-right);
    top: calc(50% - 84px);
    z-index: 38;
    display: none;
    gap: 6px;
    padding: 10px 8px 10px 10px;
    border: 1px solid rgba(255, 205, 228, 0.68);
    border-right: 0;
    border-radius: 24px 0 0 24px;
    background: rgba(255, 247, 252, 0.9);
    box-shadow: -8px 14px 28px rgba(91, 64, 82, 0.12);
    backdrop-filter: blur(10px);
}

body.is-dashboard-view .home-game-menu {
    display: grid;
}

.arena-floating-btn {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 205, 228, 0.78);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
}

.arena-floating-btn img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    filter: none;
    opacity: 0.76;
}

.arena-floating-btn .home-game-menu-icon-vs {
    width: 32px;
    height: 24px;
}

.arena-floating-btn .home-game-menu-icon-cromos {
    width: 28px;
    height: 28px;
}

.arena-floating-btn .home-game-menu-icon-creators {
    width: 28px;
    height: 28px;
}

.arena-floating-btn .home-game-menu-icon-fire {
    width: 30px;
    height: 30px;
    object-fit: contain;
    opacity: 0.82;
    filter: saturate(1.04);
}

.home-game-menu-btn:nth-child(2) {
    background: rgba(255, 255, 255, 0.74);
    border-color: rgba(255, 205, 228, 0.78);
}

.arena-floating-btn.is-dragging {
    cursor: pointer;
    transform: scale(1.04);
}

#fire-section {
    min-height: 100vh;
    background: var(--app-shell-background);
}

.fire-shell {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: calc(env(safe-area-inset-top, 0px) + 72px) 0 110px;
}

@media (max-width: 640px) {
    .fire-shell {
        padding-top: calc(env(safe-area-inset-top, 0px) + 88px);
    }
}

.fire-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.fire-balance {
    min-width: 92px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 190, 216, 0.62);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.68);
    text-align: center;
    color: #8f6d82;
    font-size: 11px;
    font-weight: 800;
}

.fire-balance strong {
    display: block;
    margin-top: 3px;
    color: #4f3347;
    font-size: 18px;
    line-height: 1;
}

.fire-intro {
    margin: 0 0 16px;
    color: #8f6d82;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.fire-campaign-list {
    display: grid;
    gap: 14px;
}

.fire-campaign-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(255, 188, 216, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 42px rgba(217, 68, 137, 0.11);
}

.fire-campaign-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.fire-creator-profile-btn {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.fire-creator-profile-btn:focus-visible {
    outline: 2px solid rgba(240, 82, 150, 0.72);
    outline-offset: 3px;
}

.fire-creator-profile-btn > img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 185, 68, 0.74);
}

.fire-creator-profile-copy {
    min-width: 0;
}

.fire-creator-profile-copy > span,
.fire-reward-row span {
    display: block;
    color: #f05296;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.fire-creator-profile-copy strong {
    display: block;
    margin-top: 2px;
    color: #4f3347;
    font-size: 17px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 160ms ease;
}

.fire-creator-profile-btn:hover strong {
    color: #e42f82;
}

.fire-campaign-head b {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255, 245, 250, 0.94);
    color: #4f3347;
    font-size: 13px;
}

.fire-photo-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.fire-objective-thumb {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(255, 195, 224, 0.7);
    border-radius: 14px;
    background: rgba(255, 246, 251, 0.82);
}

.fire-objective-thumb.is-active {
    border-color: rgba(255, 92, 165, 0.78);
}

.fire-objective-thumb.is-unlocked {
    background: linear-gradient(180deg, rgba(255, 244, 250, 0.96), rgba(255, 232, 243, 0.92));
}

.fire-objective-thumb.is-cromo {
    border-color: rgba(245, 180, 68, 0.86);
}

.fire-objective-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background: rgba(255, 240, 248, 0.88);
}

.fire-objective-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.fire-objective-thumb.is-locked:not(.is-cromo-back) .fire-objective-base {
    filter: blur(9px);
    transform: scale(1.06);
}

.fire-objective-thumb.is-locked:not(.is-cromo-back) .fire-objective-image::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255, 105, 172, 0.18);
    pointer-events: none;
}

.fire-objective-thumb span {
    display: block;
    color: #8f6d82;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.fire-objective-thumb.is-unlocked::after {
    content: 'En biblioteca';
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 24px;
    padding: 4px 3px;
    border-radius: 999px;
    background: rgba(255, 92, 165, 0.92);
    color: #fff;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
}

.fire-progress-meta,
.fire-reward-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #7f5f75;
    font-size: 12px;
    font-weight: 800;
}

.fire-progress-meta strong,
.fire-reward-row strong {
    color: #4f3347;
}

.fire-progress-bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(238, 218, 228, 0.84);
}

.fire-progress-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffb84d, #ff5aa5, #c78cf3);
    transition: width 280ms ease;
}

.fire-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: -2px;
    min-width: 0;
}

.fire-pledge-plus {
    order: 2;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6bab, #d783f2);
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 105, 172, 0.22);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
}

.fire-pledge-plus:disabled {
    opacity: 0.42;
    cursor: default;
}

.fire-deadline-wrap {
    position: relative;
    display: grid;
    gap: 7px;
}

.fire-deadline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9b778d;
    text-align: center;
    font-size: 11px;
    font-weight: 900;
}

.fire-deadline-row span {
    min-width: 128px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 246, 251, 0.74);
    border: 1px solid rgba(255, 205, 228, 0.64);
}

.fire-extend-time-btn {
    min-width: 72px;
    height: 30px;
    border: 1px solid rgba(255, 142, 191, 0.68);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    color: #e84f94;
    box-shadow: 0 8px 18px rgba(255, 105, 172, 0.12);
    font-size: 12px;
    font-weight: 950;
    cursor: pointer;
}

.fire-extend-time-btn:disabled {
    opacity: 0.42;
    cursor: default;
}

.fire-time-bubble {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 190, 224, 0.78);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 24px rgba(255, 130, 180, 0.16);
    color: #6f4a62;
    font-size: 11px;
    font-weight: 900;
}

.fire-time-bubble span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.fire-time-bubble button {
    border: 0;
    border-radius: 999px;
    padding: 6px 10px;
    background: linear-gradient(135deg, #ff6bab, #d783f2);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
    cursor: pointer;
}

.fire-time-bubble button:disabled {
    opacity: 0.45;
    cursor: default;
}

.fire-donate-btn {
    order: 1;
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding-left: 14px;
    padding-right: 14px;
    margin: 0;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    font-size: 11px;
}

.fire-donate-btn,
.fire-pledge-plus,
.fire-extend-time-btn,
.fire-time-bubble button {
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}

.fire-donate-btn:active,
.fire-pledge-plus:active,
.fire-extend-time-btn:active,
.fire-time-bubble button:active {
    transform: translateY(1px) scale(.96);
    filter: brightness(1.08);
}

.fire-donate-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}

.fire-donate-amount {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.fire-donate-amount .coin-mini {
    width: 15px;
    height: 15px;
}

.fire-campaign-note {
    color: #9b778d;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
}

.fire-reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 22px;
}

.fire-reveal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(56, 39, 52, 0.42);
    backdrop-filter: blur(8px);
}

.fire-reveal-card-wrap {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #fff;
    text-align: center;
}

.fire-reveal-card {
    position: relative;
    width: min(68vw, 260px);
    aspect-ratio: 3 / 4;
    transform-style: preserve-3d;
    transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
}

.fire-reveal-modal.is-flipped .fire-reveal-card {
    transform: rotateY(180deg);
}

.fire-reveal-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 18px;
    backface-visibility: hidden;
    box-shadow: 0 22px 60px rgba(44, 20, 36, 0.34);
}

.fire-reveal-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fire-reveal-front {
    transform: rotateY(180deg);
}

.fire-reveal-card-wrap strong {
    font-size: 22px;
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(64, 34, 52, 0.4);
}

.fire-reveal-card-wrap span {
    font-size: 13px;
    font-weight: 800;
    opacity: 0.9;
}

.stars-recharge-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(14, 16, 24, 0.72);
    backdrop-filter: blur(6px);
}

.stars-recharge-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: min(88vh, 760px);
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    color: #1d2130;
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.stars-recharge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.stars-recharge-header h2 {
    margin: 0;
    font-size: 1.25rem;
}

.stars-recharge-header p {
    margin: 3px 0 0;
    color: #687089;
    font-size: 0.86rem;
}

#stars-recharge-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #f0f1f5;
    color: #1d2130;
    font-weight: 700;
}

.stars-recharge-promotion {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid rgba(244, 91, 157, 0.34);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 230, 244, 0.96), rgba(244, 229, 255, 0.92));
    color: #b52970;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.stars-recharge-packages {
    display: grid;
    gap: 10px;
}

.stars-recharge-packages[hidden],
.stars-packages-loading[hidden] {
    display: none !important;
}

.stars-packages-loading {
    position: relative;
    min-height: 360px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 9px;
    overflow: hidden;
    padding: 26px 22px;
    border: 1px solid rgba(255, 104, 174, 0.22);
    border-radius: 24px;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 225, 86, 0.2), transparent 32%),
        radial-gradient(circle at 20% 90%, rgba(255, 124, 188, 0.16), transparent 38%),
        linear-gradient(150deg, rgba(255, 252, 255, 0.98), rgba(247, 238, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 42px rgba(118, 74, 143, 0.12);
    text-align: center;
}

.stars-packages-loading::before,
.stars-packages-loading::after {
    content: '✦';
    position: absolute;
    color: rgba(255, 124, 183, 0.48);
    font-size: 22px;
    animation: starsPackagesSparkle 1.7s ease-in-out infinite;
}

.stars-packages-loading::before {
    top: 35px;
    left: 14%;
}

.stars-packages-loading::after {
    right: 13%;
    bottom: 42px;
    animation-delay: -0.8s;
}

.stars-packages-loading-coins {
    position: absolute;
    z-index: 0;
    top: 42px;
    left: 50%;
    width: 250px;
    height: 138px;
    margin: 0;
    opacity: 0.3;
    transform: translateX(-50%);
    pointer-events: none;
}

.stars-packages-loading > :not(.stars-packages-loading-coins) {
    position: relative;
    z-index: 1;
}

.stars-packages-floating-coin {
    position: absolute;
    display: block;
    width: 66px;
    height: 66px;
    filter: drop-shadow(0 12px 13px rgba(205, 132, 24, 0.3));
    animation: starsPackagesCoinFloat 1.8s ease-in-out infinite;
}

.stars-packages-floating-coin:nth-child(1) {
    left: 0;
    top: 28px;
    width: 62px;
    height: 62px;
    animation-delay: -0.55s;
}

.stars-packages-floating-coin:nth-child(2) {
    left: 91px;
    top: 0;
    width: 72px;
    height: 72px;
}

.stars-packages-floating-coin:nth-child(3) {
    right: 0;
    top: 34px;
    width: 58px;
    height: 58px;
    animation-delay: -1.05s;
}

.stars-packages-loading > small {
    color: #d14e8e;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.stars-packages-loading h3 {
    margin: 0;
    color: #533857;
    font-size: 1.5rem;
    font-weight: 950;
}

.stars-packages-loading p {
    min-height: 21px;
    margin: 0;
    color: #806483;
    font-size: 0.86rem;
    font-weight: 800;
}

.stars-packages-loading-benefit {
    max-width: min(390px, 100%);
    padding: 7px 11px;
    border: 1px solid rgba(235, 150, 31, 0.3);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 242, 185, 0.92), rgba(255, 221, 239, 0.9));
    color: #9a5b13;
    font-size: 0.72rem;
    font-weight: 950;
    box-shadow: 0 8px 18px rgba(190, 122, 35, 0.12);
}

.stars-packages-loading-benefit[hidden] {
    display: none !important;
}

.stars-packages-loading-track {
    width: min(360px, 100%);
    height: 12px;
    overflow: hidden;
    margin-top: 5px;
    border-radius: 999px;
    background: rgba(218, 201, 225, 0.48);
    box-shadow: inset 0 2px 5px rgba(91, 51, 105, 0.1);
}

.stars-packages-loading-track span {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffca3f, #ff77b4 52%, #b783ff);
    box-shadow: 0 5px 16px rgba(224, 91, 168, 0.25);
    transition: width 620ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.stars-packages-loading-track span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.78) 48%, transparent 76%);
    transform: translateX(-110%);
    animation: starsPaymentProgressShine 1.15s linear infinite;
}

#stars-packages-loading-value {
    color: #c44e8a;
    font-size: 1.04rem;
    font-weight: 950;
}

.stars-package.is-awaiting-reveal {
    display: none;
}

.stars-package.is-revealing {
    animation: starsPackageBounceIn 880ms cubic-bezier(0.22, 0.82, 0.25, 1) both;
}

.stars-package {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(220px, 1fr) minmax(104px, auto);
    align-items: center;
    gap: 16px;
    min-height: 82px;
    padding: 12px 14px;
    border: 1px solid rgba(34, 38, 55, 0.12);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(32, 43, 74, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.stars-package:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 190, 55, 0.55);
    box-shadow: 0 16px 30px rgba(32, 43, 74, 0.13);
}

.stars-package.has-bonus {
    background: linear-gradient(135deg, #fff7dd 0%, #ffffff 48%, #eef6ff 100%);
}

.stars-package-icon {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 8px 18px rgba(242, 156, 36, 0.34);
    animation: coinPulse 1.8s ease-in-out infinite;
}

#cromos-section {
    min-height: 100svh;
    padding: max(28px, calc(env(safe-area-inset-top) + 18px)) 16px calc(74px + env(safe-area-inset-bottom));
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 213, 92, 0.24), transparent 26%),
        linear-gradient(180deg, #fff9fc 0%, #f5fbff 100%);
}

.cromos-shell {
    width: min(100%, 980px);
    margin: 0 auto;
    display: grid;
    gap: 8px;
}

.cromos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cromos-header .page-title {
    margin: 2px 0 0;
}

.cromos-creator-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 192, 220, 0.68);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 12px 24px rgba(196, 126, 158, 0.1);
}

.cromos-creator-card[hidden] {
    display: none;
}

.cromos-creator-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 143, 186, 0.48);
}

.cromos-creator-card.is-global img {
    padding: 9px;
    object-fit: contain;
    background: rgba(255, 236, 247, 0.92);
    border-color: rgba(255, 143, 186, 0.34);
    opacity: 0.82;
}

.cromos-creator-card span,
.cromos-creator-card strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cromos-creator-card span {
    color: #e95f9c;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.cromos-creator-card strong {
    color: #5c4052;
    font-size: 1rem;
    font-weight: 950;
}

.cromos-reset-counter {
    min-width: 112px;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 192, 220, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.66);
    box-shadow: 0 12px 24px rgba(196, 126, 158, 0.1);
}

.cromos-reset-counter span {
    color: #e95f9c;
    font-size: 0.66rem;
    font-weight: 950;
    text-transform: uppercase;
}

.cromos-reset-counter strong {
    color: #5c4052;
    font-size: 0.88rem;
    font-weight: 950;
    line-height: 1;
}

.cromos-side-balance {
    position: fixed;
    left: max(12px, env(safe-area-inset-left));
    top: 50%;
    z-index: 42;
    display: grid;
    gap: 6px;
    transform: translateY(-50%);
}

.cromos-side-balance .metric-card {
    width: 38px;
    min-width: 38px;
    min-height: 36px;
    padding: 4px 3px 5px;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}

.cromos-side-balance .metric-label,
.cromos-side-balance .metric-label::before {
    width: 22px;
    height: 22px;
}

.cromos-side-balance .metric-value {
    font-size: 11px;
    line-height: 1;
}

.cromos-road {
    position: relative;
    display: grid;
    grid-template-columns: repeat(10, minmax(88px, 1fr));
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 34px;
    padding: 8px 4px 10px;
    -webkit-overflow-scrolling: touch;
}

.cromos-road::before {
    content: "";
    position: absolute;
    left: 48px;
    right: 48px;
    top: 60px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(244, 143, 177, 0.34), rgba(255, 213, 92, 0.82));
}

.cromo-node {
    position: relative;
    z-index: 1;
    min-width: 88px;
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 7px 6px;
    border: 2px solid rgba(234, 216, 227, 0.78);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 24px rgba(91, 64, 82, 0.08);
}

.cromo-node.is-active {
    border-color: rgba(244, 143, 177, 0.9);
    box-shadow: 0 12px 28px rgba(244, 143, 177, 0.18);
}

.cromo-node.rarity-cute {
    border-color: rgba(255, 173, 210, 0.72);
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ffd6e8, #ff9fc9) border-box;
}

.cromo-node.rarity-sweet {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ff9fcb, #8fc8ff) border-box;
}

.cromo-node.rarity-lovely {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #ff9fc9, #ffb37a) border-box;
}

.cromo-node.rarity-special {
    border-color: transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #64b8ff, #e6edf5, #b7c4d8) border-box;
}

.cromo-node.rarity-sublime,
.cromo-node.is-gold {
    border-color: transparent;
    background: linear-gradient(#fffef6, #fff8d6) padding-box, linear-gradient(135deg, #ffd45c, #f2a81d, #fff1a6) border-box;
}

.cromo-node.is-unlocked {
    border-color: transparent;
    background: linear-gradient(#fff7fb, #fff) padding-box, linear-gradient(135deg, #ff8fba, #ffc7dd) border-box;
}

.cromo-node.is-unlocked:nth-child(even) {
    background: linear-gradient(#fff2f8, #fff) padding-box, linear-gradient(135deg, #ff6faa, #ffd6e8) border-box;
}

.cromo-node.is-gold {
    background: linear-gradient(180deg, #fff8d6, #fffef6);
    border-color: rgba(224, 169, 36, 0.66);
}

.cromo-level-card {
    width: 44px;
    aspect-ratio: 3 / 4;
    border-radius: 7px;
    transform: rotate(-5deg);
    filter: drop-shadow(0 8px 12px rgba(70, 52, 64, 0.18));
}

.cromo-level-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}

.cromo-node span,
.cromo-node small {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cromo-node span {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 900;
}

.cromo-node strong {
    display: none;
}

.cromo-node small {
    color: #8a7282;
    font-size: 0.66rem;
    font-weight: 800;
}

.cromo-node small.cromo-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.cromo-coin-mini {
    width: 12px;
    height: 12px;
    margin-right: 0;
    vertical-align: -1px;
    box-shadow: none;
}

.cromo-node small.cromo-cost-discount {
    color: #e95f9c;
}

.cromo-node small.cromo-cost-discount s {
    margin-right: 3px;
    color: #b9a7b3;
    font-weight: 800;
}

.cromo-focus-card {
    display: grid;
    grid-template-columns: minmax(128px, 220px) minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 8px 16px 6px;
    border: 1px solid rgba(234, 216, 227, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 18px 42px rgba(91, 64, 82, 0.12);
}

.cromo-focus-card.is-gold {
    border-color: rgba(224, 169, 36, 0.7);
    box-shadow: 0 20px 48px rgba(224, 169, 36, 0.18);
}

.cromo-focus-preview {
    width: min(64vw, 270px);
    max-width: 270px;
    aspect-ratio: 3 / 4;
    justify-self: center;
    border-radius: 12px;
    filter: drop-shadow(0 18px 34px rgba(80, 58, 70, 0.24));
    transform: rotate(-3deg);
}

.cromo-focus-preview.is-open {
    animation: cromoPop 0.48s cubic-bezier(.2, 1.1, .3, 1) both;
}

.cromo-focus-card.is-flipping .cromo-focus-preview {
    animation: cromoInPlaceReveal 0.72s ease both;
}

.cromo-focus-card.is-revealing .cromo-focus-preview {
    animation: cromoWaitingCard 0.9s ease-in-out infinite alternate;
}

.cromo-focus-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px;
    display: block;
}

.cromo-focus-info {
    width: 100%;
    min-width: 0;
    display: grid;
    justify-items: stretch;
    gap: 0;
}

#cromos-message {
    margin: 4px 0 0;
    text-align: center;
}

.cromo-unlock-btn {
    width: auto;
    min-width: 156px;
    max-width: calc(100% - 24px);
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 6px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
}

.cromo-unlock-btn .cromo-coin-mini {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.cromo-reveal-modal {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(255, 247, 252, 0.82);
    backdrop-filter: blur(8px);
}

.cromo-reveal-dialog {
    position: relative;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 10px;
    width: min(390px, 100%);
    min-height: min(82svh, 620px);
    padding: 18px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.cromo-reveal-modal.is-gold .cromo-reveal-dialog {
    width: min(520px, 100%);
    min-height: min(88svh, 720px);
    padding: 8px;
    box-shadow: none;
}

.cromo-reveal-modal.is-gold {
    background: rgba(72, 52, 64, 0.24);
    backdrop-filter: blur(16px) saturate(1.08);
}

.cromo-reveal-modal.is-gold #cromo-reveal-close,
.cromo-reveal-modal.is-gold #cromo-reveal-title,
.cromo-reveal-modal.is-gold #cromo-reveal-subtitle {
    display: none;
}

#cromo-reveal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(91, 64, 82, 0.08);
    color: var(--text-primary);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

#cromo-reveal-card {
    width: 100%;
    min-height: min(70svh, 420px);
    display: grid;
    place-items: center;
}

.cromo-reveal-image {
    width: min(74vw, 320px);
    height: min(70svh, 430px);
    aspect-ratio: 3 / 4;
    max-height: min(70svh, 430px);
    object-fit: contain;
    border-radius: 14px;
    opacity: 1;
    filter: drop-shadow(0 22px 38px rgba(80, 58, 70, 0.32));
    animation: cromoPop 0.52s cubic-bezier(.2, 1.1, .3, 1) both;
}

.cromo-reveal-modal.is-gold .cromo-reveal-image {
    width: min(86vw, 430px);
    height: min(82svh, 620px);
    max-height: min(82svh, 620px);
    object-fit: contain;
    filter: drop-shadow(0 28px 58px rgba(64, 42, 52, 0.36));
}

#cromo-reveal-title {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 950;
}

#cromo-reveal-subtitle {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    color: #9d748c;
    font-size: 0.82rem;
    font-weight: 800;
}

@keyframes cromoPop {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.82) rotate(-6deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(-3deg);
    }
}

@keyframes cromoInPlaceReveal {
    0% {
        transform: rotate(-3deg) rotateY(0deg) scale(0.98);
    }
    48% {
        transform: rotate(-1deg) rotateY(90deg) scale(1.02);
    }
    100% {
        transform: rotate(-3deg) rotateY(0deg) scale(1);
    }
}

@keyframes cromoWaitingCard {
    from { transform: rotate(-3deg) translateY(0) scale(0.98); }
    to { transform: rotate(-1deg) translateY(-5px) scale(1.01); }
}

@media (max-width: 640px) {
    .cromos-road {
        grid-template-columns: repeat(10, 88px);
    }

    .cromos-reset-counter {
        min-width: 96px;
        padding: 7px 9px;
    }

    .cromos-reset-counter strong {
        font-size: 0.78rem;
    }

    .cromo-focus-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .cromo-focus-preview {
        width: min(66vw, 276px);
        margin-inline: auto;
    }

    .cromo-focus-info {
        width: 100%;
        padding-inline: 0;
    }
}

.coin-icon {
    position: relative;
    border: 0;
    background: transparent url('../assets/images/menu/coin-lateral.webp') center / contain no-repeat;
}

.coin-icon::before {
    display: none;
}

.coin-icon span {
    display: none;
}

.coin-mini {
    width: 18px;
    height: 18px;
    display: inline-block;
    margin-right: 7px;
    border: 0;
    border-radius: 0;
    background: transparent url('../assets/images/menu/coin-lateral.webp') center / contain no-repeat;
    box-shadow: none;
    filter: drop-shadow(0 2px 3px rgba(199, 121, 18, 0.22));
    vertical-align: -2px;
}

.stars-package-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.stars-package-copy strong {
    display: flex;
    align-items: center;
    font-size: 1.78rem;
    line-height: 1;
    color: #20263a;
}

.stars-package-copy strong b {
    color: inherit;
    font: inherit;
}

.stars-package-copy span {
    color: #5e6577;
}

.stars-package-copy span {
    font-weight: 800;
}

.stars-package-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.stars-package-meta small {
    color: #5e6577;
    font-size: 0.78rem;
}

.stars-package-meta em {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffce45, #f39a2f);
    color: #3d2500;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 5px 12px rgba(207, 130, 28, 0.22);
}

.stars-package-actions {
    display: grid;
    gap: 7px;
    min-width: 104px;
    justify-self: end;
}

.stars-package-actions button {
    border: 0;
    border-radius: 7px;
    padding: 9px 12px;
    background: linear-gradient(135deg, #2584ff, #5a4cf0);
    color: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.stars-recharge-message {
    min-height: 20px;
    margin: 12px 0 0;
    color: #586074;
    font-size: 0.9rem;
}

.stars-recharge-dialog.is-preparing-payment {
    overflow: hidden;
}

.stars-payment-progress {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 22px;
    border-radius: inherit;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 222, 241, 0.96), transparent 48%),
        linear-gradient(160deg, rgba(255, 252, 255, 0.99), rgba(244, 237, 255, 0.99));
    backdrop-filter: blur(14px);
}

.stars-payment-progress[hidden] {
    display: none !important;
}

.stars-payment-progress-card {
    width: min(430px, 100%);
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 26px 22px;
    border: 1px solid rgba(255, 105, 174, 0.26);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 24px 58px rgba(116, 69, 139, 0.18);
    text-align: center;
}

.stars-payment-sparkles {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

.stars-payment-progress-card > :not(.stars-payment-sparkles) {
    position: relative;
    z-index: 1;
}

.stars-payment-sparkles span {
    position: absolute;
    color: rgba(255, 103, 177, 0.52);
    font-size: 22px;
    animation: starsPaymentSparkle 1.8s ease-in-out infinite;
}

.stars-payment-sparkles span:nth-child(1) { top: 9%; left: 11%; }
.stars-payment-sparkles span:nth-child(2) { top: 18%; right: 12%; animation-delay: -0.7s; font-size: 15px; }
.stars-payment-sparkles span:nth-child(3) { top: 48%; left: 7%; animation-delay: -1.2s; font-size: 13px; }
.stars-payment-sparkles span:nth-child(4) { right: 8%; bottom: 21%; animation-delay: -0.35s; }
.stars-payment-sparkles span:nth-child(5) { left: 25%; bottom: 8%; animation-delay: -1.45s; font-size: 14px; }

.stars-payment-security-mark {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff65ad, #b586ff);
    color: #fff;
    font-size: 27px;
    font-weight: 950;
    box-shadow: 0 12px 28px rgba(219, 91, 164, 0.3);
    animation: starsPaymentShieldPulse 1.4s ease-in-out infinite;
}

.stars-payment-progress-card > small {
    color: #c84f8b;
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stars-payment-progress-card h3 {
    margin: 0;
    color: #4e3654;
    font-size: 1.32rem;
    font-weight: 950;
}

.stars-payment-progress-card p {
    min-height: 22px;
    margin: 0;
    color: #765c78;
    font-size: 0.9rem;
    font-weight: 800;
}

.stars-payment-progress-track {
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #f0e8f4;
    box-shadow: inset 0 2px 5px rgba(91, 51, 105, 0.1);
}

.stars-payment-progress-track span {
    position: relative;
    display: block;
    width: 0;
    height: 100%;
    overflow: hidden;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff68ae, #e56dcc 55%, #aa82ff);
    box-shadow: 0 5px 16px rgba(224, 91, 168, 0.28);
    transition: width 320ms ease;
}

.stars-payment-progress-track span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.72) 48%, transparent 76%);
    transform: translateX(-110%);
    animation: starsPaymentProgressShine 1.1s linear infinite;
}

#stars-payment-progress-value {
    color: #bd4b88;
    font-size: 1.08rem;
    font-weight: 950;
}

.stars-payment-progress-steps {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.stars-payment-progress-steps span {
    min-width: 0;
    padding: 7px 5px;
    border: 1px solid rgba(113, 88, 120, 0.12);
    border-radius: 12px;
    background: #f7f3f8;
    color: #9a8a9d;
    font-size: 0.68rem;
    font-weight: 900;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.stars-payment-progress-steps span.is-active {
    border-color: rgba(238, 96, 170, 0.42);
    background: #fff0f8;
    color: #c84f8b;
}

.stars-payment-progress-steps span.is-complete {
    border-color: rgba(116, 197, 157, 0.38);
    background: #edf9f3;
    color: #398862;
}

.stars-payment-progress-card em {
    color: #806d83;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 750;
}

@keyframes starsPaymentShieldPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes starsPaymentProgressShine {
    to { transform: translateX(110%); }
}

@keyframes starsPaymentSparkle {
    0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.2; }
    50% { transform: scale(1.22) rotate(20deg); opacity: 0.9; }
}

@keyframes starsPackagesCoinFloat {
    0%, 100% { transform: translateY(7px) rotate(-4deg) scale(0.96); }
    50% { transform: translateY(-9px) rotate(5deg) scale(1.04); }
}

@keyframes starsPackagesSparkle {
    0%, 100% { transform: scale(0.7) rotate(0deg); opacity: 0.28; }
    50% { transform: scale(1.18) rotate(18deg); opacity: 0.85; }
}

@keyframes starsPackageBounceIn {
    0% { opacity: 0; transform: translateY(30px) scale(0.9); }
    62% { opacity: 1; transform: translateY(-5px) scale(1.015); }
    82% { transform: translateY(2px) scale(0.997); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 520px) {
    .stars-recharge-modal {
        align-items: flex-end;
        padding: 10px;
    }

    .stars-recharge-dialog {
        width: 100%;
        max-height: 92vh;
        padding: 14px;
    }

    .stars-package {
        grid-template-columns: 44px minmax(0, 1fr) 82px;
        gap: 10px;
        min-height: 76px;
        padding: 11px;
    }

    .stars-package-icon {
        width: 44px;
        height: 44px;
    }

    .stars-package-copy strong {
        font-size: 1.42rem;
    }

    .stars-package-meta {
        gap: 5px;
    }

    .stars-package-meta em {
        min-height: 19px;
        padding: 2px 6px;
        font-size: 0.66rem;
    }

    .stars-package-actions {
        grid-column: auto;
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .stars-package-actions button {
        padding: 8px 7px;
        font-size: 0.78rem;
    }

    .stars-packages-loading {
        min-height: 345px;
        padding: 22px 14px;
        border-radius: 21px;
    }

    .stars-packages-loading-coins {
        top: 34px;
        transform: translateX(-50%) scale(0.9);
    }

    .stars-payment-progress {
        padding: 14px;
    }

    .stars-payment-progress-card {
        padding: 23px 15px;
        border-radius: 21px;
    }

    .stars-payment-progress-steps span {
        padding: 6px 3px;
        font-size: 0.61rem;
    }
}

@keyframes coinPulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.08) rotate(4deg);
    }
}

.shop-featured-packs {
    margin-top: 12px;
    margin-bottom: 14px;
}

@media (max-width: 480px) {
    .profile-shell {
        padding-left: 10px;
        padding-right: 10px;
    }

    .profile-card {
        grid-template-columns: 70px 1fr;
        gap: 11px;
        padding: 12px;
    }

    .profile-photo {
        width: 70px;
        height: 70px;
    }

    .profile-name {
        font-size: 1.12rem;
    }

    .profile-mini-stats {
        gap: 5px;
    }

    .profile-mini-stats div {
        padding: 7px 3px;
    }

    .profile-mini-stats small {
        font-size: 0.58rem;
    }

    .profile-referral-row {
        grid-template-columns: 1fr 1fr;
    }

    .profile-referral-row label {
        grid-column: 1 / -1;
    }

    .profile-referral-input {
        grid-column: 1 / -1;
    }

    .profile-referral-row + .profile-referral-row {
        grid-template-columns: 1fr;
    }

    .profile-invited-item,
    .profile-commission-item {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .profile-invited-metrics,
    .profile-commission-metrics {
        grid-column: 2;
        justify-content: flex-start;
    }

    .home-pack-actions {
        width: min(calc(100% - 46px), 320px);
        gap: 7px;
        margin-bottom: 18px;
    }

    .home-action-btn {
        min-height: 34px;
        padding: 8px 7px;
        font-size: 10px;
    }
}



#dashboard-section.is-home-active {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 154px;
    padding-bottom: 74px;
}

/* Compact icon metrics */
.metrics-grid {
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px;
}

.metric-card {
    min-width: 0;
    padding: 6px 8px;
    gap: 4px;
}

.metric-label {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    overflow: visible;
    color: var(--text-secondary);
    font-size: 0;
    letter-spacing: 0;
}

.metric-label::before {
    content: '';
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 4px 6px rgba(199, 121, 158, 0.16));
}

.stars-package-meta .stars-package-reward {
    background: linear-gradient(135deg, #ffe88a, #e5ad19 58%, #fff0a8);
    color: #694500;
    box-shadow: 0 5px 14px rgba(207, 148, 23, .28);
}

.metric-stars .metric-label::before {
    background-image: url('../assets/images/menu/coin-lateral.webp');
}

.metric-cards .metric-label::before {
    background-image: url('../assets/images/menu/cards-lateral.webp');
}

.metric-fragments .metric-label {
    position: relative;
}

.metric-fragments .metric-label::before {
    background-image: url('../assets/images/menu/fragment-lateral.webp');
}

.metric-fragments .metric-label::after {
    display: none;
}

.metric-rank .metric-label::before {
    width: 13px;
    height: 10px;
    border: 1.8px solid currentColor;
    border-top: 0;
    border-radius: 0 0 5px 5px;
    clip-path: polygon(0 22%, 25% 48%, 50% 0, 75% 48%, 100% 22%, 100% 100%, 0 100%);
}

.metric-value {
    font-size: 13px;
    white-space: nowrap;
}

.home-mini-packs {
    width: min(calc(100% - 58px), 330px);
    min-height: 54px;
    margin: -6px auto 10px;
    padding: 7px 8px 10px;
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(243, 200, 218, 0.86);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 16px 34px rgba(196, 126, 158, 0.11);
    backdrop-filter: blur(12px);
}

.home-mini-pack-stack {
    display: flex;
    align-items: center;
    min-width: 72px;
    padding-left: 10px;
}

.home-mini-pack-stack img {
    width: 34px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(122, 77, 102, 0.16));
}

.home-mini-pack-stack img + img {
    margin-left: -10px;
}

.home-mini-pack-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 1px;
}

.home-mini-pack-copy strong {
    color: #8f6d82;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.home-mini-pack-copy small {
    color: #c45486;
    font-size: 10px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-view-packs-btn {
    min-height: 34px;
    border: 1.5px solid rgba(244, 143, 177, 0.76);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--primary-dark);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

@media (max-width: 480px) {
    .metrics-grid {
        gap: 4px;
    }

    .metric-card {
        padding: 5px 6px;
    }

    .metric-label {
        width: 13px;
        height: 13px;
    }

    .metric-value {
        font-size: 10px;
    }

    .home-mini-packs {
        width: min(calc(100% - 46px), 320px);
        min-height: 48px;
        margin-bottom: 14px;
        padding: 6px 7px;
    }

    .home-mini-pack-stack img {
        width: 30px;
        height: 42px;
    }

    .home-view-packs-btn {
        min-height: 31px;
        font-size: 10px;
    }

    .home-featured-pack-list {
        width: min(calc(100% - 34px), 330px);
        gap: 8px;
    }

    .home-featured-pack img {
        width: 56px;
        height: 80px;
    }
}


/* Icon-only secondary metrics */
.metric-rank {
    flex: 0 0 30px;
    width: 30px;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.metric-rank .metric-value {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.metric-stars,
.metric-cards,
.metric-fragments {
    flex: 0 1 auto;
}

.metric-stars .metric-value,
.metric-cards .metric-value,
.metric-fragments .metric-value {
    font-size: 0.8rem;
}

@media (max-width: 420px) {
    .metrics-grid {
        top: 50%;
        left: 6px;
        right: auto;
        width: auto;
        max-width: 38px;
        flex-direction: column;
        align-items: stretch;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        gap: 5px;
        z-index: 12;
    }

    .metric-card {
        min-height: 31px;
        width: 36px;
        min-width: 36px;
        padding: 4px 3px 5px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }

    .metric-stars,
    .metric-cards,
    .metric-fragments {
        padding-left: 3px;
        padding-right: 3px;
    }

    .metric-rank {
        flex-basis: 26px;
        width: 26px;
    }

    .metric-label {
        width: 22px;
        height: 22px;
    }

    .metric-label::before {
        width: 22px;
        height: 22px;
    }

    .metric-stars .metric-label::before {
        width: 22px;
        height: 22px;
    }

    .metric-cards .metric-label::before {
        width: 22px;
        height: 22px;
    }

    .metric-fragments .metric-label::before {
        width: 22px;
        height: 22px;
    }

    .metric-stars .metric-value,
    .metric-cards .metric-value,
    .metric-fragments .metric-value {
        font-size: 11px;
    }
}

/* Packs catalog */
#packs-section {
    width: min(100%, 760px);
    padding-bottom: 98px;
    flex-direction: column;
    min-height: 0;
}

.packs-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.packs-title {
    width: min(100%, 430px);
    margin: 0 auto 12px;
    color: #56314b;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.15;
}

#packs-section.is-creator-pack-view .packs-title {
    display: none;
}

.packs-creator-profile {
    position: relative;
    width: min(100%, 430px);
    margin: 0 auto 14px;
    padding: 10px 54px 10px 12px;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.packs-creator-profile[hidden] {
    display: none !important;
}

.packs-creator-profile img {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(244, 143, 177, 0.34);
}

.packs-creator-profile img[role="button"],
.packs-creator-copy strong[role="button"] {
    cursor: pointer;
}

.packs-creator-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.packs-creator-copy strong {
    color: #56314b;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
}

.packs-creator-copy small {
    display: none;
}

.creator-favorite-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(244, 143, 177, 0.48);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #c45486;
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.12);
    backdrop-filter: blur(8px);
}

.creator-favorite-heart.is-active {
    border-color: rgba(160, 150, 158, 0.55);
    background: rgba(245, 244, 246, 0.94);
    color: #9b929a;
}

.creator-favorite-heart[hidden] {
    display: none !important;
}

.packs-creator-profile .creator-public-instagram {
    justify-self: start;
    margin-top: 2px;
    color: #e86fa4;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
}

.packs-creator-profile .creator-public-instagram:hover {
    color: #c45486;
}

.packs-creator-cromo-teaser {
    width: min(100%, 430px);
    margin: 4px auto 14px;
    padding: 12px 10px 14px;
    border: 1px solid rgba(255, 192, 220, 0.62);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 14px 30px rgba(196, 126, 158, 0.1);
    display: grid;
    justify-items: center;
    gap: 10px;
    overflow: hidden;
}

.packs-creator-cromo-teaser[hidden] {
    display: none !important;
}

.packs-creator-cromo-road {
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 58px;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 2px 4px 4px;
}

.packs-creator-cromo-road::-webkit-scrollbar {
    display: none;
}

.packs-creator-cromo-node {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 6px 4px;
    border: 1.5px solid rgba(255, 192, 220, 0.6);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
}

.packs-creator-cromo-node.is-active {
    border-color: rgba(244, 143, 177, 0.92);
    background: rgba(255, 244, 249, 0.9);
}

.packs-creator-cromo-node.is-unlocked {
    border-color: rgba(255, 143, 186, 0.62);
    background: linear-gradient(180deg, rgba(255, 246, 251, 0.92), rgba(255, 255, 255, 0.76));
}

.packs-creator-cromo-node.is-gold {
    border-color: rgba(224, 169, 36, 0.66);
}

.packs-creator-cromo-card {
    width: 34px;
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    transform: rotate(-4deg);
    filter: drop-shadow(0 6px 9px rgba(70, 52, 64, 0.14));
}

.packs-creator-cromo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.packs-creator-cromo-node span {
    color: #8a7282;
    font-size: 0.62rem;
    font-weight: 900;
}

.packs-creator-cromo-open {
    width: auto;
    min-width: 150px;
    max-width: calc(100% - 24px);
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 999px;
    padding: 0 16px;
    font-size: 0.74rem;
    line-height: 1;
    white-space: nowrap;
}

.packs-creator-cromo-open .cromo-coin-mini {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.packs-featured-packs {
    margin: 8px 0 16px;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px 14px 8px;
    --featured-shop-pack-w: clamp(104px, 28vw, 132px);
    --featured-shop-pack-h: calc(var(--featured-shop-pack-w) * 1.424);
    --featured-shop-pack-offset: clamp(112px, 31vw, 146px);
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .dashboard-pack-carousel {
    min-height: calc(var(--featured-shop-pack-h) + 26px);
    margin: 0 auto;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-stage {
    height: calc(var(--featured-shop-pack-h) + 22px);
    cursor: grab;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-stage::after {
    bottom: 10px;
    width: 300px;
    height: 22px;
    background: radial-gradient(ellipse, rgba(122, 77, 102, 0.14), transparent 70%);
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card {
    top: 8px;
    width: var(--featured-shop-pack-w);
    height: var(--featured-shop-pack-h);
    overflow: hidden;
    border-radius: 14px;
    animation: packsCardBreath 4.8s ease-in-out infinite;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.28) 46%, transparent 58% 100%);
    opacity: 0.55;
    transform: translateX(-70%);
    animation: packsSoftReflection 3.6s ease-in-out infinite;
    pointer-events: none;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card img {
    animation: packsSoftRotate 4.8s ease-in-out infinite;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card-left {
    opacity: 0.94;
    --pack-slide-x: calc(-50% - var(--featured-shop-pack-offset));
    --pack-slide-y: 8px;
    transform: translateX(calc(-50% - var(--featured-shop-pack-offset))) translateY(8px) rotate(-1.2deg) scale(1);
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card-active {
    --pack-slide-x: -50%;
    --pack-slide-y: 8px;
    transform: translateX(-50%) translateY(8px) rotate(0deg) scale(1);
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card-right {
    opacity: 0.94;
    --pack-slide-x: calc(-50% + var(--featured-shop-pack-offset));
    --pack-slide-y: 8px;
    transform: translateX(calc(-50% + var(--featured-shop-pack-offset))) translateY(8px) rotate(1.2deg) scale(1);
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card:nth-child(2)::before,
#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card:nth-child(2) img {
    animation-delay: -1.2s;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card:nth-child(3)::before,
#packs-section:not(.is-creator-pack-view) .packs-featured-packs .pack-card:nth-child(3) img {
    animation-delay: -2.1s;
}

#packs-section:not(.is-creator-pack-view) .packs-featured-packs .featured-packs-footer {
    display: none;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card {
    top: 10px;
    width: clamp(72px, 20vw, 90px);
    height: clamp(102px, 28vw, 128px);
    overflow: hidden;
    border-radius: 12px;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.28) 46%, transparent 58% 100%);
    opacity: 0.55;
    transform: translateX(-78%);
    animation: packsSoftReflection 3.6s ease-in-out infinite;
    pointer-events: none;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card img {
    animation: packsSoftRotate 4.8s ease-in-out infinite;
}

#packs-section.is-creator-pack-view .packs-featured-packs {
    width: min(100%, 360px);
    margin: 4px auto 12px;
    padding: 8px 12px 12px;
}

#packs-section.is-creator-pack-view .packs-featured-packs .dashboard-pack-carousel {
    min-height: 138px;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-stage {
    height: 132px;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-stage::after {
    bottom: 8px;
    width: 190px;
    height: 16px;
    background: radial-gradient(ellipse, rgba(122, 77, 102, 0.12), transparent 70%);
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card-left {
    --pack-slide-x: calc(-50% - 76px);
    --pack-slide-y: 20px;
    transform: translateX(calc(-50% - 76px)) translateY(20px) rotate(-4deg) scale(0.86);
    opacity: 0.82;
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card-active {
    --pack-slide-x: -50%;
    --pack-slide-y: 4px;
    transform: translateX(-50%) translateY(4px) rotate(0deg) scale(1.04);
    filter: drop-shadow(0 16px 18px rgba(236, 111, 157, 0.24));
}

#packs-section.is-creator-pack-view .packs-featured-packs .pack-card-right {
    --pack-slide-x: calc(-50% + 76px);
    --pack-slide-y: 20px;
    transform: translateX(calc(-50% + 76px)) translateY(20px) rotate(4deg) scale(0.86);
    opacity: 0.82;
}

#packs-section.is-creator-pack-view .packs-featured-packs .featured-packs-footer {
    margin-top: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
}

#packs-section.is-creator-pack-view .packs-featured-packs .featured-packs-label {
    color: #a36f91;
    font-size: 10px;
    font-weight: 900;
}

#packs-section.is-creator-pack-view .packs-featured-packs .featured-open-pack-btn {
    width: auto;
    min-width: 136px;
    height: 34px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 950;
}

@keyframes packsSoftRotate {
    0%, 100% { transform: rotate(-0.8deg); }
    50% { transform: rotate(0.8deg); }
}

@keyframes packsSoftReflection {
    0%, 38% { transform: translateX(-78%); opacity: 0; }
    52% { opacity: 0.58; }
    72%, 100% { transform: translateX(78%); opacity: 0; }
}

@keyframes packsCardBreath {
    0%, 100% { filter: drop-shadow(0 18px 20px rgba(122, 77, 102, 0.18)); }
    50% { filter: drop-shadow(0 22px 24px rgba(236, 111, 157, 0.24)); }
}

@media (max-width: 430px) {
    #packs-section:not(.is-creator-pack-view) .packs-featured-packs {
        padding: 12px 12px 8px;
        --featured-shop-pack-w: clamp(96px, 26vw, 108px);
        --featured-shop-pack-offset: clamp(105px, 30vw, 118px);
    }

    .packs-title {
        margin-bottom: 14px;
        padding-left: 4px;
    }
}

.packs-grid,
.packs-model-list {
    display: grid;
    gap: 12px;
    align-content: start;
    align-items: start;
}

#packs-section:not(.is-creator-pack-view) .packs-grid {
    max-height: none;
    overflow: visible;
    align-content: start;
}

#packs-section:not(.is-creator-pack-view) .packs-model-list {
    max-height: none;
    grid-auto-rows: max-content;
    overflow: visible;
    padding-right: 2px;
}

.packs-filter-bar {
    display: grid;
    gap: 7px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: none;
}

.packs-sort-row,
.packs-set-filter-row {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    scrollbar-width: none;
}

.packs-sort-row::-webkit-scrollbar,
.packs-set-filter-row::-webkit-scrollbar {
    display: none;
}

.packs-set-filter-row {
    padding-top: 2px;
}

.packs-filter-bar::-webkit-scrollbar {
    display: none;
}

.packs-filter-bar button {
    flex: 0 0 auto;
    min-height: 30px;
    border: 1px solid rgba(244, 143, 177, 0.38);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255, 247, 251, 0.78);
    color: #9b4d74;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.packs-set-filter-row button {
    min-height: 24px;
    padding: 4px 9px;
    font-size: 9px;
    opacity: 0.86;
}

.packs-filter-bar button.is-active {
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    color: #fff;
}

.packs-white-panel,
.packs-generation-section {
    width: min(100%, 560px);
    margin-left: auto;
    margin-right: auto;
    padding: 10px 14px 12px;
    border: 1px solid rgba(255, 214, 232, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 42px rgba(196, 126, 158, 0.08);
    backdrop-filter: blur(8px);
}

.packs-highlight-section {
    padding: clamp(12px, 2.8vw, 20px) clamp(12px, 3.8vw, 24px) clamp(18px, 3.8vw, 26px);
}

.packs-highlight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--primary-dark);
}

.packs-highlight-head strong {
    font-size: 0.98rem;
    font-weight: 900;
}

.packs-highlight-head small {
    color: #b2678b;
    font-size: 0.7rem;
    font-weight: 800;
}

.packs-highlight-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    overflow: hidden;
    align-items: end;
    justify-items: center;
    gap: clamp(12px, 4vw, 28px);
}

.packs-highlight-favorites .packs-highlight-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.packs-load-more-btn {
    display: block;
    min-width: 148px;
    margin: 14px auto 2px;
    padding: 9px 18px;
    border: 1px solid rgba(244, 143, 177, 0.5);
    border-radius: 999px;
    background: linear-gradient(135deg, #ff63ad 0%, #ec71c7 48%, #b786ff 100%);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(206, 93, 158, 0.16);
}

.packs-load-more-btn:hover,
.packs-load-more-btn:active {
    transform: translateY(-1px);
}

.packs-generation-section {
    display: grid;
    gap: 8px;
    align-content: start;
}

#packs-section:not(.is-creator-pack-view) {
    height: auto;
    overflow: visible;
    padding-top: clamp(34px, 5svh, 58px);
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
}

@media (max-width: 430px) {
    #packs-section:not(.is-creator-pack-view) {
        padding-top: max(76px, calc(env(safe-area-inset-top) + 54px));
    }
}

#packs-section:not(.is-creator-pack-view) .packs-header {
    display: none;
}

#packs-section:not(.is-creator-pack-view) .packs-generation-section {
    max-height: none;
    overflow: visible;
}

.packs-generation-section > h2 {
    display: none;
}

#packs-section:not(.is-creator-pack-view) .packs-generation-section::before {
    display: none;
    content: '';
}

.packs-model-section {
    height: max-content;
    padding: 7px 0 10px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(244, 143, 177, 0.26);
    background: transparent;
}

.packs-model-section:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.packs-model-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.packs-model-header h3 {
    margin: 0;
    color: #6b4560;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.packs-model-name-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: #6b4560;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.home-featured-pack-list {
    width: min(calc(100% - 48px), 360px);
    margin: 0 auto 18px;
    padding: 14px 12px 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 8px;
    border: 1px solid rgba(255, 214, 232, 0.72);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 18px 42px rgba(196, 126, 158, 0.08);
    backdrop-filter: blur(8px);
}

.home-featured-pack {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 3px;
    border: 0;
    border-radius: 8px;
    padding: 0;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.home-featured-pack::before {
    content: '';
    position: absolute;
    inset: 0 0 18px;
    z-index: 2;
    border-radius: 8px;
    background: linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, 0.28) 46%, transparent 58% 100%);
    opacity: 0.54;
    transform: translateX(-78%);
    animation: packsSoftReflection 3.8s ease-in-out infinite;
    pointer-events: none;
}

.home-featured-pack.is-active {
    filter: drop-shadow(0 0 12px rgba(244, 143, 177, 0.34));
}

.home-featured-pack img {
    position: relative;
    z-index: 1;
    width: 62px;
    height: 88px;
    object-fit: contain;
    filter: drop-shadow(0 9px 12px rgba(122, 77, 102, 0.16));
}

.home-featured-pack small {
    display: inline-flex;
    align-items: center;
    color: #7a4c00;
    font-size: 10px;
    font-weight: 900;
}

.home-featured-pack .coin-mini {
    width: 12px;
    height: 12px;
    margin-right: 3px;
}

.packs-model-name-link:hover {
    color: #b94f87;
}

.packs-model-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.packs-model-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(244, 143, 177, 0.42);
    background: rgba(255, 236, 247, 0.96);
}

.packs-model-actions {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.packs-more-btn {
    min-height: 24px;
    border: 1px solid rgba(244, 143, 177, 0.44);
    border-radius: 999px;
    padding: 4px 9px;
    background: rgba(255, 247, 251, 0.82);
    color: #c45486;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.packs-creator-name-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.packs-creator-name-link:hover {
    color: #b94f87;
}

.packs-vitrine-section {
    gap: 0;
}

.packs-vitrine-row {
    grid-template-columns: repeat(3, minmax(86px, 1fr));
}

.packs-model-header span {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(244, 143, 177, 0.16);
    color: var(--primary-dark);
    font-size: 12px;
    font-weight: 900;
}

.packs-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(88px, 96px);
    gap: 12px;
    justify-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
    scrollbar-width: none;
}

/* Los carruseles permiten deslizar verticalmente hacia la página cuando
   el gesto comienza sobre un sobre. */
#packs-section .packs-vitrine-row,
#packs-section .packs-model-list,
#packs-section .packs-featured-packs,
#packs-section .dashboard-pack-carousel {
    touch-action: pan-x pan-y;
}

.packs-row::-webkit-scrollbar {
    display: none;
}

.pack-list-card {
    --pack-thumb-w: 78px;
    --pack-thumb-h: 110px;
    position: relative;
    width: 94px;
    min-height: 118px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
}

.pack-list-card-large {
    width: clamp(92px, 25vw, 148px);
    min-height: clamp(142px, 36vw, 210px);
}

.pack-list-card-large img {
    width: clamp(82px, 22vw, 126px);
    height: clamp(118px, 32vw, 178px);
}

.pack-list-card img {
    width: var(--pack-thumb-w);
    height: var(--pack-thumb-h);
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(236, 111, 157, 0.22));
    cursor: pointer;
}

.pack-set-chip {
    position: absolute;
    top: 5px;
    right: 3px;
    z-index: 4;
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe35a, #ffc425);
    color: #7b4a00;
    box-shadow: 0 8px 16px rgba(211, 145, 16, 0.18);
    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(5deg);
}

#packs-section.is-creator-pack-view .packs-header {
    order: 10;
    justify-content: center;
    margin: 18px 0 0;
}

@media (max-width: 560px) {
    #packs-section.is-creator-pack-view {
        padding-top: max(104px, calc(env(safe-area-inset-top) + 78px));
        padding-left: 14px;
        padding-right: 14px;
    }

    #packs-section.is-creator-pack-view .packs-creator-profile {
        width: min(100%, 430px);
        margin-bottom: 18px;
        padding: 0 54px 0 8px;
    }

    #packs-section.is-creator-pack-view .packs-featured-packs {
        margin-top: 8px;
    }
}

#packs-section.is-creator-pack-view #back-to-dashboard-btn-3 {
    border-color: rgba(244, 143, 177, 0.72);
    background: linear-gradient(135deg, #ff8fba, #f05d9d);
    color: #fff;
    box-shadow: 0 12px 24px rgba(196, 86, 137, 0.18);
}

#packs-section.is-creator-pack-view .packs-vitrine-row {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
    gap: 14px;
    align-items: start;
}

#packs-section.is-creator-pack-view .pack-list-card {
    --pack-thumb-w: 92px;
    --pack-thumb-h: 132px;
    width: 116px;
    min-height: 158px;
}

#packs-section.is-creator-pack-view .pack-list-card img {
    width: var(--pack-thumb-w);
    height: var(--pack-thumb-h);
}

#packs-section.is-creator-pack-view .pack-list-card-large {
    width: clamp(96px, 26vw, 152px);
    min-height: clamp(148px, 38vw, 216px);
}

#packs-section.is-creator-pack-view .pack-list-card-large img {
    width: clamp(86px, 23vw, 130px);
    height: clamp(124px, 33vw, 184px);
}

.pack-price {
    position: absolute;
    top: calc(var(--pack-thumb-h) - 22px);
    left: 50%;
    z-index: 3;
    min-height: 22px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 221, 236, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #7a4c00;
    font-size: 10px;
    font-weight: 900;
    box-shadow: 0 8px 16px rgba(196, 126, 158, 0.14);
    backdrop-filter: blur(6px);
}

#packs-section.packs-featured-compact .packs-featured-packs {
    transform: scale(0.72);
    transform-origin: top center;
    margin-top: -16px;
    margin-bottom: -74px;
    transition: transform 220ms ease, margin 220ms ease;
}

#packs-section .packs-featured-packs {
    transition: transform 220ms ease, margin 220ms ease;
}

.pack-price .coin-mini {
    width: 11px;
    height: 11px;
    margin-right: 3px;
}

.pack-price s,
.gacha-info-price s,
#home-pack-price s {
    margin-right: 4px;
    color: #a896a0;
    font-size: .82em;
    font-weight: 700;
}

.pack-discount-badge {
    margin-left: 4px;
    padding: 2px 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f0b925, #d88a00);
    color: #fff;
    font-size: 7px;
    line-height: 1;
    white-space: nowrap;
}

.gacha-info-price .pack-discount-badge,
#home-pack-price .pack-discount-badge {
    font-size: 9px;
}

.admin-pack-manager {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
}

.admin-pack-form {
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.admin-pack-dropzone {
    min-height: 116px;
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border: 2px dashed rgba(244, 143, 177, 0.62);
    border-radius: 16px;
    background: rgba(255, 246, 250, 0.8);
    color: var(--primary-dark);
    font-weight: 900;
    cursor: pointer;
}

.admin-pack-dropzone input {
    display: none;
}

.admin-pack-dropzone img {
    width: 64px;
    height: 90px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(236, 111, 157, 0.22));
}

.admin-pack-meta-grid [hidden] {
    display: none !important;
}

.admin-pack-creator-note {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    color: #9a8594;
    font-size: 0.68rem;
    font-weight: 700;
}

.admin-pack-creator-note span::after {
    content: ':';
}

.admin-pack-creator-note strong {
    min-width: 0;
    overflow: hidden;
    color: #755f6e;
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pack-set-filter select {
    width: 100%;
    min-width: 0;
}

.admin-pack-reuse-gallery-wrap {
    min-width: 0;
}

.admin-pack-reuse-gallery-wrap[hidden] {
    display: none !important;
}

.admin-pack-reuse-gallery {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 8px;
    scrollbar-width: thin;
    overscroll-behavior-inline: contain;
}

.admin-pack-reuse-card {
    position: relative;
    flex: 0 0 66px;
    width: 66px;
    height: 92px;
    display: grid;
    place-items: center;
    padding: 5px;
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.66);
    color: #6d5063;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.admin-pack-reuse-card:hover {
    transform: translateY(-2px);
    border-color: rgba(230, 88, 153, 0.68);
}

.admin-pack-reuse-card.is-selected {
    border-color: #e65899;
    background: linear-gradient(160deg, rgba(255, 224, 239, 0.96), rgba(231, 207, 251, 0.88));
    box-shadow: 0 8px 18px rgba(222, 91, 157, 0.18);
}

.admin-pack-reuse-card:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
}

.admin-pack-reuse-card img {
    width: 54px;
    height: 80px;
    object-fit: contain;
}

.admin-pack-rarity-checks {
    display: flex !important;
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-pack-rarity-checks legend {
    width: auto;
    flex: 0 0 auto;
    margin: 0 4px 0 0;
    font-size: 12px;
    font-weight: 800;
    color: #7a4d66;
    white-space: nowrap;
}

.admin-pack-rarity-checks label {
    display: inline-flex !important;
    align-items: center;
    grid-template-columns: none !important;
    gap: 0 !important;
    min-width: auto;
    padding: 0 !important;
    border: 1px solid rgba(243, 200, 218, 0.9);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.admin-pack-rarity-checks input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.admin-pack-rarity-checks span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #7a4d66;
    font-weight: 900;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-pack-rarity-checks input:checked + span {
    background: linear-gradient(135deg, #f48fb1, #b96a91);
    color: #fff;
    box-shadow: 0 8px 18px rgba(196, 126, 158, 0.26);
    transform: translateY(-1px);
}

.admin-pack-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: 100%;
}

.admin-pack-grid .admin-pack-card {
    --pack-thumb-w: 58px;
    --pack-thumb-h: 82px;
    width: 100%;
    min-height: 104px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    align-content: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgba(244, 143, 177, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 28px rgba(196, 126, 158, 0.08);
}

.admin-pack-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

.admin-pack-grid .admin-pack-card > img {
    width: var(--pack-thumb-w);
    height: var(--pack-thumb-h);
    justify-self: center;
    object-fit: contain;
}

.admin-pack-grid .pack-list-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.admin-pack-grid .pack-list-info strong,
.admin-pack-grid .pack-list-info span,
.admin-pack-grid .pack-list-info small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.admin-pack-grid .pack-list-info strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
}

.admin-pack-grid .pack-list-info span {
    color: #6d5063;
    font-size: 11px;
    font-weight: 800;
}

.admin-pack-grid .pack-list-info small {
    color: #8c7184;
    font-size: 10px;
    font-weight: 700;
}

@media (max-width: 520px) {
    .admin-pack-grid .admin-pack-card {
        grid-template-columns: 58px minmax(0, 1fr) 40px;
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 9px;
    }

    .admin-pack-grid .admin-pack-card > img {
        width: 50px;
        height: 72px;
        grid-row: 1 / 3;
    }

    .admin-pack-grid .pack-list-info {
        grid-row: 1 / 3;
    }

    .admin-pack-grid .admin-pack-actions {
        grid-column: 3;
        grid-row: 1 / 3;
        justify-self: center;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .admin-pack-grid .admin-pack-copy-btn,
    .admin-pack-grid .admin-pack-edit-btn {
        min-width: 44px;
        height: 28px;
        padding: 0 8px;
        font-size: 9px;
    }
}

.admin-pack-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-pack-delete-btn,
.admin-pack-copy-btn,
.admin-pack-edit-btn,
.admin-card-delete-btn,
.admin-pack-local-delete-btn,
.admin-card-local-delete-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1.5px solid rgba(244, 143, 177, 0.72);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #f05f9e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(196, 126, 158, 0.12);
}

.admin-pack-edit-btn {
    width: auto;
    min-width: 58px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 900;
}

.admin-card-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 30px;
    height: 30px;
    flex-basis: 30px;
    background: rgba(255, 255, 255, 0.92);
}

.admin-card-local-delete-btn {
    position: absolute;
    top: 42px;
    right: 8px;
    z-index: 2;
    width: auto;
    min-width: 42px;
    height: 24px;
    padding: 0 7px;
    flex-basis: auto;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0;
    background: rgba(255, 248, 252, 0.94);
}

.admin-pack-local-delete-btn {
    width: auto;
    min-width: 48px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.admin-pack-delete-btn span,
.admin-card-delete-btn span {
    width: 14px;
    height: 15px;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    position: relative;
}

.admin-pack-delete-btn span::before,
.admin-card-delete-btn span::before {
    content: '';
    position: absolute;
    left: -3px;
    top: -5px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.admin-pack-delete-btn span::after,
.admin-card-delete-btn span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: -8px;
    width: 5px;
    height: 3px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
}

.admin-pack-copy-btn {
    width: auto;
    min-width: 72px;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 900;
}

.card-circulation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.card-circulation-sheet {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.card-circulation-summary span {
    min-width: 0;
    padding: 10px 8px;
    border: 1px solid rgba(244, 143, 177, 0.24);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    text-align: center;
}

.card-circulation-summary b,
.card-circulation-summary small {
    display: block;
}

.card-circulation-summary b {
    color: #4f3347;
    font-size: 15px;
    font-weight: 900;
}

.card-circulation-summary small {
    color: #9b778d;
    font-size: 9px;
    font-weight: 800;
}

.card-circulation-list {
    min-height: 0;
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    align-content: stretch;
    padding: 2px 4px 14px 2px;
}

.card-circulation-list .card-circulation-item {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    min-height: 118px;
    padding: 12px !important;
    border: 1px solid rgba(244, 143, 177, 0.22);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 28px rgba(119, 84, 146, 0.07);
}

.card-circulation-main {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.card-circulation-main img {
    width: 38px;
    height: 51px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    object-position: center top;
    background: #fff4fa;
}

.card-circulation-data {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.card-circulation-data span {
    min-width: 0;
    padding: 7px 4px;
    border-radius: 10px;
    background: rgba(255, 246, 251, 0.88);
    text-align: center;
}

.card-circulation-data b,
.card-circulation-data small {
    display: block;
    line-height: 1.05;
}

.card-circulation-data b {
    color: #4f3347;
    font-size: 12px;
    font-weight: 900;
}

.card-circulation-data small {
    margin-top: 3px;
    color: #9b778d;
    font-size: 7px;
    font-weight: 800;
    white-space: normal;
}

.card-circulation-list .card-circulation-item .btn {
    width: 100%;
    min-width: 0;
    min-height: 30px;
    padding: 6px 10px;
    justify-content: center;
}

@media (max-width: 520px) {
    .card-circulation-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .card-circulation-summary span {
        padding: 7px 4px;
        border-radius: 12px;
    }

    .card-circulation-summary b {
        font-size: 12px;
    }

    .card-circulation-summary small {
        font-size: 7px;
        line-height: 1.05;
    }

    .card-circulation-data {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .card-circulation-list .card-circulation-item {
        min-height: 116px;
    }

    .card-circulation-list .card-circulation-item .btn {
        font-size: 9px;
    }
}

.admin-pack-delete-btn:hover,
.admin-pack-copy-btn:hover,
.admin-pack-edit-btn:hover,
.admin-card-edit-btn:hover,
.admin-card-delete-btn:hover,
.admin-pack-local-delete-btn:hover,
.admin-card-local-delete-btn:hover {
    background: rgba(255, 235, 244, 0.95);
    transform: translateY(-1px);
}

@media (max-width: 560px) {
    .admin-edit-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    #packs-section {
        padding-top: 18px;
    }

    .profile-widget-grid,
    .creator-widget-grid {
        grid-template-columns: 1fr;
    }

    .creator-widget.widget-medium,
    .creator-widget.widget-small {
        grid-column: 1 / -1;
    }

    .creator-widget-profile {
        grid-template-columns: 68px 1fr;
    }

    .creator-widget-profile .profile-photo {
        width: 68px;
        height: 68px;
    }

    .packs-creator-profile {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .packs-creator-profile img {
        width: 46px;
        height: 46px;
    }

    .packs-creator-profile .creator-public-instagram {
        grid-column: auto;
        width: fit-content;
    }

    .packs-header .page-title {
        font-size: 22px;
        line-height: 1.05;
    }

    .pack-list-card {
        width: 94px;
        min-height: 118px;
        padding: 0;
        border-radius: 0;
    }

    .pack-list-card img {
        width: 68px;
        height: 96px;
    }
}

/* Center packs featured trio */
.packs-featured-packs .dashboard-pack-carousel {
    grid-template-columns: minmax(260px, 360px);
    justify-content: center;
    justify-items: center;
    margin-left: auto;
    margin-right: auto;
}

.packs-featured-packs .pack-stage {
    width: min(100%, 360px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 560px) {
    .packs-featured-packs .dashboard-pack-carousel {
        grid-template-columns: minmax(240px, 320px);
    }

    .packs-featured-packs .pack-stage {
        width: min(100%, 320px);
    }
}

/* Center featured packs card */
#packs-section {
    margin-left: auto;
    margin-right: auto;
}

#packs-section .packs-featured-packs {
    width: min(100%, 430px);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 720px) {
    #packs-section .packs-featured-packs {
        width: min(100%, 430px);
    }
}

/* Admin tabs */
.admin-tabs {
    display: flex;
    gap: 8px;
    margin: 18px auto 16px;
    padding: 5px;
    width: min(100%, 420px);
    border: 1px solid rgba(244, 143, 177, 0.34);
    border-radius: 999px;
    background: var(--app-shell-background);
    background-attachment: fixed;
}

.admin-tab-btn {
    flex: 1;
    min-height: 38px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #8f6d82;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}

.admin-tab-btn.is-active {
    background: linear-gradient(135deg, #f58db8, #c78cf3);
    color: #fff;
    box-shadow: 0 10px 22px rgba(236, 111, 157, 0.18);
}

.admin-tab-panel {
    display: none;
}

.admin-tab-panel.is-active {
    display: block;
}

.admin-pack-manager.admin-tab-panel {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    #admin-section {
        padding-top: max(74px, calc(env(safe-area-inset-top, 0px) + 58px));
    }

    #admin-section.needs-top-safe {
        padding-top: max(82px, calc(env(safe-area-inset-top, 0px) + 66px));
    }

    .admin-tabs {
        margin-top: 0;
    }
}

/* Empty home pack state */
body.has-no-openable-packs #dashboard-section.is-home-active {
    justify-content: center;
}

body.has-no-openable-packs .home-pack-actions {
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 0;
}

body.has-no-openable-packs .home-action-stars {
    width: 100%;
    max-width: 190px;
    margin: 0 auto;
}

.home-mini-packs.is-empty {
    grid-template-columns: 1fr auto;
    min-height: 46px;
    margin-top: 14px;
}

.home-mini-packs.is-empty::before {
    content: attr(data-empty-label);
    padding-left: 12px;
    color: #8f6d82;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.home-mini-packs.is-empty .home-view-packs-btn {
    min-width: 128px;
}

/* Respect hidden state for pack UI */
.featured-floating-pack[hidden],
.home-action-btn[hidden],
.home-mini-pack-stack[hidden],
.pack-card[hidden] {
    display: none !important;
}

@media (max-width: 480px) {
    .envelope-wrapper {
        --gacha-envelope-w: min(72vw, 282px, 42svh);
    }

    #dashboard-section.is-home-active {
        display: flex !important;
        min-height: 100svh;
        height: auto;
        justify-content: center;
        gap: clamp(8px, 1.8svh, 14px);
        padding-top: max(18px, env(safe-area-inset-top));
        padding-bottom: calc(66px + env(safe-area-inset-bottom));
        overflow: visible;
    }

    #dashboard-section.is-home-active .featured-floating-pack {
        width: min(54vw, 210px, 30svh);
        margin-top: 0;
        margin-bottom: clamp(8px, 1.6svh, 12px);
    }

    #dashboard-section.is-home-active .home-pack-actions {
        width: min(calc(100% - 76px), 300px);
        margin-bottom: clamp(8px, 1.6svh, 12px);
    }

    #dashboard-section.is-home-active .home-mini-packs {
        width: min(calc(100% - 76px), 300px);
        min-height: 44px;
        margin-top: 0;
        margin-bottom: 0;
    }
}

@media (max-width: 380px), (max-height: 720px) {
    #dashboard-section.is-home-active .featured-floating-pack {
        width: min(48vw, 180px, 26svh);
    }

    #dashboard-section.is-home-active .home-action-btn {
        min-height: 31px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #dashboard-section.is-home-active .home-mini-packs {
        min-height: 40px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

#gacha-section .hint-open-button {
    border-radius: 16px;
}

#dashboard-section.is-home-active {
    justify-content: center;
    padding-top: max(46px, calc(env(safe-area-inset-top) + 34px));
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

#dashboard-section.is-home-active .featured-floating-pack {
    margin-top: auto;
    margin-bottom: clamp(14px, 2.2svh, 22px);
}

#dashboard-section.is-home-active .home-mini-packs {
    margin-bottom: auto;
}

#dashboard-section.is-home-active .home-pack-actions {
    display: none !important;
}

.packs-highlight-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.packs-highlight-row .pack-list-card-large {
    width: clamp(72px, 19vw, 128px);
    min-height: clamp(124px, 31vw, 194px);
}

.packs-highlight-row .pack-list-card-large img {
    width: clamp(66px, 17vw, 112px);
    height: clamp(96px, 27vw, 160px);
}

@media (max-width: 420px) {
    .packs-highlight-section {
        padding: 16px 10px;
    }

    .packs-highlight-row {
        gap: 10px;
    }
}

@media (min-width: 421px) and (max-width: 780px) {
    #packs-section .packs-highlight-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        overflow: hidden;
    }

    #packs-section .packs-highlight-row .pack-list-card-large {
        width: min(100%, 128px);
    }
}

#packs-section:not(.is-creator-pack-view) .pack-list-card {
    --pack-thumb-w: 78px;
    --pack-thumb-h: 110px;
    width: 94px;
    min-height: 118px;
}

#packs-section:not(.is-creator-pack-view) .pack-list-card img {
    width: var(--pack-thumb-w);
    height: var(--pack-thumb-h);
}

#packs-section:not(.is-creator-pack-view) {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

#packs-section:not(.is-creator-pack-view) .packs-generation-section,
#packs-section:not(.is-creator-pack-view) .packs-model-section,
#packs-section:not(.is-creator-pack-view) .packs-row,
#packs-section:not(.is-creator-pack-view) .packs-highlight-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

#packs-section:not(.is-creator-pack-view) .packs-row {
    grid-auto-flow: initial;
    grid-auto-columns: initial;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    overflow: visible;
    gap: clamp(8px, 2.4vw, 16px);
    padding-inline: 0;
}

#packs-section:not(.is-creator-pack-view) .packs-row .pack-list-card {
    width: 100%;
    max-width: 94px;
    min-width: 0;
    justify-self: center;
}

#packs-section:not(.is-creator-pack-view) .packs-row .pack-list-card img {
    width: min(var(--pack-thumb-w), 100%);
    height: auto;
    aspect-ratio: 78 / 110;
}

#packs-section:not(.is-creator-pack-view) .packs-highlight-section {
    overflow: hidden;
}

.profile-danger-card {
    margin: 14px 0 4px;
    padding: 14px;
    border: 1px solid rgba(240, 95, 158, 0.34);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 34px rgba(190, 108, 148, 0.1);
}

.profile-danger-card .btn {
    width: 100%;
    margin-top: 10px;
    color: #fff;
    background: linear-gradient(135deg, #f26ca5, #ef4f93);
    border-color: transparent;
}

.creator-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
    background: rgba(70, 42, 62, 0.34);
}

.creator-terms-dialog {
    width: min(78vw, 320px);
    height: min(38dvh, 320px);
    max-height: calc(100dvh - 42px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid rgba(244, 172, 206, 0.74);
    border-radius: 12px;
    background: rgba(255, 250, 253, 0.98);
    box-shadow: 0 24px 68px rgba(120, 65, 96, 0.24);
}

.creator-terms-head h2 {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-primary);
}

.creator-terms-text {
    height: 100%;
    min-height: 0;
    padding: 8px;
    border: 1px solid rgba(234, 216, 227, 0.82);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-secondary);
    font-size: 7.5px;
    line-height: 1.18;
    white-space: pre-wrap;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#creator-terms-accept-btn {
    width: 100%;
    min-height: 30px;
    font-size: 11px;
}

/* Home clean hero */
#dashboard-section.is-home-active {
    position: relative;
}

.home-top-logo {
    display: none;
}

#dashboard-section.is-home-active .home-top-logo {
    position: fixed;
    top: max(18px, calc(env(safe-area-inset-top, 0px) + 8px));
    left: 50%;
    z-index: 46;
    display: block;
    width: clamp(132px, 38vw, 220px);
    max-height: 56px;
    object-fit: contain;
    transform: translate3d(-50%, 0, 0);
    filter: drop-shadow(0 10px 20px rgba(255, 99, 173, 0.18));
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}

#dashboard-section.is-home-active .home-top-logo.is-hidden {
    opacity: 0;
    transform: translate3d(-50%, -12px, 0) scale(0.96);
}

.home-pack-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 112px));
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: min(calc(100% - 64px), 320px);
    margin: -8px auto 10px;
    color: #6e4c62;
    text-align: center;
}

.home-pack-details[hidden],
.home-open-pack-hero-btn[hidden] {
    display: none !important;
}

.home-pack-details strong {
    font-size: clamp(12px, 3.3vw, 15px);
    font-weight: 900;
    line-height: 1.1;
}

.home-pack-resources {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
}

#dashboard-section.is-home-active .home-mini-packs {
    grid-template-columns: 1fr;
    width: min(calc(100% - 56px), 346px);
    min-height: 0;
    margin: 2px auto 0;
    padding: 12px 16px 22px;
    border-radius: 18px;
}

.home-quick-shop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

#dashboard-section.is-home-active .home-quick-shop-header > strong {
    color: #7a5570;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

#dashboard-section.is-home-active .home-view-packs-btn {
    min-height: 28px;
    padding: 0 12px;
    font-size: 10px;
}

#dashboard-section.is-home-active .home-featured-pack-list {
    width: 100%;
    margin: 10px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#dashboard-section.is-home-active .home-featured-pack {
    min-width: 0;
    width: 100%;
    min-height: 0;
    padding: 0 0 10px;
    display: grid;
    justify-items: center;
    align-content: center;
    overflow: visible;
}

#dashboard-section.is-home-active .home-featured-pack img {
    width: clamp(68px, 20vw, 88px);
    height: clamp(96px, 28vw, 124px);
}

#dashboard-section.is-home-active .home-featured-pack small {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 5;
    transform: none;
    min-height: 24px;
    width: fit-content;
    margin: 6px auto 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 18px rgba(255, 105, 170, 0.14);
}

.home-pack-resource {
    order: 1;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 183, 211, 0.58);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 10px 20px rgba(255, 105, 170, 0.12);
    color: #56384d;
    font-size: 12px;
    font-weight: 900;
}

.fragment-mini {
    width: 17px;
    height: 17px;
    display: inline-block;
    flex: 0 0 auto;
    background: url('../assets/images/menu/fragment-lateral.webp') center / contain no-repeat;
    filter: drop-shadow(0 2px 4px rgba(244, 110, 174, 0.22));
}

.home-open-pack-hero-btn {
    order: 2;
    width: 100%;
    min-height: 36px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff72b7 0%, #f756a4 58%, #d88bff 100%);
    box-shadow: 0 16px 30px rgba(244, 88, 159, 0.22);
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
}

#packs-section .packs-creator-cromo-open.home-open-pack-hero-btn {
    order: initial;
    width: auto;
    min-width: 132px;
    max-width: calc(100% - 32px);
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 14px;
    font-size: 0.72rem;
    line-height: 1;
    white-space: nowrap;
}

#packs-section .packs-creator-cromo-open.home-open-pack-hero-btn .cromo-coin-mini {
    width: 13px;
    height: 13px;
}

#cromos-section .cromo-unlock-btn.home-open-pack-hero-btn {
    order: initial;
    width: auto;
    min-width: 156px;
    max-width: calc(100% - 24px);
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 6px;
    padding: 0 18px;
    font-size: 0.82rem;
    line-height: 1;
    white-space: nowrap;
}

#cromos-section .cromo-unlock-btn.home-open-pack-hero-btn .cromo-coin-mini {
    width: 14px;
    height: 14px;
}

.packs-creator-cromo-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.home-open-pack-hero-btn:disabled {
    opacity: 0.52;
    cursor: default;
}

@media (max-width: 480px) {
    #dashboard-section.is-home-active {
        padding-top: max(78px, calc(env(safe-area-inset-top, 0px) + 58px));
    }

    #dashboard-section.is-home-active .home-top-logo {
        width: clamp(122px, 38vw, 172px);
        max-height: 44px;
    }

    #dashboard-section.is-home-active .featured-floating-pack {
        width: min(62vw, 232px, 34svh);
        margin-bottom: clamp(8px, 1.4svh, 12px);
    }

    .home-pack-details {
        width: min(calc(100% - 76px), 300px);
        margin-bottom: 8px;
    }

    .home-open-pack-hero-btn {
        min-height: 39px;
    }

    #dashboard-section.is-home-active .home-featured-pack-list,
    #dashboard-section.is-home-active .home-mini-packs {
        width: min(calc(100% - 44px), 330px);
    }

    #dashboard-section.is-home-active .home-mini-packs {
        padding: 10px 14px 20px;
    }
}

@media (max-height: 720px) {
    #dashboard-section.is-home-active .home-top-logo {
        top: max(14px, calc(env(safe-area-inset-top, 0px) + 6px));
        width: clamp(112px, 36vw, 154px);
        max-height: 40px;
    }

    #dashboard-section.is-home-active .featured-floating-pack {
        width: min(52vw, 198px, 30svh);
    }

    .home-pack-resource {
        min-height: 24px;
        padding: 4px 8px;
    }

    .home-open-pack-hero-btn {
        min-height: 36px;
    }

    #dashboard-section.is-home-active .home-featured-pack img {
        width: clamp(60px, 18vw, 74px);
        height: clamp(84px, 24vw, 104px);
    }

    #dashboard-section.is-home-active .home-featured-pack {
        min-height: 0;
        padding-bottom: 8px;
    }

    #dashboard-section.is-home-active .home-featured-pack-list {
        gap: 7px;
        margin-top: 6px;
    }
}

@media (min-width: 700px) {
    body.is-app-view:not(.is-login-view) #app {
        width: 560px;
        max-width: 560px;
        min-height: min(100vh, 844px);
        margin: 0 auto;
        align-items: flex-start;
        overflow: visible;
    }

    body.is-app-view:not(.is-login-view) .section:not(#login-section) {
        width: 560px;
        max-width: 560px;
    }

    #dashboard-section.is-home-active {
        min-height: min(100vh, 844px);
        height: min(100vh, 844px);
        padding-top: 70px;
        padding-bottom: 72px;
        overflow: visible;
    }

    #dashboard-section.is-home-active .home-top-logo {
        top: 18px;
    }

    #dashboard-section.is-home-active .home-pack-details,
    #dashboard-section.is-home-active .home-pack-actions {
        width: min(calc(100% - 96px), 390px);
    }

    #dashboard-section.is-home-active .home-mini-packs {
        width: min(calc(100% - 112px), 450px);
    }

    #dashboard-section.is-home-active .home-featured-pack-list {
        grid-auto-columns: minmax(86px, 102px);
        justify-content: center;
        gap: 16px;
    }

    .mobile-bottom-nav {
        width: 560px;
        max-width: calc(100% - 18px);
    }
}

.daily-reward-modal {
    position: fixed;
    inset: 0;
    z-index: 26000;
    display: grid;
    place-items: center;
    padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    background: rgba(91, 57, 81, 0.28);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.daily-reward-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

.daily-reward-dialog {
    position: relative;
    width: min(460px, 100%);
    overflow: hidden;
    padding: 25px 18px 18px;
    border: 1.5px solid rgba(255, 135, 187, 0.62);
    border-radius: 28px;
    background:
        radial-gradient(circle at 15% 8%, rgba(255, 255, 255, 0.96), transparent 34%),
        linear-gradient(145deg, #fffafd 0%, #fff0f7 55%, #faeaff 100%);
    box-shadow: 0 24px 70px rgba(133, 61, 101, 0.3), inset 0 0 0 3px rgba(255, 255, 255, 0.62);
    color: #633f55;
    transform: translateY(18px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.2, 1.15, 0.35, 1);
}

.daily-reward-dialog::before,
.daily-reward-dialog::after {
    content: '✦';
    position: absolute;
    color: rgba(255, 104, 170, 0.23);
    font-size: 42px;
    pointer-events: none;
}

.daily-reward-dialog::before { left: -4px; top: 38%; }
.daily-reward-dialog::after { right: 15px; top: 12px; font-size: 24px; }
.daily-reward-modal.is-visible .daily-reward-dialog { transform: translateY(0) scale(1); }

.daily-reward-close {
    position: absolute;
    top: 13px;
    right: 13px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: linear-gradient(145deg, #ff8bc0, #f04e9b);
    box-shadow: 0 8px 20px rgba(224, 73, 142, 0.28);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.daily-reward-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 5px 42px 8px 0;
}

.daily-reward-gift {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    border-radius: 22px;
    background: radial-gradient(circle, #fff 0%, #ffd7e9 68%, #fda8cd 100%);
    box-shadow: 0 10px 25px rgba(232, 92, 155, 0.2);
    animation: dailyRewardGiftFloat 2.2s ease-in-out infinite;
}

.daily-reward-gift img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(217, 69, 140, 0.22));
}

@keyframes dailyRewardGiftFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}

.daily-reward-heading h2 {
    margin: 0;
    color: #e94d98;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.05;
    font-weight: 950;
}

.daily-reward-heading p {
    margin: 6px 0 0;
    color: #90677e;
    font-size: 12px;
    font-weight: 800;
}

.daily-reward-today {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 10px auto 17px;
    padding: 11px 14px;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: inset 0 0 0 1px rgba(242, 128, 179, 0.22);
}

.daily-reward-today span {
    color: #8b657a;
    font-size: 14px;
    font-weight: 800;
}

.daily-reward-today strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6c4059;
    font-size: 17px;
    font-weight: 950;
}

.daily-reward-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.daily-reward-day {
    position: relative;
    min-width: 0;
    min-height: 91px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 2px;
    border: 1px solid rgba(237, 129, 177, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 7px 16px rgba(188, 112, 148, 0.08);
}

.daily-reward-day.is-active {
    border-color: #ff9b35;
    background: linear-gradient(180deg, #fff 0%, #fff4eb 100%);
    box-shadow: 0 9px 20px rgba(255, 151, 53, 0.18);
    transform: translateY(-3px);
}

.daily-reward-day.is-complete { opacity: 0.68; }
.daily-reward-day b { font-size: 9px; font-weight: 950; white-space: nowrap; }
.daily-reward-day > strong { font-size: 11px; font-weight: 950; }

.daily-reward-day > i {
    position: absolute;
    right: 3px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff9e25;
    color: #fff;
    font-size: 10px;
    font-style: normal;
}

.daily-reward-coin-icon,
.daily-reward-fragment-icon,
.daily-reward-pack-icon {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
}

.daily-reward-coin-icon img,
.daily-reward-fragment-icon img,
.daily-reward-pack-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(192, 72, 156, 0.2));
}

.daily-reward-coin-icon img {
    filter: drop-shadow(0 3px 4px rgba(190, 119, 0, 0.24));
}

.daily-reward-note,
.daily-reward-message {
    min-height: 16px;
    margin: 12px 0 8px;
    color: #8e687d;
    text-align: center;
    font-size: 11px;
    font-weight: 750;
}

.daily-reward-message {
    margin: 8px 0 0;
    color: #d84b91;
}

.daily-reward-claim {
    display: block;
    min-width: 145px;
    min-height: 46px;
    margin: 0 auto;
    padding: 0 24px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    background: linear-gradient(145deg, #fa7fbc, #e94092);
    box-shadow: 0 11px 24px rgba(221, 61, 137, 0.28);
    color: #fff;
    font-size: 16px;
    font-weight: 950;
    cursor: pointer;
}

.daily-reward-claim:disabled { cursor: wait; opacity: 0.72; }
.daily-reward-claim.is-claimed { background: linear-gradient(145deg, #ffb158, #f08723); }

@media (max-width: 390px) {
    .daily-reward-dialog { padding: 22px 11px 15px; border-radius: 23px; }
    .daily-reward-heading { gap: 9px; padding-right: 34px; }
    .daily-reward-gift { width: 58px; height: 58px; flex-basis: 58px; }
    .daily-reward-gift img { width: 43px; height: 43px; }
    .daily-reward-heading h2 { font-size: 21px; }
    .daily-reward-days { gap: 3px; }
    .daily-reward-day { min-height: 82px; border-radius: 11px; }
    .daily-reward-day b { font-size: 8px; }
    .daily-reward-day > strong { font-size: 9px; }
    .daily-reward-coin-icon,
    .daily-reward-fragment-icon,
    .daily-reward-pack-icon { width: 25px; height: 25px; flex-basis: 25px; }
}

/* Resumen privado de estadisticas para Princess. */
.admin-global-stats-card {
    margin: 14px 0 18px;
    padding: 16px;
    border: 1px solid rgba(230, 88, 153, 0.22);
    border-radius: 18px;
    background: rgba(255, 247, 252, 0.78);
}

.admin-global-stats-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.admin-global-stats-head h3 {
    margin: 3px 0 2px;
    color: var(--admin-ink, #5e4058);
    font-size: 18px;
}

.admin-global-stats-head small {
    color: rgba(94, 64, 88, 0.62);
    font-size: 11px;
}

.admin-global-stats-controls {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.admin-global-stats-month {
    display: grid;
    gap: 4px;
    color: rgba(94, 64, 88, 0.68);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-global-stats-month .admin-input {
    min-width: 132px;
    min-height: 32px;
    padding: 5px 8px;
}

.admin-global-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.admin-global-stat-tile,
.admin-global-stats-detail-tile {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(230, 88, 153, 0.16);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.64);
}

.admin-global-stat-tile {
    display: grid;
    gap: 4px;
}

.admin-global-stat-tile span,
.admin-global-stats-detail-tile span {
    color: rgba(94, 64, 88, 0.7);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
}

.admin-global-stat-tile strong,
.admin-global-stats-detail-tile strong {
    color: var(--admin-ink, #5e4058);
    font-size: 20px;
    line-height: 1.1;
}

.admin-global-stat-tile small,
.admin-global-stats-detail-tile small {
    color: rgba(94, 64, 88, 0.58);
    font-size: 10px;
    line-height: 1.25;
}

.admin-global-stat-tile small.is-positive,
.admin-global-stats-detail-tile small.is-positive,
.admin-global-stats-comparison-card .is-positive,
.admin-global-stats-detail-tile .is-positive {
    color: #c34689;
}

.admin-global-stat-tile small.is-negative,
.admin-global-stats-detail-tile small.is-negative,
.admin-global-stats-comparison-card .is-negative,
.admin-global-stats-detail-tile .is-negative {
    color: #9f5f88;
}

.admin-global-stat-tile small.is-neutral,
.admin-global-stats-detail-tile small.is-neutral,
.admin-global-stats-comparison-card .is-neutral {
    color: rgba(94, 64, 88, 0.5);
}

.admin-global-stats-open-btn {
    width: 100%;
    margin-top: 12px;
}

.admin-global-stats-loading,
.admin-global-stats-empty {
    grid-column: 1 / -1;
    margin: 8px 0;
    color: rgba(94, 64, 88, 0.62);
    font-size: 12px;
    text-align: center;
}

.admin-global-stats-modal {
    position: fixed;
    inset: 0;
    z-index: 10080;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(58, 34, 57, 0.34);
    backdrop-filter: blur(8px);
}

.admin-global-stats-modal.is-open {
    display: flex;
}

.admin-global-stats-dialog {
    width: min(100%, 780px);
    max-height: min(92vh, 900px);
    overflow: auto;
    padding: 20px;
    border: 1px solid rgba(230, 88, 153, 0.25);
    border-radius: 22px;
    background: rgba(255, 250, 253, 0.98);
    box-shadow: 0 24px 70px rgba(83, 43, 79, 0.28);
}

.admin-global-stats-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.admin-global-stats-dialog-head h2 {
    margin: 4px 0 0;
    color: var(--admin-ink, #5e4058);
    font-size: 24px;
}

.admin-global-stats-close {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(230, 88, 153, 0.24);
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.68);
    color: #c34689;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.admin-global-stats-period {
    margin: 0 0 14px;
    color: rgba(94, 64, 88, 0.65);
    font-size: 12px;
}

.admin-global-stats-detail-section {
    margin-top: 16px;
}

.admin-global-stats-detail-section h3 {
    margin: 0 0 8px;
    color: var(--admin-ink, #5e4058);
    font-size: 15px;
}

.admin-global-stats-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.admin-global-stats-detail-tile {
    display: grid;
    gap: 4px;
}

.admin-global-stats-comparison-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin-global-stats-comparison-card {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(230, 88, 153, 0.2);
    border-radius: 14px;
    background: rgba(255, 232, 244, 0.55);
    color: rgba(94, 64, 88, 0.76);
    font-size: 11px;
}

.admin-global-stats-comparison-card strong {
    color: var(--admin-ink, #5e4058);
    font-size: 13px;
}

.admin-global-stats-comparison-card.is-muted {
    background: rgba(245, 238, 246, 0.62);
}

.admin-global-stats-profile-list {
    display: grid;
    gap: 5px;
}

.admin-global-stats-profile-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    padding: 6px 9px;
    border-bottom: 1px solid rgba(230, 88, 153, 0.12);
    color: rgba(94, 64, 88, 0.76);
    font-size: 12px;
}

.admin-global-stats-profile-row b {
    color: #d95691;
}

.admin-global-stats-profile-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-global-stats-profile-row strong {
    color: var(--admin-ink, #5e4058);
    font-size: 11px;
}

.admin-creator-commission-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.admin-creator-commission-row {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) repeat(5, minmax(110px, 1fr));
    gap: 10px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(239, 105, 160, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.74);
}

.admin-creator-commission-row > span,
.admin-creator-commission-name span {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-creator-commission-row small {
    color: #927184;
    font-size: 0.72rem;
}

.admin-creator-commission-row strong {
    color: #5a3b4e;
}

.admin-creator-commission-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.admin-creator-commission-name > b {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ff77ae, #b878e8);
}

.admin-arena-points-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.admin-arena-points-quick .btn {
    min-width: 74px;
}

@media (max-width: 900px) {
    .admin-creator-commission-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-creator-commission-name {
        grid-column: 1 / -1;
    }
}

@media (max-width: 680px) {
    .admin-global-stats-head {
        display: grid;
    }

    .admin-global-stats-controls {
        align-items: center;
        justify-content: space-between;
    }

    .admin-global-stats-summary,
    .admin-global-stats-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-global-stats-comparison-grid {
        grid-template-columns: 1fr;
    }

    .admin-global-stats-dialog {
        padding: 16px;
        border-radius: 18px;
    }
}

@media (min-width: 700px) {
    body.is-app-view:not(.is-login-view)::before {
        background-size: 560px auto;
        background-position: top center;
        background-repeat: repeat-y;
    }

    body.is-app-view:not(.is-login-view)::after {
        width: 560px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    body.is-app-view:not(.is-login-view) .metrics-grid {
        top: 50%;
        left: calc(50% - 280px + 8px);
        right: auto;
        width: 38px;
        max-width: 38px;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 6px;
        transform: translateY(-50%);
        z-index: 48;
    }

    body.is-app-view:not(.is-login-view) .metric-card {
        width: 36px;
        min-width: 36px;
        min-height: 35px;
        padding: 4px 3px 5px;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
    }

    body.is-app-view:not(.is-login-view) .metric-label,
    body.is-app-view:not(.is-login-view) .metric-label::before {
        width: 22px;
        height: 22px;
    }

    body.is-app-view:not(.is-login-view) .metric-stars .metric-value,
    body.is-app-view:not(.is-login-view) .metric-cards .metric-value,
    body.is-app-view:not(.is-login-view) .metric-fragments .metric-value {
        font-size: 11px;
        line-height: 1;
    }

    body.is-dashboard-view .home-game-menu {
        right: calc(50% - 280px);
        top: calc(50% - 84px);
    }

    body.is-app-view:not(.is-login-view) #arena-section {
        width: 560px;
        max-width: 560px;
        padding-left: 18px;
        padding-right: 18px;
    }

    body.is-app-view:not(.is-login-view) .arena-shell {
        width: 100%;
        max-width: 512px;
        gap: 12px;
    }

    body.is-app-view:not(.is-login-view) .arena-duel {
        grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
        gap: 7px;
        padding: 11px 8px;
        border-radius: 18px;
    }

    body.is-app-view:not(.is-login-view) .arena-duel-side {
        min-height: 242px;
        padding: 8px 5px;
    }

    body.is-app-view:not(.is-login-view) .arena-duel-card {
        width: 122px;
        height: 174px;
    }

    body.is-app-view:not(.is-login-view) .arena-vs {
        width: 38px;
        height: 38px;
    }

    body.is-app-view:not(.is-login-view) .arena-vs img {
        width: 28px;
        height: 28px;
    }
}

/* ==========================================
   TCGIRLS VISUAL REFRESH - WHITE & LAVENDER
   Capa visual. No modifica iconos del menu fijo inferior.
   ========================================== */

/* Visual refresh desactivado para volver al estilo anterior.
:root {
    --primary: #ff63ad;
    --primary-dark: #e84895;
    --secondary: #b786ff;
    --secondary-soft: #eadfff;
    --mint: #d9f7e8;
    --cream: #fff2c7;
    --ink: #33243d;
    --lavender-ink: #6b5480;
    --surface: rgba(255, 255, 255, 0.84);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --line-soft: rgba(190, 142, 224, 0.22);
    --line-pink: rgba(255, 99, 173, 0.22);
    --shadow-soft: 0 22px 58px rgba(119, 84, 146, 0.13);
    --shadow-pink: 0 18px 38px rgba(255, 99, 173, 0.18);
}

html,
body {
    background: #fff9fd;
}

body {
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 14%, rgba(255, 189, 222, 0.34), transparent 26%),
        radial-gradient(circle at 88% 10%, rgba(183, 134, 255, 0.22), transparent 30%),
        radial-gradient(circle at 70% 86%, rgba(207, 238, 255, 0.26), transparent 32%),
        linear-gradient(135deg, #fffafe 0%, #fff4fa 48%, #f5f0ff 100%);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(172deg, rgba(255, 255, 255, 0) 0 12%, rgba(233, 214, 255, 0.38) 12.2% 22%, rgba(255, 222, 238, 0.34) 22.2% 31%, rgba(255, 255, 255, 0) 31.2%),
        radial-gradient(circle at 24% 78%, rgba(255, 99, 173, 0.18), transparent 18%),
        radial-gradient(circle at 80% 46%, rgba(183, 134, 255, 0.14), transparent 22%);
    opacity: 0.92;
}

.section:not(#login-section) {
    max-width: 980px;
}

.page-title,
.packs-title,
.discover-header h1,
.profile-name {
    color: var(--ink);
    letter-spacing: 0;
}

.page-title,
.packs-title,
.discover-header h1 {
    font-weight: 950;
    line-height: 1.05;
}

.page-title::first-letter,
.packs-title::first-letter {
    color: var(--secondary);
}

.shop-kicker,
.profile-role,
.season-progress-pill,
.collection-card-rarity-badge {
    border: 1px solid rgba(183, 134, 255, 0.16);
    background: linear-gradient(135deg, rgba(255, 242, 199, 0.82), rgba(255, 232, 245, 0.88));
    color: #a86a12;
    box-shadow: 0 8px 24px rgba(183, 134, 255, 0.08);
}

.btn,
.home-action-btn,
.gacha-bottom-btn,
.hint-open-button,
.profile-upload-manager-btn,
.profile-card-builder-btn,
.profile-bonus-open-btn,
.packs-filter-bar button,
.packs-more-btn,
.home-view-packs-btn,
.stars-package-actions button {
    border-radius: 999px;
    letter-spacing: 0;
    font-weight: 900;
}

.btn-primary,
.home-action-open,
.hint-open-button,
.profile-upload-manager-btn,
.profile-card-builder-btn,
.profile-bonus-open-btn,
.featured-open-pack-btn,
.gacha-skip-inline-btn {
    border-color: transparent !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff63ad 0%, #ec71c7 48%, #b786ff 100%) !important;
    box-shadow: var(--shadow-pink);
}

.btn-secondary,
.home-view-packs-btn,
.packs-more-btn,
.gacha-bottom-btn,
.profile-internal-menu-btn,
.packs-filter-bar button {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 99, 173, 0.28);
    color: #b24d80;
    box-shadow: 0 12px 28px rgba(119, 84, 146, 0.08);
}

.btn:hover,
.home-action-btn:hover,
.hint-open-button:hover,
.profile-upload-manager-btn:hover,
.profile-card-builder-btn:hover,
.packs-more-btn:hover,
.home-view-packs-btn:hover {
    transform: translateY(-1px);
    filter: saturate(1.04);
}

.admin-select,
.profile-referral-input,
input[type='text'],
input[type='email'],
input[type='number'],
select,
textarea {
    border: 1px solid rgba(183, 134, 255, 0.24) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 28px rgba(119, 84, 146, 0.06);
}

.admin-select:focus,
.profile-referral-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(183, 134, 255, 0.72) !important;
    outline: 0;
    box-shadow: 0 0 0 4px rgba(183, 134, 255, 0.15), 0 12px 28px rgba(119, 84, 146, 0.08);
}

.login-card,
.arena-panel,
.dashboard-box,
.shop-toolbar,
.shop-summary,
.shop-generation-section,
.shop-rarity-section,
.profile-card,
.profile-referral-card,
.profile-promo-card,
.profile-favorites-card,
.profile-creator-shop-card,
.profile-public-card,
.profile-creator-commission-card,
.profile-princess-codes-card,
.profile-danger-card,
.profile-bonus-card,
.profile-withdrawal-card,
.profile-creator-actions,
.profile-internal-menu,
.packs-white-panel,
.packs-generation-section,
.packs-featured-packs,
.packs-creator-profile,
.discover-creator-setup,
.discover-card,
.discover-feed-card,
.game-action-dialog,
.stars-recharge-dialog,
.email-bonus-dialog {
    border: 1px solid var(--line-soft);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 252, 254, 0.82)),
        radial-gradient(circle at 18% 0%, rgba(255, 189, 222, 0.18), transparent 34%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.profile-card,
.profile-referral-card,
.profile-promo-card,
.profile-favorites-card,
.profile-creator-shop-card,
.profile-public-card,
.profile-creator-commission-card,
.profile-princess-codes-card,
.profile-danger-card,
.profile-bonus-card,
.profile-withdrawal-card,
.shop-generation-section,
.packs-generation-section,
.packs-featured-packs,
.discover-creator-setup,
.discover-card,
.discover-feed-card {
    border-radius: 18px;
}

.metric-card,
.shop-total-card,
.shop-stat,
.profile-mini-stats div,
.profile-referral-stats span,
.arena-card,
.collection-set-section,
.collection-model-section,
.collection-empty,
.stars-package {
    border: 1px solid rgba(255, 99, 173, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 12px 30px rgba(119, 84, 146, 0.08);
}

.metric-value,
.shop-total-card strong,
.shop-stat strong,
.profile-mini-stats span,
.profile-favorites-count,
#profile-favorites-count {
    color: var(--ink);
}

.metric-label,
.shop-total-card span,
.shop-stat span,
.profile-mini-stats small,
.profile-referral-message,
.packs-creator-copy small,
.profile-username {
    color: var(--lavender-ink);
}

.dashboard-header,
.action-buttons {
    display: none;
}

.featured-floating-pack,
.pack-card,
.home-featured-pack,
.pack-list-card img,
.featured-floating-pack img,
.pack-card img {
    filter: drop-shadow(0 26px 34px rgba(119, 84, 146, 0.18));
}

.featured-floating-pack::before,
.pack-card::before,
.home-featured-pack::before,
.pack-list-card::before {
    opacity: 0.62;
}

.metric-card {
    border-radius: 999px;
    min-height: 38px;
}

.metric-card .metric-label {
    font-size: 10px;
}

.metric-card .metric-value {
    font-size: 15px;
    font-weight: 950;
}

.shop-header,
.collection-header,
.packs-header,
.discover-header,
.arena-header,
.gacha-header {
    align-items: center;
}

.shop-header,
.collection-header,
.packs-header,
.arena-header {
    margin-bottom: 16px;
}

.shop-toolbar {
    padding: 12px;
    border-radius: 18px;
}

.shop-summary {
    border-radius: 18px;
    padding: 12px;
}

.shop-generation-section,
.packs-generation-section {
    padding: 18px;
}

.shop-generation-section > h2,
.packs-generation-section > h2,
.collection-model-section h2,
.collection-set-section h3 {
    color: var(--ink);
    font-weight: 950;
}

.collection-filter-bar,
.rarity-filter {
    padding: 10px;
    border: 1px solid var(--line-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: 0 12px 30px rgba(119, 84, 146, 0.07);
}

.collection-set-section {
    border-radius: 18px;
    padding: 14px;
}

.collection-card,
.shop-card,
.arena-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.collection-card:hover,
.shop-card:hover,
.arena-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(119, 84, 146, 0.13);
}

.collection-card-count,
.pack-price,
.home-featured-pack small {
    border: 1px solid rgba(255, 99, 173, 0.16);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    box-shadow: 0 10px 26px rgba(119, 84, 146, 0.1);
}

.profile-photo,
.packs-creator-profile img,
.packs-model-avatar {
    border-color: rgba(255, 99, 173, 0.55);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.92), 0 16px 30px rgba(119, 84, 146, 0.18);
}

.profile-name {
    font-weight: 950;
}

.profile-internal-menu {
    padding: 8px;
    gap: 8px;
    border-radius: 18px;
}

.profile-internal-menu-btn.is-active,
.packs-filter-bar button.is-active {
    color: #fff;
    background: linear-gradient(135deg, #b786ff, #ff63ad);
    box-shadow: 0 14px 28px rgba(183, 134, 255, 0.22);
}

.profile-referral-head h2,
.profile-promo-head h2 {
    color: var(--ink);
}

.discover-shell,
.profile-shell {
    max-width: 760px;
}

.discover-header h1,
.profile-shell .profile-name {
    font-size: clamp(30px, 7vw, 48px);
}

.discover-feed-card {
    overflow: hidden;
}

.discover-card-media,
.discover-main-card img {
    box-shadow: 0 22px 44px rgba(119, 84, 146, 0.18);
}

.discover-like-btn,
.discover-skip-btn,
.creator-favorite-heart,
.profile-like-btn,
.creator-public-like-btn {
    border-radius: 999px;
    box-shadow: 0 14px 28px rgba(119, 84, 146, 0.12);
}

.packs-title {
    width: min(100%, 760px);
    margin: 8px auto 14px;
    font-size: clamp(28px, 7vw, 44px);
}

.packs-featured-packs {
    position: relative;
    overflow: hidden;
}

.packs-featured-packs::after,
.shop-generation-section::after,
.profile-card::after {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 120px;
    height: 120px;
    right: -54px;
    top: -54px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(183, 134, 255, 0.18), transparent 68%);
}

.packs-featured-packs,
.shop-generation-section,
.profile-card {
    position: relative;
}

.pack-list-card {
    border-radius: 14px;
    transition: transform 160ms ease;
}

.pack-list-card:hover {
    transform: translateY(-2px);
}

.gacha-header .page-title {
    font-size: clamp(24px, 7vw, 40px);
}

.gacha-container,
.envelope-wrapper {
    color: var(--ink);
}

.gacha-pack-info {
    border: 1px solid var(--line-soft);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

.hint-text,
.swipe-hint {
    color: var(--lavender-ink);
}

.card-preview-close {
    color: #fff;
    background: linear-gradient(135deg, #ff63ad, #b786ff);
    box-shadow: var(--shadow-pink);
}

.game-action-modal,
.stars-recharge-modal,
.email-bonus-modal,
.creator-terms-modal {
    backdrop-filter: blur(12px);
}

@media (max-width: 560px) {
    .section:not(#login-section) {
        padding-left: 18px;
        padding-right: 18px;
    }

    .page-title,
    .packs-title {
        font-size: clamp(25px, 8vw, 34px);
    }

    .shop-toolbar,
    .shop-summary,
    .profile-internal-menu {
        border-radius: 16px;
    }

    .profile-card {
        gap: 12px;
        padding: 14px;
    }

    .profile-mini-stats {
        gap: 7px;
    }

    .profile-mini-stats div {
        border-radius: 14px;
        padding: 9px 5px;
    }

    .shop-generation-section,
    .packs-generation-section,
    .profile-referral-card,
    .profile-promo-card,
    .profile-favorites-card,
    .profile-creator-shop-card,
    .profile-public-card,
    .profile-creator-commission-card,
    .profile-princess-codes-card {
        padding: 14px;
    }

    .metric-card {
        min-height: 34px;
    }
}

/* En escritorio conserva el marco vertical de la mini app de Telegram. */
@media (min-width: 700px) {
    #app {
        width: min(480px, calc(100vw - 32px));
        max-width: 480px;
        min-height: 100vh;
        margin-inline: auto;
        align-items: flex-start;
        overflow-x: hidden;
        border-radius: 34px;
        background: var(--app-shell-background);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46), 0 28px 90px rgba(96, 55, 101, 0.18);
    }

    #login-section,
    #login-section .login-container {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        min-height: 100svh;
    }

    #login-section .login-container {
        height: 100svh;
    }

    #login-section .login-background-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .section:not(#login-section) {
        width: 100%;
        max-width: 100%;
    }
}

/* En PC la app conserva el marco estrecho de una pantalla de telefono. */
@media (min-width: 700px) {
    #app {
        width: min(480px, calc(100vw - 32px));
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
        overflow-x: hidden;
    }

    #app > .section,
    #app > .section-full,
    #app > #login-section,
    #app > #login-section .login-container {
        width: 100%;
        max-width: 100%;
    }

    #app .mobile-bottom-nav {
        width: min(480px, calc(100vw - 32px));
        max-width: 100%;
    }

    body.is-app-view:not(.is-login-view) #app {
        width: min(480px, calc(100vw - 32px));
        max-width: 480px;
    }

    body.is-app-view:not(.is-login-view) .section:not(#login-section) {
        width: 100%;
        max-width: 100%;
    }

    body.is-app-view:not(.is-login-view) .mobile-bottom-nav {
        width: min(480px, calc(100vw - 32px));
        max-width: 100%;
    }

    body.is-app-view:not(.is-login-view)::before {
        background-size: 480px auto;
    }

    body.is-app-view:not(.is-login-view)::after {
        width: 480px;
    }

    body.is-app-view:not(.is-login-view) .metrics-grid {
        left: calc(50% - 240px + 8px);
    }

    body.is-dashboard-view .home-game-menu {
        right: calc(50% - 240px);
    }

    body.is-app-view:not(.is-login-view) #arena-section {
        width: 100%;
        max-width: 100%;
    }
}

/* Codex admin upload polish overrides */
.admin-reader-dropzone {
    min-height: 86px !important;
    background: rgba(255, 255, 255, 0.54) !important;
    color: var(--text-primary) !important;
}

.admin-reader-dropzone.is-compact {
    min-height: 48px !important;
    grid-template-columns: 1fr !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.38) !important;
    color: rgba(76, 54, 70, 0.68) !important;
}

.admin-dropzone-compact {
    display: none !important;
}

.admin-reader-dropzone.is-compact .admin-reader-folder,
.admin-reader-dropzone.is-compact .admin-dropzone-full,
.admin-reader-dropzone.is-compact small {
    display: none !important;
}

.admin-reader-dropzone.is-compact .admin-dropzone-compact {
    display: block !important;
}

.admin-card-edit-btn {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: 0.68 !important;
}

.admin-card-delete-trash {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #d84b90 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    opacity: 0.68 !important;
}

.admin-card-delete-trash span,
.admin-card-delete-trash::before,
.admin-card-delete-trash::after {
    display: none !important;
}

.admin-card-circulation-bubbles span {
    gap: 3px !important;
}

.admin-card-circulation-bubbles img {
    width: 13px !important;
    height: 13px !important;
    object-fit: contain !important;
}

.admin-detail-panel {
    grid-template-columns: minmax(108px, 42%) minmax(0, 1fr) !important;
    gap: 10px !important;
}

.admin-detail-data {
    min-width: 0 !important;
    overflow: hidden !important;
}

.admin-card-guided-fields-compact {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.admin-detail-actions .btn {
    width: 100% !important;
    min-width: 0 !important;
}

.admin-library-stats {
    margin-top: 14px !important;
    justify-content: center !important;
    opacity: 0.88;
}

.admin-library-stats .admin-stat span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.admin-library-stats .admin-stat img {
    width: 13px;
    height: 13px;
    object-fit: contain;
}

/* Codex profile polish */
.profile-mini-stats div {
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 5px !important;
    min-height: 86px !important;
    border-radius: 14px !important;
    background: rgba(255, 247, 251, 0.78) !important;
}

.profile-mini-stats div > img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
}

.profile-mini-stats span {
    line-height: 1 !important;
}

.profile-creator-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.profile-upload-manager-btn,
.profile-card-builder-btn {
    min-height: 96px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 7px !important;
    padding: 12px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.74) !important;
    color: #4f3347 !important;
    box-shadow: none !important;
}

.profile-upload-manager-btn {
    border: 1px solid rgba(244, 143, 177, 0.52) !important;
}

.profile-card-builder-btn {
    border: 1px solid rgba(183, 134, 255, 0.52) !important;
}

.profile-upload-manager-btn b,
.profile-card-builder-btn b {
    display: block !important;
    color: #271821 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
}

.profile-upload-manager-btn small,
.profile-card-builder-btn small {
    display: block !important;
    margin-top: 4px !important;
    color: #8d6f83 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.profile-action-icon,
.profile-tab-icon {
    display: inline-block !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.profile-action-icon {
    width: 34px !important;
    height: 34px !important;
}

.profile-action-upload-icon {
    background-image: url('../assets/images/menu/cards-menu-v2.webp') !important;
}

.profile-action-create-icon {
    background-image: url('../assets/images/menu/icon-creators-search.webp') !important;
}

.profile-internal-menu {
    padding: 8px !important;
    gap: 8px !important;
    border-radius: 18px !important;
}

.profile-internal-menu-btn {
    gap: 8px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.profile-tab-icon {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.78;
}

.profile-tab-panel-icon {
    background-image: url('../assets/images/menu/profile-menu-v2.webp') !important;
}

.profile-tab-creators-icon {
    background-image: url('../assets/images/menu/icon-creators-search.webp') !important;
}

.profile-tab-rewards-icon {
    background-image: url('../assets/images/menu/arena-rule-star.webp') !important;
}

.profile-internal-menu-btn.is-active .profile-tab-icon {
    filter: brightness(0) invert(1);
    opacity: 1;
}

@media (max-width: 520px) {
    .profile-mini-stats div {
        min-height: 78px !important;
        padding: 8px 4px !important;
    }

    .profile-mini-stats div > img {
        width: 24px !important;
        height: 24px !important;
    }

    .profile-upload-manager-btn,
    .profile-card-builder-btn {
        min-height: 88px !important;
    }
}

/* Codex creator profile quick actions */
.profile-creator-quick-actions {
    width: min(100%, 720px) !important;
    grid-template-columns: 1fr !important;
    margin: -6px auto 12px !important;
    padding: 0 4px !important;
}

.profile-creator-quick-actions .profile-card-builder-btn {
    width: 100% !important;
}

.profile-creator-quick-actions .profile-upload-manager-btn,
.profile-creator-quick-actions .profile-card-builder-btn {
    min-height: 68px !important;
    grid-template-columns: auto minmax(0, auto) !important;
    justify-content: center !important;
    align-content: center !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 9px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
}

.profile-creator-quick-actions .profile-action-icon {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.9 !important;
}

.profile-creator-quick-actions .profile-upload-manager-btn b,
.profile-creator-quick-actions .profile-card-builder-btn b {
    font-size: 13px !important;
}

.profile-creator-quick-actions .profile-upload-manager-btn small,
.profile-creator-quick-actions .profile-card-builder-btn small {
    margin-top: 2px !important;
    font-size: 11px !important;
}

@media (max-width: 520px) {
    .profile-creator-quick-actions {
        margin: -4px auto 10px !important;
        gap: 8px !important;
    }

    .profile-creator-quick-actions .profile-upload-manager-btn,
    .profile-creator-quick-actions .profile-card-builder-btn {
        min-height: 58px !important;
        gap: 7px !important;
        padding: 8px 9px !important;
        border-radius: 14px !important;
    }

    .profile-creator-quick-actions .profile-action-icon {
        width: 23px !important;
        height: 23px !important;
    }
}

/* Codex softer profile tabs */
.profile-action-create-icon {
    background-image: url('../assets/images/menu/tienda-menu-v2.webp') !important;
}

.profile-internal-menu-btn {
    color: rgba(92, 64, 82, 0.68) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

.profile-internal-menu-btn:not(.is-active) {
    background: rgba(255, 255, 255, 0.54) !important;
}

.profile-internal-menu-btn.is-active {
    color: #fff !important;
}

.profile-internal-menu-btn .profile-tab-icon {
    opacity: 0.58 !important;
}

/* Codex profile tab centering and creator action text */
.profile-internal-menu-btn {
    justify-content: center !important;
    text-align: center !important;
}

.profile-internal-menu-btn .profile-tab-icon {
    flex: 0 0 18px !important;
    margin-left: -2px !important;
}

.profile-card-builder-btn b {
    color: #f05296 !important;
}

.profile-card-builder-btn small:empty {
    display: none !important;
}

/* Las acciones de carga solo pertenecen a creadoras y Princess. */
body:not(.is-creator-user) .profile-creator-quick-actions {
    display: none !important;
}

.profile-internal-menu-btn .profile-tab-icon {
    display: none !important;
}

/* Codex strict admin tab panels */
.admin-uploader .admin-tab-panel:not(.is-active) {
    display: none !important;
}

.admin-uploader .admin-reader-layout.admin-tab-panel:not(.is-active),
.admin-uploader .admin-pack-manager.admin-tab-panel:not(.is-active) {
    display: none !important;
}

.admin-uploader .admin-reader-layout.admin-tab-panel.is-active[data-admin-panel="cards"] {
    display: grid !important;
}

    .admin-uploader .admin-pack-manager.admin-tab-panel.is-active {
    display: block !important;
}

.admin-uploader[data-active-admin-tab="packs"] [data-admin-panel="cards"],
.admin-uploader[data-active-admin-tab="princess"] [data-admin-panel="cards"],
.admin-uploader[data-active-admin-tab="redemptions"] [data-admin-panel="cards"] {
    display: none !important;
}

.admin-uploader[data-active-admin-tab="packs"] .admin-upload-library,
.admin-uploader[data-active-admin-tab="princess"] .admin-upload-library,
.admin-uploader[data-active-admin-tab="redemptions"] .admin-upload-library {
    display: none !important;
}

.admin-uploader[data-active-admin-tab="cards"] [data-admin-panel="packs"],
.admin-uploader[data-active-admin-tab="cards"] [data-admin-panel="princess"],
.admin-uploader[data-active-admin-tab="cards"] [data-admin-panel="redemptions"] {
    display: none !important;
}

/* Descubrir: desplazamiento vertical por creadora, estilo feed. */
.discover-feed.discover-vertical-feed {
    height: min(820px, calc(100svh - 158px));
    min-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    gap: 18px;
    padding: 4px 4px 24px;
}

.discover-feed.discover-vertical-feed::-webkit-scrollbar {
    display: none;
}

.discover-feed.discover-vertical-feed > .discover-card {
    min-height: calc(100% - 8px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.discover-card.discover-presentation-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: clamp(14px, 2.4vw, 24px);
    touch-action: pan-y;
    transition: opacity 180ms ease, box-shadow 180ms ease;
}

.discover-presentation-layout {
    display: grid;
    grid-template-columns: minmax(190px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(16px, 3vw, 28px);
    align-items: stretch;
}

.discover-card.discover-presentation-card .discover-card-image-btn {
    min-height: 0;
    height: auto;
    aspect-ratio: 2 / 3;
    display: grid;
    place-items: center;
    border: 1px solid rgba(245, 151, 195, 0.52);
    border-radius: 16px;
    background: linear-gradient(150deg, rgba(255, 243, 249, 0.92), rgba(246, 239, 255, 0.76));
}

.discover-card.discover-presentation-card .discover-card-image-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 24px rgba(119, 84, 146, 0.14));
}

.discover-presentation-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.discover-presentation-head,
.discover-presentation-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discover-presentation-head {
    justify-content: space-between;
}

.discover-presentation-identity {
    min-width: 0;
}

.discover-presentation-identity img {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border: 3px solid rgba(255, 196, 93, 0.86);
    border-radius: 50%;
    object-fit: cover;
    background: #fff4da;
}

.discover-presentation-kicker {
    display: block;
    margin-bottom: 3px;
    color: #e65899;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.discover-presentation-head h2 {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(20px, 3vw, 28px);
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.discover-presentation-head .discover-like-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border: 1px solid rgba(244, 137, 186, 0.4);
    border-radius: 50%;
    background: rgba(236, 231, 235, 0.68);
    color: rgba(132, 119, 129, 0.58);
    font-size: 0;
    box-shadow: 0 12px 24px rgba(224, 100, 156, 0.14);
}

.discover-presentation-head .discover-like-btn::before {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    background: url('../assets/images/menu/profile-like-heart.png') center / contain no-repeat;
    filter: grayscale(1) saturate(0.2);
    opacity: 0.46;
}

.discover-presentation-head .discover-like-btn.is-active {
    background: rgba(255, 213, 232, 0.94);
    color: #e63886;
    border-color: rgba(244, 137, 186, 0.66);
}

.discover-presentation-head .discover-like-btn.is-active::before {
    filter: none;
    opacity: 1;
}

.discover-presentation-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.discover-presentation-stats div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid rgba(234, 216, 227, 0.86);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

.discover-presentation-stats strong,
.discover-presentation-stats small {
    display: block;
}

.discover-presentation-stats strong {
    color: var(--text-primary);
    font-size: 20px;
    line-height: 1.05;
}

.discover-presentation-stats small {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
}

.discover-presentation-copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.discover-presentation-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.discover-link-btn,
.discover-skip-btn {
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(244, 137, 186, 0.46);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    color: #bd4e83;
    font-weight: 900;
    cursor: pointer;
}

.discover-link-btn.is-primary {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, #ff63ad, #b786ff);
}

.discover-skip-btn {
    align-self: flex-start;
    min-height: 30px;
    padding: 5px 10px;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
}

.discover-packs-showcase {
    padding-top: 15px;
    border-top: 1px solid rgba(244, 172, 206, 0.5);
}

.discover-packs-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.discover-packs-heading strong {
    font-size: 16px;
}

.discover-packs-heading span {
    color: #e65899;
    font-size: 11px;
    font-weight: 900;
}

.discover-packs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.discover-view-all-packs-btn {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    padding: 7px 14px;
    border: 1px solid rgba(230, 88, 153, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #d95691;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

.discover-view-all-packs-btn:active { transform: scale(.97); }

.discover-pack-card {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid rgba(234, 216, 227, 0.9);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.discover-pack-card img {
    width: 100%;
    aspect-ratio: 0.72;
    object-fit: contain;
}

.discover-pack-card span {
    min-height: 0;
}

.discover-pack-card .discover-pack-set-badge {
    position: absolute;
    top: 5px;
    right: 4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 19px;
    padding: 3px 7px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe35a, #ffc425);
    color: #7b4a00;
    font-size: 8px;
    font-weight: 950;
    line-height: 1;
    transform: rotate(5deg);
}

.discover-pack-card small {
    position: absolute;
    left: 50%;
    bottom: 6px;
    transform: translateX(-50%);
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 221, 236, .9);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #b24d80;
    font-size: 11px;
    font-weight: 950;
}

.discover-packs-showcase,
.discover-packs-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.discover-packs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discover-pack-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.discover-pack-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 0.72;
}

.discover-packs-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
}

@media (max-width: 640px) {
    .discover-feed.discover-vertical-feed {
        height: calc(100svh - 144px);
        min-height: 500px;
    }

    .discover-presentation-layout {
        grid-template-columns: minmax(120px, 0.82fr) minmax(0, 1.18fr);
        gap: 12px;
    }

    .discover-presentation-info {
        gap: 10px;
    }

    .discover-presentation-identity img {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .discover-presentation-head h2 {
        font-size: 19px;
    }

    .discover-presentation-head .discover-like-btn {
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        font-size: 0;
    }

    .discover-presentation-stats strong {
        font-size: 16px;
    }

    .discover-presentation-stats div {
        padding: 8px;
    }

    .discover-presentation-copy {
        font-size: 11px;
    }

    .discover-link-btn {
        min-height: 34px;
        padding: 6px 8px;
        font-size: 11px;
    }

    .discover-pack-card {
        padding: 6px;
    }

    .discover-pack-card span,
    .discover-pack-card small {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .discover-presentation-layout {
        grid-template-columns: 1fr;
    }

    .discover-card.discover-presentation-card .discover-card-image-btn {
        max-height: 42vh;
    }
}

/* Mantener sobre e informacion lado a lado tambien en telefonos pequenos. */
.discover-card.discover-presentation-card .discover-presentation-layout {
    grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
}

.discover-card.discover-presentation-card .discover-card-image-btn {
    width: 100%;
    max-height: none;
}

.discover-card.discover-presentation-card .discover-card-image-btn img {
    object-fit: contain;
}

.discover-presentation-stats-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discover-presentation-stats-three div {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 8px 4px;
    text-align: center;
}

.discover-presentation-stats-three img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    opacity: 0.78;
}

.discover-presentation-stats-three strong {
    font-size: clamp(13px, 2.4vw, 18px);
}

.discover-presentation-stats-three small {
    margin-top: 0;
    font-size: 9px;
}

.discover-profile-link {
    width: 100%;
    text-align: center;
}

@media (max-width: 420px) {
    .discover-card.discover-presentation-card .discover-presentation-layout {
        grid-template-columns: minmax(104px, 0.72fr) minmax(0, 1.28fr);
    }

    .discover-card.discover-presentation-card .discover-card-image-btn {
        aspect-ratio: 0.72;
    }

    .discover-presentation-info {
        gap: 8px;
    }

    .discover-presentation-identity {
        gap: 7px;
    }

    .discover-presentation-identity img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .discover-presentation-head h2 {
        font-size: 17px;
    }
}

/* Evita que las fichas se monten: cada una conserva su altura real dentro del scroll. */
.discover-feed.discover-vertical-feed {
    align-content: start;
}

.discover-feed.discover-vertical-feed > .discover-card.discover-presentation-card {
    min-height: 0;
    height: auto;
    align-self: start;
}

.discover-presentation-name-only {
    align-items: flex-start;
}

.discover-presentation-name-only h2 {
    margin: 0 0 7px;
    font-size: clamp(19px, 3vw, 27px);
}

.discover-presentation-name-only .discover-presentation-kicker {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    margin: 0;
    border: 1px solid rgba(244, 172, 206, 0.56);
    border-radius: 999px;
    background: rgba(255, 232, 244, 0.48);
    color: rgba(230, 88, 153, 0.72);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* Cada creadora queda contenida en su propio bloque antes de pasar a la siguiente. */
.discover-feed.discover-vertical-feed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
}

.discover-feed.discover-vertical-feed > .discover-card.discover-presentation-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.discover-model-block {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: clamp(14px, 2.4vw, 24px);
    border: 1px solid rgba(244, 172, 206, 0.56);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 36px rgba(159, 90, 126, 0.12);
    box-sizing: border-box;
}

.discover-feed.discover-vertical-feed > .discover-card:nth-child(even) .discover-model-block {
    border-color: rgba(244, 172, 206, 0.72);
    background: rgba(255, 239, 247, 0.96);
}

.discover-model-block > .discover-presentation-layout,
.discover-model-block > .discover-packs-showcase {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.discover-presentation-description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.discover-presentation-links-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.discover-presentation-links-three .discover-link-btn {
    min-width: 0;
    min-height: 32px;
    padding: 6px 5px;
    border-color: rgba(230, 88, 153, 0.28);
    background: rgba(255, 255, 255, 0.62);
    color: rgba(164, 91, 127, 0.82);
    box-shadow: none;
    font-size: 9px;
    font-weight: 700;
}

.discover-presentation-links-three .discover-link-btn.is-primary {
    background: rgba(246, 112, 176, 0.78);
    border-color: rgba(246, 112, 176, 0.34);
    color: #fff;
}

.discover-profile-icon-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 6px !important;
}

.discover-profile-icon-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    opacity: 0.7;
}

.profile-description-editor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.profile-description-editor textarea {
    min-height: 66px;
    resize: vertical;
}

.profile-description-editor label {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
}

.creator-profile-description {
    margin: 8px 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.discover-messages-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(82, 50, 75, 0.28);
}

.discover-messages-dialog {
    position: relative;
    width: min(100%, 460px);
    display: grid;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(244, 172, 206, 0.72);
    border-radius: 20px;
    background: rgba(255, 250, 253, 0.98);
    box-shadow: 0 24px 70px rgba(92, 48, 78, 0.24);
}

.discover-messages-dialog h2,
.discover-messages-dialog p {
    margin: 0;
}

.discover-messages-dialog h2 {
    color: var(--text-primary);
}

.discover-messages-subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
}

.discover-messages-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 232, 244, 0.9);
    color: #c5427d;
    font-size: 20px;
    font-weight: 900;
}

.discover-messages-list {
    max-height: 280px;
    min-height: 110px;
    display: grid;
    align-content: start;
    gap: 8px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(244, 172, 206, 0.42);
    border-radius: 14px;
    background: rgba(255, 242, 248, 0.7);
}

.discover-message-bubble {
    justify-self: start;
    max-width: 82%;
    padding: 8px 10px;
    border-radius: 12px 12px 12px 4px;
    background: #fff;
    color: var(--text-primary);
    font-size: 13px;
}

.discover-message-bubble.is-own {
    justify-self: end;
    border-radius: 12px 12px 4px 12px;
    background: #ffd9eb;
}

.discover-message-bubble small {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 9px;
}

.discover-messages-form {
    display: grid;
    gap: 8px;
}

.discover-messages-form textarea {
    min-height: 76px;
    resize: vertical;
}

.discover-messages-form > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.discover-messages-form span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b24d80;
    font-size: 11px;
    font-weight: 900;
}

@media (max-width: 620px) {
    .profile-description-editor {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
}

/* La ficha ocupa todo el ancho del area de Descubrir. */
#discover-section .discover-shell {
    width: 100%;
    max-width: none;
    padding-top: max(54px, calc(env(safe-area-inset-top, 0px) + 34px));
    padding-left: 0;
    padding-right: 0;
    gap: 8px;
}

#discover-section .discover-header {
    margin-bottom: 0;
    padding: 0 14px;
}

#discover-section .discover-header h1 {
    margin: 8px 0 6px;
    color: var(--text-primary);
    font-size: clamp(30px, 8vw, 48px);
    font-weight: 950;
    line-height: 1.04;
}

#discover-section .discover-header h1 span {
    color: #e65899;
}

#discover-section .discover-header p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
}

#discover-section .discover-feed.discover-vertical-feed {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    height: calc(100dvh - 112px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
    gap: 0;
}

#discover-section .discover-feed.discover-vertical-feed > .discover-card,
#discover-section .discover-model-block {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

#discover-section .discover-feed.discover-vertical-feed > .discover-card {
    width: calc(100% - 20px);
    min-height: 90%;
    height: 90%;
    margin: 5% auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}

#discover-section .discover-more-card {
    width: calc(100% - 20px);
    min-height: 90%;
    height: 90%;
    margin: 5% auto;
    display: grid;
    place-items: center;
    scroll-snap-align: start;
    border: 1px solid rgba(244, 172, 206, 0.52);
    border-radius: 20px;
    background: rgba(255, 249, 253, 0.78);
}

#discover-section .discover-more-card-inner {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #9b6a87;
}

#discover-section .discover-more-card-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(246, 112, 176, 0.14);
    color: #e65899;
    font-size: 26px;
}

#discover-section .discover-next-creator-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 15px;
    border: 1px solid rgba(230, 88, 153, 0.28);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(246, 112, 176, 0.9), rgba(198, 129, 239, 0.9));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

#discover-section .discover-next-creator-card-btn img {
    width: 17px;
    height: 17px;
    filter: brightness(0) invert(1);
}

#discover-section .discover-feed.discover-vertical-feed > .discover-card .discover-model-block {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
}

#discover-section .discover-next-creator-btn {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    min-height: 34px;
    margin: 14px auto 18px;
    padding: 6px 15px;
    border: 1px solid rgba(230, 88, 153, 0.24);
    border-radius: 999px;
    background: rgba(255, 232, 244, 0.62);
    color: #d95691;
    font-size: 11px;
    font-weight: 800;
    transform: none;
    box-shadow: 0 8px 18px rgba(222, 91, 157, 0.18);
}

#discover-section {
    position: relative;
    min-height: 100vh;
}

#discover-section .discover-next-creator-btn[hidden] {
    display: none;
}

#discover-section .discover-next-creator-btn img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    filter: sepia(1) saturate(5) hue-rotate(285deg) brightness(1.1);
    opacity: 0.82;
}

#packs-section.is-creator-pack-view .packs-creator-profile {
    grid-template-columns: 54px minmax(0, 1fr) 28px;
    padding-right: 12px;
}

#packs-section.is-creator-pack-view .packs-creator-like-btn {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
}

@media (max-width: 560px) {
    #packs-section.is-creator-pack-view .packs-creator-profile {
        grid-template-columns: 46px minmax(0, 1fr) 28px;
    }
}

/* Marco de telefono para la vista de escritorio. Mantiene todo el contenido
   dentro de la misma anchura aunque una seccion tenga estilos mas antiguos. */
@media (min-width: 700px) {
    #app {
        width: min(480px, calc(100vw - 32px)) !important;
        max-width: 480px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box;
        border-radius: 34px;
    }

    #app > .section,
    #app > .section-full,
    #app > #login-section,
    #app > #login-section .login-container,
    body.is-app-view:not(.is-login-view) #app > .section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #app .mobile-bottom-nav,
    body.is-app-view:not(.is-login-view) .mobile-bottom-nav {
        width: min(480px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }
}
/* Mini sets exclusivos */
.packs-creator-mini-sets,
.admin-mini-set-panel,
.admin-mini-set-library,
.mini-set-detail,
.mini-set-recommended-packs {
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(248, 114, 171, .28);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(136, 72, 115, .08);
}

.packs-creator-mini-sets {
    width: min(100%, 760px);
    margin: 16px auto;
    padding: 18px;
}

.packs-creator-mini-sets[hidden],
.admin-mini-set-panel[hidden],
.mini-set-recommended-packs[hidden] {
    display: none !important;
}

.mini-set-teaser-head,
.admin-mini-set-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.mini-set-teaser-head h2,
.admin-mini-set-head h2 {
    margin: 2px 0 0;
    color: #65445c;
}

.mini-set-teaser-head > button,
.admin-mini-set-close {
    border: 0;
    background: #fff0f7;
    color: #e84d91;
    border-radius: 999px;
    min-height: 38px;
    padding: 0 16px;
    font-weight: 800;
}

.admin-mini-set-close {
    width: 38px;
    padding: 0;
    font-size: 24px;
}

.mini-set-teaser-row,
.mini-set-recommended-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 2px 8px;
}

.mini-set-teaser-row::-webkit-scrollbar,
.mini-set-recommended-row::-webkit-scrollbar {
    display: none;
}

.mini-set-card {
    min-width: 180px;
    max-width: 220px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f6c9dc;
    border-radius: 21px;
    box-shadow: 0 9px 22px rgba(145, 75, 116, .09);
    scroll-snap-align: start;
}

.mini-set-card.is-compact {
    min-width: 150px;
    max-width: 165px;
}

.mini-set-cover-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: #ffeaf3;
    overflow: hidden;
}

.mini-set-cover-button img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 19px 19px 32px 32px;
}

.mini-set-photo-count {
    position: absolute;
    right: 9px;
    bottom: 9px;
    padding: 5px 9px;
    color: #fff;
    background: rgba(78, 39, 64, .76);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    backdrop-filter: blur(6px);
}

.mini-set-card-copy {
    display: grid;
    gap: 5px;
    padding: 12px;
    color: #67485d;
}

.mini-set-card-copy strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-set-card-copy small {
    color: #d24d88;
    font-weight: 750;
}

.mini-set-card-copy > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mini-set-price {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #7d596f;
    font-weight: 900;
}

.mini-set-owned-label {
    color: #cf3e80;
    font-size: 10px;
    font-weight: 850;
}

#mini-sets-section {
    padding: max(18px, env(safe-area-inset-top)) 16px calc(105px + env(safe-area-inset-bottom));
}

.mini-set-page {
    width: min(100%, 850px);
    margin: 0 auto;
}

.mini-set-page-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0 18px;
}

.mini-set-page-header h1 {
    margin: 2px 0 0;
    color: #65445c;
    font-size: clamp(24px, 6vw, 38px);
}

.mini-set-page-grid {
    display: grid;
    gap: 18px;
}

.mini-set-detail {
    display: grid;
    grid-template-columns: minmax(190px, .72fr) 1fr;
    gap: 20px;
    padding: 18px;
    overflow: hidden;
}

.mini-set-detail.is-focused {
    border-color: #ef72aa;
    box-shadow: 0 0 0 3px rgba(239, 114, 170, .14), 0 18px 45px rgba(126, 59, 102, .12);
}

.mini-set-detail-cover {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 22px;
    background: #ffeaf3;
}

.mini-set-detail-copy {
    align-self: center;
    color: #6e4e63;
}

.mini-set-detail-copy h2 {
    margin: 5px 0 10px;
    font-size: clamp(24px, 5vw, 34px);
}

.mini-set-detail-copy p {
    line-height: 1.5;
}

.mini-set-detail-copy > strong {
    display: block;
    margin: 13px 0;
    color: #df4d8c;
}

.mini-set-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mini-set-owned-content {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
    padding-top: 4px;
}

.mini-set-owned-content button {
    padding: 0;
    border: 1px solid #f5bdd5;
    border-radius: 18px;
    overflow: hidden;
    background: #ffeaf3;
}

.mini-set-owned-content img,
.mini-set-owned-content .collection-card-image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 17px;
}

.mini-set-recommended-packs {
    margin-top: 22px;
    padding: 18px;
}

.mini-set-pack-card {
    flex: 0 0 150px;
    display: grid;
    gap: 7px;
    padding: 12px;
    border: 1px solid #f5c5d9;
    border-radius: 20px;
    background: #fff9fc;
    color: #68475d;
}

.mini-set-pack-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
}

.mini-set-loading {
    padding: 36px;
    text-align: center;
    color: #d44b89;
    font-weight: 800;
}

.admin-mini-set-panel,
.admin-mini-set-library {
    margin: 16px 0;
    padding: 18px;
}

.admin-mini-set-library {
    padding: 0;
    border-radius: 17px;
    box-shadow: none;
}

.admin-mini-set-library-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 14px;
    color: #76566c;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.admin-mini-set-library-summary::-webkit-details-marker {
    display: none;
}

.admin-mini-set-library-summary > span:first-child {
    display: grid;
    gap: 2px;
}

.admin-mini-set-library-summary strong {
    font-size: 13px;
    line-height: 1.2;
}

.admin-mini-set-library-summary small {
    color: #a17d91;
    font-size: 10px;
    font-weight: 700;
}

.admin-mini-set-summary-arrow {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 50%;
    background: #fff0f7;
    color: #e34f91;
    font-size: 18px;
    font-weight: 900;
    transition: transform .2s ease;
}

.admin-mini-set-library[open] .admin-mini-set-summary-arrow {
    transform: rotate(180deg);
}

.admin-mini-set-library-body {
    padding: 0 14px 14px;
    border-top: 1px solid #f8dce8;
}

.admin-mini-set-library-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.admin-mini-set-library-tools .admin-mini-set-limit {
    margin: 0;
    font-size: 10px;
}

.admin-mini-set-panel > p,
.admin-mini-set-limit {
    color: #806276;
    line-height: 1.45;
}

.admin-mini-set-previews {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.admin-mini-set-preview {
    position: relative;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: 17px;
    background: #fff2f8;
}

.admin-mini-set-preview.is-cover {
    border-color: #ec5b9b;
}

.admin-mini-set-preview input {
    position: absolute;
    opacity: 0;
}

.admin-mini-set-preview img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 13px;
}

.admin-mini-set-preview span {
    display: block;
    padding: 5px 2px 2px;
    text-align: center;
    color: #9b6682;
    font-size: 10px;
    font-weight: 850;
}

.admin-mini-set-pack-link {
    grid-column: 1 / -1;
}

.admin-mini-set-list {
    display: grid;
    gap: 10px;
}

.admin-mini-set-item {
    display: grid;
    grid-template-columns: 68px 1fr auto;
    align-items: center;
    gap: 11px;
    padding: 10px;
    border: 1px solid #f4d0df;
    border-radius: 17px;
    background: #fffafd;
}

.admin-mini-set-item > img {
    width: 68px;
    height: 82px;
    object-fit: cover;
    border-radius: 14px;
}

.admin-mini-set-item > div:nth-child(2) {
    display: grid;
    gap: 3px;
}

.admin-mini-set-item small,
.admin-mini-set-item span {
    color: #9b7288;
    font-size: 11px;
}

.admin-mini-set-actions {
    display: grid;
    gap: 6px;
}

.admin-mini-set-actions button {
    min-height: 32px;
    border: 1px solid #ed8bb5;
    border-radius: 999px;
    background: #fff;
    color: #d54f8a;
    font-size: 10px;
    font-weight: 850;
}

@media (max-width: 620px) {
    .mini-set-detail {
        grid-template-columns: 118px 1fr;
        gap: 13px;
        padding: 13px;
    }

    .mini-set-detail-copy p {
        display: none;
    }

    .mini-set-detail-copy h2 {
        font-size: 20px;
    }

    .mini-set-detail-actions {
        display: grid;
    }

    .mini-set-detail-actions .btn {
        min-height: 40px;
        font-size: 11px;
    }

    .admin-mini-set-item {
        grid-template-columns: 56px 1fr;
    }

    .admin-mini-set-item > img {
        width: 56px;
        height: 70px;
    }

    .admin-mini-set-actions {
        grid-column: 1 / -1;
        grid-template-columns: 1fr 1fr;
    }
}
.admin-pack-ai-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.admin-pack-ai-tools p {
    margin: 0;
    color: #8c667b;
    font-size: 12px;
}

.admin-pack-ai-request-list {
    display: grid;
    gap: 14px;
}

.admin-pack-ai-request {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(242, 126, 177, .32);
    border-radius: 18px;
    background: rgba(255,255,255,.8);
}

.admin-pack-ai-request-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.admin-pack-ai-request-head strong { color: #684457; }
.admin-pack-ai-request-head small { color: #9c758a; }
.admin-pack-ai-color {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 3px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(105,65,87,.16);
}

.admin-pack-ai-prompt {
    margin: 0;
    padding: 10px 12px;
    border-radius: 13px;
    color: #745369;
    background: #fff4f9;
    white-space: pre-wrap;
}

.admin-pack-ai-references {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.admin-pack-ai-references img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 13px;
    background: #f5edf2;
}

.admin-pack-ai-result {
    display: grid;
    gap: 8px;
    padding-top: 4px;
}

.admin-pack-ai-result input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed #ee9fc3;
    border-radius: 13px;
    background: #fff;
}

@media (max-width: 540px) {
    .admin-pack-ai-tools { align-items: flex-start; flex-direction: column; }
}