:root {
    --bg-color: #f4f5f7;
    --primary-color: #800080; /* Lila */
    --primary-hover: #5c005c;
    --text-color: #111; /* Fekete */
    --error-color: #d32f2f;
    --success-color: #388e3c;
    --panel-bg: #ffffff;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

body { background-color: var(--bg-color); color: var(--text-color); line-height: 1.6; padding: 20px; display: flex; justify-content: center; }

.container { max-width: 800px; width: 100%; background: var(--panel-bg); padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

header h1 { color: var(--primary-color); text-align: center; border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 20px; }

.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 30px; }

.input-group { display: flex; flex-direction: column; }
.input-group label { font-weight: 600; margin-bottom: 5px; font-size: 0.9rem; }
.input-group input, .input-group select { padding: 10px; border: 1px solid #ccc; border-radius: 6px; outline: none; }
.input-group input:focus, .input-group select:focus { border-color: var(--primary-color); }

.btn { padding: 12px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; text-transform: uppercase; transition: background 0.3s; }
.btn.primary { background: var(--primary-color); color: white; margin-top: auto; }
.btn.primary:hover { background: var(--primary-hover); }
.btn.secondary { background: var(--text-color); color: white; width: 100%; margin-top: 20px; }
.btn.secondary:hover { background: #333; }

.hidden { display: none !important; }

#taskSection { background: var(--bg-color); padding: 20px; border-radius: 8px; border-left: 5px solid var(--primary-color); }

.canvas-container { display: flex; justify-content: center; align-items: center; min-height: 200px; margin: 20px 0; }

#shapeVisual { border: 2px solid var(--text-color); position: relative; background-color: rgba(128, 0, 128, 0.1); }
.side-label { position: absolute; font-weight: bold; background: rgba(255,255,255,0.8); padding: 2px 5px; border-radius: 4px; white-space: nowrap;}
.label-top { top: -25px; left: 50%; transform: translateX(-50%); }
.label-right { right: -40px; top: 50%; transform: translateY(-50%); }

.inputs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }
.answer-group { display: flex; flex-direction: column; gap: 5px; }
.answer-group label { font-weight: bold; font-size: 0.9rem; }
.input-wrapper { display: flex; align-items: center; gap: 10px; }
.input-wrapper input { flex: 1; padding: 10px; border: 1px solid #aaa; border-radius: 4px; font-size: 1rem; }
.unit-label { font-weight: bold; color: var(--primary-color); min-width: 40px; }

.feedback-item { margin-top: 15px; padding: 15px; border-radius: 6px; }
.feedback-item.success { background-color: #e8f5e9; border: 1px solid var(--success-color); }
.feedback-item.error { background-color: #ffebee; border: 1px solid var(--error-color); }
.feedback-icon { font-size: 1.5rem; margin-right: 10px; vertical-align: middle; }
.explanation { margin-top: 10px; font-family: monospace; background: #fff; padding: 10px; border-left: 3px solid var(--error-color); font-size: 1rem; }