/* Dashboard Base Styles */
body:has(.pro-dashboard),
body.bg-black:has(.pro-dashboard) {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    height: auto !important;
}

html:has(.pro-dashboard) {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

.pro-dashboard {
    min-height: 100vh;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    overflow-y: visible !important;
    height: auto !important;
}

/* Header */
.dash-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.dash-header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Combined Profile Avatar */
.dash-profile-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    display: block;
    flex-shrink: 0;
}

.dash-profile-img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e91e8c;
}

.dash-profile-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #fff;
    background: #fff;
}

.dash-tier-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 0.6rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.dash-tier-badge i {
    font-size: 0.55rem;
    -webkit-text-stroke: 0.5px currentColor;
}

.dash-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dash-page-title {
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

/* Mobile balance - hidden by default, shown on mobile */
.dash-mobile-balance {
    display: none;
    gap: 0.75rem;
}

.dash-mobile-balance-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #666;
}

.dash-mobile-balance-item i {
    color: #e91e8c;
    font-size: 0.7rem;
}

.dash-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dash-nav-item {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}

.dash-nav-item:hover {
    background: #e91e8c;
    border-color: #e91e8c;
    color: #fff;
}

.dash-nav-item.active {
    background: #e91e8c;
    border-color: #e91e8c;
    color: #fff;
}

.dash-nav-item i {
    font-size: 1.1rem;
}

.dash-upgrade-btn {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-color: transparent;
    color: #fff;
}

.dash-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-balance {
    display: flex;
    gap: 1rem;
}

.dash-balance-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #f8f8f8;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
}

.dash-balance-item i {
    color: #e91e8c;
}

.dash-balance-item.dash-balance-open-convert-modal,
.dash-mobile-balance-item.dash-balance-open-convert-modal {
    cursor: pointer;
}

/* Lens Shop modal (9:16) */
.dash-convert-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    box-sizing: border-box;
}
.dash-convert-modal-overlay.active {
    display: flex;
}
.dash-convert-modal-card {
    position: relative;
    width: 100%;
    max-width: min(90vw, 360px);
    max-height: calc(100vh - 2rem);
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    overflow-y: auto;
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    border: 3px solid #e91e8c;
}
.dash-convert-modal-card::-webkit-scrollbar { width: 4px; }
.dash-convert-modal-card::-webkit-scrollbar-thumb { background: #e91e8c; border-radius: 4px; }
.dash-convert-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    font-size: 1rem;
    z-index: 2;
    transition: background 0.2s;
}
.dash-convert-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.dash-convert-modal-hero {
    width: 100%;
    aspect-ratio: 2.5 / 1;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.dash-convert-modal-body {
    padding: 1.15rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.dash-convert-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.35rem 0;
    padding: 0;
}
.dash-convert-modal-description {
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 0.85rem 0;
}
.dash-convert-modal-description strong {
    color: #e91e8c;
    font-weight: 700;
}
.dash-convert-modal-size-bar {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.85rem;
}
.dash-convert-modal-size-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dash-convert-modal-size-row + .dash-convert-modal-size-row {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.dash-convert-modal-size-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.dash-convert-modal-size-label i {
    font-size: 0.85rem;
}
.dash-convert-modal-size-value {
    font-size: 0.88rem;
    font-weight: 700;
    color: #fff;
}
.dash-convert-modal-size-row--after .dash-convert-modal-size-value {
    color: #fef08a;
}
.dash-convert-modal-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    margin-bottom: 0.75rem;
}
.dash-convert-modal-product-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.dash-convert-modal-product-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.dash-convert-modal-product-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dash-convert-modal-product-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1a1a2e;
}
.dash-convert-modal-product-meta {
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 500;
}
.dash-convert-modal-balance-controls {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.dash-convert-modal-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #1a1a2e;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s;
}
.dash-convert-modal-btn:hover:not(:disabled) {
    background: #fdf2f8;
    border-color: #e91e8c;
    color: #e91e8c;
    transform: scale(1.08);
}
.dash-convert-modal-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.dash-convert-modal-balance-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a2e;
    min-width: 2.5rem;
    text-align: center;
}
.dash-convert-modal-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 0.75rem;
    background: #fdf2f8;
    border-radius: 10px;
    margin-bottom: 0.85rem;
    border: 1.5px solid #fbcfe8;
}
.dash-convert-modal-total-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
}
.dash-convert-modal-total-value {
    font-size: 1rem;
    font-weight: 700;
    color: #e91e8c;
}
.dash-convert-modal-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.dash-convert-modal-submit {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #e91e8c, #c026d3);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(233, 30, 140, 0.3);
}
.dash-convert-modal-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(233, 30, 140, 0.4);
}
.dash-convert-modal-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.dash-convert-modal-submit--stripe {
    background: linear-gradient(135deg, #635bff, #7a73ff);
    box-shadow: 0 4px 14px rgba(99, 91, 255, 0.3);
}
.dash-convert-modal-submit--stripe:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(99, 91, 255, 0.4);
}
.dash-convert-modal-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 0.55rem;
    gap: 3px;
}
.dash-convert-toggle-btn {
    flex: 1;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.dash-convert-toggle-btn.active {
    background: #fff;
    color: #1a1a2e;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.dash-convert-toggle-btn:hover:not(.active) {
    color: #1a1a2e;
}
@media (max-width: 420px) {
    .dash-convert-modal-card { max-width: calc(100vw - 2rem); }
}

.dash-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e91e8c;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    text-decoration: none;
    color: #666;
}

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

.dash-logout-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    color: #666;
    text-decoration: none;
    transition: all 0.2s;
}

.dash-logout-btn:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

/* Language Dropdown */
.dash-lang-dropdown {
    position: relative;
}

.dash-lang-btn {
    cursor: pointer;
}

.dash-lang-btn .fi {
    font-size: 1.2rem;
}

.dash-lang-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    min-width: 150px;
    overflow: hidden;
}

.dash-lang-menu.show {
    display: block;
}

.dash-lang-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: #1a1a2e;
    transition: background 0.2s;
}

.dash-lang-option:hover {
    background: #f8f8f8;
}

.dash-lang-option.active {
    background: rgba(233, 30, 140, 0.1);
    color: #e91e8c;
}

.dash-lang-option .fi {
    font-size: 1.1rem;
}

/* Header Navigation (Desktop - in center of header) */
.dash-header-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    justify-content: center;
    padding: 0 1rem;
}

.dash-nav-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    background: transparent;
}

.dash-nav-link:hover {
    background: #f1f5f9;
    color: #1a1a2e;
}

.dash-nav-link.active {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.3);
}

.dash-nav-link i {
    font-size: 0.9rem;
}

.dash-nav-link.active i {
    color: #fff;
}

/* Nav Badge */
.dash-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}

.dash-nav-link.active .dash-nav-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Hide nav badges on desktop */
@media (min-width: 992px) {
    .dash-nav-link .dash-nav-badge {
        display: none;
    }
}

/* Upgrade nav link - subtle gold highlight */
.dash-nav-upgrade {
    background: linear-gradient(135deg, #fffbf0 0%, #fff5e6 100%);
    border: 1px solid rgba(212, 169, 87, 0.3);
    color: #b8860b;
}

.dash-nav-upgrade i {
    color: #d4a957;
}

.dash-nav-upgrade:hover {
    background: linear-gradient(135deg, #fff8e8 0%, #fff0d9 100%);
    border-color: rgba(212, 169, 87, 0.5);
    color: #996515;
}

.dash-nav-upgrade.active {
    background: linear-gradient(135deg, #d4a957, #f0c674);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 2px 8px rgba(212, 169, 87, 0.4);
}

.dash-nav-upgrade.active i {
    color: #fff;
}

/* Mobile menu badge */
.dash-mobile-menu-link .dash-nav-badge {
    margin-left: auto;
}

.dash-mobile-menu-link.active .dash-nav-badge {
    background: rgba(255, 255, 255, 0.25);
}

/* Mobile Menu Button - hidden on desktop */
.dash-mobile-menu-btn {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    background: #f8f8f8;
    color: #666;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.dash-mobile-menu-btn:hover {
    background: #e91e8c;
    border-color: #e91e8c;
    color: #fff;
}

.dash-mobile-menu-btn i {
    font-size: 1.25rem;
}

/* Mobile Dropdown Menu - hidden by default */
.dash-mobile-menu {
    display: none;
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 998;
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.25rem;
    max-height: calc(100vh - 61px);
    overflow-y: auto;
}

.dash-mobile-menu.show {
    display: flex;
}

.dash-mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a2e;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dash-mobile-menu-link:hover {
    background: #f1f5f9;
}

.dash-mobile-menu-link.active {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.dash-mobile-menu-link i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.dash-mobile-menu-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 0.5rem 0;
}

.dash-mobile-menu-link.logout-link {
    color: #e74c3c;
}

.dash-mobile-menu-link.logout-link:hover {
    background: #fee2e2;
}

/* Mobile upgrade link - gold highlight */
.dash-mobile-upgrade {
    background: linear-gradient(135deg, #fffbf0 0%, #fff5e6 100%);
    border: 1px solid rgba(212, 169, 87, 0.3);
    color: #b8860b;
}

.dash-mobile-upgrade i {
    color: #d4a957;
}

.dash-mobile-upgrade:hover {
    background: linear-gradient(135deg, #fff8e8 0%, #fff0d9 100%);
    border-color: rgba(212, 169, 87, 0.5);
}

.dash-mobile-upgrade.active {
    background: linear-gradient(135deg, #d4a957, #f0c674);
    border-color: transparent;
    color: #fff;
}

.dash-mobile-upgrade.active i {
    color: #fff;
}

/* Main Content */
.dash-main {
    padding: 2rem;
    padding-top: calc(80px + 2rem);
    max-width: 1200px;
    margin: 0 auto;
}

/* Back Link */
.dash-back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(219, 39, 119, 0.1) 100%);
    border: 1px solid rgba(236, 72, 153, 0.3);
    border-radius: 25px;
    color: #ec4899;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
}

.dash-back-link:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(219, 39, 119, 0.2) 100%);
    border-color: rgba(236, 72, 153, 0.5);
    transform: translateX(-3px);
    color: #db2777;
}

.dash-back-link i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.dash-back-link:hover i {
    transform: translateX(-2px);
}

/* Stats */
.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.dash-stat-card {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.dash-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dash-stat-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.dash-stat-icon.green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.dash-stat-icon.purple {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.dash-stat-icon.orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.dash-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.15rem;
    line-height: 1.2;
}

.dash-stat-secondary {
    font-size: 0.85rem;
    font-weight: 500;
    color: #999;
}

.dash-stat-label {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.2;
    word-break: break-word;
}

/* Make Active/Paused label smaller on desktop */
.dash-stat-card:nth-child(3) .dash-stat-label {
    font-size: 0.65rem;
}

/* Section */
.dash-section {
    margin-bottom: 2rem;
}

.dash-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 1rem;
}

.dash-section-title i {
    color: #e91e8c;
}

/* Dashboard home: two-column layout (map left, inbox right) */
.dash-home-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 2rem;
}
.dash-home-layout--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.dash-home-layout--single .dash-home-right {
    display: none;
}
@media (max-width: 900px) {
    html:has(.pro-dashboard),
    body:has(.pro-dashboard) {
        overflow: hidden !important;
        height: 100dvh !important;
    }
    .dash-header {
        display: none !important;
    }
    .dash-main {
        padding: 0 !important;
        margin: 0 !important;
    }
    .dash-home-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 0;
    }
    .dash-map-flip-container {
        width: 100vw !important;
        margin-left: calc(-50vw + 50%);
        margin-bottom: 0;
    }
    .dash-home-map-wrap {
        margin-top: 0;
        margin-bottom: 0;
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}
.dash-home-map-section {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 2px solid #e5e7eb;
    min-width: 0;
}
.dash-home-map-header {
    margin-bottom: 10px;
}
.dash-home-map-instruction {
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}
.dash-home-map-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: "Fredoka", sans-serif;
}
.dash-home-map-title i {
    color: #e91e8c;
}
.oq-header-counts {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 0.5rem;
    font-weight: 500;
}
.oq-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    vertical-align: middle;
}
.oq-count-badge i { font-size: 0.65rem; color: inherit; }
.oq-count-badge--total {
    background: rgba(31,41,55,0.08);
    color: #475569;
}
.oq-count-badge--live {
    background: rgba(22,163,74,0.12);
    color: #15803d;
}
.oq-count-badge--draft {
    background: rgba(99,102,241,0.12);
    color: #4f46e5;
}

/* Onboarding Quests Tabs */
.oq-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e5e7eb;
    margin: 0 1rem;
}
.oq-tab {
    position: relative;
    padding: 0.6rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.18s;
    white-space: nowrap;
}
.oq-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: transparent;
    border-radius: 2px 2px 0 0;
    transition: background 0.18s;
}
.oq-tab:hover { color: #334155; }
.oq-tab--active { color: #4f46e5; }
.oq-tab--active::after { background: #4f46e5; }
.oq-tab .oq-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3em;
    height: 1.3em;
    padding: 0 0.35em;
    margin-left: 0.35em;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(31,41,55,0.08);
    color: inherit;
    line-height: 1;
}
.oq-tab--active .oq-tab-count {
    background: rgba(79,70,229,0.12);
}

.oq-tab-panel { display: none; margin-top: 1rem; }
.oq-tab-panel--active { display: block; }
.am-tab-panel { display: none; margin-top: 1rem; }
.am-tab-panel--active { display: block; }

.oq-tab-panel .leads-list { max-height: 600px; overflow-y: auto; }

.dash-home-map-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.75rem;
    border: 2.5px solid #e91e8c;
    box-sizing: border-box;
}

.dash-map-basemap-toggle {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.dash-map-basemap-btn {
    padding: 0.5rem 0.65rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    line-height: 1;
}

.dash-map-basemap-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #1e293b;
}

.dash-map-basemap-btn.active {
    background: #e91e8c;
    color: #fff;
}

.dash-map-basemap-btn.active:hover {
    background: #c41a6e;
    color: #fff;
}
.dash-home-map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: #0a0a1a;
    z-index: 1;
}
.dash-home-map-wrap .dash-home-map-search-back-wrapper {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    pointer-events: none;
}
.dash-home-map-wrap .dash-home-map-search-back-wrapper > * {
    pointer-events: auto;
}
.dash-home-map-wrap .dash-home-map-search-back-button-slot {
    position: relative;
    flex-shrink: 0;
    min-width: 120px;
    z-index: 2;
}
.dash-home-map-wrap .dash-home-map-zones-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.35s ease;
}
.dash-home-map-wrap .dash-home-map-zones-overlay .dash-zones-select-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.dash-home-map-wrap .dash-home-map-zones-overlay .dash-zones-select-wrap {
    margin-top: 0;
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
}
.dash-zones-add-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 10px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    color: #fff;
    background: #e91e8c;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(233, 30, 140, 0.2);
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
}
.dash-zones-add-btn:hover:not(:disabled) {
    opacity: 0.95;
    transform: translateY(-1px);
}
.dash-zones-add-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.dash-home-map-wrap .dash-home-map-zones-overlay .dash-zones-select-trigger {
    padding: 0.5rem 14px;
    border-radius: 12px;
    align-items: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
/* Zone cards not shown in overlay – overlay shows only the select */
.dash-home-map-wrap .dash-home-map-zones-overlay .dash-aura-areas-list--hidden-in-overlay {
    display: none !important;
}
.dash-home-map-wrap .dash-home-map-search-back-button-slot {
    display: flex;
    align-items: center;
}
.dash-home-map-wrap .dash-home-map-search-back-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transition: opacity 0.35s ease;
}
.dash-home-map-wrap .dash-home-map-search-back-layer.dash-home-map-layer-hidden {
    opacity: 0;
    pointer-events: none;
}
.dash-home-map-wrap .eyelands-search-wrap.dash-home-map-search-overlay {
    width: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0;
    overflow: hidden;
    border: 2px solid #e5e7eb;
}
.dash-home-map-wrap .dash-home-map-search-btn-overlay {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.dash-home-map-wrap .dash-home-map-search-back-button-slot .dash-home-map-search-btn-overlay {
    position: relative;
    top: auto;
    left: auto;
}
.dash-home-map-wrap .dash-home-map-search-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 14px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
    color: #fff;
    background: #e91e8c;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(233, 30, 140, 0.2);
    cursor: pointer;
}
.dash-home-map-wrap .dash-home-map-search-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.dash-home-map-wrap .dash-home-map-search-btn:focus {
    outline: none;
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.25);
}

/* Search modal (map) */
.dash-home-map-search-modal * { box-sizing: border-box; }
.dash-home-map-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.dash-home-map-search-modal[aria-hidden="false"] {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}
.dash-home-map-search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 26, 0.75);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.dash-home-map-search-modal-content {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 85vh;
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(233, 30, 140, 0.1);
    border: 1.5px solid rgba(233, 30, 140, 0.3);
    padding: 2rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
.dash-home-map-search-modal-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #a855f7);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff;
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.35);
    margin-bottom: 0.25rem;
}
.dash-home-map-search-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}
.dash-home-map-search-modal-close:hover {
    color: #fff;
    background: rgba(233, 30, 140, 0.4);
    border-color: #e91e8c;
}
.dash-home-map-search-modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: "Fredoka", sans-serif;
    color: #fff;
}
.dash-home-map-search-modal-subtitle {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    font-family: "Fredoka", sans-serif;
    line-height: 1.4;
}
.dash-home-map-search-modal-input-wrap {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.dash-home-map-search-modal-input-wrap > i {
    position: absolute;
    left: 14px;
    color: rgba(255,255,255,0.35);
    font-size: 0.9rem;
    pointer-events: none;
}
.dash-home-map-search-modal-input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    font-size: 0.95rem;
    border: 1.5px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    font-family: "Fredoka", sans-serif;
    background: rgba(255,255,255,0.07);
    color: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-home-map-search-modal-input::placeholder {
    color: rgba(255,255,255,0.35);
}
.dash-home-map-search-modal-input:focus {
    border-color: #e91e8c;
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.2);
    background: rgba(255,255,255,0.1);
}
.dash-home-map-search-modal-results {
    display: none;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    text-align: left;
}
.dash-home-map-search-modal-results:not(:empty) {
    display: block;
}
.dash-home-map-search-modal .dash-aura-result-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 11px 14px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
    font-family: "Fredoka", sans-serif;
}
.dash-home-map-search-modal .dash-aura-result-item:last-child {
    border-bottom: none;
}
.dash-home-map-search-modal .dash-aura-result-item:hover {
    background: rgba(233, 30, 140, 0.15);
    color: #fff;
}

.dash-home-map-wrap .eyelands-search-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 0;
    min-width: 240px;
    overflow: hidden;
}
.dash-home-map-wrap .eyelands-search-wrap .form-control {
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 12px;
    padding: 0.5rem 12px 0.5rem 14px;
    font-size: 0.95rem;
    font-family: "Fredoka", sans-serif;
    color: #1f2937;
}
.dash-home-map-wrap .eyelands-search-wrap .form-control::placeholder {
    color: #94a3b8;
}
.dash-home-map-wrap .eyelands-search-wrap .form-control:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.dash-aura-select-area-row {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 100000 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: calc(100% - 24px);
    box-sizing: border-box;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease-out;
}
.dash-home-map-wrap.dash-map-controls-visible .dash-aura-select-area-row,
.dash-home-map-wrap.dash-map-save-visible .dash-aura-select-area-row {
    opacity: 1;
}
.dash-home-map-wrap.dash-map-save-visible .dash-home-map-zones-overlay,
.dash-home-map-wrap.dash-map-add-zone-visible .dash-home-map-zones-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.dash-aura-select-area-row .eyelands-select-btn {
    pointer-events: auto;
}

.dash-aura-control-panel {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 16px 20px 14px;
    background: linear-gradient(165deg, rgba(20, 10, 35, 0.92), rgba(15, 10, 30, 0.88));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    border: 1px solid rgba(233, 30, 140, 0.3);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px -10px rgba(233, 30, 140, 0.15);
}
.dash-home-map-wrap.dash-map-controls-visible .dash-aura-control-panel {
    display: flex;
    pointer-events: auto;
}
.dash-aura-control-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.dash-aura-control-area-display {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dash-aura-control-area-ring {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.2), rgba(233, 30, 140, 0.08));
    border: 2px solid rgba(233, 30, 140, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #e91e8c;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(233, 30, 140, 0.25);
    animation: auraRingPulse 3s ease-in-out infinite;
}
@keyframes auraRingPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(233, 30, 140, 0.25); }
    50% { box-shadow: 0 0 24px rgba(233, 30, 140, 0.4); }
}
.dash-aura-control-area-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dash-aura-control-area-label {
    font-family: "Fredoka", sans-serif;
    font-weight: 400;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.dash-aura-control-area-value {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1.3rem;
    color: #fff;
    letter-spacing: 0.01em;
    text-shadow: 0 0 20px rgba(233, 30, 140, 0.35);
    line-height: 1.1;
}
.dash-aura-control-slider-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.dash-aura-control-slider-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dash-aura-slider-min-label,
.dash-aura-slider-max-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    user-select: none;
}
.dash-aura-control-slider-wrap input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, rgba(233, 30, 140, 0.15), rgba(233, 30, 140, 0.45));
    border-radius: 100px;
    outline: none;
    cursor: pointer;
    position: relative;
}
.dash-aura-control-slider-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff6cc8, #e91e8c);
    cursor: pointer;
    box-shadow:
        0 0 12px rgba(233, 30, 140, 0.7),
        0 0 24px rgba(233, 30, 140, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.4);
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    transition: box-shadow 0.2s, transform 0.15s;
}
.dash-aura-control-slider-wrap input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow:
        0 0 18px rgba(233, 30, 140, 0.9),
        0 0 36px rgba(233, 30, 140, 0.4),
        0 2px 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.15);
}
.dash-aura-control-slider-wrap input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.05);
}
.dash-aura-control-slider-wrap input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ff6cc8, #e91e8c);
    cursor: pointer;
    border: 2.5px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 12px rgba(233, 30, 140, 0.7),
        0 0 24px rgba(233, 30, 140, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.4);
}
.dash-aura-control-slider-wrap input[type="range"]::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, rgba(233, 30, 140, 0.15), rgba(233, 30, 140, 0.45));
    border-radius: 100px;
    border: none;
}

.dash-aura-hex-zone-summary {
    display: none;
    flex-direction: column;
    gap: 10px;
    font-family: "Fredoka", sans-serif;
    color: rgba(255, 255, 255, 0.9);
    padding: 16px 20px 14px;
    background: linear-gradient(165deg, rgba(20, 10, 35, 0.92), rgba(15, 10, 30, 0.88));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 60px -10px rgba(168, 85, 247, 0.15);
    pointer-events: auto;
}
.dash-aura-hex-zone-summary[aria-hidden="false"] {
    display: flex;
}
.dash-aura-hex-zone-summary-count {
    font-weight: 600;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: 0.01em;
}
.dash-aura-hex-zone-summary-cost {
    font-weight: 600;
    font-size: 1.1rem;
    color: #c4b5fd;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.35);
}
.dash-aura-hex-zone-summary-hex-info {
    font-size: 0.78rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.3;
}
.dash-aura-hex-zone-summary-discount {
    font-size: 0.82rem !important;
    color: #4ade80 !important;
    font-weight: 600 !important;
}
.dash-aura-hex-zone-summary-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dash-aura-hex-zone-summary-top > .dash-aura-hex-zone-pay-btn {
    flex-shrink: 0;
    margin-left: auto;
}
@media (max-width: 600px) {
    .dash-aura-hex-zone-summary-top > .dash-aura-hex-zone-pay-btn {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}
.dash-aura-hex-zone-summary-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dash-aura-hex-zone-summary-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.dash-aura-hex-zone-summary-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dash-aura-hex-zone-pay-btn {
    width: 20%;
    min-width: 0;
    padding: 0.55rem 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.15s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.dash-aura-hex-zone-pay-btn:hover {
    background: linear-gradient(135deg, #b86ef7, #8b45ed);
    box-shadow: 0 6px 22px rgba(168, 85, 247, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}
.dash-aura-hex-zone-pay-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.3);
}
.dash-aura-hex-zone-pay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.dash-aura-hex-zone-pay-btn.dash-hex-btn-free {
    background: linear-gradient(135deg, #ec4899, #f472b6);
    border: 2px solid #fff;
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: dashHexFreePulse 1.2s ease-in-out infinite;
}
.dash-aura-hex-zone-pay-btn.dash-hex-btn-free:hover {
    background: linear-gradient(135deg, #f472b6, #ec4899);
    box-shadow: 0 6px 22px rgba(236, 72, 153, 0.6), 0 2px 8px rgba(0, 0, 0, 0.25);
}
@keyframes dashHexFreePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(236, 72, 153, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 6px 25px rgba(236, 72, 153, 0.7); }
}
.dash-aura-hex-zone-apply-btn {
    padding: 0.45rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.15);
    color: rgba(255, 255, 255, 0.8);
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.dash-aura-hex-zone-apply-btn:hover {
    background: rgba(168, 85, 247, 0.3);
    color: #fff;
}
.dash-hex-slider-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}
.dash-hex-slider-inline input[type="range"] {
    flex: 1 1 80px;
    min-width: 60px;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.dash-hex-slider-inline input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.5);
    cursor: pointer;
}
.dash-hex-slider-inline input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.5);
    cursor: pointer;
}
.dash-hex-slider-inline input[type="number"] {
    width: 56px;
    padding: 3px 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
}
.dash-hex-slider-inline input[type="number"]::-webkit-inner-spin-button,
.dash-hex-slider-inline input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dash-hex-slider-inline input[type="number"]:focus {
    border-color: rgba(168, 85, 247, 0.5);
}
.dash-hex-slider-inline #dashApplyHexSavingText {
    color: #4ade80;
    font-weight: 600;
    font-size: 0.78rem;
    white-space: nowrap;
}
.dash-home-map-wrap .eyelands-select-btn {
    position: static;
    bottom: auto;
    right: auto;
    z-index: 10;
    padding: 0.55rem 1.4rem;
    border-radius: 12px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    background: linear-gradient(135deg, #e91e8c, #c4167a);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(233, 30, 140, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    font-family: "Fredoka", sans-serif;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.15s, box-shadow 0.2s;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
}
.dash-home-map-wrap.dash-map-controls-visible .eyelands-select-btn,
.dash-home-map-wrap.dash-map-save-visible .eyelands-select-btn {
    opacity: 1;
    pointer-events: auto;
}
.dash-home-map-wrap .eyelands-select-btn:hover {
    background: linear-gradient(135deg, #f02e9c, #d41a84);
    box-shadow: 0 6px 22px rgba(233, 30, 140, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: translateY(-1px);
}
.dash-home-map-wrap .eyelands-select-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(233, 30, 140, 0.3);
}
.dash-home-map-wrap.dash-map-controls-visible .eyelands-select-btn:hover {
    background: linear-gradient(135deg, #f02e9c, #d41a84);
}

.dash-home-map-wrap .dash-home-map-zone-info {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid #e5e7eb;
    width: calc(100% - 24px);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.dash-home-map-wrap.dash-map-zone-view .dash-home-map-zone-info {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 3.5s;
}
.dash-home-map-wrap .dash-home-map-zone-info-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.dash-home-map-wrap .dash-home-map-zone-info-thumb {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
    color: #fff;
    background: #e91e8c;
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(233, 30, 140, 0.2);
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.dash-home-map-wrap .dash-home-map-zone-info-thumb:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.dash-home-map-wrap .dash-home-map-zone-info-name {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.8rem;
    line-height: 1.15;
    word-break: break-word;
}
.dash-home-map-wrap .dash-home-map-zone-info-name-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.dash-home-map-wrap .dash-home-map-zone-info-cta {
    font-size: 0.85rem;
    color: #64748b;
    white-space: nowrap;
}
.dash-home-map-wrap .dash-home-map-zone-info-area {
    font-size: 0.7rem;
    color: #64748b;
    font-family: "Fredoka", sans-serif;
    font-weight: 400;
}
.dash-home-map-wrap.dash-map-zone-view .dash-home-map-zone-info {
    cursor: pointer;
}
.dash-home-map-wrap .dash-home-map-zone-info.dash-home-map-zone-info--clickable {
    cursor: pointer;
}
.dash-home-map-wrap .dash-home-map-zone-info.dash-home-map-zone-info--clickable:hover {
    border-color: #e91e8c;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(233, 30, 140, 0.15);
}

/* Quests list (top right) when zone view is active */
.dash-map-zone-quests-list {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
    max-width: 280px;
    max-height: 50vh;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.dash-home-map-wrap.dash-map-zone-view .dash-map-zone-quests-list {
    opacity: 1;
    pointer-events: auto;
    transition-duration: 3.5s;
}
.dash-map-zone-quests-list-inner {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
    border: 2px solid #e5e7eb;
    padding: 8px 10px;
}
.dash-map-zone-quests-list-title {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    color: #1f2937;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e7eb;
}
.dash-map-zone-quests-list-empty {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}
.dash-map-zone-quests-list-empty-wrap {
    margin-top: 4px;
}
.dash-map-zone-quests-create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 14px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.3);
}
.dash-map-zone-quests-create-btn:hover {
    opacity: 0.95;
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.4);
}
.dash-map-zone-quest-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    transition: background 0.2s;
}
.dash-map-zone-quest-item:not(:last-child) {
    border-bottom: 1px solid #f1f5f9;
}
.dash-map-zone-quest-item:hover {
    background: #f8fafc;
}
.dash-map-zone-quest-item-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e91e8c;
}
.dash-map-zone-quest-item-name {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    color: #1f2937;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zones select (replaces table list under map) */
.dash-zones-select-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    margin-top: 12px;
}
.dash-zones-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1f2937;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-zones-select-trigger:hover {
    border-color: #e91e8c;
    box-shadow: 0 0 0 1px #e91e8c;
}
.dash-zones-select-trigger[aria-expanded="true"] {
    border-color: #e91e8c;
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.25);
}
.dash-zones-select-trigger-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.dash-zones-select-trigger-label .dash-zones-select-trigger-thumb {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-zones-select-trigger-globe {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    color: #e91e8c;
    font-size: 1rem;
}
.dash-zones-select-trigger-icon {
    flex-shrink: 0;
    color: #64748b;
    font-size: 0.9rem;
    transition: transform 0.2s;
}
.dash-zones-select-trigger[aria-expanded="true"] .dash-zones-select-trigger-icon {
    transform: rotate(180deg);
}
.dash-zones-select-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 20;
    display: none;
    padding-right: 12px;
    box-sizing: border-box;
}
.dash-zones-select-dropdown[aria-hidden="false"] {
    display: block;
}
.dash-zones-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #1f2937;
    transition: background 0.15s;
    border: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
}
.dash-zones-select-option:hover,
.dash-zones-select-option[aria-selected="true"] {
    background: rgba(233, 30, 140, 0.08);
}
.dash-zones-select-option--all {
    border-bottom: 1px solid #e5e7eb;
}
.dash-zones-select-option-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-zones-select-option-thumb--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.9rem;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-zones-select-option-icon {
    width: 28px;
    flex-shrink: 0;
    color: #e91e8c;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dash-zones-select-option-text {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.dash-zones-select-option-meta {
    flex-shrink: 0;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.15rem;
    font-size: 0.8rem;
    color: #e91e8c;
    text-align: right;
    white-space: normal;
    max-width: 45%;
    min-width: 0;
}
.dash-zones-select-option-meta-area,
.dash-zones-select-option-meta-airdrops {
    display: block;
    white-space: nowrap;
}
.dash-zones-select-option[data-has-location="1"]:not(.dash-zones-select-option--all) {
    cursor: pointer;
}
.dash-zones-select-option:not([data-has-location="1"]):not(.dash-zones-select-option--all):not(.dash-zones-select-option--locked) {
    opacity: 0.7;
    cursor: not-allowed;
}
.dash-zones-select-option--locked {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}
.dash-zones-select-option--locked:hover {
    background: transparent;
}
.dash-zones-select-option--locked .dash-zones-select-option-thumb,
.dash-zones-select-option--locked .dash-zones-select-option-thumb--placeholder {
    border-color: #94a3b8;
    filter: grayscale(100%);
}
.dash-zones-select-option--locked .dash-zones-select-option-text {
    text-decoration: line-through;
    color: #9ca3af;
}
.dash-zones-select-option-meta-locked {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.honeycomb-card-wrapper-locked {
    position: relative;
}
.honeycomb-card-wrapper-locked .honeycomb-card {
    pointer-events: none;
}
.honeycomb-card-lock-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}
.honeycomb-card-lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.honeycomb-card-lock-content i {
    font-size: 1.5rem;
}

.dash-home-map-wrap.dash-map-zone-view .dash-aura-radius-control,
.dash-home-map-wrap.dash-map-zone-view .eyelands-select-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition-duration: 3.5s !important;
}
.dash-home-map-wrap.dash-map-zone-view .dash-home-map-zones-overlay {
    opacity: 0;
    pointer-events: none;
}

/* Slider must sit above the Select area bar - highest z so it's never hidden */
.dash-home-map-wrap .dash-aura-radius-control {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 140px;
    max-width: 320px;
    z-index: 100001 !important;
    display: flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 8px 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.dash-home-map-wrap.dash-map-controls-visible .dash-aura-radius-control {
    opacity: 1;
    pointer-events: auto;
}
.dash-home-map-wrap.dash-map-gamifeye-locked .dash-aura-radius-control {
    display: none;
    pointer-events: none;
}
.dash-home-map-wrap .dash-aura-radius-control input[type="range"] {
    flex: 1;
    min-width: 0;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 4px;
    outline: none;
}
.dash-home-map-wrap .dash-aura-radius-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e91e8c;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.dash-home-map-wrap .dash-aura-radius-control input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e91e8c;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.dash-aura-radius-gauge {
    min-width: 4.5em;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    text-align: right;
}

#dashAuraSearchResults .list-group-item,
#dashAuraSearchResults .dash-aura-result-item {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
}
#dashAuraSearchResults .dash-aura-result-item:hover {
    background: #f1f5f9;
}

.dash-home-left {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    order: 1;
}

.dash-home-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    order: 2;
}
@media (max-width: 900px) {
    .dash-home-right {
        display: none !important;
    }
    .dash-home-left {
        gap: 0;
    }
}

.dash-right-sections {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    flex: 1;
}

/* Right column tabbed interface (legacy, kept for reference) */
.dash-right-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.dash-right-tab-list {
    display: flex;
    gap: 0;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
}
.dash-right-tab-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.dash-right-tab-btn:hover {
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
}
.dash-right-tab-btn.active {
    background: #fff;
    color: #e91e8c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.dash-right-tab-btn.active:hover {
    color: #c41a6e;
}
.dash-right-tab-panel {
    display: none;
    min-width: 0;
    flex: 1;
}
.dash-right-tab-panel.active {
    display: block;
}

.dash-aura-eyelands-section {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 2px solid #e5e7eb;
    min-width: 0;
}
.dash-aura-eyelands-header {
    margin-bottom: 1rem;
}
.dash-aura-eyelands-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    font-family: "Fredoka", sans-serif;
}
.dash-aura-eyelands-title i {
    color: #e91e8c;
}
.dash-your-offers-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
/* Your Offers / Help tabs */
.dash-offers-help-tabs {
    display: flex;
    gap: 0;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    border: 1px solid #e2e8f0;
}
.dash-offers-help-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.dash-offers-help-tab-btn:hover {
    color: #475569;
    background: rgba(255, 255, 255, 0.7);
}
.dash-offers-help-tab-btn.active {
    background: #fff;
    color: #e91e8c;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* Left column zones section: header with tabs + Zone button (same layout as right column) */
.dash-zones-help-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}
/* Tabs do not stretch: match right column compact tab width */
.dash-zones-help-header .dash-offers-help-tabs {
    flex: 0 1 auto;
}
.dash-offers-help-panel {
    display: none;
    min-width: 0;
}
.dash-offers-help-panel.active {
    display: block;
}
.dash-your-offers-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dash-your-offers-view-all {
    font-size: 0.9rem;
    color: #7c3aed;
    text-decoration: none;
    font-weight: 600;
}
.dash-your-offers-view-all:hover {
    color: #6d28d9;
    text-decoration: underline;
}
.dash-create-cta-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    border: 2px solid #f1f5f9;
    background: #fff;
    text-decoration: none;
    margin-bottom: 0.75rem;
    width: 100%;
    text-align: left;
    cursor: default;
    font-family: "Fredoka", sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.dash-create-cta-card--active {
    border-color: #e91e8c;
    cursor: pointer;
}
.dash-create-cta-card--active:hover {
    border-color: #c4187a;
    box-shadow: 0 2px 12px rgba(233, 30, 140, 0.15);
}
.dash-create-cta-card--disabled {
    opacity: 0.55;
}
.dash-create-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background: #e91e8c;
    color: #fff;
    font-size: 1.15rem;
}
.dash-create-cta-card--disabled .dash-create-cta-icon {
    background: #cbd5e1;
}
.dash-create-cta-body {
    flex: 1;
    min-width: 0;
}
.dash-create-cta-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    display: block;
    line-height: 1.3;
}
.dash-create-cta-counter {
    font-weight: 400;
    font-size: 0.85rem;
    color: #94a3b8;
}
.dash-create-cta-desc {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.35;
    font-weight: 400;
}
.dash-your-offers-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
}
.dash-your-airdrops-empty-state {
    padding: 1.5rem 1rem;
    text-align: center;
}
.dash-airdrops-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.dash-airdrops-zone-select {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #334155;
    background: #fff;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: auto;
}
.dash-airdrops-zone-select:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.15);
}

/* Zone Quick-Nav Dropdown */
.zone-nav-dropdown {
    position: static;
    min-width: 0;
}
.zone-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    gap: 10px;
    padding: 7px 14px 7px 7px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.zone-nav-trigger:hover,
