body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f5f5f7;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

main { 
    flex: 1; 
    overflow-y: auto; 
    padding: 20px; 
    padding-bottom: 200px; 
}

h2 { margin-top: 0; font-size: 1.5rem; display: inline-block;}
h3 { margin-top: 15px; margin-bottom: 8px; font-size: 1.1rem; color: #333; }

.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.input-group { display: flex; flex-direction: column; gap: 8px; }

.tab-content { display: none; }
.tab-content.active { display: block; }

.project-controls { display: flex; gap: 5px; margin-bottom: 10px; }
#project-select { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #ccc; font-size: 16px; }
.editor-options { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.9rem; color: #666; }
#save-status { font-size: 0.8rem; color: #007aff; }

.run-controls { display: flex; gap: 5px; margin-top: 10px; }
#preview-mode { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #ccc; }

textarea { width: 100%; height: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-family: monospace; }
#preview-area-wrapper { margin-top: 20px; padding: 10px; background: white; border-radius: 8px; border: 1px solid #eee; min-height: 150px; }
#preview-inline { display: none; }
#preview-iframe { width: 100%; height: 300px; border: 1px solid #ddd; display: none; background: #fff; }

#fullscreen-container {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: white; z-index: 2000; display: none; flex-direction: column;
}
#btn-close-fullscreen { position: absolute; top: 10px; right: 10px; z-index: 2001; padding: 8px 15px; background: rgba(0,0,0,0.5); color: white; border: none; border-radius: 20px; cursor: pointer; }
#fullscreen-content { width: 100%; height: 100%; overflow: auto; }
#fullscreen-content iframe { width: 100%; height: 100%; border: none; }

.primary-btn { width: 100%; background: #007aff; color: white; border: none; padding: 14px; border-radius: 10px; font-size: 16px; font-weight: bold; cursor: pointer; text-align: center; text-decoration: none; display: inline-block; box-sizing: border-box; }
.primary-btn:active { background: #005ecb; }
.small-btn { padding: 5px 10px; background: #e5e5ea; border: none; border-radius: 6px; cursor: pointer; }
.danger-btn { width: 100%; background: #ff3b30; color: white; border: none; padding: 12px; border-radius: 8px; cursor: pointer; margin-top: 10px; }
.danger-btn-small { background: #ff3b30; color: white; border: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; }

#system-logs { width: 100%; height: 120px; background: #1c1c1e; color: #39ff14; font-size: 12px; padding: 10px; border-radius: 6px; resize: none; }
.storage-item { background: white; padding: 10px; border-radius: 6px; margin-bottom: 5px; border: 1px solid #eee; word-break: break-all; font-size: 0.9rem; }
.storage-key { font-weight: bold; color: #007aff; }
.danger-zone { margin-top: 30px; border-top: 1px solid #ccc; padding-top: 20px; }
.help-box { background: #eef; padding: 15px; border-radius: 8px; font-size: 0.9rem; line-height: 1.5; color: #333; }

.camera-wrapper { position: relative; width: 100%; background: #000; border-radius: 12px; overflow: hidden; margin-bottom: 15px; display: flex; justify-content: center; align-items: center; min-height: 250px; }
video { width: 100%; height: 100%; object-fit: cover; }
.camera-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.capture-btn { width: 70px; height: 70px; border-radius: 50%; border: 4px solid #007aff; background: white; display: none; cursor: pointer; margin: 0 auto; transition: all 0.3s; }

#photo-result { display: none; margin-top: 20px; text-align: center; }
#photo-gallery { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; }
#photo-gallery div { background: white; padding: 10px; border-radius: 12px; border: 1px solid #eee; }
#photo-gallery img { width: 100%; border-radius: 8px; display: block; }
#captured-image { width: 100%; border-radius: 10px; margin-bottom: 10px; }

#stealth-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: black; z-index: 9999; display: none; }
.toggle-wrapper { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; background: #fff; padding: 10px; border-radius: 8px; }
.switch-label { position: relative; display: inline-block; width: 40px; height: 24px; }
.switch-label input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #007aff; }
input:checked + .slider:before { transform: translateX(16px); }

.camera-mode-row { display: flex; margin-bottom: 15px; background: #e5e5ea; border-radius: 10px; padding: 4px; }
.mode-btn { flex: 1; border: none; background: transparent; padding: 8px; border-radius: 8px; font-weight: 600; cursor: pointer; color: #888; transition: all 0.2s; }
.mode-btn.active { background: white; color: #000; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

#camera-settings input { padding: 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 14px; box-sizing: border-box; min-width: 0; }
#video-options { display: none; flex-direction: column; gap: 10px; background: #f0f0f5; padding: 12px; border-radius: 10px; margin-top: 5px; }

.tab-bar { 
    position: fixed; bottom: 0; width: 100%; 
    height: 75px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    display: flex; padding-bottom: env(safe-area-inset-bottom); z-index: 100; 
}
.tab-btn { flex: 1; border: none; background: transparent; color: #999; font-size: 13px; font-weight: bold; }
.tab-btn.active { color: #007aff; font-size: 14px; }

@media (prefers-color-scheme: dark) {
    body {
        background-color: #000000;
        color: #777;
    }
    h2, h3 {
        color: #999;
    }
    .editor-options {
        color: #555;
    }
    textarea, 
    #project-select, 
    #preview-mode,
    #camera-settings input {
        background-color: #050505;
        border: 1px solid #222;
        color: #aaa;
    }
    #preview-area-wrapper,
    .storage-item,
    .toggle-wrapper,
    #photo-gallery div,
    .help-box {
        background-color: #000000;
        border: 1px solid #222;
        color: #888;
    }
    .small-btn {
        background: #111;
        color: #666;
    }
    .camera-mode-row {
        background: #0a0a0a;
    }
    .mode-btn {
        color: #444;
    }
    .mode-btn.active {
        background: #1a1a1a;
        color: #ccc;
        box-shadow: none;
    }
    #video-options {
        background: #0a0a0a;
        color: #888;
    }
    #fullscreen-container {
        background: #000;
    }
    #preview-iframe {
        background: #050505;
        border: 1px solid #222;
    }
    .tab-bar {
        background: #000000;
        border-top: 1px solid #111;
        box-shadow: none;
    }
    .tab-btn {
        color: #333;
    }
    .tab-btn.active {
        color: #004499;
    }
    .danger-zone {
        border-top: 1px solid #222;
    }
    ::-webkit-scrollbar {
        width: 8px;
        background: #000;
    }
    ::-webkit-scrollbar-thumb {
        background: #222;
        border-radius: 4px;
    }
}