@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&display=swap');

:root {
  --bg-deep: #0a0a0f; --bg-panel: rgba(25, 25, 35, 0.6); --bg-card: rgba(40, 40, 55, 0.4); --bg-editor: #1e1e2e;
  --accent-primary: #5eead4; --accent-secondary: #c084fc; --text: #f8fafc; --text-muted: #94a3b8;
  --success: #4ade80; --error: #f87171; --warning: #fbbf24; --radius: 12px; --radius-sm: 8px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.3); --border-color: rgba(255,255,255,0.05);
  --font: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; --border-thick: none; --pop-shadow: none;
}

[data-theme="light"] {
  --bg-deep: #f1f5f9; --bg-panel: rgba(255, 255, 255, 0.8); --bg-card: rgba(255, 255, 255, 0.6); --bg-editor: #ffffff;
  --accent-primary: #0d9488; --accent-secondary: #7c3aed; --text: #0f172a; --text-muted: #64748b;
  --success: #16a34a; --error: #dc2626; --shadow: 0 4px 20px rgba(0, 0, 0, 0.1); --border-color: rgba(0,0,0,0.05);
}

[data-theme="kids"] {
  --bg-deep: #fff9e6; --bg-panel: rgba(255, 255, 255, 0.95); --bg-card: #ffffff; --bg-editor: #fffdf5;
  --accent-primary: #ff5e7e; --accent-secondary: #4dabf7; --text: #1a1a1a; --text-muted: #555555;
  --success: #51cf66; --error: #ff6b6b; --radius: 16px; --radius-sm: 12px; --shadow: 4px 4px 0px #1a1a1a;
  --border-color: #1a1a1a; --font: 'Baloo 2', cursive; --mono: 'JetBrains Mono', monospace;
  --border-thick: 3px solid var(--border-color); --pop-shadow: 4px 4px 0px #1a1a1a;
}

body { margin: 0; font-family: var(--font); background-color: var(--bg-deep); color: var(--text); overflow: hidden; transition: background-color 0.3s; }
.app { display: flex; flex-direction: column; height: 100vh; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(10px); }
.logo-text { font-weight: 800; font-size: 1.5rem; }
.logo-text span { color: var(--accent-primary); }