.zone-nav-trigger.open {
    border-color: #e91e8c;
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.12);
}
.zone-nav-trigger-thumb {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e91e8c 0%, #f06292 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
}
.zone-nav-trigger-text {
    flex: 1;
    text-align: left;
}
.zone-nav-trigger .bi-chevron-down {
    transition: transform 0.2s;
    font-size: 0.75rem;
    color: #9ca3af;
}
.zone-nav-trigger.open .bi-chevron-down {
    transform: rotate(180deg);
}
.zone-nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 120;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
}
.zone-nav-list[aria-hidden="false"] {
    display: block;
}
/* Zone dropdown rows */
.zn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #1f2937;
    transition: background 0.15s;
}
.zn-row:hover {
    background: #fdf2f8;
}
.zn-row + .zn-row {
    border-top: 1px solid #f1f5f9;
}
.zn-row-thumb {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e91e8c;
}
.zn-row-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.zn-row-thumb .bi {
    font-size: 0.9rem;
    color: #e91e8c;
}
.zn-row-name {
    flex: 1;
    min-width: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zn-row-country {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.78rem;
}
.zn-row-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    background: #f1f5f9;
    color: #475569;
    white-space: nowrap;
    flex-shrink: 0;
}
.zn-row-chip .bi { font-size: 0.55rem; }
.zn-row-chip--pink {
    background: #fce7f3;
    color: #be185d;
}
.zn-row-chip--orange {
    background: #fff7ed;
    color: #c2410c;
}
.zn-row-avatars {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.zn-row-avatars img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
    border: 2px solid #fff;
    margin-left: -5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.zn-row-avatars img:first-child { margin-left: 0; }
.zn-row-avatars-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #e2e8f0;
    color: #475569;
    font-size: 0.55rem;
    font-weight: 700;
    font-family: "Fredoka", sans-serif;
    margin-left: -5px;
    border: 2px solid #fff;
}
.zn-row-arrow {
    font-size: 0.6rem;
    color: #d1d5db;
    flex-shrink: 0;
    transition: color 0.15s;
}
.zn-row:hover .zn-row-arrow {
    color: #e91e8c;
}
@media (max-width: 580px) {
    .zn-row-chip { display: none; }
}

.dash-offers-intro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    position: relative;
    width: 100%;
}
.dash-offers-intro-row .dash-your-offers-instruction {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.dash-offers-intro-row .dash-your-offers-actions {
    flex-shrink: 0;
}
.dash-right-tabs-header {
    margin-bottom: 0.5rem;
}
.dash-right-sections > .dash-offers-help-panel.active#dashRightPanelOffers,
.dash-right-sections > .dash-offers-help-panel.active#dashRightPanelAirdrops {
    background: #fff;
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 2px solid #e5e7eb;
}
.dash-zones-actions-row {
    flex-shrink: 0;
}
.dash-zones-actions-row .dash-your-offers-create-btn {
    white-space: nowrap; width: fit-content;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 768px) {
    .dash-zones-actions-row .dash-your-offers-create-btn .btn-label-text {
        display: none;
    }
    .dash-zones-actions-row .dash-your-offers-create-btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    .zone-nav-dropdown { position: static; }
    .zone-nav-list {
        left: 0; right: 0;
        width: 100%;
        position: absolute;
    }
    .dash-offers-intro-row { position: relative; }
}
.dash-your-offers-instruction {
    margin: 0.5rem 0 1rem 0;
    font-size: 0.8rem;
    color: #475569;
    line-height: 1.25;
}
.dash-help-video-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #0f0f0f;
    margin-top: 0.5rem;
}
.dash-help-video-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
.dash-help-video-row + .dash-help-video-row {
    margin-top: 0.5rem;
}
.dash-help-video-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dash-help-video-row:hover {
    border-color: #e91e8c;
    box-shadow: 0 2px 12px rgba(233, 30, 140, 0.1);
}
.dash-help-video-thumb {
    flex-shrink: 0;
    width: 120px;
    height: 78px;
    object-fit: cover;
    border-radius: 8px;
    background: #0f0f0f;
    border: 2px solid #e5e7eb;
}
.dash-help-video-row-text {
    flex: 1;
    min-width: 0;
}
.dash-help-video-row-title {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
    margin-bottom: 2px;
    line-height: 1.15;
}
.dash-help-video-row-desc {
    font-family: "Fredoka", sans-serif;
    font-size: 0.72rem;
    color: #64748b;
    margin: 0;
    line-height: 1.15;
    overflow: hidden;
}
.dash-help-video-row-play {
    flex-shrink: 0;
    font-size: 1.5rem;
    color: #e91e8c;
    transition: transform 0.2s;
}
.dash-help-video-row:hover .dash-help-video-row-play {
    transform: scale(1.1);
}
.dash-help-video-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 1.5rem;
}
.dash-help-video-modal {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
}
.dash-help-video-modal-body {
    width: 100%;
    height: 100%;
}
.dash-help-video-modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.dash-help-video-modal-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.dash-help-video-modal-close:hover {
    background: rgba(0, 0, 0, 0.85);
}
.dash-your-offers-grid-wrap .stamps-grid {
    padding: 0.25rem 0;
    grid-template-columns: repeat(2, 1fr) !important;
}
/* No stamps empty state: same layer as description, no card/dashed border */
.dash-your-offers-empty.missions-empty {
    padding: 1rem 0 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    align-items: center;
    text-align: center;
}

/* ─── Compact Offers Table ─── */
.dash-offers-compact-table {
    margin-top: 0.5rem;
}
.dash-offers-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: "Fredoka", sans-serif;
}
.dash-offers-tbl-th {
    font-size: 0.68rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 0 0.4rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
}
.dash-offers-tbl-th--right {
    text-align: right;
}
.dash-offers-tbl-row {
    border-bottom: 1px solid #f1f5f9;
}
.dash-offers-tbl-row:last-child {
    border-bottom: none;
}
.dash-offers-tbl-td {
    padding: 0.5rem 0;
    vertical-align: middle;
}
.dash-offers-tbl-td--img {
    width: 36px;
    padding-right: 0.6rem;
}
.dash-offers-tbl-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
}
.dash-offers-tbl-thumb--empty {
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 0.9rem;
}
.dash-offers-tbl-td--info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.dash-offers-tbl-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}
.dash-offers-tbl-meta {
    font-size: 0.7rem;
    color: #94a3b8;
    line-height: 1.2;
}
.dash-offers-tbl-td--status {
    text-align: right;
    white-space: nowrap;
}
.dash-offers-tbl-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 6px;
}
.dash-offers-tbl-badge--live {
    background: #dcfce7;
    color: #16a34a;
}
.dash-offers-tbl-badge--pending {
    background: #fef3c7;
    color: #d97706;
}
.dash-offers-tbl-actions {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    vertical-align: middle;
}
.dash-offers-tbl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.15s, color 0.15s;
}
.dash-offers-tbl-btn--add {
    background: #f0fdf4;
    color: #16a34a;
}
.dash-offers-tbl-btn--add:hover {
    background: #dcfce7;
}
.dash-offers-tbl-btn--del {
    background: #f8fafc;
    color: #cbd5e1;
}
.dash-offers-tbl-btn--del:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* ─── Offer Cards (full-width, single column) ─── */
.dash-offer-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-offer-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e5e7eb;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.dash-offer-card:hover {
    border-color: #6366f1;
    box-shadow: 0 8px 28px rgba(99,102,241,0.14), 0 2px 8px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}
.dash-offer-card-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    overflow: hidden;
}
.dash-offer-card-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-offer-card-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 55%);
    pointer-events: none;
}
.dash-offer-card-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.15);
    font-size: 3rem;
}
.dash-offer-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: "Fredoka", sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dash-offer-card-badge--approved {
    background: rgba(22,163,74,0.88);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.dash-offer-card-badge--pending {
    background: rgba(217,119,6,0.88);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217,119,6,0.3);
}
.dash-offer-card-badge--rejected {
    background: rgba(220,38,38,0.88);
    color: #fff;
}
.dash-offer-card-badge--deleted {
    background: rgba(100,116,139,0.85);
    color: #fff;
}
.dash-offer-card-body {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-offer-card-title {
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    word-wrap: break-word;
}
.dash-offer-card-desc {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}
.dash-offer-card-metrics {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 8px 0;
    margin-top: 4px;
}
.dash-offer-card-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.dash-offer-card-metric-val {
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.dash-offer-card-metric-lbl {
    font-size: 0.6rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.dash-offer-card-metric-sep {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.dash-offer-card-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.dash-offer-card-progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}
.dash-offer-card-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.dash-offer-card-progress-fill--approved { background: linear-gradient(90deg, #6366f1, #a78bfa); }
.dash-offer-card-progress-fill--pending { background: linear-gradient(90deg, #d97706, #fbbf24); }
.dash-offer-card-progress-fill--rejected,
.dash-offer-card-progress-fill--deleted { background: #cbd5e1; }
.dash-offer-card-progress-lbl {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 500;
}
.dash-offer-card-alert {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.dash-offer-card-alert i { flex-shrink: 0; margin-top: 1px; }
.dash-offer-card-alert--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}
.dash-offer-card-alert--danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}
.dash-offer-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 14px;
}
.dash-offer-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.dash-offer-card-btn--primary {
    flex: 1;
    padding: 9px 14px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.dash-offer-card-btn--primary:hover {
    box-shadow: 0 4px 16px rgba(99,102,241,0.35);
    transform: translateY(-1px);
}
.dash-offer-card-btn--danger {
    padding: 9px 12px;
    background: #f1f5f9;
    color: #94a3b8;
}
.dash-offer-card-btn--danger:hover {
    background: #fee2e2;
    color: #ef4444;
}
.dash-offer-card-pending {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: #d97706;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
}

/* ─── Legacy Offers Grid (v2 card layout — kept for non-dashboard pages) ─── */
.offers-grid-wrap { }
.offers-grid-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.offers-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.offers-filter-pill:hover { background: #f1f5f9; color: #334155; }
.offers-filter-pill.active { background: #1e293b; color: #fff; border-color: #1e293b; }
.offers-filter-pill .offers-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.08);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
}
.offers-filter-pill.active .offers-filter-count { background: rgba(255,255,255,0.2); }
.offers-filter-pill--approved.active { background: #16a34a; border-color: #16a34a; }
.offers-filter-pill--pending.active { background: #d97706; border-color: #d97706; }
.offers-filter-pill--rejected.active { background: #dc2626; border-color: #dc2626; }
.offers-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    color: #94a3b8;
    gap: 0.5rem;
}
.offers-grid-empty i { font-size: 2.5rem; }
.offers-grid-empty p { margin: 0; font-size: 0.95rem; }
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.dash-right-sections .offers-grid {
    grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1100px) {
    .offers-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .offers-grid { grid-template-columns: 1fr; max-width: 260px; }
}
.offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    border: 2.5px solid #e91e8c;
    overflow: hidden;
    background: #1a1a2e;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.offer-card:hover { transform: translateY(-3px); box-shadow: 0 10px 32px rgba(233,30,140,0.18); }
.offer-card--draft { border-color: #6366f1; }
.offer-card--pending { border-color: #d97706; }
.offer-card--deleted, .offer-card--rejected { border-color: #64748b; }
.offer-card--deleted:hover, .offer-card--rejected:hover { border-color: #94a3b8; }
.offer-card-visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 100%);
}
.offer-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.3s ease;
}
.offer-card:hover .offer-card-img { opacity: 0.7; }
.offer-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.15);
    font-size: 3.5rem;
}
.offer-card-status {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.3);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.offer-card-status--approved { background: rgba(22,163,74,0.85); color: #fff; }
.offer-card-status--draft { background: rgba(99,102,241,0.85); color: #fff; }
.offer-card-status--pending { background: rgba(217,119,6,0.85); color: #fff; }
.offer-card-status--rejected { background: rgba(220,38,38,0.8); color: #fff; }
.offer-card-status--deleted { background: rgba(100,116,139,0.8); color: #fff; }
.offer-card-body {
    position: relative;
    z-index: 1;
    padding: 0.8rem 0.9rem 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: linear-gradient(to top, rgba(10,10,25,0.92) 0%, rgba(10,10,25,0.75) 60%, transparent 100%);
}
.offer-card-name {
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.offer-card-desc {
    margin: 0;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.35;
}
.offer-card-stats {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 0.4rem 0;
    border: 1px solid rgba(255,255,255,0.08);
}
.offer-card-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
}
.offer-card-stat-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}
.offer-card-stat-label {
    font-size: 0.55rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.offer-card-stat-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}
.offer-card-progress { }
.offer-card-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}
.offer-card-progress-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.45);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.offer-card-progress-pct {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
}
.offer-card-progress-track {
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
}
.offer-card-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease;
}
.offer-card-progress-fill--approved { background: linear-gradient(90deg, #e91e8c, #ff6fb5); }
.offer-card-progress-fill--draft { background: linear-gradient(90deg, #6366f1, #a78bfa); }
.offer-card-progress-fill--pending { background: linear-gradient(90deg, #d97706, #fbbf24); }
.offer-card-progress-fill--rejected,
.offer-card-progress-fill--deleted { background: rgba(255,255,255,0.25); }
.offer-card-returned {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.5rem;
    background: rgba(16,185,129,0.12);
    border-radius: 6px;
    font-size: 0.7rem;
    color: #6ee7b7;
    font-weight: 500;
}
.offer-card-returned i { font-size: 0.8rem; }
.offer-card-rejection {
    padding: 0.3rem 0.5rem;
    background: rgba(220,38,38,0.12);
    border-radius: 6px;
    font-size: 0.7rem;
    color: #fca5a5;
    line-height: 1.35;
}
.offer-card-rejection i { margin-right: 0.15rem; }
.offer-card-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0.9rem 0.8rem;
    background: rgba(10,10,25,0.92);
    flex-wrap: wrap;
}
.offer-card-quest-code {
    width: 100%;
    font-size: 0.65rem;
    font-family: monospace;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.03em;
    user-select: all;
}
.offer-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.offer-card-action--add {
    background: #e91e8c;
    color: #fff;
    flex: 1;
    justify-content: center;
    text-decoration: none;
}
.offer-card-action--add:hover { background: #ff3da8; }
.offer-card-action--delete {
    background: rgba(220,38,38,0.15);
    color: #fca5a5;
    border: 1px solid rgba(220,38,38,0.2);
}
.offer-card-action--delete:hover { background: rgba(220,38,38,0.3); color: #fff; }
.offer-card-pending-note {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 600;
}
.offer-card-pending-note--deleted { color: #94a3b8; }

/* Airdrop card extras */
.airdrop-card-zone-badge {
    top: auto;
    bottom: 0.6rem;
    left: 0.6rem;
    right: auto;
    background: #e91e8c;
    color: #fff;
}

/* ─── Dashboard Airdrop Cards (full-width, single column) ─── */
.dash-ad-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dash-ad-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #e5e7eb;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.dash-ad-card:hover {
    border-color: #e91e8c;
    box-shadow: 0 8px 28px rgba(233,30,140,0.13), 0 2px 8px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}
.dash-ad-card-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2b55 50%, #44337a 100%);
    overflow: hidden;
}
.dash-ad-card-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-ad-card-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%);
    pointer-events: none;
}
.dash-ad-card-hero-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255,255,255,0.18);
    font-size: 3rem;
}
.dash-ad-card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: "Fredoka", sans-serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dash-ad-card-badge--approved {
    background: rgba(22,163,74,0.88);
    color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}
.dash-ad-card-badge--pending {
    background: rgba(217,119,6,0.88);
    color: #fff;
    box-shadow: 0 2px 8px rgba(217,119,6,0.3);
}
.dash-ad-card-badge--rejected {
    background: rgba(220,38,38,0.88);
    color: #fff;
}
.dash-ad-card-body {
    padding: 14px 16px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.dash-ad-card-title {
    margin: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
    word-wrap: break-word;
}
.dash-ad-card-desc {
    margin: 0;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}
.dash-ad-card-zone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #e91e8c;
}
.dash-ad-card-zone i { font-size: 0.7rem; }
.dash-ad-card-metrics {
    display: flex;
    align-items: center;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 8px 0;
    margin-top: 4px;
}
.dash-ad-card-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.dash-ad-card-metric-val {
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}
.dash-ad-card-metric-lbl {
    font-size: 0.6rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.dash-ad-card-metric-sep {
    width: 1px;
    height: 24px;
    background: #e5e7eb;
    flex-shrink: 0;
}
.dash-ad-card-progress {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.dash-ad-card-progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 99px;
    overflow: hidden;
}
.dash-ad-card-progress-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.dash-ad-card-progress-fill--approved { background: linear-gradient(90deg, #e91e8c, #f472b6); }
.dash-ad-card-progress-fill--pending { background: linear-gradient(90deg, #d97706, #fbbf24); }
.dash-ad-card-progress-fill--rejected { background: #cbd5e1; }
.dash-ad-card-progress-lbl {
    font-size: 0.68rem;
    color: #9ca3af;
    font-weight: 500;
}
.dash-ad-card-alert {
    padding: 8px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    font-size: 0.75rem;
    color: #b91c1c;
    line-height: 1.35;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.dash-ad-card-alert i { flex-shrink: 0; margin-top: 1px; }
.dash-ad-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 14px;
}
.dash-ad-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.dash-ad-card-btn--primary {
    flex: 1;
    padding: 9px 14px;
    background: linear-gradient(135deg, #e91e8c 0%, #c026d3 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(233,30,140,0.25);
}
.dash-ad-card-btn--primary:hover {
    box-shadow: 0 4px 16px rgba(233,30,140,0.35);
    transform: translateY(-1px);
}
.dash-ad-card-btn--danger {
    padding: 9px 12px;
    background: #f1f5f9;
    color: #94a3b8;
}
.dash-ad-card-btn--danger:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Your Offers table */
.dash-your-offers-table-wrap {
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}
.dash-offers-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
    border-bottom: 2px solid #e2e8f0;
    font-size: 0.875rem;
    font-weight: 600;
}
.dash-offers-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.dash-offers-tab:hover {
    color: #1e293b;
}
.dash-offers-tab.active {
    color: #1e293b;
    border-bottom-color: #475569;
}
.dash-offers-empty-state {
    padding: 2rem 1rem;
    text-align: center;
}
.dash-offers-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}
.dash-offers-empty-message {
    margin: 0;
    font-size: 1rem;
    color: #475569;
    line-height: 1.4;
}
.dash-offers-empty-btn {
    margin-top: 0.25rem;
}
.dash-your-offers-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
}
.dash-your-offers-table th,
.dash-your-offers-table td {
    padding: 0.5rem 0.35rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    border-bottom: 1px solid #e2e8f0;
}
.dash-your-offers-table th {
    text-align: left;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
.dash-your-offers-table .dash-offers-th--name { width: 38%; min-width: 0; }
.dash-your-offers-table .dash-offers-th--avail-total { width: 14%; min-width: 0; }
.dash-your-offers-table .dash-offers-th--progress { width: 12%; min-width: 0; }
.dash-your-offers-table .dash-offers-th--actions { width: 14%; min-width: 0; text-align: right; }
.dash-your-offers-table .dash-offers-td--actions { text-align: right; }
.dash-your-offers-table .dash-offers-td--actions .dash-offers-btn { margin-right: 0; margin-left: 0.25rem; }
.dash-your-offers-table .dash-offers-td--actions .dash-offers-btn:last-child { margin-left: 0; }
.dash-offers-tr--pending,
.dash-offers-tr--rejected,
.dash-offers-tr--deleted { background: transparent; }
/* Overlay on rejected/deleted rows: full row overlay with "X m² Returned To Your GamifEYE" */
.dash-offers-td--overlay-row {
    padding: 0;
    vertical-align: middle;
    border-bottom: 1px solid #e2e8f0;
}
.dash-offers-row-inner {
    position: relative;
    min-height: 2.5rem;
}
.dash-offers-row-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 2;
    pointer-events: none;
    font-size: 0.875rem;
    font-weight: 700;
}
.dash-offers-overlay-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding-left: 0.35rem;
    padding-right: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.dash-offers-row-overlay .dash-offers-overlay-block {
    width: 100%;
    max-width: 100%;
}
.dash-offers-overlay-img {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-offers-overlay-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.dash-offers-overlay-title {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    text-align: left;
}
.dash-offers-overlay-reason {
    font-weight: 500;
    font-size: 0.8rem;
    opacity: 0.95;
    line-height: 1.25;
    max-width: 100%;
    word-break: break-word;
    text-align: left;
}
.dash-offers-overlay-returned {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    gap: 0.15rem;
}
.dash-offers-returned-amount {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #1e293b;
    white-space: nowrap;
}
.dash-offers-returned-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    line-height: 1.2;
}
.dash-offers-row-overlay--rejected {
    background: rgba(248, 250, 252, 0.98);
    color: #475569;
}
.dash-offers-row-overlay--deleted {
    background: rgba(248, 250, 252, 0.98);
    color: #475569;
}
.dash-offers-row-content {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 0.35rem;
    position: relative;
    z-index: 1;
}
.dash-offers-row-content--name { flex: 0 0 38%; min-width: 0; padding-right: 0.35rem; }
.dash-offers-row-content--avail { flex: 0 0 14%; min-width: 0; font-size: 0.8125rem; }
.dash-offers-row-content--progress { flex: 0 0 12%; min-width: 0; }
.dash-offers-row-content--actions { flex: 0 0 14%; min-width: 0; text-align: right; }
.dash-offers-status--deleted {
    font-size: 0.75rem;
    background: #f1f5f9;
    color: #475569;
    font-style: italic;
}
.dash-offers-cell-name-desc {
    min-width: 0;
}
.dash-offers-cell-name-desc .dash-offers-cell-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.dash-offers-desc-under {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.2rem;
    padding-left: 0;
}
.dash-offers-aura-under {
    margin-top: 0.35rem;
}
.dash-offers-aura-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.15), rgba(142, 68, 173, 0.1));
    color: #7d3c98;
    border: 1px solid rgba(155, 89, 182, 0.25);
}
.dash-offers-aura-badge i {
    font-size: 0.7rem;
}
.dash-offers-zone-under {
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: #64748b;
}
.dash-offers-zone-label {
    font-weight: 500;
    color: #64748b;
}
.dash-offers-zone-link {
    color: #e91e8c;
    font-weight: 500;
    text-decoration: none;
}
.dash-offers-zone-link:hover {
    text-decoration: underline;
}
.dash-offers-zone-name {
    color: #475569;
}
.dash-offers-card-zone {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #64748b;
}
.dash-offers-cell-name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.dash-offers-name-text {
    font-weight: 700;
    color: #e91e8c;
}
.dash-offers-thumb {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-offers-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #94a3b8;
    font-size: 0.9rem;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-zone-airdrop-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
}
.dash-zone-airdrop-badges-empty {
    color: #94a3b8;
    font-size: 0.9rem;
}
.dash-zone-airdrop-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    max-width: 100%;
    min-width: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.dash-zone-airdrop-badge:hover {
    background: #fdf2f8;
    border-color: #e91e8c;
    color: #e91e8c;
}
.dash-zone-airdrop-badge-thumb {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.dash-zone-airdrop-badge-thumb-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 0.75rem;
}
.dash-zone-airdrop-badge-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-zone-airdrop-badges--cards {
    margin-top: 0.5rem;
}
.dash-offers-progress-bar-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.dash-offers-progress-bar {
    display: inline-block;
    width: 3rem;
    max-width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.dash-offers-progress-fill {
    display: block;
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.dash-offers-progress-pct {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.dash-offers-status {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}
.dash-offers-status--active { background: #dcfce7; color: #166534; }
.dash-offers-status--pending { background: #fef3c7; color: #92400e; }
.dash-offers-status--rejected { background: #f1f5f9; color: #475569; }
.dash-offers-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    margin-right: 0.25rem;
}
.dash-offers-btn:hover { background: #e2e8f0; color: #1e293b; }
.dash-offers-btn--add { background: #ede9fe; color: #5b21b6; }
.dash-offers-btn--add:hover { background: #ddd6fe; color: #4c1d95; }
.dash-offers-btn--delete { background: #fee2e2; color: #991b1b; }
.dash-offers-btn--delete:hover { background: #fecaca; color: #7f1d1d; }

/* Responsive: hide table and show card list to avoid any horizontal scroll */
.dash-your-offers-cards {
    display: none;
    margin-top: 1rem;
}
@media (max-width: 1023px) {
    .dash-your-offers-table-wrap .dash-your-offers-table {
        display: none;
    }
    .dash-your-offers-table-wrap .dash-your-offers-cards {
        display: block;
    }
}

/* Mobile offer cards: compact, full-width use */
.dash-offers-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.dash-offers-card--rejected,
.dash-offers-card--pending,
.dash-offers-card--deleted { background: #f8fafc; border-color: #e2e8f0; }
.dash-offers-card-actions--deleted {
    border-top-color: #fecaca;
}
.dash-offers-card-returned {
    margin-top: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    text-align: left;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.dash-offers-card-returned .dash-offers-overlay-img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid #e91e8c;
    box-sizing: border-box;
}
.dash-offers-card-returned .dash-offers-overlay-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}
.dash-offers-card-returned .dash-offers-overlay-title { font-size: 0.9rem; }
.dash-offers-card-returned .dash-offers-overlay-reason { font-size: 0.75rem; font-weight: 500; }
.dash-offers-card-returned .dash-offers-overlay-returned {
    flex-shrink: 0;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dash-offers-card-returned .dash-offers-returned-amount { font-size: 0.95rem; }
.dash-offers-card-returned .dash-offers-returned-label { font-size: 0.65rem; }

.dash-offers-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.dash-offers-card-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}
.dash-offers-card-name {
    font-weight: 700;
    color: #e91e8c;
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-offers-card .dash-offers-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.dash-offers-card-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.18rem 0.4rem;
}

.dash-offers-card-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: #475569;
    margin-bottom: 0.5rem;
}
.dash-offers-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.dash-offers-card-meta-label {
    font-weight: 600;
    color: #64748b;
}
.dash-offers-card-meta-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.dash-offers-card-meta-progress .dash-offers-progress-bar {
    width: 4rem;
    height: 5px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.dash-offers-card-meta-progress .dash-offers-progress-fill {
    display: block;
    height: 100%;
    background: #22c55e;
    border-radius: 3px;
}
.dash-offers-card-meta-progress .dash-offers-progress-pct {
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

.dash-offers-card-desc {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.dash-offers-card-actions {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
    font-family: "Fredoka", sans-serif;
}
.dash-offers-card .dash-offers-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
@media (max-width: 480px) {
    .dash-offers-card {
        padding: 0.6rem 0.75rem;
        margin-bottom: 0.6rem;
    }
    .dash-offers-card-header {
        margin-bottom: 0.4rem;
    }
    .dash-offers-card-name {
        font-size: 0.875rem;
    }
    .dash-offers-card-meta {
        font-size: 0.75rem;
        gap: 0.5rem;
        margin-bottom: 0.4rem;
    }
    .dash-offers-card-desc {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }
    .dash-offers-card-actions {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }
    .dash-offers-card .dash-offers-btn {
        min-height: 44px;
    }
}

.dash-aura-eyelands-section .eyelands-list-wrap,
.dash-aura-eyelands-section .honeycombs-grid {
    max-height: 400px;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.dash-aura-eyelands-section .honeycombs-grid {
    grid-template-columns: repeat(2, 1fr);
}
.dash-aura-eyelands-section .honeycombs-grid .dash-aura-empty-zones {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1.5rem;
    min-height: 200px;
    background: linear-gradient(160deg, #fdf4ff 0%, #f5f3ff 50%, #eff6ff 100%);
    border: 2px dashed rgba(233, 30, 140, 0.35);
    border-radius: 16px;
    margin: 0;
}
.dash-aura-empty-zones-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c 0%, #a855f7 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 8px 24px rgba(233, 30, 140, 0.3);
}
.dash-aura-empty-zones-icon i {
    font-size: 1.75rem;
}
.dash-aura-empty-zones-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
    margin: 0 0 1.25rem 0;
    max-width: 100%;
    font-weight: 500;
}
.dash-aura-empty-zones-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    justify-content: center;
    align-items: center;
}
.dash-aura-empty-zones-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.85);
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.dash-aura-empty-zones-step i {
    color: #e91e8c;
    font-size: 0.9rem;
}
.dash-aura-eyelands-section .honeycomb-card-wrapper {
    aspect-ratio: 1 / 1;
}
.dash-aura-eyelands-section .honeycomb-card-wrapper-enhanced {
    cursor: pointer;
}
.dash-aura-eyelands-section .honeycomb-area-badge {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    font-size: 11px;
}
.dash-aura-eyelands-section .honeycomb-area-badge i {
    font-size: 12px;
}
.dash-aura-eyelands-section .honeycomb-card-bottom-section .honeycomb-btn-row {
    gap: 8px;
    flex-wrap: wrap;
}
.dash-aura-eyelands-section .honeycomb-btn-row.zone-btn-row-single {
    width: 100%;
}
.dash-aura-eyelands-section .zone-btn-full {
    width: 100%;
    flex: 1;
}
.dash-aura-eyelands-section .zone-btn-full:disabled {
    opacity: 0.9;
    cursor: not-allowed;
}
.dash-aura-eyelands-section .zone-btn-retry {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: rgba(255, 255, 255, 0.5);
}
.dash-aura-eyelands-section .zone-btn-retry:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-1px);
}
.dash-aura-eyelands-section .eyelands-list-item {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid #e5e7eb;
    font-family: "Fredoka", sans-serif;
}
.dash-aura-eyelands-section .eyelands-list-item:hover {
    background: #f8fafc;
}
.dash-aura-eyelands-section .eyelands-list-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-aura-eyelands-section .eyelands-view-area-btn,
.dash-aura-eyelands-section .eyelands-businesses-btn,
.dash-aura-eyelands-section .eyelands-pull-btn,
.dash-aura-eyelands-section .eyelands-delete-btn {
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.dash-aura-eyelands-section .eyelands-view-area-btn:hover { color: #7c3aed; background: #f5f3ff; }
.dash-aura-eyelands-section .eyelands-pull-btn:hover { color: #e91e8c; background: #fdf2f8; }
.dash-aura-eyelands-section .eyelands-delete-btn:hover { color: #ef4444; background: #fef2f2; }
.dash-aura-eyelands-section .eyelands-businesses-btn:hover { color: #0ea5e9; background: #f0f9ff; }

/* Dashboard POIs modal (same as Communities) */
.eyelands-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.eyelands-modal-overlay.is-open {
    display: flex;
}
.eyelands-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    max-width: 720px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.eyelands-modal-create-zone {
    max-width: 400px;
    font-family: "Fredoka", sans-serif;
}
.eyelands-modal-create-zone .eyelands-modal-header,
.eyelands-modal-create-zone .eyelands-modal-body {
    font-family: "Fredoka", sans-serif;
}
.eyelands-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.eyelands-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}
.eyelands-modal-close {
    padding: 0.25rem;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
}
.eyelands-modal-close:hover {
    color: #1e293b;
    background: #f1f5f9;
}
.eyelands-modal-body {
    overflow-y: auto;
    padding: 1rem 1.25rem;
}
.eyelands-pois-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.eyelands-pois-table th,
.eyelands-pois-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
}
.eyelands-pois-table th {
    color: #64748b;
    font-weight: 600;
}
.eyelands-pois-table tr:hover td {
    background: #f8fafc;
}
.eyelands-pois-table .poi-website a {
    color: #0ea5e9;
}
.eyelands-pois-empty {
    color: #94a3b8;
    padding: 1.5rem;
    text-align: center;
}

.dash-create-zone-message {
    margin: 0 0 1rem 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    font-family: "Fredoka", sans-serif;
}
.dash-create-zone-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    color: #1e293b;
    font-size: 0.9rem;
    font-family: "Fredoka", sans-serif;
}
.dash-create-zone-input {
    width: 100%;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: "Fredoka", sans-serif;
}
.dash-create-zone-input:focus {
    border-color: #e91e8c;
    outline: none;
    box-shadow: 0 0 0 2px rgba(233, 30, 140, 0.2);
}
.dash-create-zone-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}
/* Zone choice modal: focus on the two CTAs */
.eyelands-modal-zone-choice {
    width: min(90vw, 340px);
    max-width: 340px;
    aspect-ratio: 9 / 16;
    max-height: 90vh;
    font-family: "Fredoka", sans-serif;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.eyelands-modal-zone-choice .eyelands-modal-header,
.eyelands-modal-zone-choice .eyelands-modal-title {
    font-family: "Fredoka", sans-serif;
}
.eyelands-modal-zone-choice .eyelands-modal-body.dash-zone-cost-body {
    padding: 0 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.dash-zone-cost-subtitle {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #64748b;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}
.dash-zone-cost-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.dash-zone-cost-choice {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 0.75rem;
    padding: 1rem 1rem;
    border-radius: 14px;
    border: 2px solid transparent;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    background: #f8fafc;
    width: 100%;
}
.dash-zone-cost-choice:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dash-zone-cost-choice-boundary {
    border-color: #0ea5e9;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}
.dash-zone-cost-choice-boundary:hover {
    border-color: #0284c7;
    box-shadow: 0 8px 24px rgba(14, 165, 233, 0.2);
}
.dash-zone-cost-choice-aura {
    border-color: #e91e8c;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
}
.dash-zone-cost-choice-aura:hover {
    border-color: #be185d;
    box-shadow: 0 8px 24px rgba(233, 30, 140, 0.2);
}
.dash-zone-cost-choice-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}
.dash-zone-cost-choice-boundary .dash-zone-cost-choice-icon {
    color: #0ea5e9;
}
.dash-zone-cost-choice-aura .dash-zone-cost-choice-icon {
    color: #e91e8c;
}
.dash-zone-cost-choice-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    flex: 1;
}
.dash-zone-cost-choice-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
}
.dash-zone-cost-choice-meta {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.35;
}
.dash-zone-cost-choice-boundary .dash-zone-cost-choice-meta {
    color: #0369a1;
}
.dash-zone-cost-choice-aura .dash-zone-cost-choice-meta {
    color: #9d174d;
}

/* Zone choice overlay on map (replaces modal) */
.dash-zone-cost-overlay {
    position: absolute;
    inset: 0;
    z-index: 11;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    background: transparent;
    border-radius: 16px;
    pointer-events: none;
}
.dash-zone-cost-overlay.is-visible {
    display: flex;
    pointer-events: auto;
}
.dash-zone-cost-overlay-choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
}
.dash-zone-cost-choice-row {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
}
.dash-zone-cost-overlay-choices .dash-zone-cost-choice {
    flex: 1 1 0;
    min-width: 0;
    max-width: 50%;
    padding: 0.6rem 0.5rem;
    gap: 0.5rem;
}
.dash-zone-cost-overlay-choices .dash-zone-cost-choice-icon {
    font-size: 1.35rem;
}
.dash-zone-cost-overlay-choices .dash-zone-cost-choice-title {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-zone-cost-overlay-choices .dash-zone-cost-choice-meta {
    font-size: 0.7rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-zone-cost-overlay-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.15s, background 0.15s;
}
.dash-zone-cost-overlay-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

/* GamifEYE instruction overlay (after "Use my GamifEYE", before hexagons) */
.dash-aura-gamifeye-instruction {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 5rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    pointer-events: none;
}
/* GAMIFEYE view only: do not cover bottom strip so slider and "Select area" stay visible */
/* GamifEYE overlay covers entire map and sits on top of white bar until Close is clicked */
#dashAuraGamifeyeInstructionOverlay.dash-aura-gamifeye-instruction {
    z-index: 100002;
}
.dash-aura-gamifeye-instruction.is-visible {
    display: flex;
    pointer-events: auto;
}
.dash-aura-gamifeye-instruction-text {
    margin: 0;
    max-width: 320px;
    font-size: 1rem;
    line-height: 1.45;
    color: #fff;
    text-align: center;
    font-family: "Fredoka", sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.dash-aura-gamifeye-instruction-btn-close {
    margin-top: 1rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dash-aura-gamifeye-instruction-btn-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
}
.dash-aura-gamifeye-instruction-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: color 0.15s, background 0.15s;
}
.dash-aura-gamifeye-instruction-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.eyelands-modal-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    font-family: "Fredoka", sans-serif;
    transition: opacity 0.2s;
}
.eyelands-modal-btn.primary {
    background: #e91e8c;
    color: #fff;
}
.eyelands-modal-btn.primary:hover:not(:disabled) {
    opacity: 0.9;
}
.eyelands-modal-btn.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.eyelands-modal-btn.secondary {
    background: #f1f5f9;
    color: #475569;
}
.eyelands-modal-btn.secondary:hover {
    background: #e2e8f0;
}

/* Actions Grid */
.dash-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.dash-action-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

.dash-action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

/* Upgrade card - subtle highlight */
.dash-action-upgrade {
    background: linear-gradient(135deg, #fffbf0 0%, #fff5e6 100%);
    border: 1px solid rgba(212, 169, 87, 0.3);
}

.dash-action-upgrade:hover {
    border-color: rgba(212, 169, 87, 0.5);
    box-shadow: 0 4px 20px rgba(212, 169, 87, 0.15);
}

.dash-action-upgrade .dash-action-icon {
    background: linear-gradient(135deg, #d4a957, #f0c674);
}

.dash-upgrade-arrow {
    margin-left: auto;
    color: #d4a957;
    font-size: 1.25rem;
    opacity: 0.7;
    transition: all 0.2s;
}

.dash-action-upgrade:hover .dash-upgrade-arrow {
    opacity: 1;
    transform: translateX(3px);
}

.dash-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.dash-action-text strong {
    display: block;
    font-size: 0.95rem;
    color: #1a1a2e;
    margin-bottom: 0.25rem;
}

.dash-action-text {
    line-height: 1.3;
}

.dash-action-text span {
    font-size: 0.8rem;
    color: #888;
    line-height: 1.1 !important;
    display: block;
}

/* =============================================
   INBOX / NOTIFICATIONS SECTION
   ============================================= */
.dash-inbox-section {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.dash-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.dash-inbox-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a1a2e;
    font-weight: 600;
    font-size: 1rem;
}

.dash-inbox-title i {
    font-size: 1.1rem;
    color: #e91e8c;
}

.dash-inbox-badge {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.dash-inbox-mark-read {
    background: #f0f2f5;
    border: none;
    color: #666;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dash-inbox-mark-read:hover {
    background: #e5e7eb;
    color: #1a1a2e;
}

.dash-inbox-messages {
    padding: 1rem;
}

.dash-inbox-message {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: all 0.2s;
    background: #f8f9fa;
    border-left: 3px solid transparent;
}

.dash-inbox-message:last-child {
    margin-bottom: 0.5rem;
}

.dash-inbox-message:hover {
    background: #f0f2f5;
}

.dash-inbox-unread {
    background: linear-gradient(135deg, #fff5f9 0%, #f8f0ff 100%);
    border-left-color: #e91e8c;
}

.dash-inbox-unread:hover {
    background: linear-gradient(135deg, #ffeff5 0%, #f3e8ff 100%);
}

.dash-inbox-message-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.dash-inbox-icon-welcome {
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    color: #fff;
}

.dash-inbox-icon-aura {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
}

.dash-inbox-icon-klout {
    background: linear-gradient(135deg, #e91e8c, #c71585);
    color: #fff;
}

.dash-inbox-icon-info {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: #fff;
}

.dash-inbox-icon-success {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
}

.dash-inbox-message-content {
    flex: 1;
    min-width: 0;
}

.dash-inbox-message-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.dash-inbox-message-header strong {
    font-size: 0.9rem;
    color: #1a1a2e;
    font-weight: 600;
}

.dash-inbox-time {
    font-size: 0.7rem;
    color: #999;
    white-space: nowrap;
}

.dash-inbox-message-content p {
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.dash-inbox-message-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dash-inbox-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
    border: none;
    cursor: pointer;
}

.dash-inbox-btn-primary {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.dash-inbox-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.dash-inbox-btn-secondary {
    background: #f0f2f5;
    color: #1a1a2e;
}

.dash-inbox-btn-secondary:hover {
    background: #e5e7eb;
}

/* Responsive Inbox */
@media (max-width: 480px) {
    .dash-inbox-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .dash-inbox-message {
        flex-direction: column;
        gap: 0.75rem;
    }

    .dash-inbox-message-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .dash-inbox-message-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Missions Page Styles */
.missions-top-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.missions-create-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    transition: all 0.2s;
}

.missions-create-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(233, 30, 140, 0.4);
}

.missions-create-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.missions-create-text {
    font-size: 0.9rem;
    font-weight: 600;
}

.missions-section-header {
    margin-bottom: 1.5rem;
}

.missions-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0px;
}

.missions-section-title i {
    color: #e91e8c;
}

.missions-section-description {
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.missions-section-list {
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin: 0rem 0 0 1.25rem;
    padding: 0;
    line-height: 1.3;
}

.missions-section-list li {
    margin-bottom: 0.1rem;
}

/* Missions Top Actions */
.missions-top-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.missions-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    color: #666;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
}

.missions-back-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.missions-back-btn i {
    font-size: 1rem;
}

.missions-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
}

.missions-create-btn:hover {
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4);
}

.missions-create-btn i {
    font-size: 1rem;
}

.missions-top-actions-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.missions-secondary-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    color: #666;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.missions-secondary-btn:hover {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.missions-secondary-btn i {
    font-size: 1rem;
}

/* Button text show/hide for responsive */
.btn-text-short {
    display: none;
}

@media (max-width: 480px) {
    .missions-top-actions {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .missions-back-btn,
    .missions-create-btn,
    .missions-secondary-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    .missions-top-actions-right {
        gap: 0.5rem;
    }

    .btn-text-full {
        display: none;
    }

    .btn-text-short {
        display: inline;
    }
}

/* Missions Empty State */
.missions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    border: 2px dashed #e0e0e0;
}

.missions-empty-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.missions-empty-icon i {
    font-size: 2.5rem;
    color: #e91e63;
}

.missions-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem 0;
}

.missions-empty p {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 1.5rem 0;
}

.missions-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
}

.missions-empty-btn:hover {
    background: linear-gradient(135deg, #d81b60 0%, #ad1457 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4);
}

/* Missions Grid */
.missions-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1rem;
}

/* Mission Card - Flip Card System */
.mission-card-wrapper {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 9 / 16;
}

.mission-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
    cursor: pointer;
}

.mission-card-wrapper.flipped .mission-card {
    transform: rotateY(180deg);
}

.mission-card-front,
.mission-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 24px;
    overflow: hidden;
}

.mission-card-front {
    background: transparent;
    z-index: 2;
}

.mission-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    z-index: 1;
}

.mission-card-back-content {
    padding: 30px 20px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    overflow-y: auto;
}

.mission-back-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
}

.mission-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mission-detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.mission-detail-value {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.mission-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px);
    transform: scale(1.2);
}

.mission-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.7) 0%,
        rgba(26, 26, 46, 0.85) 50%,
        rgba(26, 26, 46, 0.95) 100%
    );
}

.mission-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}

.mission-card-top-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 10;
}

.mission-top-left-stack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.mission-top-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mission-top-stat-image {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.mission-top-stat-text {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.mission-card-actions-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.mission-view-btn {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.mission-view-btn:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.mission-view-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mission-view-btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mission-view-btn-main i {
    font-size: 14px;
}

.mission-view-btn-expiry {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
}

.mission-card-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 240px;
    margin-top: 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.mission-card-actions {
    display: flex;
    gap: 8px;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.mission-action-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
}

.mission-action-btn:hover {
    background: rgba(59, 130, 246, 1);
    transform: scale(1.05);
}

.mission-status-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

.mission-status-badge:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.mission-status-badge:active {
    transform: scale(0.95);
}

.mission-status-badge.loading {
    opacity: 0.6;
    pointer-events: none;
}

.mission-status-badge.loading .mission-status-icon i {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.mission-status-icon {
    display: inline;
    font-size: 12px;
}

.mission-status-text {
    display: none;
}

.mission-status-badge.active {
    background: #10b981;
    color: #fff;
}

.mission-status-badge.draft {
    background: #f59e0b;
    color: #fff;
}

.mission-status-badge.paused {
    background: #6b7280;
    color: #fff;
}

/* Global/Local Badge */
.mission-global-badge {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    font-size: 12px;
}

.mission-global-badge.global {
    background: #3b82f6;
    color: #fff;
}

.mission-global-badge.local {
    background: #f59e0b;
    color: #fff;
}

/* Status Toast Notification */
.status-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: #333;
    color: #fff;
    border-radius: 12px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.status-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.status-toast.active {
    background: linear-gradient(135deg, #10b981, #059669);
}

.status-toast.paused {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.status-toast.error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.status-toast i {
    font-size: 1.1rem;
}

.mission-card-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 12px 0 8px 0;
}

.mission-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 12px;
    flex-shrink: 0;
}

.mission-type-icon.aura {
    background: rgba(233, 30, 140, 0.9);
    color: #fff;
    box-shadow: 0 2px 6px rgba(233, 30, 140, 0.4);
}

.mission-type-icon.honeycomb {
    background: rgba(243, 156, 18, 0.9);
    color: #fff;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
}

.mission-type-icon.focalpoint {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: #fff;
    box-shadow: 0 2px 6px rgba(156, 39, 176, 0.4);
}

.mission-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.mission-card-reward-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.mission-card-description {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin-bottom: 12px;
    max-height: 50px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* Inline Editing */
.mission-editable {
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
}

.mission-editable:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mission-editable.editing {
    background: rgba(255, 255, 255, 0.15);
    outline: 2px solid rgba(236, 72, 153, 0.5);
}

.mission-edit-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(236, 72, 153, 0.6);
    border-radius: 6px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    text-align: center;
    padding: 6px 10px;
    box-sizing: border-box;
}

.mission-edit-input:focus {
    outline: none;
    border-color: #ec4899;
}

.mission-edit-input.title-input {
    font-size: 20px;
    font-weight: 700;
}

.mission-edit-input.description-input {
    font-size: 12px;
    font-weight: 600;
    resize: none;
    min-height: 50px;
}

.mission-card-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 50px;
}

.mission-card-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
    max-width: 240px;
}

.mission-stat-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    text-align: center;
    flex: 1;
}

.mission-stat-to-win {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.mission-stat-stamp-image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.mission-stat-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
}

.mission-stat-to-win .mission-stat-value {
    text-align: left;
}

.mission-stat-to-win .mission-stat-label {
    text-align: left;
}

.mission-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1;
}

.mission-stat-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.mission-card-flip-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    z-index: 2;
}

.mission-card-flip-hint i {
    font-size: 12px;
}

.mission-card-back-header {
    margin-bottom: 20px;
}

.mission-card-back-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    justify-content: center;
}

.mission-back-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.mission-back-action-btn.flip-back-btn {
    background: #10b981;
}

.mission-back-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mission-back-action-btn.flip-back-btn:hover {
    background: #059669;
}

.mission-card-back-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-align: center;
}

.mission-card-back-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.mission-card-back-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
}

.mission-back-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.mission-back-meta-item i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.mission-back-mission-name {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.mission-back-daily-limit {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mission-card-back-image {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

.mission-card-back-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    width: 100%;
}

.mission-back-info-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.mission-back-info-item i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.mission-card-back-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
    margin-top: auto;
}

.mission-back-bottom-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
}

.mission-back-bottom-item i {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.mission-back-stamp-count {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.mission-back-bottom-date {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    flex: 1;
}

/* Empty State */
.missions-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.missions-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(233, 30, 140, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.missions-empty-icon i {
    font-size: 2rem;
    color: #e91e8c;
}

.missions-empty h3 {
    font-size: 1.25rem;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.missions-empty p {
    color: #888;
    margin: 0 0 1.5rem 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.missions-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.missions-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

/* =====================================================
   STAMP MODAL - LIGHT THEME (like Social Blaster)
   ===================================================== */

.stamp-modal-light {
    background: #ffffff !important;
    border: 2px solid #e91e8c !important;
    box-shadow: 0 20px 60px rgba(233, 30, 140, 0.15) !important;
}

.stamp-modal-light .daily-bonus-close {
    background: #f5f5f5;
    color: #666;
}

.stamp-modal-light .daily-bonus-close:hover {
    background: #e0e0e0;
    color: #333;
}

.stamp-modal-light .daily-bonus-icon {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1)) !important;
    border-color: rgba(233, 30, 140, 0.3) !important;
}

.stamp-modal-light .daily-bonus-title {
    color: #333 !important;
}

.stamp-modal-light .stamp-modal-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stamp-modal-light .stamp-modal-label i {
    margin-right: 0.25rem;
}

.stamp-modal-light .stamp-modal-count {
    font-size: 0.7rem;
    color: #999;
}

.stamp-modal-light .stamp-modal-input {
    width: 100%;
    box-sizing: border-box;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    min-height: 2.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    font-family: "Fredoka", sans-serif;
    outline: none;
    text-align: center;
}

.stamp-modal-light .stamp-modal-input:focus {
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.stamp-modal-light .stamp-modal-input::placeholder {
    color: #999;
}

.stamp-modal-light .stamp-modal-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    color: #333;
    font-family: "Fredoka", sans-serif;
    outline: none;
    resize: none;
    line-height: 1.5;
}

.stamp-modal-light .stamp-modal-textarea:focus {
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.stamp-modal-light .stamp-modal-textarea::placeholder {
    color: #999;
}

/* Offer Image (25%) + Description (75%); stretch so textarea matches image height */
.sf-row-image-desc {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin-top: 1rem;
    margin-bottom: 0;
    min-width: 0;
}
.sf-col-image {
    flex: 0 0 35%;
    min-width: 0;
    max-width: 35%;
}
.sf-col-desc {
    flex: 1 1 65%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sf-min-purchase-combo {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
}
.sf-min-purchase-combo .sf-min-purchase-input {
    flex: 2;
    min-width: 0;
    border-radius: 12px 0 0 12px;
    border-right: none;
}
.sf-min-purchase-combo .sf-min-purchase-currency {
    flex: 1;
    min-width: 0;
    pointer-events: auto;
    cursor: pointer;
    background: #f0f0f0 !important;
    border-radius: 0 12px 12px 0;
    border-left: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    text-align: center;
}
.sf-currency-dropdown {
    position: relative;
    width: 100%;
}
.sf-currency-dropdown-trigger {
    width: 100%;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left !important;
    font-size: 0.9rem;
    color: #333;
    font-family: "Fredoka", sans-serif;
    font-weight: 400 !important;
    line-height: 1.5;
}
.stamp-modal-light .sf-currency-dropdown-trigger {
    text-align: left !important;
    font-weight: 400 !important;
}
.sf-currency-dropdown-trigger.sf-currency-dropdown-trigger .sf-currency-dropdown-name,
.sf-currency-dropdown-trigger.sf-currency-dropdown-trigger .sf-currency-dropdown-code {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    line-height: inherit;
}
.sf-currency-dropdown-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 4px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    z-index: 10;
    font-size: 0.9rem;
    color: #333;
    font-family: "Fredoka", sans-serif;
    font-weight: 400;
    line-height: 1.5;
}
.sf-currency-dropdown-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    cursor: pointer;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}
.sf-currency-dropdown-option:last-child {
    border-bottom: none;
}
.sf-currency-dropdown-option:hover {
    background: #f5f5f5;
}
.sf-currency-dropdown-name {
    text-align: left;
    flex: 1;
    min-width: 0;
}
.sf-currency-dropdown-code {
    text-align: right;
    flex-shrink: 0;
}
.sf-expiry-date-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.sf-expiry-date-input-wrapper {
    position: relative;
    width: 100%;
}
.sf-expiry-date-input-wrapper .sf-expiry-date-input {
    width: 100%;
    padding-right: 2.5rem;
    box-sizing: border-box;
}
.sf-expiry-date-input-wrapper .sf-expiry-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #9b59b6;
    font-size: 1rem;
}
.sf-expiry-date-input-wrapper .sf-expiry-date-icon i {
    font-size: inherit;
}
#currencyModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 100002;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.sf-currency-modal-inner {
    padding: 1.5rem;
}
.sf-currency-modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.sf-col-desc .sf-form-group-lg.sf-desc-textarea-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.sf-row-image-desc .sf-col-desc .stamp-modal-textarea {
    max-width: 100%;
    box-sizing: border-box;
}
/* Counter + warning in bottom-right of textarea; textarea fills height to match image */
.sf-desc-textarea-wrap {
    position: relative;
}
.sf-desc-textarea-wrap .stamp-modal-textarea {
    padding-bottom: 3rem;
    padding-right: 0.5rem;
    flex: 1;
    min-height: 0;
    resize: none;
}
.sf-desc-counter-wrap {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    pointer-events: none;
}
.sf-desc-counter-wrap .stamp-modal-count {
    font-size: 0.7rem;
    color: #999;
}
.sf-desc-counter-wrap .stamp-modal-warning {
    margin-top: 0;
    font-size: 0.7rem;
}

.stamp-modal-light .stamp-modal-upload {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.08), rgba(142, 68, 173, 0.05));
    border: 2px dashed rgba(155, 89, 182, 0.4);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
    position: relative;
}

.stamp-modal-light .stamp-modal-upload:hover {
    border-color: rgba(155, 89, 182, 0.6);
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.12), rgba(142, 68, 173, 0.08));
}

.sf-row-image-desc .sf-col-image .stamp-modal-upload {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
    padding: 1rem;
    box-sizing: border-box;
}
.sf-row-image-desc .sf-col-image .stamp-modal-upload .sf-upload-placeholder {
    padding: 0 0.5rem;
    box-sizing: border-box;
}
.sf-row-image-desc .sf-col-image .stamp-modal-upload .stamp-modal-upload-text {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.sf-row-image-desc .sf-col-image .stamp-modal-upload .sf-img-preview {
    border-radius: 12px;
}

.stamp-modal-light .stamp-modal-upload-icon {
    font-size: 2rem;
    color: rgba(155, 89, 182, 0.5);
}

.stamp-modal-light .stamp-modal-upload-text {
    margin: 0.5rem 0 0 0;
    font-size: 0.8rem;
    color: #999;
}

.stamp-modal-light .stamp-modal-btn {
    width: 100%;
    padding: 0.9rem;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.3);
}

.stamp-modal-light .stamp-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(233, 30, 140, 0.4);
}

.stamp-modal-light .stamp-modal-btn:disabled {
    background: #e0e0e0;
    color: #999;
    cursor: not-allowed;
    box-shadow: none;
}

.stamp-modal-light .stamp-modal-btn:disabled:hover {
    transform: none;
}

.stamp-modal-light .stamp-modal-cost-box {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1rem;
}

.stamp-modal-light .stamp-modal-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stamp-modal-light .stamp-modal-cost-row + .stamp-modal-cost-row {
    margin-top: 0.5rem;
}

.stamp-modal-light .stamp-modal-cost-label {
    color: #666;
    font-size: 0.85rem;
}

.stamp-modal-light .stamp-modal-cost-value {
    color: #333;
    font-weight: 600;
}

.stamp-modal-light .stamp-modal-balance {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    color: #999;
}

.stamp-modal-light .stamp-modal-balance-value {
    color: #e91e8c;
    font-weight: 600;
}

.stamp-modal-light .stamp-modal-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    text-align: left;
}

.stamp-modal-light .stamp-modal-warning {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #e74c3c;
}

/* Slide 2 - Configuration overrides */
.stamp-modal-light #stampSlide1 > div[style*="background: linear-gradient"] {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
}

