/* --- Base Variables --- */
:root {
    --bg-app: #f3f4f6;
    --bg-header: #ffffff;
    --bg-panel: #ffffff;
    --border: #e5e7eb;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --accent: #10b981;
    --danger: #ef4444;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dark-theme {
    --bg-app: #0d1117;
    --bg-header: #161b22;
    --bg-panel: #0d1117;
    --border: #30363d;
    --text-main: #c9d1d9;
    --text-muted: #8b949e;
    --primary: #238636;
    --primary-hover: #2ea043;
}

* { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body { font-family: var(--font-sans); background: var(--bg-app); color: var(--text-main); height: 100vh; overflow: hidden; display: flex; flex-direction: column; transition: background 0.3s; }

/* --- Header Layout --- */
.app-header {
    height: 56px;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 12px;
    z-index: 10;
}

.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: max-content; }
.spacer { flex: 1; } /* Pushes right toolbar to the end */
.divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }

/* Control Groups */
.control-group { display: flex; align-items: center; gap: 8px; }
.main-controls { flex: 2; max-width: 600px; }

/* Inputs */
.input-wrapper { flex: 1; position: relative; display: flex; align-items: center; }
#urlInput {
    width: 100%;
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 7px 30px 7px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: var(--font-mono);
    transition: border-color 0.2s;
}
#urlInput:focus { border-color: var(--primary); }

.input-compact {
    background: var(--bg-app);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    width: 140px;
    font-family: var(--font-mono);
}
.input-compact:focus { color: var(--text-main); border-color: var(--primary); width: 180px; transition: width 0.2s; }

/* Buttons */
.primary-btn {
    background: var(--primary); color: white; border: none; padding: 0 12px;
    border-radius: 6px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px;
    font-size: 0.85rem; height: 32px; white-space: nowrap;
}
.primary-btn:hover { background: var(--primary-hover); }
.primary-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.icon-btn {
    background: transparent; border: none; color: var(--text-muted);
    cursor: pointer; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.icon-btn:hover, .icon-btn.active { color: var(--text-main); background: var(--border); }
.icon-btn.danger-hover:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.icon-btn-inner { position: absolute; right: 6px; background: none; border: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; }
.icon-btn-inner:hover { color: var(--text-main); }

.action-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-main);
    width: 32px; height: 32px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.action-btn:hover { border-color: var(--text-muted); }
.action-btn:disabled { opacity: 0.3; cursor: default; }

/* --- iOS Toggle Switches --- */
.toggle-wrapper { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-left: 4px; }
.label-text { font-size: 0.75rem; color: var(--text-muted); font-weight: 500; user-select: none; }

.switch { position: relative; display: inline-block; width: 32px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }

.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--border); transition: .3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; }

input:checked + .slider { background-color: var(--primary); }
input:checked + .slider:before { transform: translateX(14px); }

/* --- Dropdowns & Toolbar Right --- */
.dropdown-menu {
    position: absolute; top: 100%; left: 0; width: 100%;
    background: var(--bg-header); border: 1px solid var(--border);
    border-radius: 6px; margin-top: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 100; max-height: 300px; overflow-y: auto;
}
.dropdown-item { padding: 8px 12px; cursor: pointer; font-size: 0.85rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; }
.dropdown-item:hover { background: var(--bg-app); }
.remove-hist { color: var(--danger); font-weight: bold; }

.toolbar-right { display: flex; align-items: center; gap: 8px; }
.device-switcher { display: flex; background: var(--bg-app); border-radius: 6px; padding: 2px; border: 1px solid var(--border); }
.device-switcher button {
    background: transparent; border: none; padding: 4px 8px; cursor: pointer; color: var(--text-muted); border-radius: 4px;
}
.device-switcher button.active { background: var(--bg-header); color: var(--text-main); box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

/* --- Workspace & Preview --- */
.workspace { display: flex; height: calc(100vh - 56px); overflow: hidden; }
.preview-pane { flex: 1; background: #000; display: flex; justify-content: center; align-items: center; position: relative; overflow: auto; background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px; }
.preview-wrapper { width: 100%; height: 100%; transition: all 0.3s ease; display: flex; flex-direction: column; background: white; box-shadow: 0 0 50px rgba(0,0,0,0.5); }
.preview-wrapper[style*="768px"] { height: 90%; border-radius: 12px; border: 8px solid #333; }
.preview-wrapper[style*="375px"] { height: 80%; border-radius: 20px; border: 8px solid #333; }

.sandbox-container { width: 100%; height: 100%; border: none; display: flex; align-items: center; justify-content: center; position: relative; }
.empty-state { text-align: center; color: var(--text-muted); opacity: 0.7; pointer-events: none; }
.empty-icon { font-size: 3rem; margin-bottom: 0.5rem; opacity: 0.5; }

/* --- Inspector --- */
.inspector-pane {
    width: 280px; background: var(--bg-panel); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; transition: margin-right 0.3s ease;
}
.inspector-pane.collapsed { margin-right: -280px; }
.inspector-header { height: 36px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.badge { background: var(--border); padding: 2px 6px; border-radius: 10px; font-size: 0.7rem; }
.inspector-content { flex: 1; overflow-y: auto; padding: 8px; }
.resource-item { padding: 6px; margin-bottom: 4px; border-radius: 4px; background: var(--bg-app); border: 1px solid var(--border); font-size: 0.75rem; display: flex; align-items: center; gap: 8px; }
.resource-item.type-img { border-left: 3px solid var(--accent); }
.resource-item.type-css { border-left: 3px solid #3b82f6; }
.resource-item.type-js { border-left: 3px solid #eab308; }
.res-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); }
.info-item { padding: 10px; font-size: 0.8rem; color: var(--text-muted); text-align: center; }

/* Progress */
.progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--accent); transition: width 0.2s ease; z-index: 999; }
.hidden { display: none !important; }

/* Responsive Media Queries */
@media (max-width: 900px) {
    .settings-group { display: none; } /* Hide settings on small screens or move to menu */
    .brand-text { display: none; }
}