/* ==========================================================================
   pages.css — Page-specific modules (Connect/Contact, UnderConstruction, SubscriptionPlans, SubscriptionSelect, SubscriptionOrder, MySubscriptions, MyPayment, GameProfile, UserProfile)
   ========================================================================== */

/* ---------- from lunar-pages.css (page sections) ---------- */

/* ==========================================================================
   Lunar Pro Craft - Master Design System
   استایل یکپارچه صفحات داخلی سایت
   About / Contact / Services / User Panel / System Check / ...
   ========================================================================== */
/* ==========================================================================
   1. Design Tokens
   ========================================================================== */
:root {
    /* ----------------------------------------------------------------------
       Background
       ---------------------------------------------------------------------- */
    --lunar-bg: #030712;
    --lunar-bg-soft: #071026;
    /* ----------------------------------------------------------------------
       Surfaces
       ---------------------------------------------------------------------- */
    --lunar-surface: rgba(10, 24, 52, 0.78);
    --lunar-surface-strong: rgba(10, 18, 34, 0.96);
    --lunar-surface-inner: rgba(15, 30, 65, 0.60);
    --lunar-surface-inner-hover: rgba(22, 45, 95, 0.80);
    /* ----------------------------------------------------------------------
       Borders
       ---------------------------------------------------------------------- */
    --lunar-border: rgba(56, 189, 248, 0.22);
    --lunar-border-soft: rgba(255, 255, 255, 0.08);
    --lunar-border-hover: rgba(56, 189, 248, 0.40);
    --lunar-border-glow: rgba(0, 168, 232, 0.45);
    /* ----------------------------------------------------------------------
       Text
       ---------------------------------------------------------------------- */
    --lunar-text: #f8fafc;
    --lunar-text-soft: #e2e8f0;
    --lunar-text-muted: #94a3b8;
    --lunar-text-dim: #64748b;
    --lunar-white: #ffffff;
    /* ----------------------------------------------------------------------
       Primary
       ---------------------------------------------------------------------- */
    --lunar-cyan: #38bdf8;
    --lunar-cyan-primary: #00a8e8;
    --lunar-cyan-hover: #0284c7;
    --lunar-cyan-dark: #0369a1;
    /* ----------------------------------------------------------------------
       Semantic
       ---------------------------------------------------------------------- */
    --lunar-success: #4ade80;
    --lunar-warning: #fbbf24;
    --lunar-danger: #f87171;
    --lunar-info: #38bdf8;
    /* ----------------------------------------------------------------------
       Existing Service Colors
       ---------------------------------------------------------------------- */
    --service-primary: #ff9f43;
    --service-info: #38bdf8;
    --service-success: #2ed573;
    --service-warning: #a78bfa;
    /* ----------------------------------------------------------------------
       Radius
       ---------------------------------------------------------------------- */
    --lunar-radius-sm: 0.65rem;
    --lunar-radius-md: 0.85rem;
    --lunar-radius-lg: 1rem;
    --lunar-radius-xl: 1.25rem;
    --lunar-radius-pill: 999px;
    /* ----------------------------------------------------------------------
       Blur
       ---------------------------------------------------------------------- */
    --lunar-blur-sm: 10px;
    --lunar-blur-md: 12px;
    --lunar-blur-lg: 16px;
    --lunar-blur-xl: 18px;
    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */
    --lunar-shadow-card: 0 18px 45px rgba(0, 0, 0, 0.45);
    --lunar-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
    --lunar-shadow-inner: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --lunar-shadow-cyan: 0 0 20px rgba(56, 189, 248, 0.10);
    /* ----------------------------------------------------------------------
       Motion
       ---------------------------------------------------------------------- */
    --lunar-transition-fast: 0.15s ease;
    --lunar-transition: 0.25s ease;
    --lunar-transition-slow: 0.35s ease;
    /* ----------------------------------------------------------------------
       Shared Control Dimensions
       ---------------------------------------------------------------------- */
    --lunar-control-height: 40px;
    --lunar-control-radius: var(--lunar-radius-sm);
}
.contact-card-max {
    width: 100%;
    padding: 0 !important;
}
.about-title {
    color: var(--lunar-text);
    font-size: clamp(1.85rem, 3.5vw, 2.5rem);
    line-height: 1.3;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.about-role {
    color: var(--lunar-cyan);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.8;
    font-weight: 600;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.about-summary {
    max-width: 44rem;
    color: var(--lunar-text-muted);
    font-size: 1rem;
    line-height: 1.9;
}
.profile-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.profile-frame {
    width: min(100%, 250px);
    aspect-ratio: 1;
    padding: 8px;
    border: 2px solid var(--lunar-border-glow);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(14, 165, 233, 0.25) 0%, rgba(7, 16, 38, 0.85) 100% );
    box-shadow: 0 0 30px rgba(0, 168, 232, 0.30);
    transition: transform var(--lunar-transition-slow), box-shadow var(--lunar-transition-slow);
}
.profile-frame:hover {
        transform: translateY(-4px);
        box-shadow: 0 0 40px rgba(0, 168, 232, 0.45);
    }
.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}
.service-card {
    --service-color: var(--lunar-cyan);
    --service-rgb: 56, 189, 248;
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1.35rem;
    background: var(--lunar-surface-inner);
    border: 1px solid rgba(var(--service-rgb), 0.22);
    border-radius: var(--lunar-radius-md);
    backdrop-filter: blur(var(--lunar-blur-sm));
    -webkit-backdrop-filter: blur(var(--lunar-blur-sm));
    transition: transform var(--lunar-transition), box-shadow var(--lunar-transition), border-color var(--lunar-transition), background var(--lunar-transition);
}
.service-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 4px;
        height: 100%;
        background: var(--service-color);
        box-shadow: 0 0 15px rgba(var(--service-rgb), 0.55);
        opacity: 0.75;
    }
.service-card:hover {
        background: var(--lunar-surface-inner-hover);
        border-color: rgba(var(--service-rgb), 0.5);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 22px rgba(var(--service-rgb), 0.16);
        transform: translateY(-4px);
    }
.service-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 0.9rem;
    color: var(--service-color);
    font-size: 1.35rem;
    background: rgba(var(--service-rgb), 0.11);
    border: 1px solid rgba(var(--service-rgb), 0.28);
    border-radius: var(--lunar-radius-md);
}
.service-card h3 {
    margin-bottom: 0.4rem;
    color: var(--service-color);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.75;
}
.service-card p {
    margin-bottom: 0;
    color: var(--lunar-text-muted);
    font-size: 0.84rem;
    line-height: 1.8;
}
.service-card.service-primary {
    --service-color: var(--service-primary);
    --service-rgb: 255, 159, 67;
}
.service-card.service-info {
    --service-color: var(--service-info);
    --service-rgb: 56, 189, 248;
}
.service-card.service-success {
    --service-color: var(--service-success);
    --service-rgb: 46, 213, 115;
}
.service-card.service-warning {
    --service-color: var(--service-warning);
    --service-rgb: 167, 139, 250;
}
.about-cta {
    position: relative;
    overflow: hidden;
    background: var(--lunar-surface);
    border: 1px solid var(--lunar-border);
    border-radius: var(--lunar-radius-xl);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(var(--lunar-blur-lg));
    -webkit-backdrop-filter: blur(var(--lunar-blur-lg));
}
.about-cta::before {
        content: "";
        position: absolute;
        top: 0;
        right: 15%;
        left: 15%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(56, 189, 248, 0.7), transparent );
    }
.contact-success {
    max-width: 820px;
    margin: 0 auto 1.5rem !important;
    border-radius: var(--lunar-radius-md);
    backdrop-filter: blur(var(--lunar-blur-sm));
    -webkit-backdrop-filter: blur(var(--lunar-blur-sm));
}
.contact-header {
    padding: 2.25rem 2rem 1rem;
    text-align: center;
}
.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 0 auto 1rem;
    color: #22d3ee;
    font-size: 1.6rem;
    background: rgba(34, 211, 238, 0.10);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.12);
}
.contact-header h1 {
    margin-bottom: 0.65rem;
    color: var(--lunar-text);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    font-weight: 800;
    line-height: 1.4;
}
.contact-header p {
    max-width: 620px;
    margin: 0 auto;
    color: var(--lunar-text-muted);
    font-size: 0.95rem;
    line-height: 1.9;
}
.contact-body {
    padding: 1rem 2.25rem 2.25rem;
}
.contact-card-max .form-label {
    margin-bottom: 0.4rem;
    color: var(--lunar-text-soft);
    font-size: 0.9rem;
    font-weight: 600;
}
.required-mark {
    margin-right: 0.2rem;
    color: var(--lunar-danger);
}
.contact-card-max .form-control {
    min-height: 46px;
    padding: 0.65rem 0.9rem;
    color: var(--lunar-text);
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.20);
    border-radius: var(--lunar-radius-sm);
    transition: border-color var(--lunar-transition-fast), box-shadow var(--lunar-transition-fast), background var(--lunar-transition-fast);
}
.contact-card-max .form-control:focus {
        color: var(--lunar-text);
        background: rgba(15, 23, 42, 0.92);
        border-color: #22d3ee;
        box-shadow: 0 0 0 0.18rem rgba(34, 211, 238, 0.12);
    }
.contact-card-max .form-control::placeholder {
        color: var(--lunar-text-dim);
    }
.contact-card-max textarea.form-control {
    min-height: 135px;
    resize: vertical;
    line-height: 1.8;
}
.contact-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
}
.contact-submit,
.contact-home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    min-height: var(--lunar-control-height);
    padding: 0.55rem 1.4rem;
    border-radius: var(--lunar-control-radius);
    font-weight: 700;
    transition: background var(--lunar-transition-fast), border-color var(--lunar-transition-fast), box-shadow var(--lunar-transition-fast), color var(--lunar-transition-fast), transform var(--lunar-transition-fast);
}
.contact-submit:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        filter: grayscale(0.4);
        transform: none;
        box-shadow: none;
    }
.contact-home {
    color: #cbd5e1;
    text-decoration: none;
    background: rgba(51, 65, 85, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.20);
}
.contact-home:hover {
        color: var(--lunar-white);
        background: rgba(71, 85, 105, 0.75);
        border-color: rgba(148, 163, 184, 0.35);
        transform: translateY(-1px);
    }
