/* ========== RESET & BASE ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; line-height: 1.4; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ========== THEMES ========== */
:root {
    --primary-color: #2e7d32;
    --primary-light: #66bb6a;
    --primary-dark: #1b5e20;
    --header-bg: #1b5e20;
    --footer-bg: #1b5e20;
    --btn-grad-top: #66bb6a;
    --btn-grad-bot: #2e7d32;
    --btn-border: #1b5e20;
    --tab-active: #2e7d32;
    --tab-border: #2e7d32;
}
[data-theme="blue"] {
    --primary-color: #0d47a1;
    --primary-light: #64b5f6;
    --primary-dark: #1e2f47;
    --header-bg: #1e2f47;
    --footer-bg: #0d47a1;
    --btn-grad-top: #64b5f6;
    --btn-grad-bot: #3f51b5;
    --btn-border: #1a237e;
    --tab-active: #0056b3;
    --tab-border: #0056b3;
}
[data-theme="red"] {
    --primary-color: #d32f2f;
    --primary-light: #ef5350;
    --primary-dark: #b71c1c;
    --header-bg: #b71c1c;
    --footer-bg: #b71c1c;
    --btn-grad-top: #ef5350;
    --btn-grad-bot: #c62828;
    --btn-border: #b71c1c;
    --tab-active: #d32f2f;
    --tab-border: #d32f2f;
}
[data-theme="yellow"] {
    --primary-color: #f57f17;
    --primary-light: #fbc02d;
    --primary-dark: #e65100;
    --header-bg: #e65100;
    --footer-bg: #e65100;
    --btn-grad-top: #fbc02d;
    --btn-grad-bot: #f57f17;
    --btn-border: #e65100;
    --tab-active: #f57f17;
    --tab-border: #f57f17;
}
[data-theme="light-green"] {
    --primary-color: #558b2f;
    --primary-light: #8bc34a;
    --primary-dark: #33691e;
    --header-bg: #33691e;
    --footer-bg: #33691e;
    --btn-grad-top: #8bc34a;
    --btn-grad-bot: #689f38;
    --btn-border: #33691e;
    --tab-active: #558b2f;
    --tab-border: #558b2f;
}

/* ========== HEADER ========== */
.site-header { background: var(--header-bg); padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid #000; }
.brand-name { color: #ffeb3b; font-size: 22px; font-weight: 900; font-family: 'Arial Black', sans-serif; text-shadow: 1px 1px 2px #000; display: flex; align-items: center; gap: 8px;}
.header-right { display: flex; align-items: center; gap: 15px; }
.whatsapp-btn img { height: 18px; }
.menu-btn { background: none; border: none; color: #fff; font-size: 16px; display: flex; align-items: center; gap: 5px; cursor: pointer; font-weight: normal; }
.menu-btn i { font-size: 18px; }

/* ========== SUB NAV ========== */
.sub-nav { background: #fff; display: flex; overflow-x: auto; border-bottom: 2px solid #ddd; }
.sub-nav a { padding: 8px 10px; font-size: 15px; font-weight: bold; color: #000; display: flex; align-items: center; gap: 5px; white-space: nowrap; border-bottom: 2px solid transparent; }
.sub-nav a.active { color: var(--primary-color); border-bottom: 2px solid var(--primary-color); }
.sub-nav a i { font-size: 16px; }

/* ========== HERO BANNER ========== */
.hero-banner { width: 100%; margin-bottom: 0; }
.hero-banner img { width: 100%; height: auto; display: block; }

/* ========== SEARCH BAR ========== */
.search-container { padding: 8px 15px; background: #fff; border-bottom: 1px solid #ddd; }
.search-box { width: 100%; padding: 8px 12px 8px 30px; border: 1px solid #b0bec5; border-radius: 4px; background: #e3f2fd url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>') no-repeat 10px center; font-size: 13px; color: #555; outline: none; }

/* ========== TABS ========== */
.tabs-container { display: flex; background: #fff; padding: 10px 10px 0 10px; border-bottom: 1px solid var(--tab-border); gap: 4px; }
.tab { flex: 1; text-align: center; padding: 10px 2px; font-size: 13px; font-weight: bold; color: #000; border: 1px solid var(--tab-border); border-bottom: none; background: #fff; cursor: pointer; border-radius: 4px 4px 0 0; }
.tab.active { background: var(--tab-active); color: #fff; border-color: var(--tab-active); }
.tab i { color: #00e676; margin-right: 4px; }

/* ========== APP LIST ========== */
.app-list { background: #fff; }
.app-row { display: flex; align-items: center; padding: 15px 10px; border-bottom: 1px solid #eee; gap: 10px; }
.app-number { font-size: 20px; font-weight: bold; color: #bbb; min-width: 20px; text-align: center; }
.app-icon { width: 60px; height: 60px; border-radius: 12px; overflow: hidden; flex-shrink: 0; border: 2px solid #ffeb3b; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app-info { flex: 1; min-width: 0; }
.app-title { font-size: 16px; font-weight: bold; color: #333; margin-bottom: 3px; }
.app-meta { font-size: 12px; color: #777; margin-bottom: 3px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;}
.app-meta .fa-download { color: #777; font-size: 11px; }
.app-downloads { color: #d32f2f; font-weight: bold; }
.app-withdraw { color: #2e7d32; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 4px; }
.app-withdraw i { color: #2e7d32; }
.btn-download { background: linear-gradient(to bottom, var(--btn-grad-top), var(--btn-grad-bot)); color: #fff; padding: 8px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; border: 1px solid var(--btn-border); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.btn-download:hover { background: linear-gradient(to bottom, var(--btn-grad-top), var(--primary-dark)); }

/* ========== TAGS & BANNERS ========== */
.tags-section { background: #ffea00; padding: 8px 10px; text-align: center; font-size: 12px; font-weight: bold; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.action-banner { margin: 10px; padding: 8px 12px; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: bold; }
.banner-blue { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }
.banner-blue .action-btn { background: #1565c0; color: #fff; padding: 5px 10px; border-radius: 3px; }
.banner-green { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; }
.banner-green .action-btn { background: #2e7d32; color: #fff; padding: 5px 10px; border-radius: 3px; }

/* ========== FOOTER ========== */
.site-footer { background: var(--footer-bg); padding: 20px 10px; margin-top: 10px; color: #fff; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 15px; }
.footer-link-btn { border: 1px solid #fff; padding: 5px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; display: flex; align-items: center; gap: 5px; }
.footer-copy { text-align: center; font-size: 12px; }

/* Wrapper for mobile-like container on desktop */
.app-container { max-width: 480px; margin: 0 auto; background: #fff; min-height: 100vh; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
@media (min-width: 481px) {
    body { background-color: #eceff1; }
}