body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f2f5;
    display: blo;
    justify-content: center;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 3120px; /* CORRECTED: Ensures app-like view on all screens */
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* display: flex; */
    flex-direction: column;
    position: relative;
}

/* Header */
.app-header {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.header-left, .header-right { display: flex; align-items: center; gap: 8px; }
.app-logo { width: 100px; height: 100px; border-radius: 10px 10px 10px 10px; border: 2px solid white; padding: 3px;}
.header-bot-icon { width: 32px; height: 32px; }
.app-name { font-size: 42px; font-weight: bold; color: gold;}

/* Navigation */

/* Content Area */
.content-area {
    flex-grow: 1;
    overflow-y: auto;
    background-color: #f0f2f5;
    padding-bottom: 70px; /* Space for the fixed bottom nav */
}
.screen {
    padding: 15px;
}
.screen.active {
    display: block;
}

/* Balance Section */
.balance-section {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    margin: -15px -15px 15px -15px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.balance-info { text-align: left; }
.balance-info p { margin: 4px 0; font-size: 14px;}
.balance-info .amount { font-size: 32px; font-weight: bold; display: block; }
.balance-info .earnings { font-weight: bold; }
.balance-bot-icon { width: 65px; height: 65px; align-self: flex-end; top: 40px; border-radius: 20px 20px 20px 20px; border: 2px solid white; padding: 3px;}

/* Home Actions */
.home-actions {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: -35px 15px 15px 15px;
    position: relative;
    z-index: 2;
    margin-top: 10px;
}

.btn { 
    padding: 10px 20px; 
    border: none; 
    border-radius: 8px; 
    font-weight: bold; 
    cursor: pointer; 
    font-size: 16px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn img {
    width: 20px;
    height: 20px;
}
.btn-recharge { background-color: #9d00ff; color: white; }
.btn-withdrawal { background-color: #ff007f; color: white; }
.btn-receive { background-color: #ffc107; color: #333; border: none; padding: 8px 15px; border-radius: 15px; font-weight: bold; cursor: pointer; font-size: 12px; }

/* Cards */
.card {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 15px;
    color: white;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.device-task-section { display: flex; justify-content: space-between; gap: 10px; }
.card h3 { margin-top: 0; font-size: 16px; color: white; }
.card p { font-size: 12px; color: white; margin-bottom: 10px; }
.my-device-card {
    background-size: cover;
    background-color: #ff6f00;
}
.complete-task-card {
    background-size: cover;
    background-color: #32cd32;
}


/* Styling for the images to make them small */
.card img {
    width: 50px; /* Sets a small, fixed width for the image */
    height: 50px; /* Sets a small, fixed height for the image */
    object-fit: cover; /* Ensures the image covers the area without distortion */
    border-radius: 50%; /* Makes the image circular */
    border: 2px solid #ddd; /* Adds a border around the image */
    padding: 3px; /* Space between the border and the image */
}


/* Product/Cash Box */
.cash-box-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.cash-box-section h2 { font-size: 18px; color: #333; margin: 0; }
.cash-box-more { font-size: 14px; text-decoration: none; color: #666; }

.product-card { background-color: #00D9D4; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); border-radius: 10px; margin-bottom: 15px; }
.product-header { display: flex; align-items: center; margin-bottom: 15px; }
.product-icon { width: 50px; height: 50px; margin-right: 15px; border-radius: 50%; border: 2px solid white; padding: 3px; }
.product-details h3 { margin: 0; font-size: 18px; color: white;}
.product-details .price { font-size: 30px; font-weight: bold; color: #ff007f; }
.product-details .original-price { font-size: 20px; color: #999999; text-decoration: line-through; }
.purchase-limit { margin-left: auto; font-size: 12px; color: white; padding: 3px 8px; border-radius: 10px;}
.purchase-limit strong { font-weight: bold; color: rgb(252, 227, 2); }
.btn-buy-surprise { background-color: #ff6f61; color: #333; width: 100%; padding: 12px; border-radius: 25px; font-weight: bold; font-size: 16px; cursor: pointer; border: none; margin-bottom: 10px; }

.surprise-box-info { border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.surprise-box-header {
    background-color: #007bff;
    color: white;
    padding: 8px 12px;
    font-size: 12px;
}
.product-item { padding: 10px; border-top: 1px solid #0c0c0c; background-color: white; cursor: pointer;}
.item-icon { display: none; }
.item-details p { margin: 2px 0; font-size: 14px; color: #333;}
.item-details h5 { margin: 2px 0; font-size: 14px; color: black;}

.item-stats { display: flex; justify-content: space-between; margin-top: 10px; color: #363131;}
.stat { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.stat img { width: 20px; height: 20px; border-radius: 25px;}
.stat strong { color: red; font-size: 18px;}

.btn-more-prizes { background: #f8f9fa; border: none; color: #007bff; font-size: 12px; cursor: pointer; width: 100%; text-align: center; padding: 8px; }


/* --- FORTUNE SCREEN STYLES --- */
#fortune-screen { padding: 10px; background-color: #f0f2f5; }
.screen-title { text-align: center; font-size: 20px; color: #333; margin-bottom: 15px; }
.toggle-buttons { display: flex; justify-content: center; margin-bottom: 15px; background-color: #FF007F; border-radius: 25px; padding: 4px; }
.toggle-btn { flex: 1; padding: 10px; border: none; font-size: 16px; font-weight: bold; border-radius: 25px; background-color: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }
.toggle-btn.active { background-color: #00E5E5; color: #000; }
.toggle-btn img { width: 20px; height: 20px; filter: invert(1); }
.toggle-btn.active img { filter: none; }
.filter-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; }
.filter-pill { background-color: #fdeec9; color: #b9872d; border: 1px solid #f9d89c; border-radius: 20px; padding: 8px 12px; font-size: 12px; font-weight: bold; cursor: pointer; }
.investment-card { background-color: #antiquewhite; border-radius: 10px; padding: 15px; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.investment-card h3 { font-size: 16px; color: #333; margin-top: 0; margin-bottom: 10px; }
.invest-main-info { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; }
.invest-robot-img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgb(117, 96, 96); padding: 3px;}
.invest-main-text p { margin: 0 0 5px 0; font-size: 14px; color: #333; }
.invest-main-text a { color: #999; font-size: 12px; text-decoration: none; }
.invest-period-amount { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 5px; }
.investment-progress { width: 100%; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 5px; }
.investment-progress::-webkit-progress-bar { background-color: #eee; }
.investment-progress::-webkit-progress-value { background-color: #ffc107; }
.invest-stats { display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-bottom: 15px; }
.invest-cta-block { background-color: red; border-radius: 10px; padding: 15px; text-align: center; margin-bottom: 10px; }
.btn-invest { width: 100%; background-color: #00E5E5; color: #333; border: none; padding: 12px; font-size: 18px; font-weight: bold; border-radius: 25px; cursor: pointer; margin-bottom: 15px; }
.invest-dates { display: flex; justify-content: space-around; color: white; }
.invest-date { display: flex; flex-direction: column; }
.date-value { font-size: 16px; font-weight: bold; }
.date-label { font-size: 12px; color: #ccc; }
.income-statement { background-color: yellow; border-radius: 10px; padding: 10px; }
.income-title { font-size: 12px; color: #333; margin: 0 0 10px 0; }
.income-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; row-gap: 5px; }
.income-grid .value { color: #b9872d; font-weight: bold; }
.expand-arrow { text-align: center; color: #ccc; margin-top: 10px; font-size: 18px; }

/* --- PROMOTE SCREEN STYLES --- */
#promote-screen { background-color: #f0f2f5; padding-top: 0; }
.promote-header { background-color: #3a456c; color: white; padding: 20px 15px 50px 15px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; text-align: center; position: relative; }
.promote-header h2 { margin: 0; font-size: 22px; }
#promote-screen .header-bot-icon { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; z-index: 3; border-radius: 50%; border: 2px solid rgb(102, 95, 95); padding: 3px;}
.promote-links-card { background-color: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: -30px 0 20px 0; position: relative; z-index: 2; padding: 10px; }
.invite-row { display: flex; justify-content: space-between; align-items: center; padding: 10px; }
.invite-row:first-child { border-bottom: 1px solid #eee; }
.invite-info { display: flex; flex-direction: column; gap: 4px; word-break: break-all; padding-right: 10px; }
.invite-label { font-size: 14px; color: #666; }
.invite-value { font-size: 14px; font-weight: bold; color: #333; }
.btn-copy { background-color: #3a456c; color: white; border: none; border-radius: 20px; padding: 8px 20px; font-weight: bold; cursor: pointer; flex-shrink: 0; }
.section-title { font-size: 18px; color: #333; margin: 0 0 15px 0; }
.level-card { background-color: #00E5E5; border-radius: 10px; margin: 0 0 15px 0; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-top: 4px solid; }
.level-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.level-card-header h4 { margin: 0; font-size: 24px; font-weight: bold; }
.level-card-header .btn-details { border: none; border-radius: 20px; padding: 6px 18px; color: white; font-weight: bold; cursor: pointer; }
.level-card-body .level-stat { display: flex; justify-content: space-between; font-size: 14px; padding: 8px 0; color: #666; }
.level-card-body .level-stat span:last-child { font-weight: bold; color: #333; }
.level-1 { border-color: #dc3545; }
.level-1 h4 { color: #dc3545; }
.level-1 .btn-details { background-color: #dc3545; }
.level-2 { border-color: #ffc107; }
.level-2 h4 { color: #ffc107; }
.level-2 .btn-details { background-color: #ffc107; }
.level-3 { border-color: #007bff; }
.level-3 h4 { color: #007bff; }
.level-3 .btn-details { background-color: #007bff; }
.rewards-info { margin: 0 0 15px 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.rewards-header { background-color: #FF007F; color: white; padding: 15px; font-weight: bold; }
.rewards-body { background-color: #FF6F00; padding: 15px; font-size: 14px; color: #333; }
.rewards-body p { margin: 0 0 10px 0; color: white;}
.rewards-body ul { padding-left: 20px; margin: 0; color: white;}

/* --- TASK SCREEN STYLES --- */
#task-screen { padding: 0; background: #0b102b; height: 100%; display: flex; flex-direction: column; }
.task-header { padding: 20px; position: relative; color: white; }
.task-earn-info { display: flex; flex-direction: column; }
.task-earn-title { font-size: 24px; color: #4db8ff; }
.task-earn-amount { font-size: 40px; font-weight: bold; color: #ffc107; }
.task-earn-subtitle { font-size: 16px; color: white; }
.task-robot-img { position: absolute; top: 10px; right: 15px; width: 90px; border-radius: 50%; border: 2px solid white; padding: 3px;}
.task-list { padding: 0 20px 20px 20px; }
.new-task-item { background-color: #FF007F; border-radius: 10px; display: flex; align-items: center; padding: 15px; margin-bottom: 15px; }
.new-task-icon { width: 40px; height: 40px; border-radius: 50%; background-color: #e0e0e0; margin-right: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgb(146, 140, 140); padding: 3px;}
.new-task-details { display: flex; flex-direction: column; gap: 4px; }
.new-task-value { font-size: 16px; color: white; }
.new-task-reward { font-size: 14px; color: white; font-weight: bold; display: flex; align-items: center; }
.new-task-reward img { width: 16px; height: 16px; margin-right: 5px; }
.btn-start { background-color: #00E5E5; color: #333; border: none; border-radius: 20px; padding: 8px 25px; font-weight: bold; font-size: 16px; cursor: pointer; margin-left: auto; }

/* --- ME/PROFILE SCREEN STYLES --- */
#me-screen { padding: 0; background-color: #f4f6f9; }
.me-header { background-color: #007bff; padding: 20px 15px 40px 15px; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; display: flex; justify-content: space-between; align-items: flex-start; }
.me-user-info { display: flex; align-items: center; gap: 10px; }
.me-logo { width: 40px; height: 40px; border-radius: 50%; background-color: white; }
.me-user-details { display: flex; flex-direction: column; color: white; }
.me-user-id { font-size: 16px; font-weight: bold; }
.me-account-number { font-size: 12px; }
.me-header-bot { width: 60px; height: 60px; border-radius: 50%; border: 2px solid white; padding: 3px;}
.me-balance-card { background: #1a1a1a; color: white; border-radius: 10px; margin: -25px 15px 20px 15px; padding: 15px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.me-balance-details { display: flex; flex-direction: column; }
.me-balance-title { font-size: 14px; color: #ccc; display: flex; align-items: center; gap: 5px; }
.me-balance-title img { width: 18px; height: 18px; filter: invert(1); }
.me-balance-amount { font-size: 28px; font-weight: bold; }
.btn-me-withdrawal { background-color: #ffc107; color: #333; border: none; border-radius: 20px; padding: 8px 20px; font-weight: bold; font-size: 14px; cursor: pointer; }
.me-options-list { background-color: white; margin: 0 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.me-option-item { display: flex; align-items: center; padding: 15px; text-decoration: none; color: black; background-color: #00e5e5; border-bottom: 1px solid #f0f2f5; }
.me-option-item:last-child { border-bottom: none; }
.me-option-icon { width: 24px; height: 24px; margin-right: 15px; filter: grayscale(1); opacity: 0.6; }
.me-option-text { flex-grow: 1; font-size: 16px; }
.me-option-arrow { font-size: 18px; color: #ccc; }
.btn-logout { display: block; width: calc(100% - 30px); margin: 20px 15px; background-color: #ff007f; border: 1px solid #eee; padding: 12px; border-radius: 10px; font-size: 16px; font-weight: bold; color: white; cursor: pointer; text-align: center; }
.app-version { text-align: center; font-size: 12px; color: #aaa; }


/* --- NEW SUB-SCREEN STYLES --- */
.sub-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
}
.btn-back {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
}
.sub-screen-header h2 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
}
.header-placeholder {
    width: 20px;
}


/* --- MY DEVICE DETAILS SCREEN --- */
#my-device-screen-details { background-color: #f4f6f9; }
.device-details-card { background-color: #00e5e5; border-radius: 15px; padding: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); margin-top: 15px;}
.device-details-header { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.device-details-header img { width: 50px; height: 50px; object-fit: cover; border-radius: 50%; border: 3px solid red; padding: 3px;}
.device-details-title { flex-grow: 1; }
.device-details-title h3 { margin: 0; font-size: 18px; color: #333; }
.device-details-title .income { color: white; font-size: 15px; display: block; margin-top: 5px; font-weight: bold; }
.btn-receive-device {
    background-color: #ff007f;
    color: white;
    border-radius: 25px;
    padding: 10px 22px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.device-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-box { background-color: #1f51ff; border-radius: 10px; padding: 18px; text-align: center; }
.stat-value { font-size: 20px; font-weight: bold; display: block; margin-bottom: 5px; color: white; }
.stat-label { font-size: 13px; color: white; }
.stat-box.expired { background-color: red; color: white; }
.stat-box.full-width { grid-column: 1 / -1; }
.btn-join-more {
    display: block;
    width: calc(100% - 30px);
    margin: 25px auto 15px auto;
    background: linear-gradient(90deg, #32cd32);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 28px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}


/* --- INVITE FRIENDS SCREEN --- */
#invite-friends-screen { background-color: #fff; padding-bottom: 80px; }
.invite-banner img { width: 100px; border-radius: 15px; margin-top: 15px; box-shadow: 0 4px 10px rgb(250, 2, 54, 2); }
.invite-info-bar { margin: 20px 0; font-size: 14px; color: #666; line-height: 1.5;}
.invite-info-bar p { margin: 5px 0; }
.invite-info-bar strong { color: #333; }
.invite-rewards-list { display: flex; flex-direction: column; gap: 12px; }
.reward-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #e3f2fd;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.reward-icon { width: 45px; height: 45px; }
.reward-details { flex-grow: 1; }
.reward-title { font-size: 15px; font-weight: bold; margin-bottom: 5px; display: block; color: #333; }
.reward-progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    -webkit-appearance: none;
    appearance: none;
    margin-top: 5px;
}
.reward-progress::-webkit-progress-bar { background-color: #cfd8dc; border-radius: 3px; }
.reward-progress::-webkit-progress-value { background-color: #ffc107; border-radius: 3px; }
.reward-progress::-moz-progress-bar { background-color: #ffc107; border-radius: 3px; }

.reward-progress-text { font-size: 12px; color: #757575; margin-top: 5px; display: block;}
.reward-amount { font-size: 18px; font-weight: bold; color: #fbc02d; }
.btn-receive-reward {
    background-color: #e0e0e0;
    color: #a0a0a0;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-weight: bold;
    cursor: not-allowed;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.btn-invite-now {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: 340px;
    background-color: #f44336;
    color: white;
    border: none;
    padding: 15px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
    z-index: 100;
}
.btn-invite-now img { width: 24px; height: 24px; filter: invert(1); }


/* --- LUCKY TASK SCREEN STYLES --- */
#lucky-task-screen {
    background-color: #1a2049;
    color: white;
    padding: 0;
}
#lucky-task-screen .sub-screen-header {
    background-color: #1a2049;
    color: white;
    border-bottom: none;
    padding: 10px 15px 0 15px;
}
#lucky-task-screen .sub-screen-header .btn-back,
#lucky-task-screen .sub-screen-header h2 {
    color: white;
}
.lucky-task-header {
    background-color: #1a2049;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.lucky-task-reward-info {
    flex-grow: 1;
    margin-right: 15px;
}
.lucky-task-reward-info p {
    font-size: 15px;
    margin-bottom: 8px;
    color: #bbdefb;
}
.task-reward-amount-display {
    font-size: 30px;
    font-weight: bold;
    color: #ffeb3b;
}
.btn-receive-task {
    background-color: #ffeb3b;
    color: #1a2049;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.lucky-task-list {
    padding: 0 15px 20px 15px;
}
.lucky-task-item {
    background-color: #263238;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
}
.lucky-task-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: #4db8ff;
}
.lucky-task-item.active::before {
    background-color: #f44336;
}
.lucky-task-item.locked::before {
    background-color: #607d8b;
}
.lucky-task-item .task-content {
    flex-grow: 1;
    font-size: 14px;
    line-height: 1.5;
}
.lucky-task-item .task-content p {
    margin: 0;
}
.btn-task-status {
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-task-status.completed {
    background-color: #4CAF50;
    color: white;
}
.btn-task-status.go-complete {
    background-color: #ffeb3b;
    color: #333;
}
.lucky-task-item.locked {
    background-color: #3f51b5;
    color: #bbdefb;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.lucky-task-item.locked .task-content {
    display: flex;
    align-items: center;
    justify-content: center;
}
.lucky-task-item.locked .task-content p {
    margin: 0;
}
.lucky-task-item.locked::before {
    background-color: #7986cb;
}


/* --- ADD CARD SCREEN STYLES --- */
#add-card-screen {
    background-color: #1a73e8;
    padding: 0;
    color: white;
}
#add-card-screen .sub-screen-header {
    background-color: #1a73e8;
    border-bottom: none;
    padding: 10px 15px 0 15px;
}
#add-card-screen .sub-screen-header .btn-back,
#add-card-screen .sub-screen-header h2 {
    color: white;
}
.add-card-form-container {
    padding: 20px;
}
.add-card-form .form-group {
    margin-bottom: 20px;
}
.add-card-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #e3f2fd;
}
.add-card-form input {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background-color: white;
    box-sizing: border-box;
    color: #333;
    font-size: 16px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.btn-submit-card {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 30px;
    background: linear-gradient(90deg, #f44336, #e53935);
    color: white;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 30px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}


/* --- PASSWORD CHANGE SCREENS --- */
#change-login-password-screen, #change-payment-password-screen {
    background-color: #f4f6f9;
}
.password-change-form-container {
    padding: 20px;
    background-color: white;
    margin: 20px 15px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.password-change-form .form-group {
    margin-bottom: 20px;
}
.password-change-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #555;
}
.password-change-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: #f0f0f0;
    box-sizing: border-box;
}
.btn-submit-password-change {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 25px;
    background-color: #4CAF50;
    color: white;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(3px);
}
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 25px;
    border: none;
    border-radius: 15px;
    width: 90%;
    max-width: 380px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    position: relative;
}
.close-button {
    color: #9e9e9e;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
}
.close-button:hover, .close-button:focus {
    color: #666;
    text-decoration: none;
}
.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #1a73e8;
    text-align: center;
    font-size: 22px;
}
.modal-content label { display: block; margin-top: 12px; margin-bottom: 5px; font-size: 14px; color: #555; }
.modal-content input {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    font-size: 16px;
    background-color: #f0f0f0;
}
.modal-content .btn { margin-top: 25px; background-color: #1a73e8; color: white;}

/* Recharge/Withdrawal Specific Modal Styles */
.recharge-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: center;
}
.btn-recharge-option {
    background-color: #e0e0e0;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
    flex-grow: 1;
    max-width: 80px;
    text-align: center;
}
.btn-recharge-option.active {
    background-color: #4CAF50;
    color: white;
    border-color: #4CAF50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.payment-method-toggle {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 15px;
    background-color: #eceff1;
    border-radius: 10px;
    padding: 5px;
}
.btn-payment-method, .btn-withdrawal-method {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: #546e7a;
    font-weight: bold;
    cursor: pointer;
    font-size: 15px;
}
.btn-payment-method.active, .btn-withdrawal-method.active {
    background-color: #1a73e8;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.qr-code-placeholder {
    text-align: center;
    margin: 15px 0;
    border: 1px dashed #ccc;
    padding: 10px;
    border-radius: 8px;
    background-color: #f8f8f8;
}
.qr-code-placeholder img {
    max-width: 120px;
    height: auto;
    display: block;
    margin: 0 auto;
}
#withdrawalModal p {
    text-align: center;
    font-size: 14px;
    color: #666;
    margin-top: 20px;
}
.input-with-copy {
    display: flex;
    gap: 10px;
    align-items: center;
}
.input-with-copy input {
    flex-grow: 1;
    width: auto;
}

/* Login/Register Specific Styles */
.login-container {
    padding: 30px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-top: 50px;
}

.login-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    border-radius: 50%; border: 2px solid rgb(6, 247, 26); padding: 3px;
}

.login-container h2 {
    color: #333;
    margin-bottom: 25px;
    font-size: 24px;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
}

.form-group input {
    width: 100%;
    padding: 12px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.btn-login, .btn-register {
    width: 100%;
    padding: 12px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
}

.register-text {
    margin-top: 20px;
    font-size: 14px;
    color: #666;
}

.register-text a {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

/* Bottom Navigation */
.bottom-nav {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    border-top: 1px solid #eee;
    background-color: #fff;
    flex-shrink: 0;
    position: fixed;
    width: 100%;
    max-width: 3120px; /* Match app container width */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.nav-item { display: flex; flex-direction: column; align-items: center; color: #666; text-decoration: none; font-size: 10px; }
.nav-item img { width: 24px; height: 24px; margin-bottom: 3px; }
.nav-item.active { color: #007bff; }

/* Customer Service Button */
.customer-service-btn {
    position: fixed;
    bottom: 150px;
    right: 15px;
    background-color: #007bff;
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000;
}
.customer-service-btn img { width: 80px; height: 80px; border-radius: 50px; }

/* Fixed Bottom Button for Purchase/Invest Screens */
.btn-fixed-bottom {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 380px;
    padding: 16px;
    font-size: 18px;
    font-weight: bold;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 28px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 101;
}
.btn-fixed-bottom.orange {
    background: linear-gradient(90deg, #ff8c00, #ff4500);
}


/* AI CHATBOT PURCHASE SCREEN STYLES */
#ai-chatbot-purchase-screen {
    background-color: #2a2d4a;
    color: white;
    padding: 0 15px 80px 15px;
}
#ai-chatbot-purchase-screen .sub-screen-header {
    background-color: #2a2d4a;
    color: white;
}
#ai-chatbot-purchase-screen .sub-screen-header .btn-back,
#ai-chatbot-purchase-screen .sub-screen-header h2 {
    color: white;
}
.purchase-details-container { padding: 15px; }
.purchase-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.purchase-price { font-size: 32px; font-weight: bold; }
.purchase-price span { font-size: 24px; }
.purchase-price em { font-size: 14px; font-style: normal; color: #ccc; }
.purchase-count { font-size: 14px; color: #ccc; }
.purchase-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.purchase-subtitle { font-size: 13px; color: #ddd; line-height: 1.5; margin-bottom: 25px; }
.blind-box-pool { background-color: #3e426a; border-radius: 15px; overflow: hidden; }
.blind-box-header { padding: 12px; background-color: #4f5485; text-align: center; font-weight: bold; }
.blind-box-item { display: flex; align-items: center; gap: 15px; padding: 15px; border-bottom: 1px solid #4f5485; }
.blind-box-item:last-child { border-bottom: none; }
.blind-box-item img { width: 50px; height: 50px; }
.blind-box-details { flex-grow: 1; }
.blind-box-details p { margin: 0 0 5px 0; }
.blind-box-stats { display: flex; justify-content: space-between; font-size: 12px; color: #ccc; margin-top: 10px; }
.blind-box-stats strong { color: white; }

/* INVESTMENT DETAILS SCREEN STYLES */
#investment-details-screen {
    background-color: #f4f6f9;
    padding-bottom: 80px;
}
.invest-details-container { padding: 0; }
.invest-details-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}


/* Media Query to handle larger screens */
@media (min-width: 421px) {
    /* On desktops, we can give the container a bit more structure */
    .app-container {
        height: 95vh;
        max-height: 800px; /* Limit max height */
        border-radius: 20px;
        border: 1px solid #ddd;
    }
    
    /* Ensure the fixed button stays within the app container bounds */
    .btn-fixed-bottom {
        position: absolute;
    }
}



/* ... all previous styles ... */

/* NEW STYLE FOR WITHDRAWAL MODAL */
.withdrawal-summary {
    background-color: #f0f2f5;
    border-radius: 8px;
    padding: 10px 15px;
    margin: 15px 0;
    border: 1px solid #e0e0e0;
}
.withdrawal-summary p {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 14px;
    color: #333;
}
.withdrawal-summary p strong {
    font-size: 16px;
    color: #28a745;
}


/* --- SUB-SCREEN STYLES --- */
.sub-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin: -15px -15px 20px -15px;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 10;
    border-bottom: 1px solid #eee;
}
.btn-back {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    padding: 0 10px;
}
.sub-screen-header h2 {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    text-align: center;
    flex-grow: 1;
}
.header-custom-image {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    display: none; /* Hidden by default, shown by JS */
}

/* --- AI CHATBOT PURCHASE SCREEN STYLES --- */
#ai-chatbot-purchase-screen {
    background-color: #03083a;
    color: white;
    padding: 0 15px 80px 15px;
}
#ai-chatbot-purchase-screen .sub-screen-header {
    background-color: #03083a;
    color: white;
    border-bottom: none;
}
#ai-chatbot-purchase-screen .sub-screen-header .btn-back,
#ai-chatbot-purchase-screen .sub-screen-header h2 {
    color: white;
}
.purchase-details-container { padding: 15px; }
.purchase-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.purchase-price { font-size: 32px; font-weight: bold; }
.purchase-price span { font-size: 24px; }
.purchase-price em { font-size: 14px; font-style: normal; color: #ccc; }
.purchase-count { font-size: 14px; color: #ccc; }
.purchase-title { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.purchase-subtitle { font-size: 13px; color: #ddd; line-height: 1.5; margin-bottom: 25px; }

#purchase-screen-pool-container .surprise-box-info { border: none; }
#purchase-screen-pool-container .product-item { background-color: white; }

/* --- INVESTMENT DETAILS SCREEN STYLES --- */
#investment-details-screen {
    background-color: #f4f6f9;
    padding-bottom: 80px;
}
#investment-details-screen .invest-details-container { padding: 15px; margin-top: -20px; }


/* पूरे नियम अनुभाग के लिए एक कंटेनर */
.rules-container {
  font-family: Arial, sans-serif; /* पठनीयता के लिए फ़ॉन्ट बदला गया */
  background-color: #f7f9fc;    /* हल्का नीला-ग्रे बैकग्राउंड */
  border: 1px solid #e1e8ed;      /* हल्का बॉर्डर */
  border-radius: 8px;             /* कोनों को गोलाकार बनाया गया */
  padding: 25px;                  /* अंदर की तरफ स्पेस */
  margin: 20px auto;              /* पेज के केंद्र में लाने के लिए */
  max-width: 800px;               /* अधिकतम चौड़ाई */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* हल्की सी परछाई */
}

/* शीर्षक (Heading) के लिए स्टाइल */
h3.home-rules {
  color: #21272c;                 /* गहरा नीला रंग */
  font-size: 20px;                /* फ़ॉन्ट का आकार बढ़ाया गया */
  text-align: left;             /* टेक्स्ट को केंद्र में रखा गया */
  margin-bottom: 0px;            /* नीचे की तरफ स्पेस */
  padding-bottom: 0px;           /* नीचे की तरफ पैडिंग */
  /* border-bottom: 2px solid #3498db; /* शीर्षक के नीचे नीली लाइन */
}

/* पैराग्राफ (Paragraphs) के लिए स्टाइल */
h5.home-rules {
  color: #000000;                     /* टेक्स्ट का रंग */
  font-size: 15px;                 /* फ़ॉन्ट का आकार */
  line-height: 1.7;                /* लाइनों के बीच की ऊंचाई */
  margin-bottom: 0px;
}

/* महत्वपूर्ण टेक्स्ट (Strong text) के लिए स्टाइल */
.strong.home-rules {
  color: rgb(105, 103, 103);                  /* टेक्स्ट को हाइलाइट करने के लिए लाल रंग */
  font-weight: 200;                /* फ़ॉन्ट को थोड़ा और मोटा किया गया */
    color: #070707;                     /* टेक्स्ट का रंग */
  font-size: 15px;                 /* फ़ॉन्ट का आकार */
  line-height: 1.7;                /* लाइनों के बीच की ऊंचाई */
  margin-bottom: 0px;
  margin-top: 0px;
}

/* --- NEW: Full-Screen Item Details Modal Styles --- */
.item-details-modal-container {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}

.item-details-modal-content {
    background-color: #fff;
    border-radius: 15px;
    width: 90%;
    max-width: 380px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}

.item-details-modal-header {
    background-color: #007bff;
    position: relative;
    padding: 20px;
    text-align: center;
}

.item-details-modal-header .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: white;
    font-size: 28px;
}

.item-details-modal-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid white;
    background-color: #f0f2f5;
}

.item-details-modal-body {
    padding: 20px;
    text-align: center;
    overflow-y: auto;
}

.item-details-modal-body h2 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 22px;
    color: #333;
}

.item-details-modal-body h4 {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #666;
    font-weight: normal;
}

#item-modal-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

#item-modal-details-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f2f5;
    font-size: 15px;
}

#item-modal-details-list li:last-child {
    border-bottom: none;
}

#item-modal-details-list li strong {
    color: #555;
}

#item-modal-details-list li span {
    color: #333;
    font-weight: bold;
}

/* NEW: Styles for the modal footer and buy button */
.item-details-modal-footer {
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.item-details-modal-footer .btn {
    width: 100%;
    background-color: #28a745;
    color: white;
    font-size: 18px;
    padding: 12px;
}