/* ============================================================
   1. VARIABLES & VIEWPORT LOCK
   ============================================================ */
:root { 
    --primary: #ffcc00;
    --bg: #121212;
    --card: #1e1e1e;
    --text: #ffffff;
    --border: #333;
    --tab-bg: #222;
    --max-ui-width: 1000px;
    --header-h: 60px; /* Fixed height for mobile */
    --footer-h: 90px; /* Fixed height for footer */
}

body.light-mode {
    --bg: #f5f7f9; 
    --card: #ffffff; 
    --text: #1a1a1a; 
    --border: #ddd; 
    --tab-bg: #e4e6eb;
}

/* Critical: Prevent entire page from stretching */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Stops the "long screen" issue */
}

#html5mobi-body { 
    height: 100%;
    background: var(--bg);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; 
    color: var(--text); 
    display: flex !important;
    flex-direction: column;
}

/* ============================================================
   2. APP CONTAINER & SCREEN LAYOUT
   ============================================================ */
#premium-engine-content {
    width: 100%;
    max-width: var(--max-ui-width);
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.screen { 
    display: none; 
    height: 100%; /* Take full container height */
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
}

.screen.active { 
    display: flex !important; 
}

/* Start screen needs to be centered and can scroll if needed */
#start-screen {
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}

/* ============================================================
   3. FIXED HEADER (TABS)
   ============================================================ */
.tabs-header { 
    height: var(--header-h);
    width: 100%; 
    background: var(--tab-bg); 
    border-bottom: 2px solid var(--primary); 
    display: flex;
    align-items: center; 
    justify-content: space-between; 
    z-index: 10;
    flex-shrink: 0; /* Header won't squash */
}

.tab-items-wrapper { 
    display: flex; 
    overflow-x: auto; 
    scrollbar-width: none; 
    height: 100%;
}
.tab-items-wrapper::-webkit-scrollbar { display: none; }

.tab-item { 
    padding: 0 20px; 
    display: flex;
    align-items: center;
    cursor: pointer; 
    white-space: nowrap; 
    font-weight: bold; 
    color: #888; 
    height: 100%;
}

.tab-item.active-tab { 
    color: var(--primary); 
    background: var(--card); 
}

/* ============================================================
   4. SCROLLABLE GRID (The Fix for Long Screen)
   ============================================================ */
#styles-output { 
    flex-grow: 1; /* Take all available space between header/footer */
    overflow-y: auto; /* Only this part scrolls */
    padding: 20px; 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 15px; 
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

@media (max-width: 600px) {
    #styles-output {
        grid-template-columns: 1fr;
        padding: 15px;
    }
}

/* ============================================================
   5. FIXED FOOTER
   ============================================================ */
.footer-bar { 
    height: var(--footer-h);
    width: 100%; 
    background: var(--card); 
    border-top: 1px solid var(--border); 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
    z-index: 10;
}

.page-indicator {
    font-size: 10px;
    margin-bottom: 5px;
    opacity: 0.6;
    text-transform: uppercase;
}

/* ============================================================
   6. CARDS, INPUTS & BUTTONS
   ============================================================ */
.style-card { 
    background: var(--card); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
}

#engine-input {
    width: 80%;
    max-width: 350px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center;
}

.primary-btn { 
    background: var(--primary); 
    color: #000; 
    border: none; 
    padding: 12px 30px; 
    border-radius: 50px; 
    font-weight: bold; 
    cursor: pointer; 
    text-transform: uppercase;
}

.fs-toggle-btn {
    position: absolute;
    right: 15px;
    bottom: 25px; /* Positioned inside footer bar */
    background: transparent;
    border: none;
    color: var(--primary);
    padding: 8px;
}

/* ============================================================
   7. ADSENSE RECOVERY & OVERLAYS
   ============================================================ */
/* Ensure AdSense Interstitials stay on top and buttons are clickable */
ins.adsbygoogle {
    z-index: 2147483647 !important;
}

/* Fullscreen recovery */
:fullscreen #premium-engine-content {
    max-width: 100%;
}