body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: rgba(229, 231, 235, 1); 
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 30vh;
    font-size: 16px; /* Default font size badha diya hai */
}

/* Header Bar Styling */
.header { position: fixed; top: 0; left: 0; width: 100%; padding: 15px 20px; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; }
.site-name { font-size: 1.5em; font-weight: bold; color: white; text-align: center; }
.balance-box { background: rgba(255, 255, 255, 0.2); padding: 8px 15px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); color: white; justify-self: end; }
.balance-amount { font-size: 1em; font-weight: bold; }
.hamburger-menu { background: rgba(138, 43, 226, 0.7); padding: 10px; border-radius: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; z-index: 1; }
.hamburger-menu .line { height: 3px; background-color: white; border-radius: 3px; }
.line-1, .line-3 { width: 25px; }
.line-2 { width: 30px; }

/* Sidebar Styling */
.sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 280px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(15px); border-right: 2px solid #8a2be2; z-index: 200; transform: translateX(-100%); transition: transform 0.3s ease-in-out; padding: 25px 15px; box-sizing: border-box; display: flex; flex-direction: column; }
.sidebar.active { transform: translateX(0); }
.profile-section { display: flex; align-items: center; padding: 10px; margin-bottom: 30px; }
.avatar-img { width: 60px; height: 60px; border-radius: 12px; margin-right: 15px; border: 2px solid #fff; }
.user-details { color: #fff; }
.user-pay-id { font-size: 0.8em; opacity: 0.8; display: block; }
.user-mobile { font-size: 1.1em; font-weight: bold; display: block; margin: 4px 0; }
.verification-status { display: flex; align-items: center; font-size: 0.8em; }
.status-text.unverified { background-color: #facc15; color: #422006; padding: 2px 8px; border-radius: 5px; font-weight: bold; }
.verify-link { color: #c4b5fd; text-decoration: underline; margin-left: 10px; font-weight: 500; }
.sidebar-menu { display: flex; flex-direction: column; gap: 12px; }
.menu-item { display: flex; align-items: center; padding: 12px 15px; border-radius: 10px; background-color: #998FF0; border: 2px solid #9077D6; color: white; text-decoration: none; font-weight: 500; transition: background-color 0.2s ease; }
.menu-item:hover { background-color: #8a7fd4; }
.menu-icon { width: 22px; height: 22px; margin-right: 15px; }
.logout-item { background-color: #948CEF; border-color: #EE99AB; }
.logout-item:hover { background-color: #857ddb; }

/* Main Content Styling */
.main-content { padding-top: 90px; padding-bottom: 80px; }
.page-title { font-size: 1.5em; color: #374151; text-align: center; margin-bottom: 20px; }
.promo-image-container, .announcement-box, .category-boxes, .info-boxes, .divider, .tabs-container, .list-container { width: 95%; margin-left: auto; margin-right: auto; }
.list-container { margin-top: 20px; }
.promo-image-container { margin-bottom: 10px; }
.promo-image-container img { width: 100%; height: 180px; border-radius: 10px; object-fit: cover; }
.announcement-box { margin-bottom: 20px; background-color: #fff6; border-radius: 10px; padding: 10px 15px; display: flex; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; }
.announcement-box i { color: #7480FF; margin-right: 10px; }
.marquee { white-space: nowrap; overflow: hidden; flex: 1; }
.marquee p { margin: 0; display: inline-block; padding-left: 100%; color: #7480FF; animation: marquee-animation 15s linear infinite; }
@keyframes marquee-animation { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
.category-boxes { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.category-item { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.category-box { background-color: rgba(99, 102, 241, 0.4); width: 100%; aspect-ratio: 1 / 1; border-radius: 20px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.category-box img { width: 100%; height: 100%; object-fit: contain; }
.category-label { margin-top: 8px; color: #7480FF; font-size: 0.8em; font-weight: 500; }
.info-boxes { margin-top: 20px; display: flex; gap: 10px; }
.info-box { flex: 1; background: linear-gradient(to right, #6366f1, #c7d2fe); border-radius: 15px; padding: 15px; color: white; display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.info-box-text h4 { margin: 0 0 4px 0; font-size: 1em; }
.info-box-text p { margin: 0; font-size: 0.8em; opacity: 0.9; }
.info-box img { height: 50px; width: auto; object-fit: contain; }
.divider { margin-top: 25px; margin-bottom: 25px; height: 1px; background-color: #d1d5db; }
.tabs-container { display: flex; gap: 20px; }
.tab-switch { border: none; padding: 8px 4px; font-size: 0.9em; font-weight: 600; cursor: pointer; background-color: transparent; color: #6b7280; border-bottom: 3px solid transparent; transition: color 0.3s, border-color 0.3s; }
.tab-switch.active { color: #818CF8; border-bottom-color: #818CF8; }
.list-container { display: flex; flex-direction: column; gap: 12px; }
.list-item-link { text-decoration: none; }
.list-item { width: 100%; height: 65px; background-color: #ffffff; border: 1px solid #D1ABF5; border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; align-items: center; padding: 0 12px; box-sizing: border-box; }
.coin-logo { width: 40px; height: 40px; border-radius: 50%; margin-right: 12px; }
.coin-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.coin-pair { font-weight: 600; font-size: 1em; color: #1f2937; }
.coin-fullname { font-size: 0.8em; color: #6b7280; }
.price-info { text-align: right; margin-right: 12px; }
.current-price { font-weight: 600; font-size: 0.95em; color: #1f2937; }
.price-change-24h { font-size: 0.75em; color: #6b7280; }
.percentage-box { width: 75px; padding: 8px 0; border-radius: 8px; color: white; font-weight: 600; font-size: 0.9em; text-align: center; }
.percentage-box.gain { background-color: #10b981; }
.percentage-box.loss { background-color: #ef4444; }
.loading-text, .error-text { text-align: center; color: #6b7280; padding: 20px; }
.footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: white; display: flex; justify-content: space-around; padding: 10px 0; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); z-index: 100; }
.footer-option { color: #555; text-decoration: none; font-size: 0.8em; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.footer-option i { font-size: 1.4em; }

/* STYLES for auth.php */
/* ... (login page ke styles yahan hain) ... */
.auth-body { background: #f3f4f6; display: flex; justify-content: center; align-items: center; height: 100vh; padding: 20px; box-sizing: border-box; }
.auth-container { width: 100%; max-width: 400px; background-color: white; padding: 0 20px 20px 20px; box-sizing: border-box; text-align: center; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); overflow: hidden; }
.auth-top-image { width: 100%; height: auto; margin-bottom: 25px; }
.auth-toggle { display: flex; justify-content: center; margin-bottom: 25px; background-color: #e5e7eb; border-radius: 10px; padding: 5px; }
.auth-toggle button { flex: 1; padding: 10px; border: none; background: transparent; font-size: 1em; font-weight: 600; color: #4b5563; cursor: pointer; border-radius: 8px; transition: all 0.3s ease; }
.auth-toggle button.active { background: white; color: #6366f1; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
.auth-form input { width: 100%; padding: 15px; margin-bottom: 15px; border: 1px solid #d1d5db; border-radius: 10px; box-sizing: border-box; font-size: 1em; }
.auth-form button { width: 100%; padding: 15px; border: none; background-color: #6366f1; color: white; font-size: 1.1em; font-weight: bold; border-radius: 10px; cursor: pointer; transition: background-color 0.3s ease; }
.auth-form button:hover { background-color: #4f46e5; }
.error-msg { background-color: #fee2e2; color: #b91c1c; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-weight: 500; }
.success-msg { background-color: #dcfce7; color: #166534; padding: 10px; border-radius: 8px; margin-bottom: 15px; font-weight: 500; }

/* --- STYLES for trade.php (UPDATED LAYOUT) --- */
.trade-page-wrapper { width: 100%; height: calc(100vh - 30px - 10px); padding-top: 70px; box-sizing: border-box; display: flex; flex-direction: column; }
.chart-section { flex-basis: 80%; background-color: #000; }
#tradingview_chart_container { width: 100%; height: 100%; }
.controls-section { flex-basis: 20%; background-color: #fff; padding: 20px 15px; box-sizing: border-box; }

.controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 15px;
    height: 100%;
}
.control-box {
    width: 100%; /* Box poori width lega */
    height: 55px; /* Sabhi boxes ki height kam kar di hai */
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
}

/* Timer Styling */
.timer-button {
    width: 100%; height: 100%; border: none; background: transparent;
    font-size: 1em; font-weight: 600; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.timer-button span:first-child { font-size: 0.8em; color: #6b7280; }
.timer-button span:last-child { font-size: 1.1em; color: #1f2937; }
.timer-options { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: white; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 150px; padding: 8px; z-index: 10; display: none; }
.timer-options.show { display: block; }
.timer-option { padding: 10px; border-radius: 6px; cursor: pointer; text-align: center; font-weight: 500; }
.timer-option:hover { background-color: #f3f4f6; }
.timer-option.active { background-color: #e0e7ff; color: #4f46e5; }

/* Amount Box Styling */
.amount-box { justify-content: space-between; }
.amount-input-wrapper { display: flex; flex-direction: column; align-items: center; }
.amount-input-wrapper span { font-size: 0.8em; color: #6b7280; }
#amount-input { width: 100%; border: none; background: transparent; text-align: center; font-size: 1.2em; font-weight: bold; color: #1f2937; -moz-appearance: textfield; }
#amount-input::-webkit-outer-spin-button, #amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-btn { width: 35px; height: 35px; border-radius: 50%; border: none; background-color: #e5e7eb; font-size: 1.6em; cursor: pointer; line-height: 35px; }

/* Buy/Sell Button Styling */
.trade-btn {
    width: 100%; height: 100%; border: none;
    border-radius: 12px; color: white;
    font-size: 1.3em; font-weight: bold; cursor: pointer;
    transition: transform 0.1s ease;
}
.trade-btn:active { transform: scale(0.95); }
.buy-btn { background-color: #10b981; }
.sell-btn { background-color: #ef4444; }


.page-sheet {
    background-color: #ffffff;
    /* Top corners ko curve karega */
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    /* Bottom corners seedhe rahenge */
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

    padding: 30px 25px;
    /* Main-content ke padding ke andar iska margin 0 rahega */
    margin: 0; 
    
    /* Halka sa shadow jo sheet ko utha hua dikhayega */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.07);
    
    /* Yeh sunishchit karega ki sheet kam se kam poori screen bhare */
    min-height: calc(100vh - 90px - 60px); /* Full height - header - footer */
}

/* Page sheet ke andar ke content ke liye styling */
.page-sheet h1 {
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
}

.page-sheet h2 {
    color: #374151;
    margin-top: 30px;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 8px;
}

.page-sheet p {
    color: #4b5563;
    line-height: 1.7; /* Padhne me aasaani ke liye line height */
    font-size: 1.05em;
}

/* ... (Aapka saara purana CSS code yahan rahega) ... */

/* --- STYLES for trade.php (UPDATED TIMER) --- */
.timer-box { justify-content: space-between; padding: 0 10px; }
.timer-display-wrapper { display: flex; flex-direction: column; align-items: center; }
.timer-display-wrapper span:first-child { font-size: 0.8em; color: #6b7280; }
.timer-display-wrapper span:last-child { font-size: 1.2em; font-weight: bold; color: #1f2937; }
.timer-btn { width: 35px; height: 35px; border-radius: 50%; border: none; background-color: #e5e7eb; font-size: 1.6em; cursor: pointer; line-height: 35px; }


/* STYLES for orders.php */
.full-page-container { width: 100%; min-height: 100vh; background-color: white; box-sizing: border-box; }
.page-header { display: flex; align-items: center; padding: 16px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.back-button { font-size: 1.7em; color: #333; text-decoration: none; }
.page-header h2 { margin: 0 0 0 16px; font-size: 1.4em; }
.page-content { padding: 20px 15px; }
.section-title { font-size: 1.3em; color: #374151; margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid #f3f4f6; }
.trade-list { display: flex; flex-direction: column; gap: 15px; }
.trade-item { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 15px; background-color: #f9fafb; padding: 15px; border-radius: 12px; border: 1px solid #e5e7eb; }
.trade-item div { font-size: 0.95em; }
.trade-item .label { color: #6b7280; }
.trade-item .value { font-weight: 600; color: #1f2937; text-transform: capitalize; }
.trade-item .type-buy { color: #10b981; }
.trade-item .type-sell { color: #ef4444; }
.trade-item .status-won { color: #10b981; }
.trade-item .status-lost { color: #ef4444; }
.trade-item .status-running { color: #f59e0b; }
.no-trades-message { text-align: center; color: #9ca3af; padding: 20px; }

/* Tab switch container ke liye common styles */
.tab-switch-container {
    display: flex;
    justify-content: space-around;
    background-color: #e5e7eb;
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 25px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}

/* Tab buttons (jo ab link hain 'a' tag) ke liye styles */
.tab-switch-container .tab-btn {
    flex: 1;
    padding: 12px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05em;
    color: #4b5563;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none; /* Link se underline hatane ke liye */
    text-align: center; /* Text ko center me rakhne ke liye */
}

/* Active tab ka style */
.tab-switch-container .tab-btn.active {
    background-color: white;
    color: #6366f1;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.category-item-link {
    text-decoration: none; /* Link se underline hatata hai */
    color: inherit; /* Text ka rang wahi rakhta hai jo pehle tha */
    flex: 1; /* Yeh zaroori hai taaki layout na bigde */
    display: flex; /* Flexbox properties ko enable karta hai */
}

.info-box-link {
    text-decoration: none;
    color: inherit;
    flex: 1; /* Dono link barabar space lenge */
}

.trade-btn.exit-btn {
    background-color: #f59e0b; /* Orange color for Exit */
}