/* --- General and Layout CSS --- */
body { 
    font-family: 'Segoe UI', Roboto, sans-serif; 
    background: #0f0f12; 
    color: #fff; 
    margin: 0; 
    padding-bottom: 20px; 
}
.content-container { 
    max-width: 1100px; 
    margin: 20px auto; 
    padding: 0 15px; 
}

/* --- Header CSS --- */
.app-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    background: #1a1a1d; 
    border-bottom: 1px solid #333; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
.profile-sec { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    cursor: pointer; 
}
.profile-img { 
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    border: 2px solid #4caf50; 
    background: #333; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 1.2em; 
    color: #4caf50; 
}
.login-btn { 
    background: #2563eb; 
    color: white; 
    border: none; 
    padding: 8px 15px; 
    border-radius: 20px; 
    font-weight: bold; 
    cursor: pointer; 
}
.logout-btn { 
    background: #ef4444; 
    margin-left: 5px; 
    font-size: 0.8em; 
}
.deposit-btn-header { 
    background: #00897b; 
    color: white; 
    border: none; 
    padding: 10px 20px; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
    transition: background 0.3s; 
    margin-right: 15px; 
}

/* --- Wallet Display CSS --- */
.wallet-sec { 
    text-align: right; 
    max-width: 120px; 
    overflow: hidden; 
    white-space: nowrap; 
}
.wallet-label { 
    font-size: 0.7em; 
    color: #aaa; 
    display: block; 
}
.wallet-amount { 
    font-size: 1.2em; 
    font-weight: bold; 
    color: #ffca28; 
    font-family: sans-serif; 
    display: inline-block; 
}
.coin-suffix { 
    font-size: 0.6em; 
    color: #fff; 
    margin-left: 2px; 
}

/* --- Modal Base CSS (Login/Deposit) --- */
.modal-overlay { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.85); 
    z-index: 200; 
    justify-content: center; 
    align-items: center; 
}
.modal-box { 
    background: #1e1e24; 
    padding: 25px; 
    border-radius: 12px; 
    width: 90%; 
    max-width: 400px; 
    border: 1px solid #333; 
    position: relative; 
    max-height: 90vh; 
    overflow-y: auto; 
}
.modal-title { 
    margin-top: 0; 
    text-align: center; 
    color: #4caf50; 
    margin-bottom: 20px; 
}
.btn-close { 
    position: absolute; 
    top: 10px; 
    right: 10px; 
    background: none; 
    border: none; 
    color: #666; 
    font-size: 1.5em; 
    cursor: pointer; 
}

/* --- Form/Input CSS --- */
.form-group { 
    margin-bottom: 15px; 
}
.form-group label { 
    display: block; 
    font-size: 0.8em; 
    color: #aaa; 
    margin-bottom: 5px; 
}
.form-group input, .form-group select { 
    width: 100%; 
    padding: 12px; 
    background: #121212; 
    border: 1px solid #333; 
    color: white; 
    border-radius: 6px; 
    box-sizing: border-box; 
}
.modal-actions { 
    display: flex; 
    gap: 10px; 
    margin-top: 20px; 
}
.btn-submit { 
    flex: 1; 
    padding: 12px; 
    border: none; 
    border-radius: 6px; 
    font-weight: bold; 
    cursor: pointer; 
}
.btn-whatsapp { 
    background: #4caf50; 
    color: white; 
    width: 100%; 
    margin-top: 10px; 
}
.error-msg { 
    color: #ff4d4d; 
    font-size: 0.8em; 
    text-align: center; 
    margin-top: 10px; 
    display: none; 
}
.success-msg { 
    color: #00e676; 
    font-size: 0.9em; 
    text-align: center; 
    margin-top: 10px; 
    display: none; 
}
.pkr-estimate { 
    text-align: center; 
    color: #00e676; 
    font-weight: bold; 
    font-size: 1.1em; 
    margin-bottom: 15px; 
    border: 1px dashed #333; 
    padding: 10px; 
    border-radius: 6px; 
    background: rgba(0,230,118,0.05); 
}
.admin-account-box { 
    background: #004d40; 
    padding: 10px; 
    border-radius: 6px; 
    text-align: center; 
    margin: 10px 0; 
    border: 1px dashed #4db6ac; 
}

/* --- Dashboard/Wallet Table CSS --- */
.wallet-dashboard { 
    margin-top: 30px; 
}
.wallet-dashboard h2 { 
    color: #ffca28; 
    border-bottom: 2px solid #333; 
    padding-bottom: 10px; 
}
.wallet-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #1e1e24; 
    border-radius: 12px; 
    overflow: hidden; 
}
.wallet-table th, .wallet-table td { 
    padding: 12px; 
    text-align: left; 
    border-bottom: 1px solid #2d2d35; 
}
.wallet-table th { 
    background: #25252b; 
    color: #bbb; 
    font-size: 0.75em; 
    text-transform: uppercase; 
}
.coin-symbol { 
    color: #ffb74d; 
    font-weight: bold; 
}
.coin-balance { 
    color: #00ff88; 
    font-weight: bold; 
}
.coin-rate { 
    font-size: 0.9em; 
    color: #81d4fa; 
}

/* --- History CSS (for Deposit Modal) --- */
.history-box { 
    margin-top: 20px; 
    border-top: 1px solid #333; 
    padding-top: 15px; 
}
.history-title { 
    font-size: 0.9em; 
    color: #bbb; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}
.history-item { 
    display: flex; 
    justify-content: space-between; 
    padding: 8px 0; 
    border-bottom: 1px dotted #2d2d35; 
}
.badge { 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-size: 0.7em; 
    font-weight: bold; 
    text-transform: uppercase; 
}
.badge-Pending { 
    background: #ff980020; 
    color: #ff9800; 
    border: 1px solid #ff9800; 
}
.badge-Approved { 
    background: #00e67620; 
    color: #00e676; 
    border: 1px solid #00e676; 
}
.badge-Rejected { 
    background: #f4433620; 
    color: #f44336; 
    border: 1px solid #f44336; 
}