.stamp-modal-light #stampSlide1 span[style*="color: rgba(255,255,255"] {
    color: #666 !important;
}

.stamp-modal-light #stampSlide1 span[style*="color: #fff"] {
    color: #333 !important;
}

.stamp-modal-light #stampSlide1 input[type="number"] {
    background: #fff !important;
    border: 2px solid #e91e8c !important;
    color: #e91e8c !important;
    text-shadow: none !important;
}

/* Collection Rules: each field keeps its own color (override above for these inputs only) */
.stamp-modal-light #stampSlide1 .sf-cr-to-win .sf-stamp-count-input input[type="number"] {
    border-color: #e67e22 !important;
    color: #e67e22 !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-to-win .sf-stamp-count-input input[type="number"]:focus {
    border-color: #e67e22 !important;
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2) !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-to-win .sf-stamp-count-input input[type="number"][readonly] {
    opacity: 0.5 !important;
    border-color: #bbb !important;
    color: #888 !important;
    background: #f0f0f0 !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-to-win .sf-stamp-count-input input[type="number"][readonly]:focus {
    border-color: #bbb !important;
    box-shadow: none !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-per-day .sf-stamp-count-input input[type="number"] {
    border-color: #27ae60 !important;
    color: #27ae60 !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-per-day .sf-stamp-count-input input[type="number"]:focus {
    border-color: #27ae60 !important;
    box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2) !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-total .sf-stamp-count-input input[type="number"] {
    border-color: #9b59b6 !important;
    color: #9b59b6 !important;
}
.stamp-modal-light #stampSlide1 .sf-cr-total .sf-stamp-count-input input[type="number"]:focus {
    border-color: #9b59b6 !important;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.2) !important;
}
/* No offer type selected: disable and grey out form sections */
#stampSlide1.sf-no-offer-type .sf-image-upload-wrap,
#stampSlide1.sf-no-offer-type .sf-number-of-wrap,
#stampSlide1.sf-no-offer-type .sf-col-desc > .sf-config-box,
#stampSlide1.sf-no-offer-type .sf-desc-textarea-wrap,
#stampSlide1.sf-no-offer-type .sf-cr-to-win,
#stampSlide1.sf-no-offer-type .sf-cr-per-day,
#stampSlide1.sf-no-offer-type .sf-cr-total,
#stampSlide1.sf-no-offer-type .sf-min-purchase-row,
#stampSlide1.sf-no-offer-type .sf-summary-acknowledge-row {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}
#stampSlide1.sf-treasure-offer .sf-min-purchase-row {
    pointer-events: none;
    opacity: 0.5;
    filter: grayscale(1);
}
.stamp-modal-light #stampSlide1 button[style*="border: 2px solid rgba(255,214,69"] {
    background: #fff !important;
    border: 2px solid #e91e8c !important;
    color: #e91e8c !important;
}

.stamp-modal-light #stampSlide1 .stamp-preset-btn {
    background: #fff !important;
    border-color: #e0e0e0 !important;
    color: #666 !important;
}

.stamp-modal-light #stampSlide1 .stamp-preset-btn:hover {
    border-color: #e91e8c !important;
    color: #e91e8c !important;
}

.stamp-modal-light #stampSlide1 i[style*="color: #ffd645"],
.stamp-modal-light #stampSlide1 i[style*="color: rgba(255,214,69"] {
    color: #e91e8c !important;
}

/* Slider track visibility */
.stamp-modal-light .stamp-slider,
.stamp-modal-light input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #e0e0e0 !important;
    border-radius: 4px;
    outline: none;
}

.stamp-modal-light .stamp-slider::-webkit-slider-thumb,
.stamp-modal-light input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.stamp-modal-light .stamp-slider-pink::-webkit-slider-thumb {
    background: #e91e8c;
}

.stamp-modal-light .stamp-slider-purple::-webkit-slider-thumb {
    background: #9b59b6;
}

.stamp-modal-light .stamp-slider::-moz-range-track,
.stamp-modal-light input[type="range"]::-moz-range-track {
    background: #e0e0e0 !important;
    height: 8px;
    border-radius: 4px;
}

.stamp-modal-light .stamp-slider::-moz-range-thumb,
.stamp-modal-light input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.stamp-modal-light .stamp-slider-pink::-moz-range-thumb {
    background: #e91e8c;
}

.stamp-modal-light .stamp-slider-purple::-moz-range-thumb {
    background: #9b59b6;
}

/* Total Required section - remove glow and fix text colors */
.stamp-modal-light #stampSlide1 div[style*="text-shadow"] {
    text-shadow: none !important;
}

.stamp-modal-light #stampSlide1 #totalKloutRequired,
.stamp-modal-light #stampSlide1 #totalAuraRequired {
    text-shadow: none !important;
}

.stamp-modal-light #stampSlide1 div[style*="color: rgba(255,255,255,0.6)"] {
    color: #666 !important;
}

/* Total Required box text fixes */
.stamp-modal-light #stampSlide1 div[style*="background: linear-gradient(135deg, rgba(233,30,140"] {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
}

.stamp-modal-light #stampSlide1 div[style*="background: linear-gradient(135deg, rgba(233,30,140"] span {
    color: #666 !important;
}

.stamp-modal-light
    #stampSlide2
    div[style*="background: linear-gradient(135deg, rgba(233,30,140"]
    div[style*="font-size: 0.7rem"] {
    color: #666 !important;
}

/* Balance section text */
.stamp-modal-light #stampSlide1 div[style*="display: flex; justify-content: space-around"] span {
    color: #666 !important;
}

/* Slide 3 - Review overrides */
.stamp-modal-light #stampSlide3 span[style*="color: rgba(255,255,255"] {
    color: #666 !important;
}

.stamp-modal-light #stampSlide3 span[style*="color: #fff"] {
    color: #333 !important;
}

.stamp-modal-light #stampSlide3 div[style*="background: rgba(0,0,0"] {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
}

.stamp-modal-light #stampSlide3 div[style*="background: linear-gradient(135deg, rgba(233,30,140"] {
    background: #f9f9f9 !important;
    border: 1px solid #e0e0e0 !important;
}

/* Slide 3 - All text overrides */
.stamp-modal-light #stampSlide3 p[style*="color: rgba(255,255,255"] {
    color: #666 !important;
}

.stamp-modal-light #stampSlide3 p[style*="color: #fff"] {
    color: #333 !important;
}

.stamp-modal-light #stampSlide3 div[style*="color: rgba(255,255,255"] {
    color: #666 !important;
}

.stamp-modal-light #stampSlide3 div[style*="color: #fff"] {
    color: #333 !important;
}

/* Order summary section */
.stamp-modal-light #stampSlide3 div[style*="border-bottom: 1px solid rgba(255,255,255"] {
    border-bottom-color: #e0e0e0 !important;
}

/* Warning text at bottom */
.stamp-modal-light #stampSlide3 p {
    color: #666 !important;
}

/* All white text in slide 3 */
.stamp-modal-light #stampSlide3 * {
    text-shadow: none !important;
}

.stamp-modal-light #stampSlide3 [style*="color: #fff"],
.stamp-modal-light #stampSlide3 [style*="color:#fff"],
.stamp-modal-light #stampSlide3 [style*="color: rgba(255,255,255,0."] {
    color: #666 !important;
}

.stamp-modal-light #stampSlide3 [style*="color: rgba(255,255,255,1)"],
.stamp-modal-light #stampSlide3 [style*="color: white"] {
    color: #333 !important;
}

/* Create button should have white text */
.stamp-modal-light #stampSlide3 #createStampBtn,
.stamp-modal-light #stampSlide3 #createStampBtn *,
.stamp-modal-light #stampSlide3 #createStampBtn i,
.stamp-modal-light #stampSlide3 #createStampBtn span,
.stamp-modal-light #stampSlide1 #createStampBtn,
.stamp-modal-light #stampSlide1 #createStampBtn *,
.stamp-modal-light #stampSlide1 #createStampBtn i,
.stamp-modal-light #stampSlide1 #createStampBtn span {
    color: #fff !important;
}

/* Acknowledgment checkbox label - same size/weight as "You have... remaining" subtitle (Create New Offer modal) */
.stamp-modal-light #stampSlide3 label[for="stampAcknowledgeCheckbox"],
.stamp-modal-light #stampSlide1 label[for="stampAcknowledgeCheckbox"],
#createOfferModal label[for="stampAcknowledgeCheckbox"],
#createOfferModal .sf-acknowledge-label {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    text-transform: none !important;
}

.stamp-modal-light #stampSlide3 label[for="stampAcknowledgeCheckbox"] *,
.stamp-modal-light #stampSlide1 label[for="stampAcknowledgeCheckbox"] *,
#createOfferModal .sf-acknowledge-label * {
    text-transform: none !important;
}

/* Create New Offer / Challenge modal: fixed 9:16 aspect ratio; outer clips so scrollbar respects rounded corners */
#createOfferModal.sf-create-offer-modal-outer {
    aspect-ratio: 9 / 16;
    max-height: 90vh;
    height: 90vh;
    width: auto;
    max-width: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}
#createChallengeModal.sf-create-offer-modal-outer {
    max-height: 90vh;
    height: auto;
    width: 420px;
    max-width: 95vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}
.sf-create-offer-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.sf-create-offer-modal-scroll::-webkit-scrollbar {
    display: none;
}
.sf-create-offer-modal-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    padding: 0 0 0.75rem 0;
    text-align: center;
    letter-spacing: -0.02em;
    color: #e91e8c;
    background: linear-gradient(135deg, #e91e8c 0%, #9b59b6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px solid rgba(233, 30, 140, 0.25);
}

/* Challenge modal: remove inherited padding so hero image touches edges */
#createChallengeModal.sf-create-offer-modal-outer {
    padding: 0 !important;
}
#createChallengeModal .sf-create-offer-modal-scroll > .sf-slide {
    padding: 0 1rem 1rem;
}
#createChallengeModal .sf-col-image {
    flex: 0 0 55%;
    max-width: 55%;
    min-width: 0;
}
#createChallengeModal .sf-col-desc {
    flex: 0 0 calc(45% - 1rem);
    max-width: calc(45% - 1rem);
    min-width: 0;
}
#createChallengeModal .stamp-modal-input,
#createChallengeModal .stamp-modal-textarea,
#createChallengeModal .sf-offer-type-select,
#createChallengeModal .sf-challenge-type-trigger {
    font-size: 0.88rem;
    font-weight: 400;
    text-align: left;
}
#createChallengeModal .stamp-modal-input::placeholder,
#createChallengeModal .stamp-modal-textarea::placeholder {
    font-weight: 400;
}
#createChallengeModal .sf-challenge-type-trigger {
    font-weight: 400;
}
.sf-input-icon-wrap {
    position: relative;
}
.sf-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #e91e8c;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}
.sf-input-with-icon {
    padding-left: 2.2rem !important;
}
.sf-dates-card {
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0.25rem;
}
.sf-dates-card-row {
    display: flex;
    align-items: center;
}
.sf-dates-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    flex-shrink: 0;
    color: #22c55e;
    font-size: 0.8rem;
    padding-left: 6px;
}
.sf-dates-card-icon-end {
    color: #e91e8c;
}
.sf-dates-card-icon-expiry {
    color: #f59e0b;
}
.sf-dates-card-input {
    flex: 1;
    min-width: 0;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 400;
    color: #333;
    background: transparent;
    border: none;
    padding: 0.55rem 0.5rem 0.55rem 0;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
}
.sf-dates-card-input:focus {
    background: rgba(233,30,140,0.04);
}
.sf-dates-card-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0 8px;
}

/* Visit Location fields card */
.sf-visit-fields-card {
    background: linear-gradient(135deg, #fdf2f8 0%, #f0f4ff 100%);
    border: 1px solid #e8d5f5;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.8rem;
}
.sf-visit-fields-header {
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.82rem;
    color: #a855a8;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sf-visit-fields-row {
    display: flex;
    gap: 1rem;
}
.sf-visit-field {
    flex: 1;
    min-width: 0;
}
.sf-visit-field-label,
#createChallengeModal .sf-visit-field-label {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #666;
    margin-bottom: 0.3rem;
    text-align: left;
}
.sf-stamp-count-compact {
    transform: scale(0.92);
    transform-origin: left center;
}
.sf-visit-duration-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.sf-visit-duration-unit {
    font-family: "Fredoka", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    color: #999;
    white-space: nowrap;
}

.sf-settings-card-slider {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.sf-settings-slider-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sf-settings-slider {
    flex: 1;
    min-width: 0;
}
.sf-settings-slider-val {
    min-width: 3rem;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
}
.sf-stamp-summary-value {
    font-family: "Fredoka", sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e91e8c;
    line-height: 1;
    padding-top: 0.35rem;
}
.sf-stamp-summary-left {
    text-align: center;
}
.sf-stamp-summary-gamifeye {
    color: #9b59b6;
}
.sf-offer-hunt-col-main {
    flex: 0 0 40% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sf-offer-hunt-col-stat {
    flex: 0 0 calc(30% - 0.5rem) !important;
    text-align: center;
}
.sf-offer-hunt-col-stat .sf-stamp-summary-value {
    font-size: 1rem;
    font-weight: 600;
}
.sf-offer-hunt-col-stat .sf-visit-field-label {
    text-align: center;
}
.sf-slider-purchase-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.sf-slider-purchase-col-slider {
    flex: 0 0 60%;
    min-width: 0;
}
.sf-slider-purchase-col-purchase {
    flex: 0 0 calc(40% - 1rem);
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.sf-min-purchase-input {
    margin-top: 0.15rem;
    font-size: 0.85rem !important;
    padding: 0.4rem 0.6rem !important;
}

.sf-collection-rules-inline {
    margin: 0;
}
.sf-collection-rules-inline .sf-collection-rules-col {
    flex: 1;
    min-width: 0;
}

.sf-offer-hunt-card {
    background: linear-gradient(135deg, #f0f4ff 0%, #fef6f0 100%);
    border-color: #d5dff5;
}
.sf-offer-hunt-header {
    color: #e91e8c;
}

/* Challenge modal hero banner */
.sf-challenge-hero {
    position: relative;
    width: 100%;
    height: 160px;
    flex-shrink: 0;
    border-radius: 18px 18px 0 0;
}
.sf-challenge-hero-img {
    border-radius: 18px 18px 0 0;
}
.sf-challenge-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.sf-challenge-hero-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none;
}
.sf-challenge-hero-title {
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border-bottom: none;
    z-index: 2;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: #e91e8c;
    color: #e91e8c;
    font-weight: 900;
    -webkit-text-stroke: 1px #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.sf-challenge-hero-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
}
.sf-challenge-hero-left {
    flex: 1 1 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sf-challenge-hero-left .stamp-modal-input {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sf-challenge-hero-left .sf-challenge-type-trigger,
.sf-challenge-hero-left .sf-offer-type-select {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.sf-hero-selects-row {
    display: flex;
    gap: 0.5rem;
}
.sf-hero-select-half {
    flex: 1;
    min-width: 0;
}
.sf-hero-selects-row .sf-challenge-type-dropdown {
    min-width: max-content;
}
.sf-challenge-hero-right {
    flex: 0 0 30%;
    min-width: 0;
}
.sf-challenge-hero-right .sf-challenge-hero-upload-btn {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
}
.sf-challenge-hero-upload {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    z-index: 3;
}
.sf-challenge-hero-upload-btn {
    width: 110px;
    height: 110px;
    border-radius: 16px;
    border: 2.5px dashed rgba(255,255,255,0.8);
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}
.sf-challenge-hero-upload-btn:hover {
    border-color: #e91e8c;
    background: rgba(233,30,140,0.15);
}
.sf-challenge-hero-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    text-align: center;
    padding: 0.5rem;
}
.sf-challenge-hero-upload-placeholder i {
    font-size: 1.6rem;
}
.sf-challenge-hero-upload-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}
.sf-img-preview-hidden {
    display: none !important;
}
.sf-create-offer-modal-outer .daily-bonus-close {
    flex-shrink: 0;
}
#createChallengeModal .daily-bonus-close {
    z-index: 10;
}

/* Ensure all stamp modal slides have consistent height */
.stamp-modal-light #stampSlide1,
.stamp-modal-light #stampSlide1,
.stamp-modal-light #stampSlide3 {
    min-height: 520px;
}

/* =====================================================
   STAMP FORGE - STAMP CARD STYLES
   ===================================================== */

/* Stamps Grid */
.stamps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Stamp Card - Flip Card System */
.stamp-card-wrapper {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.stamp-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.stamp-card-wrapper.flipped .stamp-card {
    transform: rotateY(180deg);
}

.stamp-card-front,
.stamp-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
}

.stamp-card-front {
    background: transparent;
    z-index: 2;
}

.stamp-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    z-index: 1;
}

.stamp-card-back-content {
    padding: 30px 20px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
}

.stamp-back-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-align: center;
}

.stamp-back-description {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.stamp-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stamp-detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.stamp-detail-value {
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.stamp-progress-container {
}

.stamp-progress-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    text-align: center;
}

.stamp-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.stamp-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #e91e8c, #9b59b6);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.stamp-progress-percent {
    font-size: 12px;
    color: #e91e8c;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

.stamp-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(15px);
    transform: scale(1.2);
}

.stamp-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.7) 0%,
        rgba(26, 26, 46, 0.85) 50%,
        rgba(26, 26, 46, 0.95) 100%
    );
}

/* Pending approval stamp: overlay and disabled state */
.stamp-card-wrapper--pending .stamp-card-front {
    opacity: 0.92;
}

.stamp-card-pending-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 46, 0.75);
    pointer-events: auto;
    box-sizing: border-box;
}

.stamp-card-pending-overlay .stamp-card-pending-text {
    flex: 0 0 90%;
    width: 90%;
    max-width: 90%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    line-height: 1.2;
    font-weight: 700;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.4);
    text-align: center;
}

.stamp-card-pending-text i {
    flex-shrink: 0;
    font-size: 1rem;
}

/* Rejected stamp: greyscale ONLY on images – NOT on overlay, so orange badge stays orange */
.stamp-card-wrapper--rejected .stamp-card-bg,
.stamp-card-wrapper--rejected .stamp-card-circle-image {
    filter: grayscale(100%);
}
.stamp-card-wrapper--rejected .stamp-card-front {
    opacity: 0.95;
}
/* Overlay must not inherit filter – it's a sibling of -bg and -content, so no filter here */

.stamp-card-rejected-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 46, 0.82);
    pointer-events: auto;
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    filter: none !important;
}

.stamp-card-rejected-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: "Fredoka", sans-serif;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    padding: 12px 16px;
    background: #ea580c !important;
    background-color: #ea580c !important;
    border-radius: 12px;
    border: 2px solid #c2410c !important;
    box-shadow: 0 2px 12px rgba(234, 88, 12, 0.6);
    width: 90%;
    max-width: 90%;
    box-sizing: border-box;
    filter: none !important;
    text-align: center;
}

.stamp-card-rejected-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stamp-card-rejected-title i {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #ffffff !important;
    filter: none !important;
}

.stamp-card-rejected-reason {
    margin-top: 4px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    word-break: break-word;
    width: 100%;
}

.stamp-card-rejected-refund {
    margin-top: 12px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.5;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    max-width: 90%;
    filter: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stamp-card-rejected-refund-label,
.stamp-card-rejected-refund-klout,
.stamp-card-rejected-refund-aura {
    display: block;
}

.stamp-add-btn--disabled {
    cursor: default;
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.stamp-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}

.stamp-card-top-actions {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
}

.stamp-card-delete-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 20;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 53, 69, 0.9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.stamp-card-delete-btn:hover {
    background: #dc3545;
    transform: scale(1.05);
}
.stamp-card-delete-btn i {
    font-size: 1rem;
}

.stamp-card-main-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
}

.stamp-card-actions {
    display: flex;
    gap: 8px;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.stamp-action-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
}

.stamp-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.stamp-card-circle-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    position: relative;
    z-index: 5;
}

.stamp-card-title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.2;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.stamp-card-description {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.3;
    margin-bottom: 16px;
    max-height: 52px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.stamp-card-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: 50px;
}

.stamp-card-stats {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
}

.stamp-stat-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    flex: 1;
    min-width: 0;
}

.stamp-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1;
}

.stamp-stat-label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.stamp-card-bottom-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.stamp-add-btn {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.stamp-add-btn:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
}

.stamp-add-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.stamp-add-btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stamp-add-btn-main i {
    font-size: 14px;
}

.stamp-add-btn-subtitle {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
}

.stamp-card-rewards {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.stamp-reward-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.stamp-reward-badge.klout {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    color: #fff;
}

.stamp-reward-badge.aura {
    background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
}

.stamp-reward-badge i {
    font-size: 11px;
}

.stamp-card-flip-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    z-index: 2;
}

.stamp-card-flip-hint i {
    font-size: 12px;
}

/* Stamp Preset Buttons */
.stamp-preset-btn {
    padding: 0.3rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 214, 69, 0.3);
    background: rgba(255, 214, 69, 0.1);
    color: rgba(255, 214, 69, 0.8);
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.stamp-preset-btn:hover {
    background: rgba(255, 214, 69, 0.2);
    border-color: rgba(255, 214, 69, 0.5);
    color: #ffd645;
}

/* Stamp Sliders */
.stamp-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    margin: 0;
}

.stamp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.stamp-slider-pink::-webkit-slider-thumb {
    background: linear-gradient(135deg, #e91e8c, #c2185b);
    box-shadow: 0 2px 10px rgba(233, 30, 140, 0.5);
}

.stamp-slider-purple::-webkit-slider-thumb {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    box-shadow: 0 2px 10px rgba(155, 89, 182, 0.5);
}

.stamp-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.stamp-slider-pink::-moz-range-thumb {
    background: linear-gradient(135deg, #e91e8c, #c2185b);
}

.stamp-slider-purple::-moz-range-thumb {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

/* Stamp Adjust Buttons */
.stamp-adjust-btn:hover {
    background: linear-gradient(135deg, rgba(255, 214, 69, 0.2), rgba(243, 156, 18, 0.1)) !important;
    border-color: rgba(255, 214, 69, 0.6) !important;
}

/* Mobile Responsive - Stamp Cards */
@media (max-width: 1200px) {
    .stamps-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 992px) {
    .stamps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .stamps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem;
    }

    .stamp-card-wrapper {
        aspect-ratio: 3 / 4;
    }

    .stamp-card-circle-image {
        width: 90px;
        height: 90px;
        border-width: 2px;
        margin-bottom: 8px;
    }

    .stamp-card-title {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .stamp-card-description {
        font-size: 11px;
        margin-bottom: 10px;
        max-height: 42px;
    }

    .stamp-card-content {
        padding: 16px;
    }

    .stamp-stat-value {
        font-size: 14px;
    }

    .stamp-stat-label {
        font-size: 8px;
    }

    .stamp-card-bottom-section {
        margin-bottom: 30px;
    }

    .stamp-card-flip-hint {
        font-size: 9px;
        bottom: 12px;
    }

    .stamp-card-top-actions {
        top: 8px;
        left: 8px;
        right: 8px;
    }

    .stamp-reward-badge {
        font-size: 9px;
        padding: 4px 8px;
    }

    .stamp-reward-badge i {
        font-size: 9px;
    }

    .stamp-add-btn {
        padding: 8px 12px;
        font-size: 12px;
        margin-top: 10px;
    }

    .stamp-add-btn-main {
        gap: 6px;
    }

    .stamp-add-btn-main i {
        font-size: 12px;
    }

    .stamp-add-btn-subtitle {
        font-size: 9px;
    }

    .stamp-card-back-content {
        padding: 20px 15px;
        padding-top: 50px;
        font-size: 12px;
    }

    .stamp-back-title {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .stamp-back-description {
        font-size: 10px;
        margin-bottom: 10px;
    }

    .stamp-detail-item {
        padding: 6px 0;
    }

    .stamp-detail-label,
    .stamp-detail-value {
        font-size: 11px;
    }
}

/* =====================================================
   HONEYCOMBS PAGE STYLES
   ===================================================== */

/* Honeycombs Grid */
.honeycombs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Honeycomb Card - Flip Card System */
.honeycomb-card-wrapper {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* Disabled Honeycomb Styles */
.honeycomb-card-wrapper.honeycomb-disabled {
    pointer-events: auto;
}

.honeycomb-card-wrapper.honeycomb-disabled .honeycomb-card {
    cursor: not-allowed;
}

.honeycomb-card-wrapper.honeycomb-disabled .honeycomb-card-front::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    border-radius: 20px;
}

.honeycomb-disabled-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    color: #fff;
    padding: 1rem;
}

.honeycomb-disabled-overlay i {
    font-size: 2.5rem;
    color: #e74c3c;
}

.honeycomb-disabled-overlay span {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.1;
}

.honeycomb-upgrade-link {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.honeycomb-upgrade-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.4);
    color: #fff;
}

.honeycomb-hex-badge.exceeded {
    background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
}

.hex-limit-indicator {
    opacity: 0.7;
    font-size: 0.8em;
}

.honeycomb-view-btn-disabled {
    background: rgba(100, 100, 100, 0.6) !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.honeycomb-exceeded-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid rgba(231, 76, 60, 0.4);
    border-radius: 8px;
    color: #e74c3c;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.honeycomb-exceeded-warning i {
    font-size: 1rem;
    flex-shrink: 0;
}

.honeycomb-upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.honeycomb-upgrade-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.4);
    color: #fff;
}