.xp-bar-wrap { display: flex; align-items: center; gap: 0.75rem; flex: 1; max-width: 400px; margin: 0 2rem; }
.level-badge { background: var(--accent-secondary); color: #000; font-weight: 800; padding: 0.25rem 0.75rem; border-radius: var(--radius-sm); font-size: 0.85rem; border: var(--border-thick); box-shadow: var(--pop-shadow); }
.xp-bar { flex: 1; height: 12px; background: var(--bg-card); border-radius: 6px; overflow: hidden; border: var(--border-thick); }
.xp-fill { height: 100%; background: var(--accent-primary); width: 0%; transition: width 0.3s ease; }
.xp-text { font-size: 0.85rem; color: var(--text-muted); min-width: 50px; font-weight: 700; }
.topbar-actions { display: flex; gap: 0.5rem; }

.btn { font-family: var(--font); font-weight: 700; font-size: 0.875rem; padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: var(--border-thick); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.1s; box-shadow: var(--pop-shadow); gap: 0.3rem; }
.btn-run { background: var(--accent-primary); color: #000; }
.btn-submit { background: var(--success); color: #000; font-size: 1rem; padding: 0.6rem 1.5rem; }
.btn-secondary { background: var(--bg-card); color: var(--text); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #1a1a1a; }
.btn:active { transform: translate(4px, 4px); box-shadow: 0px 0px 0px #1a1a1a; }

.main-layout { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 300px; background: var(--bg-panel); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; }
.sidebar-nav { display: flex; padding: 1rem; gap: 0.25rem; border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.nav-btn { flex: 1; background: none; border: none; color: var(--text-muted); padding: 0.5rem; border-radius: var(--radius-sm); cursor: pointer; font-weight: 700; font-size: 0.85rem; transition: all 0.2s; }
.nav-btn.active { background: var(--bg-card); color: var(--text); border: var(--border-thick); box-shadow: var(--pop-shadow); }
.panel { flex: 1; overflow-y: auto; padding: 1rem; }
.panel-title { margin-top: 0; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 800; }

.lessons-list { display: flex; flex-direction: column; gap: 0.5rem; }
.lesson-card { background: var(--bg-card); padding: 1rem; border-radius: var(--radius-sm); border: var(--border-thick); cursor: pointer; transition: all 0.1s; box-shadow: var(--pop-shadow); }
.lesson-card:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #1a1a1a; }
.lesson-card h4 { margin: 0 0 0.25rem 0; font-size: 1.1rem; }
.lesson-card p { margin: 0; font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.lesson-card.active { background: var(--accent-secondary); color: #000; }
.lesson-card.active p { color: #333; }
.lesson-card.done { border-left: 8px solid var(--success); }

.file-tree { display: flex; flex-direction: column; gap: 0.2rem; }
.tree-item { padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; font-family: var(--mono); font-size: 0.85rem; transition: background 0.2s; font-weight: 600; }
.tree-item:hover { background: var(--bg-card); }
.tree-item.active { background: var(--accent-primary); color: #000; border-radius: 6px; }
.tree-item i.fa-file-code, .tree-item i.fa-folder { margin-right: 0.5rem; width: 16px; text-align: center; }
.tree-item .file-actions { margin-left: auto; display: flex; gap: 0.5rem; opacity: 0; transition: opacity 0.2s; }
.tree-item:hover .file-actions { opacity: 1; }
.tree-item .file-actions i { color: var(--text-muted); padding: 0 2px; }
.tree-item .file-actions i:hover { color: var(--accent-primary); }
.tree-item .file-actions i.delete-folder-btn:hover, .tree-item .file-actions i.delete-file-btn:hover { color: var(--error); }
.tree-folder { color: var(--accent-secondary); font-weight: 700; }
.tree-folder i.fa-chevron-down { margin-right: 0.5rem; font-size: 0.7rem; transition: transform 0.2s; }
.tree-folder.collapsed i.fa-chevron-down { transform: rotate(-90deg); }

.badges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.badge-item { background: var(--bg-card); padding: 0.75rem; border-radius: var(--radius-sm); text-align: center; border: var(--border-thick); box-shadow: var(--pop-shadow); }
.badge-item h4 { margin: 0 0 0.25rem 0; font-size: 1rem; }
.badge-item p { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.badge-item.locked { opacity: 0.4; filter: grayscale(100%); }

.achievement-item { background: var(--bg-card); padding: 0.75rem; border-radius: var(--radius-sm); display: flex; justify-content: space-between; align-items: center; border: var(--border-thick); box-shadow: var(--pop-shadow); margin-bottom: 0.5rem; }
.achievement-item.locked { opacity: 0.3; }
.achievement-item.earned { border-left: 8px solid var(--success); }
.achievement-info h4 { margin: 0 0 0.25rem 0; font-size: 1rem; }
.achievement-info p { margin: 0; font-size: 0.75rem; color: var(--text-muted); }
.achievement-xp { font-weight: 800; color: var(--accent-primary); font-size: 1rem; }

.current-lesson-hint { margin-top: 1.5rem; background: var(--bg-card); border: var(--border-thick); padding: 1rem; border-radius: var(--radius-sm); box-shadow: var(--pop-shadow); }
.current-lesson-hint h4 { margin: 0 0 0.5rem 0; color: var(--accent-secondary); font-size: 1.1rem; }
.current-lesson-hint p { margin: 0; font-size: 0.9rem; }

.workspace { flex: 1; display: flex; flex-direction: column; background: var(--bg-editor); overflow: hidden; }
.editor-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 1rem; background: var(--bg-panel); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; gap: 0.5rem; }
.file-tab { font-family: var(--mono); font-size: 0.85rem; padding: 0.25rem 0.75rem; background: var(--bg-card); color: var(--text); border-radius: var(--radius-sm); border: var(--border-thick); font-weight: 600; }

.editor-status { font-size: 0.8rem; color: var(--text-muted); margin-right: 1rem; font-weight: 600; }
.editor-wrap { flex: 1; position: relative; min-height: 200px; }
.editor-wrap .CodeMirror { height: 100% !important; font-family: var(--mono); font-size: 14px; background: transparent !important; }
.CodeMirror .cm-error-line { background-color: rgba(248, 113, 113, 0.2) !important; border-left: 3px solid var(--error); }

.CodeMirror-hints { background: var(--bg-panel); border: 2px solid var(--border-color); border-radius: 8px; box-shadow: var(--pop-shadow); font-family: var(--mono); z-index: 10000; padding: 0; }
.CodeMirror-hint { color: var(--text); padding: 4px 8px; font-weight: 600; }
li.CodeMirror-hint-active { background: var(--accent-primary); color: #000; border-radius: 4px; }

.console { height: 250px; background: var(--bg-deep); display: flex; flex-direction: column; border-top: 1px solid var(--border-color); }
.console-header { display: flex; justify-content: space-between; padding: 0.5rem 1rem; background: var(--bg-panel); font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.btn-clear { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; font-weight: 700; }
.console-body { flex: 1; overflow-y: auto; padding: 1rem; font-family: var(--mono); font-size: 13px; }
.console-welcome { color: var(--text-muted); }
.console-line { margin-bottom: 0.2rem; white-space: pre-wrap; }
.console-line.stderr { color: var(--error); }
.console-line.success { color: var(--success); }
.console-line.debug { color: var(--warning); font-weight: bold; }
.code-explanation { background: var(--bg-card); color: var(--text); padding: 1rem; border-radius: 8px; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.85rem; white-space: pre-wrap; border: 2px solid var(--accent-secondary); }

.modal { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); }
.modal-content { position: relative; background: var(--bg-panel); padding: 2rem; border-radius: var(--radius); text-align: center; border: var(--border-thick); max-width: 90%; box-shadow: var(--pop-shadow); }

.project-list-item { background: var(--bg-card); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: var(--border-thick); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.1s; box-shadow: var(--pop-shadow); }
.project-list-item:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #1a1a1a; }
.project-list-item .delete-project-btn { color: var(--text-muted); opacity: 0.5; }
.project-list-item .delete-project-btn:hover { color: var(--error); opacity: 1; }

.toast { background: var(--bg-panel); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-primary); padding: 1rem 1.5rem; border-radius: 8px; box-shadow: var(--shadow); color: var(--text); font-weight: 600; min-width: 200px; animation: slideIn 0.3s ease; }
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--error); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.loading { position: fixed; inset: 0; background: var(--bg-deep); z-index: 2000; display: flex; align-items: center; justify-content: center; }
.loading-content { text-align: center; }
.loading-spinner { width: 40px; height: 40px; border: 4px solid var(--bg-card); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 1rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }

.hidden { display: none !important; }