:root { --bg-color: #121212; --surface-color: #1e1e1e; --primary-color: #bb86fc; --primary-hover: #9965f4; --text-color: #e0e0e0; --text-muted: #a0a0a0; --danger-color: #cf6679; --arena-grid: #333; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); color: var(--text-color); margin: 0; display: flex; min-height: 100vh; }
.login-container { margin: auto; background-color: var(--surface-color); padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); text-align: center; border: 1px solid #333; width: 90%; max-width: 380px; box-sizing: border-box; }
input[type="password"], input[type="text"], input[type="url"], input[type="number"], select, textarea { width: 100%; padding: 10px; margin: 10px 0; background-color: var(--bg-color); border: 1px solid #333; color: var(--text-color); border-radius: 5px; box-sizing: border-box; font-size: 16px;}
button { background-color: var(--primary-color); color: #000; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; margin-top: 10px; transition: 0.2s; }
button:hover { background-color: var(--primary-hover); }
.password-container { position: relative; width: 100%; margin: 10px 0; }
.password-container input { width: 100%; padding-right: 40px; margin: 0; }
.toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-color); cursor: pointer; font-size: 18px; padding: 0; width: auto; margin: 0; }
input[type="password"]::-ms-reveal, input[type="password"]::-ms-clear { display: none; }
.sidebar { width: 250px; background-color: var(--surface-color); padding: 20px; box-shadow: 2px 0 5px rgba(0,0,0,0.5); display: flex; flex-direction: column; z-index: 5; }
.sidebar-logo { width: 100%; display: flex; justify-content: center; margin-bottom: 10px; }
.menu-item { display: block; color: var(--text-color); text-decoration: none; padding: 10px; margin: 5px 0; border-radius: 5px; transition: 0.3s; }
.menu-item:hover, .menu-item.active { background-color: #333; color: var(--primary-color); }
.main-content { flex: 1; padding: 40px; overflow-y: auto; box-sizing: border-box; }
.header-flex { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;}
.badge { background-color: var(--primary-color); color: black; padding: 3px 10px; border-radius: 15px; font-size: 12px; font-weight: bold; display: inline-block; margin-bottom: 10px; }
.btn-back { background-color: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 8px 15px; border-radius: 8px; text-decoration: none; font-weight: bold; display: inline-block; margin-bottom: 20px; transition: 0.3s; }
.btn-back:hover { background-color: var(--primary-color); color: #000; }
.btn-mini { background: transparent; border-radius: 5px; padding: 6px 10px; font-size: 13px; cursor: pointer; border: 1px solid #555; color: var(--text-color); font-weight: bold; width: auto; margin-top: 0; display: inline-flex; align-items: center; justify-content: center;}
.btn-mini:hover { background-color: #333; }
.btn-mini-danger { color: #cf6679; border-color: #cf6679; }
.btn-mini-danger:hover { background-color: #cf6679; color: #000; }
.btn-icon { padding: 4px 8px; font-size: 14px; border: 1px solid #444; background: #222; border-radius: 4px; color: white; cursor: pointer; }
.btn-icon:hover { background: var(--primary-color); color: black; border-color: var(--primary-color); }
.btn-add-link { background-color: var(--primary-color); color: #000; padding: 10px 20px; border-radius: 8px; font-weight: bold; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: 0.2s;}
.btn-add-link:hover { background-color: var(--primary-hover); transform: scale(1.02); }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; }
.folder-wrapper { background-color: var(--surface-color); border-radius: 10px; border: 1px solid #333; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; overflow: hidden;}
.folder-wrapper:hover { box-shadow: 0 5px 15px rgba(187, 134, 252, 0.2); border-color: var(--primary-color); }
.folder { padding: 20px; text-align: center; cursor: pointer; text-decoration: none; color: var(--text-color); display: block; flex: 1;}
.folder-icon { font-size: 40px; margin-bottom: 10px; }
.folder-actions { background: #1a1a1a; padding: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; border-top: 1px solid #333; }
.file-item { display: flex; justify-content: space-between; align-items: center; background-color: var(--surface-color); padding: 15px; margin-top: 10px; border-radius: 8px; border: 1px solid #333; flex-wrap: wrap; gap: 10px;}
.file-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.dropzone { border: 2px dashed #333; border-radius: 10px; padding: 40px; text-align: center; margin-top: 30px; background-color: rgba(30, 30, 30, 0.5); transition: 0.3s; cursor: pointer; }
.dropzone.dragover { border-color: var(--primary-color); background-color: rgba(187, 134, 252, 0.1); }
.modal { display: none; position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); overflow-y: auto;}
.modal-content { background-color: var(--surface-color); margin: 5% auto; padding: 20px; border: 1px solid #333; width: 90%; max-width: 500px; border-radius: 10px; box-sizing: border-box; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
.close:hover { color: white; }
.classes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: left; margin: 10px 0 20px 0; background: var(--bg-color); padding: 15px; border-radius: 8px; border: 1px solid #333; max-height: 150px; overflow-y: auto;}
.classes-grid label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;}
.classes-grid input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer;}
.form-label { display: block; text-align: left; font-size: 14px; color: var(--primary-color); margin-top: 15px; font-weight: bold;}
.emoji-picker { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; background: var(--bg-color); padding: 10px; border-radius: 5px; border: 1px solid #333; margin-top: 5px; margin-bottom: 10px;}
.emoji-btn { background: transparent; border: none; font-size: 20px; cursor: pointer; padding: 3px; width: auto; margin: 0; transition: transform 0.2s;}
.emoji-btn:hover { transform: scale(1.4); background: transparent; }

/* JELVÉNYRENDSZER */
.student-row { display: flex; justify-content: space-between; align-items: center; background-color: var(--surface-color); padding: 15px; margin-bottom: 10px; border-radius: 8px; border: 1px solid #333; flex-wrap: wrap; gap: 10px; transition: 0.3s;}
.student-name { font-size: 18px; font-weight: bold; min-width: 150px; display: flex; align-items: center; gap: 10px;}
.badges-display { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; flex: 1; }
.rank-badge { display: inline-block; min-width: 25px; color: var(--text-muted); font-weight: bold; font-size: 18px; margin-right: 5px; }
.rank-1 { color: #FFD700; text-shadow: 0 0 10px rgba(255,215,0,0.5); font-size: 22px; }
.rank-2 { color: #C0C0C0; text-shadow: 0 0 8px rgba(192,192,192,0.5); font-size: 20px; }
.rank-3 { color: #cd7f32; text-shadow: 0 0 8px rgba(205,127,50,0.5); font-size: 20px; }
.student-row.top-1 { border-color: #FFD700; background: rgba(255,215,0,0.03); }
.student-row.top-2 { border-color: #9E9E9E; background: rgba(192,192,192,0.03); }
.student-row.top-3 { border-color: #cd7f32; background: rgba(205,127,50,0.03); }
.custom-badge { height: 40px; width: auto; filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4)); margin: 0 2px; }
.custom-five { height: 50px; width: auto; filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.6)); margin-left: 10px;}
.badge-group { display: inline-flex; align-items: center; border: 2px solid rgba(255, 215, 0, 0.5); border-radius: 12px; padding: 5px 10px; background: rgba(255, 215, 0, 0.05); position: relative; margin-right: 5px;}
.badge-group.entered { border-color: #03dac6; background: rgba(3, 218, 198, 0.05); opacity: 0.8; }
.entered-mark { position: absolute; top: -10px; right: -10px; background: #03dac6; color: #000; border-radius: 50%; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: bold; box-shadow: 0 0 8px rgba(0,0,0,0.8); z-index: 2;}
.badge-controls { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end;}
.btn-kreta, .btn-kreta-undo { border-radius: 5px; font-size: 12px; font-weight: bold; cursor: pointer; padding: 6px 10px; }
.btn-kreta { background: #03dac6; color: black; border: none; }
.btn-kreta-undo { background: transparent; border: 1px solid #cf6679; color: #cf6679; }

/* ALGORITMUS ARÉNA */
.arena-container { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.level-card { background: var(--surface-color); border: 1px solid #333; border-radius: 10px; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.3s;}
.level-info h3 { margin: 0 0 5px 0; color: var(--primary-color); }
.level-info p { margin: 0; font-size: 14px; color: var(--text-muted); }
.editor-layout { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.editor-tools { background: var(--surface-color); padding: 20px; border-radius: 10px; border: 1px solid #333; flex: 1; min-width: 300px; display: flex; flex-direction: column;}
.editor-canvas-container { background: var(--surface-color); padding: 20px; border-radius: 10px; border: 1px solid #333; flex: 1; min-width: 300px; display: flex; justify-content: center; align-items: center; overflow: auto; position: relative; flex-direction: column;}
.arena-grid { display: grid; border: 2px solid var(--arena-grid); background-color: #222; background-size: cover; background-position: center; position: relative;}
.arena-cell { width: 50px; height: 50px; border: 1px solid var(--arena-grid); display: flex; justify-content: center; align-items: center; font-size: 30px; cursor: pointer; user-select: none; background: rgba(0,0,0,0.3); position: relative; }
.arena-cell img { max-width: 90%; max-height: 90%; pointer-events: none; }

.robot-cell { z-index: 10; transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; position: absolute; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 30px; }
.robot-arrow { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); color: #ff0000; font-size: 22px; font-weight: 900; text-shadow: 0px 0px 5px white, 0px 0px 5px white, 0px 0px 5px white; z-index: 100; pointer-events: none; line-height: 1;}

.palette-items { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.brush { width: 45px; height: 45px; background: #222; border: 2px solid #444; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 25px; cursor: pointer; }
.brush[data-type="empty"] { font-size: 13px; font-weight: bold; }
.brush.active { border-color: #03dac6; box-shadow: 0 0 10px #03dac6; background: rgba(3, 218, 198, 0.2); }
.brush img { max-width: 80%; max-height: 80%; }
.custom-brush-container { position: relative; display: inline-block; }
.del-brush-btn { position: absolute; top: -5px; right: -5px; background: #cf6679; color: black; border-radius: 50%; width: 18px; height: 18px; font-size: 12px; display: flex; justify-content: center; align-items: center; cursor: pointer; display: none; z-index: 10; border: 1px solid black; font-weight: bold;}
.custom-brush-container:hover .del-brush-btn { display: flex; }

/* SCRATCH SZERŰ BLOKKPROGRAMOZÁS */
.tabs { display: flex; gap: 10px; margin-bottom: 15px; border-bottom: 2px solid #333; padding-bottom: 10px; }
.tab-btn { background: transparent; color: var(--text-muted); border: 2px solid transparent; padding: 10px 20px; font-size: 14px; cursor: pointer; border-radius: 8px; font-weight: bold; flex: 1;}
.tab-btn.active { color: var(--primary-color); border-color: var(--primary-color); background: rgba(187, 134, 252, 0.1); }
.tab-content { display: none; background: #222; padding: 20px; border-radius: 8px; border: 1px solid #333; flex: 1; overflow-y: auto;}
.tab-content.active { display: flex; flex-direction: column; }
.code-textarea { font-family: 'Courier New', Courier, monospace; font-size: 16px; letter-spacing: 2px; background: #111; border-color: #444; color: #03dac6; width: 100%; box-sizing: border-box; flex: 1; resize: vertical; min-height: 200px;}

.blocks-palette { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed #555; }
.blocks-workspace { background: #111; flex: 1; min-height: 250px; border: 2px solid #444; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; overflow-y: auto;}
.blocks-workspace.dragover { border-color: var(--primary-color); background: rgba(187, 134, 252, 0.1); }

/* LEGO BLOKKOK */
.scratch-block { color: white; padding: 10px 15px; border-radius: 5px; font-weight: bold; cursor: grab; display: inline-flex; align-items: center; gap: 5px; user-select: none; border-bottom: 3px solid rgba(0,0,0,0.3); margin-bottom: 2px; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.scratch-block:active { cursor: grabbing; opacity: 0.8; }
.scratch-cmd { background-color: #4C97FF; } /* Kék mozgás */
.scratch-loop { background-color: #FF9900; flex-direction: column; align-items: flex-start; padding: 10px; width: 100%; box-sizing: border-box; max-width: 300px;}
.loop-header { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.loop-count { width: 40px !important; text-align: center; border: none !important; border-radius: 15px !important; padding: 4px !important; font-weight: bold; margin: 0 !important; font-size: 14px !important; background: white; color: black;}
.inner-dropzone { min-height: 40px; background: rgba(0,0,0,0.2); border-left: 3px solid rgba(255,255,255,0.3); width: calc(100% - 10px); margin-left: 10px; padding: 5px 0 5px 10px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; box-sizing: border-box;}
.inner-dropzone.dragover { background: rgba(255,255,255,0.1); }

/* SZEMETES */
.trash-zone { border: 2px dashed #cf6679; background: rgba(207, 102, 121, 0.05); color: #cf6679; text-align: center; padding: 15px; border-radius: 8px; margin-top: 15px; font-weight: bold; transition: 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px;}
.trash-zone.dragover { background: rgba(207, 102, 121, 0.3); border-style: solid; transform: scale(1.02); }

.online-counter { position: fixed; top: 20px; right: 20px; background-color: rgba(46, 204, 113, 0.3); color: #003300; padding: 12px 20px; border-radius: 8px; z-index: 9999; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.3); backdrop-filter: blur(5px); border: 1px solid rgba(46, 204, 113, 0.6); pointer-events: none; }
.online-counter-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; border-bottom: 1px solid rgba(0, 51, 0, 0.3); padding-bottom: 3px; }

@media (max-width: 768px) {
    body { flex-direction: column; }
    .sidebar { width: 100%; box-sizing: border-box; padding: 15px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
    .main-content { padding: 15px; width: 100%; }
    .editor-layout { flex-direction: column; }
    .arena-cell, .robot-cell { width: 40px; height: 40px; font-size: 24px; }
    .online-counter { top: 10px; right: 10px; padding: 8px 12px; font-size: 13px; }
}