.contact-note {
    margin-top: 1.25rem;
    color: var(--lunar-text-dim);
    font-size: 0.82rem;
    line-height: 1.7;
    text-align: center;
}
.user-panel {
    color: var(--lunar-text);
}
.user-panel-header {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: linear-gradient( 135deg, rgba(10, 24, 52, 0.96) 0%, rgba(15, 48, 82, 0.92) 100% );
    border: 1px solid var(--lunar-border);
    border-radius: var(--lunar-radius-xl);
    box-shadow: var(--lunar-shadow-card), var(--lunar-shadow-inner);
    backdrop-filter: blur(var(--lunar-blur-lg));
    -webkit-backdrop-filter: blur(var(--lunar-blur-lg));
}
.user-panel-header::before {
        content: "";
        position: absolute;
        top: 0;
        right: 12%;
        left: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(56, 189, 248, 0.8), transparent );
    }
.user-panel-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
.user-panel-user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}
.user-panel-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: var(--lunar-white);
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient( 135deg, var(--lunar-cyan), var(--lunar-cyan-hover) );
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.user-panel-user-info {
    min-width: 0;
}
.user-panel-user-name {
    margin: 0 0 0.25rem;
    overflow: hidden;
    color: var(--lunar-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-panel-username {
    color: var(--lunar-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
}
.user-panel-username i {
        color: var(--lunar-cyan);
    }
.user-panel-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 34px;
    padding: 0.4rem 0.85rem;
    color: var(--lunar-white);
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--lunar-radius-pill);
}
.user-panel-status-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 8px currentColor;
}
.user-panel-status.is-active {
    color: var(--lunar-success);
}
.user-panel-status.is-inactive {
    color: var(--lunar-danger);
}
.user-panel-stat-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1.1rem 1.2rem;
    background: var(--lunar-surface);
    border: 1px solid var(--lunar-border);
    border-radius: var(--lunar-radius-lg);
    box-shadow: var(--lunar-shadow-soft), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(var(--lunar-blur-md));
    -webkit-backdrop-filter: blur(var(--lunar-blur-md));
    transition: transform var(--lunar-transition), border-color var(--lunar-transition), box-shadow var(--lunar-transition);
}
.user-panel-stat-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 12%;
        left: 12%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(56, 189, 248, 0.5), transparent );
    }
.user-panel-stat-card:hover {
        transform: translateY(-3px);
        border-color: var(--lunar-border-hover);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.42), var(--lunar-shadow-cyan);
    }
.user-panel-stat-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.user-panel-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: var(--lunar-cyan);
    font-size: 1.25rem;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: var(--lunar-radius-md);
}
.user-panel-stat-icon.success {
        color: var(--lunar-success);
        background: rgba(74, 222, 128, 0.10);
        border-color: rgba(74, 222, 128, 0.22);
    }
.user-panel-stat-icon.warning {
        color: var(--lunar-warning);
        background: rgba(251, 191, 36, 0.10);
        border-color: rgba(251, 191, 36, 0.22);
    }
.user-panel-stat-value {
    color: var(--lunar-text);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.5;
}
.user-panel-stat-value.status {
        font-size: 0.9rem;
    }
.user-panel-stat-value.status.inactive {
            color: var(--lunar-danger);
        }
.user-panel-stat-label {
    display: block;
    margin-top: 0.1rem;
    color: var(--lunar-text-muted);
    font-size: 0.76rem;
    line-height: 1.6;
}
.user-panel-card {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1.5rem;
    background: var(--lunar-surface);
    border: 1px solid var(--lunar-border);
    border-radius: var(--lunar-radius-xl);
    box-shadow: var(--lunar-shadow-card), var(--lunar-shadow-inner);
    backdrop-filter: blur(var(--lunar-blur-lg));
    -webkit-backdrop-filter: blur(var(--lunar-blur-lg));
}
.user-panel-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 10%;
        left: 10%;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(56, 189, 248, 0.65), transparent );
    }
.user-panel-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.user-panel-card-title {
    margin: 0;
    color: var(--lunar-text);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.6;
}
.user-panel-card-subtitle {
    display: block;
    margin-top: 0.2rem;
    color: var(--lunar-text-muted);
    font-size: 0.78rem;
    line-height: 1.7;
}
.user-panel-profile {
    position: relative;
    height: 100%;
    overflow: hidden;
    padding: 1rem;
    background: var(--lunar-surface-inner);
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: var(--lunar-radius-lg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(var(--lunar-blur-sm));
    -webkit-backdrop-filter: blur(var(--lunar-blur-sm));
    transition: transform var(--lunar-transition), border-color var(--lunar-transition), background var(--lunar-transition), box-shadow var(--lunar-transition);
}
.user-panel-profile:hover {
        background: var(--lunar-surface-inner-hover);
        border-color: var(--lunar-border-hover);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.38), var(--lunar-shadow-cyan);
        transform: translateY(-3px);
    }
.user-panel-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.user-panel-profile-main {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}
.user-panel-profile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    color: var(--lunar-cyan);
    font-size: 1.25rem;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: var(--lunar-radius-md);
}
.user-panel-profile-name {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--lunar-text);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-panel-profile-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.user-panel-profile-meta .badge {
        padding: 0.3rem 0.5rem;
        font-size: 0.68rem;
        font-weight: 600;
        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: var(--lunar-radius-sm);
    }
.user-panel-profile-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    color: var(--lunar-text-muted);
    font-size: 0.73rem;
}
.user-panel-profile-info span {
        white-space: nowrap;
    }
.user-panel-profile-info b {
        color: var(--lunar-text-soft);
        font-weight: 700;
    }
.user-panel-profile-action {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.user-panel-profile-action .btn {
        min-height: var(--lunar-control-height);
        font-size: 0.82rem;
        font-weight: 700;
    }
.user-panel-account-list {
    margin: 0;
}
.user-panel-account-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 46px;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.user-panel-account-row:last-child {
        border-bottom: 0;
    }
.user-panel-account-label {
    color: var(--lunar-text-muted);
    font-size: 0.78rem;
}
.user-panel-account-value {
    overflow-wrap: anywhere;
    color: var(--lunar-text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
}
.user-panel #launchAlert {
    display: none;
    margin-bottom: 1rem;
    padding: 0.65rem 1rem;
    color: var(--lunar-white) !important;
    font-size: 0.8rem;
    font-weight: 700;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--lunar-radius-md);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.user-panel #launchAlert.alert-info {
        background: rgba(12, 74, 110, 0.82) !important;
        border-color: rgba(56, 189, 248, 0.55) !important;
    }
.user-panel #launchAlert.alert-success {
        background: rgba(20, 83, 45, 0.82) !important;
        border-color: rgba(34, 197, 94, 0.55) !important;
    }
.user-panel #launchAlert.alert-danger {
        background: rgba(127, 29, 29, 0.82) !important;
        border-color: rgba(239, 68, 68, 0.55) !important;
    }
@media (max-width: 991.98px) {
    .lunar-card {
        padding: 1.5rem;
    }
    .profile-frame {
        width: 220px;
    }
    .user-panel-header-inner {
        align-items: flex-start;
        flex-direction: column;
    }
    .user-panel-status {
        align-self: flex-start;
    }
    .user-panel-card {
        padding: 1.25rem;
    }
    .loader-radio-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .system-check-layout {
        align-items: flex-start;
    }
    .system-check-card #btnSystemCheck {
        min-width: 165px;
    }
}
@media (max-width: 767.98px) {
    .lunar-page-wrapper {
        padding-top: 1.25rem !important;
        padding-bottom: 2rem !important;
    }
    .lunar-card {
        padding: 1.25rem;
    }
    .profile-frame {
        width: 190px;
    }
    .service-card {
        padding: 1.15rem;
    }
    .contact-header {
        padding: 1.5rem 1.25rem 0.75rem;
    }
    .contact-body {
        padding: 0.75rem 1.25rem 1.5rem;
    }
    .contact-actions {
        width: 100%;
        flex-direction: column;
    }
    .contact-submit,
    .contact-home {
        width: 100%;
    }
    .user-panel-header-inner {
        padding: 1rem;
    }
    .user-panel-user {
        width: 100%;
    }
    .user-panel-avatar {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }
    .user-panel-card {
        padding: 1rem;
    }
    .user-panel-card-header {
        align-items: flex-start;
        flex-direction: column;
    }
        .user-panel-card-header .btn {
            width: 100%;
        }
    .user-panel-profile-info {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.3rem;
    }
    .user-panel-account-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.2rem;
    }
    .user-panel-account-value {
        text-align: right;
    }
    .loader-radio-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* ----------------------------------------------------------------------
       System Check
       ---------------------------------------------------------------------- */
    .system-check-card {
        padding: 1rem !important;
    }
    .system-check-layout {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }
    .system-check-main {
        gap: 0.75rem;
    }
    .system-check-card #btnSystemCheck {
        width: 100%;
        min-width: 0;
    }
    .system-check-card .system-check-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }
        .system-check-card .system-check-actions .btn {
            width: 100%;
        }
}
@media (max-width: 420px) {
    .user-panel-header-inner {
        padding: 0.85rem;
    }
    .user-panel-user-name {
        font-size: 0.95rem;
    }
    .user-panel-username {
        font-size: 0.75rem;
    }
    .user-panel-stat-inner {
        gap: 0.65rem;
    }
    .user-panel-stat-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
    .loader-radio-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .system-check-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
        font-size: 1.2rem;
    }
    .system-check-card h5 {
        font-size: 0.94rem;
    }
    .system-check-card p,
    .system-check-description {
        font-size: 0.78rem;
    }
}
@media (max-width: 767.98px) {
    .system-check-header {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }
    .system-check-info {
        align-items: flex-start;
    }
    .system-check-primary-action {
        width: 100%;
    }
    .system-check-card #btnSystemCheck {
        width: 100%;
        min-width: 0;
    }
    .system-check-result {
        margin-top: 1rem;
    }
    .system-check-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
        .system-check-actions .btn {
            width: 100%;
        }
}
@media (max-width: 420px) {
    .system-check-info {
        gap: 0.75rem;
    }
    .system-check-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex-basis: 44px;
        font-size: 1.2rem;
    }
    .system-check-text h5 {
        font-size: 0.95rem;
    }
    .system-check-description {
        font-size: 0.78rem;
        line-height: 1.8;
    }
}
.user-panel-card-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.user-panel-card-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    color: var(--lunar-cyan);
    font-size: 1.15rem;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: var(--lunar-radius-md);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.user-panel-card-title-wrap > div:last-child {
    min-width: 0;
}
@media (max-width: 575.98px) {

    .user-panel-modal .modal-header,
    .user-panel-modal .modal-body,
    .user-panel-modal .modal-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .user-panel-form-label-row {
        align-items: flex-start;
    }

        .user-panel-form-label-row > span:first-child > span {
            white-space: normal;
        }

    .loader-radio-group {
        grid-template-columns: repeat(2, 1fr);
    }

        .loader-radio-group > div:last-child {
            grid-column: span 2;
        }

    .user-panel-modal .modal-footer {
        flex-wrap: wrap;
    }

        .user-panel-modal .modal-footer .btn {
            flex: 1;
        }
}

