/**
 * CanvasClashes Platform — Centralized Universal User Profile Stylesheet
 * Rich, Modern Glassmorphism Multi-Tab Dashboard
 * Shared across: CanvasClashes Portal, Jigsaw Puzzle, Canvas Clash, Wildberries, and Admin
 */

:root {
    --cc-profile-bg: rgba(11, 17, 32, 0.96);
    --cc-profile-card: rgba(19, 30, 54, 0.75);
    --cc-profile-card-hover: rgba(30, 45, 78, 0.9);
    --cc-profile-border: rgba(0, 210, 255, 0.2);
    --cc-profile-border-glow: rgba(0, 210, 255, 0.45);
    --cc-profile-cyan: #00d2ff;
    --cc-profile-blue: #0ea5e9;
    --cc-profile-indigo: #6366f1;
    --cc-profile-purple: #8b5cf6;
    --cc-profile-pink: #ec4899;
    --cc-profile-emerald: #10b981;
    --cc-profile-amber: #f59e0b;
    --cc-profile-red: #ef4444;
    --cc-profile-text: #f8fafc;
    --cc-profile-text-muted: #94a3b8;
    --cc-profile-radius-sm: 8px;
    --cc-profile-radius-md: 14px;
    --cc-profile-radius-lg: 20px;
    --cc-profile-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Modal Backdrop */
.cc-profile-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: rgba(4, 8, 18, 0.86) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-family: var(--cc-profile-font) !important;
    color: var(--cc-profile-text) !important;
    box-sizing: border-box !important;
}

.cc-profile-backdrop *,
.cc-profile-backdrop *::before,
.cc-profile-backdrop *::after {
    box-sizing: border-box !important;
}

.cc-profile-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.cc-profile-backdrop.hidden {
    display: none !important;
}

/* Modal Container */
.cc-profile-modal {
    background: var(--cc-profile-bg) !important;
    border: 1px solid var(--cc-profile-border) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(0, 210, 255, 0.18) !important;
    border-radius: var(--cc-profile-radius-lg) !important;
    width: 100% !important;
    max-width: 880px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    transform: scale(0.95) translateY(12px) !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.cc-profile-backdrop.active .cc-profile-modal {
    transform: scale(1) translateY(0) !important;
}

/* Header */
.cc-profile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.cc-profile-title {
    margin: 0 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--cc-profile-cyan) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.cc-profile-close-btn {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--cc-profile-text-muted) !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.cc-profile-close-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
    transform: rotate(90deg) !important;
}

/* Scrollable Body */
.cc-profile-body {
    overflow-y: auto !important;
    padding: 1.25rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    max-height: calc(90vh - 130px) !important;
}

/* Top User Bar */
.cc-profile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
    padding: 1.1rem 1.25rem !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 210, 255, 0.04) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cc-profile-radius-md) !important;
    flex-wrap: wrap !important;
}

.cc-profile-user-info-group {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.cc-profile-avatar-box {
    width: 78px !important;
    height: 78px !important;
    border-radius: 50% !important;
    border: 3px solid rgba(0, 210, 255, 0.5) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, var(--cc-profile-indigo) 0%, var(--cc-profile-cyan) 100%) !important;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

.cc-profile-avatar-box:hover {
    border-color: #fff !important;
    box-shadow: 0 0 25px rgba(0, 210, 255, 0.6) !important;
    transform: scale(1.04) !important;
}

.cc-profile-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.cc-profile-avatar-initial {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    text-transform: uppercase !important;
}

.cc-profile-avatar-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.65) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

.cc-profile-avatar-box:hover .cc-profile-avatar-overlay {
    opacity: 1 !important;
}

.cc-profile-user-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
}

.cc-profile-username-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
}

.cc-profile-username {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #fff !important;
}

.cc-profile-verified-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.15rem 0.55rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    background: rgba(16, 185, 129, 0.18) !important;
    border: 1px solid rgba(16, 185, 129, 0.45) !important;
    color: #34d399 !important;
}

.cc-profile-email {
    font-size: 0.85rem !important;
    color: var(--cc-profile-text-muted) !important;
}

.cc-profile-joined-text {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Tier & Upgrade */
.cc-profile-tier-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 0.45rem !important;
}

@media (max-width: 650px) {
    .cc-profile-tier-group {
        align-items: flex-start !important;
        width: 100% !important;
    }
}

.cc-profile-tier-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.35rem 0.95rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

.cc-profile-tier-badge.tier-free {
    background: rgba(148, 163, 184, 0.15) !important;
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #cbd5e1 !important;
}

.cc-profile-tier-badge.tier-master {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(245, 158, 11, 0.35) 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.7) !important;
    color: #fef08a !important;
    box-shadow: 0 0 16px rgba(234, 179, 8, 0.35) !important;
}

.cc-profile-tier-badge.tier-admin {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(99, 102, 241, 0.35) 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.7) !important;
    color: #7dd3fc !important;
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.35) !important;
}

.cc-btn-upgrade-master {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    padding: 0.45rem 1rem !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4) !important;
    transition: all 0.2s ease !important;
}

