/* =========================================
   Global Body & Desktop View (Outside 480px)
   ========================================= */
:root {
    /* ব্র্যান্ডিং কালার (Black & Gold Theme) */
    --primary-color: #FFCE01;       /* মেইন হাইলাইট গোল্ডেন */
    --primary-variant: #d4af37;     /* একটু গাঢ় মেটালিক গোল্ডেন */
    --primary-soft: rgba(255, 204, 0, 0.1); /* হালকা গোল্ডেন আভাস */

    /* ডার্ক থিম ব্যাকগ্রাউন্ড (Samsung A54 এর OLED স্ক্রিনের জন্য পিওর ব্ল্যাক) */
    --bg-body: #141325;             /* মেইন বডি ব্যাকগ্রাউন্ড */
    --bg-card: #1a1a1a;             /* কার্ড, বক্স বা পপআপ ব্যাকগ্রাউন্ড */
    --bg-input: rgba(255, 255, 255, 0.04);

    /* টেক্সট কালার প্যালেট */
    --text-main: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.8);
    --text-highlight: #FFCE01;
    --text-muted: #a0a0a0;          /* সাব-টাইটেল বা ঝাপসা টেক্সট */
    --text-low: #666666;            /* একদম হালকা টেক্সট বা প্লেসহোল্ডার */
    --text-on-primary: #000000;     /* প্রাইমারি কালারের ওপর টেক্সট (কালো) */

    /* বর্ডার এবং শ্যাডো */
    --border-main: rgba(255, 255, 255, 0.08);
    --border-active: #FFCE01;
    --shadow-glow: 0 4px 15px rgba(255, 204, 0, 0.2); /* গোল্ডেন গ্লো */

    /* রেডিয়াস এবং ট্রানজিশন (Consistency এর জন্য) */
    --radius-lg: 15px;              /* বড় কার্ডের জন্য */
    --radius-sm: 8px;               /* বাটন বা ইনপুটের জন্য */
    --transition: 0.3s ease;        /* স্মুথ এনিমেশন */
}   

body {
    background-color: #9195a3; /* বাইরের গ্রে/ধূসর ব্যাকগ্রাউন্ড */
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex; /* কন্টেইনারকে মাঝখানে আনার জন্য */
    justify-content: center; 
    align-items: flex-start;
    min-height: 100vh;
}

/* =========================================
   Main Mobile Container (Inside 480px)
   ========================================= */
.main-container {
    width: 100%;
    max-width: 480px; /* নির্দিষ্ট করা ম্যাক্স উইডথ */
    background-color: var(--bg-body);
    min-height: 100vh;
    color: #ffffff;
    padding-inline: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-body);
    position: relative;
    margin: 0 -16px 12px -16px;
    padding: 0 16px;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    height: 50px;
}

.header-back-btn {
    text-decoration: none;
    color: #fff;
    display: flex;
    align-items: center;
    z-index: 2;
}

.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
}

/* User Wallet and Balance Display */
.top-balance-display {
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 6px 8px;
    border-radius: 99px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.refresh-icon-box {
    cursor: pointer;
    display: flex;
    align-items: center;
}

.rotating { 
    animation: spin 0.6s linear; 
}

@keyframes spin { 
    100% { transform: rotate(360deg); } 
}