/* Base v2 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; background: #000; color: #fff; overflow: hidden; transition: background 0.3s ease; }  /* Dynamic theme */
#app { height: 100vh; width: 100vw; display: flex; flex-direction: column; }
#navbar { background: rgba(0,0,0,0.9); padding: 10px; display: flex; gap: 8px; align-items: center; z-index: 1000; transition: background 0.3s ease; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
#navbar input, #navbar button, #navbar select { padding: 8px; border: 1px solid var(--accent); border-radius: 6px; background: var(--card-bg); color: var(--text-primary); transition: all 0.2s ease; }
#navbar button:hover { background: var(--accent); transform: scale(1.05); box-shadow: var(--shadow); }
#zoom-slider { width: 80px; accent-color: var(--accent); }
#container { flex: 1; position: relative; }
#main-frame { width: 100%; height: 100%; border: none; transition: zoom 0.1s ease; }
dialog { background: var(--card-bg); color: var(--text-primary); border: 2px solid var(--accent); padding: 20px; max-width: 600px; border-radius: 8px; animation: modalIn 0.3s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
#ext-search { width: 100%; margin-bottom: 10px; }
#ext-list { list-style: none; max-height: 300px; overflow-y: auto; }
#ext-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); transition: background 0.2s; }
#ext-list li:hover { background: var(--card-hover); }
#services-panel { position: fixed; top: 60px; right: 10px; width: 300px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; max-height: 400px; overflow-y: auto; z-index: 1001; animation: panelSlide 0.3s ease; }
@keyframes panelSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
#notif-list { list-style: none; }
#notif-list li { padding: 10px; border-bottom: 1px solid var(--border); animation: notifFade 0.5s ease; }
@keyframes notifFade { from { opacity: 0; } to { opacity: 1; } }
.hidden { display: none !important; }
.panel { box-shadow: var(--shadow); }

/* Themes v2 (Dynamic CSS Vars) */
:root { --text-primary: #ffffff; --text-secondary: #bbbbbb; --accent: #00ffff; --card-bg: #111111; --card-hover: #1a1a1a; --border: #333333; --shadow: 0 6px 16px rgba(0,0,0,0.5); }
body[data-theme="dark"] { --text-primary: #ffffff; --accent: #00ffff; --card-bg: #111111; }
body[data-theme="light"] { --text-primary: #222222; --accent: #0066cc; --card-bg: #ffffff; background: #f0f0f0; color: #222; }
body[data-theme="darker"] { --text-primary: #e0e0e0; --accent: #4da8ff; --card-bg: #1e1e1e; background: #000; }
body[data-theme="blue"] { --text-primary: #00ff88; --accent: #00ffff; --card-bg: #0a0a0a; --shadow: 0 0 15px rgba(0,255,136,0.3); background: linear-gradient(45deg, #001100, #003300); }
body[data-theme="none"] { --text-primary: #00ff00; --accent: #00ff00; --card-bg: #001100; font-family: 'Courier New', monospace; text-shadow: 0 0 5px #00ff00; background: #000; }

/* Apply */
#navbar { background: var(--card-bg); border-bottom: 1px solid var(--border); }
#navbar input, #navbar button { color: var(--text-primary); border-color: var(--accent); }
#navbar button:hover { background: var(--accent); color: var(--card-bg); }
dialog, #services-panel { background: var(--card-bg); border-color: var(--accent); color: var(--text-primary); }

/* Responsive v2 */
@media (max-width: 768px) { #navbar { flex-wrap: wrap; font-size: 14px; } #services-panel { width: 100%; right: 0; top: 50px; } }






* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; background: #000; color: #fff; overflow: hidden; }
#app { height: 100vh; width: 100vw; display: flex; flex-direction: column; }
#navbar { background: var(--card-bg); padding: 8px; display: flex; gap: 6px; align-items: center; z-index: 1000; animation: slideIn 0.3s ease; }
@keyframes slideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } }
#navbar input, #navbar button, #navbar select { padding: 6px; border: 1px solid var(--accent); border-radius: 4px; background: var(--card-bg); color: var(--text-primary); transition: all 0.2s; }
#navbar button:hover { background: var(--accent); transform: scale(1.05); box-shadow: var(--shadow); }
#zoom-slider { width: 80px; accent-color: var(--accent); }
#container { flex: 1; position: relative; }
#main-frame { width: 100%; height: 100%; border: none; }
#loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; font-size: 20px; }
#error-panel { position: fixed; top: 60px; left: 10px; background: red; color: white; padding: 10px; border-radius: 4px; z-index: 1001; }
#services-panel { position: fixed; top: 60px; right: 10px; width: 300px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; max-height: 400px; overflow-y: auto; }
#notif-list li { padding: 8px; border-bottom: 1px solid var(--border); }
#notif-list li.success { color: #0f0; } #notif-list li.error { color: #f00; }
#notif-filter { margin: 5px; padding: 5px; }
dialog { background: var(--card-bg); color: var(--text-primary); border: 2px solid var(--accent); padding: 15px; max-width: 600px; border-radius: 8px; }
#ext-list, #blockers-modal label { display: flex; gap: 10px; align-items: center; padding: 8px; }
#ext-search { width: 100%; margin-bottom: 8px; }
.hidden { display: none !important; }
:root { --text-primary: #fff; --accent: #00ffff; --card-bg: #111; --border: #333; --shadow: 0 6px 16px rgba(0,0,0,0.5); }
body[data-theme="dark"] { --text-primary: #fff; --accent: #00ffff; --card-bg: #111; }
body[data-theme="light"] { --text-primary: #222; --accent: #0066cc; --card-bg: #fff; background: #f0f0f0; }
body[data-theme="darker"] { --text-primary: #e0e0e0; --accent: #4da8ff; --card-bg: #1e1e1e; }
body[data-theme="blue"] { --text-primary: #00ff88; --accent: #00ffff; --card-bg: #0a0a0a; }
body[data-theme="none"] { --text-primary: #00ff00; --accent: #00ff00; --card-bg: #001100; font-family: 'Courier New', monospace; }
@media (max-width: 768px) { #navbar { flex-wrap: wrap; font-size: 12px; } #services-panel { width: 100%; right: 0; } }