/* ---------- from page-internal.css (9 view modules) ---------- */

/* ==========================================================================
   LUNAR UNIFIED PAGES STYLESHEET
   Unified styles for GameProfile, Connect, UserProfile, UnderConstruction,
   SubscriptionPlans, SubscriptionSelect, SubscriptionOrder,
   MySubscriptions, and MyPayment.
   ========================================================================== */

:root {
  --lunar-primary: #38bdf8;
  --lunar-primary-rgb: 56, 189, 248;
  --lunar-accent: #6366f1;
  --lunar-dark: #070d18;
  --lunar-card-bg: rgba(13, 24, 44, 0.72);
  --lunar-card-border: rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   Page: Connect.cshtml
   ========================================================================== */
.launcher-profile-card {
        padding: 1.15rem;
        border-radius: 16px;
        background: rgba(10, 24, 52, .68);
        border: 1px solid rgba(148, 163, 184, .14);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .launcher-profile-card:hover {
        transform: translateY(-2px);
        border-color: rgba(56, 189, 248, .30);
        box-shadow: 0 14px 36px rgba(0, 0, 0, .25);
    }

    .launcher-profile-icon {
        width: 50px;
        height: 50px;
        min-width: 50px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(56, 189, 248, .10);
        border: 1px solid rgba(56, 189, 248, .18);
        color: #38bdf8;
        font-size: 1.35rem;
    }

    .launcher-version-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .25rem .55rem;
        border-radius: 7px;
        background: rgba(56, 189, 248, .08);
        border: 1px solid rgba(56, 189, 248, .16);
        color: #7dd3fc;
        font-size: .75rem;
        white-space: nowrap;
    }

    .launcher-info-badge {
        display: inline-flex;
        align-items: center;
        padding: .28rem .55rem;
        border-radius: 7px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(148, 163, 184, .10);
        color: #94a3b8;
        font-size: .73rem;
        white-space: nowrap;
    }

    .launcher-profile-divider {
        height: 1px;
        margin: 1rem 0 .85rem;
        background: rgba(148, 163, 184, .10);
    }

    .launcher-connect-button {
        min-height: 42px;
        border: 1px solid rgba(56, 189, 248, .30);
        border-radius: 10px;
        background: rgba(56, 189, 248, .08);
        color: #7dd3fc;
        font-weight: 600;
        transition:
            background .2s ease,
            border-color .2s ease,
            color .2s ease,
            transform .2s ease;
    }

    .launcher-connect-button:hover {
        background: rgba(56, 189, 248, .16);
        border-color: rgba(56, 189, 248, .50);
        color: #bae6fd;
        transform: translateY(-1px);
    }

    .launcher-connect-note {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: .15rem;
        padding: .8rem 1rem;
        border-radius: 10px;
        background: rgba(56, 189, 248, .045);
        border: 1px solid rgba(56, 189, 248, .10);
        color: #64748b;
        font-size: .76rem;
        line-height: 1.8;
        text-align: center;
    }

    .min-width-0 {
        min-width: 0;
    }

    @media (max-width: 575.98px) {
        .launcher-profile-card {
            padding: 1rem;
        }

        .launcher-profile-icon {
            width: 44px;
            height: 44px;
            min-width: 44px;
            font-size: 1.15rem;
        }

        .launcher-connect-note {
            text-align: right;
        }
    }


/* ==========================================================================
   Page: UnderConstruction.cshtml
   ========================================================================== */
.under-construction-page {
        min-height: 58vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px 15px;
    }

    .under-construction-card {
        width: 100%;
        max-width: 570px;
        padding: 42px 35px;
        border: 1px solid rgba(148, 163, 184, .13);
        border-radius: 20px;
        background: rgba(10, 24, 52, .78);
        box-shadow:
            0 20px 50px rgba(0, 0, 0, .25),
            inset 0 1px 0 rgba(255, 255, 255, .025);
        text-align: center;
    }

    .construction-icon {
        width: 82px;
        height: 82px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 22px;
        border: 1px solid rgba(56, 189, 248, .2);
        border-radius: 22px;
        background: rgba(56, 189, 248, .08);
        color: #38bdf8;
        font-size: 2.1rem;
        box-shadow: 0 0 30px rgba(56, 189, 248, .08);
    }

    .construction-title {
        color: #f8fafc;
        font-size: 1.35rem;
        font-weight: 800;
        margin-bottom: 10px;
    }

    .construction-text {
        max-width: 450px;
        margin: 0 auto;
        color: #94a3b8;
        font-size: .82rem;
        line-height: 2;
    }

    .construction-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-top: 20px;
        padding: 7px 12px;
        border: 1px solid rgba(255, 159, 67, .15);
        border-radius: 8px;
        background: rgba(255, 159, 67, .07);
        color: #ffb45c;
        font-size: .7rem;
        font-weight: 700;
    }

    .status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ff9f43;
        box-shadow: 0 0 8px rgba(255, 159, 67, .55);
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 25px;
        padding: 10px 17px;
        border: 1px solid rgba(56, 189, 248, .3);
        border-radius: 10px;
        background: rgba(56, 189, 248, .1);
        color: #7dd3fc;
        text-decoration: none;
        font-size: .78rem;
        font-weight: 700;
        transition: all .2s ease;
    }

    .btn-back:hover {
        background: rgba(56, 189, 248, .18);
        border-color: rgba(56, 189, 248, .5);
        color: #bae6fd;
        transform: translateY(-1px);
    }

    @media (max-width: 575.98px) {

        .under-construction-page {
            min-height: 50vh;
            padding: 20px 10px;
        }

        .under-construction-card {
            padding: 32px 20px;
        }

        .construction-icon {
            width: 70px;
            height: 70px;
            font-size: 1.8rem;
        }

        .construction-title {
            font-size: 1.1rem;
        }

        .construction-text {
            font-size: .75rem;
        }

    }


/* ==========================================================================
   Page: SubscriptionPlans.cshtml
   ========================================================================== */
/* =========================================================
               Subscription Plans - LunarProCraft
               ========================================================= */

    .subscription-page {
        color: #f8fafc;
    }

    .subscription-header {
        margin-bottom: 3rem;
    }

    .subscription-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(56, 189, 248, 0.08);
        border: 1px solid rgba(56, 189, 248, 0.25);
        color: #38bdf8;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .subscription-title {
        color: #f8fafc;
        font-weight: 800;
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }

    .subscription-description {
        color: #cbd5e1;
        font-size: 0.95rem;
    }


    /* =========================================================
               Plan Card
               ========================================================= */

    .subscription-card {
        position: relative;
        height: 100%;
        overflow: hidden;
        border-radius: 22px;
        background: linear-gradient( 180deg, rgba(15, 30, 58, 0.88), rgba(5, 15, 32, 0.94) );
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    }

        .subscription-card:hover {
            transform: translateY(-7px);
        }

        .subscription-card::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
        }


    /* =========================================================
               Plan Colors
               ========================================================= */

    .plan-bronze {
        --plan-color: #cd7f32;
        --plan-light: #e5a15c;
        --plan-bg: rgba(205, 127, 50, 0.10);
        --plan-border: rgba(205, 127, 50, 0.28);
        --plan-glow: rgba(205, 127, 50, 0.32);
    }

    /* نقره‌ای سرد و متمایز از طلایی */
    .plan-silver {
        --plan-color: #94a9c4;
        --plan-light: #dbe7f5;
        --plan-bg: rgba(100, 125, 155, 0.11);
        --plan-border: rgba(148, 169, 196, 0.30);
        --plan-glow: rgba(100, 140, 180, 0.30);
    }

    .plan-gold {
        --plan-color: #f5c451;
        --plan-light: #ffe39a;
        --plan-bg: rgba(245, 196, 81, 0.11);
        --plan-border: rgba(245, 196, 81, 0.34);
        --plan-glow: rgba(245, 196, 81, 0.38);
    }

    .plan-diamond {
        --plan-color: #67e8f9;
        --plan-light: #a5f3fc;
        --plan-bg: rgba(103, 232, 249, 0.10);
        --plan-border: rgba(103, 232, 249, 0.30);
        --plan-glow: rgba(103, 232, 249, 0.38);
    }

    .plan-default {
        --plan-color: #38bdf8;
        --plan-light: #7dd3fc;
        --plan-bg: rgba(56, 189, 248, 0.10);
        --plan-border: rgba(56, 189, 248, 0.25);
        --plan-glow: rgba(56, 189, 248, 0.30);
    }


    /* =========================================================
               Gold Highlight
               ========================================================= */

    .plan-gold {
        border-color: rgba(245, 196, 81, 0.38);
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.30), 0 0 25px rgba(245, 196, 81, 0.06);
    }


    /* =========================================================
               Popular Badge
               ========================================================= */

    .plan-highlight {
        position: absolute;
        top: 16px;
        left: 16px;
        padding: 5px 10px;
        border-radius: 999px;
        background: rgba(245, 196, 81, 0.12);
        border: 1px solid rgba(245, 196, 81, 0.30);
        color: #ffe39a;
        font-size: 0.72rem;
        font-weight: 700;
    }


    /* =========================================================
               Plan Icon
               ========================================================= */

    .plan-icon-wrapper {
        width: 72px;
        height: 72px;
        margin: 0 auto 1rem;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.02), 0 0 18px var(--plan-glow);
    }

    .plan-icon {
        color: var(--plan-color);
        font-size: 2rem;
        filter: drop-shadow(0 0 8px var(--plan-glow));
    }


    /* =========================================================
               Plan Header
               ========================================================= */

    .plan-name {
        color: #ffffff;
        font-size: 1.45rem;
        font-weight: 800;
        margin-bottom: 0.35rem;
    }

    .plan-name-en {
        color: var(--plan-color);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .plan-description {
        color: #94a3b8;
        font-size: 0.82rem;
        margin-top: 0.5rem;
    }


    /* =========================================================
               Price
               ========================================================= */

    .plan-price-box {
        padding: 1rem;
        margin: 1.5rem 0;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.06);
        text-align: center;
    }

    .plan-price {
        color: #ffffff;
        font-size: 1.55rem;
        font-weight: 800;
    }

        .plan-price.free {
            color: var(--plan-light);
        }

    .plan-currency {
        color: #94a3b8;
        font-size: 0.78rem;
        margin-right: 4px;
    }

    .plan-duration {
        color: #64748b;
        font-size: 0.76rem;
        margin-top: 4px;
    }


    /* =========================================================
               Features
               ========================================================= */

    .plan-features {
        margin-bottom: 1.5rem;
    }

    .plan-feature {
        display: flex;
        align-items: center;
        min-height: 43px;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        color: #e2e8f0;
        font-size: 0.87rem;
    }

        .plan-feature:last-child {
            border-bottom: 0;
        }

    .plan-feature-icon {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        margin-left: 10px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        color: var(--plan-color);
        font-size: 0.85rem;
    }

    .plan-feature strong {
        color: #ffffff;
        margin-left: 4px;
    }


    /* =========================================================
               Select Button
               ========================================================= */

    .plan-select-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 45px;
        border-radius: 13px;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        color: var(--plan-light);
        font-weight: 700;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

        .plan-select-btn:hover {
            color: #ffffff;
            background: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
            transform: translateY(-1px);
        }


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

    @media (max-width: 575.98px) {

        .subscription-header {
            margin-bottom: 2rem;
        }

        .subscription-title {
            font-size: 1.6rem;
        }

        .subscription-description {
            font-size: 0.86rem;
        }
    }