.text-danger {
    color: #e74c3c !important;
}

.honeycomb-card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.honeycomb-card-wrapper .honeycomb-card.flipped {
    transform: rotateY(180deg);
}

.honeycomb-card-front,
.honeycomb-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
}

.honeycomb-card-front {
    z-index: 2;
}

.honeycomb-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* Honeycomb Card Background */
.honeycomb-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(0);
}

.honeycomb-card-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 26, 46, 0.5) 0%,
        rgba(26, 26, 46, 0.7) 50%,
        rgba(26, 26, 46, 0.95) 100%
    );
}

.honeycomb-card-bg-placeholder {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

/* Honeycomb Card Content */
.honeycomb-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    font-family: "Fredoka", sans-serif;
}

/* Honeycomb Top Actions */
.honeycomb-card-top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    z-index: 10;
}

/* Front card: keep delete in flow so it aligns with left badge */
.honeycomb-card-front .honeycomb-card-top-actions .honeycomb-card-actions.honeycomb-card-top-actions-right {
    position: static;
}

.honeycomb-top-left-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.honeycomb-hex-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    padding: 6px 12px;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.honeycomb-hex-badge i {
    font-size: 12px;
}

.honeycomb-top-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    padding: 6px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.honeycomb-top-stat i {
    color: #2ecc71;
    font-size: 12px;
}

.honeycomb-top-stat-text {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Honeycomb Bottom Section */
.honeycomb-card-bottom-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;
}

.honeycomb-card-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin: 12px 0 2px 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.honeycomb-card-created {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 2px 0;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.honeycomb-card-created-label {
    font-weight: 600;
}

.honeycomb-card-location {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    margin-bottom: 12px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    text-align: center;
}

/* Honeycomb View Button */
.honeycomb-view-btn {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.3);
    text-decoration: none;
}

.honeycomb-view-btn:hover {
    background: linear-gradient(135deg, #27ae60 0%, #1e8449 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
    color: #fff;
}

.honeycomb-view-btn-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.honeycomb-view-btn-main {
    display: flex;
    align-items: center;
    gap: 8px;
}

.honeycomb-view-btn-main i {
    font-size: 14px;
}

.honeycomb-view-btn-date {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
}

/* Compact View Button */
.honeycomb-view-btn.honeycomb-view-btn-compact {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
}
.honeycomb-view-btn-compact i {
    font-size: 12px;
}
.honeycomb-btn-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}

/* Editable Title */
.honeycomb-title-editable {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.honeycomb-title-editable .honeycomb-card-title {
    text-align: center;
}
.honeycomb-edit-title-btn {
    position: absolute;
    right: -28px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    flex-shrink: 0;
}
.honeycomb-title-editable:hover .honeycomb-edit-title-btn {
    opacity: 1;
}
.honeycomb-edit-title-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}
.honeycomb-edit-title-btn i {
    font-size: 10px;
    color: #fff;
}
.honeycomb-title-input {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e91e8c;
    border-radius: 6px;
    padding: 4px 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    width: 100%;
    max-width: 200px;
}
.honeycomb-title-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.2);
}

/* Honeycomb Flip Hint */
.honeycomb-card-flip-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: "Fredoka", sans-serif;
}

/* Honeycomb Card Back */
.honeycomb-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.honeycomb-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.honeycomb-action-btn:hover {
    background: rgba(231, 76, 60, 1);
    transform: scale(1.05);
}

.honeycomb-card-back-content {
    padding: 30px 20px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.honeycomb-back-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #2ecc71;
}

.honeycomb-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.honeycomb-detail-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.honeycomb-detail-value {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

/* Honeycombs Empty State */
.honeycombs-empty {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.05) 0%, rgba(39, 174, 96, 0.05) 100%);
    border-radius: 20px;
    border: 2px dashed rgba(46, 204, 113, 0.3);
    margin-top: 1.5rem;
}

.honeycombs-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(39, 174, 96, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.honeycombs-empty-icon i {
    font-size: 2.5rem;
    color: #2ecc71;
}

.honeycombs-empty h3 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.honeycombs-empty p {
    font-family: "Fredoka", sans-serif;
    color: #666;
    margin-bottom: 1.5rem;
}

.honeycomb-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.honeycomb-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3);
    color: #fff;
}

/* ===================================================== */

/* Toast */
.dash-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: #1a1a2e;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s;
    font-family: "Fredoka", sans-serif;
}

.dash-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.dash-toast-icon {
    color: #10b981;
    font-size: 1.25rem;
}

.dash-toast-title {
    display: block;
    font-weight: 600;
    color: #fff;
    font-family: "Fredoka", sans-serif;
}

.dash-toast-amount {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Fredoka", sans-serif;
}

/* Airdrop Phone Preview Modal (9:16) */
.airdrop-phone-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1050;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.airdrop-phone-overlay.active {
    display: flex;
}
.airdrop-phone-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: slideDown 0.3s ease;
}
.airdrop-phone-close {
    position: absolute;
    top: -14px;
    right: -14px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}
.airdrop-phone-close:hover {
    background: rgba(0,0,0,0.9);
}
.airdrop-phone-frame {
    width: 360px;
    aspect-ratio: 9 / 16;
    max-height: calc(100vh - 120px);
    border-radius: 20px;
    overflow: hidden;
    border: 3px solid #e84393;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    background: #111;
}
.airdrop-phone-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.airdrop-phone-open-link {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    text-decoration: none;
    transition: color 0.2s;
}
.airdrop-phone-open-link:hover {
    color: #fff;
}
@media (max-width: 420px) {
    .airdrop-phone-frame {
        width: calc(100vw - 3rem);
    }
}

/* Delete Modal */
.mission-delete-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mission-delete-overlay.active {
    display: flex;
}

.mission-delete-modal {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}

.mission-delete-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(231, 76, 60, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.mission-delete-icon i {
    font-size: 1.75rem;
    color: #e74c3c;
}

.mission-delete-title {
    font-size: 1.25rem;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.mission-delete-name {
    font-size: 1rem;
    font-weight: 600;
    color: #e91e8c;
    margin: 0 0 0.5rem 0;
}

.mission-delete-text {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 1.5rem 0;
}

.mission-delete-actions {
    display: flex;
    gap: 0.75rem;
}

.mission-delete-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all 0.2s;
}

.mission-delete-btn.cancel {
    background: #f0f0f0;
    color: #666;
}

.mission-delete-btn.confirm {
    background: #e74c3c;
    color: #fff;
}

.mission-delete-btn.confirm:hover {
    background: #c0392b;
}

/* Mission Create Styles */
.mission-back-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mission-back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    text-decoration: none;
    font-size: 0.9rem;
}

.mission-back-btn:hover {
    color: #e91e8c;
}

.mission-setup-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: start;
    width: 100%;
}

.mission-setup-layout.hidden {
    display: none !important;
}

@media (max-width: 768px) {
    .mission-setup-layout {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Hide stamp selection section until quest type is selected on mobile */
    #stampSelectionSection.mobile-hidden {
        display: none !important;
    }
}

.missions-create-flow {
    max-width: 1200px;
}

.mission-setup-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: opacity 0.3s, filter 0.3s;
}

.mission-setup-card.disabled {
    opacity: 0.5;
    pointer-events: none;
    filter: grayscale(30%);
}

.mission-setup-card.disabled .mission-step-badge {
    background: #ccc !important;
}

.mission-step-section {
    margin-bottom: 0em;
}

.mission-step-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mission-step-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.mission-step-header strong {
    display: block;
    color: #1a1a2e;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.mission-step-header p {
    color: #888;
    font-size: 0.85rem;
    margin: 0;
}

.mission-input-group {
    margin-bottom: 1rem;
}

/* Compact Limits Row */
.mission-limits-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
}

.mission-limit-field {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.mission-label-compact {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 0.35rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mission-input-compact {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: "Fredoka", sans-serif;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

.mission-input-compact::-webkit-outer-spin-button,
.mission-input-compact::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mission-input-compact:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

select.mission-input-compact {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
    text-align: left;
    text-align-last: center;
}

.mission-input-compact::placeholder {
    color: #aaa;
    font-size: 0.8rem;
}

/* Reward Image + Description Row */
.mission-reward-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mission-reward-image-col {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
}

.mission-reward-desc-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
}

.mission-image-upload-compact {
    width: 100px;
    height: 100px;
    border: 2px dashed #ddd;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
    background: #f8f9fa;
}

.mission-image-upload-compact:hover {
    border-color: #e91e8c;
    background: #fef7fb;
}

.mission-image-placeholder-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #999;
}

.mission-image-placeholder-compact i {
    font-size: 1.5rem;
}

.mission-image-placeholder-compact span {
    font-family: "Fredoka", sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
}

.mission-image-preview-compact {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mission-textarea-compact {
    width: 100%;
    height: 100px;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: "Fredoka", sans-serif;
    resize: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mission-textarea-compact:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.mission-textarea-compact::placeholder {
    color: #aaa;
}

.mission-char-count-compact {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 0.65rem;
    color: #999;
    font-family: "Fredoka", sans-serif;
}

@media (max-width: 480px) {
    .mission-limits-row {
        gap: 0.5rem;
    }

    .mission-label-compact {
        font-size: 0.7rem;
    }

    .mission-input-compact {
        padding: 0.4rem 0.5rem;
        font-size: 0.85rem;
    }

    .mission-reward-row {
        gap: 0.5rem;
    }

    .mission-reward-image-col {
        flex: 0 0 70px;
    }

    .mission-image-upload-compact {
        width: 70px;
        height: 70px;
    }

    .mission-image-placeholder-compact i {
        font-size: 1.2rem;
    }

    .mission-image-placeholder-compact span {
        font-size: 0.6rem;
    }

    .mission-textarea-compact {
        height: 70px;
        font-size: 0.8rem;
        padding: 0.5rem;
    }

    .mission-char-count-compact {
        font-size: 0.6rem;
        bottom: 4px;
        right: 6px;
    }
}

.mission-input,
.mission-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.mission-input:focus,
.mission-textarea:focus {
    border-color: #e91e8c;
}

.mission-textarea {
    resize: none;
    min-height: 100px;
}

.mission-char-count {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
}

.mission-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 0.5rem;
}

.mission-hint {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
}

.mission-image-upload-area {
    width: 100%;
    min-height: 200px;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
}

.mission-image-upload-area:hover {
    border-color: #e91e8c;
    background: #fff;
}

.mission-image-placeholder {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.mission-image-placeholder i {
    font-size: 2.5rem;
    color: #ccc;
    display: block;
    margin-bottom: 0.5rem;
}

.mission-image-placeholder span {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.mission-image-placeholder small {
    display: block;
    font-size: 0.75rem;
    color: #aaa;
}

.mission-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Stamp Selection */
.mission-stamp-label {
    display: block;
    font-size: 0.85rem;
    color: #888;

    margin-bottom: 0.75rem;
}

.mission-stamp-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.mission-stamp-selection-grid.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Mini Stamp Cards (for mission creation) */
.mini-stamp-card {
    position: relative;
    aspect-ratio: 3 / 4.2;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid transparent;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.mini-stamp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(233, 30, 140, 0.2);
    border-color: rgba(233, 30, 140, 0.5);
}

.mini-stamp-card.selected {
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.3), 0 8px 25px rgba(233, 30, 140, 0.3);
}

.mini-stamp-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(8px) brightness(0.4);
    transform: scale(1.1);
}

.mini-stamp-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 14px 10px;
}

.mini-stamp-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.mini-stamp-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
}

.mini-stamp-badge.klout {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.mini-stamp-badge.aura {
    background: rgba(155, 89, 182, 0.2);
    color: #9b59b6;
    border: 1px solid rgba(155, 89, 182, 0.3);
}

.mini-stamp-badge i {
    font-size: 9px;
}

.mini-stamp-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.mini-stamp-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: #1a1a2e;
}

.mini-stamp-circle-placeholder {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 30px;
}

.mini-stamp-bottom {
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 30px;
}

.mini-stamp-name {
    display: block;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 2px;
}

.mini-stamp-avail {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-family: "Fredoka", sans-serif;
    font-size: 10px;
    font-weight: 500;
}

.mini-stamp-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #e91e8c 0%, #9b59b6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    z-index: 10;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

.mini-stamp-card.selected .mini-stamp-check {
    transform: translate(-50%, -50%) scale(1);
}

/* Responsive adjustments for mini stamp cards */
@media (max-width: 480px) {
    .mission-stamp-selection-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .mini-stamp-card {
        border-radius: 12px;
    }

    .mini-stamp-content {
        padding: 6px;
    }

    .mini-stamp-badge {
        font-size: 8px;
        padding: 2px 4px;
    }

    .mini-stamp-circle,
    .mini-stamp-circle-placeholder {
        width: 55px;
        height: 55px;
    }

    .mini-stamp-name {
        font-size: 10px;
    }

    .mini-stamp-avail {
        font-size: 8px;
    }

    .mini-stamp-check {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
}

/* Old mission stamp card styles - kept for backwards compatibility */
.mission-stamp-card-option {
    position: relative;
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.mission-stamp-card-option:hover {
    border-color: #e91e8c;
    transform: translateY(-2px);
}

.mission-stamp-card-option.selected {
    border-color: #e91e8c;
    box-shadow: 0 0 20px rgba(233, 30, 140, 0.3);
}

.mission-stamp-card-image {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mission-stamp-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mission-stamp-card-placeholder {
    font-size: 2rem;
    color: #ccc;
}

.mission-stamp-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.7rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mission-stamp-card-count {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.65rem;
    border-radius: 4px;
}

.mission-stamp-card-rewards {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f0f0f0;
}

.mission-reward-aura,
.mission-reward-klout {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.7rem;
    color: #666;
}

.mission-stamp-check {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e91e8c;
    color: #fff;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.mission-stamp-card-option.selected .mission-stamp-check {
    display: flex;
}

/* Selected Stamp Row */
.mission-selected-stamp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #666;
    padding: 0.75rem;
    background: rgba(233, 30, 140, 0.1);
    border-radius: 10px;
}

.mission-selected-stamp-name {
    color: #e91e8c;
}

.mission-reselect-link {
    color: #e91e8c;
    text-decoration: none;
}

.mission-back-to-setup-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    border: 1.5px solid #e0e0e0;
    background: #fff;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-left: auto;
    font-family: "Fredoka", sans-serif;
}

.mission-back-to-setup-link:hover {
    color: #e91e8c;
    border-color: #e91e8c;
    background: rgba(233, 30, 140, 0.05);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.15);
}

.mission-back-to-setup-link i {
    font-size: 0.9rem;
}

/* Map Container */
.mission-map-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    margin-top: 1rem;
    border: 1px solid #e0e0e0;
    flex-shrink: 0;
}

.mission-map-element {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Setup Prompt */
.mission-setup-prompt {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(248, 248, 248, 0.98);
    z-index: 10;
    padding: 20px;
    text-align: center;
}

.mission-setup-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.mission-setup-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.mission-setup-text {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    max-width: 300px;
}

.mission-setup-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mission-setup-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

/* Honeycomb Location Selector */
.honeycomb-location-selector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 248, 248, 0.98);
    z-index: 10;
    padding: 20px;
    overflow-y: auto;
}

/* Selected Stamps Preview in Honeycomb Selector */
.honeycomb-selected-stamps {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.honeycomb-stamps-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.honeycomb-stamps-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.honeycomb-stamp-preview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.honeycomb-stamp-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e91e8c;
}

.honeycomb-stamp-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
}

.honeycomb-stamp-name {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.honeycomb-selector-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.honeycomb-selector-header i {
    color: #f39c12;
}

.honeycomb-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.honeycomb-location-card {
    position: relative;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.honeycomb-location-card:hover {
    border-color: #f39c12;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
}

.honeycomb-location-card.selected {
    border-color: #f39c12;
    box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.3);
}

.honeycomb-location-image {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
}

.honeycomb-location-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.honeycomb-location-placeholder i {
    font-size: 2.5rem;
    color: rgba(243, 156, 18, 0.5);
}

.honeycomb-location-info {
    padding: 0.75rem;
}

.honeycomb-location-info strong {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.honeycomb-location-info span {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    color: #888;
}

.honeycomb-location-info span i {
    color: #f39c12;
}

.honeycomb-location-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.4);
}

.honeycomb-location-card.selected .honeycomb-location-check {
    display: flex;
}

.honeycomb-selector-footer {
    text-align: center;
    padding-top: 0.5rem;
    border-top: 1px solid #e0e0e0;
}

.honeycomb-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.honeycomb-manage-link:hover {
    color: #f39c12;
}

/* Honeycomb Empty State */
.honeycomb-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    padding: 2rem;
}

.honeycomb-empty-icon {
    width: 80px;
    height: 80px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.honeycomb-empty-icon i {
    font-size: 2rem;
    color: #f39c12;
}

.honeycomb-empty-state h4 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.5rem 0;
}

.honeycomb-empty-state p {
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 1rem 0;
    max-width: 300px;
}

.honeycomb-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #f39c12, #e67e22);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.honeycomb-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
    color: #fff;
}

.honeycomb-change-location-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(243, 156, 18, 0.5);
    border-radius: 8px;
    color: #f39c12;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.honeycomb-change-location-btn:hover {
    background: #f39c12;
    border-color: #f39c12;
    color: #fff;
}

/* Responsive for honeycomb selector */
@media (max-width: 480px) {
    .honeycomb-location-grid {
        grid-template-columns: 1fr;
    }

    .honeycomb-location-image {
        height: 100px;
    }
}

/* Focal Point Location Selector */
.focal-point-location-selector {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 248, 248, 0.98);
    z-index: 10;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.focal-point-selector-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
}

.focal-point-selector-header i {
    color: #e91e63;
}

.focal-point-selected-location {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fff5f8, #fff);
    border: 2px solid #e91e63;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
}

.focal-point-selected-location i {
    color: #e91e63;
    font-size: 1.25rem;
}

.focal-point-selected-location span {
    flex: 1;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #333;
}

.focal-point-clear-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.focal-point-clear-btn:hover {
    color: #e91e63;
}

.focal-point-proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem;
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 1.5rem;
    transition: all 0.2s;
}

.focal-point-proceed-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.4);
}

.focal-point-proceed-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.focal-point-change-location-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(233, 30, 99, 0.5);
    border-radius: 8px;
    color: #e91e63;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.focal-point-change-location-btn:hover {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
}

.mission-proceed-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1.5rem;
}

/* Quest Type Selection */
.quest-type-selection {
    width: 100%;
    transition: opacity 0.3s ease;
}

.quest-type-selection.disabled,
.stamp-type-selection.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.quest-type-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.stamp-type-selection {
    width: 100%;
    margin-bottom: 1.5rem;
}

.quest-type-label {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

.quest-type-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quest-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f8f8;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quest-type-option:hover {
    border-color: #e91e8c;
    background: #fff;
}

.quest-type-option.selected {
    border-color: #e91e8c;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(155, 89, 182, 0.05));
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.15);
}

.quest-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.quest-type-icon.honeycomb {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.quest-type-icon.focalpoint {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
}

.quest-type-info {
    flex: 1;
    min-width: 0;
}

.quest-type-info strong {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.quest-type-info span {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    color: #888;
    line-height: 1.3;
}

.quest-type-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
}

.quest-type-option.selected .quest-type-check {
    display: flex;
}

/* Responsive for quest type */
@media (max-width: 480px) {
    .quest-type-option {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .quest-type-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .quest-type-info strong {
        font-size: 0.85rem;
    }

    .quest-type-info span {
        font-size: 0.7rem;
    }
}

.mission-proceed-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    margin-top: 0;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mission-proceed-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

.mission-proceed-btn.disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

.mission-proceed-btn i {
    font-size: 1.1rem;
}

/* Center Marker */
.mission-center-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);
    z-index: 15;
    pointer-events: none;
}

.mission-center-marker i {
    font-size: 40px;
    color: #e91e8c;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Stamp Marker Overlay */
.stamp-marker-overlay {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid #e91e8c;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background: #fff;
}

.stamp-marker-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fine-tune Overlay */
.mission-fine-tune-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 12;
}

.mission-aura-info-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(233, 30, 140, 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 13;
}

.mission-aura-info-overlay .mission-aura-stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    margin: 0;
}

.mission-aura-info-overlay .mission-aura-stat i {
    font-size: 0.85rem;
    color: #e91e8c;
    flex-shrink: 0;
}

.mission-aura-info-overlay .mission-aura-stat .value {
    font-size: 0.75rem;
    font-weight: 600;
    color: #e91e8c;
    white-space: nowrap;
}

.mission-fine-tune-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #1a1a2e;
}

.mission-fine-tune-message i {
    color: #e91e8c;
}

.mission-confirm-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 25px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

/* Slider Overlay */
.mission-slider-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(233, 30, 140, 0.3);
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 11;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mission-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.mission-slider-header label {
    font-size: 0.75rem;
    color: #1a1a2e;
}

.mission-slider-value {
    font-size: 1rem;
    font-weight: 700;
    color: #e91e8c;
}

.mission-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #e0e0e0;
    -webkit-appearance: none;
    appearance: none;
}

.mission-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    cursor: pointer;
}

.mission-slider-hint {
    font-size: 0.7rem;
    color: #888;
    text-align: center;
    margin: 4px 0 0 0;
}

/* Aura Info Bar */
.mission-aura-info-bar {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    background: rgba(233, 30, 140, 0.08);
    border: 1px solid rgba(233, 30, 140, 0.2);
    border-radius: 12px;
    margin-top: 1rem;
}

.mission-aura-stat {
    text-align: center;
}

.mission-aura-stat .label {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 0.25rem;
}

.mission-aura-stat .value {
    font-size: 1rem;
    font-weight: 600;
    color: #e91e8c;
}

/* Create Button */
.mission-create-final-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mission-create-final-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

/* Location Modal */
.mission-location-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.mission-location-modal-overlay.active {
    display: flex;
}

.mission-location-modal-content {
    background: #fff;
    border-radius: 20px;
    max-width: 400px;
    width: 100%;
    overflow: visible;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    font-family: "Fredoka", sans-serif;
}

.mission-location-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid #e0e0e0;
}

.mission-location-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    color: #1a1a2e;
    margin: 0;
}

.mission-location-modal-header h3 i {
    color: #e91e8c;
}

.mission-location-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 1.2rem;
    cursor: pointer;
}

.mission-location-modal-body {
    padding: 1.25rem;
    overflow: visible;
}

.mission-location-option-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(233, 30, 140, 0.08);
    border: 1px solid rgba(233, 30, 140, 0.2);
    border-radius: 12px;
    color: #1a1a2e;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.mission-location-option-btn:hover {
    background: rgba(233, 30, 140, 0.15);
}

.mission-location-option-btn i {
    font-size: 1.5rem;
    color: #e91e8c;
}

.mission-location-option-btn strong {
    display: block;
    color: #1a1a2e;
}

.mission-location-option-btn span {
    font-size: 0.8rem;
    color: #888;
}

.mission-location-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: #888;
    font-size: 0.85rem;
}

.mission-location-divider::before,
.mission-location-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.mission-location-divider span {
    padding: 0 1rem;
}

.mission-location-search-section label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1a1a2e;
    margin-bottom: 0.75rem;
}

.mission-location-search-section label i {
    color: #e91e8c;
}

.mission-location-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

.mission-location-search-input:focus {
    border-color: #e91e8c;
    background: #fff;
}

.mission-location-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mission-location-result-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.mission-location-result-item:hover {
    background: rgba(233, 30, 140, 0.08);
}

.mission-location-result-item:last-child {
    border-bottom: none;
}

.mission-location-result-item i {
    color: #e91e8c;
    margin-top: 2px;
}

.mission-location-result-item strong {
    display: block;
    color: #1a1a2e;
    font-size: 0.9rem;
}

.mission-location-result-item span {
    font-size: 0.75rem;
    color: #888;
}

.mission-location-searching,
.mission-location-no-results {
    padding: 1rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    body:has(.pro-dashboard),
    body.bg-black:has(.pro-dashboard) {
        overflow: hidden !important;
        height: 100dvh !important;
    }

    html:has(.pro-dashboard) {
        overflow: hidden !important;
        height: 100dvh !important;
    }

    .dash-header {
        padding: 0.75rem 1rem !important;
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    .dash-header-left {
        flex-shrink: 0;
    }

    .dash-header-right {
        flex-shrink: 0;
    }

    /* Hide desktop balance, show mobile balance */
    .dash-balance {
        display: none !important;
    }

    .dash-mobile-balance {
        display: flex !important;
    }

    /* Hide desktop nav, show mobile menu button */
    .dash-header-nav {
        display: none !important;
    }

    .dash-mobile-menu-btn {
        display: flex !important;
    }

    /* Hide logout button on mobile (moved to dropdown) */
    .dash-logout-btn {
        display: none !important;
    }

    .dash-main {
        padding: 0;
        padding-top: calc(61px + 0.5rem);
        padding-bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .dash-back-link {
        padding: 8px 14px;
        font-size: 0.8rem;
        gap: 8px;
        margin-bottom: 1rem;
    }

    .dash-back-link i {
        font-size: 1rem;
    }

    .pro-dashboard {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* Fix content overflow */
    .dash-stats,
    .dash-actions-grid,
    .dash-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .dash-actions-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .dash-actions-grid::-webkit-scrollbar {
        display: none;
    }

    .dash-action-card {
        display: flex;
        flex: 1;
        min-width: 0;
        padding: 0.75rem 0.5rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 0.5rem;
    }

    .dash-action-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        margin: 0 auto;
    }

    .dash-action-text {
        line-height: 1.2;
    }

    .dash-action-text strong {
        font-size: 0.7rem;
    }

    .dash-action-text span {
        display: none;
    }

    .dash-upgrade-arrow {
        display: none;
    }

    .dash-stat-card,
    .dash-action-card {
        min-width: 0 !important;
    }

    .dash-stats {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .dash-stat-card {
        padding: 0.6rem 0.4rem;
    }

    .dash-stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
        margin-bottom: 0.4rem;
    }

    .dash-stat-value {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    .dash-stat-label {
        font-size: 0.65rem;
    }

    .dash-stat-label-text {
        font-size: 0.6rem;
    }

    .missions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }

    .mission-card-wrapper {
        aspect-ratio: 9 / 16;
    }

    .mission-card {
        border-radius: 16px;
    }

    .mission-card-back {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    }

    .mission-card-back-content {
        padding: 15px 12px;
        padding-top: 45px;
        font-size: 10px;
    }

    .mission-back-title {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .mission-detail-item {
        padding: 4px 0;
    }

    .mission-detail-label,
    .mission-detail-value {
        font-size: 9px;
    }

    .mission-card-content {
        padding: 16px;
    }

    .mission-card-top-actions {
        top: 8px;
        padding: 0 8px;
    }

    .mission-top-left-stack {
        gap: 4px;
    }

    .mission-top-stat {
        padding: 4px 8px;
        gap: 4px;
    }

    .mission-top-stat-image {
        width: 18px;
        height: 18px;
    }

    .mission-top-stat-text {
        font-size: 10px;
    }

    .mission-card-actions-row {
        gap: 6px;
        margin-top: 6px;
    }

    .mission-view-btn {
        padding: 8px 12px;
        font-size: 12px;
        margin-top: 16px;
    }

    .mission-view-btn-main {
        gap: 6px;
    }

    .mission-view-btn-main i {
        font-size: 12px;
    }

    .mission-view-btn-expiry {
        font-size: 9px;
    }

    .mission-card-title-row {
        margin: 10px 0 6px 0;
        gap: 0.4rem;
    }

    .mission-type-icon {
        width: 20px;
        height: 20px;
        font-size: 10px;
        border-radius: 5px;
    }

    .mission-card-title {
        font-size: 16px;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .mission-card-reward-image {
        mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 50%,
            rgba(0, 0, 0, 0) 100%
        );
    }

    .mission-card-description {
        font-size: 10px;
        font-weight: 600;
        margin-bottom: 8px;
        max-height: 40px;
        line-height: 1.2;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }

    .mission-edit-input.title-input {
        font-size: 16px;
        padding: 4px 8px;
    }

    .mission-edit-input.description-input {
        font-size: 10px;
        padding: 4px 8px;
        min-height: 40px;
    }

    .mission-card-bottom-section {
        margin-bottom: 30px;
    }

    .mission-card-stats {
        gap: 6px;
        margin-bottom: 0;
        max-width: 180px;
    }

    .mission-stat-item {
        padding: 6px 8px;
    }

    .mission-stat-value {
        font-size: 12px;
    }

    .mission-stat-label {
        font-size: 7px;
    }

    .mission-card-back-header {
        margin-bottom: 16px;
    }

    .mission-card-back-actions {
        gap: 6px;
        margin-bottom: 12px;
    }

    .mission-back-action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .mission-card-back-title {
        font-size: 16px;
    }

    .mission-card-back-meta {
        gap: 6px;
        margin-bottom: 16px;
    }

    .mission-back-meta-item {
        font-size: 11px;
        gap: 6px;
    }

    .mission-back-meta-item i {
        font-size: 12px;
    }

    .mission-back-mission-name {
        font-size: 14px;
    }

    .mission-back-daily-limit {
        font-size: 9px;
    }

    .mission-card-back-image {
        width: 100px;
        height: 100px;
        margin-bottom: 16px;
    }

    .mission-card-back-info {
        gap: 6px;
        margin-bottom: 16px;
    }

    .mission-back-info-item {
        font-size: 11px;
        gap: 6px;
    }

    .mission-back-info-item i {
        font-size: 12px;
    }

    .mission-card-back-bottom {
        padding: 0 12px;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .mission-back-bottom-item {
        font-size: 9px;
        gap: 4px;
    }

    .mission-back-bottom-item i {
        font-size: 10px;
    }

    .mission-back-stamp-count {
        font-size: 16px;
    }

    .mission-back-bottom-date {
        font-size: 11px;
        width: 100%;
        margin-top: 8px;
    }

    .mission-status-text {
        display: none;
    }

    .mission-status-icon {
        display: inline;
        font-size: 11px;
    }

    .mission-status-badge {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        border-radius: 50%;
    }

    .mission-global-badge {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 10px;
    }

    .mission-action-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        font-size: 11px;
    }

    .mission-card-flip-hint {
        font-size: 9px;
        bottom: 12px;
    }

    /* Honeycombs Mobile */
    .honeycombs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .dash-aura-eyelands-section .honeycombs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .honeycomb-card-wrapper {
        aspect-ratio: 1 / 1;
    }

    .honeycomb-card-content {
        padding: 12px;
    }

    .honeycomb-card-top-actions {
        padding: 0;
    }

    .honeycomb-hex-badge {
        padding: 4px 8px;
        font-size: 12px;
    }

    .honeycomb-hex-badge i {
        font-size: 10px;
    }

    .honeycomb-top-stat {
        padding: 4px 8px;
        gap: 4px;
    }

    .honeycomb-top-stat i {
        font-size: 10px;
    }

    .honeycomb-top-stat-text {
        font-size: 9px;
    }

    .dash-aura-eyelands-section .honeycomb-area-badge {
        font-size: 9px;
    }
    .dash-aura-eyelands-section .honeycomb-area-badge i {
        font-size: 10px;
    }

    .honeycomb-card-title {
        font-size: 14px;
        margin: 8px 0 2px 0;
    }

    .honeycomb-card-created {
        font-size: 10px;
        margin: 0 0 2px 0;
    }

    .honeycomb-card-location {
        font-size: 10px;
        margin-bottom: 8px;
    }

    .honeycomb-card-bottom-section {
        margin-bottom: auto;
    }

    .honeycomb-view-btn {
        padding: 8px 12px;
        font-size: 11px;
        margin-top: 12px;
    }

    .honeycomb-view-btn.honeycomb-view-btn-compact {
        padding: 6px 12px;
        font-size: 10px;
    }

    .honeycomb-view-btn-main {
        gap: 6px;
    }

    .honeycomb-view-btn-main i {
        font-size: 11px;
    }

    .honeycomb-view-btn-date {
        font-size: 8px;
    }

    .honeycomb-title-input {
        max-width: 150px;
        font-size: 0.85rem;
        padding: 3px 8px;
    }

    .honeycomb-edit-title-btn {
        opacity: 1;
        width: 20px;
        height: 20px;
        right: -24px;
    }

    .honeycomb-card-flip-hint {
        font-size: 9px;
        bottom: 10px;
    }

    .honeycomb-card-back-content {
        padding: 15px 12px;
        font-size: 10px;
    }

    .honeycomb-back-title {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .honeycomb-detail-item {
        padding: 5px 0;
    }

    .honeycomb-detail-label,
    .honeycomb-detail-value {
        font-size: 9px;
    }

    .honeycomb-action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .mission-progress-bar {
        height: 5px;
        margin-bottom: 0.3rem;
    }

    .mission-progress-text {
        font-size: 0.65rem;
    }
}

/* Hide MapLibre attribution */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-logo {
    display: none !important;
}

/* ========================================
   STAMPFORGE MODAL STYLES
   ======================================== */

/* Stampforge Modal Styles */
.sf-slide {
    font-family: "Fredoka", sans-serif;
}
.sf-slide-hidden {
    display: none;
}
.sf-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.sf-title-yellow {
    color: #e91e8c;
    text-shadow: none;
}
.sf-title-green {
    color: #2ecc71;
}
.sf-description {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.sf-form-group {
    margin-bottom: 1rem;
}
.sf-form-group.sf-image-upload-wrap {
    margin-bottom: 0;
}
.sf-form-group.sf-offer-type-wrap {
    margin-bottom: 0;
}
.sf-form-group.sf-offer-title-wrap {
    margin-bottom: 0;
}
.sf-form-group-lg {
    margin-bottom: 1.25rem;
}
.sf-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sf-icon-pink {
    color: #e91e8c;
}
.sf-icon-purple {
    color: #9b59b6;
}
.sf-icon-yellow {
    color: #ffd645;
}
.sf-icon-green {
    color: #2ecc71;
}
.sf-icon-red {
    color: #e74c3c;
}
.sf-icon-orange {
    color: #f39c12;
}

/* Slide 2 - Configuration Box */
.sf-config-box {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0.5rem;
    border: none;
}
.sf-config-box .sf-form-group-lg {
    margin-bottom: 0;
}
.sf-collection-rules-header {
    margin-top: 2rem;
}
.sf-collection-rules-row {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.sf-collection-rules-col {
    flex: 1 1 0;
    min-width: 0;
}

/* Stamps To Win: orange */
.sf-cr-to-win .sf-adjust-btn { border-color: rgba(230, 126, 34, 0.4); color: #e67e22; background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), rgba(241, 196, 15, 0.05)); }
.sf-cr-to-win .sf-adjust-btn:hover { border-color: rgba(230, 126, 34, 0.6); background: linear-gradient(135deg, rgba(230, 126, 34, 0.2), rgba(241, 196, 15, 0.1)); }
.sf-cr-to-win .sf-stamp-count-input input { border-color: #e67e22 !important; color: #e67e22 !important; }
.sf-cr-to-win .sf-stamp-count-input input:focus { border-color: #e67e22 !important; box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2) !important; }
.sf-cr-to-win .sf-adjust-btn:disabled { opacity: 0.5; border-color: #999 !important; color: #888 !important; background: #eee !important; }
.sf-cr-to-win .sf-adjust-btn:disabled:hover { border-color: #999 !important; background: #eee !important; }
.sf-cr-to-win .sf-stamp-count-input input[readonly] { opacity: 0.5; border-color: #bbb !important; color: #888 !important; background: #f0f0f0 !important; }
.sf-cr-to-win .sf-stamp-count-input input[readonly]:focus { border-color: #bbb !important; box-shadow: none !important; }

/* Stamps Per Day: green */
.sf-cr-per-day .sf-adjust-btn { border-color: rgba(39, 174, 96, 0.4); color: #27ae60; background: linear-gradient(135deg, rgba(39, 174, 96, 0.1), rgba(46, 204, 113, 0.05)); }
.sf-cr-per-day .sf-adjust-btn:hover { border-color: rgba(39, 174, 96, 0.6); background: linear-gradient(135deg, rgba(39, 174, 96, 0.2), rgba(46, 204, 113, 0.1)); }
.sf-cr-per-day .sf-stamp-count-input input { border-color: #27ae60 !important; color: #27ae60 !important; }
.sf-cr-per-day .sf-stamp-count-input input:focus { border-color: #27ae60 !important; box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.15) !important; }

/* Total Stamps: purple */
.sf-cr-total .sf-adjust-btn { border-color: rgba(155, 89, 182, 0.4); color: #9b59b6; background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(142, 68, 173, 0.05)); }
.sf-cr-total .sf-adjust-btn:hover { border-color: rgba(155, 89, 182, 0.6); background: linear-gradient(135deg, rgba(155, 89, 182, 0.2), rgba(142, 68, 173, 0.1)); }
.sf-cr-total .sf-stamp-count-input input { border-color: #9b59b6 !important; color: #9b59b6 !important; }
.sf-cr-total .sf-stamp-count-input input:focus { border-color: #9b59b6 !important; box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.15) !important; }

.sf-config-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.sf-config-col {
    flex: 1 1 0;
    min-width: 0;
}
.sf-config-col-aura {
    min-width: 140px;
}
.sf-config-col-count {
    min-width: 160px;
}
.sf-config-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
}
.sf-config-sublabel {
    font-size: 0.7rem;
    color: #999;
}
.sf-stamp-count-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-adjust-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid rgba(233, 30, 140, 0.3);
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.05));
    color: #e91e8c;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-adjust-btn:hover {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.2), rgba(155, 89, 182, 0.1));
    border-color: rgba(233, 30, 140, 0.5);
}
.sf-stamp-count-input {
    flex: 1;
    position: relative;
    outline: none;
    border: none;
}
.sf-stamp-count-input input {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 2px solid #e91e8c;
    border-radius: 10px;
    padding: 0.4rem 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #e91e8c;
    text-align: center;
    font-family: "Fredoka", sans-serif;
    outline: none;
}
.sf-stamp-count-input input:focus {
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}
.sf-stamp-count-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(233, 30, 140, 0.3);
    font-size: 0.9rem;
    pointer-events: none;
}
.sf-preset-btns {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}
.sf-slider-group {
    margin-bottom: 1rem;
}
.sf-slider-value-pink {
    font-size: 1rem;
    font-weight: 700;
    color: #e91e8c;
}
.sf-slider-value-purple {
    font-size: 1rem;
    font-weight: 700;
    color: #9b59b6;
}
.sf-slider-range {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
}
.sf-slider-range span {
    font-size: 0.6rem;
    color: #999;
}

/* Total Required Box */
.sf-total-box {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(155, 89, 182, 0.08));
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(233, 30, 140, 0.2);
}
.sf-total-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.sf-total-header span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sf-total-values {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.sf-total-item {
    text-align: center;
}
.sf-total-value-pink {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e91e8c;
}
.sf-total-value-purple {
    font-size: 1.5rem;
    font-weight: 700;
    color: #9b59b6;
}
.sf-total-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
}
.sf-total-divider {
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(233, 30, 140, 0.3), transparent);
}
.sf-balance-warning {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: rgba(231, 76, 60, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(231, 76, 60, 0.4);
}
.sf-balance-warning-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.sf-balance-warning-text {
    font-size: 0.8rem;
    color: #e74c3c;
}
.sf-slide2-action-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.sf-balance-warning-in-place {
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0.75rem 1rem;
    margin: 0;
}
.sf-balance-warning-above-btn {
    margin-bottom: 0.75rem;
    margin-top: 0;
}
.sf-create-action-slot {
    margin-top: 0.5rem;
}
.sf-create-action-slot .sf-balance-warning-in-place {
    min-height: auto;
}

/* Slide 3 Styles */
.sf-back-btn-wrapper {
    text-align: left;
    margin-bottom: 40px;
    margin-top: -20px;
}
.sf-back-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    color: #666;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.sf-slide3-desc {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}
.sf-per-stamp-rewards {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 3rem;
}
.sf-reward-badge {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #333;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
}
.sf-reward-badge-pink {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(233, 30, 140, 0.05));
    border: 1px solid rgba(233, 30, 140, 0.2);
}
.sf-reward-badge-purple {
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.05));
    border: 1px solid rgba(155, 89, 182, 0.2);
}
.sf-reward-value-pink {
    font-weight: 600;
    color: #e91e8c;
}
.sf-reward-value-purple {
    font-weight: 600;
    color: #9b59b6;
}
.sf-reward-label {
    color: #666;
}

/* Summary Box */
.sf-summary-acknowledge-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1rem;
}
.sf-summary-acknowledge-row .sf-summary-box {
    margin-bottom: 0;
}
.sf-summary-acknowledge-row .sf-acknowledge-wrapper {
    min-width: 0;
}
.sf-summary-box {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(39, 174, 96, 0.15));
    border-radius: 14px;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 2px solid rgba(46, 204, 113, 0.3);
    text-align: left;
}
.sf-summary-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.sf-summary-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sf-summary-list {
    list-style: disc;
    padding-left: 1.25rem;
    margin: 0.5rem 0 0 0;
    text-align: left;
}
.sf-summary-line {
    font-size: 0.95rem;
    color: #333;
    line-height: 1.3;
    text-align: left;
}
.sf-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0 0;
    align-items: center;
}
.sf-summary-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    color: #333;
    background: rgba(155, 89, 182, 0.12);
    border: 1px solid rgba(155, 89, 182, 0.35);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    line-height: 1.3;
}
.sf-create-offer-modal-outer .sf-summary-badge {
    color: #1a1a2e;
}
.sf-offer-type-wrap {
    margin-top: 0;
}
.sf-offer-type-wrap .sf-form-header {
    margin-bottom: 0.5rem;
}
.sf-number-of-wrap {
    margin-top: 0.75rem;
}
.sf-offer-type-select {
    width: 100%;
    box-sizing: border-box;
    background: #f9f9f9;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 0.75rem 34px 0.75rem 1rem;
    font-family: "Fredoka", sans-serif !important;
    font-size: 0.9rem !important;
    line-height: 1.5;
    color: #333;
    min-height: 2.75rem;
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 15L6 9h12L12 15z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}
.sf-offer-type-select:focus {
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
    outline: none;
}
.sf-offer-type-select.sf-placeholder-selected {
    background: #e91e8c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 15L6 9h12L12 15z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    color: #fff !important;
    border-color: #000;
    font-weight: 500 !important;
}
.sf-offer-type-select.sf-placeholder-selected:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.3);
}
.sf-offer-type-select option {
    font-family: "Fredoka", sans-serif !important;
    font-size: 0.9rem !important;
    background: #fff;
    color: #333;
}
.sf-offer-type-select option.sf-offer-type-placeholder {
    background: #fff !important;
    color: #333 !important;
}
.sf-create-offer-modal-outer .sf-offer-type-select {
    font-family: "Fredoka", sans-serif !important;
    font-size: 0.9rem !important;
    background: #f9f9f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 15L6 9h12L12 15z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    border: 2px solid #000;
    border-radius: 12px;
    padding: 0.75rem 34px 0.75rem 1rem;
    color: #333;
}
.sf-create-offer-modal-outer .sf-offer-type-select.sf-placeholder-selected {
    background: #e91e8c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 15L6 9h12L12 15z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    color: #fff !important;
    border-color: #000;
    font-weight: 500 !important;
}
.sf-create-offer-modal-outer .sf-offer-type-select.sf-placeholder-selected:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.3);
}
.sf-create-offer-modal-outer .sf-offer-type-select option {
    font-family: "Fredoka", sans-serif !important;
    font-size: 0.9rem !important;
    background: #fff;
    color: #333;
}
.sf-create-offer-modal-outer .sf-offer-type-select option.sf-offer-type-placeholder {
    background: #fff !important;
    color: #333 !important;
}
.sf-summary-values {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.sf-summary-item {
    text-align: center;
}
.sf-summary-value-yellow {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffd645;
}
.sf-summary-value-pink {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e91e8c;
}
.sf-summary-value-purple {
    font-size: 1.3rem;
    font-weight: 700;
    color: #9b59b6;
}
.sf-summary-label {
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
}
.sf-summary-divider {
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
}

/* Warning Box */
.sf-warning-box {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
.sf-warning-content {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.sf-warning-icon {
    color: #e74c3c;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.sf-warning-text {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.5;
}
.sf-warning-strong {
    color: #e74c3c;
}

/* Acknowledgment Checkbox */
.sf-acknowledge-wrapper {
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-align: left;
}
.sf-acknowledge-checkbox {
    margin-top: 2px;
    width: 14px;
    height: 14px;
    accent-color: #2ecc71;
    cursor: pointer;
    flex-shrink: 0;
}
.sf-acknowledge-label {
    font-size: 0.95rem;
    font-weight: 400;
    color: #94a3b8;
    line-height: 1.15;
    cursor: pointer;
}

/* Create Button - no green; uses modal pink/purple theme, no glow */
.sf-create-btn {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.9rem;
    border-radius: 12px;
    background: #e91e8c;
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.35);
    border: none;
    box-shadow: none;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    opacity: 1;
    color: #fff;
}
.sf-create-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(233,30,140,0.4);
}
.sf-create-btn.sf-btn-disabled,
.sf-create-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.sf-create-btn-text {
    color: #fff;
}
.sf-create-action-slot .sf-create-btn {
    box-shadow: none;
    outline: none;
}
.sf-create-action-slot {
    box-shadow: none;
    outline: none;
    border: none;
    background: transparent;
}

/* Challenge Type Cards */
.sf-challenge-type-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sf-challenge-type-cards.sf-challenge-type-row {
    flex-direction: row;
    margin-bottom: 0.8rem;
}
.sf-challenge-type-row .sf-challenge-type-card {
    flex: 1;
    min-width: 0;
}
.sf-challenge-type-row .sf-challenge-type-card-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
}
.sf-challenge-type-card {
    display: block;
    cursor: pointer;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    background: #fafafa;
}
.sf-challenge-type-card:hover {
    border-color: #d162a4;
    background: #fef6fa;
}
.sf-challenge-type-card.sf-challenge-type-selected {
    border-color: #e91e8c;
    background: linear-gradient(135deg, #fef0f8, #f8e8f5);
    box-shadow: 0 0 0 2px rgba(233,30,140,0.15);
}
.sf-challenge-type-radio {
    display: none;
}
.sf-challenge-type-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}
.sf-challenge-type-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(135deg, #e91e8c, #a020f0);
    margin-top: 0.1rem;
}
.sf-challenge-type-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.sf-challenge-type-title {
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    color: #333;
    line-height: 1.2;
}
.sf-challenge-type-desc {
    font-family: "Fredoka", sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    color: #888;
    line-height: 1.35;
}
.sf-challenge-type-card.sf-challenge-type-selected .sf-challenge-type-title {
    color: #c2185b;
}
.sf-challenge-type-card.sf-challenge-type-selected .sf-challenge-type-desc {
    color: #666;
}

/* Challenge Type custom select */
.sf-challenge-type-select-wrap {
    position: relative;
    font-family: "Fredoka", sans-serif;
}
.sf-challenge-type-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 0.92rem;
    font-weight: 600;
    color: #333;
}
.sf-challenge-type-trigger:hover {
    border-color: #d162a4;
    background: #fef6fa;
}
.sf-challenge-type-trigger-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.sf-challenge-type-trigger-inner i {
    color: #e91e8c;
    font-size: 1rem;
}
.sf-challenge-type-trigger.sf-placeholder {
    color: #999;
}
.sf-challenge-type-trigger.sf-placeholder .sf-challenge-type-trigger-inner i {
    color: #ccc;
}
.sf-challenge-type-chevron {
    font-size: 0.75rem;
    color: #999;
    transition: transform 0.2s;
}
.sf-challenge-type-select-wrap.open .sf-challenge-type-chevron {
    transform: rotate(180deg);
}
.sf-challenge-type-dropdown {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    z-index: 100;
    overflow: hidden;
}
.sf-challenge-type-select-wrap.open .sf-challenge-type-dropdown {
    display: block;
}
.sf-challenge-type-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    justify-content: flex-start;
}
.sf-challenge-type-option:hover {
    background: #fef6fa;
}
.sf-challenge-type-option.sf-challenge-type-option-active {
    background: linear-gradient(135deg, #fef0f8, #f8e8f5);
    color: #c2185b;
    font-weight: 600;
}
.sf-challenge-type-option i {
    color: #e91e8c;
    font-size: 1rem;
}
.sf-challenge-type-option.sf-option-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}
.sf-challenge-type-option.sf-option-disabled:hover {
    background: transparent;
}