.cc-btn-upgrade-master:hover {
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
}

.cc-profile-perks-strip {
    display: flex;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    color: #fde68a !important;
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    padding: 0.25rem 0.65rem !important;
}

.cc-profile-perks-strip.hidden,
.cc-btn-upgrade-master.hidden {
    display: none !important;
}

.cc-perk-bullet {
    color: rgba(245, 158, 11, 0.5) !important;
}

/* Tabs Navigation */
.cc-profile-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 0.4rem !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

.cc-profile-tabs::-webkit-scrollbar {
    display: none !important;
}

.cc-profile-tab-btn {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: var(--cc-profile-text-muted) !important;
    padding: 0.55rem 1rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.cc-profile-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border-color: rgba(0, 210, 255, 0.3) !important;
}

.cc-profile-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    border-color: var(--cc-profile-cyan) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2) !important;
}

/* Tab Panes */
.cc-tab-pane {
    display: none !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
    animation: ccFadeIn 0.25s ease !important;
}

.cc-tab-pane.active {
    display: flex !important;
}

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

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

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

.cc-stat-card {
    background: var(--cc-profile-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cc-profile-radius-md) !important;
    padding: 0.95rem 1.05rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    transition: all 0.2s ease !important;
}

.cc-stat-card:hover {
    border-color: rgba(0, 210, 255, 0.3) !important;
    background: var(--cc-profile-card-hover) !important;
    transform: translateY(-2px) !important;
}

.cc-stat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.cc-stat-icon {
    font-size: 1.25rem !important;
}

.cc-stat-badge {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    color: var(--cc-profile-cyan) !important;
    background: rgba(0, 210, 255, 0.1) !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: 4px !important;
}

.cc-stat-value {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}

.cc-stat-label {
    font-size: 0.74rem !important;
    color: var(--cc-profile-text-muted) !important;
    font-weight: 600 !important;
}

/* 2-Column Grid */
.cc-profile-grid-2col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem !important;
}

@media (max-width: 768px) {
    .cc-profile-grid-2col {
        grid-template-columns: 1fr !important;
    }
}

/* Glass Box */
.cc-glass-box {
    background: var(--cc-profile-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--cc-profile-radius-md) !important;
    padding: 1.15rem 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
}

.cc-box-title {
    margin: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
}

/* Quota Item */
.cc-quota-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    padding: 0.65rem 0.85rem !important;
}

.cc-quota-left {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

.cc-quota-icon {
    font-size: 1.3rem !important;
}

.cc-quota-info {
    display: flex !important;
    flex-direction: column !important;
}

.cc-quota-name {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.cc-quota-val {
    font-size: 0.72rem !important;
    color: var(--cc-profile-cyan) !important;
    font-weight: 700 !important;
}

.cc-btn-quota-action {
    background: rgba(0, 210, 255, 0.1) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    color: var(--cc-profile-cyan) !important;
    text-decoration: none !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    transition: all 0.2s ease !important;
}

.cc-btn-quota-action:hover {
    background: rgba(0, 210, 255, 0.2) !important;
    border-color: var(--cc-profile-cyan) !important;
    color: #fff !important;
}

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

.cc-booster-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    padding: 0.65rem 0.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.2rem !important;
}

.cc-booster-icon {
    font-size: 1.3rem !important;
}

.cc-booster-count {
    font-size: 1.15rem !important;
    font-weight: 900 !important;
    color: #fff !important;
}

.cc-booster-name {
    font-size: 0.68rem !important;
    color: var(--cc-profile-text-muted) !important;
    font-weight: 600 !important;
}

/* Forms */
.cc-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
}

.cc-form-label {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: var(--cc-profile-text-muted) !important;
}

.cc-form-input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    padding: 0.55rem 0.85rem !important;
    color: #fff !important;
    font-size: 0.85rem !important;
    font-family: inherit !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.cc-form-input:focus {
    border-color: var(--cc-profile-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.25) !important;
}

.cc-form-alert {
    display: none;
    padding: 0.5rem 0.8rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
}

.cc-form-alert.success {
    display: block !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #34d399 !important;
}

.cc-form-alert.error {
    display: block !important;
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}

/* Footer */
.cc-profile-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1rem 1.5rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
}

.cc-footer-left,
.cc-footer-right {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
}

.cc-btn-primary {
    background: linear-gradient(135deg, var(--cc-profile-cyan) 0%, #0072ff 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.6rem 1.25rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 4px 15px rgba(0, 210, 255, 0.35) !important;
    transition: all 0.2s ease !important;
}

.cc-btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(0, 210, 255, 0.55) !important;
}

.cc-btn-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
    padding: 0.6rem 1.1rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    transition: all 0.2s ease !important;
}

.cc-btn-danger:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    border-color: #ef4444 !important;
    color: #fff !important;
}

.cc-btn-admin-panel {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0.6rem 1.15rem !important;
    border-radius: var(--cc-profile-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.cc-btn-admin-panel:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6) !important;
}