/* ==========================================================================
   Page: SubscriptionSelect.cshtml
   ========================================================================== */
/* =========================================================
           Subscription Select - LunarProCraft
           ========================================================= */

    .subscription-select-page {
        color: #f8fafc;
    }

    /* =========================================================
           Header
           ========================================================= */

    .subscription-header {
        margin-bottom: 2.5rem;
    }

    .subscription-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(56, 189, 248, 0.08);
        border: 1px solid rgba(56, 189, 248, 0.25);
        color: #38bdf8;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .subscription-title {
        color: #f8fafc;
        font-weight: 800;
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }

    .subscription-description {
        color: #cbd5e1;
        font-size: 0.95rem;
    }

    /* =========================================================
           Main Card
           ========================================================= */

    .subscription-select-card {
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        background: linear-gradient( 180deg, rgba(15, 30, 58, 0.88), rgba(5, 15, 32, 0.94) );
        border: 1px solid var(--plan-border);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.28), 0 0 25px var(--plan-glow);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

        .subscription-select-card::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
        }

    /* =========================================================
           Plan Colors
           ========================================================= */

    .plan-bronze {
        --plan-color: #cd7f32;
        --plan-light: #e5a15c;
        --plan-bg: rgba(205, 127, 50, 0.10);
        --plan-border: rgba(205, 127, 50, 0.28);
        --plan-glow: rgba(205, 127, 50, 0.32);
    }

    .plan-silver {
        --plan-color: #94a9c4;
        --plan-light: #dbe7f5;
        --plan-bg: rgba(100, 125, 155, 0.11);
        --plan-border: rgba(148, 169, 196, 0.30);
        --plan-glow: rgba(100, 140, 180, 0.30);
    }

    .plan-gold {
        --plan-color: #f5c451;
        --plan-light: #ffe39a;
        --plan-bg: rgba(245, 196, 81, 0.11);
        --plan-border: rgba(245, 196, 81, 0.34);
        --plan-glow: rgba(245, 196, 81, 0.38);
    }

    .plan-diamond {
        --plan-color: #67e8f9;
        --plan-light: #a5f3fc;
        --plan-bg: rgba(103, 232, 249, 0.10);
        --plan-border: rgba(103, 232, 249, 0.30);
        --plan-glow: rgba(103, 232, 249, 0.38);
    }

    .plan-default {
        --plan-color: #38bdf8;
        --plan-light: #7dd3fc;
        --plan-bg: rgba(56, 189, 248, 0.10);
        --plan-border: rgba(56, 189, 248, 0.25);
        --plan-glow: rgba(56, 189, 248, 0.30);
    }

    /* =========================================================
           Plan Header
           ========================================================= */

    .selected-plan-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 2rem 2rem 1.5rem;
        text-align: right;
    }

    .plan-icon-wrapper {
        width: 72px;
        height: 72px;
        flex: 0 0 72px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.02), 0 0 18px var(--plan-glow);
    }

    .plan-icon {
        color: var(--plan-color);
        font-size: 2rem;
        filter: drop-shadow( 0 0 8px var(--plan-glow) );
    }

    .selected-plan-info {
        flex: 1;
    }

    .plan-name {
        color: #ffffff;
        font-size: 1.45rem;
        font-weight: 800;
        margin-bottom: 0.35rem;
    }

    .plan-name-en {
        color: var(--plan-color);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .plan-description {
        color: #94a3b8;
        font-size: 0.82rem;
        margin-top: 0.5rem;
    }

    /* =========================================================
           Plan Features
           ========================================================= */

    .plan-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        padding: 0 2rem 1.5rem;
    }

    .plan-feature {
        min-height: 70px;
        display: flex;
        align-items: center;
        padding: 12px;
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.06);
        color: #e2e8f0;
        font-size: 0.84rem;
    }

    .plan-feature-icon {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        margin-left: 10px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        color: var(--plan-color);
        font-size: 0.9rem;
    }

    .plan-feature strong {
        display: block;
        color: #ffffff;
        font-size: 0.95rem;
        margin-bottom: 2px;
    }

    .plan-feature-label {
        color: #94a3b8;
        font-size: 0.75rem;
    }

    /* =========================================================
           Divider
           ========================================================= */

    .subscription-divider {
        height: 1px;
        margin: 0 2rem;
        background: rgba(255, 255, 255, 0.07);
    }

    /* =========================================================
           Duration Section
           ========================================================= */

    .duration-section {
        padding: 1.75rem 2rem 2rem;
    }

    .duration-title {
        color: #ffffff;
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

        .duration-title i {
            color: var(--plan-color);
            margin-left: 7px;
        }

    .duration-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .duration-option {
        position: relative;
        display: block;
        cursor: pointer;
        margin: 0;
    }

        .duration-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

    .duration-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 145px;
        padding: 1.25rem 1rem;
        border-radius: 17px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.08);
        text-align: center;
        transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .duration-option:hover .duration-content {
        transform: translateY(-2px);
        border-color: var(--plan-border);
        background: var(--plan-bg);
    }

    .duration-option input:checked + .duration-content {
        background: var(--plan-bg);
        border-color: var(--plan-color);
        box-shadow: 0 0 20px var(--plan-glow), inset 0 0 20px rgba(255, 255, 255, 0.02);
    }

        .duration-option input:checked + .duration-content::before {
            content: "✓";
            position: absolute;
            top: 10px;
            left: 10px;
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: var(--plan-color);
            color: #06111f;
            font-size: 0.75rem;
            font-weight: 900;
            box-shadow: 0 0 10px var(--plan-glow);
        }

    .duration-name {
        color: #ffffff;
        font-size: 1.15rem;
        font-weight: 800;
        margin-bottom: 5px;
    }

    .duration-days {
        color: #64748b;
        font-size: 0.75rem;
        margin-bottom: 14px;
    }

    .duration-price {
        color: var(--plan-light);
        font-size: 1rem;
        font-weight: 800;
    }

        .duration-price.free {
            color: #86efac;
        }

    /* =========================================================
           Actions
           ========================================================= */

    .subscription-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 1.5rem;
    }

        .subscription-actions .btn {
            min-height: 45px;
            border-radius: 13px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        }

    .btn-back {
        min-width: 125px;
        background: rgba(255, 255, 255, 0.035);
        border: 1px solid rgba(255, 255, 255, 0.10);
        color: #cbd5e1;
    }

        .btn-back:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.07);
            border-color: rgba(255, 255, 255, 0.16);
            transform: translateY(-1px);
        }

    .btn-continue {
        min-width: 210px;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        color: var(--plan-light);
    }

        .btn-continue:hover {
            color: #06111f;
            background: var(--plan-color);
            border-color: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
            transform: translateY(-1px);
        }

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

    @media (max-width: 767.98px) {

        .selected-plan-header {
            padding: 1.5rem 1.25rem 1.25rem;
        }

        .plan-features {
            grid-template-columns: 1fr;
            padding: 0 1.25rem 1.25rem;
        }

        .subscription-divider {
            margin: 0 1.25rem;
        }

        .duration-section {
            padding: 1.5rem 1.25rem 1.25rem;
        }

        .duration-options {
            grid-template-columns: 1fr;
        }

        .duration-content {
            min-height: 115px;
        }

        .subscription-actions {
            flex-direction: column-reverse;
        }

            .subscription-actions .btn {
                width: 100%;
            }
    }

    @media (max-width: 575.98px) {

        .subscription-title {
            font-size: 1.6rem;
        }

        .subscription-description {
            font-size: 0.86rem;
        }

        .selected-plan-header {
            flex-direction: column;
            text-align: center;
        }

        .selected-plan-info {
            width: 100%;
        }

        .plan-name {
            font-size: 1.3rem;
        }
    }


/* ==========================================================================
   Page: SubscriptionOrder.cshtml
   ========================================================================== */