/* Crop Modal Styles */
.sf-crop-modal {
    font-family: "Fredoka", sans-serif;
}
.sf-crop-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.sf-crop-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.sf-crop-desc {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.sf-crop-area {
    width: 100%;
    max-height: 300px;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.sf-crop-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}
.sf-crop-cancel-btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    background: #f9f9f9;
    color: #666;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sf-crop-apply-btn {
    flex: 1;
    padding: 0.75rem;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4);
}

/* Slide 2 Icon Container */
.sf-slide2-icon {
    background: linear-gradient(135deg, rgba(255, 214, 69, 0.2), rgba(243, 156, 18, 0.2));
    border-color: rgba(255, 214, 69, 0.5);
    overflow: hidden;
}
.sf-slide3-icon {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.2));
    border-color: rgba(46, 204, 113, 0.5);
    overflow: hidden;
}
.sf-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
.sf-icon-img-hidden {
    display: none;
}

/* Image preview */
.sf-img-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
.sf-img-preview-hidden {
    display: none;
}

/* Continue button flex */
.sf-continue-btn-flex {
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* Crop modal container */
.sf-crop-modal-container {
    max-width: 400px;
}
.sf-crop-close {
    z-index: 100;
}

/* Upload placeholder */
.sf-upload-placeholder {
    text-align: center;
}

/* Add Stamps Modal Styles */
.sf-add-stamps-name {
    color: #666;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.sf-qty-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sf-qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(233, 30, 140, 0.3);
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.05));
    color: #e91e8c;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sf-qty-btn:hover {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.2), rgba(155, 89, 182, 0.1));
    border-color: rgba(233, 30, 140, 0.5);
}
.sf-qty-input-wrapper {
    text-align: center;
    min-width: 80px;
}
.sf-qty-input {
    width: 80px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
    border: 2px solid #e91e8c;
    border-radius: 10px;
    color: #e91e8c;
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.5rem;
}
.sf-qty-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}
.sf-cost-box {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e0e0e0;
}
.sf-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sf-cost-row:not(:last-child) {
    margin-bottom: 0.5rem;
}
.sf-cost-label {
    color: #666;
    font-size: 0.8rem;
}
.sf-cost-value {
    color: #333;
    font-weight: 600;
}
.sf-balance-display {
    display: flex;
    justify-content: space-around;
    margin-bottom: 1.5rem;
    font-size: 0.75rem;
    color: #999;
}

/* Add Stamps Modal - Icon with image */
.sf-add-stamps-icon {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
    border-color: rgba(233, 30, 140, 0.3);
    overflow: hidden;
    position: relative;
}
.sf-add-stamps-icon-img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}
.sf-add-stamps-title {
    color: #e91e8c !important;
    font-size: 1.3rem;
    text-shadow: none !important;
}

/* Remove any glow effects from stamp-modal-light */
.stamp-modal-light .daily-bonus-icon i {
    text-shadow: none !important;
}
.stamp-modal-light .daily-bonus-title {
    text-shadow: none !important;
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.hidden {
    display: none !important;
}

.label-hint {
    font-weight: 400;
    opacity: 0.6;
}

/* =====================================================
   SOCIAL BLASTER MODAL
   ===================================================== */
.social-blaster-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.social-blaster-overlay.active {
    display: flex;
}

.social-blaster-modal {
    background: #ffffff;
    border-radius: 20px;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    position: relative;
    border: 2px solid #e91e8c;
    box-shadow: 0 20px 60px rgba(233, 30, 140, 0.15);
}

.social-blaster-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.social-blaster-close:hover {
    background: #e0e0e0;
    color: #333;
}

.social-blaster-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.social-blaster-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #e91e8c;
}

.social-blaster-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin: 0 0 0.25rem 0;
}

.social-blaster-subtitle {
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.social-blaster-message {
    margin-bottom: 1.5rem;
}

.social-blaster-message label {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

.social-blaster-message textarea {
    width: 100%;
    height: 80px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 0.75rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #333;
    resize: none;
    outline: none;
    box-sizing: border-box;
}

.social-blaster-message textarea:focus {
    border-color: #e91e8c;
    background: #fff;
}

.social-blaster-message-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.copy-message-btn {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: 2px solid #e91e8c;
    border-radius: 20px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.copy-message-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.3);
}

.copy-message-btn.copied {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    border-color: #27ae60;
}

.copy-message-btn:disabled {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

.translate-message-btn {
    padding: 0.5rem 1rem;
    background: #f9f9f9;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    color: #666;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.translate-message-btn:hover {
    background: #f0f0f0;
    border-color: #e91e8c;
    color: #e91e8c;
}

.translate-message-btn:disabled {
    background: #f0f0f0;
    border-color: #e0e0e0;
    color: #999;
    cursor: not-allowed;
}

.copy-hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #999;
    font-family: "Fredoka", sans-serif;
}

.social-blaster-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.social-btn i,
.social-btn svg {
    font-size: 1.25rem;
    color: #666;
}

.social-btn span {
    font-size: 0.65rem;
    color: #666;
}

.social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.social-btn.twitter:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.social-btn.twitter:hover i,
.social-btn.twitter:hover svg,
.social-btn.twitter:hover span {
    color: #fff;
}

.social-btn.facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}
.social-btn.facebook:hover i,
.social-btn.facebook:hover svg,
.social-btn.facebook:hover span {
    color: #fff;
}

.social-btn.linkedin:hover {
    background: #0a66c2;
    border-color: #0a66c2;
    color: #fff;
}
.social-btn.linkedin:hover i,
.social-btn.linkedin:hover svg,
.social-btn.linkedin:hover span {
    color: #fff;
}

.social-btn.bluesky:hover {
    background: #0085ff;
    border-color: #0085ff;
    color: #fff;
}
.social-btn.bluesky:hover i,
.social-btn.bluesky:hover svg,
.social-btn.bluesky:hover span {
    color: #fff;
}

.social-btn.threads:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}
.social-btn.threads:hover i,
.social-btn.threads:hover svg,
.social-btn.threads:hover span {
    color: #fff;
}

.social-btn.whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}
.social-btn.whatsapp:hover i,
.social-btn.whatsapp:hover svg,
.social-btn.whatsapp:hover span {
    color: #fff;
}

.social-btn.telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
    color: #fff;
}
.social-btn.telegram:hover i,
.social-btn.telegram:hover svg,
.social-btn.telegram:hover span {
    color: #fff;
}

.social-btn.copy:hover {
    background: #e91e8c;
    border-color: #e91e8c;
    color: #fff;
}
.social-btn.copy:hover i,
.social-btn.copy:hover svg,
.social-btn.copy:hover span {
    color: #fff;
}

/* ========================================
   HONEYCOMB DELETE MODAL STYLES
   ======================================== */
.delete-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.delete-modal-overlay.active {
    display: flex;
}
.delete-modal {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    width: 100%;
    max-width: min(400px, calc(100vw - 2rem));
    box-sizing: border-box;
    text-align: center;
    font-family: "Fredoka", sans-serif;
    z-index: 100000;
    position: relative;
    margin: auto;
    flex-shrink: 0;
}
.delete-modal-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}
.delete-modal-icon i {
    font-size: 1.5rem;
    color: #fff;
}
.delete-modal h3 {
    color: #333;
    margin-bottom: 0.5rem;
}
.delete-modal p {
    color: #666;
    margin-bottom: 0.5rem;
}
.delete-modal-warning {
    color: #e74c3c;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.delete-modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.delete-modal-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: "Fredoka", sans-serif;
}
.delete-modal-btn.cancel {
    background: #f0f0f0;
    color: #666;
}
.delete-modal-btn.confirm {
    background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
    color: #fff;
}
.delete-modal-btn.confirm:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Analysis result modal: success = green, failure = red/orange */
#analysisResultModal .delete-modal.analysis-result-success .delete-modal-icon {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}
#analysisResultModal .delete-modal.analysis-result-failure .delete-modal-icon {
    background: linear-gradient(135deg, #e67e22, #d35400);
}
#analysisResultModal .delete-modal-btn.analysis-result-view-btn {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #fff;
    width: 100%;
    max-width: 280px;
}
#analysisResultModal .delete-modal-btn.analysis-result-view-btn:hover {
    background: linear-gradient(135deg, #27ae60, #1e8449);
    transform: translateY(-1px);
}

/* ========================================
   CREATE HONEYCOMB MODAL STYLES
   ======================================== */
/* Light Modal Overlay */
.create-honeycomb-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow: hidden;
}
.create-honeycomb-overlay.active {
    display: flex;
}

/* Light Modal Container */
.create-honeycomb-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    z-index: 100000;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

/* Modal Header */
.create-honeycomb-modal .modal-header {
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;
}
.create-honeycomb-modal .modal-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #1a1a2e;
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}
.create-honeycomb-modal .modal-title-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.create-honeycomb-modal .modal-title-icon i {
    font-size: 1.25rem;
    color: #fff;
}
.create-honeycomb-modal .modal-header-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.create-honeycomb-modal .header-stat-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 20px;
    color: #166534;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
}
.create-honeycomb-modal .header-stat-item i {
    color: #22c55e;
    font-size: 0.9rem;
}
.create-honeycomb-modal .header-stat-item.hex-exceeded {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fecaca;
    color: #dc2626;
}
.create-honeycomb-modal .header-stat-item.hex-exceeded i {
    color: #dc2626;
}
.create-honeycomb-modal .modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f5f5f5;
    border: none;
    color: #666;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.create-honeycomb-modal .modal-close:hover {
    background: #e74c3c;
    color: #fff;
}

/* Modal Body */
.create-honeycomb-modal .modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

/* Form Inputs */
.create-honeycomb-modal .form-group {
    margin-bottom: 1rem;
}
.create-honeycomb-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.create-honeycomb-modal .form-label {
    display: block;
    color: #333;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.create-honeycomb-modal .form-label i {
    color: #e91e8c;
    margin-right: 0.25rem;
}
.create-honeycomb-modal .form-control {
    width: 100%;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    color: #333;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    transition: all 0.2s;
    box-sizing: border-box;
}
.create-honeycomb-modal .form-control:focus {
    outline: none;
    background: #fff;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}
.create-honeycomb-modal .form-control::placeholder {
    color: #adb5bd;
}

/* Search Results Dropdown */
.create-honeycomb-modal .search-input-wrapper {
    position: relative;
}
.create-honeycomb-modal .search-results-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #e9ecef;
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.create-honeycomb-modal .search-result-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}
.create-honeycomb-modal .search-result-item:last-child {
    border-bottom: none;
}
.create-honeycomb-modal .search-result-item:hover {
    background: #f8f9fa;
}
.create-honeycomb-modal .result-name {
    color: #333;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
}
.create-honeycomb-modal .result-address {
    color: #888;
    font-size: 0.8rem;
    margin-top: 0.125rem;
}
.create-honeycomb-modal .search-result-loading,
.create-honeycomb-modal .search-result-empty,
.create-honeycomb-modal .search-result-error {
    padding: 1rem;
    color: #888;
    text-align: center;
    font-family: "Fredoka", sans-serif;
}

/* Map Wrapper - forces 1:1 square aspect ratio */
.create-honeycomb-modal .map-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1 aspect ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}
#honeycomb-map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Search Overlay on Map */
.create-honeycomb-modal .map-search-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    z-index: 100;
}
.create-honeycomb-modal .map-search-overlay .search-input-wrapper {
    position: relative;
    max-width: 320px;
}
.create-honeycomb-modal .map-search-overlay .search-input-wrapper > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    font-size: 0.9rem;
    z-index: 2;
    pointer-events: none;
}
.create-honeycomb-modal .map-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    background: #fff;
    border: none;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s;
}
.create-honeycomb-modal .map-search-input:focus {
    outline: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.create-honeycomb-modal .map-search-input::placeholder {
    color: #aaa;
}
.create-honeycomb-modal .map-search-overlay .search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
}

/* Map Hint Overlay */
.create-honeycomb-modal .map-hint-overlay {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: "Fredoka", sans-serif;
    color: #666;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    z-index: 100;
}
.create-honeycomb-modal .map-hint-overlay i {
    color: #888;
    margin-right: 0.25rem;
}

/* Modal Footer */
.create-honeycomb-modal .modal-footer {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
}
.create-honeycomb-modal .btn-cancel {
    padding: 0.75rem 1.25rem;
    background: #f0f0f0;
    color: #666;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}
.create-honeycomb-modal .btn-cancel:hover {
    background: #e0e0e0;
}
.create-honeycomb-modal .btn-create {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.create-honeycomb-modal .btn-create:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}
.create-honeycomb-modal .btn-create:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Hex Limit Error */
.create-honeycomb-modal .hex-limit-error {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.9rem;
    font-family: "Fredoka", sans-serif;
    margin-bottom: 1rem;
}
.create-honeycomb-modal .hex-limit-error i {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.create-honeycomb-modal .hex-limit-error a {
    color: #dc2626;
    text-decoration: underline;
    font-weight: 500;
}

/* Honeycomb Page Utility Classes */
.dash-action-card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.link-pink {
    color: #e91e8c;
}
.section-title-hint {
    font-size: 0.8rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 0.5rem;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .create-honeycomb-modal {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }
    .create-honeycomb-modal .modal-header {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .create-honeycomb-modal .modal-header-stats {
        width: 100%;
        justify-content: space-between;
    }
    .create-honeycomb-modal .header-stat-item {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }
    .create-honeycomb-modal .map-wrapper {
        padding-bottom: 100%; /* 1:1 square */
    }
    .create-honeycomb-modal .map-search-overlay {
        left: 8px;
        right: 8px;
        top: 8px;
    }
    .create-honeycomb-modal .map-search-overlay .search-input-wrapper {
        max-width: 100%;
    }
    .create-honeycomb-modal .modal-footer {
        flex-direction: column;
    }
    .create-honeycomb-modal .btn-cancel,
    .create-honeycomb-modal .btn-create {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   LOCATION VIEW PAGE STYLES
   ======================================== */
.location-view-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.location-view-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.location-view-left,
.location-view-right {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Location Cards */
.location-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.location-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}

.location-card-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-card-title i {
    color: #e91e8c;
}

.location-card-body {
    padding: 1.25rem;
}

/* Map Wrapper - forces 1:1 square */
.location-map-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #f0f0f0;
    border: 1px solid #e0e0e0;
}

.location-map-wrapper .location-map-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
    border: none;
    margin: 0;
}

/* Location Info Header */
.location-info-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}

.location-info-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.location-info-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.location-info-text h2 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.25rem 0;
}

.location-info-text p {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
}

.location-info-text p i {
    margin-right: 0.25rem;
}

/* Stats Row */
.location-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.location-stat-box {
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border: 1px solid #e9ecef;
    padding: 1rem;
    border-radius: 12px;
    text-align: center;
}

.location-stat-box i {
    font-size: 1.25rem;
    color: #e91e8c;
    display: block;
    margin-bottom: 0.5rem;
}

.location-stat-box .stat-value {
    font-family: "Fredoka", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    display: block;
}

.location-stat-box .stat-label {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Detail Rows */
.location-detail-rows {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.location-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.location-detail-row .detail-label {
    font-size: 0.85rem;
    color: #666;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.location-detail-row .detail-label i {
    color: #e91e8c;
}

.location-detail-row .detail-value {
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a1a2e;
}

/* Actions Stack */
.location-actions-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.location-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.location-action-btn.primary {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.location-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.location-action-btn.secondary {
    background: #f0f0f0;
    color: #333;
}

.location-action-btn.secondary:hover {
    background: #e0e0e0;
}

.location-action-btn.danger {
    background: #fff;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.location-action-btn.danger:hover {
    background: #e74c3c;
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .location-view-layout {
        grid-template-columns: 1fr;
    }

    .location-map-wrapper {
        padding-bottom: 100%;
    }
}

@media (max-width: 480px) {
    .location-view-container {
        padding: 1rem 0.75rem 2rem;
    }

    .location-card-body {
        padding: 1rem;
    }

    .location-info-header {
        flex-direction: column;
        text-align: center;
    }

    .location-stats-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .location-stat-box {
        padding: 0.75rem;
    }

    .location-stat-box .stat-value {
        font-size: 1.1rem;
    }
}

/* ========================================
   REFERRAL PAGE STYLES
   ======================================== */
.referral-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.referral-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.referral-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.referral-card-mt {
    margin-top: 1.5rem;
}

.referral-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.referral-card-header i {
    font-size: 1.25rem;
    color: #e91e8c;
}

.referral-card-header h2 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    flex: 1;
}

.referral-card-body {
    padding: 1.5rem;
}

/* Referral Code Badge */
.referral-code-badge {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Referral Header Count */
.referral-header-count {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #94a3b8;
}

/* Stats Row */
.referral-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.referral-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.referral-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.referral-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.referral-stat-total .referral-stat-icon {
    background: linear-gradient(135deg, #e91e8c20, #e91e8c10);
    color: #e91e8c;
}

.referral-stat-pending .referral-stat-icon {
    background: linear-gradient(135deg, #f59e0b20, #f59e0b10);
    color: #f59e0b;
}

.referral-stat-completed .referral-stat-icon {
    background: linear-gradient(135deg, #10b98120, #10b98110);
    color: #10b981;
}

.referral-stat-tokens .referral-stat-icon {
    background: linear-gradient(135deg, #8b5cf620, #8b5cf610);
    color: #8b5cf6;
}

.referral-stat-content {
    min-width: 0;
}

.referral-stat-value {
    font-family: "Fredoka", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.1;
}

.referral-stat-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    margin-top: 0.15rem;
    letter-spacing: 0.5px;
}

/* Referral Code Box */
.referral-code-section {
    margin-bottom: 1.5rem;
}

.referral-code-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.referral-code-box {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
}

.referral-link-input {
    flex: 1;
    padding: 0.85rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #1a1a2e;
    background: #f8f9fa;
}

.referral-copy-btn {
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    white-space: nowrap;
}

.referral-copy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.referral-copy-btn.copied {
    background: #10b981;
}

/* Share Buttons */
.referral-share-section {
    margin-bottom: 1.5rem;
}

.referral-share-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.referral-share-btns {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

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

.share-btn.twitter {
    background: #1da1f2;
}
.share-btn.facebook {
    background: #1877f2;
}
.share-btn.whatsapp {
    background: #25d366;
}
.share-btn.telegram {
    background: #0088cc;
}
.share-btn.email {
    background: #64748b;
}

/* Reward Info */
.referral-rewards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.reward-card {
    padding: 1rem;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    border-radius: 12px;
    border: 1px solid rgba(233, 30, 140, 0.1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reward-card i {
    font-size: 1.5rem;
    color: #e91e8c;
}

.reward-card-text {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #64748b;
}

.reward-card-text strong {
    color: #e91e8c;
    font-weight: 600;
}

/* Recent Referrals List */
.referrals-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.referral-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: #f8f9fa;
    border-radius: 10px;
    transition: background 0.2s;
}

.referral-item:hover {
    background: #f1f5f9;
}

.referral-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.referral-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
}

.referral-name {
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a2e;
}

.referral-date {
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    color: #94a3b8;
}

.referral-status {
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
}

.referral-status.pending {
    background: #fef3c7;
    color: #d97706;
}

.referral-status.completed,
.referral-status.rewarded {
    background: #d1fae5;
    color: #059669;
}

.empty-referrals {
    text-align: center;
    padding: 2rem;
    color: #94a3b8;
}

.empty-referrals i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-referrals p {
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
}

/* How It Works - Horizontal Layout */
.hiw-steps-horizontal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.hiw-steps-horizontal .hiw-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.hiw-step-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    flex-shrink: 0;
}

.hiw-step-content h3 {
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.35rem 0;
}

.hiw-step-content p {
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* FAQ */
.hiw-faq-title {
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hiw-faq-title i {
    color: #e91e8c;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.faq-item {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

.faq-question {
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: background 0.2s;
}

.faq-question:hover {
    background: #f1f5f9;
}

.faq-question i {
    color: #94a3b8;
    transition: transform 0.2s;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}

.faq-item.open .faq-answer {
    padding: 1rem;
    max-height: 200px;
}

/* Referral Page Responsive */
@media (max-width: 768px) {
    .referral-layout {
        grid-template-columns: 1fr;
    }

    .referral-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .referral-stat {
        padding: 1rem;
        gap: 0.75rem;
    }

    .referral-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .referral-stat-value {
        font-size: 1.4rem;
    }

    .referral-stat-label {
        font-size: 0.7rem;
    }

    .referral-rewards {
        grid-template-columns: 1fr;
    }

    .referral-code-box {
        flex-direction: column;
    }

    .referral-copy-btn {
        justify-content: center;
    }

    .hiw-steps-horizontal {
        grid-template-columns: repeat(2, 1fr);
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hiw-steps-horizontal {
        grid-template-columns: 1fr;
    }

    .referral-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .referral-stat {
        padding: 0.875rem;
        gap: 0.5rem;
        flex-direction: column;
        text-align: center;
    }

    .referral-stat-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .referral-stat-value {
        font-size: 1.25rem;
    }

    .referral-stat-label {
        font-size: 0.65rem;
    }
}

/* ========================================
   USER SETTINGS PAGE STYLES
   ======================================== */
/* Custom Flatpickr Theme */
.flatpickr-calendar {
    font-family: "Fredoka", sans-serif !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    overflow: hidden !important;
    width: 307px !important;
    max-width: 95vw !important;
    z-index: 100001 !important;
}

.flatpickr-calendar * {
    font-family: "Fredoka", sans-serif !important;
}

.flatpickr-calendar.hasTime {
    width: 307px !important;
}

.flatpickr-innerContainer {
    max-width: 100%;
}

.flatpickr-rContainer {
    max-width: 100%;
}

.dayContainer {
    width: 100%;
    min-width: unset;
    max-width: 100%;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
    display: none;
}

.flatpickr-months {
    background: linear-gradient(135deg, #e91e8c 0%, #9b59b6 100%) !important;
    padding: 12px 8px !important;
}

.flatpickr-months .flatpickr-month {
    color: #fff !important;
    fill: #fff !important;
    height: 36px !important;
}

.flatpickr-current-month {
    font-family: "Fredoka", sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-family: "Fredoka", sans-serif !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: rgba(255, 255, 255, 0.2);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: #fff;
    color: #fff;
    padding: 8px 12px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    fill: #fff;
}

.flatpickr-weekdays {
    background: #f8f9fa;
    padding: 8px 6px;
    width: 100%;
    box-sizing: border-box;
}

.flatpickr-weekdaycontainer {
    display: flex;
    width: 100%;
}

.flatpickr-weekday {
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    flex: 1;
    text-align: center;
}

.flatpickr-days {
    padding: 6px;
    width: 100% !important;
}

.dayContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0;
}

.flatpickr-day {
    font-family: "Fredoka", sans-serif;
    border-radius: 8px;
    font-weight: 500;
    color: #333;
    width: 14.28%;
    max-width: 40px;
    height: 36px;
    line-height: 36px;
    margin: 0;
    flex-basis: 14.28%;
    box-sizing: border-box;
}

.flatpickr-day:hover {
    background: #fce4ec;
    border-color: #fce4ec;
}

.flatpickr-day.today {
    border-color: #e91e8c;
    background: transparent;
}

.flatpickr-day.today:hover {
    background: #fce4ec;
    border-color: #e91e8c;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(135deg, #e91e8c 0%, #9b59b6 100%);
    border-color: #e91e8c;
    color: #fff;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: linear-gradient(135deg, #d81b7f 0%, #8e44ad 100%);
    border-color: #d81b7f;
}

.flatpickr-day.inRange {
    background: #fce4ec;
    border-color: #fce4ec;
    box-shadow: -5px 0 0 #fce4ec, 5px 0 0 #fce4ec;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: #ccc;
}

.flatpickr-time {
    border-top: 1px solid #eee !important;
    padding: 10px !important;
    background: #f8f9fa !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    max-height: 50px !important;
    line-height: 30px !important;
}

.flatpickr-time .numInputWrapper {
    height: 30px !important;
}

.flatpickr-time input,
.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    font-family: "Fredoka", sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #333 !important;
    height: 30px !important;
}

.flatpickr-time .flatpickr-time-separator {
    font-family: "Fredoka", sans-serif !important;
    height: 30px !important;
    line-height: 30px !important;
    color: #333 !important;
}

.flatpickr-time .flatpickr-am-pm {
    font-family: "Fredoka", sans-serif !important;
    font-weight: 600 !important;
    color: #e91e8c !important;
    height: 30px !important;
    line-height: 30px !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: #fce4ec !important;
}

/* Mission date input styling */
.mission-date-input-wrapper {
    position: relative;
}

.mission-date-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: "Fredoka", sans-serif;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.mission-date-input:focus {
    outline: none;
    border-color: #e91e8c;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.mission-date-input::placeholder {
    color: #999;
}

.mission-date-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #e91e8c;
    pointer-events: none;
    font-size: 1rem;
}

.mission-date-clear {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 4px;
    border-radius: 50%;
    display: none;
}

.mission-date-clear:hover {
    color: #e91e8c;
    background: #fce4ec;
}

.mission-date-input-wrapper.has-value .mission-date-clear {
    display: block;
}

/* DOB date input wrapper */
.dob-input-wrapper {
    position: relative;
    width: 100%;
}

.dob-input-wrapper input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: all 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.dob-input-wrapper input:focus {
    outline: none;
    border-color: #e91e8c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.dob-input-wrapper .dob-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

/* Settings Page Layout */
.settings-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.settings-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.settings-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.settings-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.settings-card-header i.header-icon {
    font-size: 1.25rem;
    color: #e91e8c;
}

.settings-card-header h2 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.settings-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.settings-card-body {
    padding: 1.5rem;
    overflow: visible;
}

.settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    overflow: visible;
}

.settings-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-form-group.full-width {
    grid-column: 1 / -1;
}

.settings-form-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

.settings-form-input {
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: all 0.2s;
}

.settings-form-input:focus {
    outline: none;
    border-color: #e91e8c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.settings-form-input:disabled,
.settings-form-input[readonly] {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

.settings-form-hint {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Avatar section */
.settings-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 1.5rem;
}

.settings-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
}

.settings-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.5rem;
    font-family: "Fredoka", sans-serif;
    font-weight: 600;
}

.settings-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.settings-avatar-btn {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.settings-avatar-btn.primary {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.settings-avatar-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.settings-avatar-btn.secondary {
    background: #f1f5f9;
    color: #64748b;
}

.settings-avatar-btn.secondary:hover {
    background: #e2e8f0;
}

/* Hidden file input */
.settings-file-input-hidden {
    display: none;
}

/* Save button */
.settings-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 2rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
}

.settings-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.3);
}

.settings-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Read-only values */
.settings-readonly-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.settings-readonly-grid.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

.settings-readonly-grid.three-cols {
    grid-template-columns: repeat(3, 1fr);
}

.settings-readonly-grid.four-cols {
    grid-template-columns: repeat(4, 1fr);
}

.settings-readonly-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-radius: 10px;
}

.settings-readonly-label {
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-readonly-value {
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a2e;
    word-break: break-all;
}

.settings-readonly-value.tier {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.settings-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

/* Toast notification */
.settings-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 1rem 1.5rem;
    background: #1a1a2e;
    color: #fff;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: all 0.3s;
    z-index: 1000;
}

.settings-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.settings-toast.success {
    background: #10b981;
}

.settings-toast.error {
    background: #ef4444;
}

/* Avatar Crop Modal */
.avatar-crop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

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

.avatar-crop-modal {
    background: #fff;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.avatar-crop-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.avatar-crop-header h3 {
    font-family: "Fredoka", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.avatar-crop-header h3 i {
    color: #e91e8c;
}

.avatar-crop-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.avatar-crop-close:hover {
    background: #e2e8f0;
    color: #1a1a2e;
}

.avatar-crop-body {
    padding: 1.25rem;
    flex: 1;
    overflow: hidden;
}

.avatar-crop-area {
    width: 100%;
    max-height: 350px;
    background: #f8f9fa;
    border-radius: 10px;
    overflow: hidden;
}

.avatar-crop-area img {
    max-width: 100%;
    display: block;
}

.avatar-crop-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #f0f0f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.avatar-crop-btn {
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.avatar-crop-btn.cancel {
    background: #f1f5f9;
    color: #64748b;
}

.avatar-crop-btn.cancel:hover {
    background: #e2e8f0;
}

.avatar-crop-btn.apply {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.avatar-crop-btn.apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.avatar-crop-btn.apply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Country Select */
.country-select-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.country-select-input {
    width: 100%;
    padding: 0.75rem 1rem;
    padding-right: 2.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    color: #1a1a2e;
    background: #f8f9fa;
    transition: all 0.2s;
    cursor: pointer;
    box-sizing: border-box;
}

.country-select-input:focus {
    outline: none;
    border-color: #e91e8c;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(233, 30, 140, 0.1);
}

.country-select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: transform 0.2s;
}

.country-select-wrapper.open .country-select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.country-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-height: 280px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    margin-top: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s;
}

.country-select-wrapper.open .country-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.country-select-search {
    padding: 0.75rem 1rem;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    outline: none;
}

.country-select-search::placeholder {
    color: #94a3b8;
}

.country-select-list {
    overflow-y: auto;
    flex: 1;
}

.country-select-option {
    padding: 0.65rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.15s;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
}

.country-select-option:hover {
    background: #f8f9fa;
}

.country-select-option.selected {
    background: rgba(233, 30, 140, 0.1);
    color: #e91e8c;
}

.country-select-option .country-flag {
    font-size: 1.2rem;
}

.country-select-option .country-code {
    color: #94a3b8;
    font-size: 0.8rem;
    margin-left: auto;
}

.country-select-empty {
    padding: 1rem;
    text-align: center;
    color: #94a3b8;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
}

/* User Settings Responsive */
@media (max-width: 768px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

    .settings-form-grid,
    .settings-readonly-grid,
    .settings-readonly-grid.two-cols,
    .settings-readonly-grid.three-cols,
    .settings-readonly-grid.four-cols {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-avatar-section {
        flex-direction: column;
        text-align: center;
    }

    .settings-avatar-actions {
        flex-direction: row;
    }

    .avatar-crop-modal {
        max-height: 80vh;
    }

    .avatar-crop-area {
        max-height: 280px;
    }
}

/* ========================================
   UPGRADES PAGE STYLES
   ======================================== */
.upgrades-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.upgrades-header {
    text-align: center;
    margin-bottom: 2rem;
}

.upgrades-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.upgrades-header h1 i {
    color: #e91e8c;
}

.upgrades-header p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.current-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border: 1px solid #86efac;
    border-radius: 2rem;
    padding: 0.5rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: #166534;
    font-weight: 600;
}

.current-plan-badge i {
    font-size: 1rem;
}

/* Tiers Grid - Card Style on Mobile */
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.tier-card {
    background: #fff;
    border-radius: 1.25rem;
    border: 2px solid var(--tier-border);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.tier-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.tier-card.current {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.tier-card.popular {
    border-color: #e91e8c;
}

.tier-card-header {
    background: var(--tier-bg);
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--tier-border);
    position: relative;
}

.tier-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.current-badge {
    background: #22c55e;
    color: #fff;
}

.tier-badge.popular-badge {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.tier-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--tier-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.tier-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tier-primary);
    margin: 0 0 0.5rem;
}

.tier-price {
    font-size: 2rem;
    font-weight: 800;
    color: #1a1a2e;
}

.tier-price .period {
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
}

.tier-card-body {
    padding: 1.25rem;
}

.tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tier-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #334155;
}

.tier-feature:last-child {
    border-bottom: none;
}

.tier-feature-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.tier-feature-icon.check {
    background: #dcfce7;
    color: #22c55e;
}

.tier-feature-icon.x {
    background: #f1f5f9;
    color: #94a3b8;
}

.tier-feature-value {
    margin-left: auto;
    font-weight: 700;
    color: #1a1a2e;
}

.tier-feature-value.highlight {
    color: #e91e8c;
}

.tier-card-footer {
    padding: 1rem 1.25rem 1.5rem;
}

.tier-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    border-radius: 0.75rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

.tier-btn-primary {
    background: var(--tier-primary);
    color: #fff;
}

.tier-btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tier-btn-current {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
}

.tier-btn-upgrade {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.tier-btn-upgrade:hover {
    background: linear-gradient(135deg, #d41879, #8b4db6);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(233, 30, 140, 0.4);
}

.tier-btn-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.tier-btn-premium:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* Comparison Table - Desktop */
.comparison-section {
    margin-top: 2.5rem;
}

.comparison-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    text-align: center;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.comparison-title i {
    color: #e91e8c;
}

.comparison-table-wrapper {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: 1rem;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
}

.comparison-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #1a1a2e;
    font-size: 0.9rem;
}

.comparison-table th:first-child {
    text-align: left;
    width: 35%;
}

.comparison-table td:first-child {
    text-align: left;
    font-weight: 500;
    color: #334155;
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.comparison-table .feature-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comparison-table .feature-cell i {
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
}

.comparison-table .feature-desc {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 2px;
}

.table-check {
    color: #22c55e;
    font-size: 1.25rem;
}

.table-dash {
    color: #cbd5e1;
    font-size: 1.25rem;
}

.table-value {
    font-weight: 700;
    color: #1a1a2e;
}

.table-value.highlight {
    color: #e91e8c;
}

.table-value.success {
    color: #22c55e;
}

/* Back Button */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.back-link:hover {
    color: #e91e8c;
}

/* Mobile Comparison Table Styles */
.mobile-comparison {
    display: none;
    background: #fff;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.mobile-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
}

.mobile-table th,
.mobile-table td {
    padding: 0.4rem 0.25rem;
    text-align: center;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.mobile-table th {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.mobile-table th:first-child {
    text-align: left;
    padding-left: 0.5rem;
    width: 22%;
}

.mobile-tier-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.mobile-tier-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #fff;
}

.mobile-tier-name {
    font-size: 0.65rem;
    font-weight: 700;
    color: inherit;
}

.mobile-tier-price {
    font-size: 0.6rem;
    font-weight: 600;
    opacity: 0.8;
}

.mobile-table td:first-child {
    text-align: left;
    padding-left: 0.5rem;
    font-weight: 500;
    color: #475569;
}

.mobile-feature-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mobile-feature-label i {
    font-size: 0.75rem;
    width: 14px;
}

.mobile-value {
    font-weight: 700;
    font-size: 0.65rem;
}

.mobile-value.highlight {
    color: #e91e8c;
}

.mobile-check {
    color: #22c55e;
    font-size: 0.85rem;
}

.mobile-dash {
    color: #cbd5e1;
    font-size: 0.85rem;
}

/* Mobile Action Buttons - inside table row */
.mobile-table tr.action-row td {
    padding: 0.5rem 0.15rem;
    background: #f8fafc;
    border-bottom: none;
}

.mobile-table tr.action-row td:first-child {
    padding-left: 0.5rem;
}

.mobile-action-btn {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    font-size: 0.8rem;
    padding: 0;
    margin: 0;
}

.mobile-action-btn.current {
    background: #e2e8f0;
    color: #64748b;
    cursor: default;
}

.mobile-action-btn.upgrade {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
}

.mobile-action-btn.pro {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
}

.mobile-action-btn.premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.mobile-action-btn:not(.current):active {
    transform: scale(0.95);
}

/* Current tier highlight in mobile table */
.mobile-table th.current-tier,
.mobile-table td.current-tier {
    background: rgba(34, 197, 94, 0.08);
}

.mobile-table th.current-tier {
    border-top: 2px solid #22c55e;
}

/* Upgrades Page Responsive */
@media (max-width: 768px) {
    .upgrades-container {
        padding: 0.5rem;
        max-width: 100%;
    }

    .back-link {
        margin-bottom: 0.5rem;
        font-size: 0.8rem;
    }

    .upgrades-header {
        margin-bottom: 0.75rem;
    }

    .upgrades-header h1 {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .upgrades-header p {
        font-size: 0.75rem;
        display: none;
    }

    .current-plan-badge {
        padding: 0.25rem 0.75rem;
        font-size: 0.7rem;
        margin-top: 0.5rem;
    }

    /* Hide card grid on mobile */
    .tiers-grid {
        display: none;
    }

    /* Show mobile comparison table */
    .mobile-comparison {
        display: block !important;
    }

    .comparison-section {
        display: none;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .tiers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop - Show comparison table, simplify cards */
@media (min-width: 1025px) {
    .tiers-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .tier-features {
        display: none;
    }

    .tier-card-body {
        padding: 0.5rem 1.25rem;
    }
}

/* ========================================
   ADMINISTRATOR PANEL STYLES
   ======================================== */

/* Body Styles for Administrator Pages */
body.admin-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Administrator Dashboard Container */
.admin-dashboard {
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Administrator Header */
.admin-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.admin-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Admin Logo */
.admin-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.admin-logo-img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.admin-logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a2e;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Admin Navigation */
.admin-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: #666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.admin-nav-link:hover {
    background: #f5f5f5;
    color: #333;
}

.admin-nav-link.active {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.admin-nav-link i {
    font-size: 1rem;
}

/* Admin Nav Dropdown */
.admin-nav-dropdown {
    position: relative;
    display: flex;
}

.admin-nav-dropdown .admin-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    background: none;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
    transition: all 0.2s ease;
}

.admin-nav-dropdown .admin-nav-link:hover {
    background: #f5f5f5;
    color: #333;
}

.admin-nav-dropdown .admin-nav-link.active {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.admin-nav-dropdown .dropdown-arrow {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    transition: transform 0.2s ease;
}

.admin-nav-dropdown-menu.show + .admin-nav-link .dropdown-arrow,
.admin-nav-dropdown .admin-nav-link[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

.admin-nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.admin-nav-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.admin-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.admin-dropdown-item:hover {
    background: #f5f5f5;
    color: #333;
}

.admin-dropdown-item.active {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
    color: #e91e8c;
}

.admin-dropdown-item i {
    font-size: 0.9rem;
    width: 1.2rem;
    text-align: center;
}

/* Admin Mobile Section (for settings submenu) */
.admin-mobile-section {
    padding: 0.5rem 0;
}

.admin-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: #999;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-mobile-section-title i {
    font-size: 0.9rem;
}

.admin-mobile-sublink {
    padding-left: 3rem !important;
    font-size: 0.85rem;
}

/* Admin Header Right */
.admin-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    font-size: 0.85rem;
}

.admin-user-info i {
    font-size: 1.25rem;
    color: #9b59b6;
}

.admin-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #666;
    text-decoration: none;
    transition: all 0.2s ease;
}

.admin-logout-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Admin Mobile Toggle */
.admin-mobile-toggle {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    border-radius: 8px;
    color: #333;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Admin Mobile Menu */
.admin-mobile-menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    padding: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.admin-mobile-menu.show {
    display: block;
}

.admin-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: background 0.2s ease;
}

.admin-mobile-link:hover {
    background: #f5f5f5;
}

.admin-mobile-link.active {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.admin-mobile-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 0.5rem 0;
}

/* Admin Main Content */
.admin-main {
    padding-top: 96px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Admin Welcome Section */
.admin-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    margin-top: 2rem;
}

.admin-welcome-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.admin-welcome-icon i {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-welcome h1 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.5rem 0;
}

.admin-welcome p {
    font-size: 1rem;
    color: #666;
    margin: 0;
}

/* ========================================
   ADMINISTRATOR LOGIN PAGE STYLES
   ======================================== */

.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.admin-login-container {
    width: 100%;
    max-width: 420px;
}

.admin-login-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.admin-login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.admin-login-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.admin-login-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a2e;
    text-align: center;
    margin: 0 0 0.5rem 0;
}

.admin-login-subtitle {
    font-size: 0.9rem;
    color: #666;
    text-align: center;
    margin: 0 0 1.5rem 0;
}

.admin-login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    color: #dc2626;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.admin-login-error i {
    font-size: 1rem;
}

.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}

.admin-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-input-wrapper > i {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    font-size: 1rem;
    pointer-events: none;
}

.admin-input-wrapper input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.admin-input-wrapper input:focus {
    outline: none;
    border-color: #9b59b6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.1);
}

.admin-input-wrapper input::placeholder {
    color: #9ca3af;
}

.admin-password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
}

.admin-password-toggle:hover {
    color: #666;
}

.admin-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #9b59b6;
    cursor: pointer;
}

.admin-form-checkbox label {
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
}

.admin-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.admin-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

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

.admin-login-footer {
    margin-top: 1.5rem;
    text-align: center;
}

.admin-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #666;
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.admin-back-link:hover {
    color: #9b59b6;
}

/* Administrator Responsive */
@media (max-width: 768px) {
    .admin-nav,
    .admin-header-right .admin-user-info,
    .admin-header-right .admin-logout-btn {
        display: none;
    }

    .admin-header-right {
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .admin-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .admin-header-inner {
        padding: 0 1rem;
        gap: 0.75rem;
    }

    .admin-logo {
        flex: 1;
        min-width: 0;
    }

    .admin-logo-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .admin-main {
        padding-left: 1rem;
        padding-right: 1rem;
        overflow-x: hidden;
        max-width: 100%;
        box-sizing: border-box;
    }

    .admin-welcome {
        padding: 2rem 1.5rem;
    }

    .admin-welcome h1 {
        font-size: 1.5rem;
    }

    .admin-login-card {
        padding: 2rem 1.5rem;
    }
}

/* ========================================
   ADMINISTRATOR NEW DECK MODAL STYLES
   ======================================== */

/* New Deck Modal */
.admin-new-deck-modal {
    background: #fff;
    border-radius: 20px;
    max-width: 480px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.admin-modal-close-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 1;
}

.admin-modal-close-btn:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.admin-modal-header {
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(155, 89, 182, 0.05));
    border-bottom: 1px solid #f0f0f0;
}

.admin-modal-icon-wrap {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.15), rgba(155, 89, 182, 0.15));
    border-radius: 50%;
    margin: 0 auto 1rem;
}

.admin-modal-icon-wrap i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-modal-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.25rem 0;
}

.admin-modal-header p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.admin-modal-form {
    padding: 1.5rem 2rem 2rem;
}

.admin-form-group {
    margin-bottom: 1.25rem;
}

.admin-form-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #9b59b6;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-form-label i {
    font-size: 0.7rem;
}

.admin-form-input,
.admin-form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #f9fafb;
    box-sizing: border-box;
}

.admin-form-input:focus,
.admin-form-textarea:focus {
    outline: none;
    border-color: #9b59b6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.1);
}

.admin-form-input::placeholder,
.admin-form-textarea::placeholder {
    color: #9ca3af;
}

.admin-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.admin-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
}

.admin-generate-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.1), rgba(217, 119, 87, 0.05));
    border: 1px solid rgba(217, 119, 87, 0.3);
    border-radius: 6px;
    color: #d97757;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-generate-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(217, 119, 87, 0.2), rgba(217, 119, 87, 0.1));
}

