.sys-display { background: white; border-radius: 16px; padding: 25px; margin: 15px auto; max-width: 420px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align: center; }
.sys-eq { font-size: 1.4rem; font-weight: 800; font-family: 'Baloo 2', cursive; color: #283593; margin: 5px 0; letter-spacing: 1px; }
.sys-brace { font-size: 3rem; color: #9fa8da; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.sys-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 380px; margin: 15px auto; padding: 0 15px; }
.sys-opt { padding: 14px; border: 2px solid #c5cae9; border-radius: 14px; background: white; text-align: center; font-size: 1.15rem; font-family: 'Baloo 2', cursive; font-weight: 700; cursor: pointer; transition: all 0.2s; }
.sys-opt:hover { background: #e8eaf6; border-color: #5c6bc0; }
.sys-opt.correct { background: #e8f5e9; border-color: #4caf50; }
.sys-opt.wrong { background: #ffebee; border-color: #f44336; }
.sys-opt.disabled { pointer-events: none; opacity: 0.6; }