/* ═══════════════════════════════════════════════════════
               Subscription Order
               ═══════════════════════════════════════════════════════ */

    .subscription-order-page {
        color: #f8fafc;
    }

    .subscription-header {
        margin-bottom: 2.5rem;
    }

    .subscription-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(56, 189, 248, 0.08);
        border: 1px solid rgba(56, 189, 248, 0.25);
        color: #38bdf8;
        font-size: .85rem;
        font-weight: 600;
    }

    .subscription-title {
        color: #f8fafc;
        font-weight: 800;
        margin-top: 1rem;
        margin-bottom: .75rem;
    }

    .subscription-description {
        color: #cbd5e1;
        font-size: .95rem;
    }

    /* ═══════════════════════════════════════════════════════
               Plan Palette
               ═══════════════════════════════════════════════════════ */

    .plan-bronze {
        --plan-color: #cd7f32;
        --plan-light: #e5a15c;
        --plan-bg: rgba(205, 127, 50, 0.10);
        --plan-border: rgba(205, 127, 50, 0.28);
        --plan-glow: rgba(205, 127, 50, 0.32);
    }

    .plan-silver {
        --plan-color: #94a9c4;
        --plan-light: #dbe7f5;
        --plan-bg: rgba(100, 125, 155, 0.11);
        --plan-border: rgba(148, 169, 196, 0.30);
        --plan-glow: rgba(100, 140, 180, 0.30);
    }

    .plan-gold {
        --plan-color: #f5c451;
        --plan-light: #ffe39a;
        --plan-bg: rgba(245, 196, 81, 0.11);
        --plan-border: rgba(245, 196, 81, 0.34);
        --plan-glow: rgba(245, 196, 81, 0.38);
    }

    .plan-diamond {
        --plan-color: #67e8f9;
        --plan-light: #a5f3fc;
        --plan-bg: rgba(103, 232, 249, 0.10);
        --plan-border: rgba(103, 232, 249, 0.30);
        --plan-glow: rgba(103, 232, 249, 0.38);
    }

    .plan-default {
        --plan-color: #38bdf8;
        --plan-light: #7dd3fc;
        --plan-bg: rgba(56, 189, 248, 0.10);
        --plan-border: rgba(56, 189, 248, 0.25);
        --plan-glow: rgba(56, 189, 248, 0.30);
    }

    /* ═══════════════════════════════════════════════════════
               Main Card
               ═══════════════════════════════════════════════════════ */

    .subscription-order-card {
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        background: linear-gradient( 180deg, rgba(15, 30, 58, .88), rgba(5, 15, 32, .94) );
        border: 1px solid var(--plan-border);
        box-shadow: 0 15px 40px rgba(0, 0, 0, .28), 0 0 25px var(--plan-glow);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

        .subscription-order-card::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 3px;
            background: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
        }

    /* ═══════════════════════════════════════════════════════
               Card Header
               ═══════════════════════════════════════════════════════ */

    .order-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 2rem;
    }

    .selected-plan {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .plan-icon-wrapper {
        width: 68px;
        height: 68px;
        flex: 0 0 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 19px;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        box-shadow: inset 0 0 18px rgba(255, 255, 255, .02), 0 0 18px var(--plan-glow);
    }

    .plan-icon {
        color: var(--plan-color);
        font-size: 1.9rem;
        filter: drop-shadow( 0 0 8px var(--plan-glow) );
    }

    .plan-name {
        color: #fff;
        font-size: 1.4rem;
        font-weight: 800;
        margin-bottom: 4px;
    }

    .plan-name-en {
        color: var(--plan-color);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .plan-description {
        color: #94a3b8;
        font-size: .8rem;
        margin-top: 5px;
    }

    /* ═══════════════════════════════════════════════════════
               Status
               ═══════════════════════════════════════════════════════ */

    .order-status {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 999px;
        font-size: .78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .status-pending {
        color: #facc15;
        background: rgba(250, 204, 21, .08);
        border: 1px solid rgba(250, 204, 21, .22);
    }

    .status-paid {
        color: #86efac;
        background: rgba(134, 239, 172, .08);
        border: 1px solid rgba(134, 239, 172, .22);
    }

    .status-cancelled {
        color: #fca5a5;
        background: rgba(248, 113, 113, .08);
        border: 1px solid rgba(248, 113, 113, .22);
    }

    .status-expired {
        color: #cbd5e1;
        background: rgba(148, 163, 184, .08);
        border: 1px solid rgba(148, 163, 184, .18);
    }

    .status-default {
        color: #93c5fd;
        background: rgba(59, 130, 246, .08);
        border: 1px solid rgba(59, 130, 246, .20);
    }

    /* ═══════════════════════════════════════════════════════
               Divider
               ═══════════════════════════════════════════════════════ */

    .order-divider {
        height: 1px;
        margin: 0 2rem;
        background: rgba(255, 255, 255, .07);
    }

    /* ═══════════════════════════════════════════════════════
               Order Details
               ═══════════════════════════════════════════════════════ */

    .order-details {
        padding: 1.75rem 2rem;
    }

    .details-title {
        color: #fff;
        font-size: 1rem;
        font-weight: 800;
        margin-bottom: 1rem;
    }

        .details-title i {
            color: var(--plan-color);
            margin-left: 7px;
        }

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

    .detail-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        min-height: 62px;
        padding: 12px 15px;
        border-radius: 15px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .06);
    }

    .detail-label {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #94a3b8;
        font-size: .78rem;
    }

        .detail-label i {
            color: var(--plan-color);
            font-size: .95rem;
        }

    .detail-value {
        color: #fff;
        font-size: .84rem;
        font-weight: 700;
        text-align: left;
    }

    /* ═══════════════════════════════════════════════════════
               Price Box
               ═══════════════════════════════════════════════════════ */

    .price-box {
        margin-top: 14px;
        padding: 18px;
        border-radius: 17px;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        box-shadow: inset 0 0 20px rgba(255, 255, 255, .015);
    }

    .price-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
    }

    .price-label {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #cbd5e1;
        font-size: .85rem;
        font-weight: 600;
    }

        .price-label i {
            color: var(--plan-color);
        }

    .price-value {
        color: var(--plan-light);
        font-size: 1.45rem;
        font-weight: 900;
    }

    .price-currency {
        color: #94a3b8;
        font-size: .75rem;
        margin-right: 4px;
    }

    /* ═══════════════════════════════════════════════════════
               Success Box
               ═══════════════════════════════════════════════════════ */

    .subscription-success {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-top: 14px;
        padding: 16px 18px;
        border-radius: 16px;
        background: rgba(134, 239, 172, .06);
        border: 1px solid rgba(134, 239, 172, .18);
    }

    .subscription-success-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border-radius: 13px;
        color: #86efac;
        background: rgba(134, 239, 172, .08);
        border: 1px solid rgba(134, 239, 172, .16);
    }

        .subscription-success-icon i {
            font-size: 1.15rem;
        }

    .subscription-success-title {
        color: #bbf7d0;
        font-size: .88rem;
        font-weight: 800;
        margin-bottom: 3px;
    }

    .subscription-success-text {
        color: #94a3b8;
        font-size: .76rem;
        line-height: 1.8;
    }

    /* ═══════════════════════════════════════════════════════
               Order Number
               ═══════════════════════════════════════════════════════ */

    .order-number-box {
        margin-top: 12px;
        padding: 12px 15px;
        border-radius: 13px;
        background: rgba(0, 0, 0, .18);
        border: 1px solid rgba(255, 255, 255, .05);
    }

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

    .order-number-label {
        color: #64748b;
        font-size: .73rem;
    }

    .order-number-value {
        color: #94a3b8;
        font-family: monospace;
        font-size: .76rem;
        direction: ltr;
    }

    /* ═══════════════════════════════════════════════════════
               Actions
               ═══════════════════════════════════════════════════════ */

    .order-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0 2rem 2rem;
    }

        .order-actions .btn {
            min-height: 46px;
            border-radius: 13px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 700;
            transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
        }

    .btn-back {
        min-width: 150px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .10);
        color: #cbd5e1;
    }

        .btn-back:hover {
            color: #fff;
            background: rgba(255, 255, 255, .07);
            border-color: rgba(255, 255, 255, .16);
            transform: translateY(-1px);
        }

    .btn-payment {
        min-width: 220px;
        background: var(--plan-bg);
        border: 1px solid var(--plan-border);
        color: var(--plan-light);
    }

        .btn-payment:hover {
            color: #06111f;
            background: var(--plan-color);
            border-color: var(--plan-color);
            box-shadow: 0 0 18px var(--plan-glow);
            transform: translateY(-1px);
        }

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

    .btn-dashboard {
        min-width: 220px;
        background: var(--plan-color);
        border: 1px solid var(--plan-color);
        color: #06111f;
        box-shadow: 0 0 18px var(--plan-glow);
    }

        .btn-dashboard:hover {
            color: #06111f;
            filter: brightness(1.08);
            box-shadow: 0 0 25px var(--plan-glow);
            transform: translateY(-1px);
        }

    .btn-plans {
        min-width: 170px;
    }

    /* ═══════════════════════════════════════════════════════
               Responsive
               ═══════════════════════════════════════════════════════ */

    @media (max-width: 767.98px) {

        .order-card-header {
            flex-direction: column;
            align-items: stretch;
            padding: 1.5rem 1.25rem;
        }

        .selected-plan {
            justify-content: center;
            text-align: center;
        }

        .selected-plan-info {
            flex: 1;
        }

        .order-status {
            align-self: center;
        }

        .order-divider {
            margin: 0 1.25rem;
        }

        .order-details {
            padding: 1.5rem 1.25rem;
        }

        .details-grid {
            grid-template-columns: 1fr;
        }

        .order-actions {
            flex-direction: column-reverse;
            padding: 0 1.25rem 1.5rem;
        }

            .order-actions .btn {
                width: 100%;
            }
    }

    @media (max-width: 575.98px) {

        .subscription-title {
            font-size: 1.6rem;
        }

        .subscription-description {
            font-size: .86rem;
        }

        .selected-plan {
            flex-direction: column;
        }

        .plan-name {
            font-size: 1.3rem;
        }

        .detail-item {
            min-height: 58px;
        }

        .price-row {
            align-items: flex-start;
            flex-direction: column;
        }

        .price-value {
            font-size: 1.3rem;
        }

        .order-number {
            align-items: flex-start;
            flex-direction: column;
        }

        .subscription-success {
            align-items: flex-start;
        }
    }


/* ==========================================================================
   Page: MySubscriptions.cshtml
   ========================================================================== */