.admin-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-generate-btn .spinner-border {
    width: 0.75rem;
    height: 0.75rem;
    border-width: 2px;
}

.admin-char-counter {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.admin-char-counter.valid {
    color: #9b59b6;
}

.admin-char-counter.invalid {
    color: #e74c3c;
}

/* Toggle */
.admin-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.admin-toggle-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #333;
    font-size: 0.9rem;
}

.admin-toggle-info i {
    color: #9b59b6;
}

.admin-toggle {
    position: relative;
    width: 48px;
    height: 24px;
}

.admin-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.admin-toggle-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e0e0e0;
    transition: 0.3s;
    border-radius: 24px;
}

.admin-toggle-track:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.admin-toggle input:checked + .admin-toggle-track {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
}

.admin-toggle input:checked + .admin-toggle-track:before {
    transform: translateX(24px);
}

/* Terms */
.admin-terms-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.admin-checkbox {
    width: 22px;
    height: 22px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.admin-checkbox.checked {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-color: #9b59b6;
}

.admin-checkbox i {
    color: #fff;
    font-size: 0.75rem;
    display: none;
}

.admin-checkbox.checked i {
    display: block;
}

.admin-terms-text {
    font-size: 0.85rem;
    color: #666;
}

/* Modal Buttons */
.admin-modal-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.admin-btn-cancel,
.admin-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 10px;
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.admin-btn-cancel {
    background: #f5f5f5;
    color: #666;
}

.admin-btn-cancel:hover {
    background: #e8e8e8;
}

.admin-btn-primary {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
}

.admin-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.admin-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.d-none {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-new-deck-modal {
        margin: 1rem;
    }

    .admin-modal-form {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .admin-modal-buttons {
        flex-direction: column;
    }

    .admin-btn-cancel,
    .admin-btn-primary {
        width: 100%;
    }

    .admin-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .admin-char-counter {
        justify-content: flex-end;
    }
}

/* Square deck cards for administrator */
.mission-card-wrapper.deck-card-square {
    aspect-ratio: 1 / 1;
}

.deck-card-square .mission-card-front {
    background: #000;
}

.deck-card-square .mission-card-bg {
    filter: none;
    transform: none;
    opacity: 0.75;
}

.deck-card-square .mission-card-content {
    padding: 20px;
}

.deck-card-square .mission-card-back-content {
    padding: 20px 20px 20px;
    padding-top: 50px;
}

.deck-card-square .mission-card-reward-image {
    aspect-ratio: 1 / 1;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 80%);
}

/* Fix z-index and button for deck cards */
.deck-card-square .mission-card-bottom-section {
    position: relative;
    z-index: 2;
}

.deck-card-square .mission-card-title,
.deck-card-square .mission-card-description {
    position: relative;
    z-index: 2;
}

.deck-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.deck-manage-btn:hover {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
    color: #fff;
}

@media (max-width: 768px) {
    .deck-manage-btn {
        padding: 6px 12px;
        font-size: 11px;
        gap: 0.3rem;
    }
}

/* White icon in deck card stats */
.deck-card-square .mission-top-stat i {
    color: #fff;
}

/* Button styling for action cards */
button.dash-action-card {
    border: none;
    background: #fff;
    font-family: "Fredoka", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: inherit;
    cursor: pointer;
    text-align: left;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Admin Language Button */
.admin-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-lang-btn:hover {
    background: #e8e8e8;
}

.admin-lang-btn .fi {
    font-size: 1.2rem;
}

/* ========================================
   PARTNER DETAIL PAGE STYLES
   ======================================== */

/* Partner Header Card */
.partner-header-card {
    display: flex;
    gap: 1.5rem;
    background: #fff;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.partner-header-image {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.partner-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner-header-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
}

.partner-header-placeholder i {
    font-size: 3rem;
    color: #9b59b6;
}

.partner-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

.partner-header-badges {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
    align-items: flex-end;
}

.partner-header-badges .partner-badge {
    width: 110px;
    justify-content: center;
    box-sizing: border-box;
}

.partner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.partner-badge.active {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.partner-badge.paused {
    background: rgba(149, 165, 166, 0.15);
    color: #7f8c8d;
}

.partner-badge.global {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.partner-badge.local {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.partner-badge.web-only {
    background: rgba(155, 89, 182, 0.15);
    color: #9b59b6;
}

.partner-badge.app-web {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
}

.partner-badge.ai-cost {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    cursor: default;
}

.partner-header-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.partner-header-description {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Partner Header Title/Description Rows for Inline Editing */
.partner-header-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.partner-header-desc-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 0;
}

/* Inline Edit Translation Button */
.admin-inline-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(233, 30, 99, 0.15);
    color: #e91e63;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.admin-inline-edit-btn:hover {
    background: #e91e63;
    color: #fff;
    transform: scale(1.1);
}

.admin-inline-edit-btn i {
    font-size: 0.75rem;
}

/* Inline Editor */
.admin-inline-editor {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    margin: 0.5rem auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid #e8e8e8;
    max-width: 600px;
    width: 100%;
    animation: slideDown 0.2s ease;
}

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

.admin-inline-editor-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e8e8e8;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

.admin-inline-editor-header .fi {
    font-size: 1rem;
}

.admin-inline-editor-original {
    background: #f5f5f5;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.admin-inline-editor-original small {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.4;
}

.admin-inline-input,
.admin-inline-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #e91e63;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    color: #333;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.admin-inline-input:focus,
.admin-inline-textarea:focus {
    outline: none;
    border-color: #c2185b;
}

.admin-inline-textarea {
    resize: vertical;
    min-height: 80px;
}

.admin-inline-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}

.admin-inline-cancel,
.admin-inline-auto,
.admin-inline-save {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-inline-cancel {
    background: #f5f5f5;
    color: #666;
}

.admin-inline-cancel:hover {
    background: #e8e8e8;
}

.admin-inline-auto {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    border: 1px solid #3498db;
}

.admin-inline-auto:hover:not(:disabled) {
    background: #3498db;
    color: #fff;
}

.admin-inline-auto:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-inline-save {
    background: #e91e63;
    color: #fff;
}

.admin-inline-save:hover:not(:disabled) {
    background: #c2185b;
}

.admin-inline-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Field-level Edit Button */
.admin-field-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 4px;
    background: rgba(233, 30, 99, 0.1);
    color: #e91e63;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.admin-field-edit-btn:hover {
    background: #e91e63;
    color: #fff;
}

.admin-field-edit-btn i {
    font-size: 0.65rem;
}

/* Field Editor */
.admin-field-editor {
    margin-top: 0.5rem;
}

.admin-field-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
    justify-content: flex-end;
}

.admin-field-cancel,
.admin-field-save {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 6px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-field-cancel {
    background: #f5f5f5;
    color: #666;
}

.admin-field-cancel:hover {
    background: #e8e8e8;
}

.admin-field-save {
    background: #e91e63;
    color: #fff;
}

.admin-field-save:hover:not(:disabled) {
    background: #c2185b;
}

.admin-field-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* LLM Field Header */
.admin-llm-field-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

/* Spinning animation for icons */
.spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Translation Alert Banner */
.admin-translation-alert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    position: relative;
}

.admin-translation-alert-icon {
    width: 40px;
    height: 40px;
    background: rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-translation-alert-icon i {
    font-size: 1.25rem;
    color: #d97706;
}

.admin-translation-alert-content {
    flex: 1;
    min-width: 0;
}

.admin-translation-alert-content strong {
    display: block;
    color: #92400e;
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.admin-translation-alert-content p {
    margin: 0 0 0.5rem 0;
    color: #b45309;
    font-size: 0.85rem;
}

.admin-translation-alert-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.admin-translation-alert-locale {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #92400e;
    font-weight: 600;
    font-size: 0.8rem;
}

.admin-translation-alert-locale .fi {
    font-size: 0.85rem;
}

.admin-translation-alert-field {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(251, 191, 36, 0.2);
    color: #92400e;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.admin-translation-alert-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #b45309;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.admin-translation-alert-close:hover {
    background: rgba(251, 191, 36, 0.2);
    color: #92400e;
}

/* Compact Notification Chips Row */
.admin-notifications-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.admin-notification-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: default;
    transition: all 0.2s ease;
}

.admin-notification-chip:hover {
    transform: translateY(-1px);
}

.admin-notification-chip i {
    font-size: 0.9rem;
}

/* Quiz chip - teal */
.admin-chip-quiz {
    background: rgba(20, 184, 166, 0.12);
    color: #0d9488;
    border: 1px solid rgba(20, 184, 166, 0.25);
}

/* Audio chip - purple */
.admin-chip-audio {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.25);
}

/* YouTube chip - red */
.admin-chip-youtube {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* LLM chip - blue */
.admin-chip-llm {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* SEO chip - orange */
.admin-chip-seo {
    background: rgba(249, 115, 22, 0.12);
    color: #ea580c;
    border: 1px solid rgba(249, 115, 22, 0.25);
}

/* Translation chip - amber */
.admin-chip-translate {
    background: rgba(251, 191, 36, 0.12);
    color: #b45309;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

@media (max-width: 480px) {
    .admin-notifications-row {
        gap: 0.4rem;
    }

    .admin-notification-chip {
        padding: 0.4rem 0.7rem;
        font-size: 0.75rem;
    }

    .admin-notification-chip i {
        font-size: 0.8rem;
    }
}

/* YouTube Missing Alert */
.admin-youtube-alert {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.08));
    border-color: rgba(239, 68, 68, 0.25);
}

.admin-youtube-alert .admin-translation-alert-icon {
    background: rgba(239, 68, 68, 0.15);
}

.admin-youtube-alert .admin-translation-alert-icon i {
    color: #dc2626;
}

.admin-youtube-alert .admin-translation-alert-content strong {
    color: #b91c1c;
}

.admin-youtube-alert .admin-translation-alert-content p {
    color: #7f1d1d;
}

.admin-youtube-alert .admin-translation-alert-close {
    color: #dc2626;
}

.admin-youtube-alert .admin-translation-alert-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

/* Audio Narration Missing Alert */
.admin-audio-alert {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(124, 58, 237, 0.08));
    border-color: rgba(139, 92, 246, 0.25);
}

.admin-audio-alert .admin-translation-alert-icon {
    background: rgba(139, 92, 246, 0.15);
}

.admin-audio-alert .admin-translation-alert-icon i {
    color: #7c3aed;
}

.admin-audio-alert .admin-translation-alert-content strong {
    color: #6d28d9;
}

.admin-audio-alert .admin-translation-alert-content p {
    color: #5b21b6;
}

.admin-audio-alert .admin-translation-alert-close {
    color: #7c3aed;
}

.admin-audio-alert .admin-translation-alert-close:hover {
    background: rgba(139, 92, 246, 0.15);
    color: #6d28d9;
}

/* Quiz Missing Alert */
.admin-quiz-alert {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(13, 148, 136, 0.08));
    border-color: rgba(20, 184, 166, 0.25);
}

.admin-quiz-alert .admin-translation-alert-icon {
    background: rgba(20, 184, 166, 0.15);
}

.admin-quiz-alert .admin-translation-alert-icon i {
    color: #0d9488;
}

.admin-quiz-alert .admin-translation-alert-content strong {
    color: #0f766e;
}

.admin-quiz-alert .admin-translation-alert-content p {
    color: #115e59;
}

.admin-quiz-alert .admin-translation-alert-close {
    color: #0d9488;
}

.admin-quiz-alert .admin-translation-alert-close:hover {
    background: rgba(20, 184, 166, 0.15);
    color: #0f766e;
}

/* LLM Summary Missing Alert */
.admin-llm-alert {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(37, 99, 235, 0.08));
    border-color: rgba(59, 130, 246, 0.25);
}

.admin-llm-alert .admin-translation-alert-icon {
    background: rgba(59, 130, 246, 0.15);
}

.admin-llm-alert .admin-translation-alert-icon i {
    color: #2563eb;
}

.admin-llm-alert .admin-translation-alert-content strong {
    color: #1d4ed8;
}

.admin-llm-alert .admin-translation-alert-content p {
    color: #1e40af;
}

.admin-llm-alert .admin-translation-alert-close {
    color: #2563eb;
}

.admin-llm-alert .admin-translation-alert-close:hover {
    background: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

@media (max-width: 480px) {
    .admin-translation-alert {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .admin-translation-alert-icon {
        width: 32px;
        height: 32px;
    }

    .admin-translation-alert-icon i {
        font-size: 1rem;
    }
}

/* Mission Type Modal */
.mission-type-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.mission-type-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 2px solid #f0f0f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mission-type-card:hover {
    border-color: #ec4899;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.03), rgba(155, 89, 182, 0.03));
    transform: translateX(4px);
}

.mission-type-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mission-type-card-icon.honeycomb {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    color: #d97706;
}

.mission-type-card-icon.focal {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.15), rgba(155, 89, 182, 0.1));
    color: #ec4899;
}

.mission-type-card-icon i {
    font-size: 1.5rem;
}

.mission-type-card-content {
    flex: 1;
    min-width: 0;
}

.mission-type-card-content h4 {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.mission-type-card-content p {
    margin: 0;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.4;
}

.mission-type-card-badge {
    padding: 0.35rem 0.75rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    color: #d97706;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.mission-type-card-arrow {
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.mission-type-card:hover .mission-type-card-arrow {
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
}

@media (max-width: 480px) {
    .mission-type-card {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
    }

    .mission-type-card-icon {
        width: 44px;
        height: 44px;
    }

    .mission-type-card-icon i {
        font-size: 1.25rem;
    }

    .mission-type-card-content {
        flex: 1 1 calc(100% - 60px);
    }

    .mission-type-card-badge {
        order: 3;
    }

    .mission-type-card-arrow {
        order: 4;
        margin-left: auto;
    }
}

/* Partner Stats Grid */
.partner-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.partner-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.partner-stat-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.1), rgba(155, 89, 182, 0.1));
    border-radius: 10px;
    flex-shrink: 0;
}

.partner-stat-icon i {
    font-size: 1.25rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.partner-stat-icon.active {
    background: rgba(46, 204, 113, 0.15);
}

.partner-stat-icon.active i {
    background: none;
    -webkit-text-fill-color: #27ae60;
    color: #27ae60;
}

.partner-stat-content {
    display: flex;
    flex-direction: column;
}

.partner-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
}

.partner-stat-label {
    font-size: 0.8rem;
    color: #666;
}

/* Partner Toggle Section */
.partner-toggle-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.partner-toggle-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.partner-toggle-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.partner-toggle-icon.global {
    background: rgba(52, 152, 219, 0.15);
    color: #3498db;
}

.partner-toggle-icon.local {
    background: rgba(243, 156, 18, 0.15);
    color: #f39c12;
}

.partner-toggle-text p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.partner-toggle-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.partner-toggle-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

/* Partner Accordion */
.partner-accordion {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.partner-accordion-item {
    border-bottom: 1px solid #f0f0f0;
}

.partner-accordion-item:last-child {
    border-bottom: none;
}

.partner-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.03), rgba(155, 89, 182, 0.03));
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.partner-accordion-header:hover {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(155, 89, 182, 0.08));
}

.partner-accordion-item.active .partner-accordion-header {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(155, 89, 182, 0.08));
    border-bottom: 1px solid #f0f0f0;
}

.partner-accordion-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
}

.partner-accordion-title i {
    color: #9b59b6;
    font-size: 1rem;
}

.partner-accordion-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.partner-accordion-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.partner-accordion-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(155, 89, 182, 0.3);
}

.partner-accordion-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #999;
    transition: transform 0.3s ease;
}

.partner-accordion-item.active .partner-accordion-chevron {
    transform: rotate(180deg);
}

.partner-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.partner-accordion-item.active .partner-accordion-content {
    max-height: 2000px; /* Large enough for content */
}

.partner-accordion-content > .partner-missions-grid,
.partner-accordion-content > .partner-missions-empty,
.partner-accordion-content > .partner-missions-global-notice,
.partner-accordion-content > .partner-cards-subtitle,
.partner-accordion-content > .partner-cards-grid,
.partner-accordion-content > .partner-cards-empty {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.partner-accordion-content > .partner-missions-grid:first-child,
.partner-accordion-content > .partner-missions-empty:first-child,
.partner-accordion-content > .partner-missions-global-notice:first-child,
.partner-accordion-content > .partner-cards-subtitle:first-child {
    padding-top: 1rem;
}

.partner-accordion-content > .partner-missions-grid:last-child,
.partner-accordion-content > .partner-missions-empty:last-child,
.partner-accordion-content > .partner-missions-global-notice:last-child,
.partner-accordion-content > .partner-cards-grid:last-child,
.partner-accordion-content > .partner-cards-empty:last-child {
    padding-bottom: 1rem;
}

/* Partner Section */
.partner-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
}

.partner-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(155, 89, 182, 0.05));
    border-bottom: 1px solid #f0f0f0;
}

.partner-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.partner-section-title i {
    color: #9b59b6;
}

.partner-section-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.partner-section-btn:hover {
    transform: scale(1.05);
}

/* Partner Cards */
.partner-cards-subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 1.25rem 1.5rem 1rem;
}

.partner-cards-subtitle.active {
    color: #27ae60;
}

.partner-cards-subtitle.paused {
    color: #7f8c8d;
}

.partner-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
}

.partner-card-item {
    display: block;
    background: #f9fafb;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s ease;
}

.partner-card-item:hover {
    transform: translateY(-4px);
    border-color: #9b59b6;
    box-shadow: 0 8px 20px rgba(155, 89, 182, 0.15);
}

.partner-card-item.paused {
    opacity: 0.5;
}

.partner-card-item.paused:hover {
    opacity: 0.8;
}

.partner-card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #e8e8e8;
    position: relative;
}

.partner-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner-card-gallery-count {
    position: absolute;
    top: 6px;
    left: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 1;
}

.partner-card-gallery-count i {
    font-size: 0.65rem;
}

.partner-card-youtube-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.75rem;
    padding: 3px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: #ff0000;
    color: #fff;
}

.partner-card-youtube-badge.no-video {
    opacity: 0.5;
}

.partner-card-youtube-badge i {
    font-size: 0.7rem;
}

.partner-card-translation-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    font-size: 0.75rem;
    padding: 3px 5px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.partner-card-translation-badge.missing {
    background: #f59e0b;
    color: #fff;
}

.partner-card-translation-badge.complete {
    background: #10b981;
    color: #fff;
}

.partner-card-translation-badge i {
    font-size: 0.7rem;
}

.partner-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e8e8;
}

.partner-card-placeholder i {
    font-size: 2rem;
    color: #ccc;
}

.partner-card-info {
    padding: 0.6rem 0.75rem;
}

.partner-card-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #1a1a2e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.partner-card-holders {
    display: block;
    font-size: 0.7rem;
    color: #888;
    margin-top: 0.15rem;
}

.partner-cards-empty {
    text-align: center;
    padding: 3rem 2rem;
}

.partner-cards-empty > i {
    font-size: 4rem;
    color: #ddd;
    margin-bottom: 1rem;
    display: block;
}

.partner-empty-btn i {
    font-size: 0.9rem;
}

.partner-cards-empty h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #666;
    margin: 0 0 0.5rem 0;
}

.partner-cards-empty p {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 1.5rem 0;
}

.partner-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.partner-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

/* Partner Missions Section */
.partner-missions-section {
    margin-bottom: 1.5rem;
}

.partner-missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    padding: 1rem 1.5rem 1.5rem;
}

.partner-mission-card-wrapper {
    display: block;
    aspect-ratio: 3 / 4;
    min-width: 0;
    perspective: 1000px;
    cursor: pointer;
}

.partner-mission-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.partner-mission-card-wrapper.flipped .partner-mission-card-inner {
    transform: rotateY(180deg);
}

.partner-mission-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.partner-mission-card-front {
    z-index: 2;
}

.partner-mission-card-back {
    transform: rotateY(180deg);
}

.partner-mission-card-wrapper:hover .partner-mission-card-inner {
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2);
}

.partner-mission-card.inactive {
    opacity: 0.6;
}

.partner-mission-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-color: #1a1a2e;
}

.partner-mission-card-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.2) 40%,
        rgba(0, 0, 0, 0.6) 70%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.partner-mission-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    font-family: "Fredoka", sans-serif;
}

.partner-mission-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.partner-mission-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(155, 89, 182, 0.9);
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
}

/* Mission status toggle button */
.partner-mission-status-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.partner-mission-status-btn.active {
    background: rgba(46, 204, 113, 0.9);
    color: #fff;
}

.partner-mission-status-btn.active:hover {
    background: rgba(39, 174, 96, 1);
}

.partner-mission-status-btn.paused {
    background: rgba(127, 140, 141, 0.9);
    color: #fff;
}

.partner-mission-status-btn.paused:hover {
    background: rgba(99, 110, 114, 1);
}

/* Mission description */
.partner-mission-description {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Top left icon group */
.partner-mission-top-left {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* View mission button */
.partner-mission-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(52, 152, 219, 0.9);
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.partner-mission-view-btn:hover {
    background: rgba(41, 128, 185, 1);
    color: #fff;
    transform: scale(1.1);
}

.partner-mission-type-badge.honeycomb {
    background: rgba(230, 126, 34, 0.9);
}

.partner-mission-type-badge i {
    font-size: 0.7rem;
}

.partner-mission-status-badge {
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
}

.partner-mission-status-badge.active {
    background: rgba(46, 204, 113, 0.9);
    color: #fff;
}

.partner-mission-status-badge.draft {
    background: rgba(149, 165, 166, 0.9);
    color: #fff;
}

.partner-mission-status-badge.paused {
    background: rgba(241, 196, 15, 0.9);
    color: #333;
}

.partner-mission-stamps {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.partner-mission-stamp-item {
    position: relative;
    margin-left: -24px;
    flex-shrink: 0;
}

.partner-mission-stamp-item:first-child {
    margin-left: 0;
}

.partner-mission-stamp-item img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    background: #fff;
}

@media (max-width: 1400px) {
    .partner-mission-stamp-item {
        margin-left: -28px;
    }
    .partner-mission-stamp-item img {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 992px) {
    .partner-mission-stamp-item {
        margin-left: -24px;
    }
    .partner-mission-stamp-item img {
        width: 50px;
        height: 50px;
    }
}

.partner-mission-stamp-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: linear-gradient(135deg, #9b59b6, #e91e8c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.partner-mission-stamp-more {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, #e91e8c, #9b1b6e);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -16px;
    position: relative;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Legacy single stamp support */
.partner-mission-stamp {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.partner-mission-stamp img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    background: #fff;
}

.partner-mission-reward {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.partner-mission-reward img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    object-fit: cover;
    background: #fff;
}

.partner-mission-reward-placeholder {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
}

.partner-mission-info {
    margin-top: auto;
}

.partner-mission-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.partner-mission-location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.8);
}

.partner-mission-location i {
    font-size: 0.65rem;
    color: #e91e8c;
}

/* Mission card back styles */
.partner-mission-back-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.partner-mission-edit-btn {
    background: rgba(52, 152, 219, 0.2);
    border: 1px solid rgba(52, 152, 219, 0.5);
    color: #3498db;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.partner-mission-edit-btn:hover {
    background: rgba(52, 152, 219, 0.4);
    border-color: #3498db;
    transform: scale(1.1);
}

.partner-mission-delete-btn {
    background: rgba(220, 53, 69, 0.2);
    border: 1px solid rgba(220, 53, 69, 0.5);
    color: #dc3545;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.partner-mission-delete-btn:hover {
    background: rgba(220, 53, 69, 0.4);
    border-color: #dc3545;
    transform: scale(1.1);
}

.partner-mission-back-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    overflow: visible;
    width: 100%;
    padding: 0 0.25rem;
}

.partner-mission-back-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.partner-mission-back-label {
    color: rgba(255, 255, 255, 0.6);
}

.partner-mission-back-value {
    color: #fff;
    font-weight: 500;
}

.partner-mission-back-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
    flex-shrink: 0;
}

