:root {
    --ios-blue: #007AFF;
    --bg-color: #ffffff;
    --text-color: #000000;
    --glass-bg: rgba(255, 255, 255, 0.7);
    --border-color: rgba(0, 0, 0, 0.15);
}

body.dark-mode {
    --bg-color: #1a1a1a;
    --text-color: #ffffff;
    --glass-bg: rgba(30, 30, 30, 0.7);
    --border-color: rgba(255, 255, 255, 0.15);
}

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    background-color: #000; /* Necessary for the 3D backdrop */
    overflow: hidden;
}

#app-container {
    width: 100%; height: 100%;
    background: var(--bg-color);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    z-index: 5;
}

/* Glass UI Elements */
.glass-header, .glass-footer {
    position: absolute;
    width: 100%;
    z-index: 10;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    display: flex; justify-content: center; align-items: center;
}

.glass-header { top: 0; height: 64px; border-bottom: 0.5px solid var(--border-color); padding-top: 20px; }
.glass-footer { bottom: 0; height: 49px; border-top: 0.5px solid var(--border-color); }

.address-bar {
    background: rgba(0,0,0,0.05);
    width: 90%; height: 30px; border-radius: 8px;
    display: flex; align-items: center; padding: 0 10px;
}

.url-text {
    flex: 1; background: transparent; border: none; outline: none;
    text-align: center; font-size: 16px; color: var(--text-color);
}

.content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 64px 0 49px; }
#browser-viewport { width: 100%; height: 100%; border: none; background: white; }

.nav-btn { background: none; border: none; color: var(--ios-blue); font-size: 24px; cursor: pointer; }

/* Overlays */
.overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.15, 0.45, 0.15, 1);
    z-index: 100;
}
.overlay.active { transform: translateY(0); }

/* --- 3D TABS VIEW --- */
#tabs-container {
    perspective: 1200px;
    padding: 80px 20px;
    display: flex; flex-direction: column; align-items: center;
    height: 100%; overflow-y: auto;
    background: #222; /* Darker background for tab view */
}

.tab-card {
    width: 80%; height: 350px;
    background: white;
    margin-bottom: -240px; /* Overlap cards like a deck */
    border-radius: 12px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
    transform: rotateX(45deg); /* The iOS 7 Angle */
    transition: transform 0.3s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.2);
    overflow: hidden;
}

.tab-card iframe {
    width: 200%; height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
}

.tabs-view-header {
    position: absolute; top: 0; width: 100%; height: 60px;
    background: var(--glass-bg); backdrop-filter: blur(10px);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 110; border-bottom: 0.5px solid var(--border-color);
}

.tabs-view-header h2 { font-size: 17px; color: var(--text-color); }

/* Dark Mode Toggle */
.dark-mode-row { display: flex; align-items: center; gap: 10px; }
#theme-switch { appearance: none; width: 50px; height: 30px; background: #ccc; border-radius: 15px; position: relative; }
#theme-switch:checked { background: #4cd964; }
#theme-switch::before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; top: 2px; left: 2px; background: white; transition: 0.3s; }
#theme-switch:checked::before { transform: translateX(20px); }