:root{--bg:#f4f6f9;--card:#fff;--text:#2c3e50;--accent:#2ecc71;--border:#ddd;--shadow:0 8px 25px rgba(0,0,0,.1)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;user-select:none}
.container{max-width:1200px;margin:auto;padding:20px}
header{text-align:center;margin-bottom:30px;padding:20px;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
header h1{font-size:2rem}
header p{color:#7f8c8d;margin-top:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.img-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);transition:.3s;cursor:pointer}
.img-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,.15)}
.img-thumb{width:100%;height:160px;object-fit:cover;pointer-events:none}
.img-title{padding:12px;font-weight:600;text-align:center;background:#f8f9fa;border-top:1px solid var(--border)}
.split-container{display:flex;height:100vh;overflow:hidden}

/* Modal e áreas do editor em preto estilizado */
#challenge-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:1000}
.split-pane{flex:1;display:flex;flex-direction:column;border:1px solid #20222a;background:#0b0b0e}
.image-pane{background:#0b0b0e;overflow-y:auto;overflow-x:hidden;padding:0;position:relative}
.image-wrapper{display:flex;justify-content:center;align-items:flex-start;min-height:100%;width:100%}
#challenge-image{display:block;max-width:100%;height:auto;pointer-events:none;user-select:none;-webkit-user-drag:none}
.code-pane{background:#0e0e12;display:flex;flex-direction:column}
.editor-header{padding:12px 16px;background:#0f1115;color:#c9d1d9;border-bottom:1px solid #1f232a;display:flex;justify-content:space-between}
#code-editor{flex:1}
.CodeMirror{height:100%; background:#0e0e12; color:#e5e7eb; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:14px;}
.CodeMirror-scroll{height:100%}
.cm-s-dracula.CodeMirror{background:#0e0e12; color:#e5e7eb}
.cm-s-dracula .CodeMirror-gutters{background:#0b0b0e; border-right:1px solid #1f232a}
.cm-s-dracula .CodeMirror-linenumber{color:#6b7280}
.cm-s-dracula .CodeMirror-cursor{border-left:2px solid #38bdf8}
.cm-s-dracula .CodeMirror-selected{background:rgba(59,130,246,.25)}
/* Paleta aproximada VS Code Dark+ (Python) */
.cm-s-dracula .cm-comment{color:#6A9955}
.cm-s-dracula .cm-keyword{color:#C586C0}
.cm-s-dracula .cm-def{color:#DCDCAA} /* nomes de funções/definições */
.cm-s-dracula .cm-atom{color:#569CD6} /* True/False/None etc. */
.cm-s-dracula .cm-number{color:#B5CEA8}
.cm-s-dracula .cm-variable{color:#D4D4D4}
.cm-s-dracula .cm-variable-2{color:#9CDCFE} /* parâmetros/variáveis especiais */
.cm-s-dracula .cm-variable-3{color:#4EC9B0} /* tipos/classes */
.cm-s-dracula .cm-string{color:#CE9178}
.cm-s-dracula .cm-operator{color:#D4D4D4}
.cm-s-dracula .cm-builtin{color:#569CD6} /* builtins/imports */
.cm-s-dracula .cm-property{color:#9CDCFE}
.cm-s-dracula .cm-meta{color:#C586C0}
.cm-s-dracula .cm-error{background:#7f1d1d; color:#FECACA}
.cm-s-dracula .CodeMirror-selected{background:#264F78}
.actions{padding:12px 16px;background:#0f1115;display:flex;gap:10px;align-items:center;border-top:1px solid #1f232a}
.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:.9rem}
.btn-check{background:#22c55e;color:#0b0b0e}
.btn-close{background:#2a2f3a;color:#e5e7eb}
.btn-download{background:#2563eb;color:#e5e7eb}
.btn-download:hover{background:#1e40af}
.feedback{margin-left:auto;padding:8px 12px;border-radius:6px;font-weight:600;min-width:180px;text-align:center}
.correct{background:#064e3b;color:#34d399;border:1px solid #065f46}
.partial{background:#3f2d0c;color:#fbbf24;border:1px solid #b45309}
.CodeMirror .highlight-error{background:rgba(255,215,0,.35)}
#printscreen-detected{display:none;position:fixed;inset:0;background:#000;color:#fff;font-size:2rem;text-align:center;padding-top:40vh;z-index:9999}