.partner-mission-back-details .partner-mission-stamps {
    padding: 0;
    max-width: 100%;
    justify-content: center;
}

.partner-mission-back-details .partner-mission-stamp-item {
    margin-left: -30px;
}

.partner-mission-back-details .partner-mission-stamp-item:first-child {
    margin-left: 0;
}

.partner-mission-back-details .partner-mission-stamp-item img {
    width: 42px;
    height: 42px;
    border-width: 2px;
}

.partner-mission-back-details .partner-mission-stamp-more {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    font-size: 0.6rem;
    margin-left: -14px;
}

.partner-mission-action-btn {
    flex: 1;
    background: linear-gradient(135deg, #e91e8c, #9b1b6e);
    border: none;
    color: #fff;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.partner-mission-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.4);
}

/* Legacy mission card styles - keep for compatibility */
.partner-mission-header {
    display: none;
}

.partner-mission-type {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #9b59b6;
    text-transform: uppercase;
}

.partner-mission-type.honeycomb {
    color: #e67e22;
}

.partner-mission-type i {
    font-size: 0.85rem;
}

.partner-mission-status {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.partner-mission-status.active {
    background: #d4edda;
    color: #155724;
}

.partner-mission-status.draft {
    background: #fff3cd;
    color: #856404;
}

.partner-mission-status.completed {
    background: #cce5ff;
    color: #004085;
}

.partner-mission-status.paused {
    background: #f8d7da;
    color: #721c24;
}

.partner-mission-body {
    padding: 1rem;
}

.partner-mission-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.partner-mission-desc {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

.partner-mission-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    background: #f8f9fa;
    border-top: 1px solid #e8e8e8;
}

.partner-mission-stat {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: #666;
}

.partner-mission-stat i {
    color: #9b59b6;
}

.partner-mission-code {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    font-family: monospace;
    background: #e8e8e8;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

.partner-missions-empty {
    text-align: center;
    padding: 2rem 1.5rem;
}

.partner-missions-empty > i {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 0.75rem;
    display: block;
}

.partner-missions-empty p {
    font-size: 0.9rem;
    color: #888;
    margin: 0 0 1rem 0;
}

/* Global missions notice */
.partner-missions-global-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.partner-missions-global-notice .partner-missions-global-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.partner-missions-global-notice .partner-missions-global-icon i {
    font-size: 1.6rem;
    color: #fff;
}

.partner-missions-global-notice p {
    margin: 0;
    color: #4b5563;
    font-size: 0.95rem;
    font-weight: 500;
}

.partner-missions-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.partner-missions-create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

/* ================================
   Create Mission Modal - Responsive
   ================================ */
.create-mission-modal {
    position: relative;
    width: min(95%, 450px);
    height: min(92vh, 800px);
    aspect-ratio: 9 / 16;
    background: #fff;
    border-radius: 20px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Progress Indicator */
.create-mission-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.create-mission-step {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    color: #999;
    transition: all 0.3s;
}

.create-mission-step .step-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.7rem;
    transition: all 0.3s;
}

.create-mission-step .step-label {
    font-weight: 500;
}

.create-mission-step.active {
    background: rgba(155, 89, 182, 0.1);
    color: #8e44ad;
}

.create-mission-step.active .step-num {
    background: #9b59b6;
    color: #fff;
}

.create-mission-step.completed .step-num {
    background: #27ae60;
    color: #fff;
}

/* Slides */
.create-mission-slide {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.create-mission-slide.active {
    display: flex;
}

/* Quest Type Selection */
.create-mission-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 6px;
    margin: -6px;
}

.create-mission-type {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.create-mission-type:hover {
    border-color: #9b59b6;
}

.create-mission-type.selected {
    border-color: #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.08), rgba(142, 68, 173, 0.12));
}

.create-mission-type.selected .create-mission-type-check {
    opacity: 1;
    transform: scale(1);
}

.create-mission-type-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.create-mission-type-icon.honeycomb {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: #fff;
}

.create-mission-type-icon.aura {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
}

.create-mission-type-icon.focalpoint {
    background: linear-gradient(135deg, #e91e63, #9c27b0);
    color: #fff;
}

.create-mission-type-info {
    flex: 1;
    min-width: 0;
}

.create-mission-type-info strong {
    display: block;
    font-size: 0.8rem;
    color: #333;
}

.create-mission-type-info span {
    font-size: 0.65rem;
    color: #888;
    line-height: 1.2;
    display: block;
}

.create-mission-type-check {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #9b59b6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Summary Section */
.create-mission-summary {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 0.85rem;
}

.create-mission-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eee;
}

.create-mission-summary-row:last-child {
    border-bottom: none;
}

.summary-label {
    font-size: 0.8rem;
    color: #888;
}

.summary-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

/* Map Container */
.create-mission-map-container {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 200px;
    border-radius: 10px;
    overflow: hidden;
    background: #e8e8e8;
}

.create-mission-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.create-mission-map-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.8;
}

.create-mission-map-placeholder span {
    font-size: 0.85rem;
    opacity: 0.9;
}

.create-mission-map {
    width: 100%;
    height: 100%;
    display: none;
}

.create-mission-map.visible {
    display: block;
}

/* Focal Point: lat/long entry (top-left of map, Focal Point only) */
.focal-point-lat-lng-entry {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.focal-point-lat-lng-input {
    width: 180px;
    padding: 6px 10px;
    font-size: 0.85rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    outline: none;
}

.focal-point-lat-lng-input:focus {
    border-color: #667eea;
}

.focal-point-lat-lng-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

.focal-point-lat-lng-btn:hover {
    opacity: 0.9;
}

/* Honeycomb Slider Overlay */
.create-mission-slider-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.7) 70%, transparent 100%);
    padding: 1.5rem 1rem 1rem;
    color: #fff;
}

.create-mission-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.create-mission-slider-header label {
    font-size: 0.85rem;
    font-weight: 500;
}

.create-mission-slider-value {
    background: #e67e22;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    min-width: 28px;
    text-align: center;
}

.create-mission-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    outline: none;
    margin-bottom: 0.5rem;
}

.create-mission-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #e67e22;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.create-mission-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #e67e22;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.create-mission-slider-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.create-mission-slider-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.create-mission-slider-hint strong {
    color: #e67e22;
    font-size: 0.85rem;
}

.create-mission-hex-actions {
    display: flex;
    gap: 0.25rem;
}

.hex-action-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
    transition: all 0.2s ease;
}

.hex-action-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.create-mission-slider-tip {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0.25rem 0 0 0;
    text-align: center;
    font-style: italic;
}

/* Focal Point Address Search */
.create-mission-address-search {
    position: relative;
}

.create-mission-address-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.create-mission-address-input-wrapper i {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    font-size: 0.95rem;
}

.create-mission-address-input-wrapper input {
    padding-left: 40px;
}

.create-mission-address-input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.95rem;
    color: #333;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.create-mission-address-input:focus {
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

.create-mission-address-input::placeholder {
    color: #9ca3af;
}

.create-mission-address-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 100;
    border: 1px solid #e5e7eb;
}

.focal-point-address-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.focal-point-address-result:hover {
    background: #f3f4f6;
}

.focal-point-address-result i {
    color: #9b59b6;
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.focal-point-address-result div {
    flex: 1;
    min-width: 0;
}

.focal-point-address-result strong {
    display: block;
    font-size: 0.9rem;
    color: #1f2937;
    margin-bottom: 2px;
}

.focal-point-address-result span {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.focal-point-address-searching {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

.focal-point-selected-location {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(155, 89, 182, 0.1);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 8px;
    margin-top: 12px;
    color: #8e44ad;
    font-size: 0.85rem;
}

.focal-point-selected-location i {
    color: #27ae60;
}

/* Focal Point Overlay Content */
.focal-point-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #555;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 12px 0;
}

.focal-point-content i {
    font-size: 1.2rem;
    color: #e91e63;
}

.focal-point-markers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 120px;
    overflow-y: auto;
    padding: 4px 0;
}

.focal-point-marker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    background: linear-gradient(135deg, #f8f9fa, #fff);
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.15s;
}

.focal-point-marker-item:hover {
    border-color: #e91e63;
    box-shadow: 0 2px 6px rgba(233, 30, 99, 0.2);
}

.focal-point-marker-item .marker-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #e91e63;
    background: #fff;
}

/* Focal Point Stamp Overlay on Map */
.focal-point-stamp-overlay {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid #e91e63;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: #fff;
    cursor: pointer;
    transition: transform 0.15s;
}

.focal-point-stamp-overlay.default-marker {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.focal-point-stamp-overlay:hover {
    transform: scale(1.1);
}

.focal-point-stamp-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.focal-point-stamp-overlay.default-marker img {
    border-radius: 0;
    object-fit: contain;
}

.focal-point-stamp-overlay .marker-quantity-badge {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 2px solid #fff;
}

.focal-point-stamp-overlay.default-marker .marker-quantity-badge {
    top: -18px;
    right: -18px;
}

.focal-point-marker-item .marker-coords {
    font-size: 0.75rem;
    font-weight: 500;
    color: #333;
    font-family: "Fredoka", sans-serif;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.focal-point-marker-item .marker-qty {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 10px;
    margin-left: 2px;
}

.focal-point-marker-item .marker-close-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.15s;
    margin-left: 4px;
}

.focal-point-marker-item .marker-close-btn:hover {
    color: #ef4444;
}

.focal-point-marker-item button {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0 2px;
    font-size: 0.9rem;
    line-height: 1;
    transition: color 0.15s;
    margin-left: 4px;
}

.focal-point-marker-item button:hover {
    color: #ef4444;
}

.focal-point-markers-tip {
    font-size: 0.7rem;
    color: #888;
    margin: 0.5rem 0 0 0;
    text-align: center;
    font-style: italic;
}

.focal-point-markers-tip i {
    margin-right: 4px;
    color: #9b59b6;
}

/* Focal Point Editor Popup */
.focal-point-editor {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
    z-index: 100;
}

.focal-point-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    border-radius: 12px 12px 0 0;
}

.focal-point-editor-header span {
    font-size: 0.85rem;
    font-weight: 600;
}

.focal-point-editor-header button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 2px;
    font-size: 0.9rem;
    line-height: 1;
}

.focal-point-editor-header button:hover {
    color: #fff;
}

.focal-point-editor-body {
    padding: 12px 14px;
    overflow: hidden;
}

.focal-point-editor-field {
    margin-bottom: 12px;
    max-width: 100%;
}

.focal-point-editor-field:last-child {
    margin-bottom: 0;
}

.focal-point-editor-field label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.focal-point-editor-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.focal-point-editor-input:focus {
    outline: none;
    border-color: #9b59b6;
}

.focal-point-editor-input::placeholder {
    color: #9ca3af;
}

/* Stamp Selector in Editor */
.focal-point-stamp-selector {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    max-width: 100%;
}

.focal-point-stamp-selector::-webkit-scrollbar {
    height: 4px;
}

.focal-point-stamp-selector::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 2px;
}

.focal-point-stamp-option {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 2px solid #e5e7eb;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.focal-point-stamp-option:hover {
    border-color: #9b59b6;
}

.focal-point-stamp-option.selected {
    border-color: #9b59b6;
    box-shadow: 0 0 0 2px rgba(155, 89, 182, 0.3);
}

.focal-point-stamp-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.focal-point-stamp-option.default-marker {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
}

.focal-point-stamp-option.default-marker img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.focal-point-stamp-option .stamp-check {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    background: #9b59b6;
    border-radius: 50%;
    color: #fff;
    font-size: 0.55rem;
    display: none;
    align-items: center;
    justify-content: center;
}

.focal-point-stamp-option.selected .stamp-check {
    display: flex;
}

/* Editor Footer */
.focal-point-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

.focal-point-btn-delete {
    background: none;
    border: 1px solid #fecaca;
    color: #ef4444;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.focal-point-btn-delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.focal-point-btn-save {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.focal-point-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

/* Footer button variants */
.create-mission-btn-back,
.create-mission-btn-cancel {
    padding: 0.55rem 1rem;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.create-mission-btn-back:hover,
.create-mission-btn-cancel:hover {
    background: #f5f5f5;
    border-color: #ccc;
}

.create-mission-btn-next {
    padding: 0.55rem 1.1rem;
    border: none;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.create-mission-btn-next:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.create-mission-btn-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Fixed Header */
.create-mission-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: #fff;
    flex-shrink: 0;
}

.create-mission-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.create-mission-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.create-mission-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.create-mission-title p {
    margin: 0;
    font-size: 0.75rem;
    opacity: 0.85;
}

.create-mission-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.create-mission-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* Scrollable Body */
.create-mission-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.create-mission-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
}

/* Allow flatpickr calendar to overflow */
.create-mission-slide[data-slide="4"] .create-mission-body {
    overflow: visible;
}

/* Sections */
.create-mission-section {
    margin-bottom: 1.25rem;
}

.create-mission-section:last-child {
    margin-bottom: 0;
}

/* Location sections should expand to fill available space */
#missionLocationSection,
#focalPointLocationSection {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Slide 3 (Map) section should expand to fill available space */
.create-mission-slide[data-slide="3"] .create-mission-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

.create-mission-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.create-mission-section-title i {
    color: #9b59b6;
}

.create-mission-optional {
    font-weight: 400;
    text-transform: none;
    color: #999;
}

.create-mission-badge {
    background: #9b59b6;
    color: #fff;
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: auto;
}

/* Form Fields */
.create-mission-field {
    margin-bottom: 0.85rem;
}

.create-mission-field:last-child {
    margin-bottom: 0;
}

.create-mission-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: #444;
    margin-bottom: 0.35rem;
}

.create-mission-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.create-mission-input:focus {
    outline: none;
    border-color: #9b59b6;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.1);
}

textarea.create-mission-input {
    resize: vertical;
    min-height: 60px;
}

/* Stamps Grid */
.create-mission-stamps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 0.5rem;
    transition: opacity 0.2s;
}

.create-mission-stamps-grid.disabled {
    opacity: 0.4;
    pointer-events: none;
}

.create-mission-stamp {
    position: relative;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 0.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.create-mission-stamp:hover {
    border-color: #9b59b6;
    transform: translateY(-2px);
}

.create-mission-stamp.selected {
    border-color: #9b59b6;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.08), rgba(142, 68, 173, 0.12));
}

.create-mission-stamp.selected .create-mission-stamp-check {
    opacity: 1;
    transform: scale(1);
}

.create-mission-stamp-img {
    width: 50px;
    height: 50px;
    margin: 0 auto 0.35rem;
    border-radius: 8px;
    overflow: hidden;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.create-mission-stamp-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-mission-stamp-img i {
    font-size: 1.5rem;
    color: #ccc;
}

.create-mission-stamp-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: #333;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.create-mission-stamp-check {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 22px;
    height: 22px;
    background: #9b59b6;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.create-mission-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.5rem;
    color: #999;
}

.create-mission-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #ddd;
}

/* Locations */
.create-mission-locations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    margin: -6px;
    align-content: start;
}

/* Global mission notice in create modal */
.create-mission-global-notice {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

.create-mission-global-notice .create-mission-global-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.create-mission-global-notice .create-mission-global-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.create-mission-global-notice p {
    margin: 0;
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 500;
}

.create-mission-location {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.35rem;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.create-mission-location:hover {
    border-color: #e67e22;
}

.create-mission-location.selected {
    border-color: #e67e22;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.05), rgba(211, 84, 0, 0.1));
}

.create-mission-location.selected .create-mission-location-check {
    opacity: 1;
    transform: scale(1);
}

.create-mission-location-img {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    background: #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.create-mission-location-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.create-mission-location-img i {
    font-size: 1rem;
    color: #999;
}

.create-mission-location-img.global {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.create-mission-location-img.global i {
    color: #fff;
}

.create-mission-location-info {
    width: 100%;
    min-width: 0;
}

.create-mission-location-name {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.create-mission-location-meta {
    font-size: 0.6rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}

.create-mission-location-meta i {
    color: #e67e22;
    font-size: 0.55rem;
}

.create-mission-location-check {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background: #e67e22;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

@media (max-width: 400px) {
    .create-mission-locations {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fixed Footer */
.create-mission-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    background: #f8f9fa;
    border-top: 1px solid #eee;
    flex-shrink: 0;
    gap: 1rem;
}

.create-mission-notice {
    font-size: 0.75rem;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.create-mission-notice i {
    color: #9b59b6;
}

.create-mission-actions {
    display: flex;
    gap: 0.5rem;
}

.create-mission-btn-submit {
    padding: 0.55rem 1.1rem;
    border: none;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.create-mission-btn-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3);
}

.create-mission-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .create-mission-modal {
        width: 100%;
        height: 100vh;
        aspect-ratio: unset;
        border-radius: 0;
        border: none;
    }

    .create-mission-header {
        padding: 0.85rem 1rem;
    }

    .create-mission-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .create-mission-title h3 {
        font-size: 1rem;
    }

    .create-mission-body {
        padding: 0.85rem 1rem;
    }

    .create-mission-stamps-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .create-mission-footer {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .create-mission-notice {
        text-align: center;
    }

    .create-mission-actions {
        width: 100%;
    }

    .create-mission-btn-cancel,
    .create-mission-btn-submit {
        flex: 1;
        justify-content: center;
    }
}

/* Add Card Modal - Two Column Layout */
.admin-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 1.5rem;
}

.admin-form-col {
    display: flex;
    flex-direction: column;
}

.card-image-upload {
    cursor: pointer;
    border: 2px dashed #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.card-image-upload:hover {
    border-color: #9b59b6;
}

.card-image-preview {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    color: #999;
}

.card-image-preview i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.card-image-preview span {
    font-size: 0.8rem;
}

.card-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-form-hint {
    display: block;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.5rem;
}

.admin-form-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 10px;
    font-size: 0.85rem;
    color: #2980b9;
    margin-bottom: 1rem;
}

.admin-form-notice i {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Responsive */
@media (max-width: 992px) {
    .partner-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .partner-header-card {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1rem;
    }

    .partner-header-card > .partner-header-image-wrapper {
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .partner-header-card > .partner-header-content {
        flex: 1;
        min-width: 0;
    }

    .partner-header-card > .partner-header-badges {
        flex-basis: 100%;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
    }

    .partner-header-badges .partner-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    /* Hide text in badges on mobile, keep icons only */
    .partner-header-badges .partner-badge span {
        display: none;
    }

    /* Adjust padding for icon-only badges */
    .partner-header-badges .partner-badge {
        padding: 0.35rem;
        min-width: auto;
        width: auto;
        justify-content: center;
    }

    /* Hide chevron in rarity badge on mobile */
    .partner-header-badges .partner-badge.rarity .stamp-rarity-chevron {
        display: none;
    }

    .partner-header-title {
        font-size: 1rem;
    }

    .partner-header-description {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    .partner-header-title-row,
    .partner-header-desc-row {
        justify-content: flex-start;
    }

    .partner-toggle-section {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .partner-toggle-info {
        flex-direction: row;
        gap: 0.75rem;
    }

    .partner-toggle-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .partner-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .admin-form-row-2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .partner-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .partner-stat-card {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 0.5rem;
        gap: 0.4rem;
    }

    .partner-stat-icon {
        width: 28px;
        height: 28px;
    }

    .partner-stat-icon i {
        font-size: 0.9rem;
    }

    .partner-stat-content {
        flex: 1;
        min-width: 0;
    }

    .partner-stat-value {
        font-size: 0.85rem;
    }

    .partner-stat-label {
        font-size: 0.55rem;
        display: block;
        line-height: 1.1;
    }
}

/* ========================================
   PARTNER IMAGE UPLOAD & CROPPER (Light UI)
   ======================================== */

/* Image wrapper with hover overlay */
.partner-header-image-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.partner-header-image-wrapper .partner-header-image {
    width: 100%;
    height: 100%;
}

.partner-header-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.partner-header-image-wrapper:hover .partner-header-image-overlay {
    opacity: 1;
}

.partner-header-image-overlay i {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.partner-header-image-overlay span {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Crop Modal - Light UI */
.admin-crop-modal {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.admin-crop-header {
    text-align: center;
    margin-bottom: 1.25rem;
}

.admin-crop-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.15), rgba(155, 89, 182, 0.15));
    border-radius: 16px;
    border: 2px solid rgba(233, 30, 140, 0.2);
}

.admin-crop-icon i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.admin-crop-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 0.35rem 0;
}

.admin-crop-header p {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.admin-crop-area {
    width: 100%;
    max-height: 350px;
    background: #f5f5f5;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.admin-crop-area img {
    max-width: 100%;
    display: block;
}

.admin-crop-options {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.admin-toggle-switch {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-family: "Fredoka", sans-serif;
}

.admin-toggle-switch input {
    display: none;
}

.admin-toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ddd;
    border-radius: 24px;
    transition: background 0.25s ease;
}

.admin-toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.admin-toggle-switch input:checked + .admin-toggle-slider {
    background: #e91e8c;
}

.admin-toggle-switch input:checked + .admin-toggle-slider::before {
    transform: translateX(20px);
}

.admin-toggle-label {
    font-size: 0.95rem;
    color: #333;
}

.admin-toggle-label small {
    color: #888;
    font-size: 0.85rem;
}

.admin-crop-buttons {
    display: flex;
    gap: 0.75rem;
}

.admin-crop-buttons .admin-btn-cancel,
.admin-crop-buttons .admin-btn-primary {
    flex: 1;
}

/* Cropper.js Light Theme Overrides */
.admin-crop-modal .cropper-view-box {
    outline: 2px solid #e91e8c;
    outline-color: rgba(233, 30, 140, 0.75);
}

.admin-crop-modal .cropper-line {
    background-color: #e91e8c;
}

.admin-crop-modal .cropper-point {
    background-color: #e91e8c;
    width: 10px;
    height: 10px;
}

.admin-crop-modal .cropper-point.point-se {
    width: 12px;
    height: 12px;
}

.admin-crop-modal .cropper-dashed {
    border-color: rgba(233, 30, 140, 0.5);
}

.admin-crop-modal .cropper-center::before,
.admin-crop-modal .cropper-center::after {
    background-color: #e91e8c;
}

.admin-crop-modal .cropper-modal {
    background-color: rgba(0, 0, 0, 0.4);
}

.admin-crop-modal .cropper-bg {
    background-image: none;
    background-color: #f0f0f0;
}

/* Clickable Partner Badges */
.partner-badge.clickable {
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: "Fredoka", sans-serif;
}

.partner-badge.clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.partner-badge.clickable:active {
    transform: scale(0.98);
}

.partner-badge.clickable:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Partner Availability Section with Locations */
.partner-availability-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.partner-availability-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(155, 89, 182, 0.05));
    border-bottom: 1px solid #f0f0f0;
}

.partner-availability-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.partner-availability-title i {
    color: #9b59b6;
}

/* Web Link Section (for web-only partners) */
.partner-weblink-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    max-width: 100%;
}

.partner-weblink-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(155, 89, 182, 0.05), rgba(142, 68, 173, 0.05));
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
}

.partner-weblink-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0;
}

.partner-weblink-title i {
    color: #9b59b6;
}

.partner-weblink-section .partner-toggle-content {
    padding: 1.25rem;
}

.partner-toggle-icon.web-only {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
}

.partner-weblink-section.collapsed .admin-collapsible-content {
    display: none;
}

.partner-weblink-section.collapsed .admin-collapse-btn i {
    transform: rotate(180deg);
}

.partner-weblink-content {
    padding: 1.25rem;
    overflow: hidden;
}

.partner-weblink-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
}

.partner-weblink-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a2e;
}

.partner-weblink-label i {
    color: #9b59b6;
}

.partner-weblink-help {
    font-size: 0.8rem;
    color: #666;
    margin: 0;
}

.partner-weblink-preview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: "Monaco", "Consolas", monospace;
    font-size: 0.8rem;
    color: #666;
    overflow-x: auto;
    white-space: nowrap;
}

.partner-weblink-preview .weblink-slug {
    color: #9b59b6;
    font-weight: 600;
}

.partner-weblink-preview .weblink-rest {
    color: #999;
}

.partner-weblink-input-group {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 0.5rem;
}

.partner-weblink-prefix {
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    color: #666;
    white-space: nowrap;
}

.partner-weblink-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    color: #1a1a2e;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}

.partner-weblink-input:focus {
    border-color: #9b59b6;
}

.partner-weblink-input::placeholder {
    color: #aaa;
}

.partner-weblink-save-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.partner-weblink-save-btn:hover {
    opacity: 0.9;
}

.partner-weblink-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.partner-weblink-note {
    font-size: 0.75rem;
    color: #999;
    margin: 0.25rem 0 0;
}

/* SEO Prompt Field */
.partner-prompt-field {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-width: 100%;
    overflow: hidden;
}

.partner-prompt-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 200px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #fff;
    font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.partner-prompt-textarea:focus {
    outline: none;
    border-color: #4da3ff;
    box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.15);
}

.partner-prompt-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.partner-prompt-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.partner-prompt-hint {
    font-size: 0.75rem;
    color: #888;
    font-style: italic;
}

.partner-availability-section .partner-toggle-section,
.partner-toggle-content {
    margin-bottom: 0;
    box-shadow: none;
    border-radius: 0;
    border-bottom: none;
    padding: 1.25rem;
}

.partner-toggle-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Locations Section */
.partner-locations-section {
    border-top: 1px solid #f0f0f0;
    padding: 1.25rem 1.5rem;
}

.partner-locations-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #9b59b6;
    margin-bottom: 1rem;
}

.partner-locations-header i {
    font-size: 1rem;
}

/* Admin Location Cards - Square Style */
.admin-locations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.admin-location-card-wrapper {
    display: block;
    aspect-ratio: 1 / 1;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
}

.admin-location-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.admin-location-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(155, 89, 182, 0.2);
}

.admin-location-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-color: #e8e8e8;
}

.admin-location-card-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.85) 70%,
        rgba(255, 255, 255, 0.98) 100%
    );
}

.admin-location-card-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.875rem;
    font-family: "Fredoka", sans-serif;
}

.admin-location-top-badges {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-location-hex-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-radius: 20px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(233, 30, 140, 0.3);
}

.admin-location-hex-badge i {
    font-size: 0.7rem;
}

.admin-location-area-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    color: #666;
    font-size: 0.7rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 120px;
    overflow: hidden;
}

.admin-location-area-badge i {
    font-size: 0.65rem;
    color: #e91e8c;
    flex-shrink: 0;
}

.admin-location-area-badge span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-location-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin-top: auto;
    padding-bottom: 30px;
}

.admin-location-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-location-meta {
    font-size: 0.75rem;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.admin-location-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.5rem;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: "Fredoka", sans-serif;
    font-size: 13px;
    font-weight: 600;
    margin-top: 0.5rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.admin-location-view-btn:hover,
.admin-location-card:hover .admin-location-view-btn {
    background: linear-gradient(135deg, #db2777 0%, #be185d 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
    color: #fff;
}

@media (max-width: 768px) {
    .admin-location-view-btn {
        padding: 6px 12px;
        font-size: 11px;
        gap: 0.3rem;
    }
}

/* Empty state for locations */
.partner-locations-empty {
    text-align: center;
    padding: 2rem 1rem;
}

.partner-locations-empty i {
    font-size: 2.5rem;
    color: #ddd;
    display: block;
    margin-bottom: 0.75rem;
}

.partner-locations-empty p {
    font-size: 0.9rem;
    color: #666;
    margin: 0 0 0.25rem 0;
}

.partner-locations-empty small {
    font-size: 0.8rem;
    color: #999;
}

@media (max-width: 768px) {
    .admin-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .admin-locations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .admin-location-card-content {
        padding: 0.5rem;
    }

    .admin-location-title {
        font-size: 0.75rem;
    }
}

/* Partner Detail Two Column Layout */
.partner-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

.partner-column-left,
.partner-column-right {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.partner-column-left {
    order: 1;
}

.partner-column-right {
    order: 2;
}

.partner-column-left .partner-availability-section,
.partner-column-left .partner-weblink-section,
.partner-column-right .partner-section {
    height: 100%;
}

@media (max-width: 1024px) {
    .partner-two-column {
        grid-template-columns: 1fr;
    }

    .partner-column-left {
        order: 1;
    }

    .partner-column-right {
        order: 2;
    }
}

/* Adjust locations grid for single column */
.partner-column-left .admin-locations-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

@media (max-width: 768px) {
    .partner-column-left .admin-locations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .partner-column-left .admin-locations-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .partner-locations-section {
        padding: 0.75rem;
        overflow: hidden;
    }
}

/* Admin Modal Avatar (circular) */
.admin-modal-avatar {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 3px solid #fff;
}

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

.admin-modal-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.15), rgba(155, 89, 182, 0.15));
}

.admin-modal-avatar-placeholder i {
    font-size: 2rem;
    color: #9b59b6;
}

/* ========================================
   ADMIN CONTENT TABS (SEO & LLM)
   ======================================== */

.admin-content-tabs-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.admin-content-tabs-nav {
    display: flex;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #eee;
}

.admin-content-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.admin-content-tab:hover:not(.disabled) {
    color: #333;
    background: rgba(155, 89, 182, 0.05);
}

.admin-content-tab.active {
    color: #9b59b6;
    background: #fff;
}

.admin-content-tab.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border-radius: 3px 3px 0 0;
}

.admin-content-tab.disabled {
    color: #bbb;
    cursor: not-allowed;
}

.admin-content-tab i {
    font-size: 1rem;
}

.admin-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.admin-tab-badge.saved {
    color: #27ae60;
}

.admin-tab-badge.saved i {
    font-size: 0.75rem;
}

.admin-content-tab-panel {
    display: none;
}

.admin-content-tab-panel.active {
    display: block;
}

.admin-tab-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    border-bottom: 1px solid #f0f0f0;
    min-height: 48px;
}

.admin-tab-translation-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
}

.admin-tab-translation-status.missing {
    background: rgba(231, 76, 60, 0.1);
    color: #c0392b;
}

.admin-tab-translation-status.missing i {
    color: #e74c3c;
}

.admin-tab-translation-status.complete {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
}

.admin-tab-translation-status.complete i {
    color: #27ae60;
}

.admin-tab-panel-content {
    padding: 1.25rem;
}

/* Remove extra padding from elements inside tab panels since tab-panel-content has padding */
.admin-tab-panel-content .admin-seo-article,
.admin-tab-panel-content .admin-seo-generator,
.admin-tab-panel-content .admin-llm-content {
    padding: 0;
}

.admin-tab-panel-content .admin-llm-disabled {
    padding: 2rem 1rem;
}

/* ========================================
   ADMIN SEO ARTICLE SECTION (Light UI)
   ======================================== */

.admin-seo-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Collapsible Sections */
.admin-collapsible-section .admin-seo-header,
.admin-collapsible-section .partner-availability-header {
    cursor: pointer;
    user-select: none;
}

.admin-collapsible-section .admin-seo-header:hover,
.admin-collapsible-section .partner-availability-header:hover {
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(155, 89, 182, 0.08));
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.admin-collapse-btn i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.admin-collapsible-section.collapsed .admin-collapse-btn i {
    transform: rotate(180deg);
}

.admin-collapsible-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 5000px;
    opacity: 1;
}

.admin-collapsible-section.collapsed .admin-collapsible-content {
    max-height: 0;
    opacity: 0;
}

/* Lazy Loading Styles */
.admin-lazy-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #6c757d;
    font-size: 14px;
}

.admin-lazy-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e9ecef;
    border-top-color: var(--primary-color, #3498db);
    border-radius: 50%;
    animation: lazy-spin 0.8s linear infinite;
}

@keyframes lazy-spin {
    to {
        transform: rotate(360deg);
    }
}

.admin-lazy-loading .bi-exclamation-circle {
    color: #dc3545;
}

.admin-collapsible-section.collapsed {
    border-bottom: none;
}

.admin-collapsible-section.collapsed .admin-seo-header,
.admin-collapsible-section.collapsed .partner-availability-header {
    border-bottom: none;
    border-radius: 16px;
}

.admin-seo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.05), rgba(155, 89, 182, 0.05));
    border-bottom: 1px solid #f0f0f0;
}

.admin-seo-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
}

.admin-seo-title i {
    color: #9b59b6;
}

.admin-seo-saved-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 480px) {
    .admin-seo-saved-badge {
        padding: 0.35rem;
        gap: 0;
        font-size: 0;
        line-height: 0;
    }

    .admin-seo-saved-badge span {
        display: none;
    }

    .admin-seo-saved-badge i {
        font-size: 0.85rem;
        line-height: 1;
    }
}

.admin-seo-article,
.admin-seo-generator {
    padding: 1.25rem;
    overflow: hidden;
}

.admin-seo-section {
    overflow: hidden;
}

/* Breakdown Section */

.admin-breakdown-fields {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-breakdown-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-breakdown-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.admin-breakdown-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #888;
}

.admin-breakdown-label i {
    color: #9b59b6;
    font-size: 1rem;
}

/* Custom Image Dropdown */
.admin-image-dropdown {
    position: relative;
    min-width: 150px;
    max-width: 200px;
}

.admin-image-dropdown-selected {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    font-size: 0.75rem;
    color: #666;
    transition: border-color 0.2s;
}

.admin-image-dropdown-selected:hover {
    border-color: #9b59b6;
}

.admin-image-dropdown-selected img {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.admin-image-dropdown-selected .bi-image {
    font-size: 1rem;
    color: #bbb;
}

.admin-image-dropdown-selected span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-image-dropdown-selected .dropdown-arrow {
    font-size: 0.7rem;
    color: #999;
    margin-left: auto;
    transition: transform 0.2s;
}

.admin-image-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.admin-image-dropdown-options {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    margin-top: 4px;
}

.admin-image-dropdown.open .admin-image-dropdown-options {
    display: block;
}

.admin-image-dropdown-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-size: 0.75rem;
    color: #555;
    transition: background-color 0.15s;
}

.admin-image-dropdown-option:hover {
    background: #f5f0ff;
}

.admin-image-dropdown-option img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.admin-image-dropdown-option .bi-x-circle {
    font-size: 1.2rem;
    color: #bbb;
    width: 32px;
    text-align: center;
}

.admin-image-dropdown-option span {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-breakdown-textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #1a1a2e;
    line-height: 1.5;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.admin-breakdown-textarea:focus {
    outline: none;
    border-color: #9b59b6;
}

.admin-breakdown-textarea::placeholder {
    color: #aaa;
    font-style: italic;
}

.admin-breakdown-cta-hint {
    font-size: 0.75rem;
    color: #888;
    font-style: italic;
    margin-top: -0.25rem;
}

.admin-breakdown-cta-field .admin-breakdown-cta {
    font-weight: 600;
    font-size: 1rem;
}

.admin-breakdown-locale-content {
    /* Container for locale-specific content */
}

.admin-breakdown-question-field {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.admin-breakdown-question {
    font-size: 1rem;
    font-weight: 500;
}

.admin-breakdown-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.admin-breakdown-save-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-breakdown-save-btn:hover {
    background: linear-gradient(135deg, #a66bbe, #9b59b6);
    transform: translateY(-1px);
}

.admin-breakdown-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.admin-breakdown-enrich-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: linear-gradient(135deg, #e67e22, #d35400);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-breakdown-enrich-btn:hover {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    transform: translateY(-1px);
}

.admin-breakdown-enrich-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Offer Fields in Breakdown */
.admin-breakdown-offer-fields {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.admin-breakdown-offer-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 0.75rem;
}

.admin-breakdown-offer-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    overflow: hidden;
}

.admin-breakdown-offer-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #888;
}

.admin-breakdown-offer-label i {
    color: #9b59b6;
    font-size: 0.85rem;
}

.admin-breakdown-offer-input-group {
    display: flex;
    gap: 0.35rem;
    min-width: 0;
}

.admin-breakdown-offer-input {
    width: 100%;
    min-width: 0;
    padding: 0.45rem 0.5rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    color: #1a1a2e;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.admin-breakdown-offer-input:focus {
    outline: none;
    border-color: #9b59b6;
}

.admin-breakdown-offer-input[readonly] {
    background: #f5f5f5;
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.admin-breakdown-offer-input::placeholder {
    color: #bbb;
}

.admin-breakdown-offer-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.admin-breakdown-offer-generate-btn:hover {
    background: linear-gradient(135deg, #a66bbe, #9b59b6);
    transform: translateY(-1px);
}

.admin-breakdown-offer-generate-btn i {
    font-size: 0.8rem;
}

.admin-seo-field {
    margin-bottom: 1rem;
}

.admin-seo-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
    width: 100%;
}

.admin-seo-label i {
    color: #9b59b6;
}

.admin-seo-char-count,
.admin-seo-word-count {
    margin-left: auto !important;
    font-weight: 500;
    color: #888;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.admin-seo-label-text {
    flex: 1;
}

.admin-seo-value {
    font-size: 0.9rem;
    color: #1a1a2e;
    line-height: 1.5;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-seo-summary {
    font-size: 0.85rem;
    color: #666;
}

.admin-seo-body {
    font-size: 0.85rem;
    color: #444;
    line-height: 1.6;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-seo-meta {
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.admin-seo-cost-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-seo-cost {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-weight: 600;
}

.admin-seo-total-cost {
    background: rgba(39, 174, 96, 0.1);
    color: #27ae60;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-seo-total-cost i {
    font-size: 0.75rem;
}

.admin-seo-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-seo-copy-btn,
.admin-seo-regen-btn,
.admin-seo-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-seo-copy-btn:hover,
.admin-seo-regen-btn:hover,
.admin-seo-back-btn:hover {
    background: #e8e8e8;
    border-color: #ccc;
}

.admin-seo-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-seo-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(233, 30, 140, 0.3);
}

.admin-seo-intro {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}

.admin-seo-back-btn {
    margin-bottom: 1rem;
    width: 100%;
    justify-content: center;
}

.admin-seo-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-seo-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(233, 30, 140, 0.3);
}

.admin-seo-generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.admin-seo-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    color: #666;
    font-size: 0.9rem;
}

.admin-seo-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e8e8e8;
    border-top-color: #9b59b6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.admin-seo-results {
    margin-top: 1rem;
}

.admin-seo-input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    color: #1a1a2e;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.admin-seo-input:focus {
    outline: none;
    border-color: #9b59b6;
}

.admin-seo-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #1a1a2e;
    resize: vertical;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.admin-seo-textarea:focus {
    outline: none;
    border-color: #9b59b6;
}

.admin-seo-body-input {
    min-height: 150px;
    line-height: 1.5;
}

.admin-seo-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 8px;
    color: #e74c3c;
    font-size: 0.85rem;
    margin-top: 1rem;
}

/* Admin Quiz Section */
.admin-quiz-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.admin-quiz-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #666;
}

.admin-quiz-list {
    padding: 0;
}

.admin-quiz-item {
    border-bottom: 1px solid #eee;
}