/* ═══════════════════════════════════════════════════════
       Base
       ═══════════════════════════════════════════════════════ */

    .subscriptions-page {
        direction: rtl;
        color: #e5eefc;
        padding-bottom: 35px;
    }

    .glass-panel {
        background: rgba(10, 24, 52, .78);
        border: 1px solid rgba(56, 189, 248, .13);
        box-shadow:
            0 12px 35px rgba(0, 0, 0, .22),
            inset 0 1px 0 rgba(255, 255, 255, .025);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }


    /* ═══════════════════════════════════════════════════════
       Header
       ═══════════════════════════════════════════════════════ */

    .page-header {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 18px 20px;
        border-radius: 18px;
        margin-bottom: 22px;
    }

    .page-header-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(56, 189, 248, .10);
        border: 1px solid rgba(56, 189, 248, .18);
        color: #38bdf8;
        font-size: 22px;
        box-shadow: 0 0 25px rgba(56, 189, 248, .08);
    }

    .page-header-content h2 {
        margin: 0 0 5px;
        font-size: 20px;
        font-weight: 800;
        color: #f4f8ff;
    }

    .page-header-content p {
        margin: 0;
        color: #8fa4c2;
        font-size: 13px;
    }


    /* ═══════════════════════════════════════════════════════
       Sections
       ═══════════════════════════════════════════════════════ */

    .subscription-section {
        margin-bottom: 28px;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 13px;
    }

    .section-title-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        border-radius: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
    }

    .current-icon {
        color: #38bdf8;
        background: rgba(56, 189, 248, .09);
        border: 1px solid rgba(56, 189, 248, .16);
    }

    .history-icon {
        color: #c084fc;
        background: rgba(192, 132, 252, .09);
        border: 1px solid rgba(192, 132, 252, .15);
    }

    .section-title h3 {
        margin: 0 0 3px;
        color: #edf5ff;
        font-size: 15px;
        font-weight: 800;
    }

    .section-title span {
        color: #778da9;
        font-size: 11px;
    }

    .history-count {
        margin-right: auto;
        padding: 5px 10px;
        border-radius: 20px;
        background: rgba(255, 255, 255, .035);
        border: 1px solid rgba(255, 255, 255, .07);
        color: #cbd8e8;
        font-size: 12px;
        white-space: nowrap;
    }

    .history-count span {
        color: #71839b;
        margin-right: 3px;
    }


    /* ═══════════════════════════════════════════════════════
       Current Subscription
       ═══════════════════════════════════════════════════════ */

    .current-subscription-card {
        border-radius: 18px;
        padding: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
    }

    .current-plan-main {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 220px;
    }

    .plan-symbol {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #38bdf8;
        font-size: 25px;
        background:
            linear-gradient(
                145deg,
                rgba(56, 189, 248, .14),
                rgba(56, 189, 248, .035)
            );
        border: 1px solid rgba(56, 189, 248, .18);
        box-shadow: 0 0 25px rgba(56, 189, 248, .07);
    }

    .plan-info {
        min-width: 0;
    }

    .plan-name-row {
        display: flex;
        align-items: center;
        gap: 9px;
        flex-wrap: wrap;
    }

    .plan-name-row h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #f5f9ff;
    }

    .plan-code {
        display: block;
        margin-top: 4px;
        color: #647b98;
        font-size: 11px;
        direction: ltr;
        text-align: right;
    }

    .status-badge,
    .free-badge,
    .paid-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border-radius: 20px;
        padding: 4px 8px;
        font-size: 10px;
        white-space: nowrap;
    }

    .status-active {
        color: #6ee7b7;
        background: rgba(52, 211, 153, .08);
        border: 1px solid rgba(52, 211, 153, .16);
    }

    .current-plan-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(100px, 1fr));
        gap: 9px;
        flex: 1;
        max-width: 700px;
    }

    .subscription-stat {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 10px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .025);
        border: 1px solid rgba(255, 255, 255, .045);
    }

    .stat-icon {
        width: 31px;
        height: 31px;
        min-width: 31px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #38bdf8;
        background: rgba(56, 189, 248, .07);
        font-size: 13px;
    }

    .profiles-icon {
        color: #a78bfa;
        background: rgba(167, 139, 250, .08);
    }

    .server-icon {
        color: #34d399;
        background: rgba(52, 211, 153, .08);
    }

    .subscription-stat span {
        display: block;
        color: #71859f;
        font-size: 9px;
        margin-bottom: 2px;
    }

    .subscription-stat strong {
        display: block;
        color: #e9f2ff;
        font-size: 12px;
        font-weight: 700;
    }


    /* ═══════════════════════════════════════════════════════
       History Grid
       ═══════════════════════════════════════════════════════ */

    .subscription-history-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .history-card {
        position: relative;
        overflow: hidden;
        border-radius: 17px;
        padding: 16px;
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .history-card:hover {
        transform: translateY(-2px);
        border-color: rgba(56, 189, 248, .24);
        box-shadow:
            0 15px 35px rgba(0, 0, 0, .25),
            0 0 25px rgba(56, 189, 248, .035);
    }

    .latest-card {
        border-color: rgba(56, 189, 248, .25);
        background:
            linear-gradient(
                145deg,
                rgba(14, 37, 70, .86),
                rgba(10, 24, 52, .78)
            );
    }

    .latest-ribbon {
        position: absolute;
        top: 11px;
        left: 11px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 7px;
        border-radius: 8px;
        color: #7dd3fc;
        background: rgba(56, 189, 248, .08);
        border: 1px solid rgba(56, 189, 248, .14);
        font-size: 9px;
        font-weight: 700;
    }

    .history-card-top {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 48px;
    }

    .history-plan-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a78bfa;
        background: rgba(167, 139, 250, .08);
        border: 1px solid rgba(167, 139, 250, .13);
        font-size: 18px;
    }

    .history-plan-icon.bronze-icon {
        color: #ffb86b;
        background: rgba(255, 159, 67, .09);
        border-color: rgba(255, 159, 67, .16);
    }

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

    .history-plan-info h4 {
        margin: 0 0 3px;
        color: #edf5ff;
        font-size: 14px;
        font-weight: 800;
    }

    .history-plan-info span {
        color: #657c98;
        font-size: 10px;
    }

    .free-badge {
        color: #ffb86b;
        background: rgba(255, 159, 67, .08);
        border: 1px solid rgba(255, 159, 67, .15);
    }

    .paid-badge {
        color: #6ee7b7;
        background: rgba(52, 211, 153, .07);
        border: 1px solid rgba(52, 211, 153, .13);
    }


    /* ═══════════════════════════════════════════════════════
       History Details
       ═══════════════════════════════════════════════════════ */

    .history-divider {
        height: 1px;
        background: rgba(255, 255, 255, .045);
        margin: 14px 0;
    }

    .history-details {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .history-detail {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .history-detail > i {
        width: 28px;
        height: 28px;
        min-width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(255, 255, 255, .035);
        color: #7188a5;
        font-size: 12px;
    }

    .history-detail span {
        display: block;
        color: #667b95;
        font-size: 9px;
        margin-bottom: 2px;
    }

    .history-detail strong {
        display: block;
        color: #dce8f8;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .history-detail small {
        color: #7086a0;
        font-size: 8px;
        font-weight: 500;
    }

    .order-number {
        direction: ltr;
        text-align: right;
    }

    .free-price {
        color: #ffb86b !important;
    }


    /* ═══════════════════════════════════════════════════════
       Empty States
       ═══════════════════════════════════════════════════════ */

    .empty-current,
    .empty-history {
        border-radius: 17px;
        padding: 25px;
    }

    .empty-current {
        display: flex;
        align-items: center;
        gap: 13px;
    }

    .empty-icon,
    .empty-history-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #64748b;
        background: rgba(255, 255, 255, .035);
        font-size: 21px;
    }

    .empty-current strong {
        display: block;
        color: #dce7f6;
        font-size: 13px;
        margin-bottom: 3px;
    }

    .empty-current span {
        color: #71859e;
        font-size: 11px;
    }

    .empty-history {
        text-align: center;
    }

    .empty-history-icon {
        margin: 0 auto 12px;
    }

    .empty-history h4 {
        margin: 0 0 6px;
        color: #dce7f6;
        font-size: 14px;
    }

    .empty-history p {
        margin: 0 0 16px;
        color: #71859e;
        font-size: 11px;
    }

    .plans-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 13px;
        border-radius: 10px;
        color: #ccefff;
        background: rgba(56, 189, 248, .08);
        border: 1px solid rgba(56, 189, 248, .17);
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        transition: all .2s ease;
    }

    .plans-button:hover {
        color: #fff;
        background: rgba(56, 189, 248, .14);
        border-color: rgba(56, 189, 248, .28);
        transform: translateY(-1px);
    }


    /* ═══════════════════════════════════════════════════════
       Responsive
       ═══════════════════════════════════════════════════════ */

    @media (max-width: 1100px) {

        .current-subscription-card {
            align-items: stretch;
            flex-direction: column;
        }

        .current-plan-stats {
            max-width: none;
        }

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


    @media (max-width: 700px) {

        .page-header {
            padding: 15px;
        }

        .page-header-icon {
            width: 43px;
            height: 43px;
            min-width: 43px;
        }

        .page-header-content h2 {
            font-size: 17px;
        }

        .current-plan-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .subscription-history-grid {
            grid-template-columns: 1fr;
        }

        .history-count {
            display: none;
        }
    }


    @media (max-width: 450px) {

        .current-subscription-card {
            padding: 13px;
        }

        .current-plan-stats {
            grid-template-columns: 1fr 1fr;
        }

        .subscription-stat {
            padding: 8px;
        }

        .history-card {
            padding: 13px;
        }

        .history-details {
            grid-template-columns: 1fr 1fr;
        }
    }


/* ==========================================================================
   Page: MyPayment.cshtml
   ========================================================================== */
/* ═══════════════════════════════════════════════════════
       Header
       ═══════════════════════════════════════════════════════ */

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

    .page-title {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #f8fafc;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .page-title i {
        color: #38bdf8;
        font-size: 1.25rem;
    }

    .page-subtitle {
        margin-top: 6px;
        color: #94a3b8;
        font-size: .82rem;
    }

    .page-header-action {
        flex-shrink: 0;
    }


    /* ═══════════════════════════════════════════════════════
       Primary Button
       ═══════════════════════════════════════════════════════ */

    .btn-lunar-primary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 15px;
        border: 1px solid rgba(56, 189, 248, .35);
        border-radius: 10px;
        background: rgba(56, 189, 248, .12);
        color: #7dd3fc;
        text-decoration: none;
        font-size: .82rem;
        font-weight: 700;
        transition: all .2s ease;
    }

    .btn-lunar-primary:hover {
        background: rgba(56, 189, 248, .2);
        border-color: rgba(56, 189, 248, .55);
        color: #bae6fd;
        transform: translateY(-1px);
    }


    /* ═══════════════════════════════════════════════════════
       Summary Cards
       ═══════════════════════════════════════════════════════ */

    .summary-card {
        display: flex;
        align-items: center;
        gap: 13px;
        min-height: 82px;
        padding: 14px;
        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 14px;
        background: rgba(10, 24, 52, .78);
        box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
    }

    .summary-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        font-size: 1.1rem;
    }

    .summary-icon.blue {
        background: rgba(56, 189, 248, .12);
        color: #38bdf8;
    }

    .summary-icon.green {
        background: rgba(34, 197, 94, .12);
        color: #4ade80;
    }

    .summary-icon.orange {
        background: rgba(255, 159, 67, .12);
        color: #ff9f43;
    }

    .summary-icon.red {
        background: rgba(239, 68, 68, .12);
        color: #f87171;
    }

    .summary-content {
        min-width: 0;
    }

    .summary-label {
        color: #94a3b8;
        font-size: .75rem;
        margin-bottom: 4px;
    }

    .summary-value {
        color: #f8fafc;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .summary-value.amount {
        font-size: 1rem;
    }

    .summary-value.amount span {
        color: #64748b;
        font-size: .68rem;
        font-weight: 600;
        margin-right: 3px;
    }


    /* ═══════════════════════════════════════════════════════
       Section Header
       ═══════════════════════════════════════════════════════ */

    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #e2e8f0;
        font-size: .95rem;
        font-weight: 800;
    }

    .section-title i {
        color: #38bdf8;
    }

    .section-count {
        color: #64748b;
        font-size: .72rem;
    }


    /* ═══════════════════════════════════════════════════════
       Payment Card
       ═══════════════════════════════════════════════════════ */

    .payment-card {
        height: 100%;
        overflow: hidden;
        border: 1px solid rgba(148, 163, 184, .12);
        border-radius: 15px;
        background: rgba(10, 24, 52, .78);
        box-shadow: 0 8px 25px rgba(0, 0, 0, .16);
        transition:
            transform .2s ease,
            border-color .2s ease,
            box-shadow .2s ease;
    }

    .payment-card:hover {
        transform: translateY(-2px);
        border-color: rgba(56, 189, 248, .28);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    }


    /* ═══════════════════════════════════════════════════════
       Card Header
       ═══════════════════════════════════════════════════════ */

    .payment-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 15px;
        border-bottom: 1px solid rgba(148, 163, 184, .08);
    }

    .payment-gateway {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .gateway-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255, 159, 67, .1);
        color: #ff9f43;
        font-size: 1rem;
    }

    .gateway-title {
        color: #e2e8f0;
        font-size: .82rem;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gateway-subtitle {
        margin-top: 2px;
        color: #64748b;
        font-size: .67rem;
    }


    /* ═══════════════════════════════════════════════════════
       Status
       ═══════════════════════════════════════════════════════ */

    .payment-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        flex-shrink: 0;
        padding: 5px 8px;
        border-radius: 7px;
        font-size: .65rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .payment-status.successful,
    .payment-status.verified {
        background: rgba(34, 197, 94, .1);
        color: #4ade80;
    }

    .payment-status.failed {
        background: rgba(239, 68, 68, .1);
        color: #f87171;
    }

    .payment-status.pending {
        background: rgba(245, 158, 11, .1);
        color: #fbbf24;
    }

    .payment-status.cancelled {
        background: rgba(148, 163, 184, .1);
        color: #94a3b8;
    }

    .payment-status.unknown {
        background: rgba(100, 116, 139, .1);
        color: #94a3b8;
    }


    /* ═══════════════════════════════════════════════════════
       Amount
       ═══════════════════════════════════════════════════════ */

    .payment-amount-box {
        margin: 12px 15px;
        padding: 11px 12px;
        border: 1px solid rgba(56, 189, 248, .08);
        border-radius: 10px;
        background: rgba(3, 7, 18, .35);
    }

    .payment-amount-label {
        color: #64748b;
        font-size: .66rem;
        margin-bottom: 3px;
    }

    .payment-amount {
        color: #f8fafc;
        font-size: 1.15rem;
        font-weight: 900;
        direction: rtl;
    }

    .payment-amount span {
        margin-right: 4px;
        color: #64748b;
        font-size: .68rem;
        font-weight: 600;
    }


    /* ═══════════════════════════════════════════════════════
       Details
       ═══════════════════════════════════════════════════════ */

    .payment-details {
        padding: 0 15px 10px;
    }

    .payment-detail {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        min-height: 29px;
        border-bottom: 1px solid rgba(148, 163, 184, .06);
    }

    .payment-detail:last-child {
        border-bottom: none;
    }

    .detail-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #64748b;
        font-size: .68rem;
        white-space: nowrap;
    }

    .detail-label i {
        font-size: .7rem;
        color: #475569;
    }

    .detail-value {
        min-width: 0;
        color: #cbd5e1;
        font-size: .68rem;
        text-align: left;
    }

    .detail-code {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: ltr;
    }


    /* ═══════════════════════════════════════════════════════
       Footer
       ═══════════════════════════════════════════════════════ */

    .payment-card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 9px 15px;
        border-top: 1px solid rgba(148, 163, 184, .08);
        background: rgba(3, 7, 18, .2);
        color: #475569;
        font-size: .62rem;
    }

    .payment-id {
        max-width: 170px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        direction: ltr;
        color: #64748b;
    }


    /* ═══════════════════════════════════════════════════════
       Empty State
       ═══════════════════════════════════════════════════════ */

    .empty-payment-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 35px 20px;
        border: 1px dashed rgba(148, 163, 184, .16);
        border-radius: 16px;
        background: rgba(10, 24, 52, .55);
        text-align: center;
    }

    .empty-icon {
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 14px;
        border-radius: 16px;
        background: rgba(56, 189, 248, .08);
        color: #38bdf8;
        font-size: 1.6rem;
    }

    .empty-title {
        color: #e2e8f0;
        font-size: 1rem;
        font-weight: 800;
    }

    .empty-text {
        max-width: 430px;
        margin: 7px 0 18px;
        color: #64748b;
        font-size: .76rem;
        line-height: 1.8;
    }


    /* ═══════════════════════════════════════════════════════
       Responsive
       ═══════════════════════════════════════════════════════ */

    @media (max-width: 767.98px) {

        .page-header {
            align-items: flex-start;
        }

        .page-title {
            font-size: 1.1rem;
        }

        .page-subtitle {
            font-size: .72rem;
        }

        .page-header-action .btn-lunar-primary {
            padding: 8px 10px;
            font-size: .7rem;
        }

        .page-header-action .btn-lunar-primary i {
            display: none;
        }

        .payment-card-header {
            padding: 12px;
        }

        .payment-amount-box {
            margin: 10px 12px;
        }

        .payment-details {
            padding-left: 12px;
            padding-right: 12px;
        }

        .payment-card-footer {
            padding-left: 12px;
            padding-right: 12px;
        }

        .detail-code {
            max-width: 120px;
        }
    }


/* ==========================================================================
   Page: GameProfile.cshtml
   ========================================================================== */
/* =========================================================
       STTech Minecraft Dashboard - Compact Layout
       ========================================================= */

    .user-panel-dashboard-top {
        margin-bottom: 1rem;
    }

    .user-panel-dashboard-top > [class*="col-"] {
        display: flex;
    }

    .user-panel-dashboard-top .user-panel-card,
    .user-panel-dashboard-top .user-panel-stat-card {
        width: 100%;
        min-height: 128px;
    }

    /* =========================================================
       System Check
       ========================================================= */

    .compact-system-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.15rem;
    }

    .compact-system-info {
        display: flex;
        align-items: center;
        gap: .8rem;
        min-width: 0;
    }

    .compact-system-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(56, 189, 248, .12);
        border: 1px solid rgba(56, 189, 248, .25);
        box-shadow: 0 0 20px rgba(56, 189, 248, .08);
    }

    .compact-system-icon i {
        font-size: 1.35rem;
        color: #38bdf8;
    }

    .compact-system-title {
        color: #f8fafc;
        font-size: .92rem;
        font-weight: 700;
        margin: 0 0 .2rem;
    }

    .compact-system-description {
        color: rgba(226, 232, 240, .62);
        font-size: .72rem;
        line-height: 1.7;
        margin: 0;
    }

    .compact-system-button {
        min-width: 112px;
        border: 0;
        border-radius: 11px;
        background: linear-gradient(135deg, #0891b2, #2563eb);
        box-shadow: 0 7px 20px rgba(37, 99, 235, .18);
        font-size: .78rem;
        white-space: nowrap;
    }

    .compact-system-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 25px rgba(56, 189, 248, .22);
    }

    /* =========================================================
       Compact Statistics
       ========================================================= */

    .compact-stat-card {
        display: flex;
        align-items: center;
        padding: 1rem 1.15rem;
        position: relative;
        overflow: hidden;
    }

    .compact-stat-card::after {
        content: "";
        position: absolute;
        width: 90px;
        height: 90px;
        left: -35px;
        bottom: -45px;
        border-radius: 50%;
        background: rgba(168, 85, 247, .08);
        pointer-events: none;
    }

    .compact-stat-inner {
        display: flex;
        align-items: center;
        gap: .8rem;
        width: 100%;
    }

    .compact-stat-icon {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .compact-stat-icon i {
        font-size: 1.35rem;
    }

    .compact-stat-icon-orange {
        background: rgba(251, 146, 60, .12);
        border: 1px solid rgba(251, 146, 60, .25);
    }

    .compact-stat-icon-orange i {
        color: #fb923c;
    }

    .compact-stat-icon-green {
        background: rgba(34, 197, 94, .12);
        border: 1px solid rgba(34, 197, 94, .25);
    }

    .compact-stat-icon-green i {
        color: #4ade80;
    }

    .compact-stat-value {
        color: #f8fafc;
        font-size: 1.25rem;
        font-weight: 800;
        line-height: 1.2;
    }

    .compact-stat-label {
        display: block;
        color: rgba(226, 232, 240, .55);
        font-size: .68rem;
        margin-top: .2rem;
    }

    .compact-stat-status {
        color: #4ade80;
        font-size: .82rem;
        font-weight: 700;
    }

    .compact-stat-status.inactive {
        color: #fbbf24;
    }

    /* =========================================================
       Compact Subscription
       ========================================================= */

    .compact-subscription-card {
        padding: 1rem 1.15rem;
        overflow: hidden;
    }

    .compact-subscription-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .75rem;
    }

    .compact-subscription-title {
        display: flex;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }

    .compact-subscription-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(168, 85, 247, .12);
        border: 1px solid rgba(168, 85, 247, .25);
    }

    .compact-subscription-icon i {
        color: #c084fc;
        font-size: 1.1rem;
    }

    .compact-subscription-name {
        color: #f8fafc;
        font-size: .82rem;
        font-weight: 700;
        margin: 0;
    }

    .compact-subscription-plan {
        color: rgba(226, 232, 240, .55);
        font-size: .65rem;
        margin-top: .15rem;
    }

    .compact-subscription-badge {
        border-radius: 999px;
        padding: .28rem .6rem;
        background: rgba(34, 197, 94, .12);
        border: 1px solid rgba(34, 197, 94, .25);
        color: #4ade80;
        font-size: .62rem;
        white-space: nowrap;
    }

    .compact-subscription-data {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .45rem .7rem;
    }

    .compact-subscription-item {
        min-width: 0;
    }

    .compact-subscription-item small {
        display: block;
        color: rgba(226, 232, 240, .45);
        font-size: .58rem;
        margin-bottom: .12rem;
    }

    .compact-subscription-item strong {
        display: block;
        color: #e2e8f0;
        font-size: .68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* =========================================================
       No Subscription
       ========================================================= */

    .compact-no-subscription {
        padding: 1rem 1.15rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .compact-no-subscription-info {
        display: flex;
        align-items: center;
        gap: .75rem;
    }

    .compact-no-subscription-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(251, 191, 36, .1);
        border: 1px solid rgba(251, 191, 36, .22);
    }

    .compact-no-subscription-icon i {
        color: #fbbf24;
    }

    .compact-no-subscription-title {
        color: #f8fafc;
        font-size: .82rem;
        font-weight: 700;
        margin: 0 0 .15rem;
    }

    .compact-no-subscription-text {
        color: rgba(226, 232, 240, .52);
        font-size: .65rem;
        margin: 0;
    }

    /* =========================================================
       Profile Section
       ========================================================= */

    .profiles-main-card {
        padding-bottom: 1rem;
    }

    .profiles-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.15rem .8rem;
    }

    .profiles-section-title-wrap {
        display: flex;
        align-items: center;
        gap: .7rem;
        min-width: 0;
    }

    .profiles-section-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(168, 85, 247, .12);
        border: 1px solid rgba(168, 85, 247, .25);
    }

    .profiles-section-icon i {
        color: #c084fc;
        font-size: 1.15rem;
    }

    .profiles-section-title {
        color: #f8fafc;
        font-size: .92rem;
        font-weight: 800;
        margin: 0;
    }

    .profiles-section-subtitle {
        display: block;
        color: rgba(226, 232, 240, .48);
        font-size: .64rem;
        margin-top: .15rem;
    }

    .profile-new-button {
        border: 0;
        border-radius: 10px;
        padding: .48rem .8rem;
        background: linear-gradient(135deg, #7c3aed, #db2777);
        box-shadow: 0 6px 18px rgba(124, 58, 237, .18);
        font-size: .7rem;
        white-space: nowrap;
    }

    .profile-new-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 22px rgba(168, 85, 247, .25);
    }

    #launchAlert {
        margin: 0 1.15rem .75rem;
        font-size: .72rem;
    }

    .profiles-grid {
        padding: 0 1.15rem;
    }

    /* =========================================================
       Profile Card
       ========================================================= */

    .compact-profile-card {
        position: relative;
        height: 100%;
        padding: .85rem;
        border-radius: 15px;
        background: linear-gradient(
            145deg,
            rgba(15, 30, 58, .82),
            rgba(8, 18, 38, .88)
        );
        border: 1px solid rgba(148, 163, 184, .1);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
        transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .compact-profile-card:hover {
        transform: translateY(-2px);
        border-color: rgba(56, 189, 248, .22);
        box-shadow:
            0 10px 25px rgba(0, 0, 0, .18),
            0 0 22px rgba(56, 189, 248, .04);
    }

    .compact-profile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .55rem;
        margin-bottom: .7rem;
    }

    .compact-profile-main {
        display: flex;
        align-items: center;
        gap: .65rem;
        min-width: 0;
    }

    .compact-profile-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(168, 85, 247, .12);
        border: 1px solid rgba(168, 85, 247, .22);
    }

    .compact-profile-icon i {
        color: #c084fc;
        font-size: 1.15rem;
    }

    .compact-profile-info {
        min-width: 0;
    }

    .compact-profile-name {
        color: #f8fafc;
        font-size: .78rem;
        font-weight: 700;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .compact-profile-status {
        color: rgba(226, 232, 240, .42);
        font-size: .59rem;
        margin-top: .15rem;
    }

    .compact-profile-menu {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(148, 163, 184, .1);
        background: rgba(15, 23, 42, .5);
        padding: 0;
    }

    .compact-profile-menu:hover {
        background: rgba(56, 189, 248, .08);
    }

    .compact-profile-menu i {
        font-size: .9rem;
        color: #38bdf8;
    }

    /* =========================================================
       Profile Meta
       ========================================================= */

    .compact-profile-meta {
        display: flex;
        align-items: center;
        gap: .4rem;
        flex-wrap: wrap;
        margin-bottom: .7rem;
    }

    .compact-profile-meta-item {
        display: inline-flex;
        align-items: center;
        gap: .3rem;
        padding: .28rem .45rem;
        border-radius: 8px;
        background: rgba(15, 23, 42, .58);
        border: 1px solid rgba(148, 163, 184, .08);
        color: #cbd5e1;
        font-size: .61rem;
        line-height: 1;
    }

    .compact-profile-meta-item i {
        font-size: .7rem;
    }

    .compact-version i {
        color: #38bdf8;
    }

    .compact-loader i {
        color: #f59e0b;
    }

    .compact-ram i {
        color: #4ade80;
    }

    .compact-profile-action {
        margin-top: auto;
    }

    .compact-launch-button {
        width: 100%;
        border: 0;
        border-radius: 10px;
        min-height: 34px;
        padding: .4rem .7rem;
        background: linear-gradient(135deg, #0891b2, #7c3aed);
        box-shadow: 0 6px 18px rgba(8, 145, 178, .13);
        font-size: .68rem;
        font-weight: 700;
        color: #fff;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .compact-launch-button i {
        color: #86efac !important;
        font-size: .95rem;
    }

    .compact-launch-button:hover {
        transform: translateY(-1px);
        box-shadow: 0 9px 22px rgba(124, 58, 237, .2);
        color: #fff;
    }

    /* =========================================================
       Empty
       ========================================================= */

    .compact-empty {
        padding: 2rem 1rem;
        text-align: center;
        border-radius: 14px;
        background: rgba(15, 23, 42, .35);
        border: 1px dashed rgba(148, 163, 184, .12);
    }

    .compact-empty-icon {
        width: 52px;
        height: 52px;
        margin: 0 auto .7rem;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(251, 191, 36, .08);
    }

    .compact-empty-icon i {
        font-size: 1.35rem;
        color: #fbbf24;
    }

    .compact-empty-text {
        color: rgba(226, 232, 240, .58);
        font-size: .72rem;
        margin-bottom: .8rem;
    }

    /* =========================================================
       Activity Console
       ========================================================= */

    .launcher-console-card {
        margin-top: 1rem;
        overflow: hidden;
    }

    .launcher-console-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: .9rem 1.15rem;
        border-bottom: 1px solid rgba(148, 163, 184, .08);
    }

    .launcher-console-title-wrap {
        display: flex;
        align-items: center;
        gap: .65rem;
    }

    .launcher-console-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(34, 197, 94, .1);
        border: 1px solid rgba(34, 197, 94, .2);
    }

    .launcher-console-icon i {
        color: #4ade80;
        font-size: 1.05rem;
    }

    .launcher-console-title {
        color: #f8fafc;
        font-size: .82rem;
        font-weight: 800;
        margin: 0;
    }

    .launcher-console-subtitle {
        color: rgba(226, 232, 240, .45);
        font-size: .61rem;
        margin-top: .12rem;
    }

    .launcher-console-status {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        color: rgba(226, 232, 240, .5);
        font-size: .6rem;
    }

    .launcher-console-status-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #64748b;
        box-shadow: 0 0 8px rgba(100, 116, 139, .35);
    }

    .launcher-console-status-dot.active {
        background: #4ade80;
        box-shadow: 0 0 10px rgba(74, 222, 128, .55);
    }

    .launcher-console-tabs {
        display: flex;
        align-items: center;
        gap: .35rem;
        padding: .65rem 1.15rem;
        overflow-x: auto;
        border-bottom: 1px solid rgba(148, 163, 184, .06);
        scrollbar-width: thin;
    }

    .launcher-console-tab {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        flex: 0 0 auto;
        padding: .4rem .65rem;
        border-radius: 9px;
        border: 1px solid rgba(148, 163, 184, .09);
        background: rgba(15, 23, 42, .48);
        color: rgba(226, 232, 240, .55);
        font-size: .62rem;
        cursor: default;
        transition: .2s ease;
    }

    .launcher-console-tab i {
        font-size: .72rem;
        color: #94a3b8;
    }

    .launcher-console-tab.active {
        color: #f8fafc;
        background: rgba(56, 189, 248, .08);
        border-color: rgba(56, 189, 248, .2);
    }

    .launcher-console-tab.active i {
        color: #38bdf8;
    }

    .launcher-console-tab.running i {
        color: #4ade80;
    }

    .launcher-console-body {
        min-height: 190px;
        max-height: 300px;
        overflow-y: auto;
        padding: .65rem 1.15rem 1rem;
        background: rgba(2, 6, 23, .32);
        scrollbar-width: thin;
    }

    .launcher-console-empty {
        min-height: 165px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: rgba(226, 232, 240, .3);
        text-align: center;
    }

    .launcher-console-empty i {
        font-size: 1.7rem;
        margin-bottom: .5rem;
        color: rgba(56, 189, 248, .35);
    }

    .launcher-console-empty span {
        font-size: .68rem;
    }

    .launcher-log-line {
        display: grid;
        grid-template-columns: 68px 20px minmax(0, 1fr);
        align-items: start;
        gap: .35rem;
        padding: .34rem .45rem;
        border-radius: 7px;
        font-family: Consolas, "Courier New", monospace;
        font-size: .64rem;
        line-height: 1.6;
    }

    .launcher-log-line:hover {
        background: rgba(148, 163, 184, .035);
    }

    .launcher-log-time {
        color: rgba(148, 163, 184, .42);
        direction: ltr;
        text-align: left;
    }

    .launcher-log-icon {
        text-align: center;
    }

    .launcher-log-message {
        color: rgba(226, 232, 240, .68);
        direction: rtl;
        text-align: right;
        word-break: break-word;
    }

    .launcher-log-success .launcher-log-icon {
        color: #4ade80;
    }

    .launcher-log-info .launcher-log-icon {
        color: #38bdf8;
    }

    .launcher-log-download .launcher-log-icon {
        color: #a78bfa;
    }

    .launcher-log-warning .launcher-log-icon {
        color: #fbbf24;
    }

    .launcher-log-error .launcher-log-icon {
        color: #fb7185;
    }

    .launcher-log-running .launcher-log-icon {
        color: #22d3ee;
    }

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

    @media (max-width: 1199.98px) {
        .compact-system-description {
            max-width: 300px;
        }
    }

    @media (max-width: 991.98px) {
        .user-panel-dashboard-top > [class*="col-"] {
            margin-bottom: 0;
        }

        .compact-system-description {
            max-width: none;
        }

        .profiles-grid .col-xl-4 {
            width: 50%;
        }
    }

    @media (max-width: 767.98px) {
        .compact-system-card,
        .compact-no-subscription {
            align-items: stretch;
            flex-direction: column;
        }

        .compact-system-button {
            width: 100%;
        }

        .profiles-section-header {
            align-items: flex-start;
        }

        .profile-new-button {
            padding-inline: .65rem;
        }

        .profiles-grid .col-xl-4 {
            width: 100%;
        }

        .launcher-console-header {
            align-items: flex-start;
            flex-direction: column;
        }
    }