.admin-quiz-item:last-child {
    border-bottom: none;
}

.admin-quiz-item-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.admin-quiz-item-header:hover {
    background: #f9f9f9;
}

.admin-quiz-item.expanded .admin-quiz-item-header {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.admin-quiz-item.expanded .admin-quiz-item-header:hover {
    background: linear-gradient(135deg, #db2777, #be185d);
}

.admin-quiz-item.expanded .admin-quiz-number {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.admin-quiz-item.expanded .admin-quiz-question-text {
    color: #fff;
}

.admin-quiz-item.expanded .admin-quiz-answer-preview {
    color: rgba(255, 255, 255, 0.85);
}

.admin-quiz-item.expanded .admin-quiz-chevron {
    color: rgba(255, 255, 255, 0.7);
}

.admin-quiz-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ec4899, #db2777);
    color: #fff;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.admin-quiz-preview {
    flex: 1;
    min-width: 0;
}

.admin-quiz-question-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-quiz-answer-preview {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: #10b981;
    margin-top: 0.25rem;
}

.admin-quiz-answer-preview i {
    font-size: 0.7rem;
}

.admin-quiz-chevron {
    color: #999;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.admin-quiz-item.expanded .admin-quiz-chevron {
    transform: rotate(180deg);
}

.admin-quiz-item-body {
    display: none;
    padding: 1.25rem;
    background: rgba(236, 72, 153, 0.05);
    box-sizing: border-box;
    overflow: hidden;
}

.admin-quiz-item.expanded .admin-quiz-item-body {
    display: block;
}

.admin-quiz-field {
    margin-bottom: 1rem;
    max-width: 100%;
    overflow: hidden;
}

.admin-quiz-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-quiz-input {
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.admin-quiz-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.admin-quiz-options {
    margin-bottom: 1rem;
}

.admin-quiz-options label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-quiz-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.admin-quiz-correct-btn {
    background: transparent;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    font-size: 1rem;
    transition: all 0.2s;
    flex-shrink: 0;
}

.admin-quiz-correct-btn:hover {
    color: #10b981;
}

.admin-quiz-option.correct .admin-quiz-correct-btn {
    color: #10b981;
}

.admin-quiz-correct-indicator {
    color: #ccc;
    padding: 0.25rem;
    font-size: 1rem;
    flex-shrink: 0;
}

.admin-quiz-option.correct .admin-quiz-correct-indicator {
    color: #10b981;
}

.admin-quiz-option-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.admin-quiz-option-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.admin-quiz-option.correct .admin-quiz-option-input {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.admin-quiz-item-actions {
    display: flex;
    justify-content: flex-end;
}

.admin-quiz-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px solid #e74c3c;
    border-radius: 6px;
    color: #e74c3c;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-quiz-delete-btn:hover {
    background: #e74c3c;
    color: #fff;
}

.admin-quiz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

.admin-quiz-empty i {
    font-size: 3rem;
    color: #ddd;
    margin-bottom: 1rem;
}

.admin-quiz-empty p {
    color: #999;
    margin-bottom: 1rem;
}

.admin-quiz-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-quiz-generate-btn i {
    font-size: 1rem;
    color: #fff;
}

.admin-quiz-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.admin-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

.admin-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Quiz Generation Modal */
.admin-quiz-gen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.admin-quiz-gen-overlay.active {
    opacity: 1;
    visibility: visible;
}

.admin-quiz-gen-modal {
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    max-width: 400px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.admin-quiz-gen-overlay.active .admin-quiz-gen-modal {
    transform: scale(1);
}

.admin-quiz-gen-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-quiz-gen-icon > i {
    font-size: 2.5rem;
    color: #ec4899;
    z-index: 2;
    animation: quizIconPulse 2s ease-in-out infinite;
}

.admin-quiz-gen-icon.article > i {
    color: #9b59b6;
}

.admin-quiz-gen-icon.article .ring {
    border-color: rgba(155, 89, 182, 0.3);
}

.admin-quiz-gen-icon.breakdown > i {
    color: #e67e22;
}

.admin-quiz-gen-icon.breakdown .ring {
    border-color: rgba(230, 126, 34, 0.3);
}

.admin-quiz-gen-icon.translate > i {
    color: #3498db;
}

.admin-quiz-gen-icon.translate .ring {
    border-color: rgba(52, 152, 219, 0.3);
}

.admin-quiz-gen-icon.llm > i {
    color: #17a2b8;
}

.admin-quiz-gen-icon.llm .ring {
    border-color: rgba(23, 162, 184, 0.3);
}

.admin-quiz-gen-icon.audio > i {
    color: #e91e63;
}

.admin-quiz-gen-icon.audio .ring {
    border-color: rgba(233, 30, 99, 0.3);
}

.admin-quiz-gen-icon.translate > i {
    color: #ff9800;
}

.admin-quiz-gen-icon.translate .ring {
    border-color: rgba(255, 152, 0, 0.3);
}

/* Gallery Section */
.admin-gallery-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-top: 1.5rem;
}

.admin-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.admin-gallery-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-gallery-item:hover .admin-gallery-actions {
    opacity: 1;
}

.admin-gallery-actions {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.admin-gallery-delete,
.admin-gallery-edit {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.admin-gallery-delete {
    background: rgba(220, 53, 69, 0.9);
}

.admin-gallery-delete:hover {
    background: #dc3545;
    transform: scale(1.1);
}

.admin-gallery-edit {
    background: rgba(99, 102, 241, 0.9);
}

.admin-gallery-edit:hover {
    background: #6366f1;
    transform: scale(1.1);
}

.admin-gallery-type-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.admin-gallery-type-badge.foreground {
    background: rgba(16, 185, 129, 0.9);
    color: #fff;
}

.admin-gallery-type-badge.background {
    background: rgba(99, 102, 241, 0.9);
    color: #fff;
}

.admin-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    font-size: 0.7rem;
    line-height: 1.3;
    opacity: 0;
    transition: opacity 0.2s;
}

.admin-gallery-item:hover .admin-gallery-caption {
    opacity: 1;
}

.admin-gallery-actions-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    padding-top: 1rem;
}

.admin-gallery-add-btn,
.admin-gallery-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-gallery-add-btn {
    border: 2px dashed #d1d5db;
    background: #f9fafb;
    color: #6b7280;
}

.admin-gallery-add-btn:hover {
    border-color: #9b59b6;
    background: rgba(155, 89, 182, 0.05);
    color: #9b59b6;
}

.admin-gallery-generate-btn {
    border: none;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
}

.admin-gallery-generate-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.admin-gallery-generate-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Gallery Prompts Modal */
.admin-prompts-modal {
    background: #fff;
    border-radius: 16px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 2rem;
    position: relative;
}

.admin-prompts-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.admin-prompts-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.admin-prompts-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.admin-prompts-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.25rem;
}

.admin-prompts-header p {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}

.admin-prompts-header-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.admin-prompts-loading {
    text-align: center;
    padding: 3rem 1rem;
}

.admin-prompts-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e7eb;
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.admin-prompts-loading p {
    color: #6b7280;
    font-size: 0.9rem;
}

.admin-prompts-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-prompts-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-prompts-section h4 small {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.8rem;
}

.admin-prompts-section h4 i {
    color: #8b5cf6;
}

.admin-prompts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.admin-prompt-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    position: relative;
}

.admin-prompt-card:hover {
    border-color: #d1d5db;
}

.admin-prompt-number {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 24px;
    height: 24px;
    background: #8b5cf6;
    color: #fff;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-prompt-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #374151;
    padding-left: 2rem;
    padding-right: 11rem;
    margin-bottom: 0.5rem;
}

.admin-prompt-caption {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
    padding-left: 2rem;
    padding-right: 11rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
}

.admin-prompt-caption::before {
    content: "Caption: ";
    font-weight: 600;
    font-style: normal;
}

.admin-prompt-copy {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.admin-prompt-copy:hover {
    color: #8b5cf6;
}

.admin-prompt-generate {
    position: absolute;
    top: 0.75rem;
    right: 2.5rem;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #7c3aed;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-family: "Fredoka", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.2s;
}

.admin-prompt-generate:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.2);
    color: #6d28d9;
}

.admin-prompt-generate:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

.admin-prompts-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.admin-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.admin-btn-secondary:hover {
    background: #e5e7eb;
}

/* Gallery Options in Modal */
.admin-gallery-options {
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-gallery-option-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-gallery-option-group label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #374151;
}

.admin-gallery-option-group label small {
    font-weight: 400;
    color: #9ca3af;
}

.admin-gallery-option-group input[type="text"],
.admin-gallery-option-group textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: "Fredoka", sans-serif;
    color: #374151;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.admin-gallery-option-group input[type="text"]:focus {
    outline: none;
    border-color: #9b59b6;
    box-shadow: 0 0 0 3px rgba(155, 89, 182, 0.1);
}

.admin-gallery-option-group input[type="text"]::placeholder,
.admin-gallery-option-group textarea::placeholder {
    color: #9ca3af;
}

.admin-gallery-type-buttons {
    display: flex;
    gap: 0.5rem;
}

.admin-type-btn {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.admin-type-btn:hover {
    border-color: #9ca3af;
}

.admin-type-btn.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

.admin-type-btn[data-type="foreground"].active {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.admin-type-btn[data-type="background"].active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
}

/* Gallery Edit Modal */
.admin-gallery-edit-modal {
    max-width: 450px;
}

.admin-gallery-edit-preview {
    width: 150px;
    height: 150px;
    margin: 0 auto 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.admin-gallery-edit-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
}

.admin-btn-danger:hover {
    background: #c82333;
}

/* Audio Narration Section */
.admin-audio-section {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-top: 1.5rem;
}

.admin-audio-section.disabled {
    opacity: 0.7;
}

.admin-audio-content {
    padding: 1.25rem;
}

.admin-audio-player {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.admin-audio-element {
    width: 100%;
    height: 40px;
    border-radius: 8px;
}

.admin-audio-element::-webkit-media-controls-panel {
    background: transparent;
}

.admin-audio-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.admin-audio-delete-btn {
    background: none;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.admin-audio-delete-btn:hover {
    background: #dc3545;
    color: #fff;
}

.admin-audio-settings {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.admin-audio-setting-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.admin-audio-setting-row:last-child {
    margin-bottom: 0;
}

.admin-audio-setting-row label {
    font-size: 0.85rem;
    font-weight: 500;
    color: #495057;
    min-width: 100px;
}

.admin-audio-select {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
}

.admin-audio-select:focus {
    outline: none;
    border-color: #e91e63;
    box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.1);
}

.admin-audio-checkboxes {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-audio-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: #495057;
}

.admin-audio-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #e91e63;
}

.admin-audio-checkbox span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-audio-checkbox i {
    font-size: 0.9rem;
}

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

.admin-quiz-gen-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.admin-quiz-gen-rings .ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(236, 72, 153, 0.3);
    border-radius: 50%;
    animation: quizRingExpand 2s ease-out infinite;
}

.admin-quiz-gen-rings .ring:nth-child(1) {
    width: 60px;
    height: 60px;
    animation-delay: 0s;
}

.admin-quiz-gen-rings .ring:nth-child(2) {
    width: 60px;
    height: 60px;
    animation-delay: 0.5s;
}

.admin-quiz-gen-rings .ring:nth-child(3) {
    width: 60px;
    height: 60px;
    animation-delay: 1s;
}

@keyframes quizRingExpand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

.admin-quiz-gen-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 0.5rem;
    font-family: "Fredoka", sans-serif;
}

.admin-quiz-gen-status {
    font-size: 1rem;
    color: #ec4899;
    margin: 0 0 1.25rem;
    font-weight: 500;
}

.admin-quiz-gen-progress {
    height: 8px;
    background: #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.admin-quiz-gen-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #db2777);
    border-radius: 4px;
    width: 0%;
    transition: width 0.5s ease;
}

#articleGenModal .admin-quiz-gen-progress-bar {
    background: linear-gradient(90deg, #9b59b6, #8e44ad);
}

#articleGenModal .admin-quiz-gen-status {
    color: #9b59b6;
}

.admin-quiz-gen-subtitle {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
}

@media (max-width: 480px) {
    .admin-quiz-item-header {
        padding: 0.85rem 1rem;
        align-items: flex-start;
    }

    .admin-quiz-preview {
        flex: 1;
        min-width: 0;
    }

    .admin-quiz-question-text {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.4;
        font-size: 0.85rem;
    }

    .admin-quiz-chevron {
        margin-top: 0.2rem;
    }

    .admin-quiz-item-body {
        padding: 1rem 1rem 1rem 2.75rem;
    }

    .admin-quiz-number {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
}

/* Admin LLM Summary Section */
.admin-llm-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
}

.admin-llm-section.disabled {
    opacity: 0.7;
}

.admin-llm-content {
    padding: 1.25rem;
}

.admin-llm-disabled {
    padding: 2rem 1.25rem;
    text-align: center;
    color: #888;
}

.admin-llm-disabled i {
    font-size: 2rem;
    color: #ccc;
    display: block;
    margin-bottom: 0.75rem;
}

.admin-llm-disabled p {
    margin: 0;
    font-size: 0.85rem;
}

.admin-llm-display {
    background: #f9fafb;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #444;
    white-space: pre-wrap;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.admin-llm-meta {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.admin-llm-results {
    margin-top: 1rem;
}

/* Admin llms.txt Reference Box */
.admin-llms-txt-box {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e8e8e8;
}

.admin-llms-txt-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}

.admin-llms-txt-header i {
    color: #e91e63;
}

.admin-llms-txt-link {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: #e91e63;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid #e91e63;
    border-radius: 4px;
    transition: all 0.2s;
}

.admin-llms-txt-link:hover {
    background: #e91e63;
    color: #fff;
}

.admin-llms-txt-desc {
    font-size: 0.8rem;
    color: #666;
    margin: 0 0 0.75rem 0;
}

.admin-llms-txt-url {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.admin-llms-txt-url code {
    flex: 1;
    font-size: 0.75rem;
    color: #e91e63;
    word-break: break-all;
}

.admin-llms-txt-copy {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.2s;
}

.admin-llms-txt-copy:hover {
    color: #e91e63;
}

.admin-llms-txt-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #28a745;
}

.admin-llms-txt-status i {
    font-size: 0.9rem;
}

/* Admin YouTube Section */
.admin-youtube-section {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-top: 1.5rem;
}

.admin-youtube-content {
    padding: 1.25rem;
}

.admin-youtube-description {
    font-size: 0.85rem;
    color: #666;
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.admin-youtube-input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.admin-youtube-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 1rem;
    transition: all 0.2s;
}

.admin-youtube-input-wrapper:focus-within {
    border-color: #ff0000;
    box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);
}

.admin-youtube-input-wrapper i {
    color: #ff0000;
    font-size: 1.25rem;
    margin-right: 0.75rem;
}

.admin-youtube-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.75rem 0;
    font-size: 0.9rem;
    font-family: "Fredoka", sans-serif;
    outline: none;
}

/* YouTube inline save button (in input group) */
.admin-youtube-input-group .admin-youtube-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-youtube-input-group .admin-youtube-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.admin-youtube-input-group .admin-youtube-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Cancel button row */
.admin-youtube-cancel-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.admin-youtube-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-youtube-cancel-btn:hover {
    background: #eee;
    color: #333;
}

.admin-youtube-thumbnail-preview {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 1rem;
}

.admin-youtube-thumbnail-preview img {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

.admin-youtube-meta {
    flex: 1;
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
}

.admin-youtube-meta-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a1a2e;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-youtube-meta-channel {
    font-size: 0.8rem;
    color: #666;
}

.admin-youtube-meta-stats {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.25rem;
}

.admin-youtube-meta-stats span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.admin-youtube-save-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.admin-youtube-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-youtube-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.admin-youtube-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* YouTube Search Section */
.admin-youtube-search-section {
    margin-bottom: 1.5rem;
}

.admin-youtube-search-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-youtube-search-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.admin-youtube-search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-youtube-search-results {
    margin-top: 1rem;
}

.admin-youtube-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.admin-youtube-result-card {
    background: #1a1a1a;
    border: 2px solid #333;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-youtube-result-card:hover {
    border-color: #666;
    transform: translateY(-2px);
}

.admin-youtube-result-card.selected {
    border-color: #ff0000;
    border-width: 3px;
}

.admin-youtube-result-card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.admin-youtube-result-info {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.admin-youtube-result-title {
    font-family: "Fredoka", sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

.admin-youtube-result-channel {
    font-family: "Fredoka", sans-serif;
    font-size: 0.7rem;
    color: #888;
}

.admin-youtube-search-loading,
.admin-youtube-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #888;
    font-family: "Fredoka", sans-serif;
    font-size: 0.9rem;
}

.admin-youtube-manual-section {
    margin-bottom: 1rem;
}

.admin-youtube-manual-label {
    display: block;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .admin-youtube-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .admin-youtube-results-grid {
        grid-template-columns: 1fr;
    }

    .admin-youtube-search-btn span {
        font-size: 0.8rem;
    }
}

/* YouTube Existing View */
.admin-youtube-preview {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.admin-youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.admin-youtube-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-youtube-url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    overflow: hidden;
}

.admin-youtube-url i {
    color: #ff0000;
    flex-shrink: 0;
}

.admin-youtube-url a {
    color: #ff0000;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-youtube-url a:hover {
    text-decoration: underline;
}

.admin-youtube-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.admin-youtube-edit-btn,
.admin-youtube-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-youtube-edit-btn {
    background: #f0f0f0;
    color: #333;
}

.admin-youtube-edit-btn:hover {
    background: #e0e0e0;
}

.admin-youtube-remove-btn {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.admin-youtube-remove-btn:hover {
    background: #dc3545;
    color: #fff;
}

@media (max-width: 480px) {
    .admin-youtube-thumbnail-preview {
        flex-direction: column;
    }

    .admin-youtube-thumbnail-preview img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .admin-youtube-info {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-youtube-actions {
        justify-content: center;
    }
}

/* Stamp Stats Grid - 5 columns */
.stamp-stats-grid {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
    .stamp-stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .stamp-stats-grid .partner-stat-card {
        padding: 0.5rem;
    }

    .stamp-stats-grid .partner-stat-value {
        font-size: 1rem;
    }

    .stamp-stats-grid .partner-stat-label {
        font-size: 0.65rem;
    }

    .stamp-stats-grid .partner-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .stamp-stats-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.35rem;
    }

    .stamp-stats-grid .partner-stat-card {
        padding: 0.4rem 0.25rem;
        flex-direction: column;
        text-align: center;
    }

    .stamp-stats-grid .partner-stat-icon {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .stamp-stats-grid .partner-stat-value {
        font-size: 0.85rem;
    }

    .stamp-stats-grid .partner-stat-label {
        font-size: 0.55rem;
    }
}

/* Admin Model Selector */
.admin-model-selector {
    margin-bottom: 1rem;
}

.admin-model-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    margin-bottom: 0.5rem;
}

.admin-model-options {
    display: flex;
    gap: 0.5rem;
}

.admin-model-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-model-option:hover {
    background: #eee;
    border-color: #ccc;
}

.admin-model-option.active {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border-color: #ec4899;
    color: #fff;
}

.admin-model-option i {
    font-size: 0.9rem;
}

/* Admin Field Edit Button */
.admin-field-edit-btn {
    background: transparent;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.75rem;
    transition: all 0.2s;
    margin-left: auto;
}

.admin-field-edit-btn:hover {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

/* Admin Inline Edit Button (for headers - light background) */
.admin-inline-edit-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #bbb !important;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s;
    flex-shrink: 0;
    opacity: 0.7;
}

.admin-inline-edit-btn:hover {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899 !important;
    opacity: 1;
}

.partner-header-title .admin-inline-edit-btn {
    color: #bbb !important;
}

/* Admin Header Inline Editor */
.admin-header-inline-editor {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.admin-header-inline-editor[style*="block"],
.admin-header-inline-editor.active {
    display: inline-flex !important;
}

.admin-header-title-input {
    flex: 0 0 auto;
    width: auto;
    min-width: 150px;
    max-width: 350px;
    padding: 0.4rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    color: #333;
    outline: none;
    transition: all 0.2s;
}

.admin-header-title-input:focus {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.admin-header-title-input::placeholder {
    color: #999;
}

.admin-header-editor-actions {
    display: inline-flex !important;
    gap: 0.35rem;
    align-items: center;
    flex-shrink: 0;
}

.admin-header-editor-actions .admin-field-cancel,
.admin-header-editor-actions .admin-field-save {
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
    white-space: nowrap;
}

.admin-header-editor-actions .admin-field-cancel {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666;
}

.admin-header-editor-actions .admin-field-cancel:hover {
    background: #eee;
}

.admin-header-editor-actions .admin-field-save {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    color: #fff;
}

.admin-header-editor-actions .admin-field-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

@media (max-width: 480px) {
    .admin-header-title-input {
        font-size: 1rem;
        padding: 0.35rem 0.6rem;
        min-width: 120px;
        max-width: 200px;
    }

    .admin-inline-edit-btn {
        font-size: 0.75rem;
        padding: 0.2rem 0.3rem;
    }

    .admin-header-editor-actions .admin-field-cancel,
    .admin-header-editor-actions .admin-field-save {
        padding: 0.35rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Admin Field Editor */
.admin-field-editor {
    margin-top: 0.5rem;
}

.admin-field-editor-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.admin-field-cancel,
.admin-field-save {
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-field-cancel {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #666;
}

.admin-field-cancel:hover {
    background: #eee;
}

.admin-field-save {
    background: linear-gradient(135deg, #ec4899, #db2777);
    border: none;
    color: #fff;
}

.admin-field-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}

/* Admin SEO Regenerate Button */
.admin-seo-regen-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-seo-regen-btn:hover {
    background: #eee;
    border-color: #ccc;
}

/* Stamp Rarity Badge Dropdown */
.stamp-rarity-badge-wrapper {
    position: relative;
}

.partner-badge.rarity {
    border-width: 1px;
    border-style: solid;
    cursor: pointer;
    transition: all 0.2s;
}

.partner-badge.rarity:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.partner-badge.preview {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    border: 1px solid rgba(99, 102, 241, 0.3);
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.partner-badge.preview:hover {
    background: rgba(99, 102, 241, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    text-decoration: none;
}

/* Stamp Detail - Equal Width Badges on Desktop */
@media (min-width: 769px) {
    .partner-header-badges .partner-badge,
    .partner-header-badges .stamp-rarity-wrapper .partner-badge {
        width: 110px;
        justify-content: center;
    }

    /* Rarity badge: needs flex-start for chevron */
    .partner-header-badges .partner-badge.rarity {
        justify-content: flex-start;
    }

    .partner-header-badges .partner-badge.rarity .stamp-rarity-chevron {
        margin-left: auto;
        padding-left: 0.5rem;
    }
}

/* Stamp Preview Modal */
.stamp-preview-modal {
    background: transparent;
    position: relative;
    animation: slideDown 0.3s ease;
}

.stamp-preview-modal-content {
    display: flex;
    justify-content: center;
    overflow: visible;
}

.stamp-preview-modal .stamp-preview-card {
    position: relative;
    transform: scale(1.4);
    transform-origin: center center;
}

.stamp-preview-modal .admin-modal-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: all 0.2s;
    z-index: 100;
    font-size: 0.8rem;
}

.stamp-preview-modal .admin-modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

@media (max-width: 480px) {
    .stamp-preview-modal .stamp-preview-card {
        transform: scale(1.5);
    }
}

.stamp-rarity-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.stamp-rarity-badge-wrapper.open .stamp-rarity-dropdown {
    display: block;
}

.stamp-rarity-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.stamp-rarity-option:hover {
    background: #f5f5f5;
}

.stamp-rarity-option.selected {
    background: rgba(236, 72, 153, 0.08);
    font-weight: 600;
}

.stamp-rarity-option i:first-child {
    font-size: 0.9rem;
}

.stamp-rarity-option .check-icon {
    margin-left: auto;
    color: #ec4899;
    font-size: 0.85rem;
}

/* Stamp Header Controls */
.stamp-header-card .partner-header-content {
    flex: 1;
    min-width: 0;
}

.stamp-header-controls {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.stamp-control-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stamp-control-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stamp-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
}

.stamp-selector:hover {
    background: #eee;
    border-color: #ccc;
}

.stamp-selector.open {
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.stamp-selector-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.stamp-selector-chevron {
    font-size: 0.7rem;
    color: #888;
    margin-left: auto;
    transition: transform 0.2s;
}

.stamp-selector.open .stamp-selector-chevron {
    transform: rotate(180deg);
}

.stamp-selector-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    max-width: 250px;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    display: none;
}

.stamp-selector.open .stamp-selector-dropdown {
    display: block;
}

.stamp-selector-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    color: #333;
    cursor: pointer;
    transition: background 0.15s;
}

.stamp-selector-option:hover {
    background: #f5f5f5;
}

.stamp-selector-option.selected {
    background: rgba(236, 72, 153, 0.08);
    font-weight: 600;
}

.stamp-selector-option i {
    font-size: 0.8rem;
    flex-shrink: 0;
}

.stamp-selector-option.selected i {
    color: #ec4899;
}

@media (max-width: 480px) {
    .stamp-header-controls {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        max-width: 100%;
    }

    .stamp-control-group {
        width: 100%;
        max-width: 200px;
    }

    .stamp-selector {
        width: 100%;
        max-width: 200px;
    }

    .stamp-selector-value {
        font-size: 0.8rem;
        max-width: 150px;
    }

    .stamp-selector-dropdown {
        max-width: 200px;
    }
}

/* Admin Translation Language Tabs */
.admin-lang-tabs {
    display: flex;
    gap: 0.5rem;
    margin: 0 0 1.25rem 0;
    padding: 0 0 1rem 0;
    border-bottom: 1px solid #e8e8e8;
    flex-wrap: wrap;
}

.admin-lang-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #666;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Fredoka", sans-serif;
}

.admin-lang-tab:hover {
    border-color: #e91e63;
    color: #e91e63;
}

.admin-lang-tab.active {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
}

.admin-lang-tab .fi {
    font-size: 0.9rem;
}

.admin-lang-tab-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    margin-left: 0.1rem;
}

.admin-lang-tab-status.complete {
    color: #28a745;
}

.admin-lang-tab-status.incomplete {
    color: #ffc107;
}

.admin-lang-tab.active .admin-lang-tab-status {
    color: inherit;
    opacity: 0.8;
}

/* Locale Content Containers */
.admin-locale-content {
    animation: fadeIn 0.2s ease;
}

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

/* Ensure modal form has proper structure */
.admin-modal-wide .admin-modal-form {
    display: flex;
    flex-direction: column;
}

.admin-modal-wide .admin-lang-tabs {
    order: -1;
}

/* Auto-Translate Actions */
.admin-translate-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.admin-translate-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-translate-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.admin-translate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.admin-translate-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #28a745;
}

/* Wide Modal for Translations */
.admin-modal-wide {
    max-width: 550px;
    width: 95%;
}

.admin-modal-wide .admin-lang-tabs {
    justify-content: center;
    margin-top: 0;
}

/* Language tabs inside modal - centered and compact */
.admin-new-deck-modal .admin-lang-tabs {
    justify-content: center;
    background: #f9f9f9;
    margin: 0 -1.5rem 1.25rem -1.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
}

/* Translation Status Badge on Cards */
.admin-translation-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.admin-translation-badge.complete {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.admin-translation-badge.incomplete {
    background: rgba(255, 193, 7, 0.1);
    color: #e6a700;
}

/* Translation Status Row */
.admin-translation-status-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* SEO/LLM Section Translation Tabs */
.admin-section-lang-tabs {
    display: flex;
    gap: 0.25rem;
}

.admin-section-lang-tab {
    padding: 0.25rem 0.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.admin-section-lang-tab:hover {
    border-color: #e91e63;
}

.admin-section-lang-tab.active {
    background: #e91e63;
    border-color: #e91e63;
    color: #fff;
}

.admin-section-lang-tab .fi {
    font-size: 0.8rem;
}

/* Stamp Detail - Partner Selector */
.stamp-partner-selector {
    margin-top: 0.75rem;
}

.stamp-control-group {
    position: relative;
    width: fit-content;
}

.stamp-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.stamp-selector:hover {
    border-color: #ec4899;
}

.stamp-selector-img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.stamp-selector-img-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #999;
    font-size: 0.75rem;
}

.stamp-selector-value {
    white-space: nowrap;
}

.stamp-selector-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    max-width: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

.stamp-selector-dropdown.show {
    display: block;
}

.stamp-selector-option {
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stamp-selector-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stamp-selector-option-img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}

.stamp-selector-option-img-placeholder {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #999;
    font-size: 0.75rem;
}

.stamp-selector-option:hover {
    background: #f5f5f5;
}

.stamp-selector-option.active {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

/* Stamp Detail - Rarity Dropdown */
.stamp-rarity-wrapper {
    position: relative;
}

.stamp-rarity-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    min-width: 140px;
}

.stamp-rarity-dropdown.show {
    display: block;
}

.stamp-rarity-option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.stamp-rarity-option:hover {
    background: #f5f5f5;
}

.stamp-rarity-option.active {
    font-weight: 600;
}

/* Stamp Detail Mobile */
@media (max-width: 768px) {
    .stamp-control-group {
        width: fit-content;
        max-width: 100%;
    }

    .stamp-selector {
        max-width: 200px;
    }

    .stamp-selector-value {
        font-size: 0.8rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stamp-selector-dropdown {
        max-width: 250px;
    }
}

/* Stamp Detail - 5 Column Stats Grid */
.partner-stats-5col {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
    .partner-stats-5col {
        grid-template-columns: repeat(5, 1fr);
    }

    .partner-stats-5col .partner-stat-card {
        padding: 0.6rem 0.4rem;
    }

    .partner-stats-5col .partner-stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
    }

    .partner-stats-5col .partner-stat-value {
        font-size: 0.95rem;
    }

    .partner-stats-5col .partner-stat-label {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .partner-stats-5col {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.35rem;
    }

    .partner-stats-5col .partner-stat-card {
        padding: 0.5rem 0.3rem;
        flex-direction: column;
        text-align: center;
    }

    .partner-stats-5col .partner-stat-icon {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .partner-stats-5col .partner-stat-value {
        font-size: 0.85rem;
    }

    .partner-stats-5col .partner-stat-label {
        font-size: 0.55rem;
        line-height: 1.1;
    }
}

/* Stamp Detail - Preview Badge Disabled State */
.partner-badge.preview.disabled {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border-color: rgba(156, 163, 175, 0.3);
    cursor: not-allowed;
    pointer-events: auto;
}

.partner-badge.preview.disabled:hover {
    background: rgba(156, 163, 175, 0.1);
    transform: none;
    box-shadow: none;
}

/* Stamp Detail - Hidden Elements */
.stamp-hidden-input {
    display: none;
}

.stamp-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stamp-rarity-chevron {
    font-size: 0.7rem;
    margin-left: 0.25rem;
}

.stamp-youtube-icon {
    color: #ff0000;
}

.stamp-quiz-count-badge {
    background: rgba(233, 30, 140, 0.15);
    color: #ec4899;
}

.admin-quiz-reward-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.5rem;
}

.admin-quiz-reward-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #10b981;
    white-space: nowrap;
}

.admin-quiz-reward-item i {
    font-size: 0.65rem;
}

.admin-quiz-reward-item:first-child {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

@media (max-width: 768px) {
    .admin-quiz-reward-info {
        display: none;
    }
}

.stamp-quiz-body-hidden {
    display: none;
}

.stamp-seo-meta-bottom {
    padding: 0 1rem 1rem;
}

.stamp-crop-modal-content {
    max-width: 500px;
}

.stamp-crop-area {
    width: 100%;
    max-height: 400px;
    background: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}

.stamp-crop-image {
    max-width: 100%;
}

.stamp-crop-buttons {
    margin-top: 1rem;
}

/* Stamp Detail Additional Styles */
.admin-seo-meta-padded {
    padding: 0 1rem 1rem;
}

.stamp-crop-modal {
    max-width: 500px;
}

.stamp-crop-area {
    width: 100%;
    max-height: 400px;
    background: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}

.stamp-crop-image {
    max-width: 100%;
}

.stamp-crop-buttons {
    margin-top: 1rem;
}

/* Claim Rewards Card in Quick Actions */
.dash-action-reward {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3) !important;
    border: 2px solid #f9a8d4 !important;
    cursor: pointer;
}
.dash-action-reward:hover {
    border-color: #ec4899 !important;
}
.dash-reward-icon {
    background: linear-gradient(135deg, #e91e8c, #9b59b6) !important;
}
.dash-action-reward .dash-action-text span {
    font-size: 0.75rem;
}
.dash-action-reward .dash-action-text span i.bi-lightning-fill {
    color: #f59e0b;
}
.dash-action-reward .dash-action-text span i.bi-bullseye {
    color: #e91e8c;
}

/* Signup Reward Modal - Uses existing daily-bonus-modal-overlay + stamp-modal-light */
.signup-reward-modal,
.signup-reward-modal * {
    font-family: "Fredoka", sans-serif !important;
}

.signup-reward-amounts {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 1rem 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(233, 30, 140, 0.08), rgba(155, 89, 182, 0.08));
    border-radius: 12px;
    border: 1px solid rgba(233, 30, 140, 0.2);
}
.signup-reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.signup-reward-item i {
    font-size: 1.25rem;
}
.signup-reward-item .klout-icon {
    color: #f59e0b;
}
.signup-reward-item .aura-icon {
    color: #e91e8c;
}
.signup-reward-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
}
.signup-reward-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.signup-reward-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.signup-reward-step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f9fafb;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
}
.signup-reward-step.done {
    background: #f0fdf4;
    border-color: #86efac;
}
.signup-reward-step .step-num {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.signup-reward-step.done .step-num {
    background: #22c55e;
}
.signup-reward-step .step-text {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
}
.step-action-btn {
    padding: 5px 10px;
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}
.step-action-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.step-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.step-action-btn.sent {
    background: #22c55e;
}
.step-app-links {
    display: flex;
    gap: 6px;
}
.step-app-links a {
    width: 30px;
    height: 30px;
    background: #1f2937;
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.step-app-links a:hover {
    background: #374151;
    transform: translateY(-1px);
}

/* Claim Reward Button */
.claim-reward-btn {
    width: 100%;
    margin-top: 16px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    animation: pulse-claim 2s ease-in-out infinite;
}
.claim-reward-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}
.claim-reward-btn:disabled {
    opacity: 0.8;
    cursor: not-allowed;
    animation: none;
}
.claim-reward-btn.claimed {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: none;
}
@keyframes pulse-claim {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

/* Completed badge for reward steps */
.step-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #22c55e;
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}
.step-completed-badge i {
    font-size: 0.85rem;
}

/* =====================================================
   REFERRALS SECTION - Admin Stamp Detail
   ===================================================== */

.admin-referral-stats {
    display: flex;
    gap: 8px;
    align-items: center;
}

.admin-referral-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: "Fredoka", sans-serif;
}

.admin-referral-stat.pending {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.admin-referral-stat.completed {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.admin-referral-stat.rewarded {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.admin-referral-stat.rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.admin-referrals-info {
    padding: 1rem 1.25rem;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-offer-code-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-offer-code-label {
    font-size: 0.85rem;
    color: #666;
    font-family: "Fredoka", sans-serif;
}

.admin-offer-code {
    background: linear-gradient(135deg, #e91e8c, #9b59b6);
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: monospace;
}

.admin-offer-rewards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-offer-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    font-family: "Fredoka", sans-serif;
}

.admin-offer-reward.klout {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.admin-offer-reward.aura {
    background: rgba(233, 30, 140, 0.15);
    color: #e91e8c;
}

.admin-referrals-table-wrapper {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#referralsContent {
    overflow: hidden;
}

.admin-referrals-table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    font-family: "Fredoka", sans-serif;
    font-size: 0.85rem;
    table-layout: fixed;
}

.admin-referrals-table th,
.admin-referrals-table td {
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-referrals-table th:nth-child(1),
.admin-referrals-table td:nth-child(1) {
    width: 35%;
}

.admin-referrals-table th:nth-child(2),
.admin-referrals-table td:nth-child(2) {
    width: 20%;
}

.admin-referrals-table th:nth-child(3),
.admin-referrals-table th:nth-child(4),
.admin-referrals-table td:nth-child(3),
.admin-referrals-table td:nth-child(4) {
    width: 15%;
    text-align: center;
}

.admin-referrals-table th:nth-child(5),
.admin-referrals-table td:nth-child(5) {
    width: 15%;
}

.admin-referrals-table th {
    font-weight: 600;
    color: #666;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #f8f9fa;
}

.admin-referrals-table th i {
    font-size: 1rem;
    color: #888;
}

.admin-referrals-table tbody tr:hover {
    background: #fafafa;
}

.admin-referrals-table tbody tr:last-child td {
    border-bottom: none;
}

.admin-referral-user-link {
    text-decoration: none;
    display: block;
}

.admin-referral-user-link:hover .admin-referral-name {
    color: #e91e8c;
}

.admin-referral-user-link:hover .admin-referral-email {
    color: #666;
}

.admin-referral-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-referral-name {
    font-weight: 500;
    color: #333;
    transition: color 0.2s;
}

.admin-referral-email {
    font-size: 0.75rem;
    color: #888;
    transition: color 0.2s;
}

.admin-referral-deleted {
    color: #aaa;
    font-style: italic;
}

.admin-referral-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.admin-referral-status.status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #f59e0b;
}

.admin-referral-status.status-completed {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.admin-referral-status.status-rewarded {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.admin-referral-status.status-rejected {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.admin-check-yes {
    color: #10b981;
    font-size: 1.1rem;
}

.admin-check-no {
    color: #d1d5db;
    font-size: 1.1rem;
}

.admin-referral-date {
    color: #666;
    font-size: 0.8rem;
}

.admin-referrals-empty {
    text-align: center;
    padding: 2rem;
    color: #888;
}

.admin-referrals-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.admin-referrals-empty p {
    margin: 0;
    font-family: "Fredoka", sans-serif;
}

.dash-home-map-zone-info-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    box-sizing: border-box;
    background: #e91e8c;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(233, 30, 140, 0.2);
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
}
.dash-home-map-zone-info-cta-btn:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}
.dash-home-map-zone-info-cta-btn--enriched {
    background: #16a34a;
    border-color: #fff;
}
.dash-home-map-zone-info-cta-btn--enriched:hover {
    background: #15803d;
    border-color: #fff;
}
.dash-home-map-zone-info-cta-btn--locked {
    cursor: not-allowed;
    pointer-events: auto;
}
.dash-home-map-zone-info-cta-btn--locked:hover {
    transform: none;
}

@keyframes dashCtaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(233, 30, 140, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(233, 30, 140, 0); }
    100% { box-shadow: 0 0 0 0 rgba(233, 30, 140, 0); }
}
.dash-create-cta-card--pulse {
    animation: dashCtaPulse 1.6s ease-in-out infinite;
    border-color: #e91e